@stackonward/cli 1.5.3 → 1.7.0

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

@@ -1,88 +1,194 @@
 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",
     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",
+    },
     size: {
       xs: {
-        base: "h-9 gap-1 px-3 text-xs",
-        leadingIcon: "size-4",
-        trailingIcon: "size-4",
+        base: "px-3 py-0 text-xs/4 h-control-xs gap-1.5",
+        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-0 text-sm/5 h-control-sm 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-0 text-sm/5 h-control-md 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-0 text-base/6 h-control-lg 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-0 text-lg/7 h-control-xl gap-2",
+        leadingIcon: "size-icon-lg",
+        leadingAvatarSize: "xs",
+        trailingIcon: "size-icon-lg",
+      },
+      "2xl": {
+        base: "px-8 py-0 text-lg/7 h-control-2xl gap-2",
+        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-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
+    },
+    { size: "2xl", square: true, class: "w-control-2xl p-0" },
     {
       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-1 ring-inset 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: "secondary",
+      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: "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-1 ring-inset 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-control-xs p-0",
+    },
+    {
+      size: "sm",
+      square: true,
+      class: "w-control-sm p-0",
+    },
+    {
+      size: "md",
+      square: true,
+      class: "w-control-md p-0",
+    },
+    {
+      size: "lg",
+      square: true,
+      class: "w-control-lg p-0",
+    },
+    {
+      size: "xl",
+      square: true,
+      class: "w-control-xl p-0",
     },
     {
       loading: true,
+      leading: true,
       class: {
         leadingIcon: "animate-spin",
+      },
+    },
+    {
+      loading: true,
+      leading: false,
+      trailing: true,
+      class: {
         trailingIcon: "animate-spin",
       },
     },
+    { variant: "link", class: "h-auto min-w-0 p-0" },
+    { square: true, class: "min-h-11 min-w-11" },
   ],
   defaultVariants: {
     color: "primary",

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,58 @@ 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",
+  tv: {
+    twMergeConfig: {
+      extend: {
+        theme: {
+          radius: ["ml", "2ml"],
+          spacing: [
+            "control-xs",
+            "control-sm",
+            "control-md",
+            "control-lg",
+            "control-xl",
+            "control-2xl",
+            "icon-xs",
+            "icon-sm",
+            "icon-md",
+            "icon-lg",
+            "icon-xl",
+            "icon-2xl",
+            "icon-3xl",
+          ],
+        },
+      },
+    },
+  },
   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: "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: "h-control-xs px-3 py-0 text-xs/4 gap-2",
+        leading: "ps-3",
+        trailing: "pe-3",
+        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: "h-control-sm px-3 py-0 text-sm/5 gap-2",
+        leading: "ps-3",
+        trailing: "pe-3",
+        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: "h-control-md px-3.5 py-0 text-sm/5 gap-2",
+        leading: "ps-3.5",
+        trailing: "pe-3.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: "h-control-lg px-4 py-0 text-base/6 gap-2",
+        leading: "ps-4",
+        trailing: "pe-4",
+        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: "h-control-xl px-4.5 py-0 text-lg/7 gap-2",
+        leading: "ps-4.5",
+        trailing: "pe-4.5",
+        leadingIcon: "size-icon-lg",
+        leadingAvatarSize: "xs",
+        trailingIcon: "size-icon-lg",
       },
     },
   },
@@ -36,8 +51,24 @@ export default {
     {
       color: "primary",
       variant: ["outline", "subtle"],
-      class: "focus-visible:ring-2 focus-visible:ring-primary/25",
+      class:
+        "ring-1 ring-inset ring-border focus-visible:ring-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
     },
+    { leading: true, size: "xs", class: "ps-9" },
+    { trailing: true, size: "xs", class: "pe-9" },
+    { fixed: false, size: "xs", class: "max-md:text-base md:text-xs" },
+    { leading: true, size: "sm", class: "ps-9" },
+    { trailing: true, size: "sm", class: "pe-9" },
+    { fixed: false, size: "sm", class: "max-md:text-base md:text-sm" },
+    { leading: true, size: "md", class: "ps-10.5" },
+    { trailing: true, size: "md", class: "pe-10.5" },
+    { fixed: false, size: "md", class: "max-md:text-base md:text-sm" },
+    { leading: true, size: "lg", class: "ps-11" },
+    { trailing: true, size: "lg", class: "pe-11" },
+    { fixed: false, size: "lg", class: "max-md:text-base md:text-base" },
+    { leading: true, size: "xl", class: "ps-12.5" },
+    { trailing: true, size: "xl", class: "pe-12.5" },
+    { fixed: false, size: "xl", class: "max-md:text-base md:text-lg" },
   ],
   defaultVariants: {
     size: "md",

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-2ml 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,19 +1,75 @@
 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",
+    base: "border-0 rounded-ml bg-surface text-text",
+    value: "truncate",
+    placeholder: "truncate text-dimmed",
     group: "p-1.5",
-    item: "rounded-md px-2.5 py-2 text-muted data-highlighted:bg-surface-muted data-highlighted:text-text",
+    content: "border-0 rounded-ml ring-1 ring-border bg-surface",
+    item: "min-h-11 rounded-ml px-3 py-2 text-sm/5 text-text data-highlighted:bg-surface-muted data-[state=checked]:bg-surface-muted",
     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",
+  },
+  variants: {
+    size: {
+      xs: {
+        base: "h-control-xs px-3 py-0 text-xs/4 gap-2",
+        leading: "ps-3",
+        trailing: "pe-3",
+        leadingIcon: "size-icon-sm",
+        leadingAvatarSize: "3xs",
+        trailingIcon: "size-icon-sm",
+      },
+      sm: {
+        base: "h-control-sm px-3 py-0 text-sm/5 gap-2",
+        leading: "ps-3",
+        trailing: "pe-3",
+        leadingIcon: "size-icon-sm",
+        leadingAvatarSize: "3xs",
+        trailingIcon: "size-icon-sm",
+      },
+      md: {
+        base: "h-control-md px-3.5 py-0 text-sm/5 gap-2",
+        leading: "ps-3.5",
+        trailing: "pe-3.5",
+        leadingIcon: "size-icon-md",
+        leadingAvatarSize: "2xs",
+        trailingIcon: "size-icon-md",
+      },
+      lg: {
+        base: "h-control-lg px-4 py-0 text-base/6 gap-2",
+        leading: "ps-4",
+        trailing: "pe-4",
+        leadingIcon: "size-icon-md",
+        leadingAvatarSize: "2xs",
+        trailingIcon: "size-icon-md",
+      },
+      xl: {
+        base: "h-control-xl px-4.5 py-0 text-lg/7 gap-2",
+        leading: "ps-4.5",
+        trailing: "pe-4.5",
+        leadingIcon: "size-icon-lg",
+        leadingAvatarSize: "xs",
+        trailingIcon: "size-icon-lg",
+      },
+    },
   },
   compoundVariants: [
     {
       color: "primary",
       variant: ["outline", "subtle"],
-      class: "focus-visible:ring-2 focus-visible:ring-primary/25",
+      class:
+        "ring-1 ring-inset ring-border focus-visible:ring-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
     },
+    { leading: true, size: "xs", class: "ps-9" },
+    { trailing: true, size: "xs", class: "pe-9" },
+    { leading: true, size: "sm", class: "ps-9" },
+    { trailing: true, size: "sm", class: "pe-9" },
+    { leading: true, size: "md", class: "ps-10.5" },
+    { trailing: true, size: "md", class: "pe-10.5" },
+    { leading: true, size: "lg", class: "ps-11" },
+    { trailing: true, size: "lg", class: "pe-11" },
+    { leading: true, size: "xl", class: "ps-12.5" },
+    { trailing: true, size: "xl", class: "pe-12.5" },
   ],
   defaultVariants: {
     size: "md",

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",
   },
 };