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

package/src/variants/button.ts

@@ -0,0 +1,93 @@
+import type { VariantProps } from "#/lib/utils";
+
+import { tv } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Variant: Button
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @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", // 32px
+      icon: "size-9", // 36px
+      "icon-lg": "size-10", // 40px
+
+      sm: ["h-8 px-3", "has-[>svg]:px-2.5"], // 32px
+      md: ["h-9 px-4", "has-[>svg]:px-3"], // 36px
+      lg: ["h-10 px-6", "has-[>svg]:px-4"], // 40px
+    },
+    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",
+      ],
+    },
+  },
+});
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ButtonVariants = VariantProps<typeof buttonVariants>;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { buttonVariants };
+export type { ButtonVariants };

package/src/variants/empty.ts

@@ -0,0 +1,43 @@
+import type { VariantProps } from "#/lib/utils";
+
+import { tv } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Variant: EmptyMedia
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @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",
+      ],
+    },
+  },
+});
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type EmptyMediaVariants = VariantProps<typeof emptyMediaVariants>;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { emptyMediaVariants };
+export type { EmptyMediaVariants };

package/src/variants/field.ts

@@ -0,0 +1,50 @@
+import type { VariantProps } from "#/lib/utils";
+
+import { tv } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Variant: Field
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @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"],
+    },
+  },
+});
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type FieldVariants = VariantProps<typeof fieldVariants>;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { fieldVariants };
+export type { FieldVariants };

package/src/variants/input-group.ts

@@ -0,0 +1,132 @@
+import type { VariantProps } from "#/lib/utils";
+
+import { tv } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Variant: InputGroup
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @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",
+  ],
+});
+
+/* -----------------------------------------------------------------------------
+ * Variant: InputGroupAddon
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @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]",
+      ],
+    },
+  },
+});
+
+/* -----------------------------------------------------------------------------
+ * Variant: InputGroupButton
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @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"],
+    },
+  },
+});
+
+/**
+ * @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>;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { inputGroupAddonVariants, inputGroupButtonVariants, inputGroupVariants };
+export type { InputGroupAddonVariants, InputGroupButtonVariants, InputGroupVariants };

package/src/variants/item.ts

@@ -0,0 +1,90 @@
+import type { VariantProps } from "#/lib/utils";
+
+import { tv } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Variant: Item
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @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",
+    },
+  },
+});
+
+/* -----------------------------------------------------------------------------
+ * Variant: ItemMedia
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @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",
+      ],
+    },
+  },
+});
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ItemVariants = VariantProps<typeof itemVariants>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ItemMediaVariants = VariantProps<typeof itemMediaVariants>;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { itemMediaVariants, itemVariants };
+export type { ItemMediaVariants, ItemVariants };

package/src/variants/navigation-menu.ts

@@ -0,0 +1,32 @@
+import type { VariantProps } from "#/lib/utils";
+
+import { tv } from "#/lib/utils";
+
+import { buttonVariants } from "#/variants/button";
+
+/* -----------------------------------------------------------------------------
+ * Style: NavigationMenuTrigger
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @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",
+  }),
+});
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type NavigationMenuTriggerVariants = VariantProps<typeof navigationMenuTriggerVariants>;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { navigationMenuTriggerVariants };
+export type { NavigationMenuTriggerVariants };

package/src/variants/progress-circle.ts

@@ -0,0 +1,47 @@
+import type { VariantProps } from "#/lib/utils";
+
+import { tv } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Variant: ProgressCircle
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @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" },
+    },
+  },
+});
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ProgressCircleVariants = VariantProps<typeof progressCircleVariants>;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { progressCircleVariants };
+export type { ProgressCircleVariants };

package/src/variants/scroll-area.ts

@@ -0,0 +1,79 @@
+import type { VariantProps } from "#/lib/utils";
+
+import { tv } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Variant: ScrollAreaScrollbar
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @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: "",
+    },
+  },
+});
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type ScrollAreaScrollbarVariants = VariantProps<typeof scrollAreaScrollbarVariants>;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { scrollAreaScrollbarVariants };
+export type { ScrollAreaScrollbarVariants };

package/src/variants/separator.ts

@@ -0,0 +1,41 @@
+import type { VariantProps } from "#/lib/utils";
+
+import { tv } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Variant: Separator
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @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",
+    },
+  },
+});
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type SeparatorVariants = VariantProps<typeof separatorVariants>;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { separatorVariants };
+export type { SeparatorVariants };

package/src/variants/sheet.ts

@@ -0,0 +1,70 @@
+import type { VariantProps } from "#/lib/utils";
+
+import { tv } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Variant: SheetContent
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+const sheetContentVariants = tv({
+  base: [
+    "fixed z-50 flex flex-col overflow-auto",
+    "bg-background shadow-lg",
+    "ease-ui data-open:animate-in data-open:animation-duration-500",
+    "data-closed:animate-out data-closed:animation-duration-500",
+    "motion-reduce:animate-none motion-reduce:transition-none motion-reduce:duration-0",
+  ],
+  defaultVariants: {
+    side: "right",
+  },
+  variants: {
+    side: {
+      bottom: [
+        "max-h-[80dvh]",
+        "inset-x-0 bottom-0",
+        "rounded-t-2xl border-t",
+        "pb-[env(safe-area-inset-bottom)]",
+        "data-open:slide-in-from-bottom",
+        "data-closed:slide-out-to-bottom",
+      ],
+      left: [
+        "h-full w-3/4",
+        "inset-y-0 left-0",
+        "border-r",
+        "sm:max-w-sm",
+        "data-open:slide-in-from-left",
+        "data-closed:slide-out-to-left",
+      ],
+      right: [
+        "h-full w-3/4",
+        "inset-y-0 right-0",
+        "border-l",
+        "sm:max-w-sm",
+        "data-open:slide-in-from-right",
+        "data-closed:slide-out-to-right",
+      ],
+      top: [
+        "max-h-[80vh]",
+        "inset-x-0 top-0",
+        "border-b",
+        "data-open:slide-in-from-top",
+        "data-closed:slide-out-to-top",
+      ],
+    },
+  },
+});
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type SheetContentVariants = VariantProps<typeof sheetContentVariants>;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { sheetContentVariants };
+export type { SheetContentVariants };