cetec-design-system 2.0.2-next.0 → 2.1.0-next.0
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/README.md +2 -0
- package/dist/{cetec-preset-DRK1vtb1.js → cetec-preset-DfIlhu92.js} +18 -4
- package/dist/cetec-preset-DfIlhu92.js.map +1 -0
- package/dist/index.js +167 -38
- package/dist/index.js.map +1 -1
- package/dist/panda.buildinfo.json +0 -4
- package/dist/preset.js +1 -1
- package/dist/styles.css +14 -10
- package/dist/types/index.d.ts +65 -37
- package/package.json +1 -1
- package/src/recipes/checkbox.ts +13 -2
- package/src/recipes/radio.ts +3 -0
- package/src/utils/useControllableState.ts +35 -0
- package/dist/cetec-preset-DRK1vtb1.js.map +0 -1
package/README.md
CHANGED
|
@@ -104,6 +104,8 @@ This design system is built on **Panda CSS** with a strict tokens-first approach
|
|
|
104
104
|
- Type props with TypeScript strict mode
|
|
105
105
|
- Style with Panda recipes (no inline styles or hard-coded values)
|
|
106
106
|
- Follow accessibility guidelines (semantic HTML, keyboard support, ARIA when needed)
|
|
107
|
+
- Native form controls support both controlled and uncontrolled usage where it fits the element semantics. Use `checked` / `value` when React owns the state, and `defaultChecked` / `defaultValue` / `defaultOpen` when the browser or widget should own the initial state.
|
|
108
|
+
- Binary and group-based controls (`Checkbox`, `Radio`, `Toggle`, `Select`, `DatePicker`, `TimePicker`, `ChipGroup`) now expose explicit uncontrolled entrypoints so static pages can avoid hydration when they do not need React state.
|
|
107
109
|
|
|
108
110
|
Also see [Component Standards](./src/storybook/docs/componentStandards.mdx)
|
|
109
111
|
|
|
@@ -6346,6 +6346,12 @@ const checkboxRecipe = defineSlotRecipe({
|
|
|
6346
6346
|
display: "inline-grid",
|
|
6347
6347
|
zIndex: "3"
|
|
6348
6348
|
},
|
|
6349
|
+
"& ~ [name='checkbox-checked']": {
|
|
6350
|
+
display: "none"
|
|
6351
|
+
},
|
|
6352
|
+
"& ~ [name='checkbox-indeterminate']": {
|
|
6353
|
+
display: "none"
|
|
6354
|
+
},
|
|
6349
6355
|
_checked: {
|
|
6350
6356
|
"& ~ [name='checkbox-checked']": {
|
|
6351
6357
|
display: "inline-grid",
|
|
@@ -6354,17 +6360,22 @@ const checkboxRecipe = defineSlotRecipe({
|
|
|
6354
6360
|
},
|
|
6355
6361
|
"& ~ [name='checkbox']": {
|
|
6356
6362
|
display: "none"
|
|
6363
|
+
},
|
|
6364
|
+
"& ~ [name='checkbox-indeterminate']": {
|
|
6365
|
+
display: "none"
|
|
6357
6366
|
}
|
|
6358
6367
|
},
|
|
6359
|
-
|
|
6368
|
+
"&[data-indeterminate]": {
|
|
6360
6369
|
"& ~ [name='checkbox-indeterminate']": {
|
|
6361
6370
|
display: "inline-grid",
|
|
6362
6371
|
fill: "icon",
|
|
6363
|
-
zIndex: "3"
|
|
6364
|
-
_disabled: {}
|
|
6372
|
+
zIndex: "3"
|
|
6365
6373
|
},
|
|
6366
6374
|
"& ~ [name='checkbox']": {
|
|
6367
6375
|
display: "none"
|
|
6376
|
+
},
|
|
6377
|
+
"& ~ [name='checkbox-checked']": {
|
|
6378
|
+
display: "none"
|
|
6368
6379
|
}
|
|
6369
6380
|
},
|
|
6370
6381
|
_error: {
|
|
@@ -6434,6 +6445,9 @@ const radioRecipe = defineSlotRecipe({
|
|
|
6434
6445
|
display: "inline-grid",
|
|
6435
6446
|
zIndex: "zIndex.3"
|
|
6436
6447
|
},
|
|
6448
|
+
"& ~ [name='radio-checked']": {
|
|
6449
|
+
display: "none"
|
|
6450
|
+
},
|
|
6437
6451
|
_checked: {
|
|
6438
6452
|
"& ~ [name='radio-checked']": {
|
|
6439
6453
|
display: "inline-grid",
|
|
@@ -9975,4 +9989,4 @@ export {
|
|
|
9975
9989
|
breakpoints as b,
|
|
9976
9990
|
containerSizes as c
|
|
9977
9991
|
};
|
|
9978
|
-
//# sourceMappingURL=cetec-preset-
|
|
9992
|
+
//# sourceMappingURL=cetec-preset-DfIlhu92.js.map
|