@gxp-dev/mod-ui 2.0.0

package/src/components/ui/skeleton/Skeleton.test.ts

@@ -0,0 +1,71 @@
+import { describe, it, expect } from "vitest"
+import { mount } from "@vue/test-utils"
+import { Skeleton } from "."
+
+describe("Skeleton", () => {
+  describe("default rendering", () => {
+    it("renders without errors", () => {
+      const wrapper = mount(Skeleton)
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it("renders as a div element", () => {
+      const wrapper = mount(Skeleton)
+      expect(wrapper.element.tagName).toBe("DIV")
+    })
+
+    it("has animate-pulse class", () => {
+      const wrapper = mount(Skeleton)
+      expect(wrapper.classes()).toContain("animate-pulse")
+    })
+
+    it("has rounded-md class", () => {
+      const wrapper = mount(Skeleton)
+      expect(wrapper.classes()).toContain("rounded-md")
+    })
+
+    it("has bg-muted class", () => {
+      const wrapper = mount(Skeleton)
+      expect(wrapper.classes()).toContain("bg-muted")
+    })
+  })
+
+  describe("base styles", () => {
+    it.each([
+      "animate-pulse",
+      "rounded-md",
+      "bg-muted",
+    ])("has %s class", (cls) => {
+      const wrapper = mount(Skeleton)
+      expect(wrapper.classes()).toContain(cls)
+    })
+  })
+
+  describe("custom class", () => {
+    it("merges custom class with default classes", () => {
+      const wrapper = mount(Skeleton, { props: { class: "h-4 w-32" } })
+      expect(wrapper.classes()).toContain("h-4")
+      expect(wrapper.classes()).toContain("w-32")
+      expect(wrapper.classes()).toContain("animate-pulse")
+    })
+
+    it("allows overriding rounded via custom class", () => {
+      const wrapper = mount(Skeleton, { props: { class: "rounded-full" } })
+      expect(wrapper.classes()).toContain("rounded-full")
+      expect(wrapper.classes()).not.toContain("rounded-md")
+    })
+
+    it("allows overriding bg-muted via custom class", () => {
+      const wrapper = mount(Skeleton, { props: { class: "bg-slate-200" } })
+      expect(wrapper.classes()).toContain("bg-slate-200")
+      expect(wrapper.classes()).not.toContain("bg-muted")
+    })
+
+    it("accepts arbitrary utility classes", () => {
+      const wrapper = mount(Skeleton, { props: { class: "h-10 w-10 my-2" } })
+      expect(wrapper.classes()).toContain("h-10")
+      expect(wrapper.classes()).toContain("w-10")
+      expect(wrapper.classes()).toContain("my-2")
+    })
+  })
+})

package/src/components/ui/skeleton/Skeleton.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+export interface SkeletonProps {
+  class?: HTMLAttributes["class"]
+}
+
+const props = defineProps<SkeletonProps>()
+</script>
+
+<template>
+  <div :class="cn('animate-pulse rounded-md bg-muted', props.class)" />
+</template>

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

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

package/src/components/ui/slider/Slider.stories.ts

@@ -0,0 +1,162 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import { ref } from "vue"
+import { Slider } from "."
+
+const meta = {
+  title: "UI/Slider",
+  component: Slider,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["sm", "default", "lg"],
+      description: "Visual size.",
+    },
+    orientation: {
+      control: "select",
+      options: ["horizontal", "vertical"],
+      description: "Layout direction.",
+    },
+    disabled: { control: "boolean" },
+    min: { control: "number" },
+    max: { control: "number" },
+    step: { control: "number" },
+  },
+  args: { size: "default", orientation: "horizontal", min: 0, max: 100, step: 1 },
+} satisfies Meta<typeof Slider>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { Slider },
+    setup() {
+      const value = ref([50])
+      return { args, value }
+    },
+    template: `
+      <div class="w-80 space-y-2">
+        <Slider v-bind="args" v-model="value" />
+        <div class="text-xs text-muted-foreground">Value: {{ value }}</div>
+      </div>
+    `,
+  }),
+}
+
+export const Range: Story = {
+  name: "Range (two thumbs)",
+  render: () => ({
+    components: { Slider },
+    setup() {
+      const value = ref([25, 75])
+      return { value }
+    },
+    template: `
+      <div class="w-80 space-y-2">
+        <Slider v-model="value" />
+        <div class="text-xs text-muted-foreground">Range: {{ value }}</div>
+      </div>
+    `,
+  }),
+}
+
+export const Steps: Story = {
+  name: "Steps",
+  render: () => ({
+    components: { Slider },
+    setup() {
+      const value = ref([40])
+      return { value }
+    },
+    template: `
+      <div class="w-80 space-y-2">
+        <Slider v-model="value" :step="10" :min="0" :max="100" />
+        <div class="text-xs text-muted-foreground">Step 10 — {{ value }}</div>
+      </div>
+    `,
+  }),
+}
+
+export const Disabled: Story = {
+  render: () => ({
+    components: { Slider },
+    setup() {
+      const value = ref([60])
+      return { value }
+    },
+    template: `
+      <div class="w-80">
+        <Slider v-model="value" disabled />
+      </div>
+    `,
+  }),
+}
+
+export const Vertical: Story = {
+  render: () => ({
+    components: { Slider },
+    setup() {
+      const value = ref([40])
+      return { value }
+    },
+    template: `
+      <div class="flex h-48 items-start gap-6">
+        <Slider v-model="value" orientation="vertical" />
+        <div class="text-xs text-muted-foreground">{{ value }}</div>
+      </div>
+    `,
+  }),
+}
+
+export const Sizes: Story = {
+  render: () => ({
+    components: { Slider },
+    setup() {
+      const a = ref([30])
+      const b = ref([50])
+      const c = ref([70])
+      return { a, b, c }
+    },
+    template: `
+      <div class="w-80 space-y-6">
+        <Slider v-model="a" size="sm" />
+        <Slider v-model="b" size="default" />
+        <Slider v-model="c" size="lg" />
+      </div>
+    `,
+  }),
+}
+
+export const Showcase: Story = {
+  name: "Showcase",
+  render: () => ({
+    components: { Slider },
+    setup() {
+      const single = ref([50])
+      const range = ref([20, 80])
+      const stepped = ref([60])
+      return { single, range, stepped }
+    },
+    template: `
+      <div class="space-y-8 w-96">
+        <section>
+          <h3 class="mb-3 text-sm font-semibold opacity-70">Single value</h3>
+          <Slider v-model="single" />
+        </section>
+        <section>
+          <h3 class="mb-3 text-sm font-semibold opacity-70">Range (two thumbs)</h3>
+          <Slider v-model="range" />
+        </section>
+        <section>
+          <h3 class="mb-3 text-sm font-semibold opacity-70">Stepped (10)</h3>
+          <Slider v-model="stepped" :step="10" />
+        </section>
+        <section>
+          <h3 class="mb-3 text-sm font-semibold opacity-70">Disabled</h3>
+          <Slider :model-value="[40]" disabled />
+        </section>
+      </div>
+    `,
+  }),
+}

package/src/components/ui/slider/Slider.test.ts

@@ -0,0 +1,168 @@
+import { describe, it, expect, beforeAll } from "vitest"
+import { mount } from "@vue/test-utils"
+import { Slider } from "."
+
+beforeAll(() => {
+  // jsdom doesn't implement ResizeObserver; reka-ui slider depends on it.
+  if (typeof global.ResizeObserver === "undefined") {
+    global.ResizeObserver = class {
+      observe(): void {}
+      unobserve(): void {}
+      disconnect(): void {}
+    } as unknown as typeof ResizeObserver
+  }
+})
+
+describe("Slider", () => {
+  describe("default rendering", () => {
+    it("renders without errors", () => {
+      const wrapper = mount(Slider, { props: { modelValue: [50] } })
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it("renders a thumb with role=slider", () => {
+      const wrapper = mount(Slider, { props: { modelValue: [50] } })
+      expect(wrapper.find('[role="slider"]').exists()).toBe(true)
+    })
+
+    it("renders one thumb for a single-value model", () => {
+      const wrapper = mount(Slider, { props: { modelValue: [50] } })
+      expect(wrapper.findAll('[role="slider"]').length).toBe(1)
+    })
+
+    it("renders two thumbs for a range value", () => {
+      const wrapper = mount(Slider, { props: { modelValue: [25, 75] } })
+      expect(wrapper.findAll('[role="slider"]').length).toBe(2)
+    })
+
+    it("renders one thumb when modelValue is a single number", () => {
+      const wrapper = mount(Slider, { props: { modelValue: 30 } })
+      expect(wrapper.findAll('[role="slider"]').length).toBe(1)
+    })
+  })
+
+  describe("sizes", () => {
+    it.each([
+      ["sm", ["h-4", "w-4"]],
+      ["default", ["h-5", "w-5"]],
+      ["lg", ["h-6", "w-6"]],
+    ] as const)("renders %s thumb with expected classes", (size, expected) => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: [50], size },
+      })
+      const thumb = wrapper.find('[role="slider"]')
+      for (const cls of expected) {
+        expect(thumb.classes()).toContain(cls)
+      }
+    })
+  })
+
+  describe("orientation", () => {
+    it("defaults to horizontal", () => {
+      const wrapper = mount(Slider, { props: { modelValue: [50] } })
+      expect(wrapper.attributes("data-orientation")).toBe("horizontal")
+    })
+
+    it("supports vertical orientation", () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: [50], orientation: "vertical" },
+      })
+      expect(wrapper.attributes("data-orientation")).toBe("vertical")
+    })
+  })
+
+  describe("range", () => {
+    it("respects min and max bounds", () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: [50], min: 0, max: 100 },
+      })
+      const thumb = wrapper.find('[role="slider"]')
+      expect(thumb.attributes("aria-valuemin")).toBe("0")
+      expect(thumb.attributes("aria-valuemax")).toBe("100")
+    })
+
+    it("renders a thumb element when value is provided", () => {
+      const wrapper = mount(Slider, { props: { modelValue: [42] } })
+      const thumb = wrapper.find('[role="slider"]')
+      expect(thumb.exists()).toBe(true)
+    })
+  })
+
+  describe("disabled", () => {
+    it("has data-disabled on root when disabled", () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: [50], disabled: true },
+      })
+      expect(wrapper.attributes("data-disabled")).toBeDefined()
+    })
+
+    it("does not have data-disabled when enabled", () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: [50], disabled: false },
+      })
+      expect(wrapper.attributes("data-disabled")).toBeUndefined()
+    })
+  })
+
+  describe("base styles", () => {
+    it("has base layout classes on root", () => {
+      const wrapper = mount(Slider, { props: { modelValue: [50] } })
+      const classes = wrapper.classes()
+      for (const cls of [
+        "relative",
+        "flex",
+        "touch-none",
+        "select-none",
+        "items-center",
+      ]) {
+        expect(classes).toContain(cls)
+      }
+    })
+
+    it("renders a track child element", () => {
+      const wrapper = mount(Slider, { props: { modelValue: [50] } })
+      const track = wrapper.element.querySelector(":scope > span[data-orientation]")
+      expect(track).toBeTruthy()
+      expect(track?.className).toContain("rounded-full")
+      expect(track?.className).toContain("bg-secondary")
+    })
+
+    it("renders a range element inside the track", () => {
+      const wrapper = mount(Slider, { props: { modelValue: [50] } })
+      const track = wrapper.element.querySelector(":scope > span[data-orientation]")
+      const range = track?.querySelector(":scope > span")
+      expect(range).toBeTruthy()
+      expect(range?.className).toContain("absolute")
+      expect(range?.className).toContain("bg-primary")
+    })
+
+    it("thumb has focus-visible ring classes", () => {
+      const wrapper = mount(Slider, { props: { modelValue: [50] } })
+      const thumb = wrapper.find('[role="slider"]')
+      expect(thumb.classes()).toContain("focus-visible:outline-none")
+      expect(thumb.classes()).toContain("focus-visible:ring-2")
+      expect(thumb.classes()).toContain("focus-visible:ring-ring")
+    })
+  })
+
+  describe("custom class", () => {
+    it("merges custom class with base classes", () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: [50], class: "my-slider" },
+      })
+      expect(wrapper.classes()).toContain("my-slider")
+      expect(wrapper.classes()).toContain("relative")
+      expect(wrapper.classes()).toContain("flex")
+    })
+  })
+
+  describe("step", () => {
+    it("accepts a step value", () => {
+      const wrapper = mount(Slider, {
+        props: { modelValue: [50], step: 10, min: 0, max: 100 },
+      })
+      // The thumb should exist; step shapes interaction but not DOM directly.
+      expect(wrapper.find('[role="slider"]').exists()).toBe(true)
+    })
+  })
+})

package/src/components/ui/slider/Slider.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import type { SliderRootEmits, SliderRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { SliderVariants } from "."
+import { computed } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  SliderRange,
+  SliderRoot,
+  SliderThumb,
+  SliderTrack,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import { sliderThumbVariants, sliderTrackVariants, sliderVariants } from "."
+
+export interface SliderProps extends /* @vue-ignore */ Omit<SliderRootProps, "modelValue" | "orientation"> {
+  /** Size variant: sm, default, lg. */
+  size?: SliderVariants["size"]
+  /** Layout direction. Horizontal by default. */
+  orientation?: SliderVariants["orientation"]
+  /** Minimum value. */
+  min?: number
+  /** Maximum value. */
+  max?: number
+  /** Step increment. */
+  step?: number
+  /** Disable interaction. */
+  disabled?: boolean
+  /** Inverts the direction the thumb travels. */
+  inverted?: boolean
+  /** Minimum distance between thumbs in a range slider. */
+  minStepsBetweenThumbs?: number
+  /** Additional classes merged via tailwind-merge. */
+  class?: HTMLAttributes["class"]
+}
+
+const props = withDefaults(defineProps<SliderProps>(), {
+  size: "default",
+  orientation: "horizontal",
+})
+
+const emits = defineEmits<SliderRootEmits>()
+
+const modelValue = defineModel<number[] | number>("modelValue")
+
+const delegatedProps = reactiveOmit(
+  props,
+  "class",
+  "size",
+  "orientation",
+  "modelValue" as never,
+)
+
+const orientation = computed<"horizontal" | "vertical">(() =>
+  props.orientation === "vertical" ? "vertical" : "horizontal",
+)
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const normalizedValue = computed<number[] | undefined>({
+  get() {
+    const val = modelValue.value
+    if (val === undefined || val === null) {
+      return undefined
+    }
+    return Array.isArray(val) ? val : [val]
+  },
+  set(next) {
+    if (next === undefined) {
+      modelValue.value = next
+      return
+    }
+    // Preserve the consumer's original shape (single number vs array).
+    if (typeof modelValue.value === "number" && next.length === 1) {
+      modelValue.value = next[0] as number
+    }
+    else {
+      modelValue.value = next
+    }
+  },
+})
+
+const thumbValues = computed<readonly unknown[]>(() => {
+  const val = normalizedValue.value
+  if (!val || val.length === 0) {
+    return [0]
+  }
+  return val
+})
+</script>
+
+<template>
+  <SliderRoot
+    v-model="normalizedValue"
+    v-bind="forwarded"
+    :orientation="orientation"
+    :class="cn(sliderVariants({ size, orientation }), props.class)"
+  >
+    <SliderTrack :class="sliderTrackVariants({ size })">
+      <SliderRange
+        class="absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+      />
+    </SliderTrack>
+    <SliderThumb
+      v-for="(_, key) in thumbValues"
+      :key="key"
+      :class="sliderThumbVariants({ size })"
+    />
+  </SliderRoot>
+</template>

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

@@ -0,0 +1,59 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Slider } from "./Slider.vue"
+
+export const sliderVariants = cva(
+  "relative flex touch-none select-none items-center data-[orientation=vertical]:flex-col",
+  {
+    variants: {
+      size: {
+        sm: "data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full",
+        default: "data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full",
+        lg: "data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full",
+      },
+      orientation: {
+        horizontal: "w-full",
+        vertical: "h-full flex-col w-fit",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+      orientation: "horizontal",
+    },
+  },
+)
+
+export const sliderTrackVariants = cva(
+  "relative grow overflow-hidden rounded-full bg-secondary",
+  {
+    variants: {
+      size: {
+        sm: "data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5",
+        default: "data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2",
+        lg: "data-[orientation=horizontal]:h-3 data-[orientation=vertical]:w-3",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  },
+)
+
+export const sliderThumbVariants = cva(
+  "block rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-4",
+        default: "h-5 w-5",
+        lg: "h-6 w-6",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  },
+)
+
+export type SliderVariants = VariantProps<typeof sliderVariants>