item

1import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2import { Polymorphic } from "@kobalte/core/polymorphic";
3 
4import type * as SeparatorPrimitive from "@kobalte/core/separator";
5import { cn } from "~/lib/utils.ts";
6import type { VariantProps } from "class-variance-authority";
7import { cva } from "class-variance-authority";
8import type { Component, ComponentProps, ValidComponent } from "solid-js";
9import { mergeProps, splitProps } from "solid-js";
10 
11import { Separator } from "./separator.tsx";
12 
13const ItemGroup: Component<ComponentProps<"div">> = (props) => {
14  const [local, others] = splitProps(props, ["class"]);
15  return (
16    <div
17      role="list"
18      data-slot="item-group"
19      class={cn(
20        "gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col",
21        local.class,
22      )}
23      {...others}
24    />
25  );
26};
27 
28type ItemSeparatorProps<T extends ValidComponent = "hr"> =
29  & SeparatorPrimitive.SeparatorRootProps<T>
30  & { class?: string | undefined };
31 
32const ItemSeparator = <T extends ValidComponent = "hr">(
33  props: PolymorphicProps<T, ItemSeparatorProps<T>>,
34) => {
35  const [local, others] = splitProps(props as ItemSeparatorProps, ["class"]);
36  return (
37    <Separator
38      data-slot="item-separator"
39      orientation="horizontal"
40      class={cn("my-2", local.class)}
41      {...others}
42    />
43  );
44};
45 
46const itemVariants = cva(
47  "rounded-lg border text-sm [a]:hover:bg-muted group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors",
48  {
49    variants: {
50      variant: {
51        default: "border-transparent",
52        outline: "border-border",
53        muted: "border-transparent bg-muted/50",
54      },
55      size: {
56        default: "gap-2.5 px-3 py-2.5",
57        sm: "gap-2.5 px-3 py-2.5",
58        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
59      },
60    },
61    defaultVariants: {
62      variant: "default",
63      size: "default",
64    },
65  },
66);
67 
68type ItemProps<T extends ValidComponent = "div"> =
69  & { as?: T; class?: string | undefined }
70  & VariantProps<typeof itemVariants>;
71 
72const Item = <T extends ValidComponent = "div">(
73  rawProps: PolymorphicProps<T, ItemProps<T>>,
74) => {
75  const props = mergeProps(
76    { variant: "default" as const, size: "default" as const },
77    rawProps,
78  );
79  const [local, others] = splitProps(props as ItemProps, [
80// … truncated