@mkbabb/glass-ui 0.2.0

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

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

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

@@ -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>
+  <span :class="cn('ml-auto text-xs tracking-widest opacity-60', props.class)">
+    <slot />
+  </span>
+</template>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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>
+  <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>