@postenbring/hedwig-react 0.0.62 → 0.0.63
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 +2 -2
- package/dist/_tsup-dts-rollup.d.ts +2 -2
- package/dist/chunk-5UJ3LEKK.mjs +76 -0
- package/dist/chunk-5UJ3LEKK.mjs.map +1 -0
- package/dist/chunk-ZDPU3N54.mjs +39 -0
- package/dist/chunk-ZDPU3N54.mjs.map +1 -0
- package/dist/index-no-css.js +94 -76
- package/dist/index-no-css.js.map +1 -1
- package/dist/index-no-css.mjs +2 -2
- package/dist/index.js +94 -76
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2 -2
- package/dist/show-more/index.js +25 -20
- package/dist/show-more/index.js.map +1 -1
- package/dist/show-more/index.mjs +1 -1
- package/dist/show-more/show-more.d.mts +1 -1
- package/dist/show-more/show-more.d.ts +1 -1
- package/dist/show-more/show-more.js +25 -20
- package/dist/show-more/show-more.js.map +1 -1
- package/dist/show-more/show-more.mjs +1 -1
- package/dist/step-indicator/index.js +46 -33
- package/dist/step-indicator/index.js.map +1 -1
- package/dist/step-indicator/index.mjs +1 -1
- package/dist/step-indicator/step-indicator.js +46 -33
- package/dist/step-indicator/step-indicator.js.map +1 -1
- package/dist/step-indicator/step-indicator.mjs +1 -1
- package/package.json +3 -3
- package/dist/chunk-NIRIPLQ5.mjs +0 -63
- package/dist/chunk-NIRIPLQ5.mjs.map +0 -1
- package/dist/chunk-W47NV442.mjs +0 -34
- package/dist/chunk-W47NV442.mjs.map +0 -1
|
@@ -1325,7 +1325,7 @@ export declare const ShowMore: Story_23;
|
|
|
1325
1325
|
* }
|
|
1326
1326
|
* ```
|
|
1327
1327
|
*/
|
|
1328
|
-
declare
|
|
1328
|
+
declare const ShowMoreButton: ForwardRefExoticComponent<ShowMoreProps & RefAttributes<HTMLButtonElement>>;
|
|
1329
1329
|
export { ShowMoreButton }
|
|
1330
1330
|
export { ShowMoreButton as ShowMoreButton_alias_1 }
|
|
1331
1331
|
export { ShowMoreButton as ShowMoreButton_alias_2 }
|
|
@@ -1410,7 +1410,7 @@ export declare const Solid: Story_17;
|
|
|
1410
1410
|
*
|
|
1411
1411
|
* It does not handle step content or navigation, only the visual indication of the active step.
|
|
1412
1412
|
*/
|
|
1413
|
-
declare
|
|
1413
|
+
declare const StepIndicator: ForwardRefExoticComponent<(StepIndicatorProps & TitleProps) & RefAttributes<HTMLDivElement>>;
|
|
1414
1414
|
export { StepIndicator }
|
|
1415
1415
|
export { StepIndicator as StepIndicator_alias_1 }
|
|
1416
1416
|
export { StepIndicator as StepIndicator_alias_2 }
|
|
@@ -1325,7 +1325,7 @@ export declare const ShowMore: Story_23;
|
|
|
1325
1325
|
* }
|
|
1326
1326
|
* ```
|
|
1327
1327
|
*/
|
|
1328
|
-
declare
|
|
1328
|
+
declare const ShowMoreButton: ForwardRefExoticComponent<ShowMoreProps & RefAttributes<HTMLButtonElement>>;
|
|
1329
1329
|
export { ShowMoreButton }
|
|
1330
1330
|
export { ShowMoreButton as ShowMoreButton_alias_1 }
|
|
1331
1331
|
export { ShowMoreButton as ShowMoreButton_alias_2 }
|
|
@@ -1410,7 +1410,7 @@ export declare const Solid: Story_17;
|
|
|
1410
1410
|
*
|
|
1411
1411
|
* It does not handle step content or navigation, only the visual indication of the active step.
|
|
1412
1412
|
*/
|
|
1413
|
-
declare
|
|
1413
|
+
declare const StepIndicator: ForwardRefExoticComponent<(StepIndicatorProps & TitleProps) & RefAttributes<HTMLDivElement>>;
|
|
1414
1414
|
export { StepIndicator }
|
|
1415
1415
|
export { StepIndicator as StepIndicator_alias_1 }
|
|
1416
1416
|
export { StepIndicator as StepIndicator_alias_2 }
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import {
|
|
2
|
+
__objRest,
|
|
3
|
+
__spreadProps,
|
|
4
|
+
__spreadValues
|
|
5
|
+
} from "./chunk-R4SQKVDQ.mjs";
|
|
6
|
+
|
|
7
|
+
// src/step-indicator/step-indicator.tsx
|
|
8
|
+
import { clsx } from "@postenbring/hedwig-css/typed-classname";
|
|
9
|
+
import { forwardRef } from "react";
|
|
10
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
+
var StepIndicator = forwardRef(
|
|
12
|
+
(_a, ref) => {
|
|
13
|
+
var _b = _a, {
|
|
14
|
+
activeStep,
|
|
15
|
+
totalSteps,
|
|
16
|
+
className,
|
|
17
|
+
label,
|
|
18
|
+
lang = "en",
|
|
19
|
+
title,
|
|
20
|
+
titleAs: TitleComponent
|
|
21
|
+
} = _b, rest = __objRest(_b, [
|
|
22
|
+
"activeStep",
|
|
23
|
+
"totalSteps",
|
|
24
|
+
"className",
|
|
25
|
+
"label",
|
|
26
|
+
"lang",
|
|
27
|
+
"title",
|
|
28
|
+
"titleAs"
|
|
29
|
+
]);
|
|
30
|
+
return /* @__PURE__ */ jsxs(
|
|
31
|
+
"div",
|
|
32
|
+
__spreadProps(__spreadValues({
|
|
33
|
+
ref,
|
|
34
|
+
className: clsx("hds-step-indicator", className),
|
|
35
|
+
lang
|
|
36
|
+
}, rest), {
|
|
37
|
+
children: [
|
|
38
|
+
/* @__PURE__ */ jsxs("div", { className: clsx("hds-step-indicator__header"), children: [
|
|
39
|
+
/* @__PURE__ */ jsx("span", { className: clsx("hds-step-indicator__left-label"), children: label }),
|
|
40
|
+
/* @__PURE__ */ jsx("span", { children: stepLabelTranslations[lang](activeStep, totalSteps) })
|
|
41
|
+
] }),
|
|
42
|
+
/* @__PURE__ */ jsx("div", { className: clsx("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ jsx(
|
|
43
|
+
"div",
|
|
44
|
+
{
|
|
45
|
+
className: clsx("hds-step-indicator__step"),
|
|
46
|
+
"data-state": getStepState(i + 1, activeStep)
|
|
47
|
+
},
|
|
48
|
+
i
|
|
49
|
+
)) }),
|
|
50
|
+
title ? /* @__PURE__ */ jsx(TitleComponent, { className: clsx("hds-step-indicator__title"), children: title }) : null
|
|
51
|
+
]
|
|
52
|
+
})
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
);
|
|
56
|
+
StepIndicator.displayName = "StepIndicator";
|
|
57
|
+
var stepLabelTranslations = {
|
|
58
|
+
no: (activeStep, totalSteps) => `steg ${activeStep} av ${totalSteps}`,
|
|
59
|
+
en: (activeStep, totalSteps) => `step ${activeStep} of ${totalSteps}`,
|
|
60
|
+
da: (activeStep, totalSteps) => `trin ${activeStep} af ${totalSteps}`,
|
|
61
|
+
sv: (activeStep, totalSteps) => `steg ${activeStep} av ${totalSteps}`
|
|
62
|
+
};
|
|
63
|
+
function getStepState(renderedStep, activeStep) {
|
|
64
|
+
if (renderedStep < activeStep) {
|
|
65
|
+
return "previous";
|
|
66
|
+
}
|
|
67
|
+
if (renderedStep === activeStep) {
|
|
68
|
+
return "active";
|
|
69
|
+
}
|
|
70
|
+
return "next";
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
export {
|
|
74
|
+
StepIndicator
|
|
75
|
+
};
|
|
76
|
+
//# sourceMappingURL=chunk-5UJ3LEKK.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/step-indicator/step-indicator.tsx"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\n\ntype TitleProps =\n | {\n /**\n * Optional title of the active step to be shown underneath the step indicator\n *\n * Use `titleAs` to set the correct heading level\n */\n title: React.ReactNode;\n titleAs: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n }\n | {\n title?: undefined;\n titleAs?: undefined;\n };\n\ninterface StepIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {\n /*\n * 1-indexed number of the active step\n */\n activeStep: number;\n\n /**\n * 1-indexed number of steps\n */\n totalSteps: number;\n\n /**\n * Label on the left side above the steps\n */\n label: React.ReactNode;\n\n /**\n * Language for the \"step x of y\" label, default is \"en\"\n */\n lang?: \"no\" | \"en\" | \"da\" | \"sv\";\n}\n\n/**\n * Indicate a step in a process.\n *\n * It does not handle step content or navigation, only the visual indication of the active step.\n */\nexport const StepIndicator = forwardRef<HTMLDivElement, StepIndicatorProps & TitleProps>(\n (\n {\n activeStep,\n totalSteps,\n className,\n label,\n lang = \"en\",\n title,\n titleAs: TitleComponent,\n ...rest\n },\n ref,\n ) => {\n return (\n <div\n ref={ref}\n className={clsx(\"hds-step-indicator\", className as undefined)}\n lang={lang}\n {...rest}\n >\n <div className={clsx(\"hds-step-indicator__header\")}>\n <span className={clsx(\"hds-step-indicator__left-label\")}>{label}</span>\n <span>{stepLabelTranslations[lang](activeStep, totalSteps)}</span>\n </div>\n\n <div className={clsx(\"hds-step-indicator__steps\")}>\n {Array.from({ length: totalSteps }, (_, i) => (\n <div\n className={clsx(\"hds-step-indicator__step\")}\n data-state={getStepState(i + 1, activeStep)}\n key={i}\n />\n ))}\n </div>\n\n {title ? (\n <TitleComponent className={clsx(\"hds-step-indicator__title\")}>{title}</TitleComponent>\n ) : null}\n </div>\n );\n },\n);\nStepIndicator.displayName = \"StepIndicator\";\n\n/**\n * Translated texts for the `step x of y` label.\n */\nconst stepLabelTranslations: Record<\n \"no\" | \"en\" | \"da\" | \"sv\",\n (activeStep: number, totalSteps: number) => string\n> = {\n no: (activeStep: number, totalSteps: number) => `steg ${activeStep} av ${totalSteps}`,\n en: (activeStep: number, totalSteps: number) => `step ${activeStep} of ${totalSteps}`,\n da: (activeStep: number, totalSteps: number) => `trin ${activeStep} af ${totalSteps}`,\n sv: (activeStep: number, totalSteps: number) => `steg ${activeStep} av ${totalSteps}`,\n};\n\n/**\n * Determine the state of a step.\n * 1-indexed\n */\nfunction getStepState(renderedStep: number, activeStep: number) {\n if (renderedStep < activeStep) {\n return \"previous\";\n }\n if (renderedStep === activeStep) {\n return \"active\";\n }\n return \"next\";\n}\n"],"mappings":";;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAiEnB,SACE,KADF;AArBD,IAAM,gBAAgB;AAAA,EAC3B,CACE,IAUA,QACG;AAXH,iBACE;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,SAAS;AAAA,IAtDf,IA+CI,IAQK,iBARL,IAQK;AAAA,MAPH;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAKF,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,sBAAsB,SAAsB;AAAA,QAC5D;AAAA,SACI,OAJL;AAAA,QAMC;AAAA,+BAAC,SAAI,WAAW,KAAK,4BAA4B,GAC/C;AAAA,gCAAC,UAAK,WAAW,KAAK,gCAAgC,GAAI,iBAAM;AAAA,YAChE,oBAAC,UAAM,gCAAsB,IAAI,EAAE,YAAY,UAAU,GAAE;AAAA,aAC7D;AAAA,UAEA,oBAAC,SAAI,WAAW,KAAK,2BAA2B,GAC7C,gBAAM,KAAK,EAAE,QAAQ,WAAW,GAAG,CAAC,GAAG,MACtC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,KAAK,0BAA0B;AAAA,cAC1C,cAAY,aAAa,IAAI,GAAG,UAAU;AAAA;AAAA,YACrC;AAAA,UACP,CACD,GACH;AAAA,UAEC,QACC,oBAAC,kBAAe,WAAW,KAAK,2BAA2B,GAAI,iBAAM,IACnE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,cAAc,cAAc;AAK5B,IAAM,wBAGF;AAAA,EACF,IAAI,CAAC,YAAoB,eAAuB,QAAQ,UAAU,OAAO,UAAU;AAAA,EACnF,IAAI,CAAC,YAAoB,eAAuB,QAAQ,UAAU,OAAO,UAAU;AAAA,EACnF,IAAI,CAAC,YAAoB,eAAuB,QAAQ,UAAU,OAAO,UAAU;AAAA,EACnF,IAAI,CAAC,YAAoB,eAAuB,QAAQ,UAAU,OAAO,UAAU;AACrF;AAMA,SAAS,aAAa,cAAsB,YAAoB;AAC9D,MAAI,eAAe,YAAY;AAC7B,WAAO;AAAA,EACT;AACA,MAAI,iBAAiB,YAAY;AAC/B,WAAO;AAAA,EACT;AACA,SAAO;AACT;","names":[]}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import {
|
|
2
|
+
__objRest,
|
|
3
|
+
__spreadProps,
|
|
4
|
+
__spreadValues
|
|
5
|
+
} from "./chunk-R4SQKVDQ.mjs";
|
|
6
|
+
|
|
7
|
+
// src/show-more/show-more.tsx
|
|
8
|
+
import { clsx } from "@postenbring/hedwig-css/typed-classname";
|
|
9
|
+
import { forwardRef } from "react";
|
|
10
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
+
var ShowMoreButton = forwardRef(
|
|
12
|
+
(_a, ref) => {
|
|
13
|
+
var _b = _a, { text, variant, expanded, className } = _b, rest = __objRest(_b, ["text", "variant", "expanded", "className"]);
|
|
14
|
+
return /* @__PURE__ */ jsxs(
|
|
15
|
+
"button",
|
|
16
|
+
__spreadProps(__spreadValues({
|
|
17
|
+
ref,
|
|
18
|
+
className: clsx(
|
|
19
|
+
"hds-show-more",
|
|
20
|
+
variant === "show-more-show-less" && "hds-show-more--show-less",
|
|
21
|
+
className
|
|
22
|
+
),
|
|
23
|
+
"data-state": expanded ? "expanded" : void 0,
|
|
24
|
+
type: "button"
|
|
25
|
+
}, rest), {
|
|
26
|
+
children: [
|
|
27
|
+
text,
|
|
28
|
+
/* @__PURE__ */ jsx("span", { className: clsx("hds-show-more__icon") })
|
|
29
|
+
]
|
|
30
|
+
})
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
);
|
|
34
|
+
ShowMoreButton.displayName = "ShowMoreButton";
|
|
35
|
+
|
|
36
|
+
export {
|
|
37
|
+
ShowMoreButton
|
|
38
|
+
};
|
|
39
|
+
//# sourceMappingURL=chunk-ZDPU3N54.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/show-more/show-more.tsx"],"sourcesContent":["import { clsx } from \"@postenbring/hedwig-css/typed-classname\";\nimport { forwardRef } from \"react\";\n\ntype Variant =\n | {\n variant?: \"show-more\";\n expanded?: never;\n }\n | {\n variant: \"show-more-show-less\";\n expanded: boolean;\n };\n\nexport type ShowMoreProps = React.HTMLAttributes<HTMLButtonElement> & {\n text: React.ReactNode;\n} & Variant;\n\n/**\n * Simple button for triggering more content.\n *\n * You have to add the logic for what happens when the button is clicked yourself.\n *\n * **Example**\n *\n * ```tsx\n * function Content() {\n * const [items, fetchMoreItems, moreItemsAvailable] = useYourData();\n * function onShowMoreItems() {\n * fetchMoreItems();\n * }\n * return (\n * <>\n * <ul>\n * {items.map((item) => (\n * <li key={item.id}>{item.text}</li>\n * ))}\n * </ul>\n * {moreItemsAvailable ?\n * <ShowMoreButton className=\"mt-8\" onClick={onShowMoreItems} lang=\"en\" /> :\n * null\n * }\n * </>\n * )\n * }\n * ```\n */\nexport const ShowMoreButton = forwardRef<HTMLButtonElement, ShowMoreProps>(\n ({ text, variant, expanded, className, ...rest }, ref) => {\n return (\n <button\n ref={ref}\n className={clsx(\n \"hds-show-more\",\n variant === \"show-more-show-less\" && \"hds-show-more--show-less\",\n className as undefined,\n )}\n data-state={expanded ? \"expanded\" : undefined}\n type=\"button\"\n {...rest}\n >\n {text}\n <span className={clsx(\"hds-show-more__icon\")} />\n </button>\n );\n },\n);\nShowMoreButton.displayName = \"ShowMoreButton\";\n"],"mappings":";;;;;;;AAAA,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAgDrB,SAYE,KAZF;AAHC,IAAM,iBAAiB;AAAA,EAC5B,CAAC,IAAiD,QAAQ;AAAzD,iBAAE,QAAM,SAAS,UAAU,UA/C9B,IA+CG,IAAyC,iBAAzC,IAAyC,CAAvC,QAAM,WAAS,YAAU;AAC1B,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,YAAY,yBAAyB;AAAA,UACrC;AAAA,QACF;AAAA,QACA,cAAY,WAAW,aAAa;AAAA,QACpC,MAAK;AAAA,SACD,OATL;AAAA,QAWE;AAAA;AAAA,UACD,oBAAC,UAAK,WAAW,KAAK,qBAAqB,GAAG;AAAA;AAAA;AAAA,IAChD;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;","names":[]}
|
package/dist/index-no-css.js
CHANGED
|
@@ -1578,34 +1578,39 @@ AutoAnimateHeight.displayName = "AutoAnimateHeight";
|
|
|
1578
1578
|
|
|
1579
1579
|
// src/show-more/show-more.tsx
|
|
1580
1580
|
var import_typed_classname27 = require("@postenbring/hedwig-css/typed-classname");
|
|
1581
|
+
var import_react25 = require("react");
|
|
1581
1582
|
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
1582
|
-
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
}
|
|
1583
|
+
var ShowMoreButton = (0, import_react25.forwardRef)(
|
|
1584
|
+
(_a, ref) => {
|
|
1585
|
+
var _b = _a, { text, variant, expanded, className } = _b, rest = __objRest(_b, ["text", "variant", "expanded", "className"]);
|
|
1586
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
|
|
1587
|
+
"button",
|
|
1588
|
+
__spreadProps(__spreadValues({
|
|
1589
|
+
ref,
|
|
1590
|
+
className: (0, import_typed_classname27.clsx)(
|
|
1591
|
+
"hds-show-more",
|
|
1592
|
+
variant === "show-more-show-less" && "hds-show-more--show-less",
|
|
1593
|
+
className
|
|
1594
|
+
),
|
|
1595
|
+
"data-state": expanded ? "expanded" : void 0,
|
|
1596
|
+
type: "button"
|
|
1597
|
+
}, rest), {
|
|
1598
|
+
children: [
|
|
1599
|
+
text,
|
|
1600
|
+
/* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: (0, import_typed_classname27.clsx)("hds-show-more__icon") })
|
|
1601
|
+
]
|
|
1602
|
+
})
|
|
1603
|
+
);
|
|
1604
|
+
}
|
|
1605
|
+
);
|
|
1606
|
+
ShowMoreButton.displayName = "ShowMoreButton";
|
|
1602
1607
|
|
|
1603
1608
|
// src/skeleton/skeleton.tsx
|
|
1604
1609
|
var React11 = require("react");
|
|
1605
1610
|
var import_typed_classname28 = require("@postenbring/hedwig-css/typed-classname");
|
|
1606
|
-
var
|
|
1611
|
+
var import_react26 = require("react");
|
|
1607
1612
|
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
1608
|
-
var Skeleton = (0,
|
|
1613
|
+
var Skeleton = (0, import_react26.forwardRef)(
|
|
1609
1614
|
(_a, ref) => {
|
|
1610
1615
|
var _b = _a, { as: Component = "div", children, variant = "text", width, height, className, style } = _b, rest = __objRest(_b, ["as", "children", "variant", "width", "height", "className", "style"]);
|
|
1611
1616
|
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
@@ -1625,41 +1630,54 @@ Skeleton.displayName = "Skeleton";
|
|
|
1625
1630
|
|
|
1626
1631
|
// src/step-indicator/step-indicator.tsx
|
|
1627
1632
|
var import_typed_classname29 = require("@postenbring/hedwig-css/typed-classname");
|
|
1633
|
+
var import_react27 = require("react");
|
|
1628
1634
|
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
1629
|
-
|
|
1630
|
-
|
|
1631
|
-
|
|
1632
|
-
|
|
1633
|
-
|
|
1634
|
-
|
|
1635
|
-
|
|
1636
|
-
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
|
|
1641
|
-
|
|
1642
|
-
|
|
1643
|
-
|
|
1644
|
-
|
|
1645
|
-
|
|
1646
|
-
|
|
1647
|
-
|
|
1648
|
-
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
1649
|
-
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: (0, import_typed_classname29.clsx)("hds-step-indicator__left-label"), children: label }),
|
|
1650
|
-
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: stepLabelTranslations[lang](activeStep, totalSteps) })
|
|
1651
|
-
] }),
|
|
1652
|
-
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: (0, import_typed_classname29.clsx)("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
1635
|
+
var StepIndicator = (0, import_react27.forwardRef)(
|
|
1636
|
+
(_a, ref) => {
|
|
1637
|
+
var _b = _a, {
|
|
1638
|
+
activeStep,
|
|
1639
|
+
totalSteps,
|
|
1640
|
+
className,
|
|
1641
|
+
label,
|
|
1642
|
+
lang = "en",
|
|
1643
|
+
title,
|
|
1644
|
+
titleAs: TitleComponent
|
|
1645
|
+
} = _b, rest = __objRest(_b, [
|
|
1646
|
+
"activeStep",
|
|
1647
|
+
"totalSteps",
|
|
1648
|
+
"className",
|
|
1649
|
+
"label",
|
|
1650
|
+
"lang",
|
|
1651
|
+
"title",
|
|
1652
|
+
"titleAs"
|
|
1653
|
+
]);
|
|
1654
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
1653
1655
|
"div",
|
|
1654
|
-
{
|
|
1655
|
-
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
}
|
|
1656
|
+
__spreadProps(__spreadValues({
|
|
1657
|
+
ref,
|
|
1658
|
+
className: (0, import_typed_classname29.clsx)("hds-step-indicator", className),
|
|
1659
|
+
lang
|
|
1660
|
+
}, rest), {
|
|
1661
|
+
children: [
|
|
1662
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: (0, import_typed_classname29.clsx)("hds-step-indicator__header"), children: [
|
|
1663
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: (0, import_typed_classname29.clsx)("hds-step-indicator__left-label"), children: label }),
|
|
1664
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: stepLabelTranslations[lang](activeStep, totalSteps) })
|
|
1665
|
+
] }),
|
|
1666
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: (0, import_typed_classname29.clsx)("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
1667
|
+
"div",
|
|
1668
|
+
{
|
|
1669
|
+
className: (0, import_typed_classname29.clsx)("hds-step-indicator__step"),
|
|
1670
|
+
"data-state": getStepState(i + 1, activeStep)
|
|
1671
|
+
},
|
|
1672
|
+
i
|
|
1673
|
+
)) }),
|
|
1674
|
+
title ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TitleComponent, { className: (0, import_typed_classname29.clsx)("hds-step-indicator__title"), children: title }) : null
|
|
1675
|
+
]
|
|
1676
|
+
})
|
|
1677
|
+
);
|
|
1678
|
+
}
|
|
1679
|
+
);
|
|
1680
|
+
StepIndicator.displayName = "StepIndicator";
|
|
1663
1681
|
var stepLabelTranslations = {
|
|
1664
1682
|
no: (activeStep, totalSteps) => `steg ${activeStep} av ${totalSteps}`,
|
|
1665
1683
|
en: (activeStep, totalSteps) => `step ${activeStep} of ${totalSteps}`,
|
|
@@ -1677,10 +1695,10 @@ function getStepState(renderedStep, activeStep) {
|
|
|
1677
1695
|
}
|
|
1678
1696
|
|
|
1679
1697
|
// src/styled-html/styled-html.tsx
|
|
1680
|
-
var
|
|
1698
|
+
var import_react28 = require("react");
|
|
1681
1699
|
var import_typed_classname30 = require("@postenbring/hedwig-css/typed-classname");
|
|
1682
1700
|
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
1683
|
-
var StyledHtml = (0,
|
|
1701
|
+
var StyledHtml = (0, import_react28.forwardRef)(
|
|
1684
1702
|
(_a, ref) => {
|
|
1685
1703
|
var _b = _a, { as: Component = "div", children, size, darkmode = false, className } = _b, rest = __objRest(_b, ["as", "children", "size", "darkmode", "className"]);
|
|
1686
1704
|
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
@@ -1702,12 +1720,12 @@ var StyledHtml = (0, import_react26.forwardRef)(
|
|
|
1702
1720
|
StyledHtml.displayName = "StyledHtml";
|
|
1703
1721
|
|
|
1704
1722
|
// src/tabs/tabs.tsx
|
|
1705
|
-
var
|
|
1723
|
+
var import_react30 = require("react");
|
|
1706
1724
|
var import_typed_classname31 = require("@postenbring/hedwig-css/typed-classname");
|
|
1707
1725
|
|
|
1708
1726
|
// src/tabs/context.ts
|
|
1709
|
-
var
|
|
1710
|
-
var TabsContext = (0,
|
|
1727
|
+
var import_react29 = require("react");
|
|
1728
|
+
var TabsContext = (0, import_react29.createContext)({
|
|
1711
1729
|
mounted: false,
|
|
1712
1730
|
activeTabId: void 0,
|
|
1713
1731
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- Added default section, without handling
|
|
@@ -1717,10 +1735,10 @@ var TabsContext = (0, import_react27.createContext)({
|
|
|
1717
1735
|
|
|
1718
1736
|
// src/tabs/tabs.tsx
|
|
1719
1737
|
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
1720
|
-
var Tabs = (0,
|
|
1738
|
+
var Tabs = (0, import_react30.forwardRef)(
|
|
1721
1739
|
(_a, ref) => {
|
|
1722
1740
|
var _b = _a, { as: Component = "div", defaultTab, children } = _b, rest = __objRest(_b, ["as", "defaultTab", "children"]);
|
|
1723
|
-
const [activeTabId, setActiveTabId] = (0,
|
|
1741
|
+
const [activeTabId, setActiveTabId] = (0, import_react30.useState)(defaultTab);
|
|
1724
1742
|
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Component, __spreadProps(__spreadValues({ className: (0, import_typed_classname31.clsx)("hds-tabs"), ref }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
1725
1743
|
TabsContext.Provider,
|
|
1726
1744
|
{
|
|
@@ -1733,12 +1751,12 @@ var Tabs = (0, import_react28.forwardRef)(
|
|
|
1733
1751
|
Tabs.displayName = "Tabs";
|
|
1734
1752
|
|
|
1735
1753
|
// src/tabs/tabs-list.tsx
|
|
1736
|
-
var
|
|
1754
|
+
var import_react31 = require("react");
|
|
1737
1755
|
var import_typed_classname32 = require("@postenbring/hedwig-css/typed-classname");
|
|
1738
1756
|
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
1739
1757
|
function TabsList(_a) {
|
|
1740
1758
|
var _b = _a, { children, direction = "horizontal", className } = _b, rest = __objRest(_b, ["children", "direction", "className"]);
|
|
1741
|
-
const tabsListRef = (0,
|
|
1759
|
+
const tabsListRef = (0, import_react31.useRef)(null);
|
|
1742
1760
|
const { width: tabsWidth } = useResize(tabsListRef);
|
|
1743
1761
|
const { innerWidth } = window;
|
|
1744
1762
|
const wideEnough = innerWidth >= tabsWidth;
|
|
@@ -1763,10 +1781,10 @@ function TabsList(_a) {
|
|
|
1763
1781
|
);
|
|
1764
1782
|
}
|
|
1765
1783
|
TabsList.displayName = "Tabs.List";
|
|
1766
|
-
var Tab = (0,
|
|
1784
|
+
var Tab = (0, import_react31.forwardRef)(
|
|
1767
1785
|
(_a, ref) => {
|
|
1768
1786
|
var _b = _a, { as: Component = "button", children, tabId, className, onClick } = _b, rest = __objRest(_b, ["as", "children", "tabId", "className", "onClick"]);
|
|
1769
|
-
const context = (0,
|
|
1787
|
+
const context = (0, import_react31.useContext)(TabsContext);
|
|
1770
1788
|
if (!context.mounted) {
|
|
1771
1789
|
throw new Error("Context required. Did you use <TabContent/> outside of <Tabs/>?");
|
|
1772
1790
|
}
|
|
@@ -1796,7 +1814,7 @@ var Tab = (0, import_react29.forwardRef)(
|
|
|
1796
1814
|
Tab.displayName = "Tabs.Tab";
|
|
1797
1815
|
|
|
1798
1816
|
// src/tabs/tabs-content.tsx
|
|
1799
|
-
var
|
|
1817
|
+
var import_react32 = require("react");
|
|
1800
1818
|
var import_typed_classname33 = require("@postenbring/hedwig-css/typed-classname");
|
|
1801
1819
|
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
1802
1820
|
function TabsContents(_a) {
|
|
@@ -1804,10 +1822,10 @@ function TabsContents(_a) {
|
|
|
1804
1822
|
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", __spreadProps(__spreadValues({ className: (0, import_typed_classname33.clsx)("hds-tabs--contents") }, rest), { children }));
|
|
1805
1823
|
}
|
|
1806
1824
|
TabsContents.displayName = "Tabs.Contents";
|
|
1807
|
-
var TabsContent = (0,
|
|
1825
|
+
var TabsContent = (0, import_react32.forwardRef)(
|
|
1808
1826
|
(_a, ref) => {
|
|
1809
1827
|
var _b = _a, { as: Component = "div", forTabId, children } = _b, rest = __objRest(_b, ["as", "forTabId", "children"]);
|
|
1810
|
-
const context = (0,
|
|
1828
|
+
const context = (0, import_react32.useContext)(TabsContext);
|
|
1811
1829
|
if (!context.mounted) {
|
|
1812
1830
|
throw new Error("Context required. Did you use <Tabs.Content /> outside of <Tabs/>?");
|
|
1813
1831
|
}
|
|
@@ -1827,7 +1845,7 @@ TabsComponent.Contents = TabsContents;
|
|
|
1827
1845
|
TabsComponent.Content = TabsContent;
|
|
1828
1846
|
|
|
1829
1847
|
// src/text/text.tsx
|
|
1830
|
-
var
|
|
1848
|
+
var import_react33 = require("react");
|
|
1831
1849
|
var import_typed_classname34 = require("@postenbring/hedwig-css/typed-classname");
|
|
1832
1850
|
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
1833
1851
|
var defaultHTMLTag = {
|
|
@@ -1845,7 +1863,7 @@ var defaultHTMLTag = {
|
|
|
1845
1863
|
caption: "p",
|
|
1846
1864
|
"caption-title": "p"
|
|
1847
1865
|
};
|
|
1848
|
-
var Text = (0,
|
|
1866
|
+
var Text = (0, import_react33.forwardRef)(
|
|
1849
1867
|
(_a, ref) => {
|
|
1850
1868
|
var _b = _a, {
|
|
1851
1869
|
as,
|
|
@@ -1921,10 +1939,10 @@ function textVariant(variant, displayName) {
|
|
|
1921
1939
|
}
|
|
1922
1940
|
|
|
1923
1941
|
// src/warning-banner/warning-banner.tsx
|
|
1924
|
-
var
|
|
1942
|
+
var import_react34 = require("react");
|
|
1925
1943
|
var import_typed_classname35 = require("@postenbring/hedwig-css/typed-classname");
|
|
1926
1944
|
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
1927
|
-
var WarningBanner = (0,
|
|
1945
|
+
var WarningBanner = (0, import_react34.forwardRef)(
|
|
1928
1946
|
(_a, ref) => {
|
|
1929
1947
|
var _b = _a, { title, description, className } = _b, rest = __objRest(_b, ["title", "description", "className"]);
|
|
1930
1948
|
const expandable = !!description;
|
|
@@ -1935,7 +1953,7 @@ var WarningBanner = (0, import_react32.forwardRef)(
|
|
|
1935
1953
|
}
|
|
1936
1954
|
);
|
|
1937
1955
|
WarningBanner.displayName = "WarningBanner";
|
|
1938
|
-
var WarningBannerTitle = (0,
|
|
1956
|
+
var WarningBannerTitle = (0, import_react34.forwardRef)(
|
|
1939
1957
|
(_a, ref) => {
|
|
1940
1958
|
var _b = _a, {
|
|
1941
1959
|
variant,
|
|
@@ -1948,7 +1966,7 @@ var WarningBannerTitle = (0, import_react32.forwardRef)(
|
|
|
1948
1966
|
"children",
|
|
1949
1967
|
"className"
|
|
1950
1968
|
]);
|
|
1951
|
-
const [open, setOpen] = (0,
|
|
1969
|
+
const [open, setOpen] = (0, import_react34.useState)(false);
|
|
1952
1970
|
if (variant === "expandable") {
|
|
1953
1971
|
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
1954
1972
|
Component,
|
|
@@ -1981,7 +1999,7 @@ var WarningBannerTitle = (0, import_react32.forwardRef)(
|
|
|
1981
1999
|
}
|
|
1982
2000
|
);
|
|
1983
2001
|
WarningBannerTitle.displayName = "WarningBannerTitle";
|
|
1984
|
-
var WarningBannerDescription = (0,
|
|
2002
|
+
var WarningBannerDescription = (0, import_react34.forwardRef)(
|
|
1985
2003
|
(_a, ref) => {
|
|
1986
2004
|
var _b = _a, { as: Component = "p", className } = _b, rest = __objRest(_b, ["as", "className"]);
|
|
1987
2005
|
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|