@codefast/ui 0.3.13-canary.2 → 0.3.13-canary.4

package/dist/components/input-group.d.mts

@@ -0,0 +1,61 @@
+import { VariantProps } from "../lib/utils.mjs";
+import { ButtonProps } from "./button.mjs";
+import { InputProps } from "./input.mjs";
+import { TextareaProps } from "./textarea.mjs";
+import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
+import { ComponentProps, JSX } from "react";
+
+//#region src/components/input-group.d.ts
+declare const inputGroupVariants: _$_codefast_tailwind_variants0.VariantFunctionType<_$_codefast_tailwind_variants0.ConfigurationSchema, Record<string, never>>;
+declare const inputGroupAddonVariants: _$_codefast_tailwind_variants0.VariantFunctionType<{
+  align: {
+    "block-end": string[];
+    "block-start": string[];
+    "inline-end": string[];
+    "inline-start": string[];
+  };
+}, Record<string, never>>;
+declare const inputGroupButtonVariants: _$_codefast_tailwind_variants0.VariantFunctionType<{
+  size: {
+    "icon-sm": string[];
+    "icon-xs": string[];
+    sm: string[];
+    xs: string[];
+  };
+}, Record<string, never>>;
+type InputGroupProps = ComponentProps<"div">;
+declare function InputGroup({
+  className,
+  ...props
+}: InputGroupProps): JSX.Element;
+type InputGroupAddonProps = ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>;
+declare function InputGroupAddon({
+  align,
+  className,
+  ...props
+}: InputGroupAddonProps): JSX.Element;
+type InputGroupButtonProps = Omit<ButtonProps, "size"> & VariantProps<typeof inputGroupButtonVariants>;
+declare function InputGroupButton({
+  className,
+  size,
+  type,
+  variant,
+  ...props
+}: InputGroupButtonProps): JSX.Element;
+type InputGroupTextProps = ComponentProps<"span">;
+declare function InputGroupText({
+  className,
+  ...props
+}: InputGroupTextProps): JSX.Element;
+type InputGroupInputProps = InputProps;
+declare function InputGroupInput({
+  className,
+  ...props
+}: InputGroupInputProps): JSX.Element;
+type InputGroupTextareaProps = TextareaProps;
+declare function InputGroupTextarea({
+  className,
+  ...props
+}: InputGroupTextareaProps): JSX.Element;
+//#endregion
+export { InputGroup, InputGroupAddon, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputGroupText, type InputGroupTextProps, InputGroupTextarea, type InputGroupTextareaProps, inputGroupAddonVariants, inputGroupButtonVariants, inputGroupVariants };

package/dist/components/input-group.mjs

@@ -0,0 +1,142 @@
+"use client";
+import { cn, tv } from "../lib/utils.mjs";
+import { Button } from "./button.mjs";
+import { Input } from "./input.mjs";
+import { Textarea } from "./textarea.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/input-group.tsx
+const inputGroupVariants = tv({ base: [
+	"group/input-group relative flex h-9 w-full min-w-0 items-center",
+	"rounded-lg border border-input shadow-xs outline-none",
+	"transition-[color,box-shadow]",
+	"dark:bg-input/30",
+	"has-[>textarea]:h-auto",
+	"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col",
+	"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col",
+	"has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
+	"has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20",
+	"dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+	"has-[>[data-align=block-end]]:[&>[data-slot=input-group-control]]:pt-3",
+	"has-[>[data-align=block-start]]:[&>[data-slot=input-group-control]]:pb-3",
+	"has-[>[data-align=inline-end]]:[&>[data-slot=input-group-control]]:pr-2",
+	"has-[>[data-align=inline-start]]:[&>[data-slot=input-group-control]]:pl-2"
+] });
+const inputGroupAddonVariants = tv({
+	base: [
+		"flex h-auto items-center justify-center gap-2 py-1.5",
+		"text-sm font-medium text-muted-foreground",
+		"cursor-text select-none",
+		"group-data-disabled/input-group:opacity-50",
+		"[&>kbd]:rounded-[calc(var(--radius)-5px)]",
+		"[&>svg:not([class*='size-'])]:size-4"
+	],
+	defaultVariants: { align: "inline-start" },
+	variants: { align: {
+		"block-end": [
+			"order-last w-full justify-start px-3 pb-3",
+			"group-has-[>input]/input-group:pb-2.5",
+			"[.border-t]:pt-3"
+		],
+		"block-start": [
+			"order-first w-full justify-start px-3 pt-3",
+			"group-has-[>input]/input-group:pt-2.5",
+			"[.border-b]:pb-3"
+		],
+		"inline-end": [
+			"order-last",
+			"pr-3",
+			"has-[>button]:mr-[-0.45rem]",
+			"has-[>kbd]:mr-[-0.35rem]"
+		],
+		"inline-start": [
+			"order-first",
+			"pl-3",
+			"has-[>button]:ml-[-0.45rem]",
+			"has-[>kbd]:ml-[-0.35rem]"
+		]
+	} }
+});
+const inputGroupButtonVariants = tv({
+	base: [
+		"flex items-center gap-2",
+		"shadow-none",
+		"text-sm",
+		"[&>svg:not([class*='size-'])]:size-4"
+	],
+	defaultVariants: { size: "xs" },
+	variants: { size: {
+		"icon-sm": ["size-8 p-0", "has-[>svg]:p-0"],
+		"icon-xs": [
+			"size-6 p-0",
+			"rounded-[calc(var(--radius)-5px)]",
+			"has-[>svg]:p-0"
+		],
+		sm: [
+			"h-8 gap-1.5 px-2.5",
+			"rounded-md",
+			"has-[>svg]:px-2.5"
+		],
+		xs: [
+			"h-6 gap-1 px-2",
+			"rounded-[calc(var(--radius)-5px)]",
+			"has-[>svg]:px-2",
+			"[&>svg]:size-3.5"
+		]
+	} }
+});
+function InputGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: inputGroupVariants({ className }),
+		"data-slot": "input-group",
+		role: "group",
+		...props
+	});
+}
+function InputGroupAddon({ align = "inline-start", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(inputGroupAddonVariants({ align }), className),
+		"data-align": align,
+		"data-slot": "input-group-addon",
+		role: "group",
+		onPointerDown: (event) => {
+			if (event.target.closest("button")) return;
+			event.preventDefault();
+			const control = event.currentTarget.parentElement?.querySelector("input, textarea");
+			if (control instanceof HTMLElement) control.focus();
+		},
+		...props
+	});
+}
+function InputGroupButton({ className, size = "xs", type = "button", variant = "ghost", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		className: cn(inputGroupButtonVariants({ size }), className),
+		"data-size": size,
+		"data-slot": "input-group-button",
+		type,
+		variant,
+		...props
+	});
+}
+function InputGroupText({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("flex items-center gap-2 text-sm text-muted-foreground", "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+		"data-slot": "input-group-text",
+		...props
+	});
+}
+function InputGroupInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		className: cn("flex-1", "px-3 py-1", "rounded-none border-0", "bg-transparent shadow-none", "focus-visible:ring-0", "dark:bg-transparent", className),
+		"data-slot": "input-group-control",
+		...props
+	});
+}
+function InputGroupTextarea({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Textarea, {
+		className: cn("flex-1", "py-3", "rounded-none border-0", "bg-transparent shadow-none", "resize-none", "focus-visible:ring-0", "dark:bg-transparent", className),
+		"data-slot": "input-group-control",
+		...props
+	});
+}
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, inputGroupAddonVariants, inputGroupButtonVariants, inputGroupVariants };

package/dist/components/input-number.d.mts

@@ -0,0 +1,28 @@
+import { Field as InputNumberField, InputNumber as InputNumber$1 } from "../primitives/input-number.mjs";
+import { ComponentProps, JSX } from "react";
+
+//#region src/components/input-number.d.ts
+interface InputNumberProps extends ComponentProps<typeof InputNumberField>, ComponentProps<typeof InputNumber$1> {}
+declare function InputNumber({
+  ariaDecrementLabel,
+  ariaIncrementLabel,
+  className,
+  defaultValue,
+  disabled,
+  formatOptions,
+  id,
+  loaderPosition,
+  loading,
+  max,
+  min,
+  onChange,
+  prefix,
+  readOnly,
+  spinner,
+  step,
+  suffix,
+  value,
+  ...props
+}: InputNumberProps): JSX.Element;
+//#endregion
+export { InputNumber, type InputNumberProps };

package/dist/components/input-number.mjs

@@ -0,0 +1,61 @@
+"use client";
+import { cn } from "../lib/utils.mjs";
+import { buttonVariants } from "./button.mjs";
+import { Spinner } from "./spinner.mjs";
+import { DecrementButton as InputNumberDecrementButton, Field as InputNumberField, IncrementButton as InputNumberIncrementButton, InputNumber as InputNumber$1 } from "../primitives/input-number.mjs";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/input-number.tsx
+function InputNumber({ ariaDecrementLabel, ariaIncrementLabel, className, defaultValue, disabled, formatOptions, id, loaderPosition, loading, max, min, onChange, prefix, readOnly, spinner, step, suffix, value, ...props }) {
+	return /* @__PURE__ */ jsxs(InputNumber$1, {
+		ariaDecrementLabel,
+		ariaIncrementLabel,
+		className: cn("group peer flex h-9 w-full grow items-center gap-3 px-3 pr-0", "rounded-lg border border-input", "text-base", "transition", "not-has-disabled:shadow-xs", "focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50", "hover:not-has-disabled:not-focus-within:border-ring/60", "focus-within:has-aria-invalid:ring-destructive/20", "hover:not-has-disabled:not-focus-within:has-aria-invalid:border-destructive/60", "md:text-sm", "dark:bg-input/30", "dark:focus-within:has-aria-invalid:ring-destructive/40", "has-disabled:opacity-50", "has-aria-invalid:border-destructive", "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "[&>svg]:text-muted-foreground", className),
+		"data-slot": "input-number",
+		defaultValue,
+		disabled,
+		formatOptions,
+		id,
+		loaderPosition,
+		loading,
+		max,
+		min,
+		prefix,
+		readOnly,
+		spinner: spinner ?? /* @__PURE__ */ jsx(Spinner, {}, "spinner"),
+		step,
+		suffix,
+		value,
+		onChange,
+		children: [/* @__PURE__ */ jsx(InputNumberField, {
+			autoCapitalize: "none",
+			autoComplete: "off",
+			autoCorrect: "off",
+			className: cn("h-9 w-full min-w-0 px-3 py-1", "rounded-md border border-input", "bg-transparent shadow-xs outline-none", "text-base", "transition-[color,box-shadow]", "selection:bg-primary selection:text-primary-foreground", "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-3 focus-visible:ring-ring/50", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "aria-invalid:border-destructive aria-invalid:ring-destructive/20", "md:text-sm", "dark:bg-input/30", "dark:aria-invalid:ring-destructive/40"),
+			spellCheck: "false",
+			...props
+		}), /* @__PURE__ */ jsxs("div", {
+			className: cn("order-last ml-auto grid h-full shrink-0", "divide-y divide-input border-l border-l-input", "transition", "group-hover:not-group-focus-within:not-has-disabled:border-l-border-ring/60 group-hover:not-group-focus-within:not-has-disabled:divide-border-ring/60", "group-focus-within:divide-ring group-focus-within:border-l-ring", "group-has-aria-invalid:divide-destructive group-has-aria-invalid:border-l-destructive", "group-hover:group-has-aria-invalid:not-group-focus-within:not-has-disabled:divide-destructive/60 group-hover:group-has-aria-invalid:not-group-focus-within:not-has-disabled:border-l-destructive/60", "*:[button]:focus-visible:bg-ring/50 *:[button]:focus-visible:ring-0", "group-has-aria-invalid:*:[button]:focus-visible:bg-destructive/20", "dark:group-has-aria-invalid:*:[button]:focus-visible:bg-destructive/40"),
+			"data-slot": "input-number-buttons",
+			children: [/* @__PURE__ */ jsx(InputNumberIncrementButton, {
+				"aria-label": "Increment",
+				className: buttonVariants({
+					className: "text-muted-foreground h-auto rounded-none rounded-tr-[calc(var(--radius-lg)-1px)]",
+					variant: "ghost"
+				}),
+				"data-slot": "input-number-increment-button",
+				children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
+			}), /* @__PURE__ */ jsx(InputNumberDecrementButton, {
+				"aria-label": "Decrement",
+				className: buttonVariants({
+					className: "text-muted-foreground h-auto rounded-none rounded-br-[calc(var(--radius-lg)-1px)]",
+					variant: "ghost"
+				}),
+				"data-slot": "input-number-decrement-button",
+				children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+			})]
+		})]
+	});
+}
+//#endregion
+export { InputNumber };

package/dist/components/input-otp.d.mts

@@ -0,0 +1,29 @@
+import { ComponentProps, JSX } from "react";
+import { OTPInput, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
+
+//#region src/components/input-otp.d.ts
+type InputOTPProps = ComponentProps<typeof OTPInput>;
+declare function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: InputOTPProps): JSX.Element;
+type InputOTPGroupProps = ComponentProps<"div">;
+declare function InputOTPGroup({
+  className,
+  ...props
+}: InputOTPGroupProps): JSX.Element;
+interface InputOTPSlotProps extends ComponentProps<"div"> {
+  index: number;
+}
+declare function InputOTPSlot({
+  className,
+  index,
+  ...props
+}: InputOTPSlotProps): JSX.Element;
+type InputOTPSeparatorProps = ComponentProps<"div">;
+declare function InputOTPSeparator({
+  ...props
+}: InputOTPSeparatorProps): JSX.Element;
+//#endregion
+export { InputOTP, InputOTPGroup, type InputOTPGroupProps, type InputOTPProps, InputOTPSeparator, type InputOTPSeparatorProps, InputOTPSlot, type InputOTPSlotProps, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS };

package/dist/components/input-otp.mjs

@@ -0,0 +1,48 @@
+"use client";
+import { cn } from "../lib/utils.mjs";
+import { MinusIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { use } from "react";
+import { OTPInput, OTPInputContext, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
+//#region src/components/input-otp.tsx
+function InputOTP({ className, containerClassName, ...props }) {
+	return /* @__PURE__ */ jsx(OTPInput, {
+		"aria-label": "One-time password",
+		className: cn(className),
+		containerClassName: cn("flex items-center gap-2", "has-disabled:opacity-50", containerClassName),
+		"data-slot": "input-otp",
+		...props
+	});
+}
+function InputOTPGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center -space-x-px", className),
+		"data-slot": "input-otp-group",
+		role: "group",
+		...props
+	});
+}
+function InputOTPSlot({ className, index, ...props }) {
+	const slot = use(OTPInputContext).slots[index];
+	if (slot === void 0) throw new Error(`InputOTPSlot: no slot at index ${index}`);
+	const { char, hasFakeCaret, isActive } = slot;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative flex size-9 items-center justify-center", "border border-input outline-hidden", "text-sm", "transition-all", "not-has-disabled:shadow-xs", "first:rounded-l-lg", "last:rounded-r-lg", "aria-invalid:border-destructive", "dark:bg-input/30", "data-active:z-10 data-active:border-ring data-active:ring-3 data-active:ring-ring/50", "data-active:aria-invalid:border-destructive data-active:aria-invalid:ring-destructive/20", "dark:data-active:aria-invalid:ring-destructive/40", className),
+		"data-active": isActive,
+		"data-slot": "input-otp-slot",
+		...props,
+		children: [char, hasFakeCaret ? /* @__PURE__ */ jsx("div", {
+			className: cn("absolute inset-0 flex items-center justify-center", "pointer-events-none"),
+			children: /* @__PURE__ */ jsx("div", { className: cn("h-4 w-px", "bg-foreground", "animate-caret-blink", "animation-duration-1000") })
+		}) : null]
+	});
+}
+function InputOTPSeparator({ ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-otp-separator",
+		...props,
+		children: /* @__PURE__ */ jsx(MinusIcon, {})
+	});
+}
+//#endregion
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS };

package/dist/components/input-password.d.mts

@@ -0,0 +1,13 @@
+import { InputGroupInput } from "./input-group.mjs";
+import { ComponentProps, JSX } from "react";
+
+//#region src/components/input-password.d.ts
+type InputPasswordProps = Omit<ComponentProps<typeof InputGroupInput>, "type">;
+declare function InputPassword({
+  className,
+  disabled,
+  readOnly,
+  ...props
+}: InputPasswordProps): JSX.Element;
+//#endregion
+export { InputPassword, type InputPasswordProps };

package/dist/components/input-password.mjs

@@ -0,0 +1,38 @@
+"use client";
+import { cn } from "../lib/utils.mjs";
+import { InputGroup, InputGroupButton, InputGroupInput } from "./input-group.mjs";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+//#region src/components/input-password.tsx
+function InputPassword({ className, disabled, readOnly, ...props }) {
+	const [type, setType] = useState("password");
+	const togglePasswordVisibility = useCallback(() => {
+		setType((previous) => previous === "password" ? "text" : "password");
+	}, []);
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		className,
+		"data-disabled": disabled ? "true" : void 0,
+		"data-slot": "input-password",
+		children: [/* @__PURE__ */ jsx(InputGroupInput, {
+			autoCapitalize: "none",
+			"data-slot": "input-password-item",
+			disabled,
+			readOnly,
+			type,
+			...props
+		}), /* @__PURE__ */ jsx(InputGroupButton, {
+			"aria-label": type === "password" ? "Show password" : "Hide password",
+			className: cn("rounded-full", "focus-visible:ring-0", "focus-visible:not-disabled:bg-input"),
+			"data-slot": "input-password-toggle",
+			disabled,
+			size: "icon-sm",
+			type: "button",
+			variant: "ghost",
+			onClick: togglePasswordVisibility,
+			children: type === "password" ? /* @__PURE__ */ jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {})
+		})]
+	});
+}
+//#endregion
+export { InputPassword };

package/dist/components/input-search.d.mts

@@ -0,0 +1,20 @@
+import { InputGroupInput } from "./input-group.mjs";
+import { ComponentProps, JSX } from "react";
+
+//#region src/components/input-search.d.ts
+interface InputSearchProps extends Omit<ComponentProps<typeof InputGroupInput>, "defaultValue" | "onChange" | "type" | "value"> {
+  defaultValue?: string;
+  onChange?: (value?: string) => void;
+  value?: string;
+}
+declare function InputSearch({
+  className,
+  defaultValue,
+  disabled,
+  onChange,
+  readOnly,
+  value: valueProperty,
+  ...props
+}: InputSearchProps): JSX.Element;
+//#endregion
+export { InputSearch, type InputSearchProps };

package/dist/components/input-search.mjs

@@ -0,0 +1,50 @@
+"use client";
+import { cn } from "../lib/utils.mjs";
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.mjs";
+import { SearchIcon, XIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+//#region src/components/input-search.tsx
+function InputSearch({ className, defaultValue, disabled, onChange, readOnly, value: valueProperty, ...props }) {
+	const [value, setValue] = useControllableState({
+		defaultProp: defaultValue,
+		onChange,
+		prop: valueProperty
+	});
+	return /* @__PURE__ */ jsxs(InputGroup, {
+		className,
+		"data-disabled": disabled ? "true" : void 0,
+		"data-slot": "input-search",
+		children: [
+			/* @__PURE__ */ jsx(InputGroupAddon, {
+				align: "inline-start",
+				children: /* @__PURE__ */ jsx(SearchIcon, {})
+			}),
+			/* @__PURE__ */ jsx(InputGroupInput, {
+				"data-slot": "input-search-item",
+				disabled,
+				readOnly,
+				type: "search",
+				value: value ?? "",
+				onChange: (event) => {
+					setValue(event.target.value);
+				},
+				...props
+			}),
+			value ? /* @__PURE__ */ jsx(InputGroupButton, {
+				"aria-label": "Clear search",
+				className: cn("rounded-full", "focus-visible:ring-0", "focus-visible:not-disabled:bg-input"),
+				"data-slot": "input-search-clear",
+				disabled: disabled ?? readOnly,
+				size: "icon-sm",
+				variant: "ghost",
+				onClick: () => {
+					setValue("");
+				},
+				children: /* @__PURE__ */ jsx(XIcon, {})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { InputSearch };

package/dist/components/input.d.mts

@@ -0,0 +1,11 @@
+import { ComponentProps, JSX } from "react";
+
+//#region src/components/input.d.ts
+type InputProps = ComponentProps<"input">;
+declare function Input({
+  className,
+  type,
+  ...props
+}: InputProps): JSX.Element;
+//#endregion
+export { Input, type InputProps };

package/dist/components/input.mjs

@@ -0,0 +1,14 @@
+"use client";
+import { cn } from "../lib/utils.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/input.tsx
+function Input({ className, type, ...props }) {
+	return /* @__PURE__ */ jsx("input", {
+		className: cn("h-9 w-full min-w-0 px-3 py-1", "rounded-lg border border-input", "bg-transparent shadow-xs outline-none", "text-base", "transition-[color,box-shadow]", "selection:bg-primary selection:text-primary-foreground", "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", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "md:text-sm", "dark:bg-input/30", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "aria-invalid:border-destructive aria-invalid:ring-destructive/20", "dark:aria-invalid:ring-destructive/40", className),
+		"data-slot": "input",
+		type,
+		...props
+	});
+}
+//#endregion
+export { Input };

package/dist/components/item.d.mts

@@ -0,0 +1,82 @@
+import { VariantProps } from "../lib/utils.mjs";
+import { Separator } from "./separator.mjs";
+import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
+import { ComponentProps, JSX } from "react";
+
+//#region src/components/item.d.ts
+declare const itemVariants: _$_codefast_tailwind_variants0.VariantFunctionType<{
+  size: {
+    default: string[];
+    sm: string[];
+  };
+  variant: {
+    default: string;
+    muted: string;
+    outline: string;
+  };
+}, Record<string, never>>;
+declare const itemMediaVariants: _$_codefast_tailwind_variants0.VariantFunctionType<{
+  variant: {
+    default: string;
+    icon: string[];
+    image: string[];
+  };
+}, Record<string, never>>;
+type ItemGroupProps = ComponentProps<"div">;
+declare function ItemGroup({
+  className,
+  ...props
+}: ItemGroupProps): JSX.Element;
+type ItemSeparatorProps = ComponentProps<typeof Separator>;
+declare function ItemSeparator({
+  className,
+  ...props
+}: ItemSeparatorProps): JSX.Element;
+type ItemProps = ComponentProps<"div"> & VariantProps<typeof itemVariants> & {
+  asChild?: boolean;
+};
+declare function Item({
+  asChild,
+  className,
+  size,
+  variant,
+  ...props
+}: ItemProps): JSX.Element;
+type ItemMediaProps = ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>;
+declare function ItemMedia({
+  className,
+  variant,
+  ...props
+}: ItemMediaProps): JSX.Element;
+type ItemContentProps = ComponentProps<"div">;
+declare function ItemContent({
+  className,
+  ...props
+}: ItemContentProps): JSX.Element;
+type ItemTitleProps = ComponentProps<"div">;
+declare function ItemTitle({
+  className,
+  ...props
+}: ItemTitleProps): JSX.Element;
+type ItemDescriptionProps = ComponentProps<"p">;
+declare function ItemDescription({
+  className,
+  ...props
+}: ItemDescriptionProps): JSX.Element;
+type ItemActionsProps = ComponentProps<"div">;
+declare function ItemActions({
+  className,
+  ...props
+}: ItemActionsProps): JSX.Element;
+type ItemHeaderProps = ComponentProps<"div">;
+declare function ItemHeader({
+  className,
+  ...props
+}: ItemHeaderProps): JSX.Element;
+type ItemFooterProps = ComponentProps<"div">;
+declare function ItemFooter({
+  className,
+  ...props
+}: ItemFooterProps): JSX.Element;
+//#endregion
+export { Item, ItemActions, type ItemActionsProps, ItemContent, type ItemContentProps, ItemDescription, type ItemDescriptionProps, ItemFooter, type ItemFooterProps, ItemGroup, type ItemGroupProps, ItemHeader, type ItemHeaderProps, ItemMedia, type ItemMediaProps, type ItemProps, ItemSeparator, type ItemSeparatorProps, ItemTitle, type ItemTitleProps, itemMediaVariants, itemVariants };