@polymarbot/nuxt-layer-shadcn-ui 0.1.0

package/app/assets/styles/animate.css

@@ -0,0 +1,71 @@
+@keyframes slideIn {
+  from {
+    transform: translateX(calc(100% + var(--viewport-padding)));
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes hide {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes swipeOut {
+  from {
+    transform: translateX(var(--radix-toast-swipe-end-x));
+  }
+  to {
+    transform: translateX(calc(100% + var(--viewport-padding)));
+  }
+}
+
+@keyframes shake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+  10%, 30%, 50%, 70%, 90% {
+    transform: translateX(-4px);
+  }
+  20%, 40%, 60%, 80% {
+    transform: translateX(4px);
+  }
+}
+
+@keyframes pop {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@layer utilities {
+  .animate-slideIn {
+    animation: slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .animate-hide {
+    animation: hide 100ms ease-in;
+  }
+
+  .animate-swipeOut {
+    animation: swipeOut 100ms ease-out;
+  }
+
+  .animate-shake {
+    animation: shake 0.5s ease-in-out;
+  }
+
+  .animate-pop {
+    animation: pop 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  }
+}

package/app/assets/styles/colors.css

@@ -0,0 +1,116 @@
+/* shadcn-vue color tokens (Zinc base, oklch format) */
+/* Reference: https://www.shadcn-vue.com/themes */
+
+:root {
+  /* Background scale — base / surface / muted / accent */
+  --background: oklch(1 0 0);
+  --background-surface: oklch(0.98 0 0);
+  --background-muted: oklch(0.95 0 0);
+  --background-accent: oklch(0.93 0 0);
+
+  /* Foreground scale — base / muted / accent */
+  --foreground: oklch(0.145 0 0);
+  --foreground-muted: oklch(0.556 0 0);
+  --foreground-accent: oklch(0.35 0 0);
+
+  /* Brand */
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+
+  /* Border */
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+
+  /* Semantic status */
+  --status-foreground: oklch(0.985 0 0);
+  --success: oklch(0.58 0.17 163.225);
+  --info: oklch(0.58 0.15 221.723);
+  --help: oklch(0.53 0.21 293.541);
+  --warn: oklch(0.55 0.18 62.823);
+  --danger: oklch(0.56 0.25 27.325);
+}
+
+.dark {
+  /* Background scale */
+  --background: oklch(0.12 0 0);
+  --background-surface: oklch(0.18 0 0);
+  --background-muted: oklch(0.25 0 0);
+  --background-accent: oklch(0.3 0 0);
+
+  /* Foreground scale */
+  --foreground: oklch(0.985 0 0);
+  --foreground-muted: oklch(0.708 0 0);
+  --foreground-accent: oklch(0.85 0 0);
+
+  /* Brand */
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+
+  /* Border */
+  --border: oklch(0.269 0 0);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.439 0 0);
+
+  /* Semantic status */
+  --status-foreground: oklch(0.145 0 0);
+  --success: oklch(0.696 0.17 162.48);
+  --info: oklch(0.685 0.121 220.7);
+  --help: oklch(0.627 0.22 293.541);
+  --warn: oklch(0.762 0.148 62.823);
+  --danger: oklch(0.637 0.237 25.331);
+}
+
+/* Register colors in Tailwind v4 theme (supports opacity modifier) */
+@theme inline {
+  /* Base */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  /* Components — surface elevation */
+  --color-card: var(--background);
+  --color-card-foreground: var(--foreground);
+  --color-popover: var(--background);
+  --color-popover-foreground: var(--foreground);
+
+  /* Brand */
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--background-muted);
+  --color-secondary-foreground: var(--foreground);
+
+  /* State */
+  --color-muted: var(--background-muted);
+  --color-muted-foreground: var(--foreground-muted);
+  --color-accent: var(--background-accent);
+  --color-accent-foreground: var(--foreground-accent);
+  --color-destructive: var(--danger);
+  --color-destructive-foreground: var(--status-foreground);
+
+  /* Form & Border */
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* Sidebar — inherits from main theme */
+  --color-sidebar: var(--background-surface);
+  --color-sidebar-foreground: var(--foreground);
+  --color-sidebar-primary: var(--primary);
+  --color-sidebar-primary-foreground: var(--primary-foreground);
+  --color-sidebar-accent: var(--background-accent);
+  --color-sidebar-accent-foreground: var(--foreground-accent);
+  --color-sidebar-border: var(--border);
+  --color-sidebar-ring: var(--ring);
+
+  /* Semantic status */
+  --color-success: var(--success);
+  --color-success-foreground: var(--status-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--status-foreground);
+  --color-help: var(--help);
+  --color-help-foreground: var(--status-foreground);
+  --color-warn: var(--warn);
+  --color-warn-foreground: var(--status-foreground);
+  --color-danger: var(--danger);
+  --color-danger-foreground: var(--status-foreground);
+}

package/app/assets/styles/globals.css

@@ -0,0 +1,43 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@import './colors.css';
+@import './utilities.css';
+@import './animate.css';
+@import './transition.css';
+
+/* Ensure Tailwind scans all source files in this app */
+@source '../../../..';
+
+/* Dark mode configuration for Tailwind v4 */
+@custom-variant dark (&:where(.dark, .dark *));
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    box-sizing: border-box;
+  }
+  html {
+    font-size: 16px;
+  }
+  body {
+    @apply bg-background text-foreground;
+    margin: 0;
+  }
+}
+
+/* Prevent accidental text selection on touch devices */
+@media (pointer: coarse) {
+  body {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+  input,
+  textarea,
+  [contenteditable='true'],
+  pre,
+  code,
+  .selectable {
+    -webkit-user-select: text;
+    user-select: text;
+  }
+}

package/app/assets/styles/index.stories.ts

@@ -0,0 +1,211 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+type Swatch = {
+  name: string
+  token: string
+  bg: string
+  fg?: string
+  border?: boolean
+}
+
+type Group = {
+  title: string
+  description?: string
+  swatches: Swatch[]
+}
+
+const groups: Group[] = [
+  {
+    title: 'Surface',
+    description: 'Page, card and popover backgrounds — pair each with its matching foreground.',
+    swatches: [
+      { name: 'background', token: '--color-background', bg: 'bg-background', fg: 'text-foreground', border: true },
+      { name: 'card', token: '--color-card', bg: 'bg-card', fg: 'text-card-foreground', border: true },
+      { name: 'popover', token: '--color-popover', bg: 'bg-popover', fg: 'text-popover-foreground', border: true },
+      { name: 'muted', token: '--color-muted', bg: 'bg-muted', fg: 'text-muted-foreground' },
+      { name: 'accent', token: '--color-accent', bg: 'bg-accent', fg: 'text-accent-foreground' },
+    ],
+  },
+  {
+    title: 'Brand',
+    description: 'Primary and secondary colors for buttons, links and emphasis.',
+    swatches: [
+      { name: 'primary', token: '--color-primary', bg: 'bg-primary', fg: 'text-primary-foreground' },
+      { name: 'secondary', token: '--color-secondary', bg: 'bg-secondary', fg: 'text-secondary-foreground' },
+    ],
+  },
+  {
+    title: 'Status',
+    description: 'Semantic feedback colors for success, info, warn, danger, etc.',
+    swatches: [
+      { name: 'success', token: '--color-success', bg: 'bg-success', fg: 'text-success-foreground' },
+      { name: 'info', token: '--color-info', bg: 'bg-info', fg: 'text-info-foreground' },
+      { name: 'help', token: '--color-help', bg: 'bg-help', fg: 'text-help-foreground' },
+      { name: 'warn', token: '--color-warn', bg: 'bg-warn', fg: 'text-warn-foreground' },
+      { name: 'danger', token: '--color-danger', bg: 'bg-danger', fg: 'text-danger-foreground' },
+      { name: 'destructive', token: '--color-destructive', bg: 'bg-destructive', fg: 'text-destructive-foreground' },
+    ],
+  },
+  {
+    title: 'Sidebar',
+    description: 'Dedicated sidebar palette so the nav can visually separate from main content.',
+    swatches: [
+      { name: 'sidebar', token: '--color-sidebar', bg: 'bg-sidebar', fg: 'text-sidebar-foreground', border: true },
+      { name: 'sidebar-primary', token: '--color-sidebar-primary', bg: 'bg-sidebar-primary', fg: 'text-sidebar-primary-foreground' },
+      { name: 'sidebar-accent', token: '--color-sidebar-accent', bg: 'bg-sidebar-accent', fg: 'text-sidebar-accent-foreground' },
+    ],
+  },
+]
+
+const borders = [
+  { name: 'border', token: '--color-border', class: 'border-border' },
+  { name: 'input', token: '--color-input', class: 'border-input' },
+  { name: 'ring', token: '--color-ring', class: 'border-ring' },
+]
+
+const foregrounds = [
+  { name: 'foreground', token: '--foreground', class: 'text-foreground' },
+  { name: 'foreground-muted', token: '--foreground-muted', class: 'text-muted-foreground' },
+  { name: 'foreground-accent', token: '--foreground-accent', class: 'text-accent-foreground' },
+]
+
+const meta = {
+  title: 'Foundations/Colors',
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'Design tokens from the shadcn-vue Zinc palette, registered via Tailwind v4 `@theme`. Toggle the Storybook backgrounds to preview Light and Dark modes.',
+      },
+    },
+  },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Palette: Story = {
+  render: () => ({
+    setup: () => ({ groups, borders, foregrounds }),
+    template: `
+      <div class="space-y-10">
+        <section v-for="group in groups" :key="group.title">
+          <header class="mb-4">
+            <h3 class="text-lg font-medium">{{ group.title }}</h3>
+            <p v-if="group.description" class="mt-1 text-sm text-muted-foreground">{{ group.description }}</p>
+          </header>
+          <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+            <div
+              v-for="swatch in group.swatches"
+              :key="swatch.name"
+              :class="[
+                'flex h-24 flex-col justify-between rounded-md p-3 shadow-sm',
+                swatch.bg,
+                swatch.fg,
+                swatch.border ? 'border border-border' : '',
+              ]"
+            >
+              <span class="font-mono text-xs font-medium">{{ swatch.name }}</span>
+              <div class="flex items-end justify-between">
+                <span class="font-mono text-[10px] opacity-70">{{ swatch.token }}</span>
+                <span class="text-lg font-semibold">Aa</span>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section>
+          <header class="mb-4">
+            <h3 class="text-lg font-medium">Foreground</h3>
+            <p class="mt-1 text-sm text-muted-foreground">Three-level contrast hierarchy for body text.</p>
+          </header>
+          <div class="space-y-2 rounded-md border border-border bg-background p-4">
+            <p v-for="fg in foregrounds" :key="fg.name" :class="fg.class">
+              <span class="font-mono text-xs mr-2">{{ fg.class }}</span>
+              The quick brown fox jumps over the lazy dog.
+            </p>
+          </div>
+        </section>
+
+        <section>
+          <header class="mb-4">
+            <h3 class="text-lg font-medium">Border & Ring</h3>
+            <p class="mt-1 text-sm text-muted-foreground">Dividers, input borders and focus ring highlights.</p>
+          </header>
+          <div class="flex flex-wrap gap-3">
+            <div
+              v-for="b in borders"
+              :key="b.name"
+              :class="['rounded-md border-2 px-5 py-6 bg-background', b.class]"
+            >
+              <div class="font-mono text-xs font-medium">{{ b.name }}</div>
+              <div class="font-mono text-[10px] text-muted-foreground">{{ b.token }}</div>
+            </div>
+          </div>
+        </section>
+      </div>
+    `,
+  }),
+}
+
+export const LightVsDark: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Side-by-side comparison of Light and Dark palettes, independent of the top-level background toggle.',
+      },
+    },
+  },
+  render: () => ({
+    setup: () => ({ groups }),
+    template: `
+      <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+        <div class="rounded-lg border border-border bg-background p-6">
+          <div class="mb-4 font-mono text-xs uppercase tracking-wide text-muted-foreground">Light</div>
+          <div class="space-y-6">
+            <div v-for="group in groups" :key="group.title">
+              <div class="mb-2 text-sm font-medium">{{ group.title }}</div>
+              <div class="grid grid-cols-2 gap-2">
+                <div
+                  v-for="swatch in group.swatches"
+                  :key="swatch.name"
+                  :class="[
+                    'flex h-14 items-center justify-center rounded border',
+                    swatch.bg,
+                    swatch.fg || 'text-foreground',
+                    swatch.border ? 'border-border' : 'border-transparent',
+                  ]"
+                >
+                  <span class="font-mono text-xs">{{ swatch.name }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="dark rounded-lg border border-border bg-background p-6 text-foreground">
+          <div class="mb-4 font-mono text-xs uppercase tracking-wide text-muted-foreground">Dark</div>
+          <div class="space-y-6">
+            <div v-for="group in groups" :key="group.title">
+              <div class="mb-2 text-sm font-medium">{{ group.title }}</div>
+              <div class="grid grid-cols-2 gap-2">
+                <div
+                  v-for="swatch in group.swatches"
+                  :key="swatch.name"
+                  :class="[
+                    'flex h-14 items-center justify-center rounded border',
+                    swatch.bg,
+                    swatch.fg || 'text-foreground',
+                    swatch.border ? 'border-border' : 'border-transparent',
+                  ]"
+                >
+                  <span class="font-mono text-xs">{{ swatch.name }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `,
+  }),
+}

package/app/assets/styles/transition.css

@@ -0,0 +1,34 @@
+/* Layout transition (fade only) */
+.layout-enter-active,
+.layout-leave-active {
+  transition: opacity .2s;
+}
+.layout-enter-from,
+.layout-leave-to {
+  opacity: 0;
+}
+
+/* Page transition */
+.page-enter-active,
+.page-leave-active {
+  transition: all .2s;
+}
+.page-enter-from,
+.page-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* Tab transition */
+.tab-enter-active,
+.tab-leave-active {
+  transition: all .2s;
+}
+.tab-enter-from {
+  opacity: 0;
+  transform: translateX(30px);
+}
+.tab-leave-to {
+  opacity: 0;
+  transform: translateX(-30px);
+}

package/app/assets/styles/utilities.css

@@ -0,0 +1,26 @@
+:root {
+  --radius: 0.5rem;
+}
+
+/* Radius & animation tokens */
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  @keyframes accordion-down {
+    from { height: 0; }
+    to { height: var(--reka-accordion-content-height); }
+  }
+  @keyframes accordion-up {
+    from { height: var(--reka-accordion-content-height); }
+    to { height: 0; }
+  }
+}
+
+/* Safe area utilities */
+@utility pb-safe { padding-bottom: env(safe-area-inset-bottom); }

package/app/components/shadcn/accordion/Accordion.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { AccordionRootEmits, AccordionRootProps } from "reka-ui"
+import {
+  AccordionRoot,
+  useForwardPropsEmits,
+} from "reka-ui"
+
+const props = defineProps<AccordionRootProps>()
+const emits = defineEmits<AccordionRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AccordionRoot v-slot="slotProps" data-slot="accordion" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </AccordionRoot>
+</template>

package/app/components/shadcn/accordion/AccordionContent.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { AccordionContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AccordionContent } from "reka-ui"
+import { cn } from '@polymarbot/nuxt-layer-shadcn-ui/app/utils'
+
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AccordionContent
+    data-slot="accordion-content"
+    v-bind="delegatedProps"
+    class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+  >
+    <div :class="cn('pt-0 pb-4', props.class)">
+      <slot />
+    </div>
+  </AccordionContent>
+</template>

package/app/components/shadcn/accordion/AccordionItem.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { AccordionItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AccordionItem, useForwardProps } from "reka-ui"
+import { cn } from '@polymarbot/nuxt-layer-shadcn-ui/app/utils'
+
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <AccordionItem
+    v-slot="slotProps"
+    data-slot="accordion-item"
+    v-bind="forwardedProps"
+    :class="cn('border-b last:border-b-0', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </AccordionItem>
+</template>

package/app/components/shadcn/accordion/AccordionTrigger.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { AccordionTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronDown } from "lucide-vue-next"
+import {
+  AccordionHeader,
+  AccordionTrigger,
+} from "reka-ui"
+import { cn } from '@polymarbot/nuxt-layer-shadcn-ui/app/utils'
+
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      data-slot="accordion-trigger"
+      v-bind="delegatedProps"
+      :class="
+        cn(
+          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          props.class,
+        )
+      "
+    >
+      <slot />
+      <slot name="icon">
+        <ChevronDown
+          class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+        />
+      </slot>
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>

package/app/components/shadcn/accordion/index.ts

@@ -0,0 +1,4 @@
+export { default as Accordion } from "./Accordion.vue"
+export { default as AccordionContent } from "./AccordionContent.vue"
+export { default as AccordionItem } from "./AccordionItem.vue"
+export { default as AccordionTrigger } from "./AccordionTrigger.vue"

package/app/components/shadcn/alert/Alert.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { AlertVariants } from "."
+import { cn } from '@polymarbot/nuxt-layer-shadcn-ui/app/utils'
+import { alertVariants } from "."
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  variant?: AlertVariants["variant"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert"
+    :class="cn(alertVariants({ variant }), props.class)"
+    role="alert"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/shadcn/alert/AlertDescription.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from '@polymarbot/nuxt-layer-shadcn-ui/app/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert-description"
+    :class="cn('text-muted-foreground col-start-2 text-sm [&_p]:leading-relaxed', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/app/components/shadcn/alert/AlertTitle.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from '@polymarbot/nuxt-layer-shadcn-ui/app/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert-title"
+    :class="cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', props.class)"
+  >
+    <slot />
+  </div>
+</template>