@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.
- package/AGENTS.md +19 -403
- package/Components.esm.js +62 -11
- package/Styles.esm.js +7 -7
- package/Utilities.esm.js +2 -2
- package/_virtual/_rolldown/runtime.esm.js +18 -6
- package/package.json +52 -3
- package/src/components/Button/AGENTS.md +65 -0
- package/src/components/Button/Button.d.ts +1 -1
- package/src/components/Button/Button.esm.js +11 -17
- package/src/components/Carousel/AGENTS.md +41 -0
- package/src/components/Carousel/Carousel.css +1 -0
- package/src/components/Carousel/Carousel.d.ts +11 -0
- package/src/components/Carousel/Carousel.scss +34 -0
- package/src/components/Carousel/Carousel2.esm.js +75 -0
- package/src/components/Checkbox/AGENTS.md +34 -0
- package/src/components/Checkbox/Checkbox.d.ts +8 -0
- package/src/components/Checkbox/Checkbox.esm.js +18 -0
- package/src/components/DatePicker/AGENTS.md +36 -0
- package/src/components/DatePicker/DatePicker.css +1 -0
- package/src/components/DatePicker/DatePicker.d.ts +8 -0
- package/src/components/DatePicker/DatePicker.scss +61 -0
- package/src/components/DatePicker/DatePicker2.esm.js +29 -0
- package/src/components/DatePicker/ReactCalendar.css +1 -0
- package/src/components/DatePicker/ReactCalendar.scss +158 -0
- package/src/components/DatePicker/_DatePicker.scss +73 -0
- package/src/components/DateRangePicker/AGENTS.md +38 -0
- package/src/components/DateRangePicker/DateRangePicker.css +1 -0
- package/src/components/DateRangePicker/DateRangePicker.d.ts +8 -0
- package/src/components/DateRangePicker/DateRangePicker.scss +62 -0
- package/src/components/DateRangePicker/DateRangePicker2.esm.js +29 -0
- package/src/components/DateTimePicker/AGENTS.md +41 -0
- package/src/components/DateTimePicker/DateTimePicker.css +1 -0
- package/src/components/DateTimePicker/DateTimePicker.d.ts +13 -0
- package/src/components/DateTimePicker/DateTimePicker.scss +86 -0
- package/src/components/DateTimePicker/DateTimePicker2.esm.js +82 -0
- package/src/components/Icons/IconAmazonPay.d.ts +2 -0
- package/src/components/Icons/IconAmazonPay.esm.js +76 -0
- package/src/components/Icons/IconAmex.d.ts +2 -0
- package/src/components/Icons/IconAmex.esm.js +87 -0
- package/src/components/Icons/IconApplePay.d.ts +2 -0
- package/src/components/Icons/IconApplePay.esm.js +26 -0
- package/src/components/Icons/IconDiscover.d.ts +2 -0
- package/src/components/Icons/IconDiscover.esm.js +129 -0
- package/src/components/Icons/IconGooglePay.d.ts +2 -0
- package/src/components/Icons/IconGooglePay.esm.js +64 -0
- package/src/components/Icons/IconMaestro.d.ts +2 -0
- package/src/components/Icons/IconMaestro.esm.js +38 -0
- package/src/components/Icons/IconMastercard.d.ts +2 -0
- package/src/components/Icons/IconMastercard.esm.js +27 -0
- package/src/components/Icons/IconPayPal.d.ts +2 -0
- package/src/components/Icons/IconPayPal.esm.js +52 -0
- package/src/components/Icons/IconSepa.d.ts +2 -0
- package/src/components/Icons/IconSepa.esm.js +272 -0
- package/src/components/Icons/IconShopPay.d.ts +2 -0
- package/src/components/Icons/IconShopPay.esm.js +35 -0
- package/src/components/Icons/IconSquare.d.ts +2 -0
- package/src/components/Icons/IconSquare.esm.js +11 -0
- package/src/components/Icons/IconStripe.d.ts +2 -0
- package/src/components/Icons/IconStripe.esm.js +57 -0
- package/src/components/Icons/IconUnionPay.d.ts +2 -0
- package/src/components/Icons/IconUnionPay.esm.js +28 -0
- package/src/components/Icons/IconVenmo.d.ts +2 -0
- package/src/components/Icons/IconVenmo.esm.js +21 -0
- package/src/components/Icons/IconVisa.d.ts +2 -0
- package/src/components/Icons/IconVisa.esm.js +14 -0
- package/src/components/Icons/index.d.ts +15 -0
- package/src/components/Icons/index.esm.js +16 -0
- package/src/components/Icons/types.d.ts +4 -0
- package/src/components/Input/AGENTS.md +30 -0
- package/src/components/Input/Input.css +1 -1
- package/src/components/Input/Input.scss +108 -95
- package/src/components/Input/Input2.esm.js +27 -18
- package/src/components/Input/InputWrapper.d.ts +1 -0
- package/src/components/InputNumber/AGENTS.md +37 -0
- package/src/components/InputNumber/InputNumber.css +1 -0
- package/src/components/InputNumber/InputNumber.d.ts +10 -0
- package/src/components/InputNumber/InputNumber.scss +29 -0
- package/src/components/InputNumber/InputNumber2.esm.js +36 -0
- package/src/components/InputPassword/AGENTS.md +29 -0
- package/src/components/{Input → InputPassword}/InputPassword.d.ts +1 -1
- package/src/components/InputPassword/InputPassword.esm.js +30 -0
- package/src/components/InputPhone/AGENTS.md +35 -0
- package/src/components/InputPhone/InputPhone.css +1 -0
- package/src/components/{Input → InputPhone}/InputPhone.d.ts +1 -1
- package/src/components/InputPhone/InputPhone.scss +266 -0
- package/src/components/{Input/InputPhone.esm.js → InputPhone/InputPhone2.esm.js} +4 -4
- package/src/components/Loader/AGENTS.md +31 -0
- package/src/components/Loader/Loader.esm.js +1 -1
- package/src/components/Loader/types.d.ts +1 -1
- package/src/components/Modal/AGENTS.md +47 -0
- package/src/components/Modal/Modal.css +1 -0
- package/src/components/Modal/Modal.scss +150 -0
- package/src/components/Modal/Modal2.esm.js +53 -0
- package/src/components/Notice/AGENTS.md +42 -0
- package/src/components/Notice/Notice.css +1 -0
- package/src/components/Notice/Notice.d.ts +13 -0
- package/src/components/Notice/Notice.scss +76 -0
- package/src/components/Notice/Notice2.esm.js +56 -0
- package/src/components/Pagination/AGENTS.md +38 -0
- package/src/components/Pagination/Pagination.css +1 -0
- package/src/components/Pagination/Pagination.d.ts +10 -0
- package/src/components/Pagination/Pagination.scss +22 -0
- package/src/components/Pagination/Pagination2.esm.js +64 -0
- package/src/components/RadioButton/AGENTS.md +44 -0
- package/src/components/RadioButton/RadioButton.d.ts +9 -0
- package/src/components/RadioButton/RadioButton.esm.js +18 -0
- package/src/components/Select/AGENTS.md +36 -0
- package/src/components/SortableList/AGENTS.md +45 -0
- package/src/components/SortableList/ListItem.d.ts +10 -0
- package/src/components/SortableList/ListItem.esm.js +67 -0
- package/src/components/SortableList/SortableList.css +1 -0
- package/src/components/SortableList/SortableList.d.ts +23 -0
- package/src/components/SortableList/SortableList.scss +41 -0
- package/src/components/SortableList/SortableList2.esm.js +54 -0
- package/src/components/SortableList/utilities.d.ts +7 -0
- package/src/components/SortableList/utilities.esm.js +4 -0
- package/src/components/Text/AGENTS.md +32 -0
- package/src/components/Text/Text.css +1 -1
- package/src/components/Text/Text.scss +2 -2
- package/src/components/Textarea/AGENTS.md +32 -0
- package/src/components/{Input → Textarea}/Textarea.d.ts +1 -1
- package/src/components/Textarea/Textarea.esm.js +23 -0
- package/src/components/TimePicker/AGENTS.md +42 -0
- package/src/components/TimePicker/TimePicker.css +1 -0
- package/src/components/TimePicker/TimePicker.d.ts +13 -0
- package/src/components/TimePicker/TimePicker.scss +226 -0
- package/src/components/TimePicker/TimePicker2.esm.js +98 -0
- package/src/components/TimePicker/TimePickerDisplay.d.ts +16 -0
- package/src/components/TimePicker/TimePickerDisplay.esm.js +54 -0
- package/src/components/TimePicker/TimePickerWheel.d.ts +13 -0
- package/src/components/TimePicker/TimePickerWheel.esm.js +61 -0
- package/src/components/TimePicker/constants.d.ts +7 -0
- package/src/components/TimePicker/constants.esm.js +3 -0
- package/src/components/TimePicker/utilities.d.ts +15 -0
- package/src/components/TimePicker/utilities.esm.js +20 -0
- package/src/components/Toggle/AGENTS.md +33 -0
- package/src/components/Toggle/Toggle.css +1 -0
- package/src/components/Toggle/Toggle.d.ts +5 -0
- package/src/components/Toggle/Toggle.scss +64 -0
- package/src/components/Toggle/Toggle2.esm.js +19 -0
- package/src/components/Tooltip/AGENTS.md +41 -0
- package/src/components/Tooltip/Tooltip.css +1 -0
- package/src/components/Tooltip/Tooltip.d.ts +12 -0
- package/src/components/Tooltip/Tooltip.scss +29 -0
- package/src/components/Tooltip/Tooltip2.esm.js +65 -0
- package/src/components/index.d.ts +17 -6
- package/src/styles/global/components/_button.scss +24 -21
- package/src/styles/global/components/_checkbox.scss +5 -4
- package/src/styles/global/components/_input.scss +1 -1
- package/src/styles/global/components/_radioButton.scss +5 -4
- package/src/styles/global/components/_typography.scss +6 -1
- package/src/styles/global/globalStyles.scss +9 -5
- package/src/styles/theme/components.esm.js +5 -6
- package/src/styles/utilities/_functions.scss +2 -2
- package/src/styles/utilities/_placeholders.scss +6 -0
- package/src/styles/utilities/layout.esm.js +3 -3
- package/src/utilities/types.d.ts +28 -3
- package/src/utilities/types.esm.js +11 -5
- package/src/utilities/validations.d.ts +5 -0
- package/src/utilities/validations.esm.js +19 -1
- package/src/components/Input/Checkbox.d.ts +0 -7
- package/src/components/Input/Checkbox.esm.js +0 -11
- package/src/components/Input/DatePicker.d.ts +0 -8
- package/src/components/Input/DatePicker.esm.js +0 -24
- package/src/components/Input/InputPassword.esm.js +0 -28
- package/src/components/Input/RadioButton.d.ts +0 -7
- package/src/components/Input/RadioButton.esm.js +0 -11
- package/src/components/Input/Textarea.esm.js +0 -24
- package/src/components/Modal/Modal.esm.js +0 -53
- package/src/components/Modal/Modal.module.css +0 -1
- package/src/components/Modal/Modal.module.esm.js +0 -16
- package/src/components/Modal/Modal.module.scss +0 -147
- package/src/styles/global/components/_reactCalendar.css +0 -1
- package/src/styles/global/components/_reactCalendar.scss +0 -237
- package/src/styles/global/components/_reactDatePicker.css +0 -1
- package/src/styles/global/components/_reactDatePicker.scss +0 -152
- package/src/styles/global/components/_reactPhone.css +0 -1
- package/src/styles/global/components/_reactPhone.scss +0 -265
- /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
|
-
|
|
5
|
+
Full guidance has been split out for progressive loading:
|
|
6
6
|
|
|
7
|
-
|
|
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/
|
|
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/
|
|
7
|
-
import { Checkbox as o } from "./src/components/
|
|
8
|
-
import { Textarea as s } from "./src/components/
|
|
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/
|
|
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/
|
|
13
|
-
import {
|
|
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
|
|
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: () =>
|
|
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,
|
|
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 {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import { breakpoint as
|
|
5
|
-
import { themeBuilder as
|
|
6
|
-
import { ThemeProvider as
|
|
7
|
-
export {
|
|
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 {
|
|
2
|
-
export { e as
|
|
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.
|
|
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
|
|
5
|
-
get:
|
|
4
|
+
for (var i in e) t(r, i, {
|
|
5
|
+
get: e[i],
|
|
6
6
|
enumerable: !0
|
|
7
7
|
});
|
|
8
|
-
return n ||
|
|
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 {
|
|
23
|
+
export { o as __commonJSMin, s as __exportAll, u as __require, l as __toESM };
|