@wordpress/ui 0.4.0 → 0.5.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/CHANGELOG.md +20 -0
- package/LICENSE.md +1 -1
- package/README.md +18 -0
- package/build/badge/badge.cjs +95 -0
- package/build/badge/badge.cjs.map +7 -0
- package/build/{lock-unlock.js → badge/index.cjs} +8 -14
- package/build/badge/index.cjs.map +7 -0
- package/build/badge/types.cjs +19 -0
- package/build/badge/types.cjs.map +7 -0
- package/build/box/{box.js → box.cjs} +7 -6
- package/build/box/box.cjs.map +7 -0
- package/build/box/{index.js → index.cjs} +2 -2
- package/build/box/{types.js → types.cjs} +1 -1
- package/build/box/types.cjs.map +7 -0
- package/build/button/button.cjs +401 -0
- package/build/button/button.cjs.map +7 -0
- package/build/{utils/element.js → button/icon.cjs} +22 -20
- package/build/button/icon.cjs.map +7 -0
- package/build/button/index.cjs +39 -0
- package/build/button/index.cjs.map +7 -0
- package/build/button/types.cjs +19 -0
- package/build/button/types.cjs.map +7 -0
- package/build/form/primitives/field/control.cjs +38 -0
- package/build/form/primitives/field/control.cjs.map +7 -0
- package/build/form/primitives/field/description.cjs +92 -0
- package/build/form/primitives/field/description.cjs.map +7 -0
- package/build/form/primitives/field/details.cjs +99 -0
- package/build/form/primitives/field/details.cjs.map +7 -0
- package/build/form/primitives/field/index.cjs +46 -0
- package/build/form/primitives/field/index.cjs.map +7 -0
- package/build/form/primitives/field/item.cjs +36 -0
- package/build/form/primitives/field/item.cjs.map +7 -0
- package/build/form/primitives/field/label.cjs +98 -0
- package/build/form/primitives/field/label.cjs.map +7 -0
- package/build/form/primitives/field/root.cjs +79 -0
- package/build/form/primitives/field/root.cjs.map +7 -0
- package/build/form/primitives/field/types.cjs +19 -0
- package/build/form/primitives/field/types.cjs.map +7 -0
- package/build/form/primitives/fieldset/context.cjs +40 -0
- package/build/form/primitives/fieldset/context.cjs.map +7 -0
- package/build/form/primitives/fieldset/description.cjs +101 -0
- package/build/form/primitives/fieldset/description.cjs.map +7 -0
- package/build/form/primitives/fieldset/details.cjs +103 -0
- package/build/form/primitives/fieldset/details.cjs.map +7 -0
- package/build/form/primitives/fieldset/index.cjs +40 -0
- package/build/form/primitives/fieldset/index.cjs.map +7 -0
- package/build/form/primitives/fieldset/legend.cjs +94 -0
- package/build/form/primitives/fieldset/legend.cjs.map +7 -0
- package/build/form/primitives/fieldset/root.cjs +86 -0
- package/build/form/primitives/fieldset/root.cjs.map +7 -0
- package/build/form/primitives/fieldset/types.cjs +19 -0
- package/build/form/primitives/fieldset/types.cjs.map +7 -0
- package/build/form/primitives/index.cjs +50 -0
- package/build/form/primitives/index.cjs.map +7 -0
- package/build/form/primitives/input/index.cjs +31 -0
- package/build/form/primitives/input/index.cjs.map +7 -0
- package/build/form/primitives/input/input.cjs +148 -0
- package/build/form/primitives/input/input.cjs.map +7 -0
- package/build/form/primitives/input/types.cjs +19 -0
- package/build/form/primitives/input/types.cjs.map +7 -0
- package/build/form/primitives/input-layout/context.cjs +49 -0
- package/build/form/primitives/input-layout/context.cjs.map +7 -0
- package/build/form/primitives/input-layout/index.cjs +35 -0
- package/build/form/primitives/input-layout/index.cjs.map +7 -0
- package/build/form/primitives/input-layout/input-layout.cjs +196 -0
- package/build/form/primitives/input-layout/input-layout.cjs.map +7 -0
- package/build/form/primitives/input-layout/slot.cjs +165 -0
- package/build/form/primitives/input-layout/slot.cjs.map +7 -0
- package/build/form/primitives/input-layout/types.cjs +19 -0
- package/build/form/primitives/input-layout/types.cjs.map +7 -0
- package/build/icon/icon.cjs +46 -0
- package/build/icon/icon.cjs.map +7 -0
- package/build/{index.js → icon/index.cjs} +13 -7
- package/build/icon/index.cjs.map +7 -0
- package/build/icon/types.cjs +19 -0
- package/build/icon/types.cjs.map +7 -0
- package/build/index.cjs +37 -0
- package/build/index.cjs.map +7 -0
- package/build/stack/{index.js → index.cjs} +2 -2
- package/build/stack/index.cjs.map +7 -0
- package/build/stack/{stack.js → stack.cjs} +6 -18
- package/build/stack/stack.cjs.map +7 -0
- package/build/stack/{types.js → types.cjs} +1 -1
- package/build/stack/types.cjs.map +7 -0
- package/build/types/css-modules.d.cjs +2 -0
- package/build/types/css-modules.d.cjs.map +7 -0
- package/build/types/{react.d.js → react.d.cjs} +1 -1
- package/build/utils/{types.js → types.cjs} +1 -1
- package/build/visually-hidden/index.cjs +31 -0
- package/build/visually-hidden/index.cjs.map +7 -0
- package/build/visually-hidden/types.cjs +19 -0
- package/build/visually-hidden/types.cjs.map +7 -0
- package/build/visually-hidden/visually-hidden.cjs +69 -0
- package/build/visually-hidden/visually-hidden.cjs.map +7 -0
- package/build-module/badge/badge.mjs +70 -0
- package/build-module/badge/badge.mjs.map +7 -0
- package/build-module/badge/index.mjs +6 -0
- package/build-module/badge/index.mjs.map +7 -0
- package/build-module/badge/types.mjs +1 -0
- package/build-module/box/{box.js → box.mjs} +7 -6
- package/build-module/box/box.mjs.map +7 -0
- package/build-module/box/index.mjs +6 -0
- package/build-module/box/types.mjs +1 -0
- package/build-module/button/button.mjs +366 -0
- package/build-module/button/button.mjs.map +7 -0
- package/build-module/button/icon.mjs +22 -0
- package/build-module/button/icon.mjs.map +7 -0
- package/build-module/button/index.mjs +14 -0
- package/build-module/button/index.mjs.map +7 -0
- package/build-module/button/types.mjs +1 -0
- package/build-module/form/primitives/field/control.mjs +13 -0
- package/build-module/form/primitives/field/control.mjs.map +7 -0
- package/build-module/form/primitives/field/description.mjs +57 -0
- package/build-module/form/primitives/field/description.mjs.map +7 -0
- package/build-module/form/primitives/field/details.mjs +64 -0
- package/build-module/form/primitives/field/details.mjs.map +7 -0
- package/build-module/form/primitives/field/index.mjs +16 -0
- package/build-module/form/primitives/field/index.mjs.map +7 -0
- package/build-module/form/primitives/field/item.mjs +11 -0
- package/build-module/form/primitives/field/item.mjs.map +7 -0
- package/build-module/form/primitives/field/label.mjs +63 -0
- package/build-module/form/primitives/field/label.mjs.map +7 -0
- package/build-module/form/primitives/field/root.mjs +44 -0
- package/build-module/form/primitives/field/root.mjs.map +7 -0
- package/build-module/form/primitives/field/types.mjs +1 -0
- package/build-module/form/primitives/fieldset/context.mjs +14 -0
- package/build-module/form/primitives/fieldset/context.mjs.map +7 -0
- package/build-module/form/primitives/fieldset/description.mjs +66 -0
- package/build-module/form/primitives/fieldset/description.mjs.map +7 -0
- package/build-module/form/primitives/fieldset/details.mjs +68 -0
- package/build-module/form/primitives/fieldset/details.mjs.map +7 -0
- package/build-module/form/primitives/fieldset/index.mjs +12 -0
- package/build-module/form/primitives/fieldset/index.mjs.map +7 -0
- package/build-module/form/primitives/fieldset/legend.mjs +59 -0
- package/build-module/form/primitives/fieldset/legend.mjs.map +7 -0
- package/build-module/form/primitives/fieldset/root.mjs +51 -0
- package/build-module/form/primitives/fieldset/root.mjs.map +7 -0
- package/build-module/form/primitives/fieldset/types.mjs +1 -0
- package/build-module/form/primitives/index.mjs +12 -0
- package/build-module/form/primitives/index.mjs.map +7 -0
- package/build-module/form/primitives/input/index.mjs +6 -0
- package/build-module/form/primitives/input/index.mjs.map +7 -0
- package/build-module/form/primitives/input/input.mjs +113 -0
- package/build-module/form/primitives/input/input.mjs.map +7 -0
- package/build-module/form/primitives/input/types.mjs +1 -0
- package/build-module/form/primitives/input/types.mjs.map +7 -0
- package/build-module/form/primitives/input-layout/context.mjs +22 -0
- package/build-module/form/primitives/input-layout/context.mjs.map +7 -0
- package/build-module/form/primitives/input-layout/index.mjs +10 -0
- package/build-module/form/primitives/input-layout/index.mjs.map +7 -0
- package/build-module/form/primitives/input-layout/input-layout.mjs +161 -0
- package/build-module/form/primitives/input-layout/input-layout.mjs.map +7 -0
- package/build-module/form/primitives/input-layout/slot.mjs +130 -0
- package/build-module/form/primitives/input-layout/slot.mjs.map +7 -0
- package/build-module/form/primitives/input-layout/types.mjs +1 -0
- package/build-module/form/primitives/input-layout/types.mjs.map +7 -0
- package/build-module/icon/icon.mjs +21 -0
- package/build-module/icon/icon.mjs.map +7 -0
- package/build-module/icon/index.mjs +6 -0
- package/build-module/icon/index.mjs.map +7 -0
- package/build-module/icon/types.mjs +1 -0
- package/build-module/icon/types.mjs.map +7 -0
- package/build-module/index.mjs +9 -0
- package/build-module/index.mjs.map +7 -0
- package/build-module/stack/index.mjs +6 -0
- package/build-module/stack/index.mjs.map +7 -0
- package/build-module/stack/{stack.js → stack.mjs} +6 -8
- package/build-module/stack/stack.mjs.map +7 -0
- package/build-module/stack/types.mjs +1 -0
- package/build-module/stack/types.mjs.map +7 -0
- package/build-module/types/css-modules.d.mjs +1 -0
- package/build-module/types/css-modules.d.mjs.map +7 -0
- package/build-module/types/{react.d.js → react.d.mjs} +1 -1
- package/build-module/utils/types.mjs +1 -0
- package/build-module/utils/types.mjs.map +7 -0
- package/build-module/visually-hidden/index.mjs +6 -0
- package/build-module/visually-hidden/index.mjs.map +7 -0
- package/build-module/visually-hidden/types.mjs +1 -0
- package/build-module/visually-hidden/types.mjs.map +7 -0
- package/build-module/visually-hidden/visually-hidden.mjs +44 -0
- package/build-module/visually-hidden/visually-hidden.mjs.map +7 -0
- package/build-types/badge/badge.d.ts +7 -0
- package/build-types/badge/badge.d.ts.map +1 -0
- package/build-types/badge/index.d.ts +2 -0
- package/build-types/badge/index.d.ts.map +1 -0
- package/build-types/badge/stories/index.story.d.ts +15 -0
- package/build-types/badge/stories/index.story.d.ts.map +1 -0
- package/build-types/badge/types.d.ts +14 -0
- package/build-types/badge/types.d.ts.map +1 -0
- package/build-types/box/box.d.ts +0 -3
- package/build-types/box/box.d.ts.map +1 -1
- package/build-types/box/stories/index.story.d.ts +1 -11
- package/build-types/box/stories/index.story.d.ts.map +1 -1
- package/build-types/box/types.d.ts +8 -15
- package/build-types/box/types.d.ts.map +1 -1
- package/build-types/button/button.d.ts +3 -0
- package/build-types/button/button.d.ts.map +1 -0
- package/build-types/button/icon.d.ts +10 -0
- package/build-types/button/icon.d.ts.map +1 -0
- package/build-types/button/index.d.ts +10 -0
- package/build-types/button/index.d.ts.map +1 -0
- package/build-types/button/stories/index.story.d.ts +23 -0
- package/build-types/button/stories/index.story.d.ts.map +1 -0
- package/build-types/button/test/button.test.d.ts +2 -0
- package/build-types/button/test/button.test.d.ts.map +1 -0
- package/build-types/button/test/icon.test.d.ts +2 -0
- package/build-types/button/test/icon.test.d.ts.map +1 -0
- package/build-types/button/types.d.ts +63 -0
- package/build-types/button/types.d.ts.map +1 -0
- package/build-types/form/primitives/field/control.d.ts +6 -0
- package/build-types/form/primitives/field/control.d.ts.map +1 -0
- package/build-types/form/primitives/field/description.d.ts +9 -0
- package/build-types/form/primitives/field/description.d.ts.map +1 -0
- package/build-types/form/primitives/field/details.d.ts +21 -0
- package/build-types/form/primitives/field/details.d.ts.map +1 -0
- package/build-types/form/primitives/field/index.d.ts +8 -0
- package/build-types/form/primitives/field/index.d.ts.map +1 -0
- package/build-types/form/primitives/field/item.d.ts +3 -0
- package/build-types/form/primitives/field/item.d.ts.map +1 -0
- package/build-types/form/primitives/field/label.d.ts +11 -0
- package/build-types/form/primitives/field/label.d.ts.map +1 -0
- package/build-types/form/primitives/field/root.d.ts +15 -0
- package/build-types/form/primitives/field/root.d.ts.map +1 -0
- package/build-types/form/primitives/field/stories/index.story.d.ts +39 -0
- package/build-types/form/primitives/field/stories/index.story.d.ts.map +1 -0
- package/build-types/form/primitives/field/test/index.test.d.ts +2 -0
- package/build-types/form/primitives/field/test/index.test.d.ts.map +1 -0
- package/build-types/form/primitives/field/types.d.ts +62 -0
- package/build-types/form/primitives/field/types.d.ts.map +1 -0
- package/build-types/form/primitives/fieldset/context.d.ts +8 -0
- package/build-types/form/primitives/fieldset/context.d.ts.map +1 -0
- package/build-types/form/primitives/fieldset/description.d.ts +9 -0
- package/build-types/form/primitives/fieldset/description.d.ts.map +1 -0
- package/build-types/form/primitives/fieldset/details.d.ts +21 -0
- package/build-types/form/primitives/fieldset/details.d.ts.map +1 -0
- package/build-types/form/primitives/fieldset/index.d.ts +6 -0
- package/build-types/form/primitives/fieldset/index.d.ts.map +1 -0
- package/build-types/form/primitives/fieldset/legend.d.ts +9 -0
- package/build-types/form/primitives/fieldset/legend.d.ts.map +1 -0
- package/build-types/form/primitives/fieldset/root.d.ts +15 -0
- package/build-types/form/primitives/fieldset/root.d.ts.map +1 -0
- package/build-types/form/primitives/fieldset/stories/index.story.d.ts +18 -0
- package/build-types/form/primitives/fieldset/stories/index.story.d.ts.map +1 -0
- package/build-types/form/primitives/fieldset/test/index.test.d.ts +2 -0
- package/build-types/form/primitives/fieldset/test/index.test.d.ts.map +1 -0
- package/build-types/form/primitives/fieldset/types.d.ts +32 -0
- package/build-types/form/primitives/fieldset/types.d.ts.map +1 -0
- package/build-types/form/primitives/index.d.ts +5 -0
- package/build-types/form/primitives/index.d.ts.map +1 -0
- package/build-types/form/primitives/input/index.d.ts +2 -0
- package/build-types/form/primitives/input/index.d.ts.map +1 -0
- package/build-types/form/primitives/input/input.d.ts +10 -0
- package/build-types/form/primitives/input/input.d.ts.map +1 -0
- package/build-types/form/primitives/input/stories/index.story.d.ts +13 -0
- package/build-types/form/primitives/input/stories/index.story.d.ts.map +1 -0
- package/build-types/form/primitives/input/test/index.test.d.ts +2 -0
- package/build-types/form/primitives/input/test/index.test.d.ts.map +1 -0
- package/build-types/form/primitives/input/types.d.ts +27 -0
- package/build-types/form/primitives/input/types.d.ts.map +1 -0
- package/build-types/form/primitives/input-layout/context.d.ts +17 -0
- package/build-types/form/primitives/input-layout/context.d.ts.map +1 -0
- package/build-types/form/primitives/input-layout/index.d.ts +4 -0
- package/build-types/form/primitives/input-layout/index.d.ts.map +1 -0
- package/build-types/form/primitives/input-layout/input-layout.d.ts +7 -0
- package/build-types/form/primitives/input-layout/input-layout.d.ts.map +1 -0
- package/build-types/form/primitives/input-layout/slot.d.ts +6 -0
- package/build-types/form/primitives/input-layout/slot.d.ts.map +1 -0
- package/build-types/form/primitives/input-layout/stories/index.story.d.ts +24 -0
- package/build-types/form/primitives/input-layout/stories/index.story.d.ts.map +1 -0
- package/build-types/form/primitives/input-layout/test/index.test.d.ts +2 -0
- package/build-types/form/primitives/input-layout/test/index.test.d.ts.map +1 -0
- package/build-types/form/primitives/input-layout/types.d.ts +41 -0
- package/build-types/form/primitives/input-layout/types.d.ts.map +1 -0
- package/build-types/icon/icon.d.ts +14 -0
- package/build-types/icon/icon.d.ts.map +1 -0
- package/build-types/icon/index.d.ts +2 -0
- package/build-types/icon/index.d.ts.map +1 -0
- package/build-types/icon/stories/index.story.d.ts +11 -0
- package/build-types/icon/stories/index.story.d.ts.map +1 -0
- package/build-types/icon/test/icon.test.d.ts +2 -0
- package/build-types/icon/test/icon.test.d.ts.map +1 -0
- package/build-types/icon/types.d.ts +15 -0
- package/build-types/icon/types.d.ts.map +1 -0
- package/build-types/index.d.ts +6 -0
- package/build-types/index.d.ts.map +1 -1
- package/build-types/stack/index.d.ts +0 -3
- package/build-types/stack/index.d.ts.map +1 -1
- package/build-types/stack/stack.d.ts.map +1 -1
- package/build-types/stack/stories/index.story.d.ts +1 -11
- package/build-types/stack/stories/index.story.d.ts.map +1 -1
- package/build-types/stack/types.d.ts +2 -5
- package/build-types/stack/types.d.ts.map +1 -1
- package/build-types/test/index.test.d.ts +2 -0
- package/build-types/test/index.test.d.ts.map +1 -0
- package/build-types/visually-hidden/index.d.ts +2 -0
- package/build-types/visually-hidden/index.d.ts.map +1 -0
- package/build-types/visually-hidden/stories/index.story.d.ts +7 -0
- package/build-types/visually-hidden/stories/index.story.d.ts.map +1 -0
- package/build-types/visually-hidden/test/visually-hidden.test.d.ts +2 -0
- package/build-types/visually-hidden/test/visually-hidden.test.d.ts.map +1 -0
- package/build-types/visually-hidden/types.d.ts +8 -0
- package/build-types/visually-hidden/types.d.ts.map +1 -0
- package/build-types/visually-hidden/visually-hidden.d.ts +7 -0
- package/build-types/visually-hidden/visually-hidden.d.ts.map +1 -0
- package/package.json +26 -9
- package/src/badge/badge.tsx +88 -0
- package/src/badge/index.ts +1 -0
- package/src/badge/stories/choosing-intent.mdx +112 -0
- package/src/badge/stories/index.story.tsx +120 -0
- package/src/badge/types.ts +22 -0
- package/src/box/box.tsx +11 -23
- package/src/box/stories/index.story.tsx +3 -15
- package/src/box/types.ts +16 -59
- package/src/button/button.tsx +57 -0
- package/src/button/icon.tsx +24 -0
- package/src/button/index.ts +16 -0
- package/src/button/stories/index.story.tsx +192 -0
- package/src/button/style.module.css +232 -0
- package/src/button/test/button.test.tsx +89 -0
- package/src/button/test/icon.test.tsx +13 -0
- package/src/button/types.ts +72 -0
- package/src/form/primitives/field/control.tsx +9 -0
- package/src/form/primitives/field/description.tsx +18 -0
- package/src/form/primitives/field/details.tsx +36 -0
- package/src/form/primitives/field/index.ts +8 -0
- package/src/form/primitives/field/item.tsx +9 -0
- package/src/form/primitives/field/label.tsx +21 -0
- package/src/form/primitives/field/root.tsx +33 -0
- package/src/form/primitives/field/stories/index.story.tsx +132 -0
- package/src/form/primitives/field/test/index.test.tsx +36 -0
- package/src/form/primitives/field/types.ts +82 -0
- package/src/form/primitives/fieldset/context.tsx +13 -0
- package/src/form/primitives/fieldset/description.tsx +36 -0
- package/src/form/primitives/fieldset/details.tsx +46 -0
- package/src/form/primitives/fieldset/index.ts +6 -0
- package/src/form/primitives/fieldset/legend.tsx +17 -0
- package/src/form/primitives/fieldset/root.tsx +42 -0
- package/src/form/primitives/fieldset/stories/index.story.tsx +67 -0
- package/src/form/primitives/fieldset/style.module.css +12 -0
- package/src/form/primitives/fieldset/test/index.test.tsx +135 -0
- package/src/form/primitives/fieldset/types.ts +35 -0
- package/src/form/primitives/index.ts +4 -0
- package/src/form/primitives/input/index.ts +1 -0
- package/src/form/primitives/input/input.tsx +28 -0
- package/src/form/primitives/input/stories/index.story.tsx +40 -0
- package/src/form/primitives/input/style.module.css +34 -0
- package/src/form/primitives/input/test/index.test.tsx +13 -0
- package/src/form/primitives/input/types.ts +31 -0
- package/src/form/primitives/input-layout/context.tsx +36 -0
- package/src/form/primitives/input-layout/index.ts +6 -0
- package/src/form/primitives/input-layout/input-layout.tsx +49 -0
- package/src/form/primitives/input-layout/slot.tsx +39 -0
- package/src/form/primitives/input-layout/stories/index.story.tsx +67 -0
- package/src/form/primitives/input-layout/style.module.css +82 -0
- package/src/form/primitives/input-layout/test/index.test.tsx +23 -0
- package/src/form/primitives/input-layout/types.ts +44 -0
- package/src/icon/icon.tsx +30 -0
- package/src/icon/index.ts +1 -0
- package/src/icon/stories/index.story.tsx +47 -0
- package/src/icon/test/icon.test.tsx +13 -0
- package/src/icon/types.ts +14 -0
- package/src/index.ts +6 -0
- package/src/stack/index.ts +0 -3
- package/src/stack/stack.tsx +5 -18
- package/src/stack/stories/index.story.tsx +1 -14
- package/src/stack/test/stack.test.tsx +22 -12
- package/src/stack/types.ts +2 -6
- package/src/stories/introduction.mdx +6 -0
- package/src/test/index.test.ts +22 -0
- package/src/utils/css/field.module.css +27 -0
- package/src/utils/css/focus.module.css +31 -0
- package/src/utils/css/resets.module.css +13 -0
- package/src/visually-hidden/index.ts +1 -0
- package/src/visually-hidden/stories/index.story.tsx +22 -0
- package/src/visually-hidden/style.module.css +15 -0
- package/src/visually-hidden/test/visually-hidden.test.tsx +59 -0
- package/src/visually-hidden/types.ts +8 -0
- package/src/visually-hidden/visually-hidden.tsx +23 -0
- package/build/box/box.js.map +0 -7
- package/build/box/types.js.map +0 -7
- package/build/index.js.map +0 -7
- package/build/lock-unlock.js.map +0 -7
- package/build/stack/index.js.map +0 -7
- package/build/stack/stack.js.map +0 -7
- package/build/stack/types.js.map +0 -7
- package/build/types/css-modules.d.js +0 -2
- package/build/utils/element.js.map +0 -7
- package/build-module/box/box.js.map +0 -7
- package/build-module/box/index.js +0 -6
- package/build-module/box/types.js +0 -1
- package/build-module/index.js +0 -3
- package/build-module/index.js.map +0 -7
- package/build-module/lock-unlock.js +0 -11
- package/build-module/lock-unlock.js.map +0 -7
- package/build-module/stack/index.js +0 -6
- package/build-module/stack/index.js.map +0 -7
- package/build-module/stack/stack.js.map +0 -7
- package/build-module/stack/types.js +0 -1
- package/build-module/types/css-modules.d.js +0 -1
- package/build-module/utils/element.js +0 -20
- package/build-module/utils/element.js.map +0 -7
- package/build-module/utils/types.js +0 -1
- package/build-types/lock-unlock.d.ts +0 -2
- package/build-types/lock-unlock.d.ts.map +0 -1
- package/build-types/utils/element.d.ts +0 -25
- package/build-types/utils/element.d.ts.map +0 -1
- package/src/lock-unlock.ts +0 -10
- package/src/utils/element.ts +0 -51
- package/tsconfig.json +0 -13
- package/tsconfig.tsbuildinfo +0 -1
- /package/build/box/{index.js.map → index.cjs.map} +0 -0
- /package/build/types/{react.d.js.map → react.d.cjs.map} +0 -0
- /package/build/utils/{types.js.map → types.cjs.map} +0 -0
- /package/build-module/{box/types.js.map → badge/types.mjs.map} +0 -0
- /package/build-module/box/{index.js.map → index.mjs.map} +0 -0
- /package/build-module/{stack/types.js.map → box/types.mjs.map} +0 -0
- /package/build-module/{types/css-modules.d.js.map → button/types.mjs.map} +0 -0
- /package/build-module/{utils/types.js.map → form/primitives/field/types.mjs.map} +0 -0
- /package/{build/types/css-modules.d.js.map → build-module/form/primitives/fieldset/types.mjs.map} +0 -0
- /package/build-module/types/{react.d.js.map → react.d.mjs.map} +0 -0
package/src/stack/stack.tsx
CHANGED
|
@@ -1,17 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
* External dependencies
|
|
3
|
-
*/
|
|
4
|
-
import clsx from 'clsx';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* WordPress dependencies
|
|
8
|
-
*/
|
|
1
|
+
import { useRender, mergeProps } from '@base-ui/react';
|
|
9
2
|
import { forwardRef } from '@wordpress/element';
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* Internal dependencies
|
|
13
|
-
*/
|
|
14
|
-
import { renderElement } from '../utils/element';
|
|
15
3
|
import { type StackProps } from './types';
|
|
16
4
|
import styles from './style.module.css';
|
|
17
5
|
|
|
@@ -23,20 +11,19 @@ export const Stack = forwardRef< HTMLDivElement, StackProps >( function Stack(
|
|
|
23
11
|
{ direction, gap, align, justify, wrap, render, ...props },
|
|
24
12
|
ref
|
|
25
13
|
) {
|
|
26
|
-
const className = clsx( props.className, styles.stack );
|
|
27
|
-
|
|
28
14
|
const style: React.CSSProperties = {
|
|
29
15
|
gap: gap && `var(--wpds-dimension-gap-${ gap })`,
|
|
30
16
|
alignItems: align,
|
|
31
17
|
justifyContent: justify,
|
|
32
18
|
flexDirection: direction,
|
|
33
19
|
flexWrap: wrap,
|
|
34
|
-
...props.style,
|
|
35
20
|
};
|
|
36
21
|
|
|
37
|
-
|
|
22
|
+
const element = useRender( {
|
|
38
23
|
render,
|
|
39
24
|
ref,
|
|
40
|
-
props:
|
|
25
|
+
props: mergeProps< 'div' >( props, { style, className: styles.stack } ),
|
|
41
26
|
} );
|
|
27
|
+
|
|
28
|
+
return element;
|
|
42
29
|
} );
|
|
@@ -1,23 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
* External dependencies
|
|
3
|
-
*/
|
|
4
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* WordPress dependencies
|
|
8
|
-
*/
|
|
9
|
-
import '@wordpress/theme/design-tokens.css';
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* Internal dependencies
|
|
13
|
-
*/
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
14
2
|
import { Stack } from '../index';
|
|
15
3
|
import { Box } from '../../box';
|
|
16
4
|
|
|
17
5
|
const meta: Meta< typeof Stack > = {
|
|
18
6
|
title: 'Design System/Components/Stack',
|
|
19
7
|
component: Stack,
|
|
20
|
-
tags: [ 'status-experimental' ],
|
|
21
8
|
};
|
|
22
9
|
export default meta;
|
|
23
10
|
|
|
@@ -1,18 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
* External dependencies
|
|
3
|
-
*/
|
|
4
|
-
import { render } from '@testing-library/react';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* WordPress dependencies
|
|
8
|
-
*/
|
|
1
|
+
import { render, screen } from '@testing-library/react';
|
|
9
2
|
import { createRef } from '@wordpress/element';
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* Internal dependencies
|
|
13
|
-
*/
|
|
14
3
|
import { Stack } from '../stack';
|
|
15
4
|
|
|
5
|
+
jest.mock( './style.module.css', () => ( {
|
|
6
|
+
stack: 'stack-class',
|
|
7
|
+
} ) );
|
|
8
|
+
|
|
16
9
|
describe( 'Stack', () => {
|
|
17
10
|
it( 'forwards ref', () => {
|
|
18
11
|
const ref = createRef< HTMLDivElement >();
|
|
@@ -21,4 +14,21 @@ describe( 'Stack', () => {
|
|
|
21
14
|
|
|
22
15
|
expect( ref.current ).toBeInstanceOf( HTMLDivElement );
|
|
23
16
|
} );
|
|
17
|
+
|
|
18
|
+
it( 'merges props', () => {
|
|
19
|
+
render(
|
|
20
|
+
<Stack
|
|
21
|
+
align="center"
|
|
22
|
+
className="custom-class"
|
|
23
|
+
style={ { width: '10px' } }
|
|
24
|
+
>
|
|
25
|
+
Content
|
|
26
|
+
</Stack>
|
|
27
|
+
);
|
|
28
|
+
|
|
29
|
+
const stack = screen.getByText( 'Content' );
|
|
30
|
+
|
|
31
|
+
expect( stack ).toHaveStyle( { width: '10px', alignItems: 'center' } );
|
|
32
|
+
expect( stack ).toHaveClass( 'custom-class', 'stack-class' );
|
|
33
|
+
} );
|
|
24
34
|
} );
|
package/src/stack/types.ts
CHANGED
|
@@ -1,10 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
* Internal dependencies
|
|
3
|
-
*/
|
|
1
|
+
import { type GapSize } from '@wordpress/theme';
|
|
4
2
|
import { type ComponentProps } from '../utils/types';
|
|
5
3
|
|
|
6
|
-
export type SizeToken = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
7
|
-
|
|
8
4
|
export interface StackProps extends ComponentProps< 'div' > {
|
|
9
5
|
/**
|
|
10
6
|
* The direction of the stack.
|
|
@@ -19,7 +15,7 @@ export interface StackProps extends ComponentProps< 'div' > {
|
|
|
19
15
|
*
|
|
20
16
|
* @default undefined
|
|
21
17
|
*/
|
|
22
|
-
gap?:
|
|
18
|
+
gap?: GapSize;
|
|
23
19
|
|
|
24
20
|
/**
|
|
25
21
|
* The alignment of the stack items along the cross axis.
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { join, dirname, basename } from 'node:path';
|
|
2
|
+
import { readFile } from 'node:fs/promises';
|
|
3
|
+
import glob from 'fast-glob';
|
|
4
|
+
|
|
5
|
+
describe( 'index', () => {
|
|
6
|
+
it( 'should export something from each component', async () => {
|
|
7
|
+
// As described in the CONTRIBUTING.md file, each component should be
|
|
8
|
+
// exported from an index.ts in its implementation directory.
|
|
9
|
+
const components = await glob( '*/index.ts', {
|
|
10
|
+
cwd: join( __dirname, '..' ),
|
|
11
|
+
} );
|
|
12
|
+
const directories = components.map( ( c ) => basename( dirname( c ) ) );
|
|
13
|
+
const index = await readFile(
|
|
14
|
+
join( __dirname, '../index.ts' ),
|
|
15
|
+
'utf-8'
|
|
16
|
+
);
|
|
17
|
+
|
|
18
|
+
for ( const directory of directories ) {
|
|
19
|
+
expect( index ).toContain( `'./${ directory }'` );
|
|
20
|
+
}
|
|
21
|
+
} );
|
|
22
|
+
} );
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
|
|
2
|
+
|
|
3
|
+
@layer wp-ui-utilities {
|
|
4
|
+
.label {
|
|
5
|
+
--wp-ui-field-label-line-height: var(--wpds-font-line-height-xs);
|
|
6
|
+
|
|
7
|
+
font-family: var(--wpds-font-family-body);
|
|
8
|
+
font-size: var(--wpds-font-size-xs);
|
|
9
|
+
line-height: var(--wp-ui-field-label-line-height);
|
|
10
|
+
font-weight: var(--wpds-font-weight-medium);
|
|
11
|
+
text-transform: uppercase;
|
|
12
|
+
color: var(--wpds-color-fg-content-neutral);
|
|
13
|
+
|
|
14
|
+
&.is-plain {
|
|
15
|
+
font-size: var(--wpds-font-size-md);
|
|
16
|
+
text-transform: none;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.description {
|
|
21
|
+
margin: 0;
|
|
22
|
+
font-family: var(--wpds-font-family-body);
|
|
23
|
+
font-size: var(--wpds-font-size-sm);
|
|
24
|
+
line-height: var(--wpds-font-line-height-xs);
|
|
25
|
+
color: var(--wpds-color-fg-content-neutral-weak);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
|
|
2
|
+
|
|
3
|
+
@layer wp-ui-utilities {
|
|
4
|
+
.outset-ring--focus,
|
|
5
|
+
.outset-ring--focus-except-active,
|
|
6
|
+
.outset-ring--focus-visible,
|
|
7
|
+
.outset-ring--focus-within,
|
|
8
|
+
.outset-ring--focus-within-except-active,
|
|
9
|
+
.outset-ring--focus-within-visible {
|
|
10
|
+
@media not ( prefers-reduced-motion ) {
|
|
11
|
+
transition: outline 0.1s ease-out;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
/* Outline width must be kept at 0 even with a transparent color,
|
|
15
|
+
or else the outline will be visible in forced-colors mode. */
|
|
16
|
+
outline-width: 0;
|
|
17
|
+
outline-style: solid;
|
|
18
|
+
outline-color: transparent;
|
|
19
|
+
outline-offset: 1px;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.outset-ring--focus:focus,
|
|
23
|
+
.outset-ring--focus-except-active:focus:not(:active),
|
|
24
|
+
.outset-ring--focus-visible:focus-visible,
|
|
25
|
+
.outset-ring--focus-within:focus-within,
|
|
26
|
+
.outset-ring--focus-within-except-active:focus-within:not(:has(:active)),
|
|
27
|
+
.outset-ring--focus-within-visible:focus-within:has(:focus-visible) {
|
|
28
|
+
outline-width: var(--wpds-border-width-interactive-focus);
|
|
29
|
+
outline-color: var(--wpds-color-stroke-focus-brand);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { VisuallyHidden } from './visually-hidden';
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { VisuallyHidden } from '../';
|
|
3
|
+
|
|
4
|
+
const meta: Meta< typeof VisuallyHidden > = {
|
|
5
|
+
title: 'Design System/Components/VisuallyHidden',
|
|
6
|
+
component: VisuallyHidden,
|
|
7
|
+
};
|
|
8
|
+
export default meta;
|
|
9
|
+
|
|
10
|
+
type Story = StoryObj< typeof VisuallyHidden >;
|
|
11
|
+
|
|
12
|
+
export const Default: Story = {
|
|
13
|
+
render: () => (
|
|
14
|
+
<>
|
|
15
|
+
<VisuallyHidden>This should not show.</VisuallyHidden>
|
|
16
|
+
<div>
|
|
17
|
+
This text will <VisuallyHidden>but not inline </VisuallyHidden>
|
|
18
|
+
always show.
|
|
19
|
+
</div>
|
|
20
|
+
</>
|
|
21
|
+
),
|
|
22
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
|
|
2
|
+
|
|
3
|
+
@layer wp-ui-components {
|
|
4
|
+
.visually-hidden {
|
|
5
|
+
border: 0;
|
|
6
|
+
clip-path: inset(50%);
|
|
7
|
+
height: 1px;
|
|
8
|
+
margin: -1px;
|
|
9
|
+
overflow: hidden;
|
|
10
|
+
padding: 0;
|
|
11
|
+
position: absolute;
|
|
12
|
+
width: 1px;
|
|
13
|
+
word-wrap: normal;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { render, screen } from '@testing-library/react';
|
|
2
|
+
import { createRef } from '@wordpress/element';
|
|
3
|
+
import { VisuallyHidden } from '../index';
|
|
4
|
+
|
|
5
|
+
describe( 'VisuallyHidden', () => {
|
|
6
|
+
it( 'forwards ref', () => {
|
|
7
|
+
const ref = createRef< HTMLDivElement >();
|
|
8
|
+
|
|
9
|
+
render( <VisuallyHidden ref={ ref }>Content</VisuallyHidden> );
|
|
10
|
+
|
|
11
|
+
expect( ref.current ).toBeInstanceOf( HTMLDivElement );
|
|
12
|
+
} );
|
|
13
|
+
|
|
14
|
+
it( 'should forward props to the rendered element', () => {
|
|
15
|
+
render(
|
|
16
|
+
<VisuallyHidden data-testid="visually-hidden">
|
|
17
|
+
Content
|
|
18
|
+
</VisuallyHidden>
|
|
19
|
+
);
|
|
20
|
+
|
|
21
|
+
expect( screen.getByTestId( 'visually-hidden' ) ).toBeInTheDocument();
|
|
22
|
+
} );
|
|
23
|
+
|
|
24
|
+
it( 'should forward the class name to the rendered element', () => {
|
|
25
|
+
render(
|
|
26
|
+
<VisuallyHidden
|
|
27
|
+
data-testid="visually-hidden"
|
|
28
|
+
className="test-class"
|
|
29
|
+
>
|
|
30
|
+
Content
|
|
31
|
+
</VisuallyHidden>
|
|
32
|
+
);
|
|
33
|
+
|
|
34
|
+
expect( screen.getByTestId( 'visually-hidden' ) ).toHaveClass(
|
|
35
|
+
'test-class'
|
|
36
|
+
);
|
|
37
|
+
} );
|
|
38
|
+
|
|
39
|
+
it( 'should support the render prop', () => {
|
|
40
|
+
render(
|
|
41
|
+
<>
|
|
42
|
+
<VisuallyHidden
|
|
43
|
+
render={
|
|
44
|
+
// eslint-disable-next-line jsx-a11y/label-has-associated-control
|
|
45
|
+
<label htmlFor="input-id" />
|
|
46
|
+
}
|
|
47
|
+
>
|
|
48
|
+
My label
|
|
49
|
+
</VisuallyHidden>
|
|
50
|
+
{ /* eslint-disable-next-line no-restricted-syntax */ }
|
|
51
|
+
<input id="input-id" />
|
|
52
|
+
</>
|
|
53
|
+
);
|
|
54
|
+
|
|
55
|
+
expect(
|
|
56
|
+
screen.getByRole( 'textbox', { name: 'My label' } )
|
|
57
|
+
).toBeVisible();
|
|
58
|
+
} );
|
|
59
|
+
} );
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { mergeProps, useRender } from '@base-ui/react';
|
|
2
|
+
import { forwardRef } from '@wordpress/element';
|
|
3
|
+
import type { VisuallyHiddenProps } from './types';
|
|
4
|
+
import styles from './style.module.css';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Visually hides content while keeping it accessible to screen readers.
|
|
8
|
+
* Useful when providing context that's only meaningful to assistive technology.
|
|
9
|
+
*/
|
|
10
|
+
export const VisuallyHidden = forwardRef< HTMLDivElement, VisuallyHiddenProps >(
|
|
11
|
+
function VisuallyHidden( { render, ...restProps }, ref ) {
|
|
12
|
+
const element = useRender( {
|
|
13
|
+
render,
|
|
14
|
+
ref,
|
|
15
|
+
props: mergeProps< 'div' >(
|
|
16
|
+
{ className: styles[ 'visually-hidden' ] },
|
|
17
|
+
restProps
|
|
18
|
+
),
|
|
19
|
+
} );
|
|
20
|
+
|
|
21
|
+
return element;
|
|
22
|
+
}
|
|
23
|
+
);
|
package/build/box/box.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/box/box.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { type BoxProps } from './types';\nimport { renderElement } from '../utils/element';\n\n/**\n * Default render function that renders a div element with the given props.\n *\n * @param props The props to apply to the HTML element.\n */\nconst DEFAULT_RENDER = ( props: React.ComponentPropsWithoutRef< 'div' > ) => (\n\t<div { ...props } />\n);\n\n/**\n * Capitalizes the first character of a string.\n *\n * @param str The string to capitalize.\n * @return The capitalized string.\n */\nconst capitalize = ( str: string ): string =>\n\tstr.charAt( 0 ).toUpperCase() + str.slice( 1 );\n\n/**\n * Converts a size value to a CSS design token property reference (with\n * fallback) or a calculated value based on the base unit.\n *\n * @param property The CSS property name.\n * @param target The design system token target.\n * @param value The size value, either a number (multiplier of base unit) or a string (token name).\n * @return A CSS value string with variable references.\n */\nconst getSpacingValue = (\n\tproperty: string,\n\ttarget: string,\n\tvalue: number | string\n): string =>\n\ttypeof value === 'number'\n\t\t? `calc(var(--wpds-dimension-base) * ${ value })`\n\t\t: `var(--wpds-dimension-${ property }-${ target }-${ value }, var(--wpds-dimension-${ property }-surface-${ value }))`;\n\n/**\n * Generates CSS styles for properties with optionally directional values,\n * normalizing single values and objects with directional keys for logical\n * properties.\n *\n * @param property The CSS property name from BoxProps.\n * @param target The design system token target.\n * @param value The property value (single or object with directional keys).\n * @return A CSSProperties object with the computed styles.\n */\nconst getDimensionVariantStyles = < T extends keyof BoxProps >(\n\tproperty: T,\n\ttarget: string,\n\tvalue: NonNullable< BoxProps[ T ] >\n): React.CSSProperties =>\n\ttypeof value !== 'object'\n\t\t? { [ property ]: getSpacingValue( property, target, value ) }\n\t\t: Object.keys( value ).reduce(\n\t\t\t\t( result, key ) => ( {\n\t\t\t\t\t...result,\n\t\t\t\t\t[ property + capitalize( key ) ]: getSpacingValue(\n\t\t\t\t\t\tproperty,\n\t\t\t\t\t\ttarget,\n\t\t\t\t\t\tvalue[ key ]\n\t\t\t\t\t),\n\t\t\t\t} ),\n\t\t\t\t{} as Record< string, string >\n\t\t );\n\n/**\n * A low-level visual primitive that provides an interface for applying design\n * token-based customization for background, text, padding, and more.\n */\nexport const Box = forwardRef< HTMLDivElement, BoxProps >( function Box(\n\t{\n\t\ttarget = 'surface',\n\t\tbackgroundColor,\n\t\tcolor,\n\t\tpadding,\n\t\tborderRadius,\n\t\tborderWidth,\n\t\tborderColor,\n\t\trender = DEFAULT_RENDER,\n\t\t...props\n\t},\n\tref\n) {\n\tconst style: React.CSSProperties = { ...props.style };\n\n\tif ( backgroundColor ) {\n\t\tstyle.backgroundColor = `var(--wpds-color-bg-${ target }-${ backgroundColor }, var(--wpds-color-bg-surface-${ backgroundColor }))`;\n\t}\n\n\tif ( color ) {\n\t\tstyle.color = `var(--wpds-color-fg-${ target }-${ color }, var(--wpds-color-fg-content-${ color }))`;\n\t}\n\n\tif ( padding ) {\n\t\tObject.assign(\n\t\t\tstyle,\n\t\t\tgetDimensionVariantStyles( 'padding', target, padding )\n\t\t);\n\t}\n\n\tif ( borderRadius ) {\n\t\tstyle.borderRadius = `var(--wpds-border-radius-${ target }-${ borderRadius }, var(--wpds-border-radius-surface-${ borderRadius }))`;\n\t}\n\n\tif ( borderWidth ) {\n\t\tstyle.borderWidth = `var(--wpds-border-width-${ target }-${ borderWidth }, var(--wpds-border-width-surface-${ borderWidth }))`;\n\t\tstyle.borderStyle = 'solid';\n\t}\n\n\tif ( borderColor ) {\n\t\tstyle.borderColor = `var(--wpds-color-stroke-${ target }-${ borderColor }, var(--wpds-color-stroke-surface-${ borderColor }))`;\n\t}\n\n\treturn renderElement< 'div' >( {\n\t\trender,\n\t\tref,\n\t\tprops: { ...props, style },\n\t} );\n} );\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA2B;AAM3B,IAAAA,kBAA8B;AAQ7B;AADD,IAAM,iBAAiB,CAAE,UACxB,4CAAC,SAAM,GAAG,OAAQ;AASnB,IAAM,aAAa,CAAE,QACpB,IAAI,OAAQ,CAAE,EAAE,YAAY,IAAI,IAAI,MAAO,CAAE;AAW9C,IAAM,kBAAkB,CACvB,UACA,QACA,UAEA,OAAO,UAAU,WACd,qCAAsC,KAAM,MAC5C,wBAAyB,QAAS,IAAK,MAAO,IAAK,KAAM,0BAA2B,QAAS,YAAa,KAAM;AAYpH,IAAM,4BAA4B,CACjC,UACA,QACA,UAEA,OAAO,UAAU,WACd,EAAE,CAAE,QAAS,GAAG,gBAAiB,UAAU,QAAQ,KAAM,EAAE,IAC3D,OAAO,KAAM,KAAM,EAAE;AAAA,EACrB,CAAE,QAAQ,SAAW;AAAA,IACpB,GAAG;AAAA,IACH,CAAE,WAAW,WAAY,GAAI,CAAE,GAAG;AAAA,MACjC;AAAA,MACA;AAAA,MACA,MAAO,GAAI;AAAA,IACZ;AAAA,EACD;AAAA,EACA,CAAC;AACD;AAMG,IAAM,UAAM,2BAAwC,SAASC,KACnE;AAAA,EACC,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,GAAG;AACJ,GACA,KACC;AACD,QAAM,QAA6B,EAAE,GAAG,MAAM,MAAM;AAEpD,MAAK,iBAAkB;AACtB,UAAM,kBAAkB,uBAAwB,MAAO,IAAK,eAAgB,iCAAkC,eAAgB;AAAA,EAC/H;AAEA,MAAK,OAAQ;AACZ,UAAM,QAAQ,uBAAwB,MAAO,IAAK,KAAM,iCAAkC,KAAM;AAAA,EACjG;AAEA,MAAK,SAAU;AACd,WAAO;AAAA,MACN;AAAA,MACA,0BAA2B,WAAW,QAAQ,OAAQ;AAAA,IACvD;AAAA,EACD;AAEA,MAAK,cAAe;AACnB,UAAM,eAAe,4BAA6B,MAAO,IAAK,YAAa,sCAAuC,YAAa;AAAA,EAChI;AAEA,MAAK,aAAc;AAClB,UAAM,cAAc,2BAA4B,MAAO,IAAK,WAAY,qCAAsC,WAAY;AAC1H,UAAM,cAAc;AAAA,EACrB;AAEA,MAAK,aAAc;AAClB,UAAM,cAAc,2BAA4B,MAAO,IAAK,WAAY,qCAAsC,WAAY;AAAA,EAC3H;AAEA,aAAO,+BAAwB;AAAA,IAC9B;AAAA,IACA;AAAA,IACA,OAAO,EAAE,GAAG,OAAO,MAAM;AAAA,EAC1B,CAAE;AACH,CAAE;",
|
|
6
|
-
"names": ["import_element", "Box"]
|
|
7
|
-
}
|
package/build/box/types.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/box/types.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport { type ComponentProps } from '../utils/types';\n\ntype SizeToken = '2xs' | 'xs' | 'sm' | 'md' | 'lg';\n\ntype Size = number | SizeToken;\n\ntype BackgroundColor =\n\t| 'neutral'\n\t| 'neutral-strong'\n\t| 'neutral-weak'\n\t| 'brand'\n\t| 'success'\n\t| 'success-weak'\n\t| 'info'\n\t| 'info-weak'\n\t| 'warning'\n\t| 'warning-weak'\n\t| 'caution'\n\t| 'caution-weak'\n\t| 'error'\n\t| 'error-weak';\n\ntype ForegroundColor =\n\t| 'neutral'\n\t| 'neutral-weak'\n\t| 'success'\n\t| 'success-weak'\n\t| 'info'\n\t| 'info-weak'\n\t| 'warning'\n\t| 'warning-weak'\n\t| 'caution'\n\t| 'caution-weak'\n\t| 'error'\n\t| 'error-weak';\n\ntype StrokeColor =\n\t| 'brand'\n\t| 'brand-strong'\n\t| 'error'\n\t| 'error-strong'\n\t| 'info'\n\t| 'info-strong'\n\t| 'neutral'\n\t| 'neutral-strong'\n\t| 'neutral-weak'\n\t| 'success'\n\t| 'success-strong'\n\t| 'warning'\n\t| 'warning-strong';\n\ntype DimensionVariant< T > = {\n\tblock?: T;\n\tblockStart?: T;\n\tblockEnd?: T;\n\tinline?: T;\n\tinlineStart?: T;\n\tinlineEnd?: T;\n};\n\nexport interface BoxProps extends ComponentProps< 'div' > {\n\t/**\n\t * The target rendering element design token grouping to use for the box.\n\t */\n\ttarget?: string;\n\n\t/**\n\t * The surface background design token for box background color.\n\t */\n\tbackgroundColor?: BackgroundColor;\n\n\t/**\n\t * The surface foreground design token for box text color.\n\t */\n\tcolor?: ForegroundColor;\n\n\t/**\n\t * The surface spacing design token or base unit multiplier for box padding.\n\t */\n\tpadding?: Size | DimensionVariant< Size >;\n\n\t/**\n\t * The surface border radius design token.\n\t */\n\tborderRadius?: Exclude< SizeToken, '2xs' >;\n\n\t/**\n\t * The surface border width design token.\n\t */\n\tborderWidth?: Exclude< SizeToken, '2xs' >;\n\n\t/**\n\t * The surface border stroke color design token.\n\t */\n\tborderColor?: StrokeColor;\n\n\t/**\n\t * The content to be rendered inside the component.\n\t */\n\tchildren?: React.ReactNode;\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/build/index.js.map
DELETED
package/build/lock-unlock.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../src/lock-unlock.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';\n\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',\n\t\t'@wordpress/dataviews'\n\t);\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,0BAAiE;AAE1D,IAAM,EAAE,MAAM,OAAO,QAC3B;AAAA,EACC;AAAA,EACA;AACD;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/build/stack/index.js.map
DELETED
package/build/stack/stack.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/stack/stack.tsx", "../../src/stack/style.module.css"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { renderElement } from '../utils/element';\nimport { type StackProps } from './types';\nimport styles from './style.module.css';\n\n/**\n * A flexible layout component using CSS Flexbox for consistent spacing and alignment.\n * Built on design tokens for predictable spacing values.\n */\nexport const Stack = forwardRef< HTMLDivElement, StackProps >( function Stack(\n\t{ direction, gap, align, justify, wrap, render, ...props },\n\tref\n) {\n\tconst className = clsx( props.className, styles.stack );\n\n\tconst style: React.CSSProperties = {\n\t\tgap: gap && `var(--wpds-dimension-gap-${ gap })`,\n\t\talignItems: align,\n\t\tjustifyContent: justify,\n\t\tflexDirection: direction,\n\t\tflexWrap: wrap,\n\t\t...props.style,\n\t};\n\n\treturn renderElement< 'div' >( {\n\t\trender,\n\t\tref,\n\t\tprops: { ...props, style, className },\n\t} );\n} );\n", "const css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;\n\n@layer wp-ui-components {\n\t.style-module__stack__Gc4EG {\n\t\tdisplay: flex;\n\t}\n}\n`;\ndocument.head\n .appendChild(document.createElement(\"style\"))\n .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n \"stack\": \"style-module__stack__Gc4EG\"\n};"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,qBAA2B;AAK3B,IAAAA,kBAA8B;;;ACb9B,IAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAe,GAAG,CAAC;AAE7C,IAAO,gBAAQ;AAAA,EACb,SAAS;AACX;;;ADOO,IAAM,YAAQ,2BAA0C,SAASC,OACvE,EAAE,WAAW,KAAK,OAAO,SAAS,MAAM,QAAQ,GAAG,MAAM,GACzD,KACC;AACD,QAAM,gBAAY,YAAAC,SAAM,MAAM,WAAW,cAAO,KAAM;AAEtD,QAAM,QAA6B;AAAA,IAClC,KAAK,OAAO,4BAA6B,GAAI;AAAA,IAC7C,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,UAAU;AAAA,IACV,GAAG,MAAM;AAAA,EACV;AAEA,aAAO,+BAAwB;AAAA,IAC9B;AAAA,IACA;AAAA,IACA,OAAO,EAAE,GAAG,OAAO,OAAO,UAAU;AAAA,EACrC,CAAE;AACH,CAAE;",
|
|
6
|
-
"names": ["import_element", "Stack", "clsx"]
|
|
7
|
-
}
|
package/build/stack/types.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/stack/types.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport { type ComponentProps } from '../utils/types';\n\nexport type SizeToken = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface StackProps extends ComponentProps< 'div' > {\n\t/**\n\t * The direction of the stack.\n\t */\n\tdirection?: Exclude<\n\t\tReact.CSSProperties[ 'flexDirection' ],\n\t\t'row-reverse' | 'column-reverse'\n\t>;\n\n\t/**\n\t * The amount of space between each child element using design system tokens.\n\t *\n\t * @default undefined\n\t */\n\tgap?: SizeToken;\n\n\t/**\n\t * The alignment of the stack items along the cross axis.\n\t *\n\t * @default 'initial'\n\t */\n\talign?: React.CSSProperties[ 'alignItems' ];\n\n\t/**\n\t * The alignment of the stack items along the main axis.\n\t *\n\t * @default 'initial'\n\t */\n\tjustify?: React.CSSProperties[ 'justifyContent' ];\n\n\t/**\n\t * Whether the stack items should wrap to the next line.\n\t */\n\twrap?: Exclude< React.CSSProperties[ 'flexWrap' ], 'wrap-reverse' >;\n\n\t/**\n\t * The content to be rendered inside the component.\n\t */\n\tchildren?: React.ReactNode;\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/utils/element.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { cloneElement, createElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ComponentProps } from './types';\n\ntype RenderProp< E extends React.ElementType > = NonNullable<\n\tComponentProps< E >[ 'render' ]\n>;\n\n/**\n * Renders an element from a render prop (a component or an element), with\n * merged props and ref.\n *\n * @param options Render options.\n * @param options.render The render prop (component or element).\n * @param options.defaultTagName The default tag name to use if no render prop\n * is provided.\n * @param options.props Props to pass to or merge with the element.\n * @param options.ref Optional ref to attach to the element.\n * @return The rendered element.\n */\nexport const renderElement = < E extends React.ElementType >( {\n\trender,\n\tdefaultTagName = 'div',\n\tprops,\n\tref,\n}: {\n\trender?: RenderProp< E >;\n\tdefaultTagName?: keyof JSX.IntrinsicElements;\n\tprops: Omit< ComponentProps< E >, 'render' >;\n\tref?: React.Ref<\n\t\tE extends keyof HTMLElementTagNameMap\n\t\t\t? HTMLElementTagNameMap[ E ]\n\t\t\t: Element\n\t>;\n} ): React.ReactElement => {\n\tconst propsWithRef = ref ? { ...props, ref } : props;\n\n\tif ( render === undefined ) {\n\t\treturn createElement( defaultTagName, propsWithRef );\n\t} else if ( typeof render === 'function' ) {\n\t\treturn render( propsWithRef );\n\t}\n\n\treturn cloneElement( render, propsWithRef );\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA4C;AAuBrC,IAAM,gBAAgB,CAAiC;AAAA,EAC7D;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AACD,MAS2B;AAC1B,QAAM,eAAe,MAAM,EAAE,GAAG,OAAO,IAAI,IAAI;AAE/C,MAAK,WAAW,QAAY;AAC3B,eAAO,8BAAe,gBAAgB,YAAa;AAAA,EACpD,WAAY,OAAO,WAAW,YAAa;AAC1C,WAAO,OAAQ,YAAa;AAAA,EAC7B;AAEA,aAAO,6BAAc,QAAQ,YAAa;AAC3C;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/box/box.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { type BoxProps } from './types';\nimport { renderElement } from '../utils/element';\n\n/**\n * Default render function that renders a div element with the given props.\n *\n * @param props The props to apply to the HTML element.\n */\nconst DEFAULT_RENDER = ( props: React.ComponentPropsWithoutRef< 'div' > ) => (\n\t<div { ...props } />\n);\n\n/**\n * Capitalizes the first character of a string.\n *\n * @param str The string to capitalize.\n * @return The capitalized string.\n */\nconst capitalize = ( str: string ): string =>\n\tstr.charAt( 0 ).toUpperCase() + str.slice( 1 );\n\n/**\n * Converts a size value to a CSS design token property reference (with\n * fallback) or a calculated value based on the base unit.\n *\n * @param property The CSS property name.\n * @param target The design system token target.\n * @param value The size value, either a number (multiplier of base unit) or a string (token name).\n * @return A CSS value string with variable references.\n */\nconst getSpacingValue = (\n\tproperty: string,\n\ttarget: string,\n\tvalue: number | string\n): string =>\n\ttypeof value === 'number'\n\t\t? `calc(var(--wpds-dimension-base) * ${ value })`\n\t\t: `var(--wpds-dimension-${ property }-${ target }-${ value }, var(--wpds-dimension-${ property }-surface-${ value }))`;\n\n/**\n * Generates CSS styles for properties with optionally directional values,\n * normalizing single values and objects with directional keys for logical\n * properties.\n *\n * @param property The CSS property name from BoxProps.\n * @param target The design system token target.\n * @param value The property value (single or object with directional keys).\n * @return A CSSProperties object with the computed styles.\n */\nconst getDimensionVariantStyles = < T extends keyof BoxProps >(\n\tproperty: T,\n\ttarget: string,\n\tvalue: NonNullable< BoxProps[ T ] >\n): React.CSSProperties =>\n\ttypeof value !== 'object'\n\t\t? { [ property ]: getSpacingValue( property, target, value ) }\n\t\t: Object.keys( value ).reduce(\n\t\t\t\t( result, key ) => ( {\n\t\t\t\t\t...result,\n\t\t\t\t\t[ property + capitalize( key ) ]: getSpacingValue(\n\t\t\t\t\t\tproperty,\n\t\t\t\t\t\ttarget,\n\t\t\t\t\t\tvalue[ key ]\n\t\t\t\t\t),\n\t\t\t\t} ),\n\t\t\t\t{} as Record< string, string >\n\t\t );\n\n/**\n * A low-level visual primitive that provides an interface for applying design\n * token-based customization for background, text, padding, and more.\n */\nexport const Box = forwardRef< HTMLDivElement, BoxProps >( function Box(\n\t{\n\t\ttarget = 'surface',\n\t\tbackgroundColor,\n\t\tcolor,\n\t\tpadding,\n\t\tborderRadius,\n\t\tborderWidth,\n\t\tborderColor,\n\t\trender = DEFAULT_RENDER,\n\t\t...props\n\t},\n\tref\n) {\n\tconst style: React.CSSProperties = { ...props.style };\n\n\tif ( backgroundColor ) {\n\t\tstyle.backgroundColor = `var(--wpds-color-bg-${ target }-${ backgroundColor }, var(--wpds-color-bg-surface-${ backgroundColor }))`;\n\t}\n\n\tif ( color ) {\n\t\tstyle.color = `var(--wpds-color-fg-${ target }-${ color }, var(--wpds-color-fg-content-${ color }))`;\n\t}\n\n\tif ( padding ) {\n\t\tObject.assign(\n\t\t\tstyle,\n\t\t\tgetDimensionVariantStyles( 'padding', target, padding )\n\t\t);\n\t}\n\n\tif ( borderRadius ) {\n\t\tstyle.borderRadius = `var(--wpds-border-radius-${ target }-${ borderRadius }, var(--wpds-border-radius-surface-${ borderRadius }))`;\n\t}\n\n\tif ( borderWidth ) {\n\t\tstyle.borderWidth = `var(--wpds-border-width-${ target }-${ borderWidth }, var(--wpds-border-width-surface-${ borderWidth }))`;\n\t\tstyle.borderStyle = 'solid';\n\t}\n\n\tif ( borderColor ) {\n\t\tstyle.borderColor = `var(--wpds-color-stroke-${ target }-${ borderColor }, var(--wpds-color-stroke-surface-${ borderColor }))`;\n\t}\n\n\treturn renderElement< 'div' >( {\n\t\trender,\n\t\tref,\n\t\tprops: { ...props, style },\n\t} );\n} );\n"],
|
|
5
|
-
"mappings": ";AAGA,SAAS,kBAAkB;AAM3B,SAAS,qBAAqB;AAQ7B;AADD,IAAM,iBAAiB,CAAE,UACxB,oBAAC,SAAM,GAAG,OAAQ;AASnB,IAAM,aAAa,CAAE,QACpB,IAAI,OAAQ,CAAE,EAAE,YAAY,IAAI,IAAI,MAAO,CAAE;AAW9C,IAAM,kBAAkB,CACvB,UACA,QACA,UAEA,OAAO,UAAU,WACd,qCAAsC,KAAM,MAC5C,wBAAyB,QAAS,IAAK,MAAO,IAAK,KAAM,0BAA2B,QAAS,YAAa,KAAM;AAYpH,IAAM,4BAA4B,CACjC,UACA,QACA,UAEA,OAAO,UAAU,WACd,EAAE,CAAE,QAAS,GAAG,gBAAiB,UAAU,QAAQ,KAAM,EAAE,IAC3D,OAAO,KAAM,KAAM,EAAE;AAAA,EACrB,CAAE,QAAQ,SAAW;AAAA,IACpB,GAAG;AAAA,IACH,CAAE,WAAW,WAAY,GAAI,CAAE,GAAG;AAAA,MACjC;AAAA,MACA;AAAA,MACA,MAAO,GAAI;AAAA,IACZ;AAAA,EACD;AAAA,EACA,CAAC;AACD;AAMG,IAAM,MAAM,WAAwC,SAASA,KACnE;AAAA,EACC,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,GAAG;AACJ,GACA,KACC;AACD,QAAM,QAA6B,EAAE,GAAG,MAAM,MAAM;AAEpD,MAAK,iBAAkB;AACtB,UAAM,kBAAkB,uBAAwB,MAAO,IAAK,eAAgB,iCAAkC,eAAgB;AAAA,EAC/H;AAEA,MAAK,OAAQ;AACZ,UAAM,QAAQ,uBAAwB,MAAO,IAAK,KAAM,iCAAkC,KAAM;AAAA,EACjG;AAEA,MAAK,SAAU;AACd,WAAO;AAAA,MACN;AAAA,MACA,0BAA2B,WAAW,QAAQ,OAAQ;AAAA,IACvD;AAAA,EACD;AAEA,MAAK,cAAe;AACnB,UAAM,eAAe,4BAA6B,MAAO,IAAK,YAAa,sCAAuC,YAAa;AAAA,EAChI;AAEA,MAAK,aAAc;AAClB,UAAM,cAAc,2BAA4B,MAAO,IAAK,WAAY,qCAAsC,WAAY;AAC1H,UAAM,cAAc;AAAA,EACrB;AAEA,MAAK,aAAc;AAClB,UAAM,cAAc,2BAA4B,MAAO,IAAK,WAAY,qCAAsC,WAAY;AAAA,EAC3H;AAEA,SAAO,cAAwB;AAAA,IAC9B;AAAA,IACA;AAAA,IACA,OAAO,EAAE,GAAG,OAAO,MAAM;AAAA,EAC1B,CAAE;AACH,CAAE;",
|
|
6
|
-
"names": ["Box"]
|
|
7
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
//# sourceMappingURL=types.js.map
|
package/build-module/index.js
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
// packages/ui/src/lock-unlock.ts
|
|
2
|
-
import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from "@wordpress/private-apis";
|
|
3
|
-
var { lock, unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
|
|
4
|
-
"I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.",
|
|
5
|
-
"@wordpress/dataviews"
|
|
6
|
-
);
|
|
7
|
-
export {
|
|
8
|
-
lock,
|
|
9
|
-
unlock
|
|
10
|
-
};
|
|
11
|
-
//# sourceMappingURL=lock-unlock.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../src/lock-unlock.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';\n\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',\n\t\t'@wordpress/dataviews'\n\t);\n"],
|
|
5
|
-
"mappings": ";AAGA,SAAS,wDAAwD;AAE1D,IAAM,EAAE,MAAM,OAAO,IAC3B;AAAA,EACC;AAAA,EACA;AACD;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/stack/stack.tsx", "../../src/stack/style.module.css"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { renderElement } from '../utils/element';\nimport { type StackProps } from './types';\nimport styles from './style.module.css';\n\n/**\n * A flexible layout component using CSS Flexbox for consistent spacing and alignment.\n * Built on design tokens for predictable spacing values.\n */\nexport const Stack = forwardRef< HTMLDivElement, StackProps >( function Stack(\n\t{ direction, gap, align, justify, wrap, render, ...props },\n\tref\n) {\n\tconst className = clsx( props.className, styles.stack );\n\n\tconst style: React.CSSProperties = {\n\t\tgap: gap && `var(--wpds-dimension-gap-${ gap })`,\n\t\talignItems: align,\n\t\tjustifyContent: justify,\n\t\tflexDirection: direction,\n\t\tflexWrap: wrap,\n\t\t...props.style,\n\t};\n\n\treturn renderElement< 'div' >( {\n\t\trender,\n\t\tref,\n\t\tprops: { ...props, style, className },\n\t} );\n} );\n", "const css = `@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;\n\n@layer wp-ui-components {\n\t.style-module__stack__Gc4EG {\n\t\tdisplay: flex;\n\t}\n}\n`;\ndocument.head\n .appendChild(document.createElement(\"style\"))\n .appendChild(document.createTextNode(css));\nexport {css};\nexport default {\n \"stack\": \"style-module__stack__Gc4EG\"\n};"],
|
|
5
|
-
"mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,kBAAkB;AAK3B,SAAS,qBAAqB;;;ACb9B,IAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAe,GAAG,CAAC;AAE7C,IAAO,gBAAQ;AAAA,EACb,SAAS;AACX;;;ADOO,IAAM,QAAQ,WAA0C,SAASA,OACvE,EAAE,WAAW,KAAK,OAAO,SAAS,MAAM,QAAQ,GAAG,MAAM,GACzD,KACC;AACD,QAAM,YAAY,KAAM,MAAM,WAAW,cAAO,KAAM;AAEtD,QAAM,QAA6B;AAAA,IAClC,KAAK,OAAO,4BAA6B,GAAI;AAAA,IAC7C,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,eAAe;AAAA,IACf,UAAU;AAAA,IACV,GAAG,MAAM;AAAA,EACV;AAEA,SAAO,cAAwB;AAAA,IAC9B;AAAA,IACA;AAAA,IACA,OAAO,EAAE,GAAG,OAAO,OAAO,UAAU;AAAA,EACrC,CAAE;AACH,CAAE;",
|
|
6
|
-
"names": ["Stack"]
|
|
7
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
//# sourceMappingURL=types.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
//# sourceMappingURL=css-modules.d.js.map
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
// packages/ui/src/utils/element.ts
|
|
2
|
-
import { cloneElement, createElement } from "@wordpress/element";
|
|
3
|
-
var renderElement = ({
|
|
4
|
-
render,
|
|
5
|
-
defaultTagName = "div",
|
|
6
|
-
props,
|
|
7
|
-
ref
|
|
8
|
-
}) => {
|
|
9
|
-
const propsWithRef = ref ? { ...props, ref } : props;
|
|
10
|
-
if (render === void 0) {
|
|
11
|
-
return createElement(defaultTagName, propsWithRef);
|
|
12
|
-
} else if (typeof render === "function") {
|
|
13
|
-
return render(propsWithRef);
|
|
14
|
-
}
|
|
15
|
-
return cloneElement(render, propsWithRef);
|
|
16
|
-
};
|
|
17
|
-
export {
|
|
18
|
-
renderElement
|
|
19
|
-
};
|
|
20
|
-
//# sourceMappingURL=element.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/utils/element.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { cloneElement, createElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ComponentProps } from './types';\n\ntype RenderProp< E extends React.ElementType > = NonNullable<\n\tComponentProps< E >[ 'render' ]\n>;\n\n/**\n * Renders an element from a render prop (a component or an element), with\n * merged props and ref.\n *\n * @param options Render options.\n * @param options.render The render prop (component or element).\n * @param options.defaultTagName The default tag name to use if no render prop\n * is provided.\n * @param options.props Props to pass to or merge with the element.\n * @param options.ref Optional ref to attach to the element.\n * @return The rendered element.\n */\nexport const renderElement = < E extends React.ElementType >( {\n\trender,\n\tdefaultTagName = 'div',\n\tprops,\n\tref,\n}: {\n\trender?: RenderProp< E >;\n\tdefaultTagName?: keyof JSX.IntrinsicElements;\n\tprops: Omit< ComponentProps< E >, 'render' >;\n\tref?: React.Ref<\n\t\tE extends keyof HTMLElementTagNameMap\n\t\t\t? HTMLElementTagNameMap[ E ]\n\t\t\t: Element\n\t>;\n} ): React.ReactElement => {\n\tconst propsWithRef = ref ? { ...props, ref } : props;\n\n\tif ( render === undefined ) {\n\t\treturn createElement( defaultTagName, propsWithRef );\n\t} else if ( typeof render === 'function' ) {\n\t\treturn render( propsWithRef );\n\t}\n\n\treturn cloneElement( render, propsWithRef );\n};\n"],
|
|
5
|
-
"mappings": ";AAGA,SAAS,cAAc,qBAAqB;AAuBrC,IAAM,gBAAgB,CAAiC;AAAA,EAC7D;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AACD,MAS2B;AAC1B,QAAM,eAAe,MAAM,EAAE,GAAG,OAAO,IAAI,IAAI;AAE/C,MAAK,WAAW,QAAY;AAC3B,WAAO,cAAe,gBAAgB,YAAa;AAAA,EACpD,WAAY,OAAO,WAAW,YAAa;AAC1C,WAAO,OAAQ,YAAa;AAAA,EAC7B;AAEA,SAAO,aAAc,QAAQ,YAAa;AAC3C;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
//# sourceMappingURL=types.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"lock-unlock.d.ts","sourceRoot":"","sources":["../src/lock-unlock.ts"],"names":[],"mappings":"AAKA,eAAO,MAAQ,IAAI,mDAAE,MAAM,iCAIzB,CAAC"}
|