@marianmeres/stuic 2.66.0 → 3.0.1

package/dist/components/DropdownMenu/DropdownMenu.svelte.d.ts

@@ -147,13 +147,12 @@ export interface Props extends Omit<HTMLButtonAttributes, "children"> {
     /** Optional, used only when css positioning not supported (iPhone)*/
     noScrollLock?: boolean;
 }
-export declare const DROPDOWN_MENU_BASE_CLASSES = "stuic-dropdown-menu relative inline-block";
-export declare const DROPDOWN_MENU_TRIGGER_CLASSES = "\n\t\tinline-flex items-center justify-center gap-2\n\t\tpx-3 py-2\n\t\trounded-md border\n\t\tbg-white dark:bg-neutral-800\n\t\ttext-neutral-900 dark:text-neutral-100\n\t\tborder-neutral-200 dark:border-neutral-700\n\t\thover:brightness-95 dark:hover:brightness-110\n\t\tcursor-pointer\n\t\t";
-export declare const DROPDOWN_MENU_DROPDOWN_CLASSES = "\n\t\tstuic-dropdown-menu-dropdown\n\t\tbg-white dark:bg-neutral-800\n\t\ttext-neutral-900 dark:text-neutral-100\n\t\tborder border-neutral-200 dark:border-neutral-700\n\t\trounded-md shadow-sm\n\t\tp-1\n\t\toverflow-y-auto\n\t\tz-50\n\t\tmin-w-48\n\t";
-export declare const DROPDOWN_MENU_DIVIDER_CLASSES = "\n\t\th-px my-1\n\t\tbg-neutral-200 dark:bg-neutral-700\n\t";
-export declare const DROPDOWN_MENU_HEADER_CLASSES = "\n\t\tpx-2 py-1.5\n\t\ttext-xs font-semibold uppercase tracking-wide\n\t\ttext-neutral-500 dark:text-neutral-400\n\t\tselect-none\n\t";
-export declare const DROPDOWN_MENU_BACKDROP_CLASSES = "\n\t\tstuic-dropdown-menu-backdrop\n\t\tfixed inset-0 bg-black/25\n\t\tz-40\n\t";
-import "./index.css";
+export declare const DROPDOWN_MENU_BASE_CLASSES = "stuic-dropdown-menu";
+export declare const DROPDOWN_MENU_TRIGGER_CLASSES = "stuic-dropdown-menu-trigger";
+export declare const DROPDOWN_MENU_DROPDOWN_CLASSES = "stuic-dropdown-menu-dropdown";
+export declare const DROPDOWN_MENU_DIVIDER_CLASSES = "stuic-dropdown-menu-divider";
+export declare const DROPDOWN_MENU_HEADER_CLASSES = "stuic-dropdown-menu-header";
+export declare const DROPDOWN_MENU_BACKDROP_CLASSES = "stuic-dropdown-menu-backdrop";
 declare const DropdownMenu: import("svelte").Component<Props, {}, "isOpen" | "triggerEl" | "dropdownEl">;
 type DropdownMenu = ReturnType<typeof DropdownMenu>;
 export default DropdownMenu;

package/dist/components/DropdownMenu/README.md

@@ -313,3 +313,135 @@ interface DropdownMenuExpandableItem {
 - **Reduced Motion**: Respects user's reduced motion preference
 - **Click Outside**: Automatically closes when clicking outside
 - **Focus Management**: Returns focus to trigger on close
+
+## CSS Variables
+
+Override these tokens globally in `:root` or locally via inline `style`:
+
+### Structure Tokens
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-dropdown-menu-radius` | `--radius-md` | Border radius for trigger and dropdown |
+| `--stuic-dropdown-menu-padding` | `--spacing * 1` | Inner padding of dropdown container |
+| `--stuic-dropdown-menu-gap` | `--spacing * 0.5` | Gap between trigger content |
+| `--stuic-dropdown-menu-min-width` | `12rem` | Minimum width of dropdown |
+| `--stuic-dropdown-menu-transition` | `150ms` | Transition duration |
+
+### Container Colors
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-dropdown-menu-bg` | `--stuic-color-surface` | Dropdown background color |
+| `--stuic-dropdown-menu-text` | `--stuic-color-surface-foreground` | Dropdown text color |
+| `--stuic-dropdown-menu-border` | `--stuic-color-border` | Dropdown border color |
+| `--stuic-dropdown-menu-shadow` | subtle shadow | Dropdown shadow |
+
+### Trigger Button
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-dropdown-menu-trigger-bg` | `--stuic-color-surface` | Trigger background |
+| `--stuic-dropdown-menu-trigger-bg-hover` | `--stuic-color-surface-hover` | Trigger hover background |
+| `--stuic-dropdown-menu-trigger-bg-active` | `--stuic-color-surface-active` | Trigger active background |
+| `--stuic-dropdown-menu-trigger-text` | `--stuic-color-surface-foreground` | Trigger text color |
+| `--stuic-dropdown-menu-trigger-text-hover` | `--stuic-color-surface-foreground-hover` | Trigger hover text color |
+| `--stuic-dropdown-menu-trigger-text-active` | `--stuic-color-surface-foreground-active` | Trigger active text color |
+| `--stuic-dropdown-menu-trigger-border` | `--stuic-color-border` | Trigger border color |
+| `--stuic-dropdown-menu-trigger-border-hover` | `--stuic-color-border-hover` | Trigger hover border |
+| `--stuic-dropdown-menu-trigger-border-active` | `--stuic-color-border-active` | Trigger active border |
+| `--stuic-dropdown-menu-trigger-padding-x` | `--spacing * 3` | Trigger horizontal padding |
+| `--stuic-dropdown-menu-trigger-padding-y` | `--spacing * 2` | Trigger vertical padding |
+
+### Focus Ring
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-dropdown-menu-ring-width` | `3px` | Focus ring width |
+| `--stuic-dropdown-menu-ring-offset` | `0px` | Focus ring offset |
+| `--stuic-dropdown-menu-ring-color` | `--stuic-color-ring` | Focus ring color |
+
+### Divider
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-dropdown-menu-divider-bg` | `--stuic-color-border` | Divider color |
+| `--stuic-dropdown-menu-divider-height` | `1px` | Divider height |
+| `--stuic-dropdown-menu-divider-margin-y` | `--spacing * 1` | Divider vertical margin |
+
+### Header (Section Label)
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-dropdown-menu-header-text` | `--stuic-color-muted-foreground` | Header text color |
+| `--stuic-dropdown-menu-header-font-size` | `--text-xs` | Header font size |
+| `--stuic-dropdown-menu-header-font-weight` | `--font-weight-semibold` | Header font weight |
+| `--stuic-dropdown-menu-header-padding-x` | `--spacing * 2` | Header horizontal padding |
+| `--stuic-dropdown-menu-header-padding-y` | `--spacing * 1.5` | Header vertical padding |
+| `--stuic-dropdown-menu-header-letter-spacing` | `0.05em` | Header letter spacing |
+| `--stuic-dropdown-menu-header-text-transform` | `uppercase` | Header text transform |
+
+### Backdrop (Fallback Mode)
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-dropdown-menu-backdrop-bg` | `rgb(0 0 0 / 0.25)` | Backdrop color |
+| `--stuic-dropdown-menu-backdrop-z-index` | `40` | Backdrop z-index |
+
+### Close Button (Fallback Mode)
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-dropdown-menu-close-bg` | `--stuic-color-foreground` | Close button background |
+| `--stuic-dropdown-menu-close-text` | `--stuic-color-background` | Close button text color |
+| `--stuic-dropdown-menu-close-opacity` | `0.6` | Close button opacity |
+| `--stuic-dropdown-menu-close-opacity-hover` | `1` | Close button hover opacity |
+
+### Expandable Section
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-dropdown-menu-expandable-indent` | `--spacing * 4` | Expandable content indent |
+
+## Customization Examples
+
+### Global Override
+
+```css
+/* Custom theme: pill-shaped dropdowns with more padding */
+:root {
+  --stuic-dropdown-menu-radius: 9999px;
+  --stuic-dropdown-menu-padding: 1rem;
+  --stuic-dropdown-menu-trigger-bg: var(--color-blue-500);
+  --stuic-dropdown-menu-trigger-text: white;
+}
+```
+
+### Local Override
+
+```svelte
+<DropdownMenu
+  style="--stuic-dropdown-menu-radius: 0; --stuic-dropdown-menu-shadow: none;"
+  items={items}
+>
+  Sharp Corners, No Shadow
+</DropdownMenu>
+```
+
+### Using Class Props
+
+Class props override default styling with Tailwind classes:
+
+```svelte
+<!-- Blue-themed dropdown -->
+<DropdownMenu
+  items={items}
+  classTrigger="bg-blue-500 text-white hover:bg-blue-600 border-blue-600"
+  classDropdown="bg-blue-50 dark:bg-blue-950 border-blue-200"
+  classItem="hover:bg-blue-100 dark:hover:bg-blue-900"
+>
+  Blue Theme
+</DropdownMenu>
+```
+
+Class props always win over CSS variables due to Tailwind's specificity.

package/dist/components/DropdownMenu/index.css

@@ -1,63 +1,269 @@
-/* Base dropdown styles */
-.stuic-dropdown-menu-dropdown {
-	scrollbar-width: thin;
-}
+/* =============================================================================
+   DROPDOWN MENU COMPONENT TOKENS
+   Override globally: :root { --stuic-dropdown-menu-radius: 0; }
+   Override locally:  <DropdownMenu style="--stuic-dropdown-menu-radius: 9999px;">
+   ============================================================================= */
 
-/* Override ListItemButton defaults for dropdown context */
-.stuic-dropdown-menu-dropdown .stuic-list-item-button {
-	--color-lib-bg: transparent;
-	--color-lib-bg-dark: transparent;
-	--color-lib-border: transparent;
-	--color-lib-border-dark: transparent;
-}
+:root {
+	/* Structure tokens */
+	--stuic-dropdown-menu-radius: var(--radius-md);
+	--stuic-dropdown-menu-padding: calc(var(--spacing) * 1);
+	--stuic-dropdown-menu-gap: calc(var(--spacing) * 0.5);
+	--stuic-dropdown-menu-min-width: 12rem;
+	--stuic-dropdown-menu-transition: 150ms;
 
-@position-try --pop-top {
-	position-area: top; /* above, centered */
-}
-@position-try --pop-top-span-right {
-	position-area: top span-right; /* above, aligned to anchor's left edge */
-}
-@position-try --pop-top-span-left {
-	position-area: top span-left; /* above, aligned to anchor's right edge */
-}
-@position-try --pop-bottom {
-	position-area: bottom; /* below, centered */
-}
-@position-try --pop-bottom-span-right {
-	position-area: bottom span-right;
-}
-@position-try --pop-bottom-span-left {
-	position-area: bottom span-left;
-}
-@position-try --pop-left {
-	position-area: left;
-}
-@position-try --pop-right {
-	position-area: right;
+	/* Dropdown container colors */
+	--stuic-dropdown-menu-bg: var(--stuic-color-surface);
+	--stuic-dropdown-menu-text: var(--stuic-color-surface-foreground);
+	--stuic-dropdown-menu-border: var(--stuic-color-border);
+	--stuic-dropdown-menu-shadow: var(--shadow-lg);
+
+	/* Trigger button colors */
+	--stuic-dropdown-menu-trigger-bg: var(--stuic-color-surface);
+	--stuic-dropdown-menu-trigger-bg-hover: var(--stuic-color-surface-hover);
+	--stuic-dropdown-menu-trigger-bg-active: var(--stuic-color-surface-active);
+	--stuic-dropdown-menu-trigger-text: var(--stuic-color-surface-foreground);
+	--stuic-dropdown-menu-trigger-text-hover: var(--stuic-color-surface-foreground-hover);
+	--stuic-dropdown-menu-trigger-text-active: var(--stuic-color-surface-foreground-active);
+	--stuic-dropdown-menu-trigger-border: var(--stuic-color-border);
+	--stuic-dropdown-menu-trigger-border-hover: var(--stuic-color-border-hover);
+	--stuic-dropdown-menu-trigger-border-active: var(--stuic-color-border-active);
+
+	/* Trigger sizing */
+	--stuic-dropdown-menu-trigger-padding-x: calc(var(--spacing) * 3);
+	--stuic-dropdown-menu-trigger-padding-y: calc(var(--spacing) * 2);
+
+	/* Focus ring */
+	--stuic-dropdown-menu-ring-width: 3px;
+	--stuic-dropdown-menu-ring-offset: 0px;
+	--stuic-dropdown-menu-ring-color: var(--stuic-color-ring);
+
+	/* Divider */
+	--stuic-dropdown-menu-divider-bg: var(--stuic-color-border);
+	--stuic-dropdown-menu-divider-height: 1px;
+	--stuic-dropdown-menu-divider-margin-y: calc(var(--spacing) * 1);
+
+	/* Header (section label) */
+	--stuic-dropdown-menu-header-text: var(--stuic-color-muted-foreground);
+	--stuic-dropdown-menu-header-font-size: var(--text-xs);
+	--stuic-dropdown-menu-header-font-weight: var(--font-weight-semibold);
+	--stuic-dropdown-menu-header-padding-x: calc(var(--spacing) * 2);
+	--stuic-dropdown-menu-header-padding-y: calc(var(--spacing) * 1.5);
+	--stuic-dropdown-menu-header-letter-spacing: 0.05em;
+	--stuic-dropdown-menu-header-text-transform: uppercase;
+
+	/* Backdrop (fallback mode) */
+	--stuic-dropdown-menu-backdrop-bg: rgb(0 0 0 / 0.25);
+	--stuic-dropdown-menu-backdrop-z-index: 40;
+
+	/* Close button (fallback mode) */
+	--stuic-dropdown-menu-close-bg: var(--stuic-color-foreground);
+	--stuic-dropdown-menu-close-text: var(--stuic-color-background);
+	--stuic-dropdown-menu-close-opacity: 0.6;
+	--stuic-dropdown-menu-close-opacity-hover: 1;
+
+	/* Expandable section indent */
+	--stuic-dropdown-menu-expandable-indent: calc(var(--spacing) * 4);
 }
 
-/* CSS Anchor Positioning supported mode - flip only when viewport overflow */
-@supports (anchor-name: --anchor) {
+@layer components {
+	/* =============================================================================
+	   BASE STYLES
+	   ============================================================================= */
+
+	.stuic-dropdown-menu {
+		position: relative;
+		display: inline-block;
+	}
+
+	/* =============================================================================
+	   TRIGGER BUTTON
+	   ============================================================================= */
+
+	.stuic-dropdown-menu-trigger {
+		/* Layout */
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--stuic-dropdown-menu-gap);
+
+		/* Sizing */
+		padding: var(--stuic-dropdown-menu-trigger-padding-y)
+			var(--stuic-dropdown-menu-trigger-padding-x);
+
+		/* Box model */
+		border-width: 1px;
+		border-style: solid;
+		border-radius: var(--stuic-dropdown-menu-radius);
+
+		/* Colors */
+		background: var(--stuic-dropdown-menu-trigger-bg);
+		color: var(--stuic-dropdown-menu-trigger-text);
+		border-color: var(--stuic-dropdown-menu-trigger-border);
+
+		/* Interaction */
+		cursor: pointer;
+		user-select: none;
+		-webkit-tap-highlight-color: transparent;
+		touch-action: manipulation;
+		transition:
+			background var(--stuic-dropdown-menu-transition),
+			color var(--stuic-dropdown-menu-transition),
+			border-color var(--stuic-dropdown-menu-transition);
+	}
+
+	.stuic-dropdown-menu-trigger:hover:not(:disabled) {
+		background: var(--stuic-dropdown-menu-trigger-bg-hover);
+		color: var(--stuic-dropdown-menu-trigger-text-hover);
+		border-color: var(--stuic-dropdown-menu-trigger-border-hover);
+	}
+
+	.stuic-dropdown-menu-trigger:active:not(:disabled) {
+		background: var(--stuic-dropdown-menu-trigger-bg-active);
+		color: var(--stuic-dropdown-menu-trigger-text-active);
+		border-color: var(--stuic-dropdown-menu-trigger-border-active);
+	}
+
+	.stuic-dropdown-menu-trigger:focus-visible {
+		outline: var(--stuic-dropdown-menu-ring-width) solid
+			var(--stuic-dropdown-menu-ring-color);
+		outline-offset: var(--stuic-dropdown-menu-ring-offset);
+	}
+
+	/* =============================================================================
+	   DROPDOWN CONTAINER
+	   ============================================================================= */
+
 	.stuic-dropdown-menu-dropdown {
-		/* position-try-fallbacks: flip-block, flip-inline; */
+		/* Colors */
+		background: var(--stuic-dropdown-menu-bg);
+		color: var(--stuic-dropdown-menu-text);
+		border: 1px solid var(--stuic-dropdown-menu-border);
+		box-shadow: var(--stuic-dropdown-menu-shadow);
 
-		/* position-area is set via inline style based on position param */
+		/* Box model */
+		border-radius: var(--stuic-dropdown-menu-radius);
+		padding: var(--stuic-dropdown-menu-padding);
 
-		/* fallbacks ensure popover stays within viewport */
-		/* order: try other bottom positions first, then top, then left/right */
-		position-try-fallbacks:
-			flip-inline, --pop-bottom-span-right, --pop-bottom-span-left, --pop-bottom,
-			flip-block, --pop-top-span-right, --pop-top-span-left, --pop-top, --pop-left,
-			--pop-right;
+		/* Layout */
+		min-width: var(--stuic-dropdown-menu-min-width);
+		overflow-y: auto;
+		scrollbar-width: thin;
+
+		/* Stacking */
+		z-index: 50;
 	}
-}
 
-/* Expandable section animation handled by Svelte slide transition */
-.stuic-dropdown-menu-expandable-content {
-	overflow: hidden;
-}
+	/* =============================================================================
+	   DIVIDER
+	   ============================================================================= */
+
+	.stuic-dropdown-menu-divider {
+		height: var(--stuic-dropdown-menu-divider-height);
+		margin: var(--stuic-dropdown-menu-divider-margin-y) 0;
+		background: var(--stuic-dropdown-menu-divider-bg);
+	}
+
+	/* =============================================================================
+	   HEADER (Section Label)
+	   ============================================================================= */
+
+	.stuic-dropdown-menu-header {
+		padding: var(--stuic-dropdown-menu-header-padding-y)
+			var(--stuic-dropdown-menu-header-padding-x);
+		font-size: var(--stuic-dropdown-menu-header-font-size);
+		font-weight: var(--stuic-dropdown-menu-header-font-weight);
+		letter-spacing: var(--stuic-dropdown-menu-header-letter-spacing);
+		text-transform: var(--stuic-dropdown-menu-header-text-transform);
+		color: var(--stuic-dropdown-menu-header-text);
+		user-select: none;
+	}
+
+	/* =============================================================================
+	   BACKDROP (Fallback Mode)
+	   ============================================================================= */
+
+	.stuic-dropdown-menu-backdrop {
+		position: fixed;
+		inset: 0;
+		background: var(--stuic-dropdown-menu-backdrop-bg);
+		z-index: var(--stuic-dropdown-menu-backdrop-z-index);
+		transition-property: opacity;
+	}
+
+	/* =============================================================================
+	   CLOSE BUTTON (Fallback Mode)
+	   ============================================================================= */
+
+	.stuic-dropdown-menu-close {
+		background: var(--stuic-dropdown-menu-close-bg);
+		color: var(--stuic-dropdown-menu-close-text);
+		opacity: var(--stuic-dropdown-menu-close-opacity);
+		border-radius: var(--stuic-dropdown-menu-radius);
+		padding: calc(var(--spacing) * 2);
+		cursor: pointer;
+		line-height: 1;
+		transition: opacity var(--stuic-dropdown-menu-transition);
+	}
+
+	.stuic-dropdown-menu-close:hover {
+		opacity: var(--stuic-dropdown-menu-close-opacity-hover);
+	}
+
+	/* =============================================================================
+	   EXPANDABLE SECTION
+	   ============================================================================= */
 
-/* Backdrop for fallback mode */
-.stuic-dropdown-menu-backdrop {
-	transition-property: opacity;
+	.stuic-dropdown-menu-expandable-content {
+		padding-left: var(--stuic-dropdown-menu-expandable-indent);
+		overflow: hidden;
+	}
+
+	/* =============================================================================
+	   LIST ITEM BUTTON OVERRIDES FOR DROPDOWN CONTEXT
+	   Reset default ListItemButton background to transparent within dropdown.
+	   ============================================================================= */
+
+	.stuic-dropdown-menu-dropdown .stuic-list-item-button {
+		--stuic-list-item-button-bg: transparent;
+		--stuic-list-item-button-border: transparent;
+	}
+
+	/* =============================================================================
+	   CSS ANCHOR POSITIONING (when supported)
+	   ============================================================================= */
+
+	@position-try --pop-top {
+		position-area: top;
+	}
+	@position-try --pop-top-span-right {
+		position-area: top span-right;
+	}
+	@position-try --pop-top-span-left {
+		position-area: top span-left;
+	}
+	@position-try --pop-bottom {
+		position-area: bottom;
+	}
+	@position-try --pop-bottom-span-right {
+		position-area: bottom span-right;
+	}
+	@position-try --pop-bottom-span-left {
+		position-area: bottom span-left;
+	}
+	@position-try --pop-left {
+		position-area: left;
+	}
+	@position-try --pop-right {
+		position-area: right;
+	}
+
+	@supports (anchor-name: --anchor) {
+		.stuic-dropdown-menu-dropdown {
+			position-try-fallbacks:
+				flip-inline, --pop-bottom-span-right, --pop-bottom-span-left, --pop-bottom,
+				flip-block, --pop-top-span-right, --pop-top-span-left, --pop-top, --pop-left,
+				--pop-right;
+		}
+	}
 }

package/dist/components/Input/FieldAssets.svelte

@@ -37,6 +37,7 @@
 	import SpinnerCircleOscillate from "../Spinner/SpinnerCircleOscillate.svelte";
 	import { isTHCNotEmpty, type THC } from "../Thc/Thc.svelte";
 	import InputWrap from "./_internal/InputWrap.svelte";
+	import Button from "../Button/Button.svelte";
 
 	const clog = createClog("FieldAssets");
 
@@ -324,7 +325,6 @@
 			clog.warn(`${e}`);
 		}
 	});
-
 </script>
 
 {#snippet default_render()}
@@ -386,17 +386,20 @@
 					</button>
 				</div>
 			{/each}
-			<button
+			<Button
 				type="button"
 				onclick={(e) => {
 					e.preventDefault();
 					e.stopPropagation();
 					inputEl.click();
 				}}
-				class={[objectSize, " grid place-content-center group", classControls]}
+				class={["m-4", classControls].join(" ")}
+				roundedFull
+				aspect1
+				variant="ghost"
 			>
-				{@html iconAdd({ size: 32, class: "opacity-75 group-hover:opacity-100" })}
-			</button>
+				{@html iconAdd({ size: 24 })}
+			</Button>
 		</div>
 	{/if}
 {/snippet}

package/dist/components/Input/FieldCheckbox.svelte

@@ -70,23 +70,7 @@
 
 	// $inspect(33333, invalid, validation);
 
-	//
-	let _classCommon = $derived(
-		[invalid && "invalid", disabled && "disabled", required && "required", renderSize]
-			.filter(Boolean)
-			.join(" ")
-	);
 
-	const _preset = {
-		labelBox: {
-			label: {
-				size: {
-					sm: "text-sm mt-0.5",
-					lg: "font-bold",
-				} as any,
-			},
-		},
-	};
 </script>
 
 {#snippet snippetOrThc({ id, value }: { id: string; value?: SnippetWithId | THC })}
@@ -99,17 +83,18 @@
 
 <label
 	class={twMerge(
-		`stuic-checkbox`,
-		_classCommon,
+		"stuic-checkbox",
 		"flex items-start mb-4 text-base",
+		invalid && "invalid",
+		disabled && "disabled",
 		classProp
 	)}
+	data-size={renderSize}
 	{style}
 >
 	<div
 		class={twMerge(
 			"input-box",
-			_classCommon,
 			"flex h-6 items-center ml-1",
 			classInputBox
 		)}
@@ -126,40 +111,20 @@
 				...(typeof validate === "boolean" ? {} : validate),
 				setValidationResult,
 			})}
-			class={twMerge(
-				_classCommon,
-				`size-5 rounded
-				bg-neutral-100
-				border-neutral-300
-				text-input-accent dark:text-input-accent-dark
-				cursor-pointer
-
-				checked:border-input-accent checked:bg-input-accent 
-				checked:dark:border-input-accent-dark checked:dark:bg-input-accent-dark
-
-				focus:border-input-accent
-				focus:ring-4
-				focus:ring-offset-0
-				focus:ring-input-accent/20 focus:dark:ring-input-accent-dark/20
-
-				disabled:cursor-not-allowed`,
-				classInput
-			)}
+			class={twMerge(classInput)}
 			{required}
 			{disabled}
 			{...rest}
 		/>
 	</div>
-	<div class={twMerge("label-box", _classCommon, "ml-3 w-full", classLabelBox)}>
+	<div class={twMerge("label-box", "ml-3 w-full", classLabelBox)}>
 		{#if label}
 			<div
 				class={twMerge(
 					"label",
-					_classCommon,
 					"block w-full cursor-pointer",
 					disabled && "cursor-not-allowed",
 					required && "after:content-['*'] after:opacity-40 after:pl-1",
-					_preset.labelBox.label.size[renderSize],
 					classLabel
 				)}
 			>
@@ -175,8 +140,7 @@
 				transition:slide={{ duration: 150 }}
 				class={twMerge(
 					"validation-box",
-					_classCommon,
-					"text-sm text-input-accent-invalid dark:text-input-accent-invalid-dark tracking-tight",
+					"text-sm tracking-tight",
 					classValidationBox
 				)}
 			>
@@ -187,7 +151,6 @@
 			<Collapsible
 				class={twMerge(
 					"desc-box",
-					_classCommon,
 					"text-sm opacity-50 cursor-pointer font-normal",
 					disabled && "cursor-not-allowed",
 					classDescBox

package/dist/components/Input/FieldFile.svelte

@@ -126,12 +126,7 @@
 			bind:this={input}
 			{id}
 			class={twMerge(
-				"form-input",
-				"block border-0 w-full",
-				"file:rounded file:border-0 file:mr-4 file:bg-neutral-200",
-				"file:px-2  file:cursor-pointer",
-				"focus-visible:ring-0 focus:ring-0 focus:leading-0",
-				renderSize,
+				"block w-full",
 				classInput
 			)}
 			use:highlightDragover={() => ({ classes: ["outline-dashed"] })}