@postenbring/hedwig-react 0.0.65 → 0.0.67
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/dist/_tsup-dts-rollup.d.mts +333 -178
- package/dist/_tsup-dts-rollup.d.ts +333 -178
- package/dist/accordion/index.d.mts +3 -3
- package/dist/accordion/index.d.ts +3 -3
- package/dist/accordion/index.js +8 -2
- package/dist/accordion/index.js.map +1 -1
- package/dist/accordion/index.mjs +14 -5
- package/dist/box/index.d.mts +1 -1
- package/dist/box/index.d.ts +1 -1
- package/dist/box/index.js +4 -2
- package/dist/box/index.js.map +1 -1
- package/dist/box/index.mjs +6 -3
- package/dist/card/index.d.mts +2 -2
- package/dist/card/index.d.ts +2 -2
- package/dist/card/index.js +12 -2
- package/dist/card/index.js.map +1 -1
- package/dist/card/index.mjs +14 -3
- package/dist/{chunk-POJTVNEO.mjs → chunk-2FXMUF6K.mjs} +2 -2
- package/dist/chunk-2FXMUF6K.mjs.map +1 -0
- package/dist/{chunk-DEVTAZKG.mjs → chunk-3KZOKDKP.mjs} +14 -3
- package/dist/chunk-3KZOKDKP.mjs.map +1 -0
- package/dist/{chunk-XFSZBILE.mjs → chunk-6NGF7FFY.mjs} +2 -2
- package/dist/{chunk-MUVJAMFN.mjs → chunk-B56JZJOS.mjs} +10 -8
- package/dist/chunk-B56JZJOS.mjs.map +1 -0
- package/dist/{chunk-RVJD2UZF.mjs → chunk-DFH4YKQA.mjs} +2 -2
- package/dist/chunk-DFH4YKQA.mjs.map +1 -0
- package/dist/{chunk-HXV2UMEV.mjs → chunk-DM4PJFLG.mjs} +2 -2
- package/dist/{chunk-HXV2UMEV.mjs.map → chunk-DM4PJFLG.mjs.map} +1 -1
- package/dist/{chunk-AR2NOI4U.mjs → chunk-EJ7ANN7M.mjs} +1 -1
- package/dist/{chunk-AR2NOI4U.mjs.map → chunk-EJ7ANN7M.mjs.map} +1 -1
- package/dist/chunk-F4STR6SD.mjs +18 -0
- package/dist/chunk-F4STR6SD.mjs.map +1 -0
- package/dist/{chunk-TE5M6GJB.mjs → chunk-FOZSX44S.mjs} +2 -2
- package/dist/{chunk-TE5M6GJB.mjs.map → chunk-FOZSX44S.mjs.map} +1 -1
- package/dist/chunk-G2SOAFGS.mjs +86 -0
- package/dist/chunk-G2SOAFGS.mjs.map +1 -0
- package/dist/{chunk-RLUXDZ6X.mjs → chunk-HMB4TY2F.mjs} +3 -3
- package/dist/{chunk-U2MRMUB2.mjs → chunk-K2HG7WRK.mjs} +2 -2
- package/dist/{chunk-U2MRMUB2.mjs.map → chunk-K2HG7WRK.mjs.map} +1 -1
- package/dist/{chunk-RK6BB3HH.mjs → chunk-KTRIVJM3.mjs} +2 -2
- package/dist/chunk-L4GQJETB.mjs +1 -0
- package/dist/chunk-NE6W2PCD.mjs +9 -0
- package/dist/chunk-NE6W2PCD.mjs.map +1 -0
- package/dist/{chunk-BZNDK3KJ.mjs → chunk-NMMFIRLZ.mjs} +1 -1
- package/dist/{chunk-BZNDK3KJ.mjs.map → chunk-NMMFIRLZ.mjs.map} +1 -1
- package/dist/{chunk-EHUVLDIZ.mjs → chunk-O32FZU7E.mjs} +11 -14
- package/dist/chunk-O32FZU7E.mjs.map +1 -0
- package/dist/{chunk-IAS3E2S3.mjs → chunk-PUESATBQ.mjs} +2 -2
- package/dist/chunk-QGZU7Z2W.mjs +51 -0
- package/dist/chunk-QGZU7Z2W.mjs.map +1 -0
- package/dist/{chunk-QSYU64U4.mjs → chunk-QYSLVQ4F.mjs} +2 -2
- package/dist/{chunk-QSYU64U4.mjs.map → chunk-QYSLVQ4F.mjs.map} +1 -1
- package/dist/{chunk-X7EKQZNU.mjs → chunk-RHCMBJOT.mjs} +2 -2
- package/dist/chunk-TDLSHJ4Z.mjs +1 -0
- package/dist/{chunk-SKI2APSK.mjs → chunk-TNU64NUN.mjs} +13 -7
- package/dist/chunk-TNU64NUN.mjs.map +1 -0
- package/dist/{chunk-JC6DBIFE.mjs → chunk-XE4UZBL2.mjs} +1 -1
- package/dist/{chunk-JC6DBIFE.mjs.map → chunk-XE4UZBL2.mjs.map} +1 -1
- package/dist/chunk-XFKD6EEJ.mjs +1 -0
- package/dist/chunk-XFKD6EEJ.mjs.map +1 -0
- package/dist/{chunk-LIQ3FB56.mjs → chunk-XYIY6FHW.mjs} +7 -7
- package/dist/{chunk-LIQ3FB56.mjs.map → chunk-XYIY6FHW.mjs.map} +1 -1
- package/dist/{chunk-6TI7ACBR.mjs → chunk-YC7MT6SO.mjs} +2 -2
- package/dist/{chunk-WCA2WPFS.mjs → chunk-ZL56N4UK.mjs} +14 -2
- package/dist/{chunk-WCA2WPFS.mjs.map → chunk-ZL56N4UK.mjs.map} +1 -1
- package/dist/{chunk-VFFIUNR6.mjs → chunk-ZRFDCZ62.mjs} +5 -5
- package/dist/chunk-ZRFDCZ62.mjs.map +1 -0
- package/dist/footer/footer.js +9 -12
- package/dist/footer/footer.js.map +1 -1
- package/dist/footer/footer.mjs +5 -5
- package/dist/footer/index.d.mts +3 -3
- package/dist/footer/index.d.ts +3 -3
- package/dist/footer/index.js +19 -14
- package/dist/footer/index.js.map +1 -1
- package/dist/footer/index.mjs +16 -7
- package/dist/form/checkbox/checkbox.js +1 -1
- package/dist/form/checkbox/checkbox.js.map +1 -1
- package/dist/form/checkbox/checkbox.mjs +2 -2
- package/dist/form/checkbox/index.js +1 -1
- package/dist/form/checkbox/index.js.map +1 -1
- package/dist/form/checkbox/index.mjs +2 -2
- package/dist/form/date-picker/date-picker.d.mts +2 -0
- package/dist/form/date-picker/date-picker.d.ts +2 -0
- package/dist/form/date-picker/date-picker.js +265 -0
- package/dist/form/date-picker/date-picker.js.map +1 -0
- package/dist/form/date-picker/date-picker.mjs +13 -0
- package/dist/form/date-picker/date-picker.mjs.map +1 -0
- package/dist/form/date-picker/index.d.mts +2 -0
- package/dist/form/date-picker/index.d.ts +2 -0
- package/dist/form/date-picker/index.js +267 -0
- package/dist/form/date-picker/index.js.map +1 -0
- package/dist/form/date-picker/index.mjs +14 -0
- package/dist/form/date-picker/index.mjs.map +1 -0
- package/dist/form/fieldset/fieldset.js +1 -1
- package/dist/form/fieldset/fieldset.js.map +1 -1
- package/dist/form/fieldset/fieldset.mjs +1 -1
- package/dist/form/fieldset/index.js +1 -1
- package/dist/form/fieldset/index.js.map +1 -1
- package/dist/form/fieldset/index.mjs +1 -1
- package/dist/form/index.d.mts +10 -8
- package/dist/form/index.d.ts +10 -8
- package/dist/form/index.js +240 -132
- package/dist/form/index.js.map +1 -1
- package/dist/form/index.mjs +20 -14
- package/dist/form/input/index.js +12 -6
- package/dist/form/input/index.js.map +1 -1
- package/dist/form/input/index.mjs +2 -2
- package/dist/form/input/input.js +12 -6
- package/dist/form/input/input.js.map +1 -1
- package/dist/form/input/input.mjs +2 -2
- package/dist/form/input-group/index.js +12 -6
- package/dist/form/input-group/index.js.map +1 -1
- package/dist/form/input-group/index.mjs +1 -1
- package/dist/form/input-group/input-group.js +12 -6
- package/dist/form/input-group/input-group.js.map +1 -1
- package/dist/form/input-group/input-group.mjs +1 -1
- package/dist/form/radiobutton/index.js +1 -1
- package/dist/form/radiobutton/index.js.map +1 -1
- package/dist/form/radiobutton/index.mjs +3 -3
- package/dist/form/radiobutton/radiobutton.js +1 -1
- package/dist/form/radiobutton/radiobutton.js.map +1 -1
- package/dist/form/radiobutton/radiobutton.mjs +3 -3
- package/dist/form/radiobutton/radiogroup.js +1 -1
- package/dist/form/radiobutton/radiogroup.js.map +1 -1
- package/dist/form/radiobutton/radiogroup.mjs +2 -2
- package/dist/form/select/index.js +12 -6
- package/dist/form/select/index.js.map +1 -1
- package/dist/form/select/index.mjs +2 -2
- package/dist/form/select/select.js +12 -6
- package/dist/form/select/select.js.map +1 -1
- package/dist/form/select/select.mjs +2 -2
- package/dist/form/textarea/index.js +12 -6
- package/dist/form/textarea/index.js.map +1 -1
- package/dist/form/textarea/index.mjs +2 -2
- package/dist/form/textarea/textarea.js +12 -6
- package/dist/form/textarea/textarea.js.map +1 -1
- package/dist/form/textarea/textarea.mjs +2 -2
- package/dist/index-no-css.d.mts +36 -28
- package/dist/index-no-css.d.ts +36 -28
- package/dist/index-no-css.js +614 -409
- package/dist/index-no-css.js.map +1 -1
- package/dist/index-no-css.mjs +130 -52
- package/dist/index.d.mts +36 -28
- package/dist/index.d.ts +36 -28
- package/dist/index.js +614 -409
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +130 -52
- package/dist/index.mjs.map +1 -1
- package/dist/layout/index.d.mts +5 -1
- package/dist/layout/index.d.ts +5 -1
- package/dist/layout/index.js +62 -2
- package/dist/layout/index.js.map +1 -1
- package/dist/layout/index.mjs +12 -2
- package/dist/layout/responsive.d.mts +2 -0
- package/dist/layout/responsive.d.ts +2 -0
- package/dist/layout/responsive.js +42 -0
- package/dist/layout/responsive.js.map +1 -0
- package/dist/layout/responsive.mjs +8 -0
- package/dist/layout/responsive.mjs.map +1 -0
- package/dist/layout/spacing.d.mts +3 -0
- package/dist/layout/spacing.d.ts +3 -0
- package/dist/layout/spacing.js +33 -0
- package/dist/layout/spacing.js.map +1 -0
- package/dist/layout/spacing.mjs +8 -0
- package/dist/layout/spacing.mjs.map +1 -0
- package/dist/layout/stack/index.d.mts +4 -0
- package/dist/layout/stack/index.d.ts +4 -0
- package/dist/layout/stack/index.js +117 -0
- package/dist/layout/stack/index.js.map +1 -0
- package/dist/layout/stack/index.mjs +14 -0
- package/dist/layout/stack/index.mjs.map +1 -0
- package/dist/layout/stack/stack.d.mts +4 -0
- package/dist/layout/stack/stack.d.ts +4 -0
- package/dist/layout/stack/stack.js +115 -0
- package/dist/layout/stack/stack.js.map +1 -0
- package/dist/layout/stack/stack.mjs +14 -0
- package/dist/layout/stack/stack.mjs.map +1 -0
- package/dist/message/index.d.mts +2 -0
- package/dist/message/index.d.ts +2 -0
- package/dist/message/index.js +6 -2
- package/dist/message/index.js.map +1 -1
- package/dist/message/index.mjs +8 -3
- package/dist/message/message.d.mts +2 -2
- package/dist/message/message.d.ts +2 -2
- package/dist/modal/index.d.mts +2 -2
- package/dist/modal/index.d.ts +2 -2
- package/dist/modal/index.js +8 -2
- package/dist/modal/index.js.map +1 -1
- package/dist/modal/index.mjs +11 -4
- package/dist/modal/modal.js.map +1 -1
- package/dist/modal/modal.mjs +2 -2
- package/dist/navbar/index.d.mts +3 -3
- package/dist/navbar/index.d.ts +3 -3
- package/dist/navbar/index.js +42 -11
- package/dist/navbar/index.js.map +1 -1
- package/dist/navbar/index.mjs +13 -3
- package/dist/navbar/navbar-expandable-menu.js +34 -11
- package/dist/navbar/navbar-expandable-menu.js.map +1 -1
- package/dist/navbar/navbar-expandable-menu.mjs +2 -1
- package/dist/tabs/index.d.mts +5 -5
- package/dist/tabs/index.d.ts +5 -5
- package/dist/tabs/index.js +26 -6
- package/dist/tabs/index.js.map +1 -1
- package/dist/tabs/index.mjs +15 -5
- package/dist/tabs/tabs-list.d.mts +2 -2
- package/dist/tabs/tabs-list.d.ts +2 -2
- package/dist/tabs/tabs-list.js +19 -7
- package/dist/tabs/tabs-list.js.map +1 -1
- package/dist/tabs/tabs-list.mjs +6 -6
- package/dist/utils.d.mts +1 -0
- package/dist/utils.d.ts +1 -0
- package/dist/utils.js +13 -0
- package/dist/utils.js.map +1 -1
- package/dist/utils.mjs +3 -1
- package/dist/warning-banner/index.js.map +1 -1
- package/dist/warning-banner/index.mjs +2 -2
- package/dist/warning-banner/warning-banner.js.map +1 -1
- package/dist/warning-banner/warning-banner.mjs +2 -2
- package/package.json +4 -4
- package/dist/chunk-DEVTAZKG.mjs.map +0 -1
- package/dist/chunk-EHUVLDIZ.mjs.map +0 -1
- package/dist/chunk-MUVJAMFN.mjs.map +0 -1
- package/dist/chunk-OIQUYB26.mjs +0 -1
- package/dist/chunk-POJTVNEO.mjs.map +0 -1
- package/dist/chunk-RVJD2UZF.mjs.map +0 -1
- package/dist/chunk-SKI2APSK.mjs.map +0 -1
- package/dist/chunk-T24JZIQO.mjs +0 -1
- package/dist/chunk-VFFIUNR6.mjs.map +0 -1
- /package/dist/{chunk-XFSZBILE.mjs.map → chunk-6NGF7FFY.mjs.map} +0 -0
- /package/dist/{chunk-RLUXDZ6X.mjs.map → chunk-HMB4TY2F.mjs.map} +0 -0
- /package/dist/{chunk-RK6BB3HH.mjs.map → chunk-KTRIVJM3.mjs.map} +0 -0
- /package/dist/{chunk-OIQUYB26.mjs.map → chunk-L4GQJETB.mjs.map} +0 -0
- /package/dist/{chunk-IAS3E2S3.mjs.map → chunk-PUESATBQ.mjs.map} +0 -0
- /package/dist/{chunk-X7EKQZNU.mjs.map → chunk-RHCMBJOT.mjs.map} +0 -0
- /package/dist/{chunk-T24JZIQO.mjs.map → chunk-TDLSHJ4Z.mjs.map} +0 -0
- /package/dist/{chunk-6TI7ACBR.mjs.map → chunk-YC7MT6SO.mjs.map} +0 -0
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
10
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
11
|
+
var __spreadValues = (a, b) => {
|
|
12
|
+
for (var prop in b || (b = {}))
|
|
13
|
+
if (__hasOwnProp.call(b, prop))
|
|
14
|
+
__defNormalProp(a, prop, b[prop]);
|
|
15
|
+
if (__getOwnPropSymbols)
|
|
16
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
17
|
+
if (__propIsEnum.call(b, prop))
|
|
18
|
+
__defNormalProp(a, prop, b[prop]);
|
|
19
|
+
}
|
|
20
|
+
return a;
|
|
21
|
+
};
|
|
22
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
23
|
+
var __objRest = (source, exclude) => {
|
|
24
|
+
var target = {};
|
|
25
|
+
for (var prop in source)
|
|
26
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
27
|
+
target[prop] = source[prop];
|
|
28
|
+
if (source != null && __getOwnPropSymbols)
|
|
29
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
30
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
31
|
+
target[prop] = source[prop];
|
|
32
|
+
}
|
|
33
|
+
return target;
|
|
34
|
+
};
|
|
35
|
+
var __export = (target, all) => {
|
|
36
|
+
for (var name in all)
|
|
37
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
38
|
+
};
|
|
39
|
+
var __copyProps = (to, from, except, desc) => {
|
|
40
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
41
|
+
for (let key of __getOwnPropNames(from))
|
|
42
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
43
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
44
|
+
}
|
|
45
|
+
return to;
|
|
46
|
+
};
|
|
47
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
48
|
+
|
|
49
|
+
// src/layout/stack/index.tsx
|
|
50
|
+
var stack_exports = {};
|
|
51
|
+
__export(stack_exports, {
|
|
52
|
+
HStack: () => HStack,
|
|
53
|
+
Stack: () => Stack,
|
|
54
|
+
VStack: () => VStack
|
|
55
|
+
});
|
|
56
|
+
module.exports = __toCommonJS(stack_exports);
|
|
57
|
+
|
|
58
|
+
// src/layout/stack/stack.tsx
|
|
59
|
+
var React = require("react");
|
|
60
|
+
var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
|
|
61
|
+
var import_react = require("react");
|
|
62
|
+
var import_react_slot = require("@radix-ui/react-slot");
|
|
63
|
+
|
|
64
|
+
// src/layout/spacing.ts
|
|
65
|
+
function getSpacingVariable(size) {
|
|
66
|
+
return `var(--hds-spacing-${size})`;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
// src/layout/responsive.ts
|
|
70
|
+
function getResponsiveProps(variable, inputValues, valueTransformer = (value) => String(value)) {
|
|
71
|
+
if (!inputValues)
|
|
72
|
+
return {};
|
|
73
|
+
if (typeof inputValues !== "object") {
|
|
74
|
+
return { [`${variable}-initial`]: valueTransformer(inputValues) };
|
|
75
|
+
}
|
|
76
|
+
const result = {};
|
|
77
|
+
for (const [key, value] of Object.entries(inputValues)) {
|
|
78
|
+
result[`${variable}-${key}`] = valueTransformer(value);
|
|
79
|
+
}
|
|
80
|
+
return result;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
// src/layout/stack/stack.tsx
|
|
84
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
85
|
+
var Stack = (0, import_react.forwardRef)(
|
|
86
|
+
(_a, ref) => {
|
|
87
|
+
var _b = _a, { children, asChild, className, style: _style, gap, direction, wrap, align, justify } = _b, rest = __objRest(_b, ["children", "asChild", "className", "style", "gap", "direction", "wrap", "align", "justify"]);
|
|
88
|
+
const Component = asChild ? import_react_slot.Slot : "div";
|
|
89
|
+
const style = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-stack-gap", gap, getSpacingVariable)), getResponsiveProps("--hds-stack-direction", direction)), getResponsiveProps("--hds-stack-wrap", wrap, (value) => value ? "wrap" : "nowrap")), getResponsiveProps("--hds-stack-align", align)), getResponsiveProps("--hds-stack-justify", justify));
|
|
90
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
91
|
+
Component,
|
|
92
|
+
__spreadProps(__spreadValues({
|
|
93
|
+
style,
|
|
94
|
+
className: (0, import_typed_classname.clsx)("hds-stack", className),
|
|
95
|
+
ref
|
|
96
|
+
}, rest), {
|
|
97
|
+
children
|
|
98
|
+
})
|
|
99
|
+
);
|
|
100
|
+
}
|
|
101
|
+
);
|
|
102
|
+
Stack.displayName = "Stack";
|
|
103
|
+
var HStack = (0, import_react.forwardRef)((props, ref) => {
|
|
104
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "row" }));
|
|
105
|
+
});
|
|
106
|
+
HStack.displayName = "HStack";
|
|
107
|
+
var VStack = (0, import_react.forwardRef)((props, ref) => {
|
|
108
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "column" }));
|
|
109
|
+
});
|
|
110
|
+
VStack.displayName = "VStack";
|
|
111
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
112
|
+
0 && (module.exports = {
|
|
113
|
+
HStack,
|
|
114
|
+
Stack,
|
|
115
|
+
VStack
|
|
116
|
+
});
|
|
117
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/layout/stack/index.tsx","../../../src/layout/stack/stack.tsx","../../../src/layout/spacing.ts","../../../src/layout/responsive.ts"],"sourcesContent":["export { Stack, HStack, VStack } from \"./stack\";\nexport type * from \"./stack\";\n","import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { getSpacingVariable, type ResponsiveSpacingSizes, type SpacingSizes } from \"../spacing\";\nimport { getResponsiveProps, type ResponsiveProp } from \"../responsive\";\n\ntype CSSPropertiesWithVar = React.CSSProperties & {\n \"--hds-stack-gap\"?: string;\n \"--hds-stack-direction\"?: string;\n \"--hds-stack-wrap\"?: string;\n \"--hds-stack-align\"?: string;\n \"--hds-stack-justify\"?: string;\n};\n\nexport interface StackProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n\n gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n direction?: ResponsiveProp<React.CSSProperties[\"flexDirection\"]>;\n wrap?: ResponsiveProp<boolean>;\n align?: ResponsiveProp<React.CSSProperties[\"alignItems\"]>;\n justify?: ResponsiveProp<React.CSSProperties[\"justifyContent\"]>;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean;\n}\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const Stack = forwardRef<HTMLDivElement, StackProps>(\n (\n { children, asChild, className, style: _style, gap, direction, wrap, align, justify, ...rest },\n ref,\n ) => {\n const Component = asChild ? Slot : \"div\";\n const style: CSSPropertiesWithVar = {\n ..._style,\n ...getResponsiveProps(\"--hds-stack-gap\", gap, getSpacingVariable),\n ...getResponsiveProps(\"--hds-stack-direction\", direction),\n ...getResponsiveProps(\"--hds-stack-wrap\", wrap, (value) => (value ? \"wrap\" : \"nowrap\")),\n ...getResponsiveProps(\"--hds-stack-align\", align),\n ...getResponsiveProps(\"--hds-stack-justify\", justify),\n };\n return (\n <Component\n style={style}\n className={clsx(\"hds-stack\", className as undefined)}\n ref={ref}\n {...rest}\n >\n {children}\n </Component>\n );\n },\n);\nStack.displayName = \"Stack\";\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const HStack = forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>((props, ref) => {\n return <Stack ref={ref} {...props} direction=\"row\" />;\n});\nHStack.displayName = \"HStack\";\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const VStack = forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>((props, ref) => {\n return <Stack ref={ref} {...props} direction=\"column\" />;\n});\nVStack.displayName = \"VStack\";\n","// TODO: Get from tokens package\n// For now it's fine, since it's still in this monorepo\nconst spacingSizes = {\n \"4\": \"4\",\n \"8\": \"8\",\n \"12\": \"12\",\n \"16\": \"16\",\n \"20\": \"20\",\n \"24\": \"24\",\n \"32\": \"32\",\n \"40\": \"40\",\n \"48\": \"48\",\n \"64\": \"64\",\n \"80\": \"80\",\n \"120\": \"120\",\n} as const;\nexport type SpacingSizes = keyof typeof spacingSizes;\n\nconst responsiveSpacingSizes = {\n \"4-8\": \"4-8\",\n \"8-12\": \"8-12\",\n \"12-16\": \"12-16\",\n \"16-20\": \"16-20\",\n \"20-24\": \"20-24\",\n \"24-32\": \"24-32\",\n \"32-40\": \"32-40\",\n \"40-48\": \"40-48\",\n \"48-64\": \"48-64\",\n \"64-80\": \"64-80\",\n \"80-120\": \"80-120\",\n \"120-160\": \"120-160\",\n} as const;\nexport type ResponsiveSpacingSizes = keyof typeof responsiveSpacingSizes;\n\nexport function getSpacingVariable(size: SpacingSizes | ResponsiveSpacingSizes) {\n return `var(--hds-spacing-${size})`;\n}\n","type Breakpoints = \"initial\" | \"small\" | \"medium\" | \"large\" | \"xlarge\";\n\ntype ResponsiveValues<T> = {\n [Breakpoint in Breakpoints]?: T;\n};\n\nexport type ResponsiveProp<T> = T | ResponsiveValues<T>;\n\nexport function getResponsiveProps<T>(\n variable: `--hds-${string}`,\n inputValues?: ResponsiveProp<T>,\n valueTransformer: (value: T) => string = (value) => String(value),\n) {\n if (!inputValues) return {};\n\n if (typeof inputValues !== \"object\") {\n return { [`${variable}-initial`]: valueTransformer(inputValues) };\n }\n\n const result: Record<string, string> = {};\n for (const [key, value] of Object.entries(inputValues as ResponsiveValues<T>)) {\n result[`${variable}-${key}`] = valueTransformer(value);\n }\n\n return result;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,6BAAqB;AACrB,mBAA2B;AAC3B,wBAAqB;;;AC+Bd,SAAS,mBAAmB,MAA6C;AAC9E,SAAO,qBAAqB,IAAI;AAClC;;;AC5BO,SAAS,mBACd,UACA,aACA,mBAAyC,CAAC,UAAU,OAAO,KAAK,GAChE;AACA,MAAI,CAAC;AAAa,WAAO,CAAC;AAE1B,MAAI,OAAO,gBAAgB,UAAU;AACnC,WAAO,EAAE,CAAC,GAAG,QAAQ,UAAU,GAAG,iBAAiB,WAAW,EAAE;AAAA,EAClE;AAEA,QAAM,SAAiC,CAAC;AACxC,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,WAAkC,GAAG;AAC7E,WAAO,GAAG,QAAQ,IAAI,GAAG,EAAE,IAAI,iBAAiB,KAAK;AAAA,EACvD;AAEA,SAAO;AACT;;;AF4BM;AAfC,IAAM,YAAQ;AAAA,EACnB,CACE,IACA,QACG;AAFH,iBAAE,YAAU,SAAS,WAAW,OAAO,QAAQ,KAAK,WAAW,MAAM,OAAO,QAxChF,IAwCI,IAAwF,iBAAxF,IAAwF,CAAtF,YAAU,WAAS,aAAW,SAAe,OAAK,aAAW,QAAM,SAAO;AAG5E,UAAM,YAAY,UAAU,yBAAO;AACnC,UAAM,QAA8B,8FAC/B,SACA,mBAAmB,mBAAmB,KAAK,kBAAkB,IAC7D,mBAAmB,yBAAyB,SAAS,IACrD,mBAAmB,oBAAoB,MAAM,CAAC,UAAW,QAAQ,SAAS,QAAS,IACnF,mBAAmB,qBAAqB,KAAK,IAC7C,mBAAmB,uBAAuB,OAAO;AAEtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,6BAAK,aAAa,SAAsB;AAAA,QACnD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;AAUb,IAAM,aAAS,yBAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,4CAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,QAAM;AACrD,CAAC;AACD,OAAO,cAAc;AAUd,IAAM,aAAS,yBAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,4CAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,WAAS;AACxD,CAAC;AACD,OAAO,cAAc;","names":[]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import {
|
|
2
|
+
HStack,
|
|
3
|
+
Stack,
|
|
4
|
+
VStack
|
|
5
|
+
} from "../../chunk-QGZU7Z2W.mjs";
|
|
6
|
+
import "../../chunk-F4STR6SD.mjs";
|
|
7
|
+
import "../../chunk-NE6W2PCD.mjs";
|
|
8
|
+
import "../../chunk-R4SQKVDQ.mjs";
|
|
9
|
+
export {
|
|
10
|
+
HStack,
|
|
11
|
+
Stack,
|
|
12
|
+
VStack
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { StackProps_alias_4 as StackProps } from '../../_tsup-dts-rollup';
|
|
2
|
+
export { Stack_alias_4 as Stack } from '../../_tsup-dts-rollup';
|
|
3
|
+
export { HStack_alias_4 as HStack } from '../../_tsup-dts-rollup';
|
|
4
|
+
export { VStack_alias_4 as VStack } from '../../_tsup-dts-rollup';
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { StackProps_alias_4 as StackProps } from '../../_tsup-dts-rollup';
|
|
2
|
+
export { Stack_alias_4 as Stack } from '../../_tsup-dts-rollup';
|
|
3
|
+
export { HStack_alias_4 as HStack } from '../../_tsup-dts-rollup';
|
|
4
|
+
export { VStack_alias_4 as VStack } from '../../_tsup-dts-rollup';
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
10
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
11
|
+
var __spreadValues = (a, b) => {
|
|
12
|
+
for (var prop in b || (b = {}))
|
|
13
|
+
if (__hasOwnProp.call(b, prop))
|
|
14
|
+
__defNormalProp(a, prop, b[prop]);
|
|
15
|
+
if (__getOwnPropSymbols)
|
|
16
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
17
|
+
if (__propIsEnum.call(b, prop))
|
|
18
|
+
__defNormalProp(a, prop, b[prop]);
|
|
19
|
+
}
|
|
20
|
+
return a;
|
|
21
|
+
};
|
|
22
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
23
|
+
var __objRest = (source, exclude) => {
|
|
24
|
+
var target = {};
|
|
25
|
+
for (var prop in source)
|
|
26
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
27
|
+
target[prop] = source[prop];
|
|
28
|
+
if (source != null && __getOwnPropSymbols)
|
|
29
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
30
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
31
|
+
target[prop] = source[prop];
|
|
32
|
+
}
|
|
33
|
+
return target;
|
|
34
|
+
};
|
|
35
|
+
var __export = (target, all) => {
|
|
36
|
+
for (var name in all)
|
|
37
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
38
|
+
};
|
|
39
|
+
var __copyProps = (to, from, except, desc) => {
|
|
40
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
41
|
+
for (let key of __getOwnPropNames(from))
|
|
42
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
43
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
44
|
+
}
|
|
45
|
+
return to;
|
|
46
|
+
};
|
|
47
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
48
|
+
|
|
49
|
+
// src/layout/stack/stack.tsx
|
|
50
|
+
var stack_exports = {};
|
|
51
|
+
__export(stack_exports, {
|
|
52
|
+
HStack: () => HStack,
|
|
53
|
+
Stack: () => Stack,
|
|
54
|
+
VStack: () => VStack
|
|
55
|
+
});
|
|
56
|
+
module.exports = __toCommonJS(stack_exports);
|
|
57
|
+
var React = require("react");
|
|
58
|
+
var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
|
|
59
|
+
var import_react = require("react");
|
|
60
|
+
var import_react_slot = require("@radix-ui/react-slot");
|
|
61
|
+
|
|
62
|
+
// src/layout/spacing.ts
|
|
63
|
+
function getSpacingVariable(size) {
|
|
64
|
+
return `var(--hds-spacing-${size})`;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// src/layout/responsive.ts
|
|
68
|
+
function getResponsiveProps(variable, inputValues, valueTransformer = (value) => String(value)) {
|
|
69
|
+
if (!inputValues)
|
|
70
|
+
return {};
|
|
71
|
+
if (typeof inputValues !== "object") {
|
|
72
|
+
return { [`${variable}-initial`]: valueTransformer(inputValues) };
|
|
73
|
+
}
|
|
74
|
+
const result = {};
|
|
75
|
+
for (const [key, value] of Object.entries(inputValues)) {
|
|
76
|
+
result[`${variable}-${key}`] = valueTransformer(value);
|
|
77
|
+
}
|
|
78
|
+
return result;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
// src/layout/stack/stack.tsx
|
|
82
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
83
|
+
var Stack = (0, import_react.forwardRef)(
|
|
84
|
+
(_a, ref) => {
|
|
85
|
+
var _b = _a, { children, asChild, className, style: _style, gap, direction, wrap, align, justify } = _b, rest = __objRest(_b, ["children", "asChild", "className", "style", "gap", "direction", "wrap", "align", "justify"]);
|
|
86
|
+
const Component = asChild ? import_react_slot.Slot : "div";
|
|
87
|
+
const style = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, _style), getResponsiveProps("--hds-stack-gap", gap, getSpacingVariable)), getResponsiveProps("--hds-stack-direction", direction)), getResponsiveProps("--hds-stack-wrap", wrap, (value) => value ? "wrap" : "nowrap")), getResponsiveProps("--hds-stack-align", align)), getResponsiveProps("--hds-stack-justify", justify));
|
|
88
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
89
|
+
Component,
|
|
90
|
+
__spreadProps(__spreadValues({
|
|
91
|
+
style,
|
|
92
|
+
className: (0, import_typed_classname.clsx)("hds-stack", className),
|
|
93
|
+
ref
|
|
94
|
+
}, rest), {
|
|
95
|
+
children
|
|
96
|
+
})
|
|
97
|
+
);
|
|
98
|
+
}
|
|
99
|
+
);
|
|
100
|
+
Stack.displayName = "Stack";
|
|
101
|
+
var HStack = (0, import_react.forwardRef)((props, ref) => {
|
|
102
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "row" }));
|
|
103
|
+
});
|
|
104
|
+
HStack.displayName = "HStack";
|
|
105
|
+
var VStack = (0, import_react.forwardRef)((props, ref) => {
|
|
106
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stack, __spreadProps(__spreadValues({ ref }, props), { direction: "column" }));
|
|
107
|
+
});
|
|
108
|
+
VStack.displayName = "VStack";
|
|
109
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
110
|
+
0 && (module.exports = {
|
|
111
|
+
HStack,
|
|
112
|
+
Stack,
|
|
113
|
+
VStack
|
|
114
|
+
});
|
|
115
|
+
//# sourceMappingURL=stack.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/layout/stack/stack.tsx","../../../src/layout/spacing.ts","../../../src/layout/responsive.ts"],"sourcesContent":["import * as React from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { getSpacingVariable, type ResponsiveSpacingSizes, type SpacingSizes } from \"../spacing\";\nimport { getResponsiveProps, type ResponsiveProp } from \"../responsive\";\n\ntype CSSPropertiesWithVar = React.CSSProperties & {\n \"--hds-stack-gap\"?: string;\n \"--hds-stack-direction\"?: string;\n \"--hds-stack-wrap\"?: string;\n \"--hds-stack-align\"?: string;\n \"--hds-stack-justify\"?: string;\n};\n\nexport interface StackProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode;\n\n gap?: ResponsiveProp<SpacingSizes> | ResponsiveSpacingSizes;\n direction?: ResponsiveProp<React.CSSProperties[\"flexDirection\"]>;\n wrap?: ResponsiveProp<boolean>;\n align?: ResponsiveProp<React.CSSProperties[\"alignItems\"]>;\n justify?: ResponsiveProp<React.CSSProperties[\"justifyContent\"]>;\n\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean;\n}\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const Stack = forwardRef<HTMLDivElement, StackProps>(\n (\n { children, asChild, className, style: _style, gap, direction, wrap, align, justify, ...rest },\n ref,\n ) => {\n const Component = asChild ? Slot : \"div\";\n const style: CSSPropertiesWithVar = {\n ..._style,\n ...getResponsiveProps(\"--hds-stack-gap\", gap, getSpacingVariable),\n ...getResponsiveProps(\"--hds-stack-direction\", direction),\n ...getResponsiveProps(\"--hds-stack-wrap\", wrap, (value) => (value ? \"wrap\" : \"nowrap\")),\n ...getResponsiveProps(\"--hds-stack-align\", align),\n ...getResponsiveProps(\"--hds-stack-justify\", justify),\n };\n return (\n <Component\n style={style}\n className={clsx(\"hds-stack\", className as undefined)}\n ref={ref}\n {...rest}\n >\n {children}\n </Component>\n );\n },\n);\nStack.displayName = \"Stack\";\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const HStack = forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>((props, ref) => {\n return <Stack ref={ref} {...props} direction=\"row\" />;\n});\nHStack.displayName = \"HStack\";\n\n/**\n * 🚨 WORK IN PROGRESS 🚨\n *\n * TODO\n * - [ ] Add more examples\n * - [ ] Document usage\n * - [ ] Document props\n */\nexport const VStack = forwardRef<HTMLDivElement, Omit<StackProps, \"direction\">>((props, ref) => {\n return <Stack ref={ref} {...props} direction=\"column\" />;\n});\nVStack.displayName = \"VStack\";\n","// TODO: Get from tokens package\n// For now it's fine, since it's still in this monorepo\nconst spacingSizes = {\n \"4\": \"4\",\n \"8\": \"8\",\n \"12\": \"12\",\n \"16\": \"16\",\n \"20\": \"20\",\n \"24\": \"24\",\n \"32\": \"32\",\n \"40\": \"40\",\n \"48\": \"48\",\n \"64\": \"64\",\n \"80\": \"80\",\n \"120\": \"120\",\n} as const;\nexport type SpacingSizes = keyof typeof spacingSizes;\n\nconst responsiveSpacingSizes = {\n \"4-8\": \"4-8\",\n \"8-12\": \"8-12\",\n \"12-16\": \"12-16\",\n \"16-20\": \"16-20\",\n \"20-24\": \"20-24\",\n \"24-32\": \"24-32\",\n \"32-40\": \"32-40\",\n \"40-48\": \"40-48\",\n \"48-64\": \"48-64\",\n \"64-80\": \"64-80\",\n \"80-120\": \"80-120\",\n \"120-160\": \"120-160\",\n} as const;\nexport type ResponsiveSpacingSizes = keyof typeof responsiveSpacingSizes;\n\nexport function getSpacingVariable(size: SpacingSizes | ResponsiveSpacingSizes) {\n return `var(--hds-spacing-${size})`;\n}\n","type Breakpoints = \"initial\" | \"small\" | \"medium\" | \"large\" | \"xlarge\";\n\ntype ResponsiveValues<T> = {\n [Breakpoint in Breakpoints]?: T;\n};\n\nexport type ResponsiveProp<T> = T | ResponsiveValues<T>;\n\nexport function getResponsiveProps<T>(\n variable: `--hds-${string}`,\n inputValues?: ResponsiveProp<T>,\n valueTransformer: (value: T) => string = (value) => String(value),\n) {\n if (!inputValues) return {};\n\n if (typeof inputValues !== \"object\") {\n return { [`${variable}-initial`]: valueTransformer(inputValues) };\n }\n\n const result: Record<string, string> = {};\n for (const [key, value] of Object.entries(inputValues as ResponsiveValues<T>)) {\n result[`${variable}-${key}`] = valueTransformer(value);\n }\n\n return result;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,6BAAqB;AACrB,mBAA2B;AAC3B,wBAAqB;;;AC+Bd,SAAS,mBAAmB,MAA6C;AAC9E,SAAO,qBAAqB,IAAI;AAClC;;;AC5BO,SAAS,mBACd,UACA,aACA,mBAAyC,CAAC,UAAU,OAAO,KAAK,GAChE;AACA,MAAI,CAAC;AAAa,WAAO,CAAC;AAE1B,MAAI,OAAO,gBAAgB,UAAU;AACnC,WAAO,EAAE,CAAC,GAAG,QAAQ,UAAU,GAAG,iBAAiB,WAAW,EAAE;AAAA,EAClE;AAEA,QAAM,SAAiC,CAAC;AACxC,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,WAAkC,GAAG;AAC7E,WAAO,GAAG,QAAQ,IAAI,GAAG,EAAE,IAAI,iBAAiB,KAAK;AAAA,EACvD;AAEA,SAAO;AACT;;;AF4BM;AAfC,IAAM,YAAQ;AAAA,EACnB,CACE,IACA,QACG;AAFH,iBAAE,YAAU,SAAS,WAAW,OAAO,QAAQ,KAAK,WAAW,MAAM,OAAO,QAxChF,IAwCI,IAAwF,iBAAxF,IAAwF,CAAtF,YAAU,WAAS,aAAW,SAAe,OAAK,aAAW,QAAM,SAAO;AAG5E,UAAM,YAAY,UAAU,yBAAO;AACnC,UAAM,QAA8B,8FAC/B,SACA,mBAAmB,mBAAmB,KAAK,kBAAkB,IAC7D,mBAAmB,yBAAyB,SAAS,IACrD,mBAAmB,oBAAoB,MAAM,CAAC,UAAW,QAAQ,SAAS,QAAS,IACnF,mBAAmB,qBAAqB,KAAK,IAC7C,mBAAmB,uBAAuB,OAAO;AAEtD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,6BAAK,aAAa,SAAsB;AAAA,QACnD;AAAA,SACI,OAJL;AAAA,QAME;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;AAUb,IAAM,aAAS,yBAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,4CAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,QAAM;AACrD,CAAC;AACD,OAAO,cAAc;AAUd,IAAM,aAAS,yBAA0D,CAAC,OAAO,QAAQ;AAC9F,SAAO,4CAAC,sCAAM,OAAc,QAApB,EAA2B,WAAU,WAAS;AACxD,CAAC;AACD,OAAO,cAAc;","names":[]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import {
|
|
2
|
+
HStack,
|
|
3
|
+
Stack,
|
|
4
|
+
VStack
|
|
5
|
+
} from "../../chunk-QGZU7Z2W.mjs";
|
|
6
|
+
import "../../chunk-F4STR6SD.mjs";
|
|
7
|
+
import "../../chunk-NE6W2PCD.mjs";
|
|
8
|
+
import "../../chunk-R4SQKVDQ.mjs";
|
|
9
|
+
export {
|
|
10
|
+
HStack,
|
|
11
|
+
Stack,
|
|
12
|
+
VStack
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=stack.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
package/dist/message/index.d.mts
CHANGED
package/dist/message/index.d.ts
CHANGED
package/dist/message/index.js
CHANGED
|
@@ -49,7 +49,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
49
49
|
// src/message/index.tsx
|
|
50
50
|
var message_exports = {};
|
|
51
51
|
__export(message_exports, {
|
|
52
|
-
Message: () => MessageComponent
|
|
52
|
+
Message: () => MessageComponent,
|
|
53
|
+
MessageDescription: () => MessageDescription,
|
|
54
|
+
MessageTitle: () => MessageTitle
|
|
53
55
|
});
|
|
54
56
|
module.exports = __toCommonJS(message_exports);
|
|
55
57
|
|
|
@@ -182,6 +184,8 @@ MessageComponent.Title = MessageTitle;
|
|
|
182
184
|
MessageComponent.Description = MessageDescription;
|
|
183
185
|
// Annotate the CommonJS export names for ESM import in node:
|
|
184
186
|
0 && (module.exports = {
|
|
185
|
-
Message
|
|
187
|
+
Message,
|
|
188
|
+
MessageDescription,
|
|
189
|
+
MessageTitle
|
|
186
190
|
});
|
|
187
191
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/message/index.tsx","../../src/message/message.tsx","../../src/box/box.tsx"],"sourcesContent":["import { Message, MessageTitle, MessageDescription } from \"./message\";\n\nconst MessageComponent = Message as typeof Message & {\n Title: typeof MessageTitle;\n Description: typeof MessageDescription;\n};\n\nMessageComponent.Title = MessageTitle;\nMessageComponent.Description = MessageDescription;\n\nexport { MessageComponent as Message };\n","import React, { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\nimport { Box, type BoxProps } from \"../box/box\";\n\nexport type MessageProps = (\n | {\n variant?: \"success\" | \"attention\" | \"warning\";\n icon?: never;\n iconClassName?: never;\n }\n | {\n variant: \"neutral\";\n icon?: React.ReactNode;\n iconClassName?: string;\n }\n) &\n Omit<BoxProps, \"variant\">;\n\nexport const Message: OverridableComponent<MessageProps, HTMLDivElement> = forwardRef(\n ({ children, className, variant = \"success\", icon, iconClassName, ...rest }, ref) => {\n return (\n <Box\n className={clsx(`hds-message`, `hds-message--${variant}`, className as undefined)}\n ref={ref}\n {...rest}\n >\n {variant === \"neutral\" && (\n <div className={clsx(\"hds-message--neutral__icon\", iconClassName as undefined)}>\n {icon}\n </div>\n )}\n {children}\n </Box>\n );\n },\n);\nMessage.displayName = \"Message\";\n\nexport const MessageTitle: OverridableComponent<object, HTMLParagraphElement> = forwardRef(\n ({ as: Component = \"p\", className, ...rest }, ref) => {\n return (\n <Component\n className={clsx(\"hds-message__title\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nMessageTitle.displayName = \"Message.Title\";\n\nexport const MessageDescription: OverridableComponent<object, HTMLParagraphElement> = forwardRef(\n ({ as: Component = \"p\", className, ...rest }, ref) => {\n return (\n <Component\n className={clsx(\"hds-message__description\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nMessageDescription.displayName = \"Message.Description\";\n","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n children?: React.ReactNode;\n\n /**\n * If `true`, a close button will be shown.\n * Use when you want to control the close button using the BoxCloseButton component.\n */\n closeable?: boolean;\n\n /**\n * Callback fired when the component requests to be closed.\n * If not set, the component will be closed without any user interaction.\n *\n * If set, and the handler returns non-true value, the component will not be closed.\n * Use this if you want to control the closing of the component, using the `closed` prop\n *\n * If set, and the handler returns the true, the component will be closed.\n * Use this with `window.confirm()` to ask the user to confirm closing the component.\n */\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n onClose?: () => boolean | unknown;\n\n /**\n * If `true`, the box will be closed and hidden from view\n */\n closed?: boolean;\n\n /**\n * Props applied to the close button element.\n */\n closeButtonProps?: BoxCloseButtonProps;\n}\n\nexport const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(\n (\n {\n as: Component = \"div\",\n variant,\n closeable = false,\n onClose: onCloseProp,\n closed: closedProp,\n closeButtonProps,\n children,\n className,\n ...rest\n },\n ref,\n ) => {\n const [closedState, setClosedState] = useState(false);\n const onClose = useCallback(() => {\n if (onCloseProp) {\n const result = onCloseProp();\n if (result === true) {\n setClosedState(true);\n }\n } else {\n setClosedState(true);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n }, []);\n const closed = closedProp ?? closedState;\n\n return (\n <Component\n className={clsx(\n \"hds-box\",\n variant && `hds-box--${variant}`,\n { \"hds-box--closed\": closed },\n className as undefined,\n )}\n ref={ref}\n {...rest}\n >\n {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n {children}\n </Component>\n );\n },\n);\nBox.displayName = \"Box\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n ({ className, ...rest }, ref) => {\n return (\n <button\n className={clsx(\"hds-box__close-button\", className as undefined)}\n ref={ref}\n type=\"button\"\n {...rest}\n />\n );\n },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAAkC;AAClC,IAAAC,0BAAqB;;;ACDrB,mBAAkD;AAClD,6BAAqB;AAmEf;AA9BC,IAAM,UAAsD;AAAA,EACjE,CACE,IAWA,QACG;AAZH,iBACE;AAAA,UAAI,YAAY;AAAA,MAChB;AAAA,MACA,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,IAhDN,IAwCI,IASK,iBATL,IASK;AAAA,MARH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,UAAM,CAAC,aAAa,cAAc,QAAI,uBAAS,KAAK;AACpD,UAAM,cAAU,0BAAY,MAAM;AAChC,UAAI,aAAa;AACf,cAAM,SAAS,YAAY;AAC3B,YAAI,WAAW,MAAM;AACnB,yBAAe,IAAI;AAAA,QACrB;AAAA,MACF,OAAO;AACL,uBAAe,IAAI;AAAA,MACrB;AAAA,IAEF,GAAG,CAAC,CAAC;AACL,UAAM,SAAS,kCAAc;AAE7B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT;AAAA,UACA,WAAW,YAAY,OAAO;AAAA,UAC9B,EAAE,mBAAmB,OAAO;AAAA,UAC5B;AAAA,QACF;AAAA,QACA;AAAA,SACI,OARL;AAAA,QAUE;AAAA,sBAAY,4CAAC,iCAAe,SAAS,WAAa,iBAAkB,IAAK;AAAA,UACzE;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,IAAI,cAAc;AAGX,IAAM,qBAAiB;AAAA,EAC5B,CAAC,IAAwB,QAAQ;AAAhC,iBAAE,YAxFL,IAwFG,IAAgB,iBAAhB,IAAgB,CAAd;AACD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,6BAAK,yBAAyB,SAAsB;AAAA,QAC/D;AAAA,QACA,MAAK;AAAA,SACD;AAAA,IACN;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;;;AD7EvB,IAAAC,sBAAA;AAHC,IAAM,cAA8D;AAAA,EACzE,CAAC,IAA4E,QAAQ;AAApF,iBAAE,YAAU,WAAW,UAAU,WAAW,MAAM,cApBrD,IAoBG,IAAoE,iBAApE,IAAoE,CAAlE,YAAU,aAAW,WAAqB,QAAM;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,8BAAK,eAAe,gBAAgB,OAAO,IAAI,SAAsB;AAAA,QAChF;AAAA,SACI,OAHL;AAAA,QAKE;AAAA,sBAAY,aACX,6CAAC,SAAI,eAAW,8BAAK,8BAA8B,aAA0B,GAC1E,gBACH;AAAA,UAED;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,QAAQ,cAAc;AAEf,IAAM,mBAAmE;AAAA,EAC9E,CAAC,IAA6C,QAAQ;AAArD,iBAAE,MAAI,YAAY,KAAK,UAxC1B,IAwCG,IAAqC,iBAArC,IAAqC,CAAnC,MAAqB;AACtB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,8BAAK,sBAAsB,SAAsB;AAAA,QAC5D;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,aAAa,cAAc;AAEpB,IAAM,yBAAyE;AAAA,EACpF,CAAC,IAA6C,QAAQ;AAArD,iBAAE,MAAI,YAAY,KAAK,UArD1B,IAqDG,IAAqC,iBAArC,IAAqC,CAAnC,MAAqB;AACtB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,8BAAK,4BAA4B,SAAsB;AAAA,QAClE;AAAA,SACI;AAAA,IACN;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;;;AD7DjC,IAAM,mBAAmB;AAKzB,iBAAiB,QAAQ;AACzB,iBAAiB,cAAc;","names":["import_react","import_typed_classname","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../src/message/index.tsx","../../src/message/message.tsx","../../src/box/box.tsx"],"sourcesContent":["import { Message, MessageTitle, MessageDescription } from \"./message\";\n\nconst MessageComponent = Message as typeof Message & {\n Title: typeof MessageTitle;\n Description: typeof MessageDescription;\n};\n\nMessageComponent.Title = MessageTitle;\nMessageComponent.Description = MessageDescription;\n\nexport { MessageComponent as Message, MessageTitle, MessageDescription };\n","import React, { forwardRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\nimport { Box, type BoxProps } from \"../box/box\";\n\nexport type MessageProps = (\n | {\n variant?: \"success\" | \"attention\" | \"warning\";\n icon?: never;\n iconClassName?: never;\n }\n | {\n variant: \"neutral\";\n icon?: React.ReactNode;\n iconClassName?: string;\n }\n) &\n Omit<BoxProps, \"variant\">;\n\nexport const Message: OverridableComponent<MessageProps, HTMLDivElement> = forwardRef(\n ({ children, className, variant = \"success\", icon, iconClassName, ...rest }, ref) => {\n return (\n <Box\n className={clsx(`hds-message`, `hds-message--${variant}`, className as undefined)}\n ref={ref}\n {...rest}\n >\n {variant === \"neutral\" && (\n <div className={clsx(\"hds-message--neutral__icon\", iconClassName as undefined)}>\n {icon}\n </div>\n )}\n {children}\n </Box>\n );\n },\n);\nMessage.displayName = \"Message\";\n\nexport const MessageTitle: OverridableComponent<object, HTMLParagraphElement> = forwardRef(\n ({ as: Component = \"p\", className, ...rest }, ref) => {\n return (\n <Component\n className={clsx(\"hds-message__title\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nMessageTitle.displayName = \"Message.Title\";\n\nexport const MessageDescription: OverridableComponent<object, HTMLParagraphElement> = forwardRef(\n ({ as: Component = \"p\", className, ...rest }, ref) => {\n return (\n <Component\n className={clsx(\"hds-message__description\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nMessageDescription.displayName = \"Message.Description\";\n","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n children?: React.ReactNode;\n\n /**\n * If `true`, a close button will be shown.\n * Use when you want to control the close button using the BoxCloseButton component.\n */\n closeable?: boolean;\n\n /**\n * Callback fired when the component requests to be closed.\n * If not set, the component will be closed without any user interaction.\n *\n * If set, and the handler returns non-true value, the component will not be closed.\n * Use this if you want to control the closing of the component, using the `closed` prop\n *\n * If set, and the handler returns the true, the component will be closed.\n * Use this with `window.confirm()` to ask the user to confirm closing the component.\n */\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n onClose?: () => boolean | unknown;\n\n /**\n * If `true`, the box will be closed and hidden from view\n */\n closed?: boolean;\n\n /**\n * Props applied to the close button element.\n */\n closeButtonProps?: BoxCloseButtonProps;\n}\n\nexport const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(\n (\n {\n as: Component = \"div\",\n variant,\n closeable = false,\n onClose: onCloseProp,\n closed: closedProp,\n closeButtonProps,\n children,\n className,\n ...rest\n },\n ref,\n ) => {\n const [closedState, setClosedState] = useState(false);\n const onClose = useCallback(() => {\n if (onCloseProp) {\n const result = onCloseProp();\n if (result === true) {\n setClosedState(true);\n }\n } else {\n setClosedState(true);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n }, []);\n const closed = closedProp ?? closedState;\n\n return (\n <Component\n className={clsx(\n \"hds-box\",\n variant && `hds-box--${variant}`,\n { \"hds-box--closed\": closed },\n className as undefined,\n )}\n ref={ref}\n {...rest}\n >\n {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n {children}\n </Component>\n );\n },\n);\nBox.displayName = \"Box\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n ({ className, ...rest }, ref) => {\n return (\n <button\n className={clsx(\"hds-box__close-button\", className as undefined)}\n ref={ref}\n type=\"button\"\n {...rest}\n />\n );\n },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n"],"mappings":"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","names":["import_react","import_typed_classname","import_jsx_runtime"]}
|
package/dist/message/index.mjs
CHANGED
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
import {
|
|
2
2
|
MessageComponent
|
|
3
|
-
} from "../chunk-
|
|
4
|
-
import
|
|
3
|
+
} from "../chunk-EJ7ANN7M.mjs";
|
|
4
|
+
import {
|
|
5
|
+
MessageDescription,
|
|
6
|
+
MessageTitle
|
|
7
|
+
} from "../chunk-ME66RUR6.mjs";
|
|
5
8
|
import "../chunk-EGXM575K.mjs";
|
|
6
9
|
import "../chunk-R4SQKVDQ.mjs";
|
|
7
10
|
export {
|
|
8
|
-
MessageComponent as Message
|
|
11
|
+
MessageComponent as Message,
|
|
12
|
+
MessageDescription,
|
|
13
|
+
MessageTitle
|
|
9
14
|
};
|
|
10
15
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { MessageProps } from '../_tsup-dts-rollup';
|
|
2
2
|
export { Message_alias_3 as Message } from '../_tsup-dts-rollup';
|
|
3
|
-
export { MessageTitle } from '../_tsup-dts-rollup';
|
|
4
|
-
export { MessageDescription } from '../_tsup-dts-rollup';
|
|
3
|
+
export { MessageTitle_alias_3 as MessageTitle } from '../_tsup-dts-rollup';
|
|
4
|
+
export { MessageDescription_alias_3 as MessageDescription } from '../_tsup-dts-rollup';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { MessageProps } from '../_tsup-dts-rollup';
|
|
2
2
|
export { Message_alias_3 as Message } from '../_tsup-dts-rollup';
|
|
3
|
-
export { MessageTitle } from '../_tsup-dts-rollup';
|
|
4
|
-
export { MessageDescription } from '../_tsup-dts-rollup';
|
|
3
|
+
export { MessageTitle_alias_3 as MessageTitle } from '../_tsup-dts-rollup';
|
|
4
|
+
export { MessageDescription_alias_3 as MessageDescription } from '../_tsup-dts-rollup';
|
package/dist/modal/index.d.mts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { Modal_alias_2 as Modal } from '../_tsup-dts-rollup';
|
|
2
|
-
export { useScrollLock_alias_2 as useScrollLock } from '../_tsup-dts-rollup';
|
|
3
|
-
export { ModalProps_alias_2 as ModalProps } from '../_tsup-dts-rollup';
|
|
4
2
|
export { ModalHeader_alias_2 as ModalHeader } from '../_tsup-dts-rollup';
|
|
5
3
|
export { ModalContent_alias_2 as ModalContent } from '../_tsup-dts-rollup';
|
|
6
4
|
export { ModalFooter_alias_2 as ModalFooter } from '../_tsup-dts-rollup';
|
|
5
|
+
export { useScrollLock_alias_2 as useScrollLock } from '../_tsup-dts-rollup';
|
|
6
|
+
export { ModalProps_alias_2 as ModalProps } from '../_tsup-dts-rollup';
|
package/dist/modal/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { Modal_alias_2 as Modal } from '../_tsup-dts-rollup';
|
|
2
|
-
export { useScrollLock_alias_2 as useScrollLock } from '../_tsup-dts-rollup';
|
|
3
|
-
export { ModalProps_alias_2 as ModalProps } from '../_tsup-dts-rollup';
|
|
4
2
|
export { ModalHeader_alias_2 as ModalHeader } from '../_tsup-dts-rollup';
|
|
5
3
|
export { ModalContent_alias_2 as ModalContent } from '../_tsup-dts-rollup';
|
|
6
4
|
export { ModalFooter_alias_2 as ModalFooter } from '../_tsup-dts-rollup';
|
|
5
|
+
export { useScrollLock_alias_2 as useScrollLock } from '../_tsup-dts-rollup';
|
|
6
|
+
export { ModalProps_alias_2 as ModalProps } from '../_tsup-dts-rollup';
|
package/dist/modal/index.js
CHANGED
|
@@ -59,7 +59,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
59
59
|
// src/modal/index.tsx
|
|
60
60
|
var modal_exports = {};
|
|
61
61
|
__export(modal_exports, {
|
|
62
|
-
Modal: () => ModalComponent
|
|
62
|
+
Modal: () => ModalComponent,
|
|
63
|
+
ModalContent: () => ModalContent,
|
|
64
|
+
ModalFooter: () => ModalFooter,
|
|
65
|
+
ModalHeader: () => ModalHeader
|
|
63
66
|
});
|
|
64
67
|
module.exports = __toCommonJS(modal_exports);
|
|
65
68
|
|
|
@@ -274,6 +277,9 @@ ModalComponent.Content = ModalContent;
|
|
|
274
277
|
ModalComponent.Footer = ModalFooter;
|
|
275
278
|
// Annotate the CommonJS export names for ESM import in node:
|
|
276
279
|
0 && (module.exports = {
|
|
277
|
-
Modal
|
|
280
|
+
Modal,
|
|
281
|
+
ModalContent,
|
|
282
|
+
ModalFooter,
|
|
283
|
+
ModalHeader
|
|
278
284
|
});
|
|
279
285
|
//# sourceMappingURL=index.js.map
|
package/dist/modal/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/modal/index.tsx","../../src/modal/modal.tsx","../../src/box/box.tsx","../../src/utils.ts"],"sourcesContent":["import { Modal, ModalHeader, ModalContent, ModalFooter } from \"./modal\";\n\nconst ModalComponent = Modal as typeof Modal & {\n Header: typeof ModalHeader;\n Content: typeof ModalContent;\n Footer: typeof ModalFooter;\n};\nModalComponent.Header = ModalHeader;\nModalComponent.Content = ModalContent;\nModalComponent.Footer = ModalFooter;\n\nexport { ModalComponent as Modal };\nexport type * from \"./modal\";\n","import { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Box } from \"../box/box\";\nimport type { OverridableComponent } from \"../utils\";\nimport { useMergeRefs } from \"../utils\";\n\nexport interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {\n children: React.ReactNode;\n\n /**\n * Controls the open state of the modal\n */\n open?: boolean;\n\n /**\n * Whether to close when clicking on the backdrop.\n */\n closeOnBackdropClick?: boolean;\n}\n\n/**\n * A modal dialog is a window that forces the user to interact with it before they can return to other parts of the application.\n *\n * Uses the native [`dialog`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element.\n *\n * Example\n * ```\n const modalRef = useRef<HTMLDialogElement>(null);\n const onClose = () => modalRef.current?.close();\n\n return (\n <>\n <PrimaryButton onClick={() => modalRef.current?.showModal()}>Open Modal</PrimaryButton>\n <Modal ref={modalRef}>\n <Modal.Header>Dialog header</Modal.Header>\n <Modal.Content>\n <p>\n Dialog header Dialog description - a description of what is about to happen and maybe\n something about the consequences.\n </p>\n </Modal.Content>\n <Modal.Footer style={{ display: \"flex\", gap: 16 }}>\n <PrimaryButton fill=\"outline\" onClick={onClose}>\n Close\n </PrimaryButton>\n </Modal.Footer>\n </Modal>\n </>\n );\n * ```\n */\nexport const Modal = forwardRef<HTMLDialogElement, ModalProps>(\n ({ children, className, open, closeOnBackdropClick, onClick, ...rest }, ref) => {\n const modalRef = useRef<HTMLDialogElement>(null);\n const mergedRef = useMergeRefs([modalRef, ref]);\n\n // The X close button that comes from the `Box` component\n function onCloseButtonClick() {\n modalRef.current?.close();\n return false;\n }\n\n // No scroll when modal is open\n useScrollLock(modalRef, \"hds-modal-scroll-lock\");\n\n // `open` prop\n useEffect(() => {\n if (modalRef.current && open !== undefined) {\n if (open && !modalRef.current.open) {\n modalRef.current.showModal();\n } else if (!open && modalRef.current.open) {\n modalRef.current.close();\n }\n }\n }, [modalRef, open]);\n\n function onDialogClick(e: React.MouseEvent<HTMLElement>) {\n if (closeOnBackdropClick && e.target === modalRef.current) {\n modalRef.current.close();\n }\n onClick?.(e as React.MouseEvent<HTMLDialogElement>);\n }\n\n return (\n <Box\n as=\"dialog\"\n className={clsx(\"hds-modal\", className as undefined)}\n closeable\n onClick={onDialogClick}\n onClose={onCloseButtonClick}\n ref={mergedRef}\n variant=\"white\"\n {\n ...(rest as object) /* TODO remove type casting */\n }\n >\n {children}\n </Box>\n );\n },\n);\nModal.displayName = \"Modal\";\n\nexport const ModalHeader: OverridableComponent<object, HTMLHeadingElement> = forwardRef(\n ({ as: Component = \"h1\", className, ...rest }, ref) => {\n return (\n <Component\n className={clsx(\"hds-modal__header\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nModalHeader.displayName = \"Modal.Header\";\n\nexport const ModalContent: OverridableComponent<object, HTMLDivElement> = forwardRef(\n ({ as: Component = \"div\", className, ...rest }, ref) => {\n return (\n <Component\n className={clsx(\"hds-modal__content\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nModalContent.displayName = \"Modal.Content\";\n\nexport const ModalFooter: OverridableComponent<object, HTMLDivElement> = forwardRef(\n ({ as: Component = \"footer\", className, ...rest }, ref) => {\n return (\n <Component\n className={clsx(\"hds-modal__footer\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nModalFooter.displayName = \"Modal.Footer\";\n\nexport function useScrollLock(modalRef: React.RefObject<HTMLDialogElement>, bodyClass: string) {\n useEffect(() => {\n if (!modalRef.current) return;\n if (modalRef.current.open) document.body.classList.add(bodyClass);\n\n const observer = new MutationObserver(() => {\n if (modalRef.current?.open) document.body.classList.add(bodyClass);\n else document.body.classList.remove(bodyClass);\n });\n observer.observe(modalRef.current, {\n attributes: true,\n attributeFilter: [\"open\"],\n });\n return () => {\n observer.disconnect();\n document.body.classList.remove(bodyClass);\n };\n }, [bodyClass, modalRef]);\n}\n","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n children?: React.ReactNode;\n\n /**\n * If `true`, a close button will be shown.\n * Use when you want to control the close button using the BoxCloseButton component.\n */\n closeable?: boolean;\n\n /**\n * Callback fired when the component requests to be closed.\n * If not set, the component will be closed without any user interaction.\n *\n * If set, and the handler returns non-true value, the component will not be closed.\n * Use this if you want to control the closing of the component, using the `closed` prop\n *\n * If set, and the handler returns the true, the component will be closed.\n * Use this with `window.confirm()` to ask the user to confirm closing the component.\n */\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n onClose?: () => boolean | unknown;\n\n /**\n * If `true`, the box will be closed and hidden from view\n */\n closed?: boolean;\n\n /**\n * Props applied to the close button element.\n */\n closeButtonProps?: BoxCloseButtonProps;\n}\n\nexport const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(\n (\n {\n as: Component = \"div\",\n variant,\n closeable = false,\n onClose: onCloseProp,\n closed: closedProp,\n closeButtonProps,\n children,\n className,\n ...rest\n },\n ref,\n ) => {\n const [closedState, setClosedState] = useState(false);\n const onClose = useCallback(() => {\n if (onCloseProp) {\n const result = onCloseProp();\n if (result === true) {\n setClosedState(true);\n }\n } else {\n setClosedState(true);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n }, []);\n const closed = closedProp ?? closedState;\n\n return (\n <Component\n className={clsx(\n \"hds-box\",\n variant && `hds-box--${variant}`,\n { \"hds-box--closed\": closed },\n className as undefined,\n )}\n ref={ref}\n {...rest}\n >\n {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n {children}\n </Component>\n );\n },\n);\nBox.displayName = \"Box\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n ({ className, ...rest }, ref) => {\n return (\n <button\n className={clsx(\"hds-box__close-button\", className as undefined)}\n ref={ref}\n type=\"button\"\n {...rest}\n />\n );\n },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n","import type { ComponentPropsWithRef, ElementType, FC, RefAttributes } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * OverridableComponent makes the `as` prop available,\n * to be used to override the html element being used for a component\n *\n * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts\n */\nexport type OverridableComponent<ComponentProps, Element extends HTMLElement> = {\n (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;\n\n <As extends ElementType>(\n props: {\n /** Override html element */\n as?: As;\n } & ComponentProps &\n Omit<ComponentPropsWithRef<As>, keyof ComponentProps>,\n ): ReturnType<FC>;\n} & Pick<FC, \"displayName\">;\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n return React.useMemo(() => {\n if (refs.every((ref) => ref === null)) {\n return null;\n }\n\n return (value) => {\n refs.forEach((ref) => {\n if (typeof ref === \"function\") {\n ref(value);\n } else if (ref !== null) {\n (ref as React.MutableRefObject<Instance | null>).current = value;\n }\n });\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n const [width, setWidth] = useState<number>(0);\n const [height, setHeight] = useState<number>(0);\n const handleResize = useCallback(() => {\n if (ref?.current !== null) {\n setWidth(ref?.current?.offsetWidth ?? 0);\n setHeight(ref?.current?.offsetHeight ?? 0);\n }\n }, [ref]);\n useEffect(() => {\n window.addEventListener(\"load\", handleResize);\n window.addEventListener(\"resize\", handleResize);\n return () => {\n window.removeEventListener(\"load\", handleResize);\n window.removeEventListener(\"resize\", handleResize);\n };\n }, [ref, handleResize]);\n useEffect(() => {\n handleResize();\n // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n }, []);\n return { width, height };\n}\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react","import_jsx_runtime","_a"]}
|
|
1
|
+
{"version":3,"sources":["../../src/modal/index.tsx","../../src/modal/modal.tsx","../../src/box/box.tsx","../../src/utils.ts"],"sourcesContent":["import { Modal, ModalHeader, ModalContent, ModalFooter } from \"./modal\";\n\nconst ModalComponent = Modal as typeof Modal & {\n Header: typeof ModalHeader;\n Content: typeof ModalContent;\n Footer: typeof ModalFooter;\n};\nModalComponent.Header = ModalHeader;\nModalComponent.Content = ModalContent;\nModalComponent.Footer = ModalFooter;\n\nexport { ModalComponent as Modal, ModalHeader, ModalContent, ModalFooter };\nexport type * from \"./modal\";\n","import { forwardRef, useEffect, useRef } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { Box } from \"../box/box\";\nimport type { OverridableComponent } from \"../utils\";\nimport { useMergeRefs } from \"../utils\";\n\nexport interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {\n children: React.ReactNode;\n\n /**\n * Controls the open state of the modal\n */\n open?: boolean;\n\n /**\n * Whether to close when clicking on the backdrop.\n */\n closeOnBackdropClick?: boolean;\n}\n\n/**\n * A modal dialog is a window that forces the user to interact with it before they can return to other parts of the application.\n *\n * Uses the native [`dialog`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) element.\n *\n * Example\n * ```\n const modalRef = useRef<HTMLDialogElement>(null);\n const onClose = () => modalRef.current?.close();\n\n return (\n <>\n <PrimaryButton onClick={() => modalRef.current?.showModal()}>Open Modal</PrimaryButton>\n <Modal ref={modalRef}>\n <Modal.Header>Dialog header</Modal.Header>\n <Modal.Content>\n <p>\n Dialog header Dialog description - a description of what is about to happen and maybe\n something about the consequences.\n </p>\n </Modal.Content>\n <Modal.Footer>\n <HStack gap=\"16\" wrap>\n <PrimaryButton onClick={onMainAction}>Main action</PrimaryButton>\n <PrimaryButton fill=\"outline\" onClick={onClose}>\n Cancel\n </PrimaryButton>\n </HStack>\n </Modal.Footer>\n </Modal>\n </>\n );\n * ```\n */\nexport const Modal = forwardRef<HTMLDialogElement, ModalProps>(\n ({ children, className, open, closeOnBackdropClick, onClick, ...rest }, ref) => {\n const modalRef = useRef<HTMLDialogElement>(null);\n const mergedRef = useMergeRefs([modalRef, ref]);\n\n // The X close button that comes from the `Box` component\n function onCloseButtonClick() {\n modalRef.current?.close();\n return false;\n }\n\n // No scroll when modal is open\n useScrollLock(modalRef, \"hds-modal-scroll-lock\");\n\n // `open` prop\n useEffect(() => {\n if (modalRef.current && open !== undefined) {\n if (open && !modalRef.current.open) {\n modalRef.current.showModal();\n } else if (!open && modalRef.current.open) {\n modalRef.current.close();\n }\n }\n }, [modalRef, open]);\n\n function onDialogClick(e: React.MouseEvent<HTMLElement>) {\n if (closeOnBackdropClick && e.target === modalRef.current) {\n modalRef.current.close();\n }\n onClick?.(e as React.MouseEvent<HTMLDialogElement>);\n }\n\n return (\n <Box\n as=\"dialog\"\n className={clsx(\"hds-modal\", className as undefined)}\n closeable\n onClick={onDialogClick}\n onClose={onCloseButtonClick}\n ref={mergedRef}\n variant=\"white\"\n {\n ...(rest as object) /* TODO remove type casting */\n }\n >\n {children}\n </Box>\n );\n },\n);\nModal.displayName = \"Modal\";\n\nexport const ModalHeader: OverridableComponent<object, HTMLHeadingElement> = forwardRef(\n ({ as: Component = \"h1\", className, ...rest }, ref) => {\n return (\n <Component\n className={clsx(\"hds-modal__header\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nModalHeader.displayName = \"Modal.Header\";\n\nexport const ModalContent: OverridableComponent<object, HTMLDivElement> = forwardRef(\n ({ as: Component = \"div\", className, ...rest }, ref) => {\n return (\n <Component\n className={clsx(\"hds-modal__content\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nModalContent.displayName = \"Modal.Content\";\n\nexport const ModalFooter: OverridableComponent<object, HTMLDivElement> = forwardRef(\n ({ as: Component = \"footer\", className, ...rest }, ref) => {\n return (\n <Component\n className={clsx(\"hds-modal__footer\", className as undefined)}\n ref={ref}\n {...rest}\n />\n );\n },\n);\nModalFooter.displayName = \"Modal.Footer\";\n\nexport function useScrollLock(modalRef: React.RefObject<HTMLDialogElement>, bodyClass: string) {\n useEffect(() => {\n if (!modalRef.current) return;\n if (modalRef.current.open) document.body.classList.add(bodyClass);\n\n const observer = new MutationObserver(() => {\n if (modalRef.current?.open) document.body.classList.add(bodyClass);\n else document.body.classList.remove(bodyClass);\n });\n observer.observe(modalRef.current, {\n attributes: true,\n attributeFilter: [\"open\"],\n });\n return () => {\n observer.disconnect();\n document.body.classList.remove(bodyClass);\n };\n }, [bodyClass, modalRef]);\n}\n","import { forwardRef, useCallback, useState } from \"react\";\nimport { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport type { OverridableComponent } from \"../utils\";\n\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\n variant?: \"light-grey\" | \"lighter\" | \"white\" | \"warning\";\n children?: React.ReactNode;\n\n /**\n * If `true`, a close button will be shown.\n * Use when you want to control the close button using the BoxCloseButton component.\n */\n closeable?: boolean;\n\n /**\n * Callback fired when the component requests to be closed.\n * If not set, the component will be closed without any user interaction.\n *\n * If set, and the handler returns non-true value, the component will not be closed.\n * Use this if you want to control the closing of the component, using the `closed` prop\n *\n * If set, and the handler returns the true, the component will be closed.\n * Use this with `window.confirm()` to ask the user to confirm closing the component.\n */\n // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type\n onClose?: () => boolean | unknown;\n\n /**\n * If `true`, the box will be closed and hidden from view\n */\n closed?: boolean;\n\n /**\n * Props applied to the close button element.\n */\n closeButtonProps?: BoxCloseButtonProps;\n}\n\nexport const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(\n (\n {\n as: Component = \"div\",\n variant,\n closeable = false,\n onClose: onCloseProp,\n closed: closedProp,\n closeButtonProps,\n children,\n className,\n ...rest\n },\n ref,\n ) => {\n const [closedState, setClosedState] = useState(false);\n const onClose = useCallback(() => {\n if (onCloseProp) {\n const result = onCloseProp();\n if (result === true) {\n setClosedState(true);\n }\n } else {\n setClosedState(true);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better\n }, []);\n const closed = closedProp ?? closedState;\n\n return (\n <Component\n className={clsx(\n \"hds-box\",\n variant && `hds-box--${variant}`,\n { \"hds-box--closed\": closed },\n className as undefined,\n )}\n ref={ref}\n {...rest}\n >\n {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}\n {children}\n </Component>\n );\n },\n);\nBox.displayName = \"Box\";\n\nexport type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, \"children\">;\nexport const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(\n ({ className, ...rest }, ref) => {\n return (\n <button\n className={clsx(\"hds-box__close-button\", className as undefined)}\n ref={ref}\n type=\"button\"\n {...rest}\n />\n );\n },\n);\nBoxCloseButton.displayName = \"Box.CloseButton\";\n","import type { ComponentPropsWithRef, ElementType, FC, RefAttributes } from \"react\";\nimport * as React from \"react\";\nimport { useCallback, useEffect, useState } from \"react\";\n\n/**\n * OverridableComponent makes the `as` prop available,\n * to be used to override the html element being used for a component\n *\n * Taken from digdir design system: https://github.com/digdir/designsystem/blob/main/packages/react/src/types/OverridableComponent.ts\n */\nexport type OverridableComponent<ComponentProps, Element extends HTMLElement> = {\n (props: ComponentProps & RefAttributes<Element>): ReturnType<FC>;\n\n <As extends ElementType>(\n props: {\n /** Override html element */\n as?: As;\n } & ComponentProps &\n Omit<ComponentPropsWithRef<As>, keyof ComponentProps>,\n ): ReturnType<FC>;\n} & Pick<FC, \"displayName\">;\n\n/**\n * Merges an array of refs into a single memoized callback ref or `null`.\n * @see https://floating-ui.com/docs/useMergeRefs\n */\nexport function useMergeRefs<Instance>(\n refs: (React.Ref<Instance> | undefined)[],\n): React.RefCallback<Instance> | null {\n return React.useMemo(() => {\n if (refs.every((ref) => ref === null)) {\n return null;\n }\n\n return (value) => {\n refs.forEach((ref) => {\n if (typeof ref === \"function\") {\n ref(value);\n } else if (ref !== null) {\n (ref as React.MutableRefObject<Instance | null>).current = value;\n }\n });\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n }, refs);\n}\n\nexport function useResize<Instance extends HTMLElement>(\n ref: React.RefObject<Instance> | undefined | null,\n): { width: number; height: number } {\n const [width, setWidth] = useState<number>(0);\n const [height, setHeight] = useState<number>(0);\n const handleResize = useCallback(() => {\n if (ref?.current !== null) {\n setWidth(ref?.current?.offsetWidth ?? 0);\n setHeight(ref?.current?.offsetHeight ?? 0);\n }\n }, [ref]);\n useEffect(() => {\n window.addEventListener(\"load\", handleResize);\n window.addEventListener(\"resize\", handleResize);\n return () => {\n window.removeEventListener(\"load\", handleResize);\n window.removeEventListener(\"resize\", handleResize);\n };\n }, [ref, handleResize]);\n useEffect(() => {\n handleResize();\n // eslint-disable-next-line react-hooks/exhaustive-deps -- It's ok\n }, []);\n return { width, height };\n}\n\nfunction subscribe() {\n // eslint-disable-next-line @typescript-eslint/no-empty-function -- It's ok\n return () => {};\n}\n\nexport function useHydrated() {\n return React.useSyncExternalStore(\n subscribe,\n () => true,\n () => false,\n );\n}\n"],"mappings":"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","names":["import_react","import_typed_classname","import_react","import_jsx_runtime","_a"]}
|
package/dist/modal/index.mjs
CHANGED
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
import {
|
|
2
2
|
ModalComponent
|
|
3
|
-
} from "../chunk-
|
|
4
|
-
import
|
|
3
|
+
} from "../chunk-QYSLVQ4F.mjs";
|
|
4
|
+
import {
|
|
5
|
+
ModalContent,
|
|
6
|
+
ModalFooter,
|
|
7
|
+
ModalHeader
|
|
8
|
+
} from "../chunk-2FXMUF6K.mjs";
|
|
5
9
|
import "../chunk-EGXM575K.mjs";
|
|
6
|
-
import "../chunk-
|
|
10
|
+
import "../chunk-ZL56N4UK.mjs";
|
|
7
11
|
import "../chunk-R4SQKVDQ.mjs";
|
|
8
12
|
export {
|
|
9
|
-
ModalComponent as Modal
|
|
13
|
+
ModalComponent as Modal,
|
|
14
|
+
ModalContent,
|
|
15
|
+
ModalFooter,
|
|
16
|
+
ModalHeader
|
|
10
17
|
};
|
|
11
18
|
//# sourceMappingURL=index.mjs.map
|