@stamcat/craftsman 0.0.49 → 0.0.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {

package/skills/craftsman-utility-functions/SKILL.md

@@ -14,7 +14,7 @@ The package exports an `isEmpty` utility. **Always use it instead of writing inl
 Import:
 
 ```ts
-import { isEmpty } from "@stamcat/craftsman/utilities/validations";
+import { isEmpty } from "@stamcat/craftsman/utilities";
 ```
 
 It returns `true` for:
@@ -39,6 +39,18 @@ if (Object.keys(obj).length === 0) { ... }
 if (arr.length === 0) { ... }
 ```
 
+## Other validation/formatting utilities
+
+Also exported from `@stamcat/craftsman/utilities` (all from `src/utilities/validations.ts`):
+
+- `validateEmail(value: string): boolean` — simple regex-based email format check.
+- `getUnitLabel(locale, unit, override?): string` — resolves an `Intl.NumberFormat` unit display label, or returns `override` if provided.
+- `is24HourFormat(locale): boolean` — detects whether the locale's resolved hour cycle is 24-hour (`h23`/`h24`).
+- `getAmPmLabels(locale): [string, string]` — returns the locale's AM/PM strings via `Intl.DateTimeFormat`.
+- `formatTime(value, locale): string` — formats a `Date` (or `DateTimePickerProps["value"]`) as a 24-hour `HH:mm` string, or `"--:--"` if not a valid `Date`.
+
+These back the `TimePicker`/`DateTimePicker` locale-aware formatting — prefer them over hand-rolled `Intl` calls in those contexts.
+
 ## Style utilities parity (`color`, `width`, `breakpoint`)
 
 These utility patterns exist in both TypeScript and Sass. See the [craftsman-style-utilities skill](../craftsman-style-utilities/SKILL.md) for full usage details.

package/src/components/Button/AGENTS.md

@@ -9,7 +9,7 @@ import { Button } from "@stamcat/craftsman/Button";
 Props:
 
 - Inherits all native `<button>` props.
-- `variant?: "primary" | "default" | "text"` (default: `"default"`)
+- `variant?: "primary" | "secondary" | "default" | "text"` (default: `"default"`)
 - `size?: number` (default visual scale is `1`)
 - `styles?: React.CSSProperties` (inline style override)
 

package/src/components/DateTimePicker/AGENTS.md

@@ -1,8 +1,6 @@
 # DateTimePicker — Agent Usage Notes
 
-> Not yet part of the documented public export surface (see `craftsman-component-usage` skill's Known Limitations). Source path only — do not assume `@stamcat/craftsman/DateTimePicker` is published until confirmed in `exports.ts`.
-
-Import (source-relative, once exported):
+Import:
 
 ```tsx
 import { DateTimePicker } from "@stamcat/craftsman/DateTimePicker";

package/src/components/Input/AGENTS.md

@@ -13,7 +13,8 @@ Props:
 - `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
 - `error?: string | boolean | ReactNode`
 - `required?: boolean`
-- `styles?: React.CSSProperties` (wrapper override)
+- `style?: React.CSSProperties` — targets the wrapper element.
+- `inputStyle?: React.CSSProperties` — targets the `<input>` field directly.
 - `type?: TextInputType` (checkbox/radio excluded)
 
 Behavior notes:

package/src/components/Input/Input.css

@@ -1 +1 @@
-@layer cf-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) * .5);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,.input-wrapper[data-label-position=inside].select .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;width:100%;display: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}}
+@layer cf-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) * .5);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,.input-wrapper[data-label-position=inside].select .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: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.esm.js

@@ -6,7 +6,7 @@ import r from "clsx";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/Input/Input.tsx
 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, value: _, defaultValue: v, ...y } = o, b = n(), x = c || b;
+	let { label: s, id: c, labelPosition: l = "top", required: u = !1, type: d = "text", error: f, endAdornment: p, preAdornment: m, style: h, className: g, value: _, defaultValue: v, inputStyle: y, ...b } = o, x = n(), S = c || x;
 	return /* @__PURE__ */ i(t, {
 		className: g,
 		label: s,
@@ -26,12 +26,13 @@ var o = (o) => {
 					children: m
 				}),
 				/* @__PURE__ */ i("input", {
-					id: x,
+					id: S,
 					type: d,
 					className: r("input", d),
 					value: _,
 					defaultValue: v,
-					...y
+					style: y,
+					...b
 				}),
 				!e(p) && /* @__PURE__ */ i("span", {
 					className: "input-end-adornment",

package/src/components/Input/Input.scss

@@ -146,7 +146,6 @@
     .input-field {
         position: relative;
         display: flex;
-        width: 100%;
         align-items: center;
         &[data-has-end-adornment="true"] {
             > .input {

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

@@ -4,6 +4,7 @@ export type LabeledInput = {
     labelPosition?: LabelPosition;
     error?: string | boolean | React.ReactNode;
     required?: boolean;
+    inputStyle?: React.CSSProperties;
     endAdornment?: React.ReactNode;
     preAdornment?: React.ReactNode;
     onLabelClick?: React.MouseEventHandler<HTMLLabelElement>;

package/src/components/InputPassword/AGENTS.md

@@ -9,7 +9,7 @@ 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`.
+- Includes all label, error, required, and style props from `Input`, including `style` (wrapper) and `inputStyle` (targets the `<input>` field directly).
 
 Behavior notes:
 

package/src/components/InputPhone/AGENTS.md

@@ -9,6 +9,7 @@ import { InputPhone } from "@stamcat/craftsman/InputPhone";
 Props:
 
 - Extends `PhoneInputProps` from `react-international-phone`.
+- `id?: string` — auto-generated via `useId` if not provided.
 - `label?: string | ReactNode`
 - `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
 - `error?: string | boolean | ReactNode`
@@ -16,6 +17,8 @@ Props:
 - `defaultCountry?: string` (default: `"us"`)
 - `preferredCountries?: string[]`
 - `endAdornment?: ReactNode`
+- `style?: React.CSSProperties` — targets the wrapper element.
+- `inputStyle?: React.CSSProperties` — targets the underlying phone `<input>` field directly.
 
 Behavior notes:
 

package/src/components/InputPhone/InputPhone.esm.js

@@ -6,10 +6,10 @@ import r from "clsx";
 import { jsx as i } from "react/jsx-runtime";
 import { PhoneInput as a } from "react-international-phone";
 //#region src/components/InputPhone/InputPhone.tsx
-var o = ({ label: o, id: s, labelPosition: c = "top", required: l = !1, defaultCountry: u = "us", error: d, style: f, className: p, ...m }) => {
-	let h = n(), g = s || h, _ = t.useRef(null);
+var o = ({ label: o, id: s, labelPosition: c = "top", required: l = !1, defaultCountry: u = "us", error: d, style: f, className: p, inputStyle: m, ...h }) => {
+	let g = n(), _ = s || g, v = t.useRef(null);
 	return /* @__PURE__ */ i(e, {
-		id: g,
+		id: _,
 		className: r("inputPhone", p),
 		label: o,
 		labelPosition: c,
@@ -17,13 +17,14 @@ var o = ({ label: o, id: s, labelPosition: c = "top", required: l = !1, defaultC
 		required: l,
 		style: f,
 		onLabelClick: (e) => {
-			let t = _.current, n = e.target;
+			let t = v.current, n = e.target;
 			!t || n === t || n.closest("button") || (e.preventDefault(), t.focus());
 		},
 		children: /* @__PURE__ */ i(a, {
 			defaultCountry: u,
-			...m,
-			ref: _
+			inputStyle: m,
+			...h,
+			ref: v
 		})
 	});
 };

package/src/components/Loader/AGENTS.md

@@ -22,7 +22,7 @@ Props:
   - `"factory"`
 - `color?: string` (default: `"black"`)
 - `width?: number` (optional, variant-dependent default behavior)
-- `styles?: React.CSSProperties` (inline style override)
+- `style?: React.CSSProperties` (native inherited style, merged after the computed loader style variables)
 
 Example:
 

package/src/components/Modal/AGENTS.md

@@ -16,7 +16,7 @@ Props:
 - `backgroundDismiss?: boolean` (default behavior: `true`)
 - `hideDismissIcon?: boolean` (default behavior: close icon is shown)
 - `footer?: React.ReactNode`
-- `styles?: React.CSSProperties` (applies to outer modal wrapper)
+- `style?: React.CSSProperties` (native inherited style, applies to outer modal wrapper)
 
 Behavior notes:
 

package/src/components/Select/AGENTS.md

@@ -13,6 +13,8 @@ Props:
 - `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
 - `error?: string | boolean | ReactNode`
 - `required?: boolean`
+- `style?: React.CSSProperties` — targets the wrapper element.
+- `inputStyle?: React.CSSProperties` — targets the `<select>` field directly.
 - `options?: Array<{ label: string; value: string }>`
 
 Behavior notes:

package/src/components/Select/Select.esm.js

@@ -4,8 +4,8 @@ import { useId as t } from "react";
 import n from "clsx";
 import { jsx as r } from "react/jsx-runtime";
 //#region src/components/Select/Select.tsx
-var i = ({ label: i, id: a, labelPosition: o = "top", required: s = !1, error: c, options: l = [], className: u, style: d, ...f }) => {
-	let p = t(), m = a || p;
+var i = ({ label: i, id: a, labelPosition: o = "top", required: s = !1, error: c, options: l = [], className: u, style: d, inputStyle: f, ...p }) => {
+	let m = t(), h = a || m;
 	return /* @__PURE__ */ r(e, {
 		label: i,
 		labelPosition: o,
@@ -14,12 +14,13 @@ var i = ({ label: i, id: a, labelPosition: o = "top", required: s = !1, error: c
 		className: n("select", u),
 		style: d,
 		children: /* @__PURE__ */ r("select", {
-			id: m,
-			...f,
+			id: h,
+			style: f,
+			...p,
 			children: l.map((e, t) => /* @__PURE__ */ r("option", {
 				value: e.value,
 				children: e.label
-			}, `${m}-opt-${t}`))
+			}, `${h}-opt-${t}`))
 		})
 	});
 };

package/src/components/Textarea/AGENTS.md

@@ -13,6 +13,8 @@ Props:
 - `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
 - `error?: string | boolean | ReactNode`
 - `required?: boolean`
+- `style?: React.CSSProperties` — targets the wrapper element.
+- `inputStyle?: React.CSSProperties` — targets the `<textarea>` field directly.
 - `rows?: number`
 
 Behavior notes:

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

@@ -3,8 +3,8 @@ import { InputWrapper as e } from "../Input/InputWrapper.esm.js";
 import { useId as t } from "react";
 import { jsx as n } from "react/jsx-runtime";
 //#region src/components/Textarea/Textarea.tsx
-var r = ({ labelPosition: r = "top", id: i, label: a, error: o, required: s, className: c, style: l, value: u, defaultValue: d, ...f }) => {
-	let p = t();
+var r = ({ labelPosition: r = "top", id: i, label: a, error: o, required: s, className: c, style: l, value: u, defaultValue: d, inputStyle: f, ...p }) => {
+	let m = t();
 	return /* @__PURE__ */ n(e, {
 		label: a,
 		className: c,
@@ -15,11 +15,12 @@ var r = ({ labelPosition: r = "top", id: i, label: a, error: o, required: s, cla
 		value: u,
 		defaultValue: d,
 		children: /* @__PURE__ */ n("textarea", {
-			id: i || p,
+			id: i || m,
 			className: "input",
 			value: u,
 			defaultValue: d,
-			...f
+			style: f,
+			...p
 		})
 	});
 };

package/src/components/TimePicker/TimePicker.css

@@ -1 +1 @@
-@layer cf-base{.react-time-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}.react-time-picker__wrapper:focus{box-shadow:none;outline:0}.react-time-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-time-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-time-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-time-picker__wrapper{appearance:textfield}.react-time-picker__wrapper:disabled,.disabled.react-time-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}}.react-time-picker,.react-time-picker *,.react-time-picker :before,.react-time-picker :after{box-sizing:border-box}@layer cf-component{.react-time-picker{display:inline-flex;position:relative}.react-time-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-time-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-time-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-time-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-time-picker__inputGroup__divider,.react-time-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-time-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-time-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-time-picker__inputGroup__input:disabled{background-color:unset}.react-time-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-time-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-time-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-time-picker__button{border:0;padding:4px 4px 4px 7px}.react-time-picker__button:hover{background:0 0}.react-time-picker__wrapper{padding:6px 24px 6px 8px}.react-time-picker__inputGroup__input:invalid{background:#ff00001a}.react-time-picker__inputGroup__amPm{font:inherit;appearance:menulist}.react-time-picker__button:enabled{cursor:pointer}.react-time-picker__button:enabled:hover .react-time-picker__button__icon,.react-time-picker__button:enabled:focus .react-time-picker__button__icon{stroke:#0078d7}.react-time-picker__button:disabled .react-time-picker__button__icon{stroke:#6d6d6d}.react-time-picker__button svg{display:inherit}.react-time-picker__clock{z-index:1;background-color:#fff;border:thin solid #a0a096;width:200px;max-width:100vw;height:200px;padding:25px}.react-time-picker__clock--closed,.timePicker .react-time-picker__clock{display:none}.timePicker .timePicker__field{position:relative}.timePicker .timePicker__field .input-view-toggle{padding:4px;line-height:1;position:absolute;top:50%;right:4px;transform:translateY(-50%)}.timePicker__display{background-color:var(--white);border:1px solid var(--gray400);z-index:1;border-radius:8px;height:160px;display:inline-flex;position:relative}.timePicker__display:before,.timePicker__display:after{content:"";z-index:1;pointer-events:none;height:calc(50% - 16px);display:block;position:absolute;left:0;right:0}.timePicker__display:before{border-bottom:.5px solid rgba(var(--text-high-contrast-rgb-value), .3);background:linear-gradient(to top, rgba(var(--background-site-rgb-value), .65) 0%, rgba(var(--background-site-rgb-value), 1) 100%);top:-.5px}.timePicker__display:after{border-top:.5px solid rgba(var(--text-high-contrast-rgb-value), .3);background:linear-gradient(to bottom, rgba(var(--background-site-rgb-value), .65) 0%, rgba(var(--background-site-rgb-value), 1) 100%);bottom:-.5px}.timePicker__display .ios-picker{flex-direction:row;align-items:center;gap:6px;height:100%;padding:0 12px;font-size:16px;line-height:1;display:flex}.timePicker__display .ios-picker--disabled{pointer-events:none;opacity:.5}.timePicker__display .ios-picker__scene{touch-action:pan-x;align-items:center;min-width:30px;height:100%;display:flex;overflow:hidden}.timePicker__display .ios-picker__viewport{perspective:1000px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-webkit-tap-highlight-color:transparent;width:100%;height:32px}.timePicker__display .ios-picker__viewport--perspective-left{perspective-origin:calc(50% + 130px);transform:translate(27px)}.timePicker__display .ios-picker__viewport--perspective-right{perspective-origin:calc(50% - 130px);transform:translate(-27px)}.timePicker__display .ios-picker__viewport--perspective-center{perspective-origin:50%}.timePicker__display .ios-picker__container{width:100%;height:100%;transform-style:preserve-3d;will-change:transform}.timePicker__display .ios-picker__slide{text-align:center;backface-visibility:hidden;opacity:0;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.timePicker__display .ios-picker__label{white-space:nowrap;pointer-events:none;font-weight:700}}
+@layer cf-base{.react-time-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}.react-time-picker__wrapper:focus{box-shadow:none;outline:0}.react-time-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-time-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-time-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-time-picker__wrapper{appearance:textfield}.react-time-picker__wrapper:disabled,.disabled.react-time-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}}.react-time-picker,.react-time-picker *,.react-time-picker :before,.react-time-picker :after{box-sizing:border-box}@layer cf-component{.react-time-picker{display:inline-flex;position:relative}.react-time-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-time-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-time-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-time-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-time-picker__inputGroup__divider,.react-time-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-time-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-time-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-time-picker__inputGroup__input:disabled{background-color:unset}.react-time-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-time-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-time-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-time-picker__button{border:0;padding:4px 4px 4px 7px}.react-time-picker__button:hover{background:0 0}.react-time-picker__wrapper{padding:6px 8px}.react-time-picker__inputGroup__input:invalid{background:#ff00001a}.react-time-picker__inputGroup__amPm{font:inherit;appearance:menulist}.react-time-picker__button:enabled{cursor:pointer}.react-time-picker__button:enabled:hover .react-time-picker__button__icon,.react-time-picker__button:enabled:focus .react-time-picker__button__icon{stroke:#0078d7}.react-time-picker__button:disabled .react-time-picker__button__icon{stroke:#6d6d6d}.react-time-picker__button svg{display:inherit}.react-time-picker__clock{z-index:1;background-color:#fff;border:thin solid #a0a096;width:200px;max-width:100vw;height:200px;padding:25px}.react-time-picker__clock--closed,.timePicker .react-time-picker__clock{display:none}.timePicker .timePicker__field{width:fit-content;position:relative}.timePicker .timePicker__field:has(.input-view-toggle) .react-time-picker__wrapper{padding-right:34px}.timePicker .timePicker__field .input-view-toggle{padding:4px;line-height:1;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.timePicker__display{background-color:var(--white);border:1px solid var(--gray400);z-index:1;border-radius:8px;height:160px;display:inline-flex;position:relative}.timePicker__display:before,.timePicker__display:after{content:"";z-index:1;pointer-events:none;height:calc(50% - 16px);display:block;position:absolute;left:0;right:0}.timePicker__display:before{border-bottom:.5px solid rgba(var(--text-high-contrast-rgb-value), .3);background:linear-gradient(to top, rgba(var(--background-site-rgb-value), .65) 0%, rgba(var(--background-site-rgb-value), 1) 100%);top:-.5px}.timePicker__display:after{border-top:.5px solid rgba(var(--text-high-contrast-rgb-value), .3);background:linear-gradient(to bottom, rgba(var(--background-site-rgb-value), .65) 0%, rgba(var(--background-site-rgb-value), 1) 100%);bottom:-.5px}.timePicker__display .ios-picker{flex-direction:row;align-items:center;gap:6px;height:100%;padding:0 12px;font-size:16px;line-height:1;display:flex}.timePicker__display .ios-picker--disabled{pointer-events:none;opacity:.5}.timePicker__display .ios-picker__scene{touch-action:pan-x;align-items:center;min-width:30px;height:100%;display:flex;overflow:hidden}.timePicker__display .ios-picker__viewport{perspective:1000px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-webkit-tap-highlight-color:transparent;width:100%;height:32px}.timePicker__display .ios-picker__viewport--perspective-left{perspective-origin:calc(50% + 130px);transform:translate(27px)}.timePicker__display .ios-picker__viewport--perspective-right{perspective-origin:calc(50% - 130px);transform:translate(-27px)}.timePicker__display .ios-picker__viewport--perspective-center{perspective-origin:50%}.timePicker__display .ios-picker__container{width:100%;height:100%;transform-style:preserve-3d;will-change:transform}.timePicker__display .ios-picker__slide{text-align:center;backface-visibility:hidden;opacity:0;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.timePicker__display .ios-picker__label{white-space:nowrap;pointer-events:none;font-weight:700}}

package/src/components/TimePicker/TimePicker.esm.js

@@ -12,7 +12,7 @@ import { TimePicker as g } from "react-time-picker";
 import { isMobile as _ } from "react-device-detect";
 //#region src/components/TimePicker/TimePicker.tsx
 var v = (v) => {
-	let { labels: y, locale: b, format: x, value: S, onChange: C, label: w, labelPosition: T, error: E, required: D, name: O, ...k } = v, [A, j] = a(null), [M, N] = a(null), { floatingStyles: P } = h({
+	let { labels: y, locale: b, format: x, value: S, onChange: C, label: w, labelPosition: T, error: E, required: D, name: O, disableClock: k, ...A } = v, [j, M] = a(null), [N, P] = a(null), { floatingStyles: F } = h({
 		placement: "bottom-start",
 		strategy: "absolute",
 		whileElementsMounted: d,
@@ -22,30 +22,30 @@ var v = (v) => {
 			m()
 		],
 		elements: {
-			reference: A,
-			floating: M
+			reference: j,
+			floating: N
 		}
-	}), [F, I] = a(!1), L = n(b);
+	}), [I, L] = a(!1), R = n(b);
 	return i(() => {
-		if (!F) return;
+		if (!I) return;
 		let e = (e) => {
-			A?.contains(e.target) || M?.contains(e.target) || I(!1);
+			j?.contains(e.target) || N?.contains(e.target) || L(!1);
 		};
 		return document.addEventListener("pointerdown", e), () => {
 			document.removeEventListener("pointerdown", e);
 		};
 	}, [
-		F,
-		A,
-		M
+		I,
+		j,
+		N
 	]), /* @__PURE__ */ u("div", {
 		className: "timePicker",
-		ref: j,
+		ref: M,
 		onFocus: (e) => {
-			_ || e.target instanceof HTMLInputElement && I(!0);
+			_ || e.target instanceof HTMLInputElement && L(!0);
 		},
 		onKeyDown: (e) => {
-			e.key === "Enter" && I(!1);
+			e.key === "Enter" && L(!1);
 		},
 		children: [
 			O && /* @__PURE__ */ l("input", {
@@ -62,34 +62,34 @@ var v = (v) => {
 				children: /* @__PURE__ */ u("div", {
 					className: "timePicker__field",
 					children: [/* @__PURE__ */ l(g, {
-						...k,
 						value: S,
 						onChange: C,
-						locale: L,
+						locale: R,
 						required: D,
+						clearIcon: /* @__PURE__ */ l(c, { size: 14 }),
 						disableClock: !0,
-						clearIcon: /* @__PURE__ */ l(c, { size: 14 })
-					}), !_ && /* @__PURE__ */ l(e, {
+						...A
+					}), !_ && !k && /* @__PURE__ */ l(e, {
 						type: "button",
 						variant: "text",
-						onClick: () => I((e) => !e),
-						"aria-label": F ? "Hide time picker" : "Show time picker",
-						"aria-pressed": F,
+						onClick: () => L((e) => !e),
+						"aria-label": I ? "Hide time picker" : "Show time picker",
+						"aria-pressed": I,
 						disabled: v.disabled,
 						className: "input-view-toggle",
-						children: l(F ? o : s, { size: 16 })
+						children: l(I ? o : s, { size: 16 })
 					})]
 				})
 			}),
-			!_ && /* @__PURE__ */ l(r, {
+			!_ && !k && /* @__PURE__ */ l(r, {
 				value: S,
 				onChange: (e) => C?.(e),
-				locale: L,
+				locale: R,
 				labels: y,
 				format: x,
-				visible: F,
-				floatingRef: N,
-				style: P
+				visible: I,
+				floatingRef: P,
+				style: F
 			})
 		]
 	});

package/src/components/TimePicker/TimePicker.scss

@@ -18,7 +18,7 @@
         }   
         &__wrapper {
             @extend %date-picker-wrapper;
-            padding: 6px 24px 6px 8px;
+            padding: 6px 8px;
         }  
         &__inputGroup {
             @extend %date-picker-input-group;
@@ -95,10 +95,17 @@
 
         .timePicker__field {
             position: relative;
+            width: fit-content;
+
+            &:has(.input-view-toggle) {
+                .react-time-picker__wrapper {
+                    padding-right: 34px;
+                }
+            }
 
             .input-view-toggle {
                 position: absolute;
-                right: 4px;
+                right: 10px;
                 top: 50%;
                 transform: translateY(-50%);
                 padding: 4px;

package/src/components/Tooltip/AGENTS.md

@@ -1,8 +1,6 @@
 # Tooltip — Agent Usage Notes
 
-> Not yet part of the documented public export surface (see `craftsman-component-usage` skill's Known Limitations). Source path only — do not assume `@stamcat/craftsman/Tooltip` is published until confirmed in `exports.ts`.
-
-Import (source-relative, once exported):
+Import:
 
 ```tsx
 import { Tooltip } from "@stamcat/craftsman/Tooltip";