@usefidel/design-system 0.21.0 → 0.23.0

package/dist/index.css

@@ -2356,6 +2356,54 @@
   margin-top: var(--spacing-3, 12px);
 }
 
+/* src/components/Swatch/swatch.css */
+.fds-swatch {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: var(--radius-lg, 8px);
+  background: var(--color-bg, #ffffff);
+  overflow: hidden;
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+}
+.fds-swatch__color {
+  height: var(--spacing-12, 48px);
+  background: var(--fds-swatch-color, transparent);
+  box-shadow: inset 0 -1px 0 var(--color-black-alpha-8, rgba(0, 0, 0, 0.08));
+}
+.fds-swatch__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1, 4px);
+  padding: var(--spacing-2, 8px) var(--spacing-3, 12px) var(--spacing-3, 12px);
+  min-width: 0;
+}
+.fds-swatch__name {
+  margin: 0;
+  font-family: var(--font-mono, "JetBrains Mono", monospace);
+  font-size: var(--font-size-text-xs, 12px);
+  line-height: var(--line-height-text-xs, 18px);
+  font-weight: var(--font-weight-semibold, 600);
+  color: var(--color-text, #171717);
+  overflow-wrap: anywhere;
+}
+.fds-swatch__value {
+  margin: 0;
+  font-family: var(--font-mono, "JetBrains Mono", monospace);
+  font-size: var(--font-size-text-2xs, 11px);
+  line-height: var(--line-height-text-2xs, 16px);
+  color: var(--color-text-tertiary, #737373);
+  overflow-wrap: anywhere;
+}
+.fds-swatch__detail {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-1, 4px);
+  margin-top: var(--spacing-1, 4px);
+}
+
 /* src/components/Checkbox/checkbox.css */
 .fds-checkbox {
   display: inline-flex;
@@ -2532,6 +2580,120 @@
   }
 }
 
+/* src/components/RadioCard/radio-card.css */
+.fds-radio-card {
+  position: relative;
+  display: flex;
+  min-width: 0;
+}
+.fds-radio-card__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+.fds-radio-card__input:disabled {
+  cursor: not-allowed;
+}
+.fds-radio-card__body {
+  box-sizing: border-box;
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-3, 12px);
+  padding: var(--spacing-4, 16px);
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: var(--radius-xl, 12px);
+  background: var(--color-bg, #ffffff);
+  cursor: pointer;
+  transition: border-color var(--duration-quick, 150ms) ease, box-shadow var(--duration-quick, 150ms) ease;
+}
+.fds-radio-card__input:hover:not(:disabled):not(:checked) ~ .fds-radio-card__body {
+  border-color: var(--color-border-strong, #d4d4d4);
+}
+.fds-radio-card__input:checked ~ .fds-radio-card__body {
+  border-color: var(--color-text, #171717);
+  box-shadow: 0 0 0 1px var(--color-text, #171717);
+}
+.fds-radio-card__input:focus-visible ~ .fds-radio-card__body {
+  outline: 2px solid var(--color-focus, #ea580c);
+  outline-offset: 2px;
+}
+.fds-radio-card__icon {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-lg, 8px);
+  background: var(--color-surface, #f5f5f5);
+  color: var(--color-text, #171717);
+}
+.fds-radio-card__text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.fds-radio-card__label {
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  line-height: var(--line-height-text-sm, 22px);
+  font-weight: var(--font-weight-semibold, 600);
+  color: var(--color-text, #171717);
+}
+.fds-radio-card__description {
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-compact, 13px);
+  line-height: var(--line-height-text-compact, 20px);
+  color: var(--color-text-secondary, #525252);
+}
+.fds-radio-card__meta {
+  margin-top: var(--spacing-1, 4px);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-xs, 12px);
+  line-height: var(--line-height-text-xs, 18px);
+  color: var(--color-text-secondary, #525252);
+}
+.fds-radio-card__circle {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  margin-top: 3px;
+  border: 1px solid var(--color-border-strong, #d4d4d4);
+  border-radius: var(--radius-full, 9999px);
+  background: var(--color-bg, #ffffff);
+  transition: border-color var(--duration-quick, 150ms) ease, border-width var(--duration-quick, 150ms) ease;
+}
+.fds-radio-card__input:checked ~ .fds-radio-card__body .fds-radio-card__circle {
+  border: 5px solid var(--color-text, #171717);
+}
+.fds-radio-card[data-disabled] .fds-radio-card__body {
+  cursor: not-allowed;
+  background: var(--color-surface-subtle, #fafafa);
+}
+.fds-radio-card[data-disabled] .fds-radio-card__label,
+.fds-radio-card[data-disabled] .fds-radio-card__description,
+.fds-radio-card[data-disabled] .fds-radio-card__meta {
+  color: var(--color-text-muted, #a3a3a3);
+}
+.fds-radio-card[data-disabled] .fds-radio-card__circle {
+  opacity: 0.5;
+}
+@media (prefers-reduced-motion: reduce) {
+  .fds-radio-card__body,
+  .fds-radio-card__circle {
+    transition: none;
+  }
+}
+
 /* src/components/Accordion/accordion.css */
 .fds-accordion {
   box-sizing: border-box;
@@ -2883,8 +3045,10 @@
 
 /* src/components/Table/table.css */
 .fds-table {
+  box-sizing: border-box;
   width: 100%;
   overflow-x: auto;
+  border: 1px solid var(--color-border, #e5e5e5);
   border-radius: var(--radius-xl, 12px);
   background: var(--color-surface-raised, #ffffff);
 }
@@ -2899,20 +3063,24 @@
 }
 .fds-table__table th {
   padding: var(--spacing-2, 8px) var(--spacing-4, 16px);
-  background: var(--color-surface, #f5f5f5);
+  background: var(--color-surface-subtle, #fafafa);
+  border-bottom: 1px solid var(--color-border, #e5e5e5);
   font-size: var(--font-size-text-2xs, 11px);
-  font-weight: var(--font-weight-medium, 500);
+  line-height: var(--line-height-text-2xs, 16px);
+  font-weight: var(--font-weight-semibold, 600);
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
   color: var(--color-text-secondary, #525252);
   text-align: left;
   white-space: nowrap;
 }
 .fds-table__table td {
   padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
-  border-bottom: 1px solid var(--color-border-light, #f5f5f5);
+  border-top: 1px solid var(--color-border-light, #f5f5f5);
   vertical-align: middle;
 }
-.fds-table__table tbody tr:last-child td {
-  border-bottom: 0;
+.fds-table__table tbody tr:first-child td {
+  border-top: 0;
 }
 .fds-table__table .fds-table__cell--end {
   text-align: right;

package/dist/index.d.cts

@@ -666,6 +666,23 @@ interface StatProps extends HTMLAttributes<HTMLDivElement> {
  */
 declare function Stat({ label, value, children, className, ...rest }: StatProps): react.JSX.Element;
 
+interface SwatchProps extends HTMLAttributes<HTMLDivElement> {
+    /** The colour to show, as any CSS colour. Pass a value you have already validated. */
+    color: string;
+    /** The token's name, e.g. "accent". Set in mono. */
+    name: ReactNode;
+    /** The value as written, e.g. "#ff6b00". Set in mono under the name. */
+    value?: ReactNode;
+    /** Detail under the value, e.g. a row of Tags. */
+    children?: ReactNode;
+}
+/**
+ * Fidel design-system Swatch: a colour block over a token's name and value.
+ * A hairline inside the block keeps white and near-background colours visible.
+ * Lay several out in a grid.
+ */
+declare function Swatch({ color, name, value, children, className, ...rest }: SwatchProps): react.JSX.Element;
+
 interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
     /** Text beside the box. Without one, pass `aria-label`. */
     label?: ReactNode;
@@ -696,6 +713,25 @@ interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'
  */
 declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
 
+interface RadioCardProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /** Card title. */
+    label: ReactNode;
+    /** One or two lines under the title saying what the choice does. */
+    description?: ReactNode;
+    /** Small picture left of the text, usually an 18px icon. */
+    icon?: ReactNode;
+    /** Extra line under the description, e.g. a status or requirement. */
+    meta?: ReactNode;
+}
+/**
+ * Fidel design-system RadioCard: one choice of several, shown as a card with
+ * an icon, title and description. A native radio underneath, so cards that
+ * share a `name` move with the arrow keys and submit like any radio. Wrap the
+ * set in a `role="radiogroup"` element (or a fieldset) with a label; lay the
+ * cards out with the parent's grid or flex.
+ */
+declare const RadioCard: react.ForwardRefExoticComponent<RadioCardProps & react.RefAttributes<HTMLInputElement>>;
+
 interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     /** Header content, always visible. Clicking it opens and closes the body. */
     summary: ReactNode;
@@ -822,11 +858,11 @@ interface TableProps<Row> extends Omit<HTMLAttributes<HTMLDivElement>, 'children
     'aria-label': string;
 }
 /**
- * Fidel design-system Table: a grey header row over hairline-divided rows,
- * for records people scan by column, like payments. With no rows it keeps
- * the header and shows `empty` beneath it. Scrolls sideways on narrow
- * screens instead of squashing columns. Measured from Figma Settings ·
- * Billing history.
+ * Fidel design-system Table: a bordered card with a light uppercase header
+ * row over hairline-divided rows, for records people scan by column, like
+ * payments. With no rows it keeps the header and shows `empty` beneath it.
+ * Scrolls sideways on narrow screens instead of squashing columns. Same look
+ * as the webapp's Projects table.
  */
 declare function Table<Row>({ columns, rows, rowKey, empty, className, 'aria-label': ariaLabel, ...rest }: TableProps<Row>): react.JSX.Element;
 
@@ -859,4 +895,4 @@ interface PricingCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
  */
 declare function PricingCard({ eyebrow, title, badge, price, period, description, action, featuresTitle, featuresIntro, features, highlighted, className, ...rest }: PricingCardProps): react.JSX.Element;
 
-export { Accordion, type AccordionProps, AppNav, type AppNavProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type Breakpoint, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutTone, Card, type CardPadding, type CardProps, type CardTone, Checkbox, type CheckboxProps, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, EmptyState, type EmptyStateProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Input, type InputProps, Menu, type MenuItem, type MenuProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, Pagination, type PaginationProps, PricingCard, type PricingCardProps, Radio, type RadioProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Split, type SplitProps, StackedCardsIllustration, Stat, type StatProps, type Step, StepList, type StepListProps, type StepStatus, TabNav, type TabNavProps, Table, type TableColumn, type TableProps, Tag, type TagProps, Toggle, type ToggleProps, type ToggleSize, type Tone, breakpoints };
+export { Accordion, type AccordionProps, AppNav, type AppNavProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type Breakpoint, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutTone, Card, type CardPadding, type CardProps, type CardTone, Checkbox, type CheckboxProps, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, EmptyState, type EmptyStateProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Input, type InputProps, Menu, type MenuItem, type MenuProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, Pagination, type PaginationProps, PricingCard, type PricingCardProps, Radio, RadioCard, type RadioCardProps, type RadioProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Split, type SplitProps, StackedCardsIllustration, Stat, type StatProps, type Step, StepList, type StepListProps, type StepStatus, Swatch, type SwatchProps, TabNav, type TabNavProps, Table, type TableColumn, type TableProps, Tag, type TagProps, Toggle, type ToggleProps, type ToggleSize, type Tone, breakpoints };

package/dist/index.d.ts

@@ -666,6 +666,23 @@ interface StatProps extends HTMLAttributes<HTMLDivElement> {
  */
 declare function Stat({ label, value, children, className, ...rest }: StatProps): react.JSX.Element;
 
+interface SwatchProps extends HTMLAttributes<HTMLDivElement> {
+    /** The colour to show, as any CSS colour. Pass a value you have already validated. */
+    color: string;
+    /** The token's name, e.g. "accent". Set in mono. */
+    name: ReactNode;
+    /** The value as written, e.g. "#ff6b00". Set in mono under the name. */
+    value?: ReactNode;
+    /** Detail under the value, e.g. a row of Tags. */
+    children?: ReactNode;
+}
+/**
+ * Fidel design-system Swatch: a colour block over a token's name and value.
+ * A hairline inside the block keeps white and near-background colours visible.
+ * Lay several out in a grid.
+ */
+declare function Swatch({ color, name, value, children, className, ...rest }: SwatchProps): react.JSX.Element;
+
 interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
     /** Text beside the box. Without one, pass `aria-label`. */
     label?: ReactNode;
@@ -696,6 +713,25 @@ interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'
  */
 declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
 
+interface RadioCardProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /** Card title. */
+    label: ReactNode;
+    /** One or two lines under the title saying what the choice does. */
+    description?: ReactNode;
+    /** Small picture left of the text, usually an 18px icon. */
+    icon?: ReactNode;
+    /** Extra line under the description, e.g. a status or requirement. */
+    meta?: ReactNode;
+}
+/**
+ * Fidel design-system RadioCard: one choice of several, shown as a card with
+ * an icon, title and description. A native radio underneath, so cards that
+ * share a `name` move with the arrow keys and submit like any radio. Wrap the
+ * set in a `role="radiogroup"` element (or a fieldset) with a label; lay the
+ * cards out with the parent's grid or flex.
+ */
+declare const RadioCard: react.ForwardRefExoticComponent<RadioCardProps & react.RefAttributes<HTMLInputElement>>;
+
 interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     /** Header content, always visible. Clicking it opens and closes the body. */
     summary: ReactNode;
@@ -822,11 +858,11 @@ interface TableProps<Row> extends Omit<HTMLAttributes<HTMLDivElement>, 'children
     'aria-label': string;
 }
 /**
- * Fidel design-system Table: a grey header row over hairline-divided rows,
- * for records people scan by column, like payments. With no rows it keeps
- * the header and shows `empty` beneath it. Scrolls sideways on narrow
- * screens instead of squashing columns. Measured from Figma Settings ·
- * Billing history.
+ * Fidel design-system Table: a bordered card with a light uppercase header
+ * row over hairline-divided rows, for records people scan by column, like
+ * payments. With no rows it keeps the header and shows `empty` beneath it.
+ * Scrolls sideways on narrow screens instead of squashing columns. Same look
+ * as the webapp's Projects table.
  */
 declare function Table<Row>({ columns, rows, rowKey, empty, className, 'aria-label': ariaLabel, ...rest }: TableProps<Row>): react.JSX.Element;
 
@@ -859,4 +895,4 @@ interface PricingCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
  */
 declare function PricingCard({ eyebrow, title, badge, price, period, description, action, featuresTitle, featuresIntro, features, highlighted, className, ...rest }: PricingCardProps): react.JSX.Element;
 
-export { Accordion, type AccordionProps, AppNav, type AppNavProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type Breakpoint, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutTone, Card, type CardPadding, type CardProps, type CardTone, Checkbox, type CheckboxProps, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, EmptyState, type EmptyStateProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Input, type InputProps, Menu, type MenuItem, type MenuProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, Pagination, type PaginationProps, PricingCard, type PricingCardProps, Radio, type RadioProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Split, type SplitProps, StackedCardsIllustration, Stat, type StatProps, type Step, StepList, type StepListProps, type StepStatus, TabNav, type TabNavProps, Table, type TableColumn, type TableProps, Tag, type TagProps, Toggle, type ToggleProps, type ToggleSize, type Tone, breakpoints };
+export { Accordion, type AccordionProps, AppNav, type AppNavProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type Breakpoint, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutTone, Card, type CardPadding, type CardProps, type CardTone, Checkbox, type CheckboxProps, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, EmptyState, type EmptyStateProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Input, type InputProps, Menu, type MenuItem, type MenuProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, Pagination, type PaginationProps, PricingCard, type PricingCardProps, Radio, RadioCard, type RadioCardProps, type RadioProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Split, type SplitProps, StackedCardsIllustration, Stat, type StatProps, type Step, StepList, type StepListProps, type StepStatus, Swatch, type SwatchProps, TabNav, type TabNavProps, Table, type TableColumn, type TableProps, Tag, type TagProps, Toggle, type ToggleProps, type ToggleSize, type Tone, breakpoints };