@polymarbot/nuxt-layer-shadcn-ui 0.1.0

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

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Tag from './index.vue'
+
+type TagType = 'default' | 'success' | 'info' | 'help' | 'warn' | 'danger'
+type TagVariant = 'solid' | 'soft' | 'bordered' | 'flat'
+
+const types: TagType[] = [ 'default', 'success', 'info', 'help', 'warn', 'danger' ]
+const variants: TagVariant[] = [ 'solid', 'soft', 'bordered', 'flat' ]
+
+const meta = {
+  title: 'UI/Tag',
+  component: Tag,
+  argTypes: {
+    type: { control: 'select', options: types },
+    variant: { control: 'select', options: variants },
+  },
+  args: {
+    type: 'default',
+    variant: 'soft',
+  },
+} satisfies Meta<typeof Tag>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { Tag },
+    setup: () => ({ args, types, variants }),
+    template: `
+      <div class="space-y-10">
+        <!-- Controlled -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
+          <Tag v-bind="args">Tag</Tag>
+        </section>
+
+        <!-- Variants × Types matrix -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Variants × Types</h3>
+          <div class="space-y-3">
+            <div v-for="v in variants" :key="v" class="flex flex-wrap items-center gap-3">
+              <span class="w-20 text-sm text-muted-foreground">{{ v }}</span>
+              <Tag v-for="t in types" :key="t" :type="t" :variant="v">{{ t }}</Tag>
+            </div>
+          </div>
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { cva } from 'class-variance-authority'
+import type { TagProps } from './types'
+
+const tagVariants = cva(
+  'inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium',
+  {
+    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<TagProps>(), {
+  type: 'default',
+  variant: 'soft',
+  class: undefined,
+})
+
+const mergedClass = computed(() =>
+  cn(tagVariants({ type: props.type, variant: props.variant }), props.class),
+)
+</script>
+
+<template>
+  <span :class="mergedClass">
+    <slot />
+  </span>
+</template>

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

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

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

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Textarea from './index.vue'
+
+const meta = {
+  title: 'UI/Textarea',
+  component: Textarea,
+  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: { Textarea },
+    setup: () => ({ args }),
+    template: `
+      <div class="max-w-sm">
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
+          <Textarea v-bind="args" placeholder="Type your message here..." />
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { Textarea as ShadcnTextarea } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/textarea'
+import type { TextareaProps } from './types'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<TextareaProps>(), {
+  modelValue: undefined,
+  autocomplete: undefined,
+  rows: undefined,
+  invalid: false,
+  class: undefined,
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'change': [value: string]
+}>()
+
+function handleInput (event: Event) {
+  const target = event.target as HTMLTextAreaElement
+  emit('update:modelValue', target.value)
+}
+
+function handleChange (event: Event) {
+  const target = event.target as HTMLTextAreaElement
+  emit('change', target.value)
+}
+
+const mergedClass = computed(() =>
+  cn(
+    props.rows ? 'field-sizing-fixed!' : '',
+    props.class,
+  ),
+)
+</script>
+
+<template>
+  <ShadcnTextarea
+    :modelValue="modelValue"
+    :rows="rows"
+    :class="mergedClass"
+    :aria-invalid="invalid || undefined"
+    :data-1p-ignore="autocomplete === 'off' || !autocomplete ? true : undefined"
+    :autocomplete="autocomplete || 'off'"
+    v-bind="$attrs"
+    @input="handleInput"
+    @change="handleChange"
+  />
+</template>

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

@@ -0,0 +1,8 @@
+export interface TextareaProps {
+  modelValue?: string
+  /** Set to enable browser/password-manager autofill. Defaults to 'off'. */
+  autocomplete?: string
+  rows?: number
+  invalid?: boolean
+  class?: ClassValue
+}

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

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { toast } from 'vue-sonner'
+import Button from '../Button/index.vue'
+import Toast from './index.vue'
+
+const meta = {
+  title: 'UI/Toast',
+  component: Toast,
+} satisfies Meta<typeof Toast>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { Toast, Button },
+    setup () {
+      const showDefault = () => toast('This is a default toast')
+      const showSuccess = () => toast.success('Operation completed successfully')
+      const showError = () => toast.error('Something went wrong')
+      const showInfo = () => toast.info('Here is some information')
+      const showWarning = () => toast.warning('Please be careful')
+      const showWithDescription = () => toast('Event created', { description: 'Your event has been scheduled for tomorrow at 3:00 PM.' })
+      return { showDefault, showSuccess, showError, showInfo, showWarning, showWithDescription }
+    },
+    template: `
+      <div class="space-y-10">
+        <Toast position="bottom-right" />
+
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Toast Types</h3>
+          <div class="flex flex-wrap gap-3">
+            <Button variant="outline" @click="showDefault">Default</Button>
+            <Button variant="outline" @click="showSuccess">Success</Button>
+            <Button variant="outline" @click="showError">Error</Button>
+            <Button variant="outline" @click="showInfo">Info</Button>
+            <Button variant="outline" @click="showWarning">Warning</Button>
+          </div>
+        </section>
+
+        <section>
+          <h3 class="mb-4 text-lg font-medium">With Description</h3>
+          <Button variant="outline" @click="showWithDescription">Show Toast with Description</Button>
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { Toaster as ShadcnSonner } from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/sonner'
+import 'vue-sonner/style.css'
+import type { ToastProps } from './types'
+
+defineProps<ToastProps>()
+</script>
+
+<template>
+  <ShadcnSonner
+    :position="position ?? 'bottom-right'"
+    :duration="5000"
+    richColors
+    closeButton
+    :style="{
+      '--normal-bg': 'var(--color-popover)',
+      '--normal-text': 'var(--color-popover-foreground)',
+      '--normal-border': 'var(--color-border)',
+    }"
+  />
+</template>

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

@@ -0,0 +1,5 @@
+export type ToastPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center'
+
+export interface ToastProps {
+  position?: ToastPosition
+}

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

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import Button from '../Button/index.vue'
+import Tooltip from './index.vue'
+
+const meta = {
+  title: 'UI/Tooltip',
+  component: Tooltip,
+  argTypes: {
+    disabled: { control: 'boolean' },
+  },
+  args: {
+    disabled: false,
+  },
+} satisfies Meta<typeof Tooltip>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: args => ({
+    components: { Tooltip, Button },
+    setup: () => ({ args }),
+    template: `
+      <div class="space-y-10">
+        <!-- Controlled -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Controlled</h3>
+          <Tooltip text="This is a tooltip" v-bind="args">
+            <Button variant="outline">Hover me</Button>
+          </Tooltip>
+        </section>
+
+        <!-- Positions -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Positions</h3>
+          <div class="flex flex-wrap items-center gap-4 py-10 justify-center">
+            <Tooltip text="Top tooltip" position="top">
+              <Button variant="outline">Top</Button>
+            </Tooltip>
+            <Tooltip text="Bottom tooltip" position="bottom">
+              <Button variant="outline">Bottom</Button>
+            </Tooltip>
+            <Tooltip text="Left tooltip" position="left">
+              <Button variant="outline">Left</Button>
+            </Tooltip>
+            <Tooltip text="Right tooltip" position="right">
+              <Button variant="outline">Right</Button>
+            </Tooltip>
+          </div>
+        </section>
+
+        <!-- Long Text -->
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Long Text</h3>
+          <Tooltip text="This is a longer tooltip message that demonstrates how the tooltip handles multi-line content and wraps properly within its container.">
+            <Button variant="outline">Long Tooltip</Button>
+          </Tooltip>
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import {
+  Tooltip as ShadcnTooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@polymarbot/nuxt-layer-shadcn-ui/app/components/shadcn/tooltip'
+import type { TooltipProps } from './types'
+
+const props = withDefaults(defineProps<TooltipProps>(), {
+  text: undefined,
+  position: 'top',
+  disabled: false,
+  class: undefined,
+})
+
+const emit = defineEmits<{ open: [], close: []}>()
+
+const { isMobile } = useDevice()
+
+const sanitizedText = computed(() => props.text ? safeHtml(props.text) : '')
+const shouldShow = computed(() => !!props.text && !props.disabled)
+
+// Mobile: programmatic open via touch; Desktop: undefined = uncontrolled
+const mobileOpen = ref<boolean | undefined>(undefined)
+
+function onTouchStart () {
+  if (isMobile.value) {
+    mobileOpen.value = true
+  }
+}
+
+function onOpenChange (value: boolean) {
+  if (isMobile.value) {
+    mobileOpen.value = value
+  }
+  if (value) {
+    emit('open')
+  } else {
+    emit('close')
+  }
+}
+</script>
+
+<template>
+  <TooltipProvider
+    :delayDuration="isMobile ? 0 : 300"
+    :disableClosingTrigger="disableClosingTrigger || isMobile"
+  >
+    <ShadcnTooltip
+      :open="mobileOpen"
+      @update:open="onOpenChange"
+    >
+      <TooltipTrigger
+        asChild
+        @touchstart.passive="onTouchStart"
+      >
+        <slot />
+      </TooltipTrigger>
+      <TooltipContent
+        v-if="shouldShow"
+        :side="position"
+        class="max-w-[24rem]"
+      >
+        <span
+          :class="props.class"
+          v-html="sanitizedText"
+        />
+      </TooltipContent>
+    </ShadcnTooltip>
+  </TooltipProvider>
+</template>

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

@@ -0,0 +1,7 @@
+export interface TooltipProps {
+  text?: string
+  position?: 'top' | 'bottom' | 'left' | 'right'
+  disabled?: boolean
+  disableClosingTrigger?: boolean
+  class?: ClassValue
+}

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

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import WebLink from './index.vue'
+
+const meta = {
+  title: 'UI/WebLink',
+  component: WebLink,
+} satisfies Meta<typeof WebLink>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { WebLink },
+    template: `
+      <div class="space-y-10">
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Internal Link</h3>
+          <WebLink href="/dashboard">Go to Dashboard</WebLink>
+        </section>
+
+        <section>
+          <h3 class="mb-4 text-lg font-medium">External Link</h3>
+          <WebLink href="https://example.com">Visit Example.com</WebLink>
+          <p class="mt-1 text-sm text-muted-foreground">External links automatically open in a new tab and show a trailing icon.</p>
+        </section>
+
+        <section>
+          <h3 class="mb-4 text-lg font-medium">External Link without Icon</h3>
+          <WebLink href="https://example.com" :externalIcon="false">No trailing icon</WebLink>
+        </section>
+
+        <section>
+          <h3 class="mb-4 text-lg font-medium">With Explicit Target</h3>
+          <WebLink href="https://example.com" target="_self">Same Tab External Link</WebLink>
+        </section>
+
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Unstyled</h3>
+          <div class="flex flex-col gap-2">
+            <WebLink href="/settings" unstyled>Unstyled internal link (no color or underline)</WebLink>
+            <WebLink href="https://example.com" unstyled>Unstyled external link (icon still shows)</WebLink>
+          </div>
+        </section>
+
+        <section>
+          <h3 class="mb-4 text-lg font-medium">Inline Usage</h3>
+          <p class="text-sm">
+            Please read our
+            <WebLink href="https://example.com/terms">Terms of Service</WebLink>
+            and
+            <WebLink href="https://example.com/privacy">Privacy Policy</WebLink>
+            before continuing.
+          </p>
+        </section>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { RouteLocationRaw } from 'vue-router'
+import type { WebLinkProps } from './types'
+
+const props = withDefaults(defineProps<WebLinkProps>(), {
+  href: undefined,
+  to: undefined,
+  target: undefined,
+  externalIcon: true,
+  class: undefined,
+})
+
+const localePath = useLocalePath()
+
+const isExternal = computed(() => props.href ? isUrl(props.href) : false)
+
+const showExternalIcon = computed(() => props.externalIcon && isExternal.value)
+
+// Compute the final destination (supports both href string and to route object)
+const finalTo = computed<RouteLocationRaw | undefined>(() => {
+  if (props.to) return props.to
+  if (props.href) {
+    // Apply locale path for internal links only
+    return isExternal.value ? props.href : localePath(props.href)
+  }
+  return undefined
+})
+const finalTarget = computed(() => {
+  if (props.target) return props.target
+  // Auto set _blank for external links
+  return isExternal.value ? '_blank' : undefined
+})
+const finalRel = computed(() => {
+  // Add security attrs for external links opening in new tab
+  return finalTarget.value === '_blank' ? 'noopener noreferrer' : undefined
+})
+
+// Merge default class with external class
+const mergedClass = computed(() => {
+  if (props.unstyled) {
+    return props.class
+  }
+  return cn('text-info underline', props.class)
+})
+</script>
+
+<template>
+  <NuxtLink
+    :to="finalTo"
+    :target="finalTarget"
+    :rel="finalRel"
+    :class="mergedClass"
+  >
+    <slot />
+    <Icon
+      v-if="showExternalIcon"
+      name="external-link"
+      class="ml-0.5 inline size-[1em] align-[-0.125em]"
+    />
+  </NuxtLink>
+</template>

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

@@ -0,0 +1,11 @@
+import type { NuxtLinkProps } from '#app'
+import type { RouteLocationRaw } from 'vue-router'
+
+export interface WebLinkProps extends /* @vue-ignore */ NuxtLinkProps {
+  href?: string
+  to?: RouteLocationRaw
+  target?: string
+  unstyled?: boolean
+  externalIcon?: boolean
+  class?: ClassValue
+}

package/app/composables/index.ts

@@ -0,0 +1,9 @@
+// Re-export shared composables used by this layer. Nuxt auto-imports everything
+// exported from `app/composables/**`, so listed symbols become global.
+export {
+  useScrollState,
+  useDevice,
+  usePagination,
+  useTranslations,
+  useDate,
+} from '@polymarbot/uitls-shared/vue/composables'