@zentauri-ui/zentauri-components 2.2.2 → 2.3.1

package/README.md

@@ -29,14 +29,14 @@ Generated from the component package Vitest JSON report via `pnpm --filter @zent
 
 | Metric     | Result           |
 | ---------- | ---------------- |
-| Test files | 102 passed (102)   |
-| Tests      | 858 passed (858) |
+| Test files | 106 passed (106)   |
+| Tests      | 885 passed (885) |
 
 | Area                           | Test files | Tests |
 | ------------------------------ | ---------- | ----- |
-| Components and UI utilities    | 53         | 553   |
+| Components and UI utilities    | 56         | 574   |
 | Standalone animations          | 1          | 45    |
-| React hooks                    | 41         | 174   |
+| React hooks                    | 42         | 180   |
 | Design system facade           | 1          | 11    |
 | CLI and import rewriting       | 4          | 33    |
 | Accessibility (axe + keyboard) | 2          | 42    |
@@ -49,7 +49,7 @@ Generated from the component package Vitest JSON report via `pnpm --filter @zent
 | `src/ui/buttons/button.test.tsx`                                        |    44 |
 | `src/ui/inputs/input.test.tsx`                                          |    40 |
 | `src/ui/audio-player/audio-player.test.tsx`                             |    34 |
-| `src/ui/peer-isolation.test.ts`                                         |    32 |
+| `src/ui/peer-isolation.test.ts`                                         |    33 |
 | `src/accessibility/axe-core.test.tsx`                                   |    24 |
 | `src/ui/combobox/combobox.test.tsx`                                     |    24 |
 | `cli/cli.integration.test.ts`                                           |    21 |
@@ -73,6 +73,7 @@ Generated from the component package Vitest JSON report via `pnpm --filter @zent
 | `src/hooks/useLongPress/useLongPress.test.ts`                           |     9 |
 | `src/hooks/useTableFilter/useTableFilter.test.ts`                       |     9 |
 | `src/ui/animated-number/animated-number.test.tsx`                       |     9 |
+| `src/ui/hash-generator/hash-generator.test.tsx`                         |     9 |
 | `src/ui/secret-reveal/secret-reveal.test.tsx`                           |     9 |
 | `src/ui/skeleton/skeleton.test.tsx`                                     |     9 |
 | `src/ui/slider/slider.test.tsx`                                         |     9 |
@@ -97,6 +98,7 @@ Generated from the component package Vitest JSON report via `pnpm --filter @zent
 | `src/hooks/useClipboard/useClipboard.test.ts`                           |     6 |
 | `src/hooks/useCountdown/useCountdown.test.ts`                           |     6 |
 | `src/hooks/useGeolocation/useGeolocation.test.ts`                       |     6 |
+| `src/hooks/useHash/useHash.test.ts`                                     |     6 |
 | `src/hooks/useIdleTimeout/useIdleTimeout.test.ts`                       |     6 |
 | `src/hooks/useKeyPress/useKeyPress.test.ts`                             |     6 |
 | `src/hooks/useLocalStorage/useLocalStorage.test.ts`                     |     6 |
@@ -106,6 +108,7 @@ Generated from the component package Vitest JSON report via `pnpm --filter @zent
 | `src/ui/divider/divider.test.tsx`                                       |     6 |
 | `src/ui/dropdown/dropdown.test.tsx`                                     |     6 |
 | `src/ui/empty-state/empty-state.test.tsx`                               |     6 |
+| `src/ui/qr-code/qr-code.test.tsx`                                       |     6 |
 | `src/ui/search/filter-search-suggestions.test.ts`                       |     6 |
 | `src/ui/toast/toast.test.tsx`                                           |     6 |
 | `src/hooks/useCookie/useCookie.test.ts`                                 |     5 |
@@ -114,6 +117,7 @@ Generated from the component package Vitest JSON report via `pnpm --filter @zent
 | `src/hooks/useScrollPosition/useScrollPosition.test.ts`                 |     5 |
 | `src/hooks/useTimeout/useTimeout.test.ts`                               |     5 |
 | `src/ui/popover/popover.test.tsx`                                       |     5 |
+| `src/ui/qr-scanner/qr-scanner.test.tsx`                                 |     5 |
 | `src/ui/radio-group/radio-group.test.tsx`                               |     5 |
 | `src/ui/toggle/toggle.test.tsx`                                         |     5 |
 | `cli/index.test.ts`                                                     |     4 |
@@ -858,7 +862,7 @@ From this package directory in the monorepo:
 
 - `pnpm build` (or `npm run build`) — production bundle via `tsup` (Rollup treeshake + `scripts/prepend-use-client.mjs` via `onSuccess` so each UI entry under `dist/ui/`, animation entry under `dist/animations/`, chart entry under `dist/charts/`, and `dist/ui/<name>/animated.*` starts with `"use client"` where needed)
 - `pnpm dev` — `tsup` watch mode (same `onSuccess` hook after each rebuild)
-- `pnpm test` / `pnpm test:watch` — **Vitest** and **Testing Library** unit tests // currently covered 858 test cases in total
+- `pnpm test` / `pnpm test:watch` — **Vitest** and **Testing Library** unit tests // currently covered 885 test cases in total
 - `pnpm test:a11y` — focused accessibility coverage for package-level UI primitives and compound components: **axe-core** audits for every interactive component plus **keyboard-interaction** tests (focus order, arrow-key nav, Home/End, Escape/Enter) for the compound components
 - `pnpm check:tokens` — enforce the `--zui-*` token contract across design-system, variant, and local custom-property usage without generating a large checked-in token catalog
 - **`pnpm run generate:registry`** — runs `scripts/generate-registry.mjs`, which reads **`uiComponentNames`**, **`uiAnimatedComponentNames`**, **`animationEntryNames`**, **`chartEntryNames`**, and **`hooksEntryNames`** from `tsup.config.ts`, applies fixed **`nameAliases`**, scans each component/chart source to build **`peerHints`**, and writes **`cli/registry.json`** (`components` + `animations` + `hooks` + `peerHints`). Run this after adding or renaming UI, animation, chart, or hook entries so the CLI stays in sync (the script prints counts).

package/cli/props.json

@@ -7257,6 +7257,146 @@
         }
       ]
     },
+    "hash-generator": {
+      "slug": "hash-generator",
+      "subcomponents": [
+        {
+          "name": "static:HashGenerator",
+          "displayName": "HashGenerator",
+          "propsType": "HashGeneratorProps",
+          "source": "static",
+          "props": [
+            {
+              "name": "appearance",
+              "type": "enum",
+              "required": false,
+              "default": "default",
+              "group": "variant",
+              "isVariant": true,
+              "options": [
+                "default"
+              ],
+              "variantGroup": "appearance",
+              "deprecated": false
+            },
+            {
+              "name": "size",
+              "type": "enum",
+              "required": false,
+              "default": "md",
+              "group": "variant",
+              "isVariant": true,
+              "options": [
+                "lg",
+                "md",
+                "sm"
+              ],
+              "variantGroup": "size",
+              "deprecated": false
+            },
+            {
+              "name": "onValueChange",
+              "type": "((value: string) => void) | undefined",
+              "required": false,
+              "group": "controlled",
+              "deprecated": false
+            },
+            {
+              "name": "value",
+              "type": "string | undefined",
+              "required": false,
+              "group": "controlled",
+              "deprecated": false
+            },
+            {
+              "name": "algorithm",
+              "type": "HashGeneratorAlgorithm | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "readOnly",
+              "type": "boolean | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "showCopyButton",
+              "type": "boolean | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "children",
+              "type": "ReactNode",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            },
+            {
+              "name": "className",
+              "type": "string | undefined",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            },
+            {
+              "name": "id",
+              "type": "string | undefined",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            },
+            {
+              "name": "onClick",
+              "type": "MouseEventHandler<HTMLDivElement> | undefined",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            },
+            {
+              "name": "style",
+              "type": "CSSProperties | undefined",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            },
+            {
+              "name": "title",
+              "type": "string | undefined",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            }
+          ]
+        },
+        {
+          "name": "static:HashGeneratorVariant",
+          "displayName": "HashGeneratorVariant",
+          "propsType": "HashGeneratorVariantProps",
+          "source": "static",
+          "props": [
+            {
+              "name": "appearance",
+              "type": "'default' | null | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "size",
+              "type": "'md' | 'sm' | 'lg' | null | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            }
+          ]
+        }
+      ]
+    },
     "inputs": {
       "slug": "inputs",
       "subcomponents": [
@@ -10041,6 +10181,392 @@
         }
       ]
     },
+    "qr-code": {
+      "slug": "qr-code",
+      "subcomponents": [
+        {
+          "name": "static:QrCode",
+          "displayName": "QrCode",
+          "propsType": "QrCodeProps",
+          "source": "static",
+          "props": [
+            {
+              "name": "value",
+              "type": "string",
+              "required": true,
+              "group": "controlled",
+              "deprecated": false
+            },
+            {
+              "name": "bgColor",
+              "type": "string | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "canvasSize",
+              "type": "number | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "caption",
+              "type": "ReactNode",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "fgColor",
+              "type": "string | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "level",
+              "type": "QrCodeLevel | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "margin",
+              "type": "number | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "children",
+              "type": "ReactNode",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            },
+            {
+              "name": "className",
+              "type": "string | undefined",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            },
+            {
+              "name": "id",
+              "type": "string | undefined",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            },
+            {
+              "name": "onClick",
+              "type": "MouseEventHandler<HTMLDivElement> | undefined",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            },
+            {
+              "name": "style",
+              "type": "CSSProperties | undefined",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            },
+            {
+              "name": "title",
+              "type": "string | undefined",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            }
+          ]
+        },
+        {
+          "name": "animated:QrCodeAnimated",
+          "displayName": "QrCodeAnimated",
+          "propsType": "QrCodeAnimatedProps",
+          "source": "animated",
+          "props": [
+            {
+              "name": "value",
+              "type": "string",
+              "required": true,
+              "group": "controlled",
+              "deprecated": false
+            },
+            {
+              "name": "animation",
+              "type": "QrCodeAnimation | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "bgColor",
+              "type": "string | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "canvasSize",
+              "type": "number | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "caption",
+              "type": "ReactNode",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "fgColor",
+              "type": "string | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "level",
+              "type": "QrCodeLevel | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "margin",
+              "type": "number | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "ref",
+              "type": "Ref<HTMLDivElement> | undefined",
+              "required": false,
+              "group": "behavior",
+              "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).",
+              "deprecated": false
+            },
+            {
+              "name": "children",
+              "type": "ReactNode",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            },
+            {
+              "name": "className",
+              "type": "string | undefined",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            },
+            {
+              "name": "id",
+              "type": "string | undefined",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            },
+            {
+              "name": "onClick",
+              "type": "MouseEventHandler<HTMLDivElement> | undefined",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            },
+            {
+              "name": "style",
+              "type": "CSSProperties | undefined",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            },
+            {
+              "name": "title",
+              "type": "string | undefined",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            }
+          ]
+        }
+      ]
+    },
+    "qr-scanner": {
+      "slug": "qr-scanner",
+      "subcomponents": [
+        {
+          "name": "static:QrScanner",
+          "displayName": "QrScanner",
+          "propsType": "QrScannerProps",
+          "source": "static",
+          "props": [
+            {
+              "name": "appearance",
+              "type": "enum",
+              "required": false,
+              "default": "default",
+              "group": "variant",
+              "isVariant": true,
+              "options": [
+                "default",
+                "muted"
+              ],
+              "variantGroup": "appearance",
+              "deprecated": false
+            },
+            {
+              "name": "autoStart",
+              "type": "boolean | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "constraints",
+              "type": "MediaTrackConstraints | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "continuous",
+              "type": "boolean | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "facingMode",
+              "type": "'user' | 'environment' | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "fallbackText",
+              "type": "ReactNode",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "loadingText",
+              "type": "ReactNode",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "noCameraText",
+              "type": "ReactNode",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "onError",
+              "type": "((error: unknown) => void) | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "onResult",
+              "type": "(data: string) => void",
+              "required": true,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "onStart",
+              "type": "(() => void) | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "onStop",
+              "type": "(() => void) | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "scanDelay",
+              "type": "number | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "children",
+              "type": "ReactNode",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            },
+            {
+              "name": "className",
+              "type": "string | undefined",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            },
+            {
+              "name": "id",
+              "type": "string | undefined",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            },
+            {
+              "name": "onClick",
+              "type": "MouseEventHandler<HTMLDivElement> | undefined",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            },
+            {
+              "name": "style",
+              "type": "CSSProperties | undefined",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            },
+            {
+              "name": "title",
+              "type": "string | undefined",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            }
+          ]
+        },
+        {
+          "name": "static:QrScannerVariant",
+          "displayName": "QrScannerVariant",
+          "propsType": "QrScannerVariantProps",
+          "source": "static",
+          "props": [
+            {
+              "name": "appearance",
+              "type": "'default' | 'muted' | null | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            }
+          ]
+        }
+      ]
+    },
     "radio-group": {
       "slug": "radio-group",
       "subcomponents": [

package/cli/registry.json

@@ -24,6 +24,7 @@
     "dynamic-stepper",
     "empty-state",
     "file-upload",
+    "hash-generator",
     "inputs",
     "kbd",
     "marquee",
@@ -33,6 +34,8 @@
     "password-strength-meter",
     "popover",
     "progress",
+    "qr-code",
+    "qr-scanner",
     "radio-group",
     "rating",
     "scroll-area",
@@ -71,6 +74,7 @@
     "password-strength-meter",
     "popover",
     "progress",
+    "qr-code",
     "radio-group",
     "secret-reveal",
     "skeleton",
@@ -168,6 +172,7 @@
     "dynamic-stepper",
     "empty-state",
     "file-upload",
+    "hash-generator",
     "inputs",
     "kbd",
     "marquee",
@@ -177,6 +182,8 @@
     "password-strength-meter",
     "popover",
     "progress",
+    "qr-code",
+    "qr-scanner",
     "radio-group",
     "rating",
     "scroll-area",
@@ -254,6 +261,7 @@
     "useEventListener",
     "useFocusManagement",
     "useGeolocation",
+    "useHash",
     "useHotkeys",
     "useHover",
     "useIdleTimeout",
@@ -372,6 +380,9 @@
     "progress": [
       "framer-motion"
     ],
+    "qr-code": [
+      "framer-motion"
+    ],
     "radio-group": [
       "framer-motion"
     ],

package/dist/chunk-4U6PVVST.mjs

@@ -0,0 +1,15 @@
+// src/design-system/qr-code.ts
+var 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)))]"
+];
+var 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)))]"
+];
+var 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";
+
+export { zuiQrCodeBase, zuiQrCodeCanvasWrapper, zuiQrCodeCaptionBase };
+//# sourceMappingURL=chunk-4U6PVVST.mjs.map
+//# sourceMappingURL=chunk-4U6PVVST.mjs.map

package/dist/chunk-4U6PVVST.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/design-system/qr-code.ts"],"names":[],"mappings":";AAAO,IAAM,aAAA,GAAgB;AAAA,EAC3B,gEAAA;AAAA,EACA,0JAAA;AAAA,EACA;AACF;AAEO,IAAM,sBAAA,GAAyB;AAAA,EACpC,4BAAA;AAAA,EACA;AACF;AAEO,IAAM,oBAAA,GACX","file":"chunk-4U6PVVST.mjs","sourcesContent":["export const zuiQrCodeBase = [\n  \"inline-flex flex-col items-center gap-3 rounded-2xl border p-6\",\n  \"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))]\",\n  \"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)))]\",\n] as const;\n\nexport const zuiQrCodeCanvasWrapper = [\n  \"overflow-hidden rounded-xl\",\n  \"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)))]\",\n] as const;\n\nexport const zuiQrCodeCaptionBase =\n  \"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\";\n"]}