@svadmin/ui 0.68.1 → 0.69.0

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

@@ -1,66 +1,14 @@
 import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
-import { type VariantProps } from "tailwind-variants";
-export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
-    variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/80";
-        outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground";
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground";
-        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground";
-        destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30";
-        link: "text-primary underline-offset-4 hover:underline";
-    };
-    size: {
-        default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5";
-        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3";
-        sm: "h-8 gap-1 rounded-[min(var(--radius-md),12px)] px-3 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3.5";
-        lg: "h-10 gap-2 px-4 has-data-[icon=inline-end]:pr-3.5 has-data-[icon=inline-start]:pl-3.5";
-        icon: "size-9";
-        "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3";
-        "icon-sm": "size-8 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg";
-        "icon-lg": "size-10";
-    };
-}, undefined, "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
-    variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/80";
-        outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground";
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground";
-        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground";
-        destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30";
-        link: "text-primary underline-offset-4 hover:underline";
-    };
-    size: {
-        default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5";
-        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3";
-        sm: "h-8 gap-1 rounded-[min(var(--radius-md),12px)] px-3 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3.5";
-        lg: "h-10 gap-2 px-4 has-data-[icon=inline-end]:pr-3.5 has-data-[icon=inline-start]:pl-3.5";
-        icon: "size-9";
-        "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3";
-        "icon-sm": "size-8 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg";
-        "icon-lg": "size-10";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/80";
-        outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground";
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground";
-        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground";
-        destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30";
-        link: "text-primary underline-offset-4 hover:underline";
-    };
-    size: {
-        default: "h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5";
-        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3";
-        sm: "h-8 gap-1 rounded-[min(var(--radius-md),12px)] px-3 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3.5";
-        lg: "h-10 gap-2 px-4 has-data-[icon=inline-end]:pr-3.5 has-data-[icon=inline-start]:pl-3.5";
-        icon: "size-9";
-        "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3";
-        "icon-sm": "size-8 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg";
-        "icon-lg": "size-10";
-    };
-}, undefined>>;
-export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
-export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+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;

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

@@ -13,10 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="card-action"
-	class={cn(
-		"cn-card-action col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-		className
-	)}
+	class={cn("svadmin-card-action", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="card-content"
-	class={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+	class={cn("svadmin-card-content", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -13,7 +13,7 @@
 <p
 	bind:this={ref}
 	data-slot="card-description"
-	class={cn("text-muted-foreground text-sm", className)}
+	class={cn("svadmin-card-description", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/card/card-footer.svelte

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="card-footer"
-	class={cn("bg-muted/50 rounded-b-xl p-4 group-data-[size=sm]/card:p-3 flex items-center", className)}
+	class={cn("svadmin-card-footer", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/card/card-header.svelte

@@ -13,10 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="card-header"
-	class={cn(
-		"gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
-		className
-	)}
+	class={cn("svadmin-card-header", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -10,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} data-slot="card-title" class={cn("leading-none font-semibold tracking-tight group-data-[size=sm]/card:text-sm", className)} {...restProps}>
+<div bind:this={ref} data-slot="card-title" class={cn("svadmin-card-title", className)} {...restProps}>
 	{@render children?.()}
 </div>

package/dist/components/ui/card/card.svelte

@@ -15,7 +15,7 @@
 	bind:this={ref}
 	data-slot="card"
 	data-size={size}
-	class={cn("shadow-sm bg-card text-card-foreground gap-4 overflow-hidden rounded-lg py-4 text-sm has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg group/card flex flex-col", className)}
+	class={cn("svadmin-card", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/checkbox/checkbox.svelte

@@ -16,10 +16,7 @@
 <CheckboxPrimitive.Root
 	bind:ref
 	data-slot="checkbox"
-	class={cn(
-		"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
-		className
-	)}
+	class={cn("svadmin-checkbox", className)}
 	bind:checked
 	bind:indeterminate
 	{...restProps}
@@ -27,7 +24,7 @@
 	{#snippet children({ checked, indeterminate })}
 		<div
 			data-slot="checkbox-indicator"
-			class="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
+			class="svadmin-checkbox-indicator"
 		>
 			{#if checked}
 				<CheckIcon  />

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

@@ -27,9 +27,9 @@
 <Dialog.Dialog bind:open {onOpenChange} {onOpenChangeComplete}>
   <Dialog.DialogContent
     data-cmdk-dialog=""
-    class="overflow-hidden p-0"
+    class="svadmin-command-dialog-content"
   >
-    <Dialog.DialogHeader class="sr-only">
+    <Dialog.DialogHeader class="svadmin-sr-only">
       <Dialog.DialogTitle>{commandProps.label || 'Command menu'}</Dialog.DialogTitle>
       <Dialog.DialogDescription>Search for a command to run.</Dialog.DialogDescription>
     </Dialog.DialogHeader>
@@ -37,7 +37,7 @@
       bind:value
       {...commandProps}
       class={cn(
-        "[&_[data-command-group-heading]]:text-muted-foreground flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground [&_[data-command-group-heading]]:px-2 [&_[data-command-group-heading]]:font-medium [&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5 [&_[data-command-input]]:h-12 [&_[data-command-item]]:px-2 [&_[data-command-item]]:py-3",
+        "svadmin-command-dialog-root",
         className
       )}
     >

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

@@ -13,6 +13,6 @@
 	bind:ref
 	data-slot="command-empty"
 	data-cmdk-empty=""
-	class={cn("py-6 text-center text-sm", className)}
+	class={cn("svadmin-command-empty", className)}
 	{...restProps}
 />

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

@@ -21,7 +21,7 @@
 	bind:ref
 	data-slot="command-group"
 	data-cmdk-group=""
-	class={cn("text-foreground overflow-hidden p-1", className)}
+	class={cn("svadmin-command-group", className)}
 	value={value ?? heading}
 	forceMount={alwaysRender ?? forceMount}
 	{...restProps}
@@ -30,7 +30,7 @@
 		<CommandPrimitive.GroupHeading
 			data-slot="command-group-heading"
 			data-cmdk-group-heading=""
-			class="text-muted-foreground px-2 py-1.5 text-xs font-medium"
+			class="svadmin-command-heading"
 		>
 			{heading}
 		</CommandPrimitive.GroupHeading>

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

@@ -15,9 +15,6 @@
 	bind:value
 	data-slot="command-input"
 	data-cmdk-input=""
-	class={cn(
-		"w-full bg-transparent text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
-		className
-	)}
+	class={cn("svadmin-command-input", className)}
 	{...restProps}
 />

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

@@ -30,10 +30,7 @@
 	bind:ref
 	data-slot="command-item"
 	data-cmdk-item=""
-	class={cn(
-		"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[selected]:bg-accent data-[selected]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-		className
-	)}
+	class={cn("svadmin-command-item", className)}
 	{value}
 	forceMount={alwaysRender ?? forceMount}
 	onSelect={handleSelect}

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

@@ -13,6 +13,6 @@
 	bind:ref
 	data-slot="command-list"
 	data-cmdk-list=""
-	class={cn("max-h-72 overflow-x-hidden overflow-y-auto", className)}
+	class={cn("svadmin-command-list", className)}
 	{...restProps}
 />

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

@@ -17,7 +17,7 @@
 	bind:ref
 	data-slot="command-separator"
 	data-cmdk-separator=""
-	class={cn("bg-border -mx-1 h-px", className)}
+	class={cn("svadmin-command-separator", className)}
 	forceMount={alwaysRender ?? forceMount}
 	{...restProps}
 />

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

@@ -16,10 +16,7 @@
 	bind:value
 	data-slot="command"
 	data-cmdk-root=""
-	class={cn(
-		"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-		className
-	)}
+	class={cn("svadmin-command", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -28,7 +28,7 @@
 		bind:ref
 		data-slot="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-98 data-[state=open]:zoom-in-98 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-6 text-sm ring-1 duration-300 sm:max-w-lg fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none shadow-2xl",
+			"svadmin-dialog-content",
 			className
 		)}
 		{...restProps}
@@ -37,9 +37,9 @@
 		{#if showCloseButton}
 			<DialogPrimitive.Close data-slot="dialog-close">
 				{#snippet child({ props })}
-					<Button variant="ghost" class="absolute top-2 right-2" size="icon-sm" {...props}>
+					<Button variant="ghost" class="svadmin-u-da4dbfbc4fdc svadmin-u-9a2db8f949b6 svadmin-u-7b2d63937d23" size="icon-sm" {...props}>
 						<XIcon  />
-						<span class="sr-only">Close</span>
+						<span class="svadmin-sr-only">Close</span>
 					</Button>
 				{/snippet}
 			</DialogPrimitive.Close>

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

@@ -12,6 +12,6 @@
 <DialogPrimitive.Description
 	bind:ref
 	data-slot="dialog-description"
-	class={cn("text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3", className)}
+	class={cn("svadmin-dialog-description", className)}
 	{...restProps}
 />

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

@@ -18,7 +18,7 @@
 <div
 	bind:this={ref}
 	data-slot="dialog-footer"
-	class={cn("bg-muted/50 -mx-6 -mb-6 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+	class={cn("svadmin-dialog-footer", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -13,7 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="dialog-header"
-	class={cn("gap-2 flex flex-col", className)}
+	class={cn("svadmin-dialog-header", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -12,6 +12,6 @@
 <DialogPrimitive.Overlay
 	bind:ref
 	data-slot="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 bg-black/20 duration-200 backdrop-blur-sm fixed inset-0 isolate z-50", className)}
+	class={cn("svadmin-dialog-overlay", className)}
 	{...restProps}
 />

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

@@ -12,6 +12,6 @@
 <DialogPrimitive.Title
 	bind:ref
 	data-slot="dialog-title"
-	class={cn("text-lg leading-none font-semibold", className)}
+	class={cn("svadmin-dialog-title", className)}
 	{...restProps}
 />

package/dist/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -27,14 +27,11 @@
 	role="menuitemcheckbox"
 	aria-checked={checked}
 	data-slot="dropdown-menu-checkbox-item"
-	class={cn(
-		"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-		className
-	)}
+	class={cn("svadmin-dropdown-checkbox-item", className)}
 	onclick={handleClick}
 	{...restProps}
 >
-	<span class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+	<span class="svadmin-dropdown-checkbox-indicator">
 		{#if checked}
 			<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
 		{/if}

package/dist/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -23,12 +23,7 @@
 <div
 	bind:this={ref}
 	data-slot="dropdown-menu-content"
-	class={cn(
-		"bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-lg border p-1 shadow-lg",
-		"absolute mt-1 animate-in fade-in-0 zoom-in-95",
-		align === "end" ? "right-0" : align === "start" ? "left-0" : "left-1/2 -translate-x-1/2",
-		className
-	)}
+	class={cn("svadmin-dropdown-content", `svadmin-dropdown-align-${align}`, className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -21,15 +21,9 @@
 	bind:this={ref}
 	type="button"
 	data-slot="dropdown-menu-item"
-	class={cn(
-		"relative flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors [&_svg]:size-4 [&_svg]:shrink-0",
-		destructive
-			? "text-destructive hover:bg-destructive/10 focus:bg-destructive/10"
-			: "hover:bg-accent focus:bg-accent focus:text-accent-foreground",
-		"disabled:pointer-events-none disabled:opacity-50",
-		inset && "pl-8",
-		className
-	)}
+	data-variant={destructive ? "destructive" : "default"}
+	data-inset={inset ? "true" : undefined}
+	class={cn("svadmin-dropdown-item", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/dropdown-menu/dropdown-menu-separator.svelte

@@ -6,5 +6,5 @@
 
 <div
 	data-slot="dropdown-menu-separator"
-	class={cn("-mx-1 my-1 h-px bg-border", className)}
+	class={cn("svadmin-dropdown-separator", className)}
 ></div>

package/dist/components/ui/dropdown-menu/dropdown-menu.svelte

@@ -42,7 +42,7 @@
 <div
 	bind:this={ref}
 	data-slot="dropdown-menu"
-	class={cn("relative inline-block", className)}
+	class={cn("svadmin-dropdown-menu", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -31,8 +31,9 @@
 	<input
 		bind:this={ref}
 		data-slot={dataSlot}
+		data-input-type="file"
 		class={cn(
-			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-9 rounded-lg border bg-transparent p-1 pr-3 text-xs md:text-sm text-muted-foreground transition-colors file:mr-3 file:inline-flex file:h-7 file:cursor-pointer file:items-center file:rounded-md file:border file:border-border/60 file:bg-muted file:px-2.5 file:text-xs file:font-medium file:text-foreground file:transition-colors hover:file:bg-muted/80 focus-visible:ring-3 aria-invalid:ring-3 placeholder:text-muted-foreground w-full min-w-0 outline-none cursor-pointer disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			"svadmin-input",
 			className
 		)}
 		type="file"
@@ -44,7 +45,7 @@
 		bind:this={ref}
 		data-slot={dataSlot}
 		class={cn(
-			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-9 rounded-lg border bg-transparent px-3 py-1.5 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground w-full min-w-0 outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			"svadmin-input",
 			className
 		)}
 		{type}

package/dist/components/ui/label/label.svelte

@@ -8,10 +8,7 @@
 <label
   bind:this={ref}
   data-slot="label"
-  class={cn(
-    "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-    className
-  )}
+  class={cn("svadmin-label", className)}
   {...restProps}
 >
   {@render children?.()}

package/dist/components/ui/navigation-menu/navigation-menu-content.svelte

@@ -12,10 +12,6 @@
 <NavigationMenuPrimitive.Content
 	bind:ref
 	data-slot="navigation-menu-content"
-	class={cn(
-		"top-0 left-0 w-full md:absolute md:w-auto",
-		"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52",
-		className
-	)}
+	class={cn("svadmin-navigation-content", className)}
 	{...restProps}
 />

package/dist/components/ui/navigation-menu/navigation-menu-indicator.svelte

@@ -12,11 +12,8 @@
 <NavigationMenuPrimitive.Indicator
 	bind:ref
 	data-slot="navigation-menu-indicator"
-	class={cn(
-		"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
-		className
-	)}
+	class={cn("svadmin-navigation-indicator", className)}
 	{...restProps}
 >
-	<div class="relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md"></div>
+	<div class="svadmin-navigation-indicator-arrow"></div>
 </NavigationMenuPrimitive.Indicator>

package/dist/components/ui/navigation-menu/navigation-menu-item.svelte

@@ -12,6 +12,6 @@
 <NavigationMenuPrimitive.Item
 	bind:ref
 	data-slot="navigation-menu-item"
-	class={cn("relative", className)}
+	class={cn("svadmin-navigation-item", className)}
 	{...restProps}
 />

package/dist/components/ui/navigation-menu/navigation-menu-link.svelte

@@ -12,9 +12,6 @@
 <NavigationMenuPrimitive.Link
 	bind:ref
 	data-slot="navigation-menu-link"
-	class={cn(
-		"inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50",
-		className
-	)}
+	class={cn("svadmin-navigation-link", className)}
 	{...restProps}
 />

package/dist/components/ui/navigation-menu/navigation-menu-list.svelte

@@ -12,6 +12,6 @@
 <NavigationMenuPrimitive.List
 	bind:ref
 	data-slot="navigation-menu-list"
-	class={cn("group flex flex-1 list-none items-center justify-center gap-1", className)}
+	class={cn("svadmin-navigation-list", className)}
 	{...restProps}
 />

package/dist/components/ui/navigation-menu/navigation-menu-trigger.svelte

@@ -14,15 +14,12 @@
 <NavigationMenuPrimitive.Trigger
 	bind:ref
 	data-slot="navigation-menu-trigger"
-	class={cn(
-		"group/trigger inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-muted/50 data-[state=open]:text-foreground",
-		className
-	)}
+	class={cn("svadmin-navigation-trigger", className)}
 	{...restProps}
 >
 	{@render children?.()}
 	<ChevronDownIcon
-		class="relative top-[1px] ml-1 size-3 transition duration-200 group-data-[state=open]/trigger:rotate-180"
+		class="svadmin-navigation-trigger-icon"
 		aria-hidden="true"
 	/>
 </NavigationMenuPrimitive.Trigger>

package/dist/components/ui/navigation-menu/navigation-menu-viewport.svelte

@@ -9,14 +9,11 @@
 	}: NavigationMenuPrimitive.ViewportProps = $props();
 </script>
 
-<div class="absolute top-full left-0 flex justify-center">
+<div class="svadmin-navigation-viewport-wrapper">
 	<NavigationMenuPrimitive.Viewport
 		bind:ref
 		data-slot="navigation-menu-viewport"
-		class={cn(
-			"origin-top-center relative mt-1.5 h-[var(--bits-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-[0_18px_48px_rgba(15,23,42,0.14),0_4px_12px_rgba(15,23,42,0.08)] backdrop-blur-md transition-[width,height] duration-300 md:w-[var(--bits-navigation-menu-viewport-width)]",
-			className
-		)}
+		class={cn("svadmin-navigation-viewport", className)}
 		{...restProps}
 	/>
 </div>

package/dist/components/ui/navigation-menu/navigation-menu.svelte

@@ -16,7 +16,7 @@
 	bind:ref
 	bind:value
 	data-slot="navigation-menu"
-	class={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)}
+	class={cn("svadmin-navigation-menu", className)}
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -6,6 +6,6 @@
   let { class: className, children, ...restProps }: HTMLAttributes<HTMLUListElement> & { children?: Snippet } = $props();
 </script>
 
-<ul data-slot="pagination-content" class={cn("flex flex-row items-center gap-1", className)} {...restProps}>
+<ul data-slot="pagination-content" class={cn("svadmin-pagination-content", className)} {...restProps}>
   {@render children?.()}
 </ul>

package/dist/components/ui/pagination/pagination-ellipsis.svelte

@@ -6,7 +6,7 @@
   let { class: className, ...restProps }: HTMLAttributes<HTMLSpanElement> = $props();
 </script>
 
-<span aria-hidden="true" data-slot="pagination-ellipsis" class={cn("flex size-8 items-center justify-center", className)} {...restProps}>
-  <Ellipsis class="size-4" />
-  <span class="sr-only">More pages</span>
+<span aria-hidden="true" data-slot="pagination-ellipsis" class={cn("svadmin-pagination-ellipsis", className)} {...restProps}>
+  <Ellipsis class="svadmin-pagination-icon" />
+  <span class="svadmin-sr-only">More pages</span>
 </span>

package/dist/components/ui/pagination/pagination-link.svelte

@@ -14,6 +14,9 @@
 
 <button
   aria-current={isActive ? 'page' : undefined}
+  data-svadmin-button
+  data-variant={isActive ? 'outline' : 'ghost'}
+  data-size="icon-sm"
   data-slot="pagination-link"
   data-active={isActive}
   class={cn(

package/dist/components/ui/pagination/pagination-next.svelte

@@ -10,13 +10,16 @@
 
 <button
   aria-label="Go to next page"
+  data-svadmin-button
+  data-variant="ghost"
+  data-size="icon-sm"
   data-slot="pagination-next"
-  class={cn(buttonVariants({ variant: 'ghost', size: 'icon-sm' }), "gap-1", className)}
+  class={cn(buttonVariants({ variant: 'ghost', size: 'icon-sm' }), "svadmin-pagination-control", className)}
   {...restProps}
 >
   {#if children}
     {@render children()}
   {:else}
-    <ChevronRight class="size-4" />
+    <ChevronRight class="svadmin-pagination-icon" />
   {/if}
 </button>