@tensor_1/react 2.0.0 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +34 -0
- package/dist/components/DescriptionList.d.ts +46 -0
- package/dist/components/DescriptionList.js +22 -0
- package/dist/index.cjs +175 -152
- package/dist/index.d.cts +43 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +3 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
# @tensor_1/react
|
|
2
|
+
|
|
3
|
+
Thin React wrappers over the UIx v2 CSS component library — every component is driven by the [`@tensor_1/tokens`](https://www.npmjs.com/package/@tensor_1/tokens) `--uix-*` contract.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
npm i @tensor_1/react @tensor_1/tokens
|
|
9
|
+
```
|
|
10
|
+
Peer deps: `react` / `react-dom` (`^18` or `^19`).
|
|
11
|
+
|
|
12
|
+
## Use
|
|
13
|
+
|
|
14
|
+
Load the token CSS once (see [`@tensor_1/tokens`](https://www.npmjs.com/package/@tensor_1/tokens)), then import components:
|
|
15
|
+
|
|
16
|
+
```tsx
|
|
17
|
+
import { Button, Card } from "@tensor_1/react";
|
|
18
|
+
|
|
19
|
+
export default function Example() {
|
|
20
|
+
return (
|
|
21
|
+
<Card>
|
|
22
|
+
<Button>Save</Button>
|
|
23
|
+
</Card>
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
Charts (ECharts) live behind a separate entry so they stay out of the main bundle:
|
|
29
|
+
|
|
30
|
+
```tsx
|
|
31
|
+
import { Chart } from "@tensor_1/react/chart";
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
Ships **ESM + CJS + types**, with per-file `"use client"` so it's safe under React Server Components. Part of the **[UIx v2 styleguide](https://github.com/COx-ORG-H/UIx)**.
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ReactNode, HTMLAttributes } from 'react';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Key-value description list — the `uix-dl` two-column grid (label / value).
|
|
6
|
+
* The house body primitive for detail surfaces: the side-peek drawer, the
|
|
7
|
+
* record detail header, summary cards.
|
|
8
|
+
*
|
|
9
|
+
* UIx owns the LOOK + this controlled contract; the consumer owns the data —
|
|
10
|
+
* WHICH fields to show and how to format each value (a raw `sev_3` enum or an
|
|
11
|
+
* assignee UUID is the app's job to resolve into "SEV 3" / a display name
|
|
12
|
+
* before it reaches `description`). So in a Tensor peek surface:
|
|
13
|
+
*
|
|
14
|
+
* <DescriptionList items={[
|
|
15
|
+
* { term: 'State', description: <StatusPill tone="neutral">Closed</StatusPill> },
|
|
16
|
+
* { term: 'Severity', description: formatSeverity(row.severity) }, // app formats
|
|
17
|
+
* { term: 'Assignee', description: assigneeName ?? <em>Unassigned</em> },
|
|
18
|
+
* ]} />
|
|
19
|
+
*
|
|
20
|
+
* Use `items` for data-driven lists (the common case) or the `DescriptionItem`
|
|
21
|
+
* compound child for hand-authored content. Both render `<dt>`/`<dd>` pairs as
|
|
22
|
+
* direct children of the grid `<dl>`, so they align into the same columns.
|
|
23
|
+
*/
|
|
24
|
+
interface DescriptionListItem {
|
|
25
|
+
/** Stable identity for the row; falls back to the list index when omitted. */
|
|
26
|
+
id?: string;
|
|
27
|
+
term: ReactNode;
|
|
28
|
+
description: ReactNode;
|
|
29
|
+
}
|
|
30
|
+
interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
|
|
31
|
+
items?: DescriptionListItem[];
|
|
32
|
+
children?: ReactNode;
|
|
33
|
+
}
|
|
34
|
+
declare function DescriptionList({ items, children, className, ...props }: DescriptionListProps): react.JSX.Element;
|
|
35
|
+
interface DescriptionItemProps {
|
|
36
|
+
term: ReactNode;
|
|
37
|
+
children?: ReactNode;
|
|
38
|
+
}
|
|
39
|
+
/**
|
|
40
|
+
* One hand-authored row. Renders a `<dt>`/`<dd>` fragment so the pair lands as
|
|
41
|
+
* direct grid children of the enclosing `<DescriptionList>` (never wrap it in
|
|
42
|
+
* an element — that breaks the two-column alignment).
|
|
43
|
+
*/
|
|
44
|
+
declare function DescriptionItem({ term, children }: DescriptionItemProps): react.JSX.Element;
|
|
45
|
+
|
|
46
|
+
export { DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListItem, type DescriptionListProps };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Fragment as Fragment2 } from "react";
|
|
3
|
+
import { cx } from "../cx.js";
|
|
4
|
+
function DescriptionList({ items, children, className, ...props }) {
|
|
5
|
+
return /* @__PURE__ */ jsxs("dl", { className: cx("uix-dl", className), ...props, children: [
|
|
6
|
+
items?.map((item, i) => /* @__PURE__ */ jsxs(Fragment2, { children: [
|
|
7
|
+
/* @__PURE__ */ jsx("dt", { children: item.term }),
|
|
8
|
+
/* @__PURE__ */ jsx("dd", { children: item.description })
|
|
9
|
+
] }, item.id ?? i)),
|
|
10
|
+
children
|
|
11
|
+
] });
|
|
12
|
+
}
|
|
13
|
+
function DescriptionItem({ term, children }) {
|
|
14
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
15
|
+
/* @__PURE__ */ jsx("dt", { children: term }),
|
|
16
|
+
/* @__PURE__ */ jsx("dd", { children })
|
|
17
|
+
] });
|
|
18
|
+
}
|
|
19
|
+
export {
|
|
20
|
+
DescriptionItem,
|
|
21
|
+
DescriptionList
|
|
22
|
+
};
|
package/dist/index.cjs
CHANGED
|
@@ -33,6 +33,8 @@ __export(src_exports, {
|
|
|
33
33
|
CommandPalette: () => CommandPalette,
|
|
34
34
|
Comment: () => Comment,
|
|
35
35
|
Comments: () => Comments,
|
|
36
|
+
DescriptionItem: () => DescriptionItem,
|
|
37
|
+
DescriptionList: () => DescriptionList,
|
|
36
38
|
DetailLayout: () => DetailLayout,
|
|
37
39
|
Drawer: () => Drawer,
|
|
38
40
|
EmptyState: () => EmptyState,
|
|
@@ -401,17 +403,36 @@ function ListItem({ title, meta, trail, leading, children, className, ...props }
|
|
|
401
403
|
] });
|
|
402
404
|
}
|
|
403
405
|
|
|
404
|
-
// src/components/
|
|
406
|
+
// src/components/DescriptionList.tsx
|
|
405
407
|
var import_react9 = require("react");
|
|
406
408
|
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
407
|
-
|
|
409
|
+
function DescriptionList({ items, children, className, ...props }) {
|
|
410
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("dl", { className: cx("uix-dl", className), ...props, children: [
|
|
411
|
+
items?.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react9.Fragment, { children: [
|
|
412
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("dt", { children: item.term }),
|
|
413
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("dd", { children: item.description })
|
|
414
|
+
] }, item.id ?? i)),
|
|
415
|
+
children
|
|
416
|
+
] });
|
|
417
|
+
}
|
|
418
|
+
function DescriptionItem({ term, children }) {
|
|
419
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
|
|
420
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("dt", { children: term }),
|
|
421
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("dd", { children })
|
|
422
|
+
] });
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
// src/components/Tabs.tsx
|
|
426
|
+
var import_react10 = require("react");
|
|
427
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
428
|
+
var TabsCtx = (0, import_react10.createContext)({});
|
|
408
429
|
function Tabs({ variant = "line", value, onChange, children, className }) {
|
|
409
|
-
return /* @__PURE__ */ (0,
|
|
430
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TabsCtx.Provider, { value: { value, onChange }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { role: "tablist", className: cx("uix-tabs", `uix-tabs--${variant}`, className), children }) });
|
|
410
431
|
}
|
|
411
432
|
function Tab({ value, children, disabled, className, onClick, ...props }) {
|
|
412
|
-
const ctx = (0,
|
|
433
|
+
const ctx = (0, import_react10.useContext)(TabsCtx);
|
|
413
434
|
const selected = ctx.value === value;
|
|
414
|
-
return /* @__PURE__ */ (0,
|
|
435
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
415
436
|
"button",
|
|
416
437
|
{
|
|
417
438
|
role: "tab",
|
|
@@ -429,113 +450,113 @@ function Tab({ value, children, disabled, className, onClick, ...props }) {
|
|
|
429
450
|
}
|
|
430
451
|
|
|
431
452
|
// src/components/AppShell.tsx
|
|
432
|
-
var
|
|
453
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
433
454
|
function AppShell({ collapsed, sidebar, topbar, children, className, ...props }) {
|
|
434
|
-
return /* @__PURE__ */ (0,
|
|
435
|
-
sidebar && /* @__PURE__ */ (0,
|
|
436
|
-
topbar && /* @__PURE__ */ (0,
|
|
437
|
-
/* @__PURE__ */ (0,
|
|
455
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cx("uix-shell", className), "data-collapsed": collapsed || void 0, ...props, children: [
|
|
456
|
+
sidebar && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "uix-shell__sidebar", children: sidebar }),
|
|
457
|
+
topbar && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "uix-shell__topbar", children: topbar }),
|
|
458
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("main", { className: "uix-shell__main", children })
|
|
438
459
|
] });
|
|
439
460
|
}
|
|
440
461
|
|
|
441
462
|
// src/components/Sidebar.tsx
|
|
442
|
-
var
|
|
443
|
-
var
|
|
444
|
-
var ChevronIcon = () => /* @__PURE__ */ (0,
|
|
463
|
+
var import_react11 = require("react");
|
|
464
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
465
|
+
var ChevronIcon = () => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("svg", { className: "uix-navgroup__chevron", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M2 4l4 4 4-4" }) });
|
|
445
466
|
function Sidebar({ collapsed, onToggle, brand, toggleIcon, children, className, ...props }) {
|
|
446
|
-
return /* @__PURE__ */ (0,
|
|
447
|
-
(brand != null || onToggle) && /* @__PURE__ */ (0,
|
|
448
|
-
brand && /* @__PURE__ */ (0,
|
|
449
|
-
onToggle && /* @__PURE__ */ (0,
|
|
450
|
-
/* @__PURE__ */ (0,
|
|
451
|
-
/* @__PURE__ */ (0,
|
|
452
|
-
/* @__PURE__ */ (0,
|
|
467
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("nav", { className: cx("uix-sidebar", className), "data-collapsed": collapsed || void 0, ...props, children: [
|
|
468
|
+
(brand != null || onToggle) && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "uix-sidebar__head", children: [
|
|
469
|
+
brand && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "uix-sidebar__brand", children: brand }),
|
|
470
|
+
onToggle && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { className: "uix-sidebar__toggle", onClick: onToggle, "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", children: toggleIcon ?? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": "true", children: [
|
|
471
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("rect", { x: "3", y: "4", width: "12", height: "1.5", rx: ".75" }),
|
|
472
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("rect", { x: "3", y: "8.25", width: "8", height: "1.5", rx: ".75" }),
|
|
473
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("rect", { x: "3", y: "12.5", width: "12", height: "1.5", rx: ".75" })
|
|
453
474
|
] }) })
|
|
454
475
|
] }),
|
|
455
476
|
children
|
|
456
477
|
] });
|
|
457
478
|
}
|
|
458
479
|
function SidebarSection({ label, children }) {
|
|
459
|
-
return /* @__PURE__ */ (0,
|
|
460
|
-
label && /* @__PURE__ */ (0,
|
|
480
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
|
|
481
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "uix-sidebar__eyebrow", children: label }),
|
|
461
482
|
children
|
|
462
483
|
] });
|
|
463
484
|
}
|
|
464
485
|
function NavItem({ icon, badge, active, as: Tag = "a", children, className, ...props }) {
|
|
465
486
|
if (Tag === "button") {
|
|
466
487
|
const { href: _href, ...btnProps } = props;
|
|
467
|
-
return /* @__PURE__ */ (0,
|
|
488
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
468
489
|
"button",
|
|
469
490
|
{
|
|
470
491
|
className: cx("uix-navitem", className),
|
|
471
492
|
"aria-current": active ? "page" : void 0,
|
|
472
493
|
...btnProps,
|
|
473
494
|
children: [
|
|
474
|
-
icon && /* @__PURE__ */ (0,
|
|
475
|
-
/* @__PURE__ */ (0,
|
|
476
|
-
badge != null && /* @__PURE__ */ (0,
|
|
495
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "uix-navitem__icon", "aria-hidden": "true", children: icon }),
|
|
496
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "uix-navitem__label", children }),
|
|
497
|
+
badge != null && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "uix-navitem__badge", children: badge })
|
|
477
498
|
]
|
|
478
499
|
}
|
|
479
500
|
);
|
|
480
501
|
}
|
|
481
|
-
return /* @__PURE__ */ (0,
|
|
502
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
482
503
|
"a",
|
|
483
504
|
{
|
|
484
505
|
className: cx("uix-navitem", className),
|
|
485
506
|
"aria-current": active ? "page" : void 0,
|
|
486
507
|
...props,
|
|
487
508
|
children: [
|
|
488
|
-
icon && /* @__PURE__ */ (0,
|
|
489
|
-
/* @__PURE__ */ (0,
|
|
490
|
-
badge != null && /* @__PURE__ */ (0,
|
|
509
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "uix-navitem__icon", "aria-hidden": "true", children: icon }),
|
|
510
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "uix-navitem__label", children }),
|
|
511
|
+
badge != null && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "uix-navitem__badge", children: badge })
|
|
491
512
|
]
|
|
492
513
|
}
|
|
493
514
|
);
|
|
494
515
|
}
|
|
495
516
|
function NavGroup({ icon, label, children, defaultExpanded = true }) {
|
|
496
|
-
const [expanded, setExpanded] = (0,
|
|
497
|
-
return /* @__PURE__ */ (0,
|
|
498
|
-
/* @__PURE__ */ (0,
|
|
517
|
+
const [expanded, setExpanded] = (0, import_react11.useState)(defaultExpanded);
|
|
518
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "uix-navgroup", children: [
|
|
519
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
499
520
|
"button",
|
|
500
521
|
{
|
|
501
522
|
className: "uix-navitem uix-navgroup__trigger",
|
|
502
523
|
"aria-expanded": expanded,
|
|
503
524
|
onClick: () => setExpanded((v) => !v),
|
|
504
525
|
children: [
|
|
505
|
-
icon && /* @__PURE__ */ (0,
|
|
506
|
-
/* @__PURE__ */ (0,
|
|
507
|
-
/* @__PURE__ */ (0,
|
|
526
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "uix-navitem__icon", "aria-hidden": "true", children: icon }),
|
|
527
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "uix-navitem__label", children: label }),
|
|
528
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ChevronIcon, {})
|
|
508
529
|
]
|
|
509
530
|
}
|
|
510
531
|
),
|
|
511
|
-
/* @__PURE__ */ (0,
|
|
532
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "uix-navgroup__panel", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children }) })
|
|
512
533
|
] });
|
|
513
534
|
}
|
|
514
535
|
function SubNavItem({ active, as: Tag = "a", children, className, ...props }) {
|
|
515
536
|
const cls = cx("uix-navitem uix-subitem", className);
|
|
516
537
|
if (Tag === "button") {
|
|
517
538
|
const { href: _href, ...btnProps } = props;
|
|
518
|
-
return /* @__PURE__ */ (0,
|
|
539
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { className: cls, "aria-current": active ? "page" : void 0, ...btnProps, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "uix-navitem__label", children }) });
|
|
519
540
|
}
|
|
520
|
-
return /* @__PURE__ */ (0,
|
|
541
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("a", { className: cls, "aria-current": active ? "page" : void 0, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "uix-navitem__label", children }) });
|
|
521
542
|
}
|
|
522
543
|
|
|
523
544
|
// src/components/Alert.tsx
|
|
524
|
-
var
|
|
545
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
525
546
|
function Alert({ tone, title, icon, children, className, ...props }) {
|
|
526
|
-
return /* @__PURE__ */ (0,
|
|
527
|
-
icon && /* @__PURE__ */ (0,
|
|
528
|
-
/* @__PURE__ */ (0,
|
|
529
|
-
title && /* @__PURE__ */ (0,
|
|
530
|
-
children && /* @__PURE__ */ (0,
|
|
547
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cx("uix-alert", tone && tone !== "neutral" && `uix-alert--${tone}`, className), ...props, children: [
|
|
548
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uix-alert__icon", children: icon }),
|
|
549
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
|
|
550
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uix-alert__title", children: title }),
|
|
551
|
+
children && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uix-alert__body", children })
|
|
531
552
|
] })
|
|
532
553
|
] });
|
|
533
554
|
}
|
|
534
555
|
|
|
535
556
|
// src/components/Spinner.tsx
|
|
536
|
-
var
|
|
557
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
537
558
|
function Spinner({ size = "md", accent, className, ...props }) {
|
|
538
|
-
return /* @__PURE__ */ (0,
|
|
559
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
539
560
|
"span",
|
|
540
561
|
{
|
|
541
562
|
className: cx("uix-spinner", accent && "uix-spinner--accent", size === "lg" && "uix-spinner--lg", className),
|
|
@@ -547,9 +568,9 @@ function Spinner({ size = "md", accent, className, ...props }) {
|
|
|
547
568
|
}
|
|
548
569
|
|
|
549
570
|
// src/components/Toast.tsx
|
|
550
|
-
var
|
|
571
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
551
572
|
function Toast({ title, message, tone, icon, onClose, leaving, className, ...props }) {
|
|
552
|
-
return /* @__PURE__ */ (0,
|
|
573
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
553
574
|
"div",
|
|
554
575
|
{
|
|
555
576
|
className: cx("uix-toast", tone && `uix-toast--${tone}`, className),
|
|
@@ -558,24 +579,24 @@ function Toast({ title, message, tone, icon, onClose, leaving, className, ...pro
|
|
|
558
579
|
"aria-live": "polite",
|
|
559
580
|
...props,
|
|
560
581
|
children: [
|
|
561
|
-
icon && /* @__PURE__ */ (0,
|
|
562
|
-
/* @__PURE__ */ (0,
|
|
563
|
-
title && /* @__PURE__ */ (0,
|
|
564
|
-
message && /* @__PURE__ */ (0,
|
|
582
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "uix-toast__icon", children: icon }),
|
|
583
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "uix-toast__body", children: [
|
|
584
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "uix-toast__title", children: title }),
|
|
585
|
+
message && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "uix-toast__msg", children: message })
|
|
565
586
|
] }),
|
|
566
|
-
onClose && /* @__PURE__ */ (0,
|
|
587
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { className: "uix-toast__close", onClick: onClose, "aria-label": "Dismiss", children: "\xD7" })
|
|
567
588
|
]
|
|
568
589
|
}
|
|
569
590
|
);
|
|
570
591
|
}
|
|
571
592
|
function Toaster({ children, className, ...props }) {
|
|
572
|
-
return /* @__PURE__ */ (0,
|
|
593
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cx("uix-toaster", className), "aria-live": "polite", "aria-atomic": "false", ...props, children });
|
|
573
594
|
}
|
|
574
595
|
|
|
575
596
|
// src/components/Table.tsx
|
|
576
|
-
var
|
|
597
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
577
598
|
function TableWrap({ children, className, ...props }) {
|
|
578
|
-
return /* @__PURE__ */ (0,
|
|
599
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cx("uix-table-wrap", className), ...props, children });
|
|
579
600
|
}
|
|
580
601
|
function Table({
|
|
581
602
|
density = "standard",
|
|
@@ -587,7 +608,7 @@ function Table({
|
|
|
587
608
|
children,
|
|
588
609
|
...props
|
|
589
610
|
}) {
|
|
590
|
-
return /* @__PURE__ */ (0,
|
|
611
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
591
612
|
"table",
|
|
592
613
|
{
|
|
593
614
|
className: cx("uix-table", !zebra && "uix-table--no-zebra", pinnedCol && "uix-table--pinned-col", className),
|
|
@@ -600,7 +621,7 @@ function Table({
|
|
|
600
621
|
);
|
|
601
622
|
}
|
|
602
623
|
function Th({ sortable, sortDirection, onSort, className, children, onClick, ...props }) {
|
|
603
|
-
return /* @__PURE__ */ (0,
|
|
624
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
604
625
|
"th",
|
|
605
626
|
{
|
|
606
627
|
className,
|
|
@@ -613,10 +634,10 @@ function Th({ sortable, sortDirection, onSort, className, children, onClick, ...
|
|
|
613
634
|
);
|
|
614
635
|
}
|
|
615
636
|
function Td({ pinned, className, children, ...props }) {
|
|
616
|
-
return /* @__PURE__ */ (0,
|
|
637
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("td", { className, "data-pinned": pinned || void 0, ...props, children });
|
|
617
638
|
}
|
|
618
639
|
function Tr({ selected, pinned, className, children, ...props }) {
|
|
619
|
-
return /* @__PURE__ */ (0,
|
|
640
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
620
641
|
"tr",
|
|
621
642
|
{
|
|
622
643
|
className,
|
|
@@ -629,7 +650,7 @@ function Tr({ selected, pinned, className, children, ...props }) {
|
|
|
629
650
|
}
|
|
630
651
|
|
|
631
652
|
// src/components/Pagination.tsx
|
|
632
|
-
var
|
|
653
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
633
654
|
function getPageNumbers(page, total) {
|
|
634
655
|
if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
|
|
635
656
|
const pages = [1];
|
|
@@ -643,8 +664,8 @@ function getPageNumbers(page, total) {
|
|
|
643
664
|
}
|
|
644
665
|
function Pagination({ page, pageCount, onChange, className, ...props }) {
|
|
645
666
|
const pages = getPageNumbers(page, pageCount);
|
|
646
|
-
return /* @__PURE__ */ (0,
|
|
647
|
-
/* @__PURE__ */ (0,
|
|
667
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("nav", { "aria-label": "Pagination", className: cx("uix-pagination", className), ...props, children: [
|
|
668
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
648
669
|
"button",
|
|
649
670
|
{
|
|
650
671
|
className: "uix-pagination__btn",
|
|
@@ -655,7 +676,7 @@ function Pagination({ page, pageCount, onChange, className, ...props }) {
|
|
|
655
676
|
}
|
|
656
677
|
),
|
|
657
678
|
pages.map(
|
|
658
|
-
(p, i) => p === "ellipsis" ? /* @__PURE__ */ (0,
|
|
679
|
+
(p, i) => p === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "uix-pagination__ellipsis", children: "\u2026" }, `e${i}`) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
659
680
|
"button",
|
|
660
681
|
{
|
|
661
682
|
className: "uix-pagination__btn",
|
|
@@ -666,7 +687,7 @@ function Pagination({ page, pageCount, onChange, className, ...props }) {
|
|
|
666
687
|
p
|
|
667
688
|
)
|
|
668
689
|
),
|
|
669
|
-
/* @__PURE__ */ (0,
|
|
690
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
670
691
|
"button",
|
|
671
692
|
{
|
|
672
693
|
className: "uix-pagination__btn",
|
|
@@ -680,15 +701,15 @@ function Pagination({ page, pageCount, onChange, className, ...props }) {
|
|
|
680
701
|
}
|
|
681
702
|
|
|
682
703
|
// src/components/StatusPill.tsx
|
|
683
|
-
var
|
|
704
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
684
705
|
function StatusPill({ tone = "neutral", treatment = "filled", dot, children, className, ...props }) {
|
|
685
|
-
return /* @__PURE__ */ (0,
|
|
706
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
686
707
|
"span",
|
|
687
708
|
{
|
|
688
709
|
className: cx("uix-pill", `uix-pill--${tone}`, treatment === "outline" && "uix-pill--outline", className),
|
|
689
710
|
...props,
|
|
690
711
|
children: [
|
|
691
|
-
dot && /* @__PURE__ */ (0,
|
|
712
|
+
dot && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "uix-pill__dot", "aria-hidden": "true" }),
|
|
692
713
|
children
|
|
693
714
|
]
|
|
694
715
|
}
|
|
@@ -696,10 +717,10 @@ function StatusPill({ tone = "neutral", treatment = "filled", dot, children, cla
|
|
|
696
717
|
}
|
|
697
718
|
|
|
698
719
|
// src/components/Progress.tsx
|
|
699
|
-
var
|
|
720
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
700
721
|
function Progress({ value = 0, max = 100, indeterminate, className, ...props }) {
|
|
701
722
|
const pct = Math.max(0, Math.min(100, value / (max || 100) * 100));
|
|
702
|
-
return /* @__PURE__ */ (0,
|
|
723
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
703
724
|
"div",
|
|
704
725
|
{
|
|
705
726
|
role: "progressbar",
|
|
@@ -708,54 +729,54 @@ function Progress({ value = 0, max = 100, indeterminate, className, ...props })
|
|
|
708
729
|
"aria-valuenow": indeterminate ? void 0 : value,
|
|
709
730
|
className: cx("uix-progress", indeterminate && "uix-progress--indeterminate", className),
|
|
710
731
|
...props,
|
|
711
|
-
children: /* @__PURE__ */ (0,
|
|
732
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "uix-progress__bar", style: indeterminate ? void 0 : { width: `${pct}%` } })
|
|
712
733
|
}
|
|
713
734
|
);
|
|
714
735
|
}
|
|
715
736
|
|
|
716
737
|
// src/components/Stat.tsx
|
|
717
|
-
var
|
|
738
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
718
739
|
function Stat({ label, value, icon, meta, trend, className, ...props }) {
|
|
719
|
-
return /* @__PURE__ */ (0,
|
|
720
|
-
/* @__PURE__ */ (0,
|
|
721
|
-
/* @__PURE__ */ (0,
|
|
740
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: cx("uix-stat", className), ...props, children: [
|
|
741
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "uix-stat__label", children: [
|
|
742
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: label }),
|
|
722
743
|
icon
|
|
723
744
|
] }),
|
|
724
|
-
/* @__PURE__ */ (0,
|
|
725
|
-
(meta != null || trend != null) && /* @__PURE__ */ (0,
|
|
726
|
-
trend != null && /* @__PURE__ */ (0,
|
|
745
|
+
/* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "uix-stat__value", children: value }),
|
|
746
|
+
(meta != null || trend != null) && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "uix-stat__meta", children: [
|
|
747
|
+
trend != null && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: cx("uix-stat__trend", `uix-stat__trend--${trend.direction}`), children: trend.label }),
|
|
727
748
|
meta
|
|
728
749
|
] })
|
|
729
750
|
] });
|
|
730
751
|
}
|
|
731
752
|
|
|
732
753
|
// src/components/Tooltip.tsx
|
|
733
|
-
var
|
|
754
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
734
755
|
function Tooltip({ label, children, ...props }) {
|
|
735
|
-
return /* @__PURE__ */ (0,
|
|
756
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { "data-uix-tip": label, ...props, children });
|
|
736
757
|
}
|
|
737
758
|
|
|
738
759
|
// src/components/States.tsx
|
|
739
|
-
var
|
|
760
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
740
761
|
function EmptyState({ icon, title, children, action, className, ...props }) {
|
|
741
|
-
return /* @__PURE__ */ (0,
|
|
742
|
-
icon != null && /* @__PURE__ */ (0,
|
|
743
|
-
title != null && /* @__PURE__ */ (0,
|
|
762
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cx("uix-empty", className), ...props, children: [
|
|
763
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uix-empty__icon", children: icon }),
|
|
764
|
+
title != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uix-empty__title", children: title }),
|
|
744
765
|
children,
|
|
745
766
|
action
|
|
746
767
|
] });
|
|
747
768
|
}
|
|
748
769
|
function ErrorState({ icon, title, detail, action, className, ...props }) {
|
|
749
|
-
return /* @__PURE__ */ (0,
|
|
750
|
-
icon != null && /* @__PURE__ */ (0,
|
|
751
|
-
title != null && /* @__PURE__ */ (0,
|
|
752
|
-
detail != null && /* @__PURE__ */ (0,
|
|
770
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cx("uix-empty", "uix-empty--danger", className), role: "alert", ...props, children: [
|
|
771
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uix-empty__icon uix-empty__icon--danger", children: icon }),
|
|
772
|
+
title != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uix-empty__title", children: title }),
|
|
773
|
+
detail != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { children: detail }),
|
|
753
774
|
action
|
|
754
775
|
] });
|
|
755
776
|
}
|
|
756
777
|
function Skeleton({ variant = "block", width, height, className, style, ...props }) {
|
|
757
778
|
const dims = { width, height, ...style };
|
|
758
|
-
return /* @__PURE__ */ (0,
|
|
779
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
|
|
759
780
|
"div",
|
|
760
781
|
{
|
|
761
782
|
className: cx(
|
|
@@ -770,52 +791,52 @@ function Skeleton({ variant = "block", width, height, className, style, ...props
|
|
|
770
791
|
);
|
|
771
792
|
}
|
|
772
793
|
function LoadingState({ rows = 3, className, ...props }) {
|
|
773
|
-
return /* @__PURE__ */ (0,
|
|
794
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cx("uix-stack", className), role: "status", "aria-busy": "true", ...props, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Skeleton, { variant: "text", width: `${92 - i % 3 * 14}%` }, i)) });
|
|
774
795
|
}
|
|
775
796
|
|
|
776
797
|
// src/components/Label.tsx
|
|
777
|
-
var
|
|
798
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
778
799
|
function Label({ color, dot, children, className, style, ...props }) {
|
|
779
800
|
const merged = color ? { "--label-color": color, ...style } : style;
|
|
780
|
-
return /* @__PURE__ */ (0,
|
|
781
|
-
dot && /* @__PURE__ */ (0,
|
|
801
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: cx("uix-label", className), style: merged, ...props, children: [
|
|
802
|
+
dot && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "uix-label__dot", "aria-hidden": "true" }),
|
|
782
803
|
children
|
|
783
804
|
] });
|
|
784
805
|
}
|
|
785
806
|
|
|
786
807
|
// src/components/Avatar.tsx
|
|
787
|
-
var
|
|
808
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
788
809
|
function Avatar({ size = "md", src, alt, children, status, className, ...props }) {
|
|
789
|
-
return /* @__PURE__ */ (0,
|
|
790
|
-
src ? /* @__PURE__ */ (0,
|
|
791
|
-
status && /* @__PURE__ */ (0,
|
|
810
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: cx("uix-avatar", size !== "md" && `uix-avatar--${size}`, className), ...props, children: [
|
|
811
|
+
src ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { src, alt: alt ?? "" }) : children,
|
|
812
|
+
status && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "uix-avatar__status" })
|
|
792
813
|
] });
|
|
793
814
|
}
|
|
794
815
|
function AvatarGroup({ children, className, ...props }) {
|
|
795
|
-
return /* @__PURE__ */ (0,
|
|
816
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: cx("uix-avatar-group", className), ...props, children });
|
|
796
817
|
}
|
|
797
818
|
function UserChip({ avatar, name, sub, className, children, ...props }) {
|
|
798
|
-
return /* @__PURE__ */ (0,
|
|
819
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: cx("uix-user-chip", className), ...props, children: [
|
|
799
820
|
avatar,
|
|
800
|
-
/* @__PURE__ */ (0,
|
|
801
|
-
name != null && /* @__PURE__ */ (0,
|
|
802
|
-
sub != null && /* @__PURE__ */ (0,
|
|
821
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { children: [
|
|
822
|
+
name != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "uix-user-chip__name", children: name }),
|
|
823
|
+
sub != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "uix-user-chip__sub", style: { display: "block" }, children: sub })
|
|
803
824
|
] }),
|
|
804
825
|
children
|
|
805
826
|
] });
|
|
806
827
|
}
|
|
807
828
|
|
|
808
829
|
// src/components/Comments.tsx
|
|
809
|
-
var
|
|
830
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
810
831
|
function Comments({ children, className, ...props }) {
|
|
811
|
-
return /* @__PURE__ */ (0,
|
|
832
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cx("uix-comments", className), ...props, children });
|
|
812
833
|
}
|
|
813
834
|
function Comment({ avatar, author, meta, children, className, ...props }) {
|
|
814
|
-
return /* @__PURE__ */ (0,
|
|
815
|
-
avatar ?? /* @__PURE__ */ (0,
|
|
816
|
-
/* @__PURE__ */ (0,
|
|
817
|
-
(author != null || meta != null) && /* @__PURE__ */ (0,
|
|
818
|
-
author != null && /* @__PURE__ */ (0,
|
|
835
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cx("uix-comment", className), ...props, children: [
|
|
836
|
+
avatar ?? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { "aria-hidden": "true" }),
|
|
837
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "uix-comment__body", children: [
|
|
838
|
+
(author != null || meta != null) && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "uix-comment__meta", children: [
|
|
839
|
+
author != null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "uix-comment__author", children: author }),
|
|
819
840
|
author != null && meta != null ? " \xB7 " : null,
|
|
820
841
|
meta
|
|
821
842
|
] }),
|
|
@@ -825,95 +846,95 @@ function Comment({ avatar, author, meta, children, className, ...props }) {
|
|
|
825
846
|
}
|
|
826
847
|
|
|
827
848
|
// src/components/Timeline.tsx
|
|
828
|
-
var
|
|
849
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
829
850
|
function Timeline({ children, className, ...props }) {
|
|
830
|
-
return /* @__PURE__ */ (0,
|
|
851
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cx("uix-timeline", className), ...props, children });
|
|
831
852
|
}
|
|
832
853
|
function TimelineItem({ meta, children, className, ...props }) {
|
|
833
|
-
return /* @__PURE__ */ (0,
|
|
834
|
-
/* @__PURE__ */ (0,
|
|
835
|
-
/* @__PURE__ */ (0,
|
|
836
|
-
/* @__PURE__ */ (0,
|
|
854
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cx("uix-timeline__item", className), ...props, children: [
|
|
855
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "uix-timeline__rail", children: [
|
|
856
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "uix-timeline__node" }),
|
|
857
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "uix-timeline__line" })
|
|
837
858
|
] }),
|
|
838
|
-
/* @__PURE__ */ (0,
|
|
839
|
-
meta != null && /* @__PURE__ */ (0,
|
|
859
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "uix-timeline__body", children: [
|
|
860
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "uix-timeline__meta", children: meta }),
|
|
840
861
|
children
|
|
841
862
|
] })
|
|
842
863
|
] });
|
|
843
864
|
}
|
|
844
865
|
|
|
845
866
|
// src/components/Prose.tsx
|
|
846
|
-
var
|
|
867
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
847
868
|
function Prose({ children, className, ...props }) {
|
|
848
|
-
return /* @__PURE__ */ (0,
|
|
869
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cx("uix-prose", className), ...props, children });
|
|
849
870
|
}
|
|
850
871
|
function Note({ tone, icon, children, className, ...props }) {
|
|
851
|
-
return /* @__PURE__ */ (0,
|
|
852
|
-
icon != null && /* @__PURE__ */ (0,
|
|
853
|
-
/* @__PURE__ */ (0,
|
|
872
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cx("uix-note", tone && `uix-note--${tone}`, className), ...props, children: [
|
|
873
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "uix-note__icon", children: icon }),
|
|
874
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "uix-note__body", children })
|
|
854
875
|
] });
|
|
855
876
|
}
|
|
856
877
|
|
|
857
878
|
// src/components/Popover.tsx
|
|
858
|
-
var
|
|
879
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
859
880
|
function Popover({ popover = "auto", children, className, ...props }) {
|
|
860
881
|
const popoverAttr = { popover };
|
|
861
|
-
return /* @__PURE__ */ (0,
|
|
882
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cx("uix-popover", className), ...popoverAttr, ...props, children });
|
|
862
883
|
}
|
|
863
884
|
|
|
864
885
|
// src/components/CommandPalette.tsx
|
|
865
|
-
var
|
|
886
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
866
887
|
function CommandPalette({ inputProps, children, className, ...props }) {
|
|
867
|
-
return /* @__PURE__ */ (0,
|
|
868
|
-
/* @__PURE__ */ (0,
|
|
869
|
-
/* @__PURE__ */ (0,
|
|
888
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cx("uix-cmdk", className), ...props, children: [
|
|
889
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("input", { className: "uix-cmdk__input", ...inputProps }),
|
|
890
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "uix-cmdk__list", children })
|
|
870
891
|
] });
|
|
871
892
|
}
|
|
872
893
|
function CommandGroup({ label, children }) {
|
|
873
|
-
return /* @__PURE__ */ (0,
|
|
874
|
-
label != null && /* @__PURE__ */ (0,
|
|
894
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
|
|
895
|
+
label != null && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "uix-cmdk__group", children: label }),
|
|
875
896
|
children
|
|
876
897
|
] });
|
|
877
898
|
}
|
|
878
899
|
function CommandItem({ icon, shortcut, active, children, className, ...props }) {
|
|
879
|
-
return /* @__PURE__ */ (0,
|
|
900
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cx("uix-cmdk__item", className), "data-active": active || void 0, ...props, children: [
|
|
880
901
|
icon,
|
|
881
|
-
/* @__PURE__ */ (0,
|
|
902
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children }),
|
|
882
903
|
shortcut
|
|
883
904
|
] });
|
|
884
905
|
}
|
|
885
906
|
|
|
886
907
|
// src/components/Kanban.tsx
|
|
887
|
-
var
|
|
908
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
888
909
|
function Kanban({ children, className, ...props }) {
|
|
889
|
-
return /* @__PURE__ */ (0,
|
|
910
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: cx("uix-kanban", className), ...props, children });
|
|
890
911
|
}
|
|
891
912
|
function KanbanColumn({ title, count, children, className, ...props }) {
|
|
892
|
-
return /* @__PURE__ */ (0,
|
|
893
|
-
(title != null || count != null) && /* @__PURE__ */ (0,
|
|
913
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cx("uix-kanban__col", className), ...props, children: [
|
|
914
|
+
(title != null || count != null) && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "uix-kanban__head", children: [
|
|
894
915
|
title,
|
|
895
|
-
count != null && /* @__PURE__ */ (0,
|
|
916
|
+
count != null && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "uix-kanban__count", children: count })
|
|
896
917
|
] }),
|
|
897
|
-
/* @__PURE__ */ (0,
|
|
918
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uix-kanban__body", children })
|
|
898
919
|
] });
|
|
899
920
|
}
|
|
900
921
|
function KanbanCard({ title, meta, children, className, ...props }) {
|
|
901
|
-
return /* @__PURE__ */ (0,
|
|
902
|
-
title && /* @__PURE__ */ (0,
|
|
903
|
-
meta && /* @__PURE__ */ (0,
|
|
922
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cx("uix-kanban__card", className), ...props, children: [
|
|
923
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uix-kanban__card-title", children: title }),
|
|
924
|
+
meta && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uix-kanban__card-meta", children: meta }),
|
|
904
925
|
children
|
|
905
926
|
] });
|
|
906
927
|
}
|
|
907
928
|
|
|
908
929
|
// src/components/Tree.tsx
|
|
909
|
-
var
|
|
910
|
-
var
|
|
911
|
-
var ChevronIcon2 = () => /* @__PURE__ */ (0,
|
|
930
|
+
var import_react12 = require("react");
|
|
931
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
932
|
+
var ChevronIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M2 4l4 4 4-4" }) });
|
|
912
933
|
function TreeNode({ node, expanded, selected, onToggle, onSelect, level = 0 }) {
|
|
913
934
|
const hasChildren = Array.isArray(node.children) && node.children.length > 0;
|
|
914
935
|
const isExpanded = expanded.has(node.id);
|
|
915
|
-
return /* @__PURE__ */ (0,
|
|
916
|
-
/* @__PURE__ */ (0,
|
|
936
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("li", { children: [
|
|
937
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
917
938
|
"button",
|
|
918
939
|
{
|
|
919
940
|
className: "uix-tree__row",
|
|
@@ -924,13 +945,13 @@ function TreeNode({ node, expanded, selected, onToggle, onSelect, level = 0 }) {
|
|
|
924
945
|
onSelect?.(node.id);
|
|
925
946
|
},
|
|
926
947
|
children: [
|
|
927
|
-
/* @__PURE__ */ (0,
|
|
928
|
-
node.icon && /* @__PURE__ */ (0,
|
|
948
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "uix-tree__toggle", children: hasChildren && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ChevronIcon2, {}) }),
|
|
949
|
+
node.icon && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": "true", children: node.icon }),
|
|
929
950
|
node.label
|
|
930
951
|
]
|
|
931
952
|
}
|
|
932
953
|
),
|
|
933
|
-
hasChildren && isExpanded && /* @__PURE__ */ (0,
|
|
954
|
+
hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ul", { children: node.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
934
955
|
TreeNode,
|
|
935
956
|
{
|
|
936
957
|
node: child,
|
|
@@ -945,7 +966,7 @@ function TreeNode({ node, expanded, selected, onToggle, onSelect, level = 0 }) {
|
|
|
945
966
|
] });
|
|
946
967
|
}
|
|
947
968
|
function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected, onToggle, onSelect, className, ...props }) {
|
|
948
|
-
const [internalExpanded, setInternalExpanded] = (0,
|
|
969
|
+
const [internalExpanded, setInternalExpanded] = (0, import_react12.useState)(defaultExpanded ?? /* @__PURE__ */ new Set());
|
|
949
970
|
const expanded = controlledExpanded ?? internalExpanded;
|
|
950
971
|
function handleToggle(id) {
|
|
951
972
|
if (!controlledExpanded) {
|
|
@@ -958,7 +979,7 @@ function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected,
|
|
|
958
979
|
}
|
|
959
980
|
onToggle?.(id);
|
|
960
981
|
}
|
|
961
|
-
return /* @__PURE__ */ (0,
|
|
982
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ul", { className: cx("uix-tree", className), role: "tree", ...props, children: nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
962
983
|
TreeNode,
|
|
963
984
|
{
|
|
964
985
|
node,
|
|
@@ -985,6 +1006,8 @@ function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected,
|
|
|
985
1006
|
CommandPalette,
|
|
986
1007
|
Comment,
|
|
987
1008
|
Comments,
|
|
1009
|
+
DescriptionItem,
|
|
1010
|
+
DescriptionList,
|
|
988
1011
|
DetailLayout,
|
|
989
1012
|
Drawer,
|
|
990
1013
|
EmptyState,
|
package/dist/index.d.cts
CHANGED
|
@@ -162,6 +162,48 @@ interface ListItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
|
162
162
|
/** A single `.uix-list__item`. Provide `title`/`meta`, or arbitrary `children`. */
|
|
163
163
|
declare function ListItem({ title, meta, trail, leading, children, className, ...props }: ListItemProps): react.JSX.Element;
|
|
164
164
|
|
|
165
|
+
/**
|
|
166
|
+
* Key-value description list — the `uix-dl` two-column grid (label / value).
|
|
167
|
+
* The house body primitive for detail surfaces: the side-peek drawer, the
|
|
168
|
+
* record detail header, summary cards.
|
|
169
|
+
*
|
|
170
|
+
* UIx owns the LOOK + this controlled contract; the consumer owns the data —
|
|
171
|
+
* WHICH fields to show and how to format each value (a raw `sev_3` enum or an
|
|
172
|
+
* assignee UUID is the app's job to resolve into "SEV 3" / a display name
|
|
173
|
+
* before it reaches `description`). So in a Tensor peek surface:
|
|
174
|
+
*
|
|
175
|
+
* <DescriptionList items={[
|
|
176
|
+
* { term: 'State', description: <StatusPill tone="neutral">Closed</StatusPill> },
|
|
177
|
+
* { term: 'Severity', description: formatSeverity(row.severity) }, // app formats
|
|
178
|
+
* { term: 'Assignee', description: assigneeName ?? <em>Unassigned</em> },
|
|
179
|
+
* ]} />
|
|
180
|
+
*
|
|
181
|
+
* Use `items` for data-driven lists (the common case) or the `DescriptionItem`
|
|
182
|
+
* compound child for hand-authored content. Both render `<dt>`/`<dd>` pairs as
|
|
183
|
+
* direct children of the grid `<dl>`, so they align into the same columns.
|
|
184
|
+
*/
|
|
185
|
+
interface DescriptionListItem {
|
|
186
|
+
/** Stable identity for the row; falls back to the list index when omitted. */
|
|
187
|
+
id?: string;
|
|
188
|
+
term: ReactNode;
|
|
189
|
+
description: ReactNode;
|
|
190
|
+
}
|
|
191
|
+
interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
|
|
192
|
+
items?: DescriptionListItem[];
|
|
193
|
+
children?: ReactNode;
|
|
194
|
+
}
|
|
195
|
+
declare function DescriptionList({ items, children, className, ...props }: DescriptionListProps): react.JSX.Element;
|
|
196
|
+
interface DescriptionItemProps {
|
|
197
|
+
term: ReactNode;
|
|
198
|
+
children?: ReactNode;
|
|
199
|
+
}
|
|
200
|
+
/**
|
|
201
|
+
* One hand-authored row. Renders a `<dt>`/`<dd>` fragment so the pair lands as
|
|
202
|
+
* direct grid children of the enclosing `<DescriptionList>` (never wrap it in
|
|
203
|
+
* an element — that breaks the two-column alignment).
|
|
204
|
+
*/
|
|
205
|
+
declare function DescriptionItem({ term, children }: DescriptionItemProps): react.JSX.Element;
|
|
206
|
+
|
|
165
207
|
interface TabsProps {
|
|
166
208
|
variant?: 'line' | 'enclosed' | 'pill';
|
|
167
209
|
value?: string;
|
|
@@ -531,4 +573,4 @@ interface TreeProps extends Omit<HTMLAttributes<HTMLUListElement>, 'onSelect' |
|
|
|
531
573
|
}
|
|
532
574
|
declare function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected, onToggle, onSelect, className, ...props }: TreeProps): react.JSX.Element;
|
|
533
575
|
|
|
534
|
-
export { Alert, type AlertProps, type AlertTone, AppShell, type AppShellProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, CommandGroup, type CommandGroupProps, CommandItem, type CommandItemProps, CommandPalette, type CommandPaletteProps, Comment, type CommentProps, Comments, type CommentsProps, DetailLayout, type DetailLayoutProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, Field, type FieldProps, Input, InputGroup, type InputGroupProps, type InputProps, Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, type KanbanProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, LoadingState, type LoadingStateProps, Modal, type ModalProps, NavGroup, type NavGroupProps, NavItem, type NavItemProps, Note, type NoteProps, type NoteTone, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, Peek, type PeekProps, type PillTone, type PillTreatment, Popover, type PopoverProps, Progress, type ProgressProps, Prose, type ProseProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, type SelectProps, Sidebar, type SidebarProps, SidebarSection, type SidebarSectionProps, Skeleton, type SkeletonProps, type SortDirection, Spinner, type SpinnerProps, Stat, type StatProps, type StatTrend, StatusPill, type StatusPillProps, SubNavItem, type SubNavItemProps, Switch, type SwitchProps, Tab, type TabProps, Table, type TableDensity, type TableProps, TableWrap, type TableWrapProps, Tabs, type TabsProps, Td, type TdProps, Textarea, type TextareaProps, Th, type ThProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineProps, Toast, type ToastProps, type ToastTone, Toaster, type ToasterProps, Tooltip, type TooltipProps, Tr, type TrProps, Tree, type TreeNodeData, type TreeNodeProps, type TreeProps, UserChip, type UserChipProps, cx, useDialog };
|
|
576
|
+
export { Alert, type AlertProps, type AlertTone, AppShell, type AppShellProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, CommandGroup, type CommandGroupProps, CommandItem, type CommandItemProps, CommandPalette, type CommandPaletteProps, Comment, type CommentProps, Comments, type CommentsProps, DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListItem, type DescriptionListProps, DetailLayout, type DetailLayoutProps, Drawer, type DrawerProps, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, Field, type FieldProps, Input, InputGroup, type InputGroupProps, type InputProps, Kanban, KanbanCard, type KanbanCardProps, KanbanColumn, type KanbanColumnProps, type KanbanProps, Label, type LabelProps, List, ListItem, type ListItemProps, type ListProps, LoadingState, type LoadingStateProps, Modal, type ModalProps, NavGroup, type NavGroupProps, NavItem, type NavItemProps, Note, type NoteProps, type NoteTone, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, Peek, type PeekProps, type PillTone, type PillTreatment, Popover, type PopoverProps, Progress, type ProgressProps, Prose, type ProseProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Select, type SelectProps, Sidebar, type SidebarProps, SidebarSection, type SidebarSectionProps, Skeleton, type SkeletonProps, type SortDirection, Spinner, type SpinnerProps, Stat, type StatProps, type StatTrend, StatusPill, type StatusPillProps, SubNavItem, type SubNavItemProps, Switch, type SwitchProps, Tab, type TabProps, Table, type TableDensity, type TableProps, TableWrap, type TableWrapProps, Tabs, type TabsProps, Td, type TdProps, Textarea, type TextareaProps, Th, type ThProps, Timeline, TimelineItem, type TimelineItemProps, type TimelineProps, Toast, type ToastProps, type ToastTone, Toaster, type ToasterProps, Tooltip, type TooltipProps, Tr, type TrProps, Tree, type TreeNodeData, type TreeNodeProps, type TreeProps, UserChip, type UserChipProps, cx, useDialog };
|
package/dist/index.d.ts
CHANGED
|
@@ -15,6 +15,7 @@ export { Card, CardProps } from './components/Card.js';
|
|
|
15
15
|
export { PageHeader, PageHeaderProps } from './components/PageHeader.js';
|
|
16
16
|
export { DetailLayout, DetailLayoutProps } from './components/DetailLayout.js';
|
|
17
17
|
export { List, ListItem, ListItemProps, ListProps } from './components/List.js';
|
|
18
|
+
export { DescriptionItem, DescriptionItemProps, DescriptionList, DescriptionListItem, DescriptionListProps } from './components/DescriptionList.js';
|
|
18
19
|
export { Tab, TabProps, Tabs, TabsProps } from './components/Tabs.js';
|
|
19
20
|
export { AppShell, AppShellProps } from './components/AppShell.js';
|
|
20
21
|
export { NavGroup, NavGroupProps, NavItem, NavItemProps, Sidebar, SidebarProps, SidebarSection, SidebarSectionProps, SubNavItem, SubNavItemProps } from './components/Sidebar.js';
|
package/dist/index.js
CHANGED
|
@@ -15,6 +15,7 @@ import { Card } from "./components/Card.js";
|
|
|
15
15
|
import { PageHeader } from "./components/PageHeader.js";
|
|
16
16
|
import { DetailLayout } from "./components/DetailLayout.js";
|
|
17
17
|
import { List, ListItem } from "./components/List.js";
|
|
18
|
+
import { DescriptionList, DescriptionItem } from "./components/DescriptionList.js";
|
|
18
19
|
import { Tabs, Tab } from "./components/Tabs.js";
|
|
19
20
|
import { AppShell } from "./components/AppShell.js";
|
|
20
21
|
import { Sidebar, SidebarSection, NavItem, NavGroup, SubNavItem } from "./components/Sidebar.js";
|
|
@@ -51,6 +52,8 @@ export {
|
|
|
51
52
|
CommandPalette,
|
|
52
53
|
Comment,
|
|
53
54
|
Comments,
|
|
55
|
+
DescriptionItem,
|
|
56
|
+
DescriptionList,
|
|
54
57
|
DetailLayout,
|
|
55
58
|
Drawer,
|
|
56
59
|
EmptyState,
|