@aphexcms/ui 0.1.1 → 0.1.3

package/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { buttonVariants } from '@lib/components/ui/button/index.js';
-	import { cn } from '@lib/utils.js';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: AlertDialogPrimitive.CancelProps = $props();
-</script>
-
-<AlertDialogPrimitive.Cancel
-	bind:ref
-	data-slot="alert-dialog-cancel"
-	class={cn(buttonVariants({ variant: 'outline' }), className)}
-	{...restProps}
-/>

package/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import AlertDialogOverlay from './alert-dialog-overlay.svelte';
-	import { cn, type WithoutChild, type WithoutChildrenOrChild } from '@lib/utils.js';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		portalProps,
-		...restProps
-	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
-		portalProps?: WithoutChildrenOrChild<AlertDialogPrimitive.PortalProps>;
-	} = $props();
-</script>
-
-<AlertDialogPrimitive.Portal {...portalProps}>
-	<AlertDialogOverlay />
-	<AlertDialogPrimitive.Content
-		bind:ref
-		data-slot="alert-dialog-content"
-		class={cn(
-			'bg-background 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 fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
-			className
-		)}
-		{...restProps}
-	/>
-</AlertDialogPrimitive.Portal>

package/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { cn } from '@lib/utils.js';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: AlertDialogPrimitive.DescriptionProps = $props();
-</script>
-
-<AlertDialogPrimitive.Description
-	bind:ref
-	data-slot="alert-dialog-description"
-	class={cn('text-muted-foreground text-sm', className)}
-	{...restProps}
-/>

package/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from '@lib/utils.js';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="alert-dialog-footer"
-	class={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>

package/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '@lib/utils.js';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="alert-dialog-header"
-	class={cn('flex flex-col gap-2 text-center sm:text-left', className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>

package/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { cn } from '@lib/utils.js';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: AlertDialogPrimitive.OverlayProps = $props();
-</script>
-
-<AlertDialogPrimitive.Overlay
-	bind:ref
-	data-slot="alert-dialog-overlay"
-	class={cn(
-		'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
-		className
-	)}
-	{...restProps}
-/>

package/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-	import { cn } from '@lib/utils.js';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: AlertDialogPrimitive.TitleProps = $props();
-</script>
-
-<AlertDialogPrimitive.Title
-	bind:ref
-	data-slot="alert-dialog-title"
-	class={cn('text-lg font-semibold', className)}
-	{...restProps}
-/>

package/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-	import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-
-	let { ref = $bindable(null), ...restProps }: AlertDialogPrimitive.TriggerProps = $props();
-</script>
-
-<AlertDialogPrimitive.Trigger bind:ref data-slot="alert-dialog-trigger" {...restProps} />

package/src/lib/components/ui/alert-dialog/index.ts

@@ -1,39 +0,0 @@
-import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-import Trigger from './alert-dialog-trigger.svelte';
-import Title from './alert-dialog-title.svelte';
-import Action from './alert-dialog-action.svelte';
-import Cancel from './alert-dialog-cancel.svelte';
-import Footer from './alert-dialog-footer.svelte';
-import Header from './alert-dialog-header.svelte';
-import Overlay from './alert-dialog-overlay.svelte';
-import Content from './alert-dialog-content.svelte';
-import Description from './alert-dialog-description.svelte';
-
-const Root = AlertDialogPrimitive.Root;
-const Portal = AlertDialogPrimitive.Portal;
-
-export {
-	Root,
-	Title,
-	Action,
-	Cancel,
-	Portal,
-	Footer,
-	Header,
-	Trigger,
-	Overlay,
-	Content,
-	Description,
-	//
-	Root as AlertDialog,
-	Title as AlertDialogTitle,
-	Action as AlertDialogAction,
-	Cancel as AlertDialogCancel,
-	Portal as AlertDialogPortal,
-	Footer as AlertDialogFooter,
-	Header as AlertDialogHeader,
-	Trigger as AlertDialogTrigger,
-	Overlay as AlertDialogOverlay,
-	Content as AlertDialogContent,
-	Description as AlertDialogDescription
-};

package/src/lib/components/ui/avatar/avatar-fallback.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-	import { Avatar as AvatarPrimitive } from 'bits-ui';
-	import { cn } from '@lib/utils.js';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: AvatarPrimitive.FallbackProps = $props();
-</script>
-
-<AvatarPrimitive.Fallback
-	bind:ref
-	data-slot="avatar-fallback"
-	class={cn('bg-muted flex size-full items-center justify-center rounded-full', className)}
-	{...restProps}
-/>

package/src/lib/components/ui/avatar/avatar-image.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-	import { Avatar as AvatarPrimitive } from 'bits-ui';
-	import { cn } from '@lib/utils.js';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: AvatarPrimitive.ImageProps = $props();
-</script>
-
-<AvatarPrimitive.Image
-	bind:ref
-	data-slot="avatar-image"
-	class={cn('aspect-square size-full', className)}
-	{...restProps}
-/>

package/src/lib/components/ui/avatar/avatar.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-	import { Avatar as AvatarPrimitive } from 'bits-ui';
-	import { cn } from '@lib/utils.js';
-
-	let {
-		ref = $bindable(null),
-		loadingStatus = $bindable('loading'),
-		class: className,
-		...restProps
-	}: AvatarPrimitive.RootProps = $props();
-</script>
-
-<AvatarPrimitive.Root
-	bind:ref
-	bind:loadingStatus
-	data-slot="avatar"
-	class={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
-	{...restProps}
-/>

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

@@ -1,13 +0,0 @@
-import Root from './avatar.svelte';
-import Image from './avatar-image.svelte';
-import Fallback from './avatar-fallback.svelte';
-
-export {
-	Root,
-	Image,
-	Fallback,
-	//
-	Root as Avatar,
-	Image as AvatarImage,
-	Fallback as AvatarFallback
-};

package/src/lib/components/ui/badge/badge.svelte

@@ -1,49 +0,0 @@
-<script lang="ts" module>
-	import { type VariantProps, tv } from 'tailwind-variants';
-
-	export const badgeVariants = tv({
-		base: 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3',
-		variants: {
-			variant: {
-				default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent',
-				secondary:
-					'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent',
-				destructive:
-					'bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white',
-				outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground'
-			}
-		},
-		defaultVariants: {
-			variant: 'default'
-		}
-	});
-
-	export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
-</script>
-
-<script lang="ts">
-	import type { HTMLAnchorAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '@lib/utils.js';
-
-	let {
-		ref = $bindable(null),
-		href,
-		class: className,
-		variant = 'default',
-		children,
-		...restProps
-	}: WithElementRef<HTMLAnchorAttributes> & {
-		variant?: BadgeVariant;
-	} = $props();
-</script>
-
-<svelte:element
-	this={href ? 'a' : 'span'}
-	bind:this={ref}
-	data-slot="badge"
-	{href}
-	class={cn(badgeVariants({ variant }), className)}
-	{...restProps}
->
-	{@render children?.()}
-</svelte:element>

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

@@ -1,2 +0,0 @@
-export { default as Badge } from './badge.svelte';
-export { badgeVariants, type BadgeVariant } from './badge.svelte';

package/src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-	import EllipsisIcon from '@lucide/svelte/icons/ellipsis';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef, type WithoutChildren } from '@lib/utils.js';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
-</script>
-
-<span
-	bind:this={ref}
-	data-slot="breadcrumb-ellipsis"
-	role="presentation"
-	aria-hidden="true"
-	class={cn('flex size-9 items-center justify-center', className)}
-	{...restProps}
->
-	<EllipsisIcon class="size-4" />
-	<span class="sr-only">More</span>
-</span>

package/src/lib/components/ui/breadcrumb/breadcrumb-item.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import type { HTMLLiAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '@lib/utils.js';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLLiAttributes> = $props();
-</script>
-
-<li
-	bind:this={ref}
-	data-slot="breadcrumb-item"
-	class={cn('inline-flex items-center gap-1.5', className)}
-	{...restProps}
->
-	{@render children?.()}
-</li>

package/src/lib/components/ui/breadcrumb/breadcrumb-link.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-	import type { HTMLAnchorAttributes } from 'svelte/elements';
-	import type { Snippet } from 'svelte';
-	import { cn, type WithElementRef } from '@lib/utils.js';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		href = undefined,
-		child,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAnchorAttributes> & {
-		child?: Snippet<[{ props: HTMLAnchorAttributes }]>;
-	} = $props();
-
-	const attrs = $derived({
-		'data-slot': 'breadcrumb-link',
-		class: cn('hover:text-foreground transition-colors', className),
-		href,
-		...restProps
-	});
-</script>
-
-{#if child}
-	{@render child({ props: attrs })}
-{:else}
-	<a bind:this={ref} {...attrs}>
-		{@render children?.()}
-	</a>
-{/if}

package/src/lib/components/ui/breadcrumb/breadcrumb-list.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-	import type { HTMLOlAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '@lib/utils.js';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLOlAttributes> = $props();
-</script>
-
-<ol
-	bind:this={ref}
-	data-slot="breadcrumb-list"
-	class={cn(
-		'text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5',
-		className
-	)}
-	{...restProps}
->
-	{@render children?.()}
-</ol>

package/src/lib/components/ui/breadcrumb/breadcrumb-page.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '@lib/utils.js';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
-</script>
-
-<span
-	bind:this={ref}
-	data-slot="breadcrumb-page"
-	role="link"
-	aria-disabled="true"
-	aria-current="page"
-	class={cn('text-foreground font-normal', className)}
-	{...restProps}
->
-	{@render children?.()}
-</span>

package/src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
-	import { cn, type WithElementRef } from '@lib/utils.js';
-	import type { HTMLLiAttributes } from 'svelte/elements';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLLiAttributes> = $props();
-</script>
-
-<li
-	bind:this={ref}
-	data-slot="breadcrumb-separator"
-	role="presentation"
-	aria-hidden="true"
-	class={cn('[&>svg]:size-3.5', className)}
-	{...restProps}
->
-	{#if children}
-		{@render children?.()}
-	{:else}
-		<ChevronRightIcon />
-	{/if}
-</li>

package/src/lib/components/ui/breadcrumb/breadcrumb.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-	import type { WithElementRef } from '@lib/utils.js';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
-</script>
-
-<nav
-	bind:this={ref}
-	data-slot="breadcrumb"
-	class={className}
-	aria-label="breadcrumb"
-	{...restProps}
->
-	{@render children?.()}
-</nav>

package/src/lib/components/ui/breadcrumb/index.ts

@@ -1,25 +0,0 @@
-import Root from './breadcrumb.svelte';
-import Ellipsis from './breadcrumb-ellipsis.svelte';
-import Item from './breadcrumb-item.svelte';
-import Separator from './breadcrumb-separator.svelte';
-import Link from './breadcrumb-link.svelte';
-import List from './breadcrumb-list.svelte';
-import Page from './breadcrumb-page.svelte';
-
-export {
-	Root,
-	Ellipsis,
-	Item,
-	Separator,
-	Link,
-	List,
-	Page,
-	//
-	Root as Breadcrumb,
-	Ellipsis as BreadcrumbEllipsis,
-	Item as BreadcrumbItem,
-	Separator as BreadcrumbSeparator,
-	Link as BreadcrumbLink,
-	List as BreadcrumbList,
-	Page as BreadcrumbPage
-};

package/src/lib/components/ui/button/button.svelte

@@ -1,82 +0,0 @@
-<script lang="ts" module>
-	import { cn, type WithElementRef } from '@lib/utils.js';
-	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
-	import { type VariantProps, tv } from 'tailwind-variants';
-
-	export const buttonVariants = tv({
-		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-		variants: {
-			variant: {
-				default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
-				destructive:
-					'bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white',
-				outline:
-					'bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border',
-				secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
-				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-				link: 'text-primary underline-offset-4 hover:underline'
-			},
-			size: {
-				default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-				sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
-				lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-				icon: 'size-9',
-				'icon-sm': 'size-8',
-				'icon-lg': 'size-10'
-			}
-		},
-		defaultVariants: {
-			variant: 'default',
-			size: 'default'
-		}
-	});
-
-	export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
-	export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
-
-	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
-		WithElementRef<HTMLAnchorAttributes> & {
-			variant?: ButtonVariant;
-			size?: ButtonSize;
-		};
-</script>
-
-<script lang="ts">
-	let {
-		class: className,
-		variant = 'default',
-		size = 'default',
-		ref = $bindable(null),
-		href = undefined,
-		type = 'button',
-		disabled,
-		children,
-		...restProps
-	}: ButtonProps = $props();
-</script>
-
-{#if href}
-	<a
-		bind:this={ref}
-		data-slot="button"
-		class={cn(buttonVariants({ variant, size }), className)}
-		href={disabled ? undefined : href}
-		aria-disabled={disabled}
-		role={disabled ? 'link' : undefined}
-		tabindex={disabled ? -1 : undefined}
-		{...restProps}
-	>
-		{@render children?.()}
-	</a>
-{:else}
-	<button
-		bind:this={ref}
-		data-slot="button"
-		class={cn(buttonVariants({ variant, size }), className)}
-		{type}
-		{disabled}
-		{...restProps}
-	>
-		{@render children?.()}
-	</button>
-{/if}

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

@@ -1,17 +0,0 @@
-import Root, {
-	type ButtonProps,
-	type ButtonSize,
-	type ButtonVariant,
-	buttonVariants
-} from './button.svelte';
-
-export {
-	Root,
-	type ButtonProps as Props,
-	//
-	Root as Button,
-	buttonVariants,
-	type ButtonProps,
-	type ButtonSize,
-	type ButtonVariant
-};

package/src/lib/components/ui/card/card-action.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from '@lib/utils.js';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="card-action"
-	class={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>

package/src/lib/components/ui/card/card-content.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { cn, type WithElementRef } from '@lib/utils.js';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
-</script>
-
-<div bind:this={ref} data-slot="card-content" class={cn('px-6', className)} {...restProps}>
-	{@render children?.()}
-</div>