@zentauri-ui/zentauri-components 1.7.8 → 1.7.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/README.md +6 -4
  2. package/cli/registry.json +1 -0
  3. package/dist/design-system/index.d.ts +1 -0
  4. package/dist/design-system/index.d.ts.map +1 -1
  5. package/dist/design-system/marquee.d.ts +40 -0
  6. package/dist/design-system/marquee.d.ts.map +1 -0
  7. package/dist/ui/marquee/index.d.ts +4 -0
  8. package/dist/ui/marquee/index.d.ts.map +1 -0
  9. package/dist/ui/marquee/marquee.d.ts +6 -0
  10. package/dist/ui/marquee/marquee.d.ts.map +1 -0
  11. package/dist/ui/marquee/types.d.ts +15 -0
  12. package/dist/ui/marquee/types.d.ts.map +1 -0
  13. package/dist/ui/marquee/variants.d.ts +7 -0
  14. package/dist/ui/marquee/variants.d.ts.map +1 -0
  15. package/dist/ui/marquee.js +171 -0
  16. package/dist/ui/marquee.js.map +1 -0
  17. package/dist/ui/marquee.mjs +168 -0
  18. package/dist/ui/marquee.mjs.map +1 -0
  19. package/package.json +1 -1
  20. package/src/design-system/index.ts +1 -0
  21. package/src/design-system/marquee.ts +62 -0
  22. package/src/ui/marquee/index.ts +9 -0
  23. package/src/ui/marquee/marquee.test.tsx +138 -0
  24. package/src/ui/marquee/marquee.tsx +114 -0
  25. package/src/ui/marquee/types.ts +19 -0
  26. package/src/ui/marquee/variants.ts +24 -0
package/README.md CHANGED
@@ -15,12 +15,12 @@ Published artifacts live under `dist/`. Imports use **per-entry subpaths**: `@ze
15
15
 
16
16
  | Metric | Result |
17
17
  | ---------- | ---------------- |
18
- | Test files | 64 passed (64) |
19
- | Tests | 420 passed (420) |
18
+ | Test files | 65 passed (65) |
19
+ | Tests | 429 passed (429) |
20
20
 
21
21
  | Area | Test files | Tests |
22
22
  | --------------------------- | ---------- | ----- |
23
- | Components and UI utilities | 36 | 326 |
23
+ | Components and UI utilities | 37 | 335 |
24
24
  | React hooks | 26 | 85 |
25
25
  | CLI and import rewriting | 2 | 9 |
26
26
 
@@ -35,6 +35,7 @@ Published artifacts live under `dist/`. Imports use **per-entry subpaths**: `@ze
35
35
  | `cli/cli.integration.test.ts` | 4 |
36
36
  | `src/ui/buttons/button.test.tsx` | 41 |
37
37
  | `src/ui/inputs/input.test.tsx` | 40 |
38
+ | `src/ui/marquee/marquee.test.tsx` | 9 |
38
39
  | `src/ui/otp-input/otp-input.test.tsx` | 10 |
39
40
  | `src/ui/tree-view/tree-view.test.tsx` | 10 |
40
41
  | `src/ui/card/card.test.tsx` | 7 |
@@ -147,6 +148,7 @@ Import static primitives from `@zentauri-ui/zentauri-components/ui/<subpath>` wh
147
148
  | Empty state | `empty-state` | `empty-state/animated` |
148
149
  | File upload | `file-upload` | — |
149
150
  | Input | `inputs` | `inputs/animated` |
151
+ | Marquee | `marquee` | — |
150
152
  | Modal | `modal` | `modal/animated` |
151
153
  | OTP input | `otp-input` | — |
152
154
  | Pagination | `pagination` | — |
@@ -669,7 +671,7 @@ From this package directory in the monorepo:
669
671
 
670
672
  - `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/`, the chart entry under `dist/charts/`, and `dist/ui/<name>/animated.*` starts with `"use client"` where needed)
671
673
  - `pnpm dev` — `tsup` watch mode (same `onSuccess` hook after each rebuild)
672
- - `pnpm test` / `pnpm test:watch` — **Vitest** and **Testing Library** unit tests // covered 420 test cases in total
674
+ - `pnpm test` / `pnpm test:watch` — **Vitest** and **Testing Library** unit tests // covered 429 test cases in total
673
675
  - **`pnpm run generate:registry`** — runs `scripts/generate-registry.mjs`, which reads **`uiComponentNames`**, **`chartEntryNames`**, and **`hooksEntryNames`** from `tsup.config.ts`, merges in **`spinner`**, applies fixed **`nameAliases`**, and writes **`cli/registry.json`** (`components` + `hooks`). Run this after adding or renaming UI/chart areas or hook entries so the CLI stays in sync (the script prints counts).
674
676
 
675
677
  ## Github Release log
package/cli/registry.json CHANGED
@@ -24,6 +24,7 @@
24
24
  "empty-state",
25
25
  "file-upload",
26
26
  "inputs",
27
+ "marquee",
27
28
  "modal",
28
29
  "otp-input",
29
30
  "pagination",
package/dist/design-system/index.d.ts CHANGED
@@ -15,6 +15,7 @@ export * from "./dynamic-stepper";
15
15
  export * from "./empty-state";
16
16
  export * from "./file-upload";
17
17
  export * from "./inputs";
18
+ export * from "./marquee";
18
19
  export * from "./modal";
19
20
  export * from "./otp-input";
20
21
  export * from "./pagination";
package/dist/design-system/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/design-system/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/design-system/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}
package/dist/design-system/marquee.d.ts ADDED
@@ -0,0 +1,40 @@
1
+ export declare const zuiMarqueeBase = "group/marquee relative isolate flex min-w-0 overflow-hidden rounded-xl border border-transparent bg-[var(--zui-marquee-bg,transparent)] text-[color:var(--zui-marquee-fg,inherit)] [--zui-marquee-gap:1rem]";
2
+ export declare const zuiMarqueeAppearances: {
3
+ readonly default: "[--zui-marquee-bg:transparent] [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:[--zui-marquee-fg:#ffffff]";
4
+ readonly outline: "border-[color:var(--zui-marquee-outline-border,oklch(86.9%_0.022_252.894))] [--zui-marquee-bg:#ffffff] [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:border-[color:var(--zui-marquee-outline-border-dark,oklch(37.2%_0.044_257.287))] dark:[--zui-marquee-bg:oklch(20.8%_0.042_265.755)] dark:[--zui-marquee-fg:#ffffff]";
5
+ readonly ghost: "[--zui-marquee-bg:transparent] [--zui-marquee-fg:oklch(27.9%_0.041_260.031)] dark:[--zui-marquee-fg:oklch(96.8%_0.007_247.896)]";
6
+ readonly card: "border-[color:var(--zui-marquee-card-border,oklch(92.9%_0.013_255.508))] bg-[var(--zui-marquee-card-bg,#ffffff)] shadow-sm shadow-slate-950/5 [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:border-[color:var(--zui-marquee-card-border-dark,oklch(37.2%_0.044_257.287))] dark:bg-[var(--zui-marquee-card-bg-dark,oklch(20.8%_0.042_265.755_/_0.9))] dark:shadow-black/20 dark:[--zui-marquee-fg:#ffffff]";
7
+ readonly separated: "border-y border-x-0 rounded-none border-[color:var(--zui-marquee-separated-border,oklch(86.9%_0.022_252.894))] [--zui-marquee-bg:transparent] [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:border-[color:var(--zui-marquee-separated-border-dark,oklch(37.2%_0.044_257.287))] dark:[--zui-marquee-fg:#ffffff]";
8
+ readonly sky: "border-[color:var(--zui-marquee-sky-border,oklch(62.3%_0.214_259.815_/_0.28))] [--zui-marquee-bg:oklch(97.7%_0.013_236.62)] [--zui-marquee-fg:oklch(39.1%_0.09_240.876)] dark:border-[color:var(--zui-marquee-sky-border-dark,oklch(70.7%_0.165_254.624_/_0.3))] dark:[--zui-marquee-bg:oklch(39.1%_0.09_240.876_/_0.28)] dark:[--zui-marquee-fg:oklch(95.1%_0.026_236.824)]";
9
+ readonly rose: "border-[color:var(--zui-marquee-rose-border,oklch(58.6%_0.253_17.585_/_0.24))] [--zui-marquee-bg:oklch(96.9%_0.015_12.422)] [--zui-marquee-fg:oklch(41%_0.159_10.272)] dark:border-[color:var(--zui-marquee-rose-border-dark,oklch(71.2%_0.194_13.428_/_0.3))] dark:[--zui-marquee-bg:oklch(41%_0.159_10.272_/_0.28)] dark:[--zui-marquee-fg:oklch(94.1%_0.03_12.58)]";
10
+ readonly purple: "border-[color:var(--zui-marquee-purple-border,oklch(62.7%_0.265_303.9_/_0.24))] [--zui-marquee-bg:oklch(97.7%_0.014_308.299)] [--zui-marquee-fg:oklch(38.1%_0.176_304.987)] dark:border-[color:var(--zui-marquee-purple-border-dark,oklch(71.4%_0.203_305.504_/_0.3))] dark:[--zui-marquee-bg:oklch(38.1%_0.176_304.987_/_0.28)] dark:[--zui-marquee-fg:oklch(94.6%_0.033_307.174)]";
11
+ readonly pink: "border-[color:var(--zui-marquee-pink-border,oklch(65.6%_0.241_354.308_/_0.24))] [--zui-marquee-bg:oklch(97.1%_0.014_343.198)] [--zui-marquee-fg:oklch(40.8%_0.153_2.432)] dark:border-[color:var(--zui-marquee-pink-border-dark,oklch(71.8%_0.202_349.761_/_0.3))] dark:[--zui-marquee-bg:oklch(40.8%_0.153_2.432_/_0.28)] dark:[--zui-marquee-fg:oklch(94.8%_0.028_342.258)]";
12
+ readonly orange: "border-[color:var(--zui-marquee-orange-border,oklch(70.5%_0.213_47.604_/_0.26))] [--zui-marquee-bg:oklch(98%_0.016_73.684)] [--zui-marquee-fg:oklch(40.8%_0.123_38.172)] dark:border-[color:var(--zui-marquee-orange-border-dark,oklch(75%_0.183_55.934_/_0.32))] dark:[--zui-marquee-bg:oklch(40.8%_0.123_38.172_/_0.28)] dark:[--zui-marquee-fg:oklch(95.4%_0.038_75.164)]";
13
+ readonly yellow: "border-[color:var(--zui-marquee-yellow-border,oklch(79.5%_0.184_86.047_/_0.3))] [--zui-marquee-bg:oklch(98.7%_0.026_102.212)] [--zui-marquee-fg:oklch(42.1%_0.095_57.708)] dark:border-[color:var(--zui-marquee-yellow-border-dark,oklch(85.2%_0.199_91.936_/_0.32))] dark:[--zui-marquee-bg:oklch(42.1%_0.095_57.708_/_0.28)] dark:[--zui-marquee-fg:oklch(97.3%_0.071_103.193)]";
14
+ readonly teal: "border-[color:var(--zui-marquee-teal-border,oklch(70.4%_0.14_182.503_/_0.28))] [--zui-marquee-bg:oklch(98.4%_0.014_180.72)] [--zui-marquee-fg:oklch(38.6%_0.063_188.416)] dark:border-[color:var(--zui-marquee-teal-border-dark,oklch(77.7%_0.152_181.912_/_0.32))] dark:[--zui-marquee-bg:oklch(38.6%_0.063_188.416_/_0.28)] dark:[--zui-marquee-fg:oklch(95.3%_0.051_180.801)]";
15
+ readonly indigo: "border-[color:var(--zui-marquee-indigo-border,oklch(58.5%_0.233_277.117_/_0.24))] [--zui-marquee-bg:oklch(96.2%_0.018_272.314)] [--zui-marquee-fg:oklch(35.9%_0.144_278.697)] dark:border-[color:var(--zui-marquee-indigo-border-dark,oklch(67.3%_0.182_276.935_/_0.32))] dark:[--zui-marquee-bg:oklch(35.9%_0.144_278.697_/_0.28)] dark:[--zui-marquee-fg:oklch(93%_0.034_272.788)]";
16
+ readonly emerald: "border-[color:var(--zui-marquee-emerald-border,oklch(69.6%_0.17_162.48_/_0.28))] [--zui-marquee-bg:oklch(97.9%_0.021_166.113)] [--zui-marquee-fg:oklch(37.8%_0.077_168.94)] dark:border-[color:var(--zui-marquee-emerald-border-dark,oklch(76.5%_0.177_163.223_/_0.32))] dark:[--zui-marquee-bg:oklch(37.8%_0.077_168.94_/_0.28)] dark:[--zui-marquee-fg:oklch(95%_0.052_163.051)]";
17
+ readonly "gradient-blue": "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-blue-from,oklch(62.3%_0.214_259.815))] to-[var(--zui-marquee-gradient-blue-to,oklch(54.6%_0.245_262.881))] [--zui-marquee-fg:#ffffff]";
18
+ readonly "gradient-green": "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-green-from,oklch(72.3%_0.219_149.579))] to-[var(--zui-marquee-gradient-green-to,oklch(62.7%_0.194_149.214))] [--zui-marquee-fg:#ffffff]";
19
+ readonly "gradient-red": "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-red-from,oklch(63.7%_0.237_25.331))] to-[var(--zui-marquee-gradient-red-to,oklch(57.7%_0.245_27.325))] [--zui-marquee-fg:#ffffff]";
20
+ readonly "gradient-yellow": "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-yellow-from,oklch(85.2%_0.199_91.936))] to-[var(--zui-marquee-gradient-yellow-to,oklch(79.5%_0.184_86.047))] [--zui-marquee-fg:oklch(27.9%_0.077_45.635)]";
21
+ readonly "gradient-purple": "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-purple-from,oklch(71.4%_0.203_305.504))] to-[var(--zui-marquee-gradient-purple-to,oklch(62.7%_0.265_303.9))] [--zui-marquee-fg:#ffffff]";
22
+ readonly "gradient-teal": "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-teal-from,oklch(77.7%_0.152_181.912))] to-[var(--zui-marquee-gradient-teal-to,oklch(70.4%_0.14_182.503))] [--zui-marquee-fg:#ffffff]";
23
+ readonly "gradient-indigo": "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-indigo-from,oklch(67.3%_0.182_276.935))] to-[var(--zui-marquee-gradient-indigo-to,oklch(58.5%_0.233_277.117))] [--zui-marquee-fg:#ffffff]";
24
+ readonly "gradient-pink": "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-pink-from,oklch(71.8%_0.202_349.761))] to-[var(--zui-marquee-gradient-pink-to,oklch(65.6%_0.241_354.308))] [--zui-marquee-fg:#ffffff]";
25
+ readonly "gradient-orange": "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-orange-from,oklch(75%_0.183_55.934))] to-[var(--zui-marquee-gradient-orange-to,oklch(70.5%_0.213_47.604))] [--zui-marquee-fg:#ffffff]";
26
+ };
27
+ export declare const zuiMarqueeOrientations: {
28
+ readonly horizontal: "w-full flex-row";
29
+ readonly vertical: "h-64 flex-col";
30
+ };
31
+ export declare const zuiMarqueeSizes: {
32
+ readonly sm: "p-2 text-xs";
33
+ readonly md: "p-3 text-sm";
34
+ readonly lg: "p-4 text-base";
35
+ };
36
+ export declare const zuiMarqueeFade: {
37
+ readonly false: "";
38
+ readonly true: "[mask-image:linear-gradient(to_right,transparent,black_12%,black_88%,transparent)] data-[orientation=vertical]:[mask-image:linear-gradient(to_bottom,transparent,black_12%,black_88%,transparent)]";
39
+ };
40
+ //# sourceMappingURL=marquee.d.ts.map
package/dist/design-system/marquee.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"marquee.d.ts","sourceRoot":"","sources":["../../src/design-system/marquee.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,gNACoL,CAAC;AAEhN,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;CA0CxB,CAAC;AAEX,eAAO,MAAM,sBAAsB;;;CAGzB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;CAIlB,CAAC;AAEX,eAAO,MAAM,cAAc;;;CAGjB,CAAC"}
package/dist/ui/marquee/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export { Marquee } from "./marquee";
2
+ export type { MarqueeDirection, MarqueeProps, MarqueeVariantProps, } from "./types";
3
+ export { marqueeVariants } from "./variants";
4
+ //# sourceMappingURL=index.d.ts.map
package/dist/ui/marquee/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/marquee/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EACV,gBAAgB,EAChB,YAAY,EACZ,mBAAmB,GACpB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC"}
package/dist/ui/marquee/marquee.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import type { MarqueeProps } from "./types";
2
+ export declare function Marquee(props: MarqueeProps): import("react/jsx-runtime").JSX.Element;
3
+ export declare namespace Marquee {
4
+ var displayName: string;
5
+ }
6
+ //# sourceMappingURL=marquee.d.ts.map
package/dist/ui/marquee/marquee.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"marquee.d.ts","sourceRoot":"","sources":["../../../src/ui/marquee/marquee.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAY5C,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,2CA6F1C;yBA7Fe,OAAO"}
package/dist/ui/marquee/types.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import type { VariantProps } from "class-variance-authority";
2
+ import type { ComponentPropsWithRef, ReactNode } from "react";
3
+ import type { marqueeVariants } from "./variants";
4
+ export type MarqueeVariantProps = VariantProps<typeof marqueeVariants>;
5
+ export type MarqueeDirection = "left" | "right" | "up" | "down";
6
+ export type MarqueeProps = MarqueeVariantProps & Omit<ComponentPropsWithRef<"div">, "children"> & {
7
+ children: ReactNode;
8
+ direction?: MarqueeDirection;
9
+ gap?: number | string;
10
+ pauseOnHover?: boolean;
11
+ speed?: number;
12
+ trackClassName?: string;
13
+ itemClassName?: string;
14
+ };
15
+ //# sourceMappingURL=types.d.ts.map
package/dist/ui/marquee/types.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/ui/marquee/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAElD,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AAEvE,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,CAAC;AAEhE,MAAM,MAAM,YAAY,GAAG,mBAAmB,GAC5C,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC/C,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC"}
package/dist/ui/marquee/variants.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ export declare const marqueeVariants: (props?: ({
2
+ appearance?: "default" | "outline" | "sky" | "emerald" | "rose" | "indigo" | "orange" | "pink" | "purple" | "teal" | "yellow" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "ghost" | "card" | "separated" | null | undefined;
3
+ fade?: boolean | null | undefined;
4
+ orientation?: "horizontal" | "vertical" | null | undefined;
5
+ size?: "md" | "sm" | "lg" | null | undefined;
6
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
7
+ //# sourceMappingURL=variants.d.ts.map
package/dist/ui/marquee/variants.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/ui/marquee/variants.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,eAAe;;;;;8EAa1B,CAAC"}
package/dist/ui/marquee.js ADDED
@@ -0,0 +1,171 @@
1
+ "use client";
2
+ 'use strict';
3
+
4
+ var chunkZS5756ZC_js = require('../chunk-ZS5756ZC.js');
5
+ var classVarianceAuthority = require('class-variance-authority');
6
+ var jsxRuntime = require('react/jsx-runtime');
7
+
8
+ // src/design-system/marquee.ts
9
+ var zuiMarqueeBase = "group/marquee relative isolate flex min-w-0 overflow-hidden rounded-xl border border-transparent bg-[var(--zui-marquee-bg,transparent)] text-[color:var(--zui-marquee-fg,inherit)] [--zui-marquee-gap:1rem]";
10
+ var zuiMarqueeAppearances = {
11
+ default: "[--zui-marquee-bg:transparent] [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:[--zui-marquee-fg:#ffffff]",
12
+ outline: "border-[color:var(--zui-marquee-outline-border,oklch(86.9%_0.022_252.894))] [--zui-marquee-bg:#ffffff] [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:border-[color:var(--zui-marquee-outline-border-dark,oklch(37.2%_0.044_257.287))] dark:[--zui-marquee-bg:oklch(20.8%_0.042_265.755)] dark:[--zui-marquee-fg:#ffffff]",
13
+ ghost: "[--zui-marquee-bg:transparent] [--zui-marquee-fg:oklch(27.9%_0.041_260.031)] dark:[--zui-marquee-fg:oklch(96.8%_0.007_247.896)]",
14
+ card: "border-[color:var(--zui-marquee-card-border,oklch(92.9%_0.013_255.508))] bg-[var(--zui-marquee-card-bg,#ffffff)] shadow-sm shadow-slate-950/5 [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:border-[color:var(--zui-marquee-card-border-dark,oklch(37.2%_0.044_257.287))] dark:bg-[var(--zui-marquee-card-bg-dark,oklch(20.8%_0.042_265.755_/_0.9))] dark:shadow-black/20 dark:[--zui-marquee-fg:#ffffff]",
15
+ separated: "border-y border-x-0 rounded-none border-[color:var(--zui-marquee-separated-border,oklch(86.9%_0.022_252.894))] [--zui-marquee-bg:transparent] [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:border-[color:var(--zui-marquee-separated-border-dark,oklch(37.2%_0.044_257.287))] dark:[--zui-marquee-fg:#ffffff]",
16
+ sky: "border-[color:var(--zui-marquee-sky-border,oklch(62.3%_0.214_259.815_/_0.28))] [--zui-marquee-bg:oklch(97.7%_0.013_236.62)] [--zui-marquee-fg:oklch(39.1%_0.09_240.876)] dark:border-[color:var(--zui-marquee-sky-border-dark,oklch(70.7%_0.165_254.624_/_0.3))] dark:[--zui-marquee-bg:oklch(39.1%_0.09_240.876_/_0.28)] dark:[--zui-marquee-fg:oklch(95.1%_0.026_236.824)]",
17
+ rose: "border-[color:var(--zui-marquee-rose-border,oklch(58.6%_0.253_17.585_/_0.24))] [--zui-marquee-bg:oklch(96.9%_0.015_12.422)] [--zui-marquee-fg:oklch(41%_0.159_10.272)] dark:border-[color:var(--zui-marquee-rose-border-dark,oklch(71.2%_0.194_13.428_/_0.3))] dark:[--zui-marquee-bg:oklch(41%_0.159_10.272_/_0.28)] dark:[--zui-marquee-fg:oklch(94.1%_0.03_12.58)]",
18
+ purple: "border-[color:var(--zui-marquee-purple-border,oklch(62.7%_0.265_303.9_/_0.24))] [--zui-marquee-bg:oklch(97.7%_0.014_308.299)] [--zui-marquee-fg:oklch(38.1%_0.176_304.987)] dark:border-[color:var(--zui-marquee-purple-border-dark,oklch(71.4%_0.203_305.504_/_0.3))] dark:[--zui-marquee-bg:oklch(38.1%_0.176_304.987_/_0.28)] dark:[--zui-marquee-fg:oklch(94.6%_0.033_307.174)]",
19
+ pink: "border-[color:var(--zui-marquee-pink-border,oklch(65.6%_0.241_354.308_/_0.24))] [--zui-marquee-bg:oklch(97.1%_0.014_343.198)] [--zui-marquee-fg:oklch(40.8%_0.153_2.432)] dark:border-[color:var(--zui-marquee-pink-border-dark,oklch(71.8%_0.202_349.761_/_0.3))] dark:[--zui-marquee-bg:oklch(40.8%_0.153_2.432_/_0.28)] dark:[--zui-marquee-fg:oklch(94.8%_0.028_342.258)]",
20
+ orange: "border-[color:var(--zui-marquee-orange-border,oklch(70.5%_0.213_47.604_/_0.26))] [--zui-marquee-bg:oklch(98%_0.016_73.684)] [--zui-marquee-fg:oklch(40.8%_0.123_38.172)] dark:border-[color:var(--zui-marquee-orange-border-dark,oklch(75%_0.183_55.934_/_0.32))] dark:[--zui-marquee-bg:oklch(40.8%_0.123_38.172_/_0.28)] dark:[--zui-marquee-fg:oklch(95.4%_0.038_75.164)]",
21
+ yellow: "border-[color:var(--zui-marquee-yellow-border,oklch(79.5%_0.184_86.047_/_0.3))] [--zui-marquee-bg:oklch(98.7%_0.026_102.212)] [--zui-marquee-fg:oklch(42.1%_0.095_57.708)] dark:border-[color:var(--zui-marquee-yellow-border-dark,oklch(85.2%_0.199_91.936_/_0.32))] dark:[--zui-marquee-bg:oklch(42.1%_0.095_57.708_/_0.28)] dark:[--zui-marquee-fg:oklch(97.3%_0.071_103.193)]",
22
+ teal: "border-[color:var(--zui-marquee-teal-border,oklch(70.4%_0.14_182.503_/_0.28))] [--zui-marquee-bg:oklch(98.4%_0.014_180.72)] [--zui-marquee-fg:oklch(38.6%_0.063_188.416)] dark:border-[color:var(--zui-marquee-teal-border-dark,oklch(77.7%_0.152_181.912_/_0.32))] dark:[--zui-marquee-bg:oklch(38.6%_0.063_188.416_/_0.28)] dark:[--zui-marquee-fg:oklch(95.3%_0.051_180.801)]",
23
+ indigo: "border-[color:var(--zui-marquee-indigo-border,oklch(58.5%_0.233_277.117_/_0.24))] [--zui-marquee-bg:oklch(96.2%_0.018_272.314)] [--zui-marquee-fg:oklch(35.9%_0.144_278.697)] dark:border-[color:var(--zui-marquee-indigo-border-dark,oklch(67.3%_0.182_276.935_/_0.32))] dark:[--zui-marquee-bg:oklch(35.9%_0.144_278.697_/_0.28)] dark:[--zui-marquee-fg:oklch(93%_0.034_272.788)]",
24
+ emerald: "border-[color:var(--zui-marquee-emerald-border,oklch(69.6%_0.17_162.48_/_0.28))] [--zui-marquee-bg:oklch(97.9%_0.021_166.113)] [--zui-marquee-fg:oklch(37.8%_0.077_168.94)] dark:border-[color:var(--zui-marquee-emerald-border-dark,oklch(76.5%_0.177_163.223_/_0.32))] dark:[--zui-marquee-bg:oklch(37.8%_0.077_168.94_/_0.28)] dark:[--zui-marquee-fg:oklch(95%_0.052_163.051)]",
25
+ "gradient-blue": "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-blue-from,oklch(62.3%_0.214_259.815))] to-[var(--zui-marquee-gradient-blue-to,oklch(54.6%_0.245_262.881))] [--zui-marquee-fg:#ffffff]",
26
+ "gradient-green": "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-green-from,oklch(72.3%_0.219_149.579))] to-[var(--zui-marquee-gradient-green-to,oklch(62.7%_0.194_149.214))] [--zui-marquee-fg:#ffffff]",
27
+ "gradient-red": "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-red-from,oklch(63.7%_0.237_25.331))] to-[var(--zui-marquee-gradient-red-to,oklch(57.7%_0.245_27.325))] [--zui-marquee-fg:#ffffff]",
28
+ "gradient-yellow": "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-yellow-from,oklch(85.2%_0.199_91.936))] to-[var(--zui-marquee-gradient-yellow-to,oklch(79.5%_0.184_86.047))] [--zui-marquee-fg:oklch(27.9%_0.077_45.635)]",
29
+ "gradient-purple": "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-purple-from,oklch(71.4%_0.203_305.504))] to-[var(--zui-marquee-gradient-purple-to,oklch(62.7%_0.265_303.9))] [--zui-marquee-fg:#ffffff]",
30
+ "gradient-teal": "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-teal-from,oklch(77.7%_0.152_181.912))] to-[var(--zui-marquee-gradient-teal-to,oklch(70.4%_0.14_182.503))] [--zui-marquee-fg:#ffffff]",
31
+ "gradient-indigo": "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-indigo-from,oklch(67.3%_0.182_276.935))] to-[var(--zui-marquee-gradient-indigo-to,oklch(58.5%_0.233_277.117))] [--zui-marquee-fg:#ffffff]",
32
+ "gradient-pink": "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-pink-from,oklch(71.8%_0.202_349.761))] to-[var(--zui-marquee-gradient-pink-to,oklch(65.6%_0.241_354.308))] [--zui-marquee-fg:#ffffff]",
33
+ "gradient-orange": "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-orange-from,oklch(75%_0.183_55.934))] to-[var(--zui-marquee-gradient-orange-to,oklch(70.5%_0.213_47.604))] [--zui-marquee-fg:#ffffff]"
34
+ };
35
+ var zuiMarqueeOrientations = {
36
+ horizontal: "w-full flex-row",
37
+ vertical: "h-64 flex-col"
38
+ };
39
+ var zuiMarqueeSizes = {
40
+ sm: "p-2 text-xs",
41
+ md: "p-3 text-sm",
42
+ lg: "p-4 text-base"
43
+ };
44
+ var zuiMarqueeFade = {
45
+ false: "",
46
+ true: "[mask-image:linear-gradient(to_right,transparent,black_12%,black_88%,transparent)] data-[orientation=vertical]:[mask-image:linear-gradient(to_bottom,transparent,black_12%,black_88%,transparent)]"
47
+ };
48
+
49
+ // src/ui/marquee/variants.ts
50
+ var marqueeVariants = classVarianceAuthority.cva(zuiMarqueeBase, {
51
+ variants: {
52
+ appearance: zuiMarqueeAppearances,
53
+ fade: zuiMarqueeFade,
54
+ orientation: zuiMarqueeOrientations,
55
+ size: zuiMarqueeSizes
56
+ },
57
+ defaultVariants: {
58
+ appearance: "default",
59
+ fade: true,
60
+ orientation: "horizontal",
61
+ size: "md"
62
+ }
63
+ });
64
+ var marqueeKeyframes = `@keyframes zui-marquee-x{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - var(--zui-marquee-gap)/2),0,0)}}@keyframes zui-marquee-y{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(-50% - var(--zui-marquee-gap)/2),0)}}`;
65
+ function toCssLength(value) {
66
+ if (value === void 0) {
67
+ return void 0;
68
+ }
69
+ return typeof value === "number" ? `${value}px` : value;
70
+ }
71
+ function Marquee(props) {
72
+ const {
73
+ appearance,
74
+ children,
75
+ className,
76
+ direction,
77
+ fade,
78
+ gap,
79
+ itemClassName,
80
+ orientation,
81
+ pauseOnHover = false,
82
+ ref,
83
+ size,
84
+ speed = 30,
85
+ style,
86
+ trackClassName,
87
+ ...rest
88
+ } = props;
89
+ const resolvedOrientation = orientation ?? (direction === "up" || direction === "down" ? "vertical" : "horizontal");
90
+ const resolvedDirection = direction ?? (resolvedOrientation === "vertical" ? "up" : "left");
91
+ const isReverse = resolvedDirection === "right" || resolvedDirection === "down";
92
+ const animationName = resolvedOrientation === "vertical" ? "zui-marquee-y" : "zui-marquee-x";
93
+ const marqueeStyle = {
94
+ ...gap !== void 0 ? { "--zui-marquee-gap": toCssLength(gap) } : null,
95
+ ...style
96
+ };
97
+ return /* @__PURE__ */ jsxRuntime.jsxs(
98
+ "div",
99
+ {
100
+ ref,
101
+ "data-direction": resolvedDirection,
102
+ "data-orientation": resolvedOrientation,
103
+ "data-slot": "marquee",
104
+ className: chunkZS5756ZC_js.cn(
105
+ marqueeVariants({
106
+ appearance,
107
+ fade,
108
+ orientation: resolvedOrientation,
109
+ size
110
+ }),
111
+ className
112
+ ),
113
+ style: marqueeStyle,
114
+ ...rest,
115
+ children: [
116
+ /* @__PURE__ */ jsxRuntime.jsx("style", { children: marqueeKeyframes }),
117
+ /* @__PURE__ */ jsxRuntime.jsxs(
118
+ "div",
119
+ {
120
+ "data-slot": "marquee-track",
121
+ className: chunkZS5756ZC_js.cn(
122
+ "flex shrink-0 gap-[var(--zui-marquee-gap)] will-change-transform [animation-iteration-count:infinite] [animation-timing-function:linear] motion-reduce:[animation-play-state:paused]",
123
+ resolvedOrientation === "vertical" ? "flex-col" : "w-max flex-row",
124
+ pauseOnHover && "group-hover/marquee:[animation-play-state:paused]",
125
+ isReverse && "[animation-direction:reverse]",
126
+ trackClassName
127
+ ),
128
+ style: {
129
+ animationDuration: `${speed}s`,
130
+ animationName
131
+ },
132
+ children: [
133
+ /* @__PURE__ */ jsxRuntime.jsx(
134
+ "div",
135
+ {
136
+ "data-slot": "marquee-item-group",
137
+ className: chunkZS5756ZC_js.cn(
138
+ "flex shrink-0 items-center justify-around gap-[var(--zui-marquee-gap)]",
139
+ resolvedOrientation === "vertical" ? "flex-col" : "flex-row",
140
+ itemClassName
141
+ ),
142
+ children
143
+ }
144
+ ),
145
+ /* @__PURE__ */ jsxRuntime.jsx(
146
+ "div",
147
+ {
148
+ "aria-hidden": "true",
149
+ inert: true,
150
+ "data-slot": "marquee-item-group",
151
+ className: chunkZS5756ZC_js.cn(
152
+ "flex shrink-0 items-center justify-around gap-[var(--zui-marquee-gap)]",
153
+ resolvedOrientation === "vertical" ? "flex-col" : "flex-row",
154
+ itemClassName
155
+ ),
156
+ children
157
+ }
158
+ )
159
+ ]
160
+ }
161
+ )
162
+ ]
163
+ }
164
+ );
165
+ }
166
+ Marquee.displayName = "Marquee";
167
+
168
+ exports.Marquee = Marquee;
169
+ exports.marqueeVariants = marqueeVariants;
170
+ //# sourceMappingURL=marquee.js.map
171
+ //# sourceMappingURL=marquee.js.map
package/dist/ui/marquee.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/design-system/marquee.ts","../../src/ui/marquee/variants.ts","../../src/ui/marquee/marquee.tsx"],"names":["cva","jsxs","cn","jsx"],"mappings":"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","file":"marquee.js","sourcesContent":["export const zuiMarqueeBase =\n \"group/marquee relative isolate flex min-w-0 overflow-hidden rounded-xl border border-transparent bg-[var(--zui-marquee-bg,transparent)] text-[color:var(--zui-marquee-fg,inherit)] [--zui-marquee-gap:1rem]\";\n\nexport const zuiMarqueeAppearances = {\n default:\n \"[--zui-marquee-bg:transparent] [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:[--zui-marquee-fg:#ffffff]\",\n outline:\n \"border-[color:var(--zui-marquee-outline-border,oklch(86.9%_0.022_252.894))] [--zui-marquee-bg:#ffffff] [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:border-[color:var(--zui-marquee-outline-border-dark,oklch(37.2%_0.044_257.287))] dark:[--zui-marquee-bg:oklch(20.8%_0.042_265.755)] dark:[--zui-marquee-fg:#ffffff]\",\n ghost:\n \"[--zui-marquee-bg:transparent] [--zui-marquee-fg:oklch(27.9%_0.041_260.031)] dark:[--zui-marquee-fg:oklch(96.8%_0.007_247.896)]\",\n card: \"border-[color:var(--zui-marquee-card-border,oklch(92.9%_0.013_255.508))] bg-[var(--zui-marquee-card-bg,#ffffff)] shadow-sm shadow-slate-950/5 [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:border-[color:var(--zui-marquee-card-border-dark,oklch(37.2%_0.044_257.287))] dark:bg-[var(--zui-marquee-card-bg-dark,oklch(20.8%_0.042_265.755_/_0.9))] dark:shadow-black/20 dark:[--zui-marquee-fg:#ffffff]\",\n separated:\n \"border-y border-x-0 rounded-none border-[color:var(--zui-marquee-separated-border,oklch(86.9%_0.022_252.894))] [--zui-marquee-bg:transparent] [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:border-[color:var(--zui-marquee-separated-border-dark,oklch(37.2%_0.044_257.287))] dark:[--zui-marquee-fg:#ffffff]\",\n sky: \"border-[color:var(--zui-marquee-sky-border,oklch(62.3%_0.214_259.815_/_0.28))] [--zui-marquee-bg:oklch(97.7%_0.013_236.62)] [--zui-marquee-fg:oklch(39.1%_0.09_240.876)] dark:border-[color:var(--zui-marquee-sky-border-dark,oklch(70.7%_0.165_254.624_/_0.3))] dark:[--zui-marquee-bg:oklch(39.1%_0.09_240.876_/_0.28)] dark:[--zui-marquee-fg:oklch(95.1%_0.026_236.824)]\",\n rose: \"border-[color:var(--zui-marquee-rose-border,oklch(58.6%_0.253_17.585_/_0.24))] [--zui-marquee-bg:oklch(96.9%_0.015_12.422)] [--zui-marquee-fg:oklch(41%_0.159_10.272)] dark:border-[color:var(--zui-marquee-rose-border-dark,oklch(71.2%_0.194_13.428_/_0.3))] dark:[--zui-marquee-bg:oklch(41%_0.159_10.272_/_0.28)] dark:[--zui-marquee-fg:oklch(94.1%_0.03_12.58)]\",\n purple:\n \"border-[color:var(--zui-marquee-purple-border,oklch(62.7%_0.265_303.9_/_0.24))] [--zui-marquee-bg:oklch(97.7%_0.014_308.299)] [--zui-marquee-fg:oklch(38.1%_0.176_304.987)] dark:border-[color:var(--zui-marquee-purple-border-dark,oklch(71.4%_0.203_305.504_/_0.3))] dark:[--zui-marquee-bg:oklch(38.1%_0.176_304.987_/_0.28)] dark:[--zui-marquee-fg:oklch(94.6%_0.033_307.174)]\",\n pink: \"border-[color:var(--zui-marquee-pink-border,oklch(65.6%_0.241_354.308_/_0.24))] [--zui-marquee-bg:oklch(97.1%_0.014_343.198)] [--zui-marquee-fg:oklch(40.8%_0.153_2.432)] dark:border-[color:var(--zui-marquee-pink-border-dark,oklch(71.8%_0.202_349.761_/_0.3))] dark:[--zui-marquee-bg:oklch(40.8%_0.153_2.432_/_0.28)] dark:[--zui-marquee-fg:oklch(94.8%_0.028_342.258)]\",\n orange:\n \"border-[color:var(--zui-marquee-orange-border,oklch(70.5%_0.213_47.604_/_0.26))] [--zui-marquee-bg:oklch(98%_0.016_73.684)] [--zui-marquee-fg:oklch(40.8%_0.123_38.172)] dark:border-[color:var(--zui-marquee-orange-border-dark,oklch(75%_0.183_55.934_/_0.32))] dark:[--zui-marquee-bg:oklch(40.8%_0.123_38.172_/_0.28)] dark:[--zui-marquee-fg:oklch(95.4%_0.038_75.164)]\",\n yellow:\n \"border-[color:var(--zui-marquee-yellow-border,oklch(79.5%_0.184_86.047_/_0.3))] [--zui-marquee-bg:oklch(98.7%_0.026_102.212)] [--zui-marquee-fg:oklch(42.1%_0.095_57.708)] dark:border-[color:var(--zui-marquee-yellow-border-dark,oklch(85.2%_0.199_91.936_/_0.32))] dark:[--zui-marquee-bg:oklch(42.1%_0.095_57.708_/_0.28)] dark:[--zui-marquee-fg:oklch(97.3%_0.071_103.193)]\",\n teal: \"border-[color:var(--zui-marquee-teal-border,oklch(70.4%_0.14_182.503_/_0.28))] [--zui-marquee-bg:oklch(98.4%_0.014_180.72)] [--zui-marquee-fg:oklch(38.6%_0.063_188.416)] dark:border-[color:var(--zui-marquee-teal-border-dark,oklch(77.7%_0.152_181.912_/_0.32))] dark:[--zui-marquee-bg:oklch(38.6%_0.063_188.416_/_0.28)] dark:[--zui-marquee-fg:oklch(95.3%_0.051_180.801)]\",\n indigo:\n \"border-[color:var(--zui-marquee-indigo-border,oklch(58.5%_0.233_277.117_/_0.24))] [--zui-marquee-bg:oklch(96.2%_0.018_272.314)] [--zui-marquee-fg:oklch(35.9%_0.144_278.697)] dark:border-[color:var(--zui-marquee-indigo-border-dark,oklch(67.3%_0.182_276.935_/_0.32))] dark:[--zui-marquee-bg:oklch(35.9%_0.144_278.697_/_0.28)] dark:[--zui-marquee-fg:oklch(93%_0.034_272.788)]\",\n emerald:\n \"border-[color:var(--zui-marquee-emerald-border,oklch(69.6%_0.17_162.48_/_0.28))] [--zui-marquee-bg:oklch(97.9%_0.021_166.113)] [--zui-marquee-fg:oklch(37.8%_0.077_168.94)] dark:border-[color:var(--zui-marquee-emerald-border-dark,oklch(76.5%_0.177_163.223_/_0.32))] dark:[--zui-marquee-bg:oklch(37.8%_0.077_168.94_/_0.28)] dark:[--zui-marquee-fg:oklch(95%_0.052_163.051)]\",\n \"gradient-blue\":\n \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-blue-from,oklch(62.3%_0.214_259.815))] to-[var(--zui-marquee-gradient-blue-to,oklch(54.6%_0.245_262.881))] [--zui-marquee-fg:#ffffff]\",\n \"gradient-green\":\n \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-green-from,oklch(72.3%_0.219_149.579))] to-[var(--zui-marquee-gradient-green-to,oklch(62.7%_0.194_149.214))] [--zui-marquee-fg:#ffffff]\",\n \"gradient-red\":\n \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-red-from,oklch(63.7%_0.237_25.331))] to-[var(--zui-marquee-gradient-red-to,oklch(57.7%_0.245_27.325))] [--zui-marquee-fg:#ffffff]\",\n \"gradient-yellow\":\n \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-yellow-from,oklch(85.2%_0.199_91.936))] to-[var(--zui-marquee-gradient-yellow-to,oklch(79.5%_0.184_86.047))] [--zui-marquee-fg:oklch(27.9%_0.077_45.635)]\",\n \"gradient-purple\":\n \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-purple-from,oklch(71.4%_0.203_305.504))] to-[var(--zui-marquee-gradient-purple-to,oklch(62.7%_0.265_303.9))] [--zui-marquee-fg:#ffffff]\",\n \"gradient-teal\":\n \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-teal-from,oklch(77.7%_0.152_181.912))] to-[var(--zui-marquee-gradient-teal-to,oklch(70.4%_0.14_182.503))] [--zui-marquee-fg:#ffffff]\",\n \"gradient-indigo\":\n \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-indigo-from,oklch(67.3%_0.182_276.935))] to-[var(--zui-marquee-gradient-indigo-to,oklch(58.5%_0.233_277.117))] [--zui-marquee-fg:#ffffff]\",\n \"gradient-pink\":\n \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-pink-from,oklch(71.8%_0.202_349.761))] to-[var(--zui-marquee-gradient-pink-to,oklch(65.6%_0.241_354.308))] [--zui-marquee-fg:#ffffff]\",\n \"gradient-orange\":\n \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-orange-from,oklch(75%_0.183_55.934))] to-[var(--zui-marquee-gradient-orange-to,oklch(70.5%_0.213_47.604))] [--zui-marquee-fg:#ffffff]\",\n} as const;\n\nexport const zuiMarqueeOrientations = {\n horizontal: \"w-full flex-row\",\n vertical: \"h-64 flex-col\",\n} as const;\n\nexport const zuiMarqueeSizes = {\n sm: \"p-2 text-xs\",\n md: \"p-3 text-sm\",\n lg: \"p-4 text-base\",\n} as const;\n\nexport const zuiMarqueeFade = {\n false: \"\",\n true: \"[mask-image:linear-gradient(to_right,transparent,black_12%,black_88%,transparent)] data-[orientation=vertical]:[mask-image:linear-gradient(to_bottom,transparent,black_12%,black_88%,transparent)]\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n zuiMarqueeAppearances,\n zuiMarqueeBase,\n zuiMarqueeFade,\n zuiMarqueeOrientations,\n zuiMarqueeSizes,\n} from \"../../design-system/marquee\";\n\nexport const marqueeVariants = cva(zuiMarqueeBase, {\n variants: {\n appearance: zuiMarqueeAppearances,\n fade: zuiMarqueeFade,\n orientation: zuiMarqueeOrientations,\n size: zuiMarqueeSizes,\n },\n defaultVariants: {\n appearance: \"default\",\n fade: true,\n orientation: \"horizontal\",\n size: \"md\",\n },\n});\n","\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { MarqueeProps } from \"./types\";\nimport { marqueeVariants } from \"./variants\";\n\nconst marqueeKeyframes = `@keyframes zui-marquee-x{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - var(--zui-marquee-gap)/2),0,0)}}@keyframes zui-marquee-y{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(-50% - var(--zui-marquee-gap)/2),0)}}`;\n\nfunction toCssLength(value: number | string | undefined) {\n if (value === undefined) {\n return undefined;\n }\n return typeof value === \"number\" ? `${value}px` : value;\n}\n\nexport function Marquee(props: MarqueeProps) {\n const {\n appearance,\n children,\n className,\n direction,\n fade,\n gap,\n itemClassName,\n orientation,\n pauseOnHover = false,\n ref,\n size,\n speed = 30,\n style,\n trackClassName,\n ...rest\n } = props;\n\n const resolvedOrientation =\n orientation ??\n (direction === \"up\" || direction === \"down\" ? \"vertical\" : \"horizontal\");\n const resolvedDirection =\n direction ?? (resolvedOrientation === \"vertical\" ? \"up\" : \"left\");\n const isReverse =\n resolvedDirection === \"right\" || resolvedDirection === \"down\";\n const animationName =\n resolvedOrientation === \"vertical\" ? \"zui-marquee-y\" : \"zui-marquee-x\";\n const marqueeStyle = {\n ...(gap !== undefined ? { \"--zui-marquee-gap\": toCssLength(gap) } : null),\n ...style,\n } as CSSProperties;\n\n return (\n <div\n ref={ref}\n data-direction={resolvedDirection}\n data-orientation={resolvedOrientation}\n data-slot=\"marquee\"\n className={cn(\n marqueeVariants({\n appearance,\n fade,\n orientation: resolvedOrientation,\n size,\n }),\n className,\n )}\n style={marqueeStyle}\n {...rest}\n >\n <style>{marqueeKeyframes}</style>\n <div\n data-slot=\"marquee-track\"\n className={cn(\n \"flex shrink-0 gap-[var(--zui-marquee-gap)] will-change-transform [animation-iteration-count:infinite] [animation-timing-function:linear] motion-reduce:[animation-play-state:paused]\",\n resolvedOrientation === \"vertical\" ? \"flex-col\" : \"w-max flex-row\",\n pauseOnHover && \"group-hover/marquee:[animation-play-state:paused]\",\n isReverse && \"[animation-direction:reverse]\",\n trackClassName,\n )}\n style={\n {\n animationDuration: `${speed}s`,\n animationName,\n } as CSSProperties\n }\n >\n <div\n data-slot=\"marquee-item-group\"\n className={cn(\n \"flex shrink-0 items-center justify-around gap-[var(--zui-marquee-gap)]\",\n resolvedOrientation === \"vertical\" ? \"flex-col\" : \"flex-row\",\n itemClassName,\n )}\n >\n {children}\n </div>\n <div\n aria-hidden=\"true\"\n inert\n data-slot=\"marquee-item-group\"\n className={cn(\n \"flex shrink-0 items-center justify-around gap-[var(--zui-marquee-gap)]\",\n resolvedOrientation === \"vertical\" ? \"flex-col\" : \"flex-row\",\n itemClassName,\n )}\n >\n {children}\n </div>\n </div>\n </div>\n );\n}\n\nMarquee.displayName = \"Marquee\";\n"]}
package/dist/ui/marquee.mjs ADDED
@@ -0,0 +1,168 @@
1
+ "use client";
2
+ import { cn } from '../chunk-4D54YOL6.mjs';
3
+ import { cva } from 'class-variance-authority';
4
+ import { jsxs, jsx } from 'react/jsx-runtime';
5
+
6
+ // src/design-system/marquee.ts
7
+ var zuiMarqueeBase = "group/marquee relative isolate flex min-w-0 overflow-hidden rounded-xl border border-transparent bg-[var(--zui-marquee-bg,transparent)] text-[color:var(--zui-marquee-fg,inherit)] [--zui-marquee-gap:1rem]";
8
+ var zuiMarqueeAppearances = {
9
+ default: "[--zui-marquee-bg:transparent] [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:[--zui-marquee-fg:#ffffff]",
10
+ outline: "border-[color:var(--zui-marquee-outline-border,oklch(86.9%_0.022_252.894))] [--zui-marquee-bg:#ffffff] [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:border-[color:var(--zui-marquee-outline-border-dark,oklch(37.2%_0.044_257.287))] dark:[--zui-marquee-bg:oklch(20.8%_0.042_265.755)] dark:[--zui-marquee-fg:#ffffff]",
11
+ ghost: "[--zui-marquee-bg:transparent] [--zui-marquee-fg:oklch(27.9%_0.041_260.031)] dark:[--zui-marquee-fg:oklch(96.8%_0.007_247.896)]",
12
+ card: "border-[color:var(--zui-marquee-card-border,oklch(92.9%_0.013_255.508))] bg-[var(--zui-marquee-card-bg,#ffffff)] shadow-sm shadow-slate-950/5 [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:border-[color:var(--zui-marquee-card-border-dark,oklch(37.2%_0.044_257.287))] dark:bg-[var(--zui-marquee-card-bg-dark,oklch(20.8%_0.042_265.755_/_0.9))] dark:shadow-black/20 dark:[--zui-marquee-fg:#ffffff]",
13
+ separated: "border-y border-x-0 rounded-none border-[color:var(--zui-marquee-separated-border,oklch(86.9%_0.022_252.894))] [--zui-marquee-bg:transparent] [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:border-[color:var(--zui-marquee-separated-border-dark,oklch(37.2%_0.044_257.287))] dark:[--zui-marquee-fg:#ffffff]",
14
+ sky: "border-[color:var(--zui-marquee-sky-border,oklch(62.3%_0.214_259.815_/_0.28))] [--zui-marquee-bg:oklch(97.7%_0.013_236.62)] [--zui-marquee-fg:oklch(39.1%_0.09_240.876)] dark:border-[color:var(--zui-marquee-sky-border-dark,oklch(70.7%_0.165_254.624_/_0.3))] dark:[--zui-marquee-bg:oklch(39.1%_0.09_240.876_/_0.28)] dark:[--zui-marquee-fg:oklch(95.1%_0.026_236.824)]",
15
+ rose: "border-[color:var(--zui-marquee-rose-border,oklch(58.6%_0.253_17.585_/_0.24))] [--zui-marquee-bg:oklch(96.9%_0.015_12.422)] [--zui-marquee-fg:oklch(41%_0.159_10.272)] dark:border-[color:var(--zui-marquee-rose-border-dark,oklch(71.2%_0.194_13.428_/_0.3))] dark:[--zui-marquee-bg:oklch(41%_0.159_10.272_/_0.28)] dark:[--zui-marquee-fg:oklch(94.1%_0.03_12.58)]",
16
+ purple: "border-[color:var(--zui-marquee-purple-border,oklch(62.7%_0.265_303.9_/_0.24))] [--zui-marquee-bg:oklch(97.7%_0.014_308.299)] [--zui-marquee-fg:oklch(38.1%_0.176_304.987)] dark:border-[color:var(--zui-marquee-purple-border-dark,oklch(71.4%_0.203_305.504_/_0.3))] dark:[--zui-marquee-bg:oklch(38.1%_0.176_304.987_/_0.28)] dark:[--zui-marquee-fg:oklch(94.6%_0.033_307.174)]",
17
+ pink: "border-[color:var(--zui-marquee-pink-border,oklch(65.6%_0.241_354.308_/_0.24))] [--zui-marquee-bg:oklch(97.1%_0.014_343.198)] [--zui-marquee-fg:oklch(40.8%_0.153_2.432)] dark:border-[color:var(--zui-marquee-pink-border-dark,oklch(71.8%_0.202_349.761_/_0.3))] dark:[--zui-marquee-bg:oklch(40.8%_0.153_2.432_/_0.28)] dark:[--zui-marquee-fg:oklch(94.8%_0.028_342.258)]",
18
+ orange: "border-[color:var(--zui-marquee-orange-border,oklch(70.5%_0.213_47.604_/_0.26))] [--zui-marquee-bg:oklch(98%_0.016_73.684)] [--zui-marquee-fg:oklch(40.8%_0.123_38.172)] dark:border-[color:var(--zui-marquee-orange-border-dark,oklch(75%_0.183_55.934_/_0.32))] dark:[--zui-marquee-bg:oklch(40.8%_0.123_38.172_/_0.28)] dark:[--zui-marquee-fg:oklch(95.4%_0.038_75.164)]",
19
+ yellow: "border-[color:var(--zui-marquee-yellow-border,oklch(79.5%_0.184_86.047_/_0.3))] [--zui-marquee-bg:oklch(98.7%_0.026_102.212)] [--zui-marquee-fg:oklch(42.1%_0.095_57.708)] dark:border-[color:var(--zui-marquee-yellow-border-dark,oklch(85.2%_0.199_91.936_/_0.32))] dark:[--zui-marquee-bg:oklch(42.1%_0.095_57.708_/_0.28)] dark:[--zui-marquee-fg:oklch(97.3%_0.071_103.193)]",
20
+ teal: "border-[color:var(--zui-marquee-teal-border,oklch(70.4%_0.14_182.503_/_0.28))] [--zui-marquee-bg:oklch(98.4%_0.014_180.72)] [--zui-marquee-fg:oklch(38.6%_0.063_188.416)] dark:border-[color:var(--zui-marquee-teal-border-dark,oklch(77.7%_0.152_181.912_/_0.32))] dark:[--zui-marquee-bg:oklch(38.6%_0.063_188.416_/_0.28)] dark:[--zui-marquee-fg:oklch(95.3%_0.051_180.801)]",
21
+ indigo: "border-[color:var(--zui-marquee-indigo-border,oklch(58.5%_0.233_277.117_/_0.24))] [--zui-marquee-bg:oklch(96.2%_0.018_272.314)] [--zui-marquee-fg:oklch(35.9%_0.144_278.697)] dark:border-[color:var(--zui-marquee-indigo-border-dark,oklch(67.3%_0.182_276.935_/_0.32))] dark:[--zui-marquee-bg:oklch(35.9%_0.144_278.697_/_0.28)] dark:[--zui-marquee-fg:oklch(93%_0.034_272.788)]",
22
+ emerald: "border-[color:var(--zui-marquee-emerald-border,oklch(69.6%_0.17_162.48_/_0.28))] [--zui-marquee-bg:oklch(97.9%_0.021_166.113)] [--zui-marquee-fg:oklch(37.8%_0.077_168.94)] dark:border-[color:var(--zui-marquee-emerald-border-dark,oklch(76.5%_0.177_163.223_/_0.32))] dark:[--zui-marquee-bg:oklch(37.8%_0.077_168.94_/_0.28)] dark:[--zui-marquee-fg:oklch(95%_0.052_163.051)]",
23
+ "gradient-blue": "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-blue-from,oklch(62.3%_0.214_259.815))] to-[var(--zui-marquee-gradient-blue-to,oklch(54.6%_0.245_262.881))] [--zui-marquee-fg:#ffffff]",
24
+ "gradient-green": "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-green-from,oklch(72.3%_0.219_149.579))] to-[var(--zui-marquee-gradient-green-to,oklch(62.7%_0.194_149.214))] [--zui-marquee-fg:#ffffff]",
25
+ "gradient-red": "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-red-from,oklch(63.7%_0.237_25.331))] to-[var(--zui-marquee-gradient-red-to,oklch(57.7%_0.245_27.325))] [--zui-marquee-fg:#ffffff]",
26
+ "gradient-yellow": "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-yellow-from,oklch(85.2%_0.199_91.936))] to-[var(--zui-marquee-gradient-yellow-to,oklch(79.5%_0.184_86.047))] [--zui-marquee-fg:oklch(27.9%_0.077_45.635)]",
27
+ "gradient-purple": "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-purple-from,oklch(71.4%_0.203_305.504))] to-[var(--zui-marquee-gradient-purple-to,oklch(62.7%_0.265_303.9))] [--zui-marquee-fg:#ffffff]",
28
+ "gradient-teal": "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-teal-from,oklch(77.7%_0.152_181.912))] to-[var(--zui-marquee-gradient-teal-to,oklch(70.4%_0.14_182.503))] [--zui-marquee-fg:#ffffff]",
29
+ "gradient-indigo": "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-indigo-from,oklch(67.3%_0.182_276.935))] to-[var(--zui-marquee-gradient-indigo-to,oklch(58.5%_0.233_277.117))] [--zui-marquee-fg:#ffffff]",
30
+ "gradient-pink": "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-pink-from,oklch(71.8%_0.202_349.761))] to-[var(--zui-marquee-gradient-pink-to,oklch(65.6%_0.241_354.308))] [--zui-marquee-fg:#ffffff]",
31
+ "gradient-orange": "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-orange-from,oklch(75%_0.183_55.934))] to-[var(--zui-marquee-gradient-orange-to,oklch(70.5%_0.213_47.604))] [--zui-marquee-fg:#ffffff]"
32
+ };
33
+ var zuiMarqueeOrientations = {
34
+ horizontal: "w-full flex-row",
35
+ vertical: "h-64 flex-col"
36
+ };
37
+ var zuiMarqueeSizes = {
38
+ sm: "p-2 text-xs",
39
+ md: "p-3 text-sm",
40
+ lg: "p-4 text-base"
41
+ };
42
+ var zuiMarqueeFade = {
43
+ false: "",
44
+ true: "[mask-image:linear-gradient(to_right,transparent,black_12%,black_88%,transparent)] data-[orientation=vertical]:[mask-image:linear-gradient(to_bottom,transparent,black_12%,black_88%,transparent)]"
45
+ };
46
+
47
+ // src/ui/marquee/variants.ts
48
+ var marqueeVariants = cva(zuiMarqueeBase, {
49
+ variants: {
50
+ appearance: zuiMarqueeAppearances,
51
+ fade: zuiMarqueeFade,
52
+ orientation: zuiMarqueeOrientations,
53
+ size: zuiMarqueeSizes
54
+ },
55
+ defaultVariants: {
56
+ appearance: "default",
57
+ fade: true,
58
+ orientation: "horizontal",
59
+ size: "md"
60
+ }
61
+ });
62
+ var marqueeKeyframes = `@keyframes zui-marquee-x{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - var(--zui-marquee-gap)/2),0,0)}}@keyframes zui-marquee-y{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(-50% - var(--zui-marquee-gap)/2),0)}}`;
63
+ function toCssLength(value) {
64
+ if (value === void 0) {
65
+ return void 0;
66
+ }
67
+ return typeof value === "number" ? `${value}px` : value;
68
+ }
69
+ function Marquee(props) {
70
+ const {
71
+ appearance,
72
+ children,
73
+ className,
74
+ direction,
75
+ fade,
76
+ gap,
77
+ itemClassName,
78
+ orientation,
79
+ pauseOnHover = false,
80
+ ref,
81
+ size,
82
+ speed = 30,
83
+ style,
84
+ trackClassName,
85
+ ...rest
86
+ } = props;
87
+ const resolvedOrientation = orientation ?? (direction === "up" || direction === "down" ? "vertical" : "horizontal");
88
+ const resolvedDirection = direction ?? (resolvedOrientation === "vertical" ? "up" : "left");
89
+ const isReverse = resolvedDirection === "right" || resolvedDirection === "down";
90
+ const animationName = resolvedOrientation === "vertical" ? "zui-marquee-y" : "zui-marquee-x";
91
+ const marqueeStyle = {
92
+ ...gap !== void 0 ? { "--zui-marquee-gap": toCssLength(gap) } : null,
93
+ ...style
94
+ };
95
+ return /* @__PURE__ */ jsxs(
96
+ "div",
97
+ {
98
+ ref,
99
+ "data-direction": resolvedDirection,
100
+ "data-orientation": resolvedOrientation,
101
+ "data-slot": "marquee",
102
+ className: cn(
103
+ marqueeVariants({
104
+ appearance,
105
+ fade,
106
+ orientation: resolvedOrientation,
107
+ size
108
+ }),
109
+ className
110
+ ),
111
+ style: marqueeStyle,
112
+ ...rest,
113
+ children: [
114
+ /* @__PURE__ */ jsx("style", { children: marqueeKeyframes }),
115
+ /* @__PURE__ */ jsxs(
116
+ "div",
117
+ {
118
+ "data-slot": "marquee-track",
119
+ className: cn(
120
+ "flex shrink-0 gap-[var(--zui-marquee-gap)] will-change-transform [animation-iteration-count:infinite] [animation-timing-function:linear] motion-reduce:[animation-play-state:paused]",
121
+ resolvedOrientation === "vertical" ? "flex-col" : "w-max flex-row",
122
+ pauseOnHover && "group-hover/marquee:[animation-play-state:paused]",
123
+ isReverse && "[animation-direction:reverse]",
124
+ trackClassName
125
+ ),
126
+ style: {
127
+ animationDuration: `${speed}s`,
128
+ animationName
129
+ },
130
+ children: [
131
+ /* @__PURE__ */ jsx(
132
+ "div",
133
+ {
134
+ "data-slot": "marquee-item-group",
135
+ className: cn(
136
+ "flex shrink-0 items-center justify-around gap-[var(--zui-marquee-gap)]",
137
+ resolvedOrientation === "vertical" ? "flex-col" : "flex-row",
138
+ itemClassName
139
+ ),
140
+ children
141
+ }
142
+ ),
143
+ /* @__PURE__ */ jsx(
144
+ "div",
145
+ {
146
+ "aria-hidden": "true",
147
+ inert: true,
148
+ "data-slot": "marquee-item-group",
149
+ className: cn(
150
+ "flex shrink-0 items-center justify-around gap-[var(--zui-marquee-gap)]",
151
+ resolvedOrientation === "vertical" ? "flex-col" : "flex-row",
152
+ itemClassName
153
+ ),
154
+ children
155
+ }
156
+ )
157
+ ]
158
+ }
159
+ )
160
+ ]
161
+ }
162
+ );
163
+ }
164
+ Marquee.displayName = "Marquee";
165
+
166
+ export { Marquee, marqueeVariants };
167
+ //# sourceMappingURL=marquee.mjs.map
168
+ //# sourceMappingURL=marquee.mjs.map
package/dist/ui/marquee.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/design-system/marquee.ts","../../src/ui/marquee/variants.ts","../../src/ui/marquee/marquee.tsx"],"names":[],"mappings":"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","file":"marquee.mjs","sourcesContent":["export const zuiMarqueeBase =\n \"group/marquee relative isolate flex min-w-0 overflow-hidden rounded-xl border border-transparent bg-[var(--zui-marquee-bg,transparent)] text-[color:var(--zui-marquee-fg,inherit)] [--zui-marquee-gap:1rem]\";\n\nexport const zuiMarqueeAppearances = {\n default:\n \"[--zui-marquee-bg:transparent] [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:[--zui-marquee-fg:#ffffff]\",\n outline:\n \"border-[color:var(--zui-marquee-outline-border,oklch(86.9%_0.022_252.894))] [--zui-marquee-bg:#ffffff] [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:border-[color:var(--zui-marquee-outline-border-dark,oklch(37.2%_0.044_257.287))] dark:[--zui-marquee-bg:oklch(20.8%_0.042_265.755)] dark:[--zui-marquee-fg:#ffffff]\",\n ghost:\n \"[--zui-marquee-bg:transparent] [--zui-marquee-fg:oklch(27.9%_0.041_260.031)] dark:[--zui-marquee-fg:oklch(96.8%_0.007_247.896)]\",\n card: \"border-[color:var(--zui-marquee-card-border,oklch(92.9%_0.013_255.508))] bg-[var(--zui-marquee-card-bg,#ffffff)] shadow-sm shadow-slate-950/5 [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:border-[color:var(--zui-marquee-card-border-dark,oklch(37.2%_0.044_257.287))] dark:bg-[var(--zui-marquee-card-bg-dark,oklch(20.8%_0.042_265.755_/_0.9))] dark:shadow-black/20 dark:[--zui-marquee-fg:#ffffff]\",\n separated:\n \"border-y border-x-0 rounded-none border-[color:var(--zui-marquee-separated-border,oklch(86.9%_0.022_252.894))] [--zui-marquee-bg:transparent] [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:border-[color:var(--zui-marquee-separated-border-dark,oklch(37.2%_0.044_257.287))] dark:[--zui-marquee-fg:#ffffff]\",\n sky: \"border-[color:var(--zui-marquee-sky-border,oklch(62.3%_0.214_259.815_/_0.28))] [--zui-marquee-bg:oklch(97.7%_0.013_236.62)] [--zui-marquee-fg:oklch(39.1%_0.09_240.876)] dark:border-[color:var(--zui-marquee-sky-border-dark,oklch(70.7%_0.165_254.624_/_0.3))] dark:[--zui-marquee-bg:oklch(39.1%_0.09_240.876_/_0.28)] dark:[--zui-marquee-fg:oklch(95.1%_0.026_236.824)]\",\n rose: \"border-[color:var(--zui-marquee-rose-border,oklch(58.6%_0.253_17.585_/_0.24))] [--zui-marquee-bg:oklch(96.9%_0.015_12.422)] [--zui-marquee-fg:oklch(41%_0.159_10.272)] dark:border-[color:var(--zui-marquee-rose-border-dark,oklch(71.2%_0.194_13.428_/_0.3))] dark:[--zui-marquee-bg:oklch(41%_0.159_10.272_/_0.28)] dark:[--zui-marquee-fg:oklch(94.1%_0.03_12.58)]\",\n purple:\n \"border-[color:var(--zui-marquee-purple-border,oklch(62.7%_0.265_303.9_/_0.24))] [--zui-marquee-bg:oklch(97.7%_0.014_308.299)] [--zui-marquee-fg:oklch(38.1%_0.176_304.987)] dark:border-[color:var(--zui-marquee-purple-border-dark,oklch(71.4%_0.203_305.504_/_0.3))] dark:[--zui-marquee-bg:oklch(38.1%_0.176_304.987_/_0.28)] dark:[--zui-marquee-fg:oklch(94.6%_0.033_307.174)]\",\n pink: \"border-[color:var(--zui-marquee-pink-border,oklch(65.6%_0.241_354.308_/_0.24))] [--zui-marquee-bg:oklch(97.1%_0.014_343.198)] [--zui-marquee-fg:oklch(40.8%_0.153_2.432)] dark:border-[color:var(--zui-marquee-pink-border-dark,oklch(71.8%_0.202_349.761_/_0.3))] dark:[--zui-marquee-bg:oklch(40.8%_0.153_2.432_/_0.28)] dark:[--zui-marquee-fg:oklch(94.8%_0.028_342.258)]\",\n orange:\n \"border-[color:var(--zui-marquee-orange-border,oklch(70.5%_0.213_47.604_/_0.26))] [--zui-marquee-bg:oklch(98%_0.016_73.684)] [--zui-marquee-fg:oklch(40.8%_0.123_38.172)] dark:border-[color:var(--zui-marquee-orange-border-dark,oklch(75%_0.183_55.934_/_0.32))] dark:[--zui-marquee-bg:oklch(40.8%_0.123_38.172_/_0.28)] dark:[--zui-marquee-fg:oklch(95.4%_0.038_75.164)]\",\n yellow:\n \"border-[color:var(--zui-marquee-yellow-border,oklch(79.5%_0.184_86.047_/_0.3))] [--zui-marquee-bg:oklch(98.7%_0.026_102.212)] [--zui-marquee-fg:oklch(42.1%_0.095_57.708)] dark:border-[color:var(--zui-marquee-yellow-border-dark,oklch(85.2%_0.199_91.936_/_0.32))] dark:[--zui-marquee-bg:oklch(42.1%_0.095_57.708_/_0.28)] dark:[--zui-marquee-fg:oklch(97.3%_0.071_103.193)]\",\n teal: \"border-[color:var(--zui-marquee-teal-border,oklch(70.4%_0.14_182.503_/_0.28))] [--zui-marquee-bg:oklch(98.4%_0.014_180.72)] [--zui-marquee-fg:oklch(38.6%_0.063_188.416)] dark:border-[color:var(--zui-marquee-teal-border-dark,oklch(77.7%_0.152_181.912_/_0.32))] dark:[--zui-marquee-bg:oklch(38.6%_0.063_188.416_/_0.28)] dark:[--zui-marquee-fg:oklch(95.3%_0.051_180.801)]\",\n indigo:\n \"border-[color:var(--zui-marquee-indigo-border,oklch(58.5%_0.233_277.117_/_0.24))] [--zui-marquee-bg:oklch(96.2%_0.018_272.314)] [--zui-marquee-fg:oklch(35.9%_0.144_278.697)] dark:border-[color:var(--zui-marquee-indigo-border-dark,oklch(67.3%_0.182_276.935_/_0.32))] dark:[--zui-marquee-bg:oklch(35.9%_0.144_278.697_/_0.28)] dark:[--zui-marquee-fg:oklch(93%_0.034_272.788)]\",\n emerald:\n \"border-[color:var(--zui-marquee-emerald-border,oklch(69.6%_0.17_162.48_/_0.28))] [--zui-marquee-bg:oklch(97.9%_0.021_166.113)] [--zui-marquee-fg:oklch(37.8%_0.077_168.94)] dark:border-[color:var(--zui-marquee-emerald-border-dark,oklch(76.5%_0.177_163.223_/_0.32))] dark:[--zui-marquee-bg:oklch(37.8%_0.077_168.94_/_0.28)] dark:[--zui-marquee-fg:oklch(95%_0.052_163.051)]\",\n \"gradient-blue\":\n \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-blue-from,oklch(62.3%_0.214_259.815))] to-[var(--zui-marquee-gradient-blue-to,oklch(54.6%_0.245_262.881))] [--zui-marquee-fg:#ffffff]\",\n \"gradient-green\":\n \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-green-from,oklch(72.3%_0.219_149.579))] to-[var(--zui-marquee-gradient-green-to,oklch(62.7%_0.194_149.214))] [--zui-marquee-fg:#ffffff]\",\n \"gradient-red\":\n \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-red-from,oklch(63.7%_0.237_25.331))] to-[var(--zui-marquee-gradient-red-to,oklch(57.7%_0.245_27.325))] [--zui-marquee-fg:#ffffff]\",\n \"gradient-yellow\":\n \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-yellow-from,oklch(85.2%_0.199_91.936))] to-[var(--zui-marquee-gradient-yellow-to,oklch(79.5%_0.184_86.047))] [--zui-marquee-fg:oklch(27.9%_0.077_45.635)]\",\n \"gradient-purple\":\n \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-purple-from,oklch(71.4%_0.203_305.504))] to-[var(--zui-marquee-gradient-purple-to,oklch(62.7%_0.265_303.9))] [--zui-marquee-fg:#ffffff]\",\n \"gradient-teal\":\n \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-teal-from,oklch(77.7%_0.152_181.912))] to-[var(--zui-marquee-gradient-teal-to,oklch(70.4%_0.14_182.503))] [--zui-marquee-fg:#ffffff]\",\n \"gradient-indigo\":\n \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-indigo-from,oklch(67.3%_0.182_276.935))] to-[var(--zui-marquee-gradient-indigo-to,oklch(58.5%_0.233_277.117))] [--zui-marquee-fg:#ffffff]\",\n \"gradient-pink\":\n \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-pink-from,oklch(71.8%_0.202_349.761))] to-[var(--zui-marquee-gradient-pink-to,oklch(65.6%_0.241_354.308))] [--zui-marquee-fg:#ffffff]\",\n \"gradient-orange\":\n \"border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-orange-from,oklch(75%_0.183_55.934))] to-[var(--zui-marquee-gradient-orange-to,oklch(70.5%_0.213_47.604))] [--zui-marquee-fg:#ffffff]\",\n} as const;\n\nexport const zuiMarqueeOrientations = {\n horizontal: \"w-full flex-row\",\n vertical: \"h-64 flex-col\",\n} as const;\n\nexport const zuiMarqueeSizes = {\n sm: \"p-2 text-xs\",\n md: \"p-3 text-sm\",\n lg: \"p-4 text-base\",\n} as const;\n\nexport const zuiMarqueeFade = {\n false: \"\",\n true: \"[mask-image:linear-gradient(to_right,transparent,black_12%,black_88%,transparent)] data-[orientation=vertical]:[mask-image:linear-gradient(to_bottom,transparent,black_12%,black_88%,transparent)]\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n zuiMarqueeAppearances,\n zuiMarqueeBase,\n zuiMarqueeFade,\n zuiMarqueeOrientations,\n zuiMarqueeSizes,\n} from \"../../design-system/marquee\";\n\nexport const marqueeVariants = cva(zuiMarqueeBase, {\n variants: {\n appearance: zuiMarqueeAppearances,\n fade: zuiMarqueeFade,\n orientation: zuiMarqueeOrientations,\n size: zuiMarqueeSizes,\n },\n defaultVariants: {\n appearance: \"default\",\n fade: true,\n orientation: \"horizontal\",\n size: \"md\",\n },\n});\n","\"use client\";\n\nimport type { CSSProperties } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { MarqueeProps } from \"./types\";\nimport { marqueeVariants } from \"./variants\";\n\nconst marqueeKeyframes = `@keyframes zui-marquee-x{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - var(--zui-marquee-gap)/2),0,0)}}@keyframes zui-marquee-y{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(-50% - var(--zui-marquee-gap)/2),0)}}`;\n\nfunction toCssLength(value: number | string | undefined) {\n if (value === undefined) {\n return undefined;\n }\n return typeof value === \"number\" ? `${value}px` : value;\n}\n\nexport function Marquee(props: MarqueeProps) {\n const {\n appearance,\n children,\n className,\n direction,\n fade,\n gap,\n itemClassName,\n orientation,\n pauseOnHover = false,\n ref,\n size,\n speed = 30,\n style,\n trackClassName,\n ...rest\n } = props;\n\n const resolvedOrientation =\n orientation ??\n (direction === \"up\" || direction === \"down\" ? \"vertical\" : \"horizontal\");\n const resolvedDirection =\n direction ?? (resolvedOrientation === \"vertical\" ? \"up\" : \"left\");\n const isReverse =\n resolvedDirection === \"right\" || resolvedDirection === \"down\";\n const animationName =\n resolvedOrientation === \"vertical\" ? \"zui-marquee-y\" : \"zui-marquee-x\";\n const marqueeStyle = {\n ...(gap !== undefined ? { \"--zui-marquee-gap\": toCssLength(gap) } : null),\n ...style,\n } as CSSProperties;\n\n return (\n <div\n ref={ref}\n data-direction={resolvedDirection}\n data-orientation={resolvedOrientation}\n data-slot=\"marquee\"\n className={cn(\n marqueeVariants({\n appearance,\n fade,\n orientation: resolvedOrientation,\n size,\n }),\n className,\n )}\n style={marqueeStyle}\n {...rest}\n >\n <style>{marqueeKeyframes}</style>\n <div\n data-slot=\"marquee-track\"\n className={cn(\n \"flex shrink-0 gap-[var(--zui-marquee-gap)] will-change-transform [animation-iteration-count:infinite] [animation-timing-function:linear] motion-reduce:[animation-play-state:paused]\",\n resolvedOrientation === \"vertical\" ? \"flex-col\" : \"w-max flex-row\",\n pauseOnHover && \"group-hover/marquee:[animation-play-state:paused]\",\n isReverse && \"[animation-direction:reverse]\",\n trackClassName,\n )}\n style={\n {\n animationDuration: `${speed}s`,\n animationName,\n } as CSSProperties\n }\n >\n <div\n data-slot=\"marquee-item-group\"\n className={cn(\n \"flex shrink-0 items-center justify-around gap-[var(--zui-marquee-gap)]\",\n resolvedOrientation === \"vertical\" ? \"flex-col\" : \"flex-row\",\n itemClassName,\n )}\n >\n {children}\n </div>\n <div\n aria-hidden=\"true\"\n inert\n data-slot=\"marquee-item-group\"\n className={cn(\n \"flex shrink-0 items-center justify-around gap-[var(--zui-marquee-gap)]\",\n resolvedOrientation === \"vertical\" ? \"flex-col\" : \"flex-row\",\n itemClassName,\n )}\n >\n {children}\n </div>\n </div>\n </div>\n );\n}\n\nMarquee.displayName = \"Marquee\";\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zentauri-ui/zentauri-components",
3
- "version": "1.7.8",
3
+ "version": "1.7.9",
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/design-system/index.ts CHANGED
@@ -15,6 +15,7 @@ export * from "./dynamic-stepper";
15
15
  export * from "./empty-state";
16
16
  export * from "./file-upload";
17
17
  export * from "./inputs";
18
+ export * from "./marquee";
18
19
  export * from "./modal";
19
20
  export * from "./otp-input";
20
21
  export * from "./pagination";
package/src/design-system/marquee.ts ADDED
@@ -0,0 +1,62 @@
1
+ export const zuiMarqueeBase =
2
+ "group/marquee relative isolate flex min-w-0 overflow-hidden rounded-xl border border-transparent bg-[var(--zui-marquee-bg,transparent)] text-[color:var(--zui-marquee-fg,inherit)] [--zui-marquee-gap:1rem]";
3
+
4
+ export const zuiMarqueeAppearances = {
5
+ default:
6
+ "[--zui-marquee-bg:transparent] [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:[--zui-marquee-fg:#ffffff]",
7
+ outline:
8
+ "border-[color:var(--zui-marquee-outline-border,oklch(86.9%_0.022_252.894))] [--zui-marquee-bg:#ffffff] [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:border-[color:var(--zui-marquee-outline-border-dark,oklch(37.2%_0.044_257.287))] dark:[--zui-marquee-bg:oklch(20.8%_0.042_265.755)] dark:[--zui-marquee-fg:#ffffff]",
9
+ ghost:
10
+ "[--zui-marquee-bg:transparent] [--zui-marquee-fg:oklch(27.9%_0.041_260.031)] dark:[--zui-marquee-fg:oklch(96.8%_0.007_247.896)]",
11
+ card: "border-[color:var(--zui-marquee-card-border,oklch(92.9%_0.013_255.508))] bg-[var(--zui-marquee-card-bg,#ffffff)] shadow-sm shadow-slate-950/5 [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:border-[color:var(--zui-marquee-card-border-dark,oklch(37.2%_0.044_257.287))] dark:bg-[var(--zui-marquee-card-bg-dark,oklch(20.8%_0.042_265.755_/_0.9))] dark:shadow-black/20 dark:[--zui-marquee-fg:#ffffff]",
12
+ separated:
13
+ "border-y border-x-0 rounded-none border-[color:var(--zui-marquee-separated-border,oklch(86.9%_0.022_252.894))] [--zui-marquee-bg:transparent] [--zui-marquee-fg:oklch(20.8%_0.042_265.755)] dark:border-[color:var(--zui-marquee-separated-border-dark,oklch(37.2%_0.044_257.287))] dark:[--zui-marquee-fg:#ffffff]",
14
+ sky: "border-[color:var(--zui-marquee-sky-border,oklch(62.3%_0.214_259.815_/_0.28))] [--zui-marquee-bg:oklch(97.7%_0.013_236.62)] [--zui-marquee-fg:oklch(39.1%_0.09_240.876)] dark:border-[color:var(--zui-marquee-sky-border-dark,oklch(70.7%_0.165_254.624_/_0.3))] dark:[--zui-marquee-bg:oklch(39.1%_0.09_240.876_/_0.28)] dark:[--zui-marquee-fg:oklch(95.1%_0.026_236.824)]",
15
+ rose: "border-[color:var(--zui-marquee-rose-border,oklch(58.6%_0.253_17.585_/_0.24))] [--zui-marquee-bg:oklch(96.9%_0.015_12.422)] [--zui-marquee-fg:oklch(41%_0.159_10.272)] dark:border-[color:var(--zui-marquee-rose-border-dark,oklch(71.2%_0.194_13.428_/_0.3))] dark:[--zui-marquee-bg:oklch(41%_0.159_10.272_/_0.28)] dark:[--zui-marquee-fg:oklch(94.1%_0.03_12.58)]",
16
+ purple:
17
+ "border-[color:var(--zui-marquee-purple-border,oklch(62.7%_0.265_303.9_/_0.24))] [--zui-marquee-bg:oklch(97.7%_0.014_308.299)] [--zui-marquee-fg:oklch(38.1%_0.176_304.987)] dark:border-[color:var(--zui-marquee-purple-border-dark,oklch(71.4%_0.203_305.504_/_0.3))] dark:[--zui-marquee-bg:oklch(38.1%_0.176_304.987_/_0.28)] dark:[--zui-marquee-fg:oklch(94.6%_0.033_307.174)]",
18
+ pink: "border-[color:var(--zui-marquee-pink-border,oklch(65.6%_0.241_354.308_/_0.24))] [--zui-marquee-bg:oklch(97.1%_0.014_343.198)] [--zui-marquee-fg:oklch(40.8%_0.153_2.432)] dark:border-[color:var(--zui-marquee-pink-border-dark,oklch(71.8%_0.202_349.761_/_0.3))] dark:[--zui-marquee-bg:oklch(40.8%_0.153_2.432_/_0.28)] dark:[--zui-marquee-fg:oklch(94.8%_0.028_342.258)]",
19
+ orange:
20
+ "border-[color:var(--zui-marquee-orange-border,oklch(70.5%_0.213_47.604_/_0.26))] [--zui-marquee-bg:oklch(98%_0.016_73.684)] [--zui-marquee-fg:oklch(40.8%_0.123_38.172)] dark:border-[color:var(--zui-marquee-orange-border-dark,oklch(75%_0.183_55.934_/_0.32))] dark:[--zui-marquee-bg:oklch(40.8%_0.123_38.172_/_0.28)] dark:[--zui-marquee-fg:oklch(95.4%_0.038_75.164)]",
21
+ yellow:
22
+ "border-[color:var(--zui-marquee-yellow-border,oklch(79.5%_0.184_86.047_/_0.3))] [--zui-marquee-bg:oklch(98.7%_0.026_102.212)] [--zui-marquee-fg:oklch(42.1%_0.095_57.708)] dark:border-[color:var(--zui-marquee-yellow-border-dark,oklch(85.2%_0.199_91.936_/_0.32))] dark:[--zui-marquee-bg:oklch(42.1%_0.095_57.708_/_0.28)] dark:[--zui-marquee-fg:oklch(97.3%_0.071_103.193)]",
23
+ teal: "border-[color:var(--zui-marquee-teal-border,oklch(70.4%_0.14_182.503_/_0.28))] [--zui-marquee-bg:oklch(98.4%_0.014_180.72)] [--zui-marquee-fg:oklch(38.6%_0.063_188.416)] dark:border-[color:var(--zui-marquee-teal-border-dark,oklch(77.7%_0.152_181.912_/_0.32))] dark:[--zui-marquee-bg:oklch(38.6%_0.063_188.416_/_0.28)] dark:[--zui-marquee-fg:oklch(95.3%_0.051_180.801)]",
24
+ indigo:
25
+ "border-[color:var(--zui-marquee-indigo-border,oklch(58.5%_0.233_277.117_/_0.24))] [--zui-marquee-bg:oklch(96.2%_0.018_272.314)] [--zui-marquee-fg:oklch(35.9%_0.144_278.697)] dark:border-[color:var(--zui-marquee-indigo-border-dark,oklch(67.3%_0.182_276.935_/_0.32))] dark:[--zui-marquee-bg:oklch(35.9%_0.144_278.697_/_0.28)] dark:[--zui-marquee-fg:oklch(93%_0.034_272.788)]",
26
+ emerald:
27
+ "border-[color:var(--zui-marquee-emerald-border,oklch(69.6%_0.17_162.48_/_0.28))] [--zui-marquee-bg:oklch(97.9%_0.021_166.113)] [--zui-marquee-fg:oklch(37.8%_0.077_168.94)] dark:border-[color:var(--zui-marquee-emerald-border-dark,oklch(76.5%_0.177_163.223_/_0.32))] dark:[--zui-marquee-bg:oklch(37.8%_0.077_168.94_/_0.28)] dark:[--zui-marquee-fg:oklch(95%_0.052_163.051)]",
28
+ "gradient-blue":
29
+ "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-blue-from,oklch(62.3%_0.214_259.815))] to-[var(--zui-marquee-gradient-blue-to,oklch(54.6%_0.245_262.881))] [--zui-marquee-fg:#ffffff]",
30
+ "gradient-green":
31
+ "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-green-from,oklch(72.3%_0.219_149.579))] to-[var(--zui-marquee-gradient-green-to,oklch(62.7%_0.194_149.214))] [--zui-marquee-fg:#ffffff]",
32
+ "gradient-red":
33
+ "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-red-from,oklch(63.7%_0.237_25.331))] to-[var(--zui-marquee-gradient-red-to,oklch(57.7%_0.245_27.325))] [--zui-marquee-fg:#ffffff]",
34
+ "gradient-yellow":
35
+ "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-yellow-from,oklch(85.2%_0.199_91.936))] to-[var(--zui-marquee-gradient-yellow-to,oklch(79.5%_0.184_86.047))] [--zui-marquee-fg:oklch(27.9%_0.077_45.635)]",
36
+ "gradient-purple":
37
+ "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-purple-from,oklch(71.4%_0.203_305.504))] to-[var(--zui-marquee-gradient-purple-to,oklch(62.7%_0.265_303.9))] [--zui-marquee-fg:#ffffff]",
38
+ "gradient-teal":
39
+ "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-teal-from,oklch(77.7%_0.152_181.912))] to-[var(--zui-marquee-gradient-teal-to,oklch(70.4%_0.14_182.503))] [--zui-marquee-fg:#ffffff]",
40
+ "gradient-indigo":
41
+ "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-indigo-from,oklch(67.3%_0.182_276.935))] to-[var(--zui-marquee-gradient-indigo-to,oklch(58.5%_0.233_277.117))] [--zui-marquee-fg:#ffffff]",
42
+ "gradient-pink":
43
+ "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-pink-from,oklch(71.8%_0.202_349.761))] to-[var(--zui-marquee-gradient-pink-to,oklch(65.6%_0.241_354.308))] [--zui-marquee-fg:#ffffff]",
44
+ "gradient-orange":
45
+ "border-transparent bg-linear-to-r from-[var(--zui-marquee-gradient-orange-from,oklch(75%_0.183_55.934))] to-[var(--zui-marquee-gradient-orange-to,oklch(70.5%_0.213_47.604))] [--zui-marquee-fg:#ffffff]",
46
+ } as const;
47
+
48
+ export const zuiMarqueeOrientations = {
49
+ horizontal: "w-full flex-row",
50
+ vertical: "h-64 flex-col",
51
+ } as const;
52
+
53
+ export const zuiMarqueeSizes = {
54
+ sm: "p-2 text-xs",
55
+ md: "p-3 text-sm",
56
+ lg: "p-4 text-base",
57
+ } as const;
58
+
59
+ export const zuiMarqueeFade = {
60
+ false: "",
61
+ true: "[mask-image:linear-gradient(to_right,transparent,black_12%,black_88%,transparent)] data-[orientation=vertical]:[mask-image:linear-gradient(to_bottom,transparent,black_12%,black_88%,transparent)]",
62
+ } as const;
package/src/ui/marquee/index.ts ADDED
@@ -0,0 +1,9 @@
1
+ "use client";
2
+
3
+ export { Marquee } from "./marquee";
4
+ export type {
5
+ MarqueeDirection,
6
+ MarqueeProps,
7
+ MarqueeVariantProps,
8
+ } from "./types";
9
+ export { marqueeVariants } from "./variants";
package/src/ui/marquee/marquee.test.tsx ADDED
@@ -0,0 +1,138 @@
1
+ import { render, screen } from "@testing-library/react";
2
+ import { describe, expect, it } from "vitest";
3
+
4
+ import { Marquee } from "./marquee";
5
+
6
+ describe("Marquee", () => {
7
+ it("exposes a display name", () => {
8
+ expect(Marquee.displayName).toBe("Marquee");
9
+ });
10
+
11
+ it("renders children into duplicated marquee groups", () => {
12
+ render(
13
+ <Marquee>
14
+ <span>Acme</span>
15
+ </Marquee>,
16
+ );
17
+
18
+ expect(document.querySelector('[data-slot="marquee"]')).toBeTruthy();
19
+ expect(document.querySelector('[data-slot="marquee-track"]')).toBeTruthy();
20
+ expect(screen.getAllByText("Acme")).toHaveLength(2);
21
+
22
+ const groups = document.querySelectorAll(
23
+ '[data-slot="marquee-item-group"]',
24
+ );
25
+ expect(groups[1]).toHaveAttribute("aria-hidden", "true");
26
+ expect(groups[1]).toHaveAttribute("inert");
27
+ });
28
+
29
+ it("applies horizontal metadata by default", () => {
30
+ render(
31
+ <Marquee data-testid="marquee">
32
+ <span>Default direction</span>
33
+ </Marquee>,
34
+ );
35
+
36
+ const marquee = screen.getByTestId("marquee");
37
+ expect(marquee).toHaveAttribute("data-orientation", "horizontal");
38
+ expect(marquee).toHaveAttribute("data-direction", "left");
39
+ expect(marquee.className).toContain("w-full");
40
+ });
41
+
42
+ it("applies vertical metadata and down direction", () => {
43
+ render(
44
+ <Marquee orientation="vertical" direction="down" data-testid="marquee">
45
+ <span>Vertical direction</span>
46
+ </Marquee>,
47
+ );
48
+
49
+ const marquee = screen.getByTestId("marquee");
50
+ const track = document.querySelector('[data-slot="marquee-track"]');
51
+ expect(marquee).toHaveAttribute("data-orientation", "vertical");
52
+ expect(marquee).toHaveAttribute("data-direction", "down");
53
+ expect(track?.className).toContain("[animation-direction:reverse]");
54
+ });
55
+
56
+ it("infers vertical orientation from up or down directions", () => {
57
+ render(
58
+ <Marquee direction="up" data-testid="marquee">
59
+ <span>Inferred vertical</span>
60
+ </Marquee>,
61
+ );
62
+
63
+ expect(screen.getByTestId("marquee")).toHaveAttribute(
64
+ "data-orientation",
65
+ "vertical",
66
+ );
67
+ });
68
+
69
+ it("maps speed to track animation styles and gap to a CSS custom property", () => {
70
+ render(
71
+ <Marquee speed={42} gap={24} data-testid="marquee">
72
+ <span>Timing</span>
73
+ </Marquee>,
74
+ );
75
+
76
+ const marquee = screen.getByTestId("marquee");
77
+ expect(marquee).toHaveStyle({
78
+ "--zui-marquee-gap": "24px",
79
+ });
80
+
81
+ expect(document.querySelector('[data-slot="marquee-track"]')).toHaveStyle({
82
+ animationDuration: "42s",
83
+ animationName: "zui-marquee-x",
84
+ });
85
+ });
86
+
87
+ it("accepts string gap values", () => {
88
+ render(
89
+ <Marquee gap="2rem" data-testid="marquee">
90
+ <span>String gap</span>
91
+ </Marquee>,
92
+ );
93
+
94
+ expect(screen.getByTestId("marquee")).toHaveStyle({
95
+ "--zui-marquee-gap": "2rem",
96
+ });
97
+ });
98
+
99
+ it("adds pause-on-hover animation control when requested", () => {
100
+ render(
101
+ <Marquee pauseOnHover>
102
+ <span>Pause</span>
103
+ </Marquee>,
104
+ );
105
+
106
+ expect(
107
+ document.querySelector('[data-slot="marquee-track"]')?.className,
108
+ ).toContain("group-hover/marquee:[animation-play-state:paused]");
109
+ });
110
+
111
+ it("applies appearance, size, fade, and custom classes", () => {
112
+ render(
113
+ <Marquee
114
+ appearance="sky"
115
+ className="rounded-2xl"
116
+ fade={false}
117
+ itemClassName="min-w-max"
118
+ size="lg"
119
+ trackClassName="tracking-wide"
120
+ data-testid="marquee"
121
+ >
122
+ <span>Variants</span>
123
+ </Marquee>,
124
+ );
125
+
126
+ const marquee = screen.getByTestId("marquee");
127
+ expect(marquee.className).toContain("rounded-2xl");
128
+ expect(marquee.className).toContain("p-4");
129
+ expect(marquee.className).toContain("--zui-marquee-sky-border");
130
+ expect(marquee.className).not.toContain("mask-image");
131
+ expect(
132
+ document.querySelector('[data-slot="marquee-track"]')?.className,
133
+ ).toContain("tracking-wide");
134
+ expect(
135
+ document.querySelector('[data-slot="marquee-item-group"]')?.className,
136
+ ).toContain("min-w-max");
137
+ });
138
+ });
package/src/ui/marquee/marquee.tsx ADDED
@@ -0,0 +1,114 @@
1
+ "use client";
2
+
3
+ import type { CSSProperties } from "react";
4
+
5
+ import { cn } from "../../lib/utils";
6
+
7
+ import type { MarqueeProps } from "./types";
8
+ import { marqueeVariants } from "./variants";
9
+
10
+ const marqueeKeyframes = `@keyframes zui-marquee-x{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - var(--zui-marquee-gap)/2),0,0)}}@keyframes zui-marquee-y{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,calc(-50% - var(--zui-marquee-gap)/2),0)}}`;
11
+
12
+ function toCssLength(value: number | string | undefined) {
13
+ if (value === undefined) {
14
+ return undefined;
15
+ }
16
+ return typeof value === "number" ? `${value}px` : value;
17
+ }
18
+
19
+ export function Marquee(props: MarqueeProps) {
20
+ const {
21
+ appearance,
22
+ children,
23
+ className,
24
+ direction,
25
+ fade,
26
+ gap,
27
+ itemClassName,
28
+ orientation,
29
+ pauseOnHover = false,
30
+ ref,
31
+ size,
32
+ speed = 30,
33
+ style,
34
+ trackClassName,
35
+ ...rest
36
+ } = props;
37
+
38
+ const resolvedOrientation =
39
+ orientation ??
40
+ (direction === "up" || direction === "down" ? "vertical" : "horizontal");
41
+ const resolvedDirection =
42
+ direction ?? (resolvedOrientation === "vertical" ? "up" : "left");
43
+ const isReverse =
44
+ resolvedDirection === "right" || resolvedDirection === "down";
45
+ const animationName =
46
+ resolvedOrientation === "vertical" ? "zui-marquee-y" : "zui-marquee-x";
47
+ const marqueeStyle = {
48
+ ...(gap !== undefined ? { "--zui-marquee-gap": toCssLength(gap) } : null),
49
+ ...style,
50
+ } as CSSProperties;
51
+
52
+ return (
53
+ <div
54
+ ref={ref}
55
+ data-direction={resolvedDirection}
56
+ data-orientation={resolvedOrientation}
57
+ data-slot="marquee"
58
+ className={cn(
59
+ marqueeVariants({
60
+ appearance,
61
+ fade,
62
+ orientation: resolvedOrientation,
63
+ size,
64
+ }),
65
+ className,
66
+ )}
67
+ style={marqueeStyle}
68
+ {...rest}
69
+ >
70
+ <style>{marqueeKeyframes}</style>
71
+ <div
72
+ data-slot="marquee-track"
73
+ className={cn(
74
+ "flex shrink-0 gap-[var(--zui-marquee-gap)] will-change-transform [animation-iteration-count:infinite] [animation-timing-function:linear] motion-reduce:[animation-play-state:paused]",
75
+ resolvedOrientation === "vertical" ? "flex-col" : "w-max flex-row",
76
+ pauseOnHover && "group-hover/marquee:[animation-play-state:paused]",
77
+ isReverse && "[animation-direction:reverse]",
78
+ trackClassName,
79
+ )}
80
+ style={
81
+ {
82
+ animationDuration: `${speed}s`,
83
+ animationName,
84
+ } as CSSProperties
85
+ }
86
+ >
87
+ <div
88
+ data-slot="marquee-item-group"
89
+ className={cn(
90
+ "flex shrink-0 items-center justify-around gap-[var(--zui-marquee-gap)]",
91
+ resolvedOrientation === "vertical" ? "flex-col" : "flex-row",
92
+ itemClassName,
93
+ )}
94
+ >
95
+ {children}
96
+ </div>
97
+ <div
98
+ aria-hidden="true"
99
+ inert
100
+ data-slot="marquee-item-group"
101
+ className={cn(
102
+ "flex shrink-0 items-center justify-around gap-[var(--zui-marquee-gap)]",
103
+ resolvedOrientation === "vertical" ? "flex-col" : "flex-row",
104
+ itemClassName,
105
+ )}
106
+ >
107
+ {children}
108
+ </div>
109
+ </div>
110
+ </div>
111
+ );
112
+ }
113
+
114
+ Marquee.displayName = "Marquee";
package/src/ui/marquee/types.ts ADDED
@@ -0,0 +1,19 @@
1
+ import type { VariantProps } from "class-variance-authority";
2
+ import type { ComponentPropsWithRef, ReactNode } from "react";
3
+
4
+ import type { marqueeVariants } from "./variants";
5
+
6
+ export type MarqueeVariantProps = VariantProps<typeof marqueeVariants>;
7
+
8
+ export type MarqueeDirection = "left" | "right" | "up" | "down";
9
+
10
+ export type MarqueeProps = MarqueeVariantProps &
11
+ Omit<ComponentPropsWithRef<"div">, "children"> & {
12
+ children: ReactNode;
13
+ direction?: MarqueeDirection;
14
+ gap?: number | string;
15
+ pauseOnHover?: boolean;
16
+ speed?: number;
17
+ trackClassName?: string;
18
+ itemClassName?: string;
19
+ };
package/src/ui/marquee/variants.ts ADDED
@@ -0,0 +1,24 @@
1
+ import { cva } from "class-variance-authority";
2
+
3
+ import {
4
+ zuiMarqueeAppearances,
5
+ zuiMarqueeBase,
6
+ zuiMarqueeFade,
7
+ zuiMarqueeOrientations,
8
+ zuiMarqueeSizes,
9
+ } from "../../design-system/marquee";
10
+
11
+ export const marqueeVariants = cva(zuiMarqueeBase, {
12
+ variants: {
13
+ appearance: zuiMarqueeAppearances,
14
+ fade: zuiMarqueeFade,
15
+ orientation: zuiMarqueeOrientations,
16
+ size: zuiMarqueeSizes,
17
+ },
18
+ defaultVariants: {
19
+ appearance: "default",
20
+ fade: true,
21
+ orientation: "horizontal",
22
+ size: "md",
23
+ },
24
+ });