@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.
Files changed (57) hide show
  1. package/dist/button/Button.d.ts +2 -2
  2. package/dist/chrome/AppShellLayout.d.ts +6 -0
  3. package/dist/chrome/AppShellLayout.d.ts.map +1 -1
  4. package/dist/chrome/AppShellLayout.js +9 -3
  5. package/dist/chrome/PageHeader.d.ts +17 -0
  6. package/dist/chrome/PageHeader.d.ts.map +1 -0
  7. package/dist/chrome/PageHeader.js +67 -0
  8. package/dist/chrome/index.d.ts +2 -0
  9. package/dist/chrome/index.d.ts.map +1 -1
  10. package/dist/chrome.js +33 -32
  11. package/dist/form/FormLabel.d.ts +4 -2
  12. package/dist/form/FormLabel.d.ts.map +1 -1
  13. package/dist/form/FormLabel.js +17 -10
  14. package/dist/form/FormSection.d.ts +18 -0
  15. package/dist/form/FormSection.d.ts.map +1 -0
  16. package/dist/form/FormSection.js +78 -0
  17. package/dist/form/index.d.ts +2 -0
  18. package/dist/form/index.d.ts.map +1 -1
  19. package/dist/form.js +11 -10
  20. package/dist/shared/native/SafeAreaView.d.ts +15 -0
  21. package/dist/shared/native/SafeAreaView.d.ts.map +1 -0
  22. package/dist/shared/native/SafeAreaView.js +22 -0
  23. package/dist/shared/native/index.d.ts +1 -0
  24. package/dist/shared/native/index.d.ts.map +1 -1
  25. package/dist/shared-hooks.js +10 -10
  26. package/dist/shared-native.js +9 -8
  27. package/dist/shared.js +67 -66
  28. package/dist/storage/SaveToFilesDialog.js +7 -7
  29. package/dist/ui/badge.d.ts +1 -1
  30. package/dist/ui/bottom-sheet.d.ts +16 -0
  31. package/dist/ui/bottom-sheet.d.ts.map +1 -0
  32. package/dist/ui/bottom-sheet.js +89 -0
  33. package/dist/ui/button.d.ts +2 -2
  34. package/dist/ui/empty-state.d.ts +13 -0
  35. package/dist/ui/empty-state.d.ts.map +1 -0
  36. package/dist/ui/empty-state.js +34 -0
  37. package/dist/ui/index.d.ts +7 -0
  38. package/dist/ui/index.d.ts.map +1 -1
  39. package/dist/ui/optional-fields.d.ts +16 -0
  40. package/dist/ui/optional-fields.d.ts.map +1 -0
  41. package/dist/ui/optional-fields.js +55 -0
  42. package/dist/ui/responsive-dialog.d.ts +18 -0
  43. package/dist/ui/responsive-dialog.d.ts.map +1 -0
  44. package/dist/ui/responsive-dialog.js +38 -0
  45. package/dist/ui/responsive-stack.d.ts +15 -0
  46. package/dist/ui/responsive-stack.d.ts.map +1 -0
  47. package/dist/ui/responsive-stack.js +65 -0
  48. package/dist/ui/responsive-table.d.ts +24 -0
  49. package/dist/ui/responsive-table.d.ts.map +1 -0
  50. package/dist/ui/responsive-table.js +84 -0
  51. package/dist/ui/sheet.js +2 -2
  52. package/dist/ui/stepper.d.ts +16 -0
  53. package/dist/ui/stepper.d.ts.map +1 -0
  54. package/dist/ui/stepper.js +79 -0
  55. package/dist/ui.js +31 -24
  56. package/package.json +1 -1
  57. 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-50 bg-bg-overlay", t),
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-50 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),
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 { Button as i, buttonVariants as a } from "./ui/button.js";
3
- import { AlertDialog as o, AlertDialogAction as s, AlertDialogCancel as c, AlertDialogContent as l, AlertDialogDescription as u, AlertDialogFooter as d, AlertDialogHeader as f, AlertDialogOverlay as p, AlertDialogPortal as m, AlertDialogTitle as h, AlertDialogTrigger as g } from "./ui/alert-dialog.js";
4
- import { Badge as _, badgeVariants as v } from "./ui/badge.js";
5
- import { Card as y, CardContent as b, CardDescription as x, CardFooter as S, CardHeader as C, CardTitle as w } from "./ui/card.js";
6
- import { Checkbox as T } from "./ui/checkbox.js";
7
- import { Dialog as E, DialogClose as D, DialogContent as O, DialogDescription as k, DialogFooter as A, DialogHeader as j, DialogOverlay as M, DialogPortal as N, DialogTitle as P, DialogTrigger as F } from "./ui/dialog.js";
8
- import { Command as I, CommandDialog as L, CommandEmpty as R, CommandGroup as z, CommandInput as B, CommandItem as V, CommandList as H, CommandSeparator as U, CommandShortcut as W } from "./ui/command.js";
9
- import { DropdownMenu as G, DropdownMenuCheckboxItem as K, DropdownMenuContent as q, DropdownMenuGroup as J, DropdownMenuItem as Y, DropdownMenuLabel as X, DropdownMenuPortal as Z, DropdownMenuRadioGroup as Q, DropdownMenuRadioItem as $, DropdownMenuSeparator as ee, DropdownMenuShortcut as te, DropdownMenuSub as ne, DropdownMenuSubContent as re, DropdownMenuSubTrigger as ie, DropdownMenuTrigger as ae } from "./ui/dropdown-menu.js";
10
- import { Input as oe } from "./ui/input.js";
11
- import { Label as se } from "./ui/label.js";
12
- import { Popover as ce, PopoverAnchor as le, PopoverContent as ue, PopoverTrigger as de } from "./ui/popover.js";
13
- import { ScrollArea as fe, ScrollBar as pe } from "./ui/scroll-area.js";
14
- import { Select as me, SelectContent as he, SelectGroup as ge, SelectItem as _e, SelectLabel as ve, SelectScrollDownButton as ye, SelectScrollUpButton as be, SelectSeparator as xe, SelectTrigger as Se, SelectValue as Ce } from "./ui/select.js";
15
- import { Separator as we } from "./ui/separator.js";
16
- import { Sheet as Te, SheetClose as Ee, SheetContent as De, SheetDescription as Oe, SheetFooter as ke, SheetHeader as Ae, SheetTitle as je, SheetTrigger as Me } from "./ui/sheet.js";
17
- import { Skeleton as Ne } from "./ui/skeleton.js";
18
- import { Toaster as Pe } from "./ui/sonner.js";
19
- import { Spinner as Fe } from "./ui/spinner.js";
20
- import { Switch as Ie } from "./ui/switch.js";
21
- import { Table as Le, TableBody as Re, TableCaption as ze, TableCell as Be, TableFooter as Ve, TableHead as He, TableHeader as Ue, TableRow as We } from "./ui/table.js";
22
- import { Tabs as Ge, TabsContent as Ke, TabsList as qe, TabsTrigger as Je } from "./ui/tabs.js";
23
- import { Textarea as Ye } from "./ui/textarea.js";
24
- import { Tooltip as Xe, TooltipContent as Ze, TooltipProvider as Qe, TooltipTrigger as $e } from "./ui/tooltip.js";
25
- export { e as Accordion, t as AccordionContent, n as AccordionItem, r as AccordionTrigger, o as AlertDialog, s as AlertDialogAction, c as AlertDialogCancel, l as AlertDialogContent, u as AlertDialogDescription, d as AlertDialogFooter, f as AlertDialogHeader, p as AlertDialogOverlay, m as AlertDialogPortal, h as AlertDialogTitle, g as AlertDialogTrigger, _ as Badge, i as Button, y as Card, b as CardContent, x as CardDescription, S as CardFooter, C as CardHeader, w as CardTitle, T as Checkbox, I as Command, L as CommandDialog, R as CommandEmpty, z as CommandGroup, B as CommandInput, V as CommandItem, H as CommandList, U as CommandSeparator, W as CommandShortcut, E as Dialog, D as DialogClose, O as DialogContent, k as DialogDescription, A as DialogFooter, j as DialogHeader, M as DialogOverlay, N as DialogPortal, P as DialogTitle, F as DialogTrigger, G as DropdownMenu, K as DropdownMenuCheckboxItem, q as DropdownMenuContent, J as DropdownMenuGroup, Y as DropdownMenuItem, X as DropdownMenuLabel, Z as DropdownMenuPortal, Q as DropdownMenuRadioGroup, $ as DropdownMenuRadioItem, ee as DropdownMenuSeparator, te as DropdownMenuShortcut, ne as DropdownMenuSub, re as DropdownMenuSubContent, ie as DropdownMenuSubTrigger, ae as DropdownMenuTrigger, oe as Input, se as Label, ce as Popover, le as PopoverAnchor, ue as PopoverContent, de as PopoverTrigger, fe as ScrollArea, pe as ScrollBar, me as Select, he as SelectContent, ge as SelectGroup, _e as SelectItem, ve as SelectLabel, ye as SelectScrollDownButton, be as SelectScrollUpButton, xe as SelectSeparator, Se as SelectTrigger, Ce as SelectValue, we as Separator, Te as Sheet, Ee as SheetClose, De as SheetContent, Oe as SheetDescription, ke as SheetFooter, Ae as SheetHeader, je as SheetTitle, Me as SheetTrigger, Ne as Skeleton, Fe as Spinner, Ie as Switch, Le as Table, Re as TableBody, ze as TableCaption, Be as TableCell, Ve as TableFooter, He as TableHead, Ue as TableHeader, We as TableRow, Ge as Tabs, Ke as TabsContent, qe as TabsList, Je as TabsTrigger, Ye as Textarea, Pe as Toaster, Xe as Tooltip, Ze as TooltipContent, Qe as TooltipProvider, $e as TooltipTrigger, v as badgeVariants, a as buttonVariants };
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@burdenoff/fe-libs",
3
- "version": "2026.527.7",
3
+ "version": "2026.528.2",
4
4
  "description": "Burdenoff frontend primitives and domain libraries",
5
5
  "type": "module",
6
6
  "imports": {
@@ -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: {