ionbase-ui 0.59.0 → 0.70.0

package/dist/styles/tool-call.css

@@ -0,0 +1,202 @@
+/*
+ * ToolCall
+ *
+ * Drawn in Figma as `Tool Call` (1392:391), from this file. The header row is AgentActivity's step one rung up —
+ * same glyphs, same status colours, read from the same module — and the
+ * disclosure chevron and its rotation are Accordion's. The error strip is
+ * Alert's subtle error pairing.
+ *
+ * The card surface is on the BLOCK, not an inner wrapper, so the contrast gate
+ * resolves the header's translucent `surface/hover` against a real ground.
+ * drawer.css records what happens otherwise: the pairing is skipped, silently.
+ */
+.ion-tool-call {
+  overflow: hidden;
+  border: var(--border-width-default) solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  background-color: var(--surface-default);
+  color: var(--text-default);
+  font-family: var(--font-family-sans);
+  font-size: var(--type-body-sm);
+  line-height: var(--type-body-sm-line-height);
+}
+
+.ion-tool-call__header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+  width: 100%;
+  margin: 0;
+  padding: var(--spacing-8) var(--spacing-12);
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+}
+
+button.ion-tool-call__header {
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  /* The colour is restated so the contrast gate has a pair to measure; with
+   * the background alone the hover state was never checked. */
+  button.ion-tool-call__header:hover {
+    background-color: var(--surface-hover);
+    color: var(--text-default);
+  }
+}
+
+button.ion-tool-call__header:focus-visible {
+  outline: var(--border-width-thick) solid var(--border-focus);
+  outline-offset: calc(-1 * var(--border-width-thick));
+}
+
+.ion-tool-call__glyph {
+  display: inline-flex;
+  flex: none;
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+  color: var(--icon-tertiary);
+}
+
+.ion-tool-call__glyph svg,
+.ion-tool-call__chevron svg {
+  width: 100%;
+  height: 100%;
+}
+
+.ion-tool-call__heading {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  flex: 1 1 auto;
+  column-gap: var(--spacing-8);
+  min-width: 0;
+}
+
+.ion-tool-call__title {
+  font-weight: var(--font-weight-medium);
+}
+
+.ion-tool-call__name {
+  color: var(--text-tertiary);
+  font-family: var(--font-family-mono);
+  font-size: var(--type-caption);
+  line-height: var(--type-caption-line-height);
+  overflow-wrap: anywhere;
+}
+
+.ion-tool-call__duration {
+  flex: none;
+  color: var(--text-tertiary);
+  font-size: var(--type-caption);
+  line-height: var(--type-caption-line-height);
+  font-variant-numeric: tabular-nums;
+}
+
+.ion-tool-call__chevron {
+  display: inline-flex;
+  flex: none;
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+  color: var(--icon-secondary);
+  transition: transform var(--ion-duration-base) var(--ion-ease-out);
+}
+
+.ion-tool-call--expanded .ion-tool-call__chevron {
+  transform: rotate(180deg);
+}
+
+/*
+ * Outside the disclosure on purpose: the failure is the one part of a call a
+ * reader must not have to click to find.
+ */
+.ion-tool-call__error {
+  padding: var(--spacing-8) var(--spacing-12);
+  border-top: var(--border-width-default) solid var(--border-error-subtle);
+  background-color: var(--surface-error-subtle);
+  color: var(--text-error);
+}
+
+.ion-tool-call__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-12);
+  padding: var(--spacing-12);
+  border-top: var(--border-width-default) solid var(--border-subtle);
+}
+
+.ion-tool-call__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
+
+.ion-tool-call__label {
+  color: var(--text-secondary);
+  font-size: var(--type-caption);
+  line-height: var(--type-caption-line-height);
+  font-weight: var(--font-weight-medium);
+}
+
+/*
+ * Wraps rather than scrolling sideways: a long string in a JSON value would
+ * otherwise force a horizontal scrollbar on a phone. Height is capped, and the
+ * element is focusable (tabIndex 0 in the component) so the cap never hides
+ * content from a keyboard user.
+ */
+.ion-tool-call__payload {
+  max-height: 16rem;
+  margin: 0;
+  padding: var(--spacing-8);
+  overflow: auto;
+  border-radius: var(--radius-sm);
+  background-color: var(--surface-muted);
+  color: var(--text-default);
+  font-family: var(--font-family-mono);
+  font-size: var(--type-caption);
+  line-height: var(--type-caption-line-height);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.ion-tool-call__payload:focus-visible {
+  outline: var(--border-width-thick) solid var(--border-focus);
+  outline-offset: 2px;
+}
+
+/* Status: the colour is the second signal — glyph shape and hidden text first. */
+.ion-tool-call--active .ion-tool-call__glyph {
+  color: var(--icon-primary);
+  animation: ion-tool-call-spin 1.2s linear infinite;
+}
+
+.ion-tool-call--done .ion-tool-call__glyph {
+  color: var(--icon-success);
+}
+
+.ion-tool-call--failed .ion-tool-call__glyph {
+  color: var(--icon-error);
+}
+
+.ion-tool-call--skipped .ion-tool-call__title {
+  color: var(--text-tertiary);
+}
+
+@keyframes ion-tool-call-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ion-tool-call--active .ion-tool-call__glyph {
+    animation: none;
+  }
+
+  .ion-tool-call__chevron {
+    transition: none;
+  }
+}

package/llms.txt

@@ -2,7 +2,7 @@
 
 > IonBase is a React design system for enterprise SaaS, built to be consumed by an agent rather than read by a developer. Every component ships a machine-readable contract carrying the judgement a type signature cannot: when to use it, what to use instead, the anti-patterns, and what it guarantees for accessibility versus what it requires of you.
 
-Version 0.59.0. 58 components.
+Version 0.70.0. 70 components.
 
 ## Read these, in this order
 
@@ -13,7 +13,7 @@ Both are importable: `ionbase-ui/meta/index` and `ionbase-ui/meta/<Name>.json`.
 
 ## Components
 
-`Accordion`, `AccordionItem`, `AgentActivity`, `AgentActivityStep`, `AgentStop`, `Alert`, `ApprovalGate`, `Avatar`, `AvatarGradient`, `AvatarGroup`, `Badge`, `Breadcrumb`, `BreadcrumbItem`, `Button`, `Checkbox`, `Citation`, `CitationList`, `CitationListItem`, `Combobox`, `ConfidenceIndicator`, `Divider`, `Drawer`, `EmptyState`, `FileUpload`, `FullCard`, `Header`, `Icon`, `Input`, `Link`, `Logo`, `LogoMark`, `Menu`, `MenuItem`, `Modal`, `NavItem`, `Pagination`, `PhoneInput`, `Popover`, `ProgressBar`, `Radio`, `RadioGroup`, `ScrollProgress`, `Select`, `Skeleton`, `Spinner`, `StreamingText`, `TabItem`, `Table`, `TableBody`, `TableCell`, `TableHead`, `TableRow`, `Tabs`, `Textarea`, `Toast`, `ToastProvider`, `Toggle`, `Tooltip`
+`Accordion`, `AccordionItem`, `AgentActivity`, `AgentActivityStep`, `AgentStop`, `Alert`, `ApprovalGate`, `Avatar`, `AvatarGradient`, `AvatarGroup`, `Badge`, `Breadcrumb`, `BreadcrumbItem`, `Button`, `Checkbox`, `Citation`, `CitationList`, `CitationListItem`, `Combobox`, `ConfidenceIndicator`, `DatePicker`, `DateRangePicker`, `Divider`, `Drawer`, `EmptyState`, `FileUpload`, `FullCard`, `Header`, `Icon`, `Input`, `Link`, `Logo`, `LogoMark`, `Menu`, `MenuItem`, `Modal`, `NavItem`, `NumberInput`, `Pagination`, `PhoneInput`, `Popover`, `ProgressBar`, `PromptInput`, `Radio`, `RadioGroup`, `ScrollProgress`, `SegmentedControl`, `SegmentedControlItem`, `Select`, `Sidebar`, `SidebarItem`, `SidebarSection`, `Skeleton`, `Spinner`, `Stepper`, `StepperStep`, `StreamingText`, `TabItem`, `Table`, `TableBody`, `TableCell`, `TableHead`, `TableRow`, `Tabs`, `Textarea`, `Toast`, `ToastProvider`, `Toggle`, `ToolCall`, `Tooltip`
 
 ## Patterns
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ionbase-ui",
-  "version": "0.59.0",
+  "version": "0.70.0",
   "description": "IonBase Design System — accessible React components, styles and design tokens in one package",
   "license": "MIT",
   "type": "module",
@@ -60,6 +60,23 @@
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "dev": "tsc --watch",
+    "build": "node scripts/sync-tokens.mjs && tsc --build --force && node scripts/copy-css.mjs && node scripts/verify-client-boundaries.mjs && node scripts/verify-contrast.mjs && node scripts/build-meta.mjs && node scripts/verify-meta.mjs && node scripts/build-patterns.mjs && node scripts/verify-figma-map.mjs && node scripts/build-figma-descriptions.mjs && node scripts/verify-figma-descriptions.mjs && node scripts/build-llms.mjs",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint . && stylelint \"src/styles/*.css\"",
+    "format": "prettier --check .",
+    "icons:verify": "node scripts/verify-icons.mjs",
+    "meta:build": "node scripts/build-meta.mjs",
+    "meta:verify": "node scripts/build-meta.mjs && node scripts/verify-meta.mjs",
+    "contrast": "node scripts/verify-contrast.mjs",
+    "contrast:list": "node scripts/verify-contrast.mjs --list",
+    "llms": "node scripts/build-llms.mjs",
+    "patterns": "node scripts/build-patterns.mjs",
+    "figma:map": "node scripts/verify-figma-map.mjs",
+    "figma:descriptions": "node scripts/build-figma-descriptions.mjs",
+    "figma:applied": "node scripts/record-figma-descriptions.mjs"
+  },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
@@ -68,6 +85,7 @@
     "eslint": "^8.57.0 || ^9.0.0"
   },
   "dependencies": {
+    "@internationalized/date": "^3.12.2",
     "@react-stately/collections": "^3.13.1",
     "@react-types/shared": "^3.36.0",
     "react-aria": "^3.34.0",
@@ -88,22 +106,5 @@
     "eslint": {
       "optional": true
     }
-  },
-  "scripts": {
-    "dev": "tsc --watch",
-    "build": "node scripts/sync-tokens.mjs && tsc --build --force && node scripts/copy-css.mjs && node scripts/verify-client-boundaries.mjs && node scripts/verify-contrast.mjs && node scripts/build-meta.mjs && node scripts/verify-meta.mjs && node scripts/build-patterns.mjs && node scripts/verify-figma-map.mjs && node scripts/build-figma-descriptions.mjs && node scripts/verify-figma-descriptions.mjs && node scripts/build-llms.mjs",
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint . && stylelint \"src/styles/*.css\"",
-    "format": "prettier --check .",
-    "icons:verify": "node scripts/verify-icons.mjs",
-    "meta:build": "node scripts/build-meta.mjs",
-    "meta:verify": "node scripts/build-meta.mjs && node scripts/verify-meta.mjs",
-    "contrast": "node scripts/verify-contrast.mjs",
-    "contrast:list": "node scripts/verify-contrast.mjs --list",
-    "llms": "node scripts/build-llms.mjs",
-    "patterns": "node scripts/build-patterns.mjs",
-    "figma:map": "node scripts/verify-figma-map.mjs",
-    "figma:descriptions": "node scripts/build-figma-descriptions.mjs",
-    "figma:applied": "node scripts/record-figma-descriptions.mjs"
   }
-}
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2026 IonBase
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.