@justanarthur/modo-ui 0.0.0-stage → 0.2.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.
- package/LICENSE +21 -0
- package/LICENSE.beui +21 -0
- package/LICENSE.fluid-functionalism +21 -0
- package/LICENSE.motion-primitives +21 -0
- package/LICENSE.sileo +21 -0
- package/README.md +608 -2
- package/dist/base.css +994 -0
- package/dist/blocks/sidebar-app/index.d.ts +34 -0
- package/dist/blocks/sidebar-app/index.js +31 -0
- package/dist/components/badge/index.d.ts +59 -0
- package/dist/components/badge/index.js +16 -0
- package/dist/components/button/index.d.ts +59 -0
- package/dist/components/button/index.js +14 -0
- package/dist/components/card/index.d.ts +141 -0
- package/dist/components/card/index.js +42 -0
- package/dist/components/inputs/checkbox-group/index.d.ts +50 -0
- package/dist/components/inputs/checkbox-group/index.js +21 -0
- package/dist/components/inputs/color-picker/index.d.ts +137 -0
- package/dist/components/inputs/color-picker/index.js +35 -0
- package/dist/components/inputs/combobox/index.d.ts +161 -0
- package/dist/components/inputs/combobox/index.js +38 -0
- package/dist/components/inputs/date-time/calendar/index.d.ts +45 -0
- package/dist/components/inputs/date-time/calendar/index.js +18 -0
- package/dist/components/inputs/date-time/date-picker/index.d.ts +82 -0
- package/dist/components/inputs/date-time/date-picker/index.js +32 -0
- package/dist/components/inputs/date-time/date-range-picker/index.d.ts +64 -0
- package/dist/components/inputs/date-time/date-range-picker/index.js +31 -0
- package/dist/components/inputs/date-time/duration-picker/index.d.ts +57 -0
- package/dist/components/inputs/date-time/duration-picker/index.js +31 -0
- package/dist/components/inputs/date-time/month-picker/index.d.ts +57 -0
- package/dist/components/inputs/date-time/month-picker/index.js +30 -0
- package/dist/components/inputs/date-time/time-picker/index.d.ts +59 -0
- package/dist/components/inputs/date-time/time-picker/index.js +31 -0
- package/dist/components/inputs/input/index.d.ts +84 -0
- package/dist/components/inputs/input/index.js +19 -0
- package/dist/components/inputs/input-copy/index.d.ts +44 -0
- package/dist/components/inputs/input-copy/index.js +16 -0
- package/dist/components/inputs/input-message/index.d.ts +125 -0
- package/dist/components/inputs/input-message/index.js +25 -0
- package/dist/components/inputs/radio-group/index.d.ts +58 -0
- package/dist/components/inputs/radio-group/index.js +20 -0
- package/dist/components/inputs/search/index.d.ts +83 -0
- package/dist/components/inputs/search/index.js +25 -0
- package/dist/components/inputs/select/index.d.ts +105 -0
- package/dist/components/inputs/select/index.js +34 -0
- package/dist/components/inputs/slider/index.d.ts +108 -0
- package/dist/components/inputs/slider/index.js +14 -0
- package/dist/components/inputs/switch/index.d.ts +43 -0
- package/dist/components/inputs/switch/index.js +14 -0
- package/dist/components/navigation/accordion/index.d.ts +117 -0
- package/dist/components/navigation/accordion/index.js +28 -0
- package/dist/components/navigation/sidebar/index.d.ts +388 -0
- package/dist/components/navigation/sidebar/index.js +99 -0
- package/dist/components/navigation/tabs/index.d.ts +70 -0
- package/dist/components/navigation/tabs/index.js +23 -0
- package/dist/components/navigation/tabs-subtle/index.d.ts +73 -0
- package/dist/components/navigation/tabs-subtle/index.js +21 -0
- package/dist/components/overlays/alert-dialog/index.d.ts +67 -0
- package/dist/components/overlays/alert-dialog/index.js +22 -0
- package/dist/components/overlays/command/index.d.ts +121 -0
- package/dist/components/overlays/command/index.js +36 -0
- package/dist/components/overlays/context-menu/index.d.ts +97 -0
- package/dist/components/overlays/context-menu/index.js +29 -0
- package/dist/components/overlays/dialog/index.d.ts +130 -0
- package/dist/components/overlays/dialog/index.js +37 -0
- package/dist/components/overlays/dropdown/index.d.ts +222 -0
- package/dist/components/overlays/dropdown/index.js +44 -0
- package/dist/components/overlays/popover/index.d.ts +87 -0
- package/dist/components/overlays/popover/index.js +26 -0
- package/dist/components/overlays/preview-card/index.d.ts +75 -0
- package/dist/components/overlays/preview-card/index.js +19 -0
- package/dist/components/overlays/sheet/index.d.ts +67 -0
- package/dist/components/overlays/sheet/index.js +24 -0
- package/dist/components/overlays/toast/index.d.ts +107 -0
- package/dist/components/overlays/toast/index.js +21 -0
- package/dist/components/overlays/tooltip/index.d.ts +75 -0
- package/dist/components/overlays/tooltip/index.js +17 -0
- package/dist/components/table/index.d.ts +44 -0
- package/dist/components/table/index.js +26 -0
- package/dist/components/thinking-indicator/index.d.ts +32 -0
- package/dist/components/thinking-indicator/index.js +13 -0
- package/dist/index.d.ts +3926 -0
- package/dist/index.js +511 -0
- package/dist/preset.d.ts +104 -0
- package/dist/preset.js +124 -0
- package/dist/primitives/code/index.d.ts +23 -0
- package/dist/primitives/code/index.js +11 -0
- package/dist/primitives/craft/index.d.ts +31 -0
- package/dist/primitives/craft/index.js +11 -0
- package/dist/primitives/fluid-hover/index.d.ts +233 -0
- package/dist/primitives/fluid-hover/index.js +25 -0
- package/dist/primitives/morph/index.d.ts +127 -0
- package/dist/primitives/morph/index.js +19 -0
- package/dist/primitives/motion/index.d.ts +115 -0
- package/dist/primitives/motion/index.js +19 -0
- package/dist/primitives/scroll-area/index.d.ts +41 -0
- package/dist/primitives/scroll-area/index.js +12 -0
- package/dist/primitives/sizes/index.d.ts +128 -0
- package/dist/primitives/sizes/index.js +21 -0
- package/dist/primitives/surface/index.d.ts +69 -0
- package/dist/primitives/surface/index.js +17 -0
- package/dist/shared/components-0ke6xada.js +123 -0
- package/dist/shared/components-0q0sqfh4.js +146 -0
- package/dist/shared/components-0sn7ypjw.js +61 -0
- package/dist/shared/components-1j9791sn.js +345 -0
- package/dist/shared/components-1rfwbyyc.js +361 -0
- package/dist/shared/components-1v7rxytx.js +30 -0
- package/dist/shared/components-1xekx2hx.js +215 -0
- package/dist/shared/components-39jq9va1.js +86 -0
- package/dist/shared/components-3gae8nta.js +719 -0
- package/dist/shared/components-3k8xpnpq.js +1759 -0
- package/dist/shared/components-3ky44908.js +9 -0
- package/dist/shared/components-3mkepka5.js +111 -0
- package/dist/shared/components-3wk0w46f.js +667 -0
- package/dist/shared/components-4cnjmgex.js +124 -0
- package/dist/shared/components-59efxjd9.js +298 -0
- package/dist/shared/components-5xc2j8jz.js +159 -0
- package/dist/shared/components-62ybc7t2.js +496 -0
- package/dist/shared/components-66mv71kx.js +262 -0
- package/dist/shared/components-7ans7ce5.js +120 -0
- package/dist/shared/components-7btqt08d.js +270 -0
- package/dist/shared/components-7r3etddy.js +171 -0
- package/dist/shared/components-7x9kawxv.js +152 -0
- package/dist/shared/components-8fpr3s4p.js +292 -0
- package/dist/shared/components-9jvzzvt1.js +198 -0
- package/dist/shared/components-apdwtweq.js +484 -0
- package/dist/shared/components-asr5pg50.js +191 -0
- package/dist/shared/components-b2wyq2cq.js +232 -0
- package/dist/shared/components-c6s6b43g.js +15 -0
- package/dist/shared/components-ca2c898n.js +1828 -0
- package/dist/shared/components-cbxjn9p8.js +141 -0
- package/dist/shared/components-chacnk61.js +216 -0
- package/dist/shared/components-cv16mryv.js +62 -0
- package/dist/shared/components-ez65vtbq.js +110 -0
- package/dist/shared/components-ezxhrmer.js +17 -0
- package/dist/shared/components-gc5vtq2f.js +149 -0
- package/dist/shared/components-gf5s6ap9.js +42 -0
- package/dist/shared/components-gvr9w41t.js +193 -0
- package/dist/shared/components-h2dpcwgc.js +137 -0
- package/dist/shared/components-hawvy2qz.js +105 -0
- package/dist/shared/components-hqeq3w9q.js +375 -0
- package/dist/shared/components-jjw69c4c.js +28 -0
- package/dist/shared/components-jwst3vtj.js +346 -0
- package/dist/shared/components-kvr7f9hy.js +45 -0
- package/dist/shared/components-men63rwj.js +9 -0
- package/dist/shared/components-mhd39z7x.js +22 -0
- package/dist/shared/components-n7mjr357.js +26 -0
- package/dist/shared/components-ng72k97e.js +128 -0
- package/dist/shared/components-nh8tma1n.js +986 -0
- package/dist/shared/components-njzgqdwy.js +445 -0
- package/dist/shared/components-ny774h8p.js +293 -0
- package/dist/shared/components-q4daerx0.js +58 -0
- package/dist/shared/components-q5xj5c16.js +79 -0
- package/dist/shared/components-rr7a6ja9.js +160 -0
- package/dist/shared/components-s2bz1xpk.js +63 -0
- package/dist/shared/components-tqvarbfv.js +288 -0
- package/dist/shared/components-v6xp325t.js +304 -0
- package/dist/shared/components-v7wtz8hk.js +144 -0
- package/dist/shared/components-vc7vq5nz.js +32 -0
- package/dist/shared/components-vfbhxf5r.js +58 -0
- package/dist/shared/components-vynjtrk6.js +19 -0
- package/dist/shared/components-wvp1m52g.js +1200 -0
- package/dist/shared/components-yh3kwdhr.js +981 -0
- package/dist/shared/components-ytb2tefr.js +291 -0
- package/dist/shared/components-zfnmn5d4.js +220 -0
- package/dist/shared/components-zrkzcayz.js +141 -0
- package/dist/shared/components-zx6b6yby.js +42 -0
- package/dist/styles.css +1949 -0
- package/dist/tailwind.css +219 -0
- package/dist/tokens.css +345 -0
- package/package.json +103 -4
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { JSX as JSX_1kxb } from "react";
|
|
2
|
+
interface SidebarAppProps {
|
|
3
|
+
/** Start with the sidebar open; the preset starts it collapsed. Defaults to `false`. */
|
|
4
|
+
defaultOpen?: boolean;
|
|
5
|
+
/** The sidebar's layout (see Sidebar). Defaults to `'inset'`. */
|
|
6
|
+
variant?: "sidebar" | "floating" | "inset";
|
|
7
|
+
/** The edge it sits on. Defaults to `'left'`. */
|
|
8
|
+
side?: "left" | "right";
|
|
9
|
+
/** Open the collapsed sidebar while the pointer is at its edge or on the topbar's trigger (see Sidebar). Defaults to `false`. */
|
|
10
|
+
openOnHover?: boolean;
|
|
11
|
+
/** Fill the parent box instead of the viewport, as the examples do. Defaults to `false`. */
|
|
12
|
+
contained?: boolean;
|
|
13
|
+
}
|
|
14
|
+
type Element_12xgc = JSX_1kxb["Element"];
|
|
15
|
+
/**
|
|
16
|
+
* An app shell around the Sidebar, as Fluid Functionalism's playground preset
|
|
17
|
+
* `sa1FQfCxH6` builds it: the inset layout, starting collapsed.
|
|
18
|
+
*
|
|
19
|
+
* Press the trigger in the topbar (or `[`) to bring the sidebar in. The
|
|
20
|
+
* header holds a workspace switcher, a search field and a "New" row; two
|
|
21
|
+
* thread sections fold from their labels and carry an "Add item" action;
|
|
22
|
+
* every thread shows its status dot and, on hover, a "More options" menu;
|
|
23
|
+
* the footer anchors the user row and two buttons. Pick a thread and the
|
|
24
|
+
* active row melts over to it while the topbar follows.
|
|
25
|
+
*
|
|
26
|
+
* Every overlay grows out of what opened it: the switcher, the user menu
|
|
27
|
+
* and the row menus are Dropdowns, the labels on the buttons are Tooltips,
|
|
28
|
+
* a collapsed sidebar with `openOnHover` slides open from its edge, and below
|
|
29
|
+
* the `md` breakpoint the sidebar is a Sheet growing out of the left edge.
|
|
30
|
+
*
|
|
31
|
+
* @example {@include ./examples.mdx}
|
|
32
|
+
*/
|
|
33
|
+
declare function SidebarApp({ defaultOpen, variant, side, openOnHover, contained }: SidebarAppProps): Element_12xgc;
|
|
34
|
+
export { SidebarAppProps, SidebarApp as default };
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import {
|
|
2
|
+
SidebarApp2
|
|
3
|
+
} from "../../shared/components-njzgqdwy.js";
|
|
4
|
+
import"../../shared/components-ca2c898n.js";
|
|
5
|
+
import"../../shared/components-c6s6b43g.js";
|
|
6
|
+
import"../../shared/components-mhd39z7x.js";
|
|
7
|
+
import"../../shared/components-ng72k97e.js";
|
|
8
|
+
import"../../shared/components-rr7a6ja9.js";
|
|
9
|
+
import"../../shared/components-nh8tma1n.js";
|
|
10
|
+
import"../../shared/components-5xc2j8jz.js";
|
|
11
|
+
import"../../shared/components-zfnmn5d4.js";
|
|
12
|
+
import"../../shared/components-3ky44908.js";
|
|
13
|
+
import"../../shared/components-zrkzcayz.js";
|
|
14
|
+
import"../../shared/components-0q0sqfh4.js";
|
|
15
|
+
import"../../shared/components-kvr7f9hy.js";
|
|
16
|
+
import"../../shared/components-59efxjd9.js";
|
|
17
|
+
import"../../shared/components-chacnk61.js";
|
|
18
|
+
import"../../shared/components-hqeq3w9q.js";
|
|
19
|
+
import"../../shared/components-jjw69c4c.js";
|
|
20
|
+
import"../../shared/components-b2wyq2cq.js";
|
|
21
|
+
import"../../shared/components-n7mjr357.js";
|
|
22
|
+
import"../../shared/components-men63rwj.js";
|
|
23
|
+
import"../../shared/components-0sn7ypjw.js";
|
|
24
|
+
import"../../shared/components-hawvy2qz.js";
|
|
25
|
+
import"../../shared/components-cv16mryv.js";
|
|
26
|
+
import"../../shared/components-vc7vq5nz.js";
|
|
27
|
+
import"../../shared/components-zx6b6yby.js";
|
|
28
|
+
import"../../shared/components-ezxhrmer.js";
|
|
29
|
+
export {
|
|
30
|
+
SidebarApp2 as default
|
|
31
|
+
};
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { VariantProps } from "class-variance-authority";
|
|
2
|
+
import { HTMLAttributes } from "react";
|
|
3
|
+
import { ClassProp as ClassProp_wz9o0r } from "class-variance-authority/types";
|
|
4
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn } from "react";
|
|
5
|
+
import { RefAttributes as RefAttributes_miuf56 } from "react";
|
|
6
|
+
declare const badgeColors: {
|
|
7
|
+
readonly gray: "var(--badge-gray)";
|
|
8
|
+
readonly red: "var(--badge-red)";
|
|
9
|
+
readonly orange: "var(--badge-orange)";
|
|
10
|
+
readonly amber: "var(--badge-amber)";
|
|
11
|
+
readonly yellow: "var(--badge-yellow)";
|
|
12
|
+
readonly lime: "var(--badge-lime)";
|
|
13
|
+
readonly green: "var(--badge-green)";
|
|
14
|
+
readonly emerald: "var(--badge-emerald)";
|
|
15
|
+
readonly teal: "var(--badge-teal)";
|
|
16
|
+
readonly cyan: "var(--badge-cyan)";
|
|
17
|
+
readonly blue: "var(--badge-blue)";
|
|
18
|
+
readonly indigo: "var(--badge-indigo)";
|
|
19
|
+
readonly violet: "var(--badge-violet)";
|
|
20
|
+
readonly purple: "var(--badge-purple)";
|
|
21
|
+
readonly fuchsia: "var(--badge-fuchsia)";
|
|
22
|
+
readonly pink: "var(--badge-pink)";
|
|
23
|
+
readonly rose: "var(--badge-rose)";
|
|
24
|
+
};
|
|
25
|
+
type BadgeColor = keyof typeof badgeColors;
|
|
26
|
+
declare const badgeVariants: (props?: ({
|
|
27
|
+
variant?: "dot" | "solid" | null | undefined;
|
|
28
|
+
size?: "default" | "compact" | null | undefined;
|
|
29
|
+
} & ClassProp_wz9o0r) | undefined) => string;
|
|
30
|
+
type BadgeSizeCanonical = "default" | "compact";
|
|
31
|
+
/** Public size values: the canonical two-size scale plus the pre-sizes-system
|
|
32
|
+
* aliases, kept so existing call sites keep compiling. Aliases resolve onto
|
|
33
|
+
* the canonical ladder (sm → compact; md/lg → default). */
|
|
34
|
+
type BadgeSize = BadgeSizeCanonical | "sm" | "md" | "lg";
|
|
35
|
+
interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, "color">, Omit<VariantProps<typeof badgeVariants>, "size"> {
|
|
36
|
+
/** Visual style. Solid uses a tinted background; dot shows a colored indicator. Defaults to `"solid"`. */
|
|
37
|
+
variant?: "solid" | "dot";
|
|
38
|
+
/** Step on the size ladder (see Sizes). Legacy sm/md/lg values resolve as aliases (sm → compact; md/lg → default). Defaults to the surrounding SizeProvider, else `"default"`. */
|
|
39
|
+
size?: BadgeSize;
|
|
40
|
+
/** Color from the Tailwind palette: gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, blue, indigo, violet, purple, fuchsia, pink, rose. Defaults to `"gray"`. */
|
|
41
|
+
color?: BadgeColor;
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Compact label for status, category, or metadata. Supports solid and dot
|
|
45
|
+
* variants with Tailwind colors.
|
|
46
|
+
*
|
|
47
|
+
* Solid badges tint their background with the chosen color mixed into the
|
|
48
|
+
* page background (gray uses the accent token); dot badges keep a neutral
|
|
49
|
+
* border and show the color as a small indicator. The badge rides the size
|
|
50
|
+
* ladder — `size` pins it, otherwise it follows the surrounding SizeProvider
|
|
51
|
+
* — and takes its corner radius from the shape context. Changes animate: a
|
|
52
|
+
* new label or variant springs the width while the label crossfades, and a
|
|
53
|
+
* new color fades in. The palette is also exported as `badgeColors`, the class
|
|
54
|
+
* recipe as `badgeVariants`.
|
|
55
|
+
*
|
|
56
|
+
* @example {@include ./examples.mdx}
|
|
57
|
+
*/
|
|
58
|
+
declare const Badge: ForwardRefExoticComponent_tcubfn<BadgeProps & RefAttributes_miuf56<HTMLSpanElement>>;
|
|
59
|
+
export { Badge, BadgeColor, BadgeProps, BadgeSize, badgeColors, badgeVariants, Badge as default };
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import {
|
|
2
|
+
badgeColors2,
|
|
3
|
+
badgeVariants2,
|
|
4
|
+
Badge2,
|
|
5
|
+
badge_default
|
|
6
|
+
} from "../../shared/components-7r3etddy.js";
|
|
7
|
+
import"../../shared/components-men63rwj.js";
|
|
8
|
+
import"../../shared/components-0sn7ypjw.js";
|
|
9
|
+
import"../../shared/components-cv16mryv.js";
|
|
10
|
+
import"../../shared/components-ezxhrmer.js";
|
|
11
|
+
export {
|
|
12
|
+
Badge2 as Badge,
|
|
13
|
+
badgeColors2 as badgeColors,
|
|
14
|
+
badgeVariants2 as badgeVariants,
|
|
15
|
+
badge_default as default
|
|
16
|
+
};
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { VariantProps } from "class-variance-authority";
|
|
2
|
+
import { ButtonHTMLAttributes, ReactNode as ReactNode2 } from "react";
|
|
3
|
+
import { ComponentType } from "react";
|
|
4
|
+
interface IconComponentProps {
|
|
5
|
+
size?: number | string;
|
|
6
|
+
strokeWidth?: number | string;
|
|
7
|
+
className?: string;
|
|
8
|
+
}
|
|
9
|
+
type IconComponent = ComponentType<IconComponentProps>;
|
|
10
|
+
import { ClassProp as ClassProp_wz9o0r } from "class-variance-authority/types";
|
|
11
|
+
import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn } from "react";
|
|
12
|
+
import { RefAttributes as RefAttributes_miuf56 } from "react";
|
|
13
|
+
declare const buttonVariants: (props?: ({
|
|
14
|
+
variant?: "primary" | "secondary" | "tertiary" | "ghost" | null | undefined;
|
|
15
|
+
size?: "default" | "compact" | "icon" | "icon-compact" | null | undefined;
|
|
16
|
+
iconLeft?: boolean | null | undefined;
|
|
17
|
+
iconRight?: boolean | null | undefined;
|
|
18
|
+
} & ClassProp_wz9o0r) | undefined) => string;
|
|
19
|
+
type ButtonSizeCanonical = "default" | "compact" | "icon" | "icon-compact";
|
|
20
|
+
/** Public size values: the canonical two-size scale plus the pre-sizes-system
|
|
21
|
+
* aliases, kept so existing call sites keep compiling. Aliases resolve onto
|
|
22
|
+
* the canonical ladder (sm → compact; md/lg → default). */
|
|
23
|
+
type ButtonSize = ButtonSizeCanonical | "sm" | "md" | "lg" | "icon-sm" | "icon-lg";
|
|
24
|
+
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Omit<VariantProps<typeof buttonVariants>, "size"> {
|
|
25
|
+
/** Visual style of the button. Defaults to `"primary"`. */
|
|
26
|
+
variant?: "primary" | "secondary" | "tertiary" | "ghost";
|
|
27
|
+
/** Step on the size ladder (36px default, 28px compact — see Sizes): `"default"` | `"compact"` | `"icon"` | `"icon-compact"`. Omitted, the button follows the surrounding SizeProvider. Legacy sm/md/lg values resolve as aliases (sm → compact; md/lg → default; icon-sm → icon-compact; icon-lg → icon). */
|
|
28
|
+
size?: ButtonSize;
|
|
29
|
+
/** Merge props onto the child element instead of rendering a `<button>` — the single React-element child becomes the rendered element (slot-style). Defaults to `false`. */
|
|
30
|
+
asChild?: boolean;
|
|
31
|
+
/** Folds the button into a circle around a spinner and disables it; the button keeps its box, so nothing around it moves. Defaults to `false`. */
|
|
32
|
+
loading?: boolean;
|
|
33
|
+
/** Icon displayed before the label. */
|
|
34
|
+
leadingIcon?: IconComponent;
|
|
35
|
+
/** Icon displayed after the label. */
|
|
36
|
+
trailingIcon?: IconComponent;
|
|
37
|
+
/** Forces the pressed/held visual — e.g. while a dropdown or popover the button opened is showing. Defaults to `false`. */
|
|
38
|
+
active?: boolean;
|
|
39
|
+
/** Disables the button. Defaults to `false`. */
|
|
40
|
+
disabled?: boolean;
|
|
41
|
+
/** The label. With `size="icon"` / `"icon-compact"`, the icon itself (give the button an `aria-label`). */
|
|
42
|
+
children?: ReactNode2;
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* Versatile button with variants, sizes, loading state, and icon support.
|
|
46
|
+
*
|
|
47
|
+
* Four variants (primary, secondary, tertiary, ghost) on the two-step size
|
|
48
|
+
* ladder: 36px by default, 28px compact — an explicit `size` wins, otherwise
|
|
49
|
+
* the button follows the surrounding SizeProvider. The press effect shrinks
|
|
50
|
+
* the fill by exactly 1px per side at any width, icons thicken their stroke
|
|
51
|
+
* on hover, and `loading` folds the surface into a circle around a spinner
|
|
52
|
+
* (and back when it ends) while the button keeps its box, so nothing around
|
|
53
|
+
* it moves. Built on Base UI's Button; `asChild` renders your own
|
|
54
|
+
* element (e.g. a link) with the button's styling instead.
|
|
55
|
+
*
|
|
56
|
+
* @example {@include ./examples.mdx}
|
|
57
|
+
*/
|
|
58
|
+
declare const Button: ForwardRefExoticComponent_tcubfn<ButtonProps & RefAttributes_miuf56<HTMLButtonElement>>;
|
|
59
|
+
export { Button, ButtonProps, ButtonSize, buttonVariants, Button as default };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import {
|
|
2
|
+
buttonVariants2,
|
|
3
|
+
Button2,
|
|
4
|
+
button_default
|
|
5
|
+
} from "../../shared/components-b2wyq2cq.js";
|
|
6
|
+
import"../../shared/components-men63rwj.js";
|
|
7
|
+
import"../../shared/components-0sn7ypjw.js";
|
|
8
|
+
import"../../shared/components-cv16mryv.js";
|
|
9
|
+
import"../../shared/components-ezxhrmer.js";
|
|
10
|
+
export {
|
|
11
|
+
Button2 as Button,
|
|
12
|
+
buttonVariants2 as buttonVariants,
|
|
13
|
+
button_default as default
|
|
14
|
+
};
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
import { ForwardRefExoticComponent, HTMLAttributes, ReactNode as ReactNode2, RefAttributes } from "react";
|
|
2
|
+
import { ComponentType } from "react";
|
|
3
|
+
interface IconComponentProps {
|
|
4
|
+
size?: number | string;
|
|
5
|
+
strokeWidth?: number | string;
|
|
6
|
+
className?: string;
|
|
7
|
+
}
|
|
8
|
+
type IconComponent = ComponentType<IconComponentProps>;
|
|
9
|
+
type SizeVariant = "default" | "compact";
|
|
10
|
+
import { JSX as JSX_1kxb2 } from "react";
|
|
11
|
+
type CardOrientation = "card" | "inline";
|
|
12
|
+
type CardBorder = "none" | "outlined";
|
|
13
|
+
interface CardGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "onDrag"> {
|
|
14
|
+
/** How each card lays its own content out.
|
|
15
|
+
* "card" — stacked vertically (media/header on top). "inline" — a
|
|
16
|
+
* horizontal row (leading media, trailing footer), like a Table row.
|
|
17
|
+
* @default "card" */
|
|
18
|
+
orientation?: CardOrientation;
|
|
19
|
+
/** Number of grid columns. >1 enables 2-D fluid hover across rows and columns.
|
|
20
|
+
* @default 1 */
|
|
21
|
+
columns?: number;
|
|
22
|
+
/** "none" — borderless (default), separated only by subtle dividers.
|
|
23
|
+
* "outlined" — draws a border: one shared frame when grouped, or one per
|
|
24
|
+
* card when `separated`. @default "none" */
|
|
25
|
+
border?: CardBorder;
|
|
26
|
+
/** Split the group into individually-shaped cards with a gap between them
|
|
27
|
+
* (a grid of tiles) instead of one continuous divided block. @default false */
|
|
28
|
+
separated?: boolean;
|
|
29
|
+
/** Enable the magnetic fluid-hover highlight. @default true */
|
|
30
|
+
fluidHover?: boolean;
|
|
31
|
+
}
|
|
32
|
+
declare const CardGroup: ForwardRefExoticComponent<CardGroupProps & RefAttributes<HTMLDivElement>>;
|
|
33
|
+
interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, "onClick"> {
|
|
34
|
+
/** Compositional parts: Card.Image, Card.Media, Card.Header, Card.Content, Card.Footer. */
|
|
35
|
+
children?: ReactNode2;
|
|
36
|
+
/** Makes the whole card a clickable target (stretched button); fluid hover previews it. */
|
|
37
|
+
onClick?: () => void;
|
|
38
|
+
/** Makes the whole card a link (stretched anchor). */
|
|
39
|
+
href?: string;
|
|
40
|
+
/** Opens href in a new tab. Defaults to `false`. */
|
|
41
|
+
external?: boolean;
|
|
42
|
+
/** Accessible name for the stretched link/button when the whole card is clickable (the visible title isn't wired up automatically). */
|
|
43
|
+
label?: string;
|
|
44
|
+
/** Persistent selected fill + title emphasis, on top of fluid hover. The group drops the hairline dividers around the selected card so the fill reads clean. Defaults to `false`. */
|
|
45
|
+
selected?: boolean;
|
|
46
|
+
/** Dims and disables the card. Defaults to `false`. */
|
|
47
|
+
disabled?: boolean;
|
|
48
|
+
/** Shows a dismiss (✕) button, revealed on hover or focus by default. Defaults to `false`. */
|
|
49
|
+
dismissible?: boolean;
|
|
50
|
+
/** Keeps the dismiss control hidden until the card is hovered or holds focus. Pass false for an always-visible ✕. Defaults to `true`. */
|
|
51
|
+
dismissOnHover?: boolean;
|
|
52
|
+
/** Called when the dismiss button is pressed. */
|
|
53
|
+
onDismiss?: () => void;
|
|
54
|
+
/** Pins the card to one step of the size ladder — compact tightens type and padding. Omitted, it follows the surrounding SizeProvider. */
|
|
55
|
+
size?: SizeVariant;
|
|
56
|
+
/** Injected by Card.Group — do not set by hand. */
|
|
57
|
+
index?: number;
|
|
58
|
+
}
|
|
59
|
+
type CardComponent = ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>> & {
|
|
60
|
+
Group: typeof CardGroup;
|
|
61
|
+
Header: typeof CardHeader;
|
|
62
|
+
Title: typeof CardTitle;
|
|
63
|
+
Description: typeof CardDescription;
|
|
64
|
+
Action: typeof CardAction;
|
|
65
|
+
Content: typeof CardContent;
|
|
66
|
+
Footer: typeof CardFooter;
|
|
67
|
+
Media: typeof CardMedia;
|
|
68
|
+
Image: typeof CardImage;
|
|
69
|
+
Eyebrow: typeof CardEyebrow;
|
|
70
|
+
Feature: typeof CardFeature;
|
|
71
|
+
Button: typeof CardButton;
|
|
72
|
+
};
|
|
73
|
+
/**
|
|
74
|
+
* shadcn's compositional card, dressed in Fluid Functionalism. Stacked,
|
|
75
|
+
* inline, or grid — borderless by default with fluid hover that previews
|
|
76
|
+
* where a click will land.
|
|
77
|
+
*
|
|
78
|
+
* The same parts and data-slot contract as shadcn's Card, on a transparent,
|
|
79
|
+
* borderless surface: a card inherits its parent's substrate and leans on
|
|
80
|
+
* hairline dividers rather than a drawn frame. Card.Group owns the layout (a
|
|
81
|
+
* stacked list, inline rows or a grid) and assigns every child its fluid
|
|
82
|
+
* hover index; only a clickable card (`onClick` or `href`) joins the magnetic
|
|
83
|
+
* highlight. A clickable card is one stretched button or link, while footer
|
|
84
|
+
* actions and Card.Action stay independently clickable above it.
|
|
85
|
+
*
|
|
86
|
+
* Statics: Card.Group (orientation "card" | "inline", columns, border "none"
|
|
87
|
+
* | "outlined", separated, fluidHover), Card.Header (title + description
|
|
88
|
+
* grid, pins Card.Action top-right), Card.Title (weight-animates when the card
|
|
89
|
+
* is selected), Card.Description, Card.Action, Card.Content, Card.Footer (the
|
|
90
|
+
* actions row), Card.Media (an icon tile, a logo or a [logoA, logoB] pair),
|
|
91
|
+
* Card.Image (full-bleed banner, or a leading image when inline),
|
|
92
|
+
* Card.Eyebrow (small uppercase label), Card.Feature (icon + title +
|
|
93
|
+
* description row) and Card.Button (primary | secondary | ghost | link
|
|
94
|
+
* action; an anchor when given `href`).
|
|
95
|
+
*
|
|
96
|
+
* @example {@include ./examples.mdx}
|
|
97
|
+
*/
|
|
98
|
+
declare const Card: CardComponent;
|
|
99
|
+
declare const CardHeader: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>>;
|
|
100
|
+
declare const CardTitle: ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & RefAttributes<HTMLSpanElement>>;
|
|
101
|
+
declare const CardDescription: ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & RefAttributes<HTMLParagraphElement>>;
|
|
102
|
+
declare const CardAction: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>>;
|
|
103
|
+
declare const CardContent: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>>;
|
|
104
|
+
declare const CardFooter: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>>;
|
|
105
|
+
type CardLogo = string | [string, string];
|
|
106
|
+
interface CardMediaProps {
|
|
107
|
+
logo?: CardLogo;
|
|
108
|
+
logoAlt?: string;
|
|
109
|
+
icon?: IconComponent;
|
|
110
|
+
size?: number;
|
|
111
|
+
className?: string;
|
|
112
|
+
}
|
|
113
|
+
type Element_12xgc2 = JSX_1kxb2["Element"];
|
|
114
|
+
declare function CardMedia({ logo, logoAlt, icon: Icon, size, className }: CardMediaProps): Element_12xgc2 | null;
|
|
115
|
+
interface CardImageProps {
|
|
116
|
+
src: string;
|
|
117
|
+
alt?: string;
|
|
118
|
+
className?: string;
|
|
119
|
+
}
|
|
120
|
+
declare function CardImage({ src, alt, className }: CardImageProps): Element_12xgc2;
|
|
121
|
+
declare const CardEyebrow: ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & RefAttributes<HTMLSpanElement>>;
|
|
122
|
+
interface CardFeatureProps {
|
|
123
|
+
icon?: IconComponent;
|
|
124
|
+
title: string;
|
|
125
|
+
description?: string;
|
|
126
|
+
}
|
|
127
|
+
declare function CardFeature({ icon: Icon, title, description }: CardFeatureProps): Element_12xgc2;
|
|
128
|
+
type CardButtonVariant = "primary" | "secondary" | "ghost" | "link";
|
|
129
|
+
interface CardButtonProps {
|
|
130
|
+
children: React.ReactNode2;
|
|
131
|
+
onClick?: () => void;
|
|
132
|
+
href?: string;
|
|
133
|
+
variant?: CardButtonVariant;
|
|
134
|
+
icon?: IconComponent;
|
|
135
|
+
iconPosition?: "start" | "end";
|
|
136
|
+
/** Opens the href in a new tab and appends an outward arrow glyph. */
|
|
137
|
+
external?: boolean;
|
|
138
|
+
disabled?: boolean;
|
|
139
|
+
}
|
|
140
|
+
declare function CardButton({ children, onClick, href, variant, icon: Icon, iconPosition, external, disabled }: CardButtonProps): Element_12xgc2;
|
|
141
|
+
export { Card, CardAction, CardButton, CardButtonProps, CardButtonVariant, CardContent, CardDescription, CardEyebrow, CardFeature, CardFooter, CardGroup, CardGroupProps, CardHeader, CardImage, CardLogo, CardMedia, CardProps, CardTitle, Card as default };
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import {
|
|
2
|
+
CardGroup2,
|
|
3
|
+
Card2,
|
|
4
|
+
CardHeader2,
|
|
5
|
+
CardTitle2,
|
|
6
|
+
CardDescription2,
|
|
7
|
+
CardAction2,
|
|
8
|
+
CardContent2,
|
|
9
|
+
CardFooter2,
|
|
10
|
+
CardMedia2,
|
|
11
|
+
CardImage2,
|
|
12
|
+
CardEyebrow2,
|
|
13
|
+
CardFeature2,
|
|
14
|
+
CardButton2,
|
|
15
|
+
card_default
|
|
16
|
+
} from "../../shared/components-apdwtweq.js";
|
|
17
|
+
import"../../shared/components-zrkzcayz.js";
|
|
18
|
+
import"../../shared/components-kvr7f9hy.js";
|
|
19
|
+
import"../../shared/components-59efxjd9.js";
|
|
20
|
+
import"../../shared/components-chacnk61.js";
|
|
21
|
+
import"../../shared/components-hqeq3w9q.js";
|
|
22
|
+
import"../../shared/components-jjw69c4c.js";
|
|
23
|
+
import"../../shared/components-men63rwj.js";
|
|
24
|
+
import"../../shared/components-0sn7ypjw.js";
|
|
25
|
+
import"../../shared/components-cv16mryv.js";
|
|
26
|
+
import"../../shared/components-ezxhrmer.js";
|
|
27
|
+
export {
|
|
28
|
+
Card2 as Card,
|
|
29
|
+
CardAction2 as CardAction,
|
|
30
|
+
CardButton2 as CardButton,
|
|
31
|
+
CardContent2 as CardContent,
|
|
32
|
+
CardDescription2 as CardDescription,
|
|
33
|
+
CardEyebrow2 as CardEyebrow,
|
|
34
|
+
CardFeature2 as CardFeature,
|
|
35
|
+
CardFooter2 as CardFooter,
|
|
36
|
+
CardGroup2 as CardGroup,
|
|
37
|
+
CardHeader2 as CardHeader,
|
|
38
|
+
CardImage2 as CardImage,
|
|
39
|
+
CardMedia2 as CardMedia,
|
|
40
|
+
CardTitle2 as CardTitle,
|
|
41
|
+
card_default as default
|
|
42
|
+
};
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
|
|
2
|
+
type SizeVariant = "default" | "compact";
|
|
3
|
+
interface CheckboxGroupProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
/** CheckboxGroup.Item children. */
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
/** Set of checked item indices; drives the merged background across contiguous picks. Controlled — pair it with `onCheckedIndicesChange` (or per-item `onToggle`). */
|
|
7
|
+
checkedIndices?: Set<number>;
|
|
8
|
+
/** Checked indices on first render when uncontrolled (a Set or an array). Defaults to none. */
|
|
9
|
+
defaultCheckedIndices?: Set<number> | number[];
|
|
10
|
+
/** Called with the next checked set whenever an item is toggled. */
|
|
11
|
+
onCheckedIndicesChange?: (checkedIndices: Set<number>) => void;
|
|
12
|
+
/** Pins the group's rows to one step of the size ladder (default 36px, compact 28px). Defaults to the surrounding SizeProvider. */
|
|
13
|
+
size?: SizeVariant;
|
|
14
|
+
}
|
|
15
|
+
type CheckboxGroupComponent = ForwardRefExoticComponent<CheckboxGroupProps & RefAttributes<HTMLDivElement>> & {
|
|
16
|
+
Item: typeof CheckboxItem;
|
|
17
|
+
};
|
|
18
|
+
/**
|
|
19
|
+
* Checkbox group with merged backgrounds for contiguous selections.
|
|
20
|
+
*
|
|
21
|
+
* Each row is a `CheckboxGroup.Item` with a stable `index`. Contiguous checked
|
|
22
|
+
* rows share one background: a checked row's background grows out of its
|
|
23
|
+
* center and melts into its neighbours, an unchecked one pinches off and
|
|
24
|
+
* shrinks away (the liquid indicators in Morph). A fluid hover highlight melts
|
|
25
|
+
* from row to row, and Arrow Up/Down,
|
|
26
|
+
* Home and End move focus while Space or Enter toggles. The checked label
|
|
27
|
+
* animates to semibold without shifting its width. The group is uncontrolled
|
|
28
|
+
* with `defaultCheckedIndices`, or controlled with `checkedIndices` plus
|
|
29
|
+
* `onCheckedIndicesChange` — FF's per-item `checked` / `onToggle` still work
|
|
30
|
+
* and override the group state for their row.
|
|
31
|
+
*
|
|
32
|
+
* Statics:
|
|
33
|
+
* - `CheckboxGroup.Item` — one checkbox row: `label`, `index`, and optional
|
|
34
|
+
* `checked` / `onToggle`.
|
|
35
|
+
*
|
|
36
|
+
* @example {@include ./examples.mdx}
|
|
37
|
+
*/
|
|
38
|
+
declare const CheckboxGroup: CheckboxGroupComponent;
|
|
39
|
+
interface CheckboxItemProps extends HTMLAttributes<HTMLDivElement> {
|
|
40
|
+
/** Text label for the checkbox. */
|
|
41
|
+
label: string;
|
|
42
|
+
/** Position index within the group. */
|
|
43
|
+
index: number;
|
|
44
|
+
/** Whether this item is checked. Defaults to the group's checked set. */
|
|
45
|
+
checked?: boolean;
|
|
46
|
+
/** Called when this item is toggled (the group's `onCheckedIndicesChange` fires too). */
|
|
47
|
+
onToggle?: () => void;
|
|
48
|
+
}
|
|
49
|
+
declare const CheckboxItem: ForwardRefExoticComponent<CheckboxItemProps & RefAttributes<HTMLDivElement>>;
|
|
50
|
+
export { CheckboxGroup, CheckboxGroupProps, CheckboxItem, CheckboxItemProps, CheckboxGroup as default };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import {
|
|
2
|
+
CheckboxGroup2,
|
|
3
|
+
CheckboxItem2,
|
|
4
|
+
checkbox_group_default
|
|
5
|
+
} from "../../../shared/components-ytb2tefr.js";
|
|
6
|
+
import"../../../shared/components-5xc2j8jz.js";
|
|
7
|
+
import"../../../shared/components-kvr7f9hy.js";
|
|
8
|
+
import"../../../shared/components-59efxjd9.js";
|
|
9
|
+
import"../../../shared/components-chacnk61.js";
|
|
10
|
+
import"../../../shared/components-hqeq3w9q.js";
|
|
11
|
+
import"../../../shared/components-jjw69c4c.js";
|
|
12
|
+
import"../../../shared/components-n7mjr357.js";
|
|
13
|
+
import"../../../shared/components-men63rwj.js";
|
|
14
|
+
import"../../../shared/components-0sn7ypjw.js";
|
|
15
|
+
import"../../../shared/components-cv16mryv.js";
|
|
16
|
+
import"../../../shared/components-ezxhrmer.js";
|
|
17
|
+
export {
|
|
18
|
+
CheckboxGroup2 as CheckboxGroup,
|
|
19
|
+
CheckboxItem2 as CheckboxItem,
|
|
20
|
+
checkbox_group_default as default
|
|
21
|
+
};
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import { CSSProperties, ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes, RefObject } from "react";
|
|
2
|
+
type SizeVariant = "default" | "compact";
|
|
3
|
+
import { JSX as JSX_1kxb } from "react";
|
|
4
|
+
type ColorFormat = "hex" | "rgb" | "hsl" | "oklch";
|
|
5
|
+
type Element_12xgc = JSX_1kxb["Element"];
|
|
6
|
+
declare function ColorPickerPortalContainer({ value, children }: {
|
|
7
|
+
value: HTMLElement | null;
|
|
8
|
+
children: ReactNode;
|
|
9
|
+
}): Element_12xgc;
|
|
10
|
+
interface ParsedColor {
|
|
11
|
+
h: number;
|
|
12
|
+
s: number;
|
|
13
|
+
v: number;
|
|
14
|
+
a: number;
|
|
15
|
+
r: number;
|
|
16
|
+
g: number;
|
|
17
|
+
b: number;
|
|
18
|
+
hex: string;
|
|
19
|
+
rgb: string;
|
|
20
|
+
hsl: string;
|
|
21
|
+
oklch: string;
|
|
22
|
+
}
|
|
23
|
+
interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
|
|
24
|
+
/** Controlled color value, in any of the supported formats. Omit it to let the picker keep its own state, seeded from `defaultValue`. */
|
|
25
|
+
value?: string;
|
|
26
|
+
/** Initial color when uncontrolled — any CSS color string, named colors included. Defaults to `"#6B97FF"`. */
|
|
27
|
+
defaultValue?: string;
|
|
28
|
+
/** Fired on every change. Receives the formatted string and a parsed color object carrying every format. */
|
|
29
|
+
onValueChange?: (value: string, parsed: ParsedColor) => void;
|
|
30
|
+
/** Controlled format selection. */
|
|
31
|
+
format?: ColorFormat;
|
|
32
|
+
/** Initial format when uncontrolled. Defaults to `"hex"`. */
|
|
33
|
+
defaultFormat?: ColorFormat;
|
|
34
|
+
/** Fired when the user switches format. */
|
|
35
|
+
onFormatChange?: (format: ColorFormat) => void;
|
|
36
|
+
/** Optional preset swatches. When omitted, the strip is hidden. */
|
|
37
|
+
swatches?: string[];
|
|
38
|
+
/** Force-hide the eyedropper button — it is hidden automatically in browsers that do not support it. Defaults to `false`. */
|
|
39
|
+
hideEyedropper?: boolean;
|
|
40
|
+
/** Controls the format dropdown's open state. When provided, the dropdown is fully controlled and ignores user toggles. */
|
|
41
|
+
formatOpen?: boolean;
|
|
42
|
+
/** Initial open state for the format dropdown (uncontrolled). Defaults to `false`. */
|
|
43
|
+
defaultFormatOpen?: boolean;
|
|
44
|
+
/** Pins trigger and popover to one step of the size ladder (default 36px, compact 28px — see Sizes). Omitted, they follow the surrounding SizeProvider. */
|
|
45
|
+
size?: SizeVariant;
|
|
46
|
+
/** Merged after the panel's surface, radius and padding classes. */
|
|
47
|
+
className?: string;
|
|
48
|
+
}
|
|
49
|
+
interface ColorPickerPopoverProps extends ColorPickerProps {
|
|
50
|
+
/** Optional label rendered alongside the color tile. */
|
|
51
|
+
triggerLabel?: string;
|
|
52
|
+
/** Position of the label relative to the color tile. Defaults to `"left"`. */
|
|
53
|
+
triggerLabelPosition?: "left" | "right";
|
|
54
|
+
/** Show the hex value (without alpha) next to the tile. Defaults to `true`. */
|
|
55
|
+
triggerShowValue?: boolean;
|
|
56
|
+
/** Render an X button on the trigger; pairs with `onTriggerRemove`. Defaults to `false`. */
|
|
57
|
+
triggerShowRemove?: boolean;
|
|
58
|
+
/** Fired when the X button is clicked. */
|
|
59
|
+
onTriggerRemove?: () => void;
|
|
60
|
+
/** Custom classes on the trigger button. */
|
|
61
|
+
triggerClassName?: string;
|
|
62
|
+
/** Controls the popover's open state. When provided, the popover is fully
|
|
63
|
+
* controlled and ignores trigger clicks. */
|
|
64
|
+
open?: boolean;
|
|
65
|
+
/** Initial open state for the popover (uncontrolled). Defaults to `false`. */
|
|
66
|
+
defaultOpen?: boolean;
|
|
67
|
+
/** Called when the open state would change (fires even when controlled). */
|
|
68
|
+
onOpenChange?: (open: boolean) => void;
|
|
69
|
+
/** Where the panel grows from (see Morph): the trigger, the press point, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'`. */
|
|
70
|
+
from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | RefObject<HTMLElement | null>;
|
|
71
|
+
/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
|
|
72
|
+
effect?: "goo" | "morph" | "slide" | "fade";
|
|
73
|
+
/** Hide the trigger while open, so it reads as turning into the panel. Defaults to `false`. */
|
|
74
|
+
hideSource?: boolean;
|
|
75
|
+
/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'slow'`. */
|
|
76
|
+
tier?: "moderate" | "slow";
|
|
77
|
+
}
|
|
78
|
+
interface ColorSwatchProps extends Omit<HTMLAttributes<HTMLButtonElement>, "color"> {
|
|
79
|
+
/** The swatch color — any CSS color string. */
|
|
80
|
+
color: string;
|
|
81
|
+
/** Edge length in pixels. Defaults to `28`. */
|
|
82
|
+
size?: number;
|
|
83
|
+
/** Draws the selection ring. */
|
|
84
|
+
selected?: boolean;
|
|
85
|
+
}
|
|
86
|
+
declare function parseColor(input: string): {
|
|
87
|
+
r: number;
|
|
88
|
+
g: number;
|
|
89
|
+
b: number;
|
|
90
|
+
a: number;
|
|
91
|
+
} | null;
|
|
92
|
+
declare function buildParsed(h: number, s: number, v: number, a: number): ParsedColor;
|
|
93
|
+
interface ColorTileProps {
|
|
94
|
+
color: string;
|
|
95
|
+
size?: number;
|
|
96
|
+
className?: string;
|
|
97
|
+
style?: CSSProperties;
|
|
98
|
+
}
|
|
99
|
+
declare function ColorTile({ color, size, className, style }: ColorTileProps): Element_12xgc;
|
|
100
|
+
declare const ColorSwatch: ForwardRefExoticComponent<ColorSwatchProps & RefAttributes<HTMLButtonElement>>;
|
|
101
|
+
type ColorPickerComponent = ForwardRefExoticComponent<ColorPickerProps & RefAttributes<HTMLDivElement>> & {
|
|
102
|
+
/** `ColorPickerPopover` — the same panel behind a trigger button. */
|
|
103
|
+
Popover: typeof ColorPickerPopover;
|
|
104
|
+
};
|
|
105
|
+
/**
|
|
106
|
+
* Color picker with HEX, RGB, HSL, and OKLCH formats, an alpha channel,
|
|
107
|
+
* optional swatches, and an eyedropper. Available as an inline panel or a
|
|
108
|
+
* popover.
|
|
109
|
+
*
|
|
110
|
+
* The value is kept internally as HSV, so hue survives a pass through pure
|
|
111
|
+
* black, pure white or full grey instead of collapsing to red. Every edit —
|
|
112
|
+
* the saturation square, the hue and alpha sliders, the per-channel inputs,
|
|
113
|
+
* a swatch, the eyedropper — writes to that one canonical color, which is
|
|
114
|
+
* re-emitted in the active format together with a parsed object carrying all
|
|
115
|
+
* four. Numeric channels scrub: drag sideways to sweep a value, click to type
|
|
116
|
+
* it. Alpha reads against a checkerboard, swatches accept any CSS color string
|
|
117
|
+
* (named colors included), and OKLCH edits keep the hue you typed across the
|
|
118
|
+
* lossy trip back through sRGB. The panel paints itself on the surface ladder
|
|
119
|
+
* and re-provides its level, so the format menu elevates above it however
|
|
120
|
+
* deeply the picker is nested.
|
|
121
|
+
*
|
|
122
|
+
* Statics:
|
|
123
|
+
* - `ColorPicker.Popover` — `ColorPickerPopover`: the same panel behind a
|
|
124
|
+
* trigger button showing a color tile, an optional label and the hex value.
|
|
125
|
+
* The panel oozes out of the trigger and back through the shared morph (see
|
|
126
|
+
* Morph), with the morph options `from`, `effect`, `hideSource`, `tier`.
|
|
127
|
+
*
|
|
128
|
+
* Also exported: `ColorSwatch` and `ColorTile` (the swatch button and the
|
|
129
|
+
* checkerboard tile), `ColorPickerPortalContainer` (portal the format menu
|
|
130
|
+
* into a given element — e.g. inside a CSS-scaled ancestor), and the
|
|
131
|
+
* `parseColor` / `buildParsed` color helpers.
|
|
132
|
+
*
|
|
133
|
+
* @example {@include ./examples.mdx}
|
|
134
|
+
*/
|
|
135
|
+
declare const ColorPicker: ColorPickerComponent;
|
|
136
|
+
declare const ColorPickerPopover: ForwardRefExoticComponent<ColorPickerPopoverProps & RefAttributes<HTMLDivElement>>;
|
|
137
|
+
export { ColorFormat, ColorPicker, ColorPickerPopover, ColorPickerPopoverProps, ColorPickerPortalContainer, ColorPickerProps, ColorSwatch, ColorSwatchProps, ColorTile, ParsedColor, buildParsed, ColorPicker as default, parseColor };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import {
|
|
2
|
+
ColorPickerPortalContainer2,
|
|
3
|
+
parseColor2,
|
|
4
|
+
buildParsed2,
|
|
5
|
+
ColorTile2,
|
|
6
|
+
ColorSwatch2,
|
|
7
|
+
ColorPicker2,
|
|
8
|
+
ColorPickerPopover2,
|
|
9
|
+
color_picker_default
|
|
10
|
+
} from "../../../shared/components-3k8xpnpq.js";
|
|
11
|
+
import"../../../shared/components-wvp1m52g.js";
|
|
12
|
+
import"../../../shared/components-ng72k97e.js";
|
|
13
|
+
import"../../../shared/components-zrkzcayz.js";
|
|
14
|
+
import"../../../shared/components-0q0sqfh4.js";
|
|
15
|
+
import"../../../shared/components-kvr7f9hy.js";
|
|
16
|
+
import"../../../shared/components-59efxjd9.js";
|
|
17
|
+
import"../../../shared/components-chacnk61.js";
|
|
18
|
+
import"../../../shared/components-hqeq3w9q.js";
|
|
19
|
+
import"../../../shared/components-jjw69c4c.js";
|
|
20
|
+
import"../../../shared/components-n7mjr357.js";
|
|
21
|
+
import"../../../shared/components-men63rwj.js";
|
|
22
|
+
import"../../../shared/components-0sn7ypjw.js";
|
|
23
|
+
import"../../../shared/components-cv16mryv.js";
|
|
24
|
+
import"../../../shared/components-zx6b6yby.js";
|
|
25
|
+
import"../../../shared/components-ezxhrmer.js";
|
|
26
|
+
export {
|
|
27
|
+
ColorPicker2 as ColorPicker,
|
|
28
|
+
ColorPickerPopover2 as ColorPickerPopover,
|
|
29
|
+
ColorPickerPortalContainer2 as ColorPickerPortalContainer,
|
|
30
|
+
ColorSwatch2 as ColorSwatch,
|
|
31
|
+
ColorTile2 as ColorTile,
|
|
32
|
+
buildParsed2 as buildParsed,
|
|
33
|
+
color_picker_default as default,
|
|
34
|
+
parseColor2 as parseColor
|
|
35
|
+
};
|