@capra/core 1.12.0 → 1.14.0

package/docs/core-togglebuttongroup--usage.md

@@ -0,0 +1,113 @@
+# Core/ToggleButtonGroup - Usage
+
+A group of toggle buttons for choosing one or more options from a set.
+
+## Basic usage
+
+```tsx
+import { useState } from 'react';
+import { ToggleButtonGroup, type Key } from '@capra/core';
+
+function Example() {
+  const [selectedKeys, setSelectedKeys] = useState<Set<Key>>(new Set(['day']));
+  return (
+    <ToggleButtonGroup
+      aria-label="Time period"
+      selectedKeys={selectedKeys}
+      onSelectionChange={setSelectedKeys}
+      items={[
+        { key: 'day', text: 'Day' },
+        { key: 'week', text: 'Week' },
+        { key: 'month', text: 'Month' },
+      ]}
+    />
+  )
+}
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `items` | `ToggleButtonGroupItem[]` | Yes | `--` | Items to render as toggle buttons. |
+| `size` | `Extract<ButtonSize, 'sm' \| 'md'>` | No | 'md' | Size forwarded to every rendered button. Defaults to `md`. |
+| `disabled` | `boolean` | No | false | Whether the entire group is disabled. |
+| `selectionMode` | `'single' \| 'multiple'` | No | 'single' | Whether single or multiple selection is enabled. Defaults to `single`. |
+| `selectedKeys` | `Iterable<Key>` | No | `--` | Controlled selected keys. |
+| `defaultSelectedKeys` | `Iterable<Key>` | No | `--` | Uncontrolled initial selected keys. |
+| `onSelectionChange` | `(keys: Set<Key>) => void` | No | `--` | Handler called when the selection changes. |
+| `disallowEmptySelection` | `boolean` | No | `--` | Whether the group must always have at least one selected item. |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
+| `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
+
+## Examples
+
+### Icons
+
+Buttons can display icons in addition to text, or replace text entirely.
+
+```tsx
+<ToggleButtonGroup
+  aria-label="Time period"
+  items={[
+    { key: 'align-left', text: 'Align left', icon: AlignLeft },
+    { key: 'align-center', text: 'Align center', icon: AlignCenter },
+    { key: 'align-right', text: 'Align right', icon: AlignRight },
+  ]}
+```
+
+When using icons only, `aria-label` is required.
+
+```tsx
+<ToggleButtonGroup
+  aria-label="Time period"
+  items={[
+    { key: 'align-left', icon: AlignLeft, 'aria-label': 'Align left' },
+    { key: 'align-center', icon: AlignCenter, 'aria-label': 'Align center' },
+    { key: 'align-right', icon: AlignRight, 'aria-label': 'Align right' },
+  ]}
+```
+
+### Multi-select
+
+```tsx
+<ToggleButtonGroup
+  aria-label="Time period"
+  selectionMode="multiple"
+  items={[
+    { key: 'day', text: 'Day' },
+    { key: 'week', text: 'Week' },
+    { key: 'month', text: 'Month' },
+  ]}
+/>
+```
+
+### Disabled state
+
+The entire `ToggleButtonGroup` can be disabled by setting the `disabled` prop.
+
+```tsx
+<ToggleButtonGroup
+  aria-label="Time period"
+  disabled
+  items={[
+    { key: 'day', text: 'Day' },
+    { key: 'week', text: 'Week' },
+    { key: 'month', text: 'Month' },
+  ]}
+/>
+```
+
+Alternatively, individual buttons can be disabled by setting the `disabled` prop on the individual item.
+
+```tsx
+<ToggleButtonGroup
+  aria-label="Time period"
+  items={[
+    { key: 'day', text: 'Day', disabled: true },
+    { key: 'week', text: 'Week' },
+    { key: 'month', text: 'Month' },
+  ]}
+/>
+```

package/docs/history-changelogs-capra-core--docs.md

@@ -1,5 +1,36 @@
 # History/Changelogs/@capra-core
 
+### 1.14.0
+
+#### Minor Changes
+
+* [7539078](https://bitbucket.org/cribl/capra-ui/commits/7539078): Add `Table` component
+
+* [43fbcd3](https://bitbucket.org/cribl/capra-ui/commits/43fbcd3): Prevent long Menu.Items from line-wrapping by default.
+
+  Add a prop `allowItemLineWrap` to override this default.
+
+* [62b08fb](https://bitbucket.org/cribl/capra-ui/commits/62b08fb): Add `Badge` `decorative` prop. Named dots use `role="img"` and counters use `role="status"` so `aria-label` / `aria-labelledby` are valid without making the count presentational.
+
+* [9d0734d](https://bitbucket.org/cribl/capra-ui/commits/9d0734d): Add the `ToggleButtonGroup` component
+
+* [43b0618](https://bitbucket.org/cribl/capra-ui/commits/43b0618): Update TableToolbar to support filter and bulk edit modes
+
+#### Patch Changes
+
+* [2ac16c5](https://bitbucket.org/cribl/capra-ui/commits/2ac16c5): Updated `SelectField` dropdown options to use the appropriate colors.
+* [6998527](https://bitbucket.org/cribl/capra-ui/commits/6998527): Fix an issue where the `NumberField` stepper was overflowing outside the input container
+
+### 1.13.0
+
+#### Minor Changes
+
+* [159e15b](https://bitbucket.org/cribl/capra-ui/commits/159e15b): Add a `SelectField` component.
+
+#### Patch Changes
+
+* [28df32f](https://bitbucket.org/cribl/capra-ui/commits/28df32f): Fix Switch background colors
+
 ### 1.12.0
 
 #### Minor Changes

package/docs/index.md

@@ -77,6 +77,8 @@ Embedded documentation is available on the filesystem for each of these packages
 - [Core/RadioTile - Usage](./core-radiotile--usage.md)
 - [Core/Ribbon - Design](./core-ribbon--design.md)
 - [Core/Ribbon - Usage](./core-ribbon--usage.md)
+- [Core/SelectField - Design](./core-selectfield--design.md)
+- [Core/SelectField - Usage](./core-selectfield--usage.md)
 - [Core/Skeleton - Design](./core-skeleton--design.md)
 - [Core/Skeleton - Usage](./core-skeleton--usage.md)
 - [Core/SkeletonGroup - Design](./core-skeletongroup--design.md)
@@ -85,6 +87,8 @@ Embedded documentation is available on the filesystem for each of these packages
 - [Core/Spinner - Usage](./core-spinner--usage.md)
 - [Core/Switch - Design](./core-switch--design.md)
 - [Core/Switch - Usage](./core-switch--usage.md)
+- [Core/Table - Design](./core-table--design.md)
+- [Core/Table - Usage](./core-table--usage.md)
 - [Core/TabNav - Design](./core-tabnav--design.md)
 - [Core/TabNav - Usage](./core-tabnav--usage.md)
 - [Core/Tag - Design](./core-tag--design.md)
@@ -99,6 +103,8 @@ Embedded documentation is available on the filesystem for each of these packages
 - [Core/TextInput - Usage](./core-textinput--usage.md)
 - [Core/Toast - Design](./core-toast--design.md)
 - [Core/Toast - Usage](./core-toast--usage.md)
+- [Core/ToggleButtonGroup - Design](./core-togglebuttongroup--design.md)
+- [Core/ToggleButtonGroup - Usage](./core-togglebuttongroup--usage.md)
 - [Core/Tooltip - Design](./core-tooltip--design.md)
 - [Core/Tooltip - Usage](./core-tooltip--usage.md)
 - [Core/TopNav - Design](./core-topnav--design.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capra/core",
-  "version": "1.12.0",
+  "version": "1.14.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "type": "module",
   "description": "Core React components for the Capra design system",
@@ -43,9 +43,9 @@
     "antd": "4.24.16",
     "storybook": "^10.4.6",
     "tsdown": "^0.22.7",
+    "@private/building": "^0.1.1",
     "@private/linting": "^0.0.1",
-    "@private/building": "^0.1.0",
-    "@capra/theme": "^1.4.0",
+    "@capra/theme": "^1.6.0",
     "@private/stories": "^0.0.0",
     "@private/testing": "^0.0.7"
   },