@kuzenbo/core 0.0.1-alpha.4 → 0.0.1

package/dist/input.d.ts

@@ -1,13 +1,46 @@
+import { t as UISize } from "./size-system-CMU68sQY.js";
+import * as tailwind_variants0 from "tailwind-variants";
+import { VariantProps } from "tailwind-variants";
 import { ComponentProps } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Input as Input$1 } from "@base-ui/react/input";
 
 //#region src/ui/input/input.d.ts
-type InputProps = ComponentProps<"input">;
-declare const Input: ({
-  className,
-  type,
-  ...props
-}: InputProps) => react_jsx_runtime0.JSX.Element;
+declare const inputVariants: tailwind_variants0.TVReturnType<{
+  size: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+  };
+}, undefined, "w-full min-w-0 border border-input bg-transparent transition-colors outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-[3px] aria-invalid:ring-danger/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-danger/50 dark:aria-invalid:ring-danger/40", {
+  size: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+  };
+}, undefined, tailwind_variants0.TVReturnType<{
+  size: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+  };
+}, undefined, "w-full min-w-0 border border-input bg-transparent transition-colors outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-[3px] aria-invalid:ring-danger/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-danger/50 dark:aria-invalid:ring-danger/40", unknown, unknown, undefined>>;
+type InputVariantProps = Omit<VariantProps<typeof inputVariants>, "size"> & {
+  size?: UISize;
+};
+type NativeInputProps = ComponentProps<typeof Input$1>;
+type NativeInputSize = NativeInputProps["size"];
+type InputSize = UISize;
+type InputProps = Omit<NativeInputProps, "size"> & InputVariantProps & {
+  htmlSize?: NativeInputSize;
+};
+declare const Input: (incomingProps: InputProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Input, InputProps };
+export { Input, InputProps, InputSize };
 //# sourceMappingURL=input.d.ts.map

package/dist/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","names":[],"sources":["../src/ui/input/input.tsx"],"mappings":";;;;KAKY,UAAA,GAAa,cAAA;AAAA,cAEnB,KAAA;EAAS,SAAA;EAAA,IAAA;EAAA,GAAA;AAAA,GAA+B,UAAA,KAAU,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"input.d.ts","names":[],"sources":["../src/ui/input/input.tsx"],"mappings":";;;;;;;;cAaM,aAAA,EAcJ,kBAAA,CAdiB,YAAA;;;;;;;;;;;;;;;;cAcjB,kBAAA,CAAA,YAAA;;;;;;;;;KAEG,iBAAA,GAAoB,IAAA,CAAK,YAAA,QAAoB,aAAA;EAChD,IAAA,GAAO,MAAA;AAAA;AAAA,KAEJ,gBAAA,GAAmB,cAAA,QAAsB,OAAA;AAAA,KACzC,eAAA,GAAkB,gBAAA;AAAA,KAEX,SAAA,GAAY,MAAA;AAAA,KAEZ,UAAA,GAAa,IAAA,CAAK,gBAAA,YAC5B,iBAAA;EACE,QAAA,GAAW,eAAA;AAAA;AAAA,cAGT,KAAA,GAAS,aAAA,EAAe,UAAA,KAAU,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/input.js

@@ -1,14 +1,36 @@
-import { cn } from "tailwind-variants";
+"use client";
+
+import { t as mergeBaseUIClassName } from "./merge-base-ui-class-name-u6eS5MaQ.js";
+import { a as useComponentSize } from "./size-provider-D2Fy00Ky.js";
+import { t as useInputDefaultProps } from "./use-input-default-props-DSeo88je.js";
+import { tv } from "tailwind-variants";
 import { jsx } from "react/jsx-runtime";
 import { Input as Input$1 } from "@base-ui/react/input";
 
 //#region src/ui/input/input.tsx
-const Input = ({ className, type, ...props }) => /* @__PURE__ */ jsx(Input$1, {
-	className: cn("h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-[3px] aria-invalid:ring-danger/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-danger/50 dark:aria-invalid:ring-danger/40", className),
-	"data-slot": "input",
-	type,
-	...props
+const inputVariants = tv({
+	base: "w-full min-w-0 border border-input bg-transparent transition-colors outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-[3px] aria-invalid:ring-danger/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-danger/50 dark:aria-invalid:ring-danger/40",
+	variants: { size: {
+		xs: "h-6 rounded-[min(var(--radius-md),8px)] px-2 py-0.5 text-xs file:h-5 file:text-xs",
+		sm: "h-8 rounded-[min(var(--radius-md),10px)] px-2.5 py-1 text-sm file:h-6 file:text-xs",
+		md: "h-9 rounded-md px-2.5 py-1 text-base file:h-7 file:text-sm md:text-sm",
+		lg: "h-10 rounded-md px-3 py-1.5 text-base file:h-8 file:text-sm md:text-sm",
+		xl: "h-11 rounded-md px-4 py-1.5 text-base file:h-8 file:text-base"
+	} },
+	defaultVariants: { size: "md" }
 });
+const Input = (incomingProps) => {
+	const { className, htmlSize, size: providedSize, type, ...props } = useInputDefaultProps(incomingProps);
+	const size = useComponentSize(providedSize);
+	return /* @__PURE__ */ jsx(Input$1, {
+		className: mergeBaseUIClassName(inputVariants({ size }), className),
+		"data-size": size,
+		"data-slot": "input",
+		size: htmlSize,
+		type,
+		...props
+	});
+};
 
 //#endregion
 export { Input };

package/dist/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":["InputPrimitive"],"sources":["../src/ui/input/input.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\n\nimport { Input as InputPrimitive } from \"@base-ui/react/input\";\nimport { cn } from \"tailwind-variants\";\n\nexport type InputProps = ComponentProps<\"input\">;\n\nconst Input = ({ className, type, ...props }: InputProps) => (\n  <InputPrimitive\n    className={cn(\n      \"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-[3px] aria-invalid:ring-danger/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-danger/50 dark:aria-invalid:ring-danger/40\",\n      className\n    )}\n    data-slot=\"input\"\n    type={type}\n    {...props}\n  />\n);\n\nexport { Input };\n"],"mappings":";;;;;AAOA,MAAM,SAAS,EAAE,WAAW,MAAM,GAAG,YACnC,oBAACA;CACC,WAAW,GACT,moBACA,UACD;CACD,aAAU;CACJ;CACN,GAAI;EACJ"}
+{"version":3,"file":"input.js","names":["InputPrimitive"],"sources":["../src/ui/input/input.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps } from \"react\";\n\nimport { Input as InputPrimitive } from \"@base-ui/react/input\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport type { UISize } from \"../shared/size/size-system\";\n\nimport { mergeBaseUIClassName } from \"../../utils/merge-base-ui-class-name\";\nimport { useComponentSize } from \"../shared/size/size-provider\";\nimport { useInputDefaultProps } from \"./use-input-default-props\";\n\nconst inputVariants = tv({\n  base: \"w-full min-w-0 border border-input bg-transparent transition-colors outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-[3px] aria-invalid:ring-danger/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-danger/50 dark:aria-invalid:ring-danger/40\",\n  variants: {\n    size: {\n      xs: \"h-6 rounded-[min(var(--radius-md),8px)] px-2 py-0.5 text-xs file:h-5 file:text-xs\",\n      sm: \"h-8 rounded-[min(var(--radius-md),10px)] px-2.5 py-1 text-sm file:h-6 file:text-xs\",\n      md: \"h-9 rounded-md px-2.5 py-1 text-base file:h-7 file:text-sm md:text-sm\",\n      lg: \"h-10 rounded-md px-3 py-1.5 text-base file:h-8 file:text-sm md:text-sm\",\n      xl: \"h-11 rounded-md px-4 py-1.5 text-base file:h-8 file:text-base\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\ntype InputVariantProps = Omit<VariantProps<typeof inputVariants>, \"size\"> & {\n  size?: UISize;\n};\ntype NativeInputProps = ComponentProps<typeof InputPrimitive>;\ntype NativeInputSize = NativeInputProps[\"size\"];\n\nexport type InputSize = UISize;\n\nexport type InputProps = Omit<NativeInputProps, \"size\"> &\n  InputVariantProps & {\n    htmlSize?: NativeInputSize;\n  };\n\nconst Input = (incomingProps: InputProps) => {\n  const {\n    className,\n    htmlSize,\n    size: providedSize,\n    type,\n    ...props\n  } = useInputDefaultProps(incomingProps);\n  const size = useComponentSize(providedSize);\n\n  return (\n    <InputPrimitive\n      className={mergeBaseUIClassName<InputPrimitive.State>(\n        inputVariants({ size }),\n        className\n      )}\n      data-size={size}\n      data-slot=\"input\"\n      size={htmlSize}\n      type={type}\n      {...props}\n    />\n  );\n};\n\nexport { Input };\n"],"mappings":";;;;;;;;;;AAaA,MAAM,gBAAgB,GAAG;CACvB,MAAM;CACN,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CAAC;AAeF,MAAM,SAAS,kBAA8B;CAC3C,MAAM,EACJ,WACA,UACA,MAAM,cACN,MACA,GAAG,UACD,qBAAqB,cAAc;CACvC,MAAM,OAAO,iBAAiB,aAAa;AAE3C,QACE,oBAACA;EACC,WAAW,qBACT,cAAc,EAAE,MAAM,CAAC,EACvB,UACD;EACD,aAAW;EACX,aAAU;EACV,MAAM;EACA;EACN,GAAI;GACJ"}

package/dist/item-title-BEt0xgK_.d.ts

@@ -0,0 +1,91 @@
+import { Separator } from "./separator.js";
+import * as tailwind_variants0 from "tailwind-variants";
+import { VariantProps } from "tailwind-variants";
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/item/item-actions.d.ts
+type ItemActionsProps = ComponentProps<"div">;
+declare const ItemActions: ({
+  className,
+  ...props
+}: ItemActionsProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/item/item-content.d.ts
+type ItemContentProps = ComponentProps<"div">;
+declare const ItemContent: ({
+  className,
+  ...props
+}: ItemContentProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/item/item-description.d.ts
+type ItemDescriptionProps = ComponentProps<"p">;
+declare const ItemDescription: ({
+  className,
+  ...props
+}: ItemDescriptionProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/item/item-footer.d.ts
+type ItemFooterProps = ComponentProps<"div">;
+declare const ItemFooter: ({
+  className,
+  ...props
+}: ItemFooterProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/item/item-group.d.ts
+type ItemGroupProps = ComponentProps<"div">;
+declare const ItemGroup: ({
+  className,
+  ...props
+}: ItemGroupProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/item/item-header.d.ts
+type ItemHeaderProps = ComponentProps<"div">;
+declare const ItemHeader: ({
+  className,
+  ...props
+}: ItemHeaderProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/item/item-media.d.ts
+type ItemMediaProps = ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>;
+declare const itemMediaVariants: tailwind_variants0.TVReturnType<{
+  variant: {
+    default: string;
+    icon: string;
+    image: string;
+  };
+}, undefined, "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none", {
+  variant: {
+    default: string;
+    icon: string;
+    image: string;
+  };
+}, undefined, tailwind_variants0.TVReturnType<{
+  variant: {
+    default: string;
+    icon: string;
+    image: string;
+  };
+}, undefined, "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none", unknown, unknown, undefined>>;
+declare const ItemMedia: ({
+  className,
+  variant,
+  ...props
+}: ItemMediaProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/item/item-separator.d.ts
+type ItemSeparatorProps = ComponentProps<typeof Separator>;
+declare const ItemSeparator: ({
+  className,
+  ...props
+}: ItemSeparatorProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/item/item-title.d.ts
+type ItemTitleProps = ComponentProps<"div">;
+declare const ItemTitle: ({
+  className,
+  ...props
+}: ItemTitleProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ItemActions as _, ItemMedia as a, ItemHeaderProps as c, ItemFooter as d, ItemFooterProps as f, ItemContentProps as g, ItemContent as h, ItemSeparatorProps as i, ItemGroup as l, ItemDescriptionProps as m, ItemTitleProps as n, ItemMediaProps as o, ItemDescription as p, ItemSeparator as r, ItemHeader as s, ItemTitle as t, ItemGroupProps as u, ItemActionsProps as v };
+//# sourceMappingURL=item-title-BEt0xgK_.d.ts.map

package/dist/item-title-BEt0xgK_.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"item-title-BEt0xgK_.d.ts","names":[],"sources":["../src/ui/item/item-actions.tsx","../src/ui/item/item-content.tsx","../src/ui/item/item-description.tsx","../src/ui/item/item-footer.tsx","../src/ui/item/item-group.tsx","../src/ui/item/item-header.tsx","../src/ui/item/item-media.tsx","../src/ui/item/item-separator.tsx","../src/ui/item/item-title.tsx"],"mappings":";;;;;;;KAGY,gBAAA,GAAmB,cAAA;AAAA,cAEzB,WAAA;EAAe,SAAA;EAAA,GAAA;AAAA,GAAyB,gBAAA,KAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCFlD,gBAAA,GAAmB,cAAA;AAAA,cAEzB,WAAA;EAAe,SAAA;EAAA,GAAA;AAAA,GAAyB,gBAAA,KAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCFlD,oBAAA,GAAuB,cAAA;AAAA,cAE7B,eAAA;EAAmB,SAAA;EAAA,GAAA;AAAA,GAAyB,oBAAA,KAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCF1D,eAAA,GAAkB,cAAA;AAAA,cAExB,UAAA;EAAc,SAAA;EAAA,GAAA;AAAA,GAAyB,eAAA,KAAe,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCFhD,cAAA,GAAiB,cAAA;AAAA,cAEvB,SAAA;EAAa,SAAA;EAAA,GAAA;AAAA,GAAyB,cAAA,KAAc,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCF9C,eAAA,GAAkB,cAAA;AAAA,cAExB,UAAA;EAAc,SAAA;EAAA,GAAA;AAAA,GAAyB,eAAA,KAAe,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCFhD,cAAA,GAAiB,cAAA,UAC3B,YAAA,QAAoB,iBAAA;AAAA,cAEhB,iBAAA,EAaJ,kBAAA,CAbqB,YAAA;;;;;;;;;;;;cAarB,kBAAA,CAAA,YAAA;;;;;;;cAEI,SAAA;EAAa,SAAA;EAAA,OAAA;EAAA,GAAA;AAAA,GAIhB,cAAA,KAAc,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCpBL,kBAAA,GAAqB,cAAA,QAAsB,SAAA;AAAA,cAEjD,aAAA;EAAiB,SAAA;EAAA,GAAA;AAAA,GAAyB,kBAAA,KAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCJtD,cAAA,GAAiB,cAAA;AAAA,cAEvB,SAAA;EAAa,SAAA;EAAA,GAAA;AAAA,GAAyB,cAAA,KAAc,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/{item-title-BQFoYDpd.js → item-title-DL4BlZUJ.js}

@@ -20,7 +20,7 @@ const ItemContent = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 //#endregion
 //#region src/ui/item/item-description.tsx
 const ItemDescription = ({ className, ...props }) => /* @__PURE__ */ jsx("p", {
-	className: cn("line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
+	className: cn("line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary-foreground", className),
 	"data-slot": "item-description",
 	...props
 });
@@ -57,7 +57,7 @@ const itemMediaVariants = tv({
 	variants: { variant: {
 		default: "bg-transparent",
 		icon: "[&_svg:not([class*='size-'])]:size-4",
-		image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover"
+		image: "overflow-hidden rounded-sm group-data-[size=xs]/item:size-6 group-data-[size=sm]/item:size-8 group-data-[size=md]/item:size-10 group-data-[size=lg]/item:size-12 group-data-[size=xl]/item:size-14 [&_img]:size-full [&_img]:object-cover"
 	} },
 	defaultVariants: { variant: "default" }
 });
@@ -87,4 +87,4 @@ const ItemTitle = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 
 //#endregion
 export { ItemGroup as a, ItemContent as c, ItemHeader as i, ItemActions as l, ItemSeparator as n, ItemFooter as o, ItemMedia as r, ItemDescription as s, ItemTitle as t };
-//# sourceMappingURL=item-title-BQFoYDpd.js.map
+//# sourceMappingURL=item-title-DL4BlZUJ.js.map

package/dist/item-title-DL4BlZUJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item-title-DL4BlZUJ.js","names":[],"sources":["../src/ui/item/item-actions.tsx","../src/ui/item/item-content.tsx","../src/ui/item/item-description.tsx","../src/ui/item/item-footer.tsx","../src/ui/item/item-group.tsx","../src/ui/item/item-header.tsx","../src/ui/item/item-media.tsx","../src/ui/item/item-separator.tsx","../src/ui/item/item-title.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\nexport type ItemActionsProps = ComponentProps<\"div\">;\n\nconst ItemActions = ({ className, ...props }: ItemActionsProps) => (\n  <div\n    className={cn(\"flex items-center gap-2\", className)}\n    data-slot=\"item-actions\"\n    {...props}\n  />\n);\n\nexport { ItemActions };\n","import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\nexport type ItemContentProps = ComponentProps<\"div\">;\n\nconst ItemContent = ({ className, ...props }: ItemContentProps) => (\n  <div\n    className={cn(\n      \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none\",\n      className\n    )}\n    data-slot=\"item-content\"\n    {...props}\n  />\n);\n\nexport { ItemContent };\n","import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\nexport type ItemDescriptionProps = ComponentProps<\"p\">;\n\nconst ItemDescription = ({ className, ...props }: ItemDescriptionProps) => (\n  <p\n    className={cn(\n      \"line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary-foreground\",\n      className\n    )}\n    data-slot=\"item-description\"\n    {...props}\n  />\n);\n\nexport { ItemDescription };\n","import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\nexport type ItemFooterProps = ComponentProps<\"div\">;\n\nconst ItemFooter = ({ className, ...props }: ItemFooterProps) => (\n  <div\n    className={cn(\n      \"flex basis-full items-center justify-between gap-2\",\n      className\n    )}\n    data-slot=\"item-footer\"\n    {...props}\n  />\n);\n\nexport { ItemFooter };\n","import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\nexport type ItemGroupProps = ComponentProps<\"div\">;\n\nconst ItemGroup = ({ className, ...props }: ItemGroupProps) => (\n  <div\n    className={cn(\n      \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n      className\n    )}\n    data-slot=\"item-group\"\n    role=\"list\"\n    {...props}\n  />\n);\n\nexport { ItemGroup };\n","import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\nexport type ItemHeaderProps = ComponentProps<\"div\">;\n\nconst ItemHeader = ({ className, ...props }: ItemHeaderProps) => (\n  <div\n    className={cn(\n      \"flex basis-full items-center justify-between gap-2\",\n      className\n    )}\n    data-slot=\"item-header\"\n    {...props}\n  />\n);\n\nexport { ItemHeader };\n","import type { ComponentProps } from \"react\";\n\nimport { cn, tv, type VariantProps } from \"tailwind-variants\";\nexport type ItemMediaProps = ComponentProps<\"div\"> &\n  VariantProps<typeof itemMediaVariants>;\n\nconst itemMediaVariants = tv({\n  base: \"flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none\",\n  variants: {\n    variant: {\n      default: \"bg-transparent\",\n      icon: \"[&_svg:not([class*='size-'])]:size-4\",\n      image:\n        \"overflow-hidden rounded-sm group-data-[size=xs]/item:size-6 group-data-[size=sm]/item:size-8 group-data-[size=md]/item:size-10 group-data-[size=lg]/item:size-12 group-data-[size=xl]/item:size-14 [&_img]:size-full [&_img]:object-cover\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n\nconst ItemMedia = ({\n  className,\n  variant = \"default\",\n  ...props\n}: ItemMediaProps) => (\n  <div\n    className={cn(itemMediaVariants({ variant }), className)}\n    data-slot=\"item-media\"\n    data-variant={variant}\n    {...props}\n  />\n);\n\nexport { ItemMedia };\n","import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\n\nimport { Separator } from \"../separator/separator\";\nexport type ItemSeparatorProps = ComponentProps<typeof Separator>;\n\nconst ItemSeparator = ({ className, ...props }: ItemSeparatorProps) => (\n  <Separator\n    className={cn(\"my-2\", className)}\n    data-slot=\"item-separator\"\n    orientation=\"horizontal\"\n    {...props}\n  />\n);\n\nexport { ItemSeparator };\n","import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\nexport type ItemTitleProps = ComponentProps<\"div\">;\n\nconst ItemTitle = ({ className, ...props }: ItemTitleProps) => (\n  <div\n    className={cn(\n      \"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4\",\n      className\n    )}\n    data-slot=\"item-title\"\n    {...props}\n  />\n);\n\nexport { ItemTitle };\n"],"mappings":";;;;;AAKA,MAAM,eAAe,EAAE,WAAW,GAAG,YACnC,oBAAC;CACC,WAAW,GAAG,2BAA2B,UAAU;CACnD,aAAU;CACV,GAAI;EACJ;;;;ACLJ,MAAM,eAAe,EAAE,WAAW,GAAG,YACnC,oBAAC;CACC,WAAW,GACT,qGACA,UACD;CACD,aAAU;CACV,GAAI;EACJ;;;;ACRJ,MAAM,mBAAmB,EAAE,WAAW,GAAG,YACvC,oBAAC;CACC,WAAW,GACT,kMACA,UACD;CACD,aAAU;CACV,GAAI;EACJ;;;;ACRJ,MAAM,cAAc,EAAE,WAAW,GAAG,YAClC,oBAAC;CACC,WAAW,GACT,sDACA,UACD;CACD,aAAU;CACV,GAAI;EACJ;;;;ACRJ,MAAM,aAAa,EAAE,WAAW,GAAG,YACjC,oBAAC;CACC,WAAW,GACT,mGACA,UACD;CACD,aAAU;CACV,MAAK;CACL,GAAI;EACJ;;;;ACTJ,MAAM,cAAc,EAAE,WAAW,GAAG,YAClC,oBAAC;CACC,WAAW,GACT,sDACA,UACD;CACD,aAAU;CACV,GAAI;EACJ;;;;ACPJ,MAAM,oBAAoB,GAAG;CAC3B,MAAM;CACN,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;EACN,OACE;EACH,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CAAC;AAEF,MAAM,aAAa,EACjB,WACA,UAAU,WACV,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,kBAAkB,EAAE,SAAS,CAAC,EAAE,UAAU;CACxD,aAAU;CACV,gBAAc;CACd,GAAI;EACJ;;;;ACxBJ,MAAM,iBAAiB,EAAE,WAAW,GAAG,YACrC,oBAAC;CACC,WAAW,GAAG,QAAQ,UAAU;CAChC,aAAU;CACV,aAAY;CACZ,GAAI;EACJ;;;;ACRJ,MAAM,aAAa,EAAE,WAAW,GAAG,YACjC,oBAAC;CACC,WAAW,GACT,kGACA,UACD;CACD,aAAU;CACV,GAAI;EACJ"}

package/dist/item.d.ts

@@ -1,47 +1,4 @@
-import "./accordion-trigger-B51W3Rdg.js";
-import "./alert-title-W1oau4D6.js";
-import { A as ItemDescription, D as ItemHeader, E as ItemMedia, M as ItemActions, O as ItemGroup, T as ItemSeparator, j as ItemContent, k as ItemFooter, w as ItemTitle } from "./use-sidebar-CYBPR0ue.js";
-import "./announcement-title-3cikJ44S.js";
-import "./autocomplete-value-DUN1Jprs.js";
-import "./avatar-image-DPunh5Hd.js";
-import "./breadcrumb-separator-C6zfQJ5p.js";
-import { SeparatorProps } from "./separator.js";
-import "./card-title-Dk0akcFR.js";
-import "./collapsible-trigger-DjL8pGgf.js";
-import "./use-combobox-anchor-DKwvfnFx.js";
-import "./dialog-trigger-B5HeOikl.js";
-import "./context-menu-trigger-DHPhlnvV.js";
-import "./drawer-viewport-DejmWgmc.js";
-import "./dropdown-menu-trigger-DEdnOFwc.js";
-import "./dropzone-context-DNiJThhB.js";
-import "./emoji-picker-skin-tone-selector-amzh0Wk6.js";
-import "./empty-title-CcQlXOlP.js";
-import "./hover-card-trigger-CRzFaoL4.js";
-import "./input-otp-slot-B19cyjk_.js";
-import "./kbd-group-PUw0yaIv.js";
-import "./marquee-item-BCswidMf.js";
-import "./menubar-trigger-Gx-lmpr9.js";
-import "./meter-value-FRDEI8VE.js";
-import "./navigation-menu-trigger-ryYftbUl.js";
-import "./number-field-scrub-area-cursor-BIS4ObSL.js";
-import "./pagination-previous-NpFopV3e.js";
-import "./pill-status-BS75xd9Z.js";
-import "./popover-trigger-C8pR26Xp.js";
-import "./progress-value-BGhNh_xb.js";
-import "./radio-group-item-DCXseC2o.js";
-import "./rating-star-CxVJUZmc.js";
-import "./resizable-panel-D4Brid-G.js";
-import "./scroll-bar-L-sXig2v.js";
-import "./select-value-D8pFrPKG.js";
-import "./sheet-trigger-B_N_tXmj.js";
-import "./tooltip-trigger-B43yfWhK.js";
-import "./table-row-BSEIkZEJ.js";
-import "./tabs-trigger-ChutNdGI.js";
-import "./use-timeline-Dcj9DR0I.js";
-import "./toggle-group-item-CrPxpOF5.js";
-import "./toolbar-separator-DbkRIfIA.js";
-import "./typography-ul-Dy8wQB_p.js";
-import "./index.js";
+import { _ as ItemActions, a as ItemMedia, c as ItemHeaderProps, d as ItemFooter, f as ItemFooterProps, g as ItemContentProps, h as ItemContent, i as ItemSeparatorProps, l as ItemGroup, m as ItemDescriptionProps, n as ItemTitleProps, o as ItemMediaProps, p as ItemDescription, r as ItemSeparator, s as ItemHeader, t as ItemTitle, u as ItemGroupProps, v as ItemActionsProps } from "./item-title-BEt0xgK_.js";
 import * as tailwind_variants0 from "tailwind-variants";
 import { VariantProps } from "tailwind-variants";
 import * as react from "react";
@@ -49,6 +6,7 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 
 //#region src/ui/item/item.d.ts
+type ItemProps = useRender.ComponentProps<"div"> & VariantProps<typeof itemVariants>;
 declare const itemVariants: tailwind_variants0.TVReturnType<{
   variant: {
     default: string;
@@ -56,9 +14,11 @@ declare const itemVariants: tailwind_variants0.TVReturnType<{
     muted: string;
   };
   size: {
-    default: string;
-    sm: string;
     xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
   };
 }, undefined, "group/item flex w-full flex-wrap items-center rounded-md border border-border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted", {
   variant: {
@@ -67,9 +27,11 @@ declare const itemVariants: tailwind_variants0.TVReturnType<{
     muted: string;
   };
   size: {
-    default: string;
-    sm: string;
     xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
   };
 }, undefined, tailwind_variants0.TVReturnType<{
   variant: {
@@ -78,79 +40,59 @@ declare const itemVariants: tailwind_variants0.TVReturnType<{
     muted: string;
   };
   size: {
-    default: string;
-    sm: string;
     xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
   };
 }, undefined, "group/item flex w-full flex-wrap items-center rounded-md border border-border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted", unknown, unknown, undefined>>;
 declare const Item: {
   ({
     className,
     variant,
-    size,
+    size: providedSize,
     render,
     ...props
-  }: useRender.ComponentProps<"div"> & VariantProps<typeof itemVariants>): react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+  }: ItemProps): react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
   Actions: ({
     className,
     ...props
-  }: react.ComponentProps<"div">) => react_jsx_runtime0.JSX.Element;
+  }: ItemActionsProps) => react_jsx_runtime0.JSX.Element;
   Content: ({
     className,
     ...props
-  }: react.ComponentProps<"div">) => react_jsx_runtime0.JSX.Element;
+  }: ItemContentProps) => react_jsx_runtime0.JSX.Element;
   Description: ({
     className,
     ...props
-  }: react.ComponentProps<"p">) => react_jsx_runtime0.JSX.Element;
+  }: ItemDescriptionProps) => react_jsx_runtime0.JSX.Element;
   Footer: ({
     className,
     ...props
-  }: react.ComponentProps<"div">) => react_jsx_runtime0.JSX.Element;
+  }: ItemFooterProps) => react_jsx_runtime0.JSX.Element;
   Group: ({
     className,
     ...props
-  }: react.ComponentProps<"div">) => react_jsx_runtime0.JSX.Element;
+  }: ItemGroupProps) => react_jsx_runtime0.JSX.Element;
   Header: ({
     className,
     ...props
-  }: react.ComponentProps<"div">) => react_jsx_runtime0.JSX.Element;
+  }: ItemHeaderProps) => react_jsx_runtime0.JSX.Element;
   Media: ({
     className,
     variant,
     ...props
-  }: react.ComponentProps<"div"> & VariantProps<tailwind_variants0.TVReturnType<{
-    variant: {
-      default: string;
-      icon: string;
-      image: string;
-    };
-  }, undefined, "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none", {
-    variant: {
-      default: string;
-      icon: string;
-      image: string;
-    };
-  }, undefined, tailwind_variants0.TVReturnType<{
-    variant: {
-      default: string;
-      icon: string;
-      image: string;
-    };
-  }, undefined, "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none", unknown, unknown, undefined>>>) => react_jsx_runtime0.JSX.Element;
+  }: ItemMediaProps) => react_jsx_runtime0.JSX.Element;
   Separator: ({
     className,
     ...props
-  }: react.ComponentProps<({
-    className,
-    orientation,
-    ...props
-  }: SeparatorProps) => react_jsx_runtime0.JSX.Element>) => react_jsx_runtime0.JSX.Element;
+  }: ItemSeparatorProps) => react_jsx_runtime0.JSX.Element;
   Title: ({
     className,
     ...props
-  }: react.ComponentProps<"div">) => react_jsx_runtime0.JSX.Element;
+  }: ItemTitleProps) => react_jsx_runtime0.JSX.Element;
 };
 //#endregion
-export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, itemVariants };
+export { Item, ItemActions, type ItemActionsProps, ItemContent, type ItemContentProps, ItemDescription, type ItemDescriptionProps, ItemFooter, type ItemFooterProps, ItemGroup, type ItemGroupProps, ItemHeader, type ItemHeaderProps, ItemMedia, type ItemMediaProps, ItemProps, ItemSeparator, type ItemSeparatorProps, ItemTitle, type ItemTitleProps, itemVariants };
 //# sourceMappingURL=item.d.ts.map

package/dist/item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"item.d.ts","names":[],"sources":["../src/ui/item/item.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAcM,YAAA,EAkBJ,kBAAA,CAlBgB,YAAA;;;;;;;;;;;;;;;;;;;;;;cAkBhB,kBAAA,CAAA,YAAA;;;;;;;;;;;;cAEI,IAAA;EAAA;;;;;;KAMH,SAAA,CAAU,cAAA,UAAwB,YAAA,QAAoB,YAAA,IAAa,KAAA,CAAA,YAAA,mBAArB,KAAA,CAAqB,qBAAA"}
+{"version":3,"file":"item.d.ts","names":[],"sources":["../src/ui/item/item.tsx"],"mappings":";;;;;;;;KAcY,SAAA,GAAY,SAAA,CAAU,cAAA,UAChC,YAAA,QAAoB,YAAA;AAAA,cAEhB,YAAA,EAoBJ,kBAAA,CApBgB,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;cAoBhB,kBAAA,CAAA,YAAA;;;;;;;;;;;;;;cAEI,IAAA;EAAA;;;;;;KAMH,SAAA,GAAS,KAAA,CAAA,YAAA,mBAAA,KAAA,CAAA,qBAAA"}

package/dist/item.js

@@ -1,4 +1,5 @@
-import { a as ItemGroup, c as ItemContent, i as ItemHeader, l as ItemActions, n as ItemSeparator, o as ItemFooter, r as ItemMedia, s as ItemDescription, t as ItemTitle } from "./item-title-BQFoYDpd.js";
+import { a as useComponentSize } from "./size-provider-D2Fy00Ky.js";
+import { a as ItemGroup, c as ItemContent, i as ItemHeader, l as ItemActions, n as ItemSeparator, o as ItemFooter, r as ItemMedia, s as ItemDescription, t as ItemTitle } from "./item-title-DL4BlZUJ.js";
 import { cn, tv } from "tailwind-variants";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
@@ -13,29 +14,34 @@ const itemVariants = tv({
 			muted: "border-transparent bg-muted/50"
 		},
 		size: {
-			default: "gap-3.5 px-4 py-3.5",
+			xs: "gap-2 px-2.5 py-2 [[data-slot=dropdown-menu-content]_&]:p-0",
 			sm: "gap-2.5 px-3 py-2.5",
-			xs: "gap-2 px-2.5 py-2 [[data-slot=dropdown-menu-content]_&]:p-0"
+			md: "gap-3.5 px-4 py-3.5",
+			lg: "gap-4 px-4 py-4",
+			xl: "gap-4 px-5 py-4.5 text-base"
 		}
 	},
 	defaultVariants: {
 		variant: "default",
-		size: "default"
-	}
-});
-const Item = ({ className, variant = "default", size = "default", render, ...props }) => useRender({
-	defaultTagName: "div",
-	props: mergeProps({ className: cn(itemVariants({
-		variant,
-		size
-	}), className) }, props),
-	render,
-	state: {
-		slot: "item",
-		variant,
-		size
+		size: "md"
 	}
 });
+const Item = ({ className, variant = "default", size: providedSize, render, ...props }) => {
+	const size = useComponentSize(providedSize);
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn(itemVariants({
+			variant,
+			size
+		}), className) }, props),
+		render,
+		state: {
+			slot: "item",
+			variant,
+			size
+		}
+	});
+};
 Item.Actions = ItemActions;
 Item.Content = ItemContent;
 Item.Description = ItemDescription;

package/dist/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.js","names":[],"sources":["../src/ui/item/item.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cn, tv, type VariantProps } from \"tailwind-variants\";\n\nimport { ItemActions } from \"./item-actions\";\nimport { ItemContent } from \"./item-content\";\nimport { ItemDescription } from \"./item-description\";\nimport { ItemFooter } from \"./item-footer\";\nimport { ItemGroup } from \"./item-group\";\nimport { ItemHeader } from \"./item-header\";\nimport { ItemMedia } from \"./item-media\";\nimport { ItemSeparator } from \"./item-separator\";\nimport { ItemTitle } from \"./item-title\";\n\nconst itemVariants = tv({\n  base: \"group/item flex w-full flex-wrap items-center rounded-md border border-border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted\",\n  variants: {\n    variant: {\n      default: \"border-transparent\",\n      outline: \"border-border\",\n      muted: \"border-transparent bg-muted/50\",\n    },\n    size: {\n      default: \"gap-3.5 px-4 py-3.5\",\n      sm: \"gap-2.5 px-3 py-2.5\",\n      xs: \"gap-2 px-2.5 py-2 [[data-slot=dropdown-menu-content]_&]:p-0\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"default\",\n  },\n});\n\nconst Item = ({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & VariantProps<typeof itemVariants>) =>\n  useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(itemVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"item\",\n      variant,\n      size,\n    },\n  });\n\nItem.Actions = ItemActions;\nItem.Content = ItemContent;\nItem.Description = ItemDescription;\nItem.Footer = ItemFooter;\nItem.Group = ItemGroup;\nItem.Header = ItemHeader;\nItem.Media = ItemMedia;\nItem.Separator = ItemSeparator;\nItem.Title = ItemTitle;\n\nexport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n  itemVariants,\n};\n"],"mappings":";;;;;;AAcA,MAAM,eAAe,GAAG;CACtB,MAAM;CACN,UAAU;EACR,SAAS;GACP,SAAS;GACT,SAAS;GACT,OAAO;GACR;EACD,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACL;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CAAC;AAEF,MAAM,QAAQ,EACZ,WACA,UAAU,WACV,OAAO,WACP,QACA,GAAG,YAEH,UAAU;CACR,gBAAgB;CAChB,OAAO,WACL,EACE,WAAW,GAAG,aAAa;EAAE;EAAS;EAAM,CAAC,EAAE,UAAU,EAC1D,EACD,MACD;CACD;CACA,OAAO;EACL,MAAM;EACN;EACA;EACD;CACF,CAAC;AAEJ,KAAK,UAAU;AACf,KAAK,UAAU;AACf,KAAK,cAAc;AACnB,KAAK,SAAS;AACd,KAAK,QAAQ;AACb,KAAK,SAAS;AACd,KAAK,QAAQ;AACb,KAAK,YAAY;AACjB,KAAK,QAAQ"}
+{"version":3,"file":"item.js","names":[],"sources":["../src/ui/item/item.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cn, tv, type VariantProps } from \"tailwind-variants\";\n\nimport { useComponentSize } from \"../shared/size/size-provider\";\nimport { ItemActions } from \"./item-actions\";\nimport { ItemContent } from \"./item-content\";\nimport { ItemDescription } from \"./item-description\";\nimport { ItemFooter } from \"./item-footer\";\nimport { ItemGroup } from \"./item-group\";\nimport { ItemHeader } from \"./item-header\";\nimport { ItemMedia } from \"./item-media\";\nimport { ItemSeparator } from \"./item-separator\";\nimport { ItemTitle } from \"./item-title\";\nexport type ItemProps = useRender.ComponentProps<\"div\"> &\n  VariantProps<typeof itemVariants>;\n\nconst itemVariants = tv({\n  base: \"group/item flex w-full flex-wrap items-center rounded-md border border-border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted\",\n  variants: {\n    variant: {\n      default: \"border-transparent\",\n      outline: \"border-border\",\n      muted: \"border-transparent bg-muted/50\",\n    },\n    size: {\n      xs: \"gap-2 px-2.5 py-2 [[data-slot=dropdown-menu-content]_&]:p-0\",\n      sm: \"gap-2.5 px-3 py-2.5\",\n      md: \"gap-3.5 px-4 py-3.5\",\n      lg: \"gap-4 px-4 py-4\",\n      xl: \"gap-4 px-5 py-4.5 text-base\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\nconst Item = ({\n  className,\n  variant = \"default\",\n  size: providedSize,\n  render,\n  ...props\n}: ItemProps) => {\n  const size = useComponentSize(providedSize);\n\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(itemVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"item\",\n      variant,\n      size,\n    },\n  });\n};\n\nItem.Actions = ItemActions;\nItem.Content = ItemContent;\nItem.Description = ItemDescription;\nItem.Footer = ItemFooter;\nItem.Group = ItemGroup;\nItem.Header = ItemHeader;\nItem.Media = ItemMedia;\nItem.Separator = ItemSeparator;\nItem.Title = ItemTitle;\n\nexport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n  itemVariants,\n};\n\nexport type { ItemActionsProps } from \"./item-actions\";\nexport type { ItemContentProps } from \"./item-content\";\nexport type { ItemDescriptionProps } from \"./item-description\";\nexport type { ItemFooterProps } from \"./item-footer\";\nexport type { ItemGroupProps } from \"./item-group\";\nexport type { ItemHeaderProps } from \"./item-header\";\nexport type { ItemMediaProps } from \"./item-media\";\nexport type { ItemSeparatorProps } from \"./item-separator\";\nexport type { ItemTitleProps } from \"./item-title\";\n"],"mappings":";;;;;;;AAiBA,MAAM,eAAe,GAAG;CACtB,MAAM;CACN,UAAU;EACR,SAAS;GACP,SAAS;GACT,SAAS;GACT,OAAO;GACR;EACD,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CAAC;AAEF,MAAM,QAAQ,EACZ,WACA,UAAU,WACV,MAAM,cACN,QACA,GAAG,YACY;CACf,MAAM,OAAO,iBAAiB,aAAa;AAE3C,QAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GAAG,aAAa;GAAE;GAAS;GAAM,CAAC,EAAE,UAAU,EAC1D,EACD,MACD;EACD;EACA,OAAO;GACL,MAAM;GACN;GACA;GACD;EACF,CAAC;;AAGJ,KAAK,UAAU;AACf,KAAK,UAAU;AACf,KAAK,cAAc;AACnB,KAAK,SAAS;AACd,KAAK,QAAQ;AACb,KAAK,SAAS;AACd,KAAK,QAAQ;AACb,KAAK,YAAY;AACjB,KAAK,QAAQ"}

package/dist/kbd-group-3GbsGHQf.d.ts

@@ -0,0 +1,19 @@
+import { t as UISize } from "./size-system-CMU68sQY.js";
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/kbd/kbd-size-context.d.ts
+type KbdSize = UISize;
+//#endregion
+//#region src/ui/kbd/kbd-group.d.ts
+type KbdGroupProps = ComponentProps<"kbd"> & {
+  size?: KbdSize;
+};
+declare const KbdGroup: ({
+  className,
+  size,
+  ...props
+}: KbdGroupProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { KbdGroupProps as n, KbdSize as r, KbdGroup as t };
+//# sourceMappingURL=kbd-group-3GbsGHQf.d.ts.map

package/dist/kbd-group-3GbsGHQf.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd-group-3GbsGHQf.d.ts","names":[],"sources":["../src/ui/kbd/kbd-size-context.ts","../src/ui/kbd/kbd-group.tsx"],"mappings":";;;;;KAIY,OAAA,GAAU,MAAA;;;KCIV,aAAA,GAAgB,cAAA;EAC1B,IAAA,GAAO,OAAA;AAAA;AAAA,cAGH,QAAA;EAAY,SAAA;EAAA,IAAA;EAAA,GAAA;AAAA,GAA+B,aAAA,KAAa,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/kbd-group-BmHYZhQr.js

@@ -0,0 +1,30 @@
+import { cn } from "tailwind-variants";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/ui/kbd/kbd-size-context.ts
+const DEFAULT_KBD_SIZE = "md";
+const KbdSizeContext = createContext(DEFAULT_KBD_SIZE);
+const useKbdResolvedSize = (size) => {
+	const contextSize = useContext(KbdSizeContext);
+	return size ?? contextSize ?? DEFAULT_KBD_SIZE;
+};
+
+//#endregion
+//#region src/ui/kbd/kbd-group.tsx
+const KbdGroup = ({ className, size, ...props }) => {
+	const resolvedSize = useKbdResolvedSize(size);
+	return /* @__PURE__ */ jsx(KbdSizeContext.Provider, {
+		value: resolvedSize,
+		children: /* @__PURE__ */ jsx("kbd", {
+			className: cn("group/kbd-group inline-flex items-center data-[size=xs]:gap-0.5 data-[size=sm]:gap-0.5 data-[size=md]:gap-1 data-[size=lg]:gap-1 data-[size=xl]:gap-1.5", className),
+			"data-size": resolvedSize,
+			"data-slot": "kbd-group",
+			...props
+		})
+	});
+};
+
+//#endregion
+export { useKbdResolvedSize as n, KbdGroup as t };
+//# sourceMappingURL=kbd-group-BmHYZhQr.js.map

package/dist/kbd-group-BmHYZhQr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd-group-BmHYZhQr.js","names":[],"sources":["../src/ui/kbd/kbd-size-context.ts","../src/ui/kbd/kbd-group.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nimport type { UISize } from \"../shared/size/size-system\";\n\nexport type KbdSize = UISize;\n\nconst DEFAULT_KBD_SIZE: KbdSize = \"md\";\n\nconst KbdSizeContext = createContext<KbdSize>(DEFAULT_KBD_SIZE);\n\nconst useKbdResolvedSize = (size?: KbdSize): KbdSize => {\n  const contextSize = useContext(KbdSizeContext);\n\n  return size ?? contextSize ?? DEFAULT_KBD_SIZE;\n};\n\nexport { KbdSizeContext, useKbdResolvedSize };\n","import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\n\nimport type { KbdSize } from \"./kbd-size-context\";\n\nimport { KbdSizeContext, useKbdResolvedSize } from \"./kbd-size-context\";\n\nexport type KbdGroupProps = ComponentProps<\"kbd\"> & {\n  size?: KbdSize;\n};\n\nconst KbdGroup = ({ className, size, ...props }: KbdGroupProps) => {\n  const resolvedSize = useKbdResolvedSize(size);\n\n  return (\n    <KbdSizeContext.Provider value={resolvedSize}>\n      <kbd\n        className={cn(\n          \"group/kbd-group inline-flex items-center data-[size=xs]:gap-0.5 data-[size=sm]:gap-0.5 data-[size=md]:gap-1 data-[size=lg]:gap-1 data-[size=xl]:gap-1.5\",\n          className\n        )}\n        data-size={resolvedSize}\n        data-slot=\"kbd-group\"\n        {...props}\n      />\n    </KbdSizeContext.Provider>\n  );\n};\n\nexport { KbdGroup };\nexport type { KbdSize as KbdGroupSize };\n"],"mappings":";;;;;AAMA,MAAM,mBAA4B;AAElC,MAAM,iBAAiB,cAAuB,iBAAiB;AAE/D,MAAM,sBAAsB,SAA4B;CACtD,MAAM,cAAc,WAAW,eAAe;AAE9C,QAAO,QAAQ,eAAe;;;;;ACDhC,MAAM,YAAY,EAAE,WAAW,MAAM,GAAG,YAA2B;CACjE,MAAM,eAAe,mBAAmB,KAAK;AAE7C,QACE,oBAAC,eAAe;EAAS,OAAO;YAC9B,oBAAC;GACC,WAAW,GACT,2JACA,UACD;GACD,aAAW;GACX,aAAU;GACV,GAAI;IACJ;GACsB"}

package/dist/kbd.d.ts

@@ -1,19 +1,23 @@
-import { t as KbdGroup } from "./kbd-group-PUw0yaIv.js";
+import { n as KbdGroupProps, r as KbdSize, t as KbdGroup } from "./kbd-group-3GbsGHQf.js";
 import { ComponentProps } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/ui/kbd/kbd.d.ts
-type KbdProps = ComponentProps<"kbd">;
+type KbdProps = ComponentProps<"kbd"> & {
+  size?: KbdSize;
+};
 declare const Kbd: {
   ({
     className,
+    size,
     ...props
   }: KbdProps): react_jsx_runtime0.JSX.Element;
   Group: ({
     className,
+    size,
     ...props
-  }: ComponentProps<"div">) => react_jsx_runtime0.JSX.Element;
+  }: KbdGroupProps) => react_jsx_runtime0.JSX.Element;
 };
 //#endregion
-export { Kbd, KbdGroup, KbdProps };
+export { Kbd, KbdGroup, type KbdGroupProps, type KbdSize as KbdGroupSize, type KbdSize, KbdProps };
 //# sourceMappingURL=kbd.d.ts.map

package/dist/kbd.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"kbd.d.ts","names":[],"sources":["../src/ui/kbd/kbd.tsx"],"mappings":";;;;;KAMY,QAAA,GAAW,cAAA;AAAA,cAEjB,GAAA;EAAA;;;KAAgC,QAAA,GAAQ,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"kbd.d.ts","names":[],"sources":["../src/ui/kbd/kbd.tsx"],"mappings":";;;;;KAuBY,QAAA,GAAW,cAAA;EACrB,IAAA,GAAO,OAAA;AAAA;AAAA,cAGH,GAAA;EAAA;;;;KAAsC,QAAA,GAAQ,kBAAA,CAAA,GAAA,CAAA,OAAA"}