@burdenoff/fe-libs 2026.527.7 → 2026.528.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/button/Button.d.ts +2 -2
- package/dist/chrome/AppShellLayout.d.ts +6 -0
- package/dist/chrome/AppShellLayout.d.ts.map +1 -1
- package/dist/chrome/AppShellLayout.js +9 -3
- package/dist/chrome/PageHeader.d.ts +17 -0
- package/dist/chrome/PageHeader.d.ts.map +1 -0
- package/dist/chrome/PageHeader.js +67 -0
- package/dist/chrome/index.d.ts +2 -0
- package/dist/chrome/index.d.ts.map +1 -1
- package/dist/chrome.js +33 -32
- package/dist/form/FormLabel.d.ts +4 -2
- package/dist/form/FormLabel.d.ts.map +1 -1
- package/dist/form/FormLabel.js +17 -10
- package/dist/form/FormSection.d.ts +18 -0
- package/dist/form/FormSection.d.ts.map +1 -0
- package/dist/form/FormSection.js +78 -0
- package/dist/form/index.d.ts +2 -0
- package/dist/form/index.d.ts.map +1 -1
- package/dist/form.js +11 -10
- package/dist/shared/native/SafeAreaView.d.ts +15 -0
- package/dist/shared/native/SafeAreaView.d.ts.map +1 -0
- package/dist/shared/native/SafeAreaView.js +22 -0
- package/dist/shared/native/index.d.ts +1 -0
- package/dist/shared/native/index.d.ts.map +1 -1
- package/dist/shared-hooks.js +10 -10
- package/dist/shared-native.js +9 -8
- package/dist/shared.js +67 -66
- package/dist/storage/SaveToFilesDialog.js +7 -7
- package/dist/ui/badge.d.ts +1 -1
- package/dist/ui/bottom-sheet.d.ts +16 -0
- package/dist/ui/bottom-sheet.d.ts.map +1 -0
- package/dist/ui/bottom-sheet.js +89 -0
- package/dist/ui/button.d.ts +2 -2
- package/dist/ui/empty-state.d.ts +13 -0
- package/dist/ui/empty-state.d.ts.map +1 -0
- package/dist/ui/empty-state.js +34 -0
- package/dist/ui/index.d.ts +7 -0
- package/dist/ui/index.d.ts.map +1 -1
- package/dist/ui/optional-fields.d.ts +16 -0
- package/dist/ui/optional-fields.d.ts.map +1 -0
- package/dist/ui/optional-fields.js +55 -0
- package/dist/ui/responsive-dialog.d.ts +18 -0
- package/dist/ui/responsive-dialog.d.ts.map +1 -0
- package/dist/ui/responsive-dialog.js +38 -0
- package/dist/ui/responsive-stack.d.ts +15 -0
- package/dist/ui/responsive-stack.d.ts.map +1 -0
- package/dist/ui/responsive-stack.js +65 -0
- package/dist/ui/responsive-table.d.ts +24 -0
- package/dist/ui/responsive-table.d.ts.map +1 -0
- package/dist/ui/responsive-table.js +84 -0
- package/dist/ui/sheet.js +2 -2
- package/dist/ui/stepper.d.ts +16 -0
- package/dist/ui/stepper.d.ts.map +1 -0
- package/dist/ui/stepper.js +79 -0
- package/dist/ui.js +31 -24
- package/package.json +1 -1
- package/shared/config/eslint.config.mjs +39 -0
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
type FlexDirection = 'row' | 'col' | 'row-reverse' | 'col-reverse';
|
|
3
|
+
type ResponsiveDirection = FlexDirection | Partial<Record<'base' | 'sm' | 'md' | 'lg' | 'xl' | '2xl', FlexDirection>>;
|
|
4
|
+
export interface ResponsiveStackProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
5
|
+
direction?: ResponsiveDirection;
|
|
6
|
+
gap?: string;
|
|
7
|
+
align?: string;
|
|
8
|
+
justify?: string;
|
|
9
|
+
wrap?: boolean;
|
|
10
|
+
inline?: boolean;
|
|
11
|
+
}
|
|
12
|
+
/** Flex container that switches direction by breakpoint. Mobile-first. */
|
|
13
|
+
export declare function ResponsiveStack({ direction, gap, align, justify, wrap, inline, className, children, ...props }: ResponsiveStackProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export {};
|
|
15
|
+
//# sourceMappingURL=responsive-stack.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"responsive-stack.d.ts","sourceRoot":"","sources":["../../src/ui/responsive-stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,aAAa,GAAG,KAAK,GAAG,KAAK,GAAG,aAAa,GAAG,aAAa,CAAC;AAEnE,KAAK,mBAAmB,GACpB,aAAa,GACb,OAAO,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;AAE/E,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAChF,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA0DD,0EAA0E;AAC1E,wBAAgB,eAAe,CAAC,EAC9B,SAAiB,EACjB,GAAa,EACb,KAAK,EACL,OAAO,EACP,IAAI,EACJ,MAAM,EACN,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,2CAkBtB"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { cn as e } from "../lib/utils.js";
|
|
2
|
+
import "react";
|
|
3
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
4
|
+
//#region src/ui/responsive-stack.tsx
|
|
5
|
+
var n = {
|
|
6
|
+
row: "flex-row",
|
|
7
|
+
col: "flex-col",
|
|
8
|
+
"row-reverse": "flex-row-reverse",
|
|
9
|
+
"col-reverse": "flex-col-reverse"
|
|
10
|
+
}, r = {
|
|
11
|
+
sm: {
|
|
12
|
+
row: "sm:flex-row",
|
|
13
|
+
col: "sm:flex-col",
|
|
14
|
+
"row-reverse": "sm:flex-row-reverse",
|
|
15
|
+
"col-reverse": "sm:flex-col-reverse"
|
|
16
|
+
},
|
|
17
|
+
md: {
|
|
18
|
+
row: "md:flex-row",
|
|
19
|
+
col: "md:flex-col",
|
|
20
|
+
"row-reverse": "md:flex-row-reverse",
|
|
21
|
+
"col-reverse": "md:flex-col-reverse"
|
|
22
|
+
},
|
|
23
|
+
lg: {
|
|
24
|
+
row: "lg:flex-row",
|
|
25
|
+
col: "lg:flex-col",
|
|
26
|
+
"row-reverse": "lg:flex-row-reverse",
|
|
27
|
+
"col-reverse": "lg:flex-col-reverse"
|
|
28
|
+
},
|
|
29
|
+
xl: {
|
|
30
|
+
row: "xl:flex-row",
|
|
31
|
+
col: "xl:flex-col",
|
|
32
|
+
"row-reverse": "xl:flex-row-reverse",
|
|
33
|
+
"col-reverse": "xl:flex-col-reverse"
|
|
34
|
+
},
|
|
35
|
+
"2xl": {
|
|
36
|
+
row: "2xl:flex-row",
|
|
37
|
+
col: "2xl:flex-col",
|
|
38
|
+
"row-reverse": "2xl:flex-row-reverse",
|
|
39
|
+
"col-reverse": "2xl:flex-col-reverse"
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
function i(e) {
|
|
43
|
+
if (typeof e == "string") return n[e];
|
|
44
|
+
let t = [];
|
|
45
|
+
return e.base && t.push(n[e.base]), [
|
|
46
|
+
"sm",
|
|
47
|
+
"md",
|
|
48
|
+
"lg",
|
|
49
|
+
"xl",
|
|
50
|
+
"2xl"
|
|
51
|
+
].forEach((n) => {
|
|
52
|
+
let i = e[n];
|
|
53
|
+
i && t.push(r[n][i]);
|
|
54
|
+
}), t.join(" ");
|
|
55
|
+
}
|
|
56
|
+
function a({ direction: n = "col", gap: r = "gap-4", align: a, justify: o, wrap: s, inline: c, className: l, children: u, ...d }) {
|
|
57
|
+
return /* @__PURE__ */ t("div", {
|
|
58
|
+
"data-slot": "responsive-stack",
|
|
59
|
+
className: e(c ? "inline-flex" : "flex", i(n), r, a, o, s && "flex-wrap", l),
|
|
60
|
+
...d,
|
|
61
|
+
children: u
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
//#endregion
|
|
65
|
+
export { a as ResponsiveStack };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export type ResponsiveTableColumnPriority = 'primary' | 'secondary' | 'hidden-on-mobile';
|
|
3
|
+
export interface ResponsiveTableColumn<T> {
|
|
4
|
+
key: string;
|
|
5
|
+
header: React.ReactNode;
|
|
6
|
+
cell: (row: T, rowIndex: number) => React.ReactNode;
|
|
7
|
+
priority?: ResponsiveTableColumnPriority;
|
|
8
|
+
headerClassName?: string;
|
|
9
|
+
cellClassName?: string;
|
|
10
|
+
mobileLabel?: React.ReactNode;
|
|
11
|
+
}
|
|
12
|
+
export interface ResponsiveTableProps<T> {
|
|
13
|
+
columns: ResponsiveTableColumn<T>[];
|
|
14
|
+
data: T[];
|
|
15
|
+
rowKey: (row: T, index: number) => string;
|
|
16
|
+
className?: string;
|
|
17
|
+
onRowClick?: (row: T, index: number) => void;
|
|
18
|
+
rowActions?: (row: T, index: number) => React.ReactNode;
|
|
19
|
+
emptyState?: React.ReactNode;
|
|
20
|
+
caption?: React.ReactNode;
|
|
21
|
+
}
|
|
22
|
+
/** Table that reflows to a stack of cards below the `md` breakpoint. */
|
|
23
|
+
export declare function ResponsiveTable<T>({ columns, data, rowKey, className, onRowClick, rowActions, emptyState, caption, }: ResponsiveTableProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
//# sourceMappingURL=responsive-table.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"responsive-table.d.ts","sourceRoot":"","sources":["../../src/ui/responsive-table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,MAAM,6BAA6B,GAAG,SAAS,GAAG,WAAW,GAAG,kBAAkB,CAAC;AAEzF,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,IAAI,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACpD,QAAQ,CAAC,EAAE,6BAA6B,CAAC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACrC,OAAO,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACxD,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wEAAwE;AACxE,wBAAgB,eAAe,CAAC,CAAC,EAAE,EACjC,OAAO,EACP,IAAI,EACJ,MAAM,EACN,SAAS,EACT,UAAU,EACV,UAAU,EACV,UAAU,EACV,OAAO,GACR,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAqHzB"}
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import { cn as e } from "../lib/utils.js";
|
|
2
|
+
import { useMediaQuery as t } from "../shared/hooks/useMediaQuery.js";
|
|
3
|
+
import { Table as n, TableBody as r, TableCell as i, TableHead as a, TableHeader as o, TableRow as s } from "./table.js";
|
|
4
|
+
import "react";
|
|
5
|
+
import { jsx as c, jsxs as l } from "react/jsx-runtime";
|
|
6
|
+
//#region src/ui/responsive-table.tsx
|
|
7
|
+
function u({ columns: u, data: d, rowKey: f, className: p, onRowClick: m, rowActions: h, emptyState: g, caption: _ }) {
|
|
8
|
+
let v = t("(max-width: 767px)");
|
|
9
|
+
return d.length === 0 && g ? /* @__PURE__ */ c("div", {
|
|
10
|
+
className: p,
|
|
11
|
+
children: g
|
|
12
|
+
}) : v ? /* @__PURE__ */ c("div", {
|
|
13
|
+
"data-slot": "responsive-table-cards",
|
|
14
|
+
className: e("flex flex-col gap-3", p),
|
|
15
|
+
role: "list",
|
|
16
|
+
children: d.map((t, n) => {
|
|
17
|
+
let r = u.find((e) => e.priority === "primary"), i = u.filter((e) => e.priority !== "primary" && e.priority !== "hidden-on-mobile");
|
|
18
|
+
return /* @__PURE__ */ l("div", {
|
|
19
|
+
role: "listitem",
|
|
20
|
+
className: e("rounded-lg border border-border-default bg-bg-surface p-4 transition-colors", m && "cursor-pointer active:bg-bg-sunken focus-visible:bg-bg-sunken min-h-11"),
|
|
21
|
+
tabIndex: m ? 0 : void 0,
|
|
22
|
+
onClick: m ? () => m(t, n) : void 0,
|
|
23
|
+
onKeyDown: m ? (e) => {
|
|
24
|
+
(e.key === "Enter" || e.key === " ") && (e.preventDefault(), m(t, n));
|
|
25
|
+
} : void 0,
|
|
26
|
+
children: [
|
|
27
|
+
r ? /* @__PURE__ */ c("div", {
|
|
28
|
+
className: "text-base font-semibold text-text-primary",
|
|
29
|
+
children: r.cell(t, n)
|
|
30
|
+
}) : null,
|
|
31
|
+
i.length > 0 ? /* @__PURE__ */ c("dl", {
|
|
32
|
+
className: "mt-2 grid grid-cols-1 gap-2 sm:grid-cols-2",
|
|
33
|
+
children: i.map((e) => /* @__PURE__ */ l("div", {
|
|
34
|
+
className: "flex flex-col gap-0.5",
|
|
35
|
+
children: [/* @__PURE__ */ c("dt", {
|
|
36
|
+
className: "text-xs uppercase tracking-wide text-text-tertiary",
|
|
37
|
+
children: e.mobileLabel ?? e.header
|
|
38
|
+
}), /* @__PURE__ */ c("dd", {
|
|
39
|
+
className: "text-sm text-text-primary",
|
|
40
|
+
children: e.cell(t, n)
|
|
41
|
+
})]
|
|
42
|
+
}, e.key))
|
|
43
|
+
}) : null,
|
|
44
|
+
h ? /* @__PURE__ */ c("div", {
|
|
45
|
+
className: "mt-3 flex flex-wrap items-center gap-2",
|
|
46
|
+
onClick: (e) => e.stopPropagation(),
|
|
47
|
+
children: h(t, n)
|
|
48
|
+
}) : null
|
|
49
|
+
]
|
|
50
|
+
}, f(t, n));
|
|
51
|
+
})
|
|
52
|
+
}) : /* @__PURE__ */ l("div", {
|
|
53
|
+
"data-slot": "responsive-table",
|
|
54
|
+
className: p,
|
|
55
|
+
children: [_ ? /* @__PURE__ */ c("div", {
|
|
56
|
+
className: "mb-2 text-sm text-text-secondary",
|
|
57
|
+
children: _
|
|
58
|
+
}) : null, /* @__PURE__ */ l(n, { children: [/* @__PURE__ */ c(o, { children: /* @__PURE__ */ l(s, { children: [u.map((e) => /* @__PURE__ */ c(a, {
|
|
59
|
+
"data-priority": e.priority ?? "secondary",
|
|
60
|
+
className: e.headerClassName,
|
|
61
|
+
children: e.header
|
|
62
|
+
}, e.key)), h ? /* @__PURE__ */ c(a, {
|
|
63
|
+
className: "text-right",
|
|
64
|
+
children: "\xA0"
|
|
65
|
+
}) : null] }) }), /* @__PURE__ */ c(r, { children: d.map((e, t) => /* @__PURE__ */ l(s, {
|
|
66
|
+
onClick: m ? () => m(e, t) : void 0,
|
|
67
|
+
className: m ? "cursor-pointer" : void 0,
|
|
68
|
+
children: [u.map((n) => /* @__PURE__ */ c(i, {
|
|
69
|
+
"data-priority": n.priority ?? "secondary",
|
|
70
|
+
className: n.cellClassName,
|
|
71
|
+
children: n.cell(e, t)
|
|
72
|
+
}, n.key)), h ? /* @__PURE__ */ c(i, {
|
|
73
|
+
className: "text-right",
|
|
74
|
+
onClick: (e) => e.stopPropagation(),
|
|
75
|
+
children: /* @__PURE__ */ c("div", {
|
|
76
|
+
className: "flex items-center justify-end gap-2",
|
|
77
|
+
children: h(e, t)
|
|
78
|
+
})
|
|
79
|
+
}) : null]
|
|
80
|
+
}, f(e, t))) })] })]
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
//#endregion
|
|
84
|
+
export { u as ResponsiveTable };
|
package/dist/ui/sheet.js
CHANGED
|
@@ -31,14 +31,14 @@ function c({ ...e }) {
|
|
|
31
31
|
function l({ className: t, ...r }) {
|
|
32
32
|
return /* @__PURE__ */ n(i.Overlay, {
|
|
33
33
|
"data-slot": "sheet-overlay",
|
|
34
|
-
className: e("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-
|
|
34
|
+
className: e("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[110] bg-bg-overlay", t),
|
|
35
35
|
...r
|
|
36
36
|
});
|
|
37
37
|
}
|
|
38
38
|
function u({ className: a, children: o, side: s = "right", ...u }) {
|
|
39
39
|
return /* @__PURE__ */ r(c, { children: [/* @__PURE__ */ n(l, {}), /* @__PURE__ */ r(i.Content, {
|
|
40
40
|
"data-slot": "sheet-content",
|
|
41
|
-
className: e("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-
|
|
41
|
+
className: e("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-[120] flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500", s === "right" && "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm", s === "left" && "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm", s === "top" && "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b", s === "bottom" && "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t", a),
|
|
42
42
|
...u,
|
|
43
43
|
children: [o, /* @__PURE__ */ r(i.Close, {
|
|
44
44
|
className: "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none",
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export interface StepperStep {
|
|
3
|
+
key: string;
|
|
4
|
+
label: React.ReactNode;
|
|
5
|
+
description?: React.ReactNode;
|
|
6
|
+
}
|
|
7
|
+
export interface StepperProps {
|
|
8
|
+
steps: StepperStep[];
|
|
9
|
+
active: number;
|
|
10
|
+
onStepClick?: (index: number) => void;
|
|
11
|
+
allowSkipAhead?: boolean;
|
|
12
|
+
className?: string;
|
|
13
|
+
}
|
|
14
|
+
/** Wizard step indicator. Horizontal labelled list on md+, compact dot row on mobile. */
|
|
15
|
+
export declare function Stepper({ steps, active, onStepClick, allowSkipAhead, className, }: StepperProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
//# sourceMappingURL=stepper.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../src/ui/stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,yFAAyF;AACzF,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,MAAM,EACN,WAAW,EACX,cAAsB,EACtB,SAAS,GACV,EAAE,YAAY,2CAyHd"}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { cn as e } from "../lib/utils.js";
|
|
2
|
+
import { useMediaQuery as t } from "../shared/hooks/useMediaQuery.js";
|
|
3
|
+
import "react";
|
|
4
|
+
import { CheckIcon as n } from "lucide-react";
|
|
5
|
+
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
6
|
+
//#region src/ui/stepper.tsx
|
|
7
|
+
function a({ steps: a, active: o, onStepClick: s, allowSkipAhead: c = !1, className: l }) {
|
|
8
|
+
if (t("(max-width: 767px)")) {
|
|
9
|
+
let t = a[o];
|
|
10
|
+
return /* @__PURE__ */ i("div", {
|
|
11
|
+
"data-slot": "stepper-mobile",
|
|
12
|
+
className: e("flex flex-col gap-2 rounded-lg border border-border-default bg-bg-surface px-4 py-3", l),
|
|
13
|
+
role: "navigation",
|
|
14
|
+
"aria-label": "Steps",
|
|
15
|
+
children: [/* @__PURE__ */ i("div", {
|
|
16
|
+
className: "flex items-center justify-between text-xs text-text-secondary",
|
|
17
|
+
children: [/* @__PURE__ */ i("span", { children: [
|
|
18
|
+
"Step ",
|
|
19
|
+
o + 1,
|
|
20
|
+
" of ",
|
|
21
|
+
a.length
|
|
22
|
+
] }), t ? /* @__PURE__ */ r("span", {
|
|
23
|
+
className: "font-medium text-text-primary truncate ml-2",
|
|
24
|
+
children: t.label
|
|
25
|
+
}) : null]
|
|
26
|
+
}), /* @__PURE__ */ r("div", {
|
|
27
|
+
className: "flex items-center gap-1.5",
|
|
28
|
+
role: "list",
|
|
29
|
+
children: a.map((t, n) => {
|
|
30
|
+
let i = n < o ? "done" : n === o ? "active" : "todo";
|
|
31
|
+
return /* @__PURE__ */ r("span", {
|
|
32
|
+
role: "listitem",
|
|
33
|
+
"aria-current": i === "active" ? "step" : void 0,
|
|
34
|
+
className: e("h-1.5 flex-1 rounded-full transition-colors", i === "done" && "bg-action-primary-bg", i === "active" && "bg-action-primary-bg", i === "todo" && "bg-border-default")
|
|
35
|
+
}, t.key);
|
|
36
|
+
})
|
|
37
|
+
})]
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
return /* @__PURE__ */ r("ol", {
|
|
41
|
+
"data-slot": "stepper",
|
|
42
|
+
className: e("flex w-full items-start gap-2", l),
|
|
43
|
+
"aria-label": "Steps",
|
|
44
|
+
children: a.map((t, l) => {
|
|
45
|
+
let u = l < o ? "done" : l === o ? "active" : "todo", d = !!s && (c || l <= o), f = /* @__PURE__ */ r("span", {
|
|
46
|
+
className: e("inline-flex size-7 items-center justify-center rounded-full border text-xs font-semibold transition-colors", u === "done" && "border-action-primary-bg bg-action-primary-bg text-action-primary-text", u === "active" && "border-action-primary-bg text-action-primary-bg", u === "todo" && "border-border-default text-text-tertiary"),
|
|
47
|
+
"aria-hidden": "true",
|
|
48
|
+
children: u === "done" ? /* @__PURE__ */ r(n, { className: "size-4" }) : l + 1
|
|
49
|
+
}), p = /* @__PURE__ */ i("span", {
|
|
50
|
+
className: "min-w-0",
|
|
51
|
+
children: [/* @__PURE__ */ r("span", {
|
|
52
|
+
className: e("block text-sm font-medium", u === "todo" ? "text-text-secondary" : "text-text-primary"),
|
|
53
|
+
children: t.label
|
|
54
|
+
}), t.description ? /* @__PURE__ */ r("span", {
|
|
55
|
+
className: "block text-xs text-text-tertiary",
|
|
56
|
+
children: t.description
|
|
57
|
+
}) : null]
|
|
58
|
+
});
|
|
59
|
+
return /* @__PURE__ */ i("li", {
|
|
60
|
+
className: "flex flex-1 items-center gap-3 min-w-0",
|
|
61
|
+
"aria-current": u === "active" ? "step" : void 0,
|
|
62
|
+
children: [d ? /* @__PURE__ */ i("button", {
|
|
63
|
+
type: "button",
|
|
64
|
+
onClick: () => s(l),
|
|
65
|
+
className: "flex items-center gap-3 min-w-0 rounded-md py-1 pr-1 transition-colors hover:bg-bg-sunken focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-bg/40",
|
|
66
|
+
children: [f, p]
|
|
67
|
+
}) : /* @__PURE__ */ i("div", {
|
|
68
|
+
className: "flex items-center gap-3 min-w-0",
|
|
69
|
+
children: [f, p]
|
|
70
|
+
}), l < a.length - 1 ? /* @__PURE__ */ r("span", {
|
|
71
|
+
className: e("flex-1 h-px", u === "done" ? "bg-action-primary-bg" : "bg-border-default"),
|
|
72
|
+
"aria-hidden": "true"
|
|
73
|
+
}) : null]
|
|
74
|
+
}, t.key);
|
|
75
|
+
})
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
//#endregion
|
|
79
|
+
export { a as Stepper };
|
package/dist/ui.js
CHANGED
|
@@ -1,25 +1,32 @@
|
|
|
1
1
|
import { Accordion as e, AccordionContent as t, AccordionItem as n, AccordionTrigger as r } from "./ui/accordion.js";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
25
|
-
|
|
2
|
+
import { OptionalFields as i } from "./ui/optional-fields.js";
|
|
3
|
+
import { BottomSheet as a, BottomSheetClose as o, BottomSheetContent as s, BottomSheetDescription as c, BottomSheetFooter as l, BottomSheetHeader as u, BottomSheetTitle as d, BottomSheetTrigger as f } from "./ui/bottom-sheet.js";
|
|
4
|
+
import { Dialog as p, DialogClose as m, DialogContent as h, DialogDescription as g, DialogFooter as _, DialogHeader as v, DialogOverlay as y, DialogPortal as b, DialogTitle as x, DialogTrigger as S } from "./ui/dialog.js";
|
|
5
|
+
import { ResponsiveDialog as C, ResponsiveDialogClose as w, ResponsiveDialogContent as T, ResponsiveDialogDescription as E, ResponsiveDialogFooter as D, ResponsiveDialogHeader as O, ResponsiveDialogTitle as k, ResponsiveDialogTrigger as A } from "./ui/responsive-dialog.js";
|
|
6
|
+
import { Table as j, TableBody as M, TableCaption as N, TableCell as P, TableFooter as F, TableHead as I, TableHeader as L, TableRow as R } from "./ui/table.js";
|
|
7
|
+
import { ResponsiveTable as z } from "./ui/responsive-table.js";
|
|
8
|
+
import { Stepper as B } from "./ui/stepper.js";
|
|
9
|
+
import { ResponsiveStack as V } from "./ui/responsive-stack.js";
|
|
10
|
+
import { EmptyState as H } from "./ui/empty-state.js";
|
|
11
|
+
import { Button as U, buttonVariants as W } from "./ui/button.js";
|
|
12
|
+
import { AlertDialog as G, AlertDialogAction as K, AlertDialogCancel as q, AlertDialogContent as J, AlertDialogDescription as Y, AlertDialogFooter as X, AlertDialogHeader as Z, AlertDialogOverlay as Q, AlertDialogPortal as $, AlertDialogTitle as ee, AlertDialogTrigger as te } from "./ui/alert-dialog.js";
|
|
13
|
+
import { Badge as ne, badgeVariants as re } from "./ui/badge.js";
|
|
14
|
+
import { Card as ie, CardContent as ae, CardDescription as oe, CardFooter as se, CardHeader as ce, CardTitle as le } from "./ui/card.js";
|
|
15
|
+
import { Checkbox as ue } from "./ui/checkbox.js";
|
|
16
|
+
import { Command as de, CommandDialog as fe, CommandEmpty as pe, CommandGroup as me, CommandInput as he, CommandItem as ge, CommandList as _e, CommandSeparator as ve, CommandShortcut as ye } from "./ui/command.js";
|
|
17
|
+
import { DropdownMenu as be, DropdownMenuCheckboxItem as xe, DropdownMenuContent as Se, DropdownMenuGroup as Ce, DropdownMenuItem as we, DropdownMenuLabel as Te, DropdownMenuPortal as Ee, DropdownMenuRadioGroup as De, DropdownMenuRadioItem as Oe, DropdownMenuSeparator as ke, DropdownMenuShortcut as Ae, DropdownMenuSub as je, DropdownMenuSubContent as Me, DropdownMenuSubTrigger as Ne, DropdownMenuTrigger as Pe } from "./ui/dropdown-menu.js";
|
|
18
|
+
import { Input as Fe } from "./ui/input.js";
|
|
19
|
+
import { Label as Ie } from "./ui/label.js";
|
|
20
|
+
import { Popover as Le, PopoverAnchor as Re, PopoverContent as ze, PopoverTrigger as Be } from "./ui/popover.js";
|
|
21
|
+
import { ScrollArea as Ve, ScrollBar as He } from "./ui/scroll-area.js";
|
|
22
|
+
import { Select as Ue, SelectContent as We, SelectGroup as Ge, SelectItem as Ke, SelectLabel as qe, SelectScrollDownButton as Je, SelectScrollUpButton as Ye, SelectSeparator as Xe, SelectTrigger as Ze, SelectValue as Qe } from "./ui/select.js";
|
|
23
|
+
import { Separator as $e } from "./ui/separator.js";
|
|
24
|
+
import { Sheet as et, SheetClose as tt, SheetContent as nt, SheetDescription as rt, SheetFooter as it, SheetHeader as at, SheetTitle as ot, SheetTrigger as st } from "./ui/sheet.js";
|
|
25
|
+
import { Skeleton as ct } from "./ui/skeleton.js";
|
|
26
|
+
import { Toaster as lt } from "./ui/sonner.js";
|
|
27
|
+
import { Spinner as ut } from "./ui/spinner.js";
|
|
28
|
+
import { Switch as dt } from "./ui/switch.js";
|
|
29
|
+
import { Tabs as ft, TabsContent as pt, TabsList as mt, TabsTrigger as ht } from "./ui/tabs.js";
|
|
30
|
+
import { Textarea as gt } from "./ui/textarea.js";
|
|
31
|
+
import { Tooltip as _t, TooltipContent as vt, TooltipProvider as yt, TooltipTrigger as bt } from "./ui/tooltip.js";
|
|
32
|
+
export { e as Accordion, t as AccordionContent, n as AccordionItem, r as AccordionTrigger, G as AlertDialog, K as AlertDialogAction, q as AlertDialogCancel, J as AlertDialogContent, Y as AlertDialogDescription, X as AlertDialogFooter, Z as AlertDialogHeader, Q as AlertDialogOverlay, $ as AlertDialogPortal, ee as AlertDialogTitle, te as AlertDialogTrigger, ne as Badge, a as BottomSheet, o as BottomSheetClose, s as BottomSheetContent, c as BottomSheetDescription, l as BottomSheetFooter, u as BottomSheetHeader, d as BottomSheetTitle, f as BottomSheetTrigger, U as Button, ie as Card, ae as CardContent, oe as CardDescription, se as CardFooter, ce as CardHeader, le as CardTitle, ue as Checkbox, de as Command, fe as CommandDialog, pe as CommandEmpty, me as CommandGroup, he as CommandInput, ge as CommandItem, _e as CommandList, ve as CommandSeparator, ye as CommandShortcut, p as Dialog, m as DialogClose, h as DialogContent, g as DialogDescription, _ as DialogFooter, v as DialogHeader, y as DialogOverlay, b as DialogPortal, x as DialogTitle, S as DialogTrigger, be as DropdownMenu, xe as DropdownMenuCheckboxItem, Se as DropdownMenuContent, Ce as DropdownMenuGroup, we as DropdownMenuItem, Te as DropdownMenuLabel, Ee as DropdownMenuPortal, De as DropdownMenuRadioGroup, Oe as DropdownMenuRadioItem, ke as DropdownMenuSeparator, Ae as DropdownMenuShortcut, je as DropdownMenuSub, Me as DropdownMenuSubContent, Ne as DropdownMenuSubTrigger, Pe as DropdownMenuTrigger, H as EmptyState, Fe as Input, Ie as Label, i as OptionalFields, Le as Popover, Re as PopoverAnchor, ze as PopoverContent, Be as PopoverTrigger, C as ResponsiveDialog, w as ResponsiveDialogClose, T as ResponsiveDialogContent, E as ResponsiveDialogDescription, D as ResponsiveDialogFooter, O as ResponsiveDialogHeader, k as ResponsiveDialogTitle, A as ResponsiveDialogTrigger, V as ResponsiveStack, z as ResponsiveTable, Ve as ScrollArea, He as ScrollBar, Ue as Select, We as SelectContent, Ge as SelectGroup, Ke as SelectItem, qe as SelectLabel, Je as SelectScrollDownButton, Ye as SelectScrollUpButton, Xe as SelectSeparator, Ze as SelectTrigger, Qe as SelectValue, $e as Separator, et as Sheet, tt as SheetClose, nt as SheetContent, rt as SheetDescription, it as SheetFooter, at as SheetHeader, ot as SheetTitle, st as SheetTrigger, ct as Skeleton, ut as Spinner, B as Stepper, dt as Switch, j as Table, M as TableBody, N as TableCaption, P as TableCell, F as TableFooter, I as TableHead, L as TableHeader, R as TableRow, ft as Tabs, pt as TabsContent, mt as TabsList, ht as TabsTrigger, gt as Textarea, lt as Toaster, _t as Tooltip, vt as TooltipContent, yt as TooltipProvider, bt as TooltipTrigger, re as badgeVariants, W as buttonVariants };
|
package/package.json
CHANGED
|
@@ -39,6 +39,45 @@ export function createEslintConfig(options = {}) {
|
|
|
39
39
|
'react/prop-types': 'off',
|
|
40
40
|
'@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
|
|
41
41
|
'@typescript-eslint/no-explicit-any': 'error',
|
|
42
|
+
// UX-simplification sweep guardrails (warnings — gradual adoption).
|
|
43
|
+
// Rationale: ~/products/dev/platform/context/ui-simplification/README.md
|
|
44
|
+
'no-restricted-imports': [
|
|
45
|
+
'warn',
|
|
46
|
+
{
|
|
47
|
+
paths: [
|
|
48
|
+
{
|
|
49
|
+
name: '@burdenoff/fe-libs/ui',
|
|
50
|
+
importNames: [
|
|
51
|
+
'Dialog',
|
|
52
|
+
'DialogTrigger',
|
|
53
|
+
'DialogContent',
|
|
54
|
+
'DialogHeader',
|
|
55
|
+
'DialogFooter',
|
|
56
|
+
'DialogTitle',
|
|
57
|
+
'DialogDescription',
|
|
58
|
+
'DialogClose',
|
|
59
|
+
],
|
|
60
|
+
message:
|
|
61
|
+
'Use ResponsiveDialog* from @burdenoff/fe-libs/ui — auto-converts to BottomSheet below md:.',
|
|
62
|
+
},
|
|
63
|
+
],
|
|
64
|
+
},
|
|
65
|
+
],
|
|
66
|
+
'no-restricted-syntax': [
|
|
67
|
+
'warn',
|
|
68
|
+
{
|
|
69
|
+
selector:
|
|
70
|
+
"Literal[value=/(?:#[0-9a-fA-F]{3,8}\\b)|(?:rgb[a]?\\()|(?:hsl[a]?\\()/]",
|
|
71
|
+
message:
|
|
72
|
+
'Use semantic tokens from fe-libs/shared/tokens/tokens.css (bg-*, text-*, action-*, status-*) — not raw colours.',
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
selector:
|
|
76
|
+
"TemplateElement[value.raw=/(?:#[0-9a-fA-F]{3,8}\\b)|(?:rgb[a]?\\()|(?:hsl[a]?\\()/]",
|
|
77
|
+
message:
|
|
78
|
+
'Use semantic tokens from fe-libs/shared/tokens/tokens.css — not raw colours in template strings.',
|
|
79
|
+
},
|
|
80
|
+
],
|
|
42
81
|
...additionalRules,
|
|
43
82
|
},
|
|
44
83
|
settings: {
|