@cdx-ui/components 0.3.2 → 0.3.4

package/README.md

@@ -48,7 +48,7 @@ The [component reference](https://design.candescent.com/docs/components) is the
 
 The package also ships that reference as markdown in `docs/`, matched to the installed version; coding agents should start at `AGENTS.md` in the package root.
 
-> `Box` is exported but deprecated — use React Native's `View` directly.
+> Use [`Box`](https://design.candescent.com/docs/components/box) for layout containers. The `View` re-export below is deprecated.
 
 ### Providers
 
@@ -91,7 +91,7 @@ For convenience, the package re-exports several core RN components and hooks wit
 
 | Export                 | Source                           |
 | ---------------------- | -------------------------------- |
-| `View`                 | `react-native`                   |
+| `View` (deprecated)    | `react-native`                   |
 | `ScrollView`           | `react-native`                   |
 | `KeyboardAvoidingView` | `react-native`                   |
 | `SafeAreaView`         | `react-native-safe-area-context` |

package/coverage.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="108" height="20" role="img" aria-label="coverage: 92.6%"><title>coverage: 92.6%</title><filter id="blur"><feGaussianBlur stdDeviation="16"/></filter><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="108" height="20" rx="3"/></clipPath><g clip-path="url(#r)"><rect width="61" height="20" fill="#555"/><rect x="61" width="47" height="20" fill="#4b0"/><rect width="108" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="315" y="150" fill-opacity=".8" filter="url(#blur)" textLength="510">coverage</text><text x="315" y="150" fill-opacity=".3" textLength="510">coverage</text></g><text x="315" y="140" textLength="510">coverage</text></g><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="835" y="150" fill-opacity=".8" filter="url(#blur)" textLength="370">92.6%</text><text x="835" y="150" fill-opacity=".3" textLength="370">92.6%</text></g><text x="835" y="140" textLength="370">92.6%</text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="108" height="20" role="img" aria-label="coverage: 93.1%"><title>coverage: 93.1%</title><filter id="blur"><feGaussianBlur stdDeviation="16"/></filter><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="108" height="20" rx="3"/></clipPath><g clip-path="url(#r)"><rect width="61" height="20" fill="#555"/><rect x="61" width="47" height="20" fill="#4b0"/><rect width="108" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="315" y="150" fill-opacity=".8" filter="url(#blur)" textLength="510">coverage</text><text x="315" y="150" fill-opacity=".3" textLength="510">coverage</text></g><text x="315" y="140" textLength="510">coverage</text></g><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="835" y="150" fill-opacity=".8" filter="url(#blur)" textLength="370">93.1%</text><text x="835" y="150" fill-opacity=".3" textLength="370">93.1%</text></g><text x="835" y="140" textLength="370">93.1%</text></g></g></svg>

package/docs/components/color-field/content.md

@@ -53,7 +53,7 @@ Owns standalone text and color state or edits the shared value when nested in `C
 | --- | --- | --- | --- |
 | `className?` | `string` | — | — |
 | `children?` | `ReactNode` | — | — |
-| `variant?` | `'outline' \| null` | — | — |
+| `variant?` | `'outline'` | — | — |
 | `size?` | `'default' \| 'small' \| null` | — | — |
 | `value?` | `Color` | — | — |
 | `defaultValue?` | `Color` | — | — |
@@ -79,7 +79,7 @@ Provides the styled input shell and optional slots.
 | --- | --- | --- | --- |
 | `className?` | `string` | — | — |
 | `children?` | `ReactNode` | — | — |
-| `variant?` | `'outline' \| null` | — | — |
+| `variant?` | `'outline'` | — | — |
 | `size?` | `'default' \| 'small' \| null` | — | — |
 | `asChild?` | `boolean` | — | — |
 | `fullWidth?` | `boolean` | — | — |

package/docs/components/content.md

@@ -14,12 +14,12 @@
 - [Currency Input](https://design.candescent.com/docs/components/currency-input/content.md) — A calculator-style monetary input that formats digits as currency while the user types.
 - [Field](https://design.candescent.com/docs/components/field/content.md) — A form-control wrapper that coordinates labels, supporting text, validation messages, and shared state.
 - [Form](https://design.candescent.com/docs/components/form/content.md) — A container that spaces related fields vertically and renders a form on web or a view on native.
-- [Input Field](https://design.candescent.com/docs/components/input/content.md) — A single-line text entry with optional label, helper text, and adornments.
+- [Input](https://design.candescent.com/docs/components/input/content.md) — A single-line text entry with optional label, helper text, and adornments.
 - [Menu](https://design.candescent.com/docs/components/menu/content.md) — Menus present actions or selectable options in an anchored overlay or a standalone list surface.
-- [OTP Input Field](https://design.candescent.com/docs/components/otp-input/content.md) — A controlled multi-cell input for one-time passwords and verification codes.
+- [OTP Input](https://design.candescent.com/docs/components/otp-input/content.md) — A controlled multi-cell input for one-time passwords and verification codes.
 - [Radio](https://design.candescent.com/docs/components/radio/content.md) — A radio group is an input control that allows the user to select a single option from a set of mutually exclusive options.
 - [Range Calendar](https://design.candescent.com/docs/components/range-calendar/content.md) — A two-tap day grid for selecting a start and end date, with a continuous range band, month navigation, and a year picker.
-- [Select](https://design.candescent.com/docs/components/select/content.md) — A form control that allows users to choose one option from a dropdown list.
+- [Select](https://design.candescent.com/docs/components/select/content.md) — A form control that allows users to choose one or more options from a dropdown list.
 - [Textarea](https://design.candescent.com/docs/components/textarea/content.md) — A multi-line text entry for longer free-form content.
 - [Slider](https://design.candescent.com/docs/components/slider/content.md) — A control for selecting a numeric value along a track.
 - [Color Picker](https://design.candescent.com/docs/components/color-picker/content.md) — A compound color picker that coordinates an opaque color value with a trigger and popover.
@@ -58,7 +58,7 @@
 - [Avatar](https://design.candescent.com/docs/components/avatar/content.md) — A visual representation of a user or entity, displayed as an image, initials, or fallback icon.
 - [Carousel](https://design.candescent.com/docs/components/carousel/content.md) — A swipeable, paginated carousel for promotional banners, onboarding, and card browsing. Wraps react-native-reanimated-carousel with token-styled Pagination and Prev/Next nav button compounds plus useCarousel hook.
 - [Divider](https://design.candescent.com/docs/components/divider/content.md) — A horizontal or vertical separator for grouping related content, with an optional inline label.
-- [FDIC Digital Sign](https://design.candescent.com/docs/components/insurance-disclosure/content.md) — Domain-specific regulatory disclosure — official FDIC lockup with optional copy for account footers, deposit screens, and onboarding.
+- [Insurance Disclosure](https://design.candescent.com/docs/components/insurance-disclosure/content.md) — Domain-specific regulatory disclosure — official FDIC lockup with optional copy for account footers, deposit screens, and onboarding.
 - [Icon](https://design.candescent.com/docs/components/icon/content.md) — A cross-platform SVG icon wrapper with semantic color, sizing, filled variants, and accessibility support.
 - [Image](https://design.candescent.com/docs/components/image/content.md) — Displays local or remote images across native and web platforms.
 - [List Item](https://design.candescent.com/docs/components/list-item/content.md) — A composable row for display and navigation — accounts, transactions, alerts, settings, and nav rows.
@@ -82,6 +82,8 @@
 - [Box](https://design.candescent.com/docs/components/box/content.md) — The layout container for building screens, with semantic web elements through role and an asChild escape hatch.
 - [Card](https://design.candescent.com/docs/components/card/content.md) — A composable surface for grouping related content, with optional brand stripe, header, content, and footer regions.
 - [Drawer](https://design.candescent.com/docs/components/drawer/content.md) — A panel attached to an edge of the viewport or container, with modal and permanent presentations.
+- [Insight](https://design.candescent.com/docs/components/insight/content.md) — A bordered card for a personalised, often AI-generated, insight, shown as a pressable summary or a detail card.
+- [Insight Stack](https://design.candescent.com/docs/components/insight-stack/content.md) — Draws decorative cards behind a summary Insight to show that more insights are waiting.
 - [Scoped Theme](https://design.candescent.com/docs/components/scoped-theme/content.md) — Forces a specific theme on a component subtree, regardless of the application's global theme.
 - [Scroll Shadow](https://design.candescent.com/docs/components/scroll-shadow/content.md) — Fades the edges of a scroll view so overflowing content reads as scrollable on iOS, Android, and web.
 - [Stack](https://design.candescent.com/docs/components/stack/content.md) — Horizontal and vertical layout primitives with token-based spacing and optional reversed order.

package/docs/components/data-grid/content.md

@@ -5,7 +5,16 @@ Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?
 `DataGrid` is a **web-only** data-driven grid. Install `@cdx-ui/data-grid` in addition to `@cdx-ui/components`. For fully custom markup use `Table`. For a standalone pager use `TablePagination`.
 
 ```tsx
-import { Avatar, Chip, IconButton, Menu, ProgressBar, Text, VStack } from '@cdx-ui/components';
+import {
+  Avatar,
+  Checkbox,
+  Chip,
+  IconButton,
+  Menu,
+  ProgressBar,
+  Text,
+  VStack,
+} from '@cdx-ui/components';
 import { DataGrid } from '@cdx-ui/data-grid';
 ```
 
@@ -332,6 +341,121 @@ export default function DataGridSelectionDemo() {
 }
 ```
 
+## Checkbox cells
+
+To edit boolean fields in place, render a `Checkbox` from `renderCell`. This is separate from `checkboxSelection`: the checkbox reflects a row field, not row selection. Keep `rows` in state and update the matching row in `onChange` so the grid re-renders with the new value.
+
+Give each checkbox an accessible label that names both the column and the row, such as "View — Accounts", so every control keeps a distinct name when reached outside the table context. Set `isDisabled` where an action does not apply, and turn off `sortable` and `filterable` on checkbox columns. Build columns that close over the change handler with `useMemo` so they stay stable between renders.
+
+```tsx
+import { useCallback, useMemo, useState } from 'react';
+import { Checkbox, Text, VStack } from '@cdx-ui/components';
+import { DataGrid, type GridColDef } from '@cdx-ui/data-grid';
+import { permissions, type PermissionAction, type PermissionRow } from './_data';
+
+type ToggleField = PermissionAction | 'additional';
+
+const actionColumns: { field: PermissionAction; headerName: string }[] = [
+  { field: 'view', headerName: 'View' },
+  { field: 'create', headerName: 'Create' },
+  { field: 'modify', headerName: 'Modify' },
+  { field: 'delete', headerName: 'Delete' },
+];
+
+function createColumns(
+  onToggle: (id: string, field: ToggleField, checked: boolean) => void,
+): GridColDef<PermissionRow>[] {
+  return [
+    {
+      field: 'name',
+      headerName: 'Permission',
+      minWidth: 240,
+      flex: 1,
+      renderCell: ({ row }) => (
+        <VStack>
+          <Text numberOfLines={1} weight="medium">
+            {row.name}
+          </Text>
+          <Text numberOfLines={1} color="secondary" size="sm">
+            {row.description}
+          </Text>
+        </VStack>
+      ),
+    },
+    ...actionColumns.map(
+      ({ field, headerName }): GridColDef<PermissionRow> => ({
+        field,
+        headerName,
+        width: 96,
+        align: 'center',
+        headerAlign: 'center',
+        sortable: false,
+        filterable: false,
+        renderCell: ({ row }) => (
+          <Checkbox
+            value={`${row.id}-${field}`}
+            isChecked={row[field] === true}
+            isDisabled={row[field] === null}
+            onChange={(checked) => onToggle(row.id, field, checked)}
+            accessibilityLabel={`${headerName} — ${row.name}`}
+            aria-label={`${headerName} — ${row.name}`}
+          />
+        ),
+      }),
+    ),
+    {
+      field: 'additional',
+      headerName: 'Additional',
+      width: 140,
+      sortable: false,
+      filterable: false,
+      renderCell: ({ row }) =>
+        row.additional ? (
+          <Checkbox
+            value={`${row.id}-additional`}
+            isChecked={row.additional.checked}
+            onChange={(checked) => onToggle(row.id, 'additional', checked)}
+            accessibilityLabel={`${row.additional.label} — ${row.name}`}
+            aria-label={`${row.additional.label} — ${row.name}`}
+          >
+            <Checkbox.Label>{row.additional.label}</Checkbox.Label>
+          </Checkbox>
+        ) : null,
+    },
+  ];
+}
+
+export default function DataGridCheckboxCellsDemo() {
+  const [rows, setRows] = useState(permissions);
+
+  const handleToggle = useCallback((id: string, field: ToggleField, checked: boolean) => {
+    setRows((current) =>
+      current.map((row) => {
+        if (row.id !== id) {
+          return row;
+        }
+        if (field === 'additional') {
+          return row.additional ? { ...row, additional: { ...row.additional, checked } } : row;
+        }
+        return { ...row, [field]: checked };
+      }),
+    );
+  }, []);
+
+  const columns = useMemo(() => createColumns(handleToggle), [handleToggle]);
+
+  return (
+    <DataGrid
+      rows={rows}
+      columns={columns}
+      hideFooter
+      aria-label="Set permissions"
+      className="h-85"
+    />
+  );
+}
+```
+
 ## Server data
 
 Set `paginationMode="server"` and `sortingMode="server"` to let your data source own those operations. `filterMode` follows `paginationMode` unless you set it, so server pagination also means server filtering. Keep the models controlled, pass the current page in `rows`, and provide the full `rowCount` of matching rows.

package/docs/components/date-field/content.md

@@ -74,7 +74,7 @@ Root of the compound. Owns the value, `mode`, and `locale`, and provides `varian
 | --- | --- | --- | --- |
 | `className?` | `string` | — | — |
 | `children?` | `ReactNode` | — | — |
-| `variant?` | `'outline' \| null` | — | — |
+| `variant?` | `'outline'` | — | — |
 | `size?` | `'default' \| 'small' \| null` | — | — |
 | `fullWidth?` | `boolean` | — | When true (the default), the group stretches to fill its container; when false, it hugs the segments. |
 | `labels?` | `Partial<DateComponentLabels>` | — | Overrides the accessible labels announced for each segment. |
@@ -101,7 +101,7 @@ Input chrome that surrounds the segments, sharing `Input`'s outline styling. Add
 | --- | --- | --- | --- |
 | `className?` | `string` | — | — |
 | `children?` | `ReactNode` | — | — |
-| `variant?` | `'outline' \| null` | — | — |
+| `variant?` | `'outline'` | — | — |
 | `size?` | `'default' \| 'small' \| null` | — | — |
 | `fullWidth?` | `boolean` | — | — |
 

package/docs/components/date-time-field/content.md

@@ -80,7 +80,7 @@ Root of the compound. Owns the value, `granularity`, `hour12`, and `locale`, and
 | --- | --- | --- | --- |
 | `className?` | `string` | — | — |
 | `children?` | `ReactNode` | — | — |
-| `variant?` | `'outline' \| null` | — | — |
+| `variant?` | `'outline'` | — | — |
 | `size?` | `'default' \| 'small' \| null` | — | — |
 | `fullWidth?` | `boolean` | — | When true (the default), the group stretches to fill its container; when false, it hugs the segments. |
 | `asChild?` | `boolean` | — | — |
@@ -109,7 +109,7 @@ Input chrome that surrounds the segments, shared with [`DateField.Group`](https:
 | `className?` | `string` | — | — |
 | `children?` | `ReactNode` | — | — |
 | `ref?` | `React.Ref<View>` | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). |
-| `variant?` | `'outline' \| null` | — | — |
+| `variant?` | `'outline'` | — | — |
 | `size?` | `'default' \| 'small' \| null` | — | — |
 | `fullWidth?` | `boolean` | — | — |
 | `key?` | `React.Key \| null` | — | — |

package/docs/components/input/content.md

@@ -1,4 +1,4 @@
-# Input Field (https://design.candescent.com/docs/components/input)
+# Input (https://design.candescent.com/docs/components/input)
 
 Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-CDS-V2--React-Native?node-id=159-22), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-input--default)
 
@@ -22,6 +22,24 @@ export default function InputBasicDemo() {
 }
 ```
 
+## Subtle
+
+Use `variant="subtle"` for a filled, borderless field on a surface that already frames it, such as a search field at the top of a popover or sheet. Focus, invalid, disabled, and read-only states stay visible in both variants.
+
+```tsx
+import { Input } from '@cdx-ui/components';
+import { Search } from '@cdx-ui/icons';
+
+export default function InputSubtleDemo() {
+  return (
+    <Input variant="subtle">
+      <Input.Icon as={Search} />
+      <Input.Field accessibilityLabel="Search teams" placeholder="Search teams" />
+    </Input>
+  );
+}
+```
+
 ## Sizes
 
 ```tsx
@@ -266,7 +284,7 @@ The root shell that lays out the field alongside optional slots and icons, and p
 | `className?` | `string` | — | Additional Uniwind/Tailwind classes, merged after the shell's own styles. |
 | `children?` | `ReactNode` | — | Shell content — typically `Input.Field` plus optional `Input.Slot`/`Input.Icon`. |
 | `asChild?` | `boolean` | — | Render the consumer's child element in place of the default `View` host. |
-| `variant?` | `'outline'` | `'outline'` | Visual style variant. |
+| `variant?` | `'outline' \| 'subtle'` | `'outline'` | Visual style variant. `outline` is a bordered field on the page surface; `subtle` is a filled, borderless field for dense or nested surfaces such as a search field in a popup. |
 | `size?` | `'default' \| 'small'` | `'default'` | Height, padding, and field font size. |
 | `isInvalid?` | `boolean` | — | If true, the input will indicate an error. |
 | `isDisabled?` | `boolean` | — | If true, the input will be disabled. |

package/docs/components/input/design.md

@@ -1,4 +1,4 @@
-# Input Field — Design (https://design.candescent.com/docs/components/input)
+# Input — Design (https://design.candescent.com/docs/components/input)
 
 ## Usage