@apliteni/apliteni-ui 0.103.0 → 0.104.0

package/package.json

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

package/react/README.md

@@ -32,7 +32,17 @@ import { DataTable, Modal, Button } from '@apliteni/apliteni-ui/react';
 Both stylesheets. The React one adds what React's own components need — it carries no tokens, no
 reset and none of the kit's control CSS, so it cannot stand in for the first import.
 
-Components: `Success`, `SuccessPanel`, `SuccessCheck`, `Checkbox`, `Switch`, `SearchField`, `EmptyState`, `DataTable`, `Pagination`, `StatBand`, `Modal`, `Confirm`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Tooltip`, `Snippet`, `Tabs`, `Button`, `Badge`, `Pill`, `StatusDot`, `Card`, `Callout`, `Icon`.
+Components: `Success`, `SuccessPanel`, `SuccessCheck`, `Checkbox`, `Switch`, `SearchField`, `EmptyState`, `DataTable`, `Pagination`, `StatBand`, `Modal`, `Confirm`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Tooltip`, `Snippet`, `Segmented`, `Tabs`, `Button`, `Badge`, `Pill`, `StatusDot`, `Card`, `Callout`, `Icon`.
+
+`Segmented` is a controlled choice toolbar: pass `options`, `value`, `onChange`,
+and a `label` for its accessible name. `size="sm"` compacts it, `block` makes it
+fill its container, and `appearance="underline"` draws the underline strip instead
+of the pill track; omit all three for the standard pill. Options support
+`ariaLabel` and `disabled`; `disabled` on the toolbar disables every choice. What
+each presentation guarantees is in
+docs/components.md#the-rest-of-the-react-surface.
+Reach for it when a choice filters or switches a view in place; use `Tabs` when the
+choice owns a panel, and links when it changes the page.
 
 `Pill` renders metadata with the existing pill spacing. Omit `variant` for neutral
 metadata or use `live` or `soon`. Its children accept React content.

package/react/dist/index.d.ts

@@ -545,9 +545,11 @@ type SegmentedProps = {
     onChange: (value: string) => void;
     label: string;
     appearance?: 'pill' | 'underline';
+    size?: 'sm';
+    block?: boolean;
     disabled?: boolean;
 };
-declare function Segmented({ options, value, onChange, label, appearance, disabled }: SegmentedProps): react.JSX.Element;
+declare function Segmented({ options, value, onChange, label, appearance, size, block, disabled }: SegmentedProps): react.JSX.Element;
 
 type Filter = {
     id: string;

package/react/dist/index.js

@@ -2519,10 +2519,10 @@ function RowIdentity({ symbol, name, logo, href }) {
 // src/Segmented.tsx
 import { segmentedNextIndex } from "@apliteni/apliteni-ui";
 import { jsx as jsx23 } from "react/jsx-runtime";
-function Segmented({ options, value, onChange, label, appearance = "pill", disabled = false }) {
+function Segmented({ options, value, onChange, label, appearance = "pill", size, block = false, disabled = false }) {
   const enabled = options.filter((o) => !o.disabled);
   const tabValue = enabled.some((o) => o.value === value) ? value : enabled[0]?.value;
-  return /* @__PURE__ */ jsx23("div", { className: `ui-seg${appearance === "underline" ? " ui-seg--underline" : ""}`, role: "toolbar", "aria-label": label, children: options.map((option) => /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx23("div", { className: `ui-seg${size === "sm" ? " ui-seg--sm" : ""}${block ? " ui-seg--block" : ""}${appearance === "underline" ? " ui-seg--underline" : ""}`, role: "toolbar", "aria-label": label, children: options.map((option) => /* @__PURE__ */ jsx23(
     "button",
     {
       type: "button",

package/src/styles/segmented.css

@@ -114,6 +114,7 @@
    box. #527
    why: guidelines/layout-and-density.md, the spacing scale */
 .ui-seg--underline button { position: relative; border-radius: var(--radius-sm); padding: var(--space-3); min-height: var(--tap-min, 44px); white-space: normal; overflow-wrap: anywhere; font-weight: var(--weight-medium); }
+.ui-seg--underline.ui-seg--sm button { padding: var(--space-3); min-height: var(--tap-min, 44px); }
 /* The chosen tab is its label and one bar under it: no plate, no hairline, no
    upright rail — those read as a list-row grip. #527 r31. The `outline: 0` that
    stood here cancelled the accent outline the pill rule gave every chosen button;