@webstacks/ui 0.4.3 → 0.4.5

package/dist/index.d.cts

@@ -143,7 +143,7 @@ declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitiv
 declare const AvatarFallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+    variant?: "default" | "destructive" | "secondary" | "outline" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }
@@ -214,8 +214,10 @@ interface BoxProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "color">, O
 declare const Box: React$1.ForwardRefExoticComponent<BoxProps & React$1.RefAttributes<HTMLElement>>;
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    mode?: "link" | "stroke" | "filled" | "bleed" | null | undefined;
+    tone?: "primary" | "secondary" | "tertiary" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "icon" | null | undefined;
+    fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
@@ -357,8 +359,9 @@ interface StackProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "dir">, O
 }
 declare const Stack: React$1.ForwardRefExoticComponent<StackProps & React$1.RefAttributes<HTMLElement>>;
 
-declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React$1.ComponentProps<typeof DayPicker> & {
-    buttonVariant?: React$1.ComponentProps<typeof Button>["variant"];
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonMode, buttonTone, formatters, components, ...props }: React$1.ComponentProps<typeof DayPicker> & {
+    buttonMode?: React$1.ComponentProps<typeof Button>["mode"];
+    buttonTone?: React$1.ComponentProps<typeof Button>["tone"];
 }): react_jsx_runtime.JSX.Element;
 declare function CalendarDayButton({ className, day, modifiers, ...props }: React$1.ComponentProps<typeof DayButton>): react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -143,7 +143,7 @@ declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitiv
 declare const AvatarFallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+    variant?: "default" | "destructive" | "secondary" | "outline" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }
@@ -214,8 +214,10 @@ interface BoxProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "color">, O
 declare const Box: React$1.ForwardRefExoticComponent<BoxProps & React$1.RefAttributes<HTMLElement>>;
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    mode?: "link" | "stroke" | "filled" | "bleed" | null | undefined;
+    tone?: "primary" | "secondary" | "tertiary" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "icon" | null | undefined;
+    fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
@@ -357,8 +359,9 @@ interface StackProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "dir">, O
 }
 declare const Stack: React$1.ForwardRefExoticComponent<StackProps & React$1.RefAttributes<HTMLElement>>;
 
-declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React$1.ComponentProps<typeof DayPicker> & {
-    buttonVariant?: React$1.ComponentProps<typeof Button>["variant"];
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonMode, buttonTone, formatters, components, ...props }: React$1.ComponentProps<typeof DayPicker> & {
+    buttonMode?: React$1.ComponentProps<typeof Button>["mode"];
+    buttonTone?: React$1.ComponentProps<typeof Button>["tone"];
 }): react_jsx_runtime.JSX.Element;
 declare function CalendarDayButton({ className, day, modifiers, ...props }: React$1.ComponentProps<typeof DayButton>): react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -275,37 +275,148 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva as cva2 } from "class-variance-authority";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var buttonVariants = cva2(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline"
+      mode: {
+        filled: "",
+        stroke: "bg-transparent border",
+        bleed: "!bg-transparent border-0 !rounded hover:!bg-foreground/5 disabled:opacity-50",
+        link: "disabled:opacity-50"
+      },
+      tone: {
+        primary: "",
+        secondary: "",
+        tertiary: ""
       },
       size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 px-3 text-xs",
-        lg: "h-10 px-8",
+        xs: "",
+        sm: "px-4 py-2 text-xs",
+        md: "px-6 py-3 text-sm",
+        lg: "px-8 py-4 text-base",
         icon: "h-9 w-9"
+      },
+      fullWidth: {
+        true: "w-full",
+        false: ""
       }
     },
     defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
+      mode: "filled",
+      tone: "primary",
+      size: "md"
+    },
+    compoundVariants: [
+      /* ── Filled ── */
+      {
+        mode: "filled",
+        tone: "primary",
+        className: "bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+      },
+      {
+        mode: "filled",
+        tone: "secondary",
+        className: "bg-foreground text-background hover:bg-foreground/90 dark:bg-background dark:text-foreground dark:hover:bg-background/90 dark:border dark:border-border disabled:opacity-50"
+      },
+      {
+        mode: "filled",
+        tone: "tertiary",
+        className: "bg-muted text-foreground hover:bg-muted/80 disabled:opacity-50"
+      },
+      /* ── Stroke ── */
+      {
+        mode: "stroke",
+        tone: "primary",
+        className: "border-primary text-primary hover:bg-primary hover:text-primary-foreground disabled:opacity-50"
+      },
+      {
+        mode: "stroke",
+        tone: "secondary",
+        className: "border-border text-foreground hover:bg-primary hover:text-primary-foreground hover:border-primary disabled:opacity-50"
+      },
+      {
+        mode: "stroke",
+        tone: "tertiary",
+        className: "border-border text-foreground hover:bg-accent disabled:opacity-50"
+      },
+      /* ── Bleed ── */
+      {
+        mode: "bleed",
+        tone: "primary",
+        className: "text-foreground"
+      },
+      {
+        mode: "bleed",
+        tone: "secondary",
+        className: "text-foreground"
+      },
+      {
+        mode: "bleed",
+        tone: "tertiary",
+        className: "text-muted-foreground"
+      },
+      /* ── Link ── */
+      {
+        mode: "link",
+        tone: "primary",
+        className: "text-primary underline-offset-4 hover:underline"
+      },
+      {
+        mode: "link",
+        tone: "secondary",
+        className: "text-foreground underline-offset-4 hover:underline"
+      },
+      {
+        mode: "link",
+        tone: "tertiary",
+        className: "text-muted-foreground underline-offset-4 hover:underline"
+      },
+      /* ── Link + Bleed size overrides ── */
+      {
+        mode: "link",
+        size: "xs",
+        className: "text-xs"
+      },
+      {
+        mode: "link",
+        size: "sm",
+        className: "px-0 py-0 text-sm"
+      },
+      {
+        mode: "link",
+        size: "md",
+        className: "px-0 py-0 text-sm"
+      },
+      {
+        mode: "link",
+        size: "lg",
+        className: "px-0 py-0 text-base"
+      },
+      {
+        mode: "bleed",
+        size: "sm",
+        className: "px-2 py-1 text-sm"
+      },
+      {
+        mode: "bleed",
+        size: "md",
+        className: "px-3 py-2 text-sm"
+      },
+      {
+        mode: "bleed",
+        size: "lg",
+        className: "px-3 py-2 text-base"
+      }
+    ]
   }
 );
 var Button = React6.forwardRef(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  ({ className, mode, tone, size, fullWidth, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx4(
       Comp,
       {
-        className: cn(buttonVariants({ variant, size, className })),
+        className: cn(buttonVariants({ mode, tone, size, fullWidth, className })),
         ref,
         ...props
       }
@@ -406,7 +517,7 @@ var AlertDialogCancel = React7.forwardRef(({ className, ...props }, ref) => /* @
   {
     ref,
     className: cn(
-      buttonVariants({ variant: "outline" }),
+      buttonVariants({ mode: "stroke", tone: "secondary" }),
       "mt-2 sm:mt-0",
       className
     ),
@@ -868,6 +979,34 @@ var columnMap = {
   11: "grid-cols-11",
   12: "grid-cols-12"
 };
+var mdColumnMap = {
+  1: "md:grid-cols-1",
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-3",
+  4: "md:grid-cols-4",
+  5: "md:grid-cols-5",
+  6: "md:grid-cols-6",
+  7: "md:grid-cols-7",
+  8: "md:grid-cols-8",
+  9: "md:grid-cols-9",
+  10: "md:grid-cols-10",
+  11: "md:grid-cols-11",
+  12: "md:grid-cols-12"
+};
+var lgColumnMap = {
+  1: "lg:grid-cols-1",
+  2: "lg:grid-cols-2",
+  3: "lg:grid-cols-3",
+  4: "lg:grid-cols-4",
+  5: "lg:grid-cols-5",
+  6: "lg:grid-cols-6",
+  7: "lg:grid-cols-7",
+  8: "lg:grid-cols-8",
+  9: "lg:grid-cols-9",
+  10: "lg:grid-cols-10",
+  11: "lg:grid-cols-11",
+  12: "lg:grid-cols-12"
+};
 var Grid = React11.forwardRef(
   ({ as: Comp = "div", className, columns = 12, gap, gapX, gapY, align, justify, ...props }, ref) => {
     let columnClasses;
@@ -876,8 +1015,8 @@ var Grid = React11.forwardRef(
     } else {
       const classes = [];
       if (columns.narrow) classes.push(columnMap[columns.narrow]);
-      if (columns.regular) classes.push(`md:${columnMap[columns.regular]}`);
-      if (columns.wide) classes.push(`lg:${columnMap[columns.wide]}`);
+      if (columns.regular) classes.push(mdColumnMap[columns.regular]);
+      if (columns.wide) classes.push(lgColumnMap[columns.wide]);
       columnClasses = classes.join(" ");
     }
     return /* @__PURE__ */ jsx10(
@@ -942,6 +1081,34 @@ var spanMap = {
   11: "col-span-11",
   12: "col-span-12"
 };
+var mdSpanMap = {
+  1: "md:col-span-1",
+  2: "md:col-span-2",
+  3: "md:col-span-3",
+  4: "md:col-span-4",
+  5: "md:col-span-5",
+  6: "md:col-span-6",
+  7: "md:col-span-7",
+  8: "md:col-span-8",
+  9: "md:col-span-9",
+  10: "md:col-span-10",
+  11: "md:col-span-11",
+  12: "md:col-span-12"
+};
+var lgSpanMap = {
+  1: "lg:col-span-1",
+  2: "lg:col-span-2",
+  3: "lg:col-span-3",
+  4: "lg:col-span-4",
+  5: "lg:col-span-5",
+  6: "lg:col-span-6",
+  7: "lg:col-span-7",
+  8: "lg:col-span-8",
+  9: "lg:col-span-9",
+  10: "lg:col-span-10",
+  11: "lg:col-span-11",
+  12: "lg:col-span-12"
+};
 var GridColumn = React11.forwardRef(
   ({ as: Comp = "div", className, span, start, ...props }, ref) => {
     let spanClasses;
@@ -950,8 +1117,8 @@ var GridColumn = React11.forwardRef(
     } else if (span) {
       const classes = [];
       if (span.narrow) classes.push(spanMap[span.narrow]);
-      if (span.regular) classes.push(`md:${spanMap[span.regular]}`);
-      if (span.wide) classes.push(`lg:${spanMap[span.wide]}`);
+      if (span.regular) classes.push(mdSpanMap[span.regular]);
+      if (span.wide) classes.push(lgSpanMap[span.wide]);
       spanClasses = classes.join(" ");
     } else {
       spanClasses = "";
@@ -1400,6 +1567,14 @@ var directionMap = {
   horizontal: "flex-row",
   vertical: "flex-col"
 };
+var mdDirectionMap = {
+  horizontal: "md:flex-row",
+  vertical: "md:flex-col"
+};
+var lgDirectionMap = {
+  horizontal: "lg:flex-row",
+  vertical: "lg:flex-col"
+};
 var gapMap = {
   none: "gap-0",
   condensed: "gap-2",
@@ -1407,6 +1582,20 @@ var gapMap = {
   spacious: "gap-6",
   "extra-spacious": "gap-8"
 };
+var mdGapMap = {
+  none: "md:gap-0",
+  condensed: "md:gap-2",
+  normal: "md:gap-4",
+  spacious: "md:gap-6",
+  "extra-spacious": "md:gap-8"
+};
+var lgGapMap = {
+  none: "lg:gap-0",
+  condensed: "lg:gap-2",
+  normal: "lg:gap-4",
+  spacious: "lg:gap-6",
+  "extra-spacious": "lg:gap-8"
+};
 var alignMap = {
   start: "items-start",
   center: "items-center",
@@ -1414,6 +1603,20 @@ var alignMap = {
   stretch: "items-stretch",
   baseline: "items-baseline"
 };
+var mdAlignMap = {
+  start: "md:items-start",
+  center: "md:items-center",
+  end: "md:items-end",
+  stretch: "md:items-stretch",
+  baseline: "md:items-baseline"
+};
+var lgAlignMap = {
+  start: "lg:items-start",
+  center: "lg:items-center",
+  end: "lg:items-end",
+  stretch: "lg:items-stretch",
+  baseline: "lg:items-baseline"
+};
 var justifyMap = {
   start: "justify-start",
   center: "justify-center",
@@ -1422,16 +1625,37 @@ var justifyMap = {
   "space-around": "justify-around",
   "space-evenly": "justify-evenly"
 };
-function resolveResponsive3(value, map) {
+var mdJustifyMap = {
+  start: "md:justify-start",
+  center: "md:justify-center",
+  end: "md:justify-end",
+  "space-between": "md:justify-between",
+  "space-around": "md:justify-around",
+  "space-evenly": "md:justify-evenly"
+};
+var lgJustifyMap = {
+  start: "lg:justify-start",
+  center: "lg:justify-center",
+  end: "lg:justify-end",
+  "space-between": "lg:justify-between",
+  "space-around": "lg:justify-around",
+  "space-evenly": "lg:justify-evenly"
+};
+function resolveResponsive3(value, maps) {
   if (!value) return [];
-  if (typeof value === "string") return [map[value]].filter(Boolean);
+  if (typeof value === "string") return [maps.narrow[value]].filter(Boolean);
   const classes = [];
-  const prefixes = { narrow: "", regular: "md:", wide: "lg:" };
-  for (const [bp, val] of Object.entries(value)) {
-    if (val && map[val]) {
-      const prefix = prefixes[bp] || "";
-      classes.push(`${prefix}${map[val]}`);
-    }
+  if (value.narrow) {
+    const cls = maps.narrow[value.narrow];
+    if (cls) classes.push(cls);
+  }
+  if (value.regular) {
+    const cls = maps.regular[value.regular];
+    if (cls) classes.push(cls);
+  }
+  if (value.wide) {
+    const cls = maps.wide[value.wide];
+    if (cls) classes.push(cls);
   }
   return classes;
 }
@@ -1448,10 +1672,10 @@ var Stack = React15.forwardRef(
     ...props
   }, ref) => {
     const responsiveClasses = [
-      ...resolveResponsive3(direction, directionMap),
-      ...resolveResponsive3(gap, gapMap),
-      ...resolveResponsive3(align, alignMap),
-      ...resolveResponsive3(justify, justifyMap)
+      ...resolveResponsive3(direction, { narrow: directionMap, regular: mdDirectionMap, wide: lgDirectionMap }),
+      ...resolveResponsive3(gap, { narrow: gapMap, regular: mdGapMap, wide: lgGapMap }),
+      ...resolveResponsive3(align, { narrow: alignMap, regular: mdAlignMap, wide: lgAlignMap }),
+      ...resolveResponsive3(justify, { narrow: justifyMap, regular: mdJustifyMap, wide: lgJustifyMap })
     ];
     const isResponsiveDirection = typeof direction === "object";
     const isResponsiveGap = typeof gap === "object";
@@ -1497,7 +1721,8 @@ function Calendar({
   classNames,
   showOutsideDays = true,
   captionLayout = "label",
-  buttonVariant = "ghost",
+  buttonMode = "bleed",
+  buttonTone = "primary",
   formatters,
   components,
   ...props
@@ -1530,12 +1755,12 @@ function Calendar({
           defaultClassNames.nav
         ),
         button_previous: cn(
-          buttonVariants({ variant: buttonVariant }),
+          buttonVariants({ mode: buttonMode, tone: buttonTone }),
           "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
           defaultClassNames.button_previous
         ),
         button_next: cn(
-          buttonVariants({ variant: buttonVariant }),
+          buttonVariants({ mode: buttonMode, tone: buttonTone }),
           "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
           defaultClassNames.button_next
         ),
@@ -1652,7 +1877,7 @@ function CalendarDayButton({
     Button,
     {
       ref,
-      variant: "ghost",
+      mode: "bleed",
       size: "icon",
       "data-day": day.date.toLocaleDateString(),
       "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
@@ -1861,13 +2086,14 @@ var CarouselItem = React18.forwardRef(({ className, ...props }, ref) => {
   );
 });
 CarouselItem.displayName = "CarouselItem";
-var CarouselPrevious = React18.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+var CarouselPrevious = React18.forwardRef(({ className, mode = "stroke", tone = "secondary", size = "icon", ...props }, ref) => {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel();
   return /* @__PURE__ */ jsxs5(
     Button,
     {
       ref,
-      variant,
+      mode,
+      tone,
       size,
       className: cn(
         "absolute  h-8 w-8 rounded-full",
@@ -1885,13 +2111,14 @@ var CarouselPrevious = React18.forwardRef(({ className, variant = "outline", siz
   );
 });
 CarouselPrevious.displayName = "CarouselPrevious";
-var CarouselNext = React18.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+var CarouselNext = React18.forwardRef(({ className, mode = "stroke", tone = "secondary", size = "icon", ...props }, ref) => {
   const { orientation, scrollNext, canScrollNext } = useCarousel();
   return /* @__PURE__ */ jsxs5(
     Button,
     {
       ref,
-      variant,
+      mode,
+      tone,
       size,
       className: cn(
         "absolute h-8 w-8 rounded-full",
@@ -3260,7 +3487,8 @@ var PaginationLink = ({
     "aria-current": isActive ? "page" : void 0,
     className: cn(
       buttonVariants({
-        variant: isActive ? "outline" : "ghost",
+        mode: isActive ? "stroke" : "bleed",
+        tone: "secondary",
         size
       }),
       className
@@ -3276,7 +3504,7 @@ var PaginationPrevious = ({
   PaginationLink,
   {
     "aria-label": "Go to previous page",
-    size: "default",
+    size: "md",
     className: cn("gap-1 pl-2.5", className),
     ...props,
     children: [
@@ -3293,7 +3521,7 @@ var PaginationNext = ({
   PaginationLink,
   {
     "aria-label": "Go to next page",
-    size: "default",
+    size: "md",
     className: cn("gap-1 pr-2.5", className),
     ...props,
     children: [
@@ -3940,7 +4168,7 @@ var SidebarTrigger = React42.forwardRef(({ className, onClick, ...props }, ref)
     {
       ref,
       "data-sidebar": "trigger",
-      variant: "ghost",
+      mode: "bleed",
       size: "icon",
       className: cn("h-7 w-7", className),
       onClick: (event) => {