@bison-lab/admin-ui 3.22.0 → 3.23.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/README.md +8 -2
- package/dist/index.d.mts +160 -4
- package/dist/index.d.mts.map +1 -1
- package/dist/index.mjs +394 -41
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -1
package/README.md
CHANGED
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
# `@bison-lab/admin-ui`
|
|
2
2
|
|
|
3
|
-
Payload-free kit primitives for CMS field editors: type cards,
|
|
4
|
-
|
|
3
|
+
Payload-free kit primitives for CMS field editors: type cards, dialogs
|
|
4
|
+
(outline Cancel in a footer row, optional primary confirm), buttons,
|
|
5
|
+
checkbox, input, switch, textarea, a stacked `Field`/`Label` (12px/700,
|
|
6
|
+
8px above the control), `Kicker` (uppercase eyebrow), `Fold` (accordion
|
|
7
|
+
that keeps its own open state and leaves children mounted), `Stack` (locked
|
|
8
|
+
12px column gap for a list of folds and the add button after them), a Radix
|
|
9
|
+
select (not a native `<select>`), and the glyphs a rail uses. Wrap a screen
|
|
10
|
+
in `KitProvider` once so those styles mount. Field adapters in
|
|
5
11
|
`@bison-lab/payload-blocks/admin` (and later `@bison-lab/payload-core/admin`)
|
|
6
12
|
compose them and own `useField` / `useForm`.
|
|
7
13
|
|
package/dist/index.d.mts
CHANGED
|
@@ -1,7 +1,119 @@
|
|
|
1
1
|
|
|
2
2
|
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
3
|
+
import { Checkbox as Checkbox$1, Select as Select$1, Switch as Switch$1 } from "radix-ui";
|
|
4
|
+
import * as react from "react";
|
|
5
|
+
import { ButtonHTMLAttributes, ComponentPropsWithoutRef, HTMLAttributes, InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from "react";
|
|
4
6
|
|
|
7
|
+
//#region src/button.d.ts
|
|
8
|
+
type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "danger";
|
|
9
|
+
declare function Button({
|
|
10
|
+
variant,
|
|
11
|
+
className,
|
|
12
|
+
type,
|
|
13
|
+
children,
|
|
14
|
+
...props
|
|
15
|
+
}: ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
16
|
+
variant?: ButtonVariant;
|
|
17
|
+
}): react_jsx_runtime0.JSX.Element;
|
|
18
|
+
//#endregion
|
|
19
|
+
//#region src/checkbox.d.ts
|
|
20
|
+
declare function Checkbox({
|
|
21
|
+
className,
|
|
22
|
+
...props
|
|
23
|
+
}: ComponentPropsWithoutRef<typeof Checkbox$1.Root>): react_jsx_runtime0.JSX.Element;
|
|
24
|
+
//#endregion
|
|
25
|
+
//#region src/provider.d.ts
|
|
26
|
+
/** Mount once around kit chrome. Primitives read these styles; they do not inject them. */
|
|
27
|
+
declare function KitProvider({
|
|
28
|
+
children
|
|
29
|
+
}: {
|
|
30
|
+
children: ReactNode;
|
|
31
|
+
}): react_jsx_runtime0.JSX.Element;
|
|
32
|
+
//#endregion
|
|
33
|
+
//#region src/label.d.ts
|
|
34
|
+
type FieldTag = "label" | "div";
|
|
35
|
+
/** Stack a label above its control. The label class owns type; this owns the 8px gap. */
|
|
36
|
+
declare function Field({
|
|
37
|
+
as: Tag,
|
|
38
|
+
className,
|
|
39
|
+
...props
|
|
40
|
+
}: HTMLAttributes<HTMLElement> & {
|
|
41
|
+
as?: FieldTag;
|
|
42
|
+
}): react_jsx_runtime0.JSX.Element;
|
|
43
|
+
/** Visible field name. Sit this in `Field` above the control — do not restyle per screen. */
|
|
44
|
+
declare function Label({
|
|
45
|
+
className,
|
|
46
|
+
...props
|
|
47
|
+
}: HTMLAttributes<HTMLSpanElement>): react_jsx_runtime0.JSX.Element;
|
|
48
|
+
//#endregion
|
|
49
|
+
//#region src/kicker.d.ts
|
|
50
|
+
/** Uppercase eyebrow. MainHead, the preview note, and later chrome all use this. */
|
|
51
|
+
declare function Kicker({
|
|
52
|
+
className,
|
|
53
|
+
...props
|
|
54
|
+
}: HTMLAttributes<HTMLParagraphElement>): react_jsx_runtime0.JSX.Element;
|
|
55
|
+
//#endregion
|
|
56
|
+
//#region src/fold.d.ts
|
|
57
|
+
type FoldAction = {
|
|
58
|
+
label: string;
|
|
59
|
+
onClick: () => void;
|
|
60
|
+
disabled?: boolean;
|
|
61
|
+
danger?: boolean;
|
|
62
|
+
};
|
|
63
|
+
type FoldTone = "light" | "dark";
|
|
64
|
+
declare function Fold({
|
|
65
|
+
title,
|
|
66
|
+
tone,
|
|
67
|
+
badge,
|
|
68
|
+
meta,
|
|
69
|
+
actions,
|
|
70
|
+
defaultOpen,
|
|
71
|
+
open: openProp,
|
|
72
|
+
onOpenChange,
|
|
73
|
+
className,
|
|
74
|
+
children
|
|
75
|
+
}: {
|
|
76
|
+
title: string;
|
|
77
|
+
tone?: FoldTone;
|
|
78
|
+
badge?: ReactNode;
|
|
79
|
+
meta?: ReactNode | ((open: boolean) => ReactNode);
|
|
80
|
+
actions?: FoldAction[];
|
|
81
|
+
defaultOpen?: boolean;
|
|
82
|
+
open?: boolean;
|
|
83
|
+
onOpenChange?: (open: boolean) => void;
|
|
84
|
+
className?: string;
|
|
85
|
+
children?: ReactNode;
|
|
86
|
+
}): react_jsx_runtime0.JSX.Element;
|
|
87
|
+
//#endregion
|
|
88
|
+
//#region src/stack.d.ts
|
|
89
|
+
/** Vertical list with a locked gap — sections in a column, links in a section, and their add buttons. */
|
|
90
|
+
declare function Stack({
|
|
91
|
+
className,
|
|
92
|
+
...props
|
|
93
|
+
}: HTMLAttributes<HTMLDivElement>): react_jsx_runtime0.JSX.Element;
|
|
94
|
+
//#endregion
|
|
95
|
+
//#region src/dialog.d.ts
|
|
96
|
+
type DialogConfirmVariant = Extract<ButtonVariant, "primary" | "danger">;
|
|
97
|
+
declare function Dialog({
|
|
98
|
+
open,
|
|
99
|
+
title,
|
|
100
|
+
children,
|
|
101
|
+
cancelLabel,
|
|
102
|
+
onCancel,
|
|
103
|
+
confirmLabel,
|
|
104
|
+
onConfirm,
|
|
105
|
+
confirmVariant
|
|
106
|
+
}: {
|
|
107
|
+
open: boolean;
|
|
108
|
+
title: string;
|
|
109
|
+
children: ReactNode;
|
|
110
|
+
cancelLabel?: string;
|
|
111
|
+
onCancel: () => void;
|
|
112
|
+
confirmLabel?: string;
|
|
113
|
+
onConfirm?: () => void;
|
|
114
|
+
confirmVariant?: DialogConfirmVariant;
|
|
115
|
+
}): react_jsx_runtime0.JSX.Element | null;
|
|
116
|
+
//#endregion
|
|
5
117
|
//#region src/confirm-dialog.d.ts
|
|
6
118
|
declare function ConfirmDialog({
|
|
7
119
|
open,
|
|
@@ -10,7 +122,8 @@ declare function ConfirmDialog({
|
|
|
10
122
|
cancelLabel,
|
|
11
123
|
confirmLabel,
|
|
12
124
|
onCancel,
|
|
13
|
-
onConfirm
|
|
125
|
+
onConfirm,
|
|
126
|
+
confirmVariant
|
|
14
127
|
}: {
|
|
15
128
|
open: boolean;
|
|
16
129
|
title: string;
|
|
@@ -19,9 +132,35 @@ declare function ConfirmDialog({
|
|
|
19
132
|
confirmLabel: string;
|
|
20
133
|
onCancel: () => void;
|
|
21
134
|
onConfirm: () => void;
|
|
22
|
-
|
|
135
|
+
confirmVariant?: DialogConfirmVariant;
|
|
136
|
+
}): react_jsx_runtime0.JSX.Element;
|
|
137
|
+
//#endregion
|
|
138
|
+
//#region src/input.d.ts
|
|
139
|
+
declare function Input({
|
|
140
|
+
className,
|
|
141
|
+
...props
|
|
142
|
+
}: InputHTMLAttributes<HTMLInputElement>): react_jsx_runtime0.JSX.Element;
|
|
143
|
+
//#endregion
|
|
144
|
+
//#region src/switch.d.ts
|
|
145
|
+
declare function Switch({
|
|
146
|
+
className,
|
|
147
|
+
...props
|
|
148
|
+
}: ComponentPropsWithoutRef<typeof Switch$1.Root>): react_jsx_runtime0.JSX.Element;
|
|
149
|
+
//#endregion
|
|
150
|
+
//#region src/textarea.d.ts
|
|
151
|
+
declare function Textarea({
|
|
152
|
+
className,
|
|
153
|
+
...props
|
|
154
|
+
}: TextareaHTMLAttributes<HTMLTextAreaElement>): react_jsx_runtime0.JSX.Element;
|
|
23
155
|
//#endregion
|
|
24
156
|
//#region src/glyphs.d.ts
|
|
157
|
+
type ItemKind = "navLink" | "megaMenu";
|
|
158
|
+
/** Rail / type-card mark. The kit owns the badge; pass `kind` only. */
|
|
159
|
+
declare function KindGlyph({
|
|
160
|
+
kind
|
|
161
|
+
}: {
|
|
162
|
+
kind: ItemKind;
|
|
163
|
+
}): react_jsx_runtime0.JSX.Element;
|
|
25
164
|
declare function LinkGlyph(): react_jsx_runtime0.JSX.Element;
|
|
26
165
|
declare function MegaGlyph(): react_jsx_runtime0.JSX.Element;
|
|
27
166
|
//#endregion
|
|
@@ -49,6 +188,22 @@ declare function TypeCard({
|
|
|
49
188
|
disabled?: boolean;
|
|
50
189
|
}): react_jsx_runtime0.JSX.Element;
|
|
51
190
|
//#endregion
|
|
191
|
+
//#region src/select.d.ts
|
|
192
|
+
declare const Select: react.FC<Select$1.SelectProps>;
|
|
193
|
+
declare const SelectValue: react.ForwardRefExoticComponent<Select$1.SelectValueProps & react.RefAttributes<HTMLSpanElement>>;
|
|
194
|
+
declare function SelectTrigger({
|
|
195
|
+
children,
|
|
196
|
+
...props
|
|
197
|
+
}: ComponentPropsWithoutRef<typeof Select$1.Trigger>): react_jsx_runtime0.JSX.Element;
|
|
198
|
+
declare function SelectContent({
|
|
199
|
+
children,
|
|
200
|
+
...props
|
|
201
|
+
}: ComponentPropsWithoutRef<typeof Select$1.Content>): react_jsx_runtime0.JSX.Element;
|
|
202
|
+
declare function SelectItem({
|
|
203
|
+
children,
|
|
204
|
+
...props
|
|
205
|
+
}: ComponentPropsWithoutRef<typeof Select$1.Item>): react_jsx_runtime0.JSX.Element;
|
|
206
|
+
//#endregion
|
|
52
207
|
//#region src/workspace.d.ts
|
|
53
208
|
/**
|
|
54
209
|
* Presentational workspace chrome. Surfaces come from the adapter CSS
|
|
@@ -65,6 +220,7 @@ declare function MainHead({
|
|
|
65
220
|
description?: ReactNode;
|
|
66
221
|
children?: ReactNode;
|
|
67
222
|
}): react_jsx_runtime0.JSX.Element;
|
|
223
|
+
/** Aside chrome only. The adapter supplies children — nothing here is a link list. */
|
|
68
224
|
declare function ItemRail({
|
|
69
225
|
children
|
|
70
226
|
}: {
|
|
@@ -81,5 +237,5 @@ declare function Canvas({
|
|
|
81
237
|
children: ReactNode;
|
|
82
238
|
}): react_jsx_runtime0.JSX.Element;
|
|
83
239
|
//#endregion
|
|
84
|
-
export { Canvas, ConfirmDialog, ItemRail, LinkGlyph, MainHead, MegaGlyph, RailSlot, TypeCard, TypeCards };
|
|
240
|
+
export { Button, Canvas, Checkbox, ConfirmDialog, Dialog, Field, Fold, type FoldAction, type FoldTone, Input, ItemRail, Kicker, KindGlyph, KitProvider, Label, LinkGlyph, MainHead, MegaGlyph, RailSlot, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Stack, Switch, Textarea, TypeCard, TypeCards };
|
|
85
241
|
//# sourceMappingURL=index.d.mts.map
|
package/dist/index.d.mts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.mts","names":[],"sources":["../src/confirm-dialog.tsx","../src/glyphs.tsx","../src/type-cards.tsx","../src/workspace.tsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.mts","names":[],"sources":["../src/button.tsx","../src/checkbox.tsx","../src/provider.tsx","../src/label.tsx","../src/kicker.tsx","../src/fold.tsx","../src/stack.tsx","../src/dialog.tsx","../src/confirm-dialog.tsx","../src/input.tsx","../src/switch.tsx","../src/textarea.tsx","../src/glyphs.tsx","../src/type-cards.tsx","../src/select.tsx","../src/workspace.tsx"],"mappings":"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"}
|
package/dist/index.mjs
CHANGED
|
@@ -1,22 +1,131 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Checkbox as Checkbox$1, Select as Select$1, Switch as Switch$1 } from "radix-ui";
|
|
4
|
+
import { useId, useState } from "react";
|
|
5
|
+
//#region src/button.tsx
|
|
6
|
+
function Button({ variant = "primary", className, type = "button", children, ...props }) {
|
|
7
|
+
return /* @__PURE__ */ jsx("button", {
|
|
8
|
+
type,
|
|
9
|
+
className: [
|
|
10
|
+
"bl-nav-kit__btn",
|
|
11
|
+
`bl-nav-kit__btn--${variant}`,
|
|
12
|
+
className
|
|
13
|
+
].filter(Boolean).join(" "),
|
|
14
|
+
...props,
|
|
15
|
+
children
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
//#endregion
|
|
19
|
+
//#region src/checkbox.tsx
|
|
20
|
+
function Checkbox({ className, ...props }) {
|
|
21
|
+
return /* @__PURE__ */ jsx(Checkbox$1.Root, {
|
|
22
|
+
className: ["bl-nav-kit__checkbox", className].filter(Boolean).join(" "),
|
|
23
|
+
...props,
|
|
24
|
+
children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
|
|
25
|
+
className: "bl-nav-kit__checkbox-mark",
|
|
26
|
+
"aria-hidden": true,
|
|
27
|
+
children: /* @__PURE__ */ jsx("svg", {
|
|
28
|
+
viewBox: "0 0 24 24",
|
|
29
|
+
fill: "none",
|
|
30
|
+
"aria-hidden": true,
|
|
31
|
+
children: /* @__PURE__ */ jsx("path", {
|
|
32
|
+
d: "M20 6 9 17l-5-5",
|
|
33
|
+
stroke: "currentColor",
|
|
34
|
+
strokeWidth: "2.25",
|
|
35
|
+
strokeLinecap: "round",
|
|
36
|
+
strokeLinejoin: "round"
|
|
37
|
+
})
|
|
38
|
+
})
|
|
39
|
+
})
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
//#endregion
|
|
3
43
|
//#region src/styles.tsx
|
|
4
44
|
const CSS = `
|
|
5
45
|
.bl-nav-kit__types{display:grid;grid-template-columns:1fr 1fr;gap:12px}
|
|
6
46
|
.bl-nav-kit__types--compact{margin:0 0 10px;gap:6px}
|
|
7
|
-
.bl-nav-kit__type{border:1px solid var(--line2,#444854);background:#1b1d22;border-radius:10px;padding:16px;text-align:left;color:inherit;cursor:pointer;font:inherit}
|
|
8
|
-
.bl-nav-
|
|
47
|
+
.bl-nav-kit__type{display:flex;flex-direction:column;align-items:stretch;gap:0;border:1px solid var(--line2,#444854);background:#1b1d22;border-radius:10px;padding:16px;text-align:left;color:inherit;cursor:pointer;font:inherit}
|
|
48
|
+
.bl-nav-kit__type-row{display:flex;align-items:center;gap:12px;min-width:0}
|
|
49
|
+
.bl-nav-kit__types--compact .bl-nav-kit__type{align-items:center;justify-content:center;border-radius:7px;padding:8px 6px;font-size:12px;background:#15171b}
|
|
50
|
+
.bl-nav-kit__types--compact .bl-nav-kit__type-row{gap:8px;justify-content:center}
|
|
9
51
|
.bl-nav-kit__type small{display:block;margin-top:.3rem;color:var(--muted,var(--theme-elevation-500));font-weight:400}
|
|
10
|
-
.bl-nav-kit__type-icon{display:grid;place-items:center;width:2rem;height:2rem;border-radius:7px;background:#292c33;
|
|
11
|
-
.bl-nav-
|
|
12
|
-
.bl-nav-
|
|
13
|
-
.bl-nav-kit__type
|
|
14
|
-
.bl-nav-
|
|
15
|
-
.bl-nav-
|
|
16
|
-
.bl-nav-
|
|
17
|
-
.bl-nav-kit__modal
|
|
18
|
-
.bl-nav-kit__modal-
|
|
19
|
-
.bl-nav-
|
|
52
|
+
.bl-nav-kit__type-icon{display:grid;place-items:center;width:2rem;height:2rem;border-radius:7px;background:#292c33;flex:none}
|
|
53
|
+
.bl-nav-kit__glyph{width:28px;height:28px;display:grid;place-items:center;border-radius:7px;background:#292c33;color:#c9ccd4;flex:none}
|
|
54
|
+
.bl-nav-kit__glyph[data-kind="megaMenu"]{background:#32142a;color:#ff91ce}
|
|
55
|
+
.bl-nav-kit__type-icon .bl-nav-kit__glyph{width:100%;height:100%;background:transparent;color:inherit}
|
|
56
|
+
.bl-nav-kit__types--compact .bl-nav-kit__type-icon{width:1.25rem;height:1.25rem;background:transparent}
|
|
57
|
+
.bl-nav-kit__type:hover{border-color:var(--bl-kit-accent,var(--pink,#e60088))}
|
|
58
|
+
.bl-nav-kit__type.is-active,.bl-nav-kit__types--compact .bl-nav-kit__type.is-active{border-color:var(--bl-kit-accent,var(--pink,#e60088));background:#261722}
|
|
59
|
+
.bl-nav-kit__modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(0,0,0,.62);font:14px/1.45 Inter,ui-sans-serif,system-ui,sans-serif;color:#f6f7f9}
|
|
60
|
+
.bl-nav-kit__modal-card{width:min(36rem,calc(100vw - 2rem));background:#15171b;border:1px solid #3a3d46;border-radius:12px;padding:1.25rem 0 0;overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.45)}
|
|
61
|
+
.bl-nav-kit__modal-card h2{margin:0 1.25rem .75rem;font-size:18px}
|
|
62
|
+
.bl-nav-kit__modal-card p{margin:0;color:#989daa}
|
|
63
|
+
.bl-nav-kit__modal-body{min-width:0;padding:0 1.25rem}
|
|
64
|
+
.bl-nav-kit__modal-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.25rem;padding:1rem 1.25rem;border-top:1px solid #3a3d46}
|
|
65
|
+
.bl-nav-kit__danger{color:var(--theme-error-500,#ff7381)}
|
|
66
|
+
.bl-nav-kit__btn{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 14px;border-radius:8px;font:14px/1.45 Inter,ui-sans-serif,system-ui,sans-serif;font-weight:550;cursor:pointer}
|
|
67
|
+
.bl-nav-kit__btn:disabled{opacity:.5;cursor:not-allowed}
|
|
68
|
+
.bl-nav-kit__btn--primary{border:0;background:var(--bl-kit-accent,var(--pink,#e60088));color:#fff}
|
|
69
|
+
.bl-nav-kit__btn--primary:hover{filter:brightness(1.08)}
|
|
70
|
+
.bl-nav-kit__btn--secondary{border:0;background:#292c33;color:#f6f7f9}
|
|
71
|
+
.bl-nav-kit__btn--secondary:hover{background:#343845}
|
|
72
|
+
.bl-nav-kit__btn--outline{border:1px solid #3a3d46;background:transparent;color:#f6f7f9}
|
|
73
|
+
.bl-nav-kit__btn--outline:hover{border-color:var(--bl-kit-accent,var(--pink,#e60088))}
|
|
74
|
+
.bl-nav-kit__btn--ghost{border:1px solid transparent;background:transparent;color:#f6f7f9}
|
|
75
|
+
.bl-nav-kit__btn--ghost:hover{background:#1d1f24}
|
|
76
|
+
.bl-nav-kit__btn--danger{border:1px solid var(--theme-error-500,#ff7381);background:#261722;color:var(--theme-error-500,#ff7381)}
|
|
77
|
+
.bl-nav-kit__btn--danger:hover{background:#32181f}
|
|
78
|
+
.bl-nav-kit__input,.bl-nav-kit__textarea{width:100%;min-height:38px;padding:8px 10px;border:1px solid #3a3d46;border-radius:8px;background:#1d1f24;color:#f6f7f9;font:14px/1.45 Inter,ui-sans-serif,system-ui,sans-serif}
|
|
79
|
+
.bl-nav-kit__textarea{min-height:5.5rem;resize:vertical}
|
|
80
|
+
.bl-nav-kit__input:hover,.bl-nav-kit__textarea:hover,.bl-nav-kit__input:focus,.bl-nav-kit__textarea:focus{border-color:var(--bl-kit-accent,var(--pink,#e60088));outline:none}
|
|
81
|
+
.bl-nav-kit__input:disabled,.bl-nav-kit__textarea:disabled{opacity:.5;cursor:not-allowed}
|
|
82
|
+
.bl-nav-kit__input::placeholder,.bl-nav-kit__textarea::placeholder{color:#989daa}
|
|
83
|
+
.bl-nav-kit__check{display:flex;align-items:center;gap:10px;font:14px/1.45 Inter,ui-sans-serif,system-ui,sans-serif;color:#f6f7f9;cursor:pointer}
|
|
84
|
+
.bl-nav-kit__checkbox{position:relative;width:18px;height:18px;flex:none;border:1px solid #3a3d46;border-radius:3px;background:#1d1f24;color:#fff;cursor:pointer;padding:0}
|
|
85
|
+
.bl-nav-kit__checkbox:hover,.bl-nav-kit__checkbox[data-state="checked"]{border-color:var(--bl-kit-accent,var(--pink,#e60088))}
|
|
86
|
+
.bl-nav-kit__checkbox[data-state="checked"]{background:var(--bl-kit-accent,var(--pink,#e60088))}
|
|
87
|
+
.bl-nav-kit__checkbox[data-disabled]{opacity:.5;cursor:not-allowed}
|
|
88
|
+
.bl-nav-kit__checkbox-mark{position:absolute;inset:0;display:grid;place-items:center}
|
|
89
|
+
.bl-nav-kit__checkbox-mark svg{width:12px;height:12px;display:block}
|
|
90
|
+
.bl-nav-kit__switch{width:40px;height:22px;flex:none;padding:0;border:0;border-radius:999px;background:#3a3d46;position:relative;cursor:pointer}
|
|
91
|
+
.bl-nav-kit__switch[data-state="checked"]{background:var(--bl-kit-accent,var(--pink,#e60088))}
|
|
92
|
+
.bl-nav-kit__switch[data-disabled]{opacity:.5;cursor:not-allowed}
|
|
93
|
+
.bl-nav-kit__switch-thumb{display:block;width:18px;height:18px;border-radius:999px;background:#f6f7f9;transform:translateX(2px);transition:transform .12s ease}
|
|
94
|
+
.bl-nav-kit__switch[data-state="checked"] .bl-nav-kit__switch-thumb{transform:translateX(20px)}
|
|
95
|
+
.bl-nav-kit__select-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:38px;padding:8px 10px;border:1px solid #3a3d46;border-radius:8px;background:#1d1f24;color:#f6f7f9;font:14px/1.45 Inter,ui-sans-serif,system-ui,sans-serif;text-align:left;cursor:pointer}
|
|
96
|
+
.bl-nav-kit__select-trigger:hover,.bl-nav-kit__select-trigger[data-state="open"]{border-color:var(--bl-kit-accent,var(--pink,#e60088))}
|
|
97
|
+
.bl-nav-kit__select-trigger[data-disabled]{opacity:.5;cursor:not-allowed}
|
|
98
|
+
.bl-nav-kit__select-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
99
|
+
.bl-nav-kit__select-chevron{flex:none;color:#989daa;display:grid;place-items:center}
|
|
100
|
+
.bl-nav-kit__select-content{z-index:40;min-width:var(--radix-select-trigger-width);background:#15171b;border:1px solid #3a3d46;border-radius:10px;padding:4px;box-shadow:0 12px 32px rgba(0,0,0,.45);color:#f6f7f9;font:14px/1.45 Inter,ui-sans-serif,system-ui,sans-serif}
|
|
101
|
+
.bl-nav-kit__select-viewport{display:grid;gap:2px}
|
|
102
|
+
.bl-nav-kit__select-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:7px;cursor:pointer;outline:none;font:inherit}
|
|
103
|
+
.bl-nav-kit__select-item[data-highlighted],.bl-nav-kit__select-item[data-state="checked"]{background:#261722}
|
|
104
|
+
.bl-nav-kit__select-item[data-disabled]{opacity:.45;pointer-events:none}
|
|
105
|
+
.bl-nav-kit__select-check{flex:none;color:var(--bl-kit-accent,var(--pink,#e60088));display:grid;place-items:center}
|
|
106
|
+
.bl-nav-kit__field{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:0 0 16px}
|
|
107
|
+
.bl-nav-kit__label{display:block;font:12px/1.2 Inter,ui-sans-serif,system-ui,sans-serif;font-weight:700;color:inherit}
|
|
108
|
+
.bl-nav-kit__kicker{margin:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#989daa);font-weight:800}
|
|
109
|
+
.bl-nav-kit__fold{border:1px solid var(--line,#30333b);overflow:visible;margin:0;min-width:0;color:inherit}
|
|
110
|
+
.bl-nav-kit__fold--light{background:var(--panel,#141518);border-color:var(--line2,#444854);border-radius:12px}
|
|
111
|
+
.bl-nav-kit__fold--dark{background:#111216;border-radius:10px}
|
|
112
|
+
.bl-nav-kit__fold-head{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line,#30333b)}
|
|
113
|
+
.bl-nav-kit__fold--light .bl-nav-kit__fold-head{background:#1b1d22}
|
|
114
|
+
.bl-nav-kit__fold[data-open="false"] .bl-nav-kit__fold-head{border-bottom:0}
|
|
115
|
+
.bl-nav-kit__fold-toggle{flex:1;display:flex;align-items:center;gap:8px;min-width:0;border:0;background:transparent;padding:0;text-align:left;color:inherit;cursor:pointer;font:inherit}
|
|
116
|
+
.bl-nav-kit__fold-chevron{flex:none;transition:transform .12s ease}
|
|
117
|
+
.bl-nav-kit__fold[data-open="false"] .bl-nav-kit__fold-chevron{transform:rotate(-90deg)}
|
|
118
|
+
.bl-nav-kit__fold-title{font-size:13px;font-weight:700}
|
|
119
|
+
.bl-nav-kit__fold-badge{font-size:11px;color:#c2c5cc;background:#292c33;border-radius:999px;padding:3px 8px}
|
|
120
|
+
.bl-nav-kit__fold-toggle > small{color:var(--muted,#989daa)}
|
|
121
|
+
.bl-nav-kit__fold-body{padding:16px}
|
|
122
|
+
.bl-nav-kit__fold-body[hidden]{display:none}
|
|
123
|
+
.bl-nav-kit__stack{display:flex;flex-direction:column;gap:12px}
|
|
124
|
+
.bl-nav-kit__fold-menu{position:relative}
|
|
125
|
+
.bl-nav-kit__fold-menu > button{border:0;background:transparent;color:inherit;cursor:pointer}
|
|
126
|
+
.bl-nav-kit__fold-menu-pop{position:absolute;right:0;top:34px;z-index:12;min-width:140px;padding:4px;border:1px solid #3a3d46;border-radius:8px;background:#1b1d22}
|
|
127
|
+
.bl-nav-kit__fold-menu-pop button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:7px 8px;border-radius:6px;color:#d8dbe1;cursor:pointer}
|
|
128
|
+
.bl-nav-kit__fold-menu-pop button:disabled{opacity:.45;cursor:not-allowed}
|
|
20
129
|
`;
|
|
21
130
|
function KitStyles() {
|
|
22
131
|
return /* @__PURE__ */ jsx("style", {
|
|
@@ -26,41 +135,219 @@ function KitStyles() {
|
|
|
26
135
|
});
|
|
27
136
|
}
|
|
28
137
|
//#endregion
|
|
29
|
-
//#region src/
|
|
30
|
-
|
|
138
|
+
//#region src/provider.tsx
|
|
139
|
+
/** Mount once around kit chrome. Primitives read these styles; they do not inject them. */
|
|
140
|
+
function KitProvider({ children }) {
|
|
141
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(KitStyles, {}), children] });
|
|
142
|
+
}
|
|
143
|
+
//#endregion
|
|
144
|
+
//#region src/label.tsx
|
|
145
|
+
/** Stack a label above its control. The label class owns type; this owns the 8px gap. */
|
|
146
|
+
function Field({ as: Tag = "label", className, ...props }) {
|
|
147
|
+
return /* @__PURE__ */ jsx(Tag, {
|
|
148
|
+
className: ["bl-nav-kit__field", className].filter(Boolean).join(" "),
|
|
149
|
+
...props
|
|
150
|
+
});
|
|
151
|
+
}
|
|
152
|
+
/** Visible field name. Sit this in `Field` above the control — do not restyle per screen. */
|
|
153
|
+
function Label({ className, ...props }) {
|
|
154
|
+
return /* @__PURE__ */ jsx("span", {
|
|
155
|
+
className: ["bl-nav-kit__label", className].filter(Boolean).join(" "),
|
|
156
|
+
...props
|
|
157
|
+
});
|
|
158
|
+
}
|
|
159
|
+
//#endregion
|
|
160
|
+
//#region src/kicker.tsx
|
|
161
|
+
/** Uppercase eyebrow. MainHead, the preview note, and later chrome all use this. */
|
|
162
|
+
function Kicker({ className, ...props }) {
|
|
163
|
+
return /* @__PURE__ */ jsx("p", {
|
|
164
|
+
className: ["bl-nav-kit__kicker", className].filter(Boolean).join(" "),
|
|
165
|
+
...props
|
|
166
|
+
});
|
|
167
|
+
}
|
|
168
|
+
//#endregion
|
|
169
|
+
//#region src/fold.tsx
|
|
170
|
+
function Fold({ title, tone = "light", badge, meta, actions, defaultOpen = true, open: openProp, onOpenChange, className, children }) {
|
|
171
|
+
const controlled = openProp !== void 0;
|
|
172
|
+
const [uncontrolled, setUncontrolled] = useState(defaultOpen);
|
|
173
|
+
const [menu, setMenu] = useState(false);
|
|
174
|
+
const open = controlled ? openProp : uncontrolled;
|
|
175
|
+
function setOpen(next) {
|
|
176
|
+
if (!controlled) setUncontrolled(next);
|
|
177
|
+
onOpenChange?.(next);
|
|
178
|
+
}
|
|
179
|
+
const metaNode = typeof meta === "function" ? meta(open) : meta;
|
|
180
|
+
const badgeNode = badge == null ? null : typeof badge === "string" || typeof badge === "number" ? /* @__PURE__ */ jsx("span", {
|
|
181
|
+
className: "bl-nav-kit__fold-badge",
|
|
182
|
+
children: badge
|
|
183
|
+
}) : badge;
|
|
184
|
+
return /* @__PURE__ */ jsxs("section", {
|
|
185
|
+
role: "group",
|
|
186
|
+
"aria-label": title,
|
|
187
|
+
"data-open": open ? "true" : "false",
|
|
188
|
+
className: [
|
|
189
|
+
"bl-nav-kit__fold",
|
|
190
|
+
`bl-nav-kit__fold--${tone}`,
|
|
191
|
+
className
|
|
192
|
+
].filter(Boolean).join(" "),
|
|
193
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
194
|
+
className: "bl-nav-kit__fold-head",
|
|
195
|
+
children: [/* @__PURE__ */ jsxs("button", {
|
|
196
|
+
type: "button",
|
|
197
|
+
className: "bl-nav-kit__fold-toggle",
|
|
198
|
+
"aria-expanded": open,
|
|
199
|
+
"aria-label": open ? `Collapse ${title}` : `Expand ${title}`,
|
|
200
|
+
onClick: () => setOpen(!open),
|
|
201
|
+
children: [
|
|
202
|
+
/* @__PURE__ */ jsx("svg", {
|
|
203
|
+
className: "bl-nav-kit__fold-chevron",
|
|
204
|
+
viewBox: "0 0 24 24",
|
|
205
|
+
width: "14",
|
|
206
|
+
height: "14",
|
|
207
|
+
fill: "none",
|
|
208
|
+
stroke: "currentColor",
|
|
209
|
+
strokeWidth: "2",
|
|
210
|
+
"aria-hidden": true,
|
|
211
|
+
children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
|
|
212
|
+
}),
|
|
213
|
+
/* @__PURE__ */ jsx("strong", {
|
|
214
|
+
className: "bl-nav-kit__fold-title",
|
|
215
|
+
children: title
|
|
216
|
+
}),
|
|
217
|
+
badgeNode,
|
|
218
|
+
metaNode
|
|
219
|
+
]
|
|
220
|
+
}), actions?.length ? /* @__PURE__ */ jsxs("div", {
|
|
221
|
+
className: "bl-nav-kit__fold-menu",
|
|
222
|
+
children: [/* @__PURE__ */ jsx("button", {
|
|
223
|
+
type: "button",
|
|
224
|
+
"aria-label": `${title} actions`,
|
|
225
|
+
onClick: () => setMenu((next) => !next),
|
|
226
|
+
children: "⋯"
|
|
227
|
+
}), menu ? /* @__PURE__ */ jsx("div", {
|
|
228
|
+
className: "bl-nav-kit__fold-menu-pop",
|
|
229
|
+
children: actions.map((action) => /* @__PURE__ */ jsx("button", {
|
|
230
|
+
type: "button",
|
|
231
|
+
disabled: action.disabled,
|
|
232
|
+
className: action.danger ? "bl-nav-kit__danger" : void 0,
|
|
233
|
+
onClick: () => {
|
|
234
|
+
action.onClick();
|
|
235
|
+
setMenu(false);
|
|
236
|
+
},
|
|
237
|
+
children: action.label
|
|
238
|
+
}, action.label))
|
|
239
|
+
}) : null]
|
|
240
|
+
}) : null]
|
|
241
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
242
|
+
className: "bl-nav-kit__fold-body",
|
|
243
|
+
hidden: !open,
|
|
244
|
+
children
|
|
245
|
+
})]
|
|
246
|
+
});
|
|
247
|
+
}
|
|
248
|
+
//#endregion
|
|
249
|
+
//#region src/stack.tsx
|
|
250
|
+
/** Vertical list with a locked gap — sections in a column, links in a section, and their add buttons. */
|
|
251
|
+
function Stack({ className, ...props }) {
|
|
252
|
+
return /* @__PURE__ */ jsx("div", {
|
|
253
|
+
className: ["bl-nav-kit__stack", className].filter(Boolean).join(" "),
|
|
254
|
+
...props
|
|
255
|
+
});
|
|
256
|
+
}
|
|
257
|
+
//#endregion
|
|
258
|
+
//#region src/dialog.tsx
|
|
259
|
+
function Dialog({ open, title, children, cancelLabel = "Cancel", onCancel, confirmLabel, onConfirm, confirmVariant = "primary" }) {
|
|
260
|
+
const titleId = useId();
|
|
31
261
|
if (!open) return null;
|
|
32
|
-
return /* @__PURE__ */
|
|
262
|
+
return /* @__PURE__ */ jsx("div", {
|
|
33
263
|
className: "bl-nav-kit__modal",
|
|
34
264
|
role: "dialog",
|
|
35
|
-
"aria-
|
|
36
|
-
|
|
265
|
+
"aria-modal": "true",
|
|
266
|
+
"aria-labelledby": titleId,
|
|
267
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
37
268
|
className: "bl-nav-kit__modal-card",
|
|
38
269
|
children: [
|
|
39
270
|
/* @__PURE__ */ jsx("h2", {
|
|
40
|
-
id:
|
|
271
|
+
id: titleId,
|
|
41
272
|
children: title
|
|
42
273
|
}),
|
|
43
|
-
/* @__PURE__ */ jsx("
|
|
274
|
+
/* @__PURE__ */ jsx("div", {
|
|
275
|
+
className: "bl-nav-kit__modal-body",
|
|
276
|
+
children
|
|
277
|
+
}),
|
|
44
278
|
/* @__PURE__ */ jsxs("div", {
|
|
45
279
|
className: "bl-nav-kit__modal-actions",
|
|
46
|
-
children: [/* @__PURE__ */ jsx(
|
|
47
|
-
|
|
280
|
+
children: [/* @__PURE__ */ jsx(Button, {
|
|
281
|
+
variant: "outline",
|
|
48
282
|
onClick: onCancel,
|
|
49
283
|
children: cancelLabel
|
|
50
|
-
}), /* @__PURE__ */ jsx(
|
|
51
|
-
|
|
52
|
-
className: "bl-nav-kit__danger",
|
|
284
|
+
}), confirmLabel && onConfirm ? /* @__PURE__ */ jsx(Button, {
|
|
285
|
+
variant: confirmVariant,
|
|
53
286
|
onClick: onConfirm,
|
|
54
287
|
children: confirmLabel
|
|
55
|
-
})]
|
|
288
|
+
}) : null]
|
|
56
289
|
})
|
|
57
290
|
]
|
|
58
|
-
})
|
|
291
|
+
})
|
|
292
|
+
});
|
|
293
|
+
}
|
|
294
|
+
//#endregion
|
|
295
|
+
//#region src/confirm-dialog.tsx
|
|
296
|
+
function ConfirmDialog({ open, title, children, cancelLabel, confirmLabel, onCancel, onConfirm, confirmVariant = "primary" }) {
|
|
297
|
+
return /* @__PURE__ */ jsx(Dialog, {
|
|
298
|
+
open,
|
|
299
|
+
title,
|
|
300
|
+
cancelLabel,
|
|
301
|
+
confirmLabel,
|
|
302
|
+
confirmVariant,
|
|
303
|
+
onCancel,
|
|
304
|
+
onConfirm,
|
|
305
|
+
children: /* @__PURE__ */ jsx("p", { children })
|
|
306
|
+
});
|
|
307
|
+
}
|
|
308
|
+
//#endregion
|
|
309
|
+
//#region src/input.tsx
|
|
310
|
+
function Input({ className, ...props }) {
|
|
311
|
+
return /* @__PURE__ */ jsx("input", {
|
|
312
|
+
className: ["bl-nav-kit__input", className].filter(Boolean).join(" "),
|
|
313
|
+
...props
|
|
314
|
+
});
|
|
315
|
+
}
|
|
316
|
+
//#endregion
|
|
317
|
+
//#region src/switch.tsx
|
|
318
|
+
function Switch({ className, ...props }) {
|
|
319
|
+
return /* @__PURE__ */ jsx(Switch$1.Root, {
|
|
320
|
+
className: ["bl-nav-kit__switch", className].filter(Boolean).join(" "),
|
|
321
|
+
...props,
|
|
322
|
+
children: /* @__PURE__ */ jsx(Switch$1.Thumb, { className: "bl-nav-kit__switch-thumb" })
|
|
323
|
+
});
|
|
324
|
+
}
|
|
325
|
+
//#endregion
|
|
326
|
+
//#region src/textarea.tsx
|
|
327
|
+
function Textarea({ className, ...props }) {
|
|
328
|
+
return /* @__PURE__ */ jsx("textarea", {
|
|
329
|
+
className: ["bl-nav-kit__textarea", className].filter(Boolean).join(" "),
|
|
330
|
+
...props
|
|
59
331
|
});
|
|
60
332
|
}
|
|
61
333
|
//#endregion
|
|
62
334
|
//#region src/glyphs.tsx
|
|
335
|
+
/** Rail / type-card mark. The kit owns the badge; pass `kind` only. */
|
|
336
|
+
function KindGlyph({ kind }) {
|
|
337
|
+
return /* @__PURE__ */ jsx("span", {
|
|
338
|
+
className: "bl-nav-kit__glyph",
|
|
339
|
+
"data-kind": kind,
|
|
340
|
+
"aria-hidden": true,
|
|
341
|
+
children: kind === "megaMenu" ? /* @__PURE__ */ jsx(MegaMark, {}) : /* @__PURE__ */ jsx(LinkMark, {})
|
|
342
|
+
});
|
|
343
|
+
}
|
|
63
344
|
function LinkGlyph() {
|
|
345
|
+
return /* @__PURE__ */ jsx(KindGlyph, { kind: "navLink" });
|
|
346
|
+
}
|
|
347
|
+
function MegaGlyph() {
|
|
348
|
+
return /* @__PURE__ */ jsx(KindGlyph, { kind: "megaMenu" });
|
|
349
|
+
}
|
|
350
|
+
function LinkMark() {
|
|
64
351
|
return /* @__PURE__ */ jsxs("svg", {
|
|
65
352
|
xmlns: "http://www.w3.org/2000/svg",
|
|
66
353
|
width: "16",
|
|
@@ -74,7 +361,7 @@ function LinkGlyph() {
|
|
|
74
361
|
children: [/* @__PURE__ */ jsx("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }), /* @__PURE__ */ jsx("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })]
|
|
75
362
|
});
|
|
76
363
|
}
|
|
77
|
-
function
|
|
364
|
+
function MegaMark() {
|
|
78
365
|
return /* @__PURE__ */ jsxs("svg", {
|
|
79
366
|
xmlns: "http://www.w3.org/2000/svg",
|
|
80
367
|
width: "16",
|
|
@@ -101,9 +388,9 @@ function MegaGlyph() {
|
|
|
101
388
|
//#endregion
|
|
102
389
|
//#region src/type-cards.tsx
|
|
103
390
|
function TypeCards({ compact, children }) {
|
|
104
|
-
return /* @__PURE__ */
|
|
391
|
+
return /* @__PURE__ */ jsx("div", {
|
|
105
392
|
className: compact ? "bl-nav-kit__types bl-nav-kit__types--compact" : "bl-nav-kit__types",
|
|
106
|
-
children
|
|
393
|
+
children
|
|
107
394
|
});
|
|
108
395
|
}
|
|
109
396
|
function TypeCard({ icon, label, description, onClick, active, disabled }) {
|
|
@@ -112,15 +399,83 @@ function TypeCard({ icon, label, description, onClick, active, disabled }) {
|
|
|
112
399
|
className: active ? "bl-nav-kit__type is-active" : "bl-nav-kit__type",
|
|
113
400
|
disabled,
|
|
114
401
|
onClick,
|
|
115
|
-
children: [
|
|
116
|
-
|
|
402
|
+
children: [/* @__PURE__ */ jsxs("span", {
|
|
403
|
+
className: "bl-nav-kit__type-row",
|
|
404
|
+
children: [icon ? /* @__PURE__ */ jsx("span", {
|
|
117
405
|
className: "bl-nav-kit__type-icon",
|
|
118
406
|
"aria-hidden": true,
|
|
119
407
|
children: icon
|
|
120
|
-
}) : null,
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
408
|
+
}) : null, label]
|
|
409
|
+
}), description ? /* @__PURE__ */ jsx("small", { children: description }) : null]
|
|
410
|
+
});
|
|
411
|
+
}
|
|
412
|
+
//#endregion
|
|
413
|
+
//#region src/select.tsx
|
|
414
|
+
const Select = Select$1.Root;
|
|
415
|
+
const SelectValue = Select$1.Value;
|
|
416
|
+
function SelectTrigger({ children, ...props }) {
|
|
417
|
+
return /* @__PURE__ */ jsxs(Select$1.Trigger, {
|
|
418
|
+
className: "bl-nav-kit__select-trigger",
|
|
419
|
+
...props,
|
|
420
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
421
|
+
className: "bl-nav-kit__select-value",
|
|
422
|
+
children
|
|
423
|
+
}), /* @__PURE__ */ jsx("span", {
|
|
424
|
+
className: "bl-nav-kit__select-chevron",
|
|
425
|
+
"aria-hidden": true,
|
|
426
|
+
children: /* @__PURE__ */ jsx(ChevronGlyph, {})
|
|
427
|
+
})]
|
|
428
|
+
});
|
|
429
|
+
}
|
|
430
|
+
function SelectContent({ children, ...props }) {
|
|
431
|
+
return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Content, {
|
|
432
|
+
className: "bl-nav-kit__select-content",
|
|
433
|
+
position: "popper",
|
|
434
|
+
sideOffset: 6,
|
|
435
|
+
...props,
|
|
436
|
+
children: /* @__PURE__ */ jsx(Select$1.Viewport, {
|
|
437
|
+
className: "bl-nav-kit__select-viewport",
|
|
438
|
+
children
|
|
439
|
+
})
|
|
440
|
+
}) });
|
|
441
|
+
}
|
|
442
|
+
function SelectItem({ children, ...props }) {
|
|
443
|
+
return /* @__PURE__ */ jsxs(Select$1.Item, {
|
|
444
|
+
className: "bl-nav-kit__select-item",
|
|
445
|
+
...props,
|
|
446
|
+
children: [/* @__PURE__ */ jsx(Select$1.ItemText, { children }), /* @__PURE__ */ jsx(Select$1.ItemIndicator, {
|
|
447
|
+
className: "bl-nav-kit__select-check",
|
|
448
|
+
"aria-hidden": true,
|
|
449
|
+
children: /* @__PURE__ */ jsx(CheckGlyph, {})
|
|
450
|
+
})]
|
|
451
|
+
});
|
|
452
|
+
}
|
|
453
|
+
function ChevronGlyph() {
|
|
454
|
+
return /* @__PURE__ */ jsx("svg", {
|
|
455
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
456
|
+
width: "16",
|
|
457
|
+
height: "16",
|
|
458
|
+
viewBox: "0 0 24 24",
|
|
459
|
+
fill: "none",
|
|
460
|
+
stroke: "currentColor",
|
|
461
|
+
strokeWidth: "2",
|
|
462
|
+
strokeLinecap: "round",
|
|
463
|
+
strokeLinejoin: "round",
|
|
464
|
+
children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
|
|
465
|
+
});
|
|
466
|
+
}
|
|
467
|
+
function CheckGlyph() {
|
|
468
|
+
return /* @__PURE__ */ jsx("svg", {
|
|
469
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
470
|
+
width: "14",
|
|
471
|
+
height: "14",
|
|
472
|
+
viewBox: "0 0 24 24",
|
|
473
|
+
fill: "none",
|
|
474
|
+
stroke: "currentColor",
|
|
475
|
+
strokeWidth: "2",
|
|
476
|
+
strokeLinecap: "round",
|
|
477
|
+
strokeLinejoin: "round",
|
|
478
|
+
children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
|
|
124
479
|
});
|
|
125
480
|
}
|
|
126
481
|
//#endregion
|
|
@@ -133,15 +488,13 @@ function MainHead({ kicker, title, description, children }) {
|
|
|
133
488
|
return /* @__PURE__ */ jsxs("header", {
|
|
134
489
|
className: "bl-workspace__main-head",
|
|
135
490
|
children: [/* @__PURE__ */ jsxs("div", { children: [
|
|
136
|
-
kicker ? /* @__PURE__ */ jsx(
|
|
137
|
-
className: "bl-workspace__kicker",
|
|
138
|
-
children: kicker
|
|
139
|
-
}) : null,
|
|
491
|
+
kicker ? /* @__PURE__ */ jsx(Kicker, { children: kicker }) : null,
|
|
140
492
|
/* @__PURE__ */ jsx("h1", { children: title }),
|
|
141
493
|
description ? /* @__PURE__ */ jsx("p", { children: description }) : null
|
|
142
494
|
] }), children]
|
|
143
495
|
});
|
|
144
496
|
}
|
|
497
|
+
/** Aside chrome only. The adapter supplies children — nothing here is a link list. */
|
|
145
498
|
function ItemRail({ children }) {
|
|
146
499
|
return /* @__PURE__ */ jsx("aside", {
|
|
147
500
|
className: "bl-workspace__rail",
|
|
@@ -161,6 +514,6 @@ function Canvas({ children }) {
|
|
|
161
514
|
});
|
|
162
515
|
}
|
|
163
516
|
//#endregion
|
|
164
|
-
export { Canvas, ConfirmDialog, ItemRail, LinkGlyph, MainHead, MegaGlyph, RailSlot, TypeCard, TypeCards };
|
|
517
|
+
export { Button, Canvas, Checkbox, ConfirmDialog, Dialog, Field, Fold, Input, ItemRail, Kicker, KindGlyph, KitProvider, Label, LinkGlyph, MainHead, MegaGlyph, RailSlot, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Stack, Switch, Textarea, TypeCard, TypeCards };
|
|
165
518
|
|
|
166
519
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../src/styles.tsx","../src/confirm-dialog.tsx","../src/glyphs.tsx","../src/type-cards.tsx","../src/workspace.tsx"],"sourcesContent":["const CSS = `\n.bl-nav-kit__types{display:grid;grid-template-columns:1fr 1fr;gap:12px}\n.bl-nav-kit__types--compact{margin:0 0 10px;gap:6px}\n.bl-nav-kit__type{border:1px solid var(--line2,#444854);background:#1b1d22;border-radius:10px;padding:16px;text-align:left;color:inherit;cursor:pointer;font:inherit}\n.bl-nav-kit__types--compact .bl-nav-kit__type{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:7px;padding:8px 6px;font-size:12px;background:#15171b}\n.bl-nav-kit__type small{display:block;margin-top:.3rem;color:var(--muted,var(--theme-elevation-500));font-weight:400}\n.bl-nav-kit__type-icon{display:grid;place-items:center;width:2rem;height:2rem;border-radius:7px;background:#292c33;margin-bottom:.5rem}\n.bl-nav-kit__types--compact .bl-nav-kit__type-icon{margin-bottom:0;width:1.25rem;height:1.25rem;background:transparent}\n.bl-nav-kit__type:hover{border-color:var(--pink,#e60088)}\n.bl-nav-kit__type.is-active,.bl-nav-kit__types--compact .bl-nav-kit__type.is-active{border-color:var(--pink,#e60088);background:#261722}\n.bl-nav-kit__modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:var(--theme-overlay)}\n.bl-nav-kit__modal-card{width:min(36rem,calc(100vw - 2rem));background:var(--theme-elevation-0);border:1px solid var(--theme-elevation-150);border-radius:12px;padding:1.25rem}\n.bl-nav-kit__modal-card h2{margin:0 0 .75rem}\n.bl-nav-kit__modal-card p{margin:0}\n.bl-nav-kit__modal-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}\n.bl-nav-kit__danger{color:var(--theme-error-500)}\n`;\n\nexport function KitStyles() {\n return (\n <style href=\"bl-admin-ui\" precedence=\"default\">\n {CSS}\n </style>\n );\n}\n","import type { ReactNode } from \"react\";\n\nimport { KitStyles } from \"./styles\";\n\nexport function ConfirmDialog({\n open,\n title,\n children,\n cancelLabel,\n confirmLabel,\n onCancel,\n onConfirm,\n}: {\n open: boolean;\n title: string;\n children: ReactNode;\n cancelLabel: string;\n confirmLabel: string;\n onCancel: () => void;\n onConfirm: () => void;\n}) {\n if (!open) return null;\n return (\n <div className=\"bl-nav-kit__modal\" role=\"dialog\" aria-labelledby=\"bl-admin-confirm-title\">\n <KitStyles />\n <div className=\"bl-nav-kit__modal-card\">\n <h2 id=\"bl-admin-confirm-title\">{title}</h2>\n <p>{children}</p>\n <div className=\"bl-nav-kit__modal-actions\">\n <button type=\"button\" onClick={onCancel}>\n {cancelLabel}\n </button>\n <button type=\"button\" className=\"bl-nav-kit__danger\" onClick={onConfirm}>\n {confirmLabel}\n </button>\n </div>\n </div>\n </div>\n );\n}\n","export function LinkGlyph() {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\" />\n <path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\" />\n </svg>\n );\n}\n\nexport function MegaGlyph() {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" />\n <path d=\"M9 3v18\" />\n <path d=\"M15 3v18\" />\n </svg>\n );\n}\n","import type { ReactNode } from \"react\";\n\nimport { KitStyles } from \"./styles\";\n\nexport function TypeCards({\n compact,\n children,\n}: {\n compact?: boolean;\n children: ReactNode;\n}) {\n return (\n <div className={compact ? \"bl-nav-kit__types bl-nav-kit__types--compact\" : \"bl-nav-kit__types\"}>\n <KitStyles />\n {children}\n </div>\n );\n}\n\nexport function TypeCard({\n icon,\n label,\n description,\n onClick,\n active,\n disabled,\n}: {\n icon?: ReactNode;\n label: string;\n description?: string;\n onClick: () => void;\n active?: boolean;\n disabled?: boolean;\n}) {\n return (\n <button\n type=\"button\"\n className={active ? \"bl-nav-kit__type is-active\" : \"bl-nav-kit__type\"}\n disabled={disabled}\n onClick={onClick}\n >\n {icon ? (\n <span className=\"bl-nav-kit__type-icon\" aria-hidden>\n {icon}\n </span>\n ) : null}\n {label}\n {description ? <small>{description}</small> : null}\n </button>\n );\n}\n","import type { ReactNode } from \"react\";\n\n/**\n * Presentational workspace chrome. Surfaces come from the adapter CSS\n * (Payload theme tokens). Field adapters own form writes.\n */\nexport function MainHead({\n kicker,\n title,\n description,\n children,\n}: {\n kicker?: ReactNode;\n title: ReactNode;\n description?: ReactNode;\n children?: ReactNode;\n}) {\n return (\n <header className=\"bl-workspace__main-head\">\n <div>\n {kicker ? <p className=\"bl-workspace__kicker\">{kicker}</p> : null}\n <h1>{title}</h1>\n {description ? <p>{description}</p> : null}\n </div>\n {children}\n </header>\n );\n}\n\nexport function ItemRail({ children }: { children: ReactNode }) {\n return <aside className=\"bl-workspace__rail\">{children}</aside>;\n}\n\nexport function RailSlot({ children }: { children: ReactNode }) {\n return <div className=\"bl-workspace__rail-slot\">{children}</div>;\n}\n\nexport function Canvas({ children }: { children: ReactNode }) {\n return <div className=\"bl-workspace__canvas\">{children}</div>;\n}\n"],"mappings":";;;AAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;AAkBZ,SAAgB,YAAY;AAC1B,QACE,oBAAC,SAAD;EAAO,MAAK;EAAc,YAAW;YAClC;EACK,CAAA;;;;AClBZ,SAAgB,cAAc,EAC5B,MACA,OACA,UACA,aACA,cACA,UACA,aASC;AACD,KAAI,CAAC,KAAM,QAAO;AAClB,QACE,qBAAC,OAAD;EAAK,WAAU;EAAoB,MAAK;EAAS,mBAAgB;YAAjE,CACE,oBAAC,WAAD,EAAa,CAAA,EACb,qBAAC,OAAD;GAAK,WAAU;aAAf;IACE,oBAAC,MAAD;KAAI,IAAG;eAA0B;KAAW,CAAA;IAC5C,oBAAC,KAAD,EAAI,UAAa,CAAA;IACjB,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,UAAD;MAAQ,MAAK;MAAS,SAAS;gBAC5B;MACM,CAAA,EACT,oBAAC,UAAD;MAAQ,MAAK;MAAS,WAAU;MAAqB,SAAS;gBAC3D;MACM,CAAA,CACL;;IACF;KACF;;;;;ACrCV,SAAgB,YAAY;AAC1B,QACE,qBAAC,OAAD;EAAK,OAAM;EAA6B,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,QAAO;EAAe,aAAY;EAAI,eAAc;EAAQ,gBAAe;YAA1K,CACE,oBAAC,QAAD,EAAM,GAAE,+DAAgE,CAAA,EACxE,oBAAC,QAAD,EAAM,GAAE,gEAAiE,CAAA,CACrE;;;AAIV,SAAgB,YAAY;AAC1B,QACE,qBAAC,OAAD;EAAK,OAAM;EAA6B,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAO,QAAO;EAAe,aAAY;EAAI,eAAc;EAAQ,gBAAe;YAA1K;GACE,oBAAC,QAAD;IAAM,OAAM;IAAK,QAAO;IAAK,GAAE;IAAI,GAAE;IAAI,IAAG;IAAM,CAAA;GAClD,oBAAC,QAAD,EAAM,GAAE,WAAY,CAAA;GACpB,oBAAC,QAAD,EAAM,GAAE,YAAa,CAAA;GACjB;;;;;ACXV,SAAgB,UAAU,EACxB,SACA,YAIC;AACD,QACE,qBAAC,OAAD;EAAK,WAAW,UAAU,iDAAiD;YAA3E,CACE,oBAAC,WAAD,EAAa,CAAA,EACZ,SACG;;;AAIV,SAAgB,SAAS,EACvB,MACA,OACA,aACA,SACA,QACA,YAQC;AACD,QACE,qBAAC,UAAD;EACE,MAAK;EACL,WAAW,SAAS,+BAA+B;EACzC;EACD;YAJX;GAMG,OACC,oBAAC,QAAD;IAAM,WAAU;IAAwB,eAAA;cACrC;IACI,CAAA,GACL;GACH;GACA,cAAc,oBAAC,SAAD,EAAA,UAAQ,aAAoB,CAAA,GAAG;GACvC;;;;;;;;;AC1Cb,SAAgB,SAAS,EACvB,QACA,OACA,aACA,YAMC;AACD,QACE,qBAAC,UAAD;EAAQ,WAAU;YAAlB,CACE,qBAAC,OAAD,EAAA,UAAA;GACG,SAAS,oBAAC,KAAD;IAAG,WAAU;cAAwB;IAAW,CAAA,GAAG;GAC7D,oBAAC,MAAD,EAAA,UAAK,OAAW,CAAA;GACf,cAAc,oBAAC,KAAD,EAAA,UAAI,aAAgB,CAAA,GAAG;GAClC,EAAA,CAAA,EACL,SACM;;;AAIb,SAAgB,SAAS,EAAE,YAAqC;AAC9D,QAAO,oBAAC,SAAD;EAAO,WAAU;EAAsB;EAAiB,CAAA;;AAGjE,SAAgB,SAAS,EAAE,YAAqC;AAC9D,QAAO,oBAAC,OAAD;EAAK,WAAU;EAA2B;EAAe,CAAA;;AAGlE,SAAgB,OAAO,EAAE,YAAqC;AAC5D,QAAO,oBAAC,OAAD;EAAK,WAAU;EAAwB;EAAe,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.mjs","names":["CheckboxPrimitive","SwitchPrimitive","SelectPrimitive"],"sources":["../src/button.tsx","../src/checkbox.tsx","../src/styles.tsx","../src/provider.tsx","../src/label.tsx","../src/kicker.tsx","../src/fold.tsx","../src/stack.tsx","../src/dialog.tsx","../src/confirm-dialog.tsx","../src/input.tsx","../src/switch.tsx","../src/textarea.tsx","../src/glyphs.tsx","../src/type-cards.tsx","../src/select.tsx","../src/workspace.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from \"react\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"outline\" | \"ghost\" | \"danger\";\n\nexport function Button({\n variant = \"primary\",\n className,\n type = \"button\",\n children,\n ...props\n}: ButtonHTMLAttributes<HTMLButtonElement> & { variant?: ButtonVariant }) {\n return (\n <button\n type={type}\n className={[\"bl-nav-kit__btn\", `bl-nav-kit__btn--${variant}`, className].filter(Boolean).join(\" \")}\n {...props}\n >\n {children}\n </button>\n );\n}\n","import type { ComponentPropsWithoutRef } from \"react\";\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\";\n\nexport function Checkbox({\n className,\n ...props\n}: ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>) {\n return (\n <CheckboxPrimitive.Root className={[\"bl-nav-kit__checkbox\", className].filter(Boolean).join(\" \")} {...props}>\n <CheckboxPrimitive.Indicator className=\"bl-nav-kit__checkbox-mark\" aria-hidden>\n <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden>\n <path\n d=\"M20 6 9 17l-5-5\"\n stroke=\"currentColor\"\n strokeWidth=\"2.25\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n );\n}\n","const CSS = `\n.bl-nav-kit__types{display:grid;grid-template-columns:1fr 1fr;gap:12px}\n.bl-nav-kit__types--compact{margin:0 0 10px;gap:6px}\n.bl-nav-kit__type{display:flex;flex-direction:column;align-items:stretch;gap:0;border:1px solid var(--line2,#444854);background:#1b1d22;border-radius:10px;padding:16px;text-align:left;color:inherit;cursor:pointer;font:inherit}\n.bl-nav-kit__type-row{display:flex;align-items:center;gap:12px;min-width:0}\n.bl-nav-kit__types--compact .bl-nav-kit__type{align-items:center;justify-content:center;border-radius:7px;padding:8px 6px;font-size:12px;background:#15171b}\n.bl-nav-kit__types--compact .bl-nav-kit__type-row{gap:8px;justify-content:center}\n.bl-nav-kit__type small{display:block;margin-top:.3rem;color:var(--muted,var(--theme-elevation-500));font-weight:400}\n.bl-nav-kit__type-icon{display:grid;place-items:center;width:2rem;height:2rem;border-radius:7px;background:#292c33;flex:none}\n.bl-nav-kit__glyph{width:28px;height:28px;display:grid;place-items:center;border-radius:7px;background:#292c33;color:#c9ccd4;flex:none}\n.bl-nav-kit__glyph[data-kind=\"megaMenu\"]{background:#32142a;color:#ff91ce}\n.bl-nav-kit__type-icon .bl-nav-kit__glyph{width:100%;height:100%;background:transparent;color:inherit}\n.bl-nav-kit__types--compact .bl-nav-kit__type-icon{width:1.25rem;height:1.25rem;background:transparent}\n.bl-nav-kit__type:hover{border-color:var(--bl-kit-accent,var(--pink,#e60088))}\n.bl-nav-kit__type.is-active,.bl-nav-kit__types--compact .bl-nav-kit__type.is-active{border-color:var(--bl-kit-accent,var(--pink,#e60088));background:#261722}\n.bl-nav-kit__modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(0,0,0,.62);font:14px/1.45 Inter,ui-sans-serif,system-ui,sans-serif;color:#f6f7f9}\n.bl-nav-kit__modal-card{width:min(36rem,calc(100vw - 2rem));background:#15171b;border:1px solid #3a3d46;border-radius:12px;padding:1.25rem 0 0;overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.45)}\n.bl-nav-kit__modal-card h2{margin:0 1.25rem .75rem;font-size:18px}\n.bl-nav-kit__modal-card p{margin:0;color:#989daa}\n.bl-nav-kit__modal-body{min-width:0;padding:0 1.25rem}\n.bl-nav-kit__modal-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.25rem;padding:1rem 1.25rem;border-top:1px solid #3a3d46}\n.bl-nav-kit__danger{color:var(--theme-error-500,#ff7381)}\n.bl-nav-kit__btn{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 14px;border-radius:8px;font:14px/1.45 Inter,ui-sans-serif,system-ui,sans-serif;font-weight:550;cursor:pointer}\n.bl-nav-kit__btn:disabled{opacity:.5;cursor:not-allowed}\n.bl-nav-kit__btn--primary{border:0;background:var(--bl-kit-accent,var(--pink,#e60088));color:#fff}\n.bl-nav-kit__btn--primary:hover{filter:brightness(1.08)}\n.bl-nav-kit__btn--secondary{border:0;background:#292c33;color:#f6f7f9}\n.bl-nav-kit__btn--secondary:hover{background:#343845}\n.bl-nav-kit__btn--outline{border:1px solid #3a3d46;background:transparent;color:#f6f7f9}\n.bl-nav-kit__btn--outline:hover{border-color:var(--bl-kit-accent,var(--pink,#e60088))}\n.bl-nav-kit__btn--ghost{border:1px solid transparent;background:transparent;color:#f6f7f9}\n.bl-nav-kit__btn--ghost:hover{background:#1d1f24}\n.bl-nav-kit__btn--danger{border:1px solid var(--theme-error-500,#ff7381);background:#261722;color:var(--theme-error-500,#ff7381)}\n.bl-nav-kit__btn--danger:hover{background:#32181f}\n.bl-nav-kit__input,.bl-nav-kit__textarea{width:100%;min-height:38px;padding:8px 10px;border:1px solid #3a3d46;border-radius:8px;background:#1d1f24;color:#f6f7f9;font:14px/1.45 Inter,ui-sans-serif,system-ui,sans-serif}\n.bl-nav-kit__textarea{min-height:5.5rem;resize:vertical}\n.bl-nav-kit__input:hover,.bl-nav-kit__textarea:hover,.bl-nav-kit__input:focus,.bl-nav-kit__textarea:focus{border-color:var(--bl-kit-accent,var(--pink,#e60088));outline:none}\n.bl-nav-kit__input:disabled,.bl-nav-kit__textarea:disabled{opacity:.5;cursor:not-allowed}\n.bl-nav-kit__input::placeholder,.bl-nav-kit__textarea::placeholder{color:#989daa}\n.bl-nav-kit__check{display:flex;align-items:center;gap:10px;font:14px/1.45 Inter,ui-sans-serif,system-ui,sans-serif;color:#f6f7f9;cursor:pointer}\n.bl-nav-kit__checkbox{position:relative;width:18px;height:18px;flex:none;border:1px solid #3a3d46;border-radius:3px;background:#1d1f24;color:#fff;cursor:pointer;padding:0}\n.bl-nav-kit__checkbox:hover,.bl-nav-kit__checkbox[data-state=\"checked\"]{border-color:var(--bl-kit-accent,var(--pink,#e60088))}\n.bl-nav-kit__checkbox[data-state=\"checked\"]{background:var(--bl-kit-accent,var(--pink,#e60088))}\n.bl-nav-kit__checkbox[data-disabled]{opacity:.5;cursor:not-allowed}\n.bl-nav-kit__checkbox-mark{position:absolute;inset:0;display:grid;place-items:center}\n.bl-nav-kit__checkbox-mark svg{width:12px;height:12px;display:block}\n.bl-nav-kit__switch{width:40px;height:22px;flex:none;padding:0;border:0;border-radius:999px;background:#3a3d46;position:relative;cursor:pointer}\n.bl-nav-kit__switch[data-state=\"checked\"]{background:var(--bl-kit-accent,var(--pink,#e60088))}\n.bl-nav-kit__switch[data-disabled]{opacity:.5;cursor:not-allowed}\n.bl-nav-kit__switch-thumb{display:block;width:18px;height:18px;border-radius:999px;background:#f6f7f9;transform:translateX(2px);transition:transform .12s ease}\n.bl-nav-kit__switch[data-state=\"checked\"] .bl-nav-kit__switch-thumb{transform:translateX(20px)}\n.bl-nav-kit__select-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:38px;padding:8px 10px;border:1px solid #3a3d46;border-radius:8px;background:#1d1f24;color:#f6f7f9;font:14px/1.45 Inter,ui-sans-serif,system-ui,sans-serif;text-align:left;cursor:pointer}\n.bl-nav-kit__select-trigger:hover,.bl-nav-kit__select-trigger[data-state=\"open\"]{border-color:var(--bl-kit-accent,var(--pink,#e60088))}\n.bl-nav-kit__select-trigger[data-disabled]{opacity:.5;cursor:not-allowed}\n.bl-nav-kit__select-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.bl-nav-kit__select-chevron{flex:none;color:#989daa;display:grid;place-items:center}\n.bl-nav-kit__select-content{z-index:40;min-width:var(--radix-select-trigger-width);background:#15171b;border:1px solid #3a3d46;border-radius:10px;padding:4px;box-shadow:0 12px 32px rgba(0,0,0,.45);color:#f6f7f9;font:14px/1.45 Inter,ui-sans-serif,system-ui,sans-serif}\n.bl-nav-kit__select-viewport{display:grid;gap:2px}\n.bl-nav-kit__select-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:7px;cursor:pointer;outline:none;font:inherit}\n.bl-nav-kit__select-item[data-highlighted],.bl-nav-kit__select-item[data-state=\"checked\"]{background:#261722}\n.bl-nav-kit__select-item[data-disabled]{opacity:.45;pointer-events:none}\n.bl-nav-kit__select-check{flex:none;color:var(--bl-kit-accent,var(--pink,#e60088));display:grid;place-items:center}\n.bl-nav-kit__field{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:0 0 16px}\n.bl-nav-kit__label{display:block;font:12px/1.2 Inter,ui-sans-serif,system-ui,sans-serif;font-weight:700;color:inherit}\n.bl-nav-kit__kicker{margin:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#989daa);font-weight:800}\n.bl-nav-kit__fold{border:1px solid var(--line,#30333b);overflow:visible;margin:0;min-width:0;color:inherit}\n.bl-nav-kit__fold--light{background:var(--panel,#141518);border-color:var(--line2,#444854);border-radius:12px}\n.bl-nav-kit__fold--dark{background:#111216;border-radius:10px}\n.bl-nav-kit__fold-head{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line,#30333b)}\n.bl-nav-kit__fold--light .bl-nav-kit__fold-head{background:#1b1d22}\n.bl-nav-kit__fold[data-open=\"false\"] .bl-nav-kit__fold-head{border-bottom:0}\n.bl-nav-kit__fold-toggle{flex:1;display:flex;align-items:center;gap:8px;min-width:0;border:0;background:transparent;padding:0;text-align:left;color:inherit;cursor:pointer;font:inherit}\n.bl-nav-kit__fold-chevron{flex:none;transition:transform .12s ease}\n.bl-nav-kit__fold[data-open=\"false\"] .bl-nav-kit__fold-chevron{transform:rotate(-90deg)}\n.bl-nav-kit__fold-title{font-size:13px;font-weight:700}\n.bl-nav-kit__fold-badge{font-size:11px;color:#c2c5cc;background:#292c33;border-radius:999px;padding:3px 8px}\n.bl-nav-kit__fold-toggle > small{color:var(--muted,#989daa)}\n.bl-nav-kit__fold-body{padding:16px}\n.bl-nav-kit__fold-body[hidden]{display:none}\n.bl-nav-kit__stack{display:flex;flex-direction:column;gap:12px}\n.bl-nav-kit__fold-menu{position:relative}\n.bl-nav-kit__fold-menu > button{border:0;background:transparent;color:inherit;cursor:pointer}\n.bl-nav-kit__fold-menu-pop{position:absolute;right:0;top:34px;z-index:12;min-width:140px;padding:4px;border:1px solid #3a3d46;border-radius:8px;background:#1b1d22}\n.bl-nav-kit__fold-menu-pop button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:7px 8px;border-radius:6px;color:#d8dbe1;cursor:pointer}\n.bl-nav-kit__fold-menu-pop button:disabled{opacity:.45;cursor:not-allowed}\n`;\n\nexport function KitStyles() {\n return (\n <style href=\"bl-admin-ui\" precedence=\"default\">\n {CSS}\n </style>\n );\n}\n","import type { ReactNode } from \"react\";\n\nimport { KitStyles } from \"./styles\";\n\n/** Mount once around kit chrome. Primitives read these styles; they do not inject them. */\nexport function KitProvider({ children }: { children: ReactNode }) {\n return (\n <>\n <KitStyles />\n {children}\n </>\n );\n}\n","import type { HTMLAttributes } from \"react\";\n\ntype FieldTag = \"label\" | \"div\";\n\n/** Stack a label above its control. The label class owns type; this owns the 8px gap. */\nexport function Field({\n as: Tag = \"label\",\n className,\n ...props\n}: HTMLAttributes<HTMLElement> & { as?: FieldTag }) {\n return <Tag className={[\"bl-nav-kit__field\", className].filter(Boolean).join(\" \")} {...props} />;\n}\n\n/** Visible field name. Sit this in `Field` above the control — do not restyle per screen. */\nexport function Label({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {\n return <span className={[\"bl-nav-kit__label\", className].filter(Boolean).join(\" \")} {...props} />;\n}\n","import type { HTMLAttributes } from \"react\";\n\n/** Uppercase eyebrow. MainHead, the preview note, and later chrome all use this. */\nexport function Kicker({ className, ...props }: HTMLAttributes<HTMLParagraphElement>) {\n return <p className={[\"bl-nav-kit__kicker\", className].filter(Boolean).join(\" \")} {...props} />;\n}\n","import { useState, type ReactNode } from \"react\";\n\nexport type FoldAction = {\n label: string;\n onClick: () => void;\n disabled?: boolean;\n danger?: boolean;\n};\n\nexport type FoldTone = \"light\" | \"dark\";\n\nexport function Fold({\n title,\n tone = \"light\",\n badge,\n meta,\n actions,\n defaultOpen = true,\n open: openProp,\n onOpenChange,\n className,\n children,\n}: {\n title: string;\n tone?: FoldTone;\n badge?: ReactNode;\n meta?: ReactNode | ((open: boolean) => ReactNode);\n actions?: FoldAction[];\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n className?: string;\n children?: ReactNode;\n}) {\n const controlled = openProp !== undefined;\n const [uncontrolled, setUncontrolled] = useState(defaultOpen);\n const [menu, setMenu] = useState(false);\n const open = controlled ? openProp : uncontrolled;\n\n function setOpen(next: boolean) {\n if (!controlled) setUncontrolled(next);\n onOpenChange?.(next);\n }\n\n const metaNode = typeof meta === \"function\" ? meta(open) : meta;\n const badgeNode =\n badge == null\n ? null\n : typeof badge === \"string\" || typeof badge === \"number\" ? (\n <span className=\"bl-nav-kit__fold-badge\">{badge}</span>\n ) : (\n badge\n );\n\n return (\n <section\n role=\"group\"\n aria-label={title}\n data-open={open ? \"true\" : \"false\"}\n className={[\"bl-nav-kit__fold\", `bl-nav-kit__fold--${tone}`, className].filter(Boolean).join(\" \")}\n >\n <div className=\"bl-nav-kit__fold-head\">\n <button\n type=\"button\"\n className=\"bl-nav-kit__fold-toggle\"\n aria-expanded={open}\n aria-label={open ? `Collapse ${title}` : `Expand ${title}`}\n onClick={() => setOpen(!open)}\n >\n <svg\n className=\"bl-nav-kit__fold-chevron\"\n viewBox=\"0 0 24 24\"\n width=\"14\"\n height=\"14\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n aria-hidden\n >\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n <strong className=\"bl-nav-kit__fold-title\">{title}</strong>\n {badgeNode}\n {metaNode}\n </button>\n {actions?.length ? (\n <div className=\"bl-nav-kit__fold-menu\">\n <button type=\"button\" aria-label={`${title} actions`} onClick={() => setMenu((next) => !next)}>\n ⋯\n </button>\n {menu ? (\n <div className=\"bl-nav-kit__fold-menu-pop\">\n {actions.map((action) => (\n <button\n key={action.label}\n type=\"button\"\n disabled={action.disabled}\n className={action.danger ? \"bl-nav-kit__danger\" : undefined}\n onClick={() => {\n action.onClick();\n setMenu(false);\n }}\n >\n {action.label}\n </button>\n ))}\n </div>\n ) : null}\n </div>\n ) : null}\n </div>\n <div className=\"bl-nav-kit__fold-body\" hidden={!open}>\n {children}\n </div>\n </section>\n );\n}\n","import type { HTMLAttributes } from \"react\";\n\n/** Vertical list with a locked gap — sections in a column, links in a section, and their add buttons. */\nexport function Stack({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n return <div className={[\"bl-nav-kit__stack\", className].filter(Boolean).join(\" \")} {...props} />;\n}\n","import { useId, type ReactNode } from \"react\";\n\nimport { Button, type ButtonVariant } from \"./button\";\n\nexport type DialogConfirmVariant = Extract<ButtonVariant, \"primary\" | \"danger\">;\n\nexport function Dialog({\n open,\n title,\n children,\n cancelLabel = \"Cancel\",\n onCancel,\n confirmLabel,\n onConfirm,\n confirmVariant = \"primary\",\n}: {\n open: boolean;\n title: string;\n children: ReactNode;\n cancelLabel?: string;\n onCancel: () => void;\n confirmLabel?: string;\n onConfirm?: () => void;\n confirmVariant?: DialogConfirmVariant;\n}) {\n const titleId = useId();\n if (!open) return null;\n return (\n <div className=\"bl-nav-kit__modal\" role=\"dialog\" aria-modal=\"true\" aria-labelledby={titleId}>\n <div className=\"bl-nav-kit__modal-card\">\n <h2 id={titleId}>{title}</h2>\n <div className=\"bl-nav-kit__modal-body\">{children}</div>\n <div className=\"bl-nav-kit__modal-actions\">\n <Button variant=\"outline\" onClick={onCancel}>\n {cancelLabel}\n </Button>\n {confirmLabel && onConfirm ? (\n <Button variant={confirmVariant} onClick={onConfirm}>\n {confirmLabel}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n );\n}\n","import type { ReactNode } from \"react\";\n\nimport { Dialog, type DialogConfirmVariant } from \"./dialog\";\n\nexport function ConfirmDialog({\n open,\n title,\n children,\n cancelLabel,\n confirmLabel,\n onCancel,\n onConfirm,\n confirmVariant = \"primary\",\n}: {\n open: boolean;\n title: string;\n children: ReactNode;\n cancelLabel: string;\n confirmLabel: string;\n onCancel: () => void;\n onConfirm: () => void;\n confirmVariant?: DialogConfirmVariant;\n}) {\n return (\n <Dialog\n open={open}\n title={title}\n cancelLabel={cancelLabel}\n confirmLabel={confirmLabel}\n confirmVariant={confirmVariant}\n onCancel={onCancel}\n onConfirm={onConfirm}\n >\n <p>{children}</p>\n </Dialog>\n );\n}\n","import type { InputHTMLAttributes } from \"react\";\n\nexport function Input({ className, ...props }: InputHTMLAttributes<HTMLInputElement>) {\n return <input className={[\"bl-nav-kit__input\", className].filter(Boolean).join(\" \")} {...props} />;\n}\n","import type { ComponentPropsWithoutRef } from \"react\";\nimport { Switch as SwitchPrimitive } from \"radix-ui\";\n\nexport function Switch({ className, ...props }: ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>) {\n return (\n <SwitchPrimitive.Root className={[\"bl-nav-kit__switch\", className].filter(Boolean).join(\" \")} {...props}>\n <SwitchPrimitive.Thumb className=\"bl-nav-kit__switch-thumb\" />\n </SwitchPrimitive.Root>\n );\n}\n","import type { TextareaHTMLAttributes } from \"react\";\n\nexport function Textarea({ className, ...props }: TextareaHTMLAttributes<HTMLTextAreaElement>) {\n return <textarea className={[\"bl-nav-kit__textarea\", className].filter(Boolean).join(\" \")} {...props} />;\n}\n","export type ItemKind = \"navLink\" | \"megaMenu\";\n\n/** Rail / type-card mark. The kit owns the badge; pass `kind` only. */\nexport function KindGlyph({ kind }: { kind: ItemKind }) {\n return (\n <span className=\"bl-nav-kit__glyph\" data-kind={kind} aria-hidden>\n {kind === \"megaMenu\" ? <MegaMark /> : <LinkMark />}\n </span>\n );\n}\n\nexport function LinkGlyph() {\n return <KindGlyph kind=\"navLink\" />;\n}\n\nexport function MegaGlyph() {\n return <KindGlyph kind=\"megaMenu\" />;\n}\n\nfunction LinkMark() {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\" />\n <path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\" />\n </svg>\n );\n}\n\nfunction MegaMark() {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" />\n <path d=\"M9 3v18\" />\n <path d=\"M15 3v18\" />\n </svg>\n );\n}\n","import type { ReactNode } from \"react\";\n\nexport function TypeCards({\n compact,\n children,\n}: {\n compact?: boolean;\n children: ReactNode;\n}) {\n return (\n <div className={compact ? \"bl-nav-kit__types bl-nav-kit__types--compact\" : \"bl-nav-kit__types\"}>\n {children}\n </div>\n );\n}\n\nexport function TypeCard({\n icon,\n label,\n description,\n onClick,\n active,\n disabled,\n}: {\n icon?: ReactNode;\n label: string;\n description?: string;\n onClick: () => void;\n active?: boolean;\n disabled?: boolean;\n}) {\n return (\n <button\n type=\"button\"\n className={active ? \"bl-nav-kit__type is-active\" : \"bl-nav-kit__type\"}\n disabled={disabled}\n onClick={onClick}\n >\n <span className=\"bl-nav-kit__type-row\">\n {icon ? (\n <span className=\"bl-nav-kit__type-icon\" aria-hidden>\n {icon}\n </span>\n ) : null}\n {label}\n </span>\n {description ? <small>{description}</small> : null}\n </button>\n );\n}\n","import type { ComponentPropsWithoutRef } from \"react\";\nimport { Select as SelectPrimitive } from \"radix-ui\";\n\nexport const Select = SelectPrimitive.Root;\nexport const SelectValue = SelectPrimitive.Value;\n\nexport function SelectTrigger({\n children,\n ...props\n}: ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>) {\n return (\n <SelectPrimitive.Trigger className=\"bl-nav-kit__select-trigger\" {...props}>\n <span className=\"bl-nav-kit__select-value\">{children}</span>\n <span className=\"bl-nav-kit__select-chevron\" aria-hidden>\n <ChevronGlyph />\n </span>\n </SelectPrimitive.Trigger>\n );\n}\n\nexport function SelectContent({\n children,\n ...props\n}: ComponentPropsWithoutRef<typeof SelectPrimitive.Content>) {\n return (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n className=\"bl-nav-kit__select-content\"\n position=\"popper\"\n sideOffset={6}\n {...props}\n >\n <SelectPrimitive.Viewport className=\"bl-nav-kit__select-viewport\">{children}</SelectPrimitive.Viewport>\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n );\n}\n\nexport function SelectItem({\n children,\n ...props\n}: ComponentPropsWithoutRef<typeof SelectPrimitive.Item>) {\n return (\n <SelectPrimitive.Item className=\"bl-nav-kit__select-item\" {...props}>\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n <SelectPrimitive.ItemIndicator className=\"bl-nav-kit__select-check\" aria-hidden>\n <CheckGlyph />\n </SelectPrimitive.ItemIndicator>\n </SelectPrimitive.Item>\n );\n}\n\nfunction ChevronGlyph() {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n );\n}\n\nfunction CheckGlyph() {\n return (\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <path d=\"M20 6 9 17l-5-5\" />\n </svg>\n );\n}\n","import type { ReactNode } from \"react\";\n\nimport { Kicker } from \"./kicker\";\n\n/**\n * Presentational workspace chrome. Surfaces come from the adapter CSS\n * (Payload theme tokens). Field adapters own form writes.\n */\nexport function MainHead({\n kicker,\n title,\n description,\n children,\n}: {\n kicker?: ReactNode;\n title: ReactNode;\n description?: ReactNode;\n children?: ReactNode;\n}) {\n return (\n <header className=\"bl-workspace__main-head\">\n <div>\n {kicker ? <Kicker>{kicker}</Kicker> : null}\n <h1>{title}</h1>\n {description ? <p>{description}</p> : null}\n </div>\n {children}\n </header>\n );\n}\n\n/** Aside chrome only. The adapter supplies children — nothing here is a link list. */\nexport function ItemRail({ children }: { children: ReactNode }) {\n return <aside className=\"bl-workspace__rail\">{children}</aside>;\n}\n\nexport function RailSlot({ children }: { children: ReactNode }) {\n return <div className=\"bl-workspace__rail-slot\">{children}</div>;\n}\n\nexport function Canvas({ children }: { children: ReactNode }) {\n return <div className=\"bl-workspace__canvas\">{children}</div>;\n}\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bison-lab/admin-ui",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.23.0",
|
|
4
4
|
"description": "Payload-free admin kit primitives for Bison Lab CMS fields",
|
|
5
5
|
"homepage": "https://components.bisonlab.ai",
|
|
6
6
|
"repository": {
|
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@testing-library/react": "^16.3.2",
|
|
32
|
+
"@testing-library/user-event": "^14.6.1",
|
|
32
33
|
"@types/react": "^19.2.14",
|
|
33
34
|
"@types/react-dom": "^19.2.3",
|
|
34
35
|
"jsdom": "^29.0.1",
|
|
@@ -41,6 +42,9 @@
|
|
|
41
42
|
"publishConfig": {
|
|
42
43
|
"access": "public"
|
|
43
44
|
},
|
|
45
|
+
"dependencies": {
|
|
46
|
+
"radix-ui": "^1.4.3"
|
|
47
|
+
},
|
|
44
48
|
"scripts": {
|
|
45
49
|
"build": "tsdown",
|
|
46
50
|
"dev": "tsdown --watch",
|