@zentauri-ui/zentauri-components 1.5.21 → 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.
- package/README.md +59 -2
- package/cli/registry.json +2 -0
- package/dist/charts/area.js +1 -1
- package/dist/charts/area.js.map +1 -1
- package/dist/charts/area.mjs +1 -1
- package/dist/charts/area.mjs.map +1 -1
- package/dist/charts/bar/Bar.d.ts.map +1 -1
- package/dist/charts/bar.js +2 -1
- package/dist/charts/bar.js.map +1 -1
- package/dist/charts/bar.mjs +2 -1
- package/dist/charts/bar.mjs.map +1 -1
- package/dist/charts/pie/Pie.d.ts +1 -1
- package/dist/charts/pie/Pie.d.ts.map +1 -1
- package/dist/charts/pie.js +10 -7
- package/dist/charts/pie.js.map +1 -1
- package/dist/charts/pie.mjs +10 -7
- package/dist/charts/pie.mjs.map +1 -1
- package/dist/charts/shared/types.d.ts +10 -6
- package/dist/charts/shared/types.d.ts.map +1 -1
- package/dist/chunk-7OHC4ERB.mjs +60 -0
- package/dist/chunk-7OHC4ERB.mjs.map +1 -0
- package/dist/{chunk-2VQJ6OIL.js → chunk-HPN7H5ZM.js} +2 -2
- package/dist/{chunk-2VQJ6OIL.js.map → chunk-HPN7H5ZM.js.map} +1 -1
- package/dist/chunk-JJDANNNL.mjs +71 -0
- package/dist/chunk-JJDANNNL.mjs.map +1 -0
- package/dist/chunk-KXUG4WVW.js +62 -0
- package/dist/chunk-KXUG4WVW.js.map +1 -0
- package/dist/chunk-MEJMX4QI.js +73 -0
- package/dist/chunk-MEJMX4QI.js.map +1 -0
- package/dist/chunk-N6B35KWW.mjs +3 -0
- package/dist/chunk-N6B35KWW.mjs.map +1 -0
- package/dist/{chunk-73VCO5TE.mjs → chunk-NWOE2TZN.mjs} +2 -2
- package/dist/{chunk-73VCO5TE.mjs.map → chunk-NWOE2TZN.mjs.map} +1 -1
- package/dist/chunk-RGOMHX4G.js +4 -0
- package/dist/chunk-RGOMHX4G.js.map +1 -0
- package/dist/hooks/useControllableState.js +3 -2
- package/dist/hooks/useControllableState.mjs +2 -1
- package/dist/hooks/useDisclosure.js +3 -2
- package/dist/hooks/useDisclosure.js.map +1 -1
- package/dist/hooks/useDisclosure.mjs +2 -1
- package/dist/hooks/useDisclosure.mjs.map +1 -1
- package/dist/hooks/useDynamicStepper/index.d.ts +2 -0
- package/dist/hooks/useDynamicStepper/index.d.ts.map +1 -0
- package/dist/hooks/useDynamicStepper/useDynamicStepper.d.ts +9 -0
- package/dist/hooks/useDynamicStepper/useDynamicStepper.d.ts.map +1 -0
- package/dist/hooks/useDynamicStepper.js +14 -0
- package/dist/hooks/useDynamicStepper.js.map +1 -0
- package/dist/hooks/useDynamicStepper.mjs +5 -0
- package/dist/hooks/useDynamicStepper.mjs.map +1 -0
- package/dist/ui/buttons.js +7 -55
- package/dist/ui/buttons.js.map +1 -1
- package/dist/ui/buttons.mjs +2 -58
- package/dist/ui/buttons.mjs.map +1 -1
- package/dist/ui/dynamic-stepper/dynamic-stepper.d.ts +6 -0
- package/dist/ui/dynamic-stepper/dynamic-stepper.d.ts.map +1 -0
- package/dist/ui/dynamic-stepper/index.d.ts +5 -0
- package/dist/ui/dynamic-stepper/index.d.ts.map +1 -0
- package/dist/ui/dynamic-stepper/types.d.ts +61 -0
- package/dist/ui/dynamic-stepper/types.d.ts.map +1 -0
- package/dist/ui/dynamic-stepper/variants.d.ts +21 -0
- package/dist/ui/dynamic-stepper/variants.d.ts.map +1 -0
- package/dist/ui/dynamic-stepper.js +312 -0
- package/dist/ui/dynamic-stepper.js.map +1 -0
- package/dist/ui/dynamic-stepper.mjs +305 -0
- package/dist/ui/dynamic-stepper.mjs.map +1 -0
- package/dist/ui/pagination/pagination.d.ts +5 -16
- package/dist/ui/pagination/pagination.d.ts.map +1 -1
- package/dist/ui/pagination/types.d.ts +2 -2
- package/dist/ui/pagination/types.d.ts.map +1 -1
- package/dist/ui/pagination.js +171 -180
- package/dist/ui/pagination.js.map +1 -1
- package/dist/ui/pagination.mjs +172 -181
- package/dist/ui/pagination.mjs.map +1 -1
- package/dist/ui/typography/blockquote-base.d.ts.map +1 -1
- package/dist/ui/typography/code-block-base.d.ts.map +1 -1
- package/dist/ui/typography/heading-base.d.ts.map +1 -1
- package/dist/ui/typography/inline-code-base.d.ts.map +1 -1
- package/dist/ui/typography.js.map +1 -1
- package/dist/ui/typography.mjs.map +1 -1
- package/package.json +1 -1
- package/src/charts/area/Area.tsx +1 -1
- package/src/charts/bar/Bar.tsx +1 -0
- package/src/charts/pie/Pie.tsx +9 -7
- package/src/charts/shared/types.ts +10 -6
- package/src/hooks/useDynamicStepper/index.ts +3 -0
- package/src/hooks/useDynamicStepper/useDynamicStepper.test.ts +107 -0
- package/src/hooks/useDynamicStepper/useDynamicStepper.ts +91 -0
- package/src/ui/dynamic-stepper/dynamic-stepper.test.tsx +109 -0
- package/src/ui/dynamic-stepper/dynamic-stepper.tsx +173 -0
- package/src/ui/dynamic-stepper/index.ts +24 -0
- package/src/ui/dynamic-stepper/types.ts +85 -0
- package/src/ui/dynamic-stepper/variants.ts +238 -0
- package/src/ui/pagination/pagination.tsx +186 -197
- package/src/ui/pagination/types.ts +2 -2
- package/src/ui/typography/blockquote-base.tsx +0 -2
- package/src/ui/typography/code-block-base.tsx +0 -2
- package/src/ui/typography/heading-base.tsx +0 -2
- package/src/ui/typography/inline-code-base.tsx +0 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/ui/typography/variants.ts","../../src/ui/typography/heading-base.tsx","../../src/ui/typography/heading.tsx","../../src/ui/typography/text-base.tsx","../../src/ui/typography/text.tsx","../../src/ui/typography/list-base.tsx","../../src/ui/typography/list.tsx","../../src/ui/typography/blockquote-base.tsx","../../src/ui/typography/blockquote.tsx","../../src/ui/typography/inline-code-base.tsx","../../src/ui/typography/inline-code.tsx","../../src/ui/typography/code-block-base.tsx","../../src/ui/typography/code-block.tsx"],"names":["jsx","tone","className","children","ref","ordered","marker","rest"],"mappings":"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","file":"typography.mjs","sourcesContent":["import { cva } from \"class-variance-authority\";\n\n/** Semantic text colors aligned with slate/cyan/violet accents used across the kit (dark-first). */\nexport const typographyToneVariants = cva(\"\", {\n variants: {\n tone: {\n default: \"text-slate-50 border-white/15\",\n muted: \"text-slate-400 border-white/15\",\n primary: \"text-cyan-300 border-cyan-300/40\",\n secondary: \"text-slate-300 border-white/15\",\n accent: \"text-violet-300 border-violet-300/40\",\n destructive: \"text-rose-400 border-rose-300/40\",\n info: \"text-sky-300 border-sky-300/40\",\n success: \"text-emerald-300 border-emerald-300/40\",\n warning: \"text-amber-300 border-amber-300/40\",\n error: \"text-red-300 border-red-300/40\",\n \"gradient-pink-violet\":\n \"bg-linear-to-r from-pink-400 to-violet-400 bg-clip-text text-transparent\",\n \"gradient-cyan-violet\":\n \"bg-linear-to-r from-cyan-400 to-violet-400 bg-clip-text text-transparent\",\n \"gradient-cyan-blue\":\n \"bg-linear-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent\",\n \"gradient-cyan-green\":\n \"bg-linear-to-r from-cyan-400 to-green-400 bg-clip-text text-transparent\",\n \"gradient-cyan-orange\":\n \"bg-linear-to-r from-cyan-400 to-orange-400 bg-clip-text text-transparent\",\n \"gradient-cyan-red\":\n \"bg-linear-to-r from-cyan-400 to-red-400 bg-clip-text text-transparent\",\n \"gradient-cyan-purple\":\n \"bg-linear-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent\",\n \"gradient-cyan-pink\":\n \"bg-linear-to-r from-cyan-400 to-pink-400 bg-clip-text text-transparent\",\n },\n },\n defaultVariants: {\n tone: \"default\",\n },\n});\n\nexport const headingLevelVariants = cva(\"scroll-m-20\", {\n variants: {\n level: {\n 1: \"text-4xl font-bold tracking-tight md:text-5xl\",\n 2: \"text-3xl font-semibold tracking-tight\",\n 3: \"text-2xl font-semibold tracking-tight\",\n 4: \"text-xl font-semibold tracking-tight\",\n 5: \"text-lg font-medium\",\n 6: \"text-base font-medium\",\n },\n },\n});\n\nexport const textSizeVariants = cva(\"\", {\n variants: {\n size: {\n sm: \"text-sm leading-relaxed\",\n base: \"text-base leading-relaxed\",\n lg: \"text-lg leading-relaxed\",\n },\n },\n defaultVariants: {\n size: \"base\",\n },\n});\n\n/** Marker style for unordered lists; ignored when `ordered` is true (decimal numbering). */\nexport const unorderedListMarkerVariants = cva(\"space-y-2 pl-5\", {\n variants: {\n marker: {\n disc: \"list-disc\",\n circle: \"[list-style-type:circle]\",\n none: \"list-none pl-0\",\n },\n },\n defaultVariants: {\n marker: \"disc\",\n },\n});\n\nexport const orderedListVariants = cva(\"list-decimal space-y-2 pl-5\");\n","import { forwardRef } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { HeadingProps } from \"./types\";\nimport { headingLevelVariants, typographyToneVariants } from \"./variants\";\n\nconst HEADING_TAGS = {\n 1: \"h1\",\n 2: \"h2\",\n 3: \"h3\",\n 4: \"h4\",\n 5: \"h5\",\n 6: \"h6\",\n} as const;\n\nexport const HeadingBase = (props: HeadingProps) => {\n const {\n level,\n displayLevel,\n tone,\n bold,\n italic,\n underline,\n strikethrough,\n ref,\n className,\n children,\n ...rest\n } = props;\n\n const Tag = HEADING_TAGS[level];\n const scale = displayLevel ?? level;\n\n return (\n <Tag\n ref={ref}\n data-slot=\"typography-heading\"\n data-level={level}\n className={cn(\n typographyToneVariants({ tone }),\n headingLevelVariants({ level: scale }),\n bold && \"font-bold\",\n italic && \"italic\",\n underline && \"underline underline-offset-4\",\n strikethrough && \"line-through\",\n className,\n )}\n {...rest}\n >\n {children}\n </Tag>\n );\n};\n\nHeadingBase.displayName = \"Heading\";\n","import { HeadingBase } from \"./heading-base\";\nimport type { HeadingProps } from \"./types\";\n\nexport const Heading = (props: HeadingProps) => {\n return <HeadingBase {...props} />;\n};\n\nHeading.displayName = \"Heading\";\n","import { cn } from \"../../lib/utils\";\n\nimport type { TextProps } from \"./types\";\nimport { textSizeVariants, typographyToneVariants } from \"./variants\";\n\nexport const TextBase = (props: TextProps) => {\n const {\n as = \"p\",\n size = \"base\",\n tone,\n bold,\n italic,\n underline,\n strikethrough,\n highlight,\n className,\n children,\n ...rest\n } = props;\n\n const Component = as;\n\n return (\n <Component\n data-slot=\"typography-text\"\n className={cn(\n typographyToneVariants({ tone }),\n textSizeVariants({ size }),\n bold && \"font-semibold\",\n italic && \"italic\",\n underline && \"underline underline-offset-2\",\n strikethrough && \"line-through\",\n highlight && \"rounded bg-amber-400/15 px-0.5\",\n className,\n )}\n {...rest}\n >\n {children}\n </Component>\n );\n};\n\nTextBase.displayName = \"Text\";\n","import { TextBase } from \"./text-base\";\nimport type { TextProps } from \"./types\";\n\nexport const Text = (props: TextProps) => {\n return <TextBase {...props} />;\n};\n\nText.displayName = \"Text\";\n","import { cn } from \"../../lib/utils\";\n\nimport type { ListProps, ListItemProps } from \"./types\";\nimport {\n orderedListVariants,\n typographyToneVariants,\n unorderedListMarkerVariants,\n} from \"./variants\";\n\nexport function ListBase(props: ListProps) {\n if (\"ordered\" in props && props.ordered === true) {\n const { tone, className, children, ref, ordered, marker, ...rest } = props;\n\n void ordered;\n void marker;\n\n return (\n <ol\n ref={ref}\n data-slot=\"typography-list\"\n data-list-type=\"ordered\"\n className={cn(\n typographyToneVariants({ tone }),\n orderedListVariants(),\n className,\n )}\n {...rest}\n >\n {children}\n </ol>\n );\n }\n\n const {\n marker = \"disc\",\n tone,\n className,\n children,\n ref,\n ordered,\n ...rest\n } = props;\n\n void ordered;\n\n return (\n <ul\n ref={ref}\n data-slot=\"typography-list\"\n data-list-type=\"unordered\"\n className={cn(\n typographyToneVariants({ tone }),\n unorderedListMarkerVariants({ marker }),\n className,\n )}\n {...rest}\n >\n {children}\n </ul>\n );\n}\n\nListBase.displayName = \"List\";\n\nexport function ListItemBase(props: ListItemProps) {\n const { className, children, ref, ...rest } = props;\n\n return (\n <li\n ref={ref}\n data-slot=\"typography-list-item\"\n className={cn(\"leading-relaxed\", className)}\n {...rest}\n >\n {children}\n </li>\n );\n}\n\nListItemBase.displayName = \"ListItem\";\n","import type { ListProps } from \"./types\";\n\nimport { ListBase, ListItemBase } from \"./list-base\";\n\nexport const ListItem = ListItemBase;\n\nfunction ListRoot(props: ListProps) {\n return <ListBase {...props} />;\n}\n\nexport const List = Object.assign(ListRoot, {\n Item: ListItem,\n});\n\nListRoot.displayName = \"List\";\n","import { forwardRef } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { BlockquoteProps } from \"./types\";\nimport { typographyToneVariants } from \"./variants\";\n\nexport const BlockquoteBase = (props: BlockquoteProps) => {\n const { tone, attribution, className, children, ref, ...rest } = props;\n\n return (\n <blockquote\n ref={ref}\n data-slot=\"typography-blockquote\"\n className={cn(\n typographyToneVariants({ tone }),\n \"border-l-4 py-1 pl-4 italic\",\n className,\n )}\n {...rest}\n >\n <div className=\"space-y-2 leading-relaxed\">{children}</div>\n {attribution ? (\n <footer className=\"mt-3 text-sm not-italic\">\n <cite>{attribution}</cite>\n </footer>\n ) : null}\n </blockquote>\n );\n};\n\nBlockquoteBase.displayName = \"Blockquote\";\n","import { BlockquoteBase } from \"./blockquote-base\";\nimport type { BlockquoteProps } from \"./types\";\n\nexport const Blockquote = (props: BlockquoteProps) => {\n return <BlockquoteBase {...props} />;\n};\n\nBlockquote.displayName = \"Blockquote\";\n","import { forwardRef } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { InlineCodeProps } from \"./types\";\nimport { typographyToneVariants } from \"./variants\";\n\nexport const InlineCodeBase = (props: InlineCodeProps) => {\n const { tone, className, children, ref, ...rest } = props;\n\n return (\n <code\n ref={ref}\n data-slot=\"typography-inline-code\"\n className={cn(\n typographyToneVariants({ tone }),\n \"rounded-md border border-white/10 bg-white/6 px-1.5 py-0.5 font-mono text-[0.925em] font-normal\",\n className,\n )}\n {...rest}\n >\n {children}\n </code>\n );\n};\n\nInlineCodeBase.displayName = \"InlineCode\";\n","import { InlineCodeBase } from \"./inline-code-base\";\nimport type { InlineCodeProps } from \"./types\";\n\nexport const InlineCode = (props: InlineCodeProps) => {\n return <InlineCodeBase {...props} />;\n};\n\nInlineCode.displayName = \"InlineCode\";\n","import { forwardRef } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { CodeBlockProps } from \"./types\";\nimport { typographyToneVariants } from \"./variants\";\n\nexport const CodeBlockBase = (props: CodeBlockProps) => {\n const { tone, language, className, children, ref, ...rest } = props;\n\n const ariaLabel = language ? `Code sample (${language})` : \"Code sample\";\n\n return (\n <pre\n ref={ref}\n data-slot=\"typography-code-block\"\n aria-label={ariaLabel}\n className={cn(\n typographyToneVariants({ tone }),\n \"overflow-x-auto rounded-xl border border-white/10 bg-slate-950/80 p-4 text-sm leading-relaxed shadow-inner shadow-slate-950/40\",\n className,\n )}\n {...rest}\n >\n <code className=\"font-mono text-[0.95em] whitespace-pre-wrap wrap-break-word\">\n {children}\n </code>\n </pre>\n );\n};\n\nCodeBlockBase.displayName = \"CodeBlock\";\n","import { CodeBlockBase } from \"./code-block-base\";\nimport type { CodeBlockProps } from \"./types\";\n\nexport const CodeBlock = (props: CodeBlockProps) => {\n return <CodeBlockBase {...props} />;\n};\n\nCodeBlock.displayName = \"CodeBlock\";\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/ui/typography/variants.ts","../../src/ui/typography/heading-base.tsx","../../src/ui/typography/heading.tsx","../../src/ui/typography/text-base.tsx","../../src/ui/typography/text.tsx","../../src/ui/typography/list-base.tsx","../../src/ui/typography/list.tsx","../../src/ui/typography/blockquote-base.tsx","../../src/ui/typography/blockquote.tsx","../../src/ui/typography/inline-code-base.tsx","../../src/ui/typography/inline-code.tsx","../../src/ui/typography/code-block-base.tsx","../../src/ui/typography/code-block.tsx"],"names":["jsx","tone","className","children","ref","ordered","marker","rest"],"mappings":"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","file":"typography.mjs","sourcesContent":["import { cva } from \"class-variance-authority\";\n\n/** Semantic text colors aligned with slate/cyan/violet accents used across the kit (dark-first). */\nexport const typographyToneVariants = cva(\"\", {\n variants: {\n tone: {\n default: \"text-slate-50 border-white/15\",\n muted: \"text-slate-400 border-white/15\",\n primary: \"text-cyan-300 border-cyan-300/40\",\n secondary: \"text-slate-300 border-white/15\",\n accent: \"text-violet-300 border-violet-300/40\",\n destructive: \"text-rose-400 border-rose-300/40\",\n info: \"text-sky-300 border-sky-300/40\",\n success: \"text-emerald-300 border-emerald-300/40\",\n warning: \"text-amber-300 border-amber-300/40\",\n error: \"text-red-300 border-red-300/40\",\n \"gradient-pink-violet\":\n \"bg-linear-to-r from-pink-400 to-violet-400 bg-clip-text text-transparent\",\n \"gradient-cyan-violet\":\n \"bg-linear-to-r from-cyan-400 to-violet-400 bg-clip-text text-transparent\",\n \"gradient-cyan-blue\":\n \"bg-linear-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent\",\n \"gradient-cyan-green\":\n \"bg-linear-to-r from-cyan-400 to-green-400 bg-clip-text text-transparent\",\n \"gradient-cyan-orange\":\n \"bg-linear-to-r from-cyan-400 to-orange-400 bg-clip-text text-transparent\",\n \"gradient-cyan-red\":\n \"bg-linear-to-r from-cyan-400 to-red-400 bg-clip-text text-transparent\",\n \"gradient-cyan-purple\":\n \"bg-linear-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent\",\n \"gradient-cyan-pink\":\n \"bg-linear-to-r from-cyan-400 to-pink-400 bg-clip-text text-transparent\",\n },\n },\n defaultVariants: {\n tone: \"default\",\n },\n});\n\nexport const headingLevelVariants = cva(\"scroll-m-20\", {\n variants: {\n level: {\n 1: \"text-4xl font-bold tracking-tight md:text-5xl\",\n 2: \"text-3xl font-semibold tracking-tight\",\n 3: \"text-2xl font-semibold tracking-tight\",\n 4: \"text-xl font-semibold tracking-tight\",\n 5: \"text-lg font-medium\",\n 6: \"text-base font-medium\",\n },\n },\n});\n\nexport const textSizeVariants = cva(\"\", {\n variants: {\n size: {\n sm: \"text-sm leading-relaxed\",\n base: \"text-base leading-relaxed\",\n lg: \"text-lg leading-relaxed\",\n },\n },\n defaultVariants: {\n size: \"base\",\n },\n});\n\n/** Marker style for unordered lists; ignored when `ordered` is true (decimal numbering). */\nexport const unorderedListMarkerVariants = cva(\"space-y-2 pl-5\", {\n variants: {\n marker: {\n disc: \"list-disc\",\n circle: \"[list-style-type:circle]\",\n none: \"list-none pl-0\",\n },\n },\n defaultVariants: {\n marker: \"disc\",\n },\n});\n\nexport const orderedListVariants = cva(\"list-decimal space-y-2 pl-5\");\n","import { cn } from \"../../lib/utils\";\n\nimport type { HeadingProps } from \"./types\";\nimport { headingLevelVariants, typographyToneVariants } from \"./variants\";\n\nconst HEADING_TAGS = {\n 1: \"h1\",\n 2: \"h2\",\n 3: \"h3\",\n 4: \"h4\",\n 5: \"h5\",\n 6: \"h6\",\n} as const;\n\nexport const HeadingBase = (props: HeadingProps) => {\n const {\n level,\n displayLevel,\n tone,\n bold,\n italic,\n underline,\n strikethrough,\n ref,\n className,\n children,\n ...rest\n } = props;\n\n const Tag = HEADING_TAGS[level];\n const scale = displayLevel ?? level;\n\n return (\n <Tag\n ref={ref}\n data-slot=\"typography-heading\"\n data-level={level}\n className={cn(\n typographyToneVariants({ tone }),\n headingLevelVariants({ level: scale }),\n bold && \"font-bold\",\n italic && \"italic\",\n underline && \"underline underline-offset-4\",\n strikethrough && \"line-through\",\n className,\n )}\n {...rest}\n >\n {children}\n </Tag>\n );\n};\n\nHeadingBase.displayName = \"Heading\";\n","import { HeadingBase } from \"./heading-base\";\nimport type { HeadingProps } from \"./types\";\n\nexport const Heading = (props: HeadingProps) => {\n return <HeadingBase {...props} />;\n};\n\nHeading.displayName = \"Heading\";\n","import { cn } from \"../../lib/utils\";\n\nimport type { TextProps } from \"./types\";\nimport { textSizeVariants, typographyToneVariants } from \"./variants\";\n\nexport const TextBase = (props: TextProps) => {\n const {\n as = \"p\",\n size = \"base\",\n tone,\n bold,\n italic,\n underline,\n strikethrough,\n highlight,\n className,\n children,\n ...rest\n } = props;\n\n const Component = as;\n\n return (\n <Component\n data-slot=\"typography-text\"\n className={cn(\n typographyToneVariants({ tone }),\n textSizeVariants({ size }),\n bold && \"font-semibold\",\n italic && \"italic\",\n underline && \"underline underline-offset-2\",\n strikethrough && \"line-through\",\n highlight && \"rounded bg-amber-400/15 px-0.5\",\n className,\n )}\n {...rest}\n >\n {children}\n </Component>\n );\n};\n\nTextBase.displayName = \"Text\";\n","import { TextBase } from \"./text-base\";\nimport type { TextProps } from \"./types\";\n\nexport const Text = (props: TextProps) => {\n return <TextBase {...props} />;\n};\n\nText.displayName = \"Text\";\n","import { cn } from \"../../lib/utils\";\n\nimport type { ListProps, ListItemProps } from \"./types\";\nimport {\n orderedListVariants,\n typographyToneVariants,\n unorderedListMarkerVariants,\n} from \"./variants\";\n\nexport function ListBase(props: ListProps) {\n if (\"ordered\" in props && props.ordered === true) {\n const { tone, className, children, ref, ordered, marker, ...rest } = props;\n\n void ordered;\n void marker;\n\n return (\n <ol\n ref={ref}\n data-slot=\"typography-list\"\n data-list-type=\"ordered\"\n className={cn(\n typographyToneVariants({ tone }),\n orderedListVariants(),\n className,\n )}\n {...rest}\n >\n {children}\n </ol>\n );\n }\n\n const {\n marker = \"disc\",\n tone,\n className,\n children,\n ref,\n ordered,\n ...rest\n } = props;\n\n void ordered;\n\n return (\n <ul\n ref={ref}\n data-slot=\"typography-list\"\n data-list-type=\"unordered\"\n className={cn(\n typographyToneVariants({ tone }),\n unorderedListMarkerVariants({ marker }),\n className,\n )}\n {...rest}\n >\n {children}\n </ul>\n );\n}\n\nListBase.displayName = \"List\";\n\nexport function ListItemBase(props: ListItemProps) {\n const { className, children, ref, ...rest } = props;\n\n return (\n <li\n ref={ref}\n data-slot=\"typography-list-item\"\n className={cn(\"leading-relaxed\", className)}\n {...rest}\n >\n {children}\n </li>\n );\n}\n\nListItemBase.displayName = \"ListItem\";\n","import type { ListProps } from \"./types\";\n\nimport { ListBase, ListItemBase } from \"./list-base\";\n\nexport const ListItem = ListItemBase;\n\nfunction ListRoot(props: ListProps) {\n return <ListBase {...props} />;\n}\n\nexport const List = Object.assign(ListRoot, {\n Item: ListItem,\n});\n\nListRoot.displayName = \"List\";\n","import { cn } from \"../../lib/utils\";\n\nimport type { BlockquoteProps } from \"./types\";\nimport { typographyToneVariants } from \"./variants\";\n\nexport const BlockquoteBase = (props: BlockquoteProps) => {\n const { tone, attribution, className, children, ref, ...rest } = props;\n\n return (\n <blockquote\n ref={ref}\n data-slot=\"typography-blockquote\"\n className={cn(\n typographyToneVariants({ tone }),\n \"border-l-4 py-1 pl-4 italic\",\n className,\n )}\n {...rest}\n >\n <div className=\"space-y-2 leading-relaxed\">{children}</div>\n {attribution ? (\n <footer className=\"mt-3 text-sm not-italic\">\n <cite>{attribution}</cite>\n </footer>\n ) : null}\n </blockquote>\n );\n};\n\nBlockquoteBase.displayName = \"Blockquote\";\n","import { BlockquoteBase } from \"./blockquote-base\";\nimport type { BlockquoteProps } from \"./types\";\n\nexport const Blockquote = (props: BlockquoteProps) => {\n return <BlockquoteBase {...props} />;\n};\n\nBlockquote.displayName = \"Blockquote\";\n","import { cn } from \"../../lib/utils\";\n\nimport type { InlineCodeProps } from \"./types\";\nimport { typographyToneVariants } from \"./variants\";\n\nexport const InlineCodeBase = (props: InlineCodeProps) => {\n const { tone, className, children, ref, ...rest } = props;\n\n return (\n <code\n ref={ref}\n data-slot=\"typography-inline-code\"\n className={cn(\n typographyToneVariants({ tone }),\n \"rounded-md border border-white/10 bg-white/6 px-1.5 py-0.5 font-mono text-[0.925em] font-normal\",\n className,\n )}\n {...rest}\n >\n {children}\n </code>\n );\n};\n\nInlineCodeBase.displayName = \"InlineCode\";\n","import { InlineCodeBase } from \"./inline-code-base\";\nimport type { InlineCodeProps } from \"./types\";\n\nexport const InlineCode = (props: InlineCodeProps) => {\n return <InlineCodeBase {...props} />;\n};\n\nInlineCode.displayName = \"InlineCode\";\n","import { cn } from \"../../lib/utils\";\n\nimport type { CodeBlockProps } from \"./types\";\nimport { typographyToneVariants } from \"./variants\";\n\nexport const CodeBlockBase = (props: CodeBlockProps) => {\n const { tone, language, className, children, ref, ...rest } = props;\n\n const ariaLabel = language ? `Code sample (${language})` : \"Code sample\";\n\n return (\n <pre\n ref={ref}\n data-slot=\"typography-code-block\"\n aria-label={ariaLabel}\n className={cn(\n typographyToneVariants({ tone }),\n \"overflow-x-auto rounded-xl border border-white/10 bg-slate-950/80 p-4 text-sm leading-relaxed shadow-inner shadow-slate-950/40\",\n className,\n )}\n {...rest}\n >\n <code className=\"font-mono text-[0.95em] whitespace-pre-wrap wrap-break-word\">\n {children}\n </code>\n </pre>\n );\n};\n\nCodeBlockBase.displayName = \"CodeBlock\";\n","import { CodeBlockBase } from \"./code-block-base\";\nimport type { CodeBlockProps } from \"./types\";\n\nexport const CodeBlock = (props: CodeBlockProps) => {\n return <CodeBlockBase {...props} />;\n};\n\nCodeBlock.displayName = \"CodeBlock\";\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zentauri-ui/zentauri-components",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.31",
|
|
4
4
|
"description": "React + Tailwind UI kit with charts, ESM/CJS builds, per-entry exports, and a zentauri-components / zentauri-ui CLI to vendor UI or hook source into your app",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"files": [
|
package/src/charts/area/Area.tsx
CHANGED
package/src/charts/bar/Bar.tsx
CHANGED
package/src/charts/pie/Pie.tsx
CHANGED
|
@@ -13,7 +13,7 @@ import type { PieChartProps } from "../shared/types";
|
|
|
13
13
|
|
|
14
14
|
const RADIAN = Math.PI / 180;
|
|
15
15
|
|
|
16
|
-
const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent }: PieLabelRenderProps) => {
|
|
16
|
+
const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, fill }: PieLabelRenderProps) => {
|
|
17
17
|
if (cx == null || cy == null || innerRadius == null || outerRadius == null) {
|
|
18
18
|
return null;
|
|
19
19
|
}
|
|
@@ -24,14 +24,12 @@ const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, per
|
|
|
24
24
|
const y = ncy + radius * Math.sin(-(midAngle ?? 0) * RADIAN);
|
|
25
25
|
|
|
26
26
|
return (
|
|
27
|
-
<text x={x} y={y} fill=
|
|
27
|
+
<text x={x} y={y} fill={fill} textAnchor={x > ncx ? 'start' : 'end'} dominantBaseline="central">
|
|
28
28
|
{`${((percent ?? 0) * 100).toFixed(0)}%`}
|
|
29
29
|
</text>
|
|
30
30
|
);
|
|
31
31
|
};
|
|
32
32
|
|
|
33
|
-
const DEFAULT_COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];
|
|
34
|
-
|
|
35
33
|
export function PieChart<
|
|
36
34
|
TDatum extends Record<string, number | string | null | undefined>,
|
|
37
35
|
>({
|
|
@@ -46,15 +44,17 @@ export function PieChart<
|
|
|
46
44
|
height = 320,
|
|
47
45
|
label = false,
|
|
48
46
|
labelLine = false,
|
|
47
|
+
labelColor = "white",
|
|
49
48
|
nameKey,
|
|
50
49
|
paddingAngle = 2,
|
|
51
50
|
showLegend = true,
|
|
52
51
|
showTooltip = true,
|
|
53
52
|
tooltipColor = "#0f172a",
|
|
54
|
-
stroke,
|
|
55
|
-
|
|
53
|
+
stroke = "#000000",
|
|
54
|
+
fill = "#0d3b66",
|
|
56
55
|
innerRadius,
|
|
57
56
|
outerRadius,
|
|
57
|
+
shape,
|
|
58
58
|
style,
|
|
59
59
|
...props
|
|
60
60
|
}: PieChartProps<TDatum>) {
|
|
@@ -90,8 +90,10 @@ export function PieChart<
|
|
|
90
90
|
paddingAngle={paddingAngle}
|
|
91
91
|
cornerRadius={cornerRadius}
|
|
92
92
|
labelLine={labelLine}
|
|
93
|
-
label={label ? renderCustomizedLabel : undefined}
|
|
93
|
+
label={label ? (props: PieLabelRenderProps) => renderCustomizedLabel({...props, fill: labelColor}) : undefined}
|
|
94
94
|
stroke={stroke}
|
|
95
|
+
fill={fill}
|
|
96
|
+
shape={shape}
|
|
95
97
|
/>
|
|
96
98
|
</RechartsPieChart>
|
|
97
99
|
</ChartFrame>
|
|
@@ -2,6 +2,7 @@ import type { VariantProps } from "class-variance-authority";
|
|
|
2
2
|
import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
|
|
3
3
|
|
|
4
4
|
import type { chartPalette, chartVariants } from "./variants";
|
|
5
|
+
import { PieProps } from "recharts";
|
|
5
6
|
|
|
6
7
|
export type ChartType = "area" | "bar" | "bubble" | "line" | "pie";
|
|
7
8
|
|
|
@@ -22,6 +23,7 @@ export type ChartSeries = {
|
|
|
22
23
|
color?: ChartColor | string;
|
|
23
24
|
textColor?: string;
|
|
24
25
|
fill?: string;
|
|
26
|
+
stroke?: string;
|
|
25
27
|
stackId?: string;
|
|
26
28
|
zKey?: string;
|
|
27
29
|
};
|
|
@@ -71,12 +73,14 @@ export type PieChartProps<TDatum extends ChartDatum = ChartDatum> =
|
|
|
71
73
|
tooltipColor?: string;
|
|
72
74
|
emptyState?: ReactNode;
|
|
73
75
|
containerStyle?: CSSProperties;
|
|
74
|
-
paddingAngle?:
|
|
75
|
-
cornerRadius?:
|
|
76
|
+
paddingAngle?: PieProps["paddingAngle"];
|
|
77
|
+
cornerRadius?: PieProps["cornerRadius"];
|
|
76
78
|
label?: boolean;
|
|
77
79
|
labelLine?: boolean;
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
80
|
+
labelColor?: string;
|
|
81
|
+
stroke?: PieProps["stroke"];
|
|
82
|
+
fill?: PieProps["fill"];
|
|
83
|
+
innerRadius?: PieProps["innerRadius"];
|
|
84
|
+
outerRadius?: PieProps["outerRadius"];
|
|
85
|
+
shape?: PieProps["shape"]
|
|
82
86
|
};
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import { act, renderHook } from "@testing-library/react";
|
|
2
|
+
import { describe, expect, it, vi } from "vitest";
|
|
3
|
+
|
|
4
|
+
import { useDynamicStepper } from "./useDynamicStepper";
|
|
5
|
+
|
|
6
|
+
describe("useDynamicStepper", () => {
|
|
7
|
+
it("should use internal state when uncontrolled", () => {
|
|
8
|
+
const { result } = renderHook(() =>
|
|
9
|
+
useDynamicStepper({ stepCount: 3, defaultActiveStep: 1 }),
|
|
10
|
+
);
|
|
11
|
+
expect(result.current.activeStep).toBe(1);
|
|
12
|
+
expect(result.current.canGoPrevious).toBe(true);
|
|
13
|
+
expect(result.current.canGoNext).toBe(true);
|
|
14
|
+
act(() => {
|
|
15
|
+
result.current.goNext();
|
|
16
|
+
});
|
|
17
|
+
expect(result.current.activeStep).toBe(2);
|
|
18
|
+
act(() => {
|
|
19
|
+
result.current.goPrevious();
|
|
20
|
+
});
|
|
21
|
+
expect(result.current.activeStep).toBe(1);
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
it("should clamp defaultActiveStep when uncontrolled", () => {
|
|
25
|
+
const { result } = renderHook(() =>
|
|
26
|
+
useDynamicStepper({ stepCount: 2, defaultActiveStep: 99 }),
|
|
27
|
+
);
|
|
28
|
+
expect(result.current.activeStep).toBe(1);
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
it("should not navigate past bounds", () => {
|
|
32
|
+
const { result } = renderHook(() =>
|
|
33
|
+
useDynamicStepper({ stepCount: 2, defaultActiveStep: 0 }),
|
|
34
|
+
);
|
|
35
|
+
expect(result.current.canGoPrevious).toBe(false);
|
|
36
|
+
act(() => {
|
|
37
|
+
result.current.goPrevious();
|
|
38
|
+
});
|
|
39
|
+
expect(result.current.activeStep).toBe(0);
|
|
40
|
+
act(() => {
|
|
41
|
+
result.current.goNext();
|
|
42
|
+
});
|
|
43
|
+
act(() => {
|
|
44
|
+
result.current.goNext();
|
|
45
|
+
});
|
|
46
|
+
expect(result.current.activeStep).toBe(1);
|
|
47
|
+
expect(result.current.canGoNext).toBe(false);
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
it("should respect controlled activeStep", () => {
|
|
51
|
+
const { result, rerender } = renderHook(
|
|
52
|
+
({ step }: { step: number }) =>
|
|
53
|
+
useDynamicStepper({ stepCount: 3, activeStep: step }),
|
|
54
|
+
{ initialProps: { step: 0 } },
|
|
55
|
+
);
|
|
56
|
+
expect(result.current.activeStep).toBe(0);
|
|
57
|
+
rerender({ step: 2 });
|
|
58
|
+
expect(result.current.activeStep).toBe(2);
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
it("should call onActiveStepChange when navigating uncontrolled", () => {
|
|
62
|
+
const onActiveStepChange = vi.fn();
|
|
63
|
+
const onNext = vi.fn();
|
|
64
|
+
const { result } = renderHook(() =>
|
|
65
|
+
useDynamicStepper({
|
|
66
|
+
stepCount: 3,
|
|
67
|
+
defaultActiveStep: 0,
|
|
68
|
+
onActiveStepChange,
|
|
69
|
+
onNext,
|
|
70
|
+
}),
|
|
71
|
+
);
|
|
72
|
+
act(() => {
|
|
73
|
+
result.current.goNext();
|
|
74
|
+
});
|
|
75
|
+
expect(onActiveStepChange).toHaveBeenCalledWith(1);
|
|
76
|
+
expect(onNext).toHaveBeenCalledWith(1);
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
it("should call onPrevious when going back", () => {
|
|
80
|
+
const onPrevious = vi.fn();
|
|
81
|
+
const { result } = renderHook(() =>
|
|
82
|
+
useDynamicStepper({
|
|
83
|
+
stepCount: 3,
|
|
84
|
+
defaultActiveStep: 1,
|
|
85
|
+
onPrevious,
|
|
86
|
+
}),
|
|
87
|
+
);
|
|
88
|
+
act(() => {
|
|
89
|
+
result.current.goPrevious();
|
|
90
|
+
});
|
|
91
|
+
expect(onPrevious).toHaveBeenCalledWith(0);
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
it("should expose safe flags when stepCount is zero", () => {
|
|
95
|
+
const { result } = renderHook(() =>
|
|
96
|
+
useDynamicStepper({ stepCount: 0, defaultActiveStep: 0 }),
|
|
97
|
+
);
|
|
98
|
+
expect(result.current.activeStep).toBe(0);
|
|
99
|
+
expect(result.current.canGoPrevious).toBe(false);
|
|
100
|
+
expect(result.current.canGoNext).toBe(false);
|
|
101
|
+
act(() => {
|
|
102
|
+
result.current.goNext();
|
|
103
|
+
result.current.goPrevious();
|
|
104
|
+
});
|
|
105
|
+
expect(result.current.activeStep).toBe(0);
|
|
106
|
+
});
|
|
107
|
+
});
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import { useCallback, useMemo } from "react";
|
|
4
|
+
|
|
5
|
+
import { useControllableState } from "../useControllableState/useControllableState";
|
|
6
|
+
|
|
7
|
+
import type {
|
|
8
|
+
UseDynamicStepperParams,
|
|
9
|
+
UseDynamicStepperResult,
|
|
10
|
+
} from "../../ui/dynamic-stepper/types";
|
|
11
|
+
|
|
12
|
+
function clampDynamicStepperIndex(index: number, stepCount: number): number {
|
|
13
|
+
if (stepCount <= 0) {
|
|
14
|
+
return 0;
|
|
15
|
+
}
|
|
16
|
+
return Math.min(Math.max(index, 0), stepCount - 1);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* Headless multi-step index with prev/next navigation.
|
|
21
|
+
*
|
|
22
|
+
* @param params.stepCount - Number of steps (0-based count semantics via indices).
|
|
23
|
+
* @returns Active step, setter, navigation helpers, and boundary flags.
|
|
24
|
+
*/
|
|
25
|
+
export function useDynamicStepper({
|
|
26
|
+
stepCount,
|
|
27
|
+
activeStep: activeStepProp,
|
|
28
|
+
defaultActiveStep = 0,
|
|
29
|
+
onActiveStepChange,
|
|
30
|
+
onPrevious,
|
|
31
|
+
onNext,
|
|
32
|
+
}: UseDynamicStepperParams): UseDynamicStepperResult {
|
|
33
|
+
const [storedStep, setStoredStep] = useControllableState<number>({
|
|
34
|
+
value: activeStepProp,
|
|
35
|
+
defaultValue: clampDynamicStepperIndex(defaultActiveStep, stepCount),
|
|
36
|
+
onChange: onActiveStepChange,
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
const activeStep = useMemo(
|
|
40
|
+
() => clampDynamicStepperIndex(storedStep, stepCount),
|
|
41
|
+
[storedStep, stepCount],
|
|
42
|
+
);
|
|
43
|
+
|
|
44
|
+
const canGoPrevious = stepCount > 0 && activeStep > 0;
|
|
45
|
+
const canGoNext = stepCount > 0 && activeStep < stepCount - 1;
|
|
46
|
+
|
|
47
|
+
const setActiveStep = useCallback(
|
|
48
|
+
(next: number | ((prev: number) => number)) => {
|
|
49
|
+
const resolved =
|
|
50
|
+
typeof next === "function"
|
|
51
|
+
? (next as (prev: number) => number)(activeStep)
|
|
52
|
+
: next;
|
|
53
|
+
setStoredStep(clampDynamicStepperIndex(resolved, stepCount));
|
|
54
|
+
},
|
|
55
|
+
[activeStep, setStoredStep, stepCount],
|
|
56
|
+
);
|
|
57
|
+
|
|
58
|
+
const goPrevious = useCallback(() => {
|
|
59
|
+
if (!canGoPrevious) {
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
const nextStep = clampDynamicStepperIndex(activeStep - 1, stepCount);
|
|
63
|
+
setStoredStep(nextStep);
|
|
64
|
+
onPrevious?.(nextStep);
|
|
65
|
+
}, [
|
|
66
|
+
activeStep,
|
|
67
|
+
canGoPrevious,
|
|
68
|
+
onPrevious,
|
|
69
|
+
setStoredStep,
|
|
70
|
+
stepCount,
|
|
71
|
+
]);
|
|
72
|
+
|
|
73
|
+
const goNext = useCallback(() => {
|
|
74
|
+
if (!canGoNext) {
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
const nextStep = clampDynamicStepperIndex(activeStep + 1, stepCount);
|
|
78
|
+
setStoredStep(nextStep);
|
|
79
|
+
onNext?.(nextStep);
|
|
80
|
+
}, [activeStep, canGoNext, onNext, setStoredStep, stepCount]);
|
|
81
|
+
|
|
82
|
+
return {
|
|
83
|
+
activeStep,
|
|
84
|
+
setActiveStep,
|
|
85
|
+
goPrevious,
|
|
86
|
+
goNext,
|
|
87
|
+
canGoPrevious,
|
|
88
|
+
canGoNext,
|
|
89
|
+
stepCount,
|
|
90
|
+
};
|
|
91
|
+
}
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import { createRef } from "react";
|
|
2
|
+
import { render, screen } from "@testing-library/react";
|
|
3
|
+
import userEvent from "@testing-library/user-event";
|
|
4
|
+
import { describe, expect, it, vi } from "vitest";
|
|
5
|
+
|
|
6
|
+
import { DynamicStepper } from "./dynamic-stepper";
|
|
7
|
+
|
|
8
|
+
const sampleSteps = [
|
|
9
|
+
{ id: "a", title: "One", description: "First" },
|
|
10
|
+
{ id: "b", title: "Two", description: "Second" },
|
|
11
|
+
{ id: "c", title: "Three", description: "Third" },
|
|
12
|
+
];
|
|
13
|
+
|
|
14
|
+
describe("DynamicStepper", () => {
|
|
15
|
+
it("should expose displayName", () => {
|
|
16
|
+
expect(DynamicStepper.displayName).toBe("DynamicStepper");
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
it("should render null when steps is empty", () => {
|
|
20
|
+
const { container } = render(<DynamicStepper steps={[]} />);
|
|
21
|
+
expect(container.firstChild).toBeNull();
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
it("should stamp mapper ol and button ids with suffixes", () => {
|
|
25
|
+
render(<DynamicStepper steps={sampleSteps} />);
|
|
26
|
+
const mapper = document.querySelector('[data-slot="dynamic-stepper-mapper"]');
|
|
27
|
+
expect(mapper?.tagName).toBe("OL");
|
|
28
|
+
expect(mapper?.id.endsWith("-mapper")).toBe(true);
|
|
29
|
+
|
|
30
|
+
const prev = document.querySelector('[data-slot="dynamic-stepper-previous"]');
|
|
31
|
+
const next = document.querySelector('[data-slot="dynamic-stepper-next"]');
|
|
32
|
+
expect(prev?.id.endsWith("-previous")).toBe(true);
|
|
33
|
+
expect(next?.id.endsWith("-next")).toBe(true);
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
it("should navigate uncontrolled with next and previous", async () => {
|
|
37
|
+
const user = userEvent.setup();
|
|
38
|
+
render(<DynamicStepper steps={sampleSteps} defaultActiveStep={0} />);
|
|
39
|
+
|
|
40
|
+
expect(screen.getByText("One")).toBeInTheDocument();
|
|
41
|
+
const indicators = document.querySelectorAll(
|
|
42
|
+
'[data-slot="dynamic-stepper-indicator"]',
|
|
43
|
+
);
|
|
44
|
+
expect(indicators[0]?.className).toMatch(/violet/);
|
|
45
|
+
|
|
46
|
+
await user.click(screen.getByRole("button", { name: "Next" }));
|
|
47
|
+
expect(indicators[1]?.className).toMatch(/violet/);
|
|
48
|
+
|
|
49
|
+
await user.click(screen.getByRole("button", { name: "Previous" }));
|
|
50
|
+
expect(indicators[0]?.className).toMatch(/violet/);
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
it("should disable previous on first step and next on last step", () => {
|
|
54
|
+
render(<DynamicStepper steps={sampleSteps} defaultActiveStep={0} />);
|
|
55
|
+
expect(screen.getByRole("button", { name: "Previous" })).toBeDisabled();
|
|
56
|
+
expect(screen.getByRole("button", { name: "Next" })).not.toBeDisabled();
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
it("should respect controlled activeStep", async () => {
|
|
60
|
+
const user = userEvent.setup();
|
|
61
|
+
const onActiveStepChange = vi.fn();
|
|
62
|
+
const { rerender } = render(
|
|
63
|
+
<DynamicStepper
|
|
64
|
+
steps={sampleSteps}
|
|
65
|
+
activeStep={0}
|
|
66
|
+
onActiveStepChange={onActiveStepChange}
|
|
67
|
+
/>,
|
|
68
|
+
);
|
|
69
|
+
|
|
70
|
+
await user.click(screen.getByRole("button", { name: "Next" }));
|
|
71
|
+
expect(onActiveStepChange).toHaveBeenCalledWith(1);
|
|
72
|
+
|
|
73
|
+
rerender(
|
|
74
|
+
<DynamicStepper
|
|
75
|
+
steps={sampleSteps}
|
|
76
|
+
activeStep={1}
|
|
77
|
+
onActiveStepChange={onActiveStepChange}
|
|
78
|
+
/>,
|
|
79
|
+
);
|
|
80
|
+
const indicators = document.querySelectorAll(
|
|
81
|
+
'[data-slot="dynamic-stepper-indicator"]',
|
|
82
|
+
);
|
|
83
|
+
expect(indicators[1]?.className).toMatch(/violet/);
|
|
84
|
+
});
|
|
85
|
+
|
|
86
|
+
it("should forward ref to root", () => {
|
|
87
|
+
const ref = createRef<HTMLDivElement>();
|
|
88
|
+
render(<DynamicStepper ref={ref} steps={sampleSteps} />);
|
|
89
|
+
expect(ref.current?.getAttribute("data-slot")).toBe("dynamic-stepper");
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
it("should apply indicator tone props to semantic states", () => {
|
|
93
|
+
const { container } = render(
|
|
94
|
+
<DynamicStepper
|
|
95
|
+
steps={sampleSteps}
|
|
96
|
+
defaultActiveStep={1}
|
|
97
|
+
indicatorCompleteAppearance="sky"
|
|
98
|
+
indicatorCurrentAppearance="rose"
|
|
99
|
+
indicatorUpcomingAppearance="amber"
|
|
100
|
+
/>,
|
|
101
|
+
);
|
|
102
|
+
const indicators = container.querySelectorAll(
|
|
103
|
+
'[data-slot="dynamic-stepper-indicator"]',
|
|
104
|
+
);
|
|
105
|
+
expect(indicators[0]?.className).toMatch(/sky-/);
|
|
106
|
+
expect(indicators[1]?.className).toMatch(/rose-/);
|
|
107
|
+
expect(indicators[2]?.className).toMatch(/amber-/);
|
|
108
|
+
});
|
|
109
|
+
});
|