@mkbabb/glass-ui 0.3.0 → 2.0.0

package/src/components/ui/tabs/Tabs.vue

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

package/src/components/ui/tabs/TabsContent.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TabsContent, type TabsContentProps } from 'reka-ui'
-import { cn } from '../../../utils'
-
-const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <TabsContent
-    :class="cn('mt-2 focus-visible:outline-none', props.class)"
-    v-bind="delegatedProps"
-  >
-    <slot />
-  </TabsContent>
-</template>

package/src/components/ui/tabs/TabsIndicator.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from "vue";
-import { TabsIndicator, type TabsIndicatorProps } from "reka-ui";
-import { cn } from "../../../utils";
-
-const props = defineProps<TabsIndicatorProps & { class?: HTMLAttributes["class"] }>();
-
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
-    return delegated;
-});
-</script>
-
-<template>
-    <TabsIndicator
-        v-bind="delegatedProps"
-        :class="cn(
-            'absolute left-0 h-[--reka-tabs-indicator-size] translate-x-[--reka-tabs-indicator-position] rounded-pill bg-secondary/80 transition-[width,transform] duration-[var(--duration-normal)] ease-[var(--spring-snappy)]',
-            props.class,
-        )"
-    />
-</template>

package/src/components/ui/tabs/TabsList.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TabsList, type TabsListProps } from 'reka-ui'
-import { cn } from '../../../utils'
-
-const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-</script>
-
-<template>
-  <TabsList
-    v-bind="delegatedProps"
-    :class="cn(
-      'inline-flex h-10 items-center justify-center rounded-md p-1 text-muted-foreground',
-      props.class,
-    )"
-  >
-    <slot />
-  </TabsList>
-</template>

package/src/components/ui/tabs/TabsTrigger.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from "vue";
-import { TabsTrigger, type TabsTriggerProps, useForwardProps } from "reka-ui";
-import { cn } from "../../../utils";
-
-const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes["class"] }>();
-
-const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props;
-
-    return delegated;
-});
-
-const forwardedProps = useForwardProps(delegatedProps);
-</script>
-
-<template>
-    <TabsTrigger
-        v-bind="forwardedProps"
-        :class="
-            cn(
-                'inline-flex items-center justify-center whitespace-nowrap rounded-sm p-1 px-3 text-sm font-medium transition-all duration-[var(--duration-fast)] ease-[var(--ease-standard)] 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)] disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-[var(--active-tab-color,var(--foreground))] hover:text-foreground/70',
-                props.class,
-            )
-        "
-    >
-        <slot />
-    </TabsTrigger>
-</template>

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

@@ -1,5 +0,0 @@
-export { default as Tabs } from './Tabs.vue'
-export { default as TabsTrigger } from './TabsTrigger.vue'
-export { default as TabsList } from './TabsList.vue'
-export { default as TabsContent } from './TabsContent.vue'
-export { default as TabsIndicator } from './TabsIndicator.vue'

package/src/components/ui/tags-input/TagsInput.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'reka-ui'
-import { cn } from '../../../utils'
-
-const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()
-const emits = defineEmits<TagsInputRootEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <TagsInputRoot v-bind="forwarded" :class="cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-2 text-sm', props.class)">
-    <slot />
-  </TagsInputRoot>
-</template>

package/src/components/ui/tags-input/TagsInputInput.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'reka-ui'
-import { cn } from '../../../utils'
-
-const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <TagsInputInput v-bind="forwardedProps" :class="cn('text-sm min-h-6 focus:outline-none flex-1 bg-transparent px-1', props.class)" />
-</template>

package/src/components/ui/tags-input/TagsInputItem.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'reka-ui'
-
-import { cn } from '../../../utils'
-
-const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <TagsInputItem v-bind="forwardedProps" :class="cn('flex h-6 items-center rounded bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)">
-    <slot />
-  </TagsInputItem>
-</template>

package/src/components/ui/tags-input/TagsInputItemDelete.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'reka-ui'
-import { X } from 'lucide-vue-next'
-import { cn } from '../../../utils'
-
-const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent mr-1', props.class)">
-    <slot>
-      <X class="w-4 h-4" />
-    </slot>
-  </TagsInputItemDelete>
-</template>

package/src/components/ui/tags-input/TagsInputItemText.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'reka-ui'
-import { cn } from '../../../utils'
-
-const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-
-  return delegated
-})
-
-const forwardedProps = useForwardProps(delegatedProps)
-</script>
-
-<template>
-  <TagsInputItemText v-bind="forwardedProps" :class="cn('py-1 px-2 text-sm rounded bg-transparent', props.class)" />
-</template>

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

@@ -1,5 +0,0 @@
-export { default as TagsInput } from './TagsInput.vue'
-export { default as TagsInputInput } from './TagsInputInput.vue'
-export { default as TagsInputItem } from './TagsInputItem.vue'
-export { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'
-export { default as TagsInputItemText } from './TagsInputItemText.vue'

package/src/components/ui/textarea/Textarea.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<{
-  class?: HTMLAttributes['class']
-  defaultValue?: string | number
-  modelValue?: string | number
-}>()
-
-const emits = defineEmits<{
-  (e: 'update:modelValue', payload: string | number): void
-}>()
-
-const modelValue = useVModel(props, 'modelValue', emits, {
-  passive: true,
-  defaultValue: props.defaultValue,
-})
-</script>
-
-<template>
-  <textarea v-model="modelValue" :class="cn('input-pill min-h-20 py-2 text-sm', props.class)" />
-</template>

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

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

package/src/components/ui/toast/Toast.vue

@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue'
-import {
-  ToastProvider,
-  ToastRoot,
-  ToastViewport,
-  type ToastRootEmits,
-  type ToastRootProps,
-} from 'reka-ui'
-import { cn } from '../../../utils'
-
-interface ToastProps extends ToastRootProps {
-  class?: HTMLAttributes['class']
-  variant?: 'default' | 'destructive'
-  onOpenChange?: ((value: boolean) => void) | undefined
-}
-
-interface ToastEmits extends ToastRootEmits {}
-
-const props = withDefaults(defineProps<ToastProps>(), {
-  variant: 'default',
-})
-
-const emits = defineEmits<ToastEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, variant, ...delegated } = props
-  return delegated
-})
-</script>
-
-<template>
-  <ToastProvider>
-    <ToastRoot
-      v-bind="delegatedProps"
-      :class="
-        cn(
-          'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-xl border p-6 pr-8 shadow-lg transition-[opacity,transform] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--reka-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
-          {
-            'bg-background text-foreground border': variant === 'default',
-            'bg-destructive text-destructive-foreground border-destructive': variant === 'destructive',
-          },
-          props.class,
-        )
-      "
-      @update:open="emits('update:open', $event)"
-      @escapeKeyDown="emits('escapeKeyDown', $event)"
-      @swipeStart="emits('swipeStart', $event)"
-      @swipeMove="emits('swipeMove', $event)"
-      @swipeEnd="emits('swipeEnd', $event)"
-      @swipeCancel="emits('swipeCancel', $event)"
-    >
-      <slot />
-    </ToastRoot>
-    <ToastViewport />
-  </ToastProvider>
-</template>

package/src/components/ui/toast/ToastAction.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue'
-import { ToastAction, type ToastActionProps } from 'reka-ui'
-import { cn } from '../../../utils'
-
-interface Props extends ToastActionProps {
-  class?: HTMLAttributes['class']
-}
-
-const props = defineProps<Props>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-  return delegated
-})
-</script>
-
-<template>
-  <ToastAction
-    v-bind="delegatedProps"
-    :class="
-      cn(
-        'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </ToastAction>
-</template>

package/src/components/ui/toast/ToastClose.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue'
-import { ToastClose, type ToastCloseProps } from 'reka-ui'
-import { X } from 'lucide-vue-next'
-import { cn } from '../../../utils'
-
-interface Props extends ToastCloseProps {
-  class?: HTMLAttributes['class']
-}
-
-const props = defineProps<Props>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-  return delegated
-})
-</script>
-
-<template>
-  <ToastClose
-    v-bind="delegatedProps"
-    :class="
-      cn(
-        'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
-        props.class,
-      )
-    "
-  >
-    <X class="h-4 w-4" />
-  </ToastClose>
-</template>

package/src/components/ui/toast/ToastDescription.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue'
-import { ToastDescription, type ToastDescriptionProps } from 'reka-ui'
-import { cn } from '../../../utils'
-
-interface Props extends ToastDescriptionProps {
-  class?: HTMLAttributes['class']
-}
-
-const props = defineProps<Props>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-  return delegated
-})
-</script>
-
-<template>
-  <ToastDescription
-    v-bind="delegatedProps"
-    :class="cn('text-sm opacity-90', props.class)"
-  >
-    <slot />
-  </ToastDescription>
-</template>

package/src/components/ui/toast/ToastTitle.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { computed, type HTMLAttributes } from 'vue'
-import { ToastTitle, type ToastTitleProps } from 'reka-ui'
-import { cn } from '../../../utils'
-
-interface Props extends ToastTitleProps {
-  class?: HTMLAttributes['class']
-}
-
-const props = defineProps<Props>()
-
-const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props
-  return delegated
-})
-</script>
-
-<template>
-  <ToastTitle
-    v-bind="delegatedProps"
-    :class="cn('text-sm font-semibold', props.class)"
-  >
-    <slot />
-  </ToastTitle>
-</template>

package/src/components/ui/toast/Toaster.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { ToastProvider, ToastViewport } from 'reka-ui'
-import Toast from './Toast.vue'
-import ToastClose from './ToastClose.vue'
-import ToastTitle from './ToastTitle.vue'
-import ToastDescription from './ToastDescription.vue'
-import { useToast } from './use-toast'
-
-const { toasts } = useToast()
-</script>
-
-<template>
-  <ToastProvider>
-    <Toast
-      v-for="toast in toasts"
-      :key="toast.id"
-      v-bind="toast"
-    >
-      <div class="grid gap-1">
-        <ToastTitle v-if="toast.title">
-          {{ toast.title }}
-        </ToastTitle>
-        <ToastDescription v-if="toast.description">
-          {{ toast.description }}
-        </ToastDescription>
-      </div>
-      <ToastClose />
-    </Toast>
-    <ToastViewport class="fixed top-0 z-50 flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]" />
-  </ToastProvider>
-</template>

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

@@ -1,8 +0,0 @@
-export { default as Toast } from './Toast.vue'
-export { default as ToastAction } from './ToastAction.vue'
-export { default as ToastClose } from './ToastClose.vue'
-export { default as ToastDescription } from './ToastDescription.vue'
-export { default as ToastTitle } from './ToastTitle.vue'
-export { default as Toaster } from './Toaster.vue'
-export { toast, useToast } from './use-toast'
-export type { Toast as ToastType, ToastVariant } from './use-toast'

package/src/components/ui/toast/use-toast.ts

@@ -1,136 +0,0 @@
-import { ref, computed } from 'vue'
-import type { Component, VNode } from 'vue'
-
-const TOAST_LIMIT = 5
-const TOAST_REMOVE_DELAY = 1000000
-
-export type ToastVariant = 'default' | 'destructive'
-
-export interface Toast {
-  id: string
-  title?: string
-  description?: string
-  action?: Component | VNode
-  variant?: ToastVariant
-}
-
-type ToasterToast = Toast & {
-  id: string
-  title?: string
-  description?: string
-  action?: Component | VNode
-}
-
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
-
-function addToRemoveQueue(toastId: string) {
-  if (toastTimeouts.has(toastId)) {
-    return
-  }
-
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId)
-    dispatch({
-      type: 'REMOVE_TOAST',
-      toastId,
-    })
-  }, TOAST_REMOVE_DELAY)
-
-  toastTimeouts.set(toastId, timeout)
-}
-
-const toasts = ref<ToasterToast[]>([])
-
-function dispatch(action: any) {
-  switch (action.type) {
-    case 'ADD_TOAST':
-      toasts.value = [action.toast, ...toasts.value].slice(0, TOAST_LIMIT)
-      break
-
-    case 'UPDATE_TOAST':
-      toasts.value = toasts.value.map((t) =>
-        t.id === action.toast.id ? { ...t, ...action.toast } : t
-      )
-      break
-
-    case 'DISMISS_TOAST': {
-      const { toastId } = action
-
-      if (toastId) {
-        addToRemoveQueue(toastId)
-      } else {
-        toasts.value.forEach((toast) => {
-          addToRemoveQueue(toast.id)
-        })
-      }
-
-      toasts.value = toasts.value.map((t) =>
-        t.id === toastId || toastId === undefined
-          ? {
-              ...t,
-              open: false,
-            }
-          : t
-      )
-      break
-    }
-
-    case 'REMOVE_TOAST':
-      if (action.toastId === undefined) {
-        toasts.value = []
-      } else {
-        toasts.value = toasts.value.filter((t) => t.id !== action.toastId)
-      }
-
-      break
-  }
-}
-
-let count = 0
-
-function genId() {
-  count = (count + 1) % Number.MAX_VALUE
-  return count.toString()
-}
-
-type ToastOptions = Omit<ToasterToast, 'id'>
-
-function toast(props: ToastOptions) {
-  const id = genId()
-
-  const update = (props: ToasterToast) =>
-    dispatch({
-      type: 'UPDATE_TOAST',
-      toast: { ...props, id },
-    })
-
-  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })
-
-  dispatch({
-    type: 'ADD_TOAST',
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open: boolean) => {
-        if (!open) dismiss()
-      },
-    },
-  })
-
-  return {
-    id,
-    dismiss,
-    update,
-  }
-}
-
-function useToast() {
-  return {
-    toasts: computed(() => toasts.value),
-    toast,
-    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
-  }
-}
-
-export { toast, useToast }

package/src/components/ui/toggle/Toggle.vue

@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'reka-ui'
-import { type ToggleVariants, toggleVariants } from '.'
-import { cn } from '../../../utils'
-
-const props = withDefaults(defineProps<ToggleProps & {
-  class?: HTMLAttributes['class']
-  variant?: ToggleVariants['variant']
-  size?: ToggleVariants['size']
-}>(), {
-  variant: 'default',
-  size: 'default',
-  disabled: false,
-})
-
-const emits = defineEmits<ToggleEmits>()
-
-const delegatedProps = computed(() => {
-  const { class: _, size, variant, ...delegated } = props
-
-  return delegated
-})
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
-</script>
-
-<template>
-  <Toggle
-    v-bind="forwarded"
-    :class="cn(toggleVariants({ variant, size }), props.class)"
-  >
-    <slot />
-  </Toggle>
-</template>