@polymarbot/nuxt-layer-shadcn-ui 0.1.0

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

@@ -0,0 +1,34 @@
+export interface SelectOption<V extends string | number = string, M = unknown> {
+  label: string
+  value: V
+  disabled?: boolean
+  group?: string
+  meta?: M
+}
+
+/** Filter function signature matching Command's filterFunction */
+export type SelectFilterFunction = (items: string[], keyword: string) => string[]
+
+export type SelectBaseProps<V extends string | number = string, M = unknown> = {
+  options?: SelectOption<V, M>[]
+  placeholder?: string
+  disabled?: boolean
+  /** true: enable client-side label filter; function: custom filter (disables internal filter) */
+  filter?: boolean | SelectFilterFunction
+  /** Search input placeholder */
+  searchPlaceholder?: string
+  /** Empty state text */
+  emptyText?: string
+}
+
+export type SelectSingleProps<V extends string | number = string, M = unknown> = SelectBaseProps<V, M> & {
+  multiple?: false
+  modelValue?: V
+}
+
+export type SelectMultipleProps<V extends string | number = string, M = unknown> = SelectBaseProps<V, M> & {
+  multiple?: true
+  modelValue?: V[]
+}
+
+export type SelectProps<V extends string | number = string, M = unknown> = SelectSingleProps<V, M> | SelectMultipleProps<V, M>

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

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Skeleton from './index.vue'
+
+const meta = {
+  title: 'UI/Skeleton',
+  component: Skeleton,
+  argTypes: {
+    width: { control: 'text' },
+    height: { control: 'text' },
+  },
+  args: {
+    width: '200px',
+    height: '20px',
+  },
+} satisfies Meta<typeof Skeleton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { Skeleton },
+    setup: () => ({ args }),
+    template: `
+      <div class="space-y-10">
+        <!-- Controlled -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
+          <Skeleton v-bind="args" />
+        </section>
+
+        <!-- Various Sizes -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Various Sizes</h3>
+          <div class="space-y-3">
+            <Skeleton width="100%" height="12px" />
+            <Skeleton width="80%" height="12px" />
+            <Skeleton width="60%" height="12px" />
+          </div>
+        </section>
+
+        <!-- Card Skeleton -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Card Skeleton</h3>
+          <div class="flex items-center gap-4">
+            <Skeleton width="48px" height="48px" class="rounded-full" />
+            <div class="space-y-2">
+              <Skeleton width="160px" height="16px" />
+              <Skeleton width="120px" height="12px" />
+            </div>
+          </div>
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { Skeleton as ShadcnSkeleton } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/skeleton'
+import type { SkeletonProps } from './types'
+
+defineProps<SkeletonProps>()
+</script>
+
+<template>
+  <ShadcnSkeleton
+    :style="{ width, height }"
+  />
+</template>

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

@@ -0,0 +1,4 @@
+export interface SkeletonProps {
+  width?: string
+  height?: string
+}

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

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Slider from './index.vue'
+
+const meta = {
+  title: 'UI/Slider',
+  component: Slider,
+  argTypes: {
+    disabled: { control: 'boolean' },
+  },
+  args: {
+    disabled: false,
+  },
+} satisfies Meta<typeof Slider>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { Slider },
+    setup () {
+      const single = ref(50)
+      const range = ref([ 20, 80 ])
+      const stepped = ref(50)
+      const custom = ref(500)
+      return { args, single, range, stepped, custom }
+    },
+    template: `
+      <div class="space-y-10 max-w-sm">
+        <!-- Controlled -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
+          <Slider v-model="single" v-bind="args" />
+          <div class="mt-2 text-sm text-muted-foreground">Value: {{ single }}</div>
+        </section>
+
+        <!-- Range (Two Thumbs) -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Range (Two Thumbs)</h3>
+          <Slider v-model="range" />
+          <div class="mt-2 text-sm text-muted-foreground">Value: {{ range }}</div>
+        </section>
+
+        <!-- With Step -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">With Step (25)</h3>
+          <Slider v-model="stepped" :step="25" />
+          <div class="mt-2 text-sm text-muted-foreground">Value: {{ stepped }}</div>
+        </section>
+
+        <!-- Custom Min / Max -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Custom Min / Max (0 - 1000)</h3>
+          <Slider v-model="custom" :min="0" :max="1000" />
+          <div class="mt-2 text-sm text-muted-foreground">Value: {{ custom }}</div>
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Slider as ShadcnSlider } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/slider'
+import type { SliderProps } from './types'
+
+const props = withDefaults(defineProps<SliderProps>(), {
+  modelValue: () => [ 0 ],
+})
+
+const emit = defineEmits<{ 'update:modelValue': [value: number | number[]]}>()
+
+// Normalize between single number and array for shadcn Slider
+const isSingleValue = computed(() => typeof props.modelValue === 'number')
+
+const internalModel = computed({
+  get: () => {
+    if (typeof props.modelValue === 'number') return [ props.modelValue ]
+    return props.modelValue ?? [ 0 ]
+  },
+  set: (value: number[]) => {
+    emit('update:modelValue', isSingleValue.value ? (value[0] ?? 0) : value)
+  },
+})
+</script>
+
+<template>
+  <ShadcnSlider v-model="internalModel" />
+</template>

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

@@ -0,0 +1,5 @@
+import type { SliderRootProps } from 'reka-ui'
+
+export interface SliderProps extends /* @vue-ignore */ Omit<SliderRootProps, 'modelValue' | 'defaultValue'> {
+  modelValue?: number | number[]
+}

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

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Surface from './index.vue'
+
+type SurfaceType = 'default' | 'success' | 'info' | 'help' | 'warn' | 'danger'
+type SurfaceVariant = 'solid' | 'soft' | 'bordered' | 'flat'
+
+const types: SurfaceType[] = [ 'default', 'success', 'info', 'help', 'warn', 'danger' ]
+const variants: SurfaceVariant[] = [ 'solid', 'soft', 'bordered', 'flat' ]
+
+const meta = {
+  title: 'UI/Surface',
+  component: Surface,
+  argTypes: {
+    type: { control: 'select', options: types },
+    variant: { control: 'select', options: variants },
+  },
+  args: {
+    type: 'default',
+    variant: 'soft',
+  },
+} satisfies Meta<typeof Surface>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { Surface },
+    setup: () => ({ args, types, variants }),
+    template: `
+      <div class="space-y-10">
+        <!-- Controlled -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
+          <Surface v-bind="args" class="p-4">This is a controlled surface.</Surface>
+        </section>
+
+        <!-- All Variants × All Types -->
+        <section v-for="v in variants" :key="v">
+          <h3 class="mb-4 text-lg font-medium">Variant: {{ v }}</h3>
+          <div class="grid grid-cols-2 gap-3 md:grid-cols-3">
+            <Surface v-for="t in types" :key="t" :variant="v" :type="t" class="p-4">
+              <strong>{{ t }}</strong> surface
+            </Surface>
+          </div>
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { cva } from 'class-variance-authority'
+import type { SurfaceProps } from './types'
+
+const surfaceVariants = cva(
+  'rounded-lg',
+  {
+    variants: {
+      variant: {
+        solid: 'border',
+        soft: 'border',
+        bordered: 'border bg-transparent',
+        flat: '',
+      },
+      type: {
+        default: '',
+        success: '',
+        info: '',
+        help: '',
+        warn: '',
+        danger: '',
+      },
+    },
+    compoundVariants: [
+      // solid — full color background
+      { variant: 'solid', type: 'default', class: `
+        border-transparent bg-accent text-accent-foreground
+      ` },
+      { variant: 'solid', type: 'success', class: `
+        border-success bg-success text-success-foreground
+      ` },
+      { variant: 'solid', type: 'info', class: `
+        border-info bg-info text-info-foreground
+      ` },
+      { variant: 'solid', type: 'help', class: `
+        border-help bg-help text-help-foreground
+      ` },
+      { variant: 'solid', type: 'warn', class: `
+        border-warn bg-warn text-warn-foreground
+      ` },
+      { variant: 'solid', type: 'danger', class: `
+        border-danger bg-danger text-danger-foreground
+      ` },
+      // soft — tinted background + soft border
+      { variant: 'soft', type: 'default', class: `
+        border-border bg-secondary text-secondary-foreground
+      ` },
+      { variant: 'soft', type: 'success', class: `
+        border-success/50 bg-success/10 text-success
+      ` },
+      { variant: 'soft', type: 'info', class: `
+        border-info/50 bg-info/10 text-info
+      ` },
+      { variant: 'soft', type: 'help', class: `
+        border-help/50 bg-help/10 text-help
+      ` },
+      { variant: 'soft', type: 'warn', class: `
+        border-warn/50 bg-warn/10 text-warn
+      ` },
+      { variant: 'soft', type: 'danger', class: `
+        border-danger/50 bg-danger/10 text-danger
+      ` },
+      // bordered — border only
+      { variant: 'bordered', type: 'default', class: `
+        border-border text-foreground
+      ` },
+      { variant: 'bordered', type: '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: `
+        border-danger/50 text-danger
+      ` },
+      // flat — tinted background only
+      { variant: 'flat', type: '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' },
+    ],
+    defaultVariants: {
+      variant: 'soft',
+      type: 'default',
+    },
+  },
+)
+
+const props = withDefaults(defineProps<SurfaceProps>(), {
+  type: 'default',
+  variant: 'soft',
+  class: undefined,
+})
+
+const mergedClass = computed(() =>
+  cn(surfaceVariants({ type: props.type, variant: props.variant }), props.class),
+)
+</script>
+
+<template>
+  <div :class="mergedClass">
+    <slot />
+  </div>
+</template>

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

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

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

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Switch from './index.vue'
+
+const meta = {
+  title: 'UI/Switch',
+  component: Switch,
+  argTypes: {
+    disabled: { control: 'boolean' },
+  },
+  args: {
+    disabled: false,
+  },
+} satisfies Meta<typeof Switch>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { Switch },
+    setup () {
+      const on = ref(true)
+      return { args, on }
+    },
+    template: `
+      <div class="flex items-center gap-4">
+        <Switch v-model="on" v-bind="args" />
+        <div class="text-sm text-muted-foreground">Value: {{ on }}</div>
+      </div>
+    `,
+  }),
+}

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

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

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

@@ -0,0 +1,3 @@
+import type { SwitchRootProps } from 'reka-ui'
+
+export interface SwitchProps extends /* @vue-ignore */ SwitchRootProps {}

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

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Card from '../Card/index.vue'
+import type { TabsItem } from './types'
+import Tabs from './index.vue'
+
+const items: TabsItem[] = [
+  {
+    value: 'account',
+    title: 'Account',
+    icon: 'user',
+    content: 'Manage your account details, profile information, and preferences here.',
+  },
+  {
+    value: 'password',
+    title: 'Password',
+    icon: 'lock',
+    content: 'Update your password and manage two-factor authentication settings.',
+  },
+  {
+    value: 'notifications',
+    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 meta = {
+  title: 'UI/Tabs',
+  component: Tabs,
+  argTypes: {
+    rounded: { control: 'boolean' },
+    iconOnly: { control: 'boolean' },
+  },
+  args: {
+    rounded: false,
+    iconOnly: false,
+  },
+} satisfies Meta<typeof Tabs>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { Tabs, Card },
+    setup () {
+      const value = ref<string>('account')
+      return { args, items, navItems, 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>
+
+        <!-- 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>
+
+        <!-- Rounded -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Rounded</h3>
+          <Tabs
+            rounded
+            :items="items"
+            default-value="account"
+          />
+        </section>
+
+        <!-- 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>
+
+        <!-- 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>
+    `,
+  }),
+}

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

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import {
+  Tabs as ShadcnTabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/tabs'
+import type { TabsItem, TabsProps } from './types'
+
+const props = withDefaults(defineProps<TabsProps>(), {
+  items: () => [],
+  modelValue: undefined,
+  defaultValue: undefined,
+  rounded: false,
+  iconOnly: false,
+  listClass: undefined,
+  triggerClass: undefined,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+defineSlots<{
+  title?: (props: { item: TabsItem, active: boolean }) => unknown
+  content?: (props: { item: TabsItem, active: boolean }) => unknown
+}>()
+
+const hasItemContent = computed(() => props.items.some(item => !!item.content))
+
+const mergedListClass = computed(() => cn(props.rounded && 'rounded-full', props.listClass))
+
+function getTriggerClass (item: TabsItem) {
+  const showsOnlyIcon = !!item.icon && (props.iconOnly || !item.title)
+  return cn(
+    props.rounded && 'rounded-full',
+    showsOnlyIcon && 'aspect-square flex-none px-0',
+    props.triggerClass,
+  )
+}
+</script>
+
+<template>
+  <ShadcnTabs
+    v-slot="{ modelValue: activeValue }"
+    :modelValue="modelValue"
+    :defaultValue="defaultValue"
+    @update:modelValue="value => emit('update:modelValue', String(value))"
+  >
+    <TabsList :class="mergedListClass">
+      <TabsTrigger
+        v-for="item in items"
+        :key="item.value"
+        :value="item.value"
+        :disabled="item.disabled"
+        :class="getTriggerClass(item)"
+        :aria-label="item.title"
+      >
+        <slot
+          name="title"
+          :item="item"
+          :active="activeValue === item.value"
+        >
+          <Icon
+            v-if="item.icon && typeof item.icon === 'string'"
+            :name="item.icon"
+          />
+          <component
+            :is="item.icon"
+            v-else-if="item.icon"
+          />
+          <span v-if="item.title && !iconOnly">
+            {{ item.title }}
+          </span>
+        </slot>
+      </TabsTrigger>
+    </TabsList>
+    <template v-if="hasItemContent || $slots.content">
+      <TabsContent
+        v-for="item in items"
+        :key="item.value"
+        :value="item.value"
+      >
+        <slot
+          name="content"
+          :item="item"
+          :active="activeValue === item.value"
+        >
+          {{ item.content }}
+        </slot>
+      </TabsContent>
+    </template>
+  </ShadcnTabs>
+</template>

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

@@ -0,0 +1,19 @@
+import type { Component } from 'vue'
+
+export interface TabsItem {
+  value: string
+  title?: string
+  icon?: string | Component
+  content?: string
+  disabled?: boolean
+}
+
+export interface TabsProps {
+  items?: TabsItem[]
+  modelValue?: string
+  defaultValue?: string
+  rounded?: boolean
+  iconOnly?: boolean
+  listClass?: ClassValue
+  triggerClass?: ClassValue
+}