@aphexcms/ui 0.1.1 → 0.1.2

package/src/lib/components/ui/sidebar/sidebar-group.svelte

@@ -1,21 +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<HTMLElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="sidebar-group"
-	data-sidebar="group"
-	class={cn('relative flex w-full min-w-0 flex-col p-2', className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>

package/src/lib/components/ui/sidebar/sidebar-header.svelte

@@ -1,21 +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<HTMLElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="sidebar-header"
-	data-sidebar="header"
-	class={cn('flex flex-col gap-2 p-2', className)}
-	{...restProps}
->
-	{@render children?.()}
-</div>

package/src/lib/components/ui/sidebar/sidebar-input.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-	import type { ComponentProps } from 'svelte';
-	import { Input } from '@lib/components/ui/input/index.js';
-	import { cn } from '@lib/utils.js';
-
-	let {
-		ref = $bindable(null),
-		value = $bindable(''),
-		class: className,
-		...restProps
-	}: ComponentProps<typeof Input> = $props();
-</script>
-
-<Input
-	bind:ref
-	bind:value
-	data-slot="sidebar-input"
-	data-sidebar="input"
-	class={cn('bg-background h-8 w-full shadow-none', className)}
-	{...restProps}
-/>

package/src/lib/components/ui/sidebar/sidebar-inset.svelte

@@ -1,24 +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<HTMLElement>> = $props();
-</script>
-
-<main
-	bind:this={ref}
-	data-slot="sidebar-inset"
-	class={cn(
-		'bg-background relative flex w-full flex-1 flex-col',
-		'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm',
-		className
-	)}
-	{...restProps}
->
-	{@render children?.()}
-</main>

package/src/lib/components/ui/sidebar/sidebar-menu-action.svelte

@@ -1,43 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from '@lib/utils.js';
-	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		showOnHover = false,
-		children,
-		child,
-		...restProps
-	}: WithElementRef<HTMLButtonAttributes> & {
-		child?: Snippet<[{ props: Record<string, unknown> }]>;
-		showOnHover?: boolean;
-	} = $props();
-
-	const mergedProps = $derived({
-		class: cn(
-			'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground outline-hidden absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-			// Increases the hit area of the button on mobile.
-			'after:absolute after:-inset-2 md:after:hidden',
-			'peer-data-[size=sm]/menu-button:top-1',
-			'peer-data-[size=default]/menu-button:top-1.5',
-			'peer-data-[size=lg]/menu-button:top-2.5',
-			'group-data-[collapsible=icon]:hidden',
-			showOnHover &&
-				'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
-			className
-		),
-		'data-slot': 'sidebar-menu-action',
-		'data-sidebar': 'menu-action',
-		...restProps
-	});
-</script>
-
-{#if child}
-	{@render child({ props: mergedProps })}
-{:else}
-	<button bind:this={ref} {...mergedProps}>
-		{@render children?.()}
-	</button>
-{/if}

package/src/lib/components/ui/sidebar/sidebar-menu-badge.svelte

@@ -1,29 +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<HTMLElement>> = $props();
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="sidebar-menu-badge"
-	data-sidebar="menu-badge"
-	class={cn(
-		'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums',
-		'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
-		'peer-data-[size=sm]/menu-button:top-1',
-		'peer-data-[size=default]/menu-button:top-1.5',
-		'peer-data-[size=lg]/menu-button:top-2.5',
-		'group-data-[collapsible=icon]:hidden',
-		className
-	)}
-	{...restProps}
->
-	{@render children?.()}
-</div>

package/src/lib/components/ui/sidebar/sidebar-menu-button.svelte

@@ -1,101 +0,0 @@
-<script lang="ts" module>
-	import { tv, type VariantProps } from 'tailwind-variants';
-
-	export const sidebarMenuButtonVariants = tv({
-		base: 'peer/menu-button outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground group-has-data-[sidebar=menu-action]/menu-item:pr-8 data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm transition-[width,height,padding] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
-		variants: {
-			variant: {
-				default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
-				outline:
-					'bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]'
-			},
-			size: {
-				default: 'h-8 text-sm',
-				sm: 'h-7 text-xs',
-				lg: 'group-data-[collapsible=icon]:p-0! h-12 text-sm'
-			}
-		},
-		defaultVariants: {
-			variant: 'default',
-			size: 'default'
-		}
-	});
-
-	export type SidebarMenuButtonVariant = VariantProps<typeof sidebarMenuButtonVariants>['variant'];
-	export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariants>['size'];
-</script>
-
-<script lang="ts">
-	import * as Tooltip from '@lib/components/ui/tooltip/index.js';
-	import { cn, type WithElementRef, type WithoutChildrenOrChild } from '@lib/utils.js';
-	import { mergeProps } from 'bits-ui';
-	import type { ComponentProps, Snippet } from 'svelte';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { useSidebar } from './context.svelte.js';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		child,
-		variant = 'default',
-		size = 'default',
-		isActive = false,
-		tooltipContent,
-		tooltipContentProps,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
-		isActive?: boolean;
-		variant?: SidebarMenuButtonVariant;
-		size?: SidebarMenuButtonSize;
-		tooltipContent?: Snippet | string;
-		tooltipContentProps?: WithoutChildrenOrChild<ComponentProps<typeof Tooltip.Content>>;
-		child?: Snippet<[{ props: Record<string, unknown> }]>;
-	} = $props();
-
-	const sidebar = useSidebar();
-
-	const buttonProps = $derived({
-		class: cn(sidebarMenuButtonVariants({ variant, size }), className),
-		'data-slot': 'sidebar-menu-button',
-		'data-sidebar': 'menu-button',
-		'data-size': size,
-		'data-active': isActive,
-		...restProps
-	});
-</script>
-
-{#snippet Button({ props }: { props?: Record<string, unknown> })}
-	{@const mergedProps = mergeProps(buttonProps, props)}
-	{#if child}
-		{@render child({ props: mergedProps })}
-	{:else}
-		<button bind:this={ref} {...mergedProps}>
-			{@render children?.()}
-		</button>
-	{/if}
-{/snippet}
-
-{#if !tooltipContent}
-	{@render Button({})}
-{:else}
-	<Tooltip.Root>
-		<Tooltip.Trigger>
-			{#snippet child({ props })}
-				{@render Button({ props })}
-			{/snippet}
-		</Tooltip.Trigger>
-		<Tooltip.Content
-			side="right"
-			align="center"
-			hidden={sidebar.state !== 'collapsed' || sidebar.isMobile}
-			{...tooltipContentProps}
-		>
-			{#if typeof tooltipContent === 'string'}
-				{tooltipContent}
-			{:else if tooltipContent}
-				{@render tooltipContent()}
-			{/if}
-		</Tooltip.Content>
-	</Tooltip.Root>
-{/if}

package/src/lib/components/ui/sidebar/sidebar-menu-item.svelte

@@ -1,21 +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<HTMLLIElement>, HTMLLIElement> = $props();
-</script>
-
-<li
-	bind:this={ref}
-	data-slot="sidebar-menu-item"
-	data-sidebar="menu-item"
-	class={cn('group/menu-item relative', className)}
-	{...restProps}
->
-	{@render children?.()}
-</li>

package/src/lib/components/ui/sidebar/sidebar-menu-skeleton.svelte

@@ -1,36 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from '@lib/utils.js';
-	import { Skeleton } from '@lib/components/ui/skeleton/index.js';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		showIcon = false,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
-		showIcon?: boolean;
-	} = $props();
-
-	// Random width between 50% and 90%
-	const width = `${Math.floor(Math.random() * 40) + 50}%`;
-</script>
-
-<div
-	bind:this={ref}
-	data-slot="sidebar-menu-skeleton"
-	data-sidebar="menu-skeleton"
-	class={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
-	{...restProps}
->
-	{#if showIcon}
-		<Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
-	{/if}
-	<Skeleton
-		class="max-w-(--skeleton-width) h-4 flex-1"
-		data-sidebar="menu-skeleton-text"
-		style="--skeleton-width: {width};"
-	/>
-	{@render children?.()}
-</div>

package/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte

@@ -1,43 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from '@lib/utils.js';
-	import type { Snippet } from 'svelte';
-	import type { HTMLAnchorAttributes } from 'svelte/elements';
-
-	let {
-		ref = $bindable(null),
-		children,
-		child,
-		class: className,
-		size = 'md',
-		isActive = false,
-		...restProps
-	}: WithElementRef<HTMLAnchorAttributes> & {
-		child?: Snippet<[{ props: Record<string, unknown> }]>;
-		size?: 'sm' | 'md';
-		isActive?: boolean;
-	} = $props();
-
-	const mergedProps = $derived({
-		class: cn(
-			'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground outline-hidden flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
-			'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
-			size === 'sm' && 'text-xs',
-			size === 'md' && 'text-sm',
-			'group-data-[collapsible=icon]:hidden',
-			className
-		),
-		'data-slot': 'sidebar-menu-sub-button',
-		'data-sidebar': 'menu-sub-button',
-		'data-size': size,
-		'data-active': isActive,
-		...restProps
-	});
-</script>
-
-{#if child}
-	{@render child({ props: mergedProps })}
-{:else}
-	<a bind:this={ref} {...mergedProps}>
-		{@render children?.()}
-	</a>
-{/if}

package/src/lib/components/ui/sidebar/sidebar-menu-sub-item.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from '@lib/utils.js';
-	import type { HTMLAttributes } from 'svelte/elements';
-
-	let {
-		ref = $bindable(null),
-		children,
-		class: className,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLLIElement>> = $props();
-</script>
-
-<li
-	bind:this={ref}
-	data-slot="sidebar-menu-sub-item"
-	data-sidebar="menu-sub-item"
-	class={cn('group/menu-sub-item relative', className)}
-	{...restProps}
->
-	{@render children?.()}
-</li>

package/src/lib/components/ui/sidebar/sidebar-menu-sub.svelte

@@ -1,25 +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<HTMLUListElement>> = $props();
-</script>
-
-<ul
-	bind:this={ref}
-	data-slot="sidebar-menu-sub"
-	data-sidebar="menu-sub"
-	class={cn(
-		'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
-		'group-data-[collapsible=icon]:hidden',
-		className
-	)}
-	{...restProps}
->
-	{@render children?.()}
-</ul>

package/src/lib/components/ui/sidebar/sidebar-menu.svelte

@@ -1,21 +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<HTMLUListElement>, HTMLUListElement> = $props();
-</script>
-
-<ul
-	bind:this={ref}
-	data-slot="sidebar-menu"
-	data-sidebar="menu"
-	class={cn('flex w-full min-w-0 flex-col gap-1', className)}
-	{...restProps}
->
-	{@render children?.()}
-</ul>

package/src/lib/components/ui/sidebar/sidebar-provider.svelte

@@ -1,53 +0,0 @@
-<script lang="ts">
-	import * as Tooltip from '@lib/components/ui/tooltip/index.js';
-	import { cn, type WithElementRef } from '@lib/utils.js';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import {
-		SIDEBAR_COOKIE_MAX_AGE,
-		SIDEBAR_COOKIE_NAME,
-		SIDEBAR_WIDTH,
-		SIDEBAR_WIDTH_ICON
-	} from './constants.js';
-	import { setSidebar } from './context.svelte.js';
-
-	let {
-		ref = $bindable(null),
-		open = $bindable(true),
-		onOpenChange = () => {},
-		class: className,
-		style,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		open?: boolean;
-		onOpenChange?: (open: boolean) => void;
-	} = $props();
-
-	const sidebar = setSidebar({
-		open: () => open,
-		setOpen: (value: boolean) => {
-			open = value;
-			onOpenChange(value);
-
-			// This sets the cookie to keep the sidebar state.
-			document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
-		}
-	});
-</script>
-
-<svelte:window onkeydown={sidebar.handleShortcutKeydown} />
-
-<Tooltip.Provider delayDuration={0}>
-	<div
-		data-slot="sidebar-wrapper"
-		style="--sidebar-width: {SIDEBAR_WIDTH}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style}"
-		class={cn(
-			'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
-			className
-		)}
-		bind:this={ref}
-		{...restProps}
-	>
-		{@render children?.()}
-	</div>
-</Tooltip.Provider>

package/src/lib/components/ui/sidebar/sidebar-rail.svelte

@@ -1,36 +0,0 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from '@lib/utils.js';
-	import type { HTMLAttributes } from 'svelte/elements';
-	import { useSidebar } from './context.svelte.js';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> = $props();
-
-	const sidebar = useSidebar();
-</script>
-
-<button
-	bind:this={ref}
-	data-sidebar="rail"
-	data-slot="sidebar-rail"
-	aria-label="Toggle Sidebar"
-	tabIndex={-1}
-	onclick={sidebar.toggle}
-	title="Toggle Sidebar"
-	class={cn(
-		'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-[calc(1/2*100%-1px)] after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
-		'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
-		'[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-		'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
-		'[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
-		'[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
-		className
-	)}
-	{...restProps}
->
-	{@render children?.()}
-</button>

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

@@ -1,19 +0,0 @@
-<script lang="ts">
-	import { Separator } from '@lib/components/ui/separator/index.js';
-	import { cn } from '@lib/utils.js';
-	import type { ComponentProps } from 'svelte';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: ComponentProps<typeof Separator> = $props();
-</script>
-
-<Separator
-	bind:ref
-	data-slot="sidebar-separator"
-	data-sidebar="separator"
-	class={cn('bg-sidebar-border', className)}
-	{...restProps}
-/>

package/src/lib/components/ui/sidebar/sidebar-trigger.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-	import { Button } from '@lib/components/ui/button/index.js';
-	import { cn } from '@lib/utils.js';
-	import PanelLeftIcon from '@lucide/svelte/icons/panel-left';
-	import type { ComponentProps } from 'svelte';
-	import { useSidebar } from './context.svelte.js';
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		onclick,
-		...restProps
-	}: ComponentProps<typeof Button> & {
-		onclick?: (e: MouseEvent) => void;
-	} = $props();
-
-	const sidebar = useSidebar();
-</script>
-
-<Button
-	data-sidebar="trigger"
-	data-slot="sidebar-trigger"
-	variant="ghost"
-	size="icon"
-	class={cn('size-7', className)}
-	type="button"
-	onclick={(e) => {
-		onclick?.(e);
-		sidebar.toggle();
-	}}
-	{...restProps}
->
-	<PanelLeftIcon />
-	<span class="sr-only">Toggle Sidebar</span>
-</Button>