@mkbabb/glass-ui 0.2.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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