@mkbabb/glass-ui 0.2.0

package/src/components/ui/select/SelectSeparator.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectSeparator, type SelectSeparatorProps } from 'reka-ui'
+import { cn } from '../../../utils'
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+</template>

package/src/components/ui/select/SelectTrigger.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui'
+import { ChevronDown } from 'lucide-vue-next'
+import { cn } from '../../../utils'
+
+const props = withDefaults(
+  defineProps<SelectTriggerProps & {
+    class?: HTMLAttributes['class']
+    /** 'default' = glass bg; 'ghost' = transparent, no border/shadow */
+    variant?: 'default' | 'ghost'
+  }>(),
+  { variant: 'default' },
+)
+
+const delegatedProps = computed(() => {
+  const { class: _, variant: __, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+
+const variantClass = computed(() =>
+  props.variant === 'ghost'
+    ? 'bg-transparent border-none shadow-none'
+    : 'glass-subtle',
+)
+</script>
+
+<template>
+  <SelectTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      variantClass,
+      'flex h-10 w-full items-center justify-between rounded-full px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:shadow-[0_0_0_2px_color-mix(in_srgb,var(--ring)_40%,transparent)] disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 transition-all',
+      props.class,
+    )"
+  >
+    <slot />
+    <SelectIcon as-child>
+      <ChevronDown class="transition-transform duration-200 ease-[var(--ease-standard)] [&[data-state=open]]:rotate-180 h-4 w-4 shrink-0 opacity-50" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>

package/src/components/ui/select/SelectValue.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { SelectValue, type SelectValueProps } from 'reka-ui'
+
+const props = defineProps<SelectValueProps>()
+</script>
+
+<template>
+  <SelectValue v-bind="props">
+    <slot />
+  </SelectValue>
+</template>

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

@@ -0,0 +1,11 @@
+export { default as Select } from './Select.vue'
+export { default as SelectValue } from './SelectValue.vue'
+export { default as SelectTrigger } from './SelectTrigger.vue'
+export { default as SelectContent } from './SelectContent.vue'
+export { default as SelectGroup } from './SelectGroup.vue'
+export { default as SelectItem } from './SelectItem.vue'
+export { default as SelectItemText } from './SelectItemText.vue'
+export { default as SelectLabel } from './SelectLabel.vue'
+export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'

package/src/components/ui/separator/Separator.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { Separator, type SeparatorProps } from 'reka-ui'
+import { cn } from '../../../utils'
+
+const props = defineProps<
+  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }
+>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <Separator
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'shrink-0 bg-border relative',
+        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
+        props.class,
+      )
+    "
+  >
+    <span
+      v-if="props.label"
+      :class="cn('text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',
+                 props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',
+      )"
+    >{{ props.label }}</span>
+  </Separator>
+</template>

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

@@ -0,0 +1 @@
+export { default as Separator } from './Separator.vue'

package/src/components/ui/sheet/Sheet.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>

package/src/components/ui/sheet/SheetClose.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogClose, type DialogCloseProps } from 'reka-ui'
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>

package/src/components/ui/sheet/SheetContent.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  DialogClose,
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { X } from 'lucide-vue-next'
+import { type SheetVariants, sheetVariants } from '.'
+import { cn } from '../../../utils'
+
+interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes['class']
+  side?: SheetVariants['side']
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<SheetContentProps>()
+
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, side, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-overlay bg-black/50 [backdrop-filter:var(--glass-blur-subtle)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogContent
+      :class="cn(sheetVariants({ side }), props.class)"
+      v-bind="{ ...forwarded, ...$attrs }"
+    >
+      <slot />
+
+      <DialogClose
+        class="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus-visible:shadow-[0_0_0_2px_color-mix(in_srgb,var(--ring)_40%,transparent)] disabled:pointer-events-none data-[state=open]:bg-secondary"
+      >
+        <X class="w-4 h-4 text-muted-foreground" />
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>

package/src/components/ui/sheet/SheetDescription.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { DialogDescription, type DialogDescriptionProps } from 'reka-ui'
+import { cn } from '../../../utils'
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DialogDescription
+    :class="cn('text-sm text-muted-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogDescription>
+</template>

package/src/components/ui/sheet/SheetFooter.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../utils'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ui/sheet/SheetHeader.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../utils'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)
+    "
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ui/sheet/SheetTitle.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { DialogTitle, type DialogTitleProps } from 'reka-ui'
+import { cn } from '../../../utils'
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DialogTitle
+    :class="cn('text-lg font-semibold text-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogTitle>
+</template>

package/src/components/ui/sheet/SheetTrigger.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogTrigger, type DialogTriggerProps } from 'reka-ui'
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>

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

@@ -0,0 +1,31 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+export { default as Sheet } from './Sheet.vue'
+export { default as SheetTrigger } from './SheetTrigger.vue'
+export { default as SheetClose } from './SheetClose.vue'
+export { default as SheetContent } from './SheetContent.vue'
+export { default as SheetHeader } from './SheetHeader.vue'
+export { default as SheetTitle } from './SheetTitle.vue'
+export { default as SheetDescription } from './SheetDescription.vue'
+export { default as SheetFooter } from './SheetFooter.vue'
+
+export const sheetVariants = cva(
+  'fixed z-overlay gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+            'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right:
+            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+    },
+  },
+)
+
+export type SheetVariants = VariantProps<typeof sheetVariants>

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '../../../utils'
+
+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.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { SliderRootEmits, SliderRootProps } from 'reka-ui'
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '../../../utils'
+
+const props = defineProps<SliderRootProps & {
+  class?: HTMLAttributes['class']
+  /** 'standard' = glass track + circular thumb; 'spectrum' = tall track + bar thumb; 'timeline' = glass scrub track */
+  variant?: 'standard' | 'spectrum' | 'timeline'
+}>()
+const emits = defineEmits<SliderRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, variant: __, ...delegated } = props
+  // Timeline variant: contain thumb within track bounds by default
+  if (v.value === 'timeline' && !delegated.thumbAlignment) {
+    delegated.thumbAlignment = 'contain'
+  }
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const v = computed(() => props.variant ?? 'standard')
+</script>
+
+<template>
+  <SliderRoot
+    :class="cn(
+      'relative flex w-full touch-none select-none items-center',
+      props.class,
+    )"
+    v-bind="forwarded"
+  >
+    <SliderTrack
+      :class="cn(
+        'slider-track relative w-full grow overflow-hidden rounded-full',
+        v === 'spectrum' ? 'h-6 bg-secondary'
+          : v === 'timeline' ? 'h-6 bg-foreground/5 [backdrop-filter:var(--glass-blur-subtle)]'
+          : 'h-1.5 bg-muted/50',
+      )"
+    >
+      <SliderRange
+        :class="cn(
+          'absolute h-full',
+          v === 'spectrum' ? 'bg-transparent'
+            : v === 'timeline' ? 'bg-foreground/7 rounded-full'
+            : 'bg-foreground/25',
+        )"
+      />
+    </SliderTrack>
+    <SliderThumb
+      v-for="(_, key) in modelValue"
+      :key="key"
+      :class="cn(
+        'slider-thumb block transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
+        v === 'spectrum'
+          ? 'w-3 h-full rounded-full border-2 border-foreground/40 bg-transparent'
+          : v === 'timeline'
+            ? 'h-6 w-6 rounded-full bg-foreground/15 border-none shadow-none'
+            : 'h-3.5 w-3.5 rounded-full border-2 border-background bg-foreground shadow-sm',
+      )"
+    />
+  </SliderRoot>
+</template>

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

@@ -0,0 +1 @@
+export { default as Slider } from './Slider.vue'

package/src/components/ui/switch/Switch.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  SwitchRoot,
+  type SwitchRootEmits,
+  type SwitchRootProps,
+  SwitchThumb,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { cn } from '../../../utils'
+
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<SwitchRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SwitchRoot
+    v-bind="forwarded"
+    :class="cn(
+      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      props.class,
+    )"
+  >
+    <SwitchThumb
+      :class="cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0')"
+    />
+  </SwitchRoot>
+</template>

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

@@ -0,0 +1 @@
+export { default as Switch } from './Switch.vue'

package/src/components/ui/table/Table.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../../utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <div class="relative w-full overflow-auto">
+        <table :class="cn('w-full caption-bottom text-sm', props.class)">
+            <slot />
+        </table>
+    </div>
+</template>

package/src/components/ui/table/TableBody.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../../utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <tbody :class="cn('[&_tr:last-child]:border-0', props.class)">
+        <slot />
+    </tbody>
+</template>

package/src/components/ui/table/TableCaption.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../../utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <caption :class="cn('mt-4 text-sm text-muted-foreground', props.class)">
+        <slot />
+    </caption>
+</template>

package/src/components/ui/table/TableCell.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../../utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <td :class="cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', props.class)">
+        <slot />
+    </td>
+</template>

package/src/components/ui/table/TableEmpty.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from "vue";
+import TableRow from "./TableRow.vue";
+import TableCell from "./TableCell.vue";
+import { cn } from "../../../utils";
+
+const props = withDefaults(
+    defineProps<{
+        class?: HTMLAttributes["class"];
+        colspan?: number;
+    }>(),
+    {
+        colspan: 1,
+    },
+);
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+    return delegated;
+});
+</script>
+
+<template>
+    <TableRow>
+        <TableCell
+            :class="
+                cn(
+                    'p-4 whitespace-nowrap align-middle text-sm text-foreground',
+                    props.class,
+                )
+            "
+            v-bind="delegatedProps"
+        >
+            <div class="flex items-center justify-center py-10">
+                <slot />
+            </div>
+        </TableCell>
+    </TableRow>
+</template>

package/src/components/ui/table/TableFooter.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../../utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <tfoot
+        :class="cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)"
+    >
+        <slot />
+    </tfoot>
+</template>

package/src/components/ui/table/TableHead.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../../utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <th
+        :class="
+            cn(
+                'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </th>
+</template>

package/src/components/ui/table/TableHeader.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../../utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <thead :class="cn('[&_tr]:border-b', props.class)">
+        <slot />
+    </thead>
+</template>

package/src/components/ui/table/TableRow.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../../utils";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+    <tr
+        :class="
+            cn(
+                'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </tr>
+</template>

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

@@ -0,0 +1,9 @@
+export { default as Table } from "./Table.vue";
+export { default as TableBody } from "./TableBody.vue";
+export { default as TableCell } from "./TableCell.vue";
+export { default as TableHead } from "./TableHead.vue";
+export { default as TableHeader } from "./TableHeader.vue";
+export { default as TableFooter } from "./TableFooter.vue";
+export { default as TableRow } from "./TableRow.vue";
+export { default as TableCaption } from "./TableCaption.vue";
+export { default as TableEmpty } from "./TableEmpty.vue";