@aphexcms/ui 0.1.0 → 0.1.1

package/dist/components/app-sidebar.svelte

@@ -0,0 +1,171 @@
+<script lang="ts" module>
+	import AudioWaveformIcon from '@lucide/svelte/icons/audio-waveform';
+	import BookOpenIcon from '@lucide/svelte/icons/book-open';
+	import BotIcon from '@lucide/svelte/icons/bot';
+	import ChartPieIcon from '@lucide/svelte/icons/chart-pie';
+	import CommandIcon from '@lucide/svelte/icons/command';
+	import FrameIcon from '@lucide/svelte/icons/frame';
+	import GalleryVerticalEndIcon from '@lucide/svelte/icons/gallery-vertical-end';
+	import MapIcon from '@lucide/svelte/icons/map';
+	import Settings2Icon from '@lucide/svelte/icons/settings-2';
+	import SquareTerminalIcon from '@lucide/svelte/icons/square-terminal';
+
+	// This is sample data.
+	const data = {
+		user: {
+			name: 'shadcn',
+			email: 'm@example.com',
+			avatar: '/avatars/shadcn.jpg'
+		},
+		teams: [
+			{
+				name: 'Acme Inc',
+				logo: GalleryVerticalEndIcon,
+				plan: 'Enterprise'
+			},
+			{
+				name: 'Acme Corp.',
+				logo: AudioWaveformIcon,
+				plan: 'Startup'
+			},
+			{
+				name: 'Evil Corp.',
+				logo: CommandIcon,
+				plan: 'Free'
+			}
+		],
+		navMain: [
+			{
+				title: 'Playground',
+				url: '#',
+				icon: SquareTerminalIcon,
+				isActive: true,
+				items: [
+					{
+						title: 'History',
+						url: '#'
+					},
+					{
+						title: 'Starred',
+						url: '#'
+					},
+					{
+						title: 'Settings',
+						url: '#'
+					}
+				]
+			},
+			{
+				title: 'Models',
+				url: '#',
+				icon: BotIcon,
+				items: [
+					{
+						title: 'Genesis',
+						url: '#'
+					},
+					{
+						title: 'Explorer',
+						url: '#'
+					},
+					{
+						title: 'Quantum',
+						url: '#'
+					}
+				]
+			},
+			{
+				title: 'Documentation',
+				url: '#',
+				icon: BookOpenIcon,
+				items: [
+					{
+						title: 'Introduction',
+						url: '#'
+					},
+					{
+						title: 'Get Started',
+						url: '#'
+					},
+					{
+						title: 'Tutorials',
+						url: '#'
+					},
+					{
+						title: 'Changelog',
+						url: '#'
+					}
+				]
+			},
+			{
+				title: 'Settings',
+				url: '#',
+				icon: Settings2Icon,
+				items: [
+					{
+						title: 'General',
+						url: '#'
+					},
+					{
+						title: 'Team',
+						url: '#'
+					},
+					{
+						title: 'Billing',
+						url: '#'
+					},
+					{
+						title: 'Limits',
+						url: '#'
+					}
+				]
+			}
+		],
+		projects: [
+			{
+				name: 'Design Engineering',
+				url: '#',
+				icon: FrameIcon
+			},
+			{
+				name: 'Sales & Marketing',
+				url: '#',
+				icon: ChartPieIcon
+			},
+			{
+				name: 'Travel',
+				url: '#',
+				icon: MapIcon
+			}
+		]
+	};
+</script>
+
+<script lang="ts">
+	import NavMain from './nav-main.svelte';
+	import NavProjects from './nav-projects.svelte';
+	import NavUser from './nav-user.svelte';
+	import TeamSwitcher from './team-switcher.svelte';
+	import * as Sidebar from './ui/sidebar/index.js';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		collapsible = 'icon',
+		...restProps
+	}: ComponentProps<typeof Sidebar.Root> = $props();
+</script>
+
+<Sidebar.Root {collapsible} {...restProps}>
+	<Sidebar.Header>
+		<TeamSwitcher teams={data.teams} />
+	</Sidebar.Header>
+	<Sidebar.Content>
+		<NavMain items={data.navMain} />
+		<NavProjects projects={data.projects} />
+	</Sidebar.Content>
+	<Sidebar.Footer>
+		<NavUser user={data.user} />
+	</Sidebar.Footer>
+	<Sidebar.Rail />
+</Sidebar.Root>

package/dist/components/app-sidebar.svelte.d.ts

@@ -0,0 +1,9 @@
+declare const AppSidebar: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLElement | null | undefined;
+} & {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+}, {}, "ref">;
+type AppSidebar = ReturnType<typeof AppSidebar>;
+export default AppSidebar;

package/dist/components/nav-main.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import * as Collapsible from './ui/collapsible/index.js';
+	import * as Sidebar from './ui/sidebar/index.js';
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+
+	let {
+		items
+	}: {
+		items: {
+			title: string;
+			url: string;
+			// this should be `Component` after @lucide/svelte updates types
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			icon?: any;
+			isActive?: boolean;
+			items?: {
+				title: string;
+				url: string;
+			}[];
+		}[];
+	} = $props();
+</script>
+
+<Sidebar.Group>
+	<Sidebar.GroupLabel>Platform</Sidebar.GroupLabel>
+	<Sidebar.Menu>
+		{#each items as item (item.title)}
+			<Collapsible.Root open={item.isActive} class="group/collapsible">
+				{#snippet child({ props })}
+					<Sidebar.MenuItem {...props}>
+						<Collapsible.Trigger>
+							{#snippet child({ props })}
+								<Sidebar.MenuButton {...props} tooltipContent={item.title}>
+									{#if item.icon}
+										<item.icon />
+									{/if}
+									<span>{item.title}</span>
+									<ChevronRightIcon
+										class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
+									/>
+								</Sidebar.MenuButton>
+							{/snippet}
+						</Collapsible.Trigger>
+						<Collapsible.Content>
+							<Sidebar.MenuSub>
+								{#each item.items ?? [] as subItem (subItem.title)}
+									<Sidebar.MenuSubItem>
+										<Sidebar.MenuSubButton>
+											{#snippet child({ props })}
+												<a href={subItem.url} {...props}>
+													<span>{subItem.title}</span>
+												</a>
+											{/snippet}
+										</Sidebar.MenuSubButton>
+									</Sidebar.MenuSubItem>
+								{/each}
+							</Sidebar.MenuSub>
+						</Collapsible.Content>
+					</Sidebar.MenuItem>
+				{/snippet}
+			</Collapsible.Root>
+		{/each}
+	</Sidebar.Menu>
+</Sidebar.Group>

package/dist/components/nav-main.svelte.d.ts

@@ -0,0 +1,15 @@
+type $$ComponentProps = {
+    items: {
+        title: string;
+        url: string;
+        icon?: any;
+        isActive?: boolean;
+        items?: {
+            title: string;
+            url: string;
+        }[];
+    }[];
+};
+declare const NavMain: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavMain = ReturnType<typeof NavMain>;
+export default NavMain;

package/dist/components/nav-projects.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import * as DropdownMenu from './ui/dropdown-menu/index.js';
+	import { useSidebar } from './ui/sidebar/context.svelte.js';
+	import * as Sidebar from './ui/sidebar/index.js';
+	import EllipsisIcon from '@lucide/svelte/icons/ellipsis';
+	import FolderIcon from '@lucide/svelte/icons/folder';
+	import ForwardIcon from '@lucide/svelte/icons/forward';
+	import Trash2Icon from '@lucide/svelte/icons/trash-2';
+
+	let {
+		projects
+	}: {
+		projects: {
+			name: string;
+			url: string;
+			// This should be `Component` after @lucide/svelte updates types
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			icon: any;
+		}[];
+	} = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+<Sidebar.Group class="group-data-[collapsible=icon]:hidden">
+	<Sidebar.GroupLabel>Projects</Sidebar.GroupLabel>
+	<Sidebar.Menu>
+		{#each projects as item (item.name)}
+			<Sidebar.MenuItem>
+				<Sidebar.MenuButton>
+					{#snippet child({ props })}
+						<a href={item.url} {...props}>
+							<item.icon />
+							<span>{item.name}</span>
+						</a>
+					{/snippet}
+				</Sidebar.MenuButton>
+				<DropdownMenu.Root>
+					<DropdownMenu.Trigger>
+						{#snippet child({ props })}
+							<Sidebar.MenuAction showOnHover {...props}>
+								<EllipsisIcon />
+								<span class="sr-only">More</span>
+							</Sidebar.MenuAction>
+						{/snippet}
+					</DropdownMenu.Trigger>
+					<DropdownMenu.Content
+						class="w-48 rounded-lg"
+						side={sidebar.isMobile ? 'bottom' : 'right'}
+						align={sidebar.isMobile ? 'end' : 'start'}
+					>
+						<DropdownMenu.Item>
+							<FolderIcon class="text-muted-foreground" />
+							<span>View Project</span>
+						</DropdownMenu.Item>
+						<DropdownMenu.Item>
+							<ForwardIcon class="text-muted-foreground" />
+							<span>Share Project</span>
+						</DropdownMenu.Item>
+						<DropdownMenu.Separator />
+						<DropdownMenu.Item>
+							<Trash2Icon class="text-muted-foreground" />
+							<span>Delete Project</span>
+						</DropdownMenu.Item>
+					</DropdownMenu.Content>
+				</DropdownMenu.Root>
+			</Sidebar.MenuItem>
+		{/each}
+		<Sidebar.MenuItem>
+			<Sidebar.MenuButton class="text-sidebar-foreground/70">
+				<EllipsisIcon class="text-sidebar-foreground/70" />
+				<span>More</span>
+			</Sidebar.MenuButton>
+		</Sidebar.MenuItem>
+	</Sidebar.Menu>
+</Sidebar.Group>

package/dist/components/nav-projects.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    projects: {
+        name: string;
+        url: string;
+        icon: any;
+    }[];
+};
+declare const NavProjects: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavProjects = ReturnType<typeof NavProjects>;
+export default NavProjects;

package/dist/components/nav-user.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import * as Avatar from './ui/avatar/index.js';
+	import * as DropdownMenu from './ui/dropdown-menu/index.js';
+	import * as Sidebar from './ui/sidebar/index.js';
+	import { useSidebar } from './ui/sidebar/index.js';
+	import BadgeCheckIcon from '@lucide/svelte/icons/badge-check';
+	import BellIcon from '@lucide/svelte/icons/bell';
+	import ChevronsUpDownIcon from '@lucide/svelte/icons/chevrons-up-down';
+	import CreditCardIcon from '@lucide/svelte/icons/credit-card';
+	import LogOutIcon from '@lucide/svelte/icons/log-out';
+	import SparklesIcon from '@lucide/svelte/icons/sparkles';
+
+	let { user }: { user: { name: string; email: string; avatar: string } } = $props();
+	const sidebar = useSidebar();
+</script>
+
+<Sidebar.Menu>
+	<Sidebar.MenuItem>
+		<DropdownMenu.Root>
+			<DropdownMenu.Trigger>
+				{#snippet child({ props })}
+					<Sidebar.MenuButton
+						size="lg"
+						class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+						{...props}
+					>
+						<Avatar.Root class="size-8 rounded-lg">
+							<Avatar.Image src={user.avatar} alt={user.name} />
+							<Avatar.Fallback class="rounded-lg">CN</Avatar.Fallback>
+						</Avatar.Root>
+						<div class="grid flex-1 text-left text-sm leading-tight">
+							<span class="truncate font-medium">{user.name}</span>
+							<span class="truncate text-xs">{user.email}</span>
+						</div>
+						<ChevronsUpDownIcon class="ml-auto size-4" />
+					</Sidebar.MenuButton>
+				{/snippet}
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Content
+				class="w-(--bits-dropdown-menu-anchor-width) min-w-56 rounded-lg"
+				side={sidebar.isMobile ? 'bottom' : 'right'}
+				align="end"
+				sideOffset={4}
+			>
+				<DropdownMenu.Label class="p-0 font-normal">
+					<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+						<Avatar.Root class="size-8 rounded-lg">
+							<Avatar.Image src={user.avatar} alt={user.name} />
+							<Avatar.Fallback class="rounded-lg">CN</Avatar.Fallback>
+						</Avatar.Root>
+						<div class="grid flex-1 text-left text-sm leading-tight">
+							<span class="truncate font-medium">{user.name}</span>
+							<span class="truncate text-xs">{user.email}</span>
+						</div>
+					</div>
+				</DropdownMenu.Label>
+				<DropdownMenu.Separator />
+				<DropdownMenu.Group>
+					<DropdownMenu.Item>
+						<SparklesIcon />
+						Upgrade to Pro
+					</DropdownMenu.Item>
+				</DropdownMenu.Group>
+				<DropdownMenu.Separator />
+				<DropdownMenu.Group>
+					<DropdownMenu.Item>
+						<BadgeCheckIcon />
+						Account
+					</DropdownMenu.Item>
+					<DropdownMenu.Item>
+						<CreditCardIcon />
+						Billing
+					</DropdownMenu.Item>
+					<DropdownMenu.Item>
+						<BellIcon />
+						Notifications
+					</DropdownMenu.Item>
+				</DropdownMenu.Group>
+				<DropdownMenu.Separator />
+				<DropdownMenu.Item>
+					<LogOutIcon />
+					Log out
+				</DropdownMenu.Item>
+			</DropdownMenu.Content>
+		</DropdownMenu.Root>
+	</Sidebar.MenuItem>
+</Sidebar.Menu>

package/dist/components/nav-user.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    user: {
+        name: string;
+        email: string;
+        avatar: string;
+    };
+};
+declare const NavUser: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavUser = ReturnType<typeof NavUser>;
+export default NavUser;

package/dist/components/sidebar-07/+page.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import AppSidebar from '../app-sidebar.svelte';
+	import * as Breadcrumb from '../ui/breadcrumb/index.js';
+	import { Separator } from '../ui/separator/index.js';
+	import * as Sidebar from '../ui/sidebar/index.js';
+</script>
+
+<Sidebar.Provider>
+	<AppSidebar />
+	<Sidebar.Inset>
+		<header
+			class="group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear"
+		>
+			<div class="flex items-center gap-2 px-4">
+				<Sidebar.Trigger class="-ml-1" />
+				<Separator orientation="vertical" class="mr-2 data-[orientation=vertical]:h-4" />
+				<Breadcrumb.Root>
+					<Breadcrumb.List>
+						<Breadcrumb.Item class="hidden md:block">
+							<Breadcrumb.Link href="#">Building Your Application</Breadcrumb.Link>
+						</Breadcrumb.Item>
+						<Breadcrumb.Separator class="hidden md:block" />
+						<Breadcrumb.Item>
+							<Breadcrumb.Page>Data Fetching</Breadcrumb.Page>
+						</Breadcrumb.Item>
+					</Breadcrumb.List>
+				</Breadcrumb.Root>
+			</div>
+		</header>
+		<div class="flex flex-1 flex-col gap-4 p-4 pt-0">
+			<div class="grid auto-rows-min gap-4 md:grid-cols-3">
+				<div class="bg-muted/50 aspect-video rounded-xl"></div>
+				<div class="bg-muted/50 aspect-video rounded-xl"></div>
+				<div class="bg-muted/50 aspect-video rounded-xl"></div>
+			</div>
+			<div class="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min"></div>
+		</div>
+	</Sidebar.Inset>
+</Sidebar.Provider>

package/dist/components/sidebar-07/+page.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Page: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Page = InstanceType<typeof Page>;
+export default Page;

package/dist/components/team-switcher.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import * as DropdownMenu from './ui/dropdown-menu/index.js';
+	import * as Sidebar from './ui/sidebar/index.js';
+	import { useSidebar } from './ui/sidebar/index.js';
+	import ChevronsUpDownIcon from '@lucide/svelte/icons/chevrons-up-down';
+	import PlusIcon from '@lucide/svelte/icons/plus';
+
+	// This should be `Component` after @lucide/svelte updates types
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	let { teams }: { teams: { name: string; logo: any; plan: string }[] } = $props();
+	const sidebar = useSidebar();
+
+	let activeTeam = $state(teams[0]);
+</script>
+
+<Sidebar.Menu>
+	<Sidebar.MenuItem>
+		<DropdownMenu.Root>
+			<DropdownMenu.Trigger>
+				{#snippet child({ props })}
+					<Sidebar.MenuButton
+						{...props}
+						size="lg"
+						class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+					>
+						<div
+							class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
+						>
+							<activeTeam.logo class="size-4" />
+						</div>
+						<div class="grid flex-1 text-left text-sm leading-tight">
+							<span class="truncate font-medium">
+								{activeTeam.name}
+							</span>
+							<span class="truncate text-xs">{activeTeam.plan}</span>
+						</div>
+						<ChevronsUpDownIcon class="ml-auto" />
+					</Sidebar.MenuButton>
+				{/snippet}
+			</DropdownMenu.Trigger>
+			<DropdownMenu.Content
+				class="w-(--bits-dropdown-menu-anchor-width) min-w-56 rounded-lg"
+				align="start"
+				side={sidebar.isMobile ? 'bottom' : 'right'}
+				sideOffset={4}
+			>
+				<DropdownMenu.Label class="text-muted-foreground text-xs">Teams</DropdownMenu.Label>
+				{#each teams as team, index (team.name)}
+					<DropdownMenu.Item onSelect={() => (activeTeam = team)} class="gap-2 p-2">
+						<div class="flex size-6 items-center justify-center rounded-md border">
+							<team.logo class="size-3.5 shrink-0" />
+						</div>
+						{team.name}
+						<DropdownMenu.Shortcut>⌘{index + 1}</DropdownMenu.Shortcut>
+					</DropdownMenu.Item>
+				{/each}
+				<DropdownMenu.Separator />
+				<DropdownMenu.Item class="gap-2 p-2">
+					<div class="flex size-6 items-center justify-center rounded-md border bg-transparent">
+						<PlusIcon class="size-4" />
+					</div>
+					<div class="text-muted-foreground font-medium">Add team</div>
+				</DropdownMenu.Item>
+			</DropdownMenu.Content>
+		</DropdownMenu.Root>
+	</Sidebar.MenuItem>
+</Sidebar.Menu>

package/dist/components/team-switcher.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    teams: {
+        name: string;
+        logo: any;
+        plan: string;
+    }[];
+};
+declare const TeamSwitcher: import("svelte").Component<$$ComponentProps, {}, "">;
+type TeamSwitcher = ReturnType<typeof TeamSwitcher>;
+export default TeamSwitcher;

package/dist/components/ui/alert/alert-description.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-description"
+	class={cn(
+		'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/alert/alert-description.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const AlertDescription: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type AlertDescription = ReturnType<typeof AlertDescription>;
+export default AlertDescription;

package/dist/components/ui/alert/alert-title.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-title"
+	class={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/alert/alert-title.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+declare const AlertTitle: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type AlertTitle = ReturnType<typeof AlertTitle>;
+export default AlertTitle;