@mkbabb/glass-ui 0.2.0 → 2.0.0

package/src/components/ui/alert/Alert.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../utils'
-import { type AlertVariants, alertVariants } from '.'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-  variant?: AlertVariants['variant']
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="alert"
-    :class="cn(alertVariants({ variant }), props.class)"
-    role="alert"
-  >
-    <slot />
-  </div>
-</template>

package/src/components/ui/alert/AlertDescription.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="alert-description"
-    :class="cn('text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', props.class)"
-  >
-    <slot />
-  </div>
-</template>

package/src/components/ui/alert/AlertTitle.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <div
-    data-slot="alert-title"
-    :class="cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', props.class)"
-  >
-    <slot />
-  </div>
-</template>

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

@@ -1,23 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority'
-
-export { default as Alert } from './Alert.vue'
-export { default as AlertDescription } from './AlertDescription.vue'
-export { default as AlertTitle } from './AlertTitle.vue'
-
-export const alertVariants = cva(
-  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
-  {
-    variants: {
-      variant: {
-        default: 'bg-card text-card-foreground',
-        destructive:
-          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-)
-
-export type AlertVariants = VariantProps<typeof alertVariants>

package/src/components/ui/avatar/Avatar.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { AvatarRoot } from 'reka-ui'
-import { type AvatarVariants, avatarVariant } from '.'
-import { cn } from '../../../utils'
-
-const props = withDefaults(defineProps<{
-  class?: HTMLAttributes['class']
-  size?: AvatarVariants['size']
-  shape?: AvatarVariants['shape']
-}>(), {
-  size: 'sm',
-  shape: 'circle',
-})
-</script>
-
-<template>
-  <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
-    <slot />
-  </AvatarRoot>
-</template>

package/src/components/ui/avatar/AvatarFallback.vue

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

package/src/components/ui/avatar/AvatarImage.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import { AvatarImage, type AvatarImageProps } from 'reka-ui'
-
-const props = defineProps<AvatarImageProps>()
-</script>
-
-<template>
-  <AvatarImage v-bind="props" class="h-full w-full object-cover" />
-</template>

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

@@ -1,24 +0,0 @@
-import { type VariantProps, cva } from 'class-variance-authority'
-
-export { default as Avatar } from './Avatar.vue'
-export { default as AvatarImage } from './AvatarImage.vue'
-export { default as AvatarFallback } from './AvatarFallback.vue'
-
-export const avatarVariant = cva(
-  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
-  {
-    variants: {
-      size: {
-        sm: 'h-10 w-10 text-xs',
-        base: 'h-16 w-16 text-2xl',
-        lg: 'h-32 w-32 text-5xl',
-      },
-      shape: {
-        circle: 'rounded-full',
-        square: 'rounded-md',
-      },
-    },
-  },
-)
-
-export type AvatarVariants = VariantProps<typeof avatarVariant>

package/src/components/ui/badge/Badge.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { type BadgeVariants, badgeVariants } from '.'
-import { cn } from '../../../utils'
-
-const props = defineProps<{
-  variant?: BadgeVariants['variant']
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <div :class="cn(badgeVariants({ variant }), props.class)">
-    <slot />
-  </div>
-</template>

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

@@ -1,25 +0,0 @@
-import { type VariantProps, cva } from 'class-variance-authority'
-
-export { default as Badge } from './Badge.vue'
-
-export const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus-visible:shadow-[0_0_0_2px_color-mix(in_srgb,var(--ring)_40%,transparent)]',
-  {
-    variants: {
-      variant: {
-        default:
-          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
-        secondary:
-          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        destructive:
-          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
-        outline: 'text-foreground',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-)
-
-export type BadgeVariants = VariantProps<typeof badgeVariants>

package/src/components/ui/button/Button.vue

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { Primitive, type PrimitiveProps } from 'reka-ui'
-import { type ButtonVariants, buttonVariants } from '.'
-import { cn } from '../../../utils'
-
-interface Props extends PrimitiveProps {
-  variant?: ButtonVariants['variant']
-  size?: ButtonVariants['size']
-  class?: HTMLAttributes['class']
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  as: 'button',
-})
-</script>
-
-<template>
-  <Primitive
-    :as="as"
-    :as-child="asChild"
-    :class="cn(buttonVariants({ variant, size }), props.class)"
-  >
-    <slot />
-  </Primitive>
-</template>

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

@@ -1,43 +0,0 @@
-import { type VariantProps, cva } from 'class-variance-authority'
-
-export { default as Button } from './Button.vue'
-
-export const buttonVariants = cva(
-  // Base: compose with btn-pill from glass.css
-  'btn-pill whitespace-nowrap text-sm font-medium 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',
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive:
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline:
-          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-        secondary:
-          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        // Glass library modifier classes:
-        accent: 'btn-pill-accent',
-        ghost: 'btn-pill-ghost',
-        glass: 'btn-pill-glass',
-        'glass-subtle':
-          'glass-subtle text-foreground/70 hover:border-[color-mix(in_srgb,var(--border)_50%,transparent)] hover:text-foreground',
-        ai: 'bg-amber-500/15 text-amber-700 hover:bg-amber-500/25 dark:text-amber-400',
-        'danger-subtle': 'bg-destructive/10 text-destructive hover:bg-destructive/20',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-10 px-4 py-2',
-        xs: 'h-7 rounded-full px-2',
-        sm: 'h-9 rounded-full px-3',
-        lg: 'h-11 rounded-full px-8',
-        icon: 'h-10 w-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-)
-
-export type ButtonVariants = VariantProps<typeof buttonVariants>

package/src/components/ui/card/Card.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import { computed, type HTMLAttributes } from "vue";
-import { cn } from "../../../utils";
-
-const props = defineProps<{
-    class?: HTMLAttributes["class"];
-    /** When true, renders as a plain structural wrapper with no border, shadow, or background.
-     *  Used when a Card is nested inside another card or serves as a layout container. */
-    plain?: boolean;
-    /** 'default' = glass bg + shadow; 'pane' = translucent bg + blur (scrollable content panes) */
-    variant?: "default" | "pane";
-}>();
-
-const variantClass = computed(() => {
-    if (props.plain) return "scrollbar-hidden rounded-xl";
-    if (props.variant === "pane")
-        // Pane uses glass background + blur without the ::after grain overlay,
-        // which conflicts with overflow:auto scroll containers.
-        return "scrollbar-hidden rounded-xl text-card-foreground bg-[var(--glass-bg-subtle)] [backdrop-filter:var(--glass-blur-subtle)] border border-[var(--glass-border-subtle)]";
-    return "scrollbar-hidden glass-default rounded-xl text-card-foreground shadow-[var(--shadow-card)]";
-});
-</script>
-
-<template>
-    <div :class="cn(variantClass, props.class)">
-        <slot />
-    </div>
-</template>

package/src/components/ui/card/CardContent.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <div :class="cn('p-6', props.class)">
-    <slot />
-  </div>
-</template>

package/src/components/ui/card/CardDescription.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <p :class="cn('text-sm text-muted-foreground', props.class)">
-    <slot />
-  </p>
-</template>

package/src/components/ui/card/CardFooter.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <div :class="cn('flex items-center p-6 pt-0', props.class)">
-    <slot />
-  </div>
-</template>

package/src/components/ui/card/CardHeader.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
-import { cn } from '../../../utils'
-
-const props = defineProps<{
-  class?: HTMLAttributes['class']
-}>()
-</script>
-
-<template>
-  <div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
-    <slot />
-  </div>
-</template>

package/src/components/ui/card/CardTitle.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { cn } from "../../../utils";
-
-const props = defineProps<{
-    class?: HTMLAttributes["class"];
-}>();
-</script>
-
-<template>
-    <h3
-        :class="
-            cn(
-                'text-3xl font-semibold leading-none tracking-tight',
-                props.class,
-            )
-        "
-    >
-        <slot />
-    </h3>
-</template>

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

@@ -1,6 +0,0 @@
-export { default as Card } from './Card.vue'
-export { default as CardHeader } from './CardHeader.vue'
-export { default as CardTitle } from './CardTitle.vue'
-export { default as CardDescription } from './CardDescription.vue'
-export { default as CardContent } from './CardContent.vue'
-export { default as CardFooter } from './CardFooter.vue'

package/src/components/ui/carousel/Carousel.vue

@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'
-import { cn } from '../../../utils'
-import { useProvideCarousel } from './useCarousel'
-
-const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
-  orientation: 'horizontal',
-})
-
-const emits = defineEmits<CarouselEmits>()
-
-const { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)
-
-defineExpose({
-  canScrollNext,
-  canScrollPrev,
-  carouselApi,
-  carouselRef,
-  orientation,
-  scrollNext,
-  scrollPrev,
-})
-
-function onKeyDown(event: KeyboardEvent) {
-  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
-  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
-
-  if (event.key === prevKey) {
-    event.preventDefault()
-    scrollPrev()
-
-    return
-  }
-
-  if (event.key === nextKey) {
-    event.preventDefault()
-    scrollNext()
-  }
-}
-</script>
-
-<template>
-  <div
-    data-slot="carousel"
-    :class="cn('relative', props.class)"
-    role="region"
-    aria-roledescription="carousel"
-    tabindex="0"
-    @keydown="onKeyDown"
-  >
-    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />
-  </div>
-</template>

package/src/components/ui/carousel/CarouselContent.vue

@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import type { WithClassAsProps } from './interface'
-import { cn } from '../../../utils'
-import { useCarousel } from './useCarousel'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = defineProps<WithClassAsProps>()
-
-const { carouselRef, orientation } = useCarousel()
-
-defineExpose({ carouselRef })
-</script>
-
-<template>
-  <div
-    ref="carouselRef"
-    data-slot="carousel-content"
-    class="overflow-hidden"
-  >
-    <div
-      :class="
-        cn(
-          'flex',
-          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
-          props.class,
-        )"
-      v-bind="$attrs"
-    >
-      <slot />
-    </div>
-  </div>
-</template>

package/src/components/ui/carousel/CarouselItem.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import type { WithClassAsProps } from './interface'
-import { cn } from '../../../utils'
-import { useCarousel } from './useCarousel'
-
-const props = defineProps<WithClassAsProps>()
-
-const { orientation } = useCarousel()
-</script>
-
-<template>
-  <div
-    data-slot="carousel-item"
-    role="group"
-    aria-roledescription="slide"
-    :class="cn(
-      'min-w-0 shrink-0 grow-0 basis-full',
-      orientation === 'horizontal' ? 'pl-4' : 'pt-4',
-      props.class,
-    )"
-  >
-    <slot />
-  </div>
-</template>

package/src/components/ui/carousel/CarouselNext.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import type { WithClassAsProps } from './interface'
-import { ArrowRight } from 'lucide-vue-next'
-import { cn } from '../../../utils'
-import { Button, type ButtonVariants } from '../button'
-import { useCarousel } from './useCarousel'
-
-const props = withDefaults(defineProps<{
-  variant?: ButtonVariants['variant']
-  size?: ButtonVariants['size']
-}
-& WithClassAsProps>(), {
-  variant: 'outline',
-  size: 'icon',
-})
-
-const { orientation, canScrollNext, scrollNext } = useCarousel()
-</script>
-
-<template>
-  <Button
-    data-slot="carousel-next"
-    :disabled="!canScrollNext"
-    :class="cn(
-      'absolute size-8 rounded-full',
-      orientation === 'horizontal'
-        ? 'top-1/2 -right-12 -translate-y-1/2'
-        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
-      props.class,
-    )"
-    :variant="variant"
-    :size="size"
-    @click="scrollNext"
-  >
-    <slot>
-      <ArrowRight />
-      <span class="sr-only">Next Slide</span>
-    </slot>
-  </Button>
-</template>

package/src/components/ui/carousel/CarouselPrevious.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import type { WithClassAsProps } from './interface'
-import { ArrowLeft } from 'lucide-vue-next'
-import { cn } from '../../../utils'
-import { Button, type ButtonVariants } from '../button'
-import { useCarousel } from './useCarousel'
-
-const props = withDefaults(defineProps<{
-  variant?: ButtonVariants['variant']
-  size?: ButtonVariants['size']
-}
-& WithClassAsProps>(), {
-  variant: 'outline',
-  size: 'icon',
-})
-
-const { orientation, canScrollPrev, scrollPrev } = useCarousel()
-</script>
-
-<template>
-  <Button
-    data-slot="carousel-previous"
-    :disabled="!canScrollPrev"
-    :class="cn(
-      'absolute size-8 rounded-full',
-      orientation === 'horizontal'
-        ? 'top-1/2 -left-12 -translate-y-1/2'
-        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
-      props.class,
-    )"
-    :variant="variant"
-    :size="size"
-    @click="scrollPrev"
-  >
-    <slot>
-      <ArrowLeft />
-      <span class="sr-only">Previous Slide</span>
-    </slot>
-  </Button>
-</template>

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

@@ -1,10 +0,0 @@
-export { default as Carousel } from './Carousel.vue'
-export { default as CarouselContent } from './CarouselContent.vue'
-export { default as CarouselItem } from './CarouselItem.vue'
-export { default as CarouselNext } from './CarouselNext.vue'
-export { default as CarouselPrevious } from './CarouselPrevious.vue'
-export type {
-  UnwrapRefCarouselApi as CarouselApi,
-} from './interface'
-
-export { useCarousel } from './useCarousel'

package/src/components/ui/carousel/interface.ts

@@ -1,26 +0,0 @@
-import type useEmblaCarousel from 'embla-carousel-vue'
-import type {
-  EmblaCarouselVueType,
-} from 'embla-carousel-vue'
-import type { HTMLAttributes, UnwrapRef } from 'vue'
-
-type CarouselApi = EmblaCarouselVueType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
-
-export type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>
-
-export interface CarouselProps {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: 'horizontal' | 'vertical'
-}
-
-export interface CarouselEmits {
-  (e: 'init-api', payload: UnwrapRefCarouselApi): void
-}
-
-export interface WithClassAsProps {
-  class?: HTMLAttributes['class']
-}