@stamcat/craftsman 0.0.27-alpha.9 → 0.0.27

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 (179) hide show
  1. package/AGENTS.md +19 -403
  2. package/Components.esm.js +62 -11
  3. package/Styles.esm.js +7 -7
  4. package/Utilities.esm.js +2 -2
  5. package/_virtual/_rolldown/runtime.esm.js +18 -6
  6. package/package.json +52 -3
  7. package/src/components/Button/AGENTS.md +65 -0
  8. package/src/components/Button/Button.d.ts +1 -1
  9. package/src/components/Button/Button.esm.js +11 -17
  10. package/src/components/Carousel/AGENTS.md +41 -0
  11. package/src/components/Carousel/Carousel.css +1 -0
  12. package/src/components/Carousel/Carousel.d.ts +11 -0
  13. package/src/components/Carousel/Carousel.scss +34 -0
  14. package/src/components/Carousel/Carousel2.esm.js +75 -0
  15. package/src/components/Checkbox/AGENTS.md +34 -0
  16. package/src/components/Checkbox/Checkbox.d.ts +8 -0
  17. package/src/components/Checkbox/Checkbox.esm.js +18 -0
  18. package/src/components/DatePicker/AGENTS.md +36 -0
  19. package/src/components/DatePicker/DatePicker.css +1 -0
  20. package/src/components/DatePicker/DatePicker.d.ts +8 -0
  21. package/src/components/DatePicker/DatePicker.scss +61 -0
  22. package/src/components/DatePicker/DatePicker2.esm.js +29 -0
  23. package/src/components/DatePicker/ReactCalendar.css +1 -0
  24. package/src/components/DatePicker/ReactCalendar.scss +158 -0
  25. package/src/components/DatePicker/_DatePicker.scss +73 -0
  26. package/src/components/DateRangePicker/AGENTS.md +38 -0
  27. package/src/components/DateRangePicker/DateRangePicker.css +1 -0
  28. package/src/components/DateRangePicker/DateRangePicker.d.ts +8 -0
  29. package/src/components/DateRangePicker/DateRangePicker.scss +62 -0
  30. package/src/components/DateRangePicker/DateRangePicker2.esm.js +29 -0
  31. package/src/components/DateTimePicker/AGENTS.md +41 -0
  32. package/src/components/DateTimePicker/DateTimePicker.css +1 -0
  33. package/src/components/DateTimePicker/DateTimePicker.d.ts +13 -0
  34. package/src/components/DateTimePicker/DateTimePicker.scss +86 -0
  35. package/src/components/DateTimePicker/DateTimePicker2.esm.js +82 -0
  36. package/src/components/Icons/IconAmazonPay.d.ts +2 -0
  37. package/src/components/Icons/IconAmazonPay.esm.js +76 -0
  38. package/src/components/Icons/IconAmex.d.ts +2 -0
  39. package/src/components/Icons/IconAmex.esm.js +87 -0
  40. package/src/components/Icons/IconApplePay.d.ts +2 -0
  41. package/src/components/Icons/IconApplePay.esm.js +26 -0
  42. package/src/components/Icons/IconDiscover.d.ts +2 -0
  43. package/src/components/Icons/IconDiscover.esm.js +129 -0
  44. package/src/components/Icons/IconGooglePay.d.ts +2 -0
  45. package/src/components/Icons/IconGooglePay.esm.js +64 -0
  46. package/src/components/Icons/IconMaestro.d.ts +2 -0
  47. package/src/components/Icons/IconMaestro.esm.js +38 -0
  48. package/src/components/Icons/IconMastercard.d.ts +2 -0
  49. package/src/components/Icons/IconMastercard.esm.js +27 -0
  50. package/src/components/Icons/IconPayPal.d.ts +2 -0
  51. package/src/components/Icons/IconPayPal.esm.js +52 -0
  52. package/src/components/Icons/IconSepa.d.ts +2 -0
  53. package/src/components/Icons/IconSepa.esm.js +272 -0
  54. package/src/components/Icons/IconShopPay.d.ts +2 -0
  55. package/src/components/Icons/IconShopPay.esm.js +35 -0
  56. package/src/components/Icons/IconSquare.d.ts +2 -0
  57. package/src/components/Icons/IconSquare.esm.js +11 -0
  58. package/src/components/Icons/IconStripe.d.ts +2 -0
  59. package/src/components/Icons/IconStripe.esm.js +57 -0
  60. package/src/components/Icons/IconUnionPay.d.ts +2 -0
  61. package/src/components/Icons/IconUnionPay.esm.js +28 -0
  62. package/src/components/Icons/IconVenmo.d.ts +2 -0
  63. package/src/components/Icons/IconVenmo.esm.js +21 -0
  64. package/src/components/Icons/IconVisa.d.ts +2 -0
  65. package/src/components/Icons/IconVisa.esm.js +14 -0
  66. package/src/components/Icons/index.d.ts +15 -0
  67. package/src/components/Icons/index.esm.js +16 -0
  68. package/src/components/Icons/types.d.ts +4 -0
  69. package/src/components/Input/AGENTS.md +30 -0
  70. package/src/components/Input/Input.css +1 -1
  71. package/src/components/Input/Input.scss +108 -95
  72. package/src/components/Input/Input2.esm.js +27 -18
  73. package/src/components/Input/InputWrapper.d.ts +1 -0
  74. package/src/components/InputNumber/AGENTS.md +37 -0
  75. package/src/components/InputNumber/InputNumber.css +1 -0
  76. package/src/components/InputNumber/InputNumber.d.ts +10 -0
  77. package/src/components/InputNumber/InputNumber.scss +29 -0
  78. package/src/components/InputNumber/InputNumber2.esm.js +36 -0
  79. package/src/components/InputPassword/AGENTS.md +29 -0
  80. package/src/components/{Input → InputPassword}/InputPassword.d.ts +1 -1
  81. package/src/components/InputPassword/InputPassword.esm.js +30 -0
  82. package/src/components/InputPhone/AGENTS.md +35 -0
  83. package/src/components/InputPhone/InputPhone.css +1 -0
  84. package/src/components/{Input → InputPhone}/InputPhone.d.ts +1 -1
  85. package/src/components/InputPhone/InputPhone.scss +266 -0
  86. package/src/components/{Input/InputPhone.esm.js → InputPhone/InputPhone2.esm.js} +4 -4
  87. package/src/components/Loader/AGENTS.md +31 -0
  88. package/src/components/Loader/Loader.esm.js +1 -1
  89. package/src/components/Loader/types.d.ts +1 -1
  90. package/src/components/Modal/AGENTS.md +47 -0
  91. package/src/components/Modal/Modal.css +1 -0
  92. package/src/components/Modal/Modal.scss +150 -0
  93. package/src/components/Modal/Modal2.esm.js +53 -0
  94. package/src/components/Notice/AGENTS.md +42 -0
  95. package/src/components/Notice/Notice.css +1 -0
  96. package/src/components/Notice/Notice.d.ts +13 -0
  97. package/src/components/Notice/Notice.scss +76 -0
  98. package/src/components/Notice/Notice2.esm.js +56 -0
  99. package/src/components/Pagination/AGENTS.md +38 -0
  100. package/src/components/Pagination/Pagination.css +1 -0
  101. package/src/components/Pagination/Pagination.d.ts +10 -0
  102. package/src/components/Pagination/Pagination.scss +22 -0
  103. package/src/components/Pagination/Pagination2.esm.js +64 -0
  104. package/src/components/RadioButton/AGENTS.md +44 -0
  105. package/src/components/RadioButton/RadioButton.d.ts +9 -0
  106. package/src/components/RadioButton/RadioButton.esm.js +18 -0
  107. package/src/components/Select/AGENTS.md +36 -0
  108. package/src/components/SortableList/AGENTS.md +45 -0
  109. package/src/components/SortableList/ListItem.d.ts +10 -0
  110. package/src/components/SortableList/ListItem.esm.js +67 -0
  111. package/src/components/SortableList/SortableList.css +1 -0
  112. package/src/components/SortableList/SortableList.d.ts +23 -0
  113. package/src/components/SortableList/SortableList.scss +41 -0
  114. package/src/components/SortableList/SortableList2.esm.js +54 -0
  115. package/src/components/SortableList/utilities.d.ts +7 -0
  116. package/src/components/SortableList/utilities.esm.js +4 -0
  117. package/src/components/Text/AGENTS.md +32 -0
  118. package/src/components/Text/Text.css +1 -1
  119. package/src/components/Text/Text.scss +2 -2
  120. package/src/components/Textarea/AGENTS.md +32 -0
  121. package/src/components/{Input → Textarea}/Textarea.d.ts +1 -1
  122. package/src/components/Textarea/Textarea.esm.js +23 -0
  123. package/src/components/TimePicker/AGENTS.md +42 -0
  124. package/src/components/TimePicker/TimePicker.css +1 -0
  125. package/src/components/TimePicker/TimePicker.d.ts +13 -0
  126. package/src/components/TimePicker/TimePicker.scss +226 -0
  127. package/src/components/TimePicker/TimePicker2.esm.js +98 -0
  128. package/src/components/TimePicker/TimePickerDisplay.d.ts +16 -0
  129. package/src/components/TimePicker/TimePickerDisplay.esm.js +54 -0
  130. package/src/components/TimePicker/TimePickerWheel.d.ts +13 -0
  131. package/src/components/TimePicker/TimePickerWheel.esm.js +61 -0
  132. package/src/components/TimePicker/constants.d.ts +7 -0
  133. package/src/components/TimePicker/constants.esm.js +3 -0
  134. package/src/components/TimePicker/utilities.d.ts +15 -0
  135. package/src/components/TimePicker/utilities.esm.js +20 -0
  136. package/src/components/Toggle/AGENTS.md +33 -0
  137. package/src/components/Toggle/Toggle.css +1 -0
  138. package/src/components/Toggle/Toggle.d.ts +5 -0
  139. package/src/components/Toggle/Toggle.scss +64 -0
  140. package/src/components/Toggle/Toggle2.esm.js +19 -0
  141. package/src/components/Tooltip/AGENTS.md +41 -0
  142. package/src/components/Tooltip/Tooltip.css +1 -0
  143. package/src/components/Tooltip/Tooltip.d.ts +12 -0
  144. package/src/components/Tooltip/Tooltip.scss +29 -0
  145. package/src/components/Tooltip/Tooltip2.esm.js +65 -0
  146. package/src/components/index.d.ts +17 -6
  147. package/src/styles/global/components/_button.scss +24 -21
  148. package/src/styles/global/components/_checkbox.scss +5 -4
  149. package/src/styles/global/components/_input.scss +1 -1
  150. package/src/styles/global/components/_radioButton.scss +5 -4
  151. package/src/styles/global/components/_typography.scss +6 -1
  152. package/src/styles/global/globalStyles.scss +9 -5
  153. package/src/styles/theme/components.esm.js +5 -6
  154. package/src/styles/utilities/_functions.scss +2 -2
  155. package/src/styles/utilities/_placeholders.scss +6 -0
  156. package/src/styles/utilities/layout.esm.js +3 -3
  157. package/src/utilities/types.d.ts +28 -3
  158. package/src/utilities/types.esm.js +11 -5
  159. package/src/utilities/validations.d.ts +5 -0
  160. package/src/utilities/validations.esm.js +19 -1
  161. package/src/components/Input/Checkbox.d.ts +0 -7
  162. package/src/components/Input/Checkbox.esm.js +0 -11
  163. package/src/components/Input/DatePicker.d.ts +0 -8
  164. package/src/components/Input/DatePicker.esm.js +0 -24
  165. package/src/components/Input/InputPassword.esm.js +0 -28
  166. package/src/components/Input/RadioButton.d.ts +0 -7
  167. package/src/components/Input/RadioButton.esm.js +0 -11
  168. package/src/components/Input/Textarea.esm.js +0 -24
  169. package/src/components/Modal/Modal.esm.js +0 -53
  170. package/src/components/Modal/Modal.module.css +0 -1
  171. package/src/components/Modal/Modal.module.esm.js +0 -16
  172. package/src/components/Modal/Modal.module.scss +0 -147
  173. package/src/styles/global/components/_reactCalendar.css +0 -1
  174. package/src/styles/global/components/_reactCalendar.scss +0 -237
  175. package/src/styles/global/components/_reactDatePicker.css +0 -1
  176. package/src/styles/global/components/_reactDatePicker.scss +0 -152
  177. package/src/styles/global/components/_reactPhone.css +0 -1
  178. package/src/styles/global/components/_reactPhone.scss +0 -265
  179. /package/src/components/{Progress.d.ts → Progress/Progress.d.ts} +0 -0
package/AGENTS.md CHANGED
@@ -2,20 +2,37 @@
2
2
 
3
3
  This document explains how code-generation agents should use this library safely and correctly.
4
4
 
5
- ## What This Package Currently Exports
5
+ Full guidance has been split out for progressive loading:
6
6
 
7
- The package is currently built with component-level entry points only.
7
+ - **Global guidelines** (exports, hard rules, code block rendering, style utilities, theme authoring, `isEmpty`, code gen patterns, fallback strategy): see the [craftsman-component-usage skill](.github/skills/craftsman-component-usage/SKILL.md).
8
+ - **Component-specific guidelines** (props, behavior notes, examples): each component has its own `AGENTS.md` co-located with its source, for example [src/components/Button/AGENTS.md](src/components/Button/AGENTS.md).
9
+ - **Device/browser detection** (prefer `react-device-detect` over custom user-agent/viewport checks): see the [craftsman-device-detection skill](.github/skills/craftsman-device-detection/SKILL.md).
10
+
11
+ ## Quick Reference
8
12
 
9
13
  Use these imports:
10
14
 
11
15
  ```tsx
12
16
  import { Button } from "@stamcat/craftsman/Button";
17
+ import { Carousel } from "@stamcat/craftsman/Carousel";
13
18
  import { Checkbox } from "@stamcat/craftsman/Checkbox";
19
+ import { DatePicker } from "@stamcat/craftsman/DatePicker";
20
+ import { DateRangePicker } from "@stamcat/craftsman/DateRangePicker";
14
21
  import { Input } from "@stamcat/craftsman/Input";
22
+ import { InputNumber } from "@stamcat/craftsman/InputNumber";
15
23
  import { InputPassword } from "@stamcat/craftsman/InputPassword";
24
+ import { InputPhone } from "@stamcat/craftsman/InputPhone";
16
25
  import { Loader } from "@stamcat/craftsman/Loader";
17
26
  import { Modal } from "@stamcat/craftsman/Modal";
27
+ import { Pagination } from "@stamcat/craftsman/Pagination";
18
28
  import { RadioButton } from "@stamcat/craftsman/RadioButton";
29
+ import { Select } from "@stamcat/craftsman/Select";
30
+ import { Text } from "@stamcat/craftsman/Text";
31
+ import { Textarea } from "@stamcat/craftsman/Textarea";
32
+ import { TimePicker } from "@stamcat/craftsman/TimePicker";
33
+ import { Toggle } from "@stamcat/craftsman/Toggle";
34
+ import { Notice } from "@stamcat/craftsman/Notice";
35
+ import { SortableList } from "@stamcat/craftsman/SortableList";
19
36
  ```
20
37
 
21
38
  Do not assume a root export like `@stamcat/craftsman` unless that export is explicitly added to package `exports`.
@@ -27,405 +44,4 @@ Do not assume a root export like `@stamcat/craftsman` unless that export is expl
27
44
  3. Do not import storybook files or internal style utilities from consuming applications.
28
45
  4. Prefer standard React props first; use custom props only when required.
29
46
 
30
- ## Component Contracts
31
-
32
- ### Button
33
-
34
- Import:
35
-
36
- ```tsx
37
- import { Button } from "@stamcat/craftsman/Button";
38
- ```
39
-
40
- Props:
41
-
42
- - Inherits all native `<button>` props.
43
- - `variant?: "primary" | "default" | "text"` (default: `"default"`)
44
- - `size?: number` (default visual scale is `1`)
45
- - `styles?: React.CSSProperties` (inline style override)
46
-
47
- Behavior notes:
48
-
49
- - `type` defaults to `"button"`.
50
- - For `variant !== "default"`, variant is appended to `className` (for example `"primary"`).
51
- - `className` is preserved and merged after component classes.
52
- - Theme component overrides are selector-based CSS emitted by `ThemeProvider`; `theme.components.*` accepts JS style objects or raw CSS/Sass strings for the target selector.
53
- - If `children` is empty (per `isEmpty`), the component renders nothing.
54
- - `size` is clamped to `[0.1, 10]` before styling is applied.
55
- - When `size` is provided, Button scales:
56
- - `border-radius: calc(var(--btn-border-radius) * size)`
57
- - `padding: calc(var(--btn-pad-y) * size) calc(var(--btn-pad-x) * size)`
58
- - `font-size: max(10px, calc(var(--w-text) * size))`
59
- - There is no dedicated icon/loading prop. Icons, loaders, and mixed content are passed as `children`.
60
- - Supports both real disable (`disabled={true}`) and style-only disable (`className="disabled"`).
61
- - Native button modes are supported (`type="button" | "submit" | "reset"`).
62
- - Accessibility props such as `aria-label` pass through unchanged.
63
-
64
- Example:
65
-
66
- ```tsx
67
- <Button variant="primary" onClick={onSave}>Save</Button>
68
- ```
69
-
70
- Story-aligned usage examples:
71
-
72
- ```tsx
73
- // Scaled compact button (size is clamped to [0.1, 10])
74
- <Button variant="primary" size={0.5}>Mini Action</Button>
75
-
76
- // Icon content
77
- <Button variant="primary">
78
- <TruckIcon size={20} /> <span>Ship</span>
79
- </Button>
80
-
81
- // Loading content
82
- <Button aria-label="Saving">
83
- <Loader type="boxy" width={32} color="#de13ca" />
84
- </Button>
85
-
86
- // Style-only disabled appearance while still allowing click handlers
87
- <Button className="disabled" onClick={onClick}>Disabled Look</Button>
88
-
89
- // Native submit behavior
90
- <Button type="submit" aria-label="Save form">Save</Button>
91
- ```
92
-
93
- Implementation caution:
94
-
95
- - Size scaling depends on CSS variables provided by the package global styles (`--btn-border-radius`, `--btn-pad-y`, `--btn-pad-x`, `--w-text`).
96
-
97
- ### Input
98
-
99
- Import:
100
-
101
- ```tsx
102
- import { Input } from "@stamcat/craftsman/Input";
103
- ```
104
-
105
- Props:
106
-
107
- - Inherits native `<input>` props.
108
- - `label?: string | ReactNode`
109
- - `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
110
- - `error?: string | boolean | ReactNode`
111
- - `required?: boolean`
112
- - `styles?: React.CSSProperties` (wrapper override)
113
- - `type?: TextInputType` (checkbox/radio excluded)
114
-
115
- Behavior notes:
116
-
117
- - `id` is preserved; if omitted, a stable React `useId` value is used.
118
- - Floating-label behavior is supported when `labelPosition="inside"`.
119
- - `endAdornment` exists as an internal extension point used by `InputPassword`; consumer apps should prefer `InputPassword` rather than wiring password toggles on `Input`.
120
-
121
- Example:
122
-
123
- ```tsx
124
- <Input type="email" placeholder="you@company.com" required />
125
- ```
126
-
127
- ### InputPassword
128
-
129
- Import:
130
-
131
- ```tsx
132
- import { InputPassword } from "@stamcat/craftsman/InputPassword";
133
- ```
134
-
135
- Props:
136
-
137
- - Extends `Input` props, with `type` constrained to password mode.
138
- - Includes all label, error, required, and wrapper style props from `Input`.
139
-
140
- Behavior notes:
141
-
142
- - Built on top of `Input` and adds an internal password visibility state.
143
- - Renders an in-field show/hide toggle button.
144
- - Toggle is accessible: real button element, keyboard operable, and updates `aria-label` + `aria-pressed`.
145
- - Use this component for password fields instead of `Input type="password"`.
146
-
147
- Example:
148
-
149
- ```tsx
150
- <InputPassword
151
- label="Password"
152
- placeholder="Enter your password"
153
- autoComplete="current-password"
154
- />
155
- ```
156
-
157
- ### Checkbox
158
-
159
- Import:
160
-
161
- ```tsx
162
- import { Checkbox } from "@stamcat/craftsman/Checkbox";
163
- ```
164
-
165
- Props:
166
-
167
- - Extends `Input` props.
168
- - `type?: "checkbox"` (default: `"checkbox"`)
169
- - `labelPosition?: "left" | "right" | "top" | "bottom"` (default: `"right"`)
170
-
171
- Behavior notes:
172
-
173
- - `Checkbox` is a thin wrapper around `Input` with checkbox-specific guardrails.
174
- - The wrapper enforces checkbox type by default and narrows label position options to common checkbox layouts.
175
- - Controlled and uncontrolled patterns are both supported (`checked` + `onChange`, or `defaultChecked`).
176
-
177
- Example:
178
-
179
- ```tsx
180
- <Checkbox
181
- id="accept-terms"
182
- name="terms"
183
- value="accepted"
184
- label="Accept terms"
185
- checked={accepted}
186
- onChange={(event) => setAccepted(event.currentTarget.checked)}
187
- />
188
- ```
189
-
190
- ### RadioButton
191
-
192
- Import:
193
-
194
- ```tsx
195
- import { RadioButton } from "@stamcat/craftsman/RadioButton";
196
- ```
197
-
198
- Props:
199
-
200
- - Extends `Input` props.
201
- - `type?: "radio"` (default: `"radio"`)
202
- - `labelPosition?: "left" | "right"` (default: `"right"`)
203
-
204
- Behavior notes:
205
-
206
- - `RadioButton` is a thin wrapper around `Input` with radio-specific guardrails.
207
- - Group behavior is native HTML radio behavior: use a shared `name` across options.
208
- - Controlled and uncontrolled patterns are both supported (`checked` + `onChange`, or `defaultChecked`).
209
-
210
- Example:
211
-
212
- ```tsx
213
- <>
214
- <RadioButton
215
- id="captain-kirk"
216
- name="favorite-captain"
217
- value="Kirk"
218
- label="James T. Kirk"
219
- checked={selected === "Kirk"}
220
- onChange={(event) => setSelected(event.currentTarget.value)}
221
- />
222
- <RadioButton
223
- id="captain-picard"
224
- name="favorite-captain"
225
- value="Picard"
226
- label="Jean-Luc Picard"
227
- checked={selected === "Picard"}
228
- onChange={(event) => setSelected(event.currentTarget.value)}
229
- />
230
- </>
231
- ```
232
-
233
- ### Modal
234
-
235
- Import:
236
-
237
- ```tsx
238
- import { Modal } from "@stamcat/craftsman/Modal";
239
- ```
240
-
241
- Props:
242
-
243
- - Inherits all native `<div>` props.
244
- - `visible?: boolean` (when falsy, component renders nothing)
245
- - `onDismiss?: () => void`
246
- - `type?: "dialog" | "panel"` (default: `"dialog"`)
247
- - `header?: string | React.ReactNode`
248
- - `backgroundDismiss?: boolean` (default behavior: `true`)
249
- - `hideDismissIcon?: boolean` (default behavior: close icon is shown)
250
- - `footer?: React.ReactNode`
251
- - `styles?: React.CSSProperties` (applies to outer modal wrapper)
252
-
253
- Behavior notes:
254
-
255
- - Modal is controlled; parent owns open/close state via `visible` and `onDismiss`.
256
- - Close icon and background click both dismiss through `onDismiss`.
257
- - Background dismiss only runs when `backgroundDismiss` is `true` or `undefined`.
258
- - Dismiss uses a short close animation before calling `onDismiss` (~280ms timeout).
259
- - `type="dialog"` renders centered responsive dialog sizing; `type="panel"` renders a right-side panel.
260
- - `footer` is rendered in an action row container below modal content.
261
-
262
- Example:
263
-
264
- ```tsx
265
- const [open, setOpen] = useState(false);
266
-
267
- <>
268
- <Button variant="primary" onClick={() => setOpen(true)}>Open</Button>
269
- <Modal
270
- visible={open}
271
- onDismiss={() => setOpen(false)}
272
- type="dialog"
273
- header="Confirm Action"
274
- footer={<><Button onClick={() => setOpen(false)}>Cancel</Button><Button variant="primary">Confirm</Button></>}
275
- >
276
- <p>Are you sure?</p>
277
- </Modal>
278
- </>
279
- ```
280
-
281
- ### Loader
282
-
283
- Import:
284
-
285
- ```tsx
286
- import { Loader } from "@stamcat/craftsman/Loader";
287
- ```
288
-
289
- Props:
290
-
291
- - Inherits all native `<div>` props.
292
- - `type` is required and must be one of:
293
- - `"dots"`
294
- - `"dots-trace"`
295
- - `"dots-bounce"`
296
- - `"dots-orbit"`
297
- - `"dashes"`
298
- - `"spinner"`
299
- - `"swirl"`
300
- - `"ball"`
301
- - `"boxy"`
302
- - `"factory"`
303
- - `color?: string` (default: `"black"`)
304
- - `width?: number` (optional, variant-dependent default behavior)
305
- - `styles?: React.CSSProperties` (inline style override)
306
-
307
- Example:
308
-
309
- ```tsx
310
- <Loader type="spinner" color="var(--blue500)" width={40} aria-label="Loading" />
311
- ```
312
-
313
- ## Styling Expectations
314
-
315
- - Components are built with SCSS modules and class-based variant hooks.
316
- - If your app does not include this package's global CSS variable setup, visual output may differ.
317
- - Agents should avoid hard-coding assumptions about token names beyond what the consumer app already defines.
318
-
319
- ## Theme Authoring
320
-
321
- - `theme.root` supports JS style objects and raw CSS/Sass strings.
322
- - `theme.components.*` supports JS style objects and raw CSS/Sass strings.
323
- - `theme.widths` accepts a partial record of width/breakpoint keys to override the default `--w-*` CSS variables. Values are numbers in `px`.
324
- - String component styles are applied to the mapped target selector (for example `button`, `input[type='checkbox']`).
325
- - For multi-file Sass workflows with syntax highlighting and mixins, import compiled CSS text via `*.scss?inline`.
326
-
327
- Valid `theme.widths` keys: `"text" | "gutter" | "column" | "tablet" | "desktop" | "extDesktop" | "mobileMax" | "tabletMax" | "desktopMax"`
328
-
329
- Example:
330
-
331
- ```tsx
332
- import greenRoot from "./green.root.scss?inline";
333
- import greenButton from "./green.button.scss?inline";
334
-
335
- export const theme = {
336
- widths: {
337
- gutter: 20,
338
- tablet: 768,
339
- },
340
- root: greenRoot,
341
- components: {
342
- button: greenButton,
343
- },
344
- };
345
- ```
346
-
347
- ## Utility Functions
348
-
349
- ### `isEmpty`
350
-
351
- The package exports an `isEmpty` utility. **Always use it instead of writing inline empty checks.**
352
-
353
- Import:
354
-
355
- ```ts
356
- import { isEmpty } from "@stamcat/craftsman/utilities/validations";
357
- ```
358
-
359
- It returns `true` for:
360
-
361
- - `undefined`
362
- - `null`
363
- - empty objects — `{}`
364
- - strings that are empty or whitespace-only — `""`, `" "`
365
- - arrays with no elements — `[]`
366
-
367
- Examples:
368
-
369
- ```ts
370
- // DO — use isEmpty
371
- if (isEmpty(value)) { ... }
372
- if (!isEmpty(items)) { ... }
373
-
374
- // DO NOT — write these manually
375
- if (value === undefined || value === null) { ... }
376
- if (typeof value === "string" && value.trim().length === 0) { ... }
377
- if (Object.keys(obj).length === 0) { ... }
378
- if (arr.length === 0) { ... }
379
- ```
380
-
381
- ### Style utilities parity (`color`, `width`, `breakpoint`)
382
-
383
- These utility patterns exist in both TypeScript and Sass.
384
-
385
- TypeScript usage:
386
-
387
- ```ts
388
- import { color, width, breakpoint } from "@stamcat/craftsman/styles";
389
-
390
- const accent = color("blue500");
391
- const alphaAccent = color("blue500", "rgba", 0.32);
392
- const twoColumns = width("column", 2);
393
- const mobileRule = breakpoint("mobileMax", "h4{font-size:14px;}");
394
- ```
395
-
396
- Sass usage (framework source):
397
-
398
- ```scss
399
- @use "./src/styles/utilities" as u;
400
-
401
- .example {
402
- color: #{u.color(blue500)};
403
- background: #{u.color(blue500, rgba, 0.32)};
404
- max-width: #{u.width(column, 2)};
405
- }
406
-
407
- @include u.breakpoint(mobileMax) {
408
- .example { font-size: #{u.width(text)}; }
409
- }
410
- ```
411
-
412
- ## Code Generation Patterns to Prefer
413
-
414
- 1. Generate fully typed React usage examples.
415
- 2. Keep accessibility props in place (`aria-label`, `disabled`, semantic `type`).
416
- 3. Use `variant="primary"` for main actions and `variant="text"` for low-emphasis actions.
417
- 4. For loading states, pair `Loader` with accessible status text where needed.
418
-
419
- ## Known Limitations (Current Package State)
420
-
421
- 1. README is minimal; treat this guide as the source of truth for agent usage.
422
- 2. Theme utilities exist in source but are not guaranteed public package exports.
423
- 3. `Progress` exists in source but is incomplete and intentionally omitted from this guide for now.
424
-
425
- ## Safe Fallback Strategy for Agents
426
-
427
- If uncertain about available exports:
428
47
 
429
- 1. Use only `Button`, `Checkbox`, `Input`, `InputPassword`, `Loader`, `Modal`, and `RadioButton` from their component entry points.
430
- 2. Do not invent package APIs.
431
- 3. Prefer native HTML elements for anything not explicitly exported.
package/Components.esm.js CHANGED
@@ -1,30 +1,81 @@
1
1
  import { __exportAll as e } from "./_virtual/_rolldown/runtime.esm.js";
2
2
  import { Button as t } from "./src/components/Button/Button.esm.js";
3
3
  import { Input as n } from "./src/components/Input/Input2.esm.js";
4
- import { InputPassword as r } from "./src/components/Input/InputPassword.esm.js";
4
+ import { InputPassword as r } from "./src/components/InputPassword/InputPassword.esm.js";
5
5
  import { Loader as i } from "./src/components/Loader/Loader.esm.js";
6
- import { RadioButton as a } from "./src/components/Input/RadioButton.esm.js";
7
- import { Checkbox as o } from "./src/components/Input/Checkbox.esm.js";
8
- import { Textarea as s } from "./src/components/Input/Textarea.esm.js";
6
+ import { RadioButton as a } from "./src/components/RadioButton/RadioButton.esm.js";
7
+ import { Checkbox as o } from "./src/components/Checkbox/Checkbox.esm.js";
8
+ import { Textarea as s } from "./src/components/Textarea/Textarea.esm.js";
9
9
  import { Text as c } from "./src/components/Text/Text2.esm.js";
10
- import { Modal as l } from "./src/components/Modal/Modal.esm.js";
10
+ import { Modal as l } from "./src/components/Modal/Modal2.esm.js";
11
11
  import { Select as u } from "./src/components/Select/Select.esm.js";
12
- import { DatePicker as d } from "./src/components/Input/DatePicker.esm.js";
13
- import { InputPhone as f } from "./src/components/Input/InputPhone.esm.js";
12
+ import { DatePicker as d } from "./src/components/DatePicker/DatePicker2.esm.js";
13
+ import { DateRangePicker as f } from "./src/components/DateRangePicker/DateRangePicker2.esm.js";
14
+ import { InputPhone as p } from "./src/components/InputPhone/InputPhone2.esm.js";
15
+ import { InputNumber as m } from "./src/components/InputNumber/InputNumber2.esm.js";
16
+ import { Toggle as h } from "./src/components/Toggle/Toggle2.esm.js";
17
+ import { Pagination as g } from "./src/components/Pagination/Pagination2.esm.js";
18
+ import { Carousel as _ } from "./src/components/Carousel/Carousel2.esm.js";
19
+ import { TimePicker as v } from "./src/components/TimePicker/TimePicker2.esm.js";
20
+ import { DateTimePicker as y } from "./src/components/DateTimePicker/DateTimePicker2.esm.js";
21
+ import { Tooltip as b } from "./src/components/Tooltip/Tooltip2.esm.js";
22
+ import { Notice as x } from "./src/components/Notice/Notice2.esm.js";
23
+ import { SortableList as S } from "./src/components/SortableList/SortableList2.esm.js";
24
+ import { IconAmazonPay as C } from "./src/components/Icons/IconAmazonPay.esm.js";
25
+ import { IconAmex as w } from "./src/components/Icons/IconAmex.esm.js";
26
+ import { IconApplePay as T } from "./src/components/Icons/IconApplePay.esm.js";
27
+ import { IconDiscover as E } from "./src/components/Icons/IconDiscover.esm.js";
28
+ import { IconGooglePay as D } from "./src/components/Icons/IconGooglePay.esm.js";
29
+ import { IconMaestro as O } from "./src/components/Icons/IconMaestro.esm.js";
30
+ import { IconMastercard as k } from "./src/components/Icons/IconMastercard.esm.js";
31
+ import { IconPayPal as A } from "./src/components/Icons/IconPayPal.esm.js";
32
+ import { IconSepa as j } from "./src/components/Icons/IconSepa.esm.js";
33
+ import { IconShopPay as M } from "./src/components/Icons/IconShopPay.esm.js";
34
+ import { IconSquare as N } from "./src/components/Icons/IconSquare.esm.js";
35
+ import { IconStripe as P } from "./src/components/Icons/IconStripe.esm.js";
36
+ import { IconUnionPay as F } from "./src/components/Icons/IconUnionPay.esm.js";
37
+ import { IconVenmo as I } from "./src/components/Icons/IconVenmo.esm.js";
38
+ import { IconVisa as L } from "./src/components/Icons/IconVisa.esm.js";
39
+ import "./src/components/Icons/index.esm.js";
14
40
  //#region src/components/index.ts
15
- var p = /* @__PURE__ */ e({
41
+ var R = /* @__PURE__ */ e({
16
42
  Button: () => t,
43
+ Carousel: () => _,
17
44
  Checkbox: () => o,
18
45
  DatePicker: () => d,
46
+ DateRangePicker: () => f,
47
+ DateTimePicker: () => y,
48
+ IconAmazonPay: () => C,
49
+ IconAmex: () => w,
50
+ IconApplePay: () => T,
51
+ IconDiscover: () => E,
52
+ IconGooglePay: () => D,
53
+ IconMaestro: () => O,
54
+ IconMastercard: () => k,
55
+ IconPayPal: () => A,
56
+ IconSepa: () => j,
57
+ IconShopPay: () => M,
58
+ IconSquare: () => N,
59
+ IconStripe: () => P,
60
+ IconUnionPay: () => F,
61
+ IconVenmo: () => I,
62
+ IconVisa: () => L,
19
63
  Input: () => n,
64
+ InputNumber: () => m,
20
65
  InputPassword: () => r,
21
- InputPhone: () => f,
66
+ InputPhone: () => p,
22
67
  Loader: () => i,
23
68
  Modal: () => l,
69
+ Notice: () => x,
70
+ Pagination: () => g,
24
71
  RadioButton: () => a,
25
72
  Select: () => u,
73
+ SortableList: () => S,
26
74
  Text: () => c,
27
- Textarea: () => s
75
+ Textarea: () => s,
76
+ TimePicker: () => v,
77
+ Toggle: () => h,
78
+ Tooltip: () => b
28
79
  });
29
80
  //#endregion
30
- export { t as Button, o as Checkbox, d as DatePicker, n as Input, r as InputPassword, f as InputPhone, i as Loader, l as Modal, a as RadioButton, u as Select, c as Text, s as Textarea, p as components_exports };
81
+ export { t as Button, _ as Carousel, o as Checkbox, d as DatePicker, f as DateRangePicker, y as DateTimePicker, C as IconAmazonPay, w as IconAmex, T as IconApplePay, E as IconDiscover, D as IconGooglePay, O as IconMaestro, k as IconMastercard, A as IconPayPal, j as IconSepa, M as IconShopPay, N as IconSquare, P as IconStripe, F as IconUnionPay, I as IconVenmo, L as IconVisa, n as Input, m as InputNumber, r as InputPassword, p as InputPhone, i as Loader, l as Modal, x as Notice, g as Pagination, a as RadioButton, u as Select, S as SortableList, c as Text, s as Textarea, v as TimePicker, h as Toggle, b as Tooltip, R as components_exports };
package/Styles.esm.js CHANGED
@@ -1,7 +1,7 @@
1
- import { defaultColors as e, defaultWidths as t } from "./src/styles/utilities/constants.esm.js";
2
- import { color as n, colors as r, hexToRgba as i } from "./src/styles/utilities/color.esm.js";
3
- import { BaseWidthSchema as a, BreakpointSchema as o, ButtonType as s, LayoutWidthsSchema as c, MaxScreenWidthSchema as l, ScreenWidthSchema as u, TextSize as d, TextTags as f, TextType as p, zLabelPosition as m, zTextInputExclusions as h, zTextInputType as g, zTextInputTypes as _ } from "./src/utilities/types.esm.js";
4
- import { breakpoint as v, media as y, width as b, widths as x } from "./src/styles/utilities/layout.esm.js";
5
- import { themeBuilder as S } from "./src/styles/theme/theme.esm.js";
6
- import { ThemeProvider as C } from "./src/styles/components/ThemeProvider.esm.js";
7
- export { a as BaseWidthSchema, o as BreakpointSchema, s as ButtonType, c as LayoutWidthsSchema, l as MaxScreenWidthSchema, u as ScreenWidthSchema, d as TextSize, f as TextTags, p as TextType, C as ThemeProvider, v as breakpoint, n as color, r as colors, e as defaultColors, t as defaultWidths, i as hexToRgba, y as media, S as themeBuilder, b as width, x as widths, m as zLabelPosition, h as zTextInputExclusions, g as zTextInputType, _ as zTextInputTypes };
1
+ import { BaseWidthSchema as e, BreakpointSchema as t, ButtonType as n, CarouselPageType as r, LayoutWidthsSchema as i, MaxScreenWidthSchema as a, NoticeType as o, ScreenWidthSchema as s, TextSize as c, TextTags as l, TextType as u, zCheckboxLabelPosition as d, zLabelPosition as f, zRadioLabelPosition as p, zTextInputExclusions as m, zTextInputType as h, zTextInputTypes as g } from "./src/utilities/types.esm.js";
2
+ import { defaultColors as _, defaultWidths as v } from "./src/styles/utilities/constants.esm.js";
3
+ import { color as y, colors as b, hexToRgba as x } from "./src/styles/utilities/color.esm.js";
4
+ import { breakpoint as S, media as C, width as w, widths as T } from "./src/styles/utilities/layout.esm.js";
5
+ import { themeBuilder as E } from "./src/styles/theme/theme.esm.js";
6
+ import { ThemeProvider as D } from "./src/styles/components/ThemeProvider.esm.js";
7
+ export { e as BaseWidthSchema, t as BreakpointSchema, n as ButtonType, r as CarouselPageType, i as LayoutWidthsSchema, a as MaxScreenWidthSchema, o as NoticeType, s as ScreenWidthSchema, c as TextSize, l as TextTags, u as TextType, D as ThemeProvider, S as breakpoint, y as color, b as colors, _ as defaultColors, v as defaultWidths, x as hexToRgba, C as media, E as themeBuilder, w as width, T as widths, d as zCheckboxLabelPosition, f as zLabelPosition, p as zRadioLabelPosition, m as zTextInputExclusions, h as zTextInputType, g as zTextInputTypes };
package/Utilities.esm.js CHANGED
@@ -1,2 +1,2 @@
1
- import { isEmpty as e, validateEmail as t } from "./src/utilities/validations.esm.js";
2
- export { e as isEmpty, t as validateEmail };
1
+ import { formatTime as e, getAmPmLabels as t, getUnitLabel as n, is24HourFormat as r, isEmpty as i, validateEmail as a } from "./src/utilities/validations.esm.js";
2
+ export { e as formatTime, t as getAmPmLabels, n as getUnitLabel, r as is24HourFormat, i as isEmpty, a as validateEmail };
@@ -1,11 +1,23 @@
1
1
  //#region \0rolldown/runtime.js
2
- var e = Object.defineProperty, t = (t, n) => {
2
+ var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescriptor, r = Object.getOwnPropertyNames, i = Object.getPrototypeOf, a = Object.prototype.hasOwnProperty, o = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), s = (e, n) => {
3
3
  let r = {};
4
- for (var i in t) e(r, i, {
5
- get: t[i],
4
+ for (var i in e) t(r, i, {
5
+ get: e[i],
6
6
  enumerable: !0
7
7
  });
8
- return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
9
- };
8
+ return n || t(r, Symbol.toStringTag, { value: "Module" }), r;
9
+ }, c = (e, i, o, s) => {
10
+ if (i && typeof i == "object" || typeof i == "function") for (var c = r(i), l = 0, u = c.length, d; l < u; l++) d = c[l], !a.call(e, d) && d !== o && t(e, d, {
11
+ get: ((e) => i[e]).bind(null, d),
12
+ enumerable: !(s = n(i, d)) || s.enumerable
13
+ });
14
+ return e;
15
+ }, l = (n, r, a) => (a = n == null ? {} : e(i(n)), c(r || !n || !n.__esModule ? t(a, "default", {
16
+ value: n,
17
+ enumerable: !0
18
+ }) : a, n)), u = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
19
+ if (typeof require < "u") return require.apply(this, arguments);
20
+ throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
21
+ });
10
22
  //#endregion
11
- export { t as __exportAll };
23
+ export { o as __commonJSMin, s as __exportAll, u as __require, l as __toESM };