@stackonward/cli 1.5.3 → 1.6.0

package/dist/resources/components/nuxt/site-source/app/theme/button.ts

@@ -1,91 +1,201 @@
 export default {
   slots: {
-    base: "inline-flex items-center justify-center rounded-ml font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25 disabled:cursor-not-allowed disabled:opacity-60",
+    base: "border-0 rounded-ml font-medium  inline-flex items-center justify-center cursor-pointer disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors min-w-[200px]",
     label: "truncate",
     leadingIcon: "shrink-0",
+    leadingAvatar: "shrink-0",
     trailingIcon: "shrink-0",
   },
   variants: {
+    fieldGroup: {
+      horizontal:
+        "not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none",
+      vertical:
+        "not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none",
+    },
+    variant: {
+      link: "h-auto min-w-0 p-0",
+      ghost: "min-w-0",
+    },
+    color: { neutral: "min-w-0" },
     size: {
       xs: {
-        base: "h-9 gap-1 px-3 text-xs",
-        leadingIcon: "size-4",
-        trailingIcon: "size-4",
+        base: "px-3 py-1 text-xs h-8 gap-1",
+        leadingIcon: "size-icon-sm",
+        leadingAvatarSize: "3xs",
+        trailingIcon: "size-icon-sm",
       },
       sm: {
-        base: "h-10 gap-1.5 px-3.5 text-sm",
-        leadingIcon: "size-4",
-        trailingIcon: "size-4",
+        base: "px-4 py-1.5 text-sm h-10 gap-1.5",
+        leadingIcon: "size-icon-sm",
+        leadingAvatarSize: "3xs",
+        trailingIcon: "size-icon-sm",
       },
       md: {
-        base: "h-11 gap-2 px-4 text-sm",
-        leadingIcon: "size-5",
-        trailingIcon: "size-5",
+        base: "px-5 py-2 text-base h-12 gap-2",
+        leadingIcon: "size-icon-md",
+        leadingAvatarSize: "2xs",
+        trailingIcon: "size-icon-md",
       },
       lg: {
-        base: "h-12 gap-2 px-5 text-base",
-        leadingIcon: "size-5",
-        trailingIcon: "size-5",
+        base: "px-6 py-2.5 text-sm w-[214px] h-[54px] gap-2",
+        leadingIcon: "size-icon-md",
+        leadingAvatarSize: "2xs",
+        trailingIcon: "size-icon-md",
       },
       xl: {
-        base: "h-14 gap-2.5 px-6 text-base",
-        leadingIcon: "size-6",
-        trailingIcon: "size-6",
+        base: "px-7 py-3 text-xl w-[240px] h-16 gap-2",
+        leadingIcon: "size-icon-lg",
+        leadingAvatarSize: "xs",
+        trailingIcon: "size-icon-lg",
+      },
+      "2xl": {
+        base: "px-8 py-3.5 font-semibold text-lg w-[310px] h-15 gap-2 max-lg:w-[285px] max-lg:h-[48px]",
+        leadingIcon: "size-icon-lg",
+        leadingAvatarSize: "sm",
+        trailingIcon: "size-icon-lg",
       },
     },
+    square: { true: "min-w-0" },
     block: {
       true: {
-        base: "w-full",
+        base: "w-full min-w-0 justify-center",
         trailingIcon: "ms-auto",
       },
     },
-    variant: {
-      link: "h-auto px-0",
+    active: {
+      true: {
+        base: "bg-primary-active text-primary-contrast",
+      },
+      false: {
+        base: "",
+      },
     },
   },
   compoundVariants: [
+    {
+      color: "neutral",
+      variant: "outline",
+      class:
+        "border-0 ring-1 ring-inset ring-border bg-surface text-text hover:bg-surface-muted focus-visible:ring-primary focus-visible:outline-none",
+    },
+    { size: "2xl", square: true, class: "w-15 min-w-0 p-3.5 max-lg:w-12" },
     {
       color: "primary",
       variant: "solid",
-      class: "bg-primary text-primary-contrast hover:bg-primary-hover active:bg-primary-active",
+      class:
+        "text-primary-contrast bg-primary hover:bg-primary-hover active:bg-primary-active focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
     },
     {
       color: "primary",
       variant: "outline",
       class:
-        "border border-primary text-primary hover:bg-primary hover:text-primary-contrast active:bg-primary-active",
+        "text-primary-hover ring-[2px] ring-primary hover:bg-primary hover:text-primary-contrast active:transition-none active:ring-primary-hover active:bg-primary-hover active:text-primary-contrast focus:outline-none focus:transition-none focus-visible:ring-2 focus-visible:ring-primary-hover",
     },
     {
       color: "primary",
       variant: "soft",
-      class: "bg-primary/10 text-primary hover:bg-primary/15 active:bg-primary/20",
+      class:
+        "text-primary-hover bg-primary/10 hover:bg-primary/20 focus:outline-none focus-visible:bg-primary/20",
+    },
+    {
+      color: "primary",
+      variant: "subtle",
+      class:
+        "text-primary-hover ring ring-inset ring-primary/25 bg-primary/10 hover:bg-primary/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
     },
     {
       color: "primary",
       variant: "ghost",
-      class: "text-primary hover:bg-primary/10 active:bg-primary/15",
+      class:
+        "text-primary-hover hover:text-primary-active hover:bg-primary/10 focus:outline-none focus-visible:bg-primary/10",
+    },
+    {
+      color: "primary",
+      variant: "link",
+      class:
+        "text-primary-hover hover:text-primary-active hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary",
     },
     {
-      color: "secondary",
+      color: "success",
       variant: "solid",
-      class: "bg-secondary text-white hover:bg-secondary-hover active:bg-secondary-active",
+      class:
+        "text-success-contrast bg-success hover:bg-success-hover active:bg-success-active focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-success",
     },
     {
-      color: "neutral",
+      color: "success",
       variant: "outline",
       class:
-        "border border-primary/30 bg-surface text-primary hover:border-primary/45 hover:bg-primary/5",
+        "text-success-hover ring-[2px] ring-success hover:bg-success hover:text-success-contrast active:transition-none active:ring-success-hover active:bg-success-hover active:text-success-contrast focus:outline-none focus:transition-none focus-visible:ring-2 focus-visible:ring-success-hover",
+    },
+    {
+      color: "success",
+      variant: "ghost",
+      class:
+        "text-success-hover hover:text-success-active hover:bg-success/10 focus:outline-none focus-visible:bg-success/10",
+    },
+    {
+      color: "success",
+      variant: "soft",
+      class:
+        "text-success-hover bg-success/10 hover:bg-success/20 focus:outline-none focus-visible:bg-success/20",
+    },
+    {
+      color: "success",
+      variant: "subtle",
+      class:
+        "text-success-hover ring ring-inset ring-success/25 bg-success/10 hover:bg-success/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-success",
+    },
+    {
+      color: "success",
+      variant: "link",
+      class:
+        "text-success-hover hover:text-success-active hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-success",
+    },
+    {
+      size: "xs",
+      square: true,
+      class: "w-8 min-w-0 p-1",
+    },
+    {
+      size: "sm",
+      square: true,
+      class: "w-10 min-w-0 p-1.5",
+    },
+    {
+      size: "md",
+      square: true,
+      class: "w-12 min-w-0 p-1.5",
+    },
+    {
+      size: "lg",
+      square: true,
+      class: "w-[54px] min-w-0 p-2",
+    },
+    {
+      size: "xl",
+      square: true,
+      class: "w-16 min-w-0 p-2",
     },
     {
       loading: true,
+      leading: true,
       class: {
         leadingIcon: "animate-spin",
+      },
+    },
+    {
+      loading: true,
+      leading: false,
+      trailing: true,
+      class: {
         trailingIcon: "animate-spin",
       },
     },
+    { square: true, class: "min-h-11 min-w-11" },
   ],
   defaultVariants: {
-    color: "primary",
+    color: "success",
     variant: "solid",
     size: "md",
   },

package/dist/resources/components/nuxt/site-source/app/theme/carousel.ts

@@ -1,11 +1,15 @@
 export default {
   slots: {
-    root: "relative",
-    container: "items-stretch",
-    item: "min-w-0",
-    controls: "gap-2",
-    arrows: "gap-2",
-    dots: "gap-1.5",
-    dot: "size-2 rounded-full bg-border data-[state=active]:bg-primary",
+    prev: "absolute !rounded-full min-w-[unset] prev-icon ring-[1px] text-primary hover:disabled:text-primary-hover",
+    next: "absolute !rounded-full min-w-[unset] next-icon ring-[1px] text-primary hover:disabled:text-primary-hover",
+    dots: "absolute inset-x-0 -bottom-[14px] flex flex-wrap items-center justify-center gap-2 max-lg:-bottom-[36px]",
+    dot: ["cursor-pointer w-[26px] h-1 bg-primary/20 rounded-[2px]", "transition"],
+  },
+  variants: {
+    active: {
+      true: {
+        dot: "bg-primary",
+      },
+    },
   },
 };

package/dist/resources/components/nuxt/site-source/app/theme/checkbox.ts

@@ -1,8 +1,14 @@
 export default {
   slots: {
-    base: "rounded-md border-border text-primary focus-visible:ring-2 focus-visible:ring-primary/25",
-    label: "text-sm font-medium text-text",
-    description: "text-sm text-muted",
+    base: "border-0 relative inline-flex items-center ring-2 ring-primary rounded-full",
+    container: "flex items-center",
+    wrapper: "relative flex items-center",
+    indicator: [
+      "flex items-center justify-center",
+      "rounded-full",
+      "transition-all duration-200 ease-in-out",
+    ],
+    icon: "pointer-events-none text-primary-contrast size-icon-xs",
   },
   defaultVariants: {
     color: "primary",

package/dist/resources/components/nuxt/site-source/app/theme/drawer.ts

@@ -0,0 +1,6 @@
+export default {
+  slots: {
+    overlay: "bg-neutral/60",
+    content: "border-0 bg-surface ring-0",
+  },
+};

package/dist/resources/components/nuxt/site-source/app/theme/form-field.ts

@@ -0,0 +1,8 @@
+export default {
+  slots: {
+    label: "text-sm font-semibold text-text",
+    container: "mt-2",
+    error: "mt-2 text-sm text-error",
+    help: "mt-2 text-xs leading-5 text-muted",
+  },
+};

package/dist/resources/components/nuxt/site-source/app/theme/icon.ts

@@ -0,0 +1,6 @@
+export default {
+  size: "var(--site-icon-md)",
+  mode: "svg" as const,
+  class: "shrink-0 align-middle",
+  attrs: { "aria-hidden": true, focusable: false },
+};

package/dist/resources/components/nuxt/site-source/app/theme/index.ts

@@ -3,27 +3,34 @@ import breadcrumb from "./breadcrumb";
 import button from "./button";
 import carousel from "./carousel";
 import checkbox from "./checkbox";
+import drawer from "./drawer";
+import formField from "./form-field";
 import input from "./input";
 import modal from "./modal";
 import pagination from "./pagination";
+import radioGroup from "./radio-group";
 import select from "./select";
 import stepper from "./stepper";
 import toast from "./toast";
+import textarea from "./textarea";
 import tooltip from "./tooltip";
 
 const siteUiTheme = {
-  strategy: "override",
   accordion,
   breadcrumb,
   button,
   carousel,
   checkbox,
+  drawer,
+  formField,
   input,
   modal,
   pagination,
+  radioGroup,
   select,
   stepper,
   toast,
+  textarea,
   tooltip,
 };
 

package/dist/resources/components/nuxt/site-source/app/theme/input.ts

@@ -1,34 +1,49 @@
 export default {
   slots: {
-    root: "w-full",
-    base: "min-h-11 rounded-ml border-border bg-surface text-text placeholder:text-dimmed transition-colors",
+    root: "w-full ring-border",
+    base: ["min-h-11 border-0 rounded-ml bg-surface text-text", "transition-colors"],
   },
   variants: {
     size: {
       xs: {
-        base: "px-2 py-1 text-xs",
-        leadingIcon: "size-4",
-        trailingIcon: "size-4",
+        base: "px-2 py-1 text-xs gap-1",
+        leading: "ps-2",
+        trailing: "pe-2",
+        leadingIcon: "size-icon-sm",
+        leadingAvatarSize: "3xs",
+        trailingIcon: "size-icon-sm",
       },
       sm: {
-        base: "px-2.5 py-1.5 text-sm",
-        leadingIcon: "size-4",
-        trailingIcon: "size-4",
+        base: "px-2.5 py-1.5 text-xs gap-1.5",
+        leading: "ps-2.5",
+        trailing: "pe-2.5",
+        leadingIcon: "size-icon-sm",
+        leadingAvatarSize: "3xs",
+        trailingIcon: "size-icon-sm",
       },
       md: {
-        base: "px-3 py-2 text-sm",
-        leadingIcon: "size-5",
-        trailingIcon: "size-5",
+        base: "px-2.5 py-1.5 text-sm gap-1.5",
+        leading: "ps-2.5",
+        trailing: "pe-2.5",
+        leadingIcon: "size-icon-md",
+        leadingAvatarSize: "2xs",
+        trailingIcon: "size-icon-md",
       },
       lg: {
-        base: "px-3.5 py-2.5 text-base",
-        leadingIcon: "size-5",
-        trailingIcon: "size-5",
+        base: "px-3 py-2 text-sm gap-2",
+        leading: "ps-3",
+        trailing: "pe-3",
+        leadingIcon: "size-icon-md",
+        leadingAvatarSize: "2xs",
+        trailingIcon: "size-icon-md",
       },
       xl: {
-        base: "px-4 py-3 text-base",
-        leadingIcon: "size-6",
-        trailingIcon: "size-6",
+        base: "px-3 py-2 text-base gap-2",
+        leading: "ps-3",
+        trailing: "pe-3",
+        leadingIcon: "size-icon-lg",
+        leadingAvatarSize: "xs",
+        trailingIcon: "size-icon-lg",
       },
     },
   },
@@ -36,7 +51,8 @@ export default {
     {
       color: "primary",
       variant: ["outline", "subtle"],
-      class: "focus-visible:ring-2 focus-visible:ring-primary/25",
+      class:
+        "ring-border text-base placeholder:text-dimmed focus-visible:ring-1! focus-visible:outline-none max-md:text-sm",
     },
   ],
   defaultVariants: {

package/dist/resources/components/nuxt/site-source/app/theme/modal.ts

@@ -1,9 +1,13 @@
 export default {
   slots: {
-    overlay: "bg-neutral/55 backdrop-blur-sm",
-    content: "rounded-2ml border border-border bg-surface p-0 shadow-xl",
-    header: "px-5 py-4",
-    body: "px-5 py-4",
-    footer: "px-5 py-4",
+    content: "border-0 bg-surface p-5 divide-y-0",
+    header: "min-h-0 p-0 pb-5",
+    body: "p-0",
+    footer: "flex-wrap p-0 pt-5",
+    wrapper: "pr-12",
+  },
+  variants: {
+    overlay: { true: { overlay: "bg-neutral/60" } },
+    fullscreen: { false: { content: "rounded-ml ring-0" } },
   },
 };

package/dist/resources/components/nuxt/site-source/app/theme/pagination.ts

@@ -1,6 +1,13 @@
 export default {
   slots: {
-    root: "gap-1",
-    item: "rounded-md border-border text-muted hover:bg-surface-muted hover:text-text",
+    root: "",
+    list: "gap-2.5 justify-center",
+    ellipsis: "min-w-9 h-9 bg-transparent",
+    label: "min-w-5 text-center",
+    first: "min-w-9 h-9 hidden",
+    prev: "min-w-9 h-9 bg-transparent px-5 leading-[36px] bg-surface rounded-ml text-dimmed hover:bg-primary hover:text-primary-contrast active:bg-primary-active cursor-pointer max-md:hidden",
+    item: 'min-w-9 h-9 bg-transparent text-dimmed hover:text-primary-contrast hover:bg-primary active:bg-primary-active data-[selected="true"]:hover:bg-primary-hover data-[selected="true"]:text-primary-contrast data-[selected="true"]:bg-primary',
+    next: "min-w-9 h-9 bg-transparent px-5 leading-[36px] bg-surface rounded-ml text-dimmed hover:bg-primary hover:text-primary-contrast active:bg-primary-active cursor-pointer max-md:hidden",
+    last: "min-w-9 h-9 hidden",
   },
 };

package/dist/resources/components/nuxt/site-source/app/theme/radio-group.ts

@@ -0,0 +1,7 @@
+export default {
+  slots: {
+    item: "min-h-11 cursor-pointer items-center rounded-ml border-border has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-primary has-data-[state=checked]:border-brand has-data-[state=checked]:bg-brand/15",
+    label: "font-semibold text-text",
+    icon: "size-icon-sm text-primary",
+  },
+};

package/dist/resources/components/nuxt/site-source/app/theme/select.ts

@@ -1,18 +1,30 @@
 export default {
   slots: {
-    base: "min-h-11 rounded-ml border-border bg-surface text-text",
-    placeholder: "text-dimmed",
-    content: "rounded-ml border border-border bg-surface shadow-lg",
-    group: "p-1.5",
-    item: "rounded-md px-2.5 py-2 text-muted data-highlighted:bg-surface-muted data-highlighted:text-text",
+    base: ["min-h-11 border-0 rounded-ml bg-surface text-text"],
+    value: "ps-5 text-base max-md:text-sm",
+    placeholder: "text-dimmed ps-5 text-base max-md:text-sm",
+    group: "p-2.5",
+    content: "border-0 rounded-ml ring-1 ring-border bg-surface-muted",
+    item: [
+      "rounded-ml !py-3.5 !px-2.5 text-muted bg-transparent data-highlighted:text-muted hover:bg-surface data-[state=checked]:bg-surface",
+    ],
     trailingIcon:
-      "text-dimmed transition-transform duration-200 group-data-[state=open]:rotate-180",
+      "group-data-[state=open]:rotate-180 transition-transform duration-200 text-dimmed",
+    itemTrailingIcon: "hidden",
   },
   compoundVariants: [
     {
       color: "primary",
       variant: ["outline", "subtle"],
-      class: "focus-visible:ring-2 focus-visible:ring-primary/25",
+      class: "p-0 ring-border focus-visible:ring-1! focus-visible:outline-none",
+    },
+    {
+      leading: true,
+      class: { value: "ps-10", placeholder: "ps-10" },
+    },
+    {
+      trailing: true,
+      class: { value: "pe-10", placeholder: "pe-10" },
     },
   ],
   defaultVariants: {

package/dist/resources/components/nuxt/site-source/app/theme/stepper.ts

@@ -1,10 +1,19 @@
 export default {
   slots: {
-    root: "gap-4",
-    item: "gap-3",
-    trigger: "rounded-md text-sm text-muted data-[state=active]:text-primary",
-    indicator: "border-border data-[state=active]:border-primary data-[state=active]:bg-primary",
-    title: "font-semibold",
-    description: "text-muted",
+    root: "step-root",
+    container: "step-container static",
+    indicator: "step-indicator text-primary-contrast text-[28px] font-bold",
+    icon: "step-icon",
+    trigger: "step-trigger size-12 max-lg:size-11 relative z-1",
+    separator: "step-separator",
+    wrapper: "step-wrapper",
+    item: "static step-item",
+    title: "step-title text-text font-semibold  max-lg:text-text max-lg:!text-lg max-lg:!mb-2.5",
+    description: "text-muted step-description max-lg:text-text max-lg:!text-sm",
+    content: "step-content",
+  },
+  defaultVariants: {
+    size: "md",
+    color: "primary",
   },
 };

package/dist/resources/components/nuxt/site-source/app/theme/textarea.ts

@@ -0,0 +1,6 @@
+export default {
+  slots: {
+    root: "w-full",
+    base: "w-full border-0 rounded-ml bg-surface px-3 py-2 text-sm leading-6 text-text placeholder:text-dimmed ring-border focus-visible:ring-1! focus-visible:ring-primary focus-visible:outline-none",
+  },
+};

package/dist/resources/components/nuxt/site-source/app/theme/toast.ts

@@ -1,8 +1,5 @@
 export default {
   slots: {
-    root: "rounded-ml border border-border bg-surface shadow-lg",
-    title: "text-sm font-semibold text-text",
-    description: "text-sm text-muted",
-    close: "min-w-0 p-1",
+    close: "p-0 min-h-11 min-w-11",
   },
 };

package/dist/resources/components/nuxt/site-source/app/theme/tooltip.ts

@@ -1,6 +1,10 @@
 export default {
   slots: {
     content:
-      "rounded-md border border-border bg-surface-elevated px-2.5 py-1.5 text-xs text-text shadow-lg",
+      "bg-neutral/70 flex items-center flex-wrap gap-1 text-primary-contrast max-w-100 shadow-sm rounded-sm h-auto px-2.5 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto",
+    arrow: "fill-neutral/70",
+    text: "overflow-visible whitespace-normal",
+    kbds: "hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:me-0.5",
+    kbdsSize: "sm",
   },
 };