@stamcat/craftsman 0.1.4 → 0.1.8

package/AGENTS.md

@@ -34,6 +34,7 @@ import { TimePicker } from "@stamcat/craftsman/TimePicker";
 import { DateTimePicker } from "@stamcat/craftsman/DateTimePicker";
 import { Toggle } from "@stamcat/craftsman/Toggle";
 import { Tooltip } from "@stamcat/craftsman/Tooltip";
+import { Popover } from "@stamcat/craftsman/Popover";
 import { Notice } from "@stamcat/craftsman/Notice";
 import { SortableList } from "@stamcat/craftsman/SortableList";
 ```

package/Components.esm.js

@@ -20,25 +20,26 @@ import { Carousel as v } from "./src/components/Carousel/Carousel.esm.js";
 import { TimePicker as y } from "./src/components/TimePicker/TimePicker.esm.js";
 import { DateTimePicker as b } from "./src/components/DateTimePicker/DateTimePicker.esm.js";
 import { Tooltip as x } from "./src/components/Tooltip/Tooltip.esm.js";
-import { Notice as S } from "./src/components/Notice/Notice.esm.js";
-import { SortableList as C } from "./src/components/SortableList/SortableList.esm.js";
-import { IconAmazonPay as w } from "./src/components/Icons/IconAmazonPay.esm.js";
-import { IconAmex as T } from "./src/components/Icons/IconAmex.esm.js";
-import { IconApplePay as E } from "./src/components/Icons/IconApplePay.esm.js";
-import { IconDiscover as D } from "./src/components/Icons/IconDiscover.esm.js";
-import { IconGooglePay as O } from "./src/components/Icons/IconGooglePay.esm.js";
-import { IconMaestro as k } from "./src/components/Icons/IconMaestro.esm.js";
-import { IconMastercard as A } from "./src/components/Icons/IconMastercard.esm.js";
-import { IconPayPal as j } from "./src/components/Icons/IconPayPal.esm.js";
-import { IconSepa as M } from "./src/components/Icons/IconSepa.esm.js";
-import { IconShopPay as N } from "./src/components/Icons/IconShopPay.esm.js";
-import { IconSquare as P } from "./src/components/Icons/IconSquare.esm.js";
-import { IconStripe as F } from "./src/components/Icons/IconStripe.esm.js";
-import { IconUnionPay as I } from "./src/components/Icons/IconUnionPay.esm.js";
-import { IconVenmo as L } from "./src/components/Icons/IconVenmo.esm.js";
-import { IconVisa as R } from "./src/components/Icons/IconVisa.esm.js";
+import { Popover as S } from "./src/components/Popover/Popover.esm.js";
+import { Notice as C } from "./src/components/Notice/Notice.esm.js";
+import { SortableList as w } from "./src/components/SortableList/SortableList.esm.js";
+import { IconAmazonPay as T } from "./src/components/Icons/IconAmazonPay.esm.js";
+import { IconAmex as E } from "./src/components/Icons/IconAmex.esm.js";
+import { IconApplePay as D } from "./src/components/Icons/IconApplePay.esm.js";
+import { IconDiscover as O } from "./src/components/Icons/IconDiscover.esm.js";
+import { IconGooglePay as k } from "./src/components/Icons/IconGooglePay.esm.js";
+import { IconMaestro as A } from "./src/components/Icons/IconMaestro.esm.js";
+import { IconMastercard as j } from "./src/components/Icons/IconMastercard.esm.js";
+import { IconPayPal as M } from "./src/components/Icons/IconPayPal.esm.js";
+import { IconSepa as N } from "./src/components/Icons/IconSepa.esm.js";
+import { IconShopPay as P } from "./src/components/Icons/IconShopPay.esm.js";
+import { IconSquare as F } from "./src/components/Icons/IconSquare.esm.js";
+import { IconStripe as I } from "./src/components/Icons/IconStripe.esm.js";
+import { IconUnionPay as L } from "./src/components/Icons/IconUnionPay.esm.js";
+import { IconVenmo as R } from "./src/components/Icons/IconVenmo.esm.js";
+import { IconVisa as z } from "./src/components/Icons/IconVisa.esm.js";
 //#region src/components/index.ts
-var z = /* @__PURE__ */ e({
+var B = /* @__PURE__ */ e({
 	Accordion: () => t,
 	Button: () => n,
 	Carousel: () => v,
@@ -46,32 +47,33 @@ var z = /* @__PURE__ */ e({
 	DatePicker: () => f,
 	DateRangePicker: () => p,
 	DateTimePicker: () => b,
-	IconAmazonPay: () => w,
-	IconAmex: () => T,
-	IconApplePay: () => E,
-	IconDiscover: () => D,
-	IconGooglePay: () => O,
-	IconMaestro: () => k,
-	IconMastercard: () => A,
-	IconPayPal: () => j,
-	IconSepa: () => M,
-	IconShopPay: () => N,
-	IconSquare: () => P,
-	IconStripe: () => F,
-	IconUnionPay: () => I,
-	IconVenmo: () => L,
-	IconVisa: () => R,
+	IconAmazonPay: () => T,
+	IconAmex: () => E,
+	IconApplePay: () => D,
+	IconDiscover: () => O,
+	IconGooglePay: () => k,
+	IconMaestro: () => A,
+	IconMastercard: () => j,
+	IconPayPal: () => M,
+	IconSepa: () => N,
+	IconShopPay: () => P,
+	IconSquare: () => F,
+	IconStripe: () => I,
+	IconUnionPay: () => L,
+	IconVenmo: () => R,
+	IconVisa: () => z,
 	Input: () => r,
 	InputNumber: () => h,
 	InputPassword: () => i,
 	InputPhone: () => m,
 	Loader: () => a,
 	Modal: () => u,
-	Notice: () => S,
+	Notice: () => C,
 	Pagination: () => _,
+	Popover: () => S,
 	RadioButton: () => o,
 	Select: () => d,
-	SortableList: () => C,
+	SortableList: () => w,
 	Text: () => l,
 	Textarea: () => c,
 	TimePicker: () => y,
@@ -79,4 +81,4 @@ var z = /* @__PURE__ */ e({
 	Tooltip: () => x
 });
 //#endregion
-export { t as Accordion, n as Button, v as Carousel, s as Checkbox, f as DatePicker, p as DateRangePicker, b as DateTimePicker, w as IconAmazonPay, T as IconAmex, E as IconApplePay, D as IconDiscover, O as IconGooglePay, k as IconMaestro, A as IconMastercard, j as IconPayPal, M as IconSepa, N as IconShopPay, P as IconSquare, F as IconStripe, I as IconUnionPay, L as IconVenmo, R as IconVisa, r as Input, h as InputNumber, i as InputPassword, m as InputPhone, a as Loader, u as Modal, S as Notice, _ as Pagination, o as RadioButton, d as Select, C as SortableList, l as Text, c as Textarea, y as TimePicker, g as Toggle, x as Tooltip, z as components_exports };
+export { t as Accordion, n as Button, v as Carousel, s as Checkbox, f as DatePicker, p as DateRangePicker, b as DateTimePicker, T as IconAmazonPay, E as IconAmex, D as IconApplePay, O as IconDiscover, k as IconGooglePay, A as IconMaestro, j as IconMastercard, M as IconPayPal, N as IconSepa, P as IconShopPay, F as IconSquare, I as IconStripe, L as IconUnionPay, R as IconVenmo, z as IconVisa, r as Input, h as InputNumber, i as InputPassword, m as InputPhone, a as Loader, u as Modal, C as Notice, _ as Pagination, S as Popover, o as RadioButton, d as Select, w as SortableList, l as Text, c as Textarea, y as TimePicker, g as Toggle, x as Tooltip, B as components_exports };

package/README.md

@@ -96,6 +96,7 @@ Each component has its own package entry point, e.g. `@stamcat/craftsman/Button`
 | TimePicker | `@stamcat/craftsman/TimePicker` |
 | Toggle | `@stamcat/craftsman/Toggle` |
 | Tooltip | `@stamcat/craftsman/Tooltip` |
+| Popover | `@stamcat/craftsman/Popover` |
 
 ## Styling notes
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.1.4",
+  "version": "0.1.8",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {
@@ -317,6 +317,10 @@
       "types": "./src/components/Tooltip/Tooltip.d.ts",
       "default": "./src/components/Tooltip/Tooltip.esm.js"
     },
+    "./Popover": {
+      "types": "./src/components/Popover/Popover.d.ts",
+      "default": "./src/components/Popover/Popover.esm.js"
+    },
     "./Notice": {
       "types": "./src/components/Notice/Notice.d.ts",
       "default": "./src/components/Notice/Notice.esm.js"

package/skills/craftsman-component-usage/SKILL.md

@@ -33,6 +33,7 @@ import { TimePicker } from "@stamcat/craftsman/TimePicker";
 import { DateTimePicker } from "@stamcat/craftsman/DateTimePicker";
 import { Toggle } from "@stamcat/craftsman/Toggle";
 import { Tooltip } from "@stamcat/craftsman/Tooltip";
+import { Popover } from "@stamcat/craftsman/Popover";
 import { Notice } from "@stamcat/craftsman/Notice";
 import { SortableList } from "@stamcat/craftsman/SortableList";
 ```
@@ -72,6 +73,7 @@ Each entry links to the `AGENTS.md` co-located with that component's source for
 | Text | [../../src/components/Text/AGENTS.md](../../src/components/Text/AGENTS.md) |
 | DateTimePicker | [../../src/components/DateTimePicker/AGENTS.md](../../src/components/DateTimePicker/AGENTS.md) |
 | Tooltip | [../../src/components/Tooltip/AGENTS.md](../../src/components/Tooltip/AGENTS.md) |
+| Popover | [../../src/components/Popover/AGENTS.md](../../src/components/Popover/AGENTS.md) |
 | Toggle | [../../src/components/Toggle/AGENTS.md](../../src/components/Toggle/AGENTS.md) |
 | Notice | [../../src/components/Notice/AGENTS.md](../../src/components/Notice/AGENTS.md) |
 | SortableList | [../../src/components/SortableList/AGENTS.md](../../src/components/SortableList/AGENTS.md) |
@@ -133,7 +135,14 @@ toast.info("New version available.");
 
 Craftsman uses `react-chartjs-2` directly, without modification — there is no Craftsman `Chart` wrapper component. Consumers install `react-chartjs-2` and its `chart.js` peer dependency themselves and use the upstream API exactly as documented at https://react-chartjs-2.js.org/examples.
 
-Import:
+Do this, in order, every time a chart is requested — do not stop after only picking a chart type:
+
+1. Confirm `chart.js` and `react-chartjs-2` are installed (`npm install chart.js react-chartjs-2` if missing — do not skip this because you "can't run commands"; ask the user to run it if you truly cannot).
+2. Import the chart component (`Bar`, `Line`, `Pie`, `Doughnut`, `PolarArea`, `Radar`, `Scatter`, `Bubble`, or `Chart` for mixed types) from `react-chartjs-2`.
+3. Import and `ChartJS.register(...)` only the `chart.js` pieces that chart type needs, once at module scope, before any render.
+4. Build a `data` object (`labels` + `datasets`) and an `options` object, then render `<ChartComponent data={data} options={options} />`.
+
+Full minimal working example (bar chart) — use this shape as the template for any chart type:
 
 ```tsx
 import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Tooltip, Legend } from "chart.js";
@@ -141,19 +150,67 @@ import { Bar } from "react-chartjs-2";
 
 // Register only the controllers/elements/scales/plugins the chart type needs — chart.js is tree-shakeable.
 ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend);
+
+function RevenueChart() {
+    return (
+        <Bar
+            data={{
+                labels: ["January", "February", "March"],
+                datasets: [{ label: "Revenue", data: [12, 19, 8], backgroundColor: "#3A70C2" }],
+            }}
+            options={{ responsive: true }}
+        />
+    );
+}
 ```
 
-Usage:
+Usage notes:
 
-- Every chart type used (`Bar`, `Line`, `Pie`, `Doughnut`, `PolarArea`, `Radar`, `Scatter`, `Bubble`, `Chart` for mixed types) must have its corresponding `chart.js` pieces registered once at module scope before render.
+- Every chart type used (`Bar`, `Line`, `Pie`, `Doughnut`, `PolarArea`, `Radar`, `Scatter`, `Bubble`, `Chart` for mixed types) must have its corresponding `chart.js` pieces registered once at module scope before render — a missing registration is the most common cause of a blank canvas, not a bug in the library.
+- "Donut" is just the common spelling of "doughnut" — chart.js and react-chartjs-2 only export `Doughnut`, so treat a request for a "donut chart" as a request for the `Doughnut` chart type. Do not ask the user to clarify or stall on this — just use `Doughnut`.
 - Dataset colors must be literal color values (hex/`rgba()`), not CSS variables (`var(--blue500)`) — chart.js draws to a `<canvas>` 2D context, which cannot resolve CSS custom properties. Use `colors` and `hexToRgba` from `@stamcat/craftsman/styles` (see the [craftsman-style-utilities skill](../craftsman-style-utilities/SKILL.md)) to stay on-palette instead of hard-coding hex strings inline.
-- See `src/stories/organisms/Charts.stories.tsx` in this repo for a full worked example of every chart type from the react-chartjs-2 examples page.
+- Storybook story files are **not published in the npm package** (excluded from the build to reduce package size) — do not look for them in `node_modules/@stamcat/craftsman`. If you are working inside the craftsman source repo itself, `src/stories/organisms/Charts.stories.tsx` has a full worked example of every chart type from the react-chartjs-2 examples page; copy the closest matching example and adapt the data. If you are in a consuming application, follow the steps and minimal example above directly instead.
 
 ## Tables (ag-grid-community)
 
 Craftsman does not wrap `ag-grid-community`/`ag-grid-react` with a custom component. We use them directly, without modification, for advanced data visualization tables (large sortable/filterable datasets) — exactly as documented upstream at https://www.ag-grid.com/react-data-grid/.
 
-Import:
+Do this, in order, every time a table/grid is requested — do not stop after only picking column definitions:
+
+1. Confirm `ag-grid-community` and `ag-grid-react` are installed (`npm install ag-grid-community ag-grid-react` if missing — do not skip this because you "can't run commands"; ask the user to run it if you truly cannot).
+2. Call `ModuleRegistry.registerModules([AllCommunityModule])` once at module scope, before any grid renders. Without this call the grid renders blank/broken — this is expected AG Grid v33+ behavior, not a library bug.
+3. Define `columnDefs` (one entry per column) and `rowData` (your array of row objects).
+4. Render `<AgGridReact theme={themeQuartz} rowData={rowData} columnDefs={columnDefs} />` inside a container with an explicit height (AG Grid does not auto-size its container).
+5. Only reach for Community-safe options (see below). If the request needs row grouping, pivoting, master/detail, server-side row model, or Excel export, tell the user those are AG Grid Enterprise features requiring a separate commercial license — do not silently omit the feature or stall without explanation.
+
+Full minimal working example — use this shape as the template for any table:
+
+```tsx
+import { AllCommunityModule, ModuleRegistry, themeQuartz, type ColDef } from "ag-grid-community";
+import { AgGridReact } from "ag-grid-react";
+
+// Register only the Community module — do not register Enterprise modules without a license.
+ModuleRegistry.registerModules([AllCommunityModule]);
+
+type Product = { readonly name: string; readonly price: number };
+
+const rowData: Product[] = [
+    { name: "Trail Runner Jacket", price: 129 },
+    { name: "Insulated Water Bottle", price: 32 },
+];
+
+const columnDefs: ColDef<Product>[] = [{ field: "name", filter: true }, { field: "price" }];
+
+function ProductTable() {
+    return (
+        <div style={{ height: 360 }}>
+            <AgGridReact<Product> theme={themeQuartz} rowData={rowData} columnDefs={columnDefs} pagination />
+        </div>
+    );
+}
+```
+
+Import reference:
 
 ```tsx
 import { AllCommunityModule, ModuleRegistry, themeQuartz } from "ag-grid-community";
@@ -167,7 +224,7 @@ Usage:
 
 - Only the **free Community feature set** is used/showcased in this repo: client-side sorting, filtering, pagination, row selection, cell rendering/formatting, quick filter, and CSV export.
 - AG Grid also sells **Enterprise-only** features (row grouping, pivoting, master/detail, server-side row model, Excel export, and others). These require registering separate Enterprise modules and a commercial license key. Do not enable or suggest Enterprise modules unless the consumer confirms they hold an AG Grid Enterprise license — it is the consumer's responsibility to obtain and configure that license.
-- See `src/stories/organisms/Tables.stories.tsx` in this repo for worked Community-only examples.
+- Storybook story files are **not published in the npm package** (excluded from the build to reduce package size) — do not look for them in `node_modules/@stamcat/craftsman`. If you are working inside the craftsman source repo itself, `src/stories/organisms/Tables.stories.tsx` has worked Community-only examples. If you are in a consuming application, follow the steps and minimal example above directly instead.
 
 ## Code Generation Patterns to Prefer
 

package/skills/craftsman-style-utilities/SKILL.md

@@ -127,6 +127,7 @@ Valid keys: `text` · `gutter` · `column` · `tablet` · `desktop` · `extDeskt
 
 - The `column` key automatically accounts for gutters between columns.
 - Never use hard-coded `px` values for spacing or layout widths. Always use `width()`.
+- The multiplier must be a whole, half, or quarter number a human can read at a glance (`0.25`, `0.5`, `0.75`, `1`, `1.5`, `2`, `-0.5`, etc.). Do not use obscure multipliers like `0.1`, `0.45`, or `-0.1` — if the design doesn't reduce to a clean fraction of the gutter, use the literal `px` value instead of forcing it through `width()`.
 
 ### breakpoint()
 

package/src/components/DatePicker/AGENTS.md

@@ -15,6 +15,7 @@ Props:
 - `required?: boolean`
 - `value?: Date | null`
 - `onChange?: (value: DatePickerProps["value"]) => void`
+- `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/DatePicker/DatePicker.css

@@ -1 +1 @@
-@layer cf-base{.react-date-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}.react-date-picker__wrapper:focus{box-shadow:none;outline:0}.react-date-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-date-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-date-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-date-picker__wrapper{appearance:textfield}.react-date-picker__wrapper:disabled,.disabled.react-date-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}}.react-date-picker,.react-date-picker *,.react-date-picker :before,.react-date-picker :after{box-sizing:border-box}@layer cf-component{.react-date-picker{display:inline-flex;position:relative}.react-date-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-date-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-date-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-date-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-date-picker__inputGroup__divider,.react-date-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-date-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-date-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-date-picker__inputGroup__input:disabled{background-color:unset}.react-date-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-date-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-date-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-date-picker__button{border:0;padding:4px 4px 4px 7px}.react-date-picker__button:hover{background:0 0}.react-date-picker__calendar{z-index:1;width:350px;max-width:100vw}.react-date-picker__calendar .react-calendar{border-width:thin}.react-date-picker__calendar--closed,.react-date-picker__clock--closed{display:none}.input-wrapper.datePicker[data-label-position=inside][data-has-input=false]:not(:focus-within) .react-date-picker__inputGroup__divider{color:#0000}.react-date-picker__calendar .react-date-picker__inputGroup__input:invalid{background:unset}}
+@layer cf-base{.react-date-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-date-picker__wrapper:focus{box-shadow:none;outline:0}.react-date-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-date-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-date-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-date-picker__wrapper{appearance:textfield}.react-date-picker__wrapper:disabled,.disabled.react-date-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}}.react-date-picker,.react-date-picker *,.react-date-picker :before,.react-date-picker :after{box-sizing:border-box}@layer cf-component{.react-date-picker{width:var(--input-width,auto);display:inline-flex;position:relative}.react-date-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-date-picker__wrapper{flex-grow:1;flex-shrink:0;width:auto;padding:6px 8px;display:flex}.react-date-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-date-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-date-picker__inputGroup__divider,.react-date-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-date-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-date-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-date-picker__inputGroup__input:disabled{background-color:unset}.react-date-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-date-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-date-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-date-picker__button{border:0;padding:4px 4px 4px 7px}.react-date-picker__button:hover{background:0 0}.react-date-picker__calendar{z-index:1;width:350px;max-width:100vw}.react-date-picker__calendar .react-calendar{border-width:thin}.react-date-picker__calendar--closed,.react-date-picker__clock--closed{display:none}.input-wrapper.datePicker[data-label-position=inside][data-has-input=false]:not(:focus-within) .react-date-picker__inputGroup__divider{color:#0000}.react-date-picker__calendar .react-date-picker__inputGroup__input:invalid{background:unset}}

package/src/components/DatePicker/DatePicker.esm.js

@@ -8,21 +8,22 @@ import { FaRegCalendar as r, FaX as i } from "react-icons/fa6";
 import { jsx as a } from "react/jsx-runtime";
 import { DatePicker as o } from "react-date-picker";
 //#region src/components/DatePicker/DatePicker.tsx
-var s = ({ label: s, id: c, labelPosition: l = "top", required: u = !1, error: d, style: f, className: p, ...m }) => {
-	let h = t();
+var s = ({ label: s, id: c, labelPosition: l = "top", required: u = !1, error: d, style: f, className: p, width: m, ...h }) => {
+	let g = t();
 	return /* @__PURE__ */ a(e, {
-		id: c || h,
+		id: c || g,
 		className: n("datePicker", p),
 		label: s,
 		labelPosition: l,
 		error: d,
 		required: u,
 		style: f,
-		value: m.value?.toString(),
+		width: m,
+		value: h.value?.toString(),
 		children: /* @__PURE__ */ a(o, {
 			calendarIcon: /* @__PURE__ */ a(r, { size: 16 }),
 			clearIcon: /* @__PURE__ */ a(i, { size: 14 }),
-			...m
+			...h
 		})
 	});
 };

package/src/components/DatePicker/_DatePicker.scss

@@ -6,6 +6,7 @@
     %date-picker-styles {
         display: inline-flex;
         position: relative;
+        width: var(--input-width, auto);
     }
     %date-picker-disabled {
         background-color: #f0f0f0;
@@ -16,6 +17,7 @@
         flex-grow: 1;
         flex-shrink: 0;
         @extend %input-base;
+        width: auto;
         padding: 6px 8px;
     }
     %date-picker-input-group {

package/src/components/DateRangePicker/AGENTS.md

@@ -15,6 +15,7 @@ Props:
 - `required?: boolean`
 - `id?: string`
 - `style?: React.CSSProperties`
+- `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.
 - `value?` / `onChange?` — from the underlying library; `value` is typically a `[Date, Date] | null` tuple.
 
 Behavior notes:

package/src/components/DateRangePicker/DateRangePicker.css

@@ -1 +1 @@
-@layer cf-base{.react-daterange-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}.react-daterange-picker__wrapper:focus{box-shadow:none;outline:0}.react-daterange-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-daterange-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-daterange-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-daterange-picker__wrapper{appearance:textfield}.react-daterange-picker__wrapper:disabled,.disabled.react-daterange-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}}.react-daterange-picker,.react-daterange-picker *,.react-daterange-picker :before,.react-daterange-picker :after{box-sizing:border-box}@layer cf-component{.react-daterange-picker{display:inline-flex;position:relative}.react-daterange-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-daterange-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-daterange-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-daterange-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-daterange-picker__inputGroup__divider,.react-daterange-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-daterange-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-daterange-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-daterange-picker__inputGroup__input:disabled{background-color:unset}.react-daterange-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-daterange-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-daterange-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-daterange-picker__button{border:0;padding:4px 4px 4px 7px}.react-daterange-picker__button:hover{background:0 0}.dateRangePicker[data-label-position=inside][data-has-input=false]:not(:focus-within) .react-daterange-picker__range-divider,.dateRangePicker[data-label-position=inside][data-has-input=false]:not(:focus-within) .react-date-picker__inputGroup__divider{color:#0000}.react-daterange-picker__calendar{z-index:1;width:350px;max-width:100vw}.react-daterange-picker__calendar .react-calendar{border-width:thin}.react-daterange-picker__calendar--closed,.react-daterange-picker__clock--closed{display:none}.react-daterange-picker__calendar .react-daterange-picker__inputGroup__input:invalid{background:unset}}
+@layer cf-base{.react-daterange-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-daterange-picker__wrapper:focus{box-shadow:none;outline:0}.react-daterange-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-daterange-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-daterange-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-daterange-picker__wrapper{appearance:textfield}.react-daterange-picker__wrapper:disabled,.disabled.react-daterange-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}}.react-daterange-picker,.react-daterange-picker *,.react-daterange-picker :before,.react-daterange-picker :after{box-sizing:border-box}@layer cf-component{.react-daterange-picker{width:var(--input-width,auto);display:inline-flex;position:relative}.react-daterange-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-daterange-picker__wrapper{flex-grow:1;flex-shrink:0;width:auto;padding:6px 8px;display:flex}.react-daterange-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-daterange-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-daterange-picker__inputGroup__divider,.react-daterange-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-daterange-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-daterange-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-daterange-picker__inputGroup__input:disabled{background-color:unset}.react-daterange-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-daterange-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-daterange-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-daterange-picker__button{border:0;padding:4px 4px 4px 7px}.react-daterange-picker__button:hover{background:0 0}.dateRangePicker[data-label-position=inside][data-has-input=false]:not(:focus-within) .react-daterange-picker__range-divider,.dateRangePicker[data-label-position=inside][data-has-input=false]:not(:focus-within) .react-date-picker__inputGroup__divider{color:#0000}.react-daterange-picker__calendar{z-index:1;width:350px;max-width:100vw}.react-daterange-picker__calendar .react-calendar{border-width:thin}.react-daterange-picker__calendar--closed,.react-daterange-picker__clock--closed{display:none}.react-daterange-picker__calendar .react-daterange-picker__inputGroup__input:invalid{background:unset}}

package/src/components/DateRangePicker/DateRangePicker.esm.js

@@ -8,21 +8,22 @@ import { FaRegCalendar as r, FaX as i } from "react-icons/fa6";
 import { jsx as a } from "react/jsx-runtime";
 import { DateRangePicker as o } from "@wojtekmaj/react-daterange-picker";
 //#region src/components/DateRangePicker/DateRangePicker.tsx
-var s = ({ label: s, id: c, labelPosition: l = "top", required: u = !1, error: d, style: f, className: p, ...m }) => {
-	let h = t();
+var s = ({ label: s, id: c, labelPosition: l = "top", required: u = !1, error: d, style: f, className: p, width: m, ...h }) => {
+	let g = t();
 	return /* @__PURE__ */ a(e, {
-		id: c || h,
+		id: c || g,
 		className: n("dateRangePicker", p),
 		label: s,
 		labelPosition: l,
 		error: d,
 		required: u,
 		style: f,
-		value: m.value?.toString(),
+		width: m,
+		value: h.value?.toString(),
 		children: /* @__PURE__ */ a(o, {
 			calendarIcon: /* @__PURE__ */ a(r, { size: 16 }),
 			clearIcon: /* @__PURE__ */ a(i, { size: 14 }),
-			...m
+			...h
 		})
 	});
 };

package/src/components/DateTimePicker/AGENTS.md

@@ -11,6 +11,7 @@ Props:
 - Extends `react-datetime-picker`'s `DateTimePickerProps` plus `LabeledInput` (`label`, `labelPosition`, `error`, `required`).
 - `id?: string`
 - `style?: React.CSSProperties`
+- `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.
 - `format?: 24 | 12` — hour format used by the custom time wheel display.
 - `labels?: { hour?: string; minute?: string }` — labels passed through to the time wheel.
 - `value` / `onChange` — standard `Date` value and change callback.

package/src/components/DateTimePicker/DateTimePicker.css

@@ -1 +1 @@
-@layer cf-base{.react-datetime-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}.react-datetime-picker__wrapper:focus{box-shadow:none;outline:0}.react-datetime-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-datetime-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-datetime-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-datetime-picker__wrapper{appearance:textfield}.react-datetime-picker__wrapper:disabled,.disabled.react-datetime-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}}.react-datetime-picker,.react-datetime-picker *,.react-datetime-picker :before,.react-datetime-picker :after{box-sizing:border-box}@layer cf-component{.react-datetime-picker{display:inline-flex;position:relative}.react-datetime-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-datetime-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-datetime-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-datetime-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-datetime-picker__inputGroup__divider,.react-datetime-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-datetime-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-datetime-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-datetime-picker__inputGroup__input:disabled{background-color:unset}.react-datetime-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-datetime-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-datetime-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-datetime-picker__button{border:0;padding:4px 4px 4px 7px}.react-datetime-picker__button:hover{background:0 0}.dateTimePicker__wrapper[data-label-position=inside][data-has-input=false]:not(:focus-within) .react-datetime-picker__inputGroup__divider,.dateTimePicker__wrapper[data-label-position=inside][data-has-input=false]:not(:focus-within) .react-datetime-picker__inputGroup__amPm{color:#0000}.react-datetime-picker__calendar--closed,.react-datetime-picker__clock--closed{display:none}.react-datetime-picker__calendar,.react-datetime-picker__clock{z-index:1}.react-datetime-picker__inputGroup__input:invalid{background:#ff00001a}.react-datetime-picker__inputGroup__amPm{font:inherit;appearance:menulist}.react-datetime-picker__calendar{width:350px;max-width:100vw}.react-datetime-picker__calendar .react-calendar{border-width:thin}.react-date-picker__inputGroup__input:invalid,.react-datetime-picker__inputGroup__input:invalid{background:unset}.dateTimePicker{display:inline-block}.dateTimePicker__time-display{margin-top:8px;display:flex}.dateTimePicker__wrapper{display:inline-block}}
+@layer cf-base{.react-datetime-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-datetime-picker__wrapper:focus{box-shadow:none;outline:0}.react-datetime-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-datetime-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-datetime-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-datetime-picker__wrapper{appearance:textfield}.react-datetime-picker__wrapper:disabled,.disabled.react-datetime-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}}.react-datetime-picker,.react-datetime-picker *,.react-datetime-picker :before,.react-datetime-picker :after{box-sizing:border-box}@layer cf-component{.react-datetime-picker{width:var(--input-width,auto);display:inline-flex;position:relative}.react-datetime-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-datetime-picker__wrapper{flex-grow:1;flex-shrink:0;width:auto;padding:6px 8px;display:flex}.react-datetime-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-datetime-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-datetime-picker__inputGroup__divider,.react-datetime-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-datetime-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-datetime-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-datetime-picker__inputGroup__input:disabled{background-color:unset}.react-datetime-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-datetime-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-datetime-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-datetime-picker__button{border:0;padding:4px 4px 4px 7px}.react-datetime-picker__button:hover{background:0 0}.dateTimePicker__wrapper[data-label-position=inside][data-has-input=false]:not(:focus-within) .react-datetime-picker__inputGroup__divider,.dateTimePicker__wrapper[data-label-position=inside][data-has-input=false]:not(:focus-within) .react-datetime-picker__inputGroup__amPm{color:#0000}.react-datetime-picker__calendar--closed,.react-datetime-picker__clock--closed{display:none}.react-datetime-picker__calendar,.react-datetime-picker__clock{z-index:1}.react-datetime-picker__inputGroup__input:invalid{background:#ff00001a}.react-datetime-picker__inputGroup__amPm{font:inherit;appearance:menulist}.react-datetime-picker__calendar{width:350px;max-width:100vw}.react-datetime-picker__calendar .react-calendar{border-width:thin}.react-date-picker__inputGroup__input:invalid,.react-datetime-picker__inputGroup__input:invalid{background:unset}.dateTimePicker{display:inline-block}.dateTimePicker__time-display{margin-top:8px;display:flex}.dateTimePicker__wrapper{display:inline-block}}

package/src/components/DateTimePicker/DateTimePicker.esm.js

@@ -12,67 +12,68 @@ import { jsx as d, jsxs as f } from "react/jsx-runtime";
 import { isMobile as p } from "react-device-detect";
 import { DateTimePicker as m } from "react-datetime-picker";
 //#region src/components/DateTimePicker/DateTimePicker.tsx
-var h = ({ label: h, id: g, labelPosition: _ = "top", required: v = !1, error: y, style: b, className: x, locale: S, labels: C, format: w, value: T, onChange: E, ...D }) => {
-	let O = a(), k = g || O, A = o(null), [j, M] = s(!1), N = n(S);
+var h = ({ label: h, id: g, labelPosition: _ = "top", required: v = !1, error: y, style: b, className: x, locale: S, labels: C, format: w, value: T, onChange: E, width: D, ...O }) => {
+	let k = a(), A = g || k, j = o(null), [M, N] = s(!1), P = n(S);
 	i(() => {
-		if (!j) return;
+		if (!M) return;
 		let e = (e) => {
 			let t = e.target;
-			A.current?.contains(t) || M(!1);
+			j.current?.contains(t) || N(!1);
 		};
 		return document.addEventListener("pointerdown", e, !0), () => {
 			document.removeEventListener("pointerdown", e, !0);
 		};
-	}, [j]);
-	let P = () => {
+	}, [M]);
+	let F = () => {
 		if (!p && T instanceof Date) {
-			M(!0);
+			N(!0);
 			return;
 		}
-		(A.current?.querySelector("input[name=\"day\"]"))?.focus();
-	}, F = (e) => {
-		e.target instanceof HTMLInputElement && P();
+		(j.current?.querySelector("input[name=\"day\"]"))?.focus();
 	}, I = (e) => {
-		p && e.key === "Enter" && M(!1);
+		e.target instanceof HTMLInputElement && F();
 	}, L = (e) => {
+		p && e.key === "Enter" && N(!1);
+	}, R = (e) => {
 		let [t, n] = e.split(":"), r = Number(t), i = Number(n);
 		if (Number.isNaN(r) || Number.isNaN(i)) return;
 		let a = T instanceof Date ? new Date(T) : /* @__PURE__ */ new Date();
 		a.setHours(r, i, 0, 0), E?.(a);
 	};
 	return /* @__PURE__ */ d("div", {
-		ref: A,
+		ref: j,
 		className: "dateTimePicker",
-		onKeyDown: I,
+		onKeyDown: L,
 		children: /* @__PURE__ */ f(t, {
-			id: k,
-			onFocus: F,
+			id: A,
+			onFocus: I,
 			className: c(x, "dateTimePicker__wrapper"),
 			label: h,
 			labelPosition: _,
 			error: y,
 			required: v,
 			style: b,
+			width: D,
 			value: T instanceof Date ? T.toISOString() : void 0,
 			children: [/* @__PURE__ */ d(m, {
 				isClockOpen: !1,
-				onClockOpen: P,
+				onClockOpen: F,
 				onClockClose: () => {},
-				onCalendarOpen: () => M(!1),
+				onCalendarOpen: () => N(!1),
 				calendarIcon: /* @__PURE__ */ d(l, { size: 16 }),
 				clearIcon: /* @__PURE__ */ d(u, { size: 14 }),
 				value: T,
 				onChange: E,
-				...D
-			}), j && /* @__PURE__ */ d("div", {
+				...O
+			}), M && /* @__PURE__ */ d("div", {
 				className: "dateTimePicker__time-display",
 				children: /* @__PURE__ */ d(r, {
 					value: e(T, S),
-					onChange: L,
-					locale: N,
+					onChange: R,
+					locale: P,
 					labels: C,
 					format: w,
-					visible: j
+					visible: M
 				})
 			})]
 		})

package/src/components/Input/AGENTS.md

@@ -15,6 +15,10 @@ Props:
 - `required?: boolean`
 - `style?: React.CSSProperties` — targets the wrapper element.
 - `inputStyle?: React.CSSProperties` — targets the `<input>` field directly.
+- `inputClassName?: string` — adds a className to the `<input>` 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.
 - `type?: TextInputType` (checkbox/radio excluded)
 
 Behavior notes:
@@ -30,3 +34,7 @@ Example:
 ```tsx
 <Input type="email" placeholder="you@company.com" required />
 ```
+
+```tsx
+<Input label="Name" width="50%" labelStyle={{ width: "100%" }} />
+```

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]:has(.input-field[data-has-pre-adornment=true]) .input-label{left:calc(var(--w-gutter) * 1.75)}.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:inline-flex;position:relative}.input-field[data-has-end-adornment=true]>.input{padding-right:calc(var(--w-gutter) * 1.5)}.input-field[data-has-pre-adornment=true]>.input{padding-left:calc(var(--w-gutter) * 1.75)}.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-label-position=top] label{display:block}.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]:has(.input-field[data-has-pre-adornment=true]) .input-label{left:calc(var(--w-gutter) * 1.75)}.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{width:var(--input-width,auto);align-items:center;display:inline-flex;position:relative}.input-field>.input{flex:1;width:auto;min-width:0}.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) * 1.75)}.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, inputStyle: y, ...b } = o, x = n(), S = c || x;
+	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, inputClassName: b, labelStyle: x, labelClassName: S, width: C, ...w } = o, T = n(), E = c || T;
 	return /* @__PURE__ */ i(t, {
 		className: g,
 		label: s,
@@ -16,6 +16,9 @@ var o = (o) => {
 		style: h,
 		value: _,
 		defaultValue: v,
+		labelStyle: x,
+		labelClassName: S,
+		width: C,
 		children: /* @__PURE__ */ a("span", {
 			className: "input-field",
 			"data-has-end-adornment": !e(p),
@@ -26,13 +29,13 @@ var o = (o) => {
 					children: m
 				}),
 				/* @__PURE__ */ i("input", {
-					id: S,
+					id: E,
 					type: d,
-					className: r("input", d),
+					className: r("input", d, b),
 					value: _,
 					defaultValue: v,
 					style: y,
-					...b
+					...w
 				}),
 				!e(p) && /* @__PURE__ */ i("span", {
 					className: "input-end-adornment",

package/src/components/Input/Input.scss

@@ -24,6 +24,12 @@
             }
         }
 
+        &[data-label-position="top"] {
+            label {
+                display: block;
+            }
+        }
+
         &[data-required="true"] {
             label {
                 .input-label {
@@ -153,6 +159,15 @@
         position: relative;
         display: inline-flex;
         align-items: center;
+        width: var(--input-width, auto);
+
+        // flex-grow (not a percentage) so sizing resolves against the already-sized .input-field above, avoiding a circular percentage calc
+        > .input {
+            width: auto;
+            min-width: 0;
+            flex: 1 1 0%;
+        }
+
         &[data-has-end-adornment="true"] {
             > .input {
                 padding-right: #{u.width("gutter", 1.5)};

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

@@ -5,9 +5,13 @@ export type LabeledInput = {
     error?: string | boolean | React.ReactNode;
     required?: boolean;
     inputStyle?: React.CSSProperties;
+    inputClassName?: string;
     endAdornment?: React.ReactNode;
     preAdornment?: React.ReactNode;
     onLabelClick?: React.MouseEventHandler<HTMLLabelElement>;
+    labelStyle?: React.CSSProperties;
+    labelClassName?: string;
+    width?: string;
 };
 export type InputWrapperProps = React.ComponentProps<"input" | "textarea" | "select"> & LabeledInput;
 export declare const InputWrapper: React.FC<InputWrapperProps>;