npm - ionbase-ui - Versions diffs - 0.76.0 → 0.81.1 - Mend

ionbase-ui 0.76.0 → 0.81.1

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.

Files changed (91) hide show

package/dist/components/Card.d.ts +61 -0
package/dist/components/Card.d.ts.map +1 -0
package/dist/components/Card.js +37 -0
package/dist/components/Card.js.map +1 -0
package/dist/components/CommandPalette.d.ts +76 -0
package/dist/components/CommandPalette.d.ts.map +1 -0
package/dist/components/CommandPalette.js +194 -0
package/dist/components/CommandPalette.js.map +1 -0
package/dist/components/DateField.d.ts +14 -0
package/dist/components/DateField.d.ts.map +1 -1
package/dist/components/DateField.js +1 -1
package/dist/components/DateField.js.map +1 -1
package/dist/components/DatePicker.d.ts +1 -1
package/dist/components/DatePicker.d.ts.map +1 -1
package/dist/components/DatePicker.js +14 -6
package/dist/components/DatePicker.js.map +1 -1
package/dist/components/DateRangePicker.d.ts +1 -1
package/dist/components/DateRangePicker.d.ts.map +1 -1
package/dist/components/DateRangePicker.js +14 -6
package/dist/components/DateRangePicker.js.map +1 -1
package/dist/components/Kbd.d.ts +45 -0
package/dist/components/Kbd.d.ts.map +1 -0
package/dist/components/Kbd.js +45 -0
package/dist/components/Kbd.js.map +1 -0
package/dist/components/Table.d.ts +18 -0
package/dist/components/Table.d.ts.map +1 -1
package/dist/components/Table.js +14 -3
package/dist/components/Table.js.map +1 -1
package/dist/components/TagGroup.d.ts +51 -0
package/dist/components/TagGroup.d.ts.map +1 -0
package/dist/components/TagGroup.js +84 -0
package/dist/components/TagGroup.js.map +1 -0
package/dist/components/TimeField.d.ts +72 -0
package/dist/components/TimeField.d.ts.map +1 -0
package/dist/components/TimeField.js +102 -0
package/dist/components/TimeField.js.map +1 -0
package/dist/components/index.d.ts +14 -1
package/dist/components/index.d.ts.map +1 -1
package/dist/components/index.js +6 -0
package/dist/components/index.js.map +1 -1
package/dist/components/iso-time.d.ts +23 -0
package/dist/components/iso-time.d.ts.map +1 -0
package/dist/components/iso-time.js +34 -0
package/dist/components/iso-time.js.map +1 -0
package/dist/components/shortcut.d.ts +19 -0
package/dist/components/shortcut.d.ts.map +1 -0
package/dist/components/shortcut.js +122 -0
package/dist/components/shortcut.js.map +1 -0
package/dist/components/use-table-sort.d.ts +38 -0
package/dist/components/use-table-sort.d.ts.map +1 -0
package/dist/components/use-table-sort.js +33 -0
package/dist/components/use-table-sort.js.map +1 -0
package/dist/figma-descriptions.json +103 -68
package/dist/figma-map.json +343 -2
package/dist/meta/Card.json +153 -0
package/dist/meta/Checkbox.json +2 -2
package/dist/meta/CommandPalette.json +178 -0
package/dist/meta/DatePicker.json +5 -4
package/dist/meta/DateRangePicker.json +3 -2
package/dist/meta/Kbd.json +97 -0
package/dist/meta/Radio.json +2 -2
package/dist/meta/RadioGroup.json +2 -2
package/dist/meta/Table.json +4 -1
package/dist/meta/TableBody.json +3 -0
package/dist/meta/TableCell.json +49 -5
package/dist/meta/TableHead.json +3 -0
package/dist/meta/TableRow.json +3 -0
package/dist/meta/Tag.json +54 -0
package/dist/meta/TagGroup.json +211 -0
package/dist/meta/TimeField.json +224 -0
package/dist/meta/Toggle.json +2 -2
package/dist/meta/components.json +1014 -38
package/dist/meta/contrast.json +1133 -6
package/dist/meta/index.json +86 -12
package/dist/meta/patterns/DataTable.json +27 -3
package/dist/meta/patterns/PageShell.json +15 -2
package/dist/meta/patterns/index.json +7 -3
package/dist/styles/agent-activity.css +4 -2
package/dist/styles/approval-gate.css +4 -3
package/dist/styles/card.css +75 -0
package/dist/styles/citation.css +4 -2
package/dist/styles/command-palette.css +250 -0
package/dist/styles/confidence-indicator.css +2 -2
package/dist/styles/index.css +5 -0
package/dist/styles/kbd.css +47 -0
package/dist/styles/streaming-text.css +3 -2
package/dist/styles/table.css +51 -0
package/dist/styles/tag-group.css +172 -0
package/dist/styles/time-field.css +31 -0
package/llms.txt +2 -2
package/package.json +1 -1

package/dist/meta/TagGroup.json ADDED Viewed

@@ -0,0 +1,211 @@
+{
+  "name": "TagGroup",
+  "source": "src/components/TagGroup.tsx",
+  "propsType": "TagGroupProps",
+  "description": "TagGroup — labels a person applied and can take away: active filters, the\nlabels on a record, the recipients of a message.\n\nNOT A BADGE\n\nA Badge reports a state the system decided — Failing, Paid. A Tag is a\nchoice someone made, which is why it is removable and why it is neutral:\ncolouring tags by intent would make \"Status: Failing\" as a filter look like\nthe agent is failing.\n\nWHAT REACT ARIA GIVES IT\n\n`useTagGroup` makes the group one tab stop with arrow keys between tags, a\nremove button per tag named \"Remove <tag>\", and Delete / Backspace to remove\nthe focused one. When a tag goes, focus moves to its neighbour. The one case\nReact Aria leaves open is the last tag: focus would fall to <body>, so the\ngroup takes it instead and reads out `emptyLabel`.\n\nNo selection: a chip that toggles on and off is a SegmentedControl or a\nCheckbox, which already say \"selected\" the way a screen reader expects.",
+  "import": "import { TagGroup } from 'ionbase-ui';",
+  "status": "stable",
+  "since": "0.79.0",
+  "summary": "Labels a person applied and can take away: active filters, the labels on a record, recipients. Neutral and removable, unlike Badge.",
+  "useWhen": [
+    "showing which filters are applied, each removable on its own",
+    "the labels or categories someone attached to a record",
+    "a set of chosen values — recipients, assignees — shown after they are picked"
+  ],
+  "useInstead": [
+    {
+      "when": "it is a status the system reports — Failing, Paid, Draft",
+      "use": "Badge"
+    },
+    {
+      "when": "the chips toggle on and off rather than being removed",
+      "use": "SegmentedControl"
+    },
+    {
+      "when": "several options can be switched on at once from a fixed list",
+      "use": "Checkbox"
+    }
+  ],
+  "composition": {
+    "order": [
+      "TagGroup",
+      "Tag"
+    ],
+    "note": "Tag is react-stately's collection Item: `key` identifies it and is what `onRemove` hands back, children are its label. Pass `items` and a render function for a list that changes.",
+    "example": "<TagGroup label=\"Active filters\" onRemove={(keys) => drop(keys)}><Tag key=\"status\">Status: Failing</Tag><Tag key=\"team\">Team: Finance</Tag></TagGroup>"
+  },
+  "variants": {
+    "size": {
+      "sm": {
+        "use": "the default — filter rows, table toolbars, dense record headers"
+      },
+      "md": {
+        "use": "a group that is the main content of its area, or sits beside md controls"
+      }
+    }
+  },
+  "a11y": {
+    "guarantees": [
+      "the group is one tab stop; arrow keys move between tags",
+      "each remove button is named \"Remove\" plus the tag's label, so a screen reader hears which one",
+      "Delete or Backspace on a focused tag removes it, and focus moves to its neighbour",
+      "removing the last tag moves focus to the group, which reads `emptyLabel`, instead of dropping it to the page"
+    ],
+    "requires": [
+      "a `label` or `aria-label` — it names the group, so \"Remove Finance\" is heard as a filter being removed",
+      "`textValue` on a Tag whose children are not plain text",
+      "`onRemove` to drop the keys from your own list; the group removes nothing itself"
+    ],
+    "notes": [
+      "No selection. A chip that toggles is a SegmentedControl or a Checkbox, which already announce \"selected\" the way screen readers expect."
+    ]
+  },
+  "antiPatterns": [
+    {
+      "dont": "using a TagGroup for statuses",
+      "why": "tags are neutral and removable; a status is neither — use Badge"
+    },
+    {
+      "dont": "`onRemove` that does not remove the tag",
+      "why": "the button says \"Remove\", focus moves on, and the tag is still there — the one thing the control promised did not happen"
+    },
+    {
+      "dont": "a filter row with no way to clear everything at once",
+      "why": "removing six filters one by one is six targets; pair the group with a \"Clear filters\" Button"
+    }
+  ],
+  "stylesheet": "src/styles/tag-group.css",
+  "tokens": [
+    "--border-disabled",
+    "--border-subtle",
+    "--border-width-default",
+    "--border-width-thick",
+    "--font-family-sans",
+    "--font-weight-medium",
+    "--icon-default",
+    "--icon-disabled",
+    "--icon-secondary",
+    "--icon-size-2xs",
+    "--ion-duration-base",
+    "--ion-ease-out",
+    "--radius-md",
+    "--radius-sm",
+    "--radius-xs",
+    "--ring-focus",
+    "--spacing-12",
+    "--spacing-16",
+    "--spacing-20",
+    "--spacing-24",
+    "--spacing-32",
+    "--spacing-4",
+    "--spacing-6",
+    "--spacing-8",
+    "--surface-disabled",
+    "--surface-hover",
+    "--surface-subtle",
+    "--text-default",
+    "--text-disabled",
+    "--text-secondary",
+    "--text-tertiary",
+    "--type-body",
+    "--type-body-line-height",
+    "--type-body-sm",
+    "--type-body-sm-line-height"
+  ],
+  "props": {
+    "onRemove": {
+      "type": "((keys: Set<Key>) => void) | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Called with the keys of the tags to remove — from a tag's × button, or\nDelete / Backspace on a focused tag. Pass it and every tag shows a remove\nbutton; leave it out and the tags are read-only labels. The group does\nnot remove anything itself: drop the keys from your own list."
+    },
+    "size": {
+      "type": "TagGroupSize | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Figma's `Size`. Set once here, so every tag in a group matches.",
+      "values": [
+        "sm",
+        "md"
+      ],
+      "default": "sm"
+    },
+    "emptyLabel": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Shown in place of the tags when there are none — \"No filters applied\".\nWithout it an empty group renders nothing but its label."
+    },
+    "className": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "id": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "The element's unique identifier. See\n[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id)."
+    },
+    "aria-describedby": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Identifies the element (or elements) that describes the object."
+    },
+    "aria-details": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Identifies the element (or elements) that provide a detailed, extended description for the\nobject."
+    },
+    "aria-label": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Defines a string value that labels the current element."
+    },
+    "aria-labelledby": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Identifies the element (or elements) that labels the current element."
+    },
+    "children": {
+      "type": "CollectionChildren<T>",
+      "required": true,
+      "origin": "aria",
+      "description": "The contents of the collection."
+    },
+    "description": {
+      "type": "ReactNode",
+      "required": false,
+      "origin": "aria",
+      "description": "A description for the field. Provides a hint such as specific requirements for what to choose."
+    },
+    "label": {
+      "type": "ReactNode",
+      "required": false,
+      "origin": "aria",
+      "description": "The content to display as the label."
+    },
+    "items": {
+      "type": "Iterable<T> | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "Item objects in the collection."
+    },
+    "disabledKeys": {
+      "type": "Iterable<Key> | undefined",
+      "required": false,
+      "origin": "aria",
+      "description": "The item keys that are disabled. These items cannot be selected, focused, or otherwise\ninteracted with."
+    }
+  },
+  "propCounts": {
+    "own": 4,
+    "aria": 10,
+    "dom": 0,
+    "other": 0
+  }
+}

package/dist/meta/TimeField.json ADDED Viewed

@@ -0,0 +1,224 @@
+{
+  "name": "TimeField",
+  "source": "src/components/TimeField.tsx",
+  "propsType": "TimeFieldProps",
+  "description": "TimeField — a time of day, typed into segments.\n\nDatePicker's text half, for times: hour, minute and, where the locale uses\none, AM/PM — each a spinbutton that takes digits or arrow keys. The order,\nthe separator and the 12 or 24-hour clock come from the reader's locale, so\n\"2:30 PM\" and \"14:30\" are the same field and the same value.\n\nWHY NOT A TEXT INPUT OR `<input type=\"time\">`\n\nFree text means guessing whether \"2:30\" is afternoon. The native control\ncannot be styled to match the other fields, and Safari's has no picker at\nall. Segments cannot hold a time that does not exist, and every browser\ndraws them the same.\n\nNo dropdown of times. A list of 96 quarter-hours is slower to scan than two\ndigits are to type, and it makes 09:07 impossible. Where only a few times\nare allowed, that is a Select, not a TimeField.",
+  "import": "import { TimeField } from 'ionbase-ui';",
+  "status": "stable",
+  "since": "0.80.0",
+  "summary": "A time of day typed into hour, minute and AM/PM segments in the reader's own format, taking and returning a 24-hour HH:MM string.",
+  "useWhen": [
+    "the user sets a time of day — a schedule, a reminder, the start of a window",
+    "any minute is allowed, so a list of choices would be long or would leave times out",
+    "beside a DatePicker when the value is a date and a time; the two sit side by side and share one box"
+  ],
+  "useInstead": [
+    {
+      "when": "only a handful of times are allowed — delivery slots, office hours",
+      "use": "Select",
+      "why": "picking from four slots is a choice from a list, and a field that accepts any minute invites times the product will refuse"
+    },
+    {
+      "when": "the value is a duration — 30 minutes, 2 hours",
+      "use": "NumberInput",
+      "why": "a duration is an amount, not a time of day; 02:00 as a length reads as two in the morning"
+    },
+    {
+      "when": "the value is a calendar date",
+      "use": "DatePicker"
+    }
+  ],
+  "variants": {
+    "size": {
+      "sm": {
+        "use": "dense forms, table filters"
+      },
+      "md": {
+        "use": "the default"
+      },
+      "lg": {
+        "use": "prominent single-field forms"
+      }
+    },
+    "granularity": {
+      "hour": {
+        "use": "on-the-hour schedules — the minute segment is not shown"
+      },
+      "minute": {
+        "use": "the default — almost every time of day a person sets"
+      },
+      "second": {
+        "use": "logs and precise triggers; the value becomes HH:MM:SS"
+      }
+    }
+  },
+  "a11y": {
+    "guarantees": [
+      "each segment is a spinbutton that announces its own name, value and bounds — 'hour, 2, minimum 1, maximum 12' — and takes digits or arrow keys",
+      "each editable segment is its own tab stop, like DatePicker and the native time input; the separator is not",
+      "the 12 or 24-hour clock, the separator and the AM/PM wording come from the reader's locale, so '2:30 PM' and '14:30' are the same field and the same value",
+      "the segments sit in one labelled group, so the name is announced once on entry",
+      "a time that does not exist cannot be typed",
+      "a time outside `minValue`/`maxValue` turns the field invalid and names the bound in the reader's own format, without `isInvalid` — the value is kept, not silently clamped"
+    ],
+    "requires": [
+      "`label`, or `aria-label` when no visible label is rendered",
+      "a `description` saying which timezone the time is in, whenever the reader could be in a different one from the thing being scheduled"
+    ],
+    "notes": [
+      "`value` is a wall-clock time with no date and no zone. Keep the timezone as its own field or setting; a time pinned to a `Date` drifts an hour at every daylight-saving change.",
+      "The clock icon is decorative. There is no dropdown of times: two digits are faster to type than 96 quarter-hours are to scan, and a list makes 09:07 impossible."
+    ]
+  },
+  "antiPatterns": [
+    {
+      "dont": "passing a Date, a timestamp or a locale-formatted string such as \"2:30 PM\" as `value`",
+      "why": "the value is 24-hour HH:MM. A malformed value throws with the prop name rather than rendering an empty field"
+    },
+    {
+      "dont": "forcing `hourCycle={12}` for everyone",
+      "why": "a reader whose locale uses 24 hours has to translate every value, which is the misreading the segments exist to prevent. Leave it to the locale"
+    },
+    {
+      "dont": "a schedule time with no timezone anywhere on the form",
+      "why": "\"09:00\" is nine o'clock somewhere; if the reader and the workspace are in different zones, they will each assume their own"
+    },
+    {
+      "dont": "using `minValue` and `maxValue` for a window that crosses midnight",
+      "why": "22:00 to 02:00 has a minimum later than its maximum, so every time is refused; validate the window yourself and set `isInvalid`"
+    }
+  ],
+  "stylesheet": "src/styles/time-field.css",
+  "tokens": [],
+  "props": {
+    "label": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Field label. Required for a usable control — see `a11y.requires`."
+    },
+    "aria-label": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Names the field when there is no visible `label`."
+    },
+    "description": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Helper text below the field — \"In the workspace's timezone\"."
+    },
+    "errorMessage": {
+      "type": "React.ReactNode",
+      "required": false,
+      "origin": "own",
+      "description": "Replaces the helper text while the field is invalid — `isInvalid`, or its own bounds check."
+    },
+    "isInvalid": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "isDisabled": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "isReadOnly": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "isRequired": {
+      "type": "boolean | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "size": {
+      "type": "TimeFieldSize | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Matches Input's `Size` variant: Small, Medium, Large.",
+      "values": [
+        "sm",
+        "md",
+        "lg"
+      ]
+    },
+    "value": {
+      "type": "string | null | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "The time as `HH:MM` (or `HH:MM:SS`), 24-hour, whatever the reader sees.\n`null` means no time is chosen. A wall-clock reading — no date, no\ntimezone. A malformed value throws rather than rendering an empty field."
+    },
+    "defaultValue": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "The initial time, for an uncontrolled field."
+    },
+    "onChange": {
+      "type": "((value: IsoTime | null) => void) | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Fires with `HH:MM` (`HH:MM:SS` at second granularity), or `null` when cleared."
+    },
+    "minValue": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Earliest allowed time, `HH:MM`. Later is not wrapped past midnight."
+    },
+    "maxValue": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Latest allowed time, `HH:MM`."
+    },
+    "granularity": {
+      "type": "TimeFieldGranularity | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Defaults to `minute`. `second` adds a seconds segment and value.",
+      "values": [
+        "hour",
+        "minute",
+        "second"
+      ]
+    },
+    "hourCycle": {
+      "type": "12 | 24 | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "12 or 24-hour display. Leave it out: the reader's locale already knows,\nand forcing 12-hour on a 24-hour reader is the misreading this field\nexists to prevent. The value is 24-hour either way."
+    },
+    "name": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own",
+      "description": "Posts the value under this name, for an uncontrolled form."
+    },
+    "className": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "wrapperClassName": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own"
+    },
+    "id": {
+      "type": "string | undefined",
+      "required": false,
+      "origin": "own"
+    }
+  },
+  "propCounts": {
+    "own": 20,
+    "aria": 0,
+    "dom": 0,
+    "other": 0
+  }
+}

package/dist/meta/Toggle.json CHANGED Viewed

@@ -149,8 +149,8 @@
       "description": "Matches the Figma `Color` variant: Brand, Neutral, Danger.",
       "values": [
         "neutral",
-        "brand",
-        "danger"
+        "danger",
+        "brand"
       ],
       "default": "brand"
     },