@cdx-ui/components 0.3.2 → 0.3.3

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: 92.9%"><title>coverage: 92.9%</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.9%</text><text x="835" y="150" fill-opacity=".3" textLength="370">92.9%</text></g><text x="835" y="140" textLength="370">92.9%</text></g></g></svg>

package/docs/components/content.md

@@ -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.