@apliteni/apliteni-ui 0.116.0 → 0.118.0

package/guidelines/dense-tables.md

@@ -60,6 +60,20 @@
 
 **Don't:** Hide units in muted text or make readers guess what an abbreviation means.
 
+## Size the table to its content
+
+<!-- rule: content-width -->
+
+**Why:** Large gaps separate labels from values.
+
+**Rule:** Limit each column to its longest cell plus the cell inset.
+
+**Do:** Keep amounts beside their references in a two-column table.
+
+**Don't:** Stretch short tables across the page.
+
+**Except:** A text column intended to grow, such as a name or title, takes the remaining width.
+
 ## Scroll instead of squeezing
 
 <!-- rule: overflow -->

package/package.json

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

package/react/README.md

@@ -636,7 +636,7 @@ AppShell includes the kit’s rail and top band. Pass the current router pathnam
 
 ## Tooltip
 
-Tooltip accepts text and inline children, without nested controls. Hovering or focusing opens it; pressing Escape, moving focus away, or moving the mouse away closes it. On touch devices, tapping toggles it. It uses the kit’s tooltip styles and moves below the trigger when there is not enough space above. Keep the same information elsewhere on the page.
+Tooltip accepts `text` (a label shorthand), or `label`, `value`, and `detail`, with inline children without nested controls. Hovering or focusing opens it; pressing Escape, moving focus away, or moving the mouse away closes it. On touch devices, tapping toggles it. It uses the kit’s tooltip styles and moves below the trigger when there is not enough space above. Keep the same information elsewhere on the page.
 
 ```tsx
 <Tooltip text="Updated daily">Balance</Tooltip>

package/react/dist/index.css

@@ -317,6 +317,12 @@
     transition: none;
   }
 }
+.rx-table-pager:has(.ui-pager) {
+  margin-top: var(--space-4);
+}
+.rx-table-pager:not(:has(.ui-pager)) {
+  display: none;
+}
 
 /* src/DatePicker.css */
 .ui-datepicker__panel {

package/react/dist/index.d.ts

@@ -23,7 +23,7 @@ declare const Switch: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<H
 } & react.RefAttributes<HTMLInputElement>>;
 
 type ButtonOptions = {
-    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'link';
     size?: 'xs' | 'sm' | 'md' | 'lg';
     icon?: string;
     /** Decorative caller artwork, before the label; takes precedence over icon. */
@@ -581,6 +581,7 @@ type FilterBarProps = {
     filters: Filter[];
     label?: string;
     clearLabel?: string;
+    clearVariant?: 'ghost' | 'secondary' | 'link';
     disabled?: boolean;
     busy?: boolean;
     add?: AddFilter[];
@@ -590,7 +591,7 @@ type FilterBarProps = {
     onChange: (id: string, value: string | undefined) => void;
     onAdd?: (id: string, value: string | undefined) => void;
 };
-declare function FilterBar({ filters, label, clearLabel, add, addLabel, disabled, busy, onRemove, onClear, onChange, onAdd }: FilterBarProps): react.JSX.Element;
+declare function FilterBar({ filters, label, clearLabel, clearVariant, add, addLabel, disabled, busy, onRemove, onClear, onChange, onAdd }: FilterBarProps): react.JSX.Element;
 
 type KeyValueRow = {
     label: string;
@@ -836,11 +837,15 @@ type ThemeToggleProps = {
 declare function ThemeToggle({ labelled }: ThemeToggleProps): react.JSX.Element;
 
 type TooltipProps = {
-    text: string;
+    text?: string;
+    label?: string;
+    value?: string;
+    detail?: string;
+    placement?: 'top' | 'bottom';
     /** Inline content without nested controls. */
     children: ReactNode;
 };
-declare function Tooltip({ text, children }: TooltipProps): react.JSX.Element;
+declare function Tooltip({ text, label, value, detail, placement, children }: TooltipProps): react.JSX.Element;
 
 type SuccessMark = 'line' | 'circled';
 type SuccessCheckProps = Omit<SVGAttributes<SVGSVGElement>, 'children'> & {