@mkbabb/glass-ui 0.2.0 → 2.0.0

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

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import {
-  DropdownMenuItemIndicator,
-  DropdownMenuRadioItem,
-  type DropdownMenuRadioItemEmits,
-  type DropdownMenuRadioItemProps,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { cn } from '../../../utils'
-
-const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
-
-const emits = defineEmits<DropdownMenuRadioItemEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <DropdownMenuRadioItem
-    v-bind="forwarded"
-    :class="cn(
-      'relative flex cursor-default select-none items-center rounded-lg py-1.5 pl-7 pr-2 text-sm outline-none transition-colors focus:bg-foreground/[0.06] 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>
-        <span class="inline-block w-2 h-2 rounded-full bg-current"></span>
-      </DropdownMenuItemIndicator>
-    </span>
-    <slot />
-  </DropdownMenuRadioItem>
-</template>

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

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

package/src/components/ui/dropdown-menu/DropdownMenuShortcut.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>
-  <span :class="cn('ml-auto text-xs tracking-widest opacity-60', props.class)">
-    <slot />
-  </span>
-</template>

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

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

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

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import {
-  DropdownMenuSubContent,
-  type DropdownMenuSubContentEmits,
-  type DropdownMenuSubContentProps,
-  useForwardPropsEmits,
-} from 'reka-ui'
-import { cn } from '../../../utils'
-
-const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<DropdownMenuSubContentEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <DropdownMenuSubContent
-    v-bind="forwarded"
-    :class="cn('dropdown-sub-content z-popover min-w-32 overflow-hidden rounded-xl border bg-popover glass-elevated [backdrop-filter:var(--glass-blur-elevated)] p-1 text-popover-foreground shadow-xl 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 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 />
-  </DropdownMenuSubContent>
-</template>
-
-<style scoped>
-.dropdown-sub-content {
-    font-family: var(--dropdown-menu-font, inherit);
-}
-</style>

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

@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import {
-  DropdownMenuSubTrigger,
-  type DropdownMenuSubTriggerProps,
-  useForwardProps,
-} from 'reka-ui'
-import { ChevronRight } from 'lucide-vue-next'
-import { cn } from '../../../utils'
-
-const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <DropdownMenuSubTrigger
-    v-bind="forwardedProps"
-    :class="cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
-      props.class,
-    )"
-  >
-    <slot />
-    <ChevronRight class="ml-auto h-4 w-4" />
-  </DropdownMenuSubTrigger>
-</template>

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

@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'reka-ui'
-
-const props = defineProps<DropdownMenuTriggerProps>()
-
-const forwardedProps = useForwardProps(props)
-</script>
-
-<template>
-  <DropdownMenuTrigger class="outline-none" v-bind="forwardedProps">
-    <slot />
-  </DropdownMenuTrigger>
-</template>

package/src/components/ui/dropdown-menu/index.ts

@@ -1,16 +0,0 @@
-export { DropdownMenuPortal } from 'reka-ui'
-
-export { default as DropdownMenu } from './DropdownMenu.vue'
-export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
-export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
-export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
-export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
-export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
-export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
-export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
-export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
-export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
-export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
-export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
-export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
-export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'

package/src/components/ui/hover-card/HoverCard.vue

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

package/src/components/ui/hover-card/HoverCardContent.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import {
-  HoverCardContent,
-  type HoverCardContentProps,
-  HoverCardPortal,
-  useForwardProps,
-} from 'reka-ui'
-import { cn } from '../../../utils'
-
-const props = withDefaults(
-  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),
-  {
-    sideOffset: 4,
-  },
-)
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <HoverCardPortal>
-    <HoverCardContent
-      v-bind="forwardedProps"
-      :class="
-        cn(
-          'z-popover w-64 rounded-xl border bg-popover glass-elevated [backdrop-filter:var(--glass-blur-elevated)] p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 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 />
-    </HoverCardContent>
-  </HoverCardPortal>
-</template>

package/src/components/ui/hover-card/HoverCardTrigger.vue

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

package/src/components/ui/hover-card/index.ts

@@ -1,3 +0,0 @@
-export { default as HoverCard } from './HoverCard.vue'
-export { default as HoverCardTrigger } from './HoverCardTrigger.vue'
-export { default as HoverCardContent } from './HoverCardContent.vue'

package/src/components/ui/index.ts

@@ -1,41 +0,0 @@
-export * from "./accordion";
-export * from "./alert";
-export * from "./avatar";
-export * from "./badge";
-export * from "./button";
-export * from "./card";
-export * from "./carousel";
-export * from "./checkbox";
-export * from "./collapsible";
-export * from "./combobox";
-export * from "./command";
-export * from "./context-menu";
-export * from "./data-table";
-export * from "./dialog";
-export * from "./drawer";
-export * from "./dropdown-menu";
-export * from "./hover-card";
-export * from "./input";
-export * from "./label";
-export * from "./multi-select";
-export * from "./notification";
-export * from "./number-field";
-export * from "./popover";
-export * from "./progress";
-export * from "./radio-group";
-export * from "./scroll-area";
-export * from "./scroll-pane";
-export * from "./select";
-export * from "./separator";
-export * from "./sheet";
-export * from "./skeleton";
-export * from "./slider";
-export * from "./switch";
-export * from "./table";
-export * from "./tabs";
-export * from "./tags-input";
-export * from "./textarea";
-export * from "./toast";
-export * from "./toggle";
-export * from "./toggle-group";
-export * from "./tooltip";

package/src/components/ui/input/Input.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { useVModel } from '@vueuse/core'
-import { cn } from '../../../utils'
-
-const props = defineProps<{
-  defaultValue?: string | number
-  modelValue?: string | number
-  class?: HTMLAttributes['class']
-}>()
-
-const emits = defineEmits<{
-  (e: 'update:modelValue', payload: string | number): void
-}>()
-
-const modelValue = useVModel(props, 'modelValue', emits, {
-  passive: true,
-  defaultValue: props.defaultValue,
-})
-</script>
-
-<template>
-  <input v-model="modelValue" :class="cn('input-pill text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium', props.class)">
-</template>

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

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

package/src/components/ui/label/Label.vue

@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { Label, type LabelProps } from 'reka-ui'
-import { cn } from '../../../utils'
-
-const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <Label
-    v-bind="delegatedProps"
-    :class="
-      cn(
-        'text-md font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </Label>
-</template>

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

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

package/src/components/ui/multi-select/MultiSelect.vue

@@ -1,141 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '../command'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '../popover'
-import { Button } from '../button'
-import { Badge } from '../badge'
-import { Check, ChevronDown, X } from 'lucide-vue-next'
-import { cn } from '../../../utils'
-
-export interface MultiSelectOption {
-  value: string
-  label: string
-  icon?: string
-}
-
-interface Props {
-  options: MultiSelectOption[]
-  modelValue: string[]
-  placeholder?: string
-  disabled?: boolean
-  maxDisplay?: number
-}
-
-interface Emits {
-  (e: 'update:modelValue', value: string[]): void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  placeholder: 'Select items...',
-  disabled: false,
-  maxDisplay: 3,
-})
-
-const emit = defineEmits<Emits>()
-
-const open = ref(false)
-
-const selectedOptions = computed(() =>
-  props.options.filter(option => props.modelValue.includes(option.value))
-)
-
-const displayText = computed(() => {
-  if (selectedOptions.value.length === 0) {
-    return props.placeholder
-  }
-
-  if (selectedOptions.value.length <= props.maxDisplay) {
-    return selectedOptions.value.map(option => option.label).join(', ')
-  }
-
-  return `${selectedOptions.value.slice(0, props.maxDisplay).map(option => option.label).join(', ')}... (+${selectedOptions.value.length - props.maxDisplay})`
-})
-
-function toggleOption(value: string) {
-  const newValue = props.modelValue.includes(value)
-    ? props.modelValue.filter(v => v !== value)
-    : [...props.modelValue, value]
-
-  emit('update:modelValue', newValue)
-}
-
-function removeOption(value: string) {
-  const newValue = props.modelValue.filter(v => v !== value)
-  emit('update:modelValue', newValue)
-}
-</script>
-
-<template>
-  <Popover v-model:open="open">
-    <PopoverTrigger as-child>
-      <Button
-        variant="outline"
-        role="combobox"
-        :aria-expanded="open"
-        :disabled="disabled"
-        class="w-full justify-between text-left font-normal"
-      >
-        <span class="truncate">{{ displayText }}</span>
-        <ChevronDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
-      </Button>
-    </PopoverTrigger>
-    <PopoverContent class="w-full p-0" align="start">
-      <Command>
-        <CommandInput placeholder="Search..." />
-        <CommandEmpty>No options found.</CommandEmpty>
-        <CommandList>
-          <CommandGroup>
-            <CommandItem
-              v-for="option in options"
-              :key="option.value"
-              :value="option.value"
-              @select="toggleOption(option.value)"
-              class="cursor-pointer"
-            >
-              <Check
-                :class="cn(
-                  'mr-2 h-4 w-4',
-                  modelValue.includes(option.value) ? 'opacity-100' : 'opacity-0'
-                )"
-              />
-              <span v-if="option.icon" class="mr-2" v-html="option.icon" />
-              {{ option.label }}
-            </CommandItem>
-          </CommandGroup>
-        </CommandList>
-      </Command>
-    </PopoverContent>
-  </Popover>
-
-  <!-- Selected items display (compact badges) -->
-  <div v-if="selectedOptions.length > 0" class="flex flex-wrap gap-1 mt-2">
-    <Badge
-      v-for="option in selectedOptions"
-      :key="option.value"
-      variant="secondary"
-      class="text-xs px-2 py-1"
-    >
-      <span v-if="option.icon" class="mr-1" v-html="option.icon" />
-      {{ option.label }}
-      <Button
-        variant="ghost"
-        size="sm"
-        class="ml-1 h-3 w-3 p-0 hover:bg-destructive hover:text-destructive-foreground"
-        @click.stop="removeOption(option.value)"
-      >
-        <X class="h-2 w-2" />
-      </Button>
-    </Badge>
-  </div>
-</template>

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

@@ -1,7 +0,0 @@
-export { default as MultiSelect } from './MultiSelect.vue'
-
-export interface MultiSelectOption {
-  value: string
-  label: string
-  icon?: string
-}

package/src/components/ui/notification/Notification.vue

@@ -1,85 +0,0 @@
-<template>
-  <TransitionGroup
-    name="notification"
-    tag="div"
-    class="fixed bottom-4 right-4 z-50 flex flex-col gap-2"
-  >
-    <div
-      v-for="notification in notifications"
-      :key="notification.id"
-      class="flex items-center gap-3 rounded-lg px-4 py-3 shadow-lg [backdrop-filter:var(--glass-blur-subtle)]"
-      :class="[
-        notificationClasses[notification.type],
-        'min-w-[300px] max-w-[500px]'
-      ]"
-    >
-      <component
-        :is="notificationIcons[notification.type]"
-        class="h-5 w-5 flex-shrink-0"
-      />
-      <p class="flex-1 text-sm font-medium">
-        {{ notification.message }}
-      </p>
-      <button
-        @click="$emit('remove', notification.id)"
-        class="rounded-md p-1 transition-colors hover:bg-white/10"
-      >
-        <X class="h-4 w-4" />
-      </button>
-    </div>
-  </TransitionGroup>
-</template>
-
-<script setup lang="ts">
-import { CheckCircle, XCircle, AlertCircle, Info, X } from 'lucide-vue-next'
-
-interface Notification {
-  id: string
-  type: 'success' | 'error' | 'info' | 'warning'
-  message: string
-  duration?: number
-}
-
-defineProps<{
-  notifications: Notification[]
-}>()
-
-defineEmits<{
-  remove: [id: string]
-}>()
-
-const notificationClasses = {
-  success: 'bg-green-500/90 text-white',
-  error: 'bg-red-500/90 text-white',
-  warning: 'bg-amber-500/90 text-white',
-  info: 'bg-blue-500/90 text-white',
-}
-
-const notificationIcons = {
-  success: CheckCircle,
-  error: XCircle,
-  warning: AlertCircle,
-  info: Info,
-}
-</script>
-
-<style scoped>
-.notification-enter-active,
-.notification-leave-active {
-  transition: all 0.3s ease;
-}
-
-.notification-enter-from {
-  transform: translateX(100%);
-  opacity: 0;
-}
-
-.notification-leave-to {
-  transform: translateX(100%);
-  opacity: 0;
-}
-
-.notification-move {
-  transition: transform 0.3s ease;
-}
-</style>

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

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

package/src/components/ui/number-field/NumberField.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'
-import { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'
-import { type HTMLAttributes, computed } from 'vue'
-import { cn } from '../../../utils'
-
-const props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<NumberFieldRootEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <NumberFieldRoot v-bind="forwarded" :class="cn('grid gap-1.5', props.class)">
-    <slot />
-  </NumberFieldRoot>
-</template>

package/src/components/ui/number-field/NumberFieldContent.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>
-  <div :class="cn('relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5', props.class)">
-    <slot />
-  </div>
-</template>