@websline/system-components 1.2.5 → 1.2.7

package/dist/components/atoms/input/Input.svelte

@@ -6,6 +6,7 @@
 	 * @typedef {Object} Props
 	 * @property {string|import("svelte").SvelteComponent|Function} [adornmentStart=""] Content to display at the start of the input (e.g., icon or text)
 	 * @property {string|import("svelte").SvelteComponent|Function} [adornmentEnd=""] Content to display at the end of the input (e.g., icon or text)
+	 * @property {import("svelte").SvelteComponent} [children] Additional content to render inside the input component
 	 * @property {string} [class=""] Additional CSS classes to apply to the component
 	 * @property {boolean} [disabled=false] Whether the input is disabled
 	 * @property {boolean} [error=false] Whether the input has an error state
@@ -22,6 +23,7 @@
 	let {
 		adornmentStart = "",
 		adornmentEnd = "",
+		children,
 		class: className = "",
 		disabled = false,
 		error = false,
@@ -60,7 +62,7 @@
 	);
 </script>
 
-<div class={styles.iconWrapper()}>
+<div class={styles.base({ class: className })}>
 	{#if adornmentStart}
 		<div class={styles.adornmentStart()}>
 			{#if typeof adornmentStart === "function"}
@@ -70,9 +72,10 @@
 			{/if}
 		</div>
 	{/if}
+	{@render children?.()}
 
 	<input
-		class={styles.base({ class: className })}
+		class={styles.input()}
 		disabled={localValues.disabled}
 		id={localValues.id}
 		{name}

package/dist/components/atoms/input/Input.svelte.d.ts

@@ -12,6 +12,10 @@ declare const Input: import("svelte").Component<{
      * Content to display at the end of the input (e.g., icon or text)
      */
     adornmentEnd?: string | import("svelte").SvelteComponent | Function;
+    /**
+     * Additional content to render inside the input component
+     */
+    children?: import("svelte").SvelteComponent;
     /**
      * Additional CSS classes to apply to the component
      */
@@ -62,6 +66,10 @@ type Props = {
      * Content to display at the end of the input (e.g., icon or text)
      */
     adornmentEnd?: string | import("svelte").SvelteComponent | Function;
+    /**
+     * Additional content to render inside the input component
+     */
+    children?: import("svelte").SvelteComponent;
     /**
      * Additional CSS classes to apply to the component
      */

package/dist/components/atoms/input/input.variants.d.ts

@@ -2,33 +2,33 @@ export const inputVariants: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
             adornmentStart?: import("tailwind-variants").ClassValue;
             adornmentEnd?: import("tailwind-variants").ClassValue;
-            iconWrapper?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     disabled: {
         true: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
             adornmentStart?: import("tailwind-variants").ClassValue;
             adornmentEnd?: import("tailwind-variants").ClassValue;
-            iconWrapper?: import("tailwind-variants").ClassValue;
         };
     };
     error: {
         true: import("tailwind-variants").ClassValue | {
             base?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
             adornmentStart?: import("tailwind-variants").ClassValue;
             adornmentEnd?: import("tailwind-variants").ClassValue;
-            iconWrapper?: import("tailwind-variants").ClassValue;
         };
     };
 }, {
     adornmentStart: string;
     adornmentEnd: string;
     base: string;
-    iconWrapper: string;
+    input: string;
 }, undefined, {
     disabled: {
         true: {

package/dist/components/atoms/input/input.variants.js

@@ -7,8 +7,9 @@ const inputVariants = tv({
 			"pointer-events-none absolute top-1/2 left-4 -translate-y-1/2 body-small text-neutral-900 dark:text-neutral-200",
 		adornmentEnd:
 			"pointer-events-none absolute top-1/2 right-4 -translate-y-1/2 body-small text-neutral-900 dark:text-neutral-200",
-		base: "h-10",
-		iconWrapper: "relative",
+		base: "relative h-10",
+		input:
+			"h-full w-full border-0 bg-transparent p-0 [font-size:inherit] leading-[inherit] focus:shadow-none focus:ring-0 focus:outline-0",
 	},
 });
 

package/dist/components/organisms/dialog/DialogAction.svelte

@@ -65,7 +65,7 @@
 	size="large"
 	{...rest}>
 	{#snippet child({ props })}
-		<Button {...props} {...buttonProps}>
+		<Button {...props} onkeydown={null} {...buttonProps}>
 			{@render children?.()}
 		</Button>
 	{/snippet}

package/dist/components/organisms/modal/ModalHeader.svelte

@@ -21,7 +21,7 @@
 	{#if showClose}
 		<Dialog.Close class={styles.close()}>
 			{#snippet child({ props })}
-				<CloseButton {...props} />
+				<CloseButton {...props} onkeydown={null} />
 			{/snippet}
 		</Dialog.Close>
 	{/if}

package/dist/components/organisms/popover/PopoverContent.svelte

@@ -55,7 +55,7 @@
 	{#if showClose}
 		<Popover.Close>
 			{#snippet child({ props })}
-				<CloseButton class={styles.close()} {...props} />
+				<CloseButton class={styles.close()} {...props} onkeydown={null} />
 			{/snippet}
 		</Popover.Close>
 	{/if}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/system-components",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "publishConfig": {
     "access": "public"
   },