@zentauri-ui/zentauri-components 2.3.0 → 2.3.1

package/dist/ui/split-button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ui/split-button/variants.ts","../../src/ui/split-button/split-button-base.tsx","../../src/ui/split-button/split-button.tsx"],"names":["cva","zuiSplitButtonRoot","zuiSplitButtonFullWidth","zuiSplitButtonDropdown","zuiSplitButtonGroup","zuiSplitButtonPrimary","zuiSplitButtonTrigger","zuiSplitButtonTriggerSizes","zuiSplitButtonContent","zuiSplitButtonItemDisabled","useState","useRef","useEffect","jsx","cn","jsxs","Dropdown","buttonVariants","FiLoader","DropdownTrigger","FiChevronDown","DropdownContent","DropdownItem"],"mappings":"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","file":"split-button.js","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiSplitButtonContent,\n  zuiSplitButtonDropdown,\n  zuiSplitButtonFullWidth,\n  zuiSplitButtonGroup,\n  zuiSplitButtonItemDisabled,\n  zuiSplitButtonPrimary,\n  zuiSplitButtonRoot,\n  zuiSplitButtonTrigger,\n  zuiSplitButtonTriggerSizes,\n} from \"../../design-system\";\n\nexport const splitButtonRootVariants = cva(zuiSplitButtonRoot, {\n  variants: {\n    fullWidth: {\n      true: zuiSplitButtonFullWidth,\n    },\n  },\n});\nexport const splitButtonDropdownVariants = cva(zuiSplitButtonDropdown, {\n  variants: {\n    fullWidth: {\n      true: zuiSplitButtonFullWidth,\n    },\n  },\n});\nexport const splitButtonGroupVariants = cva(zuiSplitButtonGroup, {\n  variants: {\n    fullWidth: {\n      true: zuiSplitButtonFullWidth,\n    },\n  },\n});\nexport const splitButtonPrimaryVariants = cva(zuiSplitButtonPrimary);\nexport const splitButtonTriggerVariants = cva(zuiSplitButtonTrigger, {\n  variants: {\n    size: zuiSplitButtonTriggerSizes,\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\nexport const splitButtonContentVariants = cva(zuiSplitButtonContent);\nexport const splitButtonItemDisabledVariants = cva(zuiSplitButtonItemDisabled);\n","\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { FiChevronDown, FiLoader } from \"react-icons/fi\";\n\nimport {\n  Dropdown,\n  DropdownContent,\n  DropdownItem,\n  DropdownTrigger,\n} from \"../dropdown\";\nimport { buttonVariants } from \"../buttons\";\nimport { cn } from \"../../lib/utils\";\n\nimport type {\n  SplitButtonAppearance,\n  SplitButtonProps,\n  SplitButtonVariant,\n} from \"./types\";\nimport {\n  splitButtonContentVariants,\n  splitButtonDropdownVariants,\n  splitButtonGroupVariants,\n  splitButtonItemDisabledVariants,\n  splitButtonPrimaryVariants,\n  splitButtonRootVariants,\n  splitButtonTriggerVariants,\n} from \"./variants\";\n\nconst variantAppearanceMap = {\n  primary: \"default\",\n  secondary: \"secondary\",\n  outline: \"outline\",\n  ghost: \"ghost\",\n  danger: \"destructive\",\n  success: \"green\",\n} as const satisfies Record<SplitButtonVariant, SplitButtonAppearance>;\n\nfunction resolveAppearance({\n  appearance,\n  variant,\n}: {\n  appearance?: SplitButtonAppearance;\n  variant?: SplitButtonVariant;\n}) {\n  return appearance ?? (variant ? variantAppearanceMap[variant] : \"default\");\n}\n\nexport function SplitButtonBase({\n  label,\n  onClick,\n  items,\n  disabled = false,\n  loading = false,\n  appearance,\n  variant,\n  size = \"md\",\n  startIcon,\n  fullWidth = false,\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  triggerLabel,\n  triggerOn = \"click\",\n  className,\n  ref,\n  ...rest\n}: SplitButtonProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const isUnavailable = disabled || loading;\n  const resolvedAppearance = resolveAppearance({ appearance, variant });\n  const isControlled = controlledOpen !== undefined;\n  const open = isUnavailable\n    ? false\n    : isControlled\n      ? controlledOpen\n      : uncontrolledOpen;\n\n  const setOpen = (nextOpen: boolean) => {\n    if (isUnavailable && nextOpen) {\n      return;\n    }\n    if (!isControlled) {\n      setUncontrolledOpen(nextOpen);\n    }\n    onOpenChange?.(nextOpen);\n  };\n\n  const fullWidthFlag = fullWidth ? \"true\" : undefined;\n  const menuLabel = triggerLabel ?? `More ${label} actions`;\n\n  // Shared timeout ref for hover mode: delays close so the cursor can\n  // travel through the mt-2 gap between the button and the menu panel\n  // without dismissing the menu.\n  const hoverCloseRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const scheduleClose = () => {\n    cancelClose();\n    hoverCloseRef.current = setTimeout(() => setOpen(false), 120);\n  };\n\n  const cancelClose = () => {\n    if (hoverCloseRef.current !== null) {\n      clearTimeout(hoverCloseRef.current);\n      hoverCloseRef.current = null;\n    }\n  };\n\n  useEffect(() => cancelClose, []);\n\n  useEffect(() => {\n    if (isUnavailable && !isControlled) {\n      setUncontrolledOpen(false);\n      onOpenChange?.(false);\n    }\n  }, [isUnavailable, onOpenChange, isControlled]);\n\n  const dropdownHoverHandlers =\n    triggerOn === \"hover\"\n      ? {\n          onMouseEnter: () => {\n            cancelClose();\n            setOpen(true);\n          },\n          onMouseLeave: scheduleClose,\n        }\n      : undefined;\n\n  const contentHoverHandlers =\n    triggerOn === \"hover\"\n      ? { onMouseEnter: cancelClose, onMouseLeave: scheduleClose }\n      : undefined;\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"split-button\"\n      data-full-width={fullWidthFlag}\n      className={cn(splitButtonRootVariants({ fullWidth }), className)}\n      {...rest}\n    >\n      <Dropdown\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpenChange={setOpen}\n        data-full-width={fullWidthFlag}\n        className={splitButtonDropdownVariants({ fullWidth })}\n        {...dropdownHoverHandlers}\n      >\n        <div\n          data-slot=\"split-button-group\"\n          data-full-width={fullWidthFlag}\n          className={splitButtonGroupVariants({ fullWidth })}\n        >\n          <button\n            type=\"button\"\n            data-slot=\"split-button-primary\"\n            data-full-width={fullWidthFlag}\n            disabled={isUnavailable}\n            onClick={onClick}\n            className={cn(\n              buttonVariants({ appearance: resolvedAppearance, size }),\n              splitButtonPrimaryVariants(),\n            )}\n          >\n            {loading ? (\n              <FiLoader\n                aria-hidden\n                className=\"animate-spin\"\n                data-slot=\"split-button-spinner-icon\"\n              />\n            ) : (\n              startIcon\n            )}\n            <span>{label}</span>\n            {loading ? (\n              <span className=\"sr-only\" role=\"status\" aria-label=\"Loading\" />\n            ) : null}\n          </button>\n\n          <DropdownTrigger\n            aria-label={menuLabel}\n            disabled={isUnavailable}\n            className={cn(\n              buttonVariants({ appearance: resolvedAppearance, size }),\n              splitButtonTriggerVariants({ size }),\n            )}\n          >\n            <FiChevronDown aria-hidden />\n          </DropdownTrigger>\n        </div>\n\n        <DropdownContent\n          className={splitButtonContentVariants()}\n          placement=\"bottom\"\n          {...contentHoverHandlers}\n        >\n          {items.map((item) => (\n            <DropdownItem\n              key={item.id}\n              leftIcon={item.icon}\n              aria-disabled={item.disabled ? \"true\" : undefined}\n              className={\n                item.disabled ? splitButtonItemDisabledVariants() : undefined\n              }\n              onClick={(event) => {\n                if (item.disabled) {\n                  event.preventDefault();\n                  event.stopPropagation();\n                }\n              }}\n              onKeyDown={(event) => {\n                if (item.disabled) {\n                  event.preventDefault();\n                  event.stopPropagation();\n                }\n              }}\n              onSelect={() => {\n                setOpen(false);\n                item.onSelect?.();\n              }}\n            >\n              {item.label}\n            </DropdownItem>\n          ))}\n        </DropdownContent>\n      </Dropdown>\n    </div>\n  );\n}\n\nSplitButtonBase.displayName = \"SplitButton\";\n","// split-button.tsx — default static entry (no framer-motion)\nimport { SplitButtonBase } from \"./split-button-base\";\nimport type { SplitButtonProps } from \"./types\";\n\nexport const SplitButton = (props: SplitButtonProps) => {\n  return <SplitButtonBase {...props} />;\n};\n\nSplitButton.displayName = \"SplitButton\";\n"]}
+{"version":3,"sources":["../../src/ui/split-button/variants.ts","../../src/ui/split-button/split-button-base.tsx","../../src/ui/split-button/split-button.tsx"],"names":["cva","zuiSplitButtonRoot","zuiSplitButtonFullWidth","zuiSplitButtonDropdown","zuiSplitButtonGroup","zuiSplitButtonPrimary","zuiSplitButtonTrigger","zuiSplitButtonTriggerSizes","zuiSplitButtonContent","zuiSplitButtonItemDisabled","useState","useRef","useEffect","jsx","cn","jsxs","Dropdown","buttonVariants","FiLoader","DropdownTrigger","FiChevronDown","DropdownContent","DropdownItem"],"mappings":"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","file":"split-button.js","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiSplitButtonContent,\n  zuiSplitButtonDropdown,\n  zuiSplitButtonFullWidth,\n  zuiSplitButtonGroup,\n  zuiSplitButtonItemDisabled,\n  zuiSplitButtonPrimary,\n  zuiSplitButtonRoot,\n  zuiSplitButtonTrigger,\n  zuiSplitButtonTriggerSizes,\n} from \"../../design-system\";\n\nexport const splitButtonRootVariants = cva(zuiSplitButtonRoot, {\n  variants: {\n    fullWidth: {\n      true: zuiSplitButtonFullWidth,\n    },\n  },\n});\nexport const splitButtonDropdownVariants = cva(zuiSplitButtonDropdown, {\n  variants: {\n    fullWidth: {\n      true: zuiSplitButtonFullWidth,\n    },\n  },\n});\nexport const splitButtonGroupVariants = cva(zuiSplitButtonGroup, {\n  variants: {\n    fullWidth: {\n      true: zuiSplitButtonFullWidth,\n    },\n  },\n});\nexport const splitButtonPrimaryVariants = cva(zuiSplitButtonPrimary);\nexport const splitButtonTriggerVariants = cva(zuiSplitButtonTrigger, {\n  variants: {\n    size: zuiSplitButtonTriggerSizes,\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\nexport const splitButtonContentVariants = cva(zuiSplitButtonContent);\nexport const splitButtonItemDisabledVariants = cva(zuiSplitButtonItemDisabled);\n","\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { FiChevronDown, FiLoader } from \"react-icons/fi\";\n\nimport {\n  Dropdown,\n  DropdownContent,\n  DropdownItem,\n  DropdownTrigger,\n} from \"../dropdown\";\nimport { buttonVariants } from \"../buttons\";\nimport { cn } from \"../../lib/utils\";\n\nimport type {\n  SplitButtonAppearance,\n  SplitButtonProps,\n  SplitButtonVariant,\n} from \"./types\";\nimport {\n  splitButtonContentVariants,\n  splitButtonDropdownVariants,\n  splitButtonGroupVariants,\n  splitButtonItemDisabledVariants,\n  splitButtonPrimaryVariants,\n  splitButtonRootVariants,\n  splitButtonTriggerVariants,\n} from \"./variants\";\n\nconst variantAppearanceMap = {\n  primary: \"default\",\n  secondary: \"secondary\",\n  outline: \"outline\",\n  ghost: \"ghost\",\n  danger: \"destructive\",\n  success: \"green\",\n} as const satisfies Record<SplitButtonVariant, SplitButtonAppearance>;\n\nfunction resolveAppearance({\n  appearance,\n  variant,\n}: {\n  appearance?: SplitButtonAppearance;\n  variant?: SplitButtonVariant;\n}) {\n  return appearance ?? (variant ? variantAppearanceMap[variant] : \"default\");\n}\n\nexport function SplitButtonBase({\n  label,\n  onClick,\n  items,\n  disabled = false,\n  loading = false,\n  appearance,\n  variant,\n  size = \"md\",\n  startIcon,\n  fullWidth = false,\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  triggerLabel,\n  triggerOn = \"click\",\n  className,\n  ref,\n  ...rest\n}: SplitButtonProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const isUnavailable = disabled || loading;\n  const resolvedAppearance = resolveAppearance({ appearance, variant });\n  const isControlled = controlledOpen !== undefined;\n  const open = isUnavailable\n    ? false\n    : isControlled\n      ? controlledOpen\n      : uncontrolledOpen;\n\n  const setOpen = (nextOpen: boolean) => {\n    if (isUnavailable && nextOpen) {\n      return;\n    }\n    if (!isControlled) {\n      setUncontrolledOpen(nextOpen);\n    }\n    onOpenChange?.(nextOpen);\n  };\n\n  const fullWidthFlag = fullWidth ? \"true\" : undefined;\n  const menuLabel = triggerLabel ?? `More ${label} actions`;\n\n  // Shared timeout ref for hover mode: delays close so the cursor can\n  // travel through the mt-2 gap between the button and the menu panel\n  // without dismissing the menu.\n  const hoverCloseRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const scheduleClose = () => {\n    cancelClose();\n    hoverCloseRef.current = setTimeout(() => setOpen(false), 120);\n  };\n\n  const cancelClose = () => {\n    if (hoverCloseRef.current !== null) {\n      clearTimeout(hoverCloseRef.current);\n      hoverCloseRef.current = null;\n    }\n  };\n\n  useEffect(() => cancelClose, []);\n\n  useEffect(() => {\n    if (isUnavailable && !isControlled) {\n      setUncontrolledOpen(false);\n      onOpenChange?.(false);\n    }\n  }, [isUnavailable, onOpenChange, isControlled]);\n\n  const dropdownHoverHandlers =\n    triggerOn === \"hover\"\n      ? {\n          onMouseEnter: () => {\n            cancelClose();\n            setOpen(true);\n          },\n          onMouseLeave: scheduleClose,\n        }\n      : undefined;\n\n  const contentHoverHandlers =\n    triggerOn === \"hover\"\n      ? { onMouseEnter: cancelClose, onMouseLeave: scheduleClose }\n      : undefined;\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"split-button\"\n      data-full-width={fullWidthFlag}\n      className={cn(splitButtonRootVariants({ fullWidth }), className)}\n      {...rest}\n    >\n      <Dropdown\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpenChange={setOpen}\n        data-full-width={fullWidthFlag}\n        className={splitButtonDropdownVariants({ fullWidth })}\n        {...dropdownHoverHandlers}\n      >\n        <div\n          data-slot=\"split-button-group\"\n          data-full-width={fullWidthFlag}\n          className={splitButtonGroupVariants({ fullWidth })}\n        >\n          <button\n            type=\"button\"\n            data-slot=\"split-button-primary\"\n            data-full-width={fullWidthFlag}\n            disabled={isUnavailable}\n            onClick={onClick}\n            className={cn(\n              buttonVariants({ appearance: resolvedAppearance, size }),\n              splitButtonPrimaryVariants(),\n            )}\n          >\n            {loading ? (\n              <FiLoader\n                aria-hidden\n                className=\"animate-spin\"\n                data-slot=\"split-button-spinner-icon\"\n              />\n            ) : (\n              startIcon\n            )}\n            <span>{label}</span>\n            {loading ? (\n              <span className=\"sr-only\" role=\"status\" aria-label=\"Loading\" />\n            ) : null}\n          </button>\n\n          <DropdownTrigger\n            aria-label={menuLabel}\n            disabled={isUnavailable}\n            className={cn(\n              buttonVariants({ appearance: resolvedAppearance, size }),\n              splitButtonTriggerVariants({ size }),\n            )}\n          >\n            <FiChevronDown aria-hidden />\n          </DropdownTrigger>\n        </div>\n\n        <DropdownContent\n          className={splitButtonContentVariants()}\n          placement=\"bottom\"\n          {...contentHoverHandlers}\n        >\n          {items.map((item) => (\n            <DropdownItem\n              key={item.id}\n              leftIcon={item.icon}\n              aria-disabled={item.disabled ? \"true\" : undefined}\n              className={\n                item.disabled ? splitButtonItemDisabledVariants() : undefined\n              }\n              onClick={(event) => {\n                if (item.disabled) {\n                  event.preventDefault();\n                  event.stopPropagation();\n                }\n              }}\n              onKeyDown={(event) => {\n                if (item.disabled) {\n                  event.preventDefault();\n                  event.stopPropagation();\n                }\n              }}\n              onSelect={() => {\n                setOpen(false);\n                item.onSelect?.();\n              }}\n            >\n              {item.label}\n            </DropdownItem>\n          ))}\n        </DropdownContent>\n      </Dropdown>\n    </div>\n  );\n}\n\nSplitButtonBase.displayName = \"SplitButton\";\n","// split-button.tsx — default static entry (no framer-motion)\nimport { SplitButtonBase } from \"./split-button-base\";\nimport type { SplitButtonProps } from \"./types\";\n\nexport const SplitButton = (props: SplitButtonProps) => {\n  return <SplitButtonBase {...props} />;\n};\n\nSplitButton.displayName = \"SplitButton\";\n"]}

package/dist/ui/split-button.mjs

@@ -2,28 +2,30 @@
 import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from '../chunk-IHDM7AHY.mjs';
 import '../chunk-VXDEPZKH.mjs';
 import '../chunk-VBNW2B4D.mjs';
-import '../chunk-JKKF5DCF.mjs';
-import { buttonVariants } from '../chunk-WZY32L6K.mjs';
-import { zuiSplitButtonRoot, zuiSplitButtonFullWidth, zuiSplitButtonDropdown, zuiSplitButtonGroup, zuiSplitButtonPrimary, zuiSplitButtonTrigger, zuiSplitButtonTriggerSizes, zuiSplitButtonContent, zuiSplitButtonItemDisabled } from '../chunk-ZB6C6CJQ.mjs';
+import '../chunk-TTKTPERV.mjs';
+import { buttonVariants } from '../chunk-STWXN5EM.mjs';
+import { zuiSplitButtonRoot, zuiSplitButtonFullWidth, zuiSplitButtonDropdown, zuiSplitButtonGroup, zuiSplitButtonPrimary, zuiSplitButtonTrigger, zuiSplitButtonTriggerSizes, zuiSplitButtonContent, zuiSplitButtonItemDisabled } from '../chunk-PJATBFEK.mjs';
 import '../chunk-2NQKFH26.mjs';
+import '../chunk-ZBAKTM2R.mjs';
+import '../chunk-4ZBMDWWY.mjs';
 import '../chunk-YH6MOKHR.mjs';
 import '../chunk-T4ZLTKV2.mjs';
 import '../chunk-EMZC6ICD.mjs';
 import '../chunk-PUSCPBT2.mjs';
+import '../chunk-CIZQQ32L.mjs';
+import '../chunk-LRYKMXKI.mjs';
 import '../chunk-XFJIX2YP.mjs';
 import '../chunk-4WG3VNVL.mjs';
 import '../chunk-YPTHTFVF.mjs';
 import '../chunk-XY3TKIIH.mjs';
 import '../chunk-FX5KR2GP.mjs';
-import '../chunk-ZBAKTM2R.mjs';
-import '../chunk-4ZBMDWWY.mjs';
 import '../chunk-3IE4IELX.mjs';
 import '../chunk-BUEI4RMR.mjs';
+import '../chunk-4U6PVVST.mjs';
+import '../chunk-PWYEC3KY.mjs';
 import '../chunk-5AOVTY2X.mjs';
 import '../chunk-523VQLCW.mjs';
 import '../chunk-3VW4HMJT.mjs';
-import '../chunk-DIAA5VH4.mjs';
-import '../chunk-LRYKMXKI.mjs';
 import '../chunk-RWF3NVZP.mjs';
 import '../chunk-34LHS26H.mjs';
 import '../chunk-JEDMUBYI.mjs';

package/dist/ui/split-button.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ui/split-button/variants.ts","../../src/ui/split-button/split-button-base.tsx","../../src/ui/split-button/split-button.tsx"],"names":["jsx"],"mappings":"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","file":"split-button.mjs","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiSplitButtonContent,\n  zuiSplitButtonDropdown,\n  zuiSplitButtonFullWidth,\n  zuiSplitButtonGroup,\n  zuiSplitButtonItemDisabled,\n  zuiSplitButtonPrimary,\n  zuiSplitButtonRoot,\n  zuiSplitButtonTrigger,\n  zuiSplitButtonTriggerSizes,\n} from \"../../design-system\";\n\nexport const splitButtonRootVariants = cva(zuiSplitButtonRoot, {\n  variants: {\n    fullWidth: {\n      true: zuiSplitButtonFullWidth,\n    },\n  },\n});\nexport const splitButtonDropdownVariants = cva(zuiSplitButtonDropdown, {\n  variants: {\n    fullWidth: {\n      true: zuiSplitButtonFullWidth,\n    },\n  },\n});\nexport const splitButtonGroupVariants = cva(zuiSplitButtonGroup, {\n  variants: {\n    fullWidth: {\n      true: zuiSplitButtonFullWidth,\n    },\n  },\n});\nexport const splitButtonPrimaryVariants = cva(zuiSplitButtonPrimary);\nexport const splitButtonTriggerVariants = cva(zuiSplitButtonTrigger, {\n  variants: {\n    size: zuiSplitButtonTriggerSizes,\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\nexport const splitButtonContentVariants = cva(zuiSplitButtonContent);\nexport const splitButtonItemDisabledVariants = cva(zuiSplitButtonItemDisabled);\n","\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { FiChevronDown, FiLoader } from \"react-icons/fi\";\n\nimport {\n  Dropdown,\n  DropdownContent,\n  DropdownItem,\n  DropdownTrigger,\n} from \"../dropdown\";\nimport { buttonVariants } from \"../buttons\";\nimport { cn } from \"../../lib/utils\";\n\nimport type {\n  SplitButtonAppearance,\n  SplitButtonProps,\n  SplitButtonVariant,\n} from \"./types\";\nimport {\n  splitButtonContentVariants,\n  splitButtonDropdownVariants,\n  splitButtonGroupVariants,\n  splitButtonItemDisabledVariants,\n  splitButtonPrimaryVariants,\n  splitButtonRootVariants,\n  splitButtonTriggerVariants,\n} from \"./variants\";\n\nconst variantAppearanceMap = {\n  primary: \"default\",\n  secondary: \"secondary\",\n  outline: \"outline\",\n  ghost: \"ghost\",\n  danger: \"destructive\",\n  success: \"green\",\n} as const satisfies Record<SplitButtonVariant, SplitButtonAppearance>;\n\nfunction resolveAppearance({\n  appearance,\n  variant,\n}: {\n  appearance?: SplitButtonAppearance;\n  variant?: SplitButtonVariant;\n}) {\n  return appearance ?? (variant ? variantAppearanceMap[variant] : \"default\");\n}\n\nexport function SplitButtonBase({\n  label,\n  onClick,\n  items,\n  disabled = false,\n  loading = false,\n  appearance,\n  variant,\n  size = \"md\",\n  startIcon,\n  fullWidth = false,\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  triggerLabel,\n  triggerOn = \"click\",\n  className,\n  ref,\n  ...rest\n}: SplitButtonProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const isUnavailable = disabled || loading;\n  const resolvedAppearance = resolveAppearance({ appearance, variant });\n  const isControlled = controlledOpen !== undefined;\n  const open = isUnavailable\n    ? false\n    : isControlled\n      ? controlledOpen\n      : uncontrolledOpen;\n\n  const setOpen = (nextOpen: boolean) => {\n    if (isUnavailable && nextOpen) {\n      return;\n    }\n    if (!isControlled) {\n      setUncontrolledOpen(nextOpen);\n    }\n    onOpenChange?.(nextOpen);\n  };\n\n  const fullWidthFlag = fullWidth ? \"true\" : undefined;\n  const menuLabel = triggerLabel ?? `More ${label} actions`;\n\n  // Shared timeout ref for hover mode: delays close so the cursor can\n  // travel through the mt-2 gap between the button and the menu panel\n  // without dismissing the menu.\n  const hoverCloseRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const scheduleClose = () => {\n    cancelClose();\n    hoverCloseRef.current = setTimeout(() => setOpen(false), 120);\n  };\n\n  const cancelClose = () => {\n    if (hoverCloseRef.current !== null) {\n      clearTimeout(hoverCloseRef.current);\n      hoverCloseRef.current = null;\n    }\n  };\n\n  useEffect(() => cancelClose, []);\n\n  useEffect(() => {\n    if (isUnavailable && !isControlled) {\n      setUncontrolledOpen(false);\n      onOpenChange?.(false);\n    }\n  }, [isUnavailable, onOpenChange, isControlled]);\n\n  const dropdownHoverHandlers =\n    triggerOn === \"hover\"\n      ? {\n          onMouseEnter: () => {\n            cancelClose();\n            setOpen(true);\n          },\n          onMouseLeave: scheduleClose,\n        }\n      : undefined;\n\n  const contentHoverHandlers =\n    triggerOn === \"hover\"\n      ? { onMouseEnter: cancelClose, onMouseLeave: scheduleClose }\n      : undefined;\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"split-button\"\n      data-full-width={fullWidthFlag}\n      className={cn(splitButtonRootVariants({ fullWidth }), className)}\n      {...rest}\n    >\n      <Dropdown\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpenChange={setOpen}\n        data-full-width={fullWidthFlag}\n        className={splitButtonDropdownVariants({ fullWidth })}\n        {...dropdownHoverHandlers}\n      >\n        <div\n          data-slot=\"split-button-group\"\n          data-full-width={fullWidthFlag}\n          className={splitButtonGroupVariants({ fullWidth })}\n        >\n          <button\n            type=\"button\"\n            data-slot=\"split-button-primary\"\n            data-full-width={fullWidthFlag}\n            disabled={isUnavailable}\n            onClick={onClick}\n            className={cn(\n              buttonVariants({ appearance: resolvedAppearance, size }),\n              splitButtonPrimaryVariants(),\n            )}\n          >\n            {loading ? (\n              <FiLoader\n                aria-hidden\n                className=\"animate-spin\"\n                data-slot=\"split-button-spinner-icon\"\n              />\n            ) : (\n              startIcon\n            )}\n            <span>{label}</span>\n            {loading ? (\n              <span className=\"sr-only\" role=\"status\" aria-label=\"Loading\" />\n            ) : null}\n          </button>\n\n          <DropdownTrigger\n            aria-label={menuLabel}\n            disabled={isUnavailable}\n            className={cn(\n              buttonVariants({ appearance: resolvedAppearance, size }),\n              splitButtonTriggerVariants({ size }),\n            )}\n          >\n            <FiChevronDown aria-hidden />\n          </DropdownTrigger>\n        </div>\n\n        <DropdownContent\n          className={splitButtonContentVariants()}\n          placement=\"bottom\"\n          {...contentHoverHandlers}\n        >\n          {items.map((item) => (\n            <DropdownItem\n              key={item.id}\n              leftIcon={item.icon}\n              aria-disabled={item.disabled ? \"true\" : undefined}\n              className={\n                item.disabled ? splitButtonItemDisabledVariants() : undefined\n              }\n              onClick={(event) => {\n                if (item.disabled) {\n                  event.preventDefault();\n                  event.stopPropagation();\n                }\n              }}\n              onKeyDown={(event) => {\n                if (item.disabled) {\n                  event.preventDefault();\n                  event.stopPropagation();\n                }\n              }}\n              onSelect={() => {\n                setOpen(false);\n                item.onSelect?.();\n              }}\n            >\n              {item.label}\n            </DropdownItem>\n          ))}\n        </DropdownContent>\n      </Dropdown>\n    </div>\n  );\n}\n\nSplitButtonBase.displayName = \"SplitButton\";\n","// split-button.tsx — default static entry (no framer-motion)\nimport { SplitButtonBase } from \"./split-button-base\";\nimport type { SplitButtonProps } from \"./types\";\n\nexport const SplitButton = (props: SplitButtonProps) => {\n  return <SplitButtonBase {...props} />;\n};\n\nSplitButton.displayName = \"SplitButton\";\n"]}
+{"version":3,"sources":["../../src/ui/split-button/variants.ts","../../src/ui/split-button/split-button-base.tsx","../../src/ui/split-button/split-button.tsx"],"names":["jsx"],"mappings":"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","file":"split-button.mjs","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiSplitButtonContent,\n  zuiSplitButtonDropdown,\n  zuiSplitButtonFullWidth,\n  zuiSplitButtonGroup,\n  zuiSplitButtonItemDisabled,\n  zuiSplitButtonPrimary,\n  zuiSplitButtonRoot,\n  zuiSplitButtonTrigger,\n  zuiSplitButtonTriggerSizes,\n} from \"../../design-system\";\n\nexport const splitButtonRootVariants = cva(zuiSplitButtonRoot, {\n  variants: {\n    fullWidth: {\n      true: zuiSplitButtonFullWidth,\n    },\n  },\n});\nexport const splitButtonDropdownVariants = cva(zuiSplitButtonDropdown, {\n  variants: {\n    fullWidth: {\n      true: zuiSplitButtonFullWidth,\n    },\n  },\n});\nexport const splitButtonGroupVariants = cva(zuiSplitButtonGroup, {\n  variants: {\n    fullWidth: {\n      true: zuiSplitButtonFullWidth,\n    },\n  },\n});\nexport const splitButtonPrimaryVariants = cva(zuiSplitButtonPrimary);\nexport const splitButtonTriggerVariants = cva(zuiSplitButtonTrigger, {\n  variants: {\n    size: zuiSplitButtonTriggerSizes,\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\nexport const splitButtonContentVariants = cva(zuiSplitButtonContent);\nexport const splitButtonItemDisabledVariants = cva(zuiSplitButtonItemDisabled);\n","\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { FiChevronDown, FiLoader } from \"react-icons/fi\";\n\nimport {\n  Dropdown,\n  DropdownContent,\n  DropdownItem,\n  DropdownTrigger,\n} from \"../dropdown\";\nimport { buttonVariants } from \"../buttons\";\nimport { cn } from \"../../lib/utils\";\n\nimport type {\n  SplitButtonAppearance,\n  SplitButtonProps,\n  SplitButtonVariant,\n} from \"./types\";\nimport {\n  splitButtonContentVariants,\n  splitButtonDropdownVariants,\n  splitButtonGroupVariants,\n  splitButtonItemDisabledVariants,\n  splitButtonPrimaryVariants,\n  splitButtonRootVariants,\n  splitButtonTriggerVariants,\n} from \"./variants\";\n\nconst variantAppearanceMap = {\n  primary: \"default\",\n  secondary: \"secondary\",\n  outline: \"outline\",\n  ghost: \"ghost\",\n  danger: \"destructive\",\n  success: \"green\",\n} as const satisfies Record<SplitButtonVariant, SplitButtonAppearance>;\n\nfunction resolveAppearance({\n  appearance,\n  variant,\n}: {\n  appearance?: SplitButtonAppearance;\n  variant?: SplitButtonVariant;\n}) {\n  return appearance ?? (variant ? variantAppearanceMap[variant] : \"default\");\n}\n\nexport function SplitButtonBase({\n  label,\n  onClick,\n  items,\n  disabled = false,\n  loading = false,\n  appearance,\n  variant,\n  size = \"md\",\n  startIcon,\n  fullWidth = false,\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  triggerLabel,\n  triggerOn = \"click\",\n  className,\n  ref,\n  ...rest\n}: SplitButtonProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const isUnavailable = disabled || loading;\n  const resolvedAppearance = resolveAppearance({ appearance, variant });\n  const isControlled = controlledOpen !== undefined;\n  const open = isUnavailable\n    ? false\n    : isControlled\n      ? controlledOpen\n      : uncontrolledOpen;\n\n  const setOpen = (nextOpen: boolean) => {\n    if (isUnavailable && nextOpen) {\n      return;\n    }\n    if (!isControlled) {\n      setUncontrolledOpen(nextOpen);\n    }\n    onOpenChange?.(nextOpen);\n  };\n\n  const fullWidthFlag = fullWidth ? \"true\" : undefined;\n  const menuLabel = triggerLabel ?? `More ${label} actions`;\n\n  // Shared timeout ref for hover mode: delays close so the cursor can\n  // travel through the mt-2 gap between the button and the menu panel\n  // without dismissing the menu.\n  const hoverCloseRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const scheduleClose = () => {\n    cancelClose();\n    hoverCloseRef.current = setTimeout(() => setOpen(false), 120);\n  };\n\n  const cancelClose = () => {\n    if (hoverCloseRef.current !== null) {\n      clearTimeout(hoverCloseRef.current);\n      hoverCloseRef.current = null;\n    }\n  };\n\n  useEffect(() => cancelClose, []);\n\n  useEffect(() => {\n    if (isUnavailable && !isControlled) {\n      setUncontrolledOpen(false);\n      onOpenChange?.(false);\n    }\n  }, [isUnavailable, onOpenChange, isControlled]);\n\n  const dropdownHoverHandlers =\n    triggerOn === \"hover\"\n      ? {\n          onMouseEnter: () => {\n            cancelClose();\n            setOpen(true);\n          },\n          onMouseLeave: scheduleClose,\n        }\n      : undefined;\n\n  const contentHoverHandlers =\n    triggerOn === \"hover\"\n      ? { onMouseEnter: cancelClose, onMouseLeave: scheduleClose }\n      : undefined;\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"split-button\"\n      data-full-width={fullWidthFlag}\n      className={cn(splitButtonRootVariants({ fullWidth }), className)}\n      {...rest}\n    >\n      <Dropdown\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpenChange={setOpen}\n        data-full-width={fullWidthFlag}\n        className={splitButtonDropdownVariants({ fullWidth })}\n        {...dropdownHoverHandlers}\n      >\n        <div\n          data-slot=\"split-button-group\"\n          data-full-width={fullWidthFlag}\n          className={splitButtonGroupVariants({ fullWidth })}\n        >\n          <button\n            type=\"button\"\n            data-slot=\"split-button-primary\"\n            data-full-width={fullWidthFlag}\n            disabled={isUnavailable}\n            onClick={onClick}\n            className={cn(\n              buttonVariants({ appearance: resolvedAppearance, size }),\n              splitButtonPrimaryVariants(),\n            )}\n          >\n            {loading ? (\n              <FiLoader\n                aria-hidden\n                className=\"animate-spin\"\n                data-slot=\"split-button-spinner-icon\"\n              />\n            ) : (\n              startIcon\n            )}\n            <span>{label}</span>\n            {loading ? (\n              <span className=\"sr-only\" role=\"status\" aria-label=\"Loading\" />\n            ) : null}\n          </button>\n\n          <DropdownTrigger\n            aria-label={menuLabel}\n            disabled={isUnavailable}\n            className={cn(\n              buttonVariants({ appearance: resolvedAppearance, size }),\n              splitButtonTriggerVariants({ size }),\n            )}\n          >\n            <FiChevronDown aria-hidden />\n          </DropdownTrigger>\n        </div>\n\n        <DropdownContent\n          className={splitButtonContentVariants()}\n          placement=\"bottom\"\n          {...contentHoverHandlers}\n        >\n          {items.map((item) => (\n            <DropdownItem\n              key={item.id}\n              leftIcon={item.icon}\n              aria-disabled={item.disabled ? \"true\" : undefined}\n              className={\n                item.disabled ? splitButtonItemDisabledVariants() : undefined\n              }\n              onClick={(event) => {\n                if (item.disabled) {\n                  event.preventDefault();\n                  event.stopPropagation();\n                }\n              }}\n              onKeyDown={(event) => {\n                if (item.disabled) {\n                  event.preventDefault();\n                  event.stopPropagation();\n                }\n              }}\n              onSelect={() => {\n                setOpen(false);\n                item.onSelect?.();\n              }}\n            >\n              {item.label}\n            </DropdownItem>\n          ))}\n        </DropdownContent>\n      </Dropdown>\n    </div>\n  );\n}\n\nSplitButtonBase.displayName = \"SplitButton\";\n","// split-button.tsx — default static entry (no framer-motion)\nimport { SplitButtonBase } from \"./split-button-base\";\nimport type { SplitButtonProps } from \"./types\";\n\nexport const SplitButton = (props: SplitButtonProps) => {\n  return <SplitButtonBase {...props} />;\n};\n\nSplitButton.displayName = \"SplitButton\";\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zentauri-ui/zentauri-components",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "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",
   "keywords": [
     "react",
@@ -140,6 +140,7 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "^20.19.39",
+    "@types/qrcode": "^1.5.6",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@vitest/coverage-v8": "^4.1.4",
@@ -152,6 +153,8 @@
     "vitest": "^4.1.4"
   },
   "dependencies": {
-    "diff": "^9.0.0"
+    "diff": "^9.0.0",
+    "jsqr": "^1.4.0",
+    "qrcode": "^1.5.4"
   }
 }

package/src/design-system/index.ts

@@ -30,6 +30,8 @@ export * from "./pagination";
 export * from "./password-strength-meter";
 export * from "./popover";
 export * from "./progress";
+export * from "./qr-code";
+export * from "./qr-scanner";
 export * from "./rating";
 export * from "./radio-group";
 export * from "./scroll-area";

package/src/design-system/qr-code.ts

@@ -0,0 +1,13 @@
+export const zuiQrCodeBase = [
+  "inline-flex flex-col items-center gap-3 rounded-2xl border p-6",
+  "border-[color:var(--zui-qr-code-border,var(--zui-border,#0000001a))] dark:border-[color:var(--zui-qr-code-border-dark,var(--zui-border-dark,#ffffff1a))]",
+  "bg-[var(--zui-qr-code-bg,var(--zui-surface,oklch(98.4%_0.003_247.858)))] dark:bg-[var(--zui-qr-code-bg-dark,var(--zui-surface-dark,oklch(12.9%_0.042_264.695)))]",
+] as const;
+
+export const zuiQrCodeCanvasWrapper = [
+  "overflow-hidden rounded-xl",
+  "bg-[var(--zui-qr-code-canvas-bg,var(--zui-surface-muted,oklch(92.9%_0.013_255.508)))] dark:bg-[var(--zui-qr-code-canvas-bg-dark,var(--zui-surface-muted-dark,oklch(27.9%_0.041_260.031)))]",
+] as const;
+
+export const zuiQrCodeCaptionBase =
+  "text-xs text-center text-[color:var(--zui-qr-code-caption-fg,var(--zui-fg-muted,oklch(55.2%_0.046_257.417)))] dark:text-[color:var(--zui-qr-code-caption-fg-dark,var(--zui-fg-muted-dark,oklch(70.8%_0.015_256.243)))] max-w-full truncate px-2";

package/src/design-system/qr-scanner.ts

@@ -0,0 +1,32 @@
+export const zuiQrScannerBase = [
+  "relative overflow-hidden rounded-2xl",
+  "bg-[var(--zui-qr-scanner-bg,var(--zui-surface,oklch(98.4%_0.003_247.858)))] dark:bg-[var(--zui-qr-scanner-bg-dark,var(--zui-surface-dark,oklch(12.9%_0.042_264.695)))]",
+] as const;
+
+export const zuiQrScannerVideo = "block w-full h-full object-cover";
+
+export const zuiQrScannerOverlay = [
+  "absolute inset-0 flex flex-col items-center justify-center pointer-events-none",
+] as const;
+
+export const zuiQrScannerViewfinder = [
+  "size-48 rounded-2xl border-2",
+  "border-[var(--zui-qr-scanner-viewfinder-border,#ffffff80)]",
+  "shadow-[0_0_0_9999px_rgba(0,0,0,0.3)]",
+] as const;
+
+export const zuiQrScannerStatusBase = [
+  "absolute bottom-4 left-1/2 -translate-x-1/2 px-4 py-2 rounded-full text-xs font-medium",
+  "bg-[var(--zui-qr-scanner-status-bg,var(--zui-surface,oklch(98.4%_0.003_247.858)))] dark:bg-[var(--zui-qr-scanner-status-bg-dark,var(--zui-surface-dark,oklch(12.9%_0.042_264.695)))]",
+  "text-[color:var(--zui-qr-scanner-status-fg,var(--zui-fg-muted,oklch(55.2%_0.046_257.417)))] dark:text-[color:var(--zui-qr-scanner-status-fg-dark,var(--zui-fg-muted-dark,oklch(70.8%_0.015_256.243)))]",
+] as const;
+
+export const zuiQrScannerFallbackBase = [
+  "flex flex-col items-center justify-center gap-4 p-8 text-center",
+] as const;
+
+export const zuiQrScannerAppearances = {
+  default: "",
+  muted:
+    "bg-[var(--zui-qr-scanner-bg,var(--zui-surface-muted,oklch(92.9%_0.013_255.508)))] dark:bg-[var(--zui-qr-scanner-bg-dark,var(--zui-surface-muted-dark,oklch(27.9%_0.041_260.031)))]",
+} as const;

package/src/design-system/secret-reveal.ts

@@ -1,5 +1,5 @@
 export const zuiSecretRevealContainerBase =
-  "inline-flex items-center gap-2 rounded-xl border px-3 py-2";
+  "inline-flex items-center gap-2 rounded-xl border px-3 py-2 max-w-full min-w-0";
 
 export const zuiSecretRevealLabelBase = "font-medium";
 

package/src/ui/qr-code/animated/animations.ts

@@ -0,0 +1,51 @@
+import type { Transition, Variants } from "framer-motion";
+
+export type QrCodeAnimation =
+  | "none"
+  | "fade-in"
+  | "zoom-in"
+  | "slide-up"
+  | "rotate-in";
+
+export type QrCodeAnimationPresets = Record<
+  QrCodeAnimation,
+  { transition: Transition; variants: Variants }
+>;
+
+export const qrCodeAnimationPresets: QrCodeAnimationPresets = {
+  none: {
+    transition: { duration: 0 },
+    variants: {
+      initial: { opacity: 1 },
+      animate: { opacity: 1 },
+    },
+  },
+  "fade-in": {
+    transition: { duration: 0.3, ease: "easeOut" },
+    variants: {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+    },
+  },
+  "zoom-in": {
+    transition: { type: "spring", stiffness: 300, damping: 24 },
+    variants: {
+      initial: { opacity: 0, scale: 0.85 },
+      animate: { opacity: 1, scale: 1 },
+    },
+  },
+  "slide-up": {
+    transition: { type: "spring", stiffness: 280, damping: 22 },
+    variants: {
+      initial: { opacity: 0, y: 20 },
+      animate: { opacity: 1, y: 0 },
+    },
+  },
+  "rotate-in": {
+    transition: { type: "spring", stiffness: 200, damping: 18 },
+    variants: {
+      initial: { opacity: 0, rotate: -90, scale: 0.8 },
+      animate: { opacity: 1, rotate: 0, scale: 1 },
+    },
+  },
+};

package/src/ui/qr-code/animated/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { QrCodeAnimated } from "./qr-code-animated";
+export type { QrCodeAnimation, QrCodeAnimatedProps } from "./types";
+export { qrCodeAnimationPresets } from "./animations";

package/src/ui/qr-code/animated/qr-code-animated.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { motion } from "framer-motion";
+import QRCode from "qrcode";
+
+import { cn } from "../../../lib/utils";
+import { qrCodeAnimationPresets } from "./animations";
+import type { QrCodeAnimatedProps } from "./types";
+import { QrCodeBase } from "../qr-code-base";
+
+export function QrCodeAnimated({
+  animation = "none",
+  value,
+  canvasSize = 200,
+  level = "M",
+  bgColor = "#ffffff",
+  fgColor = "#000000",
+  margin = 2,
+  caption,
+  className,
+  ...props
+}: QrCodeAnimatedProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || animation === "none") return;
+
+    if (!value) {
+      const ctx = canvas.getContext("2d");
+      if (ctx) {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+      }
+      return;
+    }
+
+    QRCode.toCanvas(
+      canvas,
+      value,
+      {
+        width: canvasSize,
+        margin,
+        color: {
+          dark: fgColor,
+          light: bgColor,
+        },
+        errorCorrectionLevel: level,
+      },
+      (error) => {
+        if (error) {
+          console.error("QR Code generation error:", error);
+        }
+      },
+    );
+  }, [value, canvasSize, level, bgColor, fgColor, margin, animation]);
+
+  if (animation === "none") {
+    return (
+      <QrCodeBase
+        value={value}
+        canvasSize={canvasSize}
+        level={level}
+        bgColor={bgColor}
+        fgColor={fgColor}
+        margin={margin}
+        caption={caption}
+        className={className}
+        {...props}
+      />
+    );
+  }
+
+  const preset = qrCodeAnimationPresets[animation];
+
+  return (
+    <motion.div
+      data-slot="qr-code"
+      className={cn(
+        "inline-flex flex-col items-center gap-3 rounded-2xl border p-6 border-[color:var(--zui-qr-code-border,var(--zui-border,#0000001a))] dark:border-[color:var(--zui-qr-code-border-dark,var(--zui-border-dark,#ffffff1a))] bg-[var(--zui-qr-code-bg,var(--zui-surface,oklch(98.4%_0.003_247.858)))] dark:bg-[var(--zui-qr-code-bg-dark,var(--zui-surface-dark,oklch(12.9%_0.042_264.695)))]",
+        className,
+      )}
+      variants={preset.variants}
+      initial="initial"
+      animate="animate"
+      transition={preset.transition}
+      {...(props as Record<string, unknown>)}
+    >
+      <div className="overflow-hidden rounded-xl bg-[var(--zui-qr-code-canvas-bg,var(--zui-surface-muted,oklch(92.9%_0.013_255.508)))] dark:bg-[var(--zui-qr-code-canvas-bg-dark,var(--zui-surface-muted-dark,oklch(27.9%_0.041_260.031)))]">
+        <canvas
+          ref={canvasRef}
+          width={canvasSize}
+          height={canvasSize}
+          data-slot="qr-code-canvas"
+          className="block h-auto max-w-full"
+          aria-label={`QR code for ${value}`}
+        />
+      </div>
+      {caption ? (
+        <span
+          data-slot="qr-code-caption"
+          className="text-xs text-center text-[color:var(--zui-qr-code-caption-fg,var(--zui-fg-muted,oklch(55.2%_0.046_257.417)))] dark:text-[color:var(--zui-qr-code-caption-fg-dark,var(--zui-fg-muted-dark,oklch(70.8%_0.015_256.243)))] max-w-full truncate px-2"
+        >
+          {caption}
+        </span>
+      ) : null}
+    </motion.div>
+  );
+}
+
+QrCodeAnimated.displayName = "QrCodeAnimated";

package/src/ui/qr-code/animated/types.ts

@@ -0,0 +1,10 @@
+import type { Ref } from "react";
+import type { QrCodeBaseProps } from "../types";
+import type { QrCodeAnimation } from "./animations";
+
+export type { QrCodeAnimation };
+
+export type QrCodeAnimatedProps = QrCodeBaseProps & {
+  animation?: QrCodeAnimation;
+  ref?: Ref<HTMLDivElement>;
+};

package/src/ui/qr-code/index.ts

@@ -0,0 +1,10 @@
+"use client";
+
+export { QrCode } from "./qr-code";
+export type { QrCodeBaseProps, QrCodeLevel, QrCodeProps } from "./types";
+export { QR_CODE_LEVEL_LABELS } from "./types";
+export {
+  qrCodeCanvasWrapperVariants,
+  qrCodeCaptionVariants,
+  qrCodeVariants,
+} from "./variants";

package/src/ui/qr-code/qr-code-base.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import QRCode from "qrcode";
+
+import { cn } from "../../lib/utils";
+
+import type { QrCodeBaseProps } from "./types";
+import {
+  qrCodeCanvasWrapperVariants,
+  qrCodeCaptionVariants,
+  qrCodeVariants,
+} from "./variants";
+
+/**
+ * QrCodeBase renders a QR code onto a `<canvas>` element using the `qrcode`
+ * npm package. It is the static (non-animated) implementation of the public
+ * `QrCode` component.
+ *
+ * --- Props ---
+ *
+ * - `value` — The string to encode. When empty/falsy the canvas is cleared.
+ * - `canvasSize` — Pixel dimensions of the canvas (default: 200). Both width
+ *   and height are set to this value, producing a square QR code.
+ * - `level` — Error correction level (`"L"` | `"M"` | `"Q"` | `"H"`). Higher
+ *   levels survive more visual damage but hold less data.
+ * - `bgColor` / `fgColor` — Background and foreground colours passed to the
+ *   underlying `QRCode.toCanvas` options.
+ * - `margin` — Quiet-zone width in QR modules (default: 2). Passed directly
+ *   to the `qrcode` library.
+ * - `caption` — Optional label rendered below the QR code.
+ * - `ref` — React 19 ref forwarded to the root `<div>` element.
+ * - `className` / `...rest` — Spread onto the root `<div>` for layout or
+ *   style overrides.
+ *
+ * --- Rendering lifecycle ---
+ *
+ * A `useEffect` watches `[value, canvasSize, level, bgColor, fgColor, margin]`.
+ * On every change it:
+ *   1. Grabs the canvas element from the ref.
+ *   2. If `value` is empty, clears the canvas with `ctx.clearRect` so a stale
+ *      QR code doesn't persist.
+ *   3. Otherwise calls `QRCode.toCanvas()` which draws the QR pattern
+ *       asynchronously (via callback) onto the canvas element.
+ *
+ * The outer `<div>` uses design-system variants (`qrCodeVariants`) for
+ * consistent theming and carries `data-slot="qr-code"` for scoped styling and
+ * testing.
+ *
+ * --- Accessibility ---
+ *
+ * The `<canvas>` has an `aria-label` describing it as a "QR code for {value}".
+ * Screen readers will announce the purpose, though the raw value is exposed
+ * (consider truncating for secrets).
+ */
+export function QrCodeBase({
+  value,
+  canvasSize = 200,
+  level = "M",
+  bgColor = "#ffffff",
+  fgColor = "#000000",
+  margin = 2,
+  caption,
+  className,
+  ref,
+  ...rest
+}: QrCodeBaseProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  /**
+   * Draw the QR pattern whenever input props change.
+   *
+   * The conditional `if (!value)` branch handles the "clear" case: when the
+   * user deletes the input text, we clear the canvas so a stale QR code isn't
+   * displayed. Without this the old QR pattern persists because
+   * `QRCode.toCanvas` is never called (it returns early for empty values).
+   */
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    if (!value) {
+      const ctx = canvas.getContext("2d");
+      if (ctx) {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+      }
+      return;
+    }
+
+    QRCode.toCanvas(
+      canvas,
+      value,
+      {
+        width: canvasSize,
+        margin,
+        color: {
+          dark: fgColor,
+          light: bgColor,
+        },
+        errorCorrectionLevel: level,
+      },
+      (error) => {
+        if (error) {
+          console.error("QR Code generation error:", error);
+        }
+      },
+    );
+  }, [value, canvasSize, level, bgColor, fgColor, margin]);
+
+  /**
+   * The root element is a `<div>` (not the `<canvas>`) so consumers can apply
+   * layout classes, the caption sits outside the canvas, and the component
+   * plays well with flex/grid containers.
+   *
+   * Nested structure:
+   *   <div data-slot="qr-code">          ← root (ref, className, ...rest)
+   *     <div>                            ← canvas wrapper (theme rounding/overflow)
+   *       <canvas data-slot="qr-code-canvas" />
+   *     </div>
+   *     {caption && <span data-slot="qr-code-caption" />}
+   *   </div>
+   */
+  return (
+    <div
+      ref={ref}
+      data-slot="qr-code"
+      className={cn(qrCodeVariants(), className)}
+      {...rest}
+    >
+      <div className={qrCodeCanvasWrapperVariants()}>
+        <canvas
+          ref={canvasRef}
+          width={canvasSize}
+          height={canvasSize}
+          data-slot="qr-code-canvas"
+          className="block h-auto max-w-full"
+          aria-label={`QR code for ${value}`}
+        />
+      </div>
+      {caption ? (
+        <span data-slot="qr-code-caption" className={qrCodeCaptionVariants()}>
+          {caption}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+QrCodeBase.displayName = "QrCode";