@polymarbot/nuxt-layer-shadcn-ui 0.1.0

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

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import {
+  Breadcrumb as ShadcnBreadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/breadcrumb'
+import type { BreadcrumbItem as BreadcrumbItemType, BreadcrumbProps } from './types'
+
+const props = defineProps<BreadcrumbProps>()
+
+const allItems = computed(() => {
+  const items: BreadcrumbItemType[] = []
+  if (props.home) items.push(props.home)
+  if (props.model) items.push(...props.model)
+  return items
+})
+</script>
+
+<template>
+  <ShadcnBreadcrumb>
+    <BreadcrumbList>
+      <template
+        v-for="(item, index) in allItems"
+        :key="index"
+      >
+        <BreadcrumbSeparator v-if="index > 0" />
+        <BreadcrumbItem>
+          <BreadcrumbLink
+            v-if="item.href"
+            asChild
+          >
+            <WebLink
+              :href="item.href"
+              unstyled
+              class="inline-flex items-center gap-1"
+            >
+              <Icon
+                v-if="item.icon"
+                :name="item.icon"
+              />
+              <span>{{ item.label }}</span>
+            </WebLink>
+          </BreadcrumbLink>
+          <BreadcrumbPage
+            v-else
+            class="inline-flex items-center gap-1"
+          >
+            <Icon
+              v-if="item.icon"
+              :name="item.icon"
+            />
+            <span>{{ item.label }}</span>
+          </BreadcrumbPage>
+        </BreadcrumbItem>
+      </template>
+    </BreadcrumbList>
+  </ShadcnBreadcrumb>
+</template>

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

@@ -0,0 +1,11 @@
+export interface BreadcrumbItem {
+  label?: string
+  icon?: string
+  href?: string
+  target?: string
+}
+
+export interface BreadcrumbProps {
+  model?: BreadcrumbItem[]
+  home?: BreadcrumbItem
+}

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

@@ -0,0 +1,145 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Icon from '../Icon/index.vue'
+import Button from './index.vue'
+
+type ButtonVariant
+  = | 'default'
+    | 'destructive'
+    | 'outline'
+    | 'secondary'
+    | 'ghost'
+    | 'link'
+type ButtonSize = 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg'
+
+const variants: ButtonVariant[] = [
+  'default',
+  'destructive',
+  'outline',
+  'secondary',
+  'ghost',
+  'link',
+]
+const sizes: ButtonSize[] = [
+  'sm',
+  'default',
+  'lg',
+  'icon-sm',
+  'icon',
+  'icon-lg',
+]
+
+const meta = {
+  title: 'UI/Button',
+  component: Button,
+  argTypes: {
+    variant: { control: 'select', options: variants },
+    size: { control: 'select', options: sizes },
+    rounded: { control: 'boolean' },
+    icon: { control: 'text' },
+    iconPosition: { control: 'select', options: [ 'start', 'end' ]},
+    loading: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+  args: {
+    variant: 'default',
+    size: 'default',
+    rounded: false,
+    icon: '',
+    iconPosition: 'start',
+    loading: false,
+    disabled: false,
+  },
+} satisfies Meta<typeof Button>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    loading: false,
+  },
+
+  render: args => ({
+    components: { Button, Icon },
+    setup: () => ({ args, variants, sizes }),
+    template: `
+      <div class="space-y-10">
+        <!-- Controlled -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
+          <Button v-bind="args">Button</Button>
+        </section>
+
+        <!-- Variants -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Variants</h3>
+          <div class="flex flex-wrap items-center gap-3">
+            <Button v-for="v in variants" :key="v" :variant="v">{{ v }}</Button>
+          </div>
+        </section>
+
+        <!-- Sizes -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Sizes</h3>
+          <div class="flex flex-wrap items-center gap-3">
+            <Button v-for="s in sizes" :key="s" :size="s">
+              <Icon v-if="s.startsWith('icon')" name="plus" />
+              <template v-else>{{ s }}</template>
+            </Button>
+          </div>
+        </section>
+
+        <!-- With Icons -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">With Icons</h3>
+          <div class="flex flex-wrap items-center gap-3">
+            <Button icon="mail">Login with Email</Button>
+            <Button icon="chevron-right" iconPosition="end" variant="secondary">Next</Button>
+            <Button icon="trash-2" variant="destructive">Delete</Button>
+            <Button icon="plus" size="icon" variant="outline" />
+          </div>
+        </section>
+
+        <!-- Loading -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Loading</h3>
+          <div class="flex flex-wrap items-center gap-3">
+            <Button loading icon="mail">Login with Email</Button>
+            <Button loading icon="chevron-right" iconPosition="end" variant="secondary">Next</Button>
+            <Button loading icon="trash-2" variant="destructive">Delete</Button>
+            <Button loading icon="plus" size="icon" variant="outline" />
+          </div>
+        </section>
+
+        <!-- Disabled -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Disabled</h3>
+          <div class="flex flex-wrap items-center gap-3">
+            <Button v-for="v in variants" :key="v" :variant="v" disabled>{{ v }}</Button>
+          </div>
+        </section>
+
+        <!-- Rounded -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Rounded</h3>
+          <div class="flex flex-wrap items-center gap-3">
+            <Button rounded>Rounded</Button>
+            <Button rounded variant="outline">Outline</Button>
+            <Button rounded variant="secondary">Secondary</Button>
+            <Button rounded size="icon" variant="outline" icon="plus" />
+            <Button rounded size="icon" variant="secondary" icon="sun" />
+          </div>
+        </section>
+
+        <!-- Link Buttons -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Link Buttons</h3>
+          <div class="flex flex-wrap items-center gap-3">
+            <Button href="/dialog" variant="outline">Internal Link</Button>
+            <Button href="https://example.com" icon="chevron-right" iconPosition="end">External Link</Button>
+          </div>
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { Button as ShadcnButton } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/button'
+import WebLink from '@polymarbot/nuxt-layer-shadcn-ui/app/components/ui/WebLink/index.vue'
+import type { ButtonProps } from './types'
+
+const props = defineProps<ButtonProps>()
+const mergedClass = computed(() => cn('cursor-pointer', props.rounded && `
+  rounded-full
+`, props.class))
+
+const isLink = computed(() => !!props.href || !!props.to)
+const hasIcon = computed(() => !!$slots.icon || !!props.icon)
+const isIconEnd = computed(() => props.iconPosition === 'end')
+const $slots = defineSlots<{
+  default?: () => any
+  icon?: () => any
+}>()
+</script>
+
+<template>
+  <ShadcnButton
+    :class="mergedClass"
+    :asChild="isLink"
+    :type="isLink ? undefined : 'button'"
+    :disabled="loading || disabled"
+  >
+    <component
+      :is="isLink ? WebLink : 'span'"
+      :class="isLink ? undefined : 'contents'"
+      v-bind="isLink ? { unstyled: true, href, to, target } : {}"
+    >
+      <!-- Start: icon or loading -->
+      <template v-if="!isIconEnd">
+        <Icon
+          v-if="loading"
+          name="loader-circle"
+          class="animate-spin"
+        />
+        <slot
+          v-else-if="hasIcon"
+          name="icon"
+        >
+          <Icon :name="icon!" />
+        </slot>
+      </template>
+      <slot />
+      <!-- End: icon or loading -->
+      <template v-if="isIconEnd">
+        <Icon
+          v-if="loading"
+          name="loader-circle"
+          class="animate-spin"
+        />
+        <slot
+          v-else-if="hasIcon"
+          name="icon"
+        >
+          <Icon :name="icon!" />
+        </slot>
+      </template>
+    </component>
+  </ShadcnButton>
+</template>

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

@@ -0,0 +1,14 @@
+import type { ButtonVariants } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/button'
+import type { RouteLocationRaw } from 'vue-router'
+
+export interface ButtonProps extends /* @vue-ignore */ ButtonVariants {
+  loading?: boolean
+  disabled?: boolean
+  rounded?: boolean
+  icon?: string
+  iconPosition?: 'start' | 'end'
+  href?: string
+  to?: RouteLocationRaw
+  target?: string
+  class?: ClassValue
+}

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

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Icon from '../Icon/index.vue'
+import Button from '../Button/index.vue'
+import Input from '../Input/index.vue'
+import ButtonGroup from './index.vue'
+
+const meta = {
+  title: 'UI/ButtonGroup',
+  component: ButtonGroup,
+} satisfies Meta<typeof ButtonGroup>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { ButtonGroup, Button, Input, Icon },
+    setup () {
+      const search = ref('')
+      return { search }
+    },
+    template: `
+      <div class="space-y-10">
+        <!-- Button Group -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Buttons</h3>
+          <ButtonGroup>
+            <Button variant="outline">Left</Button>
+            <Button variant="outline">Center</Button>
+            <Button variant="outline">Right</Button>
+          </ButtonGroup>
+        </section>
+
+        <!-- With Icons -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">With Icons</h3>
+          <ButtonGroup>
+            <Button variant="outline" size="icon"><Icon name="bold" /></Button>
+            <Button variant="outline" size="icon"><Icon name="italic" /></Button>
+            <Button variant="outline" size="icon"><Icon name="underline" /></Button>
+            <Button variant="outline" size="icon"><Icon name="strikethrough" /></Button>
+          </ButtonGroup>
+        </section>
+
+        <!-- Input + Button -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Input + Button</h3>
+          <ButtonGroup>
+            <Input v-model="search" placeholder="Search..." />
+            <Button variant="outline"><Icon name="search" /></Button>
+          </ButtonGroup>
+        </section>
+
+        <!-- Button + Input + Button -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Button + Input + Button</h3>
+          <ButtonGroup>
+            <Button variant="outline" size="icon"><Icon name="minus" /></Button>
+            <Input class="w-20 text-center" model-value="5" />
+            <Button variant="outline" size="icon"><Icon name="plus" /></Button>
+          </ButtonGroup>
+        </section>
+
+        <!-- Mixed Variants -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Mixed Variants</h3>
+          <ButtonGroup>
+            <Button variant="outline">Save</Button>
+            <Button>Submit</Button>
+          </ButtonGroup>
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { ButtonGroupProps } from './types'
+
+const props = defineProps<ButtonGroupProps>()
+
+const mergedClass = computed(() => cn(`
+  inline-flex items-center
+  *:rounded-none *:border-r-0
+  [&>*:first-child]:rounded-l-md
+  [&>*:focus-visible]:relative [&>*:focus-visible]:z-10
+  [&>*:last-child]:rounded-r-md [&>*:last-child]:border-r
+`, props.class))
+</script>
+
+<template>
+  <div
+    role="group"
+    :class="mergedClass"
+  >
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,3 @@
+export interface ButtonGroupProps {
+  class?: ClassValue
+}

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

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Button from '../Button/index.vue'
+import Card from './index.vue'
+
+const meta = {
+  title: 'UI/Card',
+  component: Card,
+} satisfies Meta<typeof Card>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { Card, Button },
+    setup: () => ({ args }),
+    template: `
+      <div class="space-y-10 max-w-md">
+        <!-- Basic Card -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Basic Card</h3>
+          <Card>
+            <p>This is a basic card with default content only.</p>
+          </Card>
+        </section>
+
+        <!-- Card with Title -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Card with Title</h3>
+          <Card title="Card Title">
+            <p>This card has a title prop set.</p>
+          </Card>
+        </section>
+
+        <!-- Card with Custom Header -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Card with Custom Header</h3>
+          <Card>
+            <template #header>
+              <div class="flex items-center justify-between">
+                <span class="text-lg font-semibold">Custom Header</span>
+                <Button variant="ghost" size="sm">Action</Button>
+              </div>
+            </template>
+            <p>This card uses the header slot for a custom layout.</p>
+          </Card>
+        </section>
+
+        <!-- Card with Footer -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Card with Footer</h3>
+          <Card title="Settings">
+            <p>Update your account settings here.</p>
+            <template #footer>
+              <div class="w-full flex justify-end gap-2">
+                <Button variant="outline">Cancel</Button>
+                <Button>Save</Button>
+              </div>
+            </template>
+          </Card>
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import {
+  Card as ShadcnCard,
+  CardContent as ShadcnCardContent,
+  CardFooter as ShadcnCardFooter,
+  CardHeader as ShadcnCardHeader,
+  CardTitle as ShadcnCardTitle,
+} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/card'
+import type { CardProps } from './types'
+
+defineProps<CardProps>()
+</script>
+
+<template>
+  <ShadcnCard>
+    <ShadcnCardHeader v-if="title || $slots.header">
+      <slot name="header">
+        <ShadcnCardTitle>{{ title }}</ShadcnCardTitle>
+      </slot>
+    </ShadcnCardHeader>
+    <ShadcnCardContent>
+      <slot />
+    </ShadcnCardContent>
+    <ShadcnCardFooter v-if="$slots.footer">
+      <slot name="footer" />
+    </ShadcnCardFooter>
+  </ShadcnCard>
+</template>

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

@@ -0,0 +1,3 @@
+export interface CardProps {
+  title?: string
+}

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

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Checkbox from './index.vue'
+
+const meta = {
+  title: 'UI/Checkbox',
+  component: Checkbox,
+} satisfies Meta<typeof Checkbox>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { Checkbox },
+    setup () {
+      const checked = ref(false)
+      const checkedOn = ref(true)
+      return { checked, checkedOn }
+    },
+    template: `
+      <div class="space-y-10">
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Basic</h3>
+          <label class="flex items-center gap-2 cursor-pointer">
+            <Checkbox v-model="checked" />
+            <span class="text-sm">Accept terms and conditions</span>
+          </label>
+          <div class="mt-2 text-sm text-muted-foreground">Value: {{ checked }}</div>
+        </section>
+
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Checked</h3>
+          <label class="flex items-center gap-2 cursor-pointer">
+            <Checkbox v-model="checkedOn" />
+            <span class="text-sm">Enable notifications</span>
+          </label>
+          <div class="mt-2 text-sm text-muted-foreground">Value: {{ checkedOn }}</div>
+        </section>
+
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Indeterminate</h3>
+          <label class="flex items-center gap-2 cursor-pointer">
+            <Checkbox model-value="indeterminate" />
+            <span class="text-sm">Select all items</span>
+          </label>
+        </section>
+
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Disabled</h3>
+          <div class="flex flex-col gap-3">
+            <label class="flex items-center gap-2 cursor-not-allowed opacity-50">
+              <Checkbox :model-value="false" disabled />
+              <span class="text-sm">Unchecked disabled</span>
+            </label>
+            <label class="flex items-center gap-2 cursor-not-allowed opacity-50">
+              <Checkbox :model-value="true" disabled />
+              <span class="text-sm">Checked disabled</span>
+            </label>
+            <label class="flex items-center gap-2 cursor-not-allowed opacity-50">
+              <Checkbox model-value="indeterminate" disabled />
+              <span class="text-sm">Indeterminate disabled</span>
+            </label>
+          </div>
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { Checkbox as ShadcnCheckbox } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/checkbox'
+import type { CheckboxProps } from './types'
+
+defineProps<CheckboxProps>()
+</script>
+
+<template>
+  <ShadcnCheckbox
+    v-slot="{ state }"
+    class="
+      data-[state=indeterminate]:border-primary
+      data-[state=indeterminate]:bg-primary
+      data-[state=indeterminate]:text-primary-foreground
+    "
+  >
+    <Icon
+      v-if="state === 'indeterminate'"
+      name="minus"
+      class="size-3.5"
+    />
+  </ShadcnCheckbox>
+</template>

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

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

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

@@ -0,0 +1,4 @@
+{
+  "copied": "Copied",
+  "copyToClipboard": "Copy"
+}

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

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import CopyButton from './index.vue'
+
+const meta = {
+  title: 'UI/CopyButton',
+  component: CopyButton,
+  argTypes: {
+    copy: { control: 'text' },
+    variant: { control: 'select', options: [ 'default', 'destructive', 'outline', 'secondary', 'ghost' ]},
+    size: { control: 'select', options: [ 'default', 'sm', 'lg', 'icon' ]},
+  },
+  args: {
+    copy: 'Hello, World!',
+    variant: 'outline',
+  },
+} satisfies Meta<typeof CopyButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { CopyButton },
+    setup: () => ({ args }),
+    template: `
+      <div class="space-y-10">
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Icon Only (default)</h3>
+          <div class="flex items-center gap-4">
+            <CopyButton v-bind="args" />
+            <CopyButton v-bind="args" variant="ghost" />
+            <CopyButton v-bind="args" variant="secondary" />
+          </div>
+        </section>
+
+        <section>
+          <h3 class="mb-4 text-lg font-medium">With Label</h3>
+          <div class="flex items-center gap-4">
+            <CopyButton v-bind="args">Copy Text</CopyButton>
+            <CopyButton v-bind="args" variant="secondary">Copy Address</CopyButton>
+          </div>
+        </section>
+
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Sizes</h3>
+          <div class="flex items-center gap-4">
+            <CopyButton v-bind="args" size="sm">Small</CopyButton>
+            <CopyButton v-bind="args" size="default">Default</CopyButton>
+            <CopyButton v-bind="args" size="lg">Large</CopyButton>
+          </div>
+        </section>
+      </div>
+    `,
+  }),
+}