@gxp-dev/mod-ui 2.0.0

package/src/components/ui/progress/index.ts

@@ -0,0 +1,39 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Progress } from "./Progress.vue"
+
+export const progressVariants = cva(
+  "relative w-full overflow-hidden rounded-full bg-secondary",
+  {
+    variants: {
+      size: {
+        sm: "h-2",
+        default: "h-4",
+        lg: "h-6",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  },
+)
+
+export const progressIndicatorVariants = cva(
+  "h-full w-full flex-1 transition-all",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary",
+        success: "bg-success",
+        destructive: "bg-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export type ProgressVariants = VariantProps<typeof progressVariants>
+export type ProgressIndicatorVariants = VariantProps<typeof progressIndicatorVariants>

package/src/components/ui/radio-group/RadioGroup.stories.ts

@@ -0,0 +1,152 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { ref } from "vue"
+import { RadioGroup, RadioGroupItem } from "."
+import { Label } from "../label"
+
+const meta = {
+  title: "UI/RadioGroup",
+  component: RadioGroup,
+  tags: ["autodocs"],
+  argTypes: {
+    defaultValue: { control: "text" },
+    disabled: { control: "boolean" },
+    class: { control: "text" },
+  },
+  args: { defaultValue: "apple" },
+} satisfies Meta<typeof RadioGroup>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { RadioGroup, RadioGroupItem, Label },
+    setup() {
+      return { args }
+    },
+    template: `
+      <RadioGroup v-bind="args">
+        <div class="flex items-center gap-2">
+          <RadioGroupItem id="r-apple" value="apple" />
+          <Label for="r-apple">Apple</Label>
+        </div>
+        <div class="flex items-center gap-2">
+          <RadioGroupItem id="r-banana" value="banana" />
+          <Label for="r-banana">Banana</Label>
+        </div>
+        <div class="flex items-center gap-2">
+          <RadioGroupItem id="r-cherry" value="cherry" />
+          <Label for="r-cherry">Cherry</Label>
+        </div>
+      </RadioGroup>
+    `,
+  }),
+}
+
+export const Inline: Story = {
+  name: "Inline",
+  render: () => ({
+    components: { RadioGroup, RadioGroupItem, Label },
+    template: `
+      <RadioGroup default-value="small" class="flex flex-row gap-6">
+        <div class="flex items-center gap-2">
+          <RadioGroupItem id="s" value="small" />
+          <Label for="s">Small</Label>
+        </div>
+        <div class="flex items-center gap-2">
+          <RadioGroupItem id="m" value="medium" />
+          <Label for="m">Medium</Label>
+        </div>
+        <div class="flex items-center gap-2">
+          <RadioGroupItem id="l" value="large" />
+          <Label for="l">Large</Label>
+        </div>
+      </RadioGroup>
+    `,
+  }),
+}
+
+export const Disabled: Story = {
+  name: "Disabled",
+  render: () => ({
+    components: { RadioGroup, RadioGroupItem, Label },
+    template: `
+      <div class="grid gap-6">
+        <RadioGroup default-value="a" disabled>
+          <div class="flex items-center gap-2">
+            <RadioGroupItem id="d-a" value="a" />
+            <Label for="d-a">Disabled group A</Label>
+          </div>
+          <div class="flex items-center gap-2">
+            <RadioGroupItem id="d-b" value="b" />
+            <Label for="d-b">Disabled group B</Label>
+          </div>
+        </RadioGroup>
+        <RadioGroup default-value="x">
+          <div class="flex items-center gap-2">
+            <RadioGroupItem id="i-x" value="x" />
+            <Label for="i-x">Enabled X</Label>
+          </div>
+          <div class="flex items-center gap-2">
+            <RadioGroupItem id="i-y" value="y" disabled />
+            <Label for="i-y" class="opacity-60">Disabled Y</Label>
+          </div>
+        </RadioGroup>
+      </div>
+    `,
+  }),
+}
+
+export const Controlled: Story = {
+  name: "Controlled (v-model)",
+  render: () => ({
+    components: { RadioGroup, RadioGroupItem, Label },
+    setup() {
+      const value = ref("monthly")
+      return { value }
+    },
+    template: `
+      <div class="grid gap-3">
+        <RadioGroup v-model="value">
+          <div class="flex items-center gap-2">
+            <RadioGroupItem id="p-monthly" value="monthly" />
+            <Label for="p-monthly">Monthly</Label>
+          </div>
+          <div class="flex items-center gap-2">
+            <RadioGroupItem id="p-yearly" value="yearly" />
+            <Label for="p-yearly">Yearly</Label>
+          </div>
+        </RadioGroup>
+        <p class="text-xs text-muted-foreground">selected: {{ value }}</p>
+      </div>
+    `,
+  }),
+}
+
+export const Showcase: Story = {
+  name: "Showcase",
+  render: () => ({
+    components: { RadioGroup, RadioGroupItem, Label },
+    template: `
+      <div class="grid max-w-md gap-6">
+        <section class="grid gap-2">
+          <h3 class="text-sm font-semibold opacity-70">Notify me about</h3>
+          <RadioGroup default-value="all">
+            <div class="flex items-center gap-2">
+              <RadioGroupItem id="sc-all" value="all" />
+              <Label for="sc-all">All new messages</Label>
+            </div>
+            <div class="flex items-center gap-2">
+              <RadioGroupItem id="sc-mentions" value="mentions" />
+              <Label for="sc-mentions">Direct messages and mentions</Label>
+            </div>
+            <div class="flex items-center gap-2">
+              <RadioGroupItem id="sc-nothing" value="nothing" />
+              <Label for="sc-nothing">Nothing</Label>
+            </div>
+          </RadioGroup>
+        </section>
+      </div>
+    `,
+  }),
+}

package/src/components/ui/radio-group/RadioGroup.test.ts

@@ -0,0 +1,183 @@
+import { describe, it, expect } from "vitest"
+import { mount } from "@vue/test-utils"
+import { h } from "vue"
+import { RadioGroup, RadioGroupItem } from "."
+
+function mountGroup(props: Record<string, unknown> = {}) {
+  return mount(RadioGroup, {
+    props: { defaultValue: "apple", ...props },
+    slots: {
+      default: () => [
+        h(RadioGroupItem, { value: "apple" }),
+        h(RadioGroupItem, { value: "banana" }),
+        h(RadioGroupItem, { value: "cherry" }),
+      ],
+    },
+  })
+}
+
+describe("RadioGroup", () => {
+  describe("group rendering", () => {
+    it("mounts without error", () => {
+      const wrapper = mountGroup()
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it("renders role=radiogroup root", () => {
+      const wrapper = mountGroup()
+      expect(wrapper.find('[role="radiogroup"]').exists()).toBe(true)
+    })
+
+    it("renders all child items with role=radio", () => {
+      const wrapper = mountGroup()
+      expect(wrapper.findAll('[role="radio"]')).toHaveLength(3)
+    })
+
+    it("has base group classes", () => {
+      const wrapper = mountGroup()
+      const root = wrapper.find('[role="radiogroup"]')
+      expect(root.classes()).toContain("grid")
+      expect(root.classes()).toContain("gap-2")
+    })
+
+    it("accepts custom class on the group", () => {
+      const wrapper = mountGroup({ class: "flex-row inline-flex" })
+      const root = wrapper.find('[role="radiogroup"]')
+      expect(root.classes()).toContain("inline-flex")
+      expect(root.classes()).toContain("flex-row")
+    })
+  })
+
+  describe("default selection", () => {
+    it("marks the defaultValue item as checked", () => {
+      const wrapper = mountGroup()
+      const items = wrapper.findAll('[role="radio"]')
+      const checked = items.find((i) => i.attributes("data-state") === "checked")
+      expect(checked).toBeTruthy()
+      expect(checked?.attributes("value")).toBe("apple")
+    })
+
+    it("marks all other items as unchecked", () => {
+      const wrapper = mountGroup()
+      const items = wrapper.findAll('[role="radio"]')
+      const unchecked = items.filter((i) => i.attributes("data-state") === "unchecked")
+      expect(unchecked).toHaveLength(2)
+    })
+
+    it("renders all items unchecked when no defaultValue", () => {
+      const wrapper = mount(RadioGroup, {
+        slots: {
+          default: () => [
+            h(RadioGroupItem, { value: "a" }),
+            h(RadioGroupItem, { value: "b" }),
+          ],
+        },
+      })
+      const items = wrapper.findAll('[role="radio"]')
+      for (const item of items) {
+        expect(item.attributes("data-state")).toBe("unchecked")
+      }
+    })
+  })
+
+  describe("v-model / controlled", () => {
+    it("reflects controlled modelValue", () => {
+      const wrapper = mountGroup({ modelValue: "banana" })
+      const checked = wrapper
+        .findAll('[role="radio"]')
+        .find((i) => i.attributes("data-state") === "checked")
+      expect(checked?.attributes("value")).toBe("banana")
+    })
+
+    it("updates when modelValue prop changes", async () => {
+      const wrapper = mountGroup({ modelValue: "apple" })
+      await wrapper.setProps({ modelValue: "cherry" })
+      const checked = wrapper
+        .findAll('[role="radio"]')
+        .find((i) => i.attributes("data-state") === "checked")
+      expect(checked?.attributes("value")).toBe("cherry")
+    })
+
+    it("emits update:modelValue when an item is clicked", async () => {
+      const wrapper = mountGroup({ modelValue: "apple" })
+      const items = wrapper.findAll('[role="radio"]')
+      await items[1]!.trigger("click")
+      expect(wrapper.emitted("update:modelValue")).toBeTruthy()
+      expect(wrapper.emitted("update:modelValue")![0]).toEqual(["banana"])
+    })
+  })
+
+  describe("RadioGroupItem", () => {
+    it("has base item classes", () => {
+      const wrapper = mountGroup()
+      const item = wrapper.find('[role="radio"]')
+      const classes = item.classes()
+      for (const cls of [
+        "peer",
+        "aspect-square",
+        "h-4",
+        "w-4",
+        "rounded-full",
+        "border",
+        "border-primary",
+        "text-primary",
+      ]) {
+        expect(classes).toContain(cls)
+      }
+    })
+
+    it("has focus-visible classes on item", () => {
+      const wrapper = mountGroup()
+      const item = wrapper.find('[role="radio"]')
+      expect(item.classes()).toContain("focus-visible:ring-2")
+      expect(item.classes()).toContain("focus-visible:ring-ring")
+      expect(item.classes()).toContain("focus-visible:ring-offset-2")
+    })
+
+    it("has disabled classes on item", () => {
+      const wrapper = mountGroup()
+      const item = wrapper.find('[role="radio"]')
+      expect(item.classes()).toContain("disabled:cursor-not-allowed")
+      expect(item.classes()).toContain("disabled:opacity-50")
+    })
+
+    it("accepts custom class on item", () => {
+      const wrapper = mount(RadioGroup, {
+        props: { defaultValue: "x" },
+        slots: {
+          default: () => [
+            h(RadioGroupItem, { value: "x", class: "size-6 my-custom" }),
+          ],
+        },
+      })
+      const item = wrapper.find('[role="radio"]')
+      expect(item.classes()).toContain("my-custom")
+      expect(item.classes()).toContain("size-6")
+    })
+  })
+
+  describe("disabled state", () => {
+    it("forwards disabled on the group", () => {
+      const wrapper = mountGroup({ disabled: true })
+      const items = wrapper.findAll('[role="radio"]')
+      for (const item of items) {
+        expect(item.attributes("disabled")).toBe("")
+      }
+    })
+
+    it("forwards disabled on a single item", () => {
+      const wrapper = mount(RadioGroup, {
+        props: { defaultValue: "a" },
+        slots: {
+          default: () => [
+            h(RadioGroupItem, { value: "a" }),
+            h(RadioGroupItem, { value: "b", disabled: true }),
+          ],
+        },
+      })
+      const items = wrapper.findAll('[role="radio"]')
+      expect(items[0]!.attributes("disabled")).toBeUndefined()
+      expect(items[1]!.attributes("disabled")).toBe("")
+    })
+  })
+})

package/src/components/ui/radio-group/RadioGroup.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { RadioGroupRootEmits, RadioGroupRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { RadioGroupRoot, useForwardPropsEmits } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+export interface RadioGroupProps extends RadioGroupRootProps {
+  class?: HTMLAttributes["class"]
+}
+
+const props = defineProps<RadioGroupProps>()
+const emits = defineEmits<RadioGroupRootEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <RadioGroupRoot
+    v-bind="forwarded"
+    :class="cn('grid gap-2', props.class)"
+  >
+    <slot />
+  </RadioGroupRoot>
+</template>

package/src/components/ui/radio-group/RadioGroupItem.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { RadioGroupItemProps as RekaRadioGroupItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Circle } from "lucide-vue-next"
+import {
+  RadioGroupIndicator,
+  RadioGroupItem as RekaRadioGroupItem,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+export interface RadioGroupItemProps extends RekaRadioGroupItemProps {
+  class?: HTMLAttributes["class"]
+}
+
+const props = defineProps<RadioGroupItemProps>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RekaRadioGroupItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'peer aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <RadioGroupIndicator class="flex items-center justify-center">
+      <Circle class="h-2.5 w-2.5 fill-current text-current" />
+    </RadioGroupIndicator>
+  </RekaRadioGroupItem>
+</template>

package/src/components/ui/radio-group/index.ts

@@ -0,0 +1,2 @@
+export { default as RadioGroup } from "./RadioGroup.vue"
+export { default as RadioGroupItem } from "./RadioGroupItem.vue"

package/src/components/ui/select/Select.stories.ts

@@ -0,0 +1,220 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { ref } from "vue"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "."
+
+const meta = {
+  title: "UI/Select",
+  component: Select,
+  tags: ["autodocs"],
+  argTypes: {
+    disabled: { control: "boolean" },
+  },
+  args: { disabled: false },
+} satisfies Meta<typeof Select>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: {
+      Select,
+      SelectContent,
+      SelectGroup,
+      SelectItem,
+      SelectLabel,
+      SelectTrigger,
+      SelectValue,
+    },
+    setup() {
+      const value = ref<string>()
+      return { args, value }
+    },
+    template: `
+      <div class="w-72 space-y-2">
+        <Select v-bind="args" v-model="value">
+          <SelectTrigger>
+            <SelectValue placeholder="Pick a fruit" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>Fruits</SelectLabel>
+              <SelectItem value="apple">Apple</SelectItem>
+              <SelectItem value="banana">Banana</SelectItem>
+              <SelectItem value="cherry">Cherry</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <div class="text-xs text-muted-foreground">Value: {{ value ?? "(none)" }}</div>
+      </div>
+    `,
+  }),
+}
+
+export const Grouped: Story = {
+  render: () => ({
+    components: {
+      Select,
+      SelectContent,
+      SelectGroup,
+      SelectItem,
+      SelectLabel,
+      SelectSeparator,
+      SelectTrigger,
+      SelectValue,
+    },
+    setup() {
+      const value = ref<string>()
+      return { value }
+    },
+    template: `
+      <div class="w-72">
+        <Select v-model="value">
+          <SelectTrigger><SelectValue placeholder="Pick something" /></SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>Fruits</SelectLabel>
+              <SelectItem value="apple">Apple</SelectItem>
+              <SelectItem value="banana">Banana</SelectItem>
+            </SelectGroup>
+            <SelectSeparator />
+            <SelectGroup>
+              <SelectLabel>Veggies</SelectLabel>
+              <SelectItem value="carrot">Carrot</SelectItem>
+              <SelectItem value="celery">Celery</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </div>
+    `,
+  }),
+}
+
+export const WithLabel: Story = {
+  name: "With Label",
+  render: () => ({
+    components: {
+      Select,
+      SelectContent,
+      SelectItem,
+      SelectTrigger,
+      SelectValue,
+    },
+    setup() {
+      const value = ref<string>()
+      return { value }
+    },
+    template: `
+      <div class="w-72 space-y-2">
+        <label class="text-sm font-medium" for="role">Role</label>
+        <Select v-model="value">
+          <SelectTrigger id="role"><SelectValue placeholder="Choose a role" /></SelectTrigger>
+          <SelectContent>
+            <SelectItem value="admin">Admin</SelectItem>
+            <SelectItem value="editor">Editor</SelectItem>
+            <SelectItem value="viewer">Viewer</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+    `,
+  }),
+}
+
+export const States: Story = {
+  render: () => ({
+    components: {
+      Select,
+      SelectContent,
+      SelectItem,
+      SelectTrigger,
+      SelectValue,
+    },
+    template: `
+      <div class="grid grid-cols-2 gap-4 w-[480px]">
+        <div>
+          <div class="mb-1 text-xs uppercase opacity-60">Default</div>
+          <Select>
+            <SelectTrigger><SelectValue placeholder="Pick..." /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value="a">Option A</SelectItem>
+              <SelectItem value="b">Option B</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div>
+          <div class="mb-1 text-xs uppercase opacity-60">Disabled</div>
+          <Select disabled>
+            <SelectTrigger><SelectValue placeholder="Disabled" /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value="a">Option A</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+    `,
+  }),
+}
+
+export const Showcase: Story = {
+  name: "Showcase",
+  render: () => ({
+    components: {
+      Select,
+      SelectContent,
+      SelectGroup,
+      SelectItem,
+      SelectLabel,
+      SelectSeparator,
+      SelectTrigger,
+      SelectValue,
+    },
+    setup() {
+      const country = ref<string>()
+      const timezone = ref<string>()
+      return { country, timezone }
+    },
+    template: `
+      <div class="space-y-8 w-96">
+        <section>
+          <h3 class="mb-3 text-sm font-semibold opacity-70">Simple</h3>
+          <Select v-model="country">
+            <SelectTrigger><SelectValue placeholder="Country" /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value="us">United States</SelectItem>
+              <SelectItem value="uk">United Kingdom</SelectItem>
+              <SelectItem value="de">Germany</SelectItem>
+            </SelectContent>
+          </Select>
+        </section>
+        <section>
+          <h3 class="mb-3 text-sm font-semibold opacity-70">Grouped + separator</h3>
+          <Select v-model="timezone">
+            <SelectTrigger><SelectValue placeholder="Time zone" /></SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectLabel>Americas</SelectLabel>
+                <SelectItem value="est">EST (UTC -5)</SelectItem>
+                <SelectItem value="pst">PST (UTC -8)</SelectItem>
+              </SelectGroup>
+              <SelectSeparator />
+              <SelectGroup>
+                <SelectLabel>Europe</SelectLabel>
+                <SelectItem value="gmt">GMT (UTC +0)</SelectItem>
+                <SelectItem value="cet">CET (UTC +1)</SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </section>
+      </div>
+    `,
+  }),
+}