@mkbabb/glass-ui 0.3.0 → 2.1.0

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

@@ -1,17 +0,0 @@
-<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

@@ -1,45 +0,0 @@
-<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

@@ -1,11 +0,0 @@
-<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

@@ -1,11 +0,0 @@
-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

@@ -1,35 +0,0 @@
-<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

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

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

@@ -1,14 +0,0 @@
-<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

@@ -1,11 +0,0 @@
-<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

@@ -1,56 +0,0 @@
-<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

@@ -1,22 +0,0 @@
-<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

@@ -1,19 +0,0 @@
-<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

@@ -1,16 +0,0 @@
-<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

@@ -1,22 +0,0 @@
-<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

@@ -1,11 +0,0 @@
-<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

@@ -1,31 +0,0 @@
-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

@@ -1,14 +0,0 @@
-<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

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

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

@@ -1,67 +0,0 @@
-<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"
-      :aria-label="$attrs['aria-label'] as string ?? undefined"
-      :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

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

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

@@ -1,37 +0,0 @@
-<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

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

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

@@ -1,16 +0,0 @@
-<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

@@ -1,14 +0,0 @@
-<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

@@ -1,14 +0,0 @@
-<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

@@ -1,14 +0,0 @@
-<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

@@ -1,39 +0,0 @@
-<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

@@ -1,16 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-<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

@@ -1,14 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-<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

@@ -1,9 +0,0 @@
-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";