@apliteni/apliteni-ui 0.41.5 → 0.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.41.5",
+  "version": "0.42.0",
   "workspaces": [
     "react"
   ],

package/react/README.md

@@ -73,8 +73,7 @@ focus is already back on the opener and the dialog takes no clicks.
 A panel that slides in from an edge of the screen over a scrim. It renders the vanilla
 `drawer()` markup, class for class, so it looks and moves like the kit's drawer, and like
 `Pagination` its styles come from `@apliteni/apliteni-ui/css` rather than from this bundle.
-Group what goes inside it the way `drawerSection()` does — a heading over a `<dl>` of label
-and value rows — rather than in cards; the rules are on Guidelines / Drawers.
+Group its contents with `DrawerSection` and `KeyValueList`; see Guidelines / Drawers.
 
 ```tsx
 <Drawer open={open} title="Transaction" onClose={() => setOpen(false)}
@@ -292,3 +291,32 @@ Clearing the page-jump box, or typing into it and then pressing a step, does not
 page.
 
 `pageSize` defaults to `DEFAULT_PAGE_SIZE` (100). **Breaking:** it used to default to 4.
+
+## KeyValueList and DrawerSection
+
+KeyValueList displays one record’s facts with labels beside their values. Pass rows
+with a label and a React value. Set `columns={2}` to show two label-value pairs on
+each line. Null and undefined values are displayed as an em dash. Boolean values
+are displayed as `false` or `true`, zero remains visible, and strings are preserved.
+Set `redacted` on a row to display “Hidden” with an eye-off icon without rendering
+the value. Below 560px, each label appears above its value, and the layout
+changes to one column.
+
+DrawerSection groups content under a heading and adds a hairline between adjacent
+sections. Its `headingLevel` defaults to 3. Import both the kit CSS and the React
+CSS. Use a table for figures that readers need to compare down a column.
+
+```tsx
+import { DrawerSection, KeyValueList } from '@apliteni/apliteni-ui/react';
+import '@apliteni/apliteni-ui/css';
+import '@apliteni/apliteni-ui/react/css';
+
+<DrawerSection title="Transaction">
+  <KeyValueList rows={[
+    { label: 'Reference', value: <a href="/invoices/1001">INV-1001</a> },
+    { label: 'Amount', value: '€ 1,240.00' },
+    { label: 'Account', redacted: true },
+    { label: 'Note' },
+  ]} />
+</DrawerSection>
+```

package/react/dist/index.css

@@ -114,3 +114,31 @@
     transition: none;
   }
 }
+
+/* src/KeyValueList.css */
+.ui-drawer__rows.ui-kv {
+  grid-template-columns: calc(var(--space-6) * 5) minmax(0, 1fr);
+}
+.ui-drawer__rows.ui-kv--two-columns {
+  grid-template-columns: repeat(2, calc(var(--space-6) * 5) minmax(0, 1fr));
+}
+.ui-kv__hidden {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  color: var(--text);
+}
+.ui-kv__hidden svg {
+  width: var(--space-4);
+  height: var(--space-4);
+  stroke-width: 2.25;
+}
+@media (max-width: 560px) {
+  .ui-drawer__rows.ui-kv {
+    grid-template-columns: minmax(0, 1fr);
+    row-gap: var(--space-3);
+  }
+  .ui-kv > .ui-drawer__row {
+    display: block;
+  }
+}

package/react/dist/index.d.ts

@@ -425,7 +425,23 @@ type FilterBarProps = {
 };
 declare function FilterBar(props: FilterBarProps): react.JSX.Element;
 
+type KeyValueRow = {
+    label: string;
+    value?: ReactNode;
+    redacted?: boolean;
+};
+type KeyValueListProps = Omit<ComponentPropsWithoutRef<'dl'>, 'children'> & {
+    rows: readonly KeyValueRow[];
+    columns?: 1 | 2;
+};
+declare function KeyValueList({ rows, columns, className, ...rest }: KeyValueListProps): react.JSX.Element;
+type DrawerSectionProps = Omit<ComponentPropsWithoutRef<'section'>, 'title'> & {
+    title?: ReactNode;
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+};
+declare function DrawerSection({ title, headingLevel, className, children, ...rest }: DrawerSectionProps): react.JSX.Element;
+
 declare const PAGE_SIZES: readonly number[];
 declare const DEFAULT_PAGE_SIZE: number;
 
-export { BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Card, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, type Filter, FilterBar, type FilterBarProps, Icon, Modal, type ModalProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, RowIdentity, type RowIdentityProps, type SegmentOption, Segmented, type SegmentedProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, type TableSort, sortTableRows };
+export { BackLink, type BackLinkOwnProps, type BackLinkProps, Badge, BusyRegion, type BusyRegionProps, Button, type ButtonProps, Card, type Column, type CommandGroup, type CommandItem, CommandPalette, type CommandPaletteProps, DEFAULT_PAGE_SIZE, DataTable, type DataTableProps, DeltaValue, type DeltaValueProps, Denied, type DeniedProps, Drawer, type DrawerProps, DrawerSection, type DrawerSectionProps, Dropdown, type DropdownBadge, type DropdownEntry, type DropdownItem, type DropdownProps, type DropdownRowProps, type DropdownSearch, type DropdownSection, type DropdownSeparator, type Filter, FilterBar, type FilterBarProps, Icon, KeyValueList, type KeyValueListProps, type KeyValueRow, Modal, type ModalProps, NumericValue, type NumericValueProps, PAGE_SIZES, Pagination, type PaginationProps, RowIdentity, type RowIdentityProps, type SegmentOption, Segmented, type SegmentedProps, Skeleton, type SkeletonProps, SkeletonTable, type SkeletonTableProps, StatBand, type StatBandProps, type StatDelta, type StatFigure, type StatTone, type StatVariant, type TableSort, sortTableRows };

package/react/dist/index.js

@@ -1685,6 +1685,30 @@ function FilterBar(props) {
   return /* @__PURE__ */ jsx16("div", { ref: host, dangerouslySetInnerHTML: initial.current });
 }
 
+// src/KeyValueList.tsx
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+function detail({ value, redacted }) {
+  if (redacted) return /* @__PURE__ */ jsxs13("span", { className: "ui-kv__hidden", children: [
+    /* @__PURE__ */ jsx17(Icon, { name: "eyeOff" }),
+    "Hidden"
+  ] });
+  if (value == null) return "\u2014";
+  return typeof value === "boolean" ? String(value) : value;
+}
+function KeyValueList({ rows, columns = 1, className, ...rest }) {
+  return /* @__PURE__ */ jsx17("dl", { ...rest, className: ["ui-drawer__rows", "ui-kv", columns === 2 && "ui-kv--two-columns", className].filter(Boolean).join(" "), children: rows.map((row, index) => /* @__PURE__ */ jsxs13("div", { className: "ui-drawer__row", children: [
+    /* @__PURE__ */ jsx17("dt", { children: row.label }),
+    /* @__PURE__ */ jsx17("dd", { children: detail(row) })
+  ] }, index)) });
+}
+function DrawerSection({ title, headingLevel = 3, className, children, ...rest }) {
+  const Heading = `h${headingLevel}`;
+  return /* @__PURE__ */ jsxs13("section", { ...rest, className: ["ui-drawer__section", className].filter(Boolean).join(" "), children: [
+    title != null && /* @__PURE__ */ jsx17(Heading, { className: "ui-drawer__section-title", children: title }),
+    children
+  ] });
+}
+
 // src/index.ts
 var PAGE_SIZES = KIT_PAGE_SIZES;
 var DEFAULT_PAGE_SIZE3 = KIT_DEFAULT_PAGE_SIZE;
@@ -1700,9 +1724,11 @@ export {
   DeltaValue,
   Denied,
   Drawer,
+  DrawerSection,
   Dropdown,
   FilterBar,
   Icon,
+  KeyValueList,
   Modal,
   NumericValue,
   PAGE_SIZES,