@cdx-ui/components 0.2.3 → 0.2.5

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

@@ -0,0 +1,521 @@
+# Data Grid (https://design.candescent.com/docs/components/data-grid)
+
+Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/data-visualization-datagrid--default)
+
+`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 { DataGrid } from '@cdx-ui/data-grid';
+```
+
+## Basic
+
+Pass `rows` and `columns`. This account grid starts with the features most applications need: formatted values, status `Chip` cells, search, header filters, selection, sorting, and pagination.
+
+Search is **not** always on. Set `showToolbar` to show the search field (same opt-in as MUI Community’s toolbar / quick filter). Set `headerFilters` to show per-column filter inputs in a second header row.
+
+The grid is a fixed viewport like MUI Data Grid Community: **300px** tall by default. Column headers stay visible while rows scroll; pagination stays at the bottom. Override height with a `className` such as `h-full` or a spacing-scale height (`h-130`).
+
+When `rows` is empty, a centered "No rows" message is shown and pagination is omitted. Pass `noRowsOverlay` to replace the default message.
+
+```tsx
+import { Chip } from '@cdx-ui/components';
+import { DataGrid, type GridColDef } from '@cdx-ui/data-grid';
+import { accounts, type Account, type AccountStatus } from './_data';
+
+const currencyFormatter = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+});
+
+const statusColors: Record<AccountStatus, 'success' | 'warning' | 'info' | 'neutral'> = {
+  Active: 'success',
+  Pending: 'warning',
+  Frozen: 'info',
+  Closed: 'neutral',
+};
+
+const columns: GridColDef<Account>[] = [
+  { field: 'id', headerName: 'Account', width: 120 },
+  { field: 'name', headerName: 'Name', flex: 1, minWidth: 160 },
+  { field: 'type', headerName: 'Type', width: 140 },
+  {
+    field: 'status',
+    headerName: 'Status',
+    width: 120,
+    renderCell: ({ row }) => (
+      <Chip color={statusColors[row.status]} size="small">
+        <Chip.Label>{row.status}</Chip.Label>
+      </Chip>
+    ),
+  },
+  {
+    field: 'balance',
+    headerName: 'Balance',
+    width: 140,
+    align: 'end',
+    valueFormatter: (_, row) => currencyFormatter.format(row.balance),
+  },
+];
+
+export default function DataGridBasicDemo() {
+  return (
+    <DataGrid
+      rows={accounts}
+      columns={columns}
+      checkboxSelection
+      showToolbar
+      headerFilters
+      aria-label="Accounts"
+      defaultPaginationModel={{ page: 0, pageSize: 5 }}
+      pageSizeOptions={[5, 10, 25]}
+      className="h-105"
+    />
+  );
+}
+```
+
+## Rich cells
+
+Use `renderCell` to compose Forge UI components inside a cell. This operations view combines `Avatar`, `Chip`, `ProgressBar`, and an action `Menu`, while `valueFormatter` keeps sortable numeric data separate from its display value.
+
+Rows are currently fixed at 48px, so use compact component variants and single-line content.
+
+```tsx
+import { Avatar, Chip, HStack, IconButton, Menu, ProgressBar, Text } from '@cdx-ui/components';
+import { DataGrid, type GridColDef } from '@cdx-ui/data-grid';
+import { MoreHoriz } from '@cdx-ui/icons';
+import { accounts, type Account, type AccountStatus } from './_data';
+
+const currencyFormatter = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+});
+
+const statusColors: Record<AccountStatus, 'success' | 'warning' | 'info' | 'neutral'> = {
+  Active: 'success',
+  Pending: 'warning',
+  Frozen: 'info',
+  Closed: 'neutral',
+};
+
+const columns: GridColDef<Account>[] = [
+  { field: 'id', headerName: 'Account', width: 120 },
+  {
+    field: 'name',
+    headerName: 'Account name',
+    minWidth: 210,
+    flex: 1,
+    renderCell: ({ row }) => (
+      <HStack space="sm" className="items-center">
+        <Avatar size="sm">
+          <Avatar.Text>{row.name}</Avatar.Text>
+        </Avatar>
+        <Text numberOfLines={1} weight="medium">
+          {row.name}
+        </Text>
+      </HStack>
+    ),
+  },
+  {
+    field: 'status',
+    headerName: 'Status',
+    width: 120,
+    renderCell: ({ row }) => (
+      <Chip color={statusColors[row.status]} size="small">
+        <Chip.Label>{row.status}</Chip.Label>
+      </Chip>
+    ),
+  },
+  {
+    field: 'automation',
+    headerName: 'Automated',
+    width: 170,
+    renderCell: ({ row }) => (
+      <HStack space="sm" className="items-center">
+        <ProgressBar
+          value={row.automation}
+          max={100}
+          accessibilityLabel={`${row.name} is ${row.automation.toString()}% automated`}
+          className="w-full max-w-20"
+        >
+          <ProgressBar.Indicator />
+        </ProgressBar>
+        <Text color="secondary" size="sm">
+          {row.automation}%
+        </Text>
+      </HStack>
+    ),
+  },
+  {
+    field: 'balance',
+    headerName: 'Balance',
+    width: 140,
+    align: 'end',
+    valueFormatter: (_, row) => currencyFormatter.format(row.balance),
+  },
+  {
+    field: 'actions',
+    headerName: 'Actions',
+    width: 72,
+    align: 'center',
+    headerAlign: 'center',
+    sortable: false,
+    filterable: false,
+    renderCell: ({ row }) => (
+      <Menu placement="bottom-end">
+        <Menu.Trigger asChild>
+          <IconButton
+            as={MoreHoriz}
+            variant="ghost"
+            size="small"
+            accessibilityLabel={`Actions for ${row.name}`}
+          />
+        </Menu.Trigger>
+        <Menu.Popup>
+          <Menu.Content accessibilityLabel={`${row.name} actions`}>
+            <Menu.Item>
+              <Menu.ItemLabel>View account</Menu.ItemLabel>
+            </Menu.Item>
+            <Menu.Item>
+              <Menu.ItemLabel>Assign owner</Menu.ItemLabel>
+            </Menu.Item>
+            <Menu.Item color="danger">
+              <Menu.ItemLabel>Freeze account</Menu.ItemLabel>
+            </Menu.Item>
+          </Menu.Content>
+        </Menu.Popup>
+      </Menu>
+    ),
+  },
+];
+
+export default function DataGridRichCellsDemo() {
+  return (
+    <DataGrid
+      rows={accounts.slice(0, 10)}
+      columns={columns}
+      hideFooter
+      aria-label="Account operations"
+      className="h-130"
+    />
+  );
+}
+```
+
+## Toolbar actions
+
+`toolbarActions` is an extension slot for your own toolbar controls beside search — export, density, view toggles, and so on. DataGrid does not ship toolbar buttons; you compose them and wire `onPress` to state that drives grid props.
+
+A common pattern is a **Filters** button that toggles the `headerFilters` row on demand instead of leaving filter inputs always visible:
+
+```tsx
+import { useState } from 'react';
+import { Button, Chip } from '@cdx-ui/components';
+import { DataGrid, type GridColDef, type GridFilterModel } from '@cdx-ui/data-grid';
+import { FilterList } from '@cdx-ui/icons';
+import { accounts, type Account } from './_data';
+
+const currencyFormatter = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+});
+
+const columns: GridColDef<Account>[] = [
+  { field: 'id', headerName: 'Account', width: 120 },
+  { field: 'name', headerName: 'Name', flex: 1, minWidth: 160 },
+  { field: 'type', headerName: 'Type', width: 140 },
+  { field: 'status', headerName: 'Status', width: 120 },
+  {
+    field: 'balance',
+    headerName: 'Balance',
+    width: 140,
+    align: 'end',
+    valueFormatter: (_, row) => currencyFormatter.format(row.balance),
+  },
+];
+
+export default function DataGridToolbarActionsDemo() {
+  const [headerFiltersOpen, setHeaderFiltersOpen] = useState(false);
+  const [filterModel, setFilterModel] = useState<GridFilterModel>([]);
+
+  const toggleHeaderFilters = () => {
+    setHeaderFiltersOpen((open) => {
+      if (open) {
+        setFilterModel([]);
+      }
+      return !open;
+    });
+  };
+
+  return (
+    <DataGrid
+      rows={accounts}
+      columns={columns}
+      showToolbar
+      headerFilters={headerFiltersOpen}
+      filterModel={filterModel}
+      onFilterModelChange={setFilterModel}
+      toolbarActions={
+        <>
+          <Chip color={filterModel.length > 0 ? 'action' : 'neutral'} size="small">
+            <Chip.Label>{filterModel.length} active</Chip.Label>
+          </Chip>
+          <Button variant="ghost" size="small" onPress={toggleHeaderFilters}>
+            <Button.Label>Filters</Button.Label>
+            <Button.Icon as={FilterList} position="trailing" />
+          </Button>
+        </>
+      }
+      aria-label="Accounts"
+      defaultPaginationModel={{ page: 0, pageSize: 5 }}
+      pageSizeOptions={[5, 10, 25]}
+      className="h-105"
+    />
+  );
+}
+```
+
+## Selection
+
+Set `checkboxSelection` for a leading checkbox column with select-all in the header. Control `rowSelectionModel` when bulk-action UI outside the rows needs the current selection.
+
+```tsx
+import { useState } from 'react';
+import { Button, Chip } from '@cdx-ui/components';
+import { DataGrid, type GridColDef, type GridRowSelectionModel } from '@cdx-ui/data-grid';
+import { accounts, type Account } from './_data';
+
+const columns: GridColDef<Account>[] = [
+  { field: 'id', headerName: 'Account', width: 120 },
+  { field: 'name', headerName: 'Name', flex: 1, minWidth: 160 },
+  { field: 'owner', headerName: 'Owner', width: 170 },
+  { field: 'status', headerName: 'Status', width: 120 },
+];
+
+export default function DataGridSelectionDemo() {
+  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>({
+    type: 'include',
+    ids: new Set(['ACC-0002', 'ACC-0004']),
+  });
+  const selectedCount = selectionModel.ids.size;
+
+  return (
+    <DataGrid
+      rows={accounts.slice(0, 12)}
+      columns={columns}
+      checkboxSelection
+      rowSelectionModel={selectionModel}
+      onRowSelectionModelChange={setSelectionModel}
+      toolbarActions={
+        <>
+          <Chip color={selectedCount > 0 ? 'action' : 'neutral'} size="small">
+            <Chip.Label>{selectedCount} selected</Chip.Label>
+          </Chip>
+          <Button
+            variant="ghost"
+            size="small"
+            isDisabled={selectedCount === 0}
+            onPress={() => setSelectionModel({ type: 'include', ids: new Set() })}
+          >
+            <Button.Label>Clear selection</Button.Label>
+          </Button>
+        </>
+      }
+      aria-label="Accounts"
+      defaultPaginationModel={{ page: 0, pageSize: 5 }}
+      pageSizeOptions={[5, 10]}
+      className="h-105"
+    />
+  );
+}
+```
+
+## Server data
+
+Set `paginationMode="server"` and `sortingMode="server"` to let your data source own those operations. Keep the models controlled, pass the current page in `rows`, and provide the full `rowCount`.
+
+Server-side filtering is not supported yet. Do not combine quick or header filters with server-paged rows; those filters only inspect the current `rows` array.
+
+```tsx
+import { useState } from 'react';
+import {
+  DataGrid,
+  type GridColDef,
+  type GridPaginationModel,
+  type GridSortModel,
+} from '@cdx-ui/data-grid';
+import { accounts, type Account } from './_data';
+
+const currencyFormatter = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+});
+
+const columns: GridColDef<Account>[] = [
+  { field: 'id', headerName: 'Account', width: 120 },
+  { field: 'name', headerName: 'Name', flex: 1, minWidth: 160 },
+  { field: 'owner', headerName: 'Owner', width: 170 },
+  {
+    field: 'balance',
+    headerName: 'Balance',
+    width: 140,
+    align: 'end',
+    valueFormatter: (_, row) => currencyFormatter.format(row.balance),
+  },
+];
+
+function queryAccounts(paginationModel: GridPaginationModel, sortModel: GridSortModel): Account[] {
+  const sortedRows = [...accounts];
+  const activeSort = sortModel.length > 0 ? sortModel[0] : undefined;
+
+  if (activeSort) {
+    sortedRows.sort((leftRow, rightRow) => {
+      const left = leftRow[activeSort.field as keyof Account];
+      const right = rightRow[activeSort.field as keyof Account];
+      const comparison =
+        typeof left === 'number' && typeof right === 'number'
+          ? left - right
+          : String(left).localeCompare(String(right));
+      return activeSort.sort === 'asc' ? comparison : -comparison;
+    });
+  }
+
+  const start = paginationModel.page * paginationModel.pageSize;
+  return sortedRows.slice(start, start + paginationModel.pageSize);
+}
+
+export default function DataGridServerDataDemo() {
+  const [paginationModel, setPaginationModel] = useState<GridPaginationModel>({
+    page: 0,
+    pageSize: 5,
+  });
+  const [sortModel, setSortModel] = useState<GridSortModel>([]);
+  const rows = queryAccounts(paginationModel, sortModel);
+
+  return (
+    <DataGrid
+      rows={rows}
+      columns={columns}
+      rowCount={accounts.length}
+      paginationMode="server"
+      sortingMode="server"
+      paginationModel={paginationModel}
+      onPaginationModelChange={setPaginationModel}
+      sortModel={sortModel}
+      onSortModelChange={setSortModel}
+      pageSizeOptions={[5, 10]}
+      aria-label="Server-managed accounts"
+      className="h-105"
+    />
+  );
+}
+```
+
+## Loading
+
+Set `loading` to mark the grid busy and show skeleton rows. Pagination is disabled and the empty state is suppressed while loading. Pass `loadingOverlay` to replace the default skeletons.
+
+```tsx
+import { DataGrid, type GridColDef } from '@cdx-ui/data-grid';
+
+// GridValidRowModel's index signature rejects otherwise equivalent interfaces.
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+type Account = {
+  id: string;
+  name: string;
+};
+
+const columns: GridColDef<Account>[] = [
+  { field: 'id', headerName: 'Account' },
+  { field: 'name', headerName: 'Name' },
+];
+
+export default function DataGridLoadingDemo() {
+  return (
+    <DataGrid
+      rows={[{ id: 'ACC-0001', name: 'Operating' }]}
+      columns={columns}
+      loading
+      hideFooter
+      aria-label="Accounts"
+    />
+  );
+}
+```
+
+## Empty state
+
+When no rows match, use `noRowsOverlay` to replace the default message with product-specific guidance. Pagination is omitted automatically.
+
+```tsx
+import { Heading, Text, VStack } from '@cdx-ui/components';
+import { DataGrid, type GridColDef } from '@cdx-ui/data-grid';
+import type { Account } from './_data';
+
+const rows: Account[] = [];
+
+const columns: GridColDef<Account>[] = [
+  { field: 'id', headerName: 'Account', width: 120 },
+  { field: 'name', headerName: 'Name', flex: 1, minWidth: 160 },
+  { field: 'type', headerName: 'Type', width: 140 },
+  { field: 'status', headerName: 'Status', width: 120 },
+];
+
+export default function DataGridEmptyDemo() {
+  return (
+    <DataGrid
+      rows={rows}
+      columns={columns}
+      noRowsOverlay={
+        <VStack space="xs" className="items-center">
+          <Heading size="sm">No matching accounts</Heading>
+          <Text color="secondary" size="sm">
+            Adjust the search or filters and try again.
+          </Text>
+        </VStack>
+      }
+      aria-label="Accounts"
+      className="h-75"
+    />
+  );
+}
+```
+
+## API
+
+### DataGrid
+
+Web-only. Inspired by MUI Data Grid Community props; not a wrap of `@mui/x-data-grid`.
+
+| Attribute   | Values      | Description |
+| ----------- | ----------- | ----------- |
+| `data-slot` | `data-grid` | Shell       |
+
+### GridColDef
+
+Column definition. `valueGetter`, `valueFormatter`, and `renderCell` take no `apiRef`.
+Use `start`, `center`, or `end` for `align` and `headerAlign`; the legacy `left` and `right`
+values are deprecated aliases.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `field` | `string` | — | — |
+| `headerName?` | `string` | — | — |
+| `width?` | `number` | — | — |
+| `minWidth?` | `number` | — | — |
+| `flex?` | `number` | — | — |
+| `align?` | `'start' \| 'center' \| 'end' \| 'left' \| 'right'` | `'start'` | Logical cell-content alignment. `left` and `right` are deprecated compatibility aliases for `start` and `end`. |
+| `headerAlign?` | `'start' \| 'center' \| 'end' \| 'left' \| 'right'` | — | Logical header-content alignment. Defaults to `align`. `left` and `right` are deprecated compatibility aliases for `start` and `end`. |
+| `sortable?` | `boolean` | — | — |
+| `filterable?` | `boolean` | — | — |
+| `type?` | `'string'` | — | — |
+| `valueGetter?` | `((value: unknown, row: GridValidRowModel, col: GridColDef<GridValidRowModel>) => unknown)` | — | — |
+| `valueFormatter?` | `((value: unknown, row: GridValidRowModel, col: GridColDef<GridValidRowModel>) => ReactNode \| string)` | — | — |
+| `renderCell?` | `((params: GridRenderCellParams<GridValidRowModel>) => ReactNode)` | — | — |
+| `renderHeader?` | `(() => ReactNode)` | — | — |
+
+## Accessibility
+
+The grid renders a semantic HTML table on web. Sortable headers expose `aria-sort`. Select-all and row checkboxes are labelled.

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

@@ -0,0 +1,147 @@
+# Date Field (https://design.candescent.com/docs/components/date-field)
+
+Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=11787-9802), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/date-time-datefield--default)
+
+`DateField` is a segmented input for typing a date or a month. Values are `DateId` strings — `YYYY-MM-DD` in date mode and `YYYY-MM-01` in month mode.
+
+```tsx
+import { DateField } from '@cdx-ui/components';
+```
+
+## Basic
+
+Wrap `DateField.Input` in `DateField.Group` and control the value with `value` and `onValueChange`. Empty segments show localized placeholders until the user types.
+
+```tsx
+import { useState } from 'react';
+import { DateField } from '@cdx-ui/components';
+import type { DateId, MonthId } from '@cdx-ui/formatters';
+
+export default function DateFieldBasicDemo() {
+  const [value, setValue] = useState<DateId | MonthId | undefined>();
+
+  return (
+    <DateField
+      mode="date"
+      value={value}
+      onValueChange={setValue}
+      aria-label="Transfer date"
+      className="w-full max-w-xs"
+    >
+      <DateField.Group>
+        <DateField.Input />
+      </DateField.Group>
+    </DateField>
+  );
+}
+```
+
+## Month mode
+
+Set `mode` to `month` to enter only a month and year. The wire value fixes the day to the first (`YYYY-MM-01`).
+
+```tsx
+import { useState } from 'react';
+import { DateField } from '@cdx-ui/components';
+import { monthId, type DateId, type MonthId } from '@cdx-ui/formatters';
+
+export default function DateFieldMonthDemo() {
+  const [value, setValue] = useState<DateId | MonthId | undefined>(monthId('2026-07-01'));
+
+  return (
+    <DateField
+      mode="month"
+      value={value}
+      onValueChange={setValue}
+      aria-label="Statement month"
+      className="w-full max-w-xs"
+    >
+      <DateField.Group>
+        <DateField.Input />
+      </DateField.Group>
+    </DateField>
+  );
+}
+```
+
+## API
+
+### DateField
+
+Root of the compound. Owns the value, `mode`, and `locale`, and provides `variant`, `size`, and `fullWidth` styling context to `DateField.Group`.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children?` | `ReactNode` | — | — |
+| `variant?` | `'outline' \| null` | — | — |
+| `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. |
+| `asChild?` | `boolean` | — | — |
+| `value?` | `DateId \| MonthId` | — | Controlled value: a `DateId` (`YYYY-MM-DD`) in date mode, or a `MonthId` (`YYYY-MM-01`) in month mode. Build one with `dateId(...)` / `monthId(...)` from `@cdx-ui/formatters` — a bare string will not type-check. |
+| `defaultValue?` | `DateId \| MonthId` | — | Uncontrolled initial value, in the same format as `value`. |
+| `onValueChange?` | `((value: DateId \| MonthId) => void)` | — | Called with the new value once every segment is filled, or `undefined` when the field is cleared. |
+| `mode?` | `'date' \| 'month'` | — | Which segments to render: `date` shows month, day, and year; `month` shows month and year only. |
+| `locale?` | `string` | — | BCP-47 locale that controls segment order and separators. Defaults to `en-US`. |
+| `isDisabled?` | `boolean` | — | — |
+| `isReadOnly?` | `boolean` | — | — |
+| `isInvalid?` | `boolean` | — | — |
+| `isRequired?` | `boolean` | — | — |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+## Sub-components
+
+### DateField.Group
+
+Input chrome that surrounds the segments, sharing `Input`'s outline styling. Add a trailing `DateField.Suffix` inside it for a picker trigger.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children?` | `ReactNode` | — | — |
+| `variant?` | `'outline' \| null` | — | — |
+| `size?` | `'default' \| 'small' \| null` | — | — |
+| `fullWidth?` | `boolean` | — | — |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+### DateField.Input
+
+Renders the editable segments. It renders styled segments by default; pass a render function as `children` to customize an individual segment.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children?` | `((segment: DateFieldSegmentPrimitiveProps["segment"]) => ReactNode)` | — | — |
+| `slot?` | `'start' \| 'end'` | — | — |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+### DateField.Segment
+
+A single editable or literal segment, yielded to the `DateField.Input` render function so a specific segment type can be styled.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `asChild?` | `boolean` | — | — |
+| `segmentIndex?` | `number` | — | — |
+| `segment` | `DateSegment` | — | — |
+
+### DateField.Suffix
+
+Trailing content inside `DateField.Group`, typically a picker trigger icon. Set `asChild` to render a custom trigger element in its place.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children?` | `ReactNode` | — | — |
+| `asChild?` | `boolean` | — | — |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+## Accessibility
+
+Give the field an accessible name with `aria-label` or by pairing it with `Field.Label`; the root carries no label of its own. Each segment is individually focusable and editable with the keyboard, and `labels` overrides the name announced for each one. While `isDisabled` or `isReadOnly`, segments do not accept edits.