@stamcat/craftsman 0.0.23-alpha.26 → 0.0.23-alpha.28

package/AGENTS.md

@@ -10,9 +10,12 @@ Use these imports:
 
 ```tsx
 import { Button } from "@stamcat/craftsman/Button";
+import { Checkbox } from "@stamcat/craftsman/Checkbox";
 import { Input } from "@stamcat/craftsman/Input";
+import { InputPassword } from "@stamcat/craftsman/InputPassword";
 import { Loader } from "@stamcat/craftsman/Loader";
 import { Modal } from "@stamcat/craftsman/Modal";
+import { RadioButton } from "@stamcat/craftsman/RadioButton";
 ```
 
 Do not assume a root export like `@stamcat/craftsman` unless that export is explicitly added to package `exports`.
@@ -101,7 +104,19 @@ import { Input } from "@stamcat/craftsman/Input";
 
 Props:
 
-- Pure passthrough of native `<input>` props.
+- Inherits native `<input>` props.
+- `label?: string | ReactNode`
+- `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
+- `error?: string | boolean | ReactNode`
+- `required?: boolean`
+- `styles?: SerializedStyles` (wrapper override)
+- `type?: TextInputType` (checkbox/radio excluded)
+
+Behavior notes:
+
+- `id` is preserved; if omitted, a stable React `useId` value is used.
+- Floating-label behavior is supported when `labelPosition="inside"`.
+- `endAdornment` exists as an internal extension point used by `InputPassword`; consumer apps should prefer `InputPassword` rather than wiring password toggles on `Input`.
 
 Example:
 
@@ -109,6 +124,112 @@ Example:
 <Input type="email" placeholder="you@company.com" required />
 ```
 
+### InputPassword
+
+Import:
+
+```tsx
+import { InputPassword } from "@stamcat/craftsman/InputPassword";
+```
+
+Props:
+
+- Extends `Input` props, with `type` constrained to password mode.
+- Includes all label, error, required, and wrapper style props from `Input`.
+
+Behavior notes:
+
+- Built on top of `Input` and adds an internal password visibility state.
+- Renders an in-field show/hide toggle button.
+- Toggle is accessible: real button element, keyboard operable, and updates `aria-label` + `aria-pressed`.
+- Use this component for password fields instead of `Input type="password"`.
+
+Example:
+
+```tsx
+<InputPassword
+  label="Password"
+  placeholder="Enter your password"
+  autoComplete="current-password"
+/>
+```
+
+### Checkbox
+
+Import:
+
+```tsx
+import { Checkbox } from "@stamcat/craftsman/Checkbox";
+```
+
+Props:
+
+- Extends `Input` props.
+- `type?: "checkbox"` (default: `"checkbox"`)
+- `labelPosition?: "left" | "right" | "top" | "bottom"` (default: `"right"`)
+
+Behavior notes:
+
+- `Checkbox` is a thin wrapper around `Input` with checkbox-specific guardrails.
+- The wrapper enforces checkbox type by default and narrows label position options to common checkbox layouts.
+- Controlled and uncontrolled patterns are both supported (`checked` + `onChange`, or `defaultChecked`).
+
+Example:
+
+```tsx
+<Checkbox
+  id="accept-terms"
+  name="terms"
+  value="accepted"
+  label="Accept terms"
+  checked={accepted}
+  onChange={(event) => setAccepted(event.currentTarget.checked)}
+/>
+```
+
+### RadioButton
+
+Import:
+
+```tsx
+import { RadioButton } from "@stamcat/craftsman/RadioButton";
+```
+
+Props:
+
+- Extends `Input` props.
+- `type?: "radio"` (default: `"radio"`)
+- `labelPosition?: "left" | "right"` (default: `"right"`)
+
+Behavior notes:
+
+- `RadioButton` is a thin wrapper around `Input` with radio-specific guardrails.
+- Group behavior is native HTML radio behavior: use a shared `name` across options.
+- Controlled and uncontrolled patterns are both supported (`checked` + `onChange`, or `defaultChecked`).
+
+Example:
+
+```tsx
+<>
+  <RadioButton
+    id="captain-kirk"
+    name="favorite-captain"
+    value="Kirk"
+    label="James T. Kirk"
+    checked={selected === "Kirk"}
+    onChange={(event) => setSelected(event.currentTarget.value)}
+  />
+  <RadioButton
+    id="captain-picard"
+    name="favorite-captain"
+    value="Picard"
+    label="Jean-Luc Picard"
+    checked={selected === "Picard"}
+    onChange={(event) => setSelected(event.currentTarget.value)}
+  />
+</>
+```
+
 ### Modal
 
 Import:
@@ -246,6 +367,6 @@ if (arr.length === 0) { ... }
 
 If uncertain about available exports:
 
-1. Use only `Button`, `Input`, `Loader`, and `Modal` from their component entry points.
+1. Use only `Button`, `Checkbox`, `Input`, `InputPassword`, `Loader`, `Modal`, and `RadioButton` from their component entry points.
 2. Do not invent package APIs.
 3. Prefer native HTML elements for anything not explicitly exported.

package/Components.esm.js

@@ -1,14 +1,20 @@
 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 { Loader as r } from "./src/components/Loader.esm.js";
-import { Modal as i } from "./src/components/Modal.esm.js";
+import { InputPassword as r } from "./src/components/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";
 //#region src/components/index.ts
-var a = /* @__PURE__ */ e({
+var c = /* @__PURE__ */ e({
 	Button: () => t,
+	Checkbox: () => o,
 	Input: () => n,
-	Loader: () => r,
-	Modal: () => i
+	InputPassword: () => r,
+	Loader: () => i,
+	Modal: () => s,
+	RadioButton: () => a
 });
 //#endregion
-export { t as Button, n as Input, r as Loader, i as Modal, a as components_exports };
+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 };

package/Styles.esm.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.23-alpha.26",
+  "version": "0.0.23-alpha.28",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {
@@ -25,7 +25,7 @@
   "dependencies": {
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
-    "dompurify": "3.4.11",
+    "dompurify": "3.4.12",
     "emotion": "11.0.0",
     "react": "19.2.7",
     "react-date-picker": "12.0.2",
@@ -39,7 +39,8 @@
   },
   "devDependencies": {},
   "overrides": {
-    "postcss": "8.5.20"
+    "postcss": "8.5.20",
+    "sharp": "0.35.3"
   },
   "exports": {
     ".": {
@@ -66,10 +67,22 @@
       "types": "./src/components/Input.d.ts",
       "default": "./src/components/Input.esm.js"
     },
+    "./InputPassword": {
+      "types": "./src/components/InputPassword.d.ts",
+      "default": "./src/components/InputPassword.esm.js"
+    },
     "./Loader": {
       "types": "./src/components/Loader.d.ts",
       "default": "./src/components/Loader.esm.js"
     },
+    "./RadioButton": {
+      "types": "./src/components/RadioButton.d.ts",
+      "default": "./src/components/RadioButton.esm.js"
+    },
+    "./Checkbox": {
+      "types": "./src/components/Checkbox.d.ts",
+      "default": "./src/components/Checkbox.esm.js"
+    },
     "./Modal": {
       "types": "./src/components/Modal.d.ts",
       "default": "./src/components/Modal.esm.js"

package/src/components/Button.esm.js

@@ -6,19 +6,23 @@ import r from "@emotion/styled";
 import { Fragment as i, jsx as a } from "react/jsx-runtime";
 //#region src/components/Button.tsx
 var o = r.button`
-    ${(e) => e.styles}
     ${((e) => e.size && n`
         border-radius: calc(var(--btn-border-radius) * ${e.size});
         padding: calc(var(--btn-pad-y) * ${e.size}) calc(var(--btn-pad-x) * ${e.size});
         font-size: max(10px, calc(${t("text")} * ${e.size}));
     `)}
+    ${(e) => e.styles && n`
+        && {
+            ${e.styles}
+        }
+    `}
 `, s = (t) => {
-	let { type: n = "button", variant: r = "default", className: s, size: c, ...l } = t, u = typeof c == "number" ? Math.min(10, Math.max(.1, c)) : void 0, d = [r === "default" ? void 0 : r, s].filter(Boolean).join(" ") || void 0;
+	let { type: n = "button", variant: r = "default", size: s, ...c } = t, l = typeof s == "number" ? Math.min(10, Math.max(.1, s)) : void 0;
 	return e(t.children) ? /* @__PURE__ */ a(i, {}) : /* @__PURE__ */ a(o, {
 		type: n,
-		size: u,
-		className: d,
-		...l
+		size: l,
+		"data-variant": r,
+		...c
 	});
 };
 //#endregion

package/src/components/Checkbox.d.ts

@@ -0,0 +1,7 @@
+import { InputProps } from './Input';
+type CheckboxProps = InputProps & {
+    type?: "checkbox";
+    labelPosition?: "left" | "right" | "top" | "bottom";
+};
+export declare const Checkbox: React.FC<CheckboxProps>;
+export {};

package/src/components/Checkbox.esm.js

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

package/src/components/Input.d.ts

@@ -1,12 +1,12 @@
 import { SerializedStyles } from '@emotion/react';
-import { TextInputExclusions } from '../styles';
-export type LabelPosition = "top" | "left" | "bottom" | "right" | "inside" | "hidden";
+import { LabelPosition, TextInputType } from '../styles/utilities/types';
 export type InputProps = React.ComponentProps<"input"> & {
     label?: string | React.ReactNode;
     labelPosition?: LabelPosition;
     error?: string | boolean | React.ReactNode;
     required?: boolean;
     styles?: SerializedStyles;
-    type?: Exclude<React.HTMLInputTypeAttribute, TextInputExclusions>;
+    endAdornment?: React.ReactNode;
+    type?: TextInputType;
 };
 export declare const Input: React.FC<InputProps>;

package/src/components/Input.esm.js

@@ -1,136 +1,86 @@
 import { isEmpty as e } from "../utilities/validations.esm.js";
 import { color as t } from "../styles/utilities/color.esm.js";
 import { width as n } from "../styles/utilities/layout.esm.js";
-import "../../Styles.esm.js";
-import { css as r } from "@emotion/react";
-import i from "@emotion/styled";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { inputErrorStyles as r, inputFieldAdornmentStyles as i, insideLabelStyles as a } from "../styles/global/components/input.esm.js";
+import { css as o } from "@emotion/react";
+import s from "@emotion/styled";
+import { useId as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/Input.tsx
-var s = r`
-    .input-label {
-        top: -0.5rem;
-        left: ${n("gutter", .25)};
-        font-size: ${n("text", .75)};
-    }
-`, c = (e) => r`
-    --react-international-phone-height: 50px;
-    --react-international-phone-border-radius: 8px;
-    --react-international-phone-border-color: #c0c0c0ff;
-    position: relative;
-
-    .input-label {
-        position: absolute;
-        background-color: white;
-        z-index: 1;
-        width: fit-content;
-        padding: 0 5px;
-        top: ${n("gutter", .25)};
-        left: ${n("gutter", .25)};
-        pointer-events: none;
-        transition: top 150ms ease, left 150ms ease, font-size 150ms ease, color 150ms ease;
-    }
-
-    > label > input,
-    > input {
-        transition: border-color 200ms ease;
-    }
-    &:focus-within {
-        ${s}
-        .input-label {
-            color: ${t("blue500")};
-        }
-        input {
-            border-color: ${t("blue500")};
-        }
-    }
-
-    &:has(input:not(:placeholder-shown)) {
-        ${s}
-    }
-
-    &:has(input:-webkit-autofill) {
-        ${s}
-    }
-
-    ${e ? s : ""}
-    input[type="tel"] {
-        width: 100%;
-    }
-
-    input::placeholder {
-        opacity: 0;
-        transition: opacity 200ms ease;
-    }
-
-    &:focus-within input::placeholder {
-        opacity: 1;
-    }
-`, l = i.div`
+var d = (e, r) => o`
     label {
         .input-label {
             margin-bottom: ${n("gutter", .25)};
-            ${(e) => e.required && r`
+            ${r && o`
                 ::after {
                     content: "*";
                     color: ${t("red700")};
                 }
             `}
-            
         }
     }
-    &.left label {
+
+    &[data-label-position="left"] label {
+        display: inline-flex;
+        align-items: center;
         .input-label {
             width: fit-content;
             margin-right: ${n("gutter", .75)};
         }
-        display: inline-flex;
-        align-items: center;
     }
-    &.bottom label {
+
+    &[data-label-position="bottom"] label {
         display: inline-flex;
         flex-direction: column-reverse;
         align-items: flex-start;
         .input-label {
-            display: block;
             margin-bottom: 0;
             margin-top: ${n("gutter", .25)};
         }
     }
-    &.right label {
+
+    &[data-label-position="right"] label {
         display: inline-flex;
         flex-direction: row-reverse;
         align-items: center;
         .input-label {
-            display: block;
             margin-left: ${n("gutter", .75)};
         }
     }
-    &.inside {
-        ${(e) => c(e.hasInput)}
+
+    &[data-label-position="inside"] {
+        ${a(e)}
     }
+`, f = s.div`
+    ${(e) => d(e.hasInput, e.required)}
+    ${(e) => e.hasEndAdornment && i}
     ${(e) => e.styles}
-`, u = i.div`
-    margin-top: ${n("gutter", .25)};
-    font-size: ${n("text", .75)};
-    color: ${t("red700")};
-`, d = ({ label: t, id: n, labelPosition: r = "top", required: i = !1, error: s, styles: c, ...d }) => {
-	let f = n || crypto.randomUUID(), p = !e(d.value) || !e(d.defaultValue), m = !e(s);
-	return /* @__PURE__ */ o(l, {
-		className: r,
+`, p = s.div`
+    ${r}
+`, m = ({ label: t, id: n, labelPosition: r = "top", required: i = !1, type: a = "text", error: o, styles: s, endAdornment: d, ...m }) => {
+	let h = c(), g = n || h, _ = !e(m.value) || !e(m.defaultValue), v = /* @__PURE__ */ u("span", {
+		className: "input-field",
+		"data-has-end-adornment": !e(d),
+		children: [/* @__PURE__ */ l("input", {
+			id: g,
+			type: a,
+			...m
+		}), !e(d) && /* @__PURE__ */ l("span", {
+			className: "input-adornment",
+			children: d
+		})]
+	});
+	return /* @__PURE__ */ u(f, {
+		"data-label-position": r,
+		hasEndAdornment: !e(d),
 		required: i,
-		hasInput: p,
-		styles: c,
-		children: [e(t) ? /* @__PURE__ */ a("input", {
-			id: f,
-			...d
-		}) : /* @__PURE__ */ o("label", { children: [r !== "hidden" && /* @__PURE__ */ a("div", {
+		hasInput: _,
+		styles: s,
+		children: [e(t) ? v : /* @__PURE__ */ u("label", { children: [r !== "hidden" && /* @__PURE__ */ l("div", {
 			className: "input-label",
 			children: t
-		}), /* @__PURE__ */ a("input", {
-			id: f,
-			...d
-		})] }), m && /* @__PURE__ */ a(u, { children: s })]
+		}), v] }), !e(o) && /* @__PURE__ */ l(p, { children: o })]
 	});
 };
 //#endregion
-export { d as Input };
+export { m as Input };

package/src/components/InputPassword.d.ts

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

package/src/components/InputPassword.esm.js

@@ -0,0 +1,33 @@
+import { Button as e } from "./Button.esm.js";
+import { Input as t } from "./Input.esm.js";
+import { css as n } from "@emotion/react";
+import { useState as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { ImEye as a, ImEyeBlocked as o } from "react-icons/im";
+//#region src/components/InputPassword.tsx
+var s = n`
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    line-height: 1;
+`, c = ({ visible: t, onToggle: n }) => /* @__PURE__ */ i(e, {
+	type: "button",
+	variant: "text",
+	onClick: n,
+	"aria-label": t ? "Hide password" : "Show password",
+	"aria-pressed": t,
+	styles: s,
+	children: i(t ? a : o, { size: 16 })
+}), l = ({ type: e = "password", ...n }) => {
+	let [a, o] = r(!1), s = a ? "text" : e;
+	return /* @__PURE__ */ i(t, {
+		...n,
+		type: s,
+		endAdornment: /* @__PURE__ */ i(c, {
+			visible: a,
+			onToggle: () => o((e) => !e)
+		})
+	});
+};
+//#endregion
+export { l as InputPassword };

package/src/components/RadioButton.d.ts

@@ -0,0 +1,7 @@
+import { InputProps } from './Input';
+type RadioButtonProps = InputProps & {
+    type?: "radio";
+    labelPosition?: "left" | "right";
+};
+export declare const RadioButton: React.FC<RadioButtonProps>;
+export {};

package/src/components/RadioButton.esm.js

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

package/src/components/index.d.ts

@@ -1,4 +1,7 @@
 export { Button } from './Button';
 export { Input } from './Input';
+export { InputPassword } from './InputPassword';
 export { Loader } from './Loader';
+export { RadioButton } from './RadioButton';
+export { Checkbox } from './Checkbox';
 export { Modal } from './Modal';

package/src/styles/global/components/button.esm.js

@@ -38,7 +38,8 @@ var a = r`
     &:not(:disabled):not(.disabled):hover {
         background-color: ${e("teal200")};
     }
-    &.text {
+    &.text,
+    &[data-variant="text"] {
         ${a}
     }
     &:disabled,
@@ -46,13 +47,15 @@ var a = r`
         cursor: not-allowed;
         border-color: ${e("gray200")};
         color: ${e("gray400")};
-        &.primary {
+        &.primary,
+        &[data-variant="primary"] {
             border-color: ${e("gray200")};
             background-color: ${e("gray400")};
             color: ${e("gray200")};
         }
     }
-    &.primary {
+    &.primary,
+    &[data-variant="primary"] {
         color: ${e("white")};
         background-color: ${e("blue500")};
         &:not(:disabled):not(.disabled):hover {

package/src/styles/global/components/checkbox.d.ts

@@ -0,0 +1 @@
+export declare const checkboxStyles: import('@emotion/utils').SerializedStyles;

package/src/styles/global/components/checkbox.esm.js

@@ -0,0 +1,78 @@
+import { color as e } from "../../utilities/color.esm.js";
+import { css as t } from "@emotion/react";
+//#region src/styles/global/components/checkbox.ts
+var n = t`
+    &[type="checkbox"] {
+        appearance: none;
+        box-sizing: border-box;
+        position: relative;
+        display: inline-block;
+        vertical-align: baseline;
+        top: 0.08em;
+        margin: 0;
+        padding: 0;
+        height: 16px;
+        width: 16px;
+        border-radius: 4px;
+        border: 1px solid ${e("blue500")};
+        background: #fff;
+
+        &::before {
+            content: "";
+            position: absolute;
+            inset: 0;
+            border-radius: 4px;
+            background: transparent;
+            transition: background-color 0.15s ease;
+        }
+
+        &::after {
+            position: absolute;
+            left: 50%;
+            top: 45%;
+            width: 5px;
+            height: 8px;
+            content: "";
+            display: block;
+            border: solid white;
+            border-width: 0 2px 2px 0;
+            transform: translate(-50%, -58%) rotate(45deg) scale(0);
+            transform-origin: center;
+            transition: transform 0.15s ease;
+        }
+
+        &:checked {
+            border-color: ${e("blue500")};
+            &::before {
+                background-color: ${e("blue500")};
+            }
+            &::after {
+                transform: translate(-50%, -58%) rotate(45deg) scale(1);
+            }
+        }
+
+        &:disabled {
+            border-color: ${e("gray500")};
+            &::before {
+                background-color: ${e("gray200")};
+            }
+            &::after {
+                border-color: ${e("gray200")};
+                transform: translate(-50%, -58%) rotate(45deg) scale(1);
+            }
+        }
+
+        &:checked:disabled {
+            border-color: ${e("gray400")};
+            &::before {
+                background: ${e("gray400")};
+            }
+            &::after {
+                border-color: ${e("white")};
+                transform: translate(-50%, -58%) rotate(45deg) scale(1);
+            }
+        }
+    }
+`;
+//#endregion
+export { n as checkboxStyles };

package/src/styles/global/components/input.d.ts

@@ -1 +1,5 @@
 export declare const input: import('@emotion/utils').SerializedStyles;
+export declare const inputErrorStyles: import('@emotion/utils').SerializedStyles;
+export declare const inputFieldAdornmentStyles: import('@emotion/utils').SerializedStyles;
+export declare const tinyLabelStyles: import('@emotion/utils').SerializedStyles;
+export declare const insideLabelStyles: (hasInput: boolean) => import('@emotion/utils').SerializedStyles;

package/src/styles/global/components/input.esm.js

@@ -3,30 +3,119 @@ import { width as t } from "../../utilities/layout.esm.js";
 import { css as n } from "@emotion/react";
 //#region src/styles/global/components/input.ts
 var r = n`
-        color: ${e("text")};
-        border-radius: 3px;
-        border: 1px solid ${e("gray400")};
-        padding: ${t("gutter", .5)};
-        background-color: ${e("white")};
-
-        &[type="number"]::-webkit-outer-spin-button,
-        &[type="number"]::-webkit-inner-spin-button {
-            -webkit-appearance: none;
-            margin: 0;
+    color: ${e("text")};
+    border-radius: 3px;
+    border: 1px solid ${e("gray400")};
+    padding: ${t("gutter", .5)};
+    background-color: ${e("white")};
+
+    &[type="number"]::-webkit-outer-spin-button,
+    &[type="number"]::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+    &[type="number"] {
+        -moz-appearance: textfield;
+        appearance: textfield;
+    }
+    &:disabled,
+    &.disabled {
+        border-color: ${e("gray200")};
+        background-color: ${e("gray100")};
+    }
+    &:focus {
+        outline: 0;
+        box-shadow: none;
+    }
+`, i = n`
+    margin-top: ${t("gutter", .25)};
+    font-size: ${t("text", .75)};
+    color: ${e("red600")};
+`, a = n`
+    .input-field {
+        position: relative;
+        display: inline-flex;
+        width: 100%;
+        align-items: center;
+
+        > input {
+            width: 100%;
+            padding-right: calc(${t("gutter", .5)} + 24px + ${t("gutter", .5)});
         }
-        &[type="number"] {
-            -moz-appearance: textfield;
-            appearance: textfield;
+
+        > .input-adornment {
+            position: absolute;
+            right: ${t("gutter", .5)};
+            top: 50%;
+            transform: translateY(-50%);
+            margin-top: 0;
+            z-index: 1;
+            display: inline-flex;
+            align-items: center;
         }
-        &:disabled, &.disabled {
-            border-color: ${e("gray200")};
-            background-color: ${e("gray100")};
+    }
+`, o = n`
+    .input-label {
+        top: -0.5rem;
+        left: ${t("gutter", .25)};
+        font-size: ${t("text", .75)};
+    }
+`, s = (r) => n`
+    --react-international-phone-height: 50px;
+    --react-international-phone-border-radius: 8px;
+    --react-international-phone-border-color: #c0c0c0ff;
+    position: relative;
+
+    .input-label {
+        position: absolute;
+        background-color: white;
+        z-index: 1;
+        width: fit-content;
+        padding: 0 5px;
+        top: ${t("gutter", .25)};
+        left: ${t("gutter", .25)};
+        pointer-events: none;
+        transition:
+            top 150ms ease,
+            left 150ms ease,
+            font-size 150ms ease,
+            color 150ms ease;
+    }
+
+    > label > input,
+    > input {
+        transition: border-color 200ms ease;
+    }
+
+    &:focus-within {
+        ${o}
+        .input-label {
+            color: ${e("blue500")};
         }
-        &:focus {
-            outline: 0;
-            box-shadow: none;
+        input {
+            border-color: ${e("blue500")};
         }
+    }
+
+    &:has(input:not(:placeholder-shown)),
+    &:has(input:-webkit-autofill) {
+        ${o}
+    }
+
+    ${r && o}
+
+    input[type="tel"] {
+        width: 100%;
+    }
+
+    input::placeholder {
+        opacity: 0;
+        transition: opacity 200ms ease;
+    }
 
+    &:focus-within input::placeholder {
+        opacity: 1;
+    }
 `;
 //#endregion
-export { r as input };
+export { r as input, i as inputErrorStyles, a as inputFieldAdornmentStyles, s as insideLabelStyles, o as tinyLabelStyles };

package/src/styles/global/components/radioButton.d.ts

@@ -0,0 +1 @@
+export declare const radioBtnStyles: import('@emotion/utils').SerializedStyles;

package/src/styles/global/components/radioButton.esm.js

@@ -0,0 +1,39 @@
+import { color as e } from "../../utilities/color.esm.js";
+import { css as t } from "@emotion/react";
+//#region src/styles/global/components/radioButton.tsx
+var n = t`
+    --radio-btn-size: 16px;
+
+    transition: border-color 0.2s ease;
+    appearance: none;
+    cursor: pointer;
+    position: relative;
+    display: inline-grid;
+    place-content: center;
+    margin: 0;
+    padding: 0;
+    width: var(--radio-btn-size);
+    height: var(--radio-btn-size);
+    border: 1px solid ${e("blue600")};
+    border-radius: 50%;
+    box-sizing: border-box;
+
+    &::before {
+        content: "";
+        width: calc(var(--radio-btn-size) * 0.5);
+        height: calc(var(--radio-btn-size) * 0.5);
+        border-radius: 50%;
+        transform: scale(0);
+        transition: transform 0.2s ease;
+        background-color: ${e("blue600")};
+    }
+
+    &:checked {
+        border-color: ${e("gray500")};
+        &::before {
+            transform: scale(1);
+        }
+    }
+`;
+//#endregion
+export { n as radioBtnStyles };

package/src/styles/global/globalStyles.esm.js

@@ -3,9 +3,11 @@ import { typographyStyles as n } from "./components/typography.esm.js";
 import { button as r, textLinkStyles as i } from "./components/button.esm.js";
 import { code as a } from "./components/code.esm.js";
 import { input as o } from "./components/input.esm.js";
-import { css as s } from "@emotion/react";
+import { checkboxStyles as s } from "./components/checkbox.esm.js";
+import { radioBtnStyles as c } from "./components/radioButton.esm.js";
+import { css as l } from "@emotion/react";
 //#region src/styles/global/globalStyles.ts
-var c = s`
+var u = l`
     :root {
         ${t}
         ${e}
@@ -57,6 +59,12 @@ var c = s`
     }
     input {
         ${o}
+        &[type="radio"] {
+            ${c}
+        }
+        &[type="checkbox"] {
+            ${s}
+        }
     }
     a {
         ${i}
@@ -68,4 +76,4 @@ var c = s`
     ${n}
 `;
 //#endregion
-export { c as globalStyles };
+export { u as globalStyles };

package/src/styles/utilities/types.d.ts

@@ -49,3 +49,37 @@ export declare const zTextInputExclusions: z.ZodEnum<{
     radio: "radio";
 }>;
 export type TextInputExclusions = z.infer<typeof zTextInputExclusions>;
+export declare const zTextInputTypes: readonly ["color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week", "radio", "checkbox"];
+export declare const zTextInputType: z.ZodEnum<{
+    number: "number";
+    text: "text";
+    checkbox: "checkbox";
+    radio: "radio";
+    color: "color";
+    date: "date";
+    "datetime-local": "datetime-local";
+    email: "email";
+    file: "file";
+    hidden: "hidden";
+    image: "image";
+    month: "month";
+    password: "password";
+    range: "range";
+    reset: "reset";
+    search: "search";
+    submit: "submit";
+    tel: "tel";
+    time: "time";
+    url: "url";
+    week: "week";
+}>;
+export type TextInputType = z.infer<typeof zTextInputType>;
+export declare const zLabelPosition: z.ZodEnum<{
+    hidden: "hidden";
+    top: "top";
+    left: "left";
+    bottom: "bottom";
+    right: "right";
+    inside: "inside";
+}>;
+export type LabelPosition = z.infer<typeof zLabelPosition>;

package/src/styles/utilities/types.esm.js

@@ -20,6 +20,35 @@ var t = e.enum(["gutter", "column"]), n = e.enum([
 	...n.options,
 	...r.options,
 	"text"
-]), o = e.enum(["checkbox", "radio"]);
+]), o = e.enum(["checkbox", "radio"]), s = [
+	"color",
+	"date",
+	"datetime-local",
+	"email",
+	"file",
+	"hidden",
+	"image",
+	"month",
+	"number",
+	"password",
+	"range",
+	"reset",
+	"search",
+	"submit",
+	"tel",
+	"text",
+	"time",
+	"url",
+	"week",
+	"radio",
+	"checkbox"
+], c = e.enum(s), l = e.enum([
+	"top",
+	"left",
+	"bottom",
+	"right",
+	"inside",
+	"hidden"
+]);
 //#endregion
-export { t as BaseWidthSchema, i as BreakpointSchema, a as LayoutWidthsSchema, r as MaxScreenWidthSchema, n as ScreenWidthSchema, o as zTextInputExclusions };
+export { t as BaseWidthSchema, i as BreakpointSchema, a as LayoutWidthsSchema, r as MaxScreenWidthSchema, n as ScreenWidthSchema, l as zLabelPosition, o as zTextInputExclusions, c as zTextInputType, s as zTextInputTypes };