@polymarbot/nuxt-layer-shadcn-ui 0.1.9 → 0.2.0-w

package/app/components/ui/Surface/index.vue

@@ -12,8 +12,9 @@ const surfaceVariants = cva(
         bordered: 'border bg-transparent',
         flat: '',
       },
-      type: {
+      color: {
         default: '',
+        primary: '',
         success: '',
         info: '',
         help: '',
@@ -23,81 +24,91 @@ const surfaceVariants = cva(
     },
     compoundVariants: [
       // solid — full color background
-      { variant: 'solid', type: 'default', class: `
+      { variant: 'solid', color: 'default', class: `
         border-transparent bg-accent text-accent-foreground
       ` },
-      { variant: 'solid', type: 'success', class: `
+      { variant: 'solid', color: 'primary', class: `
+        border-primary bg-primary text-primary-foreground
+      ` },
+      { variant: 'solid', color: 'success', class: `
         border-success bg-success text-success-foreground
       ` },
-      { variant: 'solid', type: 'info', class: `
+      { variant: 'solid', color: 'info', class: `
         border-info bg-info text-info-foreground
       ` },
-      { variant: 'solid', type: 'help', class: `
+      { variant: 'solid', color: 'help', class: `
         border-help bg-help text-help-foreground
       ` },
-      { variant: 'solid', type: 'warn', class: `
+      { variant: 'solid', color: 'warn', class: `
         border-warn bg-warn text-warn-foreground
       ` },
-      { variant: 'solid', type: 'danger', class: `
+      { variant: 'solid', color: 'danger', class: `
         border-danger bg-danger text-danger-foreground
       ` },
       // soft — tinted background + soft border
-      { variant: 'soft', type: 'default', class: `
+      { variant: 'soft', color: 'default', class: `
         border-border bg-secondary text-secondary-foreground
       ` },
-      { variant: 'soft', type: 'success', class: `
+      { variant: 'soft', color: 'primary', class: `
+        border-primary/50 bg-primary/10 text-primary
+      ` },
+      { variant: 'soft', color: 'success', class: `
         border-success/50 bg-success/10 text-success
       ` },
-      { variant: 'soft', type: 'info', class: `
+      { variant: 'soft', color: 'info', class: `
         border-info/50 bg-info/10 text-info
       ` },
-      { variant: 'soft', type: 'help', class: `
+      { variant: 'soft', color: 'help', class: `
         border-help/50 bg-help/10 text-help
       ` },
-      { variant: 'soft', type: 'warn', class: `
+      { variant: 'soft', color: 'warn', class: `
         border-warn/50 bg-warn/10 text-warn
       ` },
-      { variant: 'soft', type: 'danger', class: `
+      { variant: 'soft', color: 'danger', class: `
         border-danger/50 bg-danger/10 text-danger
       ` },
       // bordered — border only
-      { variant: 'bordered', type: 'default', class: `
+      { variant: 'bordered', color: 'default', class: `
         border-border text-foreground
       ` },
-      { variant: 'bordered', type: 'success', class: `
+      { variant: 'bordered', color: 'primary', class: `
+        border-primary/50 text-primary
+      ` },
+      { variant: 'bordered', color: 'success', class: `
         border-success/50 text-success
       ` },
-      { variant: 'bordered', type: 'info', class: 'border-info/50 text-info' },
-      { variant: 'bordered', type: 'help', class: 'border-help/50 text-help' },
-      { variant: 'bordered', type: 'warn', class: 'border-warn/50 text-warn' },
-      { variant: 'bordered', type: 'danger', class: `
+      { variant: 'bordered', color: 'info', class: 'border-info/50 text-info' },
+      { variant: 'bordered', color: 'help', class: 'border-help/50 text-help' },
+      { variant: 'bordered', color: 'warn', class: 'border-warn/50 text-warn' },
+      { variant: 'bordered', color: 'danger', class: `
         border-danger/50 text-danger
       ` },
       // flat — tinted background only
-      { variant: 'flat', type: 'default', class: `
+      { variant: 'flat', color: 'default', class: `
         bg-secondary text-secondary-foreground
       ` },
-      { variant: 'flat', type: 'success', class: 'bg-success/10 text-success' },
-      { variant: 'flat', type: 'info', class: 'bg-info/10 text-info' },
-      { variant: 'flat', type: 'help', class: 'bg-help/10 text-help' },
-      { variant: 'flat', type: 'warn', class: 'bg-warn/10 text-warn' },
-      { variant: 'flat', type: 'danger', class: 'bg-danger/10 text-danger' },
+      { variant: 'flat', color: 'primary', class: 'bg-primary/10 text-primary' },
+      { variant: 'flat', color: 'success', class: 'bg-success/10 text-success' },
+      { variant: 'flat', color: 'info', class: 'bg-info/10 text-info' },
+      { variant: 'flat', color: 'help', class: 'bg-help/10 text-help' },
+      { variant: 'flat', color: 'warn', class: 'bg-warn/10 text-warn' },
+      { variant: 'flat', color: 'danger', class: 'bg-danger/10 text-danger' },
     ],
     defaultVariants: {
       variant: 'soft',
-      type: 'default',
+      color: 'default',
     },
   },
 )
 
 const props = withDefaults(defineProps<SurfaceProps>(), {
-  type: 'default',
+  color: 'default',
   variant: 'soft',
   class: undefined,
 })
 
 const mergedClass = computed(() =>
-  cn(surfaceVariants({ type: props.type, variant: props.variant }), props.class),
+  cn(surfaceVariants({ color: props.color, variant: props.variant }), props.class),
 )
 </script>
 

package/app/components/ui/Surface/types.ts

@@ -1,8 +1,8 @@
-export type SurfaceType = 'default' | 'success' | 'info' | 'help' | 'warn' | 'danger'
+export type SurfaceColor = 'default' | 'primary' | 'success' | 'info' | 'help' | 'warn' | 'danger'
 export type SurfaceVariant = 'solid' | 'soft' | 'bordered' | 'flat'
 
 export interface SurfaceProps {
-  type?: SurfaceType
+  color?: SurfaceColor
   variant?: SurfaceVariant
   class?: ClassValue
 }

package/app/components/ui/Switch/index.stories.ts

@@ -10,12 +10,6 @@ const meta = {
   args: {
     disabled: false,
   },
-} satisfies Meta<typeof Switch>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
   render: args => ({
     components: { Switch },
     setup () {
@@ -29,4 +23,9 @@ export const Default: Story = {
       </div>
     `,
   }),
-}
+} satisfies Meta<typeof Switch>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

package/app/components/ui/Switch/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Switch as ShadcnSwitch } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/switch'
+import { Switch as ShadcnSwitch } from '../../shadcn/switch'
 import type { SwitchProps } from './types'
 
 defineProps<SwitchProps>()

package/app/components/ui/Tabs/index.stories.ts

@@ -21,96 +21,138 @@ const items: TabsItem[] = [
     title: 'Notifications',
     icon: 'bell',
     content: 'Control which notifications you receive and how they are delivered.',
-    disabled: true,
   },
 ]
 
 const navItems: TabsItem[] = items.map(({ content, ...rest }) => rest)
 
+const disabledItems: TabsItem[] = items.map((item, index) =>
+  index === 2 ? { ...item, disabled: true } : item,
+)
+
 const meta = {
   title: 'UI/Tabs',
   component: Tabs,
   argTypes: {
+    items: { control: 'object' },
+    modelValue: { control: 'text' },
+    defaultValue: { control: 'text' },
     rounded: { control: 'boolean' },
     iconOnly: { control: 'boolean' },
   },
   args: {
+    items,
+    modelValue: undefined,
+    defaultValue: 'account',
     rounded: false,
     iconOnly: false,
   },
+  render: args => ({
+    components: { Tabs },
+    setup: () => ({ args }),
+    template: '<Tabs v-bind="args" class="max-w-md" />',
+  }),
 } satisfies Meta<typeof Tabs>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
-    components: { Tabs, Card },
+export const Default: Story = {}
+
+export const Controlled: Story = {
+  render: () => ({
+    components: { Tabs },
     setup () {
       const value = ref<string>('account')
-      return { args, items, navItems, value }
+      return { items, value }
     },
     template: `
-      <div class="max-w-md space-y-10">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <Tabs
-            v-model="value"
-            v-bind="args"
-            :items="items"
-          />
-          <div class="mt-3 text-sm text-muted-foreground">Active: {{ value }}</div>
-        </section>
+      <div class="max-w-md space-y-3">
+        <Tabs v-model="value" :items="items" />
+        <div class="text-sm text-muted-foreground">Active: {{ value }}</div>
+      </div>
+    `,
+  }),
+}
+
+export const IconOnly: Story = {
+  render: () => ({
+    components: { Tabs },
+    setup: () => ({ items }),
+    template: `
+      <Tabs
+        icon-only
+        :items="items"
+        default-value="account"
+        class="max-w-md"
+      />
+    `,
+  }),
+}
 
-        <!-- Icon Only (title used as aria-label) -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Icon Only</h3>
-          <Tabs
-            icon-only
-            :items="items"
-            default-value="account"
-          />
-        </section>
+export const Rounded: Story = {
+  render: () => ({
+    components: { Tabs },
+    setup: () => ({ items }),
+    template: `
+      <Tabs
+        rounded
+        :items="items"
+        default-value="account"
+        class="max-w-md"
+      />
+    `,
+  }),
+}
 
-        <!-- Rounded -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Rounded</h3>
-          <Tabs
-            rounded
-            :items="items"
-            default-value="account"
-          />
-        </section>
+export const DisabledItem: Story = {
+  render: () => ({
+    components: { Tabs },
+    setup: () => ({ disabledItems }),
+    template: `
+      <Tabs
+        :items="disabledItems"
+        default-value="account"
+        class="max-w-md"
+      />
+    `,
+  }),
+}
 
-        <!-- No Content (triggers only, no gap below) -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">No Content</h3>
-          <Tabs
-            :items="navItems"
-            default-value="account"
-          />
-        </section>
+export const NoContent: Story = {
+  render: () => ({
+    components: { Tabs },
+    setup: () => ({ navItems }),
+    template: `
+      <Tabs
+        :items="navItems"
+        default-value="account"
+        class="max-w-md"
+      />
+    `,
+  }),
+}
 
-        <!-- Custom Slots -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Custom Slots</h3>
-          <Tabs
-            :items="items"
-            default-value="account"
-            list-class="w-full"
-          >
-            <template #title="{ item, active }">
-              <span :class="active ? 'font-semibold' : ''">{{ item.title }}</span>
-            </template>
-            <template #content="{ item }">
-              <Card>
-                <p class="text-sm text-muted-foreground">{{ item.content }}</p>
-              </Card>
-            </template>
-          </Tabs>
-        </section>
-      </div>
+export const CustomSlots: Story = {
+  render: () => ({
+    components: { Tabs, Card },
+    setup: () => ({ items }),
+    template: `
+      <Tabs
+        :items="items"
+        default-value="account"
+        list-class="w-full"
+        class="max-w-md"
+      >
+        <template #title="{ item, active }">
+          <span :class="active ? 'font-semibold' : ''">{{ item.title }}</span>
+        </template>
+        <template #content="{ item }">
+          <Card>
+            <p class="text-sm text-muted-foreground">{{ item.content }}</p>
+          </Card>
+        </template>
+      </Tabs>
     `,
   }),
 }

package/app/components/ui/Tabs/index.vue

@@ -4,7 +4,7 @@ import {
   TabsContent,
   TabsList,
   TabsTrigger,
-} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/tabs'
+} from '../../shadcn/tabs'
 import type { TabsItem, TabsProps } from './types'
 
 const props = withDefaults(defineProps<TabsProps>(), {

package/app/components/ui/Tag/index.stories.ts

@@ -1,50 +1,67 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
+import type { TagColor, TagVariant } from './types'
 import Tag from './index.vue'
 
-type TagType = 'default' | 'success' | 'info' | 'help' | 'warn' | 'danger'
-type TagVariant = 'solid' | 'soft' | 'bordered' | 'flat'
-
-const types: TagType[] = [ 'default', 'success', 'info', 'help', 'warn', 'danger' ]
+const colors: TagColor[] = [ 'default', 'primary', 'success', 'info', 'help', 'warn', 'danger' ]
 const variants: TagVariant[] = [ 'solid', 'soft', 'bordered', 'flat' ]
 
 const meta = {
   title: 'UI/Tag',
   component: Tag,
   argTypes: {
-    type: { control: 'select', options: types },
+    color: { control: 'select', options: colors },
     variant: { control: 'select', options: variants },
   },
   args: {
-    type: 'default',
+    color: 'default',
     variant: 'soft',
   },
+  render: args => ({
+    components: { Tag },
+    setup: () => ({ args }),
+    template: '<Tag v-bind="args">Tag</Tag>',
+  }),
 } satisfies Meta<typeof Tag>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  render: args => ({
+export const Default: Story = {}
+
+export const Colors: Story = {
+  render: () => ({
     components: { Tag },
-    setup: () => ({ args, types, variants }),
+    setup: () => ({ colors }),
     template: `
-      <div class="space-y-10">
-        <!-- Controlled -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
-          <Tag v-bind="args">Tag</Tag>
-        </section>
+      <div class="flex flex-wrap items-center gap-3">
+        <Tag v-for="c in colors" :key="c" :color="c">{{ c }}</Tag>
+      </div>
+    `,
+  }),
+}
 
-        <!-- Variants × Types matrix -->
-        <section>
-          <h3 class="mb-4 text-lg font-medium">Variants × Types</h3>
-          <div class="space-y-3">
-            <div v-for="v in variants" :key="v" class="flex flex-wrap items-center gap-3">
-              <span class="w-20 text-sm text-muted-foreground">{{ v }}</span>
-              <Tag v-for="t in types" :key="t" :type="t" :variant="v">{{ t }}</Tag>
-            </div>
-          </div>
-        </section>
+export const Variants: Story = {
+  render: () => ({
+    components: { Tag },
+    setup: () => ({ variants }),
+    template: `
+      <div class="flex flex-wrap items-center gap-3">
+        <Tag v-for="v in variants" :key="v" :variant="v">{{ v }}</Tag>
+      </div>
+    `,
+  }),
+}
+
+export const VariantColorMatrix: Story = {
+  render: () => ({
+    components: { Tag },
+    setup: () => ({ colors, variants }),
+    template: `
+      <div class="space-y-3">
+        <div v-for="v in variants" :key="v" class="flex flex-wrap items-center gap-3">
+          <span class="w-20 text-sm text-muted-foreground">{{ v }}</span>
+          <Tag v-for="c in colors" :key="c" :color="c" :variant="v">{{ c }}</Tag>
+        </div>
       </div>
     `,
   }),

package/app/components/ui/Tag/index.vue

@@ -12,8 +12,9 @@ const tagVariants = cva(
         bordered: 'border bg-transparent',
         flat: '',
       },
-      type: {
+      color: {
         default: '',
+        primary: '',
         success: '',
         info: '',
         help: '',
@@ -23,81 +24,91 @@ const tagVariants = cva(
     },
     compoundVariants: [
       // solid — full color background
-      { variant: 'solid', type: 'default', class: `
+      { variant: 'solid', color: 'default', class: `
         border-transparent bg-accent text-accent-foreground
       ` },
-      { variant: 'solid', type: 'success', class: `
+      { variant: 'solid', color: 'primary', class: `
+        border-primary bg-primary text-primary-foreground
+      ` },
+      { variant: 'solid', color: 'success', class: `
         border-success bg-success text-success-foreground
       ` },
-      { variant: 'solid', type: 'info', class: `
+      { variant: 'solid', color: 'info', class: `
         border-info bg-info text-info-foreground
       ` },
-      { variant: 'solid', type: 'help', class: `
+      { variant: 'solid', color: 'help', class: `
         border-help bg-help text-help-foreground
       ` },
-      { variant: 'solid', type: 'warn', class: `
+      { variant: 'solid', color: 'warn', class: `
         border-warn bg-warn text-warn-foreground
       ` },
-      { variant: 'solid', type: 'danger', class: `
+      { variant: 'solid', color: 'danger', class: `
         border-danger bg-danger text-danger-foreground
       ` },
       // soft — tinted background + soft border
-      { variant: 'soft', type: 'default', class: `
+      { variant: 'soft', color: 'default', class: `
         border-border bg-secondary text-secondary-foreground
       ` },
-      { variant: 'soft', type: 'success', class: `
+      { variant: 'soft', color: 'primary', class: `
+        border-primary/50 bg-primary/10 text-primary
+      ` },
+      { variant: 'soft', color: 'success', class: `
         border-success/50 bg-success/10 text-success
       ` },
-      { variant: 'soft', type: 'info', class: `
+      { variant: 'soft', color: 'info', class: `
         border-info/50 bg-info/10 text-info
       ` },
-      { variant: 'soft', type: 'help', class: `
+      { variant: 'soft', color: 'help', class: `
         border-help/50 bg-help/10 text-help
       ` },
-      { variant: 'soft', type: 'warn', class: `
+      { variant: 'soft', color: 'warn', class: `
         border-warn/50 bg-warn/10 text-warn
       ` },
-      { variant: 'soft', type: 'danger', class: `
+      { variant: 'soft', color: 'danger', class: `
         border-danger/50 bg-danger/10 text-danger
       ` },
       // bordered — border only
-      { variant: 'bordered', type: 'default', class: `
+      { variant: 'bordered', color: 'default', class: `
         border-border text-foreground
       ` },
-      { variant: 'bordered', type: 'success', class: `
+      { variant: 'bordered', color: 'primary', class: `
+        border-primary/50 text-primary
+      ` },
+      { variant: 'bordered', color: 'success', class: `
         border-success/50 text-success
       ` },
-      { variant: 'bordered', type: 'info', class: 'border-info/50 text-info' },
-      { variant: 'bordered', type: 'help', class: 'border-help/50 text-help' },
-      { variant: 'bordered', type: 'warn', class: 'border-warn/50 text-warn' },
-      { variant: 'bordered', type: 'danger', class: `
+      { variant: 'bordered', color: 'info', class: 'border-info/50 text-info' },
+      { variant: 'bordered', color: 'help', class: 'border-help/50 text-help' },
+      { variant: 'bordered', color: 'warn', class: 'border-warn/50 text-warn' },
+      { variant: 'bordered', color: 'danger', class: `
         border-danger/50 text-danger
       ` },
       // flat — tinted background only
-      { variant: 'flat', type: 'default', class: `
+      { variant: 'flat', color: 'default', class: `
         bg-secondary text-secondary-foreground
       ` },
-      { variant: 'flat', type: 'success', class: 'bg-success/10 text-success' },
-      { variant: 'flat', type: 'info', class: 'bg-info/10 text-info' },
-      { variant: 'flat', type: 'help', class: 'bg-help/10 text-help' },
-      { variant: 'flat', type: 'warn', class: 'bg-warn/10 text-warn' },
-      { variant: 'flat', type: 'danger', class: 'bg-danger/10 text-danger' },
+      { variant: 'flat', color: 'primary', class: 'bg-primary/10 text-primary' },
+      { variant: 'flat', color: 'success', class: 'bg-success/10 text-success' },
+      { variant: 'flat', color: 'info', class: 'bg-info/10 text-info' },
+      { variant: 'flat', color: 'help', class: 'bg-help/10 text-help' },
+      { variant: 'flat', color: 'warn', class: 'bg-warn/10 text-warn' },
+      { variant: 'flat', color: 'danger', class: 'bg-danger/10 text-danger' },
     ],
     defaultVariants: {
       variant: 'soft',
-      type: 'default',
+      color: 'default',
     },
   },
 )
 
 const props = withDefaults(defineProps<TagProps>(), {
-  type: 'default',
+  color: 'default',
   variant: 'soft',
   class: undefined,
 })
 
 const mergedClass = computed(() =>
-  cn(tagVariants({ type: props.type, variant: props.variant }), props.class),
+  cn(tagVariants({ color: props.color, variant: props.variant }), props.class),
 )
 </script>
 

package/app/components/ui/Tag/types.ts

@@ -1,8 +1,8 @@
-export type TagType = 'default' | 'success' | 'info' | 'help' | 'warn' | 'danger'
+export type TagColor = 'default' | 'primary' | 'success' | 'info' | 'help' | 'warn' | 'danger'
 export type TagVariant = 'solid' | 'soft' | 'bordered' | 'flat'
 
 export interface TagProps {
-  type?: TagType
+  color?: TagColor
   variant?: TagVariant
   class?: ClassValue
 }