@stamcat/craftsman 0.0.27-alpha.20 → 0.0.27-alpha.21

package/AGENTS.md

@@ -30,6 +30,9 @@ import { Select } from "@stamcat/craftsman/Select";
 import { Text } from "@stamcat/craftsman/Text";
 import { Textarea } from "@stamcat/craftsman/Textarea";
 import { TimePicker } from "@stamcat/craftsman/TimePicker";
+import { Toggle } from "@stamcat/craftsman/Toggle";
+import { Notice } from "@stamcat/craftsman/Notice";
+import { SortableList } from "@stamcat/craftsman/SortableList";
 ```
 
 Do not assume a root export like `@stamcat/craftsman` unless that export is explicitly added to package `exports`.

package/Components.esm.js

@@ -13,63 +13,69 @@ import { DatePicker as d } from "./src/components/DatePicker/DatePicker2.esm.js"
 import { DateRangePicker as f } from "./src/components/DateRangePicker/DateRangePicker2.esm.js";
 import { InputPhone as p } from "./src/components/InputPhone/InputPhone2.esm.js";
 import { InputNumber as m } from "./src/components/InputNumber/InputNumber2.esm.js";
-import { Pagination as h } from "./src/components/Pagination/Pagination2.esm.js";
-import { Carousel as g } from "./src/components/Carousel/Carousel2.esm.js";
-import { TimePicker as _ } from "./src/components/TimePicker/TimePicker2.esm.js";
-import { DateTimePicker as v } from "./src/components/DateTimePicker/DateTimePicker2.esm.js";
-import { Tooltip as y } from "./src/components/Tooltip/Tooltip2.esm.js";
-import { IconAmazonPay as b } from "./src/components/Icons/IconAmazonPay.esm.js";
-import { IconAmex as x } from "./src/components/Icons/IconAmex.esm.js";
-import { IconApplePay as S } from "./src/components/Icons/IconApplePay.esm.js";
-import { IconDiscover as C } from "./src/components/Icons/IconDiscover.esm.js";
-import { IconGooglePay as w } from "./src/components/Icons/IconGooglePay.esm.js";
-import { IconMaestro as T } from "./src/components/Icons/IconMaestro.esm.js";
-import { IconMastercard as E } from "./src/components/Icons/IconMastercard.esm.js";
-import { IconPayPal as D } from "./src/components/Icons/IconPayPal.esm.js";
-import { IconSepa as O } from "./src/components/Icons/IconSepa.esm.js";
-import { IconShopPay as k } from "./src/components/Icons/IconShopPay.esm.js";
-import { IconSquare as A } from "./src/components/Icons/IconSquare.esm.js";
-import { IconStripe as j } from "./src/components/Icons/IconStripe.esm.js";
-import { IconUnionPay as M } from "./src/components/Icons/IconUnionPay.esm.js";
-import { IconVenmo as N } from "./src/components/Icons/IconVenmo.esm.js";
-import { IconVisa as P } from "./src/components/Icons/IconVisa.esm.js";
+import { Toggle as h } from "./src/components/Toggle/Toggle2.esm.js";
+import { Pagination as g } from "./src/components/Pagination/Pagination2.esm.js";
+import { Carousel as _ } from "./src/components/Carousel/Carousel2.esm.js";
+import { TimePicker as v } from "./src/components/TimePicker/TimePicker2.esm.js";
+import { DateTimePicker as y } from "./src/components/DateTimePicker/DateTimePicker2.esm.js";
+import { Tooltip as b } from "./src/components/Tooltip/Tooltip2.esm.js";
+import { Notice as x } from "./src/components/Notice/Notice2.esm.js";
+import { SortableList as S } from "./src/components/SortableList/SortableList2.esm.js";
+import { IconAmazonPay as C } from "./src/components/Icons/IconAmazonPay.esm.js";
+import { IconAmex as w } from "./src/components/Icons/IconAmex.esm.js";
+import { IconApplePay as T } from "./src/components/Icons/IconApplePay.esm.js";
+import { IconDiscover as E } from "./src/components/Icons/IconDiscover.esm.js";
+import { IconGooglePay as D } from "./src/components/Icons/IconGooglePay.esm.js";
+import { IconMaestro as O } from "./src/components/Icons/IconMaestro.esm.js";
+import { IconMastercard as k } from "./src/components/Icons/IconMastercard.esm.js";
+import { IconPayPal as A } from "./src/components/Icons/IconPayPal.esm.js";
+import { IconSepa as j } from "./src/components/Icons/IconSepa.esm.js";
+import { IconShopPay as M } from "./src/components/Icons/IconShopPay.esm.js";
+import { IconSquare as N } from "./src/components/Icons/IconSquare.esm.js";
+import { IconStripe as P } from "./src/components/Icons/IconStripe.esm.js";
+import { IconUnionPay as F } from "./src/components/Icons/IconUnionPay.esm.js";
+import { IconVenmo as I } from "./src/components/Icons/IconVenmo.esm.js";
+import { IconVisa as L } from "./src/components/Icons/IconVisa.esm.js";
 import "./src/components/Icons/index.esm.js";
 //#region src/components/index.ts
-var F = /* @__PURE__ */ e({
+var R = /* @__PURE__ */ e({
 	Button: () => t,
-	Carousel: () => g,
+	Carousel: () => _,
 	Checkbox: () => o,
 	DatePicker: () => d,
 	DateRangePicker: () => f,
-	DateTimePicker: () => v,
-	IconAmazonPay: () => b,
-	IconAmex: () => x,
-	IconApplePay: () => S,
-	IconDiscover: () => C,
-	IconGooglePay: () => w,
-	IconMaestro: () => T,
-	IconMastercard: () => E,
-	IconPayPal: () => D,
-	IconSepa: () => O,
-	IconShopPay: () => k,
-	IconSquare: () => A,
-	IconStripe: () => j,
-	IconUnionPay: () => M,
-	IconVenmo: () => N,
-	IconVisa: () => P,
+	DateTimePicker: () => y,
+	IconAmazonPay: () => C,
+	IconAmex: () => w,
+	IconApplePay: () => T,
+	IconDiscover: () => E,
+	IconGooglePay: () => D,
+	IconMaestro: () => O,
+	IconMastercard: () => k,
+	IconPayPal: () => A,
+	IconSepa: () => j,
+	IconShopPay: () => M,
+	IconSquare: () => N,
+	IconStripe: () => P,
+	IconUnionPay: () => F,
+	IconVenmo: () => I,
+	IconVisa: () => L,
 	Input: () => n,
 	InputNumber: () => m,
 	InputPassword: () => r,
 	InputPhone: () => p,
 	Loader: () => i,
 	Modal: () => l,
-	Pagination: () => h,
+	Notice: () => x,
+	Pagination: () => g,
 	RadioButton: () => a,
 	Select: () => u,
+	SortableList: () => S,
 	Text: () => c,
 	Textarea: () => s,
-	TimePicker: () => _,
-	Tooltip: () => y
+	TimePicker: () => v,
+	Toggle: () => h,
+	Tooltip: () => b
 });
 //#endregion
-export { t as Button, g as Carousel, o as Checkbox, d as DatePicker, f as DateRangePicker, v as DateTimePicker, b as IconAmazonPay, x as IconAmex, S as IconApplePay, C as IconDiscover, w as IconGooglePay, T as IconMaestro, E as IconMastercard, D as IconPayPal, O as IconSepa, k as IconShopPay, A as IconSquare, j as IconStripe, M as IconUnionPay, N as IconVenmo, P as IconVisa, n as Input, m as InputNumber, r as InputPassword, p as InputPhone, i as Loader, l as Modal, h as Pagination, a as RadioButton, u as Select, c as Text, s as Textarea, _ as TimePicker, y as Tooltip, F as components_exports };
+export { t as Button, _ as Carousel, o as Checkbox, d as DatePicker, f as DateRangePicker, y as DateTimePicker, C as IconAmazonPay, w as IconAmex, T as IconApplePay, E as IconDiscover, D as IconGooglePay, O as IconMaestro, k as IconMastercard, A as IconPayPal, j as IconSepa, M as IconShopPay, N as IconSquare, P as IconStripe, F as IconUnionPay, I as IconVenmo, L as IconVisa, n as Input, m as InputNumber, r as InputPassword, p as InputPhone, i as Loader, l as Modal, x as Notice, g as Pagination, a as RadioButton, u as Select, S as SortableList, c as Text, s as Textarea, v as TimePicker, h as Toggle, b as Tooltip, R as components_exports };

package/Styles.esm.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.27-alpha.20",
+  "version": "0.0.27-alpha.21",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {
@@ -23,6 +23,7 @@
     "prepublishOnly": "node ./scripts/prepublishCheck.js"
   },
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "3.0.0",
     "@floating-ui/react-dom": "2.1.9",
     "@wojtekmaj/react-daterange-picker": "7.1.0",
     "clsx": "2.1.1",
@@ -124,6 +125,10 @@
       "types": "./src/components/InputNumber.d.ts",
       "default": "./src/components/InputNumber.esm.js"
     },
+    "./Toggle": {
+      "types": "./src/components/Toggle.d.ts",
+      "default": "./src/components/Toggle.esm.js"
+    },
     "./Pagination": {
       "types": "./src/components/Pagination.d.ts",
       "default": "./src/components/Pagination.esm.js"
@@ -143,6 +148,14 @@
     "./Tooltip": {
       "types": "./src/components/Tooltip.d.ts",
       "default": "./src/components/Tooltip.esm.js"
+    },
+    "./Notice": {
+      "types": "./src/components/Notice.d.ts",
+      "default": "./src/components/Notice.esm.js"
+    },
+    "./SortableList": {
+      "types": "./src/components/SortableList.d.ts",
+      "default": "./src/components/SortableList.esm.js"
     }
   }
 }

package/src/components/Button/AGENTS.md

@@ -21,10 +21,11 @@ Behavior notes:
 - 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:
-  - `border-radius: calc(var(--btn-border-radius) * size)`
-  - `padding: calc(var(--btn-pad-y) * size) calc(var(--btn-pad-x) * size)`
-  - `font-size: max(10px, calc(var(--w-text) * size))`
+- When `size` is provided, Button sets a single `--btn-size` CSS variable inline; all scaling math lives in SCSS:
+  - `border-radius: calc(var(--w-gutter) * 0.75 * var(--btn-size))`
+  - `padding: calc(var(--w-gutter) * 0.5 * var(--btn-size)) calc(var(--w-gutter) * 0.75 * var(--btn-size))`
+  - `font-size: max(10px, calc(var(--w-text) * var(--btn-size)))`
+  - This is the standard sizing pattern used across the library (see `Toggle`'s `--toggle-width`): components expose one scale/size CSS variable, and SCSS does all the `calc()` work.
 - There is no dedicated icon/loading prop. Icons, loaders, and mixed content are passed as `children`.
 - Supports both real disable (`disabled={true}`) and style-only disable (`className="disabled"`).
 - Native button modes are supported (`type="button" | "submit" | "reset"`).

package/src/components/Button/Button.esm.js

@@ -1,25 +1,20 @@
 "use client";
 import { isEmpty as e } from "../../utilities/validations.esm.js";
-import { width as t } from "../../styles/utilities/layout.esm.js";
-import n from "clsx";
-import { Fragment as r, jsx as i } from "react/jsx-runtime";
+import t from "clsx";
+import { Fragment as n, jsx as r } from "react/jsx-runtime";
 //#region src/components/Button/Button.tsx
-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(a.children) ? /* @__PURE__ */ i(r, {}) : /* @__PURE__ */ i("button", {
-		type: o,
-		className: n("button", s, u),
+var i = (i) => {
+	let { type: a = "button", variant: o = "default", size: s, styles: c, className: l, style: u, ...d } = i, f = typeof s == "number" ? Math.min(10, Math.max(.1, s)) : void 0, p = e(c) ? void 0 : c, m = f ? { "--btn-size": f } : void 0;
+	return e(i.children) ? /* @__PURE__ */ r(n, {}) : /* @__PURE__ */ r("button", {
+		type: a,
+		className: t("button", o, l),
 		style: {
-			...h,
 			...m,
-			...d
+			...p,
+			...u
 		},
-		...f
+		...d
 	});
 };
 //#endregion
-export { a as Button };
+export { i as Button };

package/src/components/Checkbox/AGENTS.md

@@ -11,12 +11,14 @@ Props:
 - Extends `Input` props.
 - `type?: "checkbox"` (default: `"checkbox"`)
 - `labelPosition?: "left" | "right" | "top" | "bottom"` (default: `"right"`)
+- `size?: number` (default visual scale is `1`, clamped to `[0.1, 10]`)
 
 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`).
+- When `size` is provided, Checkbox sets a single `--checkbox-size` CSS variable inline; the checkbox box and checkmark scale via SCSS `calc()` from that variable (same pattern as `Button`'s `--btn-size` and `Toggle`'s `--toggle-width`).
 
 Example:
 

package/src/components/Checkbox/Checkbox.d.ts

@@ -3,5 +3,6 @@ import { CheckboxLabelPosition } from '../../utilities/types';
 export type CheckboxProps = InputProps & {
     type?: "checkbox";
     labelPosition?: CheckboxLabelPosition;
+    size?: number;
 };
 export declare const Checkbox: React.FC<CheckboxProps>;

package/src/components/Checkbox/Checkbox.esm.js

@@ -2,10 +2,17 @@
 import { Input as e } from "../Input/Input2.esm.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/Checkbox/Checkbox.tsx
-var n = ({ type: n = "checkbox", labelPosition: r = "right", ...i }) => /* @__PURE__ */ t(e, {
-	type: n,
-	labelPosition: r,
-	...i
-});
+var n = ({ type: n = "checkbox", labelPosition: r = "right", size: i, style: a, ...o }) => {
+	let s = typeof i == "number" ? Math.min(10, Math.max(.1, i)) : void 0;
+	return /* @__PURE__ */ t(e, {
+		type: n,
+		labelPosition: r,
+		style: {
+			...s ? { "--checkbox-size": s } : void 0,
+			...a
+		},
+		...o
+	});
+};
 //#endregion
 export { n as Checkbox };

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

@@ -1,7 +1,7 @@
 "use client";
 import { isEmpty as e } from "../../utilities/validations.esm.js";
-import "../../utilities/types.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";

package/src/components/InputNumber/AGENTS.md

@@ -12,7 +12,8 @@ Props:
 - `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 **both** the decrement and increment buttons (there is no separate `iconDecrement` prop yet).
+- `iconIncrement?: React.ReactNode` — overrides the icon rendered in the increment button.
+- `iconDecrement?: React.ReactNode` — overrides the icon rendered in the decrement button.
 
 Behavior notes:
 

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

@@ -5,5 +5,6 @@ export type InputNumberProps = React.ComponentProps<"input"> & {} & Omit<InputPr
     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/InputNumber2.esm.js

@@ -7,28 +7,28 @@ 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, onDecrement: u, onIncrement: d, ...f }) => {
-	let p = i(null);
+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: p,
+		ref: m,
 		className: n("inputNumber", c),
 		preAdornment: /* @__PURE__ */ r(e, {
 			variant: "text",
 			onClick: (e) => {
-				let t = p.current;
-				t && (t.stepDown(), t.dispatchEvent(new Event("input", { bubbles: !0 }))), u?.(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 = p.current;
-				t && (t.stepUp(), t.dispatchEvent(new Event("input", { bubbles: !0 }))), d?.(e);
+				let t = m.current;
+				t && (t.stepUp(), t.dispatchEvent(new Event("input", { bubbles: !0 }))), f?.(e);
 			},
-			children: l || /* @__PURE__ */ r(a, { size: "26" })
+			children: u || /* @__PURE__ */ r(a, { size: "26" })
 		}),
-		...f,
+		...p,
 		type: s
 	});
 };

package/src/components/Notice/AGENTS.md

@@ -0,0 +1,42 @@
+# Notice — Agent Usage Notes
+
+Import:
+
+```tsx
+import { Notice } from "@stamcat/craftsman/Notice";
+```
+
+Props:
+
+- Inherits all native `<div>` props.
+- `type?: "help" | "info" | "success" | "error" | "none"` (default: `"info"`; `"none"` hides the leading status icon container)
+- `icon?: React.ReactNode` (overrides the default status icon for the given `type`)
+- `title?: string | React.ReactNode`
+- `message?: string | React.ReactNode`
+- `children?: React.ReactNode` (rendered alongside `title`/`message`)
+- `buttons?: React.ReactNode` (rendered in a footer action row)
+- `dismissible?: boolean` (shows a close ("x") button)
+- `visible?: boolean` (default: `true`; renders nothing when `false`)
+- `onDismiss?: (id?: string) => void`
+- `id?: string` (passed back to `onDismiss`)
+
+Behavior notes:
+
+- Notice is an inline, persistent alert banner — not a popup toast. For transient popup notifications use the existing `react-toastify` integration (see the "Molecules/Toast" story), not this component.
+- Notice is not self-dismissing — the dismiss button only calls `onDismiss`; the parent owns visibility and must flip `visible` to `false` (or unmount) in response.
+- `title` is wrapped in `<Text as="h5">` and `message` in `<Text as="span">` when passed as a string; `React.ReactNode` values are rendered as-is.
+- The leading icon inherits its color via CSS (`currentColor`) from the `.notice.<type>` class — don't pass an explicit `fill`/`color` prop to override it, use `icon` to swap the element instead.
+
+Example:
+
+```tsx
+<Notice
+  type="error"
+  title="Something went wrong"
+  message="Please check the highlighted fields and try again."
+  dismissible
+  visible={visible}
+  onDismiss={() => setVisible(false)}
+  buttons={<Button variant="text" onClick={retry}>Retry</Button>}
+/>
+```

package/src/components/Notice/Notice.css

@@ -0,0 +1 @@
+@layer craftsman-component{.notice{gap:calc(var(--w-gutter) * .5);padding:var(--w-gutter);border:1px solid var(--gray400);background-color:var(--white);border-left-width:3px;border-radius:4px;flex-direction:column;transition:opacity .5s ease-in-out;display:flex}.notice.info{border-color:var(--blue500);background-color:var(--blue50);color:var(--blue600)}.notice.success{border-color:var(--green500);background-color:var(--green50);border-color:var(--green500)}.notice.error{border-color:var(--red500);background-color:var(--red50);color:var(--red600)}.notice.help{border-color:var(--gray500);background-color:var(--gray50)}.notice button.text{color:inherit}.notice-contents{align-items:flex-start;gap:calc(var(--w-gutter) * .5);flex-flow:row;width:100%;display:flex}.notice-icon{flex:none;font-size:24px;display:flex}.notice-text{margin-top:calc(var(--w-gutter) * .25);flex-grow:1}.notice-text span{display:block}.notice-dismiss{flex:none;padding:0}.notice-buttons{justify-content:flex-end;gap:calc(var(--w-gutter) * .5);width:100%;display:flex}}

package/src/components/Notice/Notice.d.ts

@@ -0,0 +1,13 @@
+import { NoticeType } from '../../utilities/types';
+export type NoticeProps = React.ComponentPropsWithoutRef<"div"> & {
+    type?: NoticeType;
+    icon?: React.ReactNode;
+    title?: string | React.ReactNode;
+    message?: string | React.ReactNode;
+    buttons?: React.ReactNode;
+    visible?: boolean;
+    dismissible?: boolean;
+    onDismiss?: (id?: string) => void;
+    id?: string;
+};
+export declare const Notice: React.FC<NoticeProps>;

package/src/components/Notice/Notice.scss

@@ -0,0 +1,76 @@
+@use "../../styles/utilities/_functions" as u;
+
+@layer craftsman-component {
+    .notice {
+        transition: opacity 500ms ease-in-out;
+        display: flex;
+        flex-direction: column;
+        gap: #{u.width("gutter", 0.5)};
+        padding: #{u.width("gutter")};
+        border: 1px solid var(--gray400);
+        border-left-width: 3px;
+        background-color: var(--white);
+        border-radius: 4px;
+
+        &.info {
+            border-color: var(--blue500);
+            background-color: var(--blue50);
+            color: var(--blue600);
+        }
+
+        &.success {
+            border-color: var(--green500);
+            background-color: var(--green50);
+            border-color: var(--green500);
+        }
+
+        &.error {
+            border-color: var(--red500);
+            background-color: var(--red50);
+            color: var(--red600);
+        }
+
+        &.help {
+            border-color: var(--gray500);
+            background-color: var(--gray50);
+        }
+        button.text {
+            color: inherit;
+        }
+    }
+
+    .notice-contents {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: flex-start;
+        gap: #{u.width("gutter", 0.5)};
+        width: 100%;
+    }
+
+    .notice-icon {
+        display: flex;
+        flex: 0 0 auto;
+        font-size: 24px;
+    }
+
+    .notice-text {
+        flex-grow: 1;
+        margin-top: #{u.width("gutter", 0.25)};
+        span {
+            display: block;
+        }
+    }
+
+    .notice-dismiss {
+        flex: 0 0 auto;
+        padding: 0;
+    }
+
+    .notice-buttons {
+        width: 100%;
+        display: flex;
+        justify-content: flex-end;
+        gap: #{u.width("gutter", 0.5)};
+       
+    }
+}

package/src/components/Notice/Notice2.esm.js

@@ -0,0 +1,56 @@
+"use client";
+import { Button as e } from "../Button/Button.esm.js";
+import { Text as t } from "../Text/Text2.esm.js";
+import './Notice.css';/* empty css           */
+import n from "clsx";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { IoAlertCircleOutline as o, IoCheckmarkCircleOutline as s, IoCloseOutline as c, IoHelpCircleOutline as l, IoInformationCircleOutline as u } from "react-icons/io5";
+//#region src/components/Notice/Notice.tsx
+var d = {
+	info: /* @__PURE__ */ i(u, {}),
+	success: /* @__PURE__ */ i(s, {}),
+	error: /* @__PURE__ */ i(o, {}),
+	help: /* @__PURE__ */ i(l, {}),
+	none: /* @__PURE__ */ i(r, {})
+}, f = (e, n) => typeof e == "string" ? /* @__PURE__ */ i(t, {
+	as: n,
+	children: e
+}) : e, p = ({ type: t = "info", title: r, message: o, buttons: s, id: l, className: u, style: p, icon: m, children: h, dismissible: g, onDismiss: _, ...v }) => {
+	let y = () => {
+		_?.(l);
+	};
+	return /* @__PURE__ */ a("div", {
+		id: l,
+		className: n("notice", t, u),
+		style: p,
+		...v,
+		children: [/* @__PURE__ */ a("div", {
+			className: "notice-contents",
+			children: [
+				t !== "none" && /* @__PURE__ */ i("div", {
+					className: "notice-icon",
+					children: m || d[t]
+				}),
+				/* @__PURE__ */ a("div", {
+					className: "notice-text",
+					children: [
+						r && f(r, "h5"),
+						o && f(o, "span"),
+						h
+					]
+				}),
+				g && /* @__PURE__ */ i(e, {
+					variant: "text",
+					className: "notice-dismiss",
+					onClick: y,
+					children: /* @__PURE__ */ i(c, { size: 16 })
+				})
+			]
+		}), s && /* @__PURE__ */ i("footer", {
+			className: "notice-buttons",
+			children: s
+		})]
+	});
+};
+//#endregion
+export { p as Notice };

package/src/components/RadioButton/AGENTS.md

@@ -11,12 +11,14 @@ Props:
 - Extends `Input` props.
 - `type?: "radio"` (default: `"radio"`)
 - `labelPosition?: "left" | "right"` (default: `"right"`)
+- `size?: number` (default visual scale is `1`, clamped to `[0.1, 10]`)
 
 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`).
+- When `size` is provided, RadioButton sets a single `--radio-size` CSS variable inline; the radio circle and dot scale via SCSS `calc()` from that variable (same pattern as `Button`'s `--btn-size` and `Toggle`'s `--toggle-width`).
 
 Example:
 

package/src/components/RadioButton/RadioButton.d.ts

@@ -3,6 +3,7 @@ import { InputProps } from '../Input/Input';
 type RadioButtonProps = InputProps & {
     type?: "radio";
     labelPosition?: RadioLabelPosition;
+    size?: number;
 };
 export declare const RadioButton: React.FC<RadioButtonProps>;
 export {};

package/src/components/RadioButton/RadioButton.esm.js

@@ -2,10 +2,17 @@
 import { Input as e } from "../Input/Input2.esm.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/RadioButton/RadioButton.tsx
-var n = ({ type: n = "radio", labelPosition: r = "right", ...i }) => /* @__PURE__ */ t(e, {
-	type: n,
-	labelPosition: r,
-	...i
-});
+var n = ({ type: n = "radio", labelPosition: r = "right", size: i, style: a, ...o }) => {
+	let s = typeof i == "number" ? Math.min(10, Math.max(.1, i)) : void 0;
+	return /* @__PURE__ */ t(e, {
+		type: n,
+		labelPosition: r,
+		style: {
+			...s ? { "--radio-size": s } : void 0,
+			...a
+		},
+		...o
+	});
+};
 //#endregion
 export { n as RadioButton };

package/src/components/SortableList/AGENTS.md

@@ -0,0 +1,45 @@
+# SortableList — Agent Usage Notes
+
+Import:
+
+```tsx
+import { SortableList } from "@stamcat/craftsman/SortableList";
+```
+
+Props:
+
+- `items: T[]`
+- `getKey: (item: T, index: number) => string`
+- `renderItem: (args: SortableListRenderArgs<T>) => React.ReactNode`
+- `onReorder: (items: T[]) => void`
+- `disabled?: boolean`
+- `className?: string`
+- `style?: React.CSSProperties`
+
+Behavior notes:
+
+- Built on `@atlaskit/pragmatic-drag-and-drop`. The list only owns drag/drop wiring and reordering — all item markup comes from `renderItem`.
+- `renderItem` receives `{ item, index, isDragging, dropEdge, dragHandleRef }`.
+  - By default the whole rendered item is the drag source.
+  - To restrict dragging to a handle, attach `dragHandleRef` to the handle element's `ref`.
+- `dropEdge` is `"top" | "bottom" | null` while another item is dragged over this one — use it to render a drop indicator, or rely on the built-in `.drop-top` / `.drop-bottom` styles.
+- `onReorder` is called with the full reordered array on drop; the component does not mutate `items` itself — update your own state in the callback.
+- Set `disabled` to suspend all drag/drop wiring (for example while a related request is in flight).
+
+Example:
+
+```tsx
+const [items, setItems] = useState(["Alpha", "Beta", "Gamma"]);
+
+<SortableList
+  items={items}
+  getKey={(item) => item}
+  onReorder={setItems}
+  renderItem={({ item, isDragging, dropEdge, dragHandleRef }) => (
+    <div className={isDragging ? "dragging" : undefined} data-drop-edge={dropEdge ?? undefined}>
+      <span ref={dragHandleRef}>⠿</span>
+      {item}
+    </div>
+  )}
+/>
+```

package/src/components/SortableList/ListItem.d.ts

@@ -0,0 +1,10 @@
+import { SortableListRenderArgs } from './SortableList';
+export type DropEdge = "top" | "bottom";
+export declare function SortableListItem<T>({ item, index, getKey, renderItem, disabled, listId, }: {
+    item: T;
+    index: number;
+    getKey: (item: T, index: number) => string;
+    renderItem: (args: SortableListRenderArgs<T>) => React.ReactNode;
+    disabled?: boolean;
+    listId: string;
+}): import("react").JSX.Element;

package/src/components/SortableList/ListItem.esm.js

@@ -0,0 +1,67 @@
+"use client";
+import { combine as e } from "../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/public-utils/combine.esm.js";
+import { draggable as t, dropTargetForElements as n } from "../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/adapter/element-adapter.esm.js";
+import { isItemData as r } from "./utilities.esm.js";
+import i from "clsx";
+import { jsx as a } from "react/jsx-runtime";
+import { useEffect as o, useLayoutEffect as s, useRef as c, useState as l } from "react";
+//#region src/components/SortableList/ListItem.tsx
+function u({ item: u, index: d, getKey: f, renderItem: p, disabled: m, listId: h }) {
+	let [g, _] = l(null), [v, y] = l(null), [b, x] = l(!1), [S, C] = l(null), w = c(null), T = c(null), E = f(u, d);
+	return s(() => {
+		w.current = g;
+		let e = w.current;
+		if (!e) return;
+		let t = T.current, n = e.getBoundingClientRect();
+		T.current = n;
+		let r = t ? t.top - n.top : 0;
+		!r || window.matchMedia("(prefers-reduced-motion: reduce)").matches || (e.style.transition = "none", e.style.transform = `translateY(${r}px)`, requestAnimationFrame(() => {
+			e.style.transition = "", e.style.transform = "";
+		}));
+	}, [g, d]), o(() => {
+		if (!g || m) return;
+		let i = {
+			key: E,
+			index: d,
+			listId: h,
+			item: u
+		};
+		return e(t({
+			element: g,
+			dragHandle: v ?? void 0,
+			getInitialData: () => i,
+			onDragStart: () => x(!0),
+			onDrop: () => x(!1)
+		}), n({
+			element: g,
+			getData: () => i,
+			canDrop: ({ source: e }) => r(e.data) && e.data.key !== E,
+			onDrag: ({ location: e }) => {
+				let t = g.getBoundingClientRect(), n = e.current.input.clientY > t.top + t.height / 2;
+				C(n ? "bottom" : "top");
+			},
+			onDragLeave: () => C(null),
+			onDrop: () => C(null)
+		}));
+	}, [
+		g,
+		v,
+		E,
+		d,
+		m,
+		h,
+		u
+	]), /* @__PURE__ */ a("li", {
+		ref: _,
+		className: i("sortable-list-item", b && "dragging", S && `drop-${S}`),
+		children: p({
+			item: u,
+			index: d,
+			isDragging: b,
+			dropEdge: S,
+			dragHandleRef: y
+		})
+	}, E);
+}
+//#endregion
+export { u as SortableListItem };

package/src/components/SortableList/SortableList.css

@@ -0,0 +1 @@
+@layer craftsman-component{.sortable-list{gap:calc(var(--w-gutter) * .25);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.sortable-list-item{cursor:grab;transition:transform .2s,opacity .15s;position:relative}.sortable-list-item.dragging{opacity:.4}.sortable-list-item.drop-top:before,.sortable-list-item.drop-bottom:after{content:"";background-color:var(--blue500);border-radius:1px;height:2px;position:absolute;left:0;right:0}.sortable-list-item.drop-top:before{top:-1px}.sortable-list-item.drop-bottom:after{bottom:-1px}}

package/src/components/SortableList/SortableList.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+import { DropEdge } from './ListItem';
+export type SortableListItemState = {
+    isDragging: boolean;
+    dropEdge: DropEdge | null;
+};
+export type SortableListRenderArgs<T> = SortableListItemState & {
+    dragHandleRef: (element: HTMLElement | null) => void;
+    item: T;
+    index: number;
+};
+export type SortableListProps<T> = {
+    items: T[];
+    getKey: (item: T, index: number) => string;
+    renderItem: (args: SortableListRenderArgs<T>) => React.ReactNode;
+    onReorder: (items: T[]) => void;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    listId?: string;
+    onReceive?: (item: T, atIndex: number) => void;
+};
+export declare const SortableList: <T>({ items, getKey, renderItem, onReorder, disabled, className, style, listId, onReceive }: SortableListProps<T>) => React.JSX.Element;

package/src/components/SortableList/SortableList.scss

@@ -0,0 +1,41 @@
+@use "../../styles/utilities/_functions" as u;
+
+@layer craftsman-component {
+    .sortable-list {
+        display: flex;
+        flex-direction: column;
+        gap: #{u.width("gutter", 0.25)};
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .sortable-list-item {
+        position: relative;
+        cursor: grab;
+        transition: transform 200ms ease, opacity 150ms ease;
+
+        &.dragging {
+            opacity: 0.4;
+        }
+
+        &.drop-top::before,
+        &.drop-bottom::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            right: 0;
+            height: 2px;
+            border-radius: 1px;
+            background-color: #{u.color("blue500")};
+        }
+
+        &.drop-top::before {
+            top: -1px;
+        }
+
+        &.drop-bottom::after {
+            bottom: -1px;
+        }
+    }
+}

package/src/components/SortableList/SortableList2.esm.js

@@ -0,0 +1,54 @@
+"use client";
+import { monitorForElements as e } from "../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/adapter/element-adapter.esm.js";
+import { reorder as t } from "../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/public-utils/reorder.esm.js";
+import './SortableList.css';/* empty css                 */
+import { isItemData as n } from "./utilities.esm.js";
+import { SortableListItem as r } from "./ListItem.esm.js";
+import i from "clsx";
+import { jsx as a } from "react/jsx-runtime";
+import { useEffect as o, useId as s } from "react";
+//#region src/components/SortableList/SortableList.tsx
+var c = ({ items: c, getKey: l, renderItem: u, onReorder: d, disabled: f, className: p, style: m, listId: h, onReceive: g }) => {
+	let _ = s(), v = h ?? _, y = (e, n) => {
+		let r = c.findIndex((t, n) => l(t, n) === e), i = c.findIndex((e, t) => l(e, t) === n);
+		r === -1 || i === -1 || r === i || d(t({
+			list: c,
+			startIndex: r,
+			finishIndex: i
+		}));
+	}, b = (e) => {
+		let t = c.findIndex((t, n) => l(t, n) === e);
+		t !== -1 && d(c.filter((e, n) => n !== t));
+	}, x = (e, t) => {
+		let n = c.findIndex((e, n) => l(e, n) === t);
+		g?.(e, n === -1 ? c.length : n);
+	};
+	return o(() => {
+		if (!f) return e({ onDrop: ({ source: e, location: t }) => {
+			let r = t.current.dropTargets[0];
+			if (!r || !n(e.data) || !n(r.data)) return;
+			let i = e.data.listId, a = r.data.listId, o = i === v, s = a === v;
+			o && s ? y(e.data.key, r.data.key) : o ? b(e.data.key) : s && g && x(e.data.item, r.data.key);
+		} });
+	}, [
+		c,
+		l,
+		d,
+		f,
+		v,
+		g
+	]), /* @__PURE__ */ a("ul", {
+		className: i("sortable-list", p),
+		style: m,
+		children: c.map((e, t) => /* @__PURE__ */ a(r, {
+			item: e,
+			index: t,
+			getKey: l,
+			renderItem: u,
+			disabled: f,
+			listId: v
+		}, l(e, t)))
+	});
+};
+//#endregion
+export { c as SortableList };

package/src/components/SortableList/utilities.d.ts

@@ -0,0 +1,7 @@
+export type ItemData = {
+    key: string;
+    index: number;
+    listId: string;
+    item: unknown;
+};
+export declare const isItemData: (data: Record<string | symbol, unknown>) => data is ItemData;

package/src/components/SortableList/utilities.esm.js

@@ -0,0 +1,4 @@
+//#region src/components/SortableList/utilities.ts
+var e = (e) => typeof e.key == "string" && typeof e.index == "number" && typeof e.listId == "string";
+//#endregion
+export { e as isItemData };

package/src/components/Text/Text.css

@@ -1 +1 @@
-@layer craftsman-base{h1{font-size:calc(var(--w-text) * 3.125);line-height:1.2}h2{font-size:calc(var(--w-text) * 2.625);font-weight:625;line-height:1.1}h3{font-size:calc(var(--w-text) * 1.625);line-height:1.1}h4{font-size:calc(var(--w-text) * 1.25);margin:calc(var(--w-gutter) * .5) 0;line-height:1.1}h5{font-size:var(--w-text);line-height:1.2}h6{font-size:calc(var(--w-text) * .875);font-weight:600;line-height:1.2}p{font-style:normal;font-size:var(--w-text);margin:0;line-height:1.5}small{font-size:calc(var(--w-text) * .75)}@media (width<=660px){h4{font-size:var(--w-text,14px)}p{font-size:calc(var(--w-text,14px) * .875)}}}@layer craftsman-component{.text.display{font-size:calc(var(--w-text) * 1.625);line-height:1.1}.text.display.xlarge{font-size:calc(var(--w-text) * 3.125);line-height:1.2}.text.display.large{font-size:calc(var(--w-text) * 2.625);font-weight:625;line-height:1.1}.text.display.small{font-size:calc(var(--w-text) * 1.25);margin:calc(var(--w-gutter) * .5) 0;line-height:1.1}.text.heading{font-size:calc(var(--w-text) * 1.625);line-height:1.1}.text.heading.xlarge{font-size:calc(var(--w-text) * 3.125);line-height:1.2}.text.heading.large,.text.xlarge{font-size:calc(var(--w-text) * 2.625);font-weight:625;line-height:1.1}.text.heading.medium{font-size:calc(var(--w-text) * 1.625);line-height:1.1}.text.heading.small{font-size:calc(var(--w-text) * 1.25);margin:calc(var(--w-gutter) * .5) 0;line-height:1.1}.text.heading.xsmall{font-size:var(--w-text);line-height:1.2}.text.paragraph{font-style:normal;font-size:var(--w-text);margin:0;line-height:1.5}.text.paragraph.xlarge,.text.large{font-size:calc(var(--w-text) * 1.625);line-height:1.1}.text.paragraph.large{font-size:calc(var(--w-text) * 1.25);margin:calc(var(--w-gutter) * .5) 0;line-height:1.1}.text.paragraph.medium,.text.medium{font-style:normal;font-size:var(--w-text);margin:0;line-height:1.5}.text.paragraph.small,.text.small{font-size:calc(var(--w-text) * .75)}.text.paragraph.xsmall,.text.xsmall{font-size:calc(var(--w-text) * .5)}.text.caption{font-size:calc(var(--w-text) * .75)}.text.center{text-align:center}.text.left{text-align:left}.text.right{text-align:right}}
+@layer craftsman-base{h1{font-size:calc(var(--w-text) * 3.125);margin:0 0 var(--w-gutter) 0;line-height:1.2}h2{font-size:calc(var(--w-text) * 2.625);margin:0 0 var(--w-gutter) 0;font-weight:625;line-height:1.1}h3{font-size:calc(var(--w-text) * 1.625);margin:0 0 calc(var(--w-gutter) * .75) 0;line-height:1.1}h4{font-size:calc(var(--w-text) * 1.25);margin:0 0 calc(var(--w-gutter) * .5) 0;line-height:1.1}h5{font-size:var(--w-text);margin:0 0 calc(var(--w-gutter) * .5) 0;line-height:1.2}h6{font-size:calc(var(--w-text) * .875);margin:0;font-weight:600;line-height:1.2}p{font-style:normal;font-size:var(--w-text);margin:0;line-height:1.5}small{font-size:calc(var(--w-text) * .75)}@media (width<=660px){h4{font-size:var(--w-text,14px)}p{font-size:calc(var(--w-text,14px) * .875)}}}@layer craftsman-component{.text.display{font-size:calc(var(--w-text) * 1.625);margin:0 0 calc(var(--w-gutter) * .75) 0;line-height:1.1}.text.display.xlarge{font-size:calc(var(--w-text) * 3.125);margin:0 0 var(--w-gutter) 0;line-height:1.2}.text.display.large{font-size:calc(var(--w-text) * 2.625);margin:0 0 var(--w-gutter) 0;font-weight:625;line-height:1.1}.text.display.small{font-size:calc(var(--w-text) * 1.25);margin:0 0 calc(var(--w-gutter) * .5) 0;line-height:1.1}.text.heading{font-size:calc(var(--w-text) * 1.625);margin:0 0 calc(var(--w-gutter) * .75) 0;line-height:1.1}.text.heading.xlarge{font-size:calc(var(--w-text) * 3.125);margin:0 0 var(--w-gutter) 0;line-height:1.2}.text.heading.large,.text.xlarge{font-size:calc(var(--w-text) * 2.625);margin:0 0 var(--w-gutter) 0;font-weight:625;line-height:1.1}.text.heading.medium{font-size:calc(var(--w-text) * 1.625);margin:0 0 calc(var(--w-gutter) * .75) 0;line-height:1.1}.text.heading.small{font-size:calc(var(--w-text) * 1.25);margin:0 0 calc(var(--w-gutter) * .5) 0;line-height:1.1}.text.heading.xsmall{font-size:var(--w-text);margin:0 0 calc(var(--w-gutter) * .5) 0;line-height:1.2}.text.paragraph{font-style:normal;font-size:var(--w-text);margin:0;line-height:1.5}.text.paragraph.xlarge,.text.large{font-size:calc(var(--w-text) * 1.625);margin:0 0 calc(var(--w-gutter) * .75) 0;line-height:1.1}.text.paragraph.large{font-size:calc(var(--w-text) * 1.25);margin:0 0 calc(var(--w-gutter) * .5) 0;line-height:1.1}.text.paragraph.medium,.text.medium{font-style:normal;font-size:var(--w-text);margin:0;line-height:1.5}.text.paragraph.small,.text.small{font-size:calc(var(--w-text) * .75)}.text.paragraph.xsmall,.text.xsmall{font-size:calc(var(--w-text) * .5)}.text.caption{font-size:calc(var(--w-text) * .75)}.text.center{text-align:center}.text.left{text-align:left}.text.right{text-align:right}}

package/src/components/Toggle/AGENTS.md

@@ -0,0 +1,33 @@
+# Toggle — Agent Usage Notes
+
+Import:
+
+```tsx
+import { Toggle } from "@stamcat/craftsman/Toggle";
+```
+
+Props:
+
+- Extends `Input` props, excluding `type`, `preAdornment`, and `endAdornment` (all internally managed).
+- `width?: number` — pixel width of the switch track (default: `40`). Track height, thumb size, and thumb travel all derive from this via `calc()`.
+- `label?: string | ReactNode`, `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"right"`), `error?`, `required?` — same as `Input`.
+
+Behavior notes:
+
+- `Toggle` is `<Input type="checkbox">` under the hood — it is a real, keyboard-accessible checkbox styled as a switch, not a custom widget.
+- `width` sets a single `--toggle-width` CSS variable inline; the track, thumb, and checked-state translation are all `calc()`-derived from it in `Toggle.scss` (the same sizing pattern used by `Button`'s `--btn-size`, `Checkbox`'s `--checkbox-size`, and `RadioButton`'s `--radio-size`).
+- The underlying checkbox input is stretched invisibly over the full switch (`opacity: 0`) so it stays the real click/keyboard target; the visual slider is rendered via `endAdornment` with `pointer-events: none`.
+- Controlled and uncontrolled patterns are both supported (`checked` + `onChange`, or `defaultChecked`).
+
+Example:
+
+```tsx
+const [enabled, setEnabled] = useState(false);
+
+<Toggle
+  label="Enable notifications"
+  width={48}
+  checked={enabled}
+  onChange={(event) => setEnabled(event.currentTarget.checked)}
+/>
+```

package/src/components/Toggle/Toggle.css

@@ -0,0 +1 @@
+@layer craftsman-component{.input-wrapper.toggle>label{align-items:center;gap:calc(var(--w-gutter) * .5);display:inline-flex}.input-wrapper.toggle .input-field{width:var(--toggle-width,60px);height:calc(var(--toggle-width,60px) * .56);position:relative}.input-wrapper.toggle .input.checkbox{opacity:0;cursor:pointer;z-index:1;width:100%;height:100%;margin:0;position:absolute;inset:0}.input-wrapper.toggle .input-end-adornment{position:absolute;inset:0;transform:none}.input-wrapper.toggle .toggle-slider{pointer-events:none;background-color:var(--gray400);border-radius:calc(var(--toggle-width,60px) * .56);transition:background-color .2s;position:absolute;inset:0}.input-wrapper.toggle .toggle-slider:before{content:"";left:calc(var(--toggle-width,60px) * .065);bottom:calc(var(--toggle-width,60px) * .065);height:calc(var(--toggle-width,60px) * .43);width:calc(var(--toggle-width,60px) * .43);background-color:var(--white);border-radius:50%;transition:transform .2s;position:absolute}.input-wrapper.toggle .input.checkbox:checked+.input-end-adornment .toggle-slider{background-color:var(--blue500)}.input-wrapper.toggle .input.checkbox:checked+.input-end-adornment .toggle-slider:before{transform:translateX(calc(var(--toggle-width,60px) * .43))}}

package/src/components/Toggle/Toggle.d.ts

@@ -0,0 +1,5 @@
+import { InputProps } from '../Input/Input';
+export type ToggleProps = Omit<InputProps, "type" | "preAdornment" | "endAdornment"> & {
+    width?: number;
+};
+export declare const Toggle: React.FC<ToggleProps>;

package/src/components/Toggle/Toggle.scss

@@ -0,0 +1,64 @@
+@use "../../styles/utilities/_functions" as u;
+
+@layer craftsman-component {
+    .input-wrapper.toggle {
+        > label {
+            display: inline-flex;
+            align-items: center;
+            gap: #{u.width("gutter", 0.5)};
+        }
+
+        .input-field {
+            position: relative;
+            width: var(--toggle-width, 60px);
+            height: calc(var(--toggle-width, 60px) * 0.56);
+        }
+
+        .input.checkbox {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            opacity: 0;
+            cursor: pointer;
+            z-index: 1;
+        }
+
+        .input-end-adornment {
+            position: absolute;
+            inset: 0;
+            top: 0;
+            transform: none;
+        }
+
+        .toggle-slider {
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            background-color: var(--gray400);
+            border-radius: calc(var(--toggle-width, 60px) * 0.56);
+            transition: background-color 0.2s ease;
+
+            &::before {
+                position: absolute;
+                content: "";
+                left: calc(var(--toggle-width, 60px) * 0.065);
+                bottom: calc(var(--toggle-width, 60px) * 0.065);
+                height: calc(var(--toggle-width, 60px) * 0.43);
+                width: calc(var(--toggle-width, 60px) * 0.43);
+                border-radius: 50%;
+                background-color: var(--white);
+                transition: transform 0.2s ease;
+            }
+        }
+
+        .input.checkbox:checked + .input-end-adornment .toggle-slider {
+            background-color: var(--blue500);
+
+            &::before {
+                transform: translateX(calc(var(--toggle-width, 60px) * 0.43));
+            }
+        }
+    }
+}

package/src/components/Toggle/Toggle2.esm.js

@@ -0,0 +1,19 @@
+"use client";
+import { Input as e } from "../Input/Input2.esm.js";
+import './Toggle.css';/* empty css           */
+import t from "clsx";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/Toggle/Toggle.tsx
+var r = ({ labelPosition: r = "right", className: i, style: a, width: o = 40, ...s }) => /* @__PURE__ */ n(e, {
+	type: "checkbox",
+	labelPosition: r,
+	className: t("toggle", i),
+	endAdornment: /* @__PURE__ */ n("span", { className: "toggle-slider" }),
+	style: {
+		...a,
+		"--toggle-width": `${o}px`
+	},
+	...s
+});
+//#endregion
+export { r as Toggle };

package/src/components/index.d.ts

@@ -12,9 +12,12 @@ export { DatePicker } from './DatePicker/DatePicker';
 export { DateRangePicker } from './DateRangePicker/DateRangePicker';
 export { InputPhone } from './InputPhone/InputPhone';
 export { InputNumber } from './InputNumber/InputNumber';
+export { Toggle } from './Toggle/Toggle';
 export { Pagination } from './Pagination/Pagination';
 export { Carousel } from './Carousel/Carousel';
 export { TimePicker } from './TimePicker/TimePicker';
 export { DateTimePicker } from './DateTimePicker/DateTimePicker';
 export { Tooltip } from './Tooltip/Tooltip';
+export { Notice } from './Notice/Notice';
+export { SortableList } from './SortableList/SortableList';
 export * from './Icons';

package/src/stories/documentation/ToDo.mdx

@@ -5,13 +5,11 @@ import { Meta } from "@storybook/addon-docs/blocks";
 # Global Styles
 - video
 - image
-- Input - toggle (boolean)
 - radio button alignment to baseline
 - implement dark mode @media (prefers-color-scheme: dark)
 - Accordion
-- Notification
 - Progress
 - Skeleton
 - Toast - enhance to show pile vs stacking
 - Tabs
-- InputCreditCard -  should have CC checksum validations
+- sortable list

package/src/styles/global/components/_button.scss

@@ -20,9 +20,7 @@
   }
 
   %button-styles {
-    --btn-pad-y: #{u.width(gutter, 0.5)};
-    --btn-pad-x: #{u.width(gutter, 0.75)};
-    --btn-border-radius: #{u.width(gutter, 0.75)};
+    --btn-size: 1;
     color: var(--blue600);
     border: none;
     cursor: pointer;
@@ -31,8 +29,9 @@
     align-items: center;
     font-weight: 500;
     transition: 0.125s;
-    padding: var(--btn-pad-y) var(--btn-pad-x);
-    border-radius: var(--btn-border-radius);
+    padding: calc(#{u.width(gutter, 0.5)} * var(--btn-size)) calc(#{u.width(gutter, 0.75)} * var(--btn-size));
+    border-radius: calc(#{u.width(gutter, 0.75)} * var(--btn-size));
+    font-size: max(10px, calc(#{u.width(text)} * var(--btn-size)));
     border: 1px solid var(--blue500);
     background-color: var(--white);
 

package/src/styles/global/components/_checkbox.scss

@@ -10,8 +10,9 @@
         top: 0.08em;
         margin: 0;
         padding: 0;
-        height: #{u.width("gutter")};
-        width: #{u.width("gutter")};
+        --checkbox-size: 1;
+        height: calc(#{u.width("gutter")} * var(--checkbox-size));
+        width: calc(#{u.width("gutter")} * var(--checkbox-size));
         border-radius: 4px;
         border: 1px solid var(--blue500);
         background: #fff;
@@ -29,8 +30,8 @@
             position: absolute;
             left: 50%;
             top: 45%;
-            width: 5px;
-            height: 8px;
+            width: calc(5px * var(--checkbox-size));
+            height: calc(8px * var(--checkbox-size));
             content: "";
             display: block;
             border: solid white;

package/src/styles/global/components/_radioButton.scss

@@ -9,16 +9,17 @@
         display: inline-grid;
         place-content: center;
         padding: 0;
-        width: #{u.width("gutter")};
-        height: #{u.width("gutter")};
+        --radio-size: 1;
+        width: calc(#{u.width("gutter")} * var(--radio-size));
+        height: calc(#{u.width("gutter")} * var(--radio-size));
         border: 1px solid var(--blue600);
         border-radius: 50%;
         box-sizing: border-box;
 
         &::before {
             content: "";
-            width: #{u.width("gutter", 0.5)};
-            height: #{u.width("gutter", 0.5)};
+            width: calc(#{u.width("gutter", 0.5)} * var(--radio-size));
+            height: calc(#{u.width("gutter", 0.5)} * var(--radio-size));
             border-radius: 50%;
             transform: scale(0);
             transition: transform 0.2s ease;

package/src/styles/global/components/_typography.scss

@@ -11,29 +11,34 @@
 @mixin h1 {
     font-size: #{u.width(text, 3.125)};
     line-height: 1.2;
+    margin: 0 0 #{u.width(gutter)} 0;
 }
 @mixin h2 {
     font-size: #{u.width(text, 2.625)};
     font-weight: 625;
     line-height: 1.1;
+    margin: 0 0 #{u.width(gutter)} 0;
 }
 @mixin h3 {
     font-size: #{u.width(text, 1.625)};
     line-height: 1.1;
+    margin: 0 0 #{u.width(gutter, 0.75)} 0;
 }
 @mixin h4 {
     font-size: #{u.width(text, 1.25)};
     line-height: 1.1;
-    margin: #{u.width(gutter, 0.5)} 0;
+    margin: 0 0 #{u.width(gutter, 0.5)} 0;
 }
 @mixin h5 {
     font-size: var(--w-text);
     line-height: 1.2;
+    margin: 0 0 #{u.width(gutter, 0.5)} 0;
 }
 @mixin h6 {
     font-size: #{u.width(text, 0.875)};
     line-height: 1.2;
     font-weight: 600;
+    margin: 0;
 }
 @mixin p {
     font-style: normal;

package/src/styles/global/globalStyles.scss

@@ -39,7 +39,9 @@
         margin: 0;
         padding: 0;
     }
-
+    ul {
+        list-style: none;
+    }
     body {
         @include t.body-typography;
         background-color: #fff;

package/src/utilities/types.d.ts

@@ -133,3 +133,11 @@ export declare const CarouselPageType: z.ZodEnum<{
     numbers: "numbers";
 }>;
 export type CarouselPageType = z.infer<typeof CarouselPageType>;
+export declare const NoticeType: z.ZodEnum<{
+    help: "help";
+    info: "info";
+    success: "success";
+    error: "error";
+    none: "none";
+}>;
+export type NoticeType = z.infer<typeof NoticeType>;

package/src/utilities/types.esm.js

@@ -74,6 +74,12 @@ var t = e.enum(["gutter", "column"]), n = e.enum([
 	"medium",
 	"small",
 	"xsmall"
-]), g = e.enum(["dots", "numbers"]);
+]), g = e.enum(["dots", "numbers"]), _ = e.enum([
+	"help",
+	"info",
+	"success",
+	"error",
+	"none"
+]);
 //#endregion
-export { t as BaseWidthSchema, i as BreakpointSchema, f as ButtonType, g as CarouselPageType, a as LayoutWidthsSchema, r as MaxScreenWidthSchema, n as ScreenWidthSchema, h as TextSize, p as TextTags, m as TextType, u as zCheckboxLabelPosition, l as zLabelPosition, d as zRadioLabelPosition, o as zTextInputExclusions, c as zTextInputType, s as zTextInputTypes };
+export { t as BaseWidthSchema, i as BreakpointSchema, f as ButtonType, g as CarouselPageType, a as LayoutWidthsSchema, r as MaxScreenWidthSchema, _ as NoticeType, n as ScreenWidthSchema, h as TextSize, p as TextTags, m as TextType, u as zCheckboxLabelPosition, l as zLabelPosition, d as zRadioLabelPosition, o as zTextInputExclusions, c as zTextInputType, s as zTextInputTypes };