@cdx-ui/components 0.2.2 → 0.2.4

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

@@ -0,0 +1,208 @@
+# ColorPicker (https://design.candescent.com/docs/components/color-picker)
+
+Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-colorpicker--default)
+
+`ColorPicker` coordinates color controls that consumers compose inside its popover.
+
+```tsx
+import {
+  ColorArea,
+  ColorField,
+  ColorPicker,
+  ColorSlider,
+  ColorSwatch,
+  ColorSwatchPicker,
+  HStack,
+  Select,
+  Text,
+} from '@cdx-ui/components';
+import { parseColor } from '@cdx-ui/primitives';
+```
+
+## Basic
+
+Compose the area, hue slider, format `Select`, fields, and optional preset picker for the workflow your product needs.
+
+```tsx
+import { useState } from 'react';
+import {
+  ColorArea,
+  ColorField,
+  ColorPicker,
+  ColorSlider,
+  ColorSwatch,
+  ColorSwatchPicker,
+  HStack,
+  Select,
+  Text,
+} from '@cdx-ui/components';
+import { parseColor, type Color } from '@cdx-ui/primitives';
+
+type ColorFormat = 'hex' | 'rgb' | 'hsl';
+
+const formatItems = [
+  { value: 'hex', label: 'Hex' },
+  { value: 'rgb', label: 'RGB' },
+  { value: 'hsl', label: 'HSL' },
+];
+
+function requiredColor(value: string): Color {
+  const color = parseColor(value);
+  if (!color) {
+    throw new Error(`Expected ${value} to parse`);
+  }
+  return color;
+}
+
+const initialColor = requiredColor('#2F6FED');
+const presets = ['#2F6FED', '#7C3AED', '#DB2777', '#DC2626', '#D97706', '#059669'].map(
+  requiredColor,
+);
+
+export default function ColorPickerBasicDemo() {
+  const [value, setValue] = useState(initialColor);
+  const [format, setFormat] = useState<ColorFormat>('hex');
+
+  return (
+    <ColorPicker value={value} onValueChange={setValue} className="w-full max-w-sm">
+      <ColorPicker.Trigger accessibilityLabel="Choose brand color">
+        <ColorSwatch size="sm" />
+        <Text>{value.toString('hex')}</Text>
+      </ColorPicker.Trigger>
+      <ColorPicker.Popover>
+        <ColorArea accessibilityLabel="Brand color">
+          <ColorArea.Thumb />
+        </ColorArea>
+        <ColorSlider colorSpace="hsb" channel="hue" accessibilityLabel="Hue">
+          <ColorSlider.Output />
+          <ColorSlider.Rail>
+            <ColorSlider.Thumb accessibilityLabel="Hue" />
+          </ColorSlider.Rail>
+        </ColorSlider>
+        <Select
+          items={formatItems}
+          value={format}
+          onValueChange={(nextFormat) => setFormat(nextFormat as ColorFormat)}
+          accessibilityLabel="Color format"
+        >
+          <Select.Trigger>
+            <Select.Value />
+          </Select.Trigger>
+          <Select.Content>
+            {formatItems.map((item) => (
+              <Select.Item key={item.value} value={item.value}>
+                <Select.ItemLabel>{item.label}</Select.ItemLabel>
+              </Select.Item>
+            ))}
+          </Select.Content>
+        </Select>
+        {format === 'hex' ? (
+          <ColorField>
+            <ColorField.Group>
+              <ColorField.Slot position="leading">
+                <ColorSwatch size="xs" />
+              </ColorField.Slot>
+              <ColorField.Input accessibilityLabel="Hex color" />
+            </ColorField.Group>
+          </ColorField>
+        ) : format === 'rgb' ? (
+          <HStack className="w-full min-w-0" space="sm">
+            {(['red', 'green', 'blue'] as const).map((channel) => (
+              <ColorField
+                key={channel}
+                className="min-w-0 flex-1"
+                colorSpace="rgb"
+                channel={channel}
+              >
+                <ColorField.Group>
+                  <ColorField.Input accessibilityLabel={channel} />
+                </ColorField.Group>
+              </ColorField>
+            ))}
+          </HStack>
+        ) : (
+          <HStack className="w-full min-w-0" space="sm">
+            {(['hue', 'saturation', 'lightness'] as const).map((channel) => (
+              <ColorField
+                key={channel}
+                className="min-w-0 flex-1"
+                colorSpace="hsl"
+                channel={channel}
+              >
+                <ColorField.Group>
+                  <ColorField.Input accessibilityLabel={channel} />
+                </ColorField.Group>
+              </ColorField>
+            ))}
+          </HStack>
+        )}
+        <ColorSwatchPicker accessibilityLabel="Preset colors">
+          {presets.map((preset) => (
+            <ColorSwatchPicker.Item key={preset.toString('hex')} color={preset}>
+              <ColorSwatchPicker.Swatch />
+              <ColorSwatchPicker.Indicator />
+            </ColorSwatchPicker.Item>
+          ))}
+        </ColorSwatchPicker>
+      </ColorPicker.Popover>
+    </ColorPicker>
+  );
+}
+```
+
+## API
+
+### ColorPicker
+
+Owns the shared color and popover open state.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children?` | `ReactNode` | — | — |
+| `asChild?` | `boolean` | — | — |
+| `value?` | `Color` | — | Current controlled color. |
+| `defaultValue?` | `Color` | — | Initial color for uncontrolled usage. |
+| `onValueChange?` | `((value: Color) => void)` | — | Called when a nested color control changes the current color. |
+| `isOpen?` | `boolean` | — | Controlled popover open state. |
+| `defaultOpen?` | `boolean` | ``false`` | Initial popover open state for uncontrolled usage. |
+| `onOpenChange?` | `((open: boolean) => void)` | — | Called when the popover open state changes. |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+## Sub-components
+
+### ColorPicker.Trigger
+
+Toggles the popover and announces its expanded state. Include text with a swatch so color is not the only cue.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children?` | `ReactNode` | — | — |
+| `isDisabled?` | `boolean` | — | If true, the button will be disabled. |
+| `asChild?` | `boolean` | — | — |
+
+Inherits all [`PressableProps`](https://reactnative.dev/docs/pressable#props).
+
+### ColorPicker.Popover
+
+Presents consumer-composed color controls in the shared picker popover surface.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `contentClassName?` | `string` | — | — |
+| `children` | `ReactNode` | — | — |
+
+## Anatomy
+
+| `data-slot`            | Element                  |
+| ---------------------- | ------------------------ |
+| `color-picker`         | Root container           |
+| `color-picker-trigger` | Popover trigger          |
+| `color-picker-popover` | Anchored popover surface |
+
+## Accessibility
+
+Give `ColorPicker.Trigger` an accessible name and include a text value with its swatch. Label each nested area, slider, field, and preset group independently.

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

@@ -0,0 +1,120 @@
+# ColorSlider (https://design.candescent.com/docs/components/color-slider)
+
+Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-colorslider--default)
+
+`ColorSlider` adjusts one color channel and renders the channel gradient in its rail.
+
+```tsx
+import { ColorSlider } from '@cdx-ui/components';
+import { parseColor } from '@cdx-ui/primitives';
+```
+
+## Basic
+
+```tsx
+import { useState } from 'react';
+import { ColorSlider } from '@cdx-ui/components';
+import { parseColor, type Color } from '@cdx-ui/primitives';
+
+function requiredColor(value: string): Color {
+  const color = parseColor(value);
+  if (!color) {
+    throw new Error(`Expected ${value} to parse`);
+  }
+  return color;
+}
+
+export default function ColorSliderBasicDemo() {
+  const [value, setValue] = useState(requiredColor('#2F6FED'));
+
+  return (
+    <ColorSlider
+      colorSpace="hsb"
+      channel="hue"
+      value={value}
+      onValueChange={setValue}
+      accessibilityLabel="Hue"
+    >
+      <ColorSlider.Output />
+      <ColorSlider.Rail>
+        <ColorSlider.Thumb accessibilityLabel="Hue" />
+      </ColorSlider.Rail>
+    </ColorSlider>
+  );
+}
+```
+
+## API
+
+### ColorSlider
+
+Pair `colorSpace` with a channel from that color space.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children?` | `ReactNode` | — | — |
+| `value?` | `Color` | — | — |
+| `defaultValue?` | `Color` | — | — |
+| `onValueChange?` | `((value: Color) => void)` | — | — |
+| `onValueChangeComplete?` | `((value: Color) => void)` | — | — |
+| `orientation?` | `'horizontal' \| 'vertical'` | — | — |
+| `step?` | `number` | — | — |
+| `pageStep?` | `number` | — | — |
+| `isDisabled?` | `boolean` | — | — |
+| `colorSpace?` | `'rgb' \| 'hsl' \| 'hsb'` | — | — |
+| `channel?` | `'red' \| 'green' \| 'blue' \| 'hue' \| 'saturation' \| 'lightness' \| 'brightness'` | — | — |
+| `asChild?` | `boolean` | — | — |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+## Sub-components
+
+### ColorSlider.Rail
+
+Renders the channel gradient and handles press and drag interactions.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children?` | `ReactNode` | — | — |
+| `asChild?` | `boolean` | — | — |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+### ColorSlider.Thumb
+
+The focusable, adjustable channel control.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children?` | `ReactNode` | — | Either children or a render prop that receives a boolean reflecting whether the component is currently pressed. |
+| `asChild?` | `boolean` | — | — |
+
+Inherits all [`PressableProps`](https://reactnative.dev/docs/pressable#props).
+
+### ColorSlider.Output
+
+Displays the formatted channel value.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children?` | `ReactNode` | — | — |
+| `asChild?` | `boolean` | — | — |
+
+Inherits all [`TextProps`](https://reactnative.dev/docs/text#props).
+
+## Anatomy
+
+| `data-slot`           | Element                    |
+| --------------------- | -------------------------- |
+| `color-slider`        | Root container             |
+| `color-slider-rail`   | Gradient interaction rail  |
+| `color-slider-thumb`  | Adjustable channel control |
+| `color-slider-output` | Formatted value label      |
+
+## Accessibility
+
+Give the slider and thumb an accessible label describing the channel. Arrow keys and native increment/decrement actions change the value.

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

@@ -0,0 +1,64 @@
+# ColorSwatch (https://design.candescent.com/docs/components/color-swatch)
+
+Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-colorswatch--default)
+
+`ColorSwatch` displays an explicit color or the current value from a surrounding `ColorPicker`.
+
+```tsx
+import { ColorSwatch, HStack } from '@cdx-ui/components';
+import { parseColor } from '@cdx-ui/primitives';
+```
+
+## Basic
+
+```tsx
+import { ColorSwatch, HStack } from '@cdx-ui/components';
+import { parseColor, type Color } from '@cdx-ui/primitives';
+
+function requiredColor(value: string): Color {
+  const color = parseColor(value);
+  if (!color) {
+    throw new Error(`Expected ${value} to parse`);
+  }
+  return color;
+}
+
+const color = requiredColor('#2F6FED');
+
+export default function ColorSwatchBasicDemo() {
+  return (
+    <HStack space="lg" className="items-center">
+      <ColorSwatch color={color} size="xs" />
+      <ColorSwatch color={color} size="sm" shape="square" />
+      <ColorSwatch color={color} size="lg" />
+    </HStack>
+  );
+}
+```
+
+## API
+
+### ColorSwatch
+
+The swatch is presentational unless a consumer composes it inside an interactive control. Existing docs-site palette swatches remain local documentation chrome and are not this published component.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children?` | `React.ReactNode` | — | — |
+| `size?` | `'xs' \| 'sm' \| 'lg'` | — | Visual dimension. `xs` = 16, `sm` = 24, and `lg` = 40. |
+| `shape?` | `'circle' \| 'square'` | — | Swatch outline shape. |
+| `asChild?` | `boolean` | — | — |
+| `color?` | `Color` | — | — |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+## Anatomy
+
+| `data-slot`    | Element      |
+| -------------- | ------------ |
+| `color-swatch` | Color sample |
+
+## Accessibility
+
+Do not use a swatch as the only indication of a selected value. Pair it with text inside an appropriately named trigger when it is interactive.

package/docs/components/color-swatch-picker/content.md

@@ -0,0 +1,126 @@
+# ColorSwatchPicker (https://design.candescent.com/docs/components/color-swatch-picker)
+
+Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-colorswatchpicker--default)
+
+`ColorSwatchPicker` selects one color from a consumer-supplied set of presets.
+
+```tsx
+import { ColorSwatchPicker } from '@cdx-ui/components';
+import { parseColor } from '@cdx-ui/primitives';
+```
+
+## Basic
+
+```tsx
+import { useState } from 'react';
+import { ColorSwatchPicker } from '@cdx-ui/components';
+import { parseColor, type Color } from '@cdx-ui/primitives';
+
+function requiredColor(value: string): Color {
+  const color = parseColor(value);
+  if (!color) {
+    throw new Error(`Expected ${value} to parse`);
+  }
+  return color;
+}
+
+const colors = ['#2F6FED', '#7C3AED', '#DB2777', '#DC2626', '#D97706', '#059669'].map(
+  requiredColor,
+);
+
+export default function ColorSwatchPickerBasicDemo() {
+  const [value, setValue] = useState(colors[0]);
+
+  return (
+    <ColorSwatchPicker value={value} onValueChange={setValue} accessibilityLabel="Preset colors">
+      {colors.map((color) => (
+        <ColorSwatchPicker.Item key={color.toString('hex')} color={color}>
+          <ColorSwatchPicker.Swatch />
+          <ColorSwatchPicker.Indicator />
+        </ColorSwatchPicker.Item>
+      ))}
+    </ColorSwatchPicker>
+  );
+}
+```
+
+## API
+
+### ColorSwatchPicker
+
+Owns standalone selection or reads and updates the shared value when nested in `ColorPicker`.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children?` | `ReactNode` | — | — |
+| `asChild?` | `boolean` | — | — |
+| `value?` | `Color` | — | — |
+| `defaultValue?` | `Color` | — | — |
+| `onValueChange?` | `((value: Color) => void)` | — | — |
+| `isDisabled?` | `boolean` | — | — |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+## Sub-components
+
+### ColorSwatchPicker.Item
+
+The pressable radio item for one preset color.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children?` | `ReactNode` | — | — |
+| `asChild?` | `boolean` | — | — |
+| `color` | `Color` | — | — |
+| `isDisabled?` | `boolean` | — | — |
+| `isHovered?` | `boolean` | — | — |
+| `isActive?` | `boolean` | — | — |
+| `isFocused?` | `boolean` | — | — |
+| `isFocusVisible?` | `boolean` | — | — |
+
+Inherits all [`PressableProps`](https://reactnative.dev/docs/pressable#props).
+
+### ColorSwatchPicker.Swatch
+
+Displays the item color.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | — |
+| `children?` | `ReactNode` | — | — |
+| `size?` | `'xs' \| 'sm' \| 'lg'` | — | Visual dimension. `xs` = 16, `sm` = 24, and `lg` = 40. |
+| `shape?` | `'circle' \| 'square'` | — | Swatch outline shape. |
+| `asChild?` | `boolean` | — | — |
+
+Inherits all [`ViewProps`](https://reactnative.dev/docs/view#props).
+
+### ColorSwatchPicker.Indicator
+
+Renders the selected-state indicator.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className?` | `string` | — | Utility classes for size (`size-*`) and placement, merged after the defaults. |
+| `children?` | `ReactNode` | — | — |
+| `filled?` | `boolean` | — | When `true`, renders the filled variant of the icon (if available). Defaults to `false` (outlined). |
+| `size?` | `string \| number` | — | Width and height of the icon, in pixels or any SVG length. The bare icon renders at 24 when omitted. |
+| `data-testid?` | `string` | — | Test identifier forwarded to the rendered SVG. |
+| `as?` | `ForgeIcon` | — | — |
+| `asChild?` | `boolean` | — | — |
+
+Inherits all `ForgeIconProps` (react-native-svg `SvgProps` plus `filled` and `size`).
+
+## Anatomy
+
+| `data-slot`                     | Element                  |
+| ------------------------------- | ------------------------ |
+| `color-swatch-picker`           | Radio group              |
+| `color-swatch-picker-item`      | Pressable preset         |
+| `color-swatch-picker-swatch`    | Item color sample        |
+| `color-swatch-picker-indicator` | Selected-state indicator |
+
+## Accessibility
+
+Give the picker an accessible label. Each item is announced as a radio option using its color value unless an explicit accessible label is supplied.

package/docs/components/content.md

@@ -0,0 +1,97 @@
+# Components (https://design.candescent.com/docs/components)
+
+## Action
+
+- [Button](https://design.candescent.com/docs/components/button/content.md) — A pressable action element for triggering events.
+- [Icon Button](https://design.candescent.com/docs/components/icon-button/content.md) — A button that displays only an icon, used for compact actions where the icon clearly communicates intent.
+- [Toggle Button](https://design.candescent.com/docs/components/toggle-button/content.md) — A button that stays pressed when selected, used standalone or in a group for single- or multiple-choice actions.
+- [Link](https://design.candescent.com/docs/components/link/content.md) — A link is interactive text that navigates to another location, either inside or outside the app.
+- [Quick Action Button](https://design.candescent.com/docs/components/quick-action-button/content.md) — A circular icon action with a supporting label for compact action groups.
+
+## Input & selection
+
+- [Checkbox](https://design.candescent.com/docs/components/checkbox/content.md) — A checkbox is an input control that allows the user to select multiple options from a set of options or a single yes/no option.
+- [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.
+- [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.
+- [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.
+- [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.
+- [ColorPicker](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.
+- [ColorArea](https://design.candescent.com/docs/components/color-area/content.md) — A two-dimensional control for selecting saturation and brightness in the HSB color space.
+- [ColorSlider](https://design.candescent.com/docs/components/color-slider/content.md) — A one-dimensional control for selecting a channel from an opaque RGB, HSL, or HSB color.
+- [ColorField](https://design.candescent.com/docs/components/color-field/content.md) — A text field for editing an opaque color or one RGB or HSL channel.
+- [ColorSwatch](https://design.candescent.com/docs/components/color-swatch/content.md) — A presentational sample of an opaque color in configurable sizes and shapes.
+- [ColorSwatchPicker](https://design.candescent.com/docs/components/color-swatch-picker/content.md) — A radio-style compound for choosing from consumer-supplied color presets.
+- [Switch](https://design.candescent.com/docs/components/switch/content.md) — A toggle control that lets users turn a single option on or off.
+- [Tile](https://design.candescent.com/docs/components/tile/content.md) — A composable, selectable card/row for pick-one or pick-many flows such as account pickers and category selectors.
+
+## Date & time
+
+- [Calendar](https://design.candescent.com/docs/components/calendar/content.md) — A single-date day grid for selecting a date, with month navigation and a year picker.
+- [Date Field](https://design.candescent.com/docs/components/date-field/content.md) — A segmented input for typing a date or a month, with values exchanged as DateId strings.
+- [Date Picker](https://design.candescent.com/docs/components/date-picker/content.md) — A compound date picker pairing a segmented date field with a calendar in a popover, dialog, bottom sheet, or inline surface.
+- [Date Range Picker](https://design.candescent.com/docs/components/date-range-picker/content.md) — A compound date range picker pairing dual segmented date fields with a range calendar in a popover, dialog, bottom sheet, or inline surface.
+- [Date Time Field](https://design.candescent.com/docs/components/date-time-field/content.md) — A segmented input for typing a date and time together, with values exchanged as DateTimeId strings.
+- [Date Time List](https://design.candescent.com/docs/components/date-time-list/content.md) — A scroll-wheel picker for choosing a date and time across separate columns, with values exchanged as DateTimeId strings.
+- [Date Time Picker](https://design.candescent.com/docs/components/date-time-picker/content.md) — A compound date and time picker pairing a segmented field with scroll-wheel columns in a popover, dialog, or bottom sheet.
+- [Month Calendar](https://design.candescent.com/docs/components/month-calendar/content.md) — A month and year grid for selecting a single month, with a year picker and year navigation.
+- [Month Picker](https://design.candescent.com/docs/components/month-picker/content.md) — A compound month picker pairing a segmented date field in month mode with a month calendar in a popover, dialog, bottom sheet, or inline surface.
+
+## Indicators & status
+
+- [Badge](https://design.candescent.com/docs/components/badge/content.md) — A small status annotation that wraps a child control and positions an indicator at a corner.
+- [Chip](https://design.candescent.com/docs/components/chip/content.md) — Chips are compact elements that represent an input, attribute, or action. They allow users to enter information, make selections, filter content, or trigger actions.
+- [Progress Bar](https://design.candescent.com/docs/components/progress-bar/content.md) — A continuous progress bar that visualizes determinate or indeterminate progress with a compound track and indicator.
+- [Progress Circle](https://design.candescent.com/docs/components/progress-circle/content.md) — A circular progress indicator that visualizes determinate or indeterminate progress with a compound ring and indicator.
+- [Progress Segmented](https://design.candescent.com/docs/components/progress-segmented/content.md) — A segmented progress bar that visualizes step-by-step completion as a row of discrete segments.
+- [Skeleton](https://design.candescent.com/docs/components/skeleton/content.md) — A pulsing loading placeholder shaped via className — no intrinsic size, layout preserved while content loads.
+
+## Content display
+
+- [Accordion](https://design.candescent.com/docs/components/accordion/content.md) — A vertically stacked set of disclosure items for showing and hiding related content.
+- [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.
+- [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.
+- [ReorderableList](https://design.candescent.com/docs/components/reorderable-list/content.md) — A short, mount-all list that lets members drag rows into a new order via an explicit handle.
+- [Virtualized List](https://design.candescent.com/docs/components/virtualized-list/content.md) — A performant virtualized list for large datasets — only visible rows mount at a time.
+- [Text](https://design.candescent.com/docs/components/text/content.md) — Body text with a responsive, token-based typography scale.
+- [Heading](https://design.candescent.com/docs/components/heading/content.md) — Semantic heading text with an accessible, token-based typography scale.
+
+## Feedback
+
+- [Alert](https://design.candescent.com/docs/components/alert/content.md) — An inline severity banner that renders contextual feedback — danger, warning, success, or info — with an optional title, body, and trailing actions.
+- [Alert Dialog](https://design.candescent.com/docs/components/alert-dialog/content.md) — A modal confirmation for destructive or important actions that requires an explicit response.
+- [Dialog](https://design.candescent.com/docs/components/dialog/content.md) — A modal overlay that interrupts the user with critical information or decisions requiring immediate attention.
+- [Full Screen Dialog](https://design.candescent.com/docs/components/full-screen-dialog/content.md) — A modal page that covers the viewport with a back, title, and close header for single-step or multi-step tasks.
+- [Tooltip](https://design.candescent.com/docs/components/tooltip/content.md) — A contextual hint overlay anchored to a trigger element.
+- [Toast](https://design.candescent.com/docs/components/toast/content.md) — A brief notification that confirms an action or reports a background result without interrupting the current task.
+
+## Surfaces & layout
+
+- [Bottom Sheet](https://design.candescent.com/docs/components/bottom-sheet/content.md) — A surface that slides up from the bottom of the screen to present secondary tasks without leaving the current context.
+- [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.
+- [ScopedTheme](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.
+- [ScrollShadow](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.
+
+## Navigation
+
+- [Breadcrumbs](https://design.candescent.com/docs/components/breadcrumbs/content.md) — A navigation trail that shows the current page within a hierarchy.
+- [Tabs](https://design.candescent.com/docs/components/tabs/content.md) — A set of layered sections that displays one content panel at a time.
+
+## Data & tables
+
+- [Data Grid](https://design.candescent.com/docs/components/data-grid/content.md) — A web data grid with rows, columns, sort, filters, selection, and pagination.
+- [Table](https://design.candescent.com/docs/components/table/content.md) — A presentational compound table for displaying tabular data with consistent Forge styling.
+- [Table Pagination](https://design.candescent.com/docs/components/table-pagination/content.md) — A compound pager for moving between pages of a list or table.