@mkbabb/glass-ui 0.2.0 → 2.0.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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