@mkbabb/glass-ui 0.2.0

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { NumberFieldDecrementProps } from 'reka-ui'
+import { NumberFieldDecrement, useForwardProps } from 'reka-ui'
+import { type HTMLAttributes, computed } from 'vue'
+import { Minus } from 'lucide-vue-next'
+import { cn } from '../../../utils'
+
+const props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NumberFieldDecrement data-slot="decrement" v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)">
+    <slot>
+      <Minus class="h-4 w-4" />
+    </slot>
+  </NumberFieldDecrement>
+</template>

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { NumberFieldIncrementProps } from 'reka-ui'
+import { NumberFieldIncrement, useForwardProps } from 'reka-ui'
+import { type HTMLAttributes, computed } from 'vue'
+import { Plus } from 'lucide-vue-next'
+import { cn } from '../../../utils'
+
+const props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NumberFieldIncrement data-slot="increment" v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)">
+    <slot>
+      <Plus class="h-4 w-4" />
+    </slot>
+  </NumberFieldIncrement>
+</template>

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

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { NumberFieldInput } from 'reka-ui'
+import { cn } from '../../../utils'
+</script>
+
+<template>
+  <NumberFieldInput data-slot="input" :class="cn('flex h-10 w-full rounded-md border border-input bg-background py-2 text-sm text-center ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50')" />
+</template>

package/src/components/ui/number-field/index.ts

@@ -0,0 +1,5 @@
+export { default as NumberField } from './NumberField.vue'
+export { default as NumberFieldInput } from './NumberFieldInput.vue'
+export { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'
+export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'
+export { default as NumberFieldContent } from './NumberFieldContent.vue'

package/src/components/ui/popover/Popover.vue

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

package/src/components/ui/popover/PopoverContent.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  PopoverContent,
+  type PopoverContentEmits,
+  type PopoverContentProps,
+  PopoverPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { cn } from '../../../utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: HTMLAttributes['class']; portal?: boolean }>(),
+  {
+    align: 'center',
+    sideOffset: 4,
+    portal: true,
+  },
+)
+const emits = defineEmits<PopoverContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, portal: __, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PopoverPortal v-if="portal">
+    <PopoverContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'z-popover w-72 rounded-xl border 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 />
+    </PopoverContent>
+  </PopoverPortal>
+  <PopoverContent
+    v-else
+    v-bind="{ ...forwarded, ...$attrs }"
+    :class="
+      cn(
+        'z-popover w-72 rounded-xl border 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 />
+  </PopoverContent>
+</template>

package/src/components/ui/popover/PopoverTrigger.vue

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

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

@@ -0,0 +1,3 @@
+export { default as Popover } from './Popover.vue'
+export { default as PopoverTrigger } from './PopoverTrigger.vue'
+export { default as PopoverContent } from './PopoverContent.vue'

package/src/components/ui/progress/Progress.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  ProgressIndicator,
+  ProgressRoot,
+  type ProgressRootProps,
+} from 'reka-ui'
+import { cn } from '../../../utils'
+
+const props = withDefaults(
+  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    modelValue: 0,
+  },
+)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ProgressRoot
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
+        props.class,
+      )
+    "
+  >
+    <ProgressIndicator
+      class="h-full w-full flex-1 bg-primary transition-all"
+      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
+    />
+  </ProgressRoot>
+</template>

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

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

package/src/components/ui/radio-group/RadioGroup.vue

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

package/src/components/ui/radio-group/RadioGroupItem.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  RadioGroupIndicator,
+  RadioGroupItem,
+  type RadioGroupItemProps,
+  useForwardProps,
+} from 'reka-ui'
+import { Circle } from 'lucide-vue-next'
+import { cn } from '../../../utils'
+
+const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RadioGroupItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <RadioGroupIndicator
+      class="flex items-center justify-center"
+    >
+      <Circle class="h-2.5 w-2.5 fill-current text-current" />
+    </RadioGroupIndicator>
+  </RadioGroupItem>
+</template>

package/src/components/ui/radio-group/index.ts

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

package/src/components/ui/scroll-area/ScrollArea.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+  type ScrollAreaRootProps,
+  ScrollAreaViewport,
+} from 'reka-ui'
+import ScrollBar from './ScrollBar.vue'
+import { cn } from '../../../utils'
+
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
+    <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollBar />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>

package/src/components/ui/scroll-area/ScrollBar.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'reka-ui'
+import { cn } from '../../../utils'
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
+  orientation: 'vertical',
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ScrollAreaScrollbar
+    v-bind="delegatedProps"
+    :class="
+      cn('flex touch-none select-none transition-colors',
+         orientation === 'vertical'
+           && 'h-full w-2.5 border-l border-l-transparent p-px',
+         orientation === 'horizontal'
+           && 'h-2.5 flex-col border-t border-t-transparent p-px',
+         props.class)"
+  >
+    <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaScrollbar>
+</template>

package/src/components/ui/scroll-area/index.ts

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

package/src/components/ui/scroll-pane/ScrollPane.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../../utils";
+import Card from "../card/Card.vue";
+
+const props = defineProps<{
+    class?: HTMLAttributes["class"];
+    /** Pass through to Card's plain prop */
+    plain?: boolean;
+}>();
+</script>
+
+<template>
+    <Card
+        :plain="plain"
+        :class="
+            cn(
+                'pane-scroll-fade overflow-y-auto overflow-x-hidden max-h-full min-w-0',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </Card>
+</template>

package/src/components/ui/scroll-pane/ScrollPaneHeader.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+defineProps<{
+    description?: string;
+}>();
+</script>
+
+<template>
+    <div class="pane-header sticky top-0 z-10 px-4 sm:px-6 pt-4 pb-2 [backdrop-filter:var(--glass-blur-default)] bg-card/80">
+        <h3 class="pane-header-title text-pane-title"><slot /></h3>
+        <div v-if="description" class="pane-header-desc-wrap">
+            <p class="text-pane-description">{{ description }}</p>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.pane-header {
+    animation: pane-header-shrink linear both;
+    animation-timeline: --pane-scroll;
+    animation-range: 0px 120px;
+}
+
+.pane-header-title {
+    animation: pane-title-shrink linear both;
+    animation-timeline: --pane-scroll;
+    animation-range: 0px 120px;
+}
+
+.pane-header-desc-wrap {
+    display: grid;
+    grid-template-rows: 1fr;
+    overflow: hidden;
+    margin-top: 0.125rem;
+    animation: pane-desc-shrink linear both;
+    animation-timeline: --pane-scroll;
+    animation-range: 0px 80px;
+}
+
+.pane-header-desc-wrap > p {
+    min-height: 0;
+}
+
+@keyframes pane-header-shrink {
+    from {
+        padding-top: 1rem;
+        padding-bottom: 0.5rem;
+    }
+    to {
+        padding-top: 0.5rem;
+        padding-bottom: 0.25rem;
+    }
+}
+
+@keyframes pane-title-shrink {
+    from {
+        font-size: var(--type-display-2, 3.33rem);
+    }
+    to {
+        font-size: var(--type-subheading, 1.272rem);
+    }
+}
+
+@keyframes pane-desc-shrink {
+    from {
+        grid-template-rows: 1fr;
+        opacity: 1;
+        margin-top: 0.125rem;
+    }
+    to {
+        grid-template-rows: 0fr;
+        opacity: 0;
+        margin-top: 0;
+    }
+}
+</style>

package/src/components/ui/scroll-pane/index.ts

@@ -0,0 +1,2 @@
+export { default as ScrollPane } from "./ScrollPane.vue";
+export { default as ScrollPaneHeader } from "./ScrollPaneHeader.vue";

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

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

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

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  SelectContent,
+  type SelectContentEmits,
+  type SelectContentProps,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { SelectScrollDownButton, SelectScrollUpButton } from '.'
+import { cn } from '../../../utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    position: 'popper',
+    align: 'center',
+    collisionPadding: 16,
+  },
+)
+const emits = defineEmits<SelectContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="cn(
+        'relative z-popover min-w-32 overflow-y-auto rounded-xl border text-popover-foreground shadow-md [max-height:var(--reka-popper-available-height,60dvh)] 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',
+        position === 'popper'
+          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        'glass-elevated',
+        props.class,
+      )
+      "
+    >
+      <SelectScrollUpButton />
+      <SelectViewport :class="cn('p-1 overflow-y-auto', position === 'popper' && 'h-[--reka-select-trigger-height] w-full min-w-[--reka-select-trigger-width]')">
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectGroup, type SelectGroupProps } from 'reka-ui'
+import { cn } from '../../../utils'
+
+const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="delegatedProps">
+    <slot />
+  </SelectGroup>
+</template>

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

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  SelectItem,
+  SelectItemIndicator,
+  type SelectItemProps,
+  SelectItemText,
+  useForwardProps,
+} from 'reka-ui'
+import { cn } from '../../../utils'
+
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class']; hideIndicator?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, hideIndicator: __, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'relative flex w-full cursor-default select-none items-center rounded-lg py-1.5 pr-2 outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        hideIndicator ? 'pl-2' : 'pl-7',
+        props.class,
+      )
+    "
+  >
+    <span v-if="!hideIndicator" class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectItemIndicator>
+        <span class="inline-block w-2 h-2 rounded-full" style="background-color: var(--select-dot-color, currentColor)"></span>
+      </SelectItemIndicator>
+    </span>
+
+    <div class="flex flex-col gap-0.5 min-w-0">
+      <SelectItemText>
+        <slot />
+      </SelectItemText>
+      <slot name="description" />
+    </div>
+  </SelectItem>
+</template>

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

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

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

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { SelectLabel, type SelectLabelProps } from 'reka-ui'
+import { cn } from '../../../utils'
+
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <SelectLabel :class="cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)">
+    <slot />
+  </SelectLabel>
+</template>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui'
+import { ChevronDown } from 'lucide-vue-next'
+import { cn } from '../../../utils'
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollDownButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronDown class="h-4 w-4" />
+    </slot>
+  </SelectScrollDownButton>
+</template>

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui'
+import { ChevronUp } from 'lucide-vue-next'
+import { cn } from '../../../utils'
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollUpButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronUp class="h-4 w-4" />
+    </slot>
+  </SelectScrollUpButton>
+</template>