@codefast/ui 0.3.16-canary.2 → 0.3.16-canary.3

package/dist/variants/button.mjs

@@ -0,0 +1,76 @@
+import { tv } from "../lib/utils.mjs";
+//#region src/variants/button.ts
+/**
+* @since 0.3.16-canary.0
+*/
+const buttonVariants = tv({
+	base: [
+		"inline-flex shrink-0 items-center justify-center gap-2",
+		"rounded-lg outline-hidden",
+		"text-sm font-medium whitespace-nowrap",
+		"transition duration-150 ease-snappy select-none",
+		"motion-reduce:transition-none motion-reduce:duration-0",
+		"active:not-disabled:translate-y-px",
+		"focus-visible:ring-3",
+		"disabled:opacity-50",
+		"[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+	],
+	defaultVariants: {
+		size: "md",
+		variant: "default"
+	},
+	variants: {
+		size: {
+			"icon-sm": "size-8",
+			icon: "size-9",
+			"icon-lg": "size-10",
+			sm: ["h-8 px-3", "has-[>svg]:px-2.5"],
+			md: ["h-9 px-4", "has-[>svg]:px-3"],
+			lg: ["h-10 px-6", "has-[>svg]:px-4"]
+		},
+		variant: {
+			default: [
+				"bg-primary text-primary-foreground",
+				"hover:not-disabled:bg-primary/80",
+				"focus-visible:ring-primary/20",
+				"dark:focus-visible:ring-primary/40"
+			],
+			destructive: [
+				"bg-destructive text-white",
+				"hover:not-disabled:bg-destructive/90",
+				"focus-visible:ring-destructive/20",
+				"dark:bg-destructive/60",
+				"dark:focus-visible:ring-destructive/40"
+			],
+			ghost: [
+				"hover:not-disabled:bg-secondary hover:not-disabled:text-secondary-foreground",
+				"focus-visible:ring-ring/50",
+				"dark:hover:not-disabled:bg-secondary/50"
+			],
+			link: [
+				"text-primary underline-offset-4",
+				"hover:not-disabled:underline",
+				"focus-visible:ring-ring/50"
+			],
+			outline: [
+				"border border-input shadow-xs",
+				"hover:not-disabled:border-ring/60 hover:not-disabled:bg-secondary hover:not-disabled:text-secondary-foreground",
+				"focus-visible:border-ring focus-visible:ring-ring/50",
+				"aria-invalid:border-destructive",
+				"focus-within:aria-invalid:ring-destructive/20",
+				"hover:not-disabled:aria-invalid:border-destructive/60",
+				"dark:bg-input/30",
+				"dark:hover:not-disabled:bg-input/50",
+				"dark:aria-invalid:border-destructive/70",
+				"dark:focus-within:aria-invalid:ring-destructive/40"
+			],
+			secondary: [
+				"bg-secondary text-secondary-foreground",
+				"hover:not-disabled:bg-secondary/80",
+				"focus-visible:ring-ring/50"
+			]
+		}
+	}
+});
+//#endregion
+export { buttonVariants };

package/dist/variants/empty.d.mts

@@ -0,0 +1,18 @@
+import { VariantProps } from "../lib/utils.mjs";
+
+//#region src/variants/empty.d.ts
+/**
+ * @since 0.3.16-canary.0
+ */
+declare const emptyMediaVariants: import("@codefast/tailwind-variants").VariantResolver<{
+  variant: {
+    default: string;
+    icon: string[];
+  };
+}, Record<string, never>>;
+/**
+ * @since 0.3.16-canary.0
+ */
+type EmptyMediaVariants = VariantProps<typeof emptyMediaVariants>;
+//#endregion
+export { type EmptyMediaVariants, emptyMediaVariants };

package/dist/variants/empty.mjs

@@ -0,0 +1,20 @@
+import { tv } from "../lib/utils.mjs";
+//#region src/variants/empty.ts
+/**
+* @since 0.3.16-canary.0
+*/
+const emptyMediaVariants = tv({
+	base: ["mb-2 flex shrink-0 items-center justify-center", "[&_svg]:pointer-events-none [&_svg]:shrink-0"],
+	defaultVariants: { variant: "default" },
+	variants: { variant: {
+		default: "bg-transparent",
+		icon: [
+			"flex size-10 shrink-0 items-center justify-center",
+			"rounded-xl",
+			"bg-muted text-foreground",
+			"[&_svg:not([class*='size-'])]:size-6"
+		]
+	} }
+});
+//#endregion
+export { emptyMediaVariants };

package/dist/variants/field.d.mts

@@ -0,0 +1,19 @@
+import { VariantProps } from "../lib/utils.mjs";
+
+//#region src/variants/field.d.ts
+/**
+ * @since 0.3.16-canary.0
+ */
+declare const fieldVariants: import("@codefast/tailwind-variants").VariantResolver<{
+  orientation: {
+    horizontal: string[];
+    responsive: string[];
+    vertical: string[];
+  };
+}, Record<string, never>>;
+/**
+ * @since 0.3.16-canary.0
+ */
+type FieldVariants = VariantProps<typeof fieldVariants>;
+//#endregion
+export { type FieldVariants, fieldVariants };

package/dist/variants/field.mjs

@@ -0,0 +1,34 @@
+import { tv } from "../lib/utils.mjs";
+//#region src/variants/field.ts
+/**
+* @since 0.3.16-canary.0
+*/
+const fieldVariants = tv({
+	base: ["group/field flex w-full gap-3", "data-[invalid=true]:text-destructive"],
+	defaultVariants: { orientation: "vertical" },
+	variants: { orientation: {
+		horizontal: [
+			"flex-row items-center",
+			"has-[>[data-slot=field-content]]:items-start",
+			"[&>[data-slot=field-label]]:flex-auto",
+			"has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+		],
+		responsive: [
+			"flex-col",
+			"@md/field-group:flex-row @md/field-group:items-center",
+			"@md/field-group:has-[>[data-slot=field-content]]:items-start",
+			"[&>*]:w-full",
+			"@md/field-group:[&>*]:w-auto",
+			"[&>.sr-only]:w-auto",
+			"@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+			"@md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+		],
+		vertical: [
+			"flex-col",
+			"[&>*]:w-full",
+			"[&>.sr-only]:w-auto"
+		]
+	} }
+});
+//#endregion
+export { fieldVariants };

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

@@ -0,0 +1,43 @@
+import { VariantProps } from "../lib/utils.mjs";
+
+//#region src/variants/input-group.d.ts
+/**
+ * @since 0.3.16-canary.0
+ */
+declare const inputGroupVariants: import("@codefast/tailwind-variants").VariantResolver<import("@codefast/tailwind-variants").VariantSchema, Record<string, never>>;
+/**
+ * @since 0.3.16-canary.0
+ */
+declare const inputGroupAddonVariants: import("@codefast/tailwind-variants").VariantResolver<{
+  align: {
+    "block-end": string[];
+    "block-start": string[];
+    "inline-end": string[];
+    "inline-start": string[];
+  };
+}, Record<string, never>>;
+/**
+ * @since 0.3.16-canary.0
+ */
+declare const inputGroupButtonVariants: import("@codefast/tailwind-variants").VariantResolver<{
+  size: {
+    "icon-xs": string[];
+    "icon-sm": string[];
+    xs: string[];
+    sm: string[];
+  };
+}, Record<string, never>>;
+/**
+ * @since 0.3.16-canary.0
+ */
+type InputGroupVariants = VariantProps<typeof inputGroupVariants>;
+/**
+ * @since 0.3.16-canary.0
+ */
+type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>;
+/**
+ * @since 0.3.16-canary.0
+ */
+type InputGroupButtonVariants = VariantProps<typeof inputGroupButtonVariants>;
+//#endregion
+export { type InputGroupAddonVariants, type InputGroupButtonVariants, type InputGroupVariants, inputGroupAddonVariants, inputGroupButtonVariants, inputGroupVariants };

package/dist/variants/input-group.mjs

@@ -0,0 +1,93 @@
+import { tv } from "../lib/utils.mjs";
+//#region src/variants/input-group.ts
+/**
+* @since 0.3.16-canary.0
+*/
+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]",
+	"motion-reduce:transition-none",
+	"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"
+] });
+/**
+* @since 0.3.16-canary.0
+*/
+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]"
+		]
+	} }
+});
+/**
+* @since 0.3.16-canary.0
+*/
+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-xs": [
+			"size-6 p-0",
+			"rounded-[calc(var(--radius)-5px)]",
+			"has-[>svg]:p-0"
+		],
+		"icon-sm": ["size-8 p-0", "has-[>svg]:p-0"],
+		xs: [
+			"h-6 gap-1 px-2",
+			"rounded-[calc(var(--radius)-5px)]",
+			"has-[>svg]:px-2",
+			"[&>svg]:size-3.5"
+		],
+		sm: [
+			"h-8 gap-1.5 px-2.5",
+			"rounded-md",
+			"has-[>svg]:px-2.5"
+		]
+	} }
+});
+//#endregion
+export { inputGroupAddonVariants, inputGroupButtonVariants, inputGroupVariants };

package/dist/variants/item.d.mts

@@ -0,0 +1,37 @@
+import { VariantProps } from "../lib/utils.mjs";
+
+//#region src/variants/item.d.ts
+/**
+ * @since 0.3.16-canary.0
+ */
+declare const itemVariants: import("@codefast/tailwind-variants").VariantResolver<{
+  size: {
+    default: string[];
+    sm: string[];
+  };
+  variant: {
+    default: string;
+    muted: string;
+    outline: string;
+  };
+}, Record<string, never>>;
+/**
+ * @since 0.3.16-canary.0
+ */
+declare const itemMediaVariants: import("@codefast/tailwind-variants").VariantResolver<{
+  variant: {
+    default: string;
+    icon: string[];
+    image: string[];
+  };
+}, Record<string, never>>;
+/**
+ * @since 0.3.16-canary.0
+ */
+type ItemVariants = VariantProps<typeof itemVariants>;
+/**
+ * @since 0.3.16-canary.0
+ */
+type ItemMediaVariants = VariantProps<typeof itemMediaVariants>;
+//#endregion
+export { type ItemMediaVariants, type ItemVariants, itemMediaVariants, itemVariants };

package/dist/variants/item.mjs

@@ -0,0 +1,60 @@
+import { tv } from "../lib/utils.mjs";
+//#region src/variants/item.ts
+/**
+* @since 0.3.16-canary.0
+*/
+const itemVariants = tv({
+	base: [
+		"group/item flex flex-wrap items-center",
+		"rounded-lg border border-transparent outline-hidden",
+		"text-sm",
+		"transition-colors duration-100",
+		"motion-reduce:transition-none motion-reduce:duration-0",
+		"focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
+		"[a]:transition-colors",
+		"[a]:motion-reduce:transition-none",
+		"[a]:hover:bg-accent/50"
+	],
+	defaultVariants: {
+		size: "default",
+		variant: "default"
+	},
+	variants: {
+		size: {
+			default: ["gap-4", "p-4"],
+			sm: ["gap-2.5", "px-4 py-3"]
+		},
+		variant: {
+			default: "bg-transparent",
+			muted: "bg-muted/50",
+			outline: "border-border"
+		}
+	}
+});
+/**
+* @since 0.3.16-canary.0
+*/
+const itemMediaVariants = tv({
+	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"
+	],
+	defaultVariants: { variant: "default" },
+	variants: { variant: {
+		default: "bg-transparent",
+		icon: [
+			"size-8 shrink-0",
+			"rounded-md border",
+			"bg-muted",
+			"[&_svg:not([class*='size-'])]:size-4"
+		],
+		image: [
+			"size-10 shrink-0 overflow-hidden",
+			"rounded-md",
+			"[&_img]:size-full [&_img]:object-cover"
+		]
+	} }
+});
+//#endregion
+export { itemMediaVariants, itemVariants };

package/dist/variants/navigation-menu.d.mts

@@ -0,0 +1,13 @@
+import { VariantProps } from "../lib/utils.mjs";
+
+//#region src/variants/navigation-menu.d.ts
+/**
+ * @since 0.3.16-canary.0
+ */
+declare const navigationMenuTriggerVariants: import("@codefast/tailwind-variants").VariantResolver<import("@codefast/tailwind-variants").VariantSchema, Record<string, never>>;
+/**
+ * @since 0.3.16-canary.0
+ */
+type NavigationMenuTriggerVariants = VariantProps<typeof navigationMenuTriggerVariants>;
+//#endregion
+export { type NavigationMenuTriggerVariants, navigationMenuTriggerVariants };

package/dist/variants/navigation-menu.mjs

@@ -0,0 +1,12 @@
+import { tv } from "../lib/utils.mjs";
+import { buttonVariants } from "./button.mjs";
+//#region src/variants/navigation-menu.ts
+/**
+* @since 0.3.16-canary.0
+*/
+const navigationMenuTriggerVariants = tv({ base: buttonVariants({
+	className: "data-open:bg-secondary/50 data-open:text-secondary-foreground group/navigation-menu-trigger focus-visible:bg-secondary dark:hover:not-disabled:bg-secondary",
+	variant: "ghost"
+}) });
+//#endregion
+export { navigationMenuTriggerVariants };

package/dist/variants/progress-circle.d.mts

@@ -0,0 +1,52 @@
+import { VariantProps } from "../lib/utils.mjs";
+
+//#region src/variants/progress-circle.d.ts
+/**
+ * @since 0.3.16-canary.0
+ */
+declare const progressCircleVariants: import("@codefast/tailwind-variants").VariantResolver<{
+  size: {
+    sm: {
+      label: string;
+    };
+    md: {
+      label: string;
+    };
+    lg: {
+      label: string;
+    };
+    xl: {
+      label: string;
+    };
+    "2xl": {
+      label: string;
+    };
+  };
+  thickness: {
+    regular: {};
+    thick: {};
+    thin: {};
+  };
+  variant: {
+    default: {
+      indicator: string;
+      track: string;
+    };
+    destructive: {
+      indicator: string;
+      track: string;
+    };
+  };
+}, {
+  indicator: string;
+  label: string[];
+  root: string;
+  svg: string;
+  track: string;
+}>;
+/**
+ * @since 0.3.16-canary.0
+ */
+type ProgressCircleVariants = VariantProps<typeof progressCircleVariants>;
+//#endregion
+export { type ProgressCircleVariants, progressCircleVariants };

package/dist/variants/progress-circle.mjs

@@ -0,0 +1,49 @@
+import { tv } from "../lib/utils.mjs";
+//#region src/variants/progress-circle.ts
+/**
+* @since 0.3.16-canary.0
+*/
+const progressCircleVariants = tv({
+	defaultVariants: {
+		size: "md",
+		thickness: "regular",
+		variant: "default"
+	},
+	slots: {
+		indicator: "origin-center",
+		label: [
+			"absolute flex items-center justify-center",
+			"inset-0",
+			"text-xs font-medium"
+		],
+		root: "relative inline-flex items-center justify-center",
+		svg: "size-full",
+		track: "origin-center"
+	},
+	variants: {
+		size: {
+			sm: { label: "text-[0.625rem]" },
+			md: { label: "text-xs" },
+			lg: { label: "text-sm" },
+			xl: { label: "text-base" },
+			"2xl": { label: "text-lg" }
+		},
+		thickness: {
+			regular: {},
+			thick: {},
+			thin: {}
+		},
+		variant: {
+			default: {
+				indicator: "text-primary",
+				track: "text-primary/20"
+			},
+			destructive: {
+				indicator: "text-destructive",
+				track: "text-destructive/20"
+			}
+		}
+	}
+});
+//#endregion
+export { progressCircleVariants };

package/dist/variants/scroll-area.d.mts

@@ -0,0 +1,24 @@
+import { VariantProps } from "../lib/utils.mjs";
+
+//#region src/variants/scroll-area.d.ts
+/**
+ * @since 0.3.16-canary.0
+ */
+declare const scrollAreaScrollbarVariants: import("@codefast/tailwind-variants").VariantResolver<{
+  orientation: {
+    horizontal: string[];
+    vertical: string[];
+  };
+  size: {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+  };
+}, Record<string, never>>;
+/**
+ * @since 0.3.16-canary.0
+ */
+type ScrollAreaScrollbarVariants = VariantProps<typeof scrollAreaScrollbarVariants>;
+//#endregion
+export { type ScrollAreaScrollbarVariants, scrollAreaScrollbarVariants };

package/dist/variants/scroll-area.mjs

@@ -0,0 +1,63 @@
+import { tv } from "../lib/utils.mjs";
+//#region src/variants/scroll-area.ts
+/**
+* @since 0.3.16-canary.0
+*/
+const scrollAreaScrollbarVariants = tv({
+	base: [
+		"flex",
+		"p-px",
+		"touch-none transition-colors select-none",
+		"motion-reduce:transition-none motion-reduce:duration-0"
+	],
+	compoundVariants: [
+		{
+			className: "w-1.5",
+			orientation: "vertical",
+			size: "sm"
+		},
+		{
+			className: "w-2",
+			orientation: "vertical",
+			size: "md"
+		},
+		{
+			className: "w-2.5",
+			orientation: "vertical",
+			size: "lg"
+		},
+		{
+			className: "h-1.5",
+			orientation: "horizontal",
+			size: "sm"
+		},
+		{
+			className: "h-2",
+			orientation: "horizontal",
+			size: "md"
+		},
+		{
+			className: "h-2.5",
+			orientation: "horizontal",
+			size: "lg"
+		}
+	],
+	defaultVariants: {
+		orientation: "vertical",
+		size: "md"
+	},
+	variants: {
+		orientation: {
+			horizontal: ["w-full flex-col", "border-t border-t-transparent"],
+			vertical: ["h-full flex-row", "border-l border-l-transparent"]
+		},
+		size: {
+			none: "",
+			sm: "",
+			md: "",
+			lg: ""
+		}
+	}
+});
+//#endregion
+export { scrollAreaScrollbarVariants };

package/dist/variants/separator.d.mts

@@ -0,0 +1,23 @@
+import { VariantProps } from "../lib/utils.mjs";
+
+//#region src/variants/separator.d.ts
+/**
+ * @since 0.3.16-canary.0
+ */
+declare const separatorVariants: import("@codefast/tailwind-variants").VariantResolver<{
+  align: {
+    center: string;
+    end: string;
+    start: string;
+  };
+  orientation: {
+    horizontal: string;
+    vertical: string;
+  };
+}, Record<string, never>>;
+/**
+ * @since 0.3.16-canary.0
+ */
+type SeparatorVariants = VariantProps<typeof separatorVariants>;
+//#endregion
+export { type SeparatorVariants, separatorVariants };

package/dist/variants/separator.mjs

@@ -0,0 +1,25 @@
+import { tv } from "../lib/utils.mjs";
+//#region src/variants/separator.ts
+/**
+* @since 0.3.16-canary.0
+*/
+const separatorVariants = tv({
+	base: ["relative flex shrink-0 items-center", "bg-border"],
+	defaultVariants: {
+		align: "center",
+		orientation: "horizontal"
+	},
+	variants: {
+		align: {
+			center: "justify-center",
+			end: "justify-end",
+			start: "justify-start"
+		},
+		orientation: {
+			horizontal: "h-px w-full",
+			vertical: "h-full w-px flex-col"
+		}
+	}
+});
+//#endregion
+export { separatorVariants };