@arcfusionz/arc-primitive-ui 0.2.4 → 0.2.6

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.
@@ -0,0 +1,95 @@
1
+ import { AriaRole, ComponentPropsWithoutRef, ReactNode } from "react";
2
+ import { useRender } from "@base-ui/react/use-render";
3
+ import { Button } from "@base-ui/react/button";
4
+ //#region src/components/Alert/Alert.d.ts
5
+ type AlertVariant = "neutral" | "info" | "success" | "warning" | "destructive";
6
+ type AlertAppearance = "solid" | "soft" | "outline";
7
+ interface AlertVariantsOptions {
8
+ variant?: AlertVariant;
9
+ appearance?: AlertAppearance;
10
+ className?: string;
11
+ }
12
+ /**
13
+ * Class list for an element styled as an Alert container.
14
+ *
15
+ * Use it for callout boxes that manage their own content layout — it carries
16
+ * the box, tint, and body text color only, not the icon/title/close
17
+ * structure:
18
+ *
19
+ * <div role="status" className={alertVariants({ variant: "info" })}>Syncing…</div>
20
+ */
21
+ declare function alertVariants({ variant, appearance, className }?: AlertVariantsOptions): string;
22
+ interface AlertBaseProps extends Omit<ComponentPropsWithoutRef<"div">, "className" | "children" | "title"> {
23
+ /**
24
+ * Semantic severity. Drives the tint, the text hues, and the automatic
25
+ * icon. `info` renders on the primary hue (the palette's `info` alias sits
26
+ * on the primary ramp); `neutral` is a generic note with no severity.
27
+ */
28
+ variant?: AlertVariant;
29
+ /** Emphasis level: `soft` tint (default), `solid` fill, or `outline`. */
30
+ appearance?: AlertAppearance;
31
+ /**
32
+ * Heading line, in body-sm with semibold emphasis. At least one of
33
+ * `title` and `children` is required. (Replaces the native tooltip
34
+ * attribute, which alerts have no use for.)
35
+ */
36
+ title?: ReactNode;
37
+ /** Body content below the title — plain text or rich nodes (paragraphs, lists, links). */
38
+ children?: ReactNode;
39
+ /**
40
+ * Custom leading icon replacing the automatic severity icon; pass `false`
41
+ * to remove the icon and its slot. Sized to the 20px slot unless it
42
+ * carries its own `size-*` class. The slot is `aria-hidden` — the text
43
+ * carries the meaning, so per WCAG 1.4.1 never let the icon alone state
44
+ * the severity.
45
+ */
46
+ icon?: ReactNode;
47
+ /**
48
+ * Trailing slot for a call to action — typically a small `Button` or a
49
+ * link. Reached in DOM order after the content; keep the label
50
+ * self-describing ("View details", not "Click here").
51
+ */
52
+ action?: ReactNode;
53
+ /**
54
+ * Called when the close button is activated with pointer, Enter, or Space.
55
+ * The component only renders the button — remove the alert from state in
56
+ * this callback. Requires `closeLabel`. Omit for alerts the user must
57
+ * read or resolve, and never auto-dismiss in its place (WCAG 2.2.3).
58
+ */
59
+ onClose?: NonNullable<ComponentPropsWithoutRef<typeof Button>["onClick"]>;
60
+ /** Accessible name for the close button, e.g. `Dismiss`. Required when `onClose` is set — localize it alongside your content. */
61
+ closeLabel?: string;
62
+ /**
63
+ * Live-region semantics. Defaults to `alert` (assertive and atomic) —
64
+ * right for errors and time-sensitive messages rendered while the user
65
+ * works. Pass `status` for polite announcements (success or info updates)
66
+ * that should not interrupt in-progress speech. Either way only
67
+ * dynamically rendered alerts are announced; content present at page load
68
+ * is not read, where the role is inert.
69
+ */
70
+ role?: AriaRole;
71
+ /** Replace the rendered `div`, e.g. `render={<section />}` for a landmark-worthy page banner. */
72
+ render?: useRender.RenderProp;
73
+ /** Additional classes merged after the alert's variant classes. */
74
+ className?: string;
75
+ }
76
+ /** An alert must have visible content — a title, a description, or both. */
77
+ type AlertContentProps = {
78
+ title: ReactNode;
79
+ children?: ReactNode;
80
+ } | {
81
+ title?: ReactNode;
82
+ children: ReactNode;
83
+ };
84
+ /** Dismissible alerts need an accessible name for their close button. */
85
+ type AlertDismissProps = {
86
+ onClose: NonNullable<ComponentPropsWithoutRef<typeof Button>["onClick"]>;
87
+ closeLabel: string;
88
+ } | {
89
+ onClose?: never;
90
+ closeLabel?: never;
91
+ };
92
+ type AlertProps = AlertBaseProps & AlertContentProps & AlertDismissProps;
93
+ declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;
94
+ //#endregion
95
+ export { Alert, AlertAppearance, AlertProps, AlertVariant, AlertVariantsOptions, alertVariants };
@@ -0,0 +1,197 @@
1
+ import { cn } from "../../lib/cn.js";
2
+ import { forwardRef } from "react";
3
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
4
+ import { useRender } from "@base-ui/react/use-render";
5
+ import { Button } from "@base-ui/react/button";
6
+ //#region src/components/Alert/Alert.tsx
7
+ const baseClasses = "relative flex w-full items-start gap-3 rounded-md border border-transparent p-4 font-sans text-sm";
8
+ const appearanceClasses = {
9
+ solid: {
10
+ neutral: "bg-foreground text-background",
11
+ info: "bg-primary text-primary-foreground",
12
+ success: "bg-success-700 text-success-foreground",
13
+ warning: "bg-warning text-warning-950",
14
+ destructive: "bg-destructive text-destructive-foreground"
15
+ },
16
+ soft: {
17
+ neutral: "bg-muted text-slate-700",
18
+ info: "bg-primary-50 text-primary-700",
19
+ success: "bg-success-50 text-success-700",
20
+ warning: "bg-warning-50 text-warning-800",
21
+ destructive: "bg-error-50 text-error-700"
22
+ },
23
+ outline: {
24
+ neutral: "border-slate-400 text-slate-700",
25
+ info: "border-primary-400 text-primary-700",
26
+ success: "border-success-400 text-success-700",
27
+ warning: "border-warning-400 text-warning-800",
28
+ destructive: "border-error-400 text-error-700"
29
+ }
30
+ };
31
+ const titleClasses = "font-sans text-sm font-semibold";
32
+ const titleColorClasses = {
33
+ neutral: "text-foreground",
34
+ info: "text-primary-900",
35
+ success: "text-success-900",
36
+ warning: "text-warning-900",
37
+ destructive: "text-error-900"
38
+ };
39
+ const iconSlotClasses = "flex shrink-0 items-center [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5";
40
+ const iconColorClasses = {
41
+ neutral: "text-muted-foreground",
42
+ info: "text-primary-600",
43
+ success: "text-success-600",
44
+ warning: "text-warning-700",
45
+ destructive: "text-error-600"
46
+ };
47
+ const actionSlotClasses = "flex shrink-0 items-center gap-2";
48
+ const closeButtonClasses = "-my-0.5 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-current opacity-70 transition-colors duration-150 hover:bg-current/10 hover:opacity-100 active:bg-current/20 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring";
49
+ function SuccessIcon(props) {
50
+ return /* @__PURE__ */ jsxs("svg", {
51
+ viewBox: "0 0 24 24",
52
+ fill: "none",
53
+ stroke: "currentColor",
54
+ strokeWidth: 2,
55
+ strokeLinecap: "round",
56
+ strokeLinejoin: "round",
57
+ "aria-hidden": "true",
58
+ ...props,
59
+ children: [/* @__PURE__ */ jsx("circle", {
60
+ cx: "12",
61
+ cy: "12",
62
+ r: "9"
63
+ }), /* @__PURE__ */ jsx("path", { d: "m8.5 12.4 2.4 2.4 4.6-5.2" })]
64
+ });
65
+ }
66
+ function ErrorIcon(props) {
67
+ return /* @__PURE__ */ jsxs("svg", {
68
+ viewBox: "0 0 24 24",
69
+ fill: "none",
70
+ stroke: "currentColor",
71
+ strokeWidth: 2,
72
+ strokeLinecap: "round",
73
+ strokeLinejoin: "round",
74
+ "aria-hidden": "true",
75
+ ...props,
76
+ children: [/* @__PURE__ */ jsx("circle", {
77
+ cx: "12",
78
+ cy: "12",
79
+ r: "9"
80
+ }), /* @__PURE__ */ jsx("path", { d: "m9.5 9.5 5 5m0-5-5 5" })]
81
+ });
82
+ }
83
+ function WarningIcon(props) {
84
+ return /* @__PURE__ */ jsxs("svg", {
85
+ viewBox: "0 0 24 24",
86
+ fill: "none",
87
+ stroke: "currentColor",
88
+ strokeWidth: 2,
89
+ strokeLinecap: "round",
90
+ strokeLinejoin: "round",
91
+ "aria-hidden": "true",
92
+ ...props,
93
+ children: [
94
+ /* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 20h16a2 2 0 0 0 1.73-2Z" }),
95
+ /* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
96
+ /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
97
+ ]
98
+ });
99
+ }
100
+ function InfoIcon(props) {
101
+ return /* @__PURE__ */ jsxs("svg", {
102
+ viewBox: "0 0 24 24",
103
+ fill: "none",
104
+ stroke: "currentColor",
105
+ strokeWidth: 2,
106
+ strokeLinecap: "round",
107
+ strokeLinejoin: "round",
108
+ "aria-hidden": "true",
109
+ ...props,
110
+ children: [
111
+ /* @__PURE__ */ jsx("circle", {
112
+ cx: "12",
113
+ cy: "12",
114
+ r: "9"
115
+ }),
116
+ /* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
117
+ /* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
118
+ ]
119
+ });
120
+ }
121
+ function XIcon(props) {
122
+ return /* @__PURE__ */ jsx("svg", {
123
+ viewBox: "0 0 16 16",
124
+ fill: "none",
125
+ stroke: "currentColor",
126
+ strokeWidth: 1.5,
127
+ strokeLinecap: "round",
128
+ "aria-hidden": "true",
129
+ className: "size-4",
130
+ ...props,
131
+ children: /* @__PURE__ */ jsx("path", { d: "m3.5 3.5 9 9m-9 0 9-9" })
132
+ });
133
+ }
134
+ const defaultVariantIcons = {
135
+ neutral: /* @__PURE__ */ jsx(InfoIcon, {}),
136
+ info: /* @__PURE__ */ jsx(InfoIcon, {}),
137
+ success: /* @__PURE__ */ jsx(SuccessIcon, {}),
138
+ warning: /* @__PURE__ */ jsx(WarningIcon, {}),
139
+ destructive: /* @__PURE__ */ jsx(ErrorIcon, {})
140
+ };
141
+ /**
142
+ * Class list for an element styled as an Alert container.
143
+ *
144
+ * Use it for callout boxes that manage their own content layout — it carries
145
+ * the box, tint, and body text color only, not the icon/title/close
146
+ * structure:
147
+ *
148
+ * <div role="status" className={alertVariants({ variant: "info" })}>Syncing…</div>
149
+ */
150
+ function alertVariants({ variant = "neutral", appearance = "soft", className } = {}) {
151
+ return cn(baseClasses, appearanceClasses[appearance][variant], className);
152
+ }
153
+ const Alert = forwardRef(({ variant = "neutral", appearance = "soft", title, icon, action, onClose, closeLabel, role = "alert", render, className, children, ...rest }, ref) => {
154
+ const resolvedIcon = icon === void 0 ? defaultVariantIcons[variant] : icon;
155
+ const solid = appearance === "solid";
156
+ return useRender({
157
+ defaultTagName: "div",
158
+ render,
159
+ ref,
160
+ props: {
161
+ role,
162
+ className: cn(alertVariants({
163
+ variant,
164
+ appearance
165
+ }), className),
166
+ children: /* @__PURE__ */ jsxs(Fragment, { children: [
167
+ resolvedIcon != null && typeof resolvedIcon !== "boolean" && /* @__PURE__ */ jsx("span", {
168
+ "aria-hidden": "true",
169
+ className: cn(iconSlotClasses, !solid && iconColorClasses[variant]),
170
+ children: resolvedIcon
171
+ }),
172
+ /* @__PURE__ */ jsxs("div", {
173
+ className: "flex min-w-0 flex-1 flex-col gap-1",
174
+ children: [title != null && /* @__PURE__ */ jsx("div", {
175
+ className: cn(titleClasses, !solid && titleColorClasses[variant]),
176
+ children: title
177
+ }), children != null && children !== false && /* @__PURE__ */ jsx("div", { children })]
178
+ }),
179
+ action != null && /* @__PURE__ */ jsx("div", {
180
+ className: actionSlotClasses,
181
+ children: action
182
+ }),
183
+ onClose != null && /* @__PURE__ */ jsx(Button, {
184
+ type: "button",
185
+ "aria-label": closeLabel,
186
+ className: closeButtonClasses,
187
+ onClick: onClose,
188
+ children: /* @__PURE__ */ jsx(XIcon, {})
189
+ })
190
+ ] }),
191
+ ...rest
192
+ }
193
+ });
194
+ });
195
+ Alert.displayName = "Alert";
196
+ //#endregion
197
+ export { Alert, alertVariants };
@@ -0,0 +1,2 @@
1
+ import { Alert, AlertAppearance, AlertProps, AlertVariant, AlertVariantsOptions, alertVariants } from "./Alert.js";
2
+ export { Alert, type AlertAppearance, type AlertProps, type AlertVariant, type AlertVariantsOptions, alertVariants };
@@ -0,0 +1,2 @@
1
+ import { Alert, alertVariants } from "./Alert.js";
2
+ export { Alert, alertVariants };
@@ -0,0 +1,56 @@
1
+ import { ComponentPropsWithoutRef, ReactNode } from "react";
2
+ import { Separator } from "@base-ui/react/separator";
3
+ //#region src/components/Divider/Divider.d.ts
4
+ type DividerOrientation = "horizontal" | "vertical";
5
+ type DividerVariant = "solid" | "dashed" | "dotted";
6
+ type DividerLabelPosition = "start" | "center" | "end";
7
+ interface DividerVariantsOptions {
8
+ orientation?: DividerOrientation;
9
+ variant?: DividerVariant;
10
+ className?: string;
11
+ }
12
+ /**
13
+ * Class list for an element styled as a plain (label-free) divider rule.
14
+ *
15
+ * Use it where the element must stay native, e.g. an `<hr>` inside rendered
16
+ * prose — labeled rules need the component:
17
+ *
18
+ * <hr className={dividerVariants()} />
19
+ */
20
+ declare function dividerVariants({ orientation, variant, className }?: DividerVariantsOptions): string;
21
+ interface DividerBaseProps extends Omit<ComponentPropsWithoutRef<typeof Separator>, "className" | "orientation" | "children"> {
22
+ /**
23
+ * Direction of the rule. Vertical dividers stretch to the row height in
24
+ * flex layouts; give them an explicit height (`h-*`) elsewhere.
25
+ */
26
+ orientation?: DividerOrientation;
27
+ /** Line style of the rule. */
28
+ variant?: DividerVariant;
29
+ /**
30
+ * Optional label rendered mid-rule: text, or icon + text (icons are sized
31
+ * by the standard slot). Horizontal only — vertical dividers reject a label
32
+ * at the type level, since a label reads along the rule.
33
+ */
34
+ children?: ReactNode;
35
+ /** Where the label sits along the rule. `start`/`end` drop the outer segment so the label is flush with the edge. */
36
+ labelPosition?: DividerLabelPosition;
37
+ /**
38
+ * Render as a purely visual rule (`role="presentation"`) that conveys no
39
+ * content boundary to assistive technology — e.g. the hairline between a
40
+ * card header and its body. A label stays readable either way.
41
+ */
42
+ decorative?: boolean;
43
+ className?: string;
44
+ }
45
+ /** A label reads along the rule, so it exists only on horizontal dividers. */
46
+ type DividerOrientationConstraint = {
47
+ orientation?: "horizontal";
48
+ } | {
49
+ orientation: "vertical";
50
+ children?: never;
51
+ labelPosition?: never;
52
+ };
53
+ type DividerProps = DividerBaseProps & DividerOrientationConstraint;
54
+ declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & import("react").RefAttributes<HTMLDivElement>>;
55
+ //#endregion
56
+ export { Divider, DividerLabelPosition, DividerOrientation, DividerProps, DividerVariant, DividerVariantsOptions, dividerVariants };
@@ -0,0 +1,66 @@
1
+ import { cn } from "../../lib/cn.js";
2
+ import { forwardRef } from "react";
3
+ import { jsx } from "react/jsx-runtime";
4
+ import { Separator } from "@base-ui/react/separator";
5
+ //#region src/components/Divider/Divider.tsx
6
+ const lineBaseClasses = "shrink-0 border-border";
7
+ const lineOrientationClasses = {
8
+ horizontal: "border-t",
9
+ vertical: "self-stretch border-l"
10
+ };
11
+ const lineVariantClasses = {
12
+ solid: "border-solid",
13
+ dashed: "border-dashed",
14
+ dotted: "border-dotted"
15
+ };
16
+ const labeledBaseClasses = "flex items-center gap-3 border-border before:h-0 before:flex-1 before:border-t before:border-inherit before:content-[''] after:h-0 after:flex-1 after:border-t after:border-inherit after:content-['']";
17
+ const labeledVariantClasses = {
18
+ solid: "before:border-solid after:border-solid",
19
+ dashed: "before:border-dashed after:border-dashed",
20
+ dotted: "before:border-dotted after:border-dotted"
21
+ };
22
+ const labelPositionClasses = {
23
+ start: "before:hidden",
24
+ center: "",
25
+ end: "after:hidden"
26
+ };
27
+ const labelClasses = "inline-flex items-center gap-1.5 font-sans text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4";
28
+ /**
29
+ * Class list for an element styled as a plain (label-free) divider rule.
30
+ *
31
+ * Use it where the element must stay native, e.g. an `<hr>` inside rendered
32
+ * prose — labeled rules need the component:
33
+ *
34
+ * <hr className={dividerVariants()} />
35
+ */
36
+ function dividerVariants({ orientation = "horizontal", variant = "solid", className } = {}) {
37
+ return cn(lineBaseClasses, lineOrientationClasses[orientation], lineVariantClasses[variant], className);
38
+ }
39
+ const decorativeProps = {
40
+ role: "presentation",
41
+ "aria-orientation": void 0
42
+ };
43
+ const Divider = forwardRef(({ orientation = "horizontal", variant = "solid", labelPosition = "center", decorative = false, className, children, ...rest }, ref) => {
44
+ const hasLabel = children != null && orientation === "horizontal";
45
+ return /* @__PURE__ */ jsx(Separator, {
46
+ ref,
47
+ orientation,
48
+ ...decorative ? decorativeProps : void 0,
49
+ className: cn(hasLabel ? [
50
+ labeledBaseClasses,
51
+ labeledVariantClasses[variant],
52
+ labelPositionClasses[labelPosition]
53
+ ] : dividerVariants({
54
+ orientation,
55
+ variant
56
+ }), className),
57
+ ...rest,
58
+ children: hasLabel ? /* @__PURE__ */ jsx("span", {
59
+ className: labelClasses,
60
+ children
61
+ }) : null
62
+ });
63
+ });
64
+ Divider.displayName = "Divider";
65
+ //#endregion
66
+ export { Divider, dividerVariants };
@@ -0,0 +1,2 @@
1
+ import { Divider, DividerLabelPosition, DividerOrientation, DividerProps, DividerVariant, DividerVariantsOptions, dividerVariants } from "./Divider.js";
2
+ export { Divider, type DividerLabelPosition, type DividerOrientation, type DividerProps, type DividerVariant, type DividerVariantsOptions, dividerVariants };
@@ -0,0 +1,2 @@
1
+ import { Divider, dividerVariants } from "./Divider.js";
2
+ export { Divider, dividerVariants };
@@ -0,0 +1,92 @@
1
+ import { ComponentPropsWithoutRef } from "react";
2
+ import { Toggle } from "@base-ui/react/toggle";
3
+ import { ToggleGroup } from "@base-ui/react/toggle-group";
4
+ //#region src/components/Toggle/Toggle.d.ts
5
+ type ToggleVariant = "ghost" | "outline";
6
+ type ToggleSize = "sm" | "md" | "lg";
7
+ type ToggleGroupOrientation = NonNullable<ComponentPropsWithoutRef<typeof ToggleGroup>["orientation"]>;
8
+ interface ToggleVariantsOptions {
9
+ variant?: ToggleVariant;
10
+ size?: ToggleSize;
11
+ iconOnly?: boolean;
12
+ /**
13
+ * Style as pressed unconditionally — the static replacement for Base UI's
14
+ * `data-pressed` on plain elements. The consumer owns `aria-pressed`.
15
+ */
16
+ pressed?: boolean;
17
+ className?: string;
18
+ }
19
+ /**
20
+ * Class list for an element styled as a Toggle.
21
+ *
22
+ * Use it when the pressed styling is managed outside Base UI, e.g. a plain
23
+ * `<button>` whose `aria-pressed` you control yourself:
24
+ *
25
+ * <button type="button" aria-pressed={muted} className={toggleVariants({ pressed: muted })}>
26
+ * Mute
27
+ * </button>
28
+ */
29
+ declare function toggleVariants({ variant, size, iconOnly, pressed, className }?: ToggleVariantsOptions): string;
30
+ interface ToggleBaseProps extends Omit<ComponentPropsWithoutRef<typeof Toggle>, "className"> {
31
+ /**
32
+ * Visual style: `ghost` (default) is the transparent toolbar treatment;
33
+ * `outline` adds a border for standalone use on busy surfaces. Both mark
34
+ * the pressed state with a primary wash. Inside a `ToggleGroup` the
35
+ * group's `variant` applies and this prop is ignored.
36
+ */
37
+ variant?: ToggleVariant;
38
+ /**
39
+ * Control size. `sm` (32px) clears the WCAG 2.5.8 AA 24px target-size
40
+ * floor; prefer `md`/`lg` for touch-first surfaces. Inside a `ToggleGroup`
41
+ * the group's `size` applies and this prop is ignored.
42
+ */
43
+ size?: ToggleSize;
44
+ className?: string;
45
+ }
46
+ /** Icon-only toggles have no visible label, so an accessible name is required. */
47
+ type ToggleIconOnlyProps = {
48
+ iconOnly: true;
49
+ "aria-label": string;
50
+ } | {
51
+ iconOnly: true;
52
+ "aria-labelledby": string;
53
+ } | {
54
+ iconOnly?: false;
55
+ };
56
+ type ToggleProps = ToggleBaseProps & ToggleIconOnlyProps;
57
+ /**
58
+ * Two-state pressed/unpressed button (`aria-pressed`) built on Base UI's
59
+ * Toggle — favorite, mute, bold. State is announced by the attribute, so the
60
+ * label must not change with it. Uncontrolled via `defaultPressed`,
61
+ * controlled via `pressed` + `onPressedChange`. Inside a `ToggleGroup`,
62
+ * `value` identifies the item and the group holds the state instead.
63
+ */
64
+ declare const Toggle$1: import("react").ForwardRefExoticComponent<ToggleProps & import("react").RefAttributes<HTMLButtonElement>>;
65
+ interface ToggleGroupProps extends Omit<ComponentPropsWithoutRef<typeof ToggleGroup>, "className"> {
66
+ /**
67
+ * Visual style shared by every toggle inside: `ghost` (default) lays them
68
+ * out as a toolbar cluster with a small gap; `outline` fuses them into a
69
+ * joined segmented control with shared borders.
70
+ */
71
+ variant?: ToggleVariant;
72
+ /** Control size shared by every toggle inside (see `Toggle`'s `size`). */
73
+ size?: ToggleSize;
74
+ /**
75
+ * Layout axis. `vertical` stacks the items and arrow-key focus follows
76
+ * Up/Down; joined `outline` seams and corners follow the axis.
77
+ */
78
+ orientation?: ToggleGroupOrientation;
79
+ className?: string;
80
+ }
81
+ /**
82
+ * Holds the pressed state (`value`/`defaultValue`/`onValueChange`, as an
83
+ * array of the pressed toggles' `value`s) for the Toggles inside it. One
84
+ * toggle at a time by default — set `multiple` for independent toggles
85
+ * (formatting bold/italic). Pressing the pressed item clears it; to keep one
86
+ * always selected, control `value` and ignore updates that would empty it.
87
+ * Arrow keys move focus between items (`loopFocus` wraps). Give the group an
88
+ * accessible name: `aria-label` or `aria-labelledby`.
89
+ */
90
+ declare const ToggleGroup$1: import("react").ForwardRefExoticComponent<ToggleGroupProps & import("react").RefAttributes<HTMLDivElement>>;
91
+ //#endregion
92
+ export { Toggle$1 as Toggle, ToggleGroup$1 as ToggleGroup, ToggleGroupProps, ToggleProps, ToggleSize, ToggleVariant, ToggleVariantsOptions, toggleVariants };
@@ -0,0 +1,96 @@
1
+ import { cn } from "../../lib/cn.js";
2
+ import { createContext, forwardRef, useContext, useMemo } from "react";
3
+ import { jsx } from "react/jsx-runtime";
4
+ import { Toggle } from "@base-ui/react/toggle";
5
+ import { ToggleGroup } from "@base-ui/react/toggle-group";
6
+ //#region src/components/Toggle/Toggle.tsx
7
+ const ToggleGroupStyleContext = createContext(null);
8
+ const baseClasses = "inline-flex items-center justify-center whitespace-nowrap select-none rounded-md font-sans font-medium text-slate-600 transition-colors duration-150 cursor-pointer hover:bg-muted hover:text-foreground active:bg-slate-200 data-pressed:bg-primary-100 data-pressed:text-primary-700 hover:data-pressed:bg-primary-200 active:data-pressed:bg-primary-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50";
9
+ const variantClasses = {
10
+ ghost: "bg-transparent",
11
+ outline: "border border-border bg-transparent data-pressed:border-primary-300"
12
+ };
13
+ const sizeClasses = {
14
+ sm: "h-8 min-w-8 gap-1.5 px-2 text-sm",
15
+ md: "h-10 min-w-10 gap-2 px-2.5 text-sm",
16
+ lg: "h-12 min-w-12 gap-2 px-3 text-base [&_svg:not([class*='size-'])]:size-5"
17
+ };
18
+ const iconOnlySizeClasses = {
19
+ sm: "w-8 px-0",
20
+ md: "w-10 px-0",
21
+ lg: "w-12 px-0"
22
+ };
23
+ const pressedStaticClasses = {
24
+ ghost: "bg-primary-100 text-primary-700 hover:bg-primary-200 hover:text-primary-700 active:bg-primary-200",
25
+ outline: "border-primary-300 bg-primary-100 text-primary-700 hover:bg-primary-200 hover:text-primary-700 active:bg-primary-200"
26
+ };
27
+ const joinedClasses = {
28
+ horizontal: "flex-1 rounded-none first:rounded-s-md last:rounded-e-md border-s-0 first:border-s focus-visible:relative focus-visible:z-1",
29
+ vertical: "rounded-none first:rounded-t-md last:rounded-b-md border-t-0 first:border-t focus-visible:relative focus-visible:z-1"
30
+ };
31
+ /**
32
+ * Class list for an element styled as a Toggle.
33
+ *
34
+ * Use it when the pressed styling is managed outside Base UI, e.g. a plain
35
+ * `<button>` whose `aria-pressed` you control yourself:
36
+ *
37
+ * <button type="button" aria-pressed={muted} className={toggleVariants({ pressed: muted })}>
38
+ * Mute
39
+ * </button>
40
+ */
41
+ function toggleVariants({ variant = "ghost", size = "md", iconOnly = false, pressed = false, className } = {}) {
42
+ return cn(baseClasses, variantClasses[variant], sizeClasses[size], iconOnly && iconOnlySizeClasses[size], pressed && pressedStaticClasses[variant], className);
43
+ }
44
+ /**
45
+ * Two-state pressed/unpressed button (`aria-pressed`) built on Base UI's
46
+ * Toggle — favorite, mute, bold. State is announced by the attribute, so the
47
+ * label must not change with it. Uncontrolled via `defaultPressed`,
48
+ * controlled via `pressed` + `onPressedChange`. Inside a `ToggleGroup`,
49
+ * `value` identifies the item and the group holds the state instead.
50
+ */
51
+ const Toggle$1 = forwardRef(({ variant, size, iconOnly = false, className, ...rest }, ref) => {
52
+ const group = useContext(ToggleGroupStyleContext);
53
+ const resolvedVariant = group?.variant ?? variant ?? "ghost";
54
+ return /* @__PURE__ */ jsx(Toggle, {
55
+ ref,
56
+ className: cn(toggleVariants({
57
+ variant: resolvedVariant,
58
+ size: group?.size ?? size ?? "md",
59
+ iconOnly
60
+ }), group !== null && resolvedVariant === "outline" && joinedClasses[group.orientation], className),
61
+ ...rest
62
+ });
63
+ });
64
+ Toggle$1.displayName = "Toggle";
65
+ /**
66
+ * Holds the pressed state (`value`/`defaultValue`/`onValueChange`, as an
67
+ * array of the pressed toggles' `value`s) for the Toggles inside it. One
68
+ * toggle at a time by default — set `multiple` for independent toggles
69
+ * (formatting bold/italic). Pressing the pressed item clears it; to keep one
70
+ * always selected, control `value` and ignore updates that would empty it.
71
+ * Arrow keys move focus between items (`loopFocus` wraps). Give the group an
72
+ * accessible name: `aria-label` or `aria-labelledby`.
73
+ */
74
+ const ToggleGroup$1 = forwardRef(({ variant = "ghost", size = "md", orientation = "horizontal", className, ...rest }, ref) => {
75
+ const styleContext = useMemo(() => ({
76
+ variant,
77
+ size,
78
+ orientation
79
+ }), [
80
+ variant,
81
+ size,
82
+ orientation
83
+ ]);
84
+ return /* @__PURE__ */ jsx(ToggleGroupStyleContext.Provider, {
85
+ value: styleContext,
86
+ children: /* @__PURE__ */ jsx(ToggleGroup, {
87
+ ref,
88
+ orientation,
89
+ className: cn("inline-flex w-fit items-stretch data-[orientation=vertical]:flex-col", variant === "ghost" && "gap-1", className),
90
+ ...rest
91
+ })
92
+ });
93
+ });
94
+ ToggleGroup$1.displayName = "ToggleGroup";
95
+ //#endregion
96
+ export { Toggle$1 as Toggle, ToggleGroup$1 as ToggleGroup, toggleVariants };
@@ -0,0 +1,2 @@
1
+ import { Toggle, ToggleGroup, ToggleGroupProps, ToggleProps, ToggleSize, ToggleVariant, ToggleVariantsOptions, toggleVariants } from "./Toggle.js";
2
+ export { Toggle, ToggleGroup, type ToggleGroupProps, type ToggleProps, type ToggleSize, type ToggleVariant, type ToggleVariantsOptions, toggleVariants };
@@ -0,0 +1,2 @@
1
+ import { Toggle, ToggleGroup, toggleVariants } from "./Toggle.js";
2
+ export { Toggle, ToggleGroup, toggleVariants };
package/dist/index.d.ts CHANGED
@@ -2,6 +2,8 @@ import { AILoader, AILoaderProps, AILoaderRenderState, AILoaderSize, AILoaderSta
2
2
  import "./components/AILoader/index.js";
3
3
  import { Accordion, AccordionChevronPosition, AccordionHeader, AccordionHeaderProps, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionProps, AccordionSize, AccordionTrigger, AccordionTriggerProps, AccordionVariant } from "./components/Accordion/Accordion.js";
4
4
  import "./components/Accordion/index.js";
5
+ import { Alert, AlertAppearance, AlertProps, AlertVariant, AlertVariantsOptions, alertVariants } from "./components/Alert/Alert.js";
6
+ import "./components/Alert/index.js";
5
7
  import { Avatar, AvatarBadge, AvatarBadgeProps, AvatarFallback, AvatarFallbackProps, AvatarGroup, AvatarGroupProps, AvatarImage, AvatarImageProps, AvatarProps, AvatarShape, AvatarSize, AvatarVariantsOptions, avatarVariants } from "./components/Avatar/Avatar.js";
6
8
  import "./components/Avatar/index.js";
7
9
  import { Badge, BadgeAppearance, BadgeProps, BadgeSize, BadgeVariant, BadgeVariantsOptions, badgeVariants } from "./components/Badge/Badge.js";
@@ -29,6 +31,8 @@ import { DateRangePicker, DateRangePickerCalendarProps, DateRangePickerPopupProp
29
31
  import "./components/DateRangePicker/index.js";
30
32
  import { Dialog, DialogClose, DialogCloseProps, DialogDescription, DialogDescriptionProps, DialogFooter, DialogFooterProps, DialogHeader, DialogHeaderProps, DialogPopup, DialogPopupProps, DialogPopupVariantsOptions, DialogProps, DialogScrollBehavior, DialogSize, DialogTitle, DialogTitleProps, DialogTrigger, DialogTriggerProps, dialogPopupVariants } from "./components/Dialog/Dialog.js";
31
33
  import "./components/Dialog/index.js";
34
+ import { Divider, DividerLabelPosition, DividerOrientation, DividerProps, DividerVariant, DividerVariantsOptions, dividerVariants } from "./components/Divider/Divider.js";
35
+ import "./components/Divider/index.js";
32
36
  import { Drawer, DrawerClose, DrawerCloseProps, DrawerDescription, DrawerDescriptionProps, DrawerFooter, DrawerFooterProps, DrawerHeader, DrawerHeaderProps, DrawerIndent, DrawerIndentBackground, DrawerIndentBackgroundProps, DrawerIndentProps, DrawerPopup, DrawerPopupProps, DrawerPopupVariantsOptions, DrawerProps, DrawerProvider, DrawerSide, DrawerSize, DrawerSwipeArea, DrawerSwipeAreaProps, DrawerTitle, DrawerTitleProps, DrawerTrigger, DrawerTriggerProps, DrawerVirtualKeyboardProvider, createDrawerHandle, drawerPopupVariants } from "./components/Drawer/Drawer.js";
33
37
  import "./components/Drawer/index.js";
34
38
  import { Field, FieldDescription, FieldDescriptionProps, FieldError, FieldErrorProps, FieldItem, FieldItemProps, FieldLabel, FieldLabelProps, FieldLabelVariantsOptions, FieldOrientation, FieldProps, FieldValidity, FieldValidityProps, fieldLabelVariants } from "./components/Field/Field.js";
@@ -61,9 +65,11 @@ import { Timeline, TimelineConnector, TimelineConnectorProps, TimelineContent, T
61
65
  import "./components/Timeline/index.js";
62
66
  import { ToastData, ToastManager, ToastObject, ToastOptions, ToastPosition, ToastPromiseOptions, ToastType, ToastUpdateOptions, Toaster, ToasterProps, createToastManager, toast } from "./components/Toast/Toast.js";
63
67
  import "./components/Toast/index.js";
68
+ import { Toggle, ToggleGroup, ToggleGroupProps, ToggleProps, ToggleSize, ToggleVariant, ToggleVariantsOptions, toggleVariants } from "./components/Toggle/Toggle.js";
69
+ import "./components/Toggle/index.js";
64
70
  import { Tooltip, TooltipAlign, TooltipHandle, TooltipPopup, TooltipPopupProps, TooltipPopupVariantsOptions, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipSide, TooltipTrigger, TooltipTriggerProps, createTooltipHandle, tooltipPopupVariants } from "./components/Tooltip/Tooltip.js";
65
71
  import "./components/Tooltip/index.js";
66
72
  import { Typography, TypographyProps, TypographyVariant, TypographyVariantsOptions, typographyVariants } from "./components/Typography/Typography.js";
67
73
  import "./components/Typography/index.js";
68
74
  import { cn } from "./lib/cn.js";
69
- export { AILoader, type AILoaderProps, type AILoaderRenderState, type AILoaderSize, type AILoaderState, type AILoaderTone, Accordion, type AccordionChevronPosition, AccordionHeader, type AccordionHeaderProps, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, type AccordionSize, AccordionTrigger, type AccordionTriggerProps, type AccordionVariant, Avatar, AvatarBadge, type AvatarBadgeProps, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarVariantsOptions, Badge, type BadgeAppearance, type BadgeProps, type BadgeSize, type BadgeVariant, type BadgeVariantsOptions, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, type BreadcrumbLinkVariantsOptions, BreadcrumbList, type BreadcrumbListProps, BreadcrumbPage, type BreadcrumbPageProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type ButtonVariantsOptions, Calendar, type CalendarDateRange, type CalendarMode, type CalendarProps, type CalendarState, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, type CheckboxVariantsOptions, Combobox, type ComboboxAlign, ComboboxChip, type ComboboxChipProps, ComboboxChipRemove, type ComboboxChipRemoveProps, ComboboxChips, type ComboboxChipsProps, ComboboxClear, type ComboboxClearProps, ComboboxCollection, type ComboboxCollectionProps, ComboboxGroup, ComboboxGroupLabel, type ComboboxGroupLabelProps, type ComboboxGroupProps, ComboboxInput, ComboboxInputGroup, type ComboboxInputGroupProps, type ComboboxInputGroupVariantsOptions, type ComboboxInputProps, ComboboxItem, type ComboboxItemProps, ComboboxLabel, type ComboboxLabelProps, ComboboxPopup, type ComboboxPopupProps, type ComboboxProps, ComboboxSeparator, type ComboboxSeparatorProps, type ComboboxSize, ComboboxTrigger, type ComboboxTriggerProps, type ComboboxTriggerSize, type ComboboxTriggerVariant, ComboboxValue, type ComboboxValueProps, ContextMenu, type ContextMenuAlign, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, ContextMenuGroup, ContextMenuGroupLabel, type ContextMenuGroupLabelProps, type ContextMenuGroupProps, ContextMenuItem, type ContextMenuItemProps, type ContextMenuItemVariant, ContextMenuLinkItem, type ContextMenuLinkItemProps, ContextMenuPopup, type ContextMenuPopupProps, type ContextMenuProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuSeparator, type ContextMenuSeparatorProps, ContextMenuShortcut, type ContextMenuShortcutProps, type ContextMenuSide, ContextMenuSubmenuRoot, type ContextMenuSubmenuRootProps, ContextMenuSubmenuTrigger, type ContextMenuSubmenuTriggerProps, ContextMenuTrigger, type ContextMenuTriggerProps, DatePicker, type DatePickerCalendarProps, type DatePickerPopupProps, type DatePickerProps, type DatePickerSize, type DatePickerVariant, type DatePickerVariantsOptions, DateRangePicker, type DateRangePickerCalendarProps, type DateRangePickerPopupProps, type DateRangePickerProps, type DateRangePickerSize, type DateRangePickerVariant, type DateRangePickerVariantsOptions, Dialog, DialogClose, type DialogCloseProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogPopup, type DialogPopupProps, type DialogPopupVariantsOptions, type DialogProps, type DialogScrollBehavior, type DialogSize, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, Drawer, DrawerClose, type DrawerCloseProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, DrawerIndent, DrawerIndentBackground, type DrawerIndentBackgroundProps, type DrawerIndentProps, DrawerPopup, type DrawerPopupProps, type DrawerPopupVariantsOptions, type DrawerProps, DrawerProvider, type DrawerSide, type DrawerSize, DrawerSwipeArea, type DrawerSwipeAreaProps, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, DrawerVirtualKeyboardProvider, Field, type FieldControlProps, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldItem, type FieldItemProps, FieldLabel, type FieldLabelProps, type FieldLabelVariantsOptions, type FieldOrientation, type FieldProps, FieldValidity, type FieldValidityProps, Fieldset, FieldsetDescription, type FieldsetDescriptionProps, FieldsetLegend, type FieldsetLegendProps, type FieldsetLegendVariant, type FieldsetProps, Form, type FormProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, type InputGroupProps, type InputProps, type InputSize, type InputVariantsOptions, Menu, type MenuAlign, MenuCheckboxItem, type MenuCheckboxItemProps, MenuGroup, MenuGroupLabel, type MenuGroupLabelProps, type MenuGroupProps, type MenuHandle, MenuItem, type MenuItemProps, type MenuItemVariant, type MenuItemVariantsOptions, MenuLinkItem, type MenuLinkItemProps, MenuPopup, type MenuPopupProps, type MenuProps, MenuRadioGroup, type MenuRadioGroupProps, MenuRadioItem, type MenuRadioItemProps, MenuSeparator, type MenuSeparatorProps, MenuShortcut, type MenuShortcutProps, type MenuSide, MenuSubmenuRoot, type MenuSubmenuRootProps, MenuSubmenuTrigger, type MenuSubmenuTriggerProps, MenuTrigger, type MenuTriggerProps, Popover, type PopoverAlign, PopoverClose, type PopoverCloseProps, PopoverDescription, type PopoverDescriptionProps, type PopoverHandle, PopoverPopup, type PopoverPopupProps, type PopoverPopupVariantsOptions, type PopoverProps, type PopoverSide, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps, Progress, type ProgressIndicatorVariantsOptions, type ProgressProps, type ProgressSize, type ProgressTrackVariantsOptions, type ProgressVariant, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RadioSize, type RadioVariantsOptions, Select, type SelectAlign, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectItem, type SelectItemProps, SelectLabel, type SelectLabelProps, SelectPopup, type SelectPopupProps, type SelectProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, type SelectTriggerSize, type SelectTriggerVariant, type SelectTriggerVariantsOptions, SelectValue, type SelectValueProps, Skeleton, type SkeletonAnimation, type SkeletonProps, type SkeletonRenderState, type SkeletonVariant, type SkeletonVariantsOptions, Stepper, StepperDescription, type StepperDescriptionProps, StepperIndicator, type StepperIndicatorProps, StepperItem, type StepperItemProps, type StepperOrientation, type StepperProps, StepperSeparator, type StepperSeparatorProps, type StepperSize, StepperTitle, type StepperTitleProps, StepperTrigger, type StepperTriggerProps, type StepperTriggerVariantsOptions, Switch, type SwitchLabelPosition, type SwitchProps, type SwitchSize, type SwitchVariantsOptions, SystemState, type SystemStateBackground, type SystemStateProps, type SystemStateRenderState, type SystemStateScope, type SystemStateTitleLevel, type SystemStateVariant, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, type TableCaptionRenderState, type TableCaptionSide, TableCell, type TableCellProps, TableContainer, type TableContainerProps, type TableContainerRenderState, type TableContainerVariant, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableLayout, type TableProps, type TableRenderState, TableRow, type TableRowProps, type TableRowRenderState, type TableSize, Tabs, type TabsIndicatorPosition, TabsList, type TabsListProps, type TabsListVariantsOptions, TabsPanel, type TabsPanelProps, type TabsProps, type TabsSize, TabsTab, type TabsTabProps, type TabsTabVariantsOptions, type TabsVariant, Timeline, TimelineConnector, type TimelineConnectorProps, TimelineContent, type TimelineContentProps, TimelineDescription, type TimelineDescriptionProps, TimelineIndicator, type TimelineIndicatorAppearance, type TimelineIndicatorProps, type TimelineIndicatorVariant, TimelineItem, type TimelineItemProps, type TimelineProps, TimelineSeparator, type TimelineSeparatorProps, type TimelineSeparatorVariant, type TimelineSize, TimelineTime, type TimelineTimeProps, TimelineTitle, type TimelineTitleProps, type ToastData, type ToastManager, type ToastObject, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastType, type ToastUpdateOptions, Toaster, type ToasterProps, Tooltip, type TooltipAlign, type TooltipHandle, TooltipPopup, type TooltipPopupProps, type TooltipPopupVariantsOptions, type TooltipProps, TooltipProvider, type TooltipProviderProps, type TooltipSide, TooltipTrigger, type TooltipTriggerProps, Typography, type TypographyProps, type TypographyVariant, type TypographyVariantsOptions, avatarVariants, badgeVariants, breadcrumbLinkVariants, buttonVariants, checkboxVariants, cn, comboboxInputGroupVariants, createDrawerHandle, createMenuHandle, createPopoverHandle, createToastManager, createTooltipHandle, datePickerVariants, dateRangePickerVariants, dialogPopupVariants, drawerPopupVariants, fieldLabelVariants, inputVariants, menuItemVariants, popoverPopupVariants, progressIndicatorVariants, progressTrackVariants, radioVariants, selectTriggerVariants, skeletonVariants, stepperTriggerVariants, switchVariants, tabsListVariants, tabsTabVariants, toast, tooltipPopupVariants, typographyVariants, useComboboxFilter, useComboboxFilteredItems, useFieldControl };
75
+ export { AILoader, type AILoaderProps, type AILoaderRenderState, type AILoaderSize, type AILoaderState, type AILoaderTone, Accordion, type AccordionChevronPosition, AccordionHeader, type AccordionHeaderProps, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, type AccordionSize, AccordionTrigger, type AccordionTriggerProps, type AccordionVariant, Alert, type AlertAppearance, type AlertProps, type AlertVariant, type AlertVariantsOptions, Avatar, AvatarBadge, type AvatarBadgeProps, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarVariantsOptions, Badge, type BadgeAppearance, type BadgeProps, type BadgeSize, type BadgeVariant, type BadgeVariantsOptions, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, type BreadcrumbLinkVariantsOptions, BreadcrumbList, type BreadcrumbListProps, BreadcrumbPage, type BreadcrumbPageProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type ButtonVariantsOptions, Calendar, type CalendarDateRange, type CalendarMode, type CalendarProps, type CalendarState, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, type CheckboxVariantsOptions, Combobox, type ComboboxAlign, ComboboxChip, type ComboboxChipProps, ComboboxChipRemove, type ComboboxChipRemoveProps, ComboboxChips, type ComboboxChipsProps, ComboboxClear, type ComboboxClearProps, ComboboxCollection, type ComboboxCollectionProps, ComboboxGroup, ComboboxGroupLabel, type ComboboxGroupLabelProps, type ComboboxGroupProps, ComboboxInput, ComboboxInputGroup, type ComboboxInputGroupProps, type ComboboxInputGroupVariantsOptions, type ComboboxInputProps, ComboboxItem, type ComboboxItemProps, ComboboxLabel, type ComboboxLabelProps, ComboboxPopup, type ComboboxPopupProps, type ComboboxProps, ComboboxSeparator, type ComboboxSeparatorProps, type ComboboxSize, ComboboxTrigger, type ComboboxTriggerProps, type ComboboxTriggerSize, type ComboboxTriggerVariant, ComboboxValue, type ComboboxValueProps, ContextMenu, type ContextMenuAlign, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, ContextMenuGroup, ContextMenuGroupLabel, type ContextMenuGroupLabelProps, type ContextMenuGroupProps, ContextMenuItem, type ContextMenuItemProps, type ContextMenuItemVariant, ContextMenuLinkItem, type ContextMenuLinkItemProps, ContextMenuPopup, type ContextMenuPopupProps, type ContextMenuProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuSeparator, type ContextMenuSeparatorProps, ContextMenuShortcut, type ContextMenuShortcutProps, type ContextMenuSide, ContextMenuSubmenuRoot, type ContextMenuSubmenuRootProps, ContextMenuSubmenuTrigger, type ContextMenuSubmenuTriggerProps, ContextMenuTrigger, type ContextMenuTriggerProps, DatePicker, type DatePickerCalendarProps, type DatePickerPopupProps, type DatePickerProps, type DatePickerSize, type DatePickerVariant, type DatePickerVariantsOptions, DateRangePicker, type DateRangePickerCalendarProps, type DateRangePickerPopupProps, type DateRangePickerProps, type DateRangePickerSize, type DateRangePickerVariant, type DateRangePickerVariantsOptions, Dialog, DialogClose, type DialogCloseProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogPopup, type DialogPopupProps, type DialogPopupVariantsOptions, type DialogProps, type DialogScrollBehavior, type DialogSize, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, Divider, type DividerLabelPosition, type DividerOrientation, type DividerProps, type DividerVariant, type DividerVariantsOptions, Drawer, DrawerClose, type DrawerCloseProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, DrawerIndent, DrawerIndentBackground, type DrawerIndentBackgroundProps, type DrawerIndentProps, DrawerPopup, type DrawerPopupProps, type DrawerPopupVariantsOptions, type DrawerProps, DrawerProvider, type DrawerSide, type DrawerSize, DrawerSwipeArea, type DrawerSwipeAreaProps, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, DrawerVirtualKeyboardProvider, Field, type FieldControlProps, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldItem, type FieldItemProps, FieldLabel, type FieldLabelProps, type FieldLabelVariantsOptions, type FieldOrientation, type FieldProps, FieldValidity, type FieldValidityProps, Fieldset, FieldsetDescription, type FieldsetDescriptionProps, FieldsetLegend, type FieldsetLegendProps, type FieldsetLegendVariant, type FieldsetProps, Form, type FormProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonProps, type InputGroupProps, type InputProps, type InputSize, type InputVariantsOptions, Menu, type MenuAlign, MenuCheckboxItem, type MenuCheckboxItemProps, MenuGroup, MenuGroupLabel, type MenuGroupLabelProps, type MenuGroupProps, type MenuHandle, MenuItem, type MenuItemProps, type MenuItemVariant, type MenuItemVariantsOptions, MenuLinkItem, type MenuLinkItemProps, MenuPopup, type MenuPopupProps, type MenuProps, MenuRadioGroup, type MenuRadioGroupProps, MenuRadioItem, type MenuRadioItemProps, MenuSeparator, type MenuSeparatorProps, MenuShortcut, type MenuShortcutProps, type MenuSide, MenuSubmenuRoot, type MenuSubmenuRootProps, MenuSubmenuTrigger, type MenuSubmenuTriggerProps, MenuTrigger, type MenuTriggerProps, Popover, type PopoverAlign, PopoverClose, type PopoverCloseProps, PopoverDescription, type PopoverDescriptionProps, type PopoverHandle, PopoverPopup, type PopoverPopupProps, type PopoverPopupVariantsOptions, type PopoverProps, type PopoverSide, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps, Progress, type ProgressIndicatorVariantsOptions, type ProgressProps, type ProgressSize, type ProgressTrackVariantsOptions, type ProgressVariant, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RadioSize, type RadioVariantsOptions, Select, type SelectAlign, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectItem, type SelectItemProps, SelectLabel, type SelectLabelProps, SelectPopup, type SelectPopupProps, type SelectProps, SelectSeparator, type SelectSeparatorProps, SelectTrigger, type SelectTriggerProps, type SelectTriggerSize, type SelectTriggerVariant, type SelectTriggerVariantsOptions, SelectValue, type SelectValueProps, Skeleton, type SkeletonAnimation, type SkeletonProps, type SkeletonRenderState, type SkeletonVariant, type SkeletonVariantsOptions, Stepper, StepperDescription, type StepperDescriptionProps, StepperIndicator, type StepperIndicatorProps, StepperItem, type StepperItemProps, type StepperOrientation, type StepperProps, StepperSeparator, type StepperSeparatorProps, type StepperSize, StepperTitle, type StepperTitleProps, StepperTrigger, type StepperTriggerProps, type StepperTriggerVariantsOptions, Switch, type SwitchLabelPosition, type SwitchProps, type SwitchSize, type SwitchVariantsOptions, SystemState, type SystemStateBackground, type SystemStateProps, type SystemStateRenderState, type SystemStateScope, type SystemStateTitleLevel, type SystemStateVariant, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, type TableCaptionRenderState, type TableCaptionSide, TableCell, type TableCellProps, TableContainer, type TableContainerProps, type TableContainerRenderState, type TableContainerVariant, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableLayout, type TableProps, type TableRenderState, TableRow, type TableRowProps, type TableRowRenderState, type TableSize, Tabs, type TabsIndicatorPosition, TabsList, type TabsListProps, type TabsListVariantsOptions, TabsPanel, type TabsPanelProps, type TabsProps, type TabsSize, TabsTab, type TabsTabProps, type TabsTabVariantsOptions, type TabsVariant, Timeline, TimelineConnector, type TimelineConnectorProps, TimelineContent, type TimelineContentProps, TimelineDescription, type TimelineDescriptionProps, TimelineIndicator, type TimelineIndicatorAppearance, type TimelineIndicatorProps, type TimelineIndicatorVariant, TimelineItem, type TimelineItemProps, type TimelineProps, TimelineSeparator, type TimelineSeparatorProps, type TimelineSeparatorVariant, type TimelineSize, TimelineTime, type TimelineTimeProps, TimelineTitle, type TimelineTitleProps, type ToastData, type ToastManager, type ToastObject, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastType, type ToastUpdateOptions, Toaster, type ToasterProps, Toggle, ToggleGroup, type ToggleGroupProps, type ToggleProps, type ToggleSize, type ToggleVariant, type ToggleVariantsOptions, Tooltip, type TooltipAlign, type TooltipHandle, TooltipPopup, type TooltipPopupProps, type TooltipPopupVariantsOptions, type TooltipProps, TooltipProvider, type TooltipProviderProps, type TooltipSide, TooltipTrigger, type TooltipTriggerProps, Typography, type TypographyProps, type TypographyVariant, type TypographyVariantsOptions, alertVariants, avatarVariants, badgeVariants, breadcrumbLinkVariants, buttonVariants, checkboxVariants, cn, comboboxInputGroupVariants, createDrawerHandle, createMenuHandle, createPopoverHandle, createToastManager, createTooltipHandle, datePickerVariants, dateRangePickerVariants, dialogPopupVariants, dividerVariants, drawerPopupVariants, fieldLabelVariants, inputVariants, menuItemVariants, popoverPopupVariants, progressIndicatorVariants, progressTrackVariants, radioVariants, selectTriggerVariants, skeletonVariants, stepperTriggerVariants, switchVariants, tabsListVariants, tabsTabVariants, toast, toggleVariants, tooltipPopupVariants, typographyVariants, useComboboxFilter, useComboboxFilteredItems, useFieldControl };
package/dist/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { cn } from "./lib/cn.js";
2
2
  import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger } from "./components/Accordion/Accordion.js";
3
3
  import { AILoader } from "./components/AILoader/AILoader.js";
4
+ import { Alert, alertVariants } from "./components/Alert/Alert.js";
4
5
  import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarImage, avatarVariants } from "./components/Avatar/Avatar.js";
5
6
  import { Badge, badgeVariants } from "./components/Badge/Badge.js";
6
7
  import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, breadcrumbLinkVariants } from "./components/Breadcrumb/Breadcrumb.js";
@@ -17,6 +18,7 @@ import { Popover, PopoverClose, PopoverDescription, PopoverPopup, PopoverTitle,
17
18
  import { DatePicker, datePickerVariants } from "./components/DatePicker/DatePicker.js";
18
19
  import { DateRangePicker, dateRangePickerVariants } from "./components/DateRangePicker/DateRangePicker.js";
19
20
  import { Dialog, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogTitle, DialogTrigger, dialogPopupVariants } from "./components/Dialog/Dialog.js";
21
+ import { Divider, dividerVariants } from "./components/Divider/Divider.js";
20
22
  import { Drawer, DrawerClose, DrawerDescription, DrawerFooter, DrawerHeader, DrawerIndent, DrawerIndentBackground, DrawerPopup, DrawerProvider, DrawerSwipeArea, DrawerTitle, DrawerTrigger, DrawerVirtualKeyboardProvider, createDrawerHandle, drawerPopupVariants } from "./components/Drawer/Drawer.js";
21
23
  import { Field, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, fieldLabelVariants } from "./components/Field/Field.js";
22
24
  import { Fieldset, FieldsetDescription, FieldsetLegend } from "./components/Fieldset/Fieldset.js";
@@ -31,6 +33,7 @@ import { Table, TableBody, TableCaption, TableCell, TableContainer, TableFooter,
31
33
  import { Tabs, TabsList, TabsPanel, TabsTab, tabsListVariants, tabsTabVariants } from "./components/Tabs/Tabs.js";
32
34
  import { Timeline, TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, TimelineSeparator, TimelineTime, TimelineTitle } from "./components/Timeline/Timeline.js";
33
35
  import { Toaster, createToastManager, toast } from "./components/Toast/Toast.js";
36
+ import { Toggle, ToggleGroup, toggleVariants } from "./components/Toggle/Toggle.js";
34
37
  import { Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger, createTooltipHandle, tooltipPopupVariants } from "./components/Tooltip/Tooltip.js";
35
38
  import { Typography, typographyVariants } from "./components/Typography/Typography.js";
36
- export { AILoader, Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Checkbox, CheckboxGroup, Combobox, ComboboxChip, ComboboxChipRemove, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxInputGroup, ComboboxItem, ComboboxLabel, ComboboxPopup, ComboboxSeparator, ComboboxTrigger, ComboboxValue, ContextMenu, ContextMenuCheckboxItem, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuLinkItem, ContextMenuPopup, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSubmenuRoot, ContextMenuSubmenuTrigger, ContextMenuTrigger, DatePicker, DateRangePicker, Dialog, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerDescription, DrawerFooter, DrawerHeader, DrawerIndent, DrawerIndentBackground, DrawerPopup, DrawerProvider, DrawerSwipeArea, DrawerTitle, DrawerTrigger, DrawerVirtualKeyboardProvider, Field, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Fieldset, FieldsetDescription, FieldsetLegend, Form, Input, InputGroup, InputGroupAddon, Menu, MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, MenuSubmenuRoot, MenuSubmenuTrigger, MenuTrigger, Popover, PopoverClose, PopoverDescription, PopoverPopup, PopoverTitle, PopoverTrigger, Progress, Radio, RadioGroup, Select, SelectGroup, SelectGroupLabel, SelectItem, SelectLabel, SelectPopup, SelectSeparator, SelectTrigger, SelectValue, Skeleton, Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger, Switch, SystemState, Table, TableBody, TableCaption, TableCell, TableContainer, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsList, TabsPanel, TabsTab, Timeline, TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, TimelineSeparator, TimelineTime, TimelineTitle, Toaster, Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger, Typography, avatarVariants, badgeVariants, breadcrumbLinkVariants, buttonVariants, checkboxVariants, cn, comboboxInputGroupVariants, createDrawerHandle, createMenuHandle, createPopoverHandle, createToastManager, createTooltipHandle, datePickerVariants, dateRangePickerVariants, dialogPopupVariants, drawerPopupVariants, fieldLabelVariants, inputVariants, menuItemVariants, popoverPopupVariants, progressIndicatorVariants, progressTrackVariants, radioVariants, selectTriggerVariants, skeletonVariants, stepperTriggerVariants, switchVariants, tabsListVariants, tabsTabVariants, toast, tooltipPopupVariants, typographyVariants, useComboboxFilter, useComboboxFilteredItems, useFieldControl };
39
+ export { AILoader, Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger, Alert, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Checkbox, CheckboxGroup, Combobox, ComboboxChip, ComboboxChipRemove, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxInputGroup, ComboboxItem, ComboboxLabel, ComboboxPopup, ComboboxSeparator, ComboboxTrigger, ComboboxValue, ContextMenu, ContextMenuCheckboxItem, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuLinkItem, ContextMenuPopup, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSubmenuRoot, ContextMenuSubmenuTrigger, ContextMenuTrigger, DatePicker, DateRangePicker, Dialog, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogTitle, DialogTrigger, Divider, Drawer, DrawerClose, DrawerDescription, DrawerFooter, DrawerHeader, DrawerIndent, DrawerIndentBackground, DrawerPopup, DrawerProvider, DrawerSwipeArea, DrawerTitle, DrawerTrigger, DrawerVirtualKeyboardProvider, Field, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity, Fieldset, FieldsetDescription, FieldsetLegend, Form, Input, InputGroup, InputGroupAddon, Menu, MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, MenuSubmenuRoot, MenuSubmenuTrigger, MenuTrigger, Popover, PopoverClose, PopoverDescription, PopoverPopup, PopoverTitle, PopoverTrigger, Progress, Radio, RadioGroup, Select, SelectGroup, SelectGroupLabel, SelectItem, SelectLabel, SelectPopup, SelectSeparator, SelectTrigger, SelectValue, Skeleton, Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger, Switch, SystemState, Table, TableBody, TableCaption, TableCell, TableContainer, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsList, TabsPanel, TabsTab, Timeline, TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, TimelineSeparator, TimelineTime, TimelineTitle, Toaster, Toggle, ToggleGroup, Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger, Typography, alertVariants, avatarVariants, badgeVariants, breadcrumbLinkVariants, buttonVariants, checkboxVariants, cn, comboboxInputGroupVariants, createDrawerHandle, createMenuHandle, createPopoverHandle, createToastManager, createTooltipHandle, datePickerVariants, dateRangePickerVariants, dialogPopupVariants, dividerVariants, drawerPopupVariants, fieldLabelVariants, inputVariants, menuItemVariants, popoverPopupVariants, progressIndicatorVariants, progressTrackVariants, radioVariants, selectTriggerVariants, skeletonVariants, stepperTriggerVariants, switchVariants, tabsListVariants, tabsTabVariants, toast, toggleVariants, tooltipPopupVariants, typographyVariants, useComboboxFilter, useComboboxFilteredItems, useFieldControl };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@arcfusionz/arc-primitive-ui",
3
- "version": "0.2.4",
3
+ "version": "0.2.6",
4
4
  "description": "ArcFusion primitive UI components",
5
5
  "license": "MIT",
6
6
  "type": "module",