@krizaka/ui 2.0.0-beta.0 → 2.0.0-beta.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +52 -3
- package/dist/alert.d.ts +95 -0
- package/dist/alert.js +38 -0
- package/dist/alert.js.map +1 -0
- package/dist/button-G5qY4qSY.d.ts +68 -0
- package/dist/card.d.ts +227 -0
- package/dist/card.js +108 -0
- package/dist/card.js.map +1 -0
- package/dist/checkbox.d.ts +52 -0
- package/dist/checkbox.js +42 -0
- package/dist/checkbox.js.map +1 -0
- package/dist/chip.d.ts +97 -0
- package/dist/chip.js +93 -0
- package/dist/chip.js.map +1 -0
- package/dist/chunk-5AXLA4LK.js +13 -0
- package/dist/chunk-5AXLA4LK.js.map +1 -0
- package/dist/chunk-5FRYKFTO.js +121 -0
- package/dist/chunk-5FRYKFTO.js.map +1 -0
- package/dist/{chunk-CPMZS4XA.js → chunk-FJDSLNXK.js} +1 -1
- package/dist/chunk-FJDSLNXK.js.map +1 -0
- package/dist/chunk-J3NC6ER4.js +9 -0
- package/dist/chunk-J3NC6ER4.js.map +1 -0
- package/dist/chunk-QRG5RYEI.js +49 -0
- package/dist/chunk-QRG5RYEI.js.map +1 -0
- package/dist/cn.d.ts +3 -0
- package/dist/cn.js +1 -1
- package/dist/command.d.ts +156 -0
- package/dist/command.js +111 -0
- package/dist/command.js.map +1 -0
- package/dist/confirm-button.d.ts +23 -0
- package/dist/confirm-button.js +85 -0
- package/dist/confirm-button.js.map +1 -0
- package/dist/dialog-DGBY2grk.d.ts +147 -0
- package/dist/dialog.d.ts +28 -0
- package/dist/dialog.js +93 -0
- package/dist/dialog.js.map +1 -0
- package/dist/dropdown-menu.d.ts +71 -0
- package/dist/dropdown-menu.js +66 -0
- package/dist/dropdown-menu.js.map +1 -0
- package/dist/field.js +1 -1
- package/dist/kbd.d.ts +24 -0
- package/dist/kbd.js +16 -0
- package/dist/kbd.js.map +1 -0
- package/dist/motion.css +7 -1
- package/dist/page-header.d.ts +77 -0
- package/dist/page-header.js +32 -0
- package/dist/page-header.js.map +1 -0
- package/dist/popover.d.ts +18 -0
- package/dist/popover.js +34 -0
- package/dist/popover.js.map +1 -0
- package/dist/progress.d.ts +87 -0
- package/dist/progress.js +85 -0
- package/dist/progress.js.map +1 -0
- package/dist/radio-group.d.ts +77 -0
- package/dist/radio-group.js +48 -0
- package/dist/radio-group.js.map +1 -0
- package/dist/separator.d.ts +24 -0
- package/dist/separator.js +17 -0
- package/dist/separator.js.map +1 -0
- package/dist/slider.d.ts +88 -0
- package/dist/slider.js +82 -0
- package/dist/slider.js.map +1 -0
- package/dist/stat.d.ts +75 -0
- package/dist/stat.js +42 -0
- package/dist/stat.js.map +1 -0
- package/dist/switch.d.ts +72 -0
- package/dist/switch.js +38 -0
- package/dist/switch.js.map +1 -0
- package/dist/tabs.d.ts +83 -0
- package/dist/tabs.js +60 -0
- package/dist/tabs.js.map +1 -0
- package/dist/theme.d.ts +2 -59
- package/dist/theme.js +13 -34
- package/dist/theme.js.map +1 -1
- package/dist/toast.d.ts +32 -0
- package/dist/toast.js +49 -0
- package/dist/toast.js.map +1 -0
- package/dist/tooltip.d.ts +21 -0
- package/dist/tooltip.js +44 -0
- package/dist/tooltip.js.map +1 -0
- package/package.json +291 -5
- package/dist/chunk-CPMZS4XA.js.map +0 -1
package/dist/switch.d.ts
ADDED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import * as tailwind_variants from 'tailwind-variants';
|
|
2
|
+
import { VariantProps } from 'tailwind-variants';
|
|
3
|
+
import { Switch as Switch$1 } from 'radix-ui';
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
|
|
6
|
+
declare const switchVariants: tailwind_variants.TVReturnType<{
|
|
7
|
+
size: {
|
|
8
|
+
sm: {
|
|
9
|
+
root: string;
|
|
10
|
+
thumb: string;
|
|
11
|
+
};
|
|
12
|
+
md: {
|
|
13
|
+
root: string;
|
|
14
|
+
thumb: string;
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
}, {
|
|
18
|
+
root: string;
|
|
19
|
+
thumb: string;
|
|
20
|
+
}, undefined, {
|
|
21
|
+
size: {
|
|
22
|
+
sm: {
|
|
23
|
+
root: string;
|
|
24
|
+
thumb: string;
|
|
25
|
+
};
|
|
26
|
+
md: {
|
|
27
|
+
root: string;
|
|
28
|
+
thumb: string;
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
}, {
|
|
32
|
+
root: string;
|
|
33
|
+
thumb: string;
|
|
34
|
+
}, tailwind_variants.TVReturnTypeLike<{
|
|
35
|
+
size: {
|
|
36
|
+
sm: {
|
|
37
|
+
root: string;
|
|
38
|
+
thumb: string;
|
|
39
|
+
};
|
|
40
|
+
md: {
|
|
41
|
+
root: string;
|
|
42
|
+
thumb: string;
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
}, {
|
|
46
|
+
root: string;
|
|
47
|
+
thumb: string;
|
|
48
|
+
}>>;
|
|
49
|
+
type SwitchVariants = VariantProps<typeof switchVariants>;
|
|
50
|
+
type Named =
|
|
51
|
+
/** The accessible name — required when no visible label names it, passed translated. */
|
|
52
|
+
{
|
|
53
|
+
label: string;
|
|
54
|
+
}
|
|
55
|
+
/** Named by a visible `<label htmlFor={id}>` (e.g. `Field.Label`). */
|
|
56
|
+
| {
|
|
57
|
+
label?: undefined;
|
|
58
|
+
id: string;
|
|
59
|
+
}
|
|
60
|
+
/** Named by another element. */
|
|
61
|
+
| {
|
|
62
|
+
label?: undefined;
|
|
63
|
+
"aria-labelledby": string;
|
|
64
|
+
};
|
|
65
|
+
type SwitchProps = Omit<React.ComponentProps<typeof Switch$1.Root>, "children"> & SwitchVariants & Named & {
|
|
66
|
+
/** Marks it invalid: aria-invalid and data-invalid. */
|
|
67
|
+
invalid?: boolean;
|
|
68
|
+
};
|
|
69
|
+
/** An on/off switch: `checked`/`defaultChecked` + `onCheckedChange`. */
|
|
70
|
+
declare function Switch({ label, size, invalid, className, ...props }: SwitchProps): React.JSX.Element;
|
|
71
|
+
|
|
72
|
+
export { Switch, type SwitchProps, type SwitchVariants, switchVariants };
|
package/dist/switch.js
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
// src/switch/switch.tsx
|
|
4
|
+
import { Switch as SwitchPrimitive } from "radix-ui";
|
|
5
|
+
import { tv } from "tailwind-variants";
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
7
|
+
var switchVariants = tv({
|
|
8
|
+
slots: {
|
|
9
|
+
root: "peer relative inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent bg-fg-muted transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:cursor-not-allowed disabled:opacity-40 data-[state=checked]:bg-accent aria-invalid:border-danger",
|
|
10
|
+
thumb: "pointer-events-none block rounded-full bg-fg-on-media shadow-sm transition-transform data-[state=unchecked]:translate-x-0.5 motion-reduce:transition-none"
|
|
11
|
+
},
|
|
12
|
+
variants: {
|
|
13
|
+
size: {
|
|
14
|
+
sm: { root: "h-5 w-9", thumb: "h-4 w-4 data-[state=checked]:translate-x-[1.125rem]" },
|
|
15
|
+
md: { root: "h-6 w-11", thumb: "h-5 w-5 data-[state=checked]:translate-x-[1.375rem]" }
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
defaultVariants: { size: "md" }
|
|
19
|
+
});
|
|
20
|
+
function Switch({ label, size, invalid, className, ...props }) {
|
|
21
|
+
const s = switchVariants({ size });
|
|
22
|
+
return /* @__PURE__ */ jsx(
|
|
23
|
+
SwitchPrimitive.Root,
|
|
24
|
+
{
|
|
25
|
+
"aria-label": label,
|
|
26
|
+
"aria-invalid": invalid || void 0,
|
|
27
|
+
"data-invalid": invalid ? "" : void 0,
|
|
28
|
+
className: s.root({ className }),
|
|
29
|
+
...props,
|
|
30
|
+
children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { className: s.thumb() })
|
|
31
|
+
}
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
|
+
export {
|
|
35
|
+
Switch,
|
|
36
|
+
switchVariants
|
|
37
|
+
};
|
|
38
|
+
//# sourceMappingURL=switch.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/switch/switch.tsx"],"sourcesContent":["// Client. Radix Switch: role=\"switch\", aria-checked, Space and Enter toggle, a hidden input inside a form.\nimport { Switch as SwitchPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const switchVariants = tv({\n slots: {\n root:\n \"peer relative inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent bg-fg-muted transition-colors \" +\n \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 \" +\n \"disabled:cursor-not-allowed disabled:opacity-40 data-[state=checked]:bg-accent aria-invalid:border-danger\",\n thumb:\n \"pointer-events-none block rounded-full bg-fg-on-media shadow-sm transition-transform data-[state=unchecked]:translate-x-0.5 motion-reduce:transition-none\",\n },\n variants: {\n size: {\n sm: { root: \"h-5 w-9\", thumb: \"h-4 w-4 data-[state=checked]:translate-x-[1.125rem]\" },\n md: { root: \"h-6 w-11\", thumb: \"h-5 w-5 data-[state=checked]:translate-x-[1.375rem]\" },\n },\n },\n defaultVariants: { size: \"md\" },\n});\n\nexport type SwitchVariants = VariantProps<typeof switchVariants>;\n\ntype Named =\n /** The accessible name — required when no visible label names it, passed translated. */\n | { label: string }\n /** Named by a visible `<label htmlFor={id}>` (e.g. `Field.Label`). */\n | { label?: undefined; id: string }\n /** Named by another element. */\n | { label?: undefined; \"aria-labelledby\": string };\n\nexport type SwitchProps = Omit<React.ComponentProps<typeof SwitchPrimitive.Root>, \"children\"> &\n SwitchVariants &\n Named & {\n /** Marks it invalid: aria-invalid and data-invalid. */\n invalid?: boolean;\n };\n\n/** An on/off switch: `checked`/`defaultChecked` + `onCheckedChange`. */\nexport function Switch({ label, size, invalid, className, ...props }: SwitchProps) {\n const s = switchVariants({ size });\n return (\n <SwitchPrimitive.Root\n aria-label={label}\n aria-invalid={invalid || undefined}\n data-invalid={invalid ? \"\" : undefined}\n className={s.root({ className })}\n {...props}\n >\n <SwitchPrimitive.Thumb className={s.thumb()} />\n </SwitchPrimitive.Root>\n );\n}\n"],"mappings":";;;AACA,SAAS,UAAU,uBAAuB;AAE1C,SAAS,UAA6B;AAgDhC;AA9CC,IAAM,iBAAiB,GAAG;AAAA,EAC/B,OAAO;AAAA,IACL,MACE;AAAA,IAGF,OACE;AAAA,EACJ;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,IAAI,EAAE,MAAM,WAAW,OAAO,sDAAsD;AAAA,MACpF,IAAI,EAAE,MAAM,YAAY,OAAO,sDAAsD;AAAA,IACvF;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;AAoBM,SAAS,OAAO,EAAE,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,GAAgB;AACjF,QAAM,IAAI,eAAe,EAAE,KAAK,CAAC;AACjC,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,cAAY;AAAA,MACZ,gBAAc,WAAW;AAAA,MACzB,gBAAc,UAAU,KAAK;AAAA,MAC7B,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC;AAAA,MAC9B,GAAG;AAAA,MAEJ,8BAAC,gBAAgB,OAAhB,EAAsB,WAAW,EAAE,MAAM,GAAG;AAAA;AAAA,EAC/C;AAEJ;","names":[]}
|
package/dist/tabs.d.ts
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import * as tailwind_variants from 'tailwind-variants';
|
|
2
|
+
import { VariantProps } from 'tailwind-variants';
|
|
3
|
+
import { Tabs as Tabs$1 } from 'radix-ui';
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
|
|
6
|
+
declare const tabs: tailwind_variants.TVReturnType<{
|
|
7
|
+
variant: {
|
|
8
|
+
underline: {
|
|
9
|
+
list: string;
|
|
10
|
+
trigger: string;
|
|
11
|
+
};
|
|
12
|
+
segmented: {
|
|
13
|
+
list: string;
|
|
14
|
+
trigger: string;
|
|
15
|
+
};
|
|
16
|
+
pills: {
|
|
17
|
+
list: string;
|
|
18
|
+
trigger: string;
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
}, {
|
|
22
|
+
root: string;
|
|
23
|
+
list: string;
|
|
24
|
+
trigger: string;
|
|
25
|
+
content: string;
|
|
26
|
+
}, undefined, {
|
|
27
|
+
variant: {
|
|
28
|
+
underline: {
|
|
29
|
+
list: string;
|
|
30
|
+
trigger: string;
|
|
31
|
+
};
|
|
32
|
+
segmented: {
|
|
33
|
+
list: string;
|
|
34
|
+
trigger: string;
|
|
35
|
+
};
|
|
36
|
+
pills: {
|
|
37
|
+
list: string;
|
|
38
|
+
trigger: string;
|
|
39
|
+
};
|
|
40
|
+
};
|
|
41
|
+
}, {
|
|
42
|
+
root: string;
|
|
43
|
+
list: string;
|
|
44
|
+
trigger: string;
|
|
45
|
+
content: string;
|
|
46
|
+
}, tailwind_variants.TVReturnTypeLike<{
|
|
47
|
+
variant: {
|
|
48
|
+
underline: {
|
|
49
|
+
list: string;
|
|
50
|
+
trigger: string;
|
|
51
|
+
};
|
|
52
|
+
segmented: {
|
|
53
|
+
list: string;
|
|
54
|
+
trigger: string;
|
|
55
|
+
};
|
|
56
|
+
pills: {
|
|
57
|
+
list: string;
|
|
58
|
+
trigger: string;
|
|
59
|
+
};
|
|
60
|
+
};
|
|
61
|
+
}, {
|
|
62
|
+
root: string;
|
|
63
|
+
list: string;
|
|
64
|
+
trigger: string;
|
|
65
|
+
content: string;
|
|
66
|
+
}>>;
|
|
67
|
+
type TabsVariants = VariantProps<typeof tabs>;
|
|
68
|
+
type TabsRootProps = React.ComponentProps<typeof Tabs$1.Root> & TabsVariants;
|
|
69
|
+
/** `value`/`defaultValue` + `onValueChange`, `orientation` (horizontal by default), `variant` for the list. */
|
|
70
|
+
declare function TabsRoot({ variant, className, ...props }: TabsRootProps): React.JSX.Element;
|
|
71
|
+
/** The tabs. Name it (`aria-label`) when no heading says what it switches. */
|
|
72
|
+
declare function TabsList({ className, ...props }: React.ComponentProps<typeof Tabs$1.List>): React.JSX.Element;
|
|
73
|
+
declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof Tabs$1.Trigger>): React.JSX.Element;
|
|
74
|
+
declare function TabsContent({ className, ...props }: React.ComponentProps<typeof Tabs$1.Content>): React.JSX.Element;
|
|
75
|
+
/** `Tabs.Root/List/Trigger/Content` — `variant` underline · segmented · pills on the root. */
|
|
76
|
+
declare const Tabs: {
|
|
77
|
+
Root: typeof TabsRoot;
|
|
78
|
+
List: typeof TabsList;
|
|
79
|
+
Trigger: typeof TabsTrigger;
|
|
80
|
+
Content: typeof TabsContent;
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
export { Tabs, TabsContent, TabsList, TabsRoot, type TabsRootProps, TabsTrigger, type TabsVariants, tabs };
|
package/dist/tabs.js
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
// src/tabs/tabs.tsx
|
|
4
|
+
import { Tabs as TabsPrimitive } from "radix-ui";
|
|
5
|
+
import * as React from "react";
|
|
6
|
+
import { tv } from "tailwind-variants";
|
|
7
|
+
import { jsx } from "react/jsx-runtime";
|
|
8
|
+
var tabs = tv({
|
|
9
|
+
slots: {
|
|
10
|
+
root: "flex gap-4 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row",
|
|
11
|
+
list: "flex shrink-0 data-[orientation=vertical]:flex-col",
|
|
12
|
+
trigger: "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40",
|
|
13
|
+
content: "kz-fade min-w-0 flex-1 rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
|
|
14
|
+
},
|
|
15
|
+
variants: {
|
|
16
|
+
variant: {
|
|
17
|
+
/* The section of a page: a line under the list, the active tab underlined in the accent. */
|
|
18
|
+
underline: {
|
|
19
|
+
list: "gap-1 border-border-default data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-r",
|
|
20
|
+
trigger: "relative rounded-md px-3 py-2.5 text-sm text-fg-secondary hover:text-fg data-[state=active]:text-fg after:absolute after:rounded-full after:bg-transparent data-[state=active]:after:bg-accent data-[orientation=horizontal]:after:inset-x-2 data-[orientation=horizontal]:after:-bottom-px data-[orientation=horizontal]:after:h-0.5 data-[orientation=vertical]:justify-start data-[orientation=vertical]:after:inset-y-1.5 data-[orientation=vertical]:after:-right-px data-[orientation=vertical]:after:w-0.5"
|
|
21
|
+
},
|
|
22
|
+
/* A view switch: equal segments in a track, the active one filled. */
|
|
23
|
+
segmented: {
|
|
24
|
+
list: "inline-grid auto-cols-fr grid-flow-col gap-1 self-start rounded-xl border border-border-default bg-surface-1 p-1 data-[orientation=vertical]:grid-flow-row",
|
|
25
|
+
trigger: "min-h-8 rounded-lg px-3 py-1.5 text-xs text-fg-secondary hover:bg-surface-2 hover:text-fg data-[state=active]:bg-accent data-[state=active]:text-on-accent data-[state=active]:shadow-sm data-[state=active]:hover:bg-accent"
|
|
26
|
+
},
|
|
27
|
+
/* Pills that scroll sideways on a phone: a feed's sections. */
|
|
28
|
+
pills: {
|
|
29
|
+
list: "gap-1.5 overflow-x-auto overscroll-x-contain [scrollbar-width:none] data-[orientation=horizontal]:pb-1",
|
|
30
|
+
trigger: "h-9 rounded-full border border-border-default bg-surface-1 px-4 text-xs text-fg-secondary hover:border-border-strong hover:text-fg data-[state=active]:border-accent data-[state=active]:bg-accent-soft data-[state=active]:text-fg"
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
defaultVariants: { variant: "underline" }
|
|
35
|
+
});
|
|
36
|
+
var VariantContext = React.createContext("underline");
|
|
37
|
+
function TabsRoot({ variant = "underline", className, ...props }) {
|
|
38
|
+
return /* @__PURE__ */ jsx(VariantContext.Provider, { value: variant, children: /* @__PURE__ */ jsx(TabsPrimitive.Root, { "data-variant": variant, className: tabs({ variant }).root({ className }), ...props }) });
|
|
39
|
+
}
|
|
40
|
+
function TabsList({ className, ...props }) {
|
|
41
|
+
const variant = React.useContext(VariantContext);
|
|
42
|
+
return /* @__PURE__ */ jsx(TabsPrimitive.List, { "data-variant": variant, className: tabs({ variant }).list({ className }), ...props });
|
|
43
|
+
}
|
|
44
|
+
function TabsTrigger({ className, ...props }) {
|
|
45
|
+
const variant = React.useContext(VariantContext);
|
|
46
|
+
return /* @__PURE__ */ jsx(TabsPrimitive.Trigger, { className: tabs({ variant }).trigger({ className }), ...props });
|
|
47
|
+
}
|
|
48
|
+
function TabsContent({ className, ...props }) {
|
|
49
|
+
return /* @__PURE__ */ jsx(TabsPrimitive.Content, { className: tabs().content({ className }), ...props });
|
|
50
|
+
}
|
|
51
|
+
var Tabs = { Root: TabsRoot, List: TabsList, Trigger: TabsTrigger, Content: TabsContent };
|
|
52
|
+
export {
|
|
53
|
+
Tabs,
|
|
54
|
+
TabsContent,
|
|
55
|
+
TabsList,
|
|
56
|
+
TabsRoot,
|
|
57
|
+
TabsTrigger,
|
|
58
|
+
tabs
|
|
59
|
+
};
|
|
60
|
+
//# sourceMappingURL=tabs.js.map
|
package/dist/tabs.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/tabs/tabs.tsx"],"sourcesContent":["// Client (a context). Radix Tabs does the roles (tablist, tab, tabpanel), the aria-selected / aria-controls wiring,\n// the roving focus (arrows, Home, End) and automatic activation: this file only holds the three looks.\nimport { Tabs as TabsPrimitive } from \"radix-ui\";\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const tabs = tv({\n slots: {\n root: \"flex gap-4 data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row\",\n list: \"flex shrink-0 data-[orientation=vertical]:flex-col\",\n trigger:\n \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-colors \" +\n \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40\",\n content: \"kz-fade min-w-0 flex-1 rounded-lg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n },\n variants: {\n variant: {\n /* The section of a page: a line under the list, the active tab underlined in the accent. */\n underline: {\n list: \"gap-1 border-border-default data-[orientation=horizontal]:border-b data-[orientation=vertical]:border-r\",\n trigger:\n \"relative rounded-md px-3 py-2.5 text-sm text-fg-secondary hover:text-fg data-[state=active]:text-fg \" +\n \"after:absolute after:rounded-full after:bg-transparent data-[state=active]:after:bg-accent \" +\n \"data-[orientation=horizontal]:after:inset-x-2 data-[orientation=horizontal]:after:-bottom-px data-[orientation=horizontal]:after:h-0.5 \" +\n \"data-[orientation=vertical]:justify-start data-[orientation=vertical]:after:inset-y-1.5 data-[orientation=vertical]:after:-right-px data-[orientation=vertical]:after:w-0.5\",\n },\n /* A view switch: equal segments in a track, the active one filled. */\n segmented: {\n list: \"inline-grid auto-cols-fr grid-flow-col gap-1 self-start rounded-xl border border-border-default bg-surface-1 p-1 data-[orientation=vertical]:grid-flow-row\",\n trigger:\n \"min-h-8 rounded-lg px-3 py-1.5 text-xs text-fg-secondary hover:bg-surface-2 hover:text-fg \" +\n \"data-[state=active]:bg-accent data-[state=active]:text-on-accent data-[state=active]:shadow-sm data-[state=active]:hover:bg-accent\",\n },\n /* Pills that scroll sideways on a phone: a feed's sections. */\n pills: {\n list: \"gap-1.5 overflow-x-auto overscroll-x-contain [scrollbar-width:none] data-[orientation=horizontal]:pb-1\",\n trigger:\n \"h-9 rounded-full border border-border-default bg-surface-1 px-4 text-xs text-fg-secondary hover:border-border-strong hover:text-fg \" +\n \"data-[state=active]:border-accent data-[state=active]:bg-accent-soft data-[state=active]:text-fg\",\n },\n },\n },\n defaultVariants: { variant: \"underline\" },\n});\n\nexport type TabsVariants = VariantProps<typeof tabs>;\ntype Variant = NonNullable<TabsVariants[\"variant\"]>;\n\nconst VariantContext = React.createContext<Variant>(\"underline\");\n\nexport type TabsRootProps = React.ComponentProps<typeof TabsPrimitive.Root> & TabsVariants;\n\n/** `value`/`defaultValue` + `onValueChange`, `orientation` (horizontal by default), `variant` for the list. */\nexport function TabsRoot({ variant = \"underline\", className, ...props }: TabsRootProps) {\n return (\n <VariantContext.Provider value={variant}>\n <TabsPrimitive.Root data-variant={variant} className={tabs({ variant }).root({ className })} {...props} />\n </VariantContext.Provider>\n );\n}\n\n/** The tabs. Name it (`aria-label`) when no heading says what it switches. */\nexport function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {\n const variant = React.useContext(VariantContext);\n return <TabsPrimitive.List data-variant={variant} className={tabs({ variant }).list({ className })} {...props} />;\n}\n\nexport function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n const variant = React.useContext(VariantContext);\n return <TabsPrimitive.Trigger className={tabs({ variant }).trigger({ className })} {...props} />;\n}\n\nexport function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n return <TabsPrimitive.Content className={tabs().content({ className })} {...props} />;\n}\n\n/** `Tabs.Root/List/Trigger/Content` — `variant` underline · segmented · pills on the root. */\nexport const Tabs = { Root: TabsRoot, List: TabsList, Trigger: TabsTrigger, Content: TabsContent };\n"],"mappings":";;;AAEA,SAAS,QAAQ,qBAAqB;AACtC,YAAY,WAAW;AACvB,SAAS,UAA6B;AAoDhC;AAlDC,IAAM,OAAO,GAAG;AAAA,EACrB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,SACE;AAAA,IAEF,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA;AAAA,MAEP,WAAW;AAAA,QACT,MAAM;AAAA,QACN,SACE;AAAA,MAIJ;AAAA;AAAA,MAEA,WAAW;AAAA,QACT,MAAM;AAAA,QACN,SACE;AAAA,MAEJ;AAAA;AAAA,MAEA,OAAO;AAAA,QACL,MAAM;AAAA,QACN,SACE;AAAA,MAEJ;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,YAAY;AAC1C,CAAC;AAKD,IAAM,iBAAuB,oBAAuB,WAAW;AAKxD,SAAS,SAAS,EAAE,UAAU,aAAa,WAAW,GAAG,MAAM,GAAkB;AACtF,SACE,oBAAC,eAAe,UAAf,EAAwB,OAAO,SAC9B,8BAAC,cAAc,MAAd,EAAmB,gBAAc,SAAS,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO,GAC1G;AAEJ;AAGO,SAAS,SAAS,EAAE,WAAW,GAAG,MAAM,GAAoD;AACjG,QAAM,UAAgB,iBAAW,cAAc;AAC/C,SAAO,oBAAC,cAAc,MAAd,EAAmB,gBAAc,SAAS,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AACjH;AAEO,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAuD;AACvG,QAAM,UAAgB,iBAAW,cAAc;AAC/C,SAAO,oBAAC,cAAc,SAAd,EAAsB,WAAW,KAAK,EAAE,QAAQ,CAAC,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AAChG;AAEO,SAAS,YAAY,EAAE,WAAW,GAAG,MAAM,GAAuD;AACvG,SAAO,oBAAC,cAAc,SAAd,EAAsB,WAAW,KAAK,EAAE,QAAQ,EAAE,UAAU,CAAC,GAAI,GAAG,OAAO;AACrF;AAGO,IAAM,OAAO,EAAE,MAAM,UAAU,MAAM,UAAU,SAAS,aAAa,SAAS,YAAY;","names":[]}
|
package/dist/theme.d.ts
CHANGED
|
@@ -1,63 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
declare const buttonVariants: tailwind_variants.TVReturnType<{
|
|
6
|
-
variant: {
|
|
7
|
-
primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover";
|
|
8
|
-
secondary: "border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3";
|
|
9
|
-
outline: "border border-border-default bg-transparent text-fg hover:border-accent hover:text-accent";
|
|
10
|
-
ghost: "text-fg-secondary hover:bg-surface-2 hover:text-fg";
|
|
11
|
-
danger: "border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20";
|
|
12
|
-
};
|
|
13
|
-
size: {
|
|
14
|
-
sm: "h-8 px-3 text-xs";
|
|
15
|
-
md: "h-10 px-4 text-sm";
|
|
16
|
-
lg: "h-12 px-6 text-sm";
|
|
17
|
-
icon: "h-10 w-10";
|
|
18
|
-
};
|
|
19
|
-
shape: {
|
|
20
|
-
rounded: "rounded-lg";
|
|
21
|
-
pill: "rounded-full";
|
|
22
|
-
};
|
|
23
|
-
}, undefined, string, {
|
|
24
|
-
variant: {
|
|
25
|
-
primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover";
|
|
26
|
-
secondary: "border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3";
|
|
27
|
-
outline: "border border-border-default bg-transparent text-fg hover:border-accent hover:text-accent";
|
|
28
|
-
ghost: "text-fg-secondary hover:bg-surface-2 hover:text-fg";
|
|
29
|
-
danger: "border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20";
|
|
30
|
-
};
|
|
31
|
-
size: {
|
|
32
|
-
sm: "h-8 px-3 text-xs";
|
|
33
|
-
md: "h-10 px-4 text-sm";
|
|
34
|
-
lg: "h-12 px-6 text-sm";
|
|
35
|
-
icon: "h-10 w-10";
|
|
36
|
-
};
|
|
37
|
-
shape: {
|
|
38
|
-
rounded: "rounded-lg";
|
|
39
|
-
pill: "rounded-full";
|
|
40
|
-
};
|
|
41
|
-
}, undefined, tailwind_variants.TVReturnTypeLike<{
|
|
42
|
-
variant: {
|
|
43
|
-
primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover";
|
|
44
|
-
secondary: "border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3";
|
|
45
|
-
outline: "border border-border-default bg-transparent text-fg hover:border-accent hover:text-accent";
|
|
46
|
-
ghost: "text-fg-secondary hover:bg-surface-2 hover:text-fg";
|
|
47
|
-
danger: "border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20";
|
|
48
|
-
};
|
|
49
|
-
size: {
|
|
50
|
-
sm: "h-8 px-3 text-xs";
|
|
51
|
-
md: "h-10 px-4 text-sm";
|
|
52
|
-
lg: "h-12 px-6 text-sm";
|
|
53
|
-
icon: "h-10 w-10";
|
|
54
|
-
};
|
|
55
|
-
shape: {
|
|
56
|
-
rounded: "rounded-lg";
|
|
57
|
-
pill: "rounded-full";
|
|
58
|
-
};
|
|
59
|
-
}, undefined>>;
|
|
60
|
-
type ButtonVariants = VariantProps<typeof buttonVariants>;
|
|
2
|
+
import { a as ButtonVariants } from './button-G5qY4qSY.js';
|
|
3
|
+
import 'tailwind-variants';
|
|
61
4
|
|
|
62
5
|
type Mode = "dark" | "light" | "system";
|
|
63
6
|
/**
|
package/dist/theme.js
CHANGED
|
@@ -1,32 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import {
|
|
3
|
+
buttonVariants
|
|
4
|
+
} from "./chunk-QRG5RYEI.js";
|
|
2
5
|
|
|
3
6
|
// src/theme/theme.tsx
|
|
4
7
|
import * as React from "react";
|
|
5
|
-
|
|
6
|
-
// src/button/button.tsx
|
|
7
|
-
import { Slot } from "radix-ui";
|
|
8
|
-
import { tv } from "tailwind-variants";
|
|
9
|
-
import { jsx } from "react/jsx-runtime";
|
|
10
|
-
var buttonVariants = tv({
|
|
11
|
-
base: "inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98]",
|
|
12
|
-
variants: {
|
|
13
|
-
variant: {
|
|
14
|
-
primary: "bg-accent text-on-accent shadow-sm hover:bg-accent-hover",
|
|
15
|
-
secondary: "border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3",
|
|
16
|
-
outline: "border border-border-default bg-transparent text-fg hover:border-accent hover:text-accent",
|
|
17
|
-
ghost: "text-fg-secondary hover:bg-surface-2 hover:text-fg",
|
|
18
|
-
// The danger token is invariant and too light for small text on a light surface (3.6:1): the label stays a
|
|
19
|
-
// text role, the border and the tint carry the danger.
|
|
20
|
-
danger: "border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20"
|
|
21
|
-
},
|
|
22
|
-
size: { sm: "h-8 px-3 text-xs", md: "h-10 px-4 text-sm", lg: "h-12 px-6 text-sm", icon: "h-10 w-10" },
|
|
23
|
-
shape: { rounded: "rounded-lg", pill: "rounded-full" }
|
|
24
|
-
},
|
|
25
|
-
defaultVariants: { variant: "secondary", size: "md", shape: "rounded" }
|
|
26
|
-
});
|
|
27
|
-
|
|
28
|
-
// src/theme/theme.tsx
|
|
29
|
-
import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
8
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
30
9
|
var MODE_KEY = "kz-theme";
|
|
31
10
|
var NAME_KEY = "kz-theme-name";
|
|
32
11
|
var MODES = ["dark", "light", "system"];
|
|
@@ -70,7 +49,7 @@ function applyName(previous, next) {
|
|
|
70
49
|
}
|
|
71
50
|
function ThemeScript({ nonce }) {
|
|
72
51
|
const js = `(function(){try{var m=localStorage.getItem("${MODE_KEY}")||"system";var n=localStorage.getItem("${NAME_KEY}");var d=matchMedia("${DARK_QUERY}").matches;var c=document.documentElement.classList;c.toggle("light",m==="light"||(m==="system"&&!d));if(n)c.add("theme-"+n)}catch(e){}})()`;
|
|
73
|
-
return /* @__PURE__ */
|
|
52
|
+
return /* @__PURE__ */ jsx("script", { nonce, dangerouslySetInnerHTML: { __html: js } });
|
|
74
53
|
}
|
|
75
54
|
var ThemeContext = React.createContext(null);
|
|
76
55
|
function ThemeProvider({ children, defaultMode = "system" }) {
|
|
@@ -95,7 +74,7 @@ function ThemeProvider({ children, defaultMode = "system" }) {
|
|
|
95
74
|
notify();
|
|
96
75
|
}, []);
|
|
97
76
|
const value = React.useMemo(() => ({ mode, setMode, theme, setTheme }), [mode, setMode, theme, setTheme]);
|
|
98
|
-
return /* @__PURE__ */
|
|
77
|
+
return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
|
|
99
78
|
}
|
|
100
79
|
function useTheme() {
|
|
101
80
|
const context = React.useContext(ThemeContext);
|
|
@@ -103,21 +82,21 @@ function useTheme() {
|
|
|
103
82
|
return context;
|
|
104
83
|
}
|
|
105
84
|
var ICONS = {
|
|
106
|
-
dark: /* @__PURE__ */
|
|
85
|
+
dark: /* @__PURE__ */ jsx("path", { d: "M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z" }),
|
|
107
86
|
light: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
108
|
-
/* @__PURE__ */
|
|
109
|
-
/* @__PURE__ */
|
|
87
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4" }),
|
|
88
|
+
/* @__PURE__ */ jsx("path", { d: "M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" })
|
|
110
89
|
] }),
|
|
111
90
|
system: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
112
|
-
/* @__PURE__ */
|
|
113
|
-
/* @__PURE__ */
|
|
91
|
+
/* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "12", rx: "2" }),
|
|
92
|
+
/* @__PURE__ */ jsx("path", { d: "M8 20h8M12 16v4" })
|
|
114
93
|
] })
|
|
115
94
|
};
|
|
116
95
|
function ThemeToggle({ label, variant = "ghost", shape, className, ...props }) {
|
|
117
96
|
const { mode, setMode } = useTheme();
|
|
118
97
|
const next = MODES[(MODES.indexOf(mode) + 1) % MODES.length];
|
|
119
98
|
const name = typeof label === "function" ? label(mode) : label;
|
|
120
|
-
return /* @__PURE__ */
|
|
99
|
+
return /* @__PURE__ */ jsx(
|
|
121
100
|
"button",
|
|
122
101
|
{
|
|
123
102
|
type: "button",
|
|
@@ -127,7 +106,7 @@ function ThemeToggle({ label, variant = "ghost", shape, className, ...props }) {
|
|
|
127
106
|
onClick: () => setMode(next),
|
|
128
107
|
className: buttonVariants({ variant, shape, size: "icon", className }),
|
|
129
108
|
...props,
|
|
130
|
-
children: /* @__PURE__ */
|
|
109
|
+
children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: ICONS[mode] })
|
|
131
110
|
}
|
|
132
111
|
);
|
|
133
112
|
}
|
package/dist/theme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/theme/theme.tsx","../src/button/button.tsx"],"sourcesContent":["// Client. ONE mechanism for the whole organisation: dark by default, `html.light` for light, `html.theme-<name>` for a\n// named theme, persisted in localStorage (`kz-theme` for the mode, `kz-theme-name` for the named theme).\nimport * as React from \"react\";\n\nimport { type ButtonVariants, buttonVariants } from \"../button/button\";\n\nexport type Mode = \"dark\" | \"light\" | \"system\";\n\nconst MODE_KEY = \"kz-theme\";\nconst NAME_KEY = \"kz-theme-name\";\nconst MODES: readonly Mode[] = [\"dark\", \"light\", \"system\"];\nconst DARK_QUERY = \"(prefers-color-scheme: dark)\";\n\nconst isMode = (value: unknown): value is Mode => MODES.includes(value as Mode);\n\n// Storage blocked (private mode, sandbox): the choice lives in memory for the page.\nconst memory = new Map<string, string>();\n\nfunction read(key: string): string | null {\n try {\n return localStorage.getItem(key);\n } catch {\n return memory.get(key) ?? null;\n }\n}\n\nfunction write(key: string, value: string | null) {\n if (value === null) memory.delete(key);\n else memory.set(key, value);\n try {\n if (value === null) localStorage.removeItem(key);\n else localStorage.setItem(key, value);\n } catch {\n // storage blocked: memory holds it\n }\n}\n\n// The persisted choice is an external store: every provider and tab reads the same value, the server reads none.\nconst listeners = new Set<() => void>();\nconst notify = () => listeners.forEach((listener) => listener());\nfunction subscribe(listener: () => void) {\n listeners.add(listener);\n window.addEventListener(\"storage\", listener);\n return () => {\n listeners.delete(listener);\n window.removeEventListener(\"storage\", listener);\n };\n}\n\nfunction applyMode(mode: Mode) {\n const dark = window.matchMedia(DARK_QUERY).matches;\n document.documentElement.classList.toggle(\"light\", mode === \"light\" || (mode === \"system\" && !dark));\n}\n\nfunction applyName(previous: string | null, next: string | null) {\n const classes = document.documentElement.classList;\n if (previous) classes.remove(`theme-${previous}`);\n if (next) classes.add(`theme-${next}`);\n}\n\n/**\n * In <head>, before anything renders: applies the persisted mode and named theme, so the page never flashes.\n * `nonce` for a strict Content-Security-Policy.\n */\nexport function ThemeScript({ nonce }: { nonce?: string }) {\n const js =\n `(function(){try{var m=localStorage.getItem(\"${MODE_KEY}\")||\"system\";var n=localStorage.getItem(\"${NAME_KEY}\");` +\n `var d=matchMedia(\"${DARK_QUERY}\").matches;var c=document.documentElement.classList;` +\n `c.toggle(\"light\",m===\"light\"||(m===\"system\"&&!d));if(n)c.add(\"theme-\"+n)}catch(e){}})()`;\n return <script nonce={nonce} dangerouslySetInnerHTML={{ __html: js }} />;\n}\n\nexport type ThemeContextValue = {\n /** The chosen mode: dark, light or follow the system. */\n mode: Mode;\n setMode: (mode: Mode) => void;\n /** The named theme (`html.theme-<name>`), or null. */\n theme: string | null;\n setTheme: (theme: string | null) => void;\n};\n\nconst ThemeContext = React.createContext<ThemeContextValue | null>(null);\n\nexport type ThemeProviderProps = {\n children: React.ReactNode;\n /** The mode before anything is persisted. */\n defaultMode?: Mode;\n};\n\nexport function ThemeProvider({ children, defaultMode = \"system\" }: ThemeProviderProps) {\n // Before hydration the server knows nothing persisted (ThemeScript has already applied it to <html>).\n const stored = React.useSyncExternalStore(subscribe, () => read(MODE_KEY), () => null);\n const mode: Mode = isMode(stored) ? stored : defaultMode;\n const theme = React.useSyncExternalStore(subscribe, () => read(NAME_KEY), () => null);\n\n // \"system\" follows the operating system while the page is open.\n React.useEffect(() => {\n if (mode !== \"system\") return;\n const query = window.matchMedia(DARK_QUERY);\n const onChange = () => applyMode(\"system\");\n query.addEventListener?.(\"change\", onChange);\n return () => query.removeEventListener?.(\"change\", onChange);\n }, [mode]);\n\n const setMode = React.useCallback((next: Mode) => {\n write(MODE_KEY, next);\n applyMode(next);\n notify();\n }, []);\n\n const setTheme = React.useCallback((next: string | null) => {\n applyName(read(NAME_KEY), next);\n write(NAME_KEY, next);\n notify();\n }, []);\n\n const value = React.useMemo(() => ({ mode, setMode, theme, setTheme }), [mode, setMode, theme, setTheme]);\n return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\nexport function useTheme(): ThemeContextValue {\n const context = React.useContext(ThemeContext);\n if (!context) throw new Error(\"useTheme: wrap the app in <ThemeProvider>\");\n return context;\n}\n\nconst ICONS: Record<Mode, React.ReactNode> = {\n dark: <path d=\"M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z\" />,\n light: (\n <>\n <circle cx=\"12\" cy=\"12\" r=\"4\" />\n <path d=\"M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4\" />\n </>\n ),\n system: (\n <>\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"12\" rx=\"2\" />\n <path d=\"M8 20h8M12 16v4\" />\n </>\n ),\n};\n\nexport type ThemeToggleProps = Omit<React.ComponentProps<\"button\">, \"onClick\" | \"children\"> &\n Pick<ButtonVariants, \"variant\" | \"shape\"> & {\n /** The accessible name — a string, or one per current mode (e.g. `(mode) => t(\"theme.\" + mode)`). */\n label: string | ((mode: Mode) => string);\n };\n\n/**\n * An icon button (styled as `IconButton`, without its Slot) that cycles dark → light → system. Needs a\n * <ThemeProvider> above it. State: `data-mode`.\n */\nexport function ThemeToggle({ label, variant = \"ghost\", shape, className, ...props }: ThemeToggleProps) {\n const { mode, setMode } = useTheme();\n const next = MODES[(MODES.indexOf(mode) + 1) % MODES.length] as Mode;\n const name = typeof label === \"function\" ? label(mode) : label;\n return (\n <button\n type=\"button\"\n aria-label={name}\n title={name}\n data-mode={mode}\n onClick={() => setMode(next)}\n className={buttonVariants({ variant, shape, size: \"icon\", className })}\n {...props}\n >\n <svg viewBox=\"0 0 24 24\" className=\"h-5 w-5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n {ICONS[mode]}\n </svg>\n </button>\n );\n}\n","// Server-safe: no hook, no context. `buttonVariants` styles a <Link> or a Server Component without the component.\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const buttonVariants = tv({\n base:\n \"inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap font-semibold transition-all \" +\n \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 \" +\n \"disabled:pointer-events-none disabled:opacity-40 data-loading:cursor-progress active:scale-[0.98]\",\n variants: {\n variant: {\n primary: \"bg-accent text-on-accent shadow-sm hover:bg-accent-hover\",\n secondary: \"border border-border-default bg-surface-2 text-fg hover:border-border-strong hover:bg-surface-3\",\n outline: \"border border-border-default bg-transparent text-fg hover:border-accent hover:text-accent\",\n ghost: \"text-fg-secondary hover:bg-surface-2 hover:text-fg\",\n // The danger token is invariant and too light for small text on a light surface (3.6:1): the label stays a\n // text role, the border and the tint carry the danger.\n danger: \"border border-danger/50 bg-danger/10 text-fg hover:border-danger hover:bg-danger/20\",\n },\n size: { sm: \"h-8 px-3 text-xs\", md: \"h-10 px-4 text-sm\", lg: \"h-12 px-6 text-sm\", icon: \"h-10 w-10\" },\n shape: { rounded: \"rounded-lg\", pill: \"rounded-full\" },\n },\n defaultVariants: { variant: \"secondary\", size: \"md\", shape: \"rounded\" },\n});\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>;\n\nexport type ButtonProps = React.ComponentProps<\"button\"> &\n ButtonVariants & {\n /** Renders the child (e.g. a <Link>) instead of the <button>, with props, classes and ref merged. */\n asChild?: boolean;\n /** Disables and signals the wait (aria-busy, data-loading) — the product adds a spinner if it wants one. */\n loading?: boolean;\n };\n\nexport function Button({ asChild, loading, variant, size, shape, className, disabled, ...props }: ButtonProps) {\n const Comp = asChild ? Slot.Root : \"button\";\n return (\n <Comp\n type={asChild ? undefined : \"button\"}\n aria-busy={loading || undefined}\n data-loading={loading ? \"\" : undefined}\n data-variant={variant ?? \"secondary\"}\n disabled={asChild ? undefined : disabled || loading}\n aria-disabled={asChild && (disabled || loading) ? true : undefined}\n className={buttonVariants({ variant, size, shape, className })}\n {...props}\n />\n );\n}\n\nexport type IconButtonProps = Omit<ButtonProps, \"size\"> & {\n /** The accessible name (and tooltip) of the button — required, passed translated. */\n label: string;\n size?: ButtonProps[\"size\"];\n};\n\n/** An icon-only button: `label` is required, it is its accessible name. */\nexport function IconButton({ label, size = \"icon\", ...props }: IconButtonProps) {\n return <Button aria-label={label} title={label} size={size} {...props} />;\n}\n"],"mappings":"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","names":["jsx"]}
|
|
1
|
+
{"version":3,"sources":["../src/theme/theme.tsx"],"sourcesContent":["// Client. ONE mechanism for the whole organisation: dark by default, `html.light` for light, `html.theme-<name>` for a\n// named theme, persisted in localStorage (`kz-theme` for the mode, `kz-theme-name` for the named theme).\nimport * as React from \"react\";\n\nimport { type ButtonVariants, buttonVariants } from \"../button/button\";\n\nexport type Mode = \"dark\" | \"light\" | \"system\";\n\nconst MODE_KEY = \"kz-theme\";\nconst NAME_KEY = \"kz-theme-name\";\nconst MODES: readonly Mode[] = [\"dark\", \"light\", \"system\"];\nconst DARK_QUERY = \"(prefers-color-scheme: dark)\";\n\nconst isMode = (value: unknown): value is Mode => MODES.includes(value as Mode);\n\n// Storage blocked (private mode, sandbox): the choice lives in memory for the page.\nconst memory = new Map<string, string>();\n\nfunction read(key: string): string | null {\n try {\n return localStorage.getItem(key);\n } catch {\n return memory.get(key) ?? null;\n }\n}\n\nfunction write(key: string, value: string | null) {\n if (value === null) memory.delete(key);\n else memory.set(key, value);\n try {\n if (value === null) localStorage.removeItem(key);\n else localStorage.setItem(key, value);\n } catch {\n // storage blocked: memory holds it\n }\n}\n\n// The persisted choice is an external store: every provider and tab reads the same value, the server reads none.\nconst listeners = new Set<() => void>();\nconst notify = () => listeners.forEach((listener) => listener());\nfunction subscribe(listener: () => void) {\n listeners.add(listener);\n window.addEventListener(\"storage\", listener);\n return () => {\n listeners.delete(listener);\n window.removeEventListener(\"storage\", listener);\n };\n}\n\nfunction applyMode(mode: Mode) {\n const dark = window.matchMedia(DARK_QUERY).matches;\n document.documentElement.classList.toggle(\"light\", mode === \"light\" || (mode === \"system\" && !dark));\n}\n\nfunction applyName(previous: string | null, next: string | null) {\n const classes = document.documentElement.classList;\n if (previous) classes.remove(`theme-${previous}`);\n if (next) classes.add(`theme-${next}`);\n}\n\n/**\n * In <head>, before anything renders: applies the persisted mode and named theme, so the page never flashes.\n * `nonce` for a strict Content-Security-Policy.\n */\nexport function ThemeScript({ nonce }: { nonce?: string }) {\n const js =\n `(function(){try{var m=localStorage.getItem(\"${MODE_KEY}\")||\"system\";var n=localStorage.getItem(\"${NAME_KEY}\");` +\n `var d=matchMedia(\"${DARK_QUERY}\").matches;var c=document.documentElement.classList;` +\n `c.toggle(\"light\",m===\"light\"||(m===\"system\"&&!d));if(n)c.add(\"theme-\"+n)}catch(e){}})()`;\n return <script nonce={nonce} dangerouslySetInnerHTML={{ __html: js }} />;\n}\n\nexport type ThemeContextValue = {\n /** The chosen mode: dark, light or follow the system. */\n mode: Mode;\n setMode: (mode: Mode) => void;\n /** The named theme (`html.theme-<name>`), or null. */\n theme: string | null;\n setTheme: (theme: string | null) => void;\n};\n\nconst ThemeContext = React.createContext<ThemeContextValue | null>(null);\n\nexport type ThemeProviderProps = {\n children: React.ReactNode;\n /** The mode before anything is persisted. */\n defaultMode?: Mode;\n};\n\nexport function ThemeProvider({ children, defaultMode = \"system\" }: ThemeProviderProps) {\n // Before hydration the server knows nothing persisted (ThemeScript has already applied it to <html>).\n const stored = React.useSyncExternalStore(subscribe, () => read(MODE_KEY), () => null);\n const mode: Mode = isMode(stored) ? stored : defaultMode;\n const theme = React.useSyncExternalStore(subscribe, () => read(NAME_KEY), () => null);\n\n // \"system\" follows the operating system while the page is open.\n React.useEffect(() => {\n if (mode !== \"system\") return;\n const query = window.matchMedia(DARK_QUERY);\n const onChange = () => applyMode(\"system\");\n query.addEventListener?.(\"change\", onChange);\n return () => query.removeEventListener?.(\"change\", onChange);\n }, [mode]);\n\n const setMode = React.useCallback((next: Mode) => {\n write(MODE_KEY, next);\n applyMode(next);\n notify();\n }, []);\n\n const setTheme = React.useCallback((next: string | null) => {\n applyName(read(NAME_KEY), next);\n write(NAME_KEY, next);\n notify();\n }, []);\n\n const value = React.useMemo(() => ({ mode, setMode, theme, setTheme }), [mode, setMode, theme, setTheme]);\n return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;\n}\n\nexport function useTheme(): ThemeContextValue {\n const context = React.useContext(ThemeContext);\n if (!context) throw new Error(\"useTheme: wrap the app in <ThemeProvider>\");\n return context;\n}\n\nconst ICONS: Record<Mode, React.ReactNode> = {\n dark: <path d=\"M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z\" />,\n light: (\n <>\n <circle cx=\"12\" cy=\"12\" r=\"4\" />\n <path d=\"M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4\" />\n </>\n ),\n system: (\n <>\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"12\" rx=\"2\" />\n <path d=\"M8 20h8M12 16v4\" />\n </>\n ),\n};\n\nexport type ThemeToggleProps = Omit<React.ComponentProps<\"button\">, \"onClick\" | \"children\"> &\n Pick<ButtonVariants, \"variant\" | \"shape\"> & {\n /** The accessible name — a string, or one per current mode (e.g. `(mode) => t(\"theme.\" + mode)`). */\n label: string | ((mode: Mode) => string);\n };\n\n/**\n * An icon button (styled as `IconButton`, without its Slot) that cycles dark → light → system. Needs a\n * <ThemeProvider> above it. State: `data-mode`.\n */\nexport function ThemeToggle({ label, variant = \"ghost\", shape, className, ...props }: ThemeToggleProps) {\n const { mode, setMode } = useTheme();\n const next = MODES[(MODES.indexOf(mode) + 1) % MODES.length] as Mode;\n const name = typeof label === \"function\" ? label(mode) : label;\n return (\n <button\n type=\"button\"\n aria-label={name}\n title={name}\n data-mode={mode}\n onClick={() => setMode(next)}\n className={buttonVariants({ variant, shape, size: \"icon\", className })}\n {...props}\n >\n <svg viewBox=\"0 0 24 24\" className=\"h-5 w-5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n {ICONS[mode]}\n </svg>\n </button>\n );\n}\n"],"mappings":"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","names":[]}
|
package/dist/toast.d.ts
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { ToasterProps as ToasterProps$1 } from 'sonner';
|
|
3
|
+
export { ExternalToast, toast } from 'sonner';
|
|
4
|
+
|
|
5
|
+
declare const toastClassNames: {
|
|
6
|
+
toast: string;
|
|
7
|
+
default: string;
|
|
8
|
+
title: string;
|
|
9
|
+
description: string;
|
|
10
|
+
content: string;
|
|
11
|
+
icon: string;
|
|
12
|
+
success: string;
|
|
13
|
+
warning: string;
|
|
14
|
+
error: string;
|
|
15
|
+
info: string;
|
|
16
|
+
loading: string;
|
|
17
|
+
actionButton: string;
|
|
18
|
+
cancelButton: string;
|
|
19
|
+
closeButton: string;
|
|
20
|
+
};
|
|
21
|
+
type ToasterProps = Omit<ToasterProps$1, "richColors" | "theme" | "containerAriaLabel" | "toastOptions"> & {
|
|
22
|
+
/** The accessible name of the notifications region (sonner's `containerAriaLabel`) — passed translated. */
|
|
23
|
+
label: string;
|
|
24
|
+
/** The accessible name of each toast's close button — passed translated. */
|
|
25
|
+
closeLabel: string;
|
|
26
|
+
/** Extra options for every toast (duration, a className); the class names are merged with the platform's. */
|
|
27
|
+
toastOptions?: Omit<NonNullable<ToasterProps$1["toastOptions"]>, "unstyled" | "closeButtonAriaLabel">;
|
|
28
|
+
};
|
|
29
|
+
/** Mount once, in the root layout. Then call `toast()`, `toast.success/warning/error/info`, `toast.custom(…)`. */
|
|
30
|
+
declare function Toaster({ label, closeLabel, position, closeButton, toastOptions, ...props }: ToasterProps): React.JSX.Element;
|
|
31
|
+
|
|
32
|
+
export { Toaster, type ToasterProps, toastClassNames };
|
package/dist/toast.js
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import {
|
|
3
|
+
cn
|
|
4
|
+
} from "./chunk-5AXLA4LK.js";
|
|
5
|
+
|
|
6
|
+
// src/toast/toast.tsx
|
|
7
|
+
import { Toaster as Sonner } from "sonner";
|
|
8
|
+
import { toast } from "sonner";
|
|
9
|
+
import { jsx } from "react/jsx-runtime";
|
|
10
|
+
var tone = (color) => cn("border-l-4", color);
|
|
11
|
+
var toastClassNames = {
|
|
12
|
+
toast: "group pointer-events-auto relative flex w-full items-start gap-3 rounded-xl border border-border-default bg-surface-2 p-4 pr-10 text-sm text-fg shadow-lg",
|
|
13
|
+
default: "",
|
|
14
|
+
title: "font-semibold text-fg",
|
|
15
|
+
description: "mt-0.5 text-xs text-fg-secondary",
|
|
16
|
+
content: "flex min-w-0 flex-1 flex-col",
|
|
17
|
+
icon: "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4",
|
|
18
|
+
success: tone("border-l-success [&_[data-icon]]:text-success"),
|
|
19
|
+
warning: tone("border-l-warning [&_[data-icon]]:text-warning"),
|
|
20
|
+
error: tone("border-l-danger [&_[data-icon]]:text-danger"),
|
|
21
|
+
info: tone("border-l-info [&_[data-icon]]:text-info"),
|
|
22
|
+
loading: "",
|
|
23
|
+
actionButton: "ml-auto shrink-0 self-center rounded-lg bg-accent px-3 py-1.5 text-xs font-semibold text-on-accent hover:bg-accent-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
|
|
24
|
+
cancelButton: "shrink-0 self-center rounded-lg px-3 py-1.5 text-xs font-semibold text-fg-secondary hover:bg-surface-3 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
|
|
25
|
+
closeButton: "absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-full text-fg-secondary hover:bg-surface-3 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring [&>svg]:h-3.5 [&>svg]:w-3.5"
|
|
26
|
+
};
|
|
27
|
+
function Toaster({ label, closeLabel, position = "bottom-right", closeButton = true, toastOptions, ...props }) {
|
|
28
|
+
const extra = toastOptions?.classNames ?? {};
|
|
29
|
+
const classNames = Object.fromEntries(
|
|
30
|
+
Object.entries(toastClassNames).map(([key, value]) => [key, cn(value, extra[key])])
|
|
31
|
+
);
|
|
32
|
+
return /* @__PURE__ */ jsx(
|
|
33
|
+
Sonner,
|
|
34
|
+
{
|
|
35
|
+
position,
|
|
36
|
+
closeButton,
|
|
37
|
+
containerAriaLabel: label,
|
|
38
|
+
richColors: false,
|
|
39
|
+
toastOptions: { ...toastOptions, unstyled: true, closeButtonAriaLabel: closeLabel, classNames },
|
|
40
|
+
...props
|
|
41
|
+
}
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
export {
|
|
45
|
+
Toaster,
|
|
46
|
+
toast,
|
|
47
|
+
toastClassNames
|
|
48
|
+
};
|
|
49
|
+
//# sourceMappingURL=toast.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/toast/toast.tsx"],"sourcesContent":["// Client. sonner does the queue, the stacking, the swipe, the timers, the live region and the hotkey; the look is\n// ours: sonner's own styling is off (`unstyled`) and every part reads a role. The status tones are soft (a tinted\n// border and a coloured icon, the text stays `text-fg`): the invariant status tokens are too light for small text.\nimport { Toaster as Sonner, type ToasterProps as SonnerProps } from \"sonner\";\n\nimport { cn } from \"../cn\";\n\nexport type { ExternalToast } from \"sonner\";\nexport { toast } from \"sonner\";\n\nconst tone = (color: string) => cn(\"border-l-4\", color);\n\nexport const toastClassNames = {\n toast:\n \"group pointer-events-auto relative flex w-full items-start gap-3 rounded-xl border border-border-default bg-surface-2 p-4 pr-10 \" +\n \"text-sm text-fg shadow-lg\",\n default: \"\",\n title: \"font-semibold text-fg\",\n description: \"mt-0.5 text-xs text-fg-secondary\",\n content: \"flex min-w-0 flex-1 flex-col\",\n icon: \"mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center [&>svg]:h-4 [&>svg]:w-4\",\n success: tone(\"border-l-success [&_[data-icon]]:text-success\"),\n warning: tone(\"border-l-warning [&_[data-icon]]:text-warning\"),\n error: tone(\"border-l-danger [&_[data-icon]]:text-danger\"),\n info: tone(\"border-l-info [&_[data-icon]]:text-info\"),\n loading: \"\",\n actionButton:\n \"ml-auto shrink-0 self-center rounded-lg bg-accent px-3 py-1.5 text-xs font-semibold text-on-accent hover:bg-accent-hover \" +\n \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n cancelButton:\n \"shrink-0 self-center rounded-lg px-3 py-1.5 text-xs font-semibold text-fg-secondary hover:bg-surface-3 hover:text-fg \" +\n \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n closeButton:\n \"absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-full text-fg-secondary hover:bg-surface-3 hover:text-fg \" +\n \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring [&>svg]:h-3.5 [&>svg]:w-3.5\",\n} satisfies NonNullable<NonNullable<SonnerProps[\"toastOptions\"]>[\"classNames\"]>;\n\nexport type ToasterProps = Omit<SonnerProps, \"richColors\" | \"theme\" | \"containerAriaLabel\" | \"toastOptions\"> & {\n /** The accessible name of the notifications region (sonner's `containerAriaLabel`) — passed translated. */\n label: string;\n /** The accessible name of each toast's close button — passed translated. */\n closeLabel: string;\n /** Extra options for every toast (duration, a className); the class names are merged with the platform's. */\n toastOptions?: Omit<NonNullable<SonnerProps[\"toastOptions\"]>, \"unstyled\" | \"closeButtonAriaLabel\">;\n};\n\n/** Mount once, in the root layout. Then call `toast()`, `toast.success/warning/error/info`, `toast.custom(…)`. */\nexport function Toaster({ label, closeLabel, position = \"bottom-right\", closeButton = true, toastOptions, ...props }: ToasterProps) {\n const extra = toastOptions?.classNames ?? {};\n const classNames = Object.fromEntries(\n Object.entries(toastClassNames).map(([key, value]) => [key, cn(value, extra[key as keyof typeof extra])]),\n ) as typeof toastClassNames;\n return (\n <Sonner\n position={position}\n closeButton={closeButton}\n containerAriaLabel={label}\n richColors={false}\n toastOptions={{ ...toastOptions, unstyled: true, closeButtonAriaLabel: closeLabel, classNames }}\n {...props}\n />\n );\n}\n"],"mappings":";;;;;;AAGA,SAAS,WAAW,cAAgD;AAKpE,SAAS,aAAa;AA6ClB;AA3CJ,IAAM,OAAO,CAAC,UAAkB,GAAG,cAAc,KAAK;AAE/C,IAAM,kBAAkB;AAAA,EAC7B,OACE;AAAA,EAEF,SAAS;AAAA,EACT,OAAO;AAAA,EACP,aAAa;AAAA,EACb,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS,KAAK,+CAA+C;AAAA,EAC7D,SAAS,KAAK,+CAA+C;AAAA,EAC7D,OAAO,KAAK,6CAA6C;AAAA,EACzD,MAAM,KAAK,yCAAyC;AAAA,EACpD,SAAS;AAAA,EACT,cACE;AAAA,EAEF,cACE;AAAA,EAEF,aACE;AAEJ;AAYO,SAAS,QAAQ,EAAE,OAAO,YAAY,WAAW,gBAAgB,cAAc,MAAM,cAAc,GAAG,MAAM,GAAiB;AAClI,QAAM,QAAQ,cAAc,cAAc,CAAC;AAC3C,QAAM,aAAa,OAAO;AAAA,IACxB,OAAO,QAAQ,eAAe,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK,GAAG,OAAO,MAAM,GAAyB,CAAC,CAAC,CAAC;AAAA,EAC1G;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,oBAAoB;AAAA,MACpB,YAAY;AAAA,MACZ,cAAc,EAAE,GAAG,cAAc,UAAU,MAAM,sBAAsB,YAAY,WAAW;AAAA,MAC7F,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { Tooltip as Tooltip$1 } from 'radix-ui';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
|
|
4
|
+
/** Optional, once near the root: shares `delayDuration` and the skip delay between tooltips. */
|
|
5
|
+
declare const TooltipProvider: React.FC<Tooltip$1.TooltipProviderProps>;
|
|
6
|
+
type TooltipProps = Omit<React.ComponentProps<typeof Tooltip$1.Content>, "content" | "children"> & {
|
|
7
|
+
/** What the tooltip says — passed translated. */
|
|
8
|
+
content: React.ReactNode;
|
|
9
|
+
/** The trigger, rendered as is (`asChild`): a focusable element. */
|
|
10
|
+
children: React.ReactNode;
|
|
11
|
+
open?: boolean;
|
|
12
|
+
defaultOpen?: boolean;
|
|
13
|
+
onOpenChange?: (open: boolean) => void;
|
|
14
|
+
/** Hover delay in ms before it opens (300 by default). */
|
|
15
|
+
delayDuration?: number;
|
|
16
|
+
/** The element the portal renders into (default: document.body). */
|
|
17
|
+
container?: HTMLElement | null;
|
|
18
|
+
};
|
|
19
|
+
declare function Tooltip({ content, children, open, defaultOpen, onOpenChange, delayDuration, container, sideOffset, collisionPadding, className, ...props }: TooltipProps): React.JSX.Element;
|
|
20
|
+
|
|
21
|
+
export { Tooltip, type TooltipProps, TooltipProvider };
|