@mkbabb/glass-ui 0.3.0 → 2.1.0

package/src/components/ui/data-table/types.ts

@@ -1,48 +0,0 @@
-import type { Component } from "vue";
-
-export interface DataTableColumn<T = any> {
-    /** Unique key matching a property on the row object */
-    key: string;
-    /** Display label for the column header */
-    label: string;
-    /** Optional formatter for cell values */
-    formatter?: (value: any, row: T) => string;
-    /** Optional custom component to render in the cell. Receives `value` and `row` props. */
-    component?: Component;
-    /** Whether this column is sortable */
-    sortable?: boolean;
-    /** Text alignment */
-    align?: "left" | "center" | "right";
-    /** Additional CSS classes for the column cells */
-    class?: string;
-    /** Additional CSS classes for the header cell */
-    headerClass?: string;
-}
-
-export interface DataTableSort {
-    key: string;
-    direction: "asc" | "desc";
-}
-
-export interface DataTableProps<T = any> {
-    /** Column definitions */
-    columns: DataTableColumn<T>[];
-    /** Row data to display */
-    rows: T[];
-    /** Total number of rows across all pages (for pagination display) */
-    total: number;
-    /** Current page number (1-indexed) */
-    page: number;
-    /** Number of rows per page */
-    pageSize: number;
-    /** Whether data is currently loading */
-    isLoading?: boolean;
-    /** Unique key field on each row (defaults to "_id") */
-    rowKey?: string;
-    /** Current sort state */
-    sort?: DataTableSort;
-    /** When true, hides pagination and shows infinite scroll sentinel */
-    infinite?: boolean;
-    /** Whether more data is available (for infinite scroll mode) */
-    hasMore?: boolean;
-}

package/src/components/ui/dialog/Dialog.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/dialog/DialogClose.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/dialog/DialogContent.vue

@@ -1,61 +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 { cn } from '../../../utils'
-
-const props = withDefaults(
-  defineProps<DialogContentProps & {
-    class?: HTMLAttributes['class'];
-    /** Visual variant: "glass" (translucent blur, default) or "opaque" (solid background). */
-    variant?: 'glass' | 'opaque';
-  }>(),
-  { variant: 'glass' },
-)
-const emits = defineEmits<DialogContentEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, variant: _v, ...delegated } = props
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-
-// Center fade + zoom only — no slide animation.
-const baseClasses = 'fixed left-1/2 top-1/2 z-modal grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 p-6 shadow-xl duration-[var(--duration-normal)] 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'
-
-const variantClasses = computed(() =>
-  props.variant === 'opaque'
-    ? 'bg-background border sm:rounded-xl'
-    : 'glass-elevated rounded-xl'
-)
-</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
-      v-bind="forwarded"
-      :class="cn(baseClasses, variantClasses, props.class)"
-    >
-      <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-accent data-[state=open]:text-muted-foreground"
-      >
-        <X class="w-4 h-4" />
-        <span class="sr-only">Close</span>
-      </DialogClose>
-    </DialogContent>
-  </DialogPortal>
-</template>

package/src/components/ui/dialog/DialogDescription.vue

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

package/src/components/ui/dialog/DialogFooter.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/dialog/DialogHeader.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-1.5 text-center sm:text-left', props.class)"
-  >
-    <slot />
-  </div>
-</template>

package/src/components/ui/dialog/DialogScrollContent.vue

@@ -1,65 +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 { cn } from '../../../utils'
-
-const props = defineProps<DialogContentProps & {
-  class?: HTMLAttributes['class']
-  overlayClass?: HTMLAttributes['class']
-}>()
-const emits = defineEmits<DialogContentEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, overlayClass: __, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <DialogPortal>
-    <DialogOverlay
-      :class="cn(
-        'fixed inset-0 z-overlay grid place-items-center overflow-y-auto bg-black/40 [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',
-        props.overlayClass,
-      )"
-    >
-      <DialogContent
-        :class="
-          cn(
-            'relative z-overlay grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-2xl md:w-full',
-            props.class,
-          )
-        "
-        v-bind="forwarded"
-        @pointer-down-outside="(event) => {
-          const originalEvent = event.detail.originalEvent;
-          const target = originalEvent.target as HTMLElement;
-          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
-            event.preventDefault();
-          }
-        }"
-      >
-        <slot />
-
-        <DialogClose
-          class="absolute top-3 right-3 p-0.5 transition-colors rounded-full hover:bg-secondary focus-visible:outline-none focus-visible:shadow-[0_0_0_2px_color-mix(in_srgb,var(--ring)_30%,transparent),0_0_8px_color-mix(in_srgb,var(--ring)_15%,transparent)]"
-        >
-          <X class="w-4 h-4" />
-          <span class="sr-only">Close</span>
-        </DialogClose>
-      </DialogContent>
-    </DialogOverlay>
-  </DialogPortal>
-</template>

package/src/components/ui/dialog/DialogTitle.vue

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

package/src/components/ui/dialog/DialogTrigger.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/dialog/index.ts

@@ -1,9 +0,0 @@
-export { default as Dialog } from './Dialog.vue'
-export { default as DialogClose } from './DialogClose.vue'
-export { default as DialogTrigger } from './DialogTrigger.vue'
-export { default as DialogHeader } from './DialogHeader.vue'
-export { default as DialogTitle } from './DialogTitle.vue'
-export { default as DialogDescription } from './DialogDescription.vue'
-export { default as DialogContent } from './DialogContent.vue'
-export { default as DialogScrollContent } from './DialogScrollContent.vue'
-export { default as DialogFooter } from './DialogFooter.vue'

package/src/components/ui/drawer/Drawer.vue

@@ -1,19 +0,0 @@
-<script lang="ts" setup>
-import type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'
-import { DrawerRoot } from 'vaul-vue'
-import { useForwardPropsEmits } from 'reka-ui'
-
-const props = withDefaults(defineProps<DrawerRootProps>(), {
-  shouldScaleBackground: true,
-})
-
-const emits = defineEmits<DrawerRootEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <DrawerRoot v-bind="forwarded">
-    <slot />
-  </DrawerRoot>
-</template>

package/src/components/ui/drawer/DrawerContent.vue

@@ -1,28 +0,0 @@
-<script lang="ts" setup>
-import { DrawerContent, DrawerPortal } from 'vaul-vue'
-import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
-import { useForwardPropsEmits } from 'reka-ui'
-import type { HtmlHTMLAttributes } from 'vue'
-import DrawerOverlay from './DrawerOverlay.vue'
-import { cn } from '../../../utils'
-
-const props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()
-const emits = defineEmits<DialogContentEmits>()
-
-const forwarded = useForwardPropsEmits(props, emits)
-</script>
-
-<template>
-  <DrawerPortal>
-    <DrawerOverlay />
-    <DrawerContent
-      v-bind="forwarded" :class="cn(
-        'fixed inset-x-0 bottom-0 z-overlay mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
-        props.class,
-      )"
-    >
-      <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
-      <slot />
-    </DrawerContent>
-  </DrawerPortal>
-</template>

package/src/components/ui/drawer/DrawerDescription.vue

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

package/src/components/ui/drawer/DrawerFooter.vue

@@ -1,14 +0,0 @@
-<script lang="ts" setup>
-import type { HtmlHTMLAttributes } from 'vue'
-import { cn } from '../../../utils'
-
-const props = defineProps<{
-  class?: HtmlHTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <div :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)">
-    <slot />
-  </div>
-</template>

package/src/components/ui/drawer/DrawerHeader.vue

@@ -1,14 +0,0 @@
-<script lang="ts" setup>
-import type { HtmlHTMLAttributes } from 'vue'
-import { cn } from '../../../utils'
-
-const props = defineProps<{
-  class?: HtmlHTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <div :class="cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)">
-    <slot />
-  </div>
-</template>

package/src/components/ui/drawer/DrawerOverlay.vue

@@ -1,18 +0,0 @@
-<script lang="ts" setup>
-import { DrawerOverlay } from 'vaul-vue'
-import type { DialogOverlayProps } from 'reka-ui'
-import { type HtmlHTMLAttributes, computed } from 'vue'
-import { cn } from '../../../utils'
-
-const props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <DrawerOverlay v-bind="delegatedProps" :class="cn('fixed inset-0 z-overlay bg-black/80 [backdrop-filter:var(--glass-blur-subtle)]', props.class)" />
-</template>

package/src/components/ui/drawer/DrawerTitle.vue

@@ -1,20 +0,0 @@
-<script lang="ts" setup>
-import type { DrawerTitleProps } from 'vaul-vue'
-import { DrawerTitle } from 'vaul-vue'
-import { type HtmlHTMLAttributes, computed } from 'vue'
-import { cn } from '../../../utils'
-
-const props = defineProps<DrawerTitleProps & { class?: HtmlHTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <DrawerTitle v-bind="delegatedProps" :class="cn('text-lg font-semibold leading-none tracking-tight', props.class)">
-    <slot />
-  </DrawerTitle>
-</template>

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

@@ -1,8 +0,0 @@
-export { DrawerPortal, DrawerTrigger, DrawerClose } from 'vaul-vue'
-export { default as Drawer } from './Drawer.vue'
-export { default as DrawerOverlay } from './DrawerOverlay.vue'
-export { default as DrawerContent } from './DrawerContent.vue'
-export { default as DrawerHeader } from './DrawerHeader.vue'
-export { default as DrawerFooter } from './DrawerFooter.vue'
-export { default as DrawerTitle } from './DrawerTitle.vue'
-export { default as DrawerDescription } from './DrawerDescription.vue'

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

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

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

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import {
-  DropdownMenuCheckboxItem,
-  type DropdownMenuCheckboxItemEmits,
-  type DropdownMenuCheckboxItemProps,
-  DropdownMenuItemIndicator,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { Check } from 'lucide-vue-next'
-import { cn } from '../../../utils'
-
-const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <DropdownMenuCheckboxItem
-    v-bind="forwarded"
-    :class=" cn(
-      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      props.class,
-    )"
-  >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuItemIndicator>
-        <Check class="w-4 h-4" />
-      </DropdownMenuItemIndicator>
-    </span>
-    <slot />
-  </DropdownMenuCheckboxItem>
-</template>

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

@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import {
-  DropdownMenuContent,
-  type DropdownMenuContentEmits,
-  type DropdownMenuContentProps,
-  DropdownMenuPortal,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { cn } from '../../../utils'
-
-const props = withDefaults(
-  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
-  {
-    sideOffset: 4,
-  },
-)
-const emits = defineEmits<DropdownMenuContentEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <DropdownMenuPortal>
-    <DropdownMenuContent
-      v-bind="forwarded"
-      :class="cn('dropdown-menu-content z-popover min-w-32 max-h-[60vh] overflow-y-auto rounded-xl border glass-elevated [backdrop-filter:var(--glass-blur-elevated)] p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-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 />
-    </DropdownMenuContent>
-  </DropdownMenuPortal>
-</template>
-
-<style scoped>
-.dropdown-menu-content {
-    font-family: var(--dropdown-menu-font, inherit);
-}
-</style>

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

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

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

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui'
-import { cn } from '../../../utils'
-
-const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <DropdownMenuItem
-    v-bind="forwardedProps"
-    :class="cn(
-      'relative flex cursor-default select-none items-center rounded-lg px-2 py-1.5 outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      inset && 'pl-8',
-      props.class,
-    )"
-  >
-    <slot />
-  </DropdownMenuItem>
-</template>

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

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui'
-import { cn } from '../../../utils'
-
-const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <DropdownMenuLabel
-    v-bind="forwardedProps"
-    :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
-  >
-    <slot />
-  </DropdownMenuLabel>
-</template>

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

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