@stamcat/craftsman 0.1.5 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/AGENTS.md +1 -0
  2. package/Components.esm.js +38 -36
  3. package/README.md +1 -0
  4. package/package.json +5 -1
  5. package/skills/craftsman-component-usage/SKILL.md +2 -0
  6. package/skills/craftsman-style-utilities/SKILL.md +1 -0
  7. package/src/components/DatePicker/AGENTS.md +1 -0
  8. package/src/components/DatePicker/DatePicker.css +1 -1
  9. package/src/components/DatePicker/DatePicker.esm.js +6 -5
  10. package/src/components/DatePicker/_DatePicker.scss +2 -0
  11. package/src/components/DateRangePicker/AGENTS.md +1 -0
  12. package/src/components/DateRangePicker/DateRangePicker.css +1 -1
  13. package/src/components/DateRangePicker/DateRangePicker.esm.js +6 -5
  14. package/src/components/DateTimePicker/AGENTS.md +1 -0
  15. package/src/components/DateTimePicker/DateTimePicker.css +1 -1
  16. package/src/components/DateTimePicker/DateTimePicker.esm.js +23 -22
  17. package/src/components/Input/AGENTS.md +8 -0
  18. package/src/components/Input/Input.css +1 -1
  19. package/src/components/Input/Input.esm.js +7 -4
  20. package/src/components/Input/Input.scss +15 -0
  21. package/src/components/Input/InputWrapper.d.ts +4 -0
  22. package/src/components/Input/InputWrapper.esm.js +13 -8
  23. package/src/components/InputPhone/AGENTS.md +1 -0
  24. package/src/components/InputPhone/InputPhone.css +1 -1
  25. package/src/components/InputPhone/InputPhone.esm.js +7 -6
  26. package/src/components/InputPhone/InputPhone.scss +3 -0
  27. package/src/components/Popover/AGENTS.md +62 -0
  28. package/src/components/Popover/Popover.css +1 -0
  29. package/src/components/Popover/Popover.d.ts +14 -0
  30. package/src/components/Popover/Popover.esm.js +80 -0
  31. package/src/components/Popover/Popover.scss +16 -0
  32. package/src/components/Select/AGENTS.md +1 -0
  33. package/src/components/Select/Select.esm.js +6 -5
  34. package/src/components/Textarea/AGENTS.md +8 -0
  35. package/src/components/Textarea/Textarea.esm.js +24 -20
  36. package/src/components/TimePicker/AGENTS.md +1 -0
  37. package/src/components/TimePicker/TimePicker.css +1 -1
  38. package/src/components/TimePicker/TimePicker.esm.js +23 -22
  39. package/src/components/TimePicker/TimePicker.scss +6 -1
  40. package/src/components/Toggle/Toggle.d.ts +1 -1
  41. package/src/components/index.d.ts +1 -0
  42. package/src/styles/global/components/_input.scss +1 -0
  43. package/src/styles/global/globalStyles.scss +7 -0
package/AGENTS.md CHANGED
@@ -34,6 +34,7 @@ import { TimePicker } from "@stamcat/craftsman/TimePicker";
34
34
  import { DateTimePicker } from "@stamcat/craftsman/DateTimePicker";
35
35
  import { Toggle } from "@stamcat/craftsman/Toggle";
36
36
  import { Tooltip } from "@stamcat/craftsman/Tooltip";
37
+ import { Popover } from "@stamcat/craftsman/Popover";
37
38
  import { Notice } from "@stamcat/craftsman/Notice";
38
39
  import { SortableList } from "@stamcat/craftsman/SortableList";
39
40
  ```
package/Components.esm.js CHANGED
@@ -20,25 +20,26 @@ import { Carousel as v } from "./src/components/Carousel/Carousel.esm.js";
20
20
  import { TimePicker as y } from "./src/components/TimePicker/TimePicker.esm.js";
21
21
  import { DateTimePicker as b } from "./src/components/DateTimePicker/DateTimePicker.esm.js";
22
22
  import { Tooltip as x } from "./src/components/Tooltip/Tooltip.esm.js";
23
- import { Notice as S } from "./src/components/Notice/Notice.esm.js";
24
- import { SortableList as C } from "./src/components/SortableList/SortableList.esm.js";
25
- import { IconAmazonPay as w } from "./src/components/Icons/IconAmazonPay.esm.js";
26
- import { IconAmex as T } from "./src/components/Icons/IconAmex.esm.js";
27
- import { IconApplePay as E } from "./src/components/Icons/IconApplePay.esm.js";
28
- import { IconDiscover as D } from "./src/components/Icons/IconDiscover.esm.js";
29
- import { IconGooglePay as O } from "./src/components/Icons/IconGooglePay.esm.js";
30
- import { IconMaestro as k } from "./src/components/Icons/IconMaestro.esm.js";
31
- import { IconMastercard as A } from "./src/components/Icons/IconMastercard.esm.js";
32
- import { IconPayPal as j } from "./src/components/Icons/IconPayPal.esm.js";
33
- import { IconSepa as M } from "./src/components/Icons/IconSepa.esm.js";
34
- import { IconShopPay as N } from "./src/components/Icons/IconShopPay.esm.js";
35
- import { IconSquare as P } from "./src/components/Icons/IconSquare.esm.js";
36
- import { IconStripe as F } from "./src/components/Icons/IconStripe.esm.js";
37
- import { IconUnionPay as I } from "./src/components/Icons/IconUnionPay.esm.js";
38
- import { IconVenmo as L } from "./src/components/Icons/IconVenmo.esm.js";
39
- import { IconVisa as R } from "./src/components/Icons/IconVisa.esm.js";
23
+ import { Popover as S } from "./src/components/Popover/Popover.esm.js";
24
+ import { Notice as C } from "./src/components/Notice/Notice.esm.js";
25
+ import { SortableList as w } from "./src/components/SortableList/SortableList.esm.js";
26
+ import { IconAmazonPay as T } from "./src/components/Icons/IconAmazonPay.esm.js";
27
+ import { IconAmex as E } from "./src/components/Icons/IconAmex.esm.js";
28
+ import { IconApplePay as D } from "./src/components/Icons/IconApplePay.esm.js";
29
+ import { IconDiscover as O } from "./src/components/Icons/IconDiscover.esm.js";
30
+ import { IconGooglePay as k } from "./src/components/Icons/IconGooglePay.esm.js";
31
+ import { IconMaestro as A } from "./src/components/Icons/IconMaestro.esm.js";
32
+ import { IconMastercard as j } from "./src/components/Icons/IconMastercard.esm.js";
33
+ import { IconPayPal as M } from "./src/components/Icons/IconPayPal.esm.js";
34
+ import { IconSepa as N } from "./src/components/Icons/IconSepa.esm.js";
35
+ import { IconShopPay as P } from "./src/components/Icons/IconShopPay.esm.js";
36
+ import { IconSquare as F } from "./src/components/Icons/IconSquare.esm.js";
37
+ import { IconStripe as I } from "./src/components/Icons/IconStripe.esm.js";
38
+ import { IconUnionPay as L } from "./src/components/Icons/IconUnionPay.esm.js";
39
+ import { IconVenmo as R } from "./src/components/Icons/IconVenmo.esm.js";
40
+ import { IconVisa as z } from "./src/components/Icons/IconVisa.esm.js";
40
41
  //#region src/components/index.ts
41
- var z = /* @__PURE__ */ e({
42
+ var B = /* @__PURE__ */ e({
42
43
  Accordion: () => t,
43
44
  Button: () => n,
44
45
  Carousel: () => v,
@@ -46,32 +47,33 @@ var z = /* @__PURE__ */ e({
46
47
  DatePicker: () => f,
47
48
  DateRangePicker: () => p,
48
49
  DateTimePicker: () => b,
49
- IconAmazonPay: () => w,
50
- IconAmex: () => T,
51
- IconApplePay: () => E,
52
- IconDiscover: () => D,
53
- IconGooglePay: () => O,
54
- IconMaestro: () => k,
55
- IconMastercard: () => A,
56
- IconPayPal: () => j,
57
- IconSepa: () => M,
58
- IconShopPay: () => N,
59
- IconSquare: () => P,
60
- IconStripe: () => F,
61
- IconUnionPay: () => I,
62
- IconVenmo: () => L,
63
- IconVisa: () => R,
50
+ IconAmazonPay: () => T,
51
+ IconAmex: () => E,
52
+ IconApplePay: () => D,
53
+ IconDiscover: () => O,
54
+ IconGooglePay: () => k,
55
+ IconMaestro: () => A,
56
+ IconMastercard: () => j,
57
+ IconPayPal: () => M,
58
+ IconSepa: () => N,
59
+ IconShopPay: () => P,
60
+ IconSquare: () => F,
61
+ IconStripe: () => I,
62
+ IconUnionPay: () => L,
63
+ IconVenmo: () => R,
64
+ IconVisa: () => z,
64
65
  Input: () => r,
65
66
  InputNumber: () => h,
66
67
  InputPassword: () => i,
67
68
  InputPhone: () => m,
68
69
  Loader: () => a,
69
70
  Modal: () => u,
70
- Notice: () => S,
71
+ Notice: () => C,
71
72
  Pagination: () => _,
73
+ Popover: () => S,
72
74
  RadioButton: () => o,
73
75
  Select: () => d,
74
- SortableList: () => C,
76
+ SortableList: () => w,
75
77
  Text: () => l,
76
78
  Textarea: () => c,
77
79
  TimePicker: () => y,
@@ -79,4 +81,4 @@ var z = /* @__PURE__ */ e({
79
81
  Tooltip: () => x
80
82
  });
81
83
  //#endregion
82
- 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 };
84
+ 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 CHANGED
@@ -96,6 +96,7 @@ Each component has its own package entry point, e.g. `@stamcat/craftsman/Button`
96
96
  | TimePicker | `@stamcat/craftsman/TimePicker` |
97
97
  | Toggle | `@stamcat/craftsman/Toggle` |
98
98
  | Tooltip | `@stamcat/craftsman/Tooltip` |
99
+ | Popover | `@stamcat/craftsman/Popover` |
99
100
 
100
101
  ## Styling notes
101
102
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stamcat/craftsman",
3
- "version": "0.1.5",
3
+ "version": "0.1.8",
4
4
  "type": "module",
5
5
  "description": "A powerful, lightweight framework for design systems",
6
6
  "repository": {
@@ -317,6 +317,10 @@
317
317
  "types": "./src/components/Tooltip/Tooltip.d.ts",
318
318
  "default": "./src/components/Tooltip/Tooltip.esm.js"
319
319
  },
320
+ "./Popover": {
321
+ "types": "./src/components/Popover/Popover.d.ts",
322
+ "default": "./src/components/Popover/Popover.esm.js"
323
+ },
320
324
  "./Notice": {
321
325
  "types": "./src/components/Notice/Notice.d.ts",
322
326
  "default": "./src/components/Notice/Notice.esm.js"
package/skills/craftsman-component-usage/SKILL.md CHANGED
@@ -33,6 +33,7 @@ import { TimePicker } from "@stamcat/craftsman/TimePicker";
33
33
  import { DateTimePicker } from "@stamcat/craftsman/DateTimePicker";
34
34
  import { Toggle } from "@stamcat/craftsman/Toggle";
35
35
  import { Tooltip } from "@stamcat/craftsman/Tooltip";
36
+ import { Popover } from "@stamcat/craftsman/Popover";
36
37
  import { Notice } from "@stamcat/craftsman/Notice";
37
38
  import { SortableList } from "@stamcat/craftsman/SortableList";
38
39
  ```
@@ -72,6 +73,7 @@ Each entry links to the `AGENTS.md` co-located with that component's source for
72
73
  | Text | [../../src/components/Text/AGENTS.md](../../src/components/Text/AGENTS.md) |
73
74
  | DateTimePicker | [../../src/components/DateTimePicker/AGENTS.md](../../src/components/DateTimePicker/AGENTS.md) |
74
75
  | Tooltip | [../../src/components/Tooltip/AGENTS.md](../../src/components/Tooltip/AGENTS.md) |
76
+ | Popover | [../../src/components/Popover/AGENTS.md](../../src/components/Popover/AGENTS.md) |
75
77
  | Toggle | [../../src/components/Toggle/AGENTS.md](../../src/components/Toggle/AGENTS.md) |
76
78
  | Notice | [../../src/components/Notice/AGENTS.md](../../src/components/Notice/AGENTS.md) |
77
79
  | SortableList | [../../src/components/SortableList/AGENTS.md](../../src/components/SortableList/AGENTS.md) |
package/skills/craftsman-style-utilities/SKILL.md CHANGED
@@ -127,6 +127,7 @@ Valid keys: `text` · `gutter` · `column` · `tablet` · `desktop` · `extDeskt
127
127
 
128
128
  - The `column` key automatically accounts for gutters between columns.
129
129
  - Never use hard-coded `px` values for spacing or layout widths. Always use `width()`.
130
+ - 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()`.
130
131
 
131
132
  ### breakpoint()
132
133
 
package/src/components/DatePicker/AGENTS.md CHANGED
@@ -15,6 +15,7 @@ Props:
15
15
  - `required?: boolean`
16
16
  - `value?: Date | null`
17
17
  - `onChange?: (value: DatePickerProps["value"]) => void`
18
+ - `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.
18
19
 
19
20
  Behavior notes:
20
21
 
package/src/components/DatePicker/DatePicker.css CHANGED
@@ -1 +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}}
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);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 CHANGED
@@ -8,21 +8,22 @@ import { FaRegCalendar as r, FaX as i } from "react-icons/fa6";
8
8
  import { jsx as a } from "react/jsx-runtime";
9
9
  import { DatePicker as o } from "react-date-picker";
10
10
  //#region src/components/DatePicker/DatePicker.tsx
11
- var s = ({ label: s, id: c, labelPosition: l = "top", required: u = !1, error: d, style: f, className: p, ...m }) => {
12
- let h = t();
11
+ var s = ({ label: s, id: c, labelPosition: l = "top", required: u = !1, error: d, style: f, className: p, width: m, ...h }) => {
12
+ let g = t();
13
13
  return /* @__PURE__ */ a(e, {
14
- id: c || h,
14
+ id: c || g,
15
15
  className: n("datePicker", p),
16
16
  label: s,
17
17
  labelPosition: l,
18
18
  error: d,
19
19
  required: u,
20
20
  style: f,
21
- value: m.value?.toString(),
21
+ width: m,
22
+ value: h.value?.toString(),
22
23
  children: /* @__PURE__ */ a(o, {
23
24
  calendarIcon: /* @__PURE__ */ a(r, { size: 16 }),
24
25
  clearIcon: /* @__PURE__ */ a(i, { size: 14 }),
25
- ...m
26
+ ...h
26
27
  })
27
28
  });
28
29
  };
package/src/components/DatePicker/_DatePicker.scss CHANGED
@@ -6,6 +6,7 @@
6
6
  %date-picker-styles {
7
7
  display: inline-flex;
8
8
  position: relative;
9
+ width: var(--input-width, auto);
9
10
  }
10
11
  %date-picker-disabled {
11
12
  background-color: #f0f0f0;
@@ -16,6 +17,7 @@
16
17
  flex-grow: 1;
17
18
  flex-shrink: 0;
18
19
  @extend %input-base;
20
+ width: auto;
19
21
  padding: 6px 8px;
20
22
  }
21
23
  %date-picker-input-group {
package/src/components/DateRangePicker/AGENTS.md CHANGED
@@ -15,6 +15,7 @@ Props:
15
15
  - `required?: boolean`
16
16
  - `id?: string`
17
17
  - `style?: React.CSSProperties`
18
+ - `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.
18
19
  - `value?` / `onChange?` — from the underlying library; `value` is typically a `[Date, Date] | null` tuple.
19
20
 
20
21
  Behavior notes:
package/src/components/DateRangePicker/DateRangePicker.css CHANGED
@@ -1 +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}}
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);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 CHANGED
@@ -8,21 +8,22 @@ import { FaRegCalendar as r, FaX as i } from "react-icons/fa6";
8
8
  import { jsx as a } from "react/jsx-runtime";
9
9
  import { DateRangePicker as o } from "@wojtekmaj/react-daterange-picker";
10
10
  //#region src/components/DateRangePicker/DateRangePicker.tsx
11
- var s = ({ label: s, id: c, labelPosition: l = "top", required: u = !1, error: d, style: f, className: p, ...m }) => {
12
- let h = t();
11
+ var s = ({ label: s, id: c, labelPosition: l = "top", required: u = !1, error: d, style: f, className: p, width: m, ...h }) => {
12
+ let g = t();
13
13
  return /* @__PURE__ */ a(e, {
14
- id: c || h,
14
+ id: c || g,
15
15
  className: n("dateRangePicker", p),
16
16
  label: s,
17
17
  labelPosition: l,
18
18
  error: d,
19
19
  required: u,
20
20
  style: f,
21
- value: m.value?.toString(),
21
+ width: m,
22
+ value: h.value?.toString(),
22
23
  children: /* @__PURE__ */ a(o, {
23
24
  calendarIcon: /* @__PURE__ */ a(r, { size: 16 }),
24
25
  clearIcon: /* @__PURE__ */ a(i, { size: 14 }),
25
- ...m
26
+ ...h
26
27
  })
27
28
  });
28
29
  };
package/src/components/DateTimePicker/AGENTS.md CHANGED
@@ -11,6 +11,7 @@ Props:
11
11
  - Extends `react-datetime-picker`'s `DateTimePickerProps` plus `LabeledInput` (`label`, `labelPosition`, `error`, `required`).
12
12
  - `id?: string`
13
13
  - `style?: React.CSSProperties`
14
+ - `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.
14
15
  - `format?: 24 | 12` — hour format used by the custom time wheel display.
15
16
  - `labels?: { hour?: string; minute?: string }` — labels passed through to the time wheel.
16
17
  - `value` / `onChange` — standard `Date` value and change callback.
package/src/components/DateTimePicker/DateTimePicker.css CHANGED
@@ -1 +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}}
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);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 CHANGED
@@ -12,67 +12,68 @@ import { jsx as d, jsxs as f } from "react/jsx-runtime";
12
12
  import { isMobile as p } from "react-device-detect";
13
13
  import { DateTimePicker as m } from "react-datetime-picker";
14
14
  //#region src/components/DateTimePicker/DateTimePicker.tsx
15
- 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 }) => {
16
- let O = a(), k = g || O, A = o(null), [j, M] = s(!1), N = n(S);
15
+ 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 }) => {
16
+ let k = a(), A = g || k, j = o(null), [M, N] = s(!1), P = n(S);
17
17
  i(() => {
18
- if (!j) return;
18
+ if (!M) return;
19
19
  let e = (e) => {
20
20
  let t = e.target;
21
- A.current?.contains(t) || M(!1);
21
+ j.current?.contains(t) || N(!1);
22
22
  };
23
23
  return document.addEventListener("pointerdown", e, !0), () => {
24
24
  document.removeEventListener("pointerdown", e, !0);
25
25
  };
26
- }, [j]);
27
- let P = () => {
26
+ }, [M]);
27
+ let F = () => {
28
28
  if (!p && T instanceof Date) {
29
- M(!0);
29
+ N(!0);
30
30
  return;
31
31
  }
32
- (A.current?.querySelector("input[name=\"day\"]"))?.focus();
33
- }, F = (e) => {
34
- e.target instanceof HTMLInputElement && P();
32
+ (j.current?.querySelector("input[name=\"day\"]"))?.focus();
35
33
  }, I = (e) => {
36
- p && e.key === "Enter" && M(!1);
34
+ e.target instanceof HTMLInputElement && F();
37
35
  }, L = (e) => {
36
+ p && e.key === "Enter" && N(!1);
37
+ }, R = (e) => {
38
38
  let [t, n] = e.split(":"), r = Number(t), i = Number(n);
39
39
  if (Number.isNaN(r) || Number.isNaN(i)) return;
40
40
  let a = T instanceof Date ? new Date(T) : /* @__PURE__ */ new Date();
41
41
  a.setHours(r, i, 0, 0), E?.(a);
42
42
  };
43
43
  return /* @__PURE__ */ d("div", {
44
- ref: A,
44
+ ref: j,
45
45
  className: "dateTimePicker",
46
- onKeyDown: I,
46
+ onKeyDown: L,
47
47
  children: /* @__PURE__ */ f(t, {
48
- id: k,
49
- onFocus: F,
48
+ id: A,
49
+ onFocus: I,
50
50
  className: c(x, "dateTimePicker__wrapper"),
51
51
  label: h,
52
52
  labelPosition: _,
53
53
  error: y,
54
54
  required: v,
55
55
  style: b,
56
+ width: D,
56
57
  value: T instanceof Date ? T.toISOString() : void 0,
57
58
  children: [/* @__PURE__ */ d(m, {
58
59
  isClockOpen: !1,
59
- onClockOpen: P,
60
+ onClockOpen: F,
60
61
  onClockClose: () => {},
61
- onCalendarOpen: () => M(!1),
62
+ onCalendarOpen: () => N(!1),
62
63
  calendarIcon: /* @__PURE__ */ d(l, { size: 16 }),
63
64
  clearIcon: /* @__PURE__ */ d(u, { size: 14 }),
64
65
  value: T,
65
66
  onChange: E,
66
- ...D
67
- }), j && /* @__PURE__ */ d("div", {
67
+ ...O
68
+ }), M && /* @__PURE__ */ d("div", {
68
69
  className: "dateTimePicker__time-display",
69
70
  children: /* @__PURE__ */ d(r, {
70
71
  value: e(T, S),
71
- onChange: L,
72
- locale: N,
72
+ onChange: R,
73
+ locale: P,
73
74
  labels: C,
74
75
  format: w,
75
- visible: j
76
+ visible: M
76
77
  })
77
78
  })]
78
79
  })
package/src/components/Input/AGENTS.md CHANGED
@@ -15,6 +15,10 @@ Props:
15
15
  - `required?: boolean`
16
16
  - `style?: React.CSSProperties` — targets the wrapper element.
17
17
  - `inputStyle?: React.CSSProperties` — targets the `<input>` field directly.
18
+ - `inputClassName?: string` — adds a className to the `<input>` field directly (alongside the base `"input"` class).
19
+ - `labelStyle?: React.CSSProperties` — targets the wrapping `<label>` element.
20
+ - `labelClassName?: string` — adds a className to the wrapping `<label>` element.
21
+ - `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.
18
22
  - `type?: TextInputType` (checkbox/radio excluded)
19
23
 
20
24
  Behavior notes:
@@ -30,3 +34,7 @@ Example:
30
34
  ```tsx
31
35
  <Input type="email" placeholder="you@company.com" required />
32
36
  ```
37
+
38
+ ```tsx
39
+ <Input label="Name" width="50%" labelStyle={{ width: "100%" }} />
40
+ ```
package/src/components/Input/Input.css CHANGED
@@ -1 +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}}
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-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 CHANGED
@@ -6,7 +6,7 @@ import r from "clsx";
6
6
  import { jsx as i, jsxs as a } from "react/jsx-runtime";
7
7
  //#region src/components/Input/Input.tsx
8
8
  var o = (o) => {
9
- 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;
9
+ 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;
10
10
  return /* @__PURE__ */ i(t, {
11
11
  className: g,
12
12
  label: s,
@@ -16,6 +16,9 @@ var o = (o) => {
16
16
  style: h,
17
17
  value: _,
18
18
  defaultValue: v,
19
+ labelStyle: x,
20
+ labelClassName: S,
21
+ width: C,
19
22
  children: /* @__PURE__ */ a("span", {
20
23
  className: "input-field",
21
24
  "data-has-end-adornment": !e(p),
@@ -26,13 +29,13 @@ var o = (o) => {
26
29
  children: m
27
30
  }),
28
31
  /* @__PURE__ */ i("input", {
29
- id: S,
32
+ id: E,
30
33
  type: d,
31
- className: r("input", d),
34
+ className: r("input", d, b),
32
35
  value: _,
33
36
  defaultValue: v,
34
37
  style: y,
35
- ...b
38
+ ...w
36
39
  }),
37
40
  !e(p) && /* @__PURE__ */ i("span", {
38
41
  className: "input-end-adornment",
package/src/components/Input/Input.scss CHANGED
@@ -24,6 +24,12 @@
24
24
  }
25
25
  }
26
26
 
27
+ &[data-label-position="top"] {
28
+ label {
29
+ display: block;
30
+ }
31
+ }
32
+
27
33
  &[data-required="true"] {
28
34
  label {
29
35
  .input-label {
@@ -153,6 +159,15 @@
153
159
  position: relative;
154
160
  display: inline-flex;
155
161
  align-items: center;
162
+ width: var(--input-width, auto);
163
+
164
+ // flex-grow (not a percentage) so sizing resolves against the already-sized .input-field above, avoiding a circular percentage calc
165
+ > .input {
166
+ width: auto;
167
+ min-width: 0;
168
+ flex: 1 1 0%;
169
+ }
170
+
156
171
  &[data-has-end-adornment="true"] {
157
172
  > .input {
158
173
  padding-right: #{u.width("gutter", 1.5)};
package/src/components/Input/InputWrapper.d.ts CHANGED
@@ -5,9 +5,13 @@ export type LabeledInput = {
5
5
  error?: string | boolean | React.ReactNode;
6
6
  required?: boolean;
7
7
  inputStyle?: React.CSSProperties;
8
+ inputClassName?: string;
8
9
  endAdornment?: React.ReactNode;
9
10
  preAdornment?: React.ReactNode;
10
11
  onLabelClick?: React.MouseEventHandler<HTMLLabelElement>;
12
+ labelStyle?: React.CSSProperties;
13
+ labelClassName?: string;
14
+ width?: string;
11
15
  };
12
16
  export type InputWrapperProps = React.ComponentProps<"input" | "textarea" | "select"> & LabeledInput;
13
17
  export declare const InputWrapper: React.FC<InputWrapperProps>;
package/src/components/Input/InputWrapper.esm.js CHANGED
@@ -5,22 +5,27 @@ import { useState as t } from "react";
5
5
  import n from "clsx";
6
6
  import { jsx as r, jsxs as i } from "react/jsx-runtime";
7
7
  //#region src/components/Input/InputWrapper.tsx
8
- var a = ({ label: a, labelPosition: o = "top", required: s = !1, error: c, className: l, style: u, children: d, value: f, defaultValue: p, onLabelClick: m }) => {
9
- let h = f !== void 0, [g, _] = t(!e(p)), v = h ? !e(f) : g, y = (t) => {
10
- if (h) return;
8
+ 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: _ }) => {
9
+ let v = f !== void 0, [y, b] = t(!e(p)), x = v ? !e(f) : y, S = (t) => {
10
+ if (v) return;
11
11
  let n = t.target;
12
- _(!e(n.value));
12
+ b(!e(n.value));
13
13
  };
14
14
  return /* @__PURE__ */ i("div", {
15
15
  "data-label-position": o,
16
16
  "data-required": s,
17
- "data-has-input": v,
17
+ "data-has-input": x,
18
18
  className: n("input-wrapper", l),
19
- style: u,
20
- onInput: y,
21
- onChange: y,
19
+ style: {
20
+ ...u,
21
+ ..._ ? { "--input-width": _ } : void 0
22
+ },
23
+ onInput: S,
24
+ onChange: S,
22
25
  children: [/* @__PURE__ */ i("label", {
23
26
  onClick: m,
27
+ className: g,
28
+ style: h,
24
29
  children: [!e(a) && o !== "hidden" && /* @__PURE__ */ r("div", {
25
30
  className: "input-label",
26
31
  children: a
package/src/components/InputPhone/AGENTS.md CHANGED
@@ -19,6 +19,7 @@ Props:
19
19
  - `endAdornment?: ReactNode`
20
20
  - `style?: React.CSSProperties` — targets the wrapper element.
21
21
  - `inputStyle?: React.CSSProperties` — targets the underlying phone `<input>` field directly.
22
+ - `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.
22
23
 
23
24
  Behavior notes:
24
25
 
package/src/components/InputPhone/InputPhone.css CHANGED
@@ -1 +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)}}
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{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 CHANGED
@@ -6,25 +6,26 @@ import r from "clsx";
6
6
  import { jsx as i } from "react/jsx-runtime";
7
7
  import { PhoneInput as a } from "react-international-phone";
8
8
  //#region src/components/InputPhone/InputPhone.tsx
9
- var o = ({ label: o, id: s, labelPosition: c = "top", required: l = !1, defaultCountry: u = "us", error: d, style: f, className: p, inputStyle: m, ...h }) => {
10
- let g = n(), _ = s || g, v = t.useRef(null);
9
+ 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 }) => {
10
+ let _ = n(), v = s || _, y = t.useRef(null);
11
11
  return /* @__PURE__ */ i(e, {
12
- id: _,
12
+ id: v,
13
13
  className: r("inputPhone", p),
14
14
  label: o,
15
15
  labelPosition: c,
16
16
  error: d,
17
17
  required: l,
18
18
  style: f,
19
+ width: h,
19
20
  onLabelClick: (e) => {
20
- let t = v.current, n = e.target;
21
+ let t = y.current, n = e.target;
21
22
  !t || n === t || n.closest("button") || (e.preventDefault(), t.focus());
22
23
  },
23
24
  children: /* @__PURE__ */ i(a, {
24
25
  defaultCountry: u,
25
26
  inputStyle: m,
26
- ...h,
27
- ref: v
27
+ ...g,
28
+ ref: y
28
29
  })
29
30
  });
30
31
  };
package/src/components/InputPhone/InputPhone.scss CHANGED
@@ -229,6 +229,7 @@
229
229
 
230
230
  .react-international-phone-input-container {
231
231
  display: flex;
232
+ width: var(--input-width, auto);
232
233
 
233
234
  .react-international-phone-country-selector-button {
234
235
  border-radius: var(--react-international-phone-border-radius, 4px);
@@ -239,6 +240,8 @@
239
240
 
240
241
  .react-international-phone-input {
241
242
  overflow: visible;
243
+ flex: 1 1 0%;
244
+ min-width: 0;
242
245
  height: var(--react-international-phone-height, 36px);
243
246
  box-sizing: border-box;
244
247
  padding: 0 8px;
package/src/components/Popover/AGENTS.md ADDED
@@ -0,0 +1,62 @@
1
+ # Popover — Agent Usage Notes
2
+
3
+ Import:
4
+
5
+ ```tsx
6
+ import { Popover } from "@stamcat/craftsman/Popover";
7
+ ```
8
+
9
+ Popover vs Tooltip — pick the right one:
10
+
11
+ - Use **Tooltip** for short hint text that appears on hover and needs no interaction.
12
+ - 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`.
13
+
14
+ Props:
15
+
16
+ - `anchor: React.ReactNode` — the element the popover is attached to.
17
+ - `content: React.ReactNode` — the floating content shown.
18
+ - `placement?: Placement` (from `@floating-ui/react-dom`, default: `"bottom-start"`)
19
+ - `strategy?: Strategy` (from `@floating-ui/react-dom`, default: `"absolute"`)
20
+ - `trigger?: "click" | "hover"` (default: `"click"`)
21
+ - `open?: boolean` — pass to fully control open state (omit for uncontrolled behavior).
22
+ - `onOpenChange?: (open: boolean) => void` — called whenever open state would change, controlled or not.
23
+ - `anchorStyles?: React.CSSProperties`
24
+ - `contentStyles?: React.CSSProperties`
25
+
26
+ Behavior notes:
27
+
28
+ - Built on `@floating-ui/react-dom`'s `useFloating` with `autoUpdate` and `offset(12)`, `flip()`, `shift()` middleware — same positioning engine as Tooltip.
29
+ - Uncontrolled by default: pass no `open` prop and the component manages its own visibility state.
30
+ - Controlled mode: pass `open` and handle `onOpenChange` to drive visibility from parent state.
31
+ - Closes on outside `pointerdown` and on `Escape` key while open.
32
+ - Keyboard-operable: the anchor responds to `Enter`/`Space` in addition to click, and carries `aria-haspopup="dialog"`, `aria-expanded`, `aria-controls`.
33
+ - 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).
34
+ - Focus moves into the floating content when it opens and returns to whatever was focused beforehand when it closes.
35
+ - Current `placement` is exposed via `data-placement` on the floating element for style targeting.
36
+
37
+ Example (uncontrolled):
38
+
39
+ ```tsx
40
+ <Popover
41
+ anchor={<Button variant="default">More info</Button>}
42
+ content={<div>Rich, interactive content goes here.</div>}
43
+ placement="bottom-start"
44
+ />
45
+ ```
46
+
47
+ Example (controlled):
48
+
49
+ ```tsx
50
+ const [open, setOpen] = useState(false);
51
+
52
+ <Popover
53
+ anchor={<Button variant="default">Settings</Button>}
54
+ content={<SettingsForm onSave={() => setOpen(false)} />}
55
+ open={open}
56
+ onOpenChange={setOpen}
57
+ />
58
+ ```
59
+
60
+ Implementation caution:
61
+
62
+ - 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 ADDED
@@ -0,0 +1 @@
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 ADDED
@@ -0,0 +1,14 @@
1
+ import { Placement, Strategy } from '@floating-ui/react-dom';
2
+ import { default as React } from 'react';
3
+ export type PopoverProps = {
4
+ anchor: React.ReactNode;
5
+ content: React.ReactNode;
6
+ placement?: Placement;
7
+ strategy?: Strategy;
8
+ trigger?: "click" | "hover";
9
+ open?: boolean;
10
+ onOpenChange?: (open: boolean) => void;
11
+ anchorStyles?: React.CSSProperties;
12
+ contentStyles?: React.CSSProperties;
13
+ };
14
+ export declare const Popover: React.FC<PopoverProps>;
package/src/components/Popover/Popover.esm.js ADDED
@@ -0,0 +1,80 @@
1
+ "use client";
2
+ import './Popover.css';/* empty css */
3
+ import { useEffect as e, useId as t, useRef as n, useState as r } from "react";
4
+ import i from "clsx";
5
+ import { jsx as a, jsxs as o } from "react/jsx-runtime";
6
+ import { autoUpdate as s, flip as c, offset as l, shift as u, useFloating as d } from "@floating-ui/react-dom";
7
+ //#region src/components/Popover/Popover.tsx
8
+ var f = (f) => {
9
+ let { trigger: p = "click" } = f, m = t(), [h, g] = r(null), [_, v] = r(null), { floatingStyles: y, placement: b } = d({
10
+ placement: f.placement ?? "bottom-start",
11
+ strategy: f.strategy ?? "absolute",
12
+ whileElementsMounted: s,
13
+ middleware: [
14
+ l(12),
15
+ c(),
16
+ u()
17
+ ],
18
+ elements: {
19
+ reference: h,
20
+ floating: _
21
+ }
22
+ }), [x, S] = r(!1), C = f.open !== void 0, w = C ? f.open : x, T = n(null), E = (e) => {
23
+ C || S(e), f.onOpenChange?.(e);
24
+ };
25
+ return e(() => {
26
+ if (!w) return;
27
+ let e = (e) => {
28
+ h?.contains(e.target) || _?.contains(e.target) || E(!1);
29
+ }, t = (e) => {
30
+ e.key === "Escape" && E(!1);
31
+ };
32
+ return document.addEventListener("pointerdown", e), document.addEventListener("keydown", t), () => {
33
+ document.removeEventListener("pointerdown", e), document.removeEventListener("keydown", t);
34
+ };
35
+ }, [
36
+ w,
37
+ h,
38
+ _
39
+ ]), e(() => {
40
+ w ? (T.current = document.activeElement, _?.focus()) : T.current?.focus();
41
+ }, [w, _]), /* @__PURE__ */ o("div", {
42
+ className: i("popover"),
43
+ children: [/* @__PURE__ */ a("div", {
44
+ className: i("popover__anchor"),
45
+ ref: g,
46
+ onMouseEnter: () => {
47
+ p === "hover" && E(!0);
48
+ },
49
+ onMouseLeave: () => {
50
+ p === "hover" && E(!1);
51
+ },
52
+ onClick: () => {
53
+ p === "click" && E(!w);
54
+ },
55
+ onKeyDown: (e) => {
56
+ p === "click" && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), E(!w));
57
+ },
58
+ "aria-haspopup": "dialog",
59
+ "aria-expanded": w,
60
+ "aria-controls": w ? m : void 0,
61
+ style: f.anchorStyles,
62
+ children: f.anchor
63
+ }), w && /* @__PURE__ */ a("div", {
64
+ id: m,
65
+ className: i("popover__floating"),
66
+ role: "dialog",
67
+ "aria-modal": "false",
68
+ tabIndex: -1,
69
+ ref: v,
70
+ "data-placement": b,
71
+ style: {
72
+ ...y,
73
+ ...f.contentStyles
74
+ },
75
+ children: f.content
76
+ })]
77
+ });
78
+ };
79
+ //#endregion
80
+ export { f as Popover };
package/src/components/Popover/Popover.scss ADDED
@@ -0,0 +1,16 @@
1
+ @use "../../styles/utilities/_functions" as u;
2
+
3
+ @layer cf-component {
4
+ .popover {
5
+ --popover-bg: #{u.color("white")};
6
+
7
+ &__floating {
8
+ background-color: var(--popover-bg);
9
+ color: #{u.color("gray800")};
10
+ padding: #{u.width("gutter", 0.75)};
11
+ border-radius: 8px;
12
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
13
+ z-index: 1;
14
+ }
15
+ }
16
+ }
package/src/components/Select/AGENTS.md CHANGED
@@ -15,6 +15,7 @@ Props:
15
15
  - `required?: boolean`
16
16
  - `style?: React.CSSProperties` — targets the wrapper element.
17
17
  - `inputStyle?: React.CSSProperties` — targets the `<select>` field directly.
18
+ - `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.
18
19
  - `options?: Array<{ label: string; value: string }>`
19
20
 
20
21
  Behavior notes:
package/src/components/Select/Select.esm.js CHANGED
@@ -5,8 +5,8 @@ import { useId as n } from "react";
5
5
  import r from "clsx";
6
6
  import { jsx as i, jsxs as a } from "react/jsx-runtime";
7
7
  //#region src/components/Select/Select.tsx
8
- 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 }) => {
9
- let _ = n(), v = s || _;
8
+ 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, ..._ }) => {
9
+ let v = n(), y = s || v;
10
10
  return /* @__PURE__ */ i(t, {
11
11
  label: o,
12
12
  labelPosition: c,
@@ -14,6 +14,7 @@ var o = ({ label: o, id: s, labelPosition: c = "top", required: l = !1, error: u
14
14
  required: l,
15
15
  className: r("select", f),
16
16
  style: p,
17
+ width: g,
17
18
  children: /* @__PURE__ */ a("span", {
18
19
  className: "input-field",
19
20
  "data-has-pre-adornment": !e(h),
@@ -21,14 +22,14 @@ var o = ({ label: o, id: s, labelPosition: c = "top", required: l = !1, error: u
21
22
  className: "input-pre-adornment",
22
23
  children: h
23
24
  }), /* @__PURE__ */ i("select", {
24
- id: v,
25
+ id: y,
25
26
  className: "input",
26
27
  style: m,
27
- ...g,
28
+ ..._,
28
29
  children: d.map((e, t) => /* @__PURE__ */ i("option", {
29
30
  value: e.value,
30
31
  children: e.label
31
- }, `${v}-opt-${t}`))
32
+ }, `${y}-opt-${t}`))
32
33
  })]
33
34
  })
34
35
  });
package/src/components/Textarea/AGENTS.md CHANGED
@@ -15,6 +15,10 @@ Props:
15
15
  - `required?: boolean`
16
16
  - `style?: React.CSSProperties` — targets the wrapper element.
17
17
  - `inputStyle?: React.CSSProperties` — targets the `<textarea>` field directly.
18
+ - `inputClassName?: string` — adds a className to the `<textarea>` field directly (alongside the base `"input"` class).
19
+ - `labelStyle?: React.CSSProperties` — targets the wrapping `<label>` element.
20
+ - `labelClassName?: string` — adds a className to the wrapping `<label>` element.
21
+ - `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.
18
22
  - `rows?: number`
19
23
 
20
24
  Behavior notes:
@@ -32,3 +36,7 @@ Example:
32
36
  required
33
37
  />
34
38
  ```
39
+
40
+ ```tsx
41
+ <Textarea label="Notes" width="100%" />
42
+ ```
package/src/components/Textarea/Textarea.esm.js CHANGED
@@ -1,28 +1,32 @@
1
1
  "use client";
2
2
  import { InputWrapper as e } from "../Input/InputWrapper.esm.js";
3
3
  import { useId as t } from "react";
4
- import { jsx as n } from "react/jsx-runtime";
4
+ import n from "clsx";
5
+ import { jsx as r } from "react/jsx-runtime";
5
6
  //#region src/components/Textarea/Textarea.tsx
6
- var r = ({ labelPosition: r = "top", id: i, label: a, error: o, required: s, className: c, style: l, value: u, defaultValue: d, inputStyle: f, ...p }) => {
7
- let m = t();
8
- return /* @__PURE__ */ n(e, {
9
- label: a,
10
- className: c,
11
- labelPosition: r,
12
- error: o,
13
- required: s,
14
- style: l,
15
- value: u,
16
- defaultValue: d,
17
- children: /* @__PURE__ */ n("textarea", {
18
- id: i || m,
19
- className: "input",
20
- value: u,
21
- defaultValue: d,
22
- style: f,
23
- ...p
7
+ 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 }) => {
8
+ let y = t();
9
+ return /* @__PURE__ */ r(e, {
10
+ label: o,
11
+ className: l,
12
+ labelPosition: i,
13
+ error: s,
14
+ required: c,
15
+ style: u,
16
+ value: d,
17
+ defaultValue: f,
18
+ labelStyle: h,
19
+ labelClassName: g,
20
+ width: _,
21
+ children: /* @__PURE__ */ r("textarea", {
22
+ id: a || y,
23
+ className: n("input", m),
24
+ value: d,
25
+ defaultValue: f,
26
+ style: p,
27
+ ...v
24
28
  })
25
29
  });
26
30
  };
27
31
  //#endregion
28
- export { r as Textarea };
32
+ export { i as Textarea };
package/src/components/TimePicker/AGENTS.md CHANGED
@@ -16,6 +16,7 @@ Props:
16
16
  - `locale?: Intl.LocalesArgument`
17
17
  - `format?: 24 | 12`
18
18
  - `labels?: { hour?: string; minute?: string }`
19
+ - `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.
19
20
 
20
21
  Behavior notes:
21
22
 
package/src/components/TimePicker/TimePicker.css CHANGED
@@ -1 +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}}
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);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 CHANGED
@@ -12,7 +12,7 @@ import { TimePicker as g } from "react-time-picker";
12
12
  import { isMobile as _ } from "react-device-detect";
13
13
  //#region src/components/TimePicker/TimePicker.tsx
14
14
  var v = (v) => {
15
- 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({
15
+ 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({
16
16
  placement: "bottom-start",
17
17
  strategy: "absolute",
18
18
  whileElementsMounted: d,
@@ -22,30 +22,30 @@ var v = (v) => {
22
22
  m()
23
23
  ],
24
24
  elements: {
25
- reference: j,
26
- floating: N
25
+ reference: M,
26
+ floating: P
27
27
  }
28
- }), [I, L] = a(!1), R = n(b);
28
+ }), [L, R] = a(!1), z = n(b);
29
29
  return i(() => {
30
- if (!I) return;
30
+ if (!L) return;
31
31
  let e = (e) => {
32
- j?.contains(e.target) || N?.contains(e.target) || L(!1);
32
+ M?.contains(e.target) || P?.contains(e.target) || R(!1);
33
33
  };
34
34
  return document.addEventListener("pointerdown", e), () => {
35
35
  document.removeEventListener("pointerdown", e);
36
36
  };
37
37
  }, [
38
- I,
39
- j,
40
- N
38
+ L,
39
+ M,
40
+ P
41
41
  ]), /* @__PURE__ */ u("div", {
42
42
  className: "timePicker",
43
- ref: M,
43
+ ref: N,
44
44
  onFocus: (e) => {
45
- _ || e.target instanceof HTMLInputElement && L(!0);
45
+ _ || e.target instanceof HTMLInputElement && R(!0);
46
46
  },
47
47
  onKeyDown: (e) => {
48
- e.key === "Enter" && L(!1);
48
+ e.key === "Enter" && R(!1);
49
49
  },
50
50
  children: [
51
51
  O && /* @__PURE__ */ l("input", {
@@ -59,37 +59,38 @@ var v = (v) => {
59
59
  labelPosition: T,
60
60
  error: E,
61
61
  required: D,
62
+ width: A,
62
63
  children: /* @__PURE__ */ u("div", {
63
64
  className: "timePicker__field",
64
65
  children: [/* @__PURE__ */ l(g, {
65
66
  value: S,
66
67
  onChange: C,
67
- locale: R,
68
+ locale: z,
68
69
  required: D,
69
70
  clearIcon: /* @__PURE__ */ l(c, { size: 14 }),
70
71
  disableClock: !0,
71
- ...A
72
+ ...j
72
73
  }), !_ && !k && /* @__PURE__ */ l(e, {
73
74
  type: "button",
74
75
  variant: "text",
75
- onClick: () => L((e) => !e),
76
- "aria-label": I ? "Hide time picker" : "Show time picker",
77
- "aria-pressed": I,
76
+ onClick: () => R((e) => !e),
77
+ "aria-label": L ? "Hide time picker" : "Show time picker",
78
+ "aria-pressed": L,
78
79
  disabled: v.disabled,
79
80
  className: "input-view-toggle",
80
- children: l(I ? o : s, { size: 16 })
81
+ children: l(L ? o : s, { size: 16 })
81
82
  })]
82
83
  })
83
84
  }),
84
85
  !_ && !k && /* @__PURE__ */ l(r, {
85
86
  value: S,
86
87
  onChange: (e) => C?.(e),
87
- locale: R,
88
+ locale: z,
88
89
  labels: y,
89
90
  format: x,
90
- visible: I,
91
- floatingRef: P,
92
- style: F
91
+ visible: L,
92
+ floatingRef: F,
93
+ style: I
93
94
  })
94
95
  ]
95
96
  });
package/src/components/TimePicker/TimePicker.scss CHANGED
@@ -95,7 +95,12 @@
95
95
 
96
96
  .timePicker__field {
97
97
  position: relative;
98
- width: fit-content;
98
+ width: var(--input-width, fit-content);
99
+
100
+ // .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
101
+ .react-time-picker {
102
+ width: 100%;
103
+ }
99
104
 
100
105
  &:has(.input-view-toggle) {
101
106
  .react-time-picker__wrapper {
package/src/components/Toggle/Toggle.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { InputProps } from '../Input/Input';
2
- export type ToggleProps = Omit<InputProps, "type" | "preAdornment" | "endAdornment"> & {
2
+ export type ToggleProps = Omit<InputProps, "type" | "preAdornment" | "endAdornment" | "width"> & {
3
3
  width?: number;
4
4
  };
5
5
  export declare const Toggle: React.FC<ToggleProps>;
package/src/components/index.d.ts CHANGED
@@ -19,6 +19,7 @@ export { Carousel } from './Carousel/Carousel';
19
19
  export { TimePicker } from './TimePicker/TimePicker';
20
20
  export { DateTimePicker } from './DateTimePicker/DateTimePicker';
21
21
  export { Tooltip } from './Tooltip/Tooltip';
22
+ export { Popover } from './Popover/Popover';
22
23
  export { Notice } from './Notice/Notice';
23
24
  export { SortableList } from './SortableList/SortableList';
24
25
  export * from './Icons';
package/src/styles/global/components/_input.scss CHANGED
@@ -8,6 +8,7 @@
8
8
  border: 1px solid var(--gray400);
9
9
  padding: #{u.width("gutter", 0.5)};
10
10
  background-color: var(--white);
11
+ width: var(--input-width, auto);
11
12
  &:focus {
12
13
  outline: 0;
13
14
  box-shadow: none;
package/src/styles/global/globalStyles.scss CHANGED
@@ -11,6 +11,12 @@
11
11
  @layer cf-base, cf-component, cf-theme;
12
12
 
13
13
  @layer cf-base {
14
+ *,
15
+ *::before,
16
+ *::after {
17
+ box-sizing: border-box;
18
+ }
19
+
14
20
  :root {
15
21
  color-scheme: light dark;
16
22
  font-synthesis: none;
@@ -36,6 +42,7 @@
36
42
  ::-webkit-scrollbar-thumb:hover {
37
43
  background: #555;
38
44
  }
45
+
39
46
  body,
40
47
  ul {
41
48
  margin: 0;