@zentauri-ui/zentauri-components 1.5.22 → 1.5.31

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.
Files changed (77) hide show
  1. package/README.md +59 -2
  2. package/cli/registry.json +2 -0
  3. package/dist/chunk-7OHC4ERB.mjs +60 -0
  4. package/dist/chunk-7OHC4ERB.mjs.map +1 -0
  5. package/dist/{chunk-2VQJ6OIL.js → chunk-HPN7H5ZM.js} +2 -2
  6. package/dist/{chunk-2VQJ6OIL.js.map → chunk-HPN7H5ZM.js.map} +1 -1
  7. package/dist/chunk-JJDANNNL.mjs +71 -0
  8. package/dist/chunk-JJDANNNL.mjs.map +1 -0
  9. package/dist/chunk-KXUG4WVW.js +62 -0
  10. package/dist/chunk-KXUG4WVW.js.map +1 -0
  11. package/dist/chunk-MEJMX4QI.js +73 -0
  12. package/dist/chunk-MEJMX4QI.js.map +1 -0
  13. package/dist/chunk-N6B35KWW.mjs +3 -0
  14. package/dist/chunk-N6B35KWW.mjs.map +1 -0
  15. package/dist/{chunk-73VCO5TE.mjs → chunk-NWOE2TZN.mjs} +2 -2
  16. package/dist/{chunk-73VCO5TE.mjs.map → chunk-NWOE2TZN.mjs.map} +1 -1
  17. package/dist/chunk-RGOMHX4G.js +4 -0
  18. package/dist/chunk-RGOMHX4G.js.map +1 -0
  19. package/dist/hooks/useControllableState.js +3 -2
  20. package/dist/hooks/useControllableState.mjs +2 -1
  21. package/dist/hooks/useDisclosure.js +3 -2
  22. package/dist/hooks/useDisclosure.js.map +1 -1
  23. package/dist/hooks/useDisclosure.mjs +2 -1
  24. package/dist/hooks/useDisclosure.mjs.map +1 -1
  25. package/dist/hooks/useDynamicStepper/index.d.ts +2 -0
  26. package/dist/hooks/useDynamicStepper/index.d.ts.map +1 -0
  27. package/dist/hooks/useDynamicStepper/useDynamicStepper.d.ts +9 -0
  28. package/dist/hooks/useDynamicStepper/useDynamicStepper.d.ts.map +1 -0
  29. package/dist/hooks/useDynamicStepper.js +14 -0
  30. package/dist/hooks/useDynamicStepper.js.map +1 -0
  31. package/dist/hooks/useDynamicStepper.mjs +5 -0
  32. package/dist/hooks/useDynamicStepper.mjs.map +1 -0
  33. package/dist/ui/buttons.js +7 -55
  34. package/dist/ui/buttons.js.map +1 -1
  35. package/dist/ui/buttons.mjs +2 -58
  36. package/dist/ui/buttons.mjs.map +1 -1
  37. package/dist/ui/dynamic-stepper/dynamic-stepper.d.ts +6 -0
  38. package/dist/ui/dynamic-stepper/dynamic-stepper.d.ts.map +1 -0
  39. package/dist/ui/dynamic-stepper/index.d.ts +5 -0
  40. package/dist/ui/dynamic-stepper/index.d.ts.map +1 -0
  41. package/dist/ui/dynamic-stepper/types.d.ts +61 -0
  42. package/dist/ui/dynamic-stepper/types.d.ts.map +1 -0
  43. package/dist/ui/dynamic-stepper/variants.d.ts +21 -0
  44. package/dist/ui/dynamic-stepper/variants.d.ts.map +1 -0
  45. package/dist/ui/dynamic-stepper.js +312 -0
  46. package/dist/ui/dynamic-stepper.js.map +1 -0
  47. package/dist/ui/dynamic-stepper.mjs +305 -0
  48. package/dist/ui/dynamic-stepper.mjs.map +1 -0
  49. package/dist/ui/pagination/pagination.d.ts +5 -16
  50. package/dist/ui/pagination/pagination.d.ts.map +1 -1
  51. package/dist/ui/pagination/types.d.ts +2 -2
  52. package/dist/ui/pagination/types.d.ts.map +1 -1
  53. package/dist/ui/pagination.js +171 -180
  54. package/dist/ui/pagination.js.map +1 -1
  55. package/dist/ui/pagination.mjs +172 -181
  56. package/dist/ui/pagination.mjs.map +1 -1
  57. package/dist/ui/typography/blockquote-base.d.ts.map +1 -1
  58. package/dist/ui/typography/code-block-base.d.ts.map +1 -1
  59. package/dist/ui/typography/heading-base.d.ts.map +1 -1
  60. package/dist/ui/typography/inline-code-base.d.ts.map +1 -1
  61. package/dist/ui/typography.js.map +1 -1
  62. package/dist/ui/typography.mjs.map +1 -1
  63. package/package.json +1 -1
  64. package/src/hooks/useDynamicStepper/index.ts +3 -0
  65. package/src/hooks/useDynamicStepper/useDynamicStepper.test.ts +107 -0
  66. package/src/hooks/useDynamicStepper/useDynamicStepper.ts +91 -0
  67. package/src/ui/dynamic-stepper/dynamic-stepper.test.tsx +109 -0
  68. package/src/ui/dynamic-stepper/dynamic-stepper.tsx +173 -0
  69. package/src/ui/dynamic-stepper/index.ts +24 -0
  70. package/src/ui/dynamic-stepper/types.ts +85 -0
  71. package/src/ui/dynamic-stepper/variants.ts +238 -0
  72. package/src/ui/pagination/pagination.tsx +186 -197
  73. package/src/ui/pagination/types.ts +2 -2
  74. package/src/ui/typography/blockquote-base.tsx +0 -2
  75. package/src/ui/typography/code-block-base.tsx +0 -2
  76. package/src/ui/typography/heading-base.tsx +0 -2
  77. package/src/ui/typography/inline-code-base.tsx +0 -2
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"useDynamicStepper.mjs"}
@@ -1,67 +1,19 @@
1
1
  "use client";
2
2
  'use strict';
3
3
 
4
+ var chunkKXUG4WVW_js = require('../chunk-KXUG4WVW.js');
4
5
  var chunkOB4KJZK2_js = require('../chunk-OB4KJZK2.js');
5
- var chunkZS5756ZC_js = require('../chunk-ZS5756ZC.js');
6
- var jsxRuntime = require('react/jsx-runtime');
6
+ require('../chunk-ZS5756ZC.js');
7
7
 
8
- var ButtonBase = (props) => {
9
- if (props.as === "link") {
10
- const {
11
- className: className2,
12
- appearance: appearance2,
13
- size: size2,
14
- children: children2,
15
- ref: ref2,
16
- href,
17
- target,
18
- ...rest2
19
- } = props;
20
- return /* @__PURE__ */ jsxRuntime.jsx(
21
- "a",
22
- {
23
- ref: ref2,
24
- href,
25
- target,
26
- rel: target === "_blank" ? "noopener noreferrer" : void 0,
27
- "data-slot": "button",
28
- className: chunkZS5756ZC_js.cn(chunkOB4KJZK2_js.buttonVariants({ appearance: appearance2, size: size2 }), className2),
29
- ...rest2,
30
- children: children2
31
- }
32
- );
33
- }
34
- const {
35
- className,
36
- appearance,
37
- size,
38
- type = "button",
39
- children,
40
- ref,
41
- ...rest
42
- } = props;
43
- return /* @__PURE__ */ jsxRuntime.jsx(
44
- "button",
45
- {
46
- ref,
47
- type,
48
- "data-slot": "button",
49
- className: chunkZS5756ZC_js.cn(chunkOB4KJZK2_js.buttonVariants({ appearance, size }), className),
50
- ...rest,
51
- children
52
- }
53
- );
54
- };
55
- ButtonBase.displayName = "Button";
56
- var Button = (props) => {
57
- return /* @__PURE__ */ jsxRuntime.jsx(ButtonBase, { ...props });
58
- };
59
- Button.displayName = "Button";
60
8
 
9
+
10
+ Object.defineProperty(exports, "Button", {
11
+ enumerable: true,
12
+ get: function () { return chunkKXUG4WVW_js.Button; }
13
+ });
61
14
  Object.defineProperty(exports, "buttonVariants", {
62
15
  enumerable: true,
63
16
  get: function () { return chunkOB4KJZK2_js.buttonVariants; }
64
17
  });
65
- exports.Button = Button;
66
18
  //# sourceMappingURL=buttons.js.map
67
19
  //# sourceMappingURL=buttons.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/ui/buttons/button-base.tsx","../../src/ui/buttons/button.tsx"],"names":["className","appearance","size","children","ref","rest","jsx","cn","buttonVariants"],"mappings":";;;;;;AAOO,IAAM,UAAA,GAAa,CAAC,KAAA,KAAuB;AAChD,EAAA,IAAI,KAAA,CAAM,OAAO,MAAA,EAAQ;AACvB,IAAA,MAAM;AAAA,MACJ,SAAA,EAAAA,UAAAA;AAAA,MACA,UAAA,EAAAC,WAAAA;AAAA,MACA,IAAA,EAAAC,KAAAA;AAAA,MACA,QAAA,EAAAC,SAAAA;AAAA,MACA,GAAA,EAAAC,IAAAA;AAAA,MACA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,GAAGC;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,uBACEC,cAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAKF,IAAAA;AAAA,QACL,IAAA;AAAA,QACA,MAAA;AAAA,QACA,GAAA,EAAK,MAAA,KAAW,QAAA,GAAW,qBAAA,GAAwB,MAAA;AAAA,QACnD,WAAA,EAAU,QAAA;AAAA,QACV,SAAA,EAAWG,mBAAA,CAAGC,+BAAA,CAAe,EAAE,UAAA,EAAAP,aAAY,IAAA,EAAAC,KAAAA,EAAM,CAAA,EAAGF,UAAS,CAAA;AAAA,QAC5D,GAAGK,KAAAA;AAAA,QAEH,QAAA,EAAAF;AAAA;AAAA,KACH;AAAA,EAEJ;AAEA,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA,GAAO,QAAA;AAAA,IACP,QAAA;AAAA,IACA,GAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,uBACEG,cAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,IAAA;AAAA,MACA,WAAA,EAAU,QAAA;AAAA,MACV,SAAA,EAAWC,oBAAGC,+BAAA,CAAe,EAAE,YAAY,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,MAC5D,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,UAAA,CAAW,WAAA,GAAc,QAAA;ACtDlB,IAAM,MAAA,GAAS,CAAC,KAAA,KAAuB;AAC5C,EAAA,uBAAOF,cAAAA,CAAC,UAAA,EAAA,EAAY,GAAG,KAAA,EAAO,CAAA;AAChC;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"buttons.js","sourcesContent":["\"use client\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { ButtonProps } from \"./types\";\nimport { buttonVariants } from \"./variants\";\n\nexport const ButtonBase = (props: ButtonProps) => {\n if (props.as === \"link\") {\n const {\n className,\n appearance,\n size,\n children,\n ref,\n href,\n target,\n ...rest\n } = props;\n\n return (\n <a\n ref={ref}\n href={href}\n target={target}\n rel={target === \"_blank\" ? \"noopener noreferrer\" : undefined}\n data-slot=\"button\"\n className={cn(buttonVariants({ appearance, size }), className)}\n {...rest}\n >\n {children}\n </a>\n );\n }\n\n const {\n className,\n appearance,\n size,\n type = \"button\",\n children,\n ref,\n ...rest\n } = props;\n\n return (\n <button\n ref={ref}\n type={type}\n data-slot=\"button\"\n className={cn(buttonVariants({ appearance, size }), className)}\n {...rest}\n >\n {children}\n </button>\n );\n};\n\nButtonBase.displayName = \"Button\";\n","// button.tsx — default static entry (no framer-motion)\nimport { ButtonBase } from \"./button-base\";\nimport type { ButtonProps } from \"./types\";\n\nexport const Button = (props: ButtonProps) => {\n return <ButtonBase {...props} />;\n};\n\nButton.displayName = \"Button\";\n"]}
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"buttons.js"}
@@ -1,62 +1,6 @@
1
1
  "use client";
2
- import { buttonVariants } from '../chunk-5TV7EL3H.mjs';
2
+ export { Button } from '../chunk-7OHC4ERB.mjs';
3
3
  export { buttonVariants } from '../chunk-5TV7EL3H.mjs';
4
- import { cn } from '../chunk-4D54YOL6.mjs';
5
- import { jsx } from 'react/jsx-runtime';
6
-
7
- var ButtonBase = (props) => {
8
- if (props.as === "link") {
9
- const {
10
- className: className2,
11
- appearance: appearance2,
12
- size: size2,
13
- children: children2,
14
- ref: ref2,
15
- href,
16
- target,
17
- ...rest2
18
- } = props;
19
- return /* @__PURE__ */ jsx(
20
- "a",
21
- {
22
- ref: ref2,
23
- href,
24
- target,
25
- rel: target === "_blank" ? "noopener noreferrer" : void 0,
26
- "data-slot": "button",
27
- className: cn(buttonVariants({ appearance: appearance2, size: size2 }), className2),
28
- ...rest2,
29
- children: children2
30
- }
31
- );
32
- }
33
- const {
34
- className,
35
- appearance,
36
- size,
37
- type = "button",
38
- children,
39
- ref,
40
- ...rest
41
- } = props;
42
- return /* @__PURE__ */ jsx(
43
- "button",
44
- {
45
- ref,
46
- type,
47
- "data-slot": "button",
48
- className: cn(buttonVariants({ appearance, size }), className),
49
- ...rest,
50
- children
51
- }
52
- );
53
- };
54
- ButtonBase.displayName = "Button";
55
- var Button = (props) => {
56
- return /* @__PURE__ */ jsx(ButtonBase, { ...props });
57
- };
58
- Button.displayName = "Button";
59
-
60
- export { Button };
4
+ import '../chunk-4D54YOL6.mjs';
61
5
  //# sourceMappingURL=buttons.mjs.map
62
6
  //# sourceMappingURL=buttons.mjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/ui/buttons/button-base.tsx","../../src/ui/buttons/button.tsx"],"names":["className","appearance","size","children","ref","rest","jsx"],"mappings":";;;;;AAOO,IAAM,UAAA,GAAa,CAAC,KAAA,KAAuB;AAChD,EAAA,IAAI,KAAA,CAAM,OAAO,MAAA,EAAQ;AACvB,IAAA,MAAM;AAAA,MACJ,SAAA,EAAAA,UAAAA;AAAA,MACA,UAAA,EAAAC,WAAAA;AAAA,MACA,IAAA,EAAAC,KAAAA;AAAA,MACA,QAAA,EAAAC,SAAAA;AAAA,MACA,GAAA,EAAAC,IAAAA;AAAA,MACA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,GAAGC;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,uBACE,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAKD,IAAAA;AAAA,QACL,IAAA;AAAA,QACA,MAAA;AAAA,QACA,GAAA,EAAK,MAAA,KAAW,QAAA,GAAW,qBAAA,GAAwB,MAAA;AAAA,QACnD,WAAA,EAAU,QAAA;AAAA,QACV,SAAA,EAAW,EAAA,CAAG,cAAA,CAAe,EAAE,UAAA,EAAAH,aAAY,IAAA,EAAAC,KAAAA,EAAM,CAAA,EAAGF,UAAS,CAAA;AAAA,QAC5D,GAAGK,KAAAA;AAAA,QAEH,QAAA,EAAAF;AAAA;AAAA,KACH;AAAA,EAEJ;AAEA,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA,GAAO,QAAA;AAAA,IACP,QAAA;AAAA,IACA,GAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,IAAA;AAAA,MACA,WAAA,EAAU,QAAA;AAAA,MACV,SAAA,EAAW,GAAG,cAAA,CAAe,EAAE,YAAY,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,MAC5D,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,UAAA,CAAW,WAAA,GAAc,QAAA;ACtDlB,IAAM,MAAA,GAAS,CAAC,KAAA,KAAuB;AAC5C,EAAA,uBAAOG,GAAAA,CAAC,UAAA,EAAA,EAAY,GAAG,KAAA,EAAO,CAAA;AAChC;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"buttons.mjs","sourcesContent":["\"use client\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { ButtonProps } from \"./types\";\nimport { buttonVariants } from \"./variants\";\n\nexport const ButtonBase = (props: ButtonProps) => {\n if (props.as === \"link\") {\n const {\n className,\n appearance,\n size,\n children,\n ref,\n href,\n target,\n ...rest\n } = props;\n\n return (\n <a\n ref={ref}\n href={href}\n target={target}\n rel={target === \"_blank\" ? \"noopener noreferrer\" : undefined}\n data-slot=\"button\"\n className={cn(buttonVariants({ appearance, size }), className)}\n {...rest}\n >\n {children}\n </a>\n );\n }\n\n const {\n className,\n appearance,\n size,\n type = \"button\",\n children,\n ref,\n ...rest\n } = props;\n\n return (\n <button\n ref={ref}\n type={type}\n data-slot=\"button\"\n className={cn(buttonVariants({ appearance, size }), className)}\n {...rest}\n >\n {children}\n </button>\n );\n};\n\nButtonBase.displayName = \"Button\";\n","// button.tsx — default static entry (no framer-motion)\nimport { ButtonBase } from \"./button-base\";\nimport type { ButtonProps } from \"./types\";\n\nexport const Button = (props: ButtonProps) => {\n return <ButtonBase {...props} />;\n};\n\nButton.displayName = \"Button\";\n"]}
1
+ {"version":3,"sources":[],"names":[],"mappings":"","file":"buttons.mjs"}
@@ -0,0 +1,6 @@
1
+ import type { DynamicStepperProps } from "./types";
2
+ export declare const DynamicStepper: {
3
+ ({ steps, orientation, buttonAppearance, buttonSize, indicatorSize, indicatorCompleteAppearance, indicatorCurrentAppearance, indicatorUpcomingAppearance, activeStep: activeStepProp, defaultActiveStep, onActiveStepChange, onPrevious, onNext, prevLabel, nextLabel, className, ref, ...rest }: DynamicStepperProps): import("react/jsx-runtime").JSX.Element | null;
4
+ displayName: string;
5
+ };
6
+ //# sourceMappingURL=dynamic-stepper.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"dynamic-stepper.d.ts","sourceRoot":"","sources":["../../../src/ui/dynamic-stepper/dynamic-stepper.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AASnD,eAAO,MAAM,cAAc;sSAmBxB,mBAAmB;;CAsIrB,CAAC"}
@@ -0,0 +1,5 @@
1
+ export { DynamicStepper } from "./dynamic-stepper";
2
+ export type { DynamicStepperButtonAppearance, DynamicStepperButtonSize, DynamicStepperIndicatorSize, DynamicStepperIndicatorToneAppearance, DynamicStepperOrientation, DynamicStepperProps, DynamicStepperStep, UseDynamicStepperParams, UseDynamicStepperResult, } from "./types";
3
+ export { dynamicStepperIndicatorToneClass, dynamicStepperIndicatorVariants, dynamicStepperItemVariants, dynamicStepperMapperVariants, dynamicStepperRootVariants, } from "./variants";
4
+ export type { DynamicStepperIndicatorSemanticState, } from "./variants";
5
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/dynamic-stepper/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,YAAY,EACV,8BAA8B,EAC9B,wBAAwB,EACxB,2BAA2B,EAC3B,qCAAqC,EACrC,yBAAyB,EACzB,mBAAmB,EACnB,kBAAkB,EAClB,uBAAuB,EACvB,uBAAuB,GACxB,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,gCAAgC,EAChC,+BAA+B,EAC/B,0BAA0B,EAC1B,4BAA4B,EAC5B,0BAA0B,GAC3B,MAAM,YAAY,CAAC;AACpB,YAAY,EACV,oCAAoC,GACrC,MAAM,YAAY,CAAC"}
@@ -0,0 +1,61 @@
1
+ import type { VariantProps } from "class-variance-authority";
2
+ import type { ComponentPropsWithRef, ReactNode } from "react";
3
+ import type { buttonVariants } from "../buttons/variants";
4
+ import type { DynamicStepperIndicatorToneAppearance, dynamicStepperIndicatorVariants, dynamicStepperRootVariants } from "./variants";
5
+ export type DynamicStepperOrientation = NonNullable<VariantProps<typeof dynamicStepperRootVariants>["orientation"]>;
6
+ export type DynamicStepperIndicatorSize = NonNullable<VariantProps<typeof dynamicStepperIndicatorVariants>["size"]>;
7
+ export type { DynamicStepperIndicatorToneAppearance };
8
+ export type DynamicStepperStep = {
9
+ id?: string;
10
+ title?: ReactNode;
11
+ description?: ReactNode;
12
+ indicator?: ReactNode;
13
+ };
14
+ export type DynamicStepperButtonAppearance = NonNullable<VariantProps<typeof buttonVariants>["appearance"]>;
15
+ export type DynamicStepperButtonSize = NonNullable<VariantProps<typeof buttonVariants>["size"]>;
16
+ export type UseDynamicStepperParams = {
17
+ stepCount: number;
18
+ /** Controlled active step index (0-based). */
19
+ activeStep?: number;
20
+ /** Initial step when uncontrolled. Clamped to `[0, stepCount - 1]`. */
21
+ defaultActiveStep?: number;
22
+ onActiveStepChange?: (step: number) => void;
23
+ /** Fires after a successful move from the previous button with the new index. */
24
+ onPrevious?: (nextStep: number) => void;
25
+ /** Fires after a successful move from the next button with the new index. */
26
+ onNext?: (nextStep: number) => void;
27
+ };
28
+ export type UseDynamicStepperResult = {
29
+ /** Active step index (0-based), clamped to valid range. */
30
+ activeStep: number;
31
+ setActiveStep: (next: number | ((prev: number) => number)) => void;
32
+ goPrevious: () => void;
33
+ goNext: () => void;
34
+ canGoPrevious: boolean;
35
+ canGoNext: boolean;
36
+ stepCount: number;
37
+ };
38
+ export type DynamicStepperProps = Omit<ComponentPropsWithRef<"div">, "children"> & {
39
+ steps: DynamicStepperStep[];
40
+ orientation?: DynamicStepperOrientation;
41
+ /** Passed to Previous / Next `Button` components. */
42
+ buttonAppearance?: DynamicStepperButtonAppearance;
43
+ /** Passed to Previous / Next `Button` components. */
44
+ buttonSize?: DynamicStepperButtonSize;
45
+ /** Indicator + text scale inside the mapper. */
46
+ indicatorSize?: DynamicStepperIndicatorSize;
47
+ /** Tone for completed steps (non-gradient button palette). @defaultValue emerald */
48
+ indicatorCompleteAppearance?: DynamicStepperIndicatorToneAppearance;
49
+ /** Tone for the active step. @defaultValue violet */
50
+ indicatorCurrentAppearance?: DynamicStepperIndicatorToneAppearance;
51
+ /** Tone for upcoming steps. @defaultValue outline */
52
+ indicatorUpcomingAppearance?: DynamicStepperIndicatorToneAppearance;
53
+ activeStep?: number;
54
+ defaultActiveStep?: number;
55
+ onActiveStepChange?: (step: number) => void;
56
+ onPrevious?: (nextStep: number) => void;
57
+ onNext?: (nextStep: number) => void;
58
+ prevLabel?: ReactNode;
59
+ nextLabel?: ReactNode;
60
+ };
61
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/ui/dynamic-stepper/types.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,21 @@
1
+ import type { VariantProps } from "class-variance-authority";
2
+ import type { buttonVariants } from "../buttons/variants";
3
+ type GradientButtonAppearance = "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange";
4
+ /** Button `appearance` keys usable for indicator tones (gradients excluded). */
5
+ export type DynamicStepperIndicatorToneAppearance = Exclude<NonNullable<VariantProps<typeof buttonVariants>["appearance"]>, GradientButtonAppearance>;
6
+ export type DynamicStepperIndicatorSemanticState = "complete" | "current" | "upcoming";
7
+ export declare function dynamicStepperIndicatorToneClass(state: DynamicStepperIndicatorSemanticState, tone: DynamicStepperIndicatorToneAppearance): string;
8
+ export declare const dynamicStepperRootVariants: (props?: ({
9
+ orientation?: "horizontal" | "vertical" | null | undefined;
10
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
11
+ export declare const dynamicStepperMapperVariants: (props?: ({
12
+ orientation?: "horizontal" | "vertical" | null | undefined;
13
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
14
+ export declare const dynamicStepperItemVariants: (props?: ({
15
+ orientation?: "horizontal" | "vertical" | null | undefined;
16
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
17
+ export declare const dynamicStepperIndicatorVariants: (props?: ({
18
+ size?: "sm" | "md" | "lg" | null | undefined;
19
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
20
+ export {};
21
+ //# sourceMappingURL=variants.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/ui/dynamic-stepper/variants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG7D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D,KAAK,wBAAwB,GACzB,eAAe,GACf,gBAAgB,GAChB,cAAc,GACd,iBAAiB,GACjB,iBAAiB,GACjB,eAAe,GACf,iBAAiB,GACjB,eAAe,GACf,iBAAiB,CAAC;AAEtB,gFAAgF;AAChF,MAAM,MAAM,qCAAqC,GAAG,OAAO,CACzD,WAAW,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,YAAY,CAAC,CAAC,EAC9D,wBAAwB,CACzB,CAAC;AAEF,MAAM,MAAM,oCAAoC,GAC5C,UAAU,GACV,SAAS,GACT,UAAU,CAAC;AA0Jf,wBAAgB,gCAAgC,CAC9C,KAAK,EAAE,oCAAoC,EAC3C,IAAI,EAAE,qCAAqC,GAC1C,MAAM,CAER;AAED,eAAO,MAAM,0BAA0B;;8EAWrC,CAAC;AAEH,eAAO,MAAM,4BAA4B;;8EAUvC,CAAC;AAEH,eAAO,MAAM,0BAA0B;;8EAUrC,CAAC;AAEH,eAAO,MAAM,+BAA+B;;8EAc3C,CAAC"}
@@ -0,0 +1,312 @@
1
+ "use client";
2
+ 'use strict';
3
+
4
+ var chunkMEJMX4QI_js = require('../chunk-MEJMX4QI.js');
5
+ require('../chunk-HPN7H5ZM.js');
6
+ var chunkKXUG4WVW_js = require('../chunk-KXUG4WVW.js');
7
+ require('../chunk-OB4KJZK2.js');
8
+ var chunkZS5756ZC_js = require('../chunk-ZS5756ZC.js');
9
+ var react = require('react');
10
+ var classVarianceAuthority = require('class-variance-authority');
11
+ var jsxRuntime = require('react/jsx-runtime');
12
+
13
+ var INDICATOR_TONE_CLASSES = {
14
+ default: {
15
+ complete: "border-slate-400/55 bg-slate-500/25 text-slate-50 ring-2 ring-slate-400/25",
16
+ current: "border-slate-300 bg-slate-500/35 text-white ring-2 ring-slate-300/45",
17
+ upcoming: "border-white/15 bg-white/5 text-slate-400"
18
+ },
19
+ secondary: {
20
+ complete: "border-slate-600 bg-slate-800/70 text-slate-200 ring-2 ring-slate-600/35",
21
+ current: "border-slate-500 bg-slate-700/55 text-white ring-2 ring-slate-500/45",
22
+ upcoming: "border-white/10 bg-slate-900/50 text-slate-500"
23
+ },
24
+ destructive: {
25
+ complete: "border-rose-500/60 bg-rose-500/20 text-rose-100 ring-2 ring-rose-400/30",
26
+ current: "border-rose-400 bg-rose-600/35 text-white ring-2 ring-rose-400/50",
27
+ upcoming: "border-white/15 bg-rose-950/25 text-slate-400"
28
+ },
29
+ outline: {
30
+ complete: "border-emerald-500/55 bg-transparent text-emerald-200 ring-2 ring-emerald-500/25",
31
+ current: "border-white/30 bg-white/10 text-white ring-2 ring-white/25",
32
+ upcoming: "border-white/15 bg-white/5 text-slate-400"
33
+ },
34
+ ghost: {
35
+ complete: "border-transparent bg-emerald-500/15 text-emerald-200 ring-2 ring-emerald-400/20",
36
+ current: "border-transparent bg-white/10 text-white ring-2 ring-white/15",
37
+ upcoming: "border-transparent bg-transparent text-slate-500"
38
+ },
39
+ link: {
40
+ complete: "border-cyan-500/45 bg-cyan-950/35 text-cyan-200 ring-2 ring-cyan-400/25",
41
+ current: "border-cyan-400 bg-cyan-900/45 text-cyan-50 ring-2 ring-cyan-400/45",
42
+ upcoming: "border-white/10 bg-transparent text-slate-500"
43
+ },
44
+ glass: {
45
+ complete: "border-white/25 bg-white/10 text-emerald-100 shadow-[inset_0_1px_0_rgba(255,255,255,0.06)] backdrop-blur-md ring-2 ring-emerald-400/25",
46
+ current: "border-white/35 bg-white/15 text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] backdrop-blur-md ring-2 ring-white/30",
47
+ upcoming: "border-white/15 bg-white/5 text-slate-400 backdrop-blur-sm"
48
+ },
49
+ emerald: {
50
+ complete: "border-emerald-500/60 bg-emerald-500/20 text-emerald-100 ring-2 ring-emerald-400/30",
51
+ current: "border-emerald-400 bg-emerald-500/30 text-white ring-2 ring-emerald-400/50",
52
+ upcoming: "border-white/15 bg-emerald-950/30 text-emerald-200/55"
53
+ },
54
+ indigo: {
55
+ complete: "border-indigo-500/60 bg-indigo-500/20 text-indigo-100 ring-2 ring-indigo-400/30",
56
+ current: "border-indigo-400 bg-indigo-500/30 text-white ring-2 ring-indigo-400/50",
57
+ upcoming: "border-white/15 bg-indigo-950/30 text-indigo-200/55"
58
+ },
59
+ purple: {
60
+ complete: "border-purple-500/60 bg-purple-500/20 text-purple-100 ring-2 ring-purple-400/30",
61
+ current: "border-purple-400 bg-purple-500/30 text-white ring-2 ring-purple-400/50",
62
+ upcoming: "border-white/15 bg-purple-950/30 text-purple-200/55"
63
+ },
64
+ pink: {
65
+ complete: "border-pink-500/60 bg-pink-500/20 text-pink-100 ring-2 ring-pink-400/30",
66
+ current: "border-pink-400 bg-pink-500/30 text-white ring-2 ring-pink-400/50",
67
+ upcoming: "border-white/15 bg-pink-950/30 text-pink-200/55"
68
+ },
69
+ rose: {
70
+ complete: "border-rose-500/60 bg-rose-500/20 text-rose-100 ring-2 ring-rose-400/30",
71
+ current: "border-rose-400 bg-rose-500/30 text-white ring-2 ring-rose-400/50",
72
+ upcoming: "border-white/15 bg-rose-950/30 text-rose-200/55"
73
+ },
74
+ sky: {
75
+ complete: "border-sky-500/60 bg-sky-500/20 text-sky-100 ring-2 ring-sky-400/30",
76
+ current: "border-sky-400 bg-sky-500/30 text-white ring-2 ring-sky-400/50",
77
+ upcoming: "border-white/15 bg-sky-950/30 text-sky-200/55"
78
+ },
79
+ teal: {
80
+ complete: "border-teal-500/60 bg-teal-500/20 text-teal-100 ring-2 ring-teal-400/30",
81
+ current: "border-teal-400 bg-teal-500/30 text-white ring-2 ring-teal-400/50",
82
+ upcoming: "border-white/15 bg-teal-950/30 text-teal-200/55"
83
+ },
84
+ yellow: {
85
+ complete: "border-yellow-500/60 bg-yellow-500/20 text-yellow-100 ring-2 ring-yellow-400/30",
86
+ current: "border-yellow-400 bg-yellow-600/35 text-white ring-2 ring-yellow-400/50",
87
+ upcoming: "border-white/15 bg-yellow-950/35 text-yellow-200/55"
88
+ },
89
+ orange: {
90
+ complete: "border-orange-500/60 bg-orange-500/20 text-orange-100 ring-2 ring-orange-400/30",
91
+ current: "border-orange-400 bg-orange-600/35 text-white ring-2 ring-orange-400/50",
92
+ upcoming: "border-white/15 bg-orange-950/30 text-orange-200/55"
93
+ },
94
+ gray: {
95
+ complete: "border-gray-500/60 bg-gray-500/20 text-gray-100 ring-2 ring-gray-400/30",
96
+ current: "border-gray-400 bg-gray-600/35 text-white ring-2 ring-gray-400/50",
97
+ upcoming: "border-white/15 bg-gray-950/30 text-gray-300/70"
98
+ },
99
+ amber: {
100
+ complete: "border-amber-500/60 bg-amber-500/20 text-amber-100 ring-2 ring-amber-400/30",
101
+ current: "border-amber-400 bg-amber-600/35 text-white ring-2 ring-amber-400/50",
102
+ upcoming: "border-white/15 bg-amber-950/35 text-amber-200/55"
103
+ },
104
+ violet: {
105
+ complete: "border-violet-500/60 bg-violet-500/20 text-violet-100 ring-2 ring-violet-400/30",
106
+ current: "border-violet-400 bg-violet-500/30 text-white ring-2 ring-violet-400/50",
107
+ upcoming: "border-white/15 bg-violet-950/30 text-violet-200/55"
108
+ }
109
+ };
110
+ function dynamicStepperIndicatorToneClass(state, tone) {
111
+ return INDICATOR_TONE_CLASSES[tone][state];
112
+ }
113
+ var dynamicStepperRootVariants = classVarianceAuthority.cva("flex w-full", {
114
+ variants: {
115
+ orientation: {
116
+ horizontal: "flex-row flex-wrap items-start justify-between gap-4 md:flex-nowrap md:items-center",
117
+ vertical: "flex-col gap-6"
118
+ }
119
+ },
120
+ defaultVariants: {
121
+ orientation: "horizontal"
122
+ }
123
+ });
124
+ var dynamicStepperMapperVariants = classVarianceAuthority.cva("m-0 min-w-0 flex-1 list-none p-0", {
125
+ variants: {
126
+ orientation: {
127
+ horizontal: "flex flex-row flex-wrap items-start justify-center gap-4",
128
+ vertical: "flex flex-col gap-6"
129
+ }
130
+ },
131
+ defaultVariants: {
132
+ orientation: "horizontal"
133
+ }
134
+ });
135
+ var dynamicStepperItemVariants = classVarianceAuthority.cva("relative flex gap-3", {
136
+ variants: {
137
+ orientation: {
138
+ horizontal: "min-w-0 flex-col items-center text-center",
139
+ vertical: "flex-row items-start text-left"
140
+ }
141
+ },
142
+ defaultVariants: {
143
+ orientation: "horizontal"
144
+ }
145
+ });
146
+ var dynamicStepperIndicatorVariants = classVarianceAuthority.cva(
147
+ "grid size-9 shrink-0 place-items-center rounded-full border text-sm font-semibold transition-colors",
148
+ {
149
+ variants: {
150
+ size: {
151
+ sm: "size-8 text-xs",
152
+ md: "size-9 text-sm",
153
+ lg: "size-10 text-base"
154
+ }
155
+ },
156
+ defaultVariants: {
157
+ size: "md"
158
+ }
159
+ }
160
+ );
161
+ var DynamicStepper = ({
162
+ steps,
163
+ orientation = "horizontal",
164
+ buttonAppearance = "outline",
165
+ buttonSize = "md",
166
+ indicatorSize = "md",
167
+ indicatorCompleteAppearance = "emerald",
168
+ indicatorCurrentAppearance = "violet",
169
+ indicatorUpcomingAppearance = "outline",
170
+ activeStep: activeStepProp,
171
+ defaultActiveStep,
172
+ onActiveStepChange,
173
+ onPrevious,
174
+ onNext,
175
+ prevLabel = "Previous",
176
+ nextLabel = "Next",
177
+ className,
178
+ ref,
179
+ ...rest
180
+ }) => {
181
+ const baseId = react.useId();
182
+ const previousId = `${baseId}-previous`;
183
+ const nextId = `${baseId}-next`;
184
+ const mapperId = `${baseId}-mapper`;
185
+ const { activeStep, goPrevious, goNext, canGoPrevious, canGoNext } = chunkMEJMX4QI_js.useDynamicStepper({
186
+ stepCount: steps.length,
187
+ activeStep: activeStepProp,
188
+ defaultActiveStep,
189
+ onActiveStepChange,
190
+ onPrevious,
191
+ onNext
192
+ });
193
+ if (steps.length === 0) {
194
+ return null;
195
+ }
196
+ const itemOrientation = orientation === "vertical" ? "vertical" : "horizontal";
197
+ return /* @__PURE__ */ jsxRuntime.jsxs(
198
+ "div",
199
+ {
200
+ ref,
201
+ role: "navigation",
202
+ "data-slot": "dynamic-stepper",
203
+ className: chunkZS5756ZC_js.cn(dynamicStepperRootVariants({ orientation }), className),
204
+ ...rest,
205
+ children: [
206
+ /* @__PURE__ */ jsxRuntime.jsx(
207
+ chunkKXUG4WVW_js.Button,
208
+ {
209
+ id: previousId,
210
+ "data-slot": "dynamic-stepper-previous",
211
+ type: "button",
212
+ appearance: buttonAppearance,
213
+ size: buttonSize,
214
+ disabled: !canGoPrevious,
215
+ onClick: goPrevious,
216
+ className: orientation === "vertical" ? "shrink-0 self-start" : "shrink-0",
217
+ children: prevLabel
218
+ }
219
+ ),
220
+ /* @__PURE__ */ jsxRuntime.jsx(
221
+ "ol",
222
+ {
223
+ id: mapperId,
224
+ "aria-label": "Steps",
225
+ "data-slot": "dynamic-stepper-mapper",
226
+ className: dynamicStepperMapperVariants({ orientation }),
227
+ children: steps.map((step, index) => {
228
+ const key = step.id ?? `dynamic-stepper-step-${index}`;
229
+ const isCurrent = index === activeStep;
230
+ const semanticState = index < activeStep ? "complete" : isCurrent ? "current" : "upcoming";
231
+ const indicatorTone = semanticState === "complete" ? indicatorCompleteAppearance : semanticState === "current" ? indicatorCurrentAppearance : indicatorUpcomingAppearance;
232
+ const isVertical = orientation === "vertical";
233
+ return /* @__PURE__ */ jsxRuntime.jsxs(
234
+ "li",
235
+ {
236
+ "data-slot": "dynamic-stepper-item",
237
+ "aria-current": isCurrent ? "step" : void 0,
238
+ className: dynamicStepperItemVariants({
239
+ orientation: itemOrientation
240
+ }),
241
+ children: [
242
+ /* @__PURE__ */ jsxRuntime.jsx(
243
+ "div",
244
+ {
245
+ "data-slot": "dynamic-stepper-indicator",
246
+ className: chunkZS5756ZC_js.cn(
247
+ dynamicStepperIndicatorVariants({ size: indicatorSize }),
248
+ dynamicStepperIndicatorToneClass(
249
+ semanticState,
250
+ indicatorTone
251
+ )
252
+ ),
253
+ children: step.indicator ?? index + 1
254
+ }
255
+ ),
256
+ /* @__PURE__ */ jsxRuntime.jsxs(
257
+ "div",
258
+ {
259
+ className: chunkZS5756ZC_js.cn(
260
+ "min-w-0",
261
+ !isVertical && "flex flex-col items-center"
262
+ ),
263
+ children: [
264
+ step.title != null && /* @__PURE__ */ jsxRuntime.jsx(
265
+ "div",
266
+ {
267
+ className: chunkZS5756ZC_js.cn(
268
+ "text-sm font-semibold text-white",
269
+ !isVertical && "mt-3"
270
+ ),
271
+ children: step.title
272
+ }
273
+ ),
274
+ step.description != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-slate-400", children: step.description })
275
+ ]
276
+ }
277
+ )
278
+ ]
279
+ },
280
+ key
281
+ );
282
+ })
283
+ }
284
+ ),
285
+ /* @__PURE__ */ jsxRuntime.jsx(
286
+ chunkKXUG4WVW_js.Button,
287
+ {
288
+ id: nextId,
289
+ "data-slot": "dynamic-stepper-next",
290
+ type: "button",
291
+ appearance: buttonAppearance,
292
+ size: buttonSize,
293
+ disabled: !canGoNext,
294
+ onClick: goNext,
295
+ className: orientation === "vertical" ? "shrink-0 self-start" : "shrink-0",
296
+ children: nextLabel
297
+ }
298
+ )
299
+ ]
300
+ }
301
+ );
302
+ };
303
+ DynamicStepper.displayName = "DynamicStepper";
304
+
305
+ exports.DynamicStepper = DynamicStepper;
306
+ exports.dynamicStepperIndicatorToneClass = dynamicStepperIndicatorToneClass;
307
+ exports.dynamicStepperIndicatorVariants = dynamicStepperIndicatorVariants;
308
+ exports.dynamicStepperItemVariants = dynamicStepperItemVariants;
309
+ exports.dynamicStepperMapperVariants = dynamicStepperMapperVariants;
310
+ exports.dynamicStepperRootVariants = dynamicStepperRootVariants;
311
+ //# sourceMappingURL=dynamic-stepper.js.map
312
+ //# sourceMappingURL=dynamic-stepper.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/ui/dynamic-stepper/variants.ts","../../src/ui/dynamic-stepper/dynamic-stepper.tsx"],"names":["cva","useId","useDynamicStepper","jsxs","cn","jsx","Button"],"mappings":"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","file":"dynamic-stepper.js","sourcesContent":["import type { VariantProps } from \"class-variance-authority\";\nimport { cva } from \"class-variance-authority\";\n\nimport type { buttonVariants } from \"../buttons/variants\";\n\ntype GradientButtonAppearance =\n | \"gradient-blue\"\n | \"gradient-green\"\n | \"gradient-red\"\n | \"gradient-yellow\"\n | \"gradient-purple\"\n | \"gradient-teal\"\n | \"gradient-indigo\"\n | \"gradient-pink\"\n | \"gradient-orange\";\n\n/** Button `appearance` keys usable for indicator tones (gradients excluded). */\nexport type DynamicStepperIndicatorToneAppearance = Exclude<\n NonNullable<VariantProps<typeof buttonVariants>[\"appearance\"]>,\n GradientButtonAppearance\n>;\n\nexport type DynamicStepperIndicatorSemanticState =\n | \"complete\"\n | \"current\"\n | \"upcoming\";\n\nconst INDICATOR_TONE_CLASSES: Record<\n DynamicStepperIndicatorToneAppearance,\n Record<DynamicStepperIndicatorSemanticState, string>\n> = {\n default: {\n complete:\n \"border-slate-400/55 bg-slate-500/25 text-slate-50 ring-2 ring-slate-400/25\",\n current:\n \"border-slate-300 bg-slate-500/35 text-white ring-2 ring-slate-300/45\",\n upcoming: \"border-white/15 bg-white/5 text-slate-400\",\n },\n secondary: {\n complete:\n \"border-slate-600 bg-slate-800/70 text-slate-200 ring-2 ring-slate-600/35\",\n current:\n \"border-slate-500 bg-slate-700/55 text-white ring-2 ring-slate-500/45\",\n upcoming: \"border-white/10 bg-slate-900/50 text-slate-500\",\n },\n destructive: {\n complete:\n \"border-rose-500/60 bg-rose-500/20 text-rose-100 ring-2 ring-rose-400/30\",\n current:\n \"border-rose-400 bg-rose-600/35 text-white ring-2 ring-rose-400/50\",\n upcoming: \"border-white/15 bg-rose-950/25 text-slate-400\",\n },\n outline: {\n complete:\n \"border-emerald-500/55 bg-transparent text-emerald-200 ring-2 ring-emerald-500/25\",\n current:\n \"border-white/30 bg-white/10 text-white ring-2 ring-white/25\",\n upcoming: \"border-white/15 bg-white/5 text-slate-400\",\n },\n ghost: {\n complete:\n \"border-transparent bg-emerald-500/15 text-emerald-200 ring-2 ring-emerald-400/20\",\n current:\n \"border-transparent bg-white/10 text-white ring-2 ring-white/15\",\n upcoming: \"border-transparent bg-transparent text-slate-500\",\n },\n link: {\n complete:\n \"border-cyan-500/45 bg-cyan-950/35 text-cyan-200 ring-2 ring-cyan-400/25\",\n current:\n \"border-cyan-400 bg-cyan-900/45 text-cyan-50 ring-2 ring-cyan-400/45\",\n upcoming: \"border-white/10 bg-transparent text-slate-500\",\n },\n glass: {\n complete:\n \"border-white/25 bg-white/10 text-emerald-100 shadow-[inset_0_1px_0_rgba(255,255,255,0.06)] backdrop-blur-md ring-2 ring-emerald-400/25\",\n current:\n \"border-white/35 bg-white/15 text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] backdrop-blur-md ring-2 ring-white/30\",\n upcoming:\n \"border-white/15 bg-white/5 text-slate-400 backdrop-blur-sm\",\n },\n emerald: {\n complete:\n \"border-emerald-500/60 bg-emerald-500/20 text-emerald-100 ring-2 ring-emerald-400/30\",\n current:\n \"border-emerald-400 bg-emerald-500/30 text-white ring-2 ring-emerald-400/50\",\n upcoming:\n \"border-white/15 bg-emerald-950/30 text-emerald-200/55\",\n },\n indigo: {\n complete:\n \"border-indigo-500/60 bg-indigo-500/20 text-indigo-100 ring-2 ring-indigo-400/30\",\n current:\n \"border-indigo-400 bg-indigo-500/30 text-white ring-2 ring-indigo-400/50\",\n upcoming:\n \"border-white/15 bg-indigo-950/30 text-indigo-200/55\",\n },\n purple: {\n complete:\n \"border-purple-500/60 bg-purple-500/20 text-purple-100 ring-2 ring-purple-400/30\",\n current:\n \"border-purple-400 bg-purple-500/30 text-white ring-2 ring-purple-400/50\",\n upcoming:\n \"border-white/15 bg-purple-950/30 text-purple-200/55\",\n },\n pink: {\n complete:\n \"border-pink-500/60 bg-pink-500/20 text-pink-100 ring-2 ring-pink-400/30\",\n current:\n \"border-pink-400 bg-pink-500/30 text-white ring-2 ring-pink-400/50\",\n upcoming:\n \"border-white/15 bg-pink-950/30 text-pink-200/55\",\n },\n rose: {\n complete:\n \"border-rose-500/60 bg-rose-500/20 text-rose-100 ring-2 ring-rose-400/30\",\n current:\n \"border-rose-400 bg-rose-500/30 text-white ring-2 ring-rose-400/50\",\n upcoming:\n \"border-white/15 bg-rose-950/30 text-rose-200/55\",\n },\n sky: {\n complete:\n \"border-sky-500/60 bg-sky-500/20 text-sky-100 ring-2 ring-sky-400/30\",\n current:\n \"border-sky-400 bg-sky-500/30 text-white ring-2 ring-sky-400/50\",\n upcoming:\n \"border-white/15 bg-sky-950/30 text-sky-200/55\",\n },\n teal: {\n complete:\n \"border-teal-500/60 bg-teal-500/20 text-teal-100 ring-2 ring-teal-400/30\",\n current:\n \"border-teal-400 bg-teal-500/30 text-white ring-2 ring-teal-400/50\",\n upcoming:\n \"border-white/15 bg-teal-950/30 text-teal-200/55\",\n },\n yellow: {\n complete:\n \"border-yellow-500/60 bg-yellow-500/20 text-yellow-100 ring-2 ring-yellow-400/30\",\n current:\n \"border-yellow-400 bg-yellow-600/35 text-white ring-2 ring-yellow-400/50\",\n upcoming:\n \"border-white/15 bg-yellow-950/35 text-yellow-200/55\",\n },\n orange: {\n complete:\n \"border-orange-500/60 bg-orange-500/20 text-orange-100 ring-2 ring-orange-400/30\",\n current:\n \"border-orange-400 bg-orange-600/35 text-white ring-2 ring-orange-400/50\",\n upcoming:\n \"border-white/15 bg-orange-950/30 text-orange-200/55\",\n },\n gray: {\n complete:\n \"border-gray-500/60 bg-gray-500/20 text-gray-100 ring-2 ring-gray-400/30\",\n current:\n \"border-gray-400 bg-gray-600/35 text-white ring-2 ring-gray-400/50\",\n upcoming:\n \"border-white/15 bg-gray-950/30 text-gray-300/70\",\n },\n amber: {\n complete:\n \"border-amber-500/60 bg-amber-500/20 text-amber-100 ring-2 ring-amber-400/30\",\n current:\n \"border-amber-400 bg-amber-600/35 text-white ring-2 ring-amber-400/50\",\n upcoming:\n \"border-white/15 bg-amber-950/35 text-amber-200/55\",\n },\n violet: {\n complete:\n \"border-violet-500/60 bg-violet-500/20 text-violet-100 ring-2 ring-violet-400/30\",\n current:\n \"border-violet-400 bg-violet-500/30 text-white ring-2 ring-violet-400/50\",\n upcoming:\n \"border-white/15 bg-violet-950/30 text-violet-200/55\",\n },\n};\n\nexport function dynamicStepperIndicatorToneClass(\n state: DynamicStepperIndicatorSemanticState,\n tone: DynamicStepperIndicatorToneAppearance,\n): string {\n return INDICATOR_TONE_CLASSES[tone][state];\n}\n\nexport const dynamicStepperRootVariants = cva(\"flex w-full\", {\n variants: {\n orientation: {\n horizontal:\n \"flex-row flex-wrap items-start justify-between gap-4 md:flex-nowrap md:items-center\",\n vertical: \"flex-col gap-6\",\n },\n },\n defaultVariants: {\n orientation: \"horizontal\",\n },\n});\n\nexport const dynamicStepperMapperVariants = cva(\"m-0 min-w-0 flex-1 list-none p-0\", {\n variants: {\n orientation: {\n horizontal: \"flex flex-row flex-wrap items-start justify-center gap-4\",\n vertical: \"flex flex-col gap-6\",\n },\n },\n defaultVariants: {\n orientation: \"horizontal\",\n },\n});\n\nexport const dynamicStepperItemVariants = cva(\"relative flex gap-3\", {\n variants: {\n orientation: {\n horizontal: \"min-w-0 flex-col items-center text-center\",\n vertical: \"flex-row items-start text-left\",\n },\n },\n defaultVariants: {\n orientation: \"horizontal\",\n },\n});\n\nexport const dynamicStepperIndicatorVariants = cva(\n \"grid size-9 shrink-0 place-items-center rounded-full border text-sm font-semibold transition-colors\",\n {\n variants: {\n size: {\n sm: \"size-8 text-xs\",\n md: \"size-9 text-sm\",\n lg: \"size-10 text-base\",\n },\n },\n defaultVariants: {\n size: \"md\",\n },\n },\n);\n","\"use client\";\n\nimport { useId } from \"react\";\n\nimport { useDynamicStepper } from \"../../hooks/useDynamicStepper/useDynamicStepper\";\nimport { cn } from \"../../lib/utils\";\nimport { Button } from \"../buttons/button\";\n\nimport type { DynamicStepperProps } from \"./types\";\nimport {\n dynamicStepperIndicatorToneClass,\n dynamicStepperIndicatorVariants,\n dynamicStepperItemVariants,\n dynamicStepperMapperVariants,\n dynamicStepperRootVariants,\n} from \"./variants\";\n\nexport const DynamicStepper = ({\n steps,\n orientation = \"horizontal\",\n buttonAppearance = \"outline\",\n buttonSize = \"md\",\n indicatorSize = \"md\",\n indicatorCompleteAppearance = \"emerald\",\n indicatorCurrentAppearance = \"violet\",\n indicatorUpcomingAppearance = \"outline\",\n activeStep: activeStepProp,\n defaultActiveStep,\n onActiveStepChange,\n onPrevious,\n onNext,\n prevLabel = \"Previous\",\n nextLabel = \"Next\",\n className,\n ref,\n ...rest\n}: DynamicStepperProps) => {\n const baseId = useId();\n const previousId = `${baseId}-previous`;\n const nextId = `${baseId}-next`;\n const mapperId = `${baseId}-mapper`;\n\n const { activeStep, goPrevious, goNext, canGoPrevious, canGoNext } =\n useDynamicStepper({\n stepCount: steps.length,\n activeStep: activeStepProp,\n defaultActiveStep,\n onActiveStepChange,\n onPrevious,\n onNext,\n });\n\n if (steps.length === 0) {\n return null;\n }\n\n const itemOrientation =\n orientation === \"vertical\" ? \"vertical\" : \"horizontal\";\n\n return (\n <div\n ref={ref}\n role=\"navigation\"\n data-slot=\"dynamic-stepper\"\n className={cn(dynamicStepperRootVariants({ orientation }), className)}\n {...rest}\n >\n <Button\n id={previousId}\n data-slot=\"dynamic-stepper-previous\"\n type=\"button\"\n appearance={buttonAppearance}\n size={buttonSize}\n disabled={!canGoPrevious}\n onClick={goPrevious}\n className={\n orientation === \"vertical\" ? \"shrink-0 self-start\" : \"shrink-0\"\n }\n >\n {prevLabel}\n </Button>\n\n <ol\n id={mapperId}\n aria-label=\"Steps\"\n data-slot=\"dynamic-stepper-mapper\"\n className={dynamicStepperMapperVariants({ orientation })}\n >\n {steps.map((step, index) => {\n const key = step.id ?? `dynamic-stepper-step-${index}`;\n const isCurrent = index === activeStep;\n const semanticState =\n index < activeStep\n ? \"complete\"\n : isCurrent\n ? \"current\"\n : \"upcoming\";\n const indicatorTone =\n semanticState === \"complete\"\n ? indicatorCompleteAppearance\n : semanticState === \"current\"\n ? indicatorCurrentAppearance\n : indicatorUpcomingAppearance;\n\n const isVertical = orientation === \"vertical\";\n\n return (\n <li\n key={key}\n data-slot=\"dynamic-stepper-item\"\n aria-current={isCurrent ? \"step\" : undefined}\n className={dynamicStepperItemVariants({\n orientation: itemOrientation,\n })}\n >\n <div\n data-slot=\"dynamic-stepper-indicator\"\n className={cn(\n dynamicStepperIndicatorVariants({ size: indicatorSize }),\n dynamicStepperIndicatorToneClass(\n semanticState,\n indicatorTone,\n ),\n )}\n >\n {step.indicator ?? index + 1}\n </div>\n <div\n className={cn(\n \"min-w-0\",\n !isVertical && \"flex flex-col items-center\",\n )}\n >\n {step.title != null && (\n <div\n className={cn(\n \"text-sm font-semibold text-white\",\n !isVertical && \"mt-3\",\n )}\n >\n {step.title}\n </div>\n )}\n {step.description != null && (\n <p className=\"mt-1 text-xs text-slate-400\">\n {step.description}\n </p>\n )}\n </div>\n </li>\n );\n })}\n </ol>\n\n <Button\n id={nextId}\n data-slot=\"dynamic-stepper-next\"\n type=\"button\"\n appearance={buttonAppearance}\n size={buttonSize}\n disabled={!canGoNext}\n onClick={goNext}\n className={\n orientation === \"vertical\" ? \"shrink-0 self-start\" : \"shrink-0\"\n }\n >\n {nextLabel}\n </Button>\n </div>\n );\n};\n\nDynamicStepper.displayName = \"DynamicStepper\";\n"]}