@svadmin/ui 0.70.0 → 0.73.0

package/dist/components/ui/button/button.svelte

@@ -2,24 +2,29 @@
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
 	import {
-		buttonVariants as variants,
-		type ButtonSize as Size,
-		type ButtonVariant as Variant,
+		buttonVariants as resolveButtonVariants,
+		type ButtonSize as ButtonSizeValue,
+		type ButtonVariant as ButtonVariantValue,
 	} from "./button-variants.js";
 
-	export const buttonVariants = variants;
-	export type ButtonSize = Size;
-	export type ButtonVariant = Variant;
+	export { buttonVariants, type ButtonSize, type ButtonVariant } from "./button-variants.js";
 
-	export type ButtonProps = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> &
-		WithElementRef<HTMLAnchorAttributes, HTMLAnchorElement> & {
-			variant?: ButtonVariant;
-			size?: ButtonSize;
+	export type ButtonProps = WithElementRef<
+		HTMLButtonAttributes & HTMLAnchorAttributes,
+		HTMLButtonElement | HTMLAnchorElement
+	> & {
+			variant?: ButtonVariantValue;
+			size?: ButtonSizeValue;
+			disabledReason?: string;
+			restrictionClass?: string;
+			restrictionStyle?: string;
 		};
 </script>
 
 <script lang="ts">
-/* eslint-disable no-useless-assignment, @typescript-eslint/no-explicit-any */
+	import * as Tooltip from "../tooltip/index.js";
+
+	const uid = $props.id();
 	let {
 		class: className,
 		variant = "default",
@@ -28,45 +33,96 @@
 		href = undefined,
 		type = "button",
 		disabled,
+		disabledReason = "",
+		restrictionClass,
+		restrictionStyle,
 		children,
+		"aria-describedby": ariaDescribedBy,
 		...restProps
 	}: ButtonProps = $props();
 
-	let anchorRef: HTMLAnchorElement | null = $state(null);
-	let buttonRef: HTMLButtonElement | null = $state(null);
+	const restriction = $derived((disabledReason ?? "").trim());
+	const isDisabled = $derived(Boolean(disabled || restriction));
+	const restrictionId = `svadmin-button-restriction-${uid}`;
+	const describedBy = $derived(
+		[ariaDescribedBy, restriction ? restrictionId : ""].filter(Boolean).join(" ") || undefined,
+	);
 
-	$effect(() => {
-		if (href && anchorRef) ref = anchorRef as any;
-		else if (!href && buttonRef) ref = buttonRef as any;
-	});
+	function restrictionTriggerProps(props: Record<string, unknown>): Record<string, unknown> {
+		const next = { ...props };
+		delete next['type'];
+		delete next['role'];
+		delete next['disabled'];
+		delete next['href'];
+		return next;
+	}
 </script>
 
-{#if href}
-	<a
-		bind:this={anchorRef}
-		data-slot="button"
-		data-variant={variant}
-		data-size={size}
-		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>
+{#snippet control()}
+	{#if href}
+		<a
+			bind:this={ref}
+			data-slot="button"
+			data-variant={variant}
+			data-size={size}
+			class={cn(resolveButtonVariants({ variant, size }), className)}
+			href={isDisabled ? undefined : href}
+			aria-disabled={isDisabled ? true : undefined}
+			role={isDisabled ? "link" : undefined}
+			tabindex={isDisabled ? -1 : undefined}
+			aria-describedby={describedBy}
+			{...restProps}
+			onclick={(event) => {
+				if (isDisabled) {
+					event.preventDefault();
+					event.stopImmediatePropagation();
+					return;
+				}
+				restProps.onclick?.(event);
+			}}
+		>
+			{@render children?.()}
+		</a>
+	{:else}
+		<button
+			bind:this={ref}
+			data-slot="button"
+			data-variant={variant}
+			data-size={size}
+			class={cn(resolveButtonVariants({ variant, size }), className)}
+			{type}
+			disabled={isDisabled}
+			aria-describedby={describedBy}
+			{...restProps}
+		>
+			{@render children?.()}
+		</button>
+	{/if}
+{/snippet}
+
+{#if restriction}
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			{#snippet child({ props })}
+				{@const triggerProps = restrictionTriggerProps(props as Record<string, unknown>)}
+				<span
+					{...triggerProps}
+					data-slot="button-restriction"
+					data-disabled-reason={restriction}
+					role="group"
+					aria-label={restProps["aria-label"]}
+					aria-labelledby={restProps["aria-labelledby"]}
+					class={restrictionClass}
+					style={`display: inline-flex; max-width: 100%; ${restrictionStyle ?? ""}`}
+					aria-describedby={[triggerProps["aria-describedby"], describedBy].filter(Boolean).join(" ") || undefined}
+				>
+					{@render control()}
+					<span id={restrictionId} class="svadmin-sr-only">{restriction}</span>
+				</span>
+			{/snippet}
+		</Tooltip.Trigger>
+		<Tooltip.Content side="top" sideOffset={6}>{restriction}</Tooltip.Content>
+	</Tooltip.Root>
 {:else}
-	<button
-		bind:this={buttonRef}
-		data-slot="button"
-		data-variant={variant}
-		data-size={size}
-		class={cn(buttonVariants({ variant, size }), className)}
-		{type}
-		{disabled}
-		{...restProps}
-	>
-		{@render children?.()}
-	</button>
+	{@render control()}
 {/if}

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

@@ -1,17 +1,13 @@
 import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
-import { type ButtonSize as Size, type ButtonVariant as Variant } from "./button-variants.js";
-export declare const buttonVariants: ({ variant, size, class: className, className: extraClassName, }?: {
-    variant?: Variant | null;
-    size?: Size | null;
-    class?: Parameters<(...inputs: import("cn").ClassValue[]) => string>[number];
-    className?: Parameters<(...inputs: import("cn").ClassValue[]) => string>[number];
-}) => string;
-export type ButtonSize = Size;
-export type ButtonVariant = Variant;
-export type ButtonProps = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> & WithElementRef<HTMLAnchorAttributes, HTMLAnchorElement> & {
-    variant?: ButtonVariant;
-    size?: ButtonSize;
+import { type ButtonSize as ButtonSizeValue, type ButtonVariant as ButtonVariantValue } from "./button-variants.js";
+export { buttonVariants, type ButtonSize, type ButtonVariant } from "./button-variants.js";
+export type ButtonProps = WithElementRef<HTMLButtonAttributes & HTMLAnchorAttributes, HTMLButtonElement | HTMLAnchorElement> & {
+    variant?: ButtonVariantValue;
+    size?: ButtonSizeValue;
+    disabledReason?: string;
+    restrictionClass?: string;
+    restrictionStyle?: string;
 };
 declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
 type Button = ReturnType<typeof Button>;

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

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
 import Root, { buttonVariants, } from "./button.svelte";
 export { Root, 
 //

package/dist/components/ui/command/command-dialog.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
   import { Command as CommandPrimitive, Dialog as DialogPrimitive } from 'bits-ui';
   import Root from './command.svelte';
   import * as Dialog from '../dialog/index.js';
@@ -24,7 +26,7 @@
   }: Props = $props();
 </script>
 
-<Dialog.Dialog bind:open {onOpenChange} {onOpenChangeComplete}>
+<Dialog.Dialog bind:open {...definedOptions({ "onOpenChange": onOpenChange })} {...definedOptions({ "onOpenChangeComplete": onOpenChangeComplete })}>
   <Dialog.DialogContent
     data-cmdk-dialog=""
     class="svadmin-command-dialog-content"

package/dist/components/ui/command/command-dialog.svelte.d.ts

@@ -6,6 +6,6 @@ type Props = Omit<CommandPrimitive.RootProps, 'children' | 'value'> & Omit<Dialo
     class?: string;
     children?: Snippet;
 };
-declare const CommandDialog: import("svelte").Component<Props, {}, "value" | "open">;
+declare const CommandDialog: import("svelte").Component<Props, {}, "open" | "value">;
 type CommandDialog = ReturnType<typeof CommandDialog>;
 export default CommandDialog;

package/dist/components/ui/command/command-group.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
 	import { Command as CommandPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
@@ -22,8 +24,8 @@
 	data-slot="command-group"
 	data-cmdk-group=""
 	class={cn("svadmin-command-group", className)}
-	value={value ?? heading}
-	forceMount={alwaysRender ?? forceMount}
+	{...definedOptions({ "value": value ?? heading })}
+	{...definedOptions({ "forceMount": alwaysRender ?? forceMount })}
 	{...restProps}
 >
 	{#if heading}

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

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
 	import { Command as CommandPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 	import type { Snippet } from "svelte";
@@ -22,7 +24,7 @@
 	}: Props = $props();
 
 	function handleSelect() {
-		onSelect?.(value || ref?.dataset.value || ref?.textContent?.trim() || "");
+		onSelect?.(value || ref?.dataset['value'] || ref?.textContent?.trim() || "");
 	}
 </script>
 
@@ -32,7 +34,7 @@
 	data-cmdk-item=""
 	class={cn("svadmin-command-item", className)}
 	{value}
-	forceMount={alwaysRender ?? forceMount}
+	{...definedOptions({ "forceMount": alwaysRender ?? forceMount })}
 	onSelect={handleSelect}
 	{...restProps}
 >

package/dist/components/ui/command/command-separator.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { definedOptions } from '@svadmin/core/options';
+
 	import { Command as CommandPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
 
@@ -18,6 +20,6 @@
 	data-slot="command-separator"
 	data-cmdk-separator=""
 	class={cn("svadmin-command-separator", className)}
-	forceMount={alwaysRender ?? forceMount}
+	{...definedOptions({ "forceMount": alwaysRender ?? forceMount })}
 	{...restProps}
 />

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

@@ -14,7 +14,7 @@ declare const Command: {
         value?: string;
         class?: string;
         children?: import("svelte").Snippet;
-    }, {}, "value" | "open">;
+    }, {}, "open" | "value">;
     Empty: import("svelte").Component<import("bits-ui").CommandEmptyProps, {}, "ref">;
     Group: import("svelte").Component<Omit<{
         value?: string;
@@ -22,8 +22,8 @@ declare const Command: {
     }, "children" | "child"> & {
         child?: import("svelte").Snippet<[{
             props: Record<string, unknown>;
-        }]> | undefined;
-        children?: import("svelte").Snippet<[]> | undefined;
+        }]>;
+        children?: import("svelte").Snippet<[]>;
         style?: import("bits-ui").StyleProperties | string | null | undefined;
         ref?: HTMLElement | null | undefined;
     } & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").CommandGroupPropsWithoutHTML> & {
@@ -44,8 +44,8 @@ declare const Command: {
     }, "children" | "child"> & {
         child?: import("svelte").Snippet<[{
             props: Record<string, unknown>;
-        }]> | undefined;
-        children?: import("svelte").Snippet<[]> | undefined;
+        }]>;
+        children?: import("svelte").Snippet<[]>;
         style?: import("bits-ui").StyleProperties | string | null | undefined;
         ref?: HTMLElement | null | undefined;
     } & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").CommandSeparatorPropsWithoutHTML> & {

package/dist/components/ui/input/input.svelte

@@ -3,53 +3,70 @@
 	generics="Type extends HTMLInputTypeAttribute | undefined = undefined"
 >
 	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
+	import { useTranslation } from "@svadmin/core/i18n";
+	import { definedOptions } from "@svadmin/core/options";
 	import { cn, type WithElementRef } from "../../../utils.js";
 
-	type InputValue = HTMLInputAttributes["value"];
+	type InputValue = Type extends "number" | "range"
+		? number | null | undefined
+		: string | null | undefined;
 
-	type Props = WithElementRef<
-		Omit<HTMLInputAttributes, "type" | "value"> &
+	type Props = WithElementRef<Omit<HTMLInputAttributes, "type" | "value">> &
 			(Type extends "file"
 				? { type: "file"; files?: FileList; value?: never }
-				: { type?: Type; files?: undefined; value?: InputValue })
-	>;
+				: { type?: Type; files?: undefined; value?: InputValue });
 
 	let {
 		ref = $bindable(null),
 		value = $bindable(),
 		type,
 		files = $bindable(),
+		disabled,
 		class: className,
 		"data-slot": dataSlot = "input",
 		...restProps
 	}: Props = $props();
 
+	const i18n = useTranslation();
 	const isFileInput = $derived(type?.toLowerCase() === "file");
+	const isDateInput = $derived(["date", "datetime-local", "month", "week", "time"].includes(type?.toLowerCase() ?? ""));
+	const attributes = $derived(definedOptions({ ...restProps, disabled }));
+	const selectedFiles = $derived(files ? Array.from(files) : []);
+	const selectedFileLabel = $derived.by(() => {
+		const firstFile = selectedFiles[0];
+		if (firstFile === undefined) return i18n.t("common.noFileChosen");
+		if (selectedFiles.length === 1) return firstFile.name;
+		return i18n.t("common.filesSelected", { count: selectedFiles.length });
+	});
 </script>
 
 {#if isFileInput}
-	<input
-		bind:this={ref}
-		data-slot={dataSlot}
-		data-input-type="file"
-		class={cn(
-			"svadmin-input",
-			className
-		)}
-		type="file"
-		bind:files
-		{...restProps}
-	/>
+	<div
+		class={cn("svadmin-file-input", className)}
+		data-disabled={disabled ? "true" : undefined}
+	>
+		<input
+			bind:this={ref}
+			data-slot={dataSlot}
+			data-input-type="file"
+			class={cn("svadmin-input", className)}
+			type="file"
+			bind:files
+			{...attributes}
+		/>
+		<span class="svadmin-file-input__visual" aria-hidden="true">
+			<span class="svadmin-file-input__button">{i18n.t("common.chooseFile")}</span>
+			<span class="svadmin-file-input__name">{selectedFileLabel}</span>
+		</span>
+	</div>
 {:else}
 	<input
 		bind:this={ref}
 		data-slot={dataSlot}
-		class={cn(
-			"svadmin-input",
-			className
-		)}
-		{type}
-		bind:value
-		{...restProps}
+			class={cn("svadmin-input", className)}
+			{type}
+			lang={isDateInput ? i18n.locale : undefined}
+			bind:value
+		{...attributes}
 	/>
 {/if}

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

@@ -1,15 +1,16 @@
 import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
-import { type WithElementRef } from "../../../utils.js";
 declare function $$render<Type extends HTMLInputTypeAttribute | undefined = undefined>(): {
-    props: WithElementRef<Omit<HTMLInputAttributes, "type" | "value"> & (Type extends "file" ? {
+    props: Omit<HTMLInputAttributes, "type" | "value"> & {
+        ref?: HTMLElement | null;
+    } & (Type extends "file" ? {
         type: "file";
         files?: FileList;
         value?: never;
     } : {
         type?: Type;
         files?: undefined;
-        value?: any;
-    })>;
+        value?: Type extends "number" | "range" ? number | null | undefined : string | null | undefined;
+    });
     exports: {};
     bindings: "value" | "ref" | "files";
     slots: {};

package/dist/components/ui/sheet/sheet.svelte

@@ -50,6 +50,7 @@
 		open?: boolean;
 		side?: "left" | "right";
 		onClose?: () => void;
+		onCloseRequest?: (close: () => void) => void;
 		closeLabel?: string;
 	};
 
@@ -58,6 +59,7 @@
 		open = $bindable(false),
 		side = "right",
 		onClose,
+		onCloseRequest,
 		closeLabel = "Close",
 		class: className,
 		tabindex = -1,
@@ -66,8 +68,12 @@
 	}: Props = $props();
 
 	function close() {
-		open = false;
-		onClose?.();
+		const commitClose = () => {
+			open = false;
+			onClose?.();
+		};
+		if (onCloseRequest) onCloseRequest(commitClose);
+		else commitClose();
 	}
 
 	function isContentEditableHost(element: HTMLElement) {
@@ -124,7 +130,7 @@
 			last?.focus();
 		} else if (!event.shiftKey && activeIndex === tabbable.length - 1) {
 			event.preventDefault();
-			first.focus();
+			first?.focus();
 		}
 	}
 

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

@@ -4,6 +4,7 @@ type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     open?: boolean;
     side?: "left" | "right";
     onClose?: () => void;
+    onCloseRequest?: (close: () => void) => void;
     closeLabel?: string;
 };
 declare const Sheet: import("svelte").Component<Props, {}, "open" | "ref">;

package/dist/components/ui/textarea/textarea.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { HTMLTextareaAttributes } from "svelte/elements";
 	import { cn, type WithElementRef } from "../../../utils.js";
+	import { uiTextarea } from "../../../styled-system/recipes/index.js";
 
 	type Props = WithElementRef<HTMLTextareaAttributes, HTMLTextAreaElement>;
 
@@ -15,7 +16,7 @@
 <textarea
 	bind:this={ref}
 	data-slot="textarea"
-	class={cn("svadmin-textarea", className)}
+	class={cn("svadmin-textarea", uiTextarea(), className)}
 	bind:value
 	{...restProps}
 ></textarea>

package/dist/components/ui/tooltip/tooltip.svelte

@@ -1,4 +1,6 @@
 <script lang="ts" generics="Payload = never">
+  import { definedOptions } from '@svadmin/core/options';
+
 	import { Tooltip as TooltipPrimitive } from "bits-ui";
 	import { onDestroy } from "svelte";
 	import TooltipProvider from "./tooltip-provider.svelte";
@@ -62,8 +64,8 @@
 	<TooltipPrimitive.Root
 		bind:open
 		bind:triggerId
-		{disableHoverableContent}
-		{onOpenChange}
+		{...definedOptions({ "disableHoverableContent": disableHoverableContent })}
+		{...definedOptions({ "onOpenChange": onOpenChange })}
 		{tether}
 		{...restProps}
 	/>