@photonix/basic 3.0.0 → 3.1.0

package/dist/index.css

@@ -14,6 +14,15 @@
   --surface-brand-subtle: var(--color-primary-100);
   --surface-brand-primary-subtle: var(--color-primary-100);
 }
+:root,
+[data-theme] {
+  --shadow-xs: var(--shadow-down-xs);
+  --shadow-sm: var(--shadow-down-sm);
+  --shadow-md: var(--shadow-down-md);
+  --shadow-lg: var(--shadow-down-lg);
+  --shadow-xl: var(--shadow-down-xl);
+  --shadow-2xl: var(--shadow-down-2xl);
+}
 
 /* ../ultimate/src/styles/global.css */
 :root {
@@ -7359,6 +7368,7 @@
   line-height: var(--title-md-line-height);
 }
 .textFieldContainer {
+  --text-field-content-gap: var(--space-xs);
   align-items: center;
   border: var(--border-sm) solid var(--border-neutral-tertiary);
   border-radius: var(--radius-2xs);
@@ -7401,6 +7411,7 @@
   min-block-size: var(--dimensions-44);
 }
 .medium {
+  --text-field-content-gap: var(--space-xs);
   font-size: var(--body-md-size);
   line-height: var(--body-md-line-height);
   min-block-size: var(--dimensions-44);
@@ -7410,6 +7421,7 @@
   min-block-size: var(--dimensions-36);
 }
 .small {
+  --text-field-content-gap: var(--space-2xs);
   font-size: var(--body-sm-size);
   line-height: var(--body-sm-line-height);
   min-block-size: var(--dimensions-36);
@@ -7444,7 +7456,7 @@
   color: var(--foreground-neutral-primary);
   display: flex;
   justify-content: center;
-  margin-inline-end: var(--space-xs);
+  margin-inline-end: var(--text-field-content-gap);
 }
 .textFieldLeadingText {
   align-items: center;
@@ -7456,7 +7468,7 @@
   font-size: var(--body-lg-size);
   font-weight: var(--body-lg-weight);
   justify-content: center;
-  margin-inline-end: var(--space-xs);
+  margin-inline-end: var(--text-field-content-gap);
   padding: var(--space-4xs) var(--space-2xs);
   white-space: nowrap;
 }
@@ -7465,7 +7477,7 @@
   display: flex;
   flex: 1;
   flex-direction: column;
-  padding-inline-end: var(--space-xs);
+  padding-inline-end: var(--text-field-content-gap);
   position: relative;
 }
 .textFieldInlineLabel {
@@ -7538,7 +7550,7 @@
 .textFieldTrailingGroup {
   align-items: center;
   display: flex;
-  gap: var(--space-xs);
+  gap: var(--text-field-content-gap);
 }
 .textFieldClearButton {
   block-size: var(--dimensions-20) !important;
@@ -7585,7 +7597,7 @@
   font-family: var(--body-lg-family);
   font-size: var(--body-lg-size);
   font-weight: var(--body-lg-weight);
-  gap: var(--space-xs);
+  gap: var(--text-field-content-gap);
   line-height: var(--body-lg-line-height);
   transition: color var(--motion-duration-normal) var(--motion-ease-standard);
 }
@@ -7593,9 +7605,6 @@
 .activeDropdown {
   color: var(--text-neutral-primary);
 }
-.textFieldTrailingDropdown span {
-  margin-inline-end: calc(var(--dimensions-4) * -1);
-}
 .textFieldChevronIcon {
   align-items: center;
   color: var(--foreground-neutral-primary);
@@ -7613,7 +7622,7 @@
   color: var(--foreground-neutral-primary);
   cursor: pointer;
   display: flex;
-  gap: var(--space-xs);
+  gap: var(--text-field-content-gap);
   z-index: var(--z-local-below);
 }
 .textFieldPasswordToggleButton {
@@ -7754,17 +7763,12 @@
   font-size: var(--body-sm-size);
   font-weight: var(--body-sm-weight);
   line-height: var(--body-sm-line-height);
-  margin-inline-end: var(--space-2xs);
   padding: 0 var(--space-3xs);
 }
-.small .textFieldInputWrapper {
-  padding-inline-end: var(--space-2xs);
-}
 .small .textFieldTrailingDropdown {
   font-family: var(--body-sm-family);
   font-size: var(--body-sm-size);
   font-weight: var(--body-sm-weight);
-  gap: var(--space-3xs);
   line-height: var(--body-sm-line-height);
 }
 .small .textFieldChevronIcon svg {
@@ -8384,6 +8388,9 @@
   user-select: none;
   vertical-align: middle;
 }
+.chipRoot.rounded {
+  border-radius: var(--radius-2xs);
+}
 .chipRoot::after {
   background-color: transparent;
   content: "";
@@ -8567,6 +8574,42 @@
   block-size: var(--dimensions-16);
   inline-size: var(--dimensions-16);
 }
+.small {
+  block-size: var(--dimensions-32);
+  font-size: var(--title-sm-size);
+  font-weight: var(--title-sm-weight-emphasize);
+  letter-spacing: var(--title-sm-letter-spacing);
+  line-height: var(--title-sm-line-height);
+  padding: 0 var(--dimensions-6);
+}
+.small.hasAvatar {
+  padding: var(--dimensions-4);
+}
+.small .chipIcon,
+.small .chipIcon :global(svg) {
+  block-size: var(--dimensions-16);
+  inline-size: var(--dimensions-16);
+}
+.small .chipAvatar {
+  block-size: var(--dimensions-24);
+  flex-shrink: 0;
+  inline-size: var(--dimensions-24);
+}
+.small .chipContent {
+  padding: 0 var(--dimensions-4);
+}
+.small .chipTrailingIcon,
+.small .chipDelete,
+.small .chipAction,
+.small .chipTrailingIcon :global(svg),
+.small .chipDelete :global(svg),
+.small .chipAction :global(svg) {
+  block-size: var(--dimensions-16);
+  inline-size: var(--dimensions-16);
+}
+.outline .chipDelete {
+  color: var(--foreground-neutral-primary);
+}
 .clickable {
   cursor: pointer;
 }
@@ -8843,3 +8886,216 @@
     background: var(--surface-neutral-elevator);
   }
 }
+
+/* ../ultimate/src/components/star/Star.module.css */
+.starRoot {
+  align-items: center;
+  background: transparent;
+  block-size: var(--dimensions-40);
+  border: none;
+  border-radius: 50%;
+  color: var(--foreground-neutral-primary);
+  cursor: pointer;
+  display: inline-flex;
+  flex-shrink: 0;
+  inline-size: var(--dimensions-40);
+  isolation: isolate;
+  justify-content: center;
+  outline: none;
+  padding: 0;
+  position: relative;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--motion-duration-fast) var(--motion-ease-out);
+}
+.starRoot:focus-visible {
+  outline: var(--border-md) solid var(--border-state-focus);
+  outline-offset: var(--dimensions-2);
+}
+.starRoot:disabled {
+  color: var(--foreground-state-disabled);
+  cursor: not-allowed;
+}
+.starRoot::before {
+  background-color: transparent;
+  border-radius: 50%;
+  content: "";
+  inset: 0;
+  opacity: var(--opacity-visible);
+  pointer-events: none;
+  position: absolute;
+  transform: scale(1);
+  transition:
+    background-color var(--motion-duration-fast) ease-out,
+    transform var(--motion-duration-fast) ease-out,
+    opacity var(--motion-duration-fast) ease-out;
+}
+.starRoot:hover:not(:disabled)::before {
+  background-color: var(--surface-neutral-on-surface);
+}
+.starRoot:active:not(:disabled)::before {
+  background-color: var(--surface-state-press);
+}
+.starStatePressed::before {
+  animation: star-pressed-expand var(--motion-duration-medium) var(--motion-ease-out) forwards;
+}
+@keyframes star-pressed-expand {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1.2);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1);
+  }
+}
+.starIconWrapper {
+  align-items: center;
+  block-size: var(--dimensions-24);
+  display: flex;
+  inline-size: var(--dimensions-24);
+  justify-content: center;
+  position: relative;
+  transition: color 150ms ease-out;
+  z-index: var(--z-local-content);
+}
+.starStateChecked.starVariantDefault {
+  color: var(--surface-accent-yellow);
+}
+.starStateChecked.starVariantNeutral {
+  color: var(--foreground-neutral-primary);
+}
+.starSizeSmall {
+  block-size: var(--dimensions-32);
+  inline-size: var(--dimensions-32);
+}
+.starSizeSmall .starIconWrapper {
+  block-size: var(--dimensions-20);
+  inline-size: var(--dimensions-20);
+}
+.starSizeMedium {
+  block-size: var(--dimensions-40);
+  inline-size: var(--dimensions-40);
+}
+.starSizeMedium .starIconWrapper {
+  block-size: var(--dimensions-24);
+  inline-size: var(--dimensions-24);
+}
+
+/* ../ultimate/src/components/otp/OTP.module.css */
+.separator {
+  align-self: center;
+  color: var(--text-neutral-secondary);
+  text-align: center;
+  user-select: none;
+}
+.cellSlot {
+  display: flex;
+  min-inline-size: 0;
+  position: relative;
+}
+.dot {
+  background-color: var(--text-neutral-primary);
+  block-size: var(--dimensions-8);
+  border-radius: 50%;
+  inline-size: var(--dimensions-8);
+  inset: 0;
+  margin: auto;
+  pointer-events: none;
+  position: absolute;
+}
+.cell {
+  appearance: none;
+  background: transparent;
+  block-size: 100%;
+  border: var(--border-sm) solid var(--border-neutral-tertiary);
+  border-radius: var(--radius-2xs);
+  box-sizing: border-box;
+  caret-color: var(--text-neutral-primary);
+  color: var(--text-neutral-primary);
+  display: block;
+  font: inherit;
+  inline-size: 100%;
+  letter-spacing: inherit;
+  margin: 0;
+  min-inline-size: 0;
+  outline: none;
+  padding: var(--space-5xs) var(--space-4xs);
+  text-align: center;
+  transition: background-color var(--motion-duration-normal) var(--motion-ease-standard), border-color var(--motion-duration-normal) var(--motion-ease-standard);
+}
+.masked {
+  caret-color: transparent;
+  color: transparent;
+}
+.masked::selection {
+  background-color: transparent;
+  color: transparent;
+}
+.large {
+  block-size: var(--dimensions-44);
+}
+.medium {
+  block-size: var(--dimensions-36);
+}
+.small {
+  block-size: var(--dimensions-28);
+}
+.small .cell {
+  padding-block: 0;
+}
+.cell:focus {
+  border-color: var(--border-state-focus);
+  box-shadow: inset 0 0 0 var(--border-sm) var(--border-state-focus);
+}
+.cell[aria-invalid=true] {
+  background-color: var(--surface-state-error);
+  border-color: var(--border-state-error);
+}
+.cell[aria-invalid=true]:focus {
+  box-shadow: inset 0 0 0 var(--border-sm) var(--border-state-error);
+}
+.cell:disabled {
+  background-color: var(--surface-state-disabled);
+  cursor: not-allowed;
+  opacity: var(--opacity-disabled);
+}
+.cell:disabled + .dot {
+  opacity: var(--opacity-disabled);
+}
+.cell:read-only:not(:disabled, [aria-invalid=true]) {
+  background-color: var(--surface-neutral-secondary);
+  cursor: text;
+}
+.cell:hover:not(:focus, :disabled, :read-only, [aria-invalid=true]) {
+  background-color: var(--surface-state-hover);
+  border-color: var(--border-state-hover);
+}
+.dotField.large,
+.dotField.medium,
+.dotField.small {
+  block-size: var(--dimensions-16);
+}
+.cell.dotFieldInput {
+  border-radius: 50%;
+  padding: 0;
+}
+.cell.dotFieldInput[data-filled=true] {
+  background-color: var(--text-neutral-primary);
+  border-color: var(--text-neutral-primary);
+}
+.cell.dotFieldInput[aria-invalid=true][data-filled=true] {
+  background-color: var(--border-state-error);
+  border-color: var(--border-state-error);
+}
+.cell.dotFieldInput:focus {
+  outline: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .cell {
+    transition: none;
+  }
+}

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import React__default from 'react';
 export * from '@photonix/icons';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
  * Layout component type definitions
@@ -565,6 +566,8 @@ interface CheckboxProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElemen
      * Whether the checkbox is checked (controlled)
      */
     checked?: boolean;
+    /** Participate in native form validation. */
+    required?: boolean;
     /**
      * Initial checked state when uncontrolled
      */
@@ -603,6 +606,8 @@ interface RadioProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
      * Whether the radio is selected (controlled)
      */
     checked?: boolean;
+    /** Participate in native form validation. */
+    required?: boolean;
     /**
      * Initial selected state when uncontrolled
      */
@@ -622,11 +627,42 @@ interface RadioProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
 }
 declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLButtonElement>>;
 
+/** Props shared by RadioGroup and CheckboxGroup so the two groups read the same way. */
+interface SelectionGroupBaseProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, 'onChange' | 'defaultValue' | 'value' | 'form' | 'name'> {
+    /** Visible group label (legend). Omit only when `aria-label` names the group. */
+    label?: React.ReactNode;
+    /** Supporting text below the label. */
+    description?: React.ReactNode;
+    /** Error message; also marks the group invalid. */
+    error?: React.ReactNode;
+    /** Form field name applied to every option. */
+    name?: string;
+    /** Associates the options with a form outside the group. */
+    form?: string;
+    disabled?: boolean;
+    required?: boolean;
+    /** Layout of the options. @default 'vertical' */
+    orientation?: 'horizontal' | 'vertical';
+    children: React.ReactNode;
+}
+
+interface RadioGroupProps extends SelectionGroupBaseProps {
+    /** Selected option value (controlled). */
+    value?: string;
+    /** Initially selected option value (uncontrolled). */
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+}
+/** Single-choice group of `Radio` children with roving focus and native form support. */
+declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLFieldSetElement>>;
+
 interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
     /**
      * Whether the switch is on (controlled)
      */
     checked?: boolean;
+    /** Participate in native form validation. */
+    required?: boolean;
     /**
      * Initial state when uncontrolled
      */
@@ -662,6 +698,8 @@ interface TextFieldDropdownOption {
     disabled?: boolean;
 }
 interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
+    /** Style the native input without changing the field wrapper layout. */
+    inputStyle?: React.CSSProperties;
     /** Label text. */
     label?: string;
     /** Whether the label is placed inside or outside the input box. Default is 'outside'. */
@@ -1002,7 +1040,12 @@ interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Size of the chip
      */
-    size?: 'medium' | 'large';
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Corner shape: 'pill' is fully rounded, 'rounded' uses the Button corner
+     * radius (e.g. tags inside an input).
+     */
+    shape?: 'pill' | 'rounded';
     /**
      * Whether the chip is disabled
      */
@@ -1017,6 +1060,16 @@ interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
      * Callback when clear button is clicked (only for filled + hasDropdown)
      */
     onClear?: (e: React.MouseEvent) => void;
+    /**
+     * Shows the chip's delete button (CancelFilled) on any variant, e.g. for
+     * removable tags. Takes precedence over `actionIcon`.
+     */
+    onRemove?: (e: React.MouseEvent) => void;
+    /**
+     * Accessible label for the close button
+     * @default `Remove ${label}`
+     */
+    removeLabel?: string;
     /**
      * Optional action icon shown after the dropdown affordance
      */
@@ -1106,4 +1159,208 @@ declare const LayoutProvider: React.FC<LayoutProviderProps>;
  */
 declare const useLayout: () => LayoutContextValue | null;
 
-export { AVATAR_IMAGES, AspectRatio$1 as AspectRatio, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, AvatarTemplate, type AvatarTemplateProps, type BackgroundToken, Badge, Box, Button, type ButtonProps, Center, Checkbox, Chip, ChipBar, type ChipProps, Cluster, Container, CustomScrollbar, Divider, Flex, Grid, GridItem, HStack, Heading, IconButton, Image, LayoutContext, LayoutProvider, Portal, Radio, type RadioProps, type RadiusToken, type ShadowToken, SimpleGrid, Skeleton, SlotPlaceholder, type SlotPlaceholderProps, Spacer, type SpacingToken, Spinner, Stack, Switch, type SwitchProps, Text, TextArea, type TextAreaProps, TextField, type TextFieldDropdownOption, type TextFieldProps, VStack, VisuallyHidden, useLayout };
+/** Native fieldset with a legend, supporting text and an error message for grouped controls. */
+interface FieldsetProps extends React.FieldsetHTMLAttributes<HTMLFieldSetElement> {
+    /** Visible group label. Omit only when the group is named with aria-label. */
+    legend?: React.ReactNode;
+    description?: React.ReactNode;
+    error?: React.ReactNode;
+}
+declare const Fieldset: React.ForwardRefExoticComponent<FieldsetProps & React.RefAttributes<HTMLFieldSetElement>>;
+
+interface CheckboxGroupProps extends SelectionGroupBaseProps {
+    /** Checked option values (controlled). */
+    value?: string[];
+    /** Initially checked option values (uncontrolled). */
+    defaultValue?: string[];
+    onChange?: (value: string[]) => void;
+    /** Message shown by native validation when `required` and nothing is checked. */
+    requiredMessage?: string;
+}
+declare const CheckboxGroupContext: React.Context<{
+    value: string[];
+    name?: string;
+    form?: string;
+    disabled?: boolean;
+    toggle: (value: string, checked: boolean) => void;
+} | null>;
+/** Multi-choice group of `Checkbox` children; same API shape as `RadioGroup`. */
+declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLFieldSetElement>>;
+
+interface NumberFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type" | "min" | "max" | "step" | "size"> {
+    label: string;
+    size?: "small" | "medium" | "large";
+    inputWidth?: number | string;
+    value?: number | null;
+    defaultValue?: number | null;
+    onChange?: (value: number | null) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    error?: string;
+    description?: string;
+    /** Accessible name of the decrement button. @default `Decrease ${label}` */
+    decreaseLabel?: string;
+    /** Accessible name of the increment button. @default `Increase ${label}` */
+    increaseLabel?: string;
+}
+declare function NumberField({ label, size, inputWidth, value, defaultValue, onChange, min, max, step, error, description, disabled, readOnly, name, decreaseLabel, increaseLabel, ...props }: NumberFieldProps): react_jsx_runtime.JSX.Element;
+
+interface RatingProps {
+    label: string;
+    value?: number;
+    defaultValue?: number;
+    max?: number;
+    onChange?: (value: number) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    name?: string;
+    form?: string;
+    /** Show a button that resets the rating to 0. @default false */
+    clearable?: boolean;
+    /** Visible text of the clear button. */
+    clearText?: string;
+    /** Accessible name of the clear button. */
+    clearLabel?: string;
+    /** Accessible name of each star. */
+    getStarLabel?: (value: number, max: number) => string;
+}
+declare function Rating({ label, value, defaultValue, max, onChange, disabled, readOnly, name, form, clearable, clearText, clearLabel, getStarLabel, }: RatingProps): react_jsx_runtime.JSX.Element;
+
+interface OTPProps {
+    label: string;
+    length?: number;
+    /** Insert a visual dash between groups of digits. */
+    groupSize?: number;
+    /** Conceal each entered digit with a dot. Used by PIN. */
+    masked?: boolean;
+    /** Use the label only as an accessible name, without displaying it. */
+    hideLabel?: boolean;
+    /** Render circular PIN indicators instead of rectangular input fields. */
+    dotFields?: boolean;
+    size?: "small" | "medium" | "large";
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** Called automatically when every cell is filled. Verify the code here and pass failures via error. */
+    onComplete?: (value: string) => void;
+    disabled?: boolean;
+    /** Display an existing code without edits. Copying a cell copies the full code. */
+    readOnly?: boolean;
+    required?: boolean;
+    name?: string;
+    form?: string;
+    /** Supporting text below the inputs; an error takes precedence. */
+    helperText?: string;
+    error?: string;
+    /** Accessible name of each cell. */
+    getCellLabel?: (label: string, position: number, length: number) => string;
+    /**
+     * Sequential entry, used by PIN: every tap, focus or key lands on the first empty
+     * cell — digits fill left to right, Backspace clears from the right and no cell
+     * can be picked by hand.
+     */
+    sequential?: boolean;
+    /** Focus the field when it mounts (on the next cell when `sequential`). */
+    autoFocus?: boolean;
+}
+/** Segmented numeric entry with independent input cells, paste/autofill and native form support. */
+declare function OTP({ label, length, groupSize, masked, hideLabel, dotFields, size, value, defaultValue, onChange, onComplete, disabled, readOnly, required, name, form, helperText, error, getCellLabel, sequential, autoFocus, }: OTPProps): react_jsx_runtime.JSX.Element;
+
+interface PINProps extends Omit<OTPProps, "label" | "masked" | "hideLabel" | "dotFields" | "groupSize" | "readOnly" | "size"> {
+    /** Number of digits in the PIN. @default 4 */
+    length?: number;
+    /** Accessible name for the PIN inputs; no visible label is rendered. */
+    "aria-label"?: string;
+    /** Focus the first empty dot on mount. Only one field on a page can; pass `false` for the rest. @default true */
+    autoFocus?: boolean;
+}
+/**
+ * Numeric PIN entry with empty circular indicators that fill as digits are entered.
+ * Entry is sequential: digits fill left to right, Backspace clears from the right and
+ * no dot can be picked by hand.
+ */
+declare function PIN({ length, "aria-label": accessibleLabel, autoFocus, ...props }: PINProps): react_jsx_runtime.JSX.Element;
+
+interface EmptyProps {
+    title?: string;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    action?: React.ReactNode;
+}
+declare function Empty({ title, description, icon, action, }: EmptyProps): react_jsx_runtime.JSX.Element;
+
+interface ResultProps {
+    status: "success" | "error" | "warning" | "info";
+    title: string;
+    description?: React.ReactNode;
+    action?: React.ReactNode;
+}
+declare function Result({ status, title, description, action }: ResultProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * How each label/value pair is laid out (Figma "Detail Field"):
+ * - `stack`: label above the value (Detail Field Stack).
+ * - `inline`: label on the left, value right-aligned on the same row (Detail Field Inline).
+ * - `column`: label and value in a 2 : 3 column grid, value left-aligned (Detail Field Column).
+ */
+type DataListLayout = "stack" | "inline" | "column";
+/**
+ * Per-item variant (Figma Detail Field `variant`).
+ * - `normal`: default row.
+ * - `emphasize`: value in medium weight.
+ * - `total`: summary row — emphasized label and value.
+ * - `flexible` (inline/column): the label hugs its text and the value takes the remaining width.
+ * - `hero` (stack): the value as a large headline figure, e.g. a balance; supports `masked`.
+ * - `complex` (stack): a rich value (avatar, title, meta) that fills the row, with the action at the end.
+ */
+type DataListItemVariant = "normal" | "emphasize" | "total" | "flexible" | "hero" | "complex";
+interface DataListItem {
+    id: string;
+    label: React.ReactNode;
+    value: React.ReactNode;
+    /** @default "normal" */
+    variant?: DataListItemVariant;
+    /**
+     * Medium-weight label (Figma Label `emphasized`): primary text. With `labelLead` the label
+     * stays secondary and only takes the weight (`subEmphasized`). Implied by `variant="total"`.
+     */
+    labelEmphasized?: boolean;
+    /** Lead-in before the label in primary text, e.g. "Send to" (Figma Label `subNormal`/`subEmphasized`). */
+    labelLead?: React.ReactNode;
+    /** Icon before the label, 20px (Figma Label `hasPrefix`). */
+    labelIcon?: React.ReactNode;
+    /** Secondary text at the end of the label row, e.g. "20/500" (Figma Label `hasTrailing`). */
+    labelTrailing?: React.ReactNode;
+    /** 20px icon before the value (Figma Body `leadingIcon`). */
+    icon?: React.ReactNode;
+    /** Muted text before the value, e.g. a currency symbol. */
+    valuePrefix?: React.ReactNode;
+    /** `hero` only: replace the figure with six dots (Figma Balance `hidden`). */
+    masked?: boolean;
+    /** Secondary text on a second line under the value (Figma Body `2 line`). */
+    description?: React.ReactNode;
+    /** Status badge (Figma Body `text w badge`), e.g. `<Badge shape="rounded" color="onLight" />`. */
+    badge?: React.ReactNode;
+    /** `inline`: right after the value, 8px apart. `below`: on its own line under the value. @default "inline" */
+    badgePlacement?: "inline" | "below";
+    /**
+     * Control after the value, e.g. a copy IconButton (Figma Body `trailingIcon`, 20px). It sits in a
+     * 20px slot and never grows the row; use `size="medium"` so the button's icon is 20px.
+     */
+    action?: React.ReactNode;
+}
+interface DataListProps {
+    items: DataListItem[];
+    /** Accessible name of the list. @default "Details" */
+    label?: string;
+    /** @default "stack" for `orientation="vertical"`, otherwise "inline" */
+    layout?: DataListLayout;
+    /** Label size (Figma Label `size`): `sm` = title-sm, `lg` = title-md. @default "sm" in stack, "lg" otherwise */
+    labelSize?: "sm" | "lg";
+    /** @deprecated Use `layout`: "horizontal" maps to `inline`, "vertical" to `stack`. */
+    orientation?: "horizontal" | "vertical";
+}
+declare function DataList({ items, label, layout, labelSize, orientation, }: DataListProps): react_jsx_runtime.JSX.Element;
+
+export { AVATAR_IMAGES, AspectRatio$1 as AspectRatio, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, AvatarTemplate, type AvatarTemplateProps, type BackgroundToken, Badge, Box, Button, type ButtonProps, Center, Checkbox, CheckboxGroup, CheckboxGroupContext, type CheckboxGroupProps, Chip, ChipBar, type ChipProps, Cluster, Container, CustomScrollbar, DataList, type DataListItem, type DataListItemVariant, type DataListLayout, type DataListProps, Divider, Empty, type EmptyProps, Fieldset, type FieldsetProps, Flex, Grid, GridItem, HStack, Heading, IconButton, Image, LayoutContext, LayoutProvider, NumberField, type NumberFieldProps, OTP, type OTPProps, PIN, type PINProps, Portal, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RadiusToken, Rating, type RatingProps, Result, type ResultProps, type ShadowToken, SimpleGrid, Skeleton, SlotPlaceholder, type SlotPlaceholderProps, Spacer, type SpacingToken, Spinner, Stack, Switch, type SwitchProps, Text, TextArea, type TextAreaProps, TextField, type TextFieldDropdownOption, type TextFieldProps, VStack, VisuallyHidden, useLayout };