@stamcat/craftsman 0.0.27-alpha.3 → 0.0.27-alpha.4

package/AGENTS.md

@@ -48,8 +48,8 @@ Behavior notes:
 
 - `type` defaults to `"button"`.
 - For `variant !== "default"`, variant is appended to `className` (for example `"primary"`).
-- Theme class merge: if `theme.components.button` is a string, it is appended to the class list.
-- `className` is preserved and merged after variant/theme classes.
+- `className` is preserved and merged after component classes.
+- Theme component overrides are selector-based CSS emitted by `ThemeProvider`; `theme.components.*` accepts JS style objects or raw CSS/Sass strings for the target selector.
 - If `children` is empty (per `isEmpty`), the component renders nothing.
 - `size` is clamped to `[0.1, 10]` before styling is applied.
 - When `size` is provided, Button scales:
@@ -316,6 +316,27 @@ Example:
 - If your app does not include this package's global CSS variable setup, visual output may differ.
 - Agents should avoid hard-coding assumptions about token names beyond what the consumer app already defines.
 
+## Theme Authoring
+
+- `theme.root` supports JS style objects and raw CSS/Sass strings.
+- `theme.components.*` supports JS style objects and raw CSS/Sass strings.
+- String component styles are applied to the mapped target selector (for example `button`, `input[type='checkbox']`).
+- For multi-file Sass workflows with syntax highlighting and mixins, import compiled CSS text via `*.scss?inline`.
+
+Example:
+
+```tsx
+import greenRoot from "./green.root.scss?inline";
+import greenButton from "./green.button.scss?inline";
+
+export const theme = {
+  root: greenRoot,
+  components: {
+    button: greenButton,
+  },
+};
+```
+
 ## Utility Functions
 
 ### `isEmpty`
@@ -350,6 +371,37 @@ if (Object.keys(obj).length === 0) { ... }
 if (arr.length === 0) { ... }
 ```
 
+### Style utilities parity (`color`, `width`, `breakpoint`)
+
+These utility patterns exist in both TypeScript and Sass.
+
+TypeScript usage:
+
+```ts
+import { color, width, breakpoint } from "@stamcat/craftsman/styles";
+
+const accent = color("blue500");
+const alphaAccent = color("blue500", "rgba", 0.32);
+const twoColumns = width("column", 2);
+const mobileRule = breakpoint("mobileMax", "h4{font-size:14px;}");
+```
+
+Sass usage (framework source):
+
+```scss
+@use "./src/styles/utilities" as u;
+
+.example {
+  color: #{u.color(blue500)};
+  background: #{u.color(blue500, rgba, 0.32)};
+  max-width: #{u.width(column, 2)};
+}
+
+@include u.breakpoint(mobileMax) {
+  .example { font-size: #{u.width(text)}; }
+}
+```
+
 ## Code Generation Patterns to Prefer
 
 1. Generate fully typed React usage examples.

package/Components.esm.js

@@ -1,20 +1,22 @@
 import { __exportAll as e } from "./_virtual/_rolldown/runtime.esm.js";
 import { Button as t } from "./src/components/Button.esm.js";
-import { Input as n } from "./src/components/Input.esm.js";
-import { InputPassword as r } from "./src/components/InputPassword.esm.js";
+import { Input as n } from "./src/components/Input/Input.esm.js";
+import { InputPassword as r } from "./src/components/Input/InputPassword.esm.js";
 import { Loader as i } from "./src/components/Loader.esm.js";
-import { RadioButton as a } from "./src/components/RadioButton.esm.js";
-import { Checkbox as o } from "./src/components/Checkbox.esm.js";
-import { Modal as s } from "./src/components/Modal.esm.js";
+import { RadioButton as a } from "./src/components/Input/RadioButton.esm.js";
+import { Checkbox as o } from "./src/components/Input/Checkbox.esm.js";
+import { Textarea as s } from "./src/components/Input/Textarea.esm.js";
+import { Modal as c } from "./src/components/Modal.esm.js";
 //#region src/components/index.ts
-var c = /* @__PURE__ */ e({
+var l = /* @__PURE__ */ e({
 	Button: () => t,
 	Checkbox: () => o,
 	Input: () => n,
 	InputPassword: () => r,
 	Loader: () => i,
-	Modal: () => s,
-	RadioButton: () => a
+	Modal: () => c,
+	RadioButton: () => a,
+	Textarea: () => s
 });
 //#endregion
-export { t as Button, o as Checkbox, n as Input, r as InputPassword, i as Loader, s as Modal, a as RadioButton, c as components_exports };
+export { t as Button, o as Checkbox, n as Input, r as InputPassword, i as Loader, c as Modal, a as RadioButton, s as Textarea, l as components_exports };

package/README.md

@@ -50,3 +50,8 @@ import { Modal } from "@stamcat/craftsman/Modal";
 
 - `ThemeProvider` injects theme CSS variables and component override rules.
 - Global styles should be loaded once at app root.
+- Base defaults are emitted in the `craftsman-base` layer and theme overrides in `craftsman-theme`.
+- For equal specificity, `craftsman-theme` overrides `craftsman-base`.
+- `theme.components.input` targets only non-radio and non-checkbox inputs.
+- `theme.root` and `theme.components.*` support JS style objects and raw CSS/Sass strings.
+- For Sass file workflows, import compiled CSS text via `*.scss?inline` and pass that string into the theme object.

package/Styles.esm.js

@@ -1,7 +1,7 @@
 import { defaultColors as e, defaultWidths as t } from "./src/styles/utilities/constants.esm.js";
 import { color as n, colors as r, hexToRgba as i } from "./src/styles/utilities/color.esm.js";
-import { BaseWidthSchema as a, BreakpointSchema as o, LayoutWidthsSchema as s, MaxScreenWidthSchema as c, ScreenWidthSchema as l, zLabelPosition as u, zTextInputExclusions as d, zTextInputType as f, zTextInputTypes as p } from "./src/styles/utilities/types.esm.js";
-import { breakpoint as m, media as h, width as g, widths as _ } from "./src/styles/utilities/layout.esm.js";
-import { themeBuilder as v } from "./src/styles/theme/theme.esm.js";
-import { ThemeProvider as y } from "./src/styles/components/ThemeProvider.esm.js";
-export { a as BaseWidthSchema, o as BreakpointSchema, s as LayoutWidthsSchema, c as MaxScreenWidthSchema, l as ScreenWidthSchema, y as ThemeProvider, m as breakpoint, n as color, r as colors, e as defaultColors, t as defaultWidths, i as hexToRgba, h as media, v as themeBuilder, g as width, _ as widths, u as zLabelPosition, d as zTextInputExclusions, f as zTextInputType, p as zTextInputTypes };
+import { BaseWidthSchema as a, BreakpointSchema as o, ButtonType as s, LayoutWidthsSchema as c, MaxScreenWidthSchema as l, ScreenWidthSchema as u, zLabelPosition as d, zTextInputExclusions as f, zTextInputType as p, zTextInputTypes as m } from "./src/utilities/types.esm.js";
+import { breakpoint as h, media as g, width as _, widths as v } from "./src/styles/utilities/layout.esm.js";
+import { themeBuilder as y } from "./src/styles/theme/theme.esm.js";
+import { ThemeProvider as b } from "./src/styles/components/ThemeProvider.esm.js";
+export { a as BaseWidthSchema, o as BreakpointSchema, s as ButtonType, c as LayoutWidthsSchema, l as MaxScreenWidthSchema, u as ScreenWidthSchema, b as ThemeProvider, h as breakpoint, n as color, r as colors, e as defaultColors, t as defaultWidths, i as hexToRgba, g as media, y as themeBuilder, _ as width, v as widths, d as zLabelPosition, f as zTextInputExclusions, p as zTextInputType, m as zTextInputTypes };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.27-alpha.3",
+  "version": "0.0.27-alpha.4",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {
@@ -81,6 +81,10 @@
       "types": "./src/components/Checkbox.d.ts",
       "default": "./src/components/Checkbox.esm.js"
     },
+    "./Textarea": {
+      "types": "./src/components/Textarea.d.ts",
+      "default": "./src/components/Textarea.esm.js"
+    },
     "./Modal": {
       "types": "./src/components/Modal.d.ts",
       "default": "./src/components/Modal.esm.js"

package/src/components/Button.d.ts

@@ -1,4 +1,4 @@
-import { ButtonType } from '../styles/global/components/button';
+import { ButtonType } from '../styles';
 export type ButtonProps = React.ComponentProps<"button"> & {
     variant?: ButtonType;
     size?: number;

package/src/components/Button.esm.js

@@ -2,27 +2,25 @@
 import { isEmpty as e } from "../utilities/validations.esm.js";
 import { width as t } from "../styles/utilities/layout.esm.js";
 import "../../Styles.esm.js";
-import n from "./Button.module.esm.js";
-import r from "clsx";
-import { Fragment as i, jsx as a } from "react/jsx-runtime";
+import n from "clsx";
+import { Fragment as r, jsx as i } from "react/jsx-runtime";
 //#region src/components/Button.tsx
-var o = (o) => {
-	let { type: s = "button", variant: c = "default", size: l, styles: u, className: d, style: f, ...p } = o, m = typeof l == "number" ? Math.min(10, Math.max(.1, l)) : void 0, h = e(u) ? void 0 : u, g = m ? {
-		borderRadius: `calc(var(--btn-border-radius) * ${m})`,
-		padding: `calc(var(--btn-pad-y) * ${m}) calc(var(--btn-pad-x) * ${m})`,
-		fontSize: `max(10px, calc(${t("text")} * ${m}))`
+var a = (a) => {
+	let { type: o = "button", variant: s = "default", size: c, styles: l, className: u, style: d, ...f } = a, p = typeof c == "number" ? Math.min(10, Math.max(.1, c)) : void 0, m = e(l) ? void 0 : l, h = p ? {
+		borderRadius: `calc(var(--btn-border-radius) * ${p})`,
+		padding: `calc(var(--btn-pad-y) * ${p}) calc(var(--btn-pad-x) * ${p})`,
+		fontSize: `max(10px, calc(${t("text")} * ${p}))`
 	} : {};
-	return e(o.children) ? /* @__PURE__ */ a(i, {}) : /* @__PURE__ */ a("button", {
-		type: s,
-		"data-variant": c,
-		className: r(n.button, "button", d),
+	return e(a.children) ? /* @__PURE__ */ i(r, {}) : /* @__PURE__ */ i("button", {
+		type: o,
+		className: n(s, u),
 		style: {
-			...g,
 			...h,
-			...f
+			...m,
+			...d
 		},
-		...p
+		...f
 	});
 };
 //#endregion
-export { o as Button };
+export { a as Button };

package/src/components/{Checkbox.esm.js → Input/Checkbox.esm.js}

@@ -1,7 +1,7 @@
 "use client";
 import { Input as e } from "./Input.esm.js";
 import { jsx as t } from "react/jsx-runtime";
-//#region src/components/Checkbox.tsx
+//#region src/components/Input/Checkbox.tsx
 var n = ({ type: n = "checkbox", labelPosition: r = "right", ...i }) => /* @__PURE__ */ t(e, {
 	type: n,
 	labelPosition: r,

package/src/components/Input/Input.d.ts

@@ -0,0 +1,6 @@
+import { LabeledInput } from './InputWrapper';
+import { TextInputType } from '../../utilities/types';
+export type InputProps = React.ComponentProps<"input"> & LabeledInput & {
+    type?: TextInputType;
+};
+export declare const Input: React.FC<InputProps>;

package/src/components/Input/Input.esm.js

@@ -0,0 +1,33 @@
+"use client";
+import { isEmpty as e } from "../../utilities/validations.esm.js";
+import t from "./Input.module.esm.js";
+import { InputWrapper as n } from "./InputWrapper.esm.js";
+import r from "clsx";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useId as o } from "react";
+//#region src/components/Input/Input.tsx
+var s = ({ label: s, id: c, labelPosition: l = "top", required: u = !1, type: d = "text", error: f, styles: p, endAdornment: m, ...h }) => {
+	let g = o(), _ = c || g;
+	return /* @__PURE__ */ i(n, {
+		label: s,
+		labelPosition: l,
+		error: f,
+		required: u,
+		styles: p,
+		children: /* @__PURE__ */ a("span", {
+			className: t.inputField,
+			"data-has-end-adornment": !e(m),
+			children: [/* @__PURE__ */ i("input", {
+				id: _,
+				type: d,
+				className: r(t.input, d),
+				...h
+			}), !e(m) && /* @__PURE__ */ i("span", {
+				className: t.inputAdornment,
+				children: m
+			})]
+		})
+	});
+};
+//#endregion
+export { s as Input };

package/src/components/Input/Input.module.css

@@ -0,0 +1 @@
+@layer craftsman-base{._wrapper_xzvi1_2[data-label-position=inside]{--react-international-phone-height:50px;--react-international-phone-border-radius:8px;--react-international-phone-border-color:silver;position:relative}}._wrapper_xzvi1_2 label ._inputLabel_xzvi1_9{margin-bottom:calc(var(--w-gutter,var(--w-gutter)px) * .25)}._wrapper_xzvi1_2[data-required=true] label ._inputLabel_xzvi1_9:after{content:"*";color:var(--red700)}._wrapper_xzvi1_2[data-label-position=left] label{align-items:center;display:inline-flex}._wrapper_xzvi1_2[data-label-position=left] label ._inputLabel_xzvi1_9{width:fit-content;margin-right:calc(var(--w-gutter,var(--w-gutter)px) * .75)}._wrapper_xzvi1_2[data-label-position=left]._textarea_xzvi1_24 label{align-items:flex-start}._wrapper_xzvi1_2[data-label-position=bottom] label{flex-direction:column-reverse;align-items:flex-start;display:inline-flex}._wrapper_xzvi1_2[data-label-position=bottom] label ._inputLabel_xzvi1_9{margin-bottom:0;margin-top:calc(var(--w-gutter,var(--w-gutter)px) * .25)}._wrapper_xzvi1_2[data-label-position=right] label{flex-direction:row-reverse;align-items:baseline;display:inline-flex}._wrapper_xzvi1_2[data-label-position=right] label ._inputLabel_xzvi1_9{margin-left:calc(var(--w-gutter,var(--w-gutter)px) * .25);margin-bottom:0}._wrapper_xzvi1_2[data-label-position=inside] ._inputLabel_xzvi1_9{background-color:var(--white);z-index:1;width:fit-content;top:calc(var(--w-gutter,var(--w-gutter)px) * .25);left:calc(var(--w-gutter,var(--w-gutter)px) * .25);pointer-events:none;padding:0 5px;transition:top .15s,left .15s,font-size .15s,color .15s;position:absolute}._wrapper_xzvi1_2[data-label-position=inside]>label>._inputField_xzvi1_56>._input_xzvi1_9,._wrapper_xzvi1_2[data-label-position=inside]>._input_xzvi1_9{transition:border-color .2s}._wrapper_xzvi1_2[data-label-position=inside]:focus-within ._inputLabel_xzvi1_9{top:-.5rem;left:calc(var(--w-gutter,var(--w-gutter)px) * .125);font-size:calc(var(--w-text,var(--w-text)px) * .75);color:var(--blue500)}._wrapper_xzvi1_2[data-label-position=inside]:focus-within ._input_xzvi1_9{border-color:var(--blue500)}._wrapper_xzvi1_2[data-label-position=inside]:focus-within ._input_xzvi1_9::placeholder{opacity:1}._wrapper_xzvi1_2[data-label-position=inside][data-has-input=true] ._inputLabel_xzvi1_9{top:-.5rem;left:calc(var(--w-gutter,var(--w-gutter)px) * .125);font-size:calc(var(--w-text,var(--w-text)px) * .75)}._wrapper_xzvi1_2[data-label-position=inside]:has(._input_xzvi1_9:not(:placeholder-shown)) ._inputLabel_xzvi1_9{top:-.5rem;left:calc(var(--w-gutter,var(--w-gutter)px) * .125);font-size:calc(var(--w-text,var(--w-text)px) * .75)}._wrapper_xzvi1_2[data-label-position=inside]:has(._input_xzvi1_9:-webkit-autofill) ._inputLabel_xzvi1_9{top:-.5rem;left:calc(var(--w-gutter,var(--w-gutter)px) * .125);font-size:calc(var(--w-text,var(--w-text)px) * .75)}._wrapper_xzvi1_2[data-label-position=inside] ._input_xzvi1_9[type=tel]{width:100%}._wrapper_xzvi1_2[data-label-position=inside] ._input_xzvi1_9::placeholder{opacity:0;transition:opacity .2s}._inputField_xzvi1_56{align-items:center;display:inline-flex;position:relative}._inputField_xzvi1_56[data-has-end-adornment=true]>._input_xzvi1_9{width:100%;padding-right:calc(var(--w-gutter,var(--w-gutter)px) * 1.5)}._inputAdornment_xzvi1_95{right:calc(var(--w-gutter,var(--w-gutter)px) * .5);z-index:1;align-items:center;margin-top:0;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}._error_xzvi1_106{margin-top:calc(var(--w-gutter,var(--w-gutter)px) * .25);font-size:calc(var(--w-text,var(--w-text)px) * .75);color:var(--red600)}._inputViewToggle_xzvi1_112{align-items:"center";padding:0;line-height:1;display:inline-flex}

package/src/components/Input/Input.module.esm.js

@@ -0,0 +1,13 @@
+import './Input.module.css';//#region src/components/Input/Input.module.scss
+var e = "_wrapper_xzvi1_2", t = "_inputLabel_xzvi1_9", n = "_textarea_xzvi1_24", r = "_inputField_xzvi1_56", i = "_input_xzvi1_9", a = "_inputAdornment_xzvi1_95", o = "_error_xzvi1_106", s = "_inputViewToggle_xzvi1_112", c = {
+	wrapper: e,
+	inputLabel: t,
+	textarea: n,
+	inputField: r,
+	input: i,
+	inputAdornment: a,
+	error: o,
+	inputViewToggle: s
+};
+//#endregion
+export { c as default, o as error, i as input, a as inputAdornment, r as inputField, t as inputLabel, s as inputViewToggle, n as textarea, e as wrapper };

package/src/components/Input/Input.module.scss

@@ -0,0 +1,165 @@
+@use "../../styles/global/components/input";
+@use "../../styles/utilities/functions" as u;
+
+
+@mixin inside-input-label-floating {
+top: -0.5rem;
+left: #{u.width("gutter", 0.125)};
+font-size: #{u.width("text", 0.75)};
+}
+
+.wrapper {
+    label {
+        .inputLabel {
+            margin-bottom: #{u.width("gutter", 0.25)};
+        }
+    }
+
+    &[data-required="true"] {
+        label {
+            .inputLabel {
+                &::after {
+                    content: "*";
+                    color: var(--red700);
+                }
+            }
+        }
+    }
+
+    &[data-label-position="left"] {
+        label {
+            display: inline-flex;
+            align-items: center;
+
+            .inputLabel {
+                width: fit-content;
+                margin-right: #{u.width("gutter", 0.75)};
+            }
+        }
+        &.textarea {
+            label {
+                align-items: flex-start;
+            }
+        }
+    }
+
+    &[data-label-position="bottom"] {
+        label {
+            display: inline-flex;
+            flex-direction: column-reverse;
+            align-items: flex-start;
+
+            .inputLabel {
+                margin-bottom: 0;
+                margin-top: #{u.width("gutter", 0.25)};
+            }
+        }
+    }
+
+    &[data-label-position="right"] {
+        label {
+            display: inline-flex;
+            flex-direction: row-reverse;
+            align-items: baseline;
+
+            .inputLabel {
+                margin-left: #{u.width("gutter", 0.25)};
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    &[data-label-position="inside"] {
+        @extend %inside-input-label-base;
+
+        .inputLabel {
+            position: absolute;
+            background-color: var(--white);
+            z-index: 1;
+            width: fit-content;
+            padding: 0 5px;
+            top: #{u.width(gutter, 0.25)};
+            left: #{u.width(gutter, 0.25)};
+            pointer-events: none;
+            transition:
+                top 150ms ease,
+                left 150ms ease,
+                font-size 150ms ease,
+                color 150ms ease;
+        }
+
+        > label > .inputField > .input,
+        > .input {
+            transition: border-color 200ms ease;
+        }
+
+        &:focus-within {
+            .inputLabel {
+                @include inside-input-label-floating;
+                color: var(--blue500);
+            }
+
+            .input {
+                border-color: var(--blue500);
+            }
+
+            .input::placeholder {
+                opacity: 1;
+            }
+        }
+
+        &:has(.input:not(:placeholder-shown)),
+        &:has(.input:-webkit-autofill),
+        &[data-has-input="true"] {
+            .inputLabel {
+                @include inside-input-label-floating;
+            }
+        }
+
+        .input[type="tel"] {
+            width: 100%;
+        }
+
+        .input::placeholder {
+            opacity: 0;
+            transition: opacity 200ms ease;
+        }
+    }
+
+}
+
+.inputField {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+
+    &[data-has-end-adornment="true"] {
+        > .input {
+            width: 100%;
+            padding-right: #{u.width("gutter", 1.5)};;
+        }
+    }
+}
+
+.inputAdornment {
+    position: absolute;
+    right: #{u.width("gutter", 0.5)};;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-top: 0;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+}
+
+.error {
+    margin-top: #{u.width("gutter", 0.25)};;
+    font-size: #{u.width("text", 0.75)};;
+    color: var(--red600);
+}
+.inputViewToggle {
+    padding: 0;
+    display: inline-flex;
+    align-items: "center";
+    line-height: 1;
+};

package/src/components/{InputPassword.d.ts → Input/InputPassword.d.ts}

@@ -1,4 +1,4 @@
-import { TextInputType } from '../styles/utilities/types';
+import { TextInputType } from '../../utilities/types';
 import { InputProps } from './Input';
 export type InputPasswordProps = React.ComponentProps<"input"> & {} & Omit<InputProps, "type" | "endAdornment"> & {
     type?: Extract<TextInputType, "password">;

package/src/components/Input/InputPassword.esm.js

@@ -0,0 +1,29 @@
+"use client";
+import { Button as e } from "../Button.esm.js";
+import t from "./Input.module.esm.js";
+import { Input as n } from "./Input.esm.js";
+import { jsx as r } from "react/jsx-runtime";
+import { useState as i } from "react";
+import { ImEye as a, ImEyeBlocked as o } from "react-icons/im";
+//#region src/components/Input/InputPassword.tsx
+var s = ({ visible: n, onToggle: i }) => /* @__PURE__ */ r(e, {
+	type: "button",
+	variant: "text",
+	onClick: i,
+	"aria-label": n ? "Hide password" : "Show password",
+	"aria-pressed": n,
+	className: t.inputViewToggle,
+	children: r(n ? a : o, { size: 16 })
+}), c = ({ type: e = "password", ...t }) => {
+	let [a, o] = i(!1), c = a ? "text" : e;
+	return /* @__PURE__ */ r(n, {
+		...t,
+		type: c,
+		endAdornment: /* @__PURE__ */ r(s, {
+			visible: a,
+			onToggle: () => o((e) => !e)
+		})
+	});
+};
+//#endregion
+export { c as InputPassword };

package/src/components/Input/InputWrapper.d.ts

@@ -0,0 +1,11 @@
+import { LabelPosition } from '../../utilities/types';
+export type LabeledInput = {
+    label?: string | React.ReactNode;
+    labelPosition?: LabelPosition;
+    error?: string | boolean | React.ReactNode;
+    required?: boolean;
+    styles?: React.CSSProperties;
+    endAdornment?: React.ReactNode;
+};
+export type InputWrapperProps = React.ComponentProps<"input" | "textarea"> & LabeledInput;
+export declare const InputWrapper: React.FC<InputWrapperProps>;

package/src/components/Input/InputWrapper.esm.js

@@ -0,0 +1,28 @@
+"use client";
+import { isEmpty as e } from "../../utilities/validations.esm.js";
+import t from "./Input.module.esm.js";
+import n from "clsx";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/Input/InputWrapper.tsx
+var a = ({ label: a, labelPosition: o = "top", required: s = !1, error: c, styles: l, className: u, style: d, children: f, value: p, defaultValue: m }) => {
+	let h = !e(p) || !e(m), g = e(l) ? void 0 : l;
+	return /* @__PURE__ */ i("div", {
+		"data-label-position": o,
+		"data-required": s,
+		"data-has-input": h,
+		className: n(t.wrapper, u),
+		style: {
+			...g,
+			...d
+		},
+		children: [e(a) ? f : /* @__PURE__ */ i("label", { children: [o !== "hidden" && /* @__PURE__ */ r("div", {
+			className: t.inputLabel,
+			children: a
+		}), f] }), !e(c) && /* @__PURE__ */ r("div", {
+			className: t.error,
+			children: c
+		})]
+	});
+};
+//#endregion
+export { a as InputWrapper };

package/src/components/{RadioButton.esm.js → Input/RadioButton.esm.js}

@@ -1,7 +1,7 @@
 "use client";
 import { Input as e } from "./Input.esm.js";
 import { jsx as t } from "react/jsx-runtime";
-//#region src/components/RadioButton.tsx
+//#region src/components/Input/RadioButton.tsx
 var n = ({ type: n = "radio", labelPosition: r = "right", ...i }) => /* @__PURE__ */ t(e, {
 	type: n,
 	labelPosition: r,

package/src/components/Input/Textarea.d.ts

@@ -0,0 +1,3 @@
+import { LabeledInput } from './InputWrapper';
+export type TextareaProps = React.ComponentProps<"textarea"> & LabeledInput;
+export declare const Textarea: React.FC<TextareaProps>;

package/src/components/Input/Textarea.esm.js

@@ -0,0 +1,25 @@
+"use client";
+import e from "./Input.module.esm.js";
+import { InputWrapper as t } from "./InputWrapper.esm.js";
+import n from "clsx";
+import { jsx as r } from "react/jsx-runtime";
+import { useId as i } from "react";
+//#region src/components/Input/Textarea.tsx
+var a = ({ labelPosition: a = "top", id: o, label: s, error: c, required: l, className: u, styles: d, ...f }) => {
+	let p = i(), m = o || p;
+	return /* @__PURE__ */ r(t, {
+		label: s,
+		className: n(e.textarea, u),
+		labelPosition: a,
+		error: c,
+		required: l,
+		styles: d,
+		children: /* @__PURE__ */ r("textarea", {
+			id: m,
+			className: n(e.input),
+			...f
+		})
+	});
+};
+//#endregion
+export { a as Textarea };

package/src/components/Modal.esm.js

@@ -3,19 +3,12 @@ import { isEmpty as e } from "../utilities/validations.esm.js";
 import { color as t } from "../styles/utilities/color.esm.js";
 import { Button as n } from "./Button.esm.js";
 import r from "./Modal.module.esm.js";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-import s from "react";
-import { LuX as c } from "react-icons/lu";
+import i from "clsx";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import c from "react";
+import { LuX as l } from "react-icons/lu";
 //#region src/components/Modal.tsx
-var l = {
-	textDecoration: "none",
-	height: 30,
-	width: 30,
-	borderRadius: "50%",
-	padding: 0,
-	display: "inline-flex",
-	justifyContent: "center"
-}, u = class extends s.PureComponent {
+var u = class extends c.PureComponent {
 	state = { isClosing: !1 };
 	onDismiss = () => {
 		this.props.onDismiss && (this.setState({ isClosing: !0 }), setTimeout(() => {
@@ -23,39 +16,38 @@ var l = {
 		}, 280));
 	};
 	onClickBackground = () => {
-		(this.props.backgroundDismiss || !0) === !0 && this.onDismiss();
+		(this.props.backgroundDismiss ?? !0) === !0 && this.onDismiss();
 	};
 	render() {
-		let s = e(this.props.styles) ? void 0 : this.props.styles;
-		return this.props.visible ? /* @__PURE__ */ o("div", {
+		let c = e(this.props.styles) ? void 0 : this.props.styles, u = this.props.type || "dialog";
+		return this.props.visible ? /* @__PURE__ */ s("div", {
 			className: r.wrapper,
-			style: s,
-			children: [/* @__PURE__ */ o("div", {
-				className: r.content,
-				"data-type": this.props.type || "dialog",
+			style: c,
+			children: [/* @__PURE__ */ s("div", {
+				className: i(r.content, r[u]),
 				"data-is-closing": this.state.isClosing,
 				children: [
-					/* @__PURE__ */ o("header", { children: [this.props.header && /* @__PURE__ */ a(i, { children: this.props.header }), !this.props.hideDismissIcon && /* @__PURE__ */ a(n, {
+					/* @__PURE__ */ s("header", { children: [this.props.header && /* @__PURE__ */ o(a, { children: this.props.header }), !this.props.hideDismissIcon && /* @__PURE__ */ o(n, {
 						variant: "primary",
-						styles: l,
+						className: r.closeModal,
 						onClick: this.onDismiss,
-						children: /* @__PURE__ */ a(c, {
+						children: /* @__PURE__ */ o(l, {
 							fill: t("white"),
 							size: 18
 						})
 					})] }),
-					/* @__PURE__ */ a("section", { children: this.props.children }),
-					this.props.footer && /* @__PURE__ */ a("footer", {
+					/* @__PURE__ */ o("section", { children: this.props.children }),
+					this.props.footer && /* @__PURE__ */ o("footer", {
 						className: r.actionContainer,
 						children: this.props.footer
 					})
 				]
-			}), /* @__PURE__ */ a("div", {
+			}), /* @__PURE__ */ o("div", {
 				className: r.background,
 				"data-is-closing": this.state.isClosing,
 				onClick: this.onClickBackground
 			})]
-		}) : /* @__PURE__ */ a(i, {});
+		}) : /* @__PURE__ */ o(a, {});
 	}
 };
 //#endregion