@orochibraru/ui 0.0.0-stage → 0.0.0

package/dist/components/blocks/install-prompt.svelte.d.ts

@@ -0,0 +1,19 @@
+import { type Snippet } from "svelte";
+declare const InstallPrompt: import("svelte").Component<{
+    appName: string;
+    storageKey: string;
+    brand?: Snippet;
+    title?: string;
+    messages?: Partial<{
+        description: string;
+        appleShare: string;
+        appleAdd: string;
+        menuOpen: string;
+        menuInstall: string;
+        gotIt: string;
+        install: string;
+        notNow: string;
+    }>;
+}, {}, "">;
+type InstallPrompt = ReturnType<typeof InstallPrompt>;
+export default InstallPrompt;

package/dist/components/blocks/responsive-sheet.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { MediaQuery } from "svelte/reactivity";
+
+	import * as Dialog from "../ui/dialog/index.js";
+	import * as Drawer from "../ui/drawer/index.js";
+
+	interface Props {
+		open: boolean;
+		title: string;
+		description?: string;
+		wide?: boolean;
+		children: Snippet;
+	}
+
+	let {
+		open = $bindable(),
+		title,
+		description,
+		wide = false,
+		children,
+	}: Props = $props();
+
+	const desktop = new MediaQuery("(min-width: 768px)");
+</script>
+
+{#if desktop.current}
+	<Dialog.Root bind:open>
+		<Dialog.Content
+			class="max-h-[calc(100dvh-4rem)] grid-rows-[auto_minmax(0,1fr)] {wide
+				? 'sm:max-w-xl'
+				: 'sm:max-w-md'}"
+		>
+			<Dialog.Header>
+				<Dialog.Title>{title}</Dialog.Title>
+				{#if description}
+					<Dialog.Description>{description}</Dialog.Description>
+				{/if}
+			</Dialog.Header>
+			<div class="-mx-6 grid min-h-0 gap-6 overflow-y-auto px-6">
+				{@render children()}
+			</div>
+		</Dialog.Content>
+	</Dialog.Root>
+{:else}
+	<Drawer.Root bind:open>
+		<Drawer.Content>
+			<Drawer.Header class="px-5 text-left">
+				<Drawer.Title>{title}</Drawer.Title>
+				{#if description}
+					<Drawer.Description>{description}</Drawer.Description>
+				{/if}
+			</Drawer.Header>
+			<div class="min-h-0 overflow-y-auto px-5">
+				{@render children()}
+			</div>
+		</Drawer.Content>
+	</Drawer.Root>
+{/if}

package/dist/components/blocks/responsive-sheet.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+interface Props {
+    open: boolean;
+    title: string;
+    description?: string;
+    wide?: boolean;
+    children: Snippet;
+}
+declare const ResponsiveSheet: import("svelte").Component<Props, {}, "open">;
+type ResponsiveSheet = ReturnType<typeof ResponsiveSheet>;
+export default ResponsiveSheet;

package/dist/components/blocks/setting-switch.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { Switch } from "../ui/switch/index.js";
+
+	interface Props {
+		name: string;
+		label: string;
+		description: string;
+		checked: boolean;
+		disabled?: boolean;
+	}
+
+	const {
+		name,
+		label,
+		description,
+		checked,
+		disabled = false,
+	}: Props = $props();
+
+	const id = $derived(`setting-${name}`);
+</script>
+
+<div class="flex items-start justify-between gap-4 py-4 first:pt-0 last:pb-0">
+	<label for={id} class="min-w-0 cursor-pointer">
+		<span class="block font-medium">{label}</span>
+		<span class="text-muted-foreground mt-0.5 block text-sm">{description}</span
+		>
+	</label>
+	<Switch {id} {name} value="true" {checked} {disabled} class="mt-1 shrink-0" />
+</div>

package/dist/components/blocks/setting-switch.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    name: string;
+    label: string;
+    description: string;
+    checked: boolean;
+    disabled?: boolean;
+}
+declare const SettingSwitch: import("svelte").Component<Props, {}, "">;
+type SettingSwitch = ReturnType<typeof SettingSwitch>;
+export default SettingSwitch;

package/dist/components/blocks/stat-card.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { Component } from "svelte";
+
+	interface Props {
+		label: string;
+		value: string | number;
+		hint?: string;
+		href?: string;
+		icon: Component<{ class?: string }>;
+		tone?: "default" | "positive" | "warning";
+	}
+
+	const {
+		label,
+		value,
+		hint,
+		href,
+		icon: Icon,
+		tone = "default",
+	}: Props = $props();
+
+	const toneClass = $derived(
+		{
+			default: "bg-accent text-accent-foreground",
+			positive: "bg-positive/15 text-positive",
+			warning: "bg-destructive/10 text-destructive",
+		}[tone],
+	);
+</script>
+
+<svelte:element
+	this={href ? "a" : "div"}
+	{href}
+	class="glass flex items-start gap-3 rounded-2xl p-4 transition-colors {href
+		? 'hover:border-primary/40 active:bg-muted'
+		: ''}"
+>
+	<div
+		class="flex size-10 shrink-0 items-center justify-center rounded-xl {toneClass}"
+	>
+		<Icon class="size-5" />
+	</div>
+	<div class="min-w-0">
+		<p class="text-muted-foreground text-sm">
+			{label}
+		</p>
+		<p class="mt-0.5 truncate text-xl font-semibold tabular">{value}</p>
+		{#if hint}
+			<p class="text-muted-foreground mt-0.5 truncate text-xs">{hint}</p>
+		{/if}
+	</div>
+</svelte:element>

package/dist/components/blocks/stat-card.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Component } from "svelte";
+interface Props {
+    label: string;
+    value: string | number;
+    hint?: string;
+    href?: string;
+    icon: Component<{
+        class?: string;
+    }>;
+    tone?: "default" | "positive" | "warning";
+}
+declare const StatCard: Component<Props, {}, "">;
+type StatCard = ReturnType<typeof StatCard>;
+export default StatCard;

package/dist/components/blocks/top-loading-bar.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { navigating } from "$app/state";
+	import { untrack } from "svelte";
+	import { cubicOut } from "svelte/easing";
+	import { Tween } from "svelte/motion";
+	import { fade } from "svelte/transition";
+
+	const { label = "Loading page" }: { label?: string } = $props();
+
+	const progress = new Tween(0, { duration: 300, easing: cubicOut });
+
+	let visible = $state(false);
+
+	$effect(() => {
+		const complete = navigating.complete;
+		if (!complete) {
+			return;
+		}
+		let creep: ReturnType<typeof setInterval> | undefined;
+		untrack(() => {
+			visible = true;
+			void progress.set(0, { duration: 0 });
+			creep = setInterval(() => {
+				progress.target = progress.current + (0.9 - progress.current) * 0.15;
+			}, 120);
+		});
+		void complete
+			.catch(() => {})
+			.then(async () => {
+				clearInterval(creep);
+				await progress.set(1);
+				visible = false;
+			});
+		return () => clearInterval(creep);
+	});
+</script>
+
+{#if visible}
+	<div
+		class="pointer-events-none fixed inset-x-0 top-0 z-60 h-0.5"
+		style="top: env(safe-area-inset-top)"
+		role="progressbar"
+		aria-label={label}
+		aria-valuemin={0}
+		aria-valuemax={100}
+		aria-valuenow={Math.round(progress.current * 100)}
+		out:fade={{ duration: 200 }}
+	>
+		<div
+			class="bg-primary h-full shadow-[0_0_8px_var(--primary)]"
+			style="width: {progress.current * 100}%"
+		></div>
+	</div>
+{/if}

package/dist/components/blocks/top-loading-bar.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    label?: string;
+};
+declare const TopLoadingBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type TopLoadingBar = ReturnType<typeof TopLoadingBar>;
+export default TopLoadingBar;

package/dist/components/ui/accordion/accordion-content.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+
+	import { cn, type WithoutChild } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.ContentProps> = $props();
+</script>
+
+<AccordionPrimitive.Content
+	bind:ref
+	data-slot="accordion-content"
+	class="data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden"
+	{...restProps}
+>
+	<div
+		class={cn(
+			"pt-0 pb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+			className,
+		)}
+	>
+		{@render children?.()}
+	</div>
+</AccordionPrimitive.Content>

package/dist/components/ui/accordion/accordion-content.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Accordion as AccordionPrimitive } from "bits-ui";
+declare const AccordionContent: import("svelte").Component<Omit<AccordionPrimitive.ContentProps, "child">, {}, "ref">;
+type AccordionContent = ReturnType<typeof AccordionContent>;
+export default AccordionContent;

package/dist/components/ui/accordion/accordion-item.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AccordionPrimitive.ItemProps = $props();
+</script>
+
+<AccordionPrimitive.Item
+	bind:ref
+	data-slot="accordion-item"
+	class={cn("not-last:border-b", className)}
+	{...restProps}
+/>

package/dist/components/ui/accordion/accordion-item.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Accordion as AccordionPrimitive } from "bits-ui";
+declare const AccordionItem: import("svelte").Component<AccordionPrimitive.ItemProps, {}, "ref">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;

package/dist/components/ui/accordion/accordion-trigger.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+	import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+
+	import { cn, type WithoutChild } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 3,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.TriggerProps> & {
+		level?: AccordionPrimitive.HeaderProps["level"];
+	} = $props();
+</script>
+
+<AccordionPrimitive.Header {level} class="flex">
+	<AccordionPrimitive.Trigger
+		data-slot="accordion-trigger"
+		bind:ref
+		class={cn(
+			"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50",
+			className,
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<ChevronDownIcon
+			data-slot="accordion-trigger-icon"
+			class="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+		/>
+		<ChevronUpIcon
+			data-slot="accordion-trigger-icon"
+			class="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+		/>
+	</AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>

package/dist/components/ui/accordion/accordion-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Accordion as AccordionPrimitive } from "bits-ui";
+import { type WithoutChild } from "../../../utils.js";
+type $$ComponentProps = WithoutChild<AccordionPrimitive.TriggerProps> & {
+    level?: AccordionPrimitive.HeaderProps["level"];
+};
+declare const AccordionTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type AccordionTrigger = ReturnType<typeof AccordionTrigger>;
+export default AccordionTrigger;

package/dist/components/ui/accordion/accordion.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from "bits-ui";
+
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		...restProps
+	}: AccordionPrimitive.RootProps = $props();
+</script>
+
+<AccordionPrimitive.Root
+	bind:ref
+	bind:value={value as never}
+	data-slot="accordion"
+	class={cn("flex w-full flex-col", className)}
+	{...restProps}
+/>

package/dist/components/ui/accordion/accordion.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Accordion as AccordionPrimitive } from "bits-ui";
+declare const Accordion: import("svelte").Component<AccordionPrimitive.RootProps, {}, "ref" | "value">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/ui/accordion/index.d.ts

@@ -0,0 +1,5 @@
+import Content from "./accordion-content.svelte";
+import Item from "./accordion-item.svelte";
+import Trigger from "./accordion-trigger.svelte";
+import Root from "./accordion.svelte";
+export { Root, Content, Item, Trigger, Root as Accordion, Content as AccordionContent, Item as AccordionItem, Trigger as AccordionTrigger, };

package/dist/components/ui/accordion/index.js

@@ -0,0 +1,7 @@
+import Content from "./accordion-content.svelte";
+import Item from "./accordion-item.svelte";
+import Trigger from "./accordion-trigger.svelte";
+import Root from "./accordion.svelte";
+export { Root, Content, Item, Trigger, 
+//
+Root as Accordion, Content as AccordionContent, Item as AccordionItem, Trigger as AccordionTrigger, };

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

@@ -0,0 +1,21 @@
+<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-action"
+	class={cn("absolute top-2.5 right-3", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

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

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

@@ -0,0 +1,24 @@
+<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 text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+		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,24 @@
+<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(
+		"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+		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;

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

@@ -0,0 +1,45 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const alertVariants = tv({
+		base: "grid gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 group/alert relative w-full",
+		variants: {
+			variant: {
+				default: "bg-card text-card-foreground",
+				destructive:
+					"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: AlertVariant;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert"
+	role="alert"
+	class={cn(alertVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,26 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const alertVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: "bg-card text-card-foreground";
+        destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current";
+    };
+}, undefined, "grid gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 group/alert relative w-full", {
+    variant: {
+        default: "bg-card text-card-foreground";
+        destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        default: "bg-card text-card-foreground";
+        destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current";
+    };
+}, undefined>>;
+export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    variant?: AlertVariant;
+};
+declare const Alert: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/components/ui/alert/index.d.ts

@@ -0,0 +1,6 @@
+import Action from "./alert-action.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+import Root from "./alert.svelte";
+export { alertVariants, type AlertVariant } from "./alert.svelte";
+export { Root, Description, Title, Action, Root as Alert, Description as AlertDescription, Title as AlertTitle, Action as AlertAction, };

package/dist/components/ui/alert/index.js

@@ -0,0 +1,8 @@
+import Action from "./alert-action.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+import Root from "./alert.svelte";
+export { alertVariants } from "./alert.svelte";
+export { Root, Description, Title, Action, 
+//
+Root as Alert, Description as AlertDescription, Title as AlertTitle, Action as AlertAction, };

package/dist/components/ui/alert-dialog/alert-dialog-action.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	import {
+		type ButtonSize,
+		type ButtonVariant,
+		buttonVariants,
+	} from "../button/index.js";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		size = "default",
+		...restProps
+	}: AlertDialogPrimitive.ActionProps & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+	} = $props();
+</script>
+
+<AlertDialogPrimitive.Action
+	bind:ref
+	data-slot="alert-dialog-action"
+	class={cn(buttonVariants({ variant, size }), "", className)}
+	{...restProps}
+/>

package/dist/components/ui/alert-dialog/alert-dialog-action.svelte.d.ts

@@ -0,0 +1,9 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+import { type ButtonSize, type ButtonVariant } from "../button/index.js";
+type $$ComponentProps = AlertDialogPrimitive.ActionProps & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+};
+declare const AlertDialogAction: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type AlertDialogAction = ReturnType<typeof AlertDialogAction>;
+export default AlertDialogAction;