@stamcat/craftsman 0.1.4 → 0.1.8

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

@@ -5,22 +5,27 @@ import { useState as t } from "react";
 import n from "clsx";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/Input/InputWrapper.tsx
-var a = ({ label: a, labelPosition: o = "top", required: s = !1, error: c, className: l, style: u, children: d, value: f, defaultValue: p, onLabelClick: m }) => {
-	let h = f !== void 0, [g, _] = t(!e(p)), v = h ? !e(f) : g, y = (t) => {
-		if (h) return;
+var a = ({ label: a, labelPosition: o = "top", required: s = !1, error: c, className: l, style: u, children: d, value: f, defaultValue: p, onLabelClick: m, labelStyle: h, labelClassName: g, width: _ }) => {
+	let v = f !== void 0, [y, b] = t(!e(p)), x = v ? !e(f) : y, S = (t) => {
+		if (v) return;
 		let n = t.target;
-		_(!e(n.value));
+		b(!e(n.value));
 	};
 	return /* @__PURE__ */ i("div", {
 		"data-label-position": o,
 		"data-required": s,
-		"data-has-input": v,
+		"data-has-input": x,
 		className: n("input-wrapper", l),
-		style: u,
-		onInput: y,
-		onChange: y,
+		style: {
+			...u,
+			..._ ? { "--input-width": _ } : void 0
+		},
+		onInput: S,
+		onChange: S,
 		children: [/* @__PURE__ */ i("label", {
 			onClick: m,
+			className: g,
+			style: h,
 			children: [!e(a) && o !== "hidden" && /* @__PURE__ */ r("div", {
 				className: "input-label",
 				children: a

package/src/components/InputPhone/AGENTS.md

@@ -19,6 +19,7 @@ Props:
 - `endAdornment?: ReactNode`
 - `style?: React.CSSProperties` — targets the wrapper element.
 - `inputStyle?: React.CSSProperties` — targets the underlying phone `<input>` field directly.
+- `width?: string` — sets the field's width, accepts any CSS length e.g. `"50%"` or `"320px"`. Sets it via the `--input-width` CSS variable; omit for the default intrinsic/auto width.
 
 Behavior notes:
 

package/src/components/InputPhone/InputPhone.css

@@ -1 +1 @@
-@layer cf-base;@layer cf-component{.inputPhone[data-label-position=inside] .input-label{top:15px;left:50px}.inputPhone .react-international-phone-country-selector{position:relative}.inputPhone .react-international-phone-flag-emoji{width:var(--react-international-phone-flag-width,24px);height:var(--react-international-phone-flag-height,24px);box-sizing:border-box}.inputPhone .react-international-phone-country-selector-button{height:var(--react-international-phone-height,36px);box-sizing:border-box;border:1px solid var(--react-international-phone-country-selector-border-color,var(--react-international-phone-border-color,gainsboro));appearance:button;background-color:var(--react-international-phone-country-selector-background-color,var(--react-international-phone-background-color,white));cursor:pointer;text-transform:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.inputPhone .react-international-phone-country-selector-button:hover{background-color:unset}.inputPhone .react-international-phone-country-selector-button--hide-dropdown{cursor:auto}.inputPhone .react-international-phone-country-selector-button--hide-dropdown:hover{background-color:#0000}.inputPhone .react-international-phone-country-selector-button--disabled{background-color:var(--react-international-phone-disabled-country-selector-background-color,var(--react-international-phone-disabled-background-color,whitesmoke));cursor:auto}.inputPhone .react-international-phone-country-selector-button--disabled:hover{background-color:var(--react-international-phone-disabled-country-selector-background-color,var(--react-international-phone-disabled-background-color,whitesmoke))}.inputPhone .react-international-phone-country-selector-button__button-content{justify-content:center;align-items:center;display:flex}.inputPhone .react-international-phone-country-selector-button__flag-emoji{margin:0 4px}.inputPhone .react-international-phone-country-selector-button__flag-emoji--disabled{opacity:.75}.inputPhone .react-international-phone-country-selector-button__dropdown-arrow{border-top:var(--react-international-phone-country-selector-arrow-size,4px) solid var(--react-international-phone-country-selector-arrow-color,#777);border-right:var(--react-international-phone-country-selector-arrow-size,4px) solid transparent;border-left:var(--react-international-phone-country-selector-arrow-size,4px) solid transparent;margin-right:4px;transition:all .1s ease-out}.inputPhone .react-international-phone-country-selector-button__dropdown-arrow--active{transform:rotateX(180deg)}.inputPhone .react-international-phone-country-selector-button__dropdown-arrow--disabled{border-top-color:var(--react-international-phone-disabled-country-selector-arrow-color,#999)}.inputPhone .react-international-phone-country-selector-dropdown{z-index:1000;top:var(--react-international-phone-dropdown-top,44px);left:var(--react-international-phone-dropdown-left,0);background-color:var(--react-international-phone-dropdown-item-background-color,var(--react-international-phone-background-color,white));width:300px;max-height:200px;box-shadow:var(--react-international-phone-dropdown-shadow,2px 2px 16px #00000040);color:var(--react-international-phone-dropdown-item-text-color,var(--react-international-phone-text-color,#222));flex-direction:column;margin:0;padding:4px 0;list-style:none;display:flex;position:absolute;overflow-y:scroll}.inputPhone .react-international-phone-country-selector-dropdown__preferred-list-divider{height:1px;margin:var(--react-international-phone-dropdown-preferred-list-divider-margin,0);background:var(--react-international-phone-dropdown-preferred-list-divider-color,var(--react-international-phone-border-color,gainsboro));border:none}.inputPhone .react-international-phone-country-selector-dropdown__list-item{min-height:var(--react-international-phone-dropdown-item-height,28px);box-sizing:border-box;align-items:center;padding:2px 8px;display:flex}.inputPhone .react-international-phone-country-selector-dropdown__list-item:hover{background-color:var(--react-international-phone-selected-dropdown-item-background-color,var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke));cursor:pointer}.inputPhone .react-international-phone-country-selector-dropdown__list-item--selected,.inputPhone .react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke);color:var(--react-international-phone-selected-dropdown-item-text-color,var(--react-international-phone-text-color,#222))}.inputPhone .react-international-phone-country-selector-dropdown__list-item--selected .react-international-phone-country-selector-dropdown__list-item-dial-code,.inputPhone .react-international-phone-country-selector-dropdown__list-item--focused .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-selected-dropdown-item-dial-code-color,var(--react-international-phone-dropdown-item-dial-code-color,gray))}.inputPhone .react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color,var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke))}.inputPhone .react-international-phone-country-selector-dropdown__list-item-flag-emoji{margin-right:8px}.inputPhone .react-international-phone-country-selector-dropdown__list-item-country-name{font-size:var(--react-international-phone-dropdown-item-font-size,14px);text-overflow:ellipsis;white-space:nowrap;margin-right:8px;overflow:hidden}.inputPhone .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-dropdown-item-dial-code-color,gray);font-size:var(--react-international-phone-dropdown-item-font-size,14px)}.inputPhone .react-international-phone-dial-code-preview{border:1px solid var(--react-international-phone-dial-code-preview-border-color,var(--react-international-phone-border-color,gainsboro));background-color:var(--react-international-phone-dial-code-preview-background-color,var(--react-international-phone-background-color,white));color:var(--react-international-phone-dial-code-preview-text-color,var(--react-international-phone-text-color,#222));font-size:var(--react-international-phone-dial-code-preview-font-size,var(--react-international-phone-font-size,13px));justify-content:center;align-items:center;margin-right:-1px;padding:0 8px;display:flex}.inputPhone .react-international-phone-dial-code-preview--disabled{background-color:var(--react-international-phone-dial-code-preview-disabled-background-color,var(--react-international-phone-disabled-background-color,whitesmoke));color:var(--react-international-phone-dial-code-preview-disabled-text-color,var(--react-international-phone-disabled-text-color,#666))}.inputPhone .react-international-phone-input-container{display:flex}.inputPhone .react-international-phone-input-container .react-international-phone-country-selector-button{border-radius:var(--react-international-phone-border-radius,4px);border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px}.inputPhone .react-international-phone-input-container .react-international-phone-input{height:var(--react-international-phone-height,36px);box-sizing:border-box;border:1px solid var(--react-international-phone-border-color,gainsboro);border-radius:var(--react-international-phone-border-radius,4px);background-color:var(--react-international-phone-background-color,white);color:var(--react-international-phone-text-color,#222);font-family:inherit;font-size:var(--react-international-phone-font-size,13px);border-top-left-radius:0;border-bottom-left-radius:0;margin:0;padding:0 8px;overflow:visible}.inputPhone .react-international-phone-input-container .react-international-phone-input:focus{outline:none}.inputPhone .react-international-phone-input-container .react-international-phone-input--disabled{background-color:var(--react-international-phone-disabled-background-color,whitesmoke);color:var(--react-international-phone-disabled-text-color,#666)}}
+@layer cf-base;@layer cf-component{.inputPhone[data-label-position=inside] .input-label{top:15px;left:50px}.inputPhone .react-international-phone-country-selector{position:relative}.inputPhone .react-international-phone-flag-emoji{width:var(--react-international-phone-flag-width,24px);height:var(--react-international-phone-flag-height,24px);box-sizing:border-box}.inputPhone .react-international-phone-country-selector-button{height:var(--react-international-phone-height,36px);box-sizing:border-box;border:1px solid var(--react-international-phone-country-selector-border-color,var(--react-international-phone-border-color,gainsboro));appearance:button;background-color:var(--react-international-phone-country-selector-background-color,var(--react-international-phone-background-color,white));cursor:pointer;text-transform:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.inputPhone .react-international-phone-country-selector-button:hover{background-color:unset}.inputPhone .react-international-phone-country-selector-button--hide-dropdown{cursor:auto}.inputPhone .react-international-phone-country-selector-button--hide-dropdown:hover{background-color:#0000}.inputPhone .react-international-phone-country-selector-button--disabled{background-color:var(--react-international-phone-disabled-country-selector-background-color,var(--react-international-phone-disabled-background-color,whitesmoke));cursor:auto}.inputPhone .react-international-phone-country-selector-button--disabled:hover{background-color:var(--react-international-phone-disabled-country-selector-background-color,var(--react-international-phone-disabled-background-color,whitesmoke))}.inputPhone .react-international-phone-country-selector-button__button-content{justify-content:center;align-items:center;display:flex}.inputPhone .react-international-phone-country-selector-button__flag-emoji{margin:0 4px}.inputPhone .react-international-phone-country-selector-button__flag-emoji--disabled{opacity:.75}.inputPhone .react-international-phone-country-selector-button__dropdown-arrow{border-top:var(--react-international-phone-country-selector-arrow-size,4px) solid var(--react-international-phone-country-selector-arrow-color,#777);border-right:var(--react-international-phone-country-selector-arrow-size,4px) solid transparent;border-left:var(--react-international-phone-country-selector-arrow-size,4px) solid transparent;margin-right:4px;transition:all .1s ease-out}.inputPhone .react-international-phone-country-selector-button__dropdown-arrow--active{transform:rotateX(180deg)}.inputPhone .react-international-phone-country-selector-button__dropdown-arrow--disabled{border-top-color:var(--react-international-phone-disabled-country-selector-arrow-color,#999)}.inputPhone .react-international-phone-country-selector-dropdown{z-index:1000;top:var(--react-international-phone-dropdown-top,44px);left:var(--react-international-phone-dropdown-left,0);background-color:var(--react-international-phone-dropdown-item-background-color,var(--react-international-phone-background-color,white));width:300px;max-height:200px;box-shadow:var(--react-international-phone-dropdown-shadow,2px 2px 16px #00000040);color:var(--react-international-phone-dropdown-item-text-color,var(--react-international-phone-text-color,#222));flex-direction:column;margin:0;padding:4px 0;list-style:none;display:flex;position:absolute;overflow-y:scroll}.inputPhone .react-international-phone-country-selector-dropdown__preferred-list-divider{height:1px;margin:var(--react-international-phone-dropdown-preferred-list-divider-margin,0);background:var(--react-international-phone-dropdown-preferred-list-divider-color,var(--react-international-phone-border-color,gainsboro));border:none}.inputPhone .react-international-phone-country-selector-dropdown__list-item{min-height:var(--react-international-phone-dropdown-item-height,28px);box-sizing:border-box;align-items:center;padding:2px 8px;display:flex}.inputPhone .react-international-phone-country-selector-dropdown__list-item:hover{background-color:var(--react-international-phone-selected-dropdown-item-background-color,var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke));cursor:pointer}.inputPhone .react-international-phone-country-selector-dropdown__list-item--selected,.inputPhone .react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke);color:var(--react-international-phone-selected-dropdown-item-text-color,var(--react-international-phone-text-color,#222))}.inputPhone .react-international-phone-country-selector-dropdown__list-item--selected .react-international-phone-country-selector-dropdown__list-item-dial-code,.inputPhone .react-international-phone-country-selector-dropdown__list-item--focused .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-selected-dropdown-item-dial-code-color,var(--react-international-phone-dropdown-item-dial-code-color,gray))}.inputPhone .react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color,var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke))}.inputPhone .react-international-phone-country-selector-dropdown__list-item-flag-emoji{margin-right:8px}.inputPhone .react-international-phone-country-selector-dropdown__list-item-country-name{font-size:var(--react-international-phone-dropdown-item-font-size,14px);text-overflow:ellipsis;white-space:nowrap;margin-right:8px;overflow:hidden}.inputPhone .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-dropdown-item-dial-code-color,gray);font-size:var(--react-international-phone-dropdown-item-font-size,14px)}.inputPhone .react-international-phone-dial-code-preview{border:1px solid var(--react-international-phone-dial-code-preview-border-color,var(--react-international-phone-border-color,gainsboro));background-color:var(--react-international-phone-dial-code-preview-background-color,var(--react-international-phone-background-color,white));color:var(--react-international-phone-dial-code-preview-text-color,var(--react-international-phone-text-color,#222));font-size:var(--react-international-phone-dial-code-preview-font-size,var(--react-international-phone-font-size,13px));justify-content:center;align-items:center;margin-right:-1px;padding:0 8px;display:flex}.inputPhone .react-international-phone-dial-code-preview--disabled{background-color:var(--react-international-phone-dial-code-preview-disabled-background-color,var(--react-international-phone-disabled-background-color,whitesmoke));color:var(--react-international-phone-dial-code-preview-disabled-text-color,var(--react-international-phone-disabled-text-color,#666))}.inputPhone .react-international-phone-input-container{width:var(--input-width,auto);display:flex}.inputPhone .react-international-phone-input-container .react-international-phone-country-selector-button{border-radius:var(--react-international-phone-border-radius,4px);border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px}.inputPhone .react-international-phone-input-container .react-international-phone-input{min-width:0;height:var(--react-international-phone-height,36px);box-sizing:border-box;border:1px solid var(--react-international-phone-border-color,gainsboro);border-radius:var(--react-international-phone-border-radius,4px);background-color:var(--react-international-phone-background-color,white);color:var(--react-international-phone-text-color,#222);font-family:inherit;font-size:var(--react-international-phone-font-size,13px);border-top-left-radius:0;border-bottom-left-radius:0;flex:1;margin:0;padding:0 8px;overflow:visible}.inputPhone .react-international-phone-input-container .react-international-phone-input:focus{outline:none}.inputPhone .react-international-phone-input-container .react-international-phone-input--disabled{background-color:var(--react-international-phone-disabled-background-color,whitesmoke);color:var(--react-international-phone-disabled-text-color,#666)}}

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

@@ -6,25 +6,26 @@ 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, inputStyle: m, ...h }) => {
-	let g = n(), _ = s || g, v = 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, width: h, ...g }) => {
+	let _ = n(), v = s || _, y = t.useRef(null);
 	return /* @__PURE__ */ i(e, {
-		id: _,
+		id: v,
 		className: r("inputPhone", p),
 		label: o,
 		labelPosition: c,
 		error: d,
 		required: l,
 		style: f,
+		width: h,
 		onLabelClick: (e) => {
-			let t = v.current, n = e.target;
+			let t = y.current, n = e.target;
 			!t || n === t || n.closest("button") || (e.preventDefault(), t.focus());
 		},
 		children: /* @__PURE__ */ i(a, {
 			defaultCountry: u,
 			inputStyle: m,
-			...h,
-			ref: v
+			...g,
+			ref: y
 		})
 	});
 };

package/src/components/InputPhone/InputPhone.scss

@@ -229,6 +229,7 @@
 
         .react-international-phone-input-container {
             display: flex;
+            width: var(--input-width, auto);
 
             .react-international-phone-country-selector-button {
                 border-radius: var(--react-international-phone-border-radius, 4px);
@@ -239,6 +240,8 @@
 
             .react-international-phone-input {
                 overflow: visible;
+                flex: 1 1 0%;
+                min-width: 0;
                 height: var(--react-international-phone-height, 36px);
                 box-sizing: border-box;
                 padding: 0 8px;

package/src/components/Popover/AGENTS.md

@@ -0,0 +1,62 @@
+# Popover — Agent Usage Notes
+
+Import:
+
+```tsx
+import { Popover } from "@stamcat/craftsman/Popover";
+```
+
+Popover vs Tooltip — pick the right one:
+
+- Use **Tooltip** for short hint text that appears on hover and needs no interaction.
+- Use **Popover** for richer, interactive floating content (forms, menus, multi-line explanations) that the user opens deliberately. It defaults to click-to-open (not hover), supports controlled open state, and dismisses on outside click or `Escape`.
+
+Props:
+
+- `anchor: React.ReactNode` — the element the popover is attached to.
+- `content: React.ReactNode` — the floating content shown.
+- `placement?: Placement` (from `@floating-ui/react-dom`, default: `"bottom-start"`)
+- `strategy?: Strategy` (from `@floating-ui/react-dom`, default: `"absolute"`)
+- `trigger?: "click" | "hover"` (default: `"click"`)
+- `open?: boolean` — pass to fully control open state (omit for uncontrolled behavior).
+- `onOpenChange?: (open: boolean) => void` — called whenever open state would change, controlled or not.
+- `anchorStyles?: React.CSSProperties`
+- `contentStyles?: React.CSSProperties`
+
+Behavior notes:
+
+- Built on `@floating-ui/react-dom`'s `useFloating` with `autoUpdate` and `offset(12)`, `flip()`, `shift()` middleware — same positioning engine as Tooltip.
+- Uncontrolled by default: pass no `open` prop and the component manages its own visibility state.
+- Controlled mode: pass `open` and handle `onOpenChange` to drive visibility from parent state.
+- Closes on outside `pointerdown` and on `Escape` key while open.
+- Keyboard-operable: the anchor responds to `Enter`/`Space` in addition to click, and carries `aria-haspopup="dialog"`, `aria-expanded`, `aria-controls`.
+- Floating content has `role="dialog"` with `aria-modal="false"` (non-modal — background stays interactive) and is only rendered in the DOM while open (not just hidden via CSS).
+- Focus moves into the floating content when it opens and returns to whatever was focused beforehand when it closes.
+- Current `placement` is exposed via `data-placement` on the floating element for style targeting.
+
+Example (uncontrolled):
+
+```tsx
+<Popover
+  anchor={<Button variant="default">More info</Button>}
+  content={<div>Rich, interactive content goes here.</div>}
+  placement="bottom-start"
+/>
+```
+
+Example (controlled):
+
+```tsx
+const [open, setOpen] = useState(false);
+
+<Popover
+  anchor={<Button variant="default">Settings</Button>}
+  content={<SettingsForm onSave={() => setOpen(false)} />}
+  open={open}
+  onOpenChange={setOpen}
+/>
+```
+
+Implementation caution:
+
+- No dedicated theme entry currently in `theme.components`; style via `anchorStyles`/`contentStyles` or global selectors targeting `.popover__anchor` / `.popover__floating`.

package/src/components/Popover/Popover.css

@@ -0,0 +1 @@
+@layer cf-component{.popover{--popover-bg:var(--white)}.popover__floating{background-color:var(--popover-bg);color:var(--gray800);padding:calc(var(--w-gutter) * .75);z-index:1;border-radius:8px;box-shadow:0 4px 16px #00000026}}

package/src/components/Popover/Popover.d.ts

@@ -0,0 +1,14 @@
+import { Placement, Strategy } from '@floating-ui/react-dom';
+import { default as React } from 'react';
+export type PopoverProps = {
+    anchor: React.ReactNode;
+    content: React.ReactNode;
+    placement?: Placement;
+    strategy?: Strategy;
+    trigger?: "click" | "hover";
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    anchorStyles?: React.CSSProperties;
+    contentStyles?: React.CSSProperties;
+};
+export declare const Popover: React.FC<PopoverProps>;

package/src/components/Popover/Popover.esm.js

@@ -0,0 +1,80 @@
+"use client";
+import './Popover.css';/* empty css                  */
+import { useEffect as e, useId as t, useRef as n, useState as r } from "react";
+import i from "clsx";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { autoUpdate as s, flip as c, offset as l, shift as u, useFloating as d } from "@floating-ui/react-dom";
+//#region src/components/Popover/Popover.tsx
+var f = (f) => {
+	let { trigger: p = "click" } = f, m = t(), [h, g] = r(null), [_, v] = r(null), { floatingStyles: y, placement: b } = d({
+		placement: f.placement ?? "bottom-start",
+		strategy: f.strategy ?? "absolute",
+		whileElementsMounted: s,
+		middleware: [
+			l(12),
+			c(),
+			u()
+		],
+		elements: {
+			reference: h,
+			floating: _
+		}
+	}), [x, S] = r(!1), C = f.open !== void 0, w = C ? f.open : x, T = n(null), E = (e) => {
+		C || S(e), f.onOpenChange?.(e);
+	};
+	return e(() => {
+		if (!w) return;
+		let e = (e) => {
+			h?.contains(e.target) || _?.contains(e.target) || E(!1);
+		}, t = (e) => {
+			e.key === "Escape" && E(!1);
+		};
+		return document.addEventListener("pointerdown", e), document.addEventListener("keydown", t), () => {
+			document.removeEventListener("pointerdown", e), document.removeEventListener("keydown", t);
+		};
+	}, [
+		w,
+		h,
+		_
+	]), e(() => {
+		w ? (T.current = document.activeElement, _?.focus()) : T.current?.focus();
+	}, [w, _]), /* @__PURE__ */ o("div", {
+		className: i("popover"),
+		children: [/* @__PURE__ */ a("div", {
+			className: i("popover__anchor"),
+			ref: g,
+			onMouseEnter: () => {
+				p === "hover" && E(!0);
+			},
+			onMouseLeave: () => {
+				p === "hover" && E(!1);
+			},
+			onClick: () => {
+				p === "click" && E(!w);
+			},
+			onKeyDown: (e) => {
+				p === "click" && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), E(!w));
+			},
+			"aria-haspopup": "dialog",
+			"aria-expanded": w,
+			"aria-controls": w ? m : void 0,
+			style: f.anchorStyles,
+			children: f.anchor
+		}), w && /* @__PURE__ */ a("div", {
+			id: m,
+			className: i("popover__floating"),
+			role: "dialog",
+			"aria-modal": "false",
+			tabIndex: -1,
+			ref: v,
+			"data-placement": b,
+			style: {
+				...y,
+				...f.contentStyles
+			},
+			children: f.content
+		})]
+	});
+};
+//#endregion
+export { f as Popover };

package/src/components/Popover/Popover.scss

@@ -0,0 +1,16 @@
+@use "../../styles/utilities/_functions" as u;
+
+@layer cf-component {
+    .popover {
+        --popover-bg: #{u.color("white")};
+
+        &__floating {
+            background-color: var(--popover-bg);
+            color: #{u.color("gray800")};
+            padding: #{u.width("gutter", 0.75)};
+            border-radius: 8px;
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+            z-index: 1;
+        }
+    }
+}

package/src/components/Select/AGENTS.md

@@ -15,6 +15,7 @@ Props:
 - `required?: boolean`
 - `style?: React.CSSProperties` — targets the wrapper element.
 - `inputStyle?: React.CSSProperties` — targets the `<select>` field directly.
+- `width?: string` — sets the field's width, accepts any CSS length e.g. `"50%"` or `"320px"`. Sets it via the `--input-width` CSS variable; omit for the default intrinsic/auto width.
 - `options?: Array<{ label: string; value: string }>`
 
 Behavior notes:

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

@@ -5,8 +5,8 @@ import { useId as n } from "react";
 import r from "clsx";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/Select/Select.tsx
-var o = ({ label: o, id: s, labelPosition: c = "top", required: l = !1, error: u, options: d = [], className: f, style: p, inputStyle: m, preAdornment: h, ...g }) => {
-	let _ = n(), v = s || _;
+var o = ({ label: o, id: s, labelPosition: c = "top", required: l = !1, error: u, options: d = [], className: f, style: p, inputStyle: m, preAdornment: h, width: g, ..._ }) => {
+	let v = n(), y = s || v;
 	return /* @__PURE__ */ i(t, {
 		label: o,
 		labelPosition: c,
@@ -14,6 +14,7 @@ var o = ({ label: o, id: s, labelPosition: c = "top", required: l = !1, error: u
 		required: l,
 		className: r("select", f),
 		style: p,
+		width: g,
 		children: /* @__PURE__ */ a("span", {
 			className: "input-field",
 			"data-has-pre-adornment": !e(h),
@@ -21,14 +22,14 @@ var o = ({ label: o, id: s, labelPosition: c = "top", required: l = !1, error: u
 				className: "input-pre-adornment",
 				children: h
 			}), /* @__PURE__ */ i("select", {
-				id: v,
+				id: y,
 				className: "input",
 				style: m,
-				...g,
+				..._,
 				children: d.map((e, t) => /* @__PURE__ */ i("option", {
 					value: e.value,
 					children: e.label
-				}, `${v}-opt-${t}`))
+				}, `${y}-opt-${t}`))
 			})]
 		})
 	});

package/src/components/Textarea/AGENTS.md

@@ -15,6 +15,10 @@ Props:
 - `required?: boolean`
 - `style?: React.CSSProperties` — targets the wrapper element.
 - `inputStyle?: React.CSSProperties` — targets the `<textarea>` field directly.
+- `inputClassName?: string` — adds a className to the `<textarea>` field directly (alongside the base `"input"` class).
+- `labelStyle?: React.CSSProperties` — targets the wrapping `<label>` element.
+- `labelClassName?: string` — adds a className to the wrapping `<label>` element.
+- `width?: string` — sets the field's width, accepts any CSS length e.g. `"50%"` or `"320px"`. Sets it via the `--input-width` CSS variable; omit for the default intrinsic/auto width.
 - `rows?: number`
 
 Behavior notes:
@@ -32,3 +36,7 @@ Example:
   required
 />
 ```
+
+```tsx
+<Textarea label="Notes" width="100%" />
+```

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

@@ -1,28 +1,32 @@
 "use client";
 import { InputWrapper as e } from "../Input/InputWrapper.esm.js";
 import { useId as t } from "react";
-import { jsx as n } from "react/jsx-runtime";
+import n from "clsx";
+import { jsx as r } 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, inputStyle: f, ...p }) => {
-	let m = t();
-	return /* @__PURE__ */ n(e, {
-		label: a,
-		className: c,
-		labelPosition: r,
-		error: o,
-		required: s,
-		style: l,
-		value: u,
-		defaultValue: d,
-		children: /* @__PURE__ */ n("textarea", {
-			id: i || m,
-			className: "input",
-			value: u,
-			defaultValue: d,
-			style: f,
-			...p
+var i = ({ labelPosition: i = "top", id: a, label: o, error: s, required: c, className: l, style: u, value: d, defaultValue: f, inputStyle: p, inputClassName: m, labelStyle: h, labelClassName: g, width: _, ...v }) => {
+	let y = t();
+	return /* @__PURE__ */ r(e, {
+		label: o,
+		className: l,
+		labelPosition: i,
+		error: s,
+		required: c,
+		style: u,
+		value: d,
+		defaultValue: f,
+		labelStyle: h,
+		labelClassName: g,
+		width: _,
+		children: /* @__PURE__ */ r("textarea", {
+			id: a || y,
+			className: n("input", m),
+			value: d,
+			defaultValue: f,
+			style: p,
+			...v
 		})
 	});
 };
 //#endregion
-export { r as Textarea };
+export { i as Textarea };

package/src/components/TimePicker/AGENTS.md

@@ -16,6 +16,7 @@ Props:
 - `locale?: Intl.LocalesArgument`
 - `format?: 24 | 12`
 - `labels?: { hour?: string; minute?: string }`
+- `width?: string` — sets the field's width, accepts any CSS length e.g. `"50%"` or `"320px"`. Sets it via the `--input-width` CSS variable; omit for the default intrinsic/auto width.
 
 Behavior notes:
 

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 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}}
+@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);width:var(--input-width,auto);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{width:var(--input-width,auto);display:inline-flex;position:relative}.react-time-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-time-picker__wrapper{flex-grow:1;flex-shrink:0;width:auto;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:var(--input-width,fit-content);position:relative}.timePicker .timePicker__field .react-time-picker{width:100%}.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, disableClock: k, ...A } = v, [j, M] = a(null), [N, P] = a(null), { floatingStyles: F } = h({
+	let { labels: y, locale: b, format: x, value: S, onChange: C, label: w, labelPosition: T, error: E, required: D, name: O, disableClock: k, width: A, ...j } = v, [M, N] = a(null), [P, F] = a(null), { floatingStyles: I } = h({
 		placement: "bottom-start",
 		strategy: "absolute",
 		whileElementsMounted: d,
@@ -22,30 +22,30 @@ var v = (v) => {
 			m()
 		],
 		elements: {
-			reference: j,
-			floating: N
+			reference: M,
+			floating: P
 		}
-	}), [I, L] = a(!1), R = n(b);
+	}), [L, R] = a(!1), z = n(b);
 	return i(() => {
-		if (!I) return;
+		if (!L) return;
 		let e = (e) => {
-			j?.contains(e.target) || N?.contains(e.target) || L(!1);
+			M?.contains(e.target) || P?.contains(e.target) || R(!1);
 		};
 		return document.addEventListener("pointerdown", e), () => {
 			document.removeEventListener("pointerdown", e);
 		};
 	}, [
-		I,
-		j,
-		N
+		L,
+		M,
+		P
 	]), /* @__PURE__ */ u("div", {
 		className: "timePicker",
-		ref: M,
+		ref: N,
 		onFocus: (e) => {
-			_ || e.target instanceof HTMLInputElement && L(!0);
+			_ || e.target instanceof HTMLInputElement && R(!0);
 		},
 		onKeyDown: (e) => {
-			e.key === "Enter" && L(!1);
+			e.key === "Enter" && R(!1);
 		},
 		children: [
 			O && /* @__PURE__ */ l("input", {
@@ -59,37 +59,38 @@ var v = (v) => {
 				labelPosition: T,
 				error: E,
 				required: D,
+				width: A,
 				children: /* @__PURE__ */ u("div", {
 					className: "timePicker__field",
 					children: [/* @__PURE__ */ l(g, {
 						value: S,
 						onChange: C,
-						locale: R,
+						locale: z,
 						required: D,
 						clearIcon: /* @__PURE__ */ l(c, { size: 14 }),
 						disableClock: !0,
-						...A
+						...j
 					}), !_ && !k && /* @__PURE__ */ l(e, {
 						type: "button",
 						variant: "text",
-						onClick: () => L((e) => !e),
-						"aria-label": I ? "Hide time picker" : "Show time picker",
-						"aria-pressed": I,
+						onClick: () => R((e) => !e),
+						"aria-label": L ? "Hide time picker" : "Show time picker",
+						"aria-pressed": L,
 						disabled: v.disabled,
 						className: "input-view-toggle",
-						children: l(I ? o : s, { size: 16 })
+						children: l(L ? o : s, { size: 16 })
 					})]
 				})
 			}),
 			!_ && !k && /* @__PURE__ */ l(r, {
 				value: S,
 				onChange: (e) => C?.(e),
-				locale: R,
+				locale: z,
 				labels: y,
 				format: x,
-				visible: I,
-				floatingRef: P,
-				style: F
+				visible: L,
+				floatingRef: F,
+				style: I
 			})
 		]
 	});

package/src/components/TimePicker/TimePicker.scss

@@ -95,7 +95,12 @@
 
         .timePicker__field {
             position: relative;
-            width: fit-content;
+            width: var(--input-width, fit-content);
+
+            // .react-time-picker reads --input-width itself via %date-picker-styles; force it to fill this already-sized wrapper instead of re-resolving the variable
+            .react-time-picker {
+                width: 100%;
+            }
 
             &:has(.input-view-toggle) {
                 .react-time-picker__wrapper {

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

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

package/src/components/index.d.ts

@@ -19,6 +19,7 @@ export { Carousel } from './Carousel/Carousel';
 export { TimePicker } from './TimePicker/TimePicker';
 export { DateTimePicker } from './DateTimePicker/DateTimePicker';
 export { Tooltip } from './Tooltip/Tooltip';
+export { Popover } from './Popover/Popover';
 export { Notice } from './Notice/Notice';
 export { SortableList } from './SortableList/SortableList';
 export * from './Icons';

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

@@ -8,6 +8,7 @@
     border: 1px solid var(--gray400);
     padding: #{u.width("gutter", 0.5)};
     background-color: var(--white);
+    width: var(--input-width, auto);
     &:focus {
       outline: 0;
       box-shadow: none;

package/src/styles/global/globalStyles.scss

@@ -11,6 +11,12 @@
 @layer cf-base, cf-component, cf-theme;
 
 @layer cf-base {
+    *,
+    *::before,
+    *::after {
+        box-sizing: border-box;
+    }
+
     :root {
         color-scheme: light dark;
         font-synthesis: none;
@@ -36,6 +42,7 @@
     ::-webkit-scrollbar-thumb:hover {
         background: #555;
     }
+
     body,
     ul {
         margin: 0;