@websline/system-components 1.2.5 → 1.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/components/atoms/input/Input.svelte +5 -2
  2. package/dist/components/atoms/input/Input.svelte.d.ts +8 -0
  3. package/dist/components/atoms/input/input.variants.d.ts +4 -4
  4. package/dist/components/atoms/input/input.variants.js +3 -2
  5. package/package.json +1 -1
package/dist/components/atoms/input/Input.svelte CHANGED
@@ -6,6 +6,7 @@
6
6
  * @typedef {Object} Props
7
7
  * @property {string|import("svelte").SvelteComponent|Function} [adornmentStart=""] Content to display at the start of the input (e.g., icon or text)
8
8
  * @property {string|import("svelte").SvelteComponent|Function} [adornmentEnd=""] Content to display at the end of the input (e.g., icon or text)
9
+ * @property {import("svelte").SvelteComponent} [children] Additional content to render inside the input component
9
10
  * @property {string} [class=""] Additional CSS classes to apply to the component
10
11
  * @property {boolean} [disabled=false] Whether the input is disabled
11
12
  * @property {boolean} [error=false] Whether the input has an error state
@@ -22,6 +23,7 @@
22
23
  let {
23
24
  adornmentStart = "",
24
25
  adornmentEnd = "",
26
+ children,
25
27
  class: className = "",
26
28
  disabled = false,
27
29
  error = false,
@@ -60,7 +62,7 @@
60
62
  );
61
63
  </script>
62
64
 
63
- <div class={styles.iconWrapper()}>
65
+ <div class={styles.base({ class: className })}>
64
66
  {#if adornmentStart}
65
67
  <div class={styles.adornmentStart()}>
66
68
  {#if typeof adornmentStart === "function"}
@@ -70,9 +72,10 @@
70
72
  {/if}
71
73
  </div>
72
74
  {/if}
75
+ {@render children?.()}
73
76
 
74
77
  <input
75
- class={styles.base({ class: className })}
78
+ class={styles.input()}
76
79
  disabled={localValues.disabled}
77
80
  id={localValues.id}
78
81
  {name}
package/dist/components/atoms/input/Input.svelte.d.ts CHANGED
@@ -12,6 +12,10 @@ declare const Input: import("svelte").Component<{
12
12
  * Content to display at the end of the input (e.g., icon or text)
13
13
  */
14
14
  adornmentEnd?: string | import("svelte").SvelteComponent | Function;
15
+ /**
16
+ * Additional content to render inside the input component
17
+ */
18
+ children?: import("svelte").SvelteComponent;
15
19
  /**
16
20
  * Additional CSS classes to apply to the component
17
21
  */
@@ -62,6 +66,10 @@ type Props = {
62
66
  * Content to display at the end of the input (e.g., icon or text)
63
67
  */
64
68
  adornmentEnd?: string | import("svelte").SvelteComponent | Function;
69
+ /**
70
+ * Additional content to render inside the input component
71
+ */
72
+ children?: import("svelte").SvelteComponent;
65
73
  /**
66
74
  * Additional CSS classes to apply to the component
67
75
  */
package/dist/components/atoms/input/input.variants.d.ts CHANGED
@@ -2,33 +2,33 @@ export const inputVariants: import("tailwind-variants").TVReturnType<{
2
2
  [key: string]: {
3
3
  [key: string]: import("tailwind-variants").ClassValue | {
4
4
  base?: import("tailwind-variants").ClassValue;
5
+ input?: import("tailwind-variants").ClassValue;
5
6
  adornmentStart?: import("tailwind-variants").ClassValue;
6
7
  adornmentEnd?: import("tailwind-variants").ClassValue;
7
- iconWrapper?: import("tailwind-variants").ClassValue;
8
8
  };
9
9
  };
10
10
  } | {
11
11
  disabled: {
12
12
  true: import("tailwind-variants").ClassValue | {
13
13
  base?: import("tailwind-variants").ClassValue;
14
+ input?: import("tailwind-variants").ClassValue;
14
15
  adornmentStart?: import("tailwind-variants").ClassValue;
15
16
  adornmentEnd?: import("tailwind-variants").ClassValue;
16
- iconWrapper?: import("tailwind-variants").ClassValue;
17
17
  };
18
18
  };
19
19
  error: {
20
20
  true: import("tailwind-variants").ClassValue | {
21
21
  base?: import("tailwind-variants").ClassValue;
22
+ input?: import("tailwind-variants").ClassValue;
22
23
  adornmentStart?: import("tailwind-variants").ClassValue;
23
24
  adornmentEnd?: import("tailwind-variants").ClassValue;
24
- iconWrapper?: import("tailwind-variants").ClassValue;
25
25
  };
26
26
  };
27
27
  }, {
28
28
  adornmentStart: string;
29
29
  adornmentEnd: string;
30
30
  base: string;
31
- iconWrapper: string;
31
+ input: string;
32
32
  }, undefined, {
33
33
  disabled: {
34
34
  true: {
package/dist/components/atoms/input/input.variants.js CHANGED
@@ -7,8 +7,9 @@ const inputVariants = tv({
7
7
  "pointer-events-none absolute top-1/2 left-4 -translate-y-1/2 body-small text-neutral-900 dark:text-neutral-200",
8
8
  adornmentEnd:
9
9
  "pointer-events-none absolute top-1/2 right-4 -translate-y-1/2 body-small text-neutral-900 dark:text-neutral-200",
10
- base: "h-10",
11
- iconWrapper: "relative",
10
+ base: "relative h-10",
11
+ input:
12
+ "h-full w-full border-0 bg-transparent p-0 [font-size:inherit] leading-[inherit] focus:shadow-none focus:ring-0 focus:outline-0",
12
13
  },
13
14
  });
14
15
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@websline/system-components",
3
- "version": "1.2.5",
3
+ "version": "1.2.6",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },