@gxp-dev/mod-ui 2.0.0

package/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+export interface DropdownMenuShortcutProps {
+  class?: HTMLAttributes["class"]
+}
+
+const props = defineProps<DropdownMenuShortcutProps>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest opacity-60', props.class)">
+    <slot />
+  </span>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuSub.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { DropdownMenuSubEmits, DropdownMenuSubProps } from "reka-ui"
+import { DropdownMenuSub, useForwardPropsEmits } from "reka-ui"
+
+export type DropdownMenuSubComponentProps = DropdownMenuSubProps
+
+const props = defineProps<DropdownMenuSubComponentProps>()
+const emits = defineEmits<DropdownMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuSub v-bind="forwarded">
+    <slot />
+  </DropdownMenuSub>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type {
+  DropdownMenuSubContentEmits,
+  DropdownMenuSubContentProps,
+} from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DropdownMenuSubContent, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+export interface DropdownMenuSubContentComponentProps
+  extends DropdownMenuSubContentProps {
+  class?: HTMLAttributes["class"]
+}
+
+const props = defineProps<DropdownMenuSubContentComponentProps>()
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuSubContent
+    v-bind="forwarded"
+    :class="
+      cn(
+        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </DropdownMenuSubContent>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { DropdownMenuSubTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronRight } from "lucide-vue-next"
+import { DropdownMenuSubTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+export interface DropdownMenuSubTriggerComponentProps
+  extends DropdownMenuSubTriggerProps {
+  class?: HTMLAttributes["class"]
+  inset?: boolean
+}
+
+const props = defineProps<DropdownMenuSubTriggerComponentProps>()
+
+const delegatedProps = reactiveOmit(props, "class", "inset")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+        inset && 'pl-8',
+        props.class,
+      )
+    "
+  >
+    <slot />
+    <ChevronRight class="ml-auto h-4 w-4" />
+  </DropdownMenuSubTrigger>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { DropdownMenuTriggerProps } from "reka-ui"
+import { DropdownMenuTrigger, useForwardProps } from "reka-ui"
+
+export type DropdownMenuTriggerComponentProps = DropdownMenuTriggerProps
+
+const props = defineProps<DropdownMenuTriggerComponentProps>()
+
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <DropdownMenuTrigger class="outline-none" v-bind="forwardedProps">
+    <slot />
+  </DropdownMenuTrigger>
+</template>

package/src/components/ui/dropdown-menu/index.ts

@@ -0,0 +1,15 @@
+export { default as DropdownMenu } from "./DropdownMenu.vue"
+export { default as DropdownMenuCheckboxItem } from "./DropdownMenuCheckboxItem.vue"
+export { default as DropdownMenuContent } from "./DropdownMenuContent.vue"
+export { default as DropdownMenuGroup } from "./DropdownMenuGroup.vue"
+export { default as DropdownMenuItem } from "./DropdownMenuItem.vue"
+export { default as DropdownMenuLabel } from "./DropdownMenuLabel.vue"
+export { default as DropdownMenuPortal } from "./DropdownMenuPortal.vue"
+export { default as DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.vue"
+export { default as DropdownMenuRadioItem } from "./DropdownMenuRadioItem.vue"
+export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.vue"
+export { default as DropdownMenuShortcut } from "./DropdownMenuShortcut.vue"
+export { default as DropdownMenuSub } from "./DropdownMenuSub.vue"
+export { default as DropdownMenuSubContent } from "./DropdownMenuSubContent.vue"
+export { default as DropdownMenuSubTrigger } from "./DropdownMenuSubTrigger.vue"
+export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.vue"

package/src/components/ui/field-frame/FieldFrame.stories.ts

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { FieldFrame } from "."
+import { Input } from "@/components/ui/input"
+
+const meta = {
+  title: "UI/FieldFrame",
+  component: FieldFrame,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Shared chrome (label + helpText + error list) wrapped around any input-bearing slot. Used internally by every input composition.",
+      },
+    },
+  },
+} satisfies Meta<typeof FieldFrame>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { label: "Field label" },
+  render: (args) => ({
+    components: { FieldFrame, Input },
+    setup() {
+      return { args }
+    },
+    template: `
+      <FieldFrame v-bind="args">
+        <Input placeholder="Type here..." />
+      </FieldFrame>
+    `,
+  }),
+}
+
+export const Required: Story = {
+  args: { label: "Email", required: true },
+  render: (args) => ({
+    components: { FieldFrame, Input },
+    setup() {
+      return { args }
+    },
+    template: `
+      <FieldFrame v-bind="args">
+        <Input type="email" placeholder="you@example.com" />
+      </FieldFrame>
+    `,
+  }),
+}
+
+export const WithHelpText: Story = {
+  args: {
+    label: "Username",
+    helpText: "Lowercase letters, numbers, and underscores only.",
+  },
+  render: (args) => ({
+    components: { FieldFrame, Input },
+    setup() {
+      return { args }
+    },
+    template: `
+      <FieldFrame v-bind="args">
+        <Input />
+      </FieldFrame>
+    `,
+  }),
+}
+
+export const WithErrors: Story = {
+  args: {
+    label: "Password",
+    errors: ["Must be at least 8 characters.", "Must include a number."],
+  },
+  render: (args) => ({
+    components: { FieldFrame, Input },
+    setup() {
+      return { args }
+    },
+    template: `
+      <FieldFrame v-bind="args">
+        <Input type="password" />
+      </FieldFrame>
+    `,
+  }),
+}
+
+export const HiddenLabel: Story = {
+  args: { label: "Hidden but accessible", hideLabel: true },
+  render: (args) => ({
+    components: { FieldFrame, Input },
+    setup() {
+      return { args }
+    },
+    template: `
+      <FieldFrame v-bind="args">
+        <Input placeholder="Aria-labelled but visually hidden" />
+      </FieldFrame>
+    `,
+  }),
+}
+
+export const Showcase: Story = {
+  args: {} as never,
+  render: () => ({
+    components: { FieldFrame, Input },
+    template: `
+      <div class="flex flex-col gap-6 max-w-md">
+        <FieldFrame label="Default">
+          <Input />
+        </FieldFrame>
+        <FieldFrame label="Required" required>
+          <Input />
+        </FieldFrame>
+        <FieldFrame label="With help text" help-text="Some helpful hint">
+          <Input />
+        </FieldFrame>
+        <FieldFrame
+          label="With errors"
+          required
+          :errors="['Field is required.', 'Try again.']"
+        >
+          <Input />
+        </FieldFrame>
+      </div>
+    `,
+  }),
+}

package/src/components/ui/field-frame/FieldFrame.test.ts

@@ -0,0 +1,109 @@
+import { describe, expect, it } from "vitest"
+import { mount } from "@vue/test-utils"
+import { h } from "vue"
+import { FieldFrame } from "."
+
+describe("FieldFrame", () => {
+  it("renders the slot content", () => {
+    const wrapper = mount(FieldFrame, {
+      slots: { default: '<input data-testid="inner" />' },
+    })
+    expect(wrapper.find("[data-testid='inner']").exists()).toBe(true)
+  })
+
+  it("renders a label when set", () => {
+    const wrapper = mount(FieldFrame, {
+      props: { label: "First name" },
+      slots: { default: '<input />' },
+    })
+    expect(wrapper.find("[data-testid='field-frame-label']").text()).toBe(
+      "First name",
+    )
+  })
+
+  it("does not render a visible label when hideLabel is true", () => {
+    const wrapper = mount(FieldFrame, {
+      props: { label: "Hidden label", hideLabel: true },
+      slots: { default: '<input />' },
+    })
+    expect(wrapper.find("[data-testid='field-frame-label']").exists()).toBe(
+      false,
+    )
+    expect(
+      wrapper.find("[data-testid='field-frame-label-sr']").classes(),
+    ).toContain("sr-only")
+  })
+
+  it("forwards the `for` attribute to the label", () => {
+    const wrapper = mount(FieldFrame, {
+      props: { label: "Email", for: "email-input" },
+      slots: { default: '<input id="email-input" />' },
+    })
+    expect(
+      wrapper.find("[data-testid='field-frame-label']").attributes("for"),
+    ).toBe("email-input")
+  })
+
+  it("renders helpText when set", () => {
+    const wrapper = mount(FieldFrame, {
+      props: { helpText: "Help me" },
+      slots: { default: '<input />' },
+    })
+    expect(wrapper.find("[data-testid='field-frame-help']").text()).toBe(
+      "Help me",
+    )
+  })
+
+  it("renders an errors list with role=alert when errors is non-empty", () => {
+    const wrapper = mount(FieldFrame, {
+      props: { errors: ["First error", "Second error"] },
+      slots: { default: '<input />' },
+    })
+    const errs = wrapper.find("[data-testid='field-frame-errors']")
+    expect(errs.exists()).toBe(true)
+    expect(errs.attributes("role")).toBe("alert")
+    expect(errs.findAll("li")).toHaveLength(2)
+    expect(errs.text()).toContain("First error")
+    expect(errs.text()).toContain("Second error")
+  })
+
+  it("omits the errors list when errors is empty", () => {
+    const wrapper = mount(FieldFrame, {
+      props: { errors: [] },
+      slots: { default: '<input />' },
+    })
+    expect(wrapper.find("[data-testid='field-frame-errors']").exists()).toBe(
+      false,
+    )
+  })
+
+  it("merges a custom class with the default flex column classes", () => {
+    const wrapper = mount(FieldFrame, {
+      props: { class: "custom-class" },
+      slots: { default: '<input />' },
+    })
+    expect(wrapper.classes()).toContain("custom-class")
+    expect(wrapper.classes()).toContain("flex")
+    expect(wrapper.classes()).toContain("flex-col")
+  })
+
+  it("renders complex slot content like Vue components", () => {
+    const Inner = { template: '<div class="inner-test">Inner</div>' }
+    const wrapper = mount(FieldFrame, {
+      props: { label: "Wrapper" },
+      slots: { default: h(Inner) },
+    })
+    expect(wrapper.find(".inner-test").exists()).toBe(true)
+  })
+
+  it("supports a required asterisk via the Label primitive", () => {
+    const wrapper = mount(FieldFrame, {
+      props: { label: "Required field", required: true },
+      slots: { default: '<input />' },
+    })
+    // The Label primitive renders an `after:content-['*']` pseudo-element
+    // when required; assert the class is present on the rendered <label>.
+    const label = wrapper.find("[data-testid='field-frame-label']")
+    expect(label.html()).toContain("after:content-['*']")
+  })
+})

package/src/components/ui/field-frame/FieldFrame.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+/**
+ * Shared chrome around an input-bearing composition. Provides the
+ * label / required asterisk / helpText / error-list visuals so every
+ * input composition doesn't repeat the same boilerplate.
+ *
+ * Usage from a composition:
+ *
+ *   <FieldFrame
+ *     :label="label"
+ *     :required="required"
+ *     :help-text="helpText"
+ *     :errors="errors"
+ *     :for="id"
+ *   >
+ *     <Input v-model="model" ... />
+ *   </FieldFrame>
+ *
+ * FieldFrame is a normal Vue component — consumers can use it directly
+ * for ad-hoc inputs, not just via the JSON-driven engine.
+ */
+import type { HTMLAttributes } from "vue"
+import { Label } from "@/components/ui/label"
+import { cn } from "@/lib/utils"
+
+export interface FieldFrameProps {
+  /** Visible field label. Hidden when `hideLabel` is true. */
+  label?: string
+  /** Render a required asterisk after the label. */
+  required?: boolean
+  /** Hide the label visually while keeping it for screen readers. */
+  hideLabel?: boolean
+  /** `for` attribute on the Label — should match the inner input's id. */
+  for?: string
+  /** Help text rendered below the input. */
+  helpText?: string
+  /** Validation error messages. When non-empty the chrome flips to the destructive variant. */
+  errors?: string[]
+  /** Extra class applied to the wrapper. */
+  class?: HTMLAttributes["class"]
+}
+
+const props = withDefaults(defineProps<FieldFrameProps>(), {
+  errors: () => [],
+})
+</script>
+
+<template>
+  <div :class="cn('flex flex-col gap-1.5', props.class)" data-testid="field-frame">
+    <Label
+      v-if="label && !hideLabel"
+      :for="props.for"
+      :required="required"
+      data-testid="field-frame-label"
+    >
+      {{ label }}
+    </Label>
+    <span v-else-if="label" class="sr-only" data-testid="field-frame-label-sr">
+      {{ label }}
+    </span>
+
+    <slot />
+
+    <p
+      v-if="helpText"
+      class="text-sm text-muted-foreground"
+      data-testid="field-frame-help"
+    >
+      {{ helpText }}
+    </p>
+    <ul
+      v-if="errors.length"
+      class="flex flex-col gap-0.5 text-sm text-destructive"
+      role="alert"
+      data-testid="field-frame-errors"
+    >
+      <li v-for="(err, i) in errors" :key="i">{{ err }}</li>
+    </ul>
+  </div>
+</template>

package/src/components/ui/field-frame/index.ts

@@ -0,0 +1,2 @@
+export { default as FieldFrame } from "./FieldFrame.vue"
+export type { FieldFrameProps } from "./FieldFrame.vue"

package/src/components/ui/index.ts

@@ -0,0 +1,46 @@
+/**
+ * Barrel for every shadcn-vue primitive shipped by @gxp-dev/adminkit.
+ *
+ * Re-exports each primitive directory's `index.ts` so consumers can
+ * import everything from a single path:
+ *
+ *   import { Button, Input, Dialog, Toaster, toast } from "@gxp-dev/adminkit"
+ *
+ * Direct sub-path imports also work and are tree-shake-friendly:
+ *
+ *   import { Button } from "@gxp-dev/adminkit/components/ui/button"
+ *
+ * Each primitive's directory also exports its `cva` variants
+ * (e.g. `buttonVariants`) and `VariantProps` types for advanced
+ * composition.
+ */
+
+export * from "./accordion"
+export * from "./alert"
+export * from "./avatar"
+export * from "./badge"
+export * from "./button"
+export * from "./calendar"
+export * from "./card"
+export * from "./checkbox"
+export * from "./combobox"
+export * from "./command"
+export * from "./dialog"
+export * from "./dropdown-menu"
+export * from "./input"
+export * from "./label"
+export * from "./popover"
+export * from "./progress"
+export * from "./radio-group"
+export * from "./select"
+export * from "./separator"
+export * from "./sheet"
+export * from "./skeleton"
+export * from "./slider"
+export * from "./switch"
+export * from "./table"
+export * from "./tabs"
+export * from "./textarea"
+export * from "./toast"
+export * from "./toggle"
+export * from "./tooltip"

package/src/components/ui/input/Input.stories.ts

@@ -0,0 +1,144 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { Mail, Search } from "lucide-vue-next"
+import { Input } from "."
+import { Label } from "../label"
+
+const meta = {
+  title: "UI/Input",
+  component: Input,
+  tags: ["autodocs"],
+  argTypes: {
+    modelValue: { control: "text", description: "Bound value." },
+    defaultValue: { control: "text", description: "Initial uncontrolled value." },
+    class: { control: "text", description: "Extra Tailwind classes." },
+  },
+  args: { modelValue: "" },
+} satisfies Meta<typeof Input>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { Input },
+    setup() {
+      return { args }
+    },
+    template: '<Input v-bind="args" placeholder="Type something..." />',
+  }),
+}
+
+export const Types: Story = {
+  name: "Input Types",
+  render: () => ({
+    components: { Input },
+    template: `
+      <div class="grid max-w-sm gap-3">
+        <Input type="text" placeholder="text" />
+        <Input type="email" placeholder="email@example.com" />
+        <Input type="password" placeholder="password" />
+        <Input type="number" placeholder="0" />
+        <Input type="tel" placeholder="+1 555 555 5555" />
+        <Input type="url" placeholder="https://example.com" />
+        <Input type="search" placeholder="search..." />
+      </div>
+    `,
+  }),
+}
+
+export const States: Story = {
+  name: "States",
+  render: () => ({
+    components: { Input },
+    template: `
+      <div class="grid max-w-sm gap-3">
+        <Input placeholder="default" />
+        <Input placeholder="disabled" disabled />
+        <Input placeholder="readonly" readonly model-value="cannot edit" />
+        <Input placeholder="error" class="border-destructive ring-destructive" />
+      </div>
+    `,
+  }),
+}
+
+export const WithLabel: Story = {
+  name: "With Label",
+  render: () => ({
+    components: { Input, Label },
+    template: `
+      <div class="grid w-full max-w-sm items-center gap-1.5">
+        <Label for="email">Email</Label>
+        <Input id="email" type="email" placeholder="you@example.com" />
+      </div>
+    `,
+  }),
+}
+
+export const WithIconPrefix: Story = {
+  name: "With Icon (Prefix)",
+  render: () => ({
+    components: { Input, Search },
+    template: `
+      <div class="relative w-full max-w-sm">
+        <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+        <Input class="pl-9" placeholder="Search..." />
+      </div>
+    `,
+  }),
+}
+
+export const WithIconSuffix: Story = {
+  name: "With Icon (Suffix)",
+  render: () => ({
+    components: { Input, Mail },
+    template: `
+      <div class="relative w-full max-w-sm">
+        <Input class="pr-9" type="email" placeholder="you@example.com" />
+        <Mail class="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+      </div>
+    `,
+  }),
+}
+
+export const File: Story = {
+  name: "File Input",
+  render: () => ({
+    components: { Input, Label },
+    template: `
+      <div class="grid w-full max-w-sm items-center gap-1.5">
+        <Label for="picture">Picture</Label>
+        <Input id="picture" type="file" />
+      </div>
+    `,
+  }),
+}
+
+export const Showcase: Story = {
+  name: "Showcase",
+  render: () => ({
+    components: { Input, Label, Search, Mail },
+    template: `
+      <div class="grid max-w-md gap-6">
+        <section class="grid gap-1.5">
+          <Label for="sc-default">Default</Label>
+          <Input id="sc-default" placeholder="Type here..." />
+        </section>
+        <section class="grid gap-1.5">
+          <Label for="sc-disabled">Disabled</Label>
+          <Input id="sc-disabled" placeholder="No edits" disabled />
+        </section>
+        <section class="grid gap-1.5">
+          <Label for="sc-error">Error</Label>
+          <Input id="sc-error" placeholder="Invalid" class="border-destructive ring-destructive" />
+        </section>
+        <section class="grid gap-1.5">
+          <Label for="sc-search">Search</Label>
+          <div class="relative">
+            <Search class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <Input id="sc-search" class="pl-9" placeholder="Search..." />
+          </div>
+        </section>
+      </div>
+    `,
+  }),
+}