@polymarbot/nuxt-layer-shadcn-ui 0.1.0

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

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Input from '../Input/index.vue'
+import FormItem from './index.vue'
+
+const meta = {
+  title: 'UI/FormItem',
+  component: FormItem,
+} satisfies Meta<typeof FormItem>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { FormItem, Input },
+    setup () {
+      const name = ref('')
+      const email = ref('')
+      return { name, email }
+    },
+    template: `
+      <div class="space-y-10 max-w-md">
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Basic</h3>
+          <FormItem label="Name">
+            <Input v-model="name" placeholder="Enter your name" />
+          </FormItem>
+        </section>
+
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Required</h3>
+          <FormItem label="Email" required>
+            <Input v-model="email" placeholder="Enter your email" />
+          </FormItem>
+        </section>
+
+        <section>
+          <h3 class="mb-4 text-lg font-medium">With Error</h3>
+          <FormItem label="Username" required error="Username is already taken">
+            <Input model-value="admin" />
+          </FormItem>
+        </section>
+
+        <section>
+          <h3 class="mb-4 text-lg font-medium">With Description</h3>
+          <FormItem label="Password" description="Must be at least 8 characters long">
+            <Input type="password" placeholder="Enter password" />
+          </FormItem>
+        </section>
+
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Horizontal Orientation</h3>
+          <FormItem label="Display Name" orientation="horizontal">
+            <Input placeholder="Enter display name" />
+          </FormItem>
+        </section>
+
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Responsive Orientation</h3>
+          <p class="mb-2 text-sm text-muted-foreground">Drag the right edge to resize ↔</p>
+          <div class="@container/field-group resize-x overflow-auto rounded border border-dashed border-border bg-card p-4" style="min-width: 200px;">
+            <FormItem label="Address" orientation="responsive" description="Your mailing address">
+              <Input placeholder="Enter address" />
+            </FormItem>
+          </div>
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/field'
+import type { FormItemProps } from './types'
+
+const props = defineProps<FormItemProps>()
+
+const errorArray = computed(() => {
+  if (!props.error) return undefined
+  return [{ message: props.error }]
+})
+
+const labelClass = computed(() => {
+  if (props.orientation === 'horizontal') return '!flex-initial mt-2'
+  if (props.orientation === 'responsive') return '@md/field-group:!flex-initial @md/field-group:mt-2'
+  return undefined
+})
+</script>
+
+<template>
+  <Field
+    :orientation="orientation"
+    :class="props.class"
+    :data-invalid="!!error || undefined"
+  >
+    <FieldLabel
+      v-if="label"
+      :class="labelClass"
+    >
+      <div>
+        {{ label }}
+        <span
+          v-if="required"
+          class="text-danger"
+          aria-hidden="true"
+        >
+          *
+        </span>
+      </div>
+    </FieldLabel>
+    <FieldContent>
+      <slot />
+      <FieldDescription v-if="description || $slots.description">
+        <slot name="description">
+          {{ description }}
+        </slot>
+      </FieldDescription>
+      <FieldError :errors="errorArray" />
+    </FieldContent>
+  </Field>
+</template>

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

@@ -0,0 +1,14 @@
+export interface FormItemProps {
+  /** Label text */
+  label?: string
+  /** Error message to display */
+  error?: string
+  /** Description / help text below the input */
+  description?: string
+  /** Whether the field is required (shows red asterisk) */
+  required?: boolean
+  /** Field layout orientation */
+  orientation?: 'vertical' | 'horizontal' | 'responsive'
+  /** Custom class for the root Field */
+  class?: ClassValue
+}

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

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Help from './index.vue'
+
+const meta = {
+  title: 'UI/Help',
+  component: Help,
+} satisfies Meta<typeof Help>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { Help },
+    template: `
+      <div class="space-y-10">
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Basic</h3>
+          <Help text="This is a helpful tooltip" />
+        </section>
+
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Positions</h3>
+          <div class="flex items-center gap-8 py-10 justify-center">
+            <div class="flex flex-col items-center gap-2">
+              <Help text="Top tooltip" position="top" />
+              <span class="text-sm text-muted-foreground">Top</span>
+            </div>
+            <div class="flex flex-col items-center gap-2">
+              <Help text="Bottom tooltip" position="bottom" />
+              <span class="text-sm text-muted-foreground">Bottom</span>
+            </div>
+            <div class="flex flex-col items-center gap-2">
+              <Help text="Left tooltip" position="left" />
+              <span class="text-sm text-muted-foreground">Left</span>
+            </div>
+            <div class="flex flex-col items-center gap-2">
+              <Help text="Right tooltip" position="right" />
+              <span class="text-sm text-muted-foreground">Right</span>
+            </div>
+          </div>
+        </section>
+
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Inline with Label</h3>
+          <div class="flex items-center gap-1">
+            <span class="text-sm font-medium">API Key</span>
+            <Help text="Your unique API key for authentication" />
+          </div>
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { HelpProps } from './types'
+
+const props = withDefaults(defineProps<HelpProps>(), {
+  text: undefined,
+  position: 'top',
+  class: undefined,
+})
+
+const mergedClass = computed(() =>
+  cn(
+    `
+      flex items-center justify-center text-muted-foreground transition-colors
+      hover:text-foreground
+    `,
+    props.class,
+  ),
+)
+</script>
+
+<template>
+  <Tooltip
+    :text="text"
+    :position="position"
+  >
+    <div :class="mergedClass">
+      <slot>
+        <Icon
+          name="circle-question-mark"
+          class="cursor-help"
+        />
+      </slot>
+    </div>
+  </Tooltip>
+</template>

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

@@ -0,0 +1,8 @@
+export interface HelpProps {
+  /** Tooltip content text */
+  text?: string
+  /** Tooltip position */
+  position?: 'top' | 'bottom' | 'left' | 'right'
+  /** Custom class */
+  class?: ClassValue
+}

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

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Icon from './index.vue'
+
+const meta = {
+  title: 'UI/Icon',
+  component: Icon,
+  argTypes: {
+    name: { control: 'text' },
+  },
+  args: {
+    name: 'house',
+  },
+} satisfies Meta<typeof Icon>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const commonIcons = [
+  'house', 'search', 'settings', 'user', 'mail', 'bell',
+  'heart', 'star', 'plus', 'minus', 'check', 'x',
+  'chevron-left', 'chevron-right', 'chevron-up', 'chevron-down',
+  'arrow-left', 'arrow-right', 'arrow-up', 'arrow-down',
+  'eye', 'eye-off', 'trash-2', 'pencil', 'copy', 'download',
+  'upload', 'share', 'link', 'external-link', 'info', 'triangle-alert',
+]
+
+export const Default: Story = {
+  render: args => ({
+    components: { Icon },
+    setup: () => ({ args, commonIcons }),
+    template: `
+      <div class="space-y-10">
+        <!-- Controlled -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
+          <Icon v-bind="args" />
+        </section>
+
+        <!-- Common Icons -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Common Icons</h3>
+          <div class="grid grid-cols-8 gap-4">
+            <div
+              v-for="name in commonIcons"
+              :key="name"
+              class="flex flex-col items-center gap-2 rounded-md border p-3"
+            >
+              <Icon :name="name" class="size-5" />
+              <span class="text-xs text-muted-foreground">{{ name }}</span>
+            </div>
+          </div>
+        </section>
+
+        <!-- Sizes -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Sizes</h3>
+          <div class="flex items-end gap-4">
+            <Icon name="star" class="size-3" />
+            <Icon name="star" class="size-4" />
+            <Icon name="star" class="size-5" />
+            <Icon name="star" class="size-6" />
+            <Icon name="star" class="size-8" />
+          </div>
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { icons } from 'lucide-vue-next'
+import type { Component } from 'vue'
+import type { IconProps } from './types'
+
+const props = defineProps<IconProps>()
+
+// Convert kebab-case to PascalCase: "alarm-clock" -> "AlarmClock"
+function toPascalCase (str: string): string {
+  return str
+    .split('-')
+    .map(s => s.charAt(0).toUpperCase() + s.slice(1))
+    .join('')
+}
+
+const iconComponent = computed<Component | undefined>(() => {
+  const pascalName = toPascalCase(props.name)
+  return (icons as Record<string, Component>)[pascalName]
+})
+
+const mergedClass = computed(() => cn('size-4', props.class))
+</script>
+
+<template>
+  <component
+    :is="iconComponent"
+    v-if="iconComponent"
+    :class="mergedClass"
+  />
+</template>

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

@@ -0,0 +1,5 @@
+export interface IconProps {
+  /** Icon name in kebab-case (e.g. "mail", "arrow-left", "circle-question-mark") */
+  name: string
+  class?: ClassValue
+}

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

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Icon from '../Icon/index.vue'
+import Input from './index.vue'
+
+const meta = {
+  title: 'UI/Input',
+  component: Input,
+  argTypes: {
+    disabled: { control: 'boolean' },
+    readonly: { control: 'boolean' },
+    invalid: { control: 'boolean' },
+  },
+  args: {
+    disabled: false,
+    readonly: false,
+    invalid: false,
+  },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { Input, Icon },
+    setup () {
+      const value = ref('')
+      const withPrefix = ref('')
+      const withSuffix = ref('')
+      const password = ref('')
+      return { args, value, withPrefix, withSuffix, password }
+    },
+    template: `
+      <div class="space-y-10 max-w-sm">
+        <!-- Controlled -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
+          <Input v-model="value" v-bind="args" placeholder="Enter your name..." />
+          <div class="mt-2 text-sm text-muted-foreground">Value: {{ value }}</div>
+        </section>
+
+        <!-- With Prefix Icon -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">With Prefix Icon</h3>
+          <Input v-model="withPrefix" placeholder="Search...">
+            <template #prefix>
+              <Icon name="search" />
+            </template>
+          </Input>
+          <div class="mt-2 text-sm text-muted-foreground">Value: {{ withPrefix }}</div>
+        </section>
+
+        <!-- With Suffix Icon -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">With Suffix Icon</h3>
+          <Input v-model="withSuffix" placeholder="Email">
+            <template #suffix>
+              <Icon name="mail" />
+            </template>
+          </Input>
+          <div class="mt-2 text-sm text-muted-foreground">Value: {{ withSuffix }}</div>
+        </section>
+
+        <!-- Password -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Password</h3>
+          <Input v-model="password" type="password" placeholder="Password" />
+          <div class="mt-2 text-sm text-muted-foreground">Value: {{ password }}</div>
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/input-group'
+import type { InputProps } from './types'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<InputProps>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | undefined]
+  'change': [value: string | undefined]
+}>()
+
+const $slots = defineSlots<{
+  prefix?: () => unknown
+  suffix?: () => unknown
+}>()
+
+// Internal value tracks the actual input content, independent of parent's modelValue
+const internalValue = ref(props.modelValue)
+
+// Sync internal value when parent updates modelValue
+watch(() => props.modelValue, value => {
+  internalValue.value = value
+})
+
+const showClearButton = computed(() => !!internalValue.value && !props.readonly && !props.disabled)
+
+function handleChange (event: Event) {
+  const target = event.target as HTMLInputElement
+  emit('change', target.value)
+}
+
+function handleInput (event: Event) {
+  const target = event.target as HTMLInputElement
+  internalValue.value = target.value
+  emit('update:modelValue', target.value)
+}
+
+function clearInput () {
+  internalValue.value = undefined
+  emit('update:modelValue', undefined)
+  emit('change', undefined)
+}
+</script>
+
+<template>
+  <InputGroup
+    :class="props.class"
+    :data-disabled="disabled || undefined"
+  >
+    <InputGroupAddon
+      v-if="$slots.prefix"
+      align="inline-start"
+    >
+      <slot name="prefix" />
+    </InputGroupAddon>
+    <InputGroupInput
+      :modelValue="internalValue"
+      v-bind="$attrs"
+      :readonly="readonly"
+      :disabled="disabled"
+      :aria-invalid="invalid || undefined"
+      :data-1p-ignore="autocomplete === 'off' || !autocomplete ? true : undefined"
+      :autocomplete="autocomplete || 'off'"
+      @input="handleInput"
+      @change="handleChange"
+    />
+    <InputGroupAddon
+      v-if="showClearButton"
+      align="inline-end"
+    >
+      <InputGroupButton
+        size="icon-xs"
+        @click="clearInput"
+      >
+        <Icon name="x" />
+      </InputGroupButton>
+    </InputGroupAddon>
+    <InputGroupAddon
+      v-if="$slots.suffix"
+      align="inline-end"
+    >
+      <slot name="suffix" />
+    </InputGroupAddon>
+  </InputGroup>
+</template>

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

@@ -0,0 +1,9 @@
+export interface InputProps {
+  modelValue?: string
+  /** Set to enable browser/password-manager autofill (e.g. 'email', 'current-password'). Defaults to 'off'. */
+  autocomplete?: string
+  readonly?: boolean
+  disabled?: boolean
+  invalid?: boolean
+  class?: ClassValue
+}

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

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import InputCurrency from './index.vue'
+
+const meta = {
+  title: 'UI/InputCurrency',
+  component: InputCurrency,
+  argTypes: {
+    disabled: { control: 'boolean' },
+  },
+  args: {
+    disabled: false,
+  },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { InputCurrency },
+    setup () {
+      const jpy = ref(1000)
+      const usd = ref(49.99)
+      const eurCode = ref(29.99)
+      const cadSymbol = ref(79.99)
+      const cadNarrow = ref(79.99)
+      const jpyName = ref(5000)
+      return { args, jpy, usd, eurCode, cadSymbol, cadNarrow, jpyName }
+    },
+    template: `
+      <div class="space-y-10 max-w-xs">
+        <!-- Controlled -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
+          <InputCurrency v-model="jpy" v-bind="args" />
+          <div class="mt-2 text-sm text-muted-foreground">Value: {{ jpy }}</div>
+        </section>
+
+        <!-- USD (symbol) -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">USD (symbol)</h3>
+          <InputCurrency v-model="usd" currency="USD" />
+          <div class="mt-2 text-sm text-muted-foreground">Value: {{ usd }}</div>
+        </section>
+
+        <!-- EUR (code display) -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">EUR (code display)</h3>
+          <InputCurrency v-model="eurCode" currency="EUR" currencyDisplay="code" />
+          <div class="mt-2 text-sm text-muted-foreground">Value: {{ eurCode }}</div>
+        </section>
+
+        <!-- CAD symbol vs narrowSymbol -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">CAD (symbol → CA$)</h3>
+          <InputCurrency v-model="cadSymbol" currency="CAD" currencyDisplay="symbol" />
+          <div class="mt-2 text-sm text-muted-foreground">Value: {{ cadSymbol }}</div>
+        </section>
+
+        <section>
+          <h3 class="mb-4 text-lg font-medium">CAD (narrowSymbol → $)</h3>
+          <InputCurrency v-model="cadNarrow" currency="CAD" currencyDisplay="narrowSymbol" />
+          <div class="mt-2 text-sm text-muted-foreground">Value: {{ cadNarrow }}</div>
+        </section>
+
+        <!-- JPY (name display) -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">JPY (name display)</h3>
+          <InputCurrency v-model="jpyName" currencyDisplay="name" />
+          <div class="mt-2 text-sm text-muted-foreground">Value: {{ jpyName }}</div>
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { InputCurrencyProps } from './types'
+
+const props = withDefaults(defineProps<InputCurrencyProps>(), {
+  currency: 'JPY',
+  currencyDisplay: 'symbol',
+})
+
+const formatOptions = computed<Intl.NumberFormatOptions>(() => ({
+  style: 'currency',
+  currency: props.currency,
+  currencyDisplay: props.currencyDisplay,
+}))
+
+// Derive step from currency's minor unit (e.g. JPY→1, USD→0.01, BHD→0.001)
+const defaultStep = computed(() => {
+  const { minimumFractionDigits } = new Intl.NumberFormat('en', {
+    style: 'currency',
+    currency: props.currency,
+  }).resolvedOptions()
+  return 1 / (10 ** (minimumFractionDigits ?? 0))
+})
+</script>
+
+<template>
+  <InputNumber
+    :formatOptions="formatOptions"
+    :min="0"
+    :step="defaultStep"
+  />
+</template>

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

@@ -0,0 +1,4 @@
+export interface InputCurrencyProps {
+  currency?: string
+  currencyDisplay?: 'symbol' | 'narrowSymbol' | 'code' | 'name'
+}