@stamcat/craftsman 0.0.27-alpha.9 → 0.0.28

package/src/components/Icons/index.d.ts

@@ -0,0 +1,15 @@
+export { IconAmazonPay } from './IconAmazonPay';
+export { IconAmex } from './IconAmex';
+export { IconApplePay } from './IconApplePay';
+export { IconDiscover } from './IconDiscover';
+export { IconGooglePay } from './IconGooglePay';
+export { IconMaestro } from './IconMaestro';
+export { IconMastercard } from './IconMastercard';
+export { IconPayPal } from './IconPayPal';
+export { IconSepa } from './IconSepa';
+export { IconShopPay } from './IconShopPay';
+export { IconSquare } from './IconSquare';
+export { IconStripe } from './IconStripe';
+export { IconUnionPay } from './IconUnionPay';
+export { IconVenmo } from './IconVenmo';
+export { IconVisa } from './IconVisa';

package/src/components/Icons/index.esm.js

@@ -0,0 +1,16 @@
+import { IconAmazonPay as e } from "./IconAmazonPay.esm.js";
+import { IconAmex as t } from "./IconAmex.esm.js";
+import { IconApplePay as n } from "./IconApplePay.esm.js";
+import { IconDiscover as r } from "./IconDiscover.esm.js";
+import { IconGooglePay as i } from "./IconGooglePay.esm.js";
+import { IconMaestro as a } from "./IconMaestro.esm.js";
+import { IconMastercard as o } from "./IconMastercard.esm.js";
+import { IconPayPal as s } from "./IconPayPal.esm.js";
+import { IconSepa as c } from "./IconSepa.esm.js";
+import { IconShopPay as l } from "./IconShopPay.esm.js";
+import { IconSquare as u } from "./IconSquare.esm.js";
+import { IconStripe as d } from "./IconStripe.esm.js";
+import { IconUnionPay as f } from "./IconUnionPay.esm.js";
+import { IconVenmo as p } from "./IconVenmo.esm.js";
+import { IconVisa as m } from "./IconVisa.esm.js";
+export { e as IconAmazonPay, t as IconAmex, n as IconApplePay, r as IconDiscover, i as IconGooglePay, a as IconMaestro, o as IconMastercard, s as IconPayPal, c as IconSepa, l as IconShopPay, u as IconSquare, d as IconStripe, f as IconUnionPay, p as IconVenmo, m as IconVisa };

package/src/components/Icons/types.d.ts

@@ -0,0 +1,4 @@
+import { SVGProps } from 'react';
+export type SVGIconProps = Omit<SVGProps<SVGSVGElement>, 'width'> & {
+    width?: number;
+};

package/src/components/Input/AGENTS.md

@@ -0,0 +1,30 @@
+# Input — Agent Usage Notes
+
+Import:
+
+```tsx
+import { Input } from "@stamcat/craftsman/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?: React.CSSProperties` (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`.
+- `preAdornment` is an internal extension point used by `InputNumber` for its decrement button; consumer apps should prefer `InputNumber` rather than wiring stepper buttons on `Input` directly.
+
+Example:
+
+```tsx
+<Input type="email" placeholder="you@company.com" required />
+```

package/src/components/Input/Input.css

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

package/src/components/Input/Input.scss

@@ -1,152 +1,165 @@
 @use "../../styles/global/components/input";
-@use "../../styles/utilities/functions" as u;
+@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)};
 }
-
-.input-wrapper {
-    label {
-        .input-label {
-            margin-bottom: #{u.width("gutter", 0.25)};
-        }
+// This is in base layer because many components implement it.
+@layer craftsman-base {
+    %input-adornment {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        margin-top: 0;
+        z-index: 1;
+        display: inline-flex;
+        align-items: center;
     }
-
-    &[data-required="true"] {
+    .input-wrapper {
         label {
             .input-label {
-                &::after {
-                    content: "*";
-                    color: var(--red700);
+                margin-bottom: #{u.width("gutter", 0.25)};
+            }
+        }
+
+        &[data-required="true"] {
+            label {
+                .input-label {
+                    &::after {
+                        content: "*";
+                        color: var(--red700);
+                    }
                 }
             }
         }
-    }
 
-    &[data-label-position="left"] {
-        label {
-            display: inline-flex;
-            align-items: center;
+        &[data-label-position="left"] {
+            label {
+                display: inline-flex;
+                align-items: center;
 
-            .input-label {
-                width: fit-content;
-                margin-right: #{u.width("gutter", 0.75)};
+                .input-label {
+                    width: fit-content;
+                    margin-right: #{u.width("gutter", 0.75)};
+                }
+            }
+            &.textarea {
+                label {
+                    align-items: flex-start;
+                }
             }
         }
-        &.textarea {
+
+        &[data-label-position="bottom"] {
             label {
+                display: inline-flex;
+                flex-direction: column-reverse;
                 align-items: flex-start;
+
+                .input-label {
+                    margin-bottom: 0;
+                    margin-top: #{u.width("gutter", 0.25)};
+                }
             }
         }
-    }
 
-    &[data-label-position="bottom"] {
-        label {
-            display: inline-flex;
-            flex-direction: column-reverse;
-            align-items: flex-start;
+        &[data-label-position="right"] {
+            label {
+                display: inline-flex;
+                flex-direction: row-reverse;
+                align-items: baseline;
 
-            .input-label {
-                margin-bottom: 0;
-                margin-top: #{u.width("gutter", 0.25)};
+                .input-label {
+                    margin-left: #{u.width("gutter", 0.25)};
+                    margin-bottom: 0;
+                }
             }
         }
-    }
 
-    &[data-label-position="right"] {
-        label {
-            display: inline-flex;
-            flex-direction: row-reverse;
-            align-items: baseline;
+        &[data-label-position="inside"] {
+            --react-international-phone-height: 50px;
+            --react-international-phone-border-radius: 8px;
+            --react-international-phone-border-color: #c0c0c0ff;
+            position: relative;
 
             .input-label {
-                margin-left: #{u.width("gutter", 0.25)};
-                margin-bottom: 0;
+                position: absolute;
+                background-color: var(--white);
+                z-index: 1;
+                width: fit-content;
+                padding: 0 5px;
+                top: #{u.width(gutter, 0.45)};
+                left: #{u.width(gutter, 0.25)};
+                pointer-events: none;
+                transition:
+                    top 150ms ease,
+                    left 150ms ease,
+                    font-size 150ms ease,
+                    color 150ms ease;
             }
-        }
-    }
 
-    &[data-label-position="inside"] {
-        --react-international-phone-height: 50px;
-        --react-international-phone-border-radius: 8px;
-        --react-international-phone-border-color: #c0c0c0ff;
-        position: relative;
+            > label > .input-field > .input,
+            > .input {
+                transition: border-color 200ms ease;
+            }
 
-        .input-label {
-            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;
-        }
+            &:focus-within {
+                .input-label {
+                    @include inside-input-label-floating;
+                    color: var(--blue500);
+                }
 
-        > label > .input-field > .input,
-        > .input {
-            transition: border-color 200ms ease;
-        }
+                .input {
+                    border-color: var(--blue500);
+                }
 
-        &:focus-within {
-            .input-label {
-                @include inside-input-label-floating;
-                color: var(--blue500);
+                .input::placeholder {
+                    opacity: 1;
+                }
             }
 
-            .input {
-                border-color: var(--blue500);
+            &[data-has-input="true"] {
+                .input-label {
+                    @include inside-input-label-floating;
+                }
             }
 
-            .input::placeholder {
-                opacity: 1;
+            .input[type="tel"] {
+                width: 100%;
             }
-        }
 
-        &[data-has-input="true"] {
-            .input-label {
-                @include inside-input-label-floating;
+            .input::placeholder {
+                opacity: 0;
+                transition: opacity 200ms ease;
             }
         }
-
-        .input[type="tel"] {
-            width: 100%;
-        }
-
-        .input::placeholder {
-            opacity: 0;
-            transition: opacity 200ms ease;
-        }
     }
     .input-field {
         position: relative;
         display: inline-flex;
         align-items: center;
-
         &[data-has-end-adornment="true"] {
             > .input {
-                width: 100%;
                 padding-right: #{u.width("gutter", 1.5)};
             }
         }
+        &[data-has-pre-adornment="true"] {
+            > .input {
+                padding-left: #{u.width("gutter", 2.25)};
+            }
+        }
     }
 
-    .input-adornment {
-        position: absolute;
+
+    .input-end-adornment {
+        @extend %input-adornment;
         right: #{u.width("gutter", 0.5)};
-        top: 50%;
-        transform: translateY(-50%);
-        margin-top: 0;
-        z-index: 1;
-        display: inline-flex;
-        align-items: center;
+    }
+    .input-pre-adornment {
+        @extend %input-adornment;
+        left: #{u.width("gutter", 0.5)};
     }
 
     .input-error {

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

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

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

@@ -5,6 +5,7 @@ export type LabeledInput = {
     error?: string | boolean | React.ReactNode;
     required?: boolean;
     endAdornment?: React.ReactNode;
+    preAdornment?: React.ReactNode;
 };
 export type InputWrapperProps = React.ComponentProps<"input" | "textarea" | "select"> & LabeledInput;
 export declare const InputWrapper: React.FC<InputWrapperProps>;

package/src/components/InputNumber/AGENTS.md

@@ -0,0 +1,37 @@
+# InputNumber — Agent Usage Notes
+
+Import:
+
+```tsx
+import { InputNumber } from "@stamcat/craftsman/InputNumber";
+```
+
+Props:
+
+- Extends `Input` props (`Omit<InputProps, "type" | "endAdornment">`).
+- `type?: "number"` (fixed, default: `"number"`)
+- `onDecrement?: (e: React.MouseEvent<HTMLButtonElement>) => void`
+- `onIncrement?: (e: React.MouseEvent<HTMLButtonElement>) => void`
+- `iconIncrement?: React.ReactNode` — overrides the icon rendered in the increment button.
+- `iconDecrement?: React.ReactNode` — overrides the icon rendered in the decrement button.
+
+Behavior notes:
+
+- Renders an `Input` with a decrement button as `preAdornment` and an increment button as `endAdornment`.
+- Clicking a button calls the native `stepDown()` / `stepUp()` on the underlying `<input type="number">` (honoring `min`, `max`, and `step`), then dispatches a native `input` event so a controlled `onChange` fires exactly like a real number input's spinner.
+- `onDecrement` / `onIncrement` are optional callbacks invoked after the native step — they do not replace `value`/`onChange` control.
+- Use standard controlled `<input type="number">` patterns (`value` + `onChange`) to own the number's state.
+
+Example:
+
+```tsx
+const [count, setCount] = useState(0);
+
+<InputNumber
+  label="Quantity"
+  value={count}
+  min={0}
+  max={10}
+  onChange={(e) => setCount(Number(e.currentTarget.value))}
+/>
+```

package/src/components/InputNumber/InputNumber.css

@@ -0,0 +1 @@
+@layer craftsman-base;@layer craftsman-component{.inputNumber.input-wrapper[data-label-position=inside] .input-label{left:40px}.inputNumber .input-field{gap:calc(var(--w-gutter) * .5)}.inputNumber .input-field[data-has-end-adornment=true]>.input{padding-right:calc(var(--w-gutter) * .75)}.inputNumber .input-field[data-has-pre-adornment=true]>.input{padding-left:calc(var(--w-gutter) * .75)}.inputNumber .input-end-adornment,.inputNumber .input-pre-adornment{position:unset;transform:unset;top:unset}}

package/src/components/InputNumber/InputNumber.d.ts

@@ -0,0 +1,10 @@
+import { TextInputType } from '../../utilities/types';
+import { InputProps } from '../Input/Input';
+export type InputNumberProps = React.ComponentProps<"input"> & {} & Omit<InputProps, "type" | "endAdornment"> & {
+    type?: Extract<TextInputType, "number">;
+    onDecrement?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onIncrement?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    iconIncrement?: React.ReactNode;
+    iconDecrement?: React.ReactNode;
+};
+export declare const InputNumber: React.FC<InputNumberProps>;

package/src/components/InputNumber/InputNumber.scss

@@ -0,0 +1,29 @@
+@use "../../styles/global/components/input";
+@use "../../styles/utilities/_functions" as u;
+@use "../../styles/utilities/_placeholders";
+
+@layer craftsman-component {
+    .inputNumber {
+        &.input-wrapper[data-label-position=inside] .input-label {
+            left: 40px;
+        }
+        .input-field {
+            gap: #{u.width("gutter", 0.5)};
+        }
+        .input-field[data-has-end-adornment=true] {
+            & > .input {
+                padding-right: #{u.width("gutter", 0.75)};
+            }
+        }
+        .input-field[data-has-pre-adornment=true] {
+            & > .input {
+                padding-left: #{u.width("gutter", 0.75)};
+            }
+        }
+        .input-end-adornment, .input-pre-adornment {
+            position: unset;
+            transform: unset;
+            top: unset;
+        }
+    }
+}

package/src/components/InputNumber/InputNumber2.esm.js

@@ -0,0 +1,36 @@
+"use client";
+import { Button as e } from "../Button/Button.esm.js";
+import { Input as t } from "../Input/Input2.esm.js";
+import './InputNumber.css';/* empty css                */
+import n from "clsx";
+import { jsx as r } from "react/jsx-runtime";
+import { useRef as i } from "react";
+import { IoAddCircleOutline as a, IoRemoveCircleOutline as o } from "react-icons/io5";
+//#region src/components/InputNumber/InputNumber.tsx
+var s = ({ type: s = "number", className: c, iconIncrement: l, iconDecrement: u, onDecrement: d, onIncrement: f, ...p }) => {
+	let m = i(null);
+	return /* @__PURE__ */ r(t, {
+		ref: m,
+		className: n("inputNumber", c),
+		preAdornment: /* @__PURE__ */ r(e, {
+			variant: "text",
+			onClick: (e) => {
+				let t = m.current;
+				t && (t.stepDown(), t.dispatchEvent(new Event("input", { bubbles: !0 }))), d?.(e);
+			},
+			children: l || /* @__PURE__ */ r(o, { size: "26" })
+		}),
+		endAdornment: /* @__PURE__ */ r(e, {
+			variant: "text",
+			onClick: (e) => {
+				let t = m.current;
+				t && (t.stepUp(), t.dispatchEvent(new Event("input", { bubbles: !0 }))), f?.(e);
+			},
+			children: u || /* @__PURE__ */ r(a, { size: "26" })
+		}),
+		...p,
+		type: s
+	});
+};
+//#endregion
+export { s as InputNumber };

package/src/components/InputPassword/AGENTS.md

@@ -0,0 +1,29 @@
+# InputPassword — Agent Usage Notes
+
+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"
+/>
+```

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

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

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

@@ -0,0 +1,30 @@
+"use client";
+import { Button as e } from "../Button/Button.esm.js";
+import { Input as t } from "../Input/Input2.esm.js";
+import n from "clsx";
+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/InputPassword/InputPassword.tsx
+var s = ({ visible: t, onToggle: n }) => /* @__PURE__ */ r(e, {
+	type: "button",
+	variant: "text",
+	onClick: n,
+	"aria-label": t ? "Hide password" : "Show password",
+	"aria-pressed": t,
+	className: "input-view-toggle",
+	children: r(t ? a : o, { size: 16 })
+}), c = ({ type: e = "password", className: a, ...o }) => {
+	let [c, l] = i(!1), u = c ? "text" : e;
+	return /* @__PURE__ */ r(t, {
+		className: n("inputPassword", a),
+		...o,
+		type: u,
+		endAdornment: /* @__PURE__ */ r(s, {
+			visible: c,
+			onToggle: () => l((e) => !e)
+		})
+	});
+};
+//#endregion
+export { c as InputPassword };

package/src/components/InputPhone/AGENTS.md

@@ -0,0 +1,35 @@
+# InputPhone — Agent Usage Notes
+
+Import:
+
+```tsx
+import { InputPhone } from "@stamcat/craftsman/InputPhone";
+```
+
+Props:
+
+- Extends `PhoneInputProps` from `react-international-phone`.
+- `label?: string | ReactNode`
+- `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
+- `error?: string | boolean | ReactNode`
+- `required?: boolean`
+- `defaultCountry?: string` (default: `"us"`)
+- `preferredCountries?: string[]`
+- `endAdornment?: ReactNode`
+
+Behavior notes:
+
+- Powered by `react-international-phone` for i18n-aware phone number formatting.
+- Country selector dropdown opens below the field; ensure the container has at least 350px of vertical space.
+- Use `preferredCountries` to surface commonly used countries at the top of the dropdown.
+
+Example:
+
+```tsx
+<InputPhone
+  label="Phone Number"
+  defaultCountry="us"
+  preferredCountries={["us", "gb", "ca"]}
+  required
+/>
+```