@polymarbot/nuxt-layer-shadcn-ui 0.1.0

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

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { RadioGroup } from '../../shadcn/radio-group'
+import Radio from './index.vue'
+
+const meta = {
+  title: 'UI/Radio',
+  component: Radio,
+  argTypes: {
+    disabled: { control: 'boolean' },
+  },
+  args: {
+    disabled: false,
+  },
+} satisfies Meta<typeof Radio>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { RadioGroup, Radio },
+    setup () {
+      const selected = ref('option1')
+      const plan = ref('free')
+      return { args, selected, plan }
+    },
+    template: `
+      <div class="space-y-10">
+        <!-- Controlled -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
+          <RadioGroup v-model="selected" :disabled="args.disabled" class="flex flex-col gap-3">
+            <label class="flex items-center gap-2 cursor-pointer">
+              <Radio value="option1" />
+              <span class="text-sm">Option 1</span>
+            </label>
+            <label class="flex items-center gap-2 cursor-pointer">
+              <Radio value="option2" />
+              <span class="text-sm">Option 2</span>
+            </label>
+            <label class="flex items-center gap-2 cursor-pointer">
+              <Radio value="option3" />
+              <span class="text-sm">Option 3</span>
+            </label>
+          </RadioGroup>
+          <div class="mt-2 text-sm text-muted-foreground">Selected: {{ selected }}</div>
+        </section>
+
+        <!-- Plan Selection -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Plan Selection</h3>
+          <RadioGroup v-model="plan" class="flex flex-col gap-3">
+            <label class="flex items-center gap-2 cursor-pointer">
+              <Radio value="free" />
+              <span class="text-sm">Free - $0/month</span>
+            </label>
+            <label class="flex items-center gap-2 cursor-pointer">
+              <Radio value="pro" />
+              <span class="text-sm">Pro - $9/month</span>
+            </label>
+            <label class="flex items-center gap-2 cursor-pointer">
+              <Radio value="enterprise" />
+              <span class="text-sm">Enterprise - $29/month</span>
+            </label>
+          </RadioGroup>
+          <div class="mt-2 text-sm text-muted-foreground">Plan: {{ plan }}</div>
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { RadioGroupItem } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/radio-group'
+import type { RadioProps } from './types'
+
+defineProps<RadioProps>()
+</script>
+
+<template>
+  <RadioGroupItem />
+</template>

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

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

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

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import type { RadioCardGroupOption } from './types'
+import RadioCardGroup from './index.vue'
+
+const options: RadioCardGroupOption[] = [
+  {
+    value: 'current',
+    title: 'Current view',
+    description: 'Export with the currently applied filters and date range',
+  },
+  {
+    value: 'custom',
+    title: 'Custom range',
+    description: 'Specify a date range to export data for the entire period',
+  },
+]
+
+const manyOptions: RadioCardGroupOption[] = [
+  {
+    value: 'free',
+    title: 'Free',
+    description: '$0/month — For personal projects',
+  },
+  {
+    value: 'pro',
+    title: 'Pro',
+    description: '$9/month — For small teams',
+  },
+  {
+    value: 'enterprise',
+    title: 'Enterprise',
+    description: '$29/month — For large organizations',
+    disabled: true,
+  },
+]
+
+const meta = {
+  title: 'UI/RadioCardGroup',
+  component: RadioCardGroup,
+  argTypes: {
+    disabled: { control: 'boolean' },
+  },
+  args: {
+    options,
+    disabled: false,
+  },
+} satisfies Meta<typeof RadioCardGroup>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { RadioCardGroup },
+    setup () {
+      const selected = ref('current')
+      return { args, selected, options }
+    },
+    template: `
+      <div class="max-w-md space-y-4">
+        <RadioCardGroup
+          v-model="selected"
+          :options="options"
+          :disabled="args.disabled"
+        />
+        <div class="text-sm text-muted-foreground">Selected: {{ selected }}</div>
+      </div>
+    `,
+  }),
+}
+
+export const WithDisabledOption: Story = {
+  render: args => ({
+    components: { RadioCardGroup },
+    setup () {
+      const selected = ref('pro')
+      return { args, selected, manyOptions }
+    },
+    template: `
+      <div class="max-w-md space-y-4">
+        <RadioCardGroup
+          v-model="selected"
+          :options="manyOptions"
+          :disabled="args.disabled"
+        />
+        <div class="text-sm text-muted-foreground">Selected: {{ selected }}</div>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import {
+  RadioGroup,
+  RadioGroupItem,
+} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/radio-group'
+import type { RadioCardGroupProps } from './types'
+
+const props = withDefaults(defineProps<RadioCardGroupProps>(), {
+  modelValue: undefined,
+  disabled: false,
+  class: undefined,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const model = computed({
+  get: () => props.modelValue,
+  set: value => {
+    if (value !== undefined) emit('update:modelValue', value)
+  },
+})
+
+const mergedClass = computed(() => cn('gap-3', props.class))
+</script>
+
+<template>
+  <RadioGroup
+    v-model="model"
+    :disabled="disabled"
+    :class="mergedClass"
+  >
+    <label
+      v-for="option in options"
+      :key="option.value"
+      class="
+        flex cursor-pointer items-center gap-3 rounded-lg border border-border
+        px-4 py-3 transition-colors
+        has-data-disabled:cursor-not-allowed has-data-disabled:opacity-50
+        has-data-[state=checked]:border-primary
+      "
+      :class="[
+        option.disabled ? 'cursor-not-allowed opacity-50' : 'hover:bg-accent/50',
+      ]"
+    >
+      <RadioGroupItem
+        :value="option.value"
+        :disabled="option.disabled"
+      />
+      <div class="grid flex-1 gap-0.5">
+        <span class="text-sm font-medium">
+          {{ option.title }}
+        </span>
+        <span
+          v-if="option.description"
+          class="text-xs text-muted-foreground"
+        >
+          {{ option.description }}
+        </span>
+      </div>
+    </label>
+  </RadioGroup>
+</template>

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

@@ -0,0 +1,13 @@
+export interface RadioCardGroupOption {
+  value: string
+  title: string
+  description?: string
+  disabled?: boolean
+}
+
+export interface RadioCardGroupProps {
+  modelValue?: string
+  options: RadioCardGroupOption[]
+  disabled?: boolean
+  class?: ClassValue
+}

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

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import ScrollArea from './index.vue'
+
+const meta = {
+  title: 'UI/ScrollArea',
+  component: ScrollArea,
+  argTypes: {
+    fadeMask: { control: 'boolean' },
+  },
+  args: {
+    fadeMask: false,
+  },
+} satisfies Meta<typeof ScrollArea>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { ScrollArea },
+    setup () {
+      const items = Array.from({ length: 30 }, (_, i) => `Item ${i + 1}`)
+      const fewItems = Array.from({ length: 3 }, (_, i) => `Item ${i + 1}`)
+      return { args, items, fewItems }
+    },
+    template: `
+      <div class="space-y-10">
+        <!-- Controlled -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
+          <div class="h-[250px] w-[250px] rounded-md border bg-card">
+            <ScrollArea class="h-full" v-bind="args">
+              <div class="p-4 space-y-2">
+                <div
+                  v-for="item in items"
+                  :key="item"
+                  class="rounded-md border bg-muted px-3 py-2 text-sm"
+                >
+                  {{ item }}
+                </div>
+              </div>
+            </ScrollArea>
+          </div>
+        </section>
+
+        <!-- No Overflow -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">No Overflow</h3>
+          <div class="h-[250px] w-[250px] rounded-md border bg-card">
+            <ScrollArea class="h-full" fadeMask>
+              <div class="p-4 space-y-2">
+                <div
+                  v-for="item in fewItems"
+                  :key="item"
+                  class="rounded-md border bg-muted px-3 py-2 text-sm"
+                >
+                  {{ item }}
+                </div>
+              </div>
+            </ScrollArea>
+          </div>
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import {
+  ScrollArea as ShadcnScrollArea,
+} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/scroll-area'
+import { useResizeObserver } from '@vueuse/core'
+import type { ScrollAreaProps } from './types'
+
+const props = defineProps<ScrollAreaProps>()
+
+const rootRef = ref<InstanceType<typeof ShadcnScrollArea>>()
+const viewportEl = ref<HTMLElement>()
+
+const { isOverflowing, atStart, atEnd } = useScrollState(viewportEl)
+
+onMounted(() => {
+  const root = rootRef.value?.$el as HTMLElement | undefined
+  viewportEl.value = root?.querySelector<HTMLElement>('[data-slot="scroll-area-viewport"]') ?? undefined
+
+  // Observe content wrapper to detect content size changes
+  const contentEl = viewportEl.value?.firstElementChild as HTMLElement | undefined
+  if (contentEl) {
+    useResizeObserver(contentEl, () => {
+      // Trigger re-evaluation by briefly toggling the ref
+      const el = viewportEl.value
+      viewportEl.value = undefined
+      nextTick(() => {
+        viewportEl.value = el
+      })
+    })
+  }
+})
+
+// Only keep viewport in the tab order when content actually overflows;
+// otherwise reka-ui's FocusScope auto-focus lands on an unscrollable container.
+watchEffect(() => {
+  const el = viewportEl.value
+  if (!el) return
+  el.setAttribute('tabindex', isOverflowing.value ? '0' : '-1')
+})
+
+const FADE_SIZE = '1.25rem'
+
+const maskStyle = computed(() => {
+  if (!props.fadeMask || !isOverflowing.value) return undefined
+  if (atStart.value && atEnd.value) return undefined
+
+  if (atStart.value) {
+    return { maskImage: `linear-gradient(to bottom, #000 calc(100% - ${FADE_SIZE}), transparent 100%)` }
+  }
+  if (atEnd.value) {
+    return { maskImage: `linear-gradient(to bottom, transparent 0, #000 ${FADE_SIZE})` }
+  }
+  return { maskImage: `linear-gradient(to bottom, transparent 0, #000 ${FADE_SIZE}, #000 calc(100% - ${FADE_SIZE}), transparent 100%)` }
+})
+</script>
+
+<template>
+  <ShadcnScrollArea
+    ref="rootRef"
+    :style="maskStyle"
+  >
+    <slot />
+  </ShadcnScrollArea>
+</template>

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

@@ -0,0 +1,5 @@
+import type { ScrollAreaRootProps } from 'reka-ui'
+
+export interface ScrollAreaProps extends /* @vue-ignore */ ScrollAreaRootProps {
+  fadeMask?: boolean
+}

package/app/components/ui/SearchSelect/en.json

@@ -0,0 +1,5 @@
+{
+  "createNew": "Create new",
+  "noItems": "No options",
+  "noSearchItems": "No results"
+}

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

@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import type { SearchSelectLoadMethodParams, SearchSelectLoadMethodResult } from './types'
+import SearchSelect from './index.vue'
+
+// Mock data: 100 items for simulating server-side search
+const allItems = Array.from({ length: 100 }, (_, i) => ({
+  label: `Item ${i + 1}`,
+  value: `item-${i + 1}`,
+}))
+
+// Simulate async API call with keyword filter and pagination
+function mockLoadMethod (params: SearchSelectLoadMethodParams): Promise<SearchSelectLoadMethodResult<string>> {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      const filtered = allItems.filter(item =>
+        item.label.toLowerCase().includes(params.keyword.toLowerCase()),
+      )
+      const items = filtered.slice(params.offset, params.offset + params.limit)
+      resolve({ items, total: filtered.length })
+    }, 500)
+  })
+}
+
+// Simulate fetching a single item by value
+function mockLoadValueOptionMethod (value: string) {
+  return new Promise<{ label: string, value: string } | null>(resolve => {
+    setTimeout(() => {
+      const item = allItems.find(i => i.value === value)
+      resolve(item ?? null)
+    }, 200)
+  })
+}
+
+const meta = {
+  title: 'UI/SearchSelect',
+  component: SearchSelect as any,
+  argTypes: {
+    autoLoad: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+  args: {
+    autoLoad: false,
+    disabled: false,
+  },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { SearchSelect },
+    setup () {
+      const selected = ref<string>()
+      const withPreselect = ref<string>('item-42')
+      const withDefaults = ref<string>()
+      const withCreateNew = ref<string>()
+
+      const defaultOptions = [
+        { label: 'All Items', value: 'all' },
+        { label: 'Featured', value: 'featured' },
+      ]
+
+      return {
+        args,
+        selected,
+        withPreselect,
+        withDefaults,
+        withCreateNew,
+        defaultOptions,
+        mockLoadMethod,
+        mockLoadValueOptionMethod,
+      }
+    },
+    template: `
+      <div class="space-y-10 max-w-sm">
+        <!-- Controlled -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
+          <SearchSelect
+            v-model="selected"
+            :loadMethod="mockLoadMethod"
+            v-bind="args"
+          />
+          <div class="mt-2 text-sm text-muted-foreground">Selected: {{ selected ?? 'none' }}</div>
+        </section>
+
+        <!-- Pre-selected Value -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Pre-selected Value (item-42)</h3>
+          <SearchSelect
+            v-model="withPreselect"
+            :loadMethod="mockLoadMethod"
+            :loadValueOptionMethod="mockLoadValueOptionMethod"
+            autoLoad
+          />
+          <div class="mt-2 text-sm text-muted-foreground">Selected: {{ withPreselect ?? 'none' }}</div>
+        </section>
+
+        <!-- With Default Options -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">With Default Options</h3>
+          <SearchSelect
+            v-model="withDefaults"
+            :loadMethod="mockLoadMethod"
+            :defaultOptions="defaultOptions"
+            autoLoad
+          />
+          <div class="mt-2 text-sm text-muted-foreground">Selected: {{ withDefaults ?? 'none' }}</div>
+        </section>
+
+        <!-- With Create New -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">With Create New</h3>
+          <SearchSelect
+            v-model="withCreateNew"
+            :loadMethod="mockLoadMethod"
+            createNewTo="/create"
+            autoLoad
+          />
+          <div class="mt-2 text-sm text-muted-foreground">Selected: {{ withCreateNew ?? 'none' }}</div>
+        </section>
+      </div>
+    `,
+  }),
+}