mizu-ui 0.1.0

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 (127) hide show
  1. package/README.md +102 -0
  2. package/dist/composite/Accordion.d.ts +13 -0
  3. package/dist/composite/Accordion.d.ts.map +1 -0
  4. package/dist/composite/Accordion.js +54 -0
  5. package/dist/composite/Accordion.js.map +1 -0
  6. package/dist/composite/Dialog.d.ts +18 -0
  7. package/dist/composite/Dialog.d.ts.map +1 -0
  8. package/dist/composite/Dialog.js +113 -0
  9. package/dist/composite/Dialog.js.map +1 -0
  10. package/dist/composite/Nav.d.ts +13 -0
  11. package/dist/composite/Nav.d.ts.map +1 -0
  12. package/dist/composite/Nav.js +142 -0
  13. package/dist/composite/Nav.js.map +1 -0
  14. package/dist/composite/Tabs.d.ts +24 -0
  15. package/dist/composite/Tabs.d.ts.map +1 -0
  16. package/dist/composite/Tabs.js +53 -0
  17. package/dist/composite/Tabs.js.map +1 -0
  18. package/dist/feedback/CopyButton.d.ts +6 -0
  19. package/dist/feedback/CopyButton.d.ts.map +1 -0
  20. package/dist/feedback/CopyButton.js +50 -0
  21. package/dist/feedback/CopyButton.js.map +1 -0
  22. package/dist/feedback/CountUp.d.ts +10 -0
  23. package/dist/feedback/CountUp.d.ts.map +1 -0
  24. package/dist/feedback/CountUp.js +35 -0
  25. package/dist/feedback/CountUp.js.map +1 -0
  26. package/dist/feedback/Toast.d.ts +14 -0
  27. package/dist/feedback/Toast.d.ts.map +1 -0
  28. package/dist/feedback/Toast.js +61 -0
  29. package/dist/feedback/Toast.js.map +1 -0
  30. package/dist/index.d.ts +31 -0
  31. package/dist/index.d.ts.map +1 -0
  32. package/dist/index.js +31 -0
  33. package/dist/index.js.map +1 -0
  34. package/dist/lab/Pinfield.d.ts +9 -0
  35. package/dist/lab/Pinfield.d.ts.map +1 -0
  36. package/dist/lab/Pinfield.js +100 -0
  37. package/dist/lab/Pinfield.js.map +1 -0
  38. package/dist/lab/RippleSurface.d.ts +6 -0
  39. package/dist/lab/RippleSurface.d.ts.map +1 -0
  40. package/dist/lab/RippleSurface.js +102 -0
  41. package/dist/lab/RippleSurface.js.map +1 -0
  42. package/dist/lab/Signal.d.ts +8 -0
  43. package/dist/lab/Signal.d.ts.map +1 -0
  44. package/dist/lab/Signal.js +101 -0
  45. package/dist/lab/Signal.js.map +1 -0
  46. package/dist/lab/useCanvas.d.ts +3 -0
  47. package/dist/lab/useCanvas.d.ts.map +1 -0
  48. package/dist/lab/useCanvas.js +63 -0
  49. package/dist/lab/useCanvas.js.map +1 -0
  50. package/dist/motion/Magnetic.d.ts +8 -0
  51. package/dist/motion/Magnetic.d.ts.map +1 -0
  52. package/dist/motion/Magnetic.js +22 -0
  53. package/dist/motion/Magnetic.js.map +1 -0
  54. package/dist/motion/Marquee.d.ts +11 -0
  55. package/dist/motion/Marquee.d.ts.map +1 -0
  56. package/dist/motion/Marquee.js +14 -0
  57. package/dist/motion/Marquee.js.map +1 -0
  58. package/dist/motion/MaskLine.d.ts +9 -0
  59. package/dist/motion/MaskLine.d.ts.map +1 -0
  60. package/dist/motion/MaskLine.js +8 -0
  61. package/dist/motion/MaskLine.js.map +1 -0
  62. package/dist/motion/PageWipe.d.ts +10 -0
  63. package/dist/motion/PageWipe.d.ts.map +1 -0
  64. package/dist/motion/PageWipe.js +60 -0
  65. package/dist/motion/PageWipe.js.map +1 -0
  66. package/dist/motion/Reveal.d.ts +12 -0
  67. package/dist/motion/Reveal.d.ts.map +1 -0
  68. package/dist/motion/Reveal.js +8 -0
  69. package/dist/motion/Reveal.js.map +1 -0
  70. package/dist/motion/easings.d.ts +4 -0
  71. package/dist/motion/easings.d.ts.map +1 -0
  72. package/dist/motion/easings.js +4 -0
  73. package/dist/motion/easings.js.map +1 -0
  74. package/dist/type/GhostWord.d.ts +7 -0
  75. package/dist/type/GhostWord.d.ts.map +1 -0
  76. package/dist/type/GhostWord.js +5 -0
  77. package/dist/type/GhostWord.js.map +1 -0
  78. package/dist/type/SoftType.d.ts +11 -0
  79. package/dist/type/SoftType.d.ts.map +1 -0
  80. package/dist/type/SoftType.js +27 -0
  81. package/dist/type/SoftType.js.map +1 -0
  82. package/dist/type/Specimen.d.ts +13 -0
  83. package/dist/type/Specimen.d.ts.map +1 -0
  84. package/dist/type/Specimen.js +82 -0
  85. package/dist/type/Specimen.js.map +1 -0
  86. package/dist/type/WaveText.d.ts +10 -0
  87. package/dist/type/WaveText.d.ts.map +1 -0
  88. package/dist/type/WaveText.js +37 -0
  89. package/dist/type/WaveText.js.map +1 -0
  90. package/dist/ui/Badge.d.ts +10 -0
  91. package/dist/ui/Badge.d.ts.map +1 -0
  92. package/dist/ui/Badge.js +26 -0
  93. package/dist/ui/Badge.js.map +1 -0
  94. package/dist/ui/Button.d.ts +19 -0
  95. package/dist/ui/Button.d.ts.map +1 -0
  96. package/dist/ui/Button.js +47 -0
  97. package/dist/ui/Button.js.map +1 -0
  98. package/dist/ui/Frame.d.ts +9 -0
  99. package/dist/ui/Frame.d.ts.map +1 -0
  100. package/dist/ui/Frame.js +37 -0
  101. package/dist/ui/Frame.js.map +1 -0
  102. package/dist/ui/Mark.d.ts +9 -0
  103. package/dist/ui/Mark.d.ts.map +1 -0
  104. package/dist/ui/Mark.js +19 -0
  105. package/dist/ui/Mark.js.map +1 -0
  106. package/dist/ui/Rule.d.ts +8 -0
  107. package/dist/ui/Rule.d.ts.map +1 -0
  108. package/dist/ui/Rule.js +22 -0
  109. package/dist/ui/Rule.js.map +1 -0
  110. package/dist/ui/SectionTag.d.ts +10 -0
  111. package/dist/ui/SectionTag.d.ts.map +1 -0
  112. package/dist/ui/SectionTag.js +17 -0
  113. package/dist/ui/SectionTag.js.map +1 -0
  114. package/dist/ui/Slider.d.ts +13 -0
  115. package/dist/ui/Slider.d.ts.map +1 -0
  116. package/dist/ui/Slider.js +18 -0
  117. package/dist/ui/Slider.js.map +1 -0
  118. package/dist/ui/Spinner.d.ts +8 -0
  119. package/dist/ui/Spinner.d.ts.map +1 -0
  120. package/dist/ui/Spinner.js +9 -0
  121. package/dist/ui/Spinner.js.map +1 -0
  122. package/dist/ui/Tooltip.d.ts +9 -0
  123. package/dist/ui/Tooltip.d.ts.map +1 -0
  124. package/dist/ui/Tooltip.js +5 -0
  125. package/dist/ui/Tooltip.js.map +1 -0
  126. package/package.json +44 -0
  127. package/styles.css +280 -0
package/README.md ADDED
@@ -0,0 +1,102 @@
1
+ # mizu-ui
2
+
3
+ The first generation of the Mizu interface language — surfaces, motion and systems for React.
4
+
5
+ Mizu is not a generic UI kit. It is a curated collection of components with a point of view: warm ink-and-paper surfaces, hairline rules, mono microcopy, a signature diamond mark, and motion that means something.
6
+
7
+ ## Install
8
+
9
+ ```bash
10
+ npm install mizu-ui
11
+ # or
12
+ bun add mizu-ui
13
+ ```
14
+
15
+ Peer dependencies: `react` (>=18), `react-dom` (>=18), `motion` (>=11).
16
+
17
+ ## Setup
18
+
19
+ Import the stylesheet once, at the root of your app. It ships the design tokens and self-hosted fonts (Archivo Variable, Instrument Serif, JetBrains Mono).
20
+
21
+ ```tsx
22
+ import "mizu-ui/styles.css";
23
+ ```
24
+
25
+ Wrap your app in the theme surface class:
26
+
27
+ ```tsx
28
+ export default function RootLayout({ children }) {
29
+ return (
30
+ <html lang="en">
31
+ <body className="mizu-root">{children}</body>
32
+ </html>
33
+ );
34
+ }
35
+ ```
36
+
37
+ ## Theming
38
+
39
+ Dark is the default. For a light surface, set `data-theme="light"` on any ancestor:
40
+
41
+ ```tsx
42
+ <body className="mizu-root" data-theme="light">
43
+ ```
44
+
45
+ All components read from CSS custom properties (`--mizu-ink`, `--mizu-accent`, …), so you can re-theme any component by overriding tokens on your own selector:
46
+
47
+ ```css
48
+ .my-surface {
49
+ --mizu-ink: #101418;
50
+ --mizu-paper: #eef2f5;
51
+ --mizu-accent: #2f6bff;
52
+ }
53
+ ```
54
+
55
+ ## Components
56
+
57
+ ### Foundation
58
+ - `Button` / `ButtonLink` — solid / ghost / inverse, loading state, arrow micro-motion
59
+ - `SectionTag` — mono label with diamond marker
60
+ - `Rule` — hairline divider with optional node and label
61
+ - `Badge` — mono status chip
62
+ - `Mark` — the Mizu diamond glyph
63
+ - `Frame` — crop-mark frame for media
64
+ - `Slider` — diamond-thumb range control
65
+ - `Tooltip` — mono tooltip
66
+
67
+ ### Motion
68
+ - `MaskLine` — masked line-wipe text reveal
69
+ - `Reveal` — scroll-triggered entrance
70
+ - `Magnetic` — spring-follow pointer wrapper
71
+ - `Marquee` — seamless ticker
72
+ - `PageWipeProvider` / `usePageWipe` — full-screen page transition
73
+
74
+ ### Type systems
75
+ - `Specimen` — live type tester
76
+ - `SoftType` — variable-font canvas engine
77
+ - `WaveText` — pointer-reactive kinetic text
78
+ - `GhostWord` — outlined display word that fills on hover
79
+
80
+ ### Instruments
81
+ - `Pinfield` — pulse-propagating dot grid
82
+ - `Signal` — draggable waveform scrubber
83
+ - `RippleSurface` — ambient ripple field
84
+
85
+ ### Feedback
86
+ - `CountUp` — eased number animation
87
+ - `CopyButton` — clipboard with confirmation morph
88
+ - `ToastProvider` / `useToast` — toast system
89
+
90
+ ### Composites
91
+ - `Accordion` / `AccordionItem`
92
+ - `Tabs` / `TabsList` / `TabsTrigger` / `TabsPanel`
93
+ - `Dialog` / `DialogTitle` / `DialogBody` / `DialogFooter` / `DialogClose`
94
+ - `Nav` — thread header with scroll progress and chapter tracking
95
+
96
+ ## Reduced motion
97
+
98
+ Every component respects `prefers-reduced-motion`. Canvas instruments render a single static frame; springs and wipes resolve instantly. You can also force it with `reducedMotion="user"` on `MotionConfig` from `motion`.
99
+
100
+ ## License
101
+
102
+ MIT
package/dist/composite/Accordion.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { type ReactNode } from "react";
2
+ export declare function Accordion({ children, allowMultiple, className, }: {
3
+ children: ReactNode;
4
+ allowMultiple?: boolean;
5
+ className?: string;
6
+ }): import("react").JSX.Element;
7
+ export declare function AccordionItem({ value, title, children, className, }: {
8
+ value: string;
9
+ title: string;
10
+ children: ReactNode;
11
+ className?: string;
12
+ }): import("react").JSX.Element;
13
+ //# sourceMappingURL=Accordion.d.ts.map
package/dist/composite/Accordion.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/composite/Accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAW5E,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,aAAqB,EACrB,SAAc,GACf,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAsBA;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAc,GACf,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAyEA"}
package/dist/composite/Accordion.js ADDED
@@ -0,0 +1,54 @@
1
+ "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { createContext, useContext, useState } from "react";
4
+ import { AnimatePresence, motion } from "motion/react";
5
+ import { EASE_EXPO } from "../motion/easings";
6
+ const AccordionContext = createContext(null);
7
+ export function Accordion({ children, allowMultiple = false, className = "", }) {
8
+ const [open, setOpen] = useState(new Set());
9
+ const toggle = (value) => {
10
+ setOpen((prev) => {
11
+ const next = new Set(allowMultiple ? prev : []);
12
+ if (prev.has(value)) {
13
+ next.delete(value);
14
+ }
15
+ else {
16
+ next.add(value);
17
+ }
18
+ return next;
19
+ });
20
+ };
21
+ return (_jsx(AccordionContext.Provider, { value: { open, toggle }, children: _jsx("div", { className: className, style: { borderTop: "1px solid var(--mizu-line)" }, children: children }) }));
22
+ }
23
+ export function AccordionItem({ value, title, children, className = "", }) {
24
+ const ctx = useContext(AccordionContext);
25
+ if (!ctx)
26
+ throw new Error("AccordionItem must be used within <Accordion>");
27
+ const isOpen = ctx.open.has(value);
28
+ const buttonId = `mizu-acc-${value}-btn`;
29
+ const panelId = `mizu-acc-${value}-panel`;
30
+ return (_jsxs("div", { className: className, style: { borderBottom: "1px solid var(--mizu-line)" }, children: [_jsx("h3", { style: { margin: 0 }, children: _jsxs("button", { id: buttonId, "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => ctx.toggle(value), style: {
31
+ display: "flex",
32
+ width: "100%",
33
+ alignItems: "center",
34
+ gap: 16,
35
+ padding: "22px 4px",
36
+ background: "transparent",
37
+ border: "none",
38
+ cursor: "pointer",
39
+ textAlign: "left",
40
+ }, children: [_jsx(motion.span, { "aria-hidden": true, animate: { rotate: isOpen ? 0 : 45, scale: isOpen ? 1 : 0.72 }, transition: { duration: 0.35, ease: EASE_EXPO }, style: {
41
+ width: 7,
42
+ height: 7,
43
+ flexShrink: 0,
44
+ background: isOpen ? "var(--mizu-accent)" : "var(--mizu-muted)",
45
+ } }), _jsx("span", { style: {
46
+ fontFamily: "var(--mizu-font-display)",
47
+ fontSize: 20,
48
+ fontWeight: 700,
49
+ letterSpacing: "-0.01em",
50
+ color: "var(--mizu-paper)",
51
+ transition: "color 250ms ease",
52
+ }, children: title })] }) }), _jsx(AnimatePresence, { initial: false, children: isOpen && (_jsx(motion.div, { id: panelId, role: "region", "aria-labelledby": buttonId, initial: { height: 0, opacity: 0 }, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.45, ease: EASE_EXPO }, style: { overflow: "hidden" }, children: _jsx("div", { style: { padding: "2px 4px 28px 27px", color: "var(--mizu-muted)", lineHeight: 1.7 }, children: children }) })) })] }));
53
+ }
54
+ //# sourceMappingURL=Accordion.js.map
package/dist/composite/Accordion.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/composite/Accordion.tsx"],"names":[],"mappings":"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"}
package/dist/composite/Dialog.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ import { type ReactNode } from "react";
2
+ export declare function Dialog({ open, onOpenChange, children, label, }: {
3
+ open: boolean;
4
+ onOpenChange: (open: boolean) => void;
5
+ children: ReactNode;
6
+ label: string;
7
+ }): import("react").ReactPortal | null;
8
+ export declare function DialogTitle({ children }: {
9
+ children: ReactNode;
10
+ }): import("react").JSX.Element;
11
+ export declare function DialogBody({ children }: {
12
+ children: ReactNode;
13
+ }): import("react").JSX.Element;
14
+ export declare function DialogFooter({ children }: {
15
+ children: ReactNode;
16
+ }): import("react").JSX.Element;
17
+ export declare function DialogClose(): import("react").JSX.Element;
18
+ //# sourceMappingURL=Dialog.d.ts.map
package/dist/composite/Dialog.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/composite/Dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAcrF,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,KAAK,GACN,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf,sCAgHA;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAehE;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAI/D;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAMjE;AAED,wBAAgB,WAAW,gCA4B1B"}
package/dist/composite/Dialog.js ADDED
@@ -0,0 +1,113 @@
1
+ "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { createContext, useContext, useEffect, useRef } from "react";
4
+ import { createPortal } from "react-dom";
5
+ import { AnimatePresence, motion, useReducedMotion } from "motion/react";
6
+ import { EASE_EXPO } from "../motion/easings";
7
+ const DialogContext = createContext(null);
8
+ const FOCUSABLE = 'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])';
9
+ export function Dialog({ open, onOpenChange, children, label, }) {
10
+ const reduce = useReducedMotion();
11
+ const panelRef = useRef(null);
12
+ const restoreRef = useRef(null);
13
+ useEffect(() => {
14
+ if (!open)
15
+ return;
16
+ restoreRef.current = document.activeElement;
17
+ const prevOverflow = document.body.style.overflow;
18
+ document.body.style.overflow = "hidden";
19
+ const panel = panelRef.current;
20
+ if (panel) {
21
+ const first = panel.querySelector(FOCUSABLE);
22
+ (first ?? panel).focus();
23
+ }
24
+ const onKey = (e) => {
25
+ if (e.key === "Escape") {
26
+ e.stopPropagation();
27
+ onOpenChange(false);
28
+ return;
29
+ }
30
+ if (e.key !== "Tab" || !panel)
31
+ return;
32
+ const items = Array.from(panel.querySelectorAll(FOCUSABLE)).filter((el) => el.offsetParent !== null);
33
+ if (items.length === 0)
34
+ return;
35
+ const first = items[0];
36
+ const last = items[items.length - 1];
37
+ if (e.shiftKey && document.activeElement === first) {
38
+ e.preventDefault();
39
+ last.focus();
40
+ }
41
+ else if (!e.shiftKey && document.activeElement === last) {
42
+ e.preventDefault();
43
+ first.focus();
44
+ }
45
+ };
46
+ document.addEventListener("keydown", onKey, true);
47
+ return () => {
48
+ document.body.style.overflow = prevOverflow;
49
+ document.removeEventListener("keydown", onKey, true);
50
+ restoreRef.current?.focus();
51
+ };
52
+ }, [open, onOpenChange]);
53
+ if (typeof document === "undefined")
54
+ return null;
55
+ return createPortal(_jsx(AnimatePresence, { children: open && (_jsxs("div", { style: { position: "fixed", inset: 0, zIndex: "var(--mizu-z-overlay)" }, role: "presentation", children: [_jsx(motion.div, { "aria-hidden": true, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: reduce ? 0 : 0.35 }, onClick: () => onOpenChange(false), style: {
56
+ position: "absolute",
57
+ inset: 0,
58
+ background: "rgba(15, 14, 12, 0.72)",
59
+ backdropFilter: reduce ? "none" : "blur(2px)",
60
+ } }), _jsx("div", { style: {
61
+ position: "absolute",
62
+ inset: 0,
63
+ display: "flex",
64
+ alignItems: "center",
65
+ justifyContent: "center",
66
+ padding: 20,
67
+ pointerEvents: "none",
68
+ }, children: _jsx(motion.div, { ref: panelRef, role: "dialog", "aria-modal": "true", "aria-label": label, tabIndex: -1, initial: reduce ? { opacity: 0 } : { opacity: 0, y: 32, scale: 0.98 }, animate: reduce ? { opacity: 1 } : { opacity: 1, y: 0, scale: 1 }, exit: reduce ? { opacity: 0 } : { opacity: 0, y: 16, scale: 0.98 }, transition: { duration: 0.45, ease: EASE_EXPO }, style: {
69
+ pointerEvents: "auto",
70
+ width: "min(520px, 100%)",
71
+ maxHeight: "min(84vh, 720px)",
72
+ overflowY: "auto",
73
+ background: "var(--mizu-ink-2)",
74
+ border: "1px solid var(--mizu-line-bright)",
75
+ padding: "36px 32px 32px",
76
+ outline: "none",
77
+ }, children: _jsx(DialogContext.Provider, { value: { onClose: () => onOpenChange(false) }, children: children }) }) })] })) }), document.body);
78
+ }
79
+ export function DialogTitle({ children }) {
80
+ return (_jsx("h2", { style: {
81
+ margin: 0,
82
+ fontFamily: "var(--mizu-font-display)",
83
+ fontSize: 28,
84
+ fontWeight: 800,
85
+ letterSpacing: "-0.01em",
86
+ color: "var(--mizu-paper)",
87
+ }, children: children }));
88
+ }
89
+ export function DialogBody({ children }) {
90
+ return (_jsx("div", { style: { marginTop: 18, color: "var(--mizu-muted)", lineHeight: 1.7 }, children: children }));
91
+ }
92
+ export function DialogFooter({ children }) {
93
+ return (_jsx("div", { style: { marginTop: 30, display: "flex", justifyContent: "flex-end", gap: 12 }, children: children }));
94
+ }
95
+ export function DialogClose() {
96
+ const ctx = useContext(DialogContext);
97
+ return (_jsx("button", { onClick: () => ctx?.onClose(), "aria-label": "Close dialog", style: {
98
+ position: "absolute",
99
+ top: 14,
100
+ right: 14,
101
+ display: "flex",
102
+ alignItems: "center",
103
+ justifyContent: "center",
104
+ width: 34,
105
+ height: 34,
106
+ background: "transparent",
107
+ border: "1px solid var(--mizu-line-bright)",
108
+ color: "var(--mizu-muted)",
109
+ cursor: "pointer",
110
+ transition: "color 250ms ease, border-color 250ms ease",
111
+ }, className: "mizu-dialog-close", children: _jsx("svg", { width: "10", height: "10", viewBox: "0 0 12 12", fill: "none", "aria-hidden": true, children: _jsx("path", { d: "M2 2L10 10M10 2L2 10", stroke: "currentColor", strokeWidth: "1.5" }) }) }));
112
+ }
113
+ //# sourceMappingURL=Dialog.js.map
package/dist/composite/Dialog.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../src/composite/Dialog.tsx"],"names":[],"mappings":"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"}
package/dist/composite/Nav.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { type ReactNode } from "react";
2
+ export type NavLink = {
3
+ href: string;
4
+ label: string;
5
+ };
6
+ export declare function Nav({ brand, links, currentPath, trackChapters, className, }: {
7
+ brand: ReactNode;
8
+ links: NavLink[];
9
+ currentPath?: string;
10
+ trackChapters?: boolean;
11
+ className?: string;
12
+ }): import("react").JSX.Element;
13
+ //# sourceMappingURL=Nav.d.ts.map
package/dist/composite/Nav.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Nav.d.ts","sourceRoot":"","sources":["../../src/composite/Nav.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpE,MAAM,MAAM,OAAO,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtD,wBAAgB,GAAG,CAAC,EAClB,KAAK,EACL,KAAK,EACL,WAAW,EACX,aAAoB,EACpB,SAAc,GACf,EAAE;IACD,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAoQA"}
package/dist/composite/Nav.js ADDED
@@ -0,0 +1,142 @@
1
+ "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
+ import { useEffect, useRef, useState } from "react";
4
+ import { AnimatePresence, motion, useScroll, useSpring, useTransform } from "motion/react";
5
+ export function Nav({ brand, links, currentPath, trackChapters = true, className = "", }) {
6
+ const path = currentPath ?? (typeof window !== "undefined" ? window.location.pathname : "");
7
+ const { scrollYProgress } = useScroll();
8
+ const scaleX = useSpring(scrollYProgress, { stiffness: 140, damping: 28, mass: 0.4 });
9
+ const nodeLeft = useTransform(scaleX, (v) => `calc(${(v * 100).toFixed(3)}% - 3px)`);
10
+ const [chapter, setChapter] = useState("");
11
+ const [open, setOpen] = useState(false);
12
+ const closeRef = useRef(null);
13
+ useEffect(() => {
14
+ if (!trackChapters)
15
+ return;
16
+ const sections = Array.from(document.querySelectorAll("[data-chapter]"));
17
+ if (sections.length === 0)
18
+ return;
19
+ const io = new IntersectionObserver((entries) => {
20
+ for (const e of entries) {
21
+ if (e.isIntersecting)
22
+ setChapter(e.target.getAttribute("data-chapter") ?? "");
23
+ }
24
+ }, { rootMargin: "-40% 0px -55% 0px" });
25
+ sections.forEach((s) => io.observe(s));
26
+ return () => io.disconnect();
27
+ }, [trackChapters]);
28
+ useEffect(() => {
29
+ document.body.style.overflow = open ? "hidden" : "";
30
+ if (open)
31
+ closeRef.current?.focus();
32
+ const onKey = (e) => {
33
+ if (e.key === "Escape")
34
+ setOpen(false);
35
+ };
36
+ window.addEventListener("keydown", onKey);
37
+ return () => {
38
+ document.body.style.overflow = "";
39
+ window.removeEventListener("keydown", onKey);
40
+ };
41
+ }, [open]);
42
+ return (_jsxs(_Fragment, { children: [_jsxs("header", { className: className, style: { position: "fixed", insetInline: 0, top: 0, zIndex: 80 }, children: [_jsx("div", { style: {
43
+ background: "color-mix(in srgb, var(--mizu-ink) 85%, transparent)",
44
+ backdropFilter: "blur(12px)",
45
+ }, children: _jsxs("div", { style: {
46
+ position: "relative",
47
+ display: "flex",
48
+ height: 64,
49
+ alignItems: "center",
50
+ justifyContent: "space-between",
51
+ paddingInline: "var(--mizu-space-5)",
52
+ }, className: "mizu-nav-inner", children: [_jsx("span", { style: { display: "inline-flex" }, children: brand }), _jsx("div", { style: {
53
+ position: "absolute",
54
+ left: "50%",
55
+ transform: "translateX(-50%)",
56
+ }, className: "mizu-nav-chapter", children: chapter && (_jsx(AnimatePresence, { mode: "wait", children: _jsx(motion.span, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -8 }, transition: { duration: 0.3 }, style: {
57
+ fontFamily: "var(--mizu-font-mono)",
58
+ fontSize: 10,
59
+ letterSpacing: "0.34em",
60
+ textTransform: "uppercase",
61
+ color: "var(--mizu-faint)",
62
+ }, children: chapter }, chapter) })) }), _jsx("nav", { "aria-label": "Primary", className: "mizu-nav-links", children: links.map((l) => {
63
+ const active = path === l.href;
64
+ return (_jsxs("a", { href: l.href, style: {
65
+ display: "inline-flex",
66
+ alignItems: "center",
67
+ columnGap: 10,
68
+ fontFamily: "var(--mizu-font-mono)",
69
+ fontSize: 11,
70
+ letterSpacing: "0.22em",
71
+ textTransform: "uppercase",
72
+ textDecoration: "none",
73
+ color: active ? "var(--mizu-paper)" : "var(--mizu-muted)",
74
+ }, children: [_jsx("span", { "aria-hidden": true, style: {
75
+ width: "4px",
76
+ height: "4px",
77
+ transform: "rotate(45deg)",
78
+ background: active ? "var(--mizu-accent)" : "var(--mizu-line-bright)",
79
+ transitionProperty: "background",
80
+ transitionDuration: "300ms",
81
+ transitionTimingFunction: "ease",
82
+ transitionDelay: "0s",
83
+ transitionBehavior: "normal",
84
+ } }), l.label] }, l.href));
85
+ }) }), _jsx("button", { onClick: () => setOpen(true), "aria-label": "Open menu", "aria-expanded": open, className: "mizu-nav-burger", type: "button", style: {
86
+ background: "transparent",
87
+ border: "none",
88
+ fontFamily: "var(--mizu-font-mono)",
89
+ fontSize: 11,
90
+ letterSpacing: "0.22em",
91
+ textTransform: "uppercase",
92
+ color: "var(--mizu-muted)",
93
+ cursor: "pointer",
94
+ }, children: "Menu" })] }) }), _jsxs("div", { style: { position: "relative", height: 1, width: "100%", background: "var(--mizu-line)" }, children: [_jsx(motion.div, { "aria-hidden": true, style: { position: "absolute", inset: 0, originX: 0, background: "var(--mizu-accent)", scaleX } }), _jsx(motion.div, { "aria-hidden": true, style: {
95
+ position: "absolute",
96
+ top: -3,
97
+ left: nodeLeft,
98
+ width: 7,
99
+ height: 7,
100
+ rotate: 45,
101
+ background: "var(--mizu-accent)",
102
+ } })] })] }), _jsx(AnimatePresence, { children: open && (_jsxs(motion.div, { className: "mizu-nav-overlay", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.3 }, style: {
103
+ position: "fixed",
104
+ inset: 0,
105
+ zIndex: 85,
106
+ display: "flex",
107
+ flexDirection: "column",
108
+ background: "var(--mizu-ink)",
109
+ padding: "20px var(--mizu-space-5)",
110
+ }, children: [_jsxs("div", { style: { display: "flex", height: 64, alignItems: "center", justifyContent: "space-between" }, children: [brand, _jsx("button", { ref: closeRef, onClick: () => setOpen(false), style: {
111
+ background: "transparent",
112
+ border: "none",
113
+ fontFamily: "var(--mizu-font-mono)",
114
+ fontSize: 11,
115
+ letterSpacing: "0.22em",
116
+ textTransform: "uppercase",
117
+ color: "var(--mizu-muted)",
118
+ cursor: "pointer",
119
+ }, children: "Close" })] }), _jsx("nav", { "aria-label": "Menu", style: { display: "flex", flex: 1, flexDirection: "column", justifyContent: "center" }, children: links.map((l, i) => (_jsxs("a", { href: l.href, onClick: () => setOpen(false), style: {
120
+ display: "flex",
121
+ alignItems: "baseline",
122
+ gap: 20,
123
+ borderBottom: "1px solid var(--mizu-line)",
124
+ padding: "24px 0",
125
+ textDecoration: "none",
126
+ color: "var(--mizu-paper)",
127
+ fontFamily: "var(--mizu-font-display)",
128
+ }, className: "mizu-nav-overlay-link", children: [_jsxs("span", { style: { fontFamily: "var(--mizu-font-mono)", fontSize: 12, color: "var(--mizu-accent)" }, children: ["0", i + 1] }), _jsx("span", { style: {
129
+ fontSize: 44,
130
+ fontWeight: 900,
131
+ fontStretch: "118%",
132
+ letterSpacing: "-0.01em",
133
+ transition: "transform 500ms cubic-bezier(0.16,1,0.3,1)",
134
+ }, children: l.label })] }, l.href))) }), _jsx("p", { style: {
135
+ fontFamily: "var(--mizu-font-mono)",
136
+ fontSize: 10,
137
+ letterSpacing: "0.32em",
138
+ textTransform: "uppercase",
139
+ color: "var(--mizu-faint)",
140
+ }, children: "Mizu \u2014 Interface Archive" })] })) })] }));
141
+ }
142
+ //# sourceMappingURL=Nav.js.map
package/dist/composite/Nav.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Nav.js","sourceRoot":"","sources":["../../src/composite/Nav.tsx"],"names":[],"mappings":"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"}
package/dist/composite/Tabs.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ import { type ReactNode } from "react";
2
+ export declare function Tabs({ children, value, defaultValue, onChange, className, }: {
3
+ children: ReactNode;
4
+ value?: string;
5
+ defaultValue?: string;
6
+ onChange?: (v: string) => void;
7
+ className?: string;
8
+ }): import("react").JSX.Element;
9
+ export declare function TabsList({ children, label, className, }: {
10
+ children: ReactNode;
11
+ label: string;
12
+ className?: string;
13
+ }): import("react").JSX.Element;
14
+ export declare function TabsTrigger({ value, children, className, }: {
15
+ value: string;
16
+ children: ReactNode;
17
+ className?: string;
18
+ }): import("react").JSX.Element;
19
+ export declare function TabsPanel({ value, children, className, }: {
20
+ value: string;
21
+ children: ReactNode;
22
+ className?: string;
23
+ }): import("react").JSX.Element | null;
24
+ //# sourceMappingURL=Tabs.d.ts.map
package/dist/composite/Tabs.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/composite/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAW5E,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,KAAK,EACL,YAAiB,EACjB,QAAQ,EACR,SAAc,GACf,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAcA;AAED,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,KAAK,EACL,SAAc,GACf,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAgBA;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,SAAc,GACf,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAwCA;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,SAAc,GACf,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,sCA0BA"}
package/dist/composite/Tabs.js ADDED
@@ -0,0 +1,53 @@
1
+ "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { createContext, useContext, useState } from "react";
4
+ import { AnimatePresence, motion } from "motion/react";
5
+ import { EASE_EXPO } from "../motion/easings";
6
+ const TabsContext = createContext(null);
7
+ export function Tabs({ children, value, defaultValue = "", onChange, className = "", }) {
8
+ const [internal, setInternal] = useState(defaultValue);
9
+ const current = value ?? internal;
10
+ const setValue = (v) => {
11
+ if (value === undefined)
12
+ setInternal(v);
13
+ onChange?.(v);
14
+ };
15
+ return (_jsx(TabsContext.Provider, { value: { value: current, setValue }, children: _jsx("div", { className: className, children: children }) }));
16
+ }
17
+ export function TabsList({ children, label, className = "", }) {
18
+ return (_jsx("div", { role: "tablist", "aria-label": label, className: className, style: {
19
+ display: "flex",
20
+ gap: 32,
21
+ borderBottom: "1px solid var(--mizu-line)",
22
+ overflowX: "auto",
23
+ }, children: children }));
24
+ }
25
+ export function TabsTrigger({ value, children, className = "", }) {
26
+ const ctx = useContext(TabsContext);
27
+ if (!ctx)
28
+ throw new Error("TabsTrigger must be used within <Tabs>");
29
+ const active = ctx.value === value;
30
+ return (_jsxs("button", { role: "tab", "aria-selected": active, "aria-controls": `mizu-tabs-panel-${value}`, tabIndex: active ? 0 : -1, onClick: () => ctx.setValue(value), className: className, style: {
31
+ position: "relative",
32
+ padding: "14px 2px",
33
+ background: "transparent",
34
+ border: "none",
35
+ cursor: "pointer",
36
+ fontFamily: "var(--mizu-font-mono)",
37
+ fontSize: 11,
38
+ letterSpacing: "0.22em",
39
+ textTransform: "uppercase",
40
+ color: active ? "var(--mizu-paper)" : "var(--mizu-faint)",
41
+ transition: "color 250ms ease",
42
+ whiteSpace: "nowrap",
43
+ }, children: [children, active && (_jsx(motion.span, { layoutId: "mizu-tabs-underline", "aria-hidden": true, style: { position: "absolute", bottom: -1, left: 0, right: 0, height: 1, background: "var(--mizu-accent)" }, transition: { duration: 0.35, ease: EASE_EXPO } }))] }));
44
+ }
45
+ export function TabsPanel({ value, children, className = "", }) {
46
+ const ctx = useContext(TabsContext);
47
+ if (!ctx)
48
+ throw new Error("TabsPanel must be used within <Tabs>");
49
+ if (ctx.value !== value)
50
+ return null;
51
+ return (_jsx("div", { id: `mizu-tabs-panel-${value}`, role: "tabpanel", className: className, style: { paddingTop: 28 }, children: _jsx(AnimatePresence, { mode: "wait", children: _jsx(motion.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, transition: { duration: 0.3, ease: EASE_EXPO }, children: children }, value) }) }));
52
+ }
53
+ //# sourceMappingURL=Tabs.js.map
package/dist/composite/Tabs.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../src/composite/Tabs.tsx"],"names":[],"mappings":"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"}
package/dist/feedback/CopyButton.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { type ButtonHTMLAttributes } from "react";
2
+ export declare const CopyButton: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
3
+ text: string;
4
+ feedback?: string;
5
+ } & import("react").RefAttributes<HTMLButtonElement>>;
6
+ //# sourceMappingURL=CopyButton.d.ts.map
package/dist/feedback/CopyButton.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CopyButton.d.ts","sourceRoot":"","sources":["../../src/feedback/CopyButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAwB,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAwBxE,eAAO,MAAM,UAAU;UAE6B,MAAM;eAAa,MAAM;qDA0C3E,CAAC"}