@usefidel/design-system 0.6.0 → 0.8.0

package/dist/index.css

@@ -376,7 +376,6 @@
 .fds-diff-section__line {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   width: 100%;
 }
 .fds-diff-section__prop {
@@ -392,6 +391,7 @@
   display: flex;
   align-items: center;
   gap: var(--spacing-1);
+  margin-left: auto;
   font-family: var(--font-mono);
   font-weight: var(--font-weight-medium);
   font-size: 14px;
@@ -399,6 +399,13 @@
   letter-spacing: -0.28px;
   white-space: nowrap;
 }
+.fds-diff-section__trailing {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  margin-left: var(--spacing-3);
+  flex-shrink: 0;
+}
 .fds-diff-section__live {
   color: #ef4444;
 }
@@ -409,3 +416,285 @@
 .fds-diff-section__design {
   color: #1e8902;
 }
+
+/* src/components/Select/select.css */
+.fds-select-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2, 8px);
+  width: 100%;
+}
+.fds-select__label {
+  font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-label-sm, 14px);
+  line-height: var(--line-height-label-sm, 22px);
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--color-text, #171717);
+}
+.fds-select {
+  position: relative;
+  width: 100%;
+}
+.fds-select__trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 8px);
+  width: 100%;
+  min-height: 44px;
+  padding: 0 var(--spacing-3, 12px);
+  background: var(--color-surface-raised, #ffffff);
+  border: 1px solid var(--color-border-strong, #d4d4d4);
+  border-radius: var(--radius-md, 6px);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-md, 16px);
+  color: var(--color-text, #171717);
+  cursor: pointer;
+  text-align: left;
+  transition: border-color var(--duration-instant, 80ms) ease, box-shadow var(--duration-instant, 80ms) ease;
+}
+.fds-select__trigger:focus-visible,
+.fds-select__trigger--open {
+  outline: none;
+  border-color: var(--color-accent, #ea580c);
+  box-shadow: inset 0 0 0 1px var(--color-accent, #ea580c);
+}
+.fds-select__trigger--error {
+  border-color: var(--color-error, #b91c1c);
+}
+.fds-select__trigger--error.fds-select__trigger--open,
+.fds-select__trigger--error:focus-visible {
+  box-shadow: inset 0 0 0 1px var(--color-error, #b91c1c);
+}
+.fds-select__trigger:disabled {
+  background: var(--color-surface-muted, #fafafa);
+  color: var(--color-text-muted, #a3a3a3);
+  cursor: not-allowed;
+}
+.fds-select__lead {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.fds-select__value {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.fds-select__value--placeholder {
+  color: var(--color-text-muted, #a3a3a3);
+}
+.fds-select__chevron {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--color-text-muted, #a3a3a3);
+}
+.fds-select__popover {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 50;
+  background: var(--color-surface-raised, #ffffff);
+  border: 1px solid var(--color-border, #e5e5e5);
+  border-radius: var(--radius-md, 6px);
+  box-shadow: var(--shadow-lg, 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 40px rgba(0, 0, 0, 0.1));
+  overflow: hidden;
+}
+.fds-select__search {
+  padding: var(--spacing-2, 8px);
+  border-bottom: 1px solid var(--color-border-light, #f5f5f5);
+}
+.fds-select__searchInput {
+  width: 100%;
+  padding: 8px var(--spacing-3, 12px);
+  border: 1px solid var(--color-border-strong, #d4d4d4);
+  border-radius: var(--radius-sm, 4px);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  color: var(--color-text, #171717);
+}
+.fds-select__searchInput:focus {
+  outline: none;
+  border-color: var(--color-accent, #ea580c);
+  box-shadow: inset 0 0 0 1px var(--color-accent, #ea580c);
+}
+.fds-select__list {
+  max-height: 280px;
+  overflow-y: auto;
+  padding: var(--spacing-1, 4px);
+}
+.fds-select__list:focus {
+  outline: none;
+}
+.fds-select__empty {
+  padding: var(--spacing-3, 12px);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  color: var(--color-text-muted, #a3a3a3);
+  text-align: center;
+}
+.fds-select__option {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2, 8px);
+  padding: 8px var(--spacing-2, 8px);
+  border-radius: var(--radius-sm, 4px);
+  cursor: pointer;
+}
+.fds-select__option--active {
+  background: var(--color-surface, #fff7ed);
+}
+.fds-select__option--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.fds-select__optAvatar {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--color-text-muted, #a3a3a3);
+}
+.fds-select__optText {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 6px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.fds-select__optLabel {
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  color: var(--color-text, #171717);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.fds-select__optSecondary {
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-size: var(--font-size-text-sm, 14px);
+  color: var(--color-text-muted, #a3a3a3);
+  white-space: nowrap;
+}
+.fds-select__check {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--color-accent, #ea580c);
+}
+.fds-select__hint,
+.fds-select__error {
+  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);
+}
+.fds-select__hint {
+  color: var(--color-text-muted, #a3a3a3);
+}
+.fds-select__error {
+  color: var(--color-error, #b91c1c);
+}
+
+/* src/components/Toggle/toggle.css */
+.fds-toggle {
+  display: inline-flex;
+  position: relative;
+}
+.fds-toggle__input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+.fds-toggle__input:disabled {
+  cursor: not-allowed;
+}
+.fds-toggle__control {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--spacing-2, 8px);
+  cursor: pointer;
+}
+.fds-toggle__input:disabled ~ .fds-toggle__control {
+  cursor: not-allowed;
+}
+.fds-toggle__track {
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+  background-color: var(--color-border-strong, #d4d4d4);
+  border-radius: var(--radius-pill, 9999px);
+  transition: background-color var(--duration-quick, 150ms) var(--ease-out, ease);
+}
+.fds-toggle__thumb {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: #ffffff;
+  border-radius: var(--radius-full, 9999px);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+  transition: left var(--duration-quick, 150ms) var(--ease-out, ease);
+}
+.fds-toggle__input:checked ~ .fds-toggle__control .fds-toggle__track {
+  background-color: var(--color-accent, #ea580c);
+}
+.fds-toggle__input:focus-visible ~ .fds-toggle__control .fds-toggle__track {
+  outline: 2px solid var(--color-accent, #ea580c);
+  outline-offset: 2px;
+}
+.fds-toggle[data-disabled] .fds-toggle__track {
+  opacity: 0.5;
+}
+.fds-toggle[data-disabled] .fds-toggle__label,
+.fds-toggle[data-disabled] .fds-toggle__description {
+  color: var(--color-text-muted, #a3a3a3);
+}
+.fds-toggle--medium .fds-toggle__track {
+  width: 44px;
+  height: 24px;
+}
+.fds-toggle--medium .fds-toggle__thumb {
+  width: 20px;
+  height: 20px;
+  left: 2px;
+}
+.fds-toggle--medium .fds-toggle__input:checked ~ .fds-toggle__control .fds-toggle__thumb {
+  left: 22px;
+}
+.fds-toggle--small .fds-toggle__track {
+  width: 36px;
+  height: 20px;
+}
+.fds-toggle--small .fds-toggle__thumb {
+  width: 16px;
+  height: 16px;
+  left: 2px;
+}
+.fds-toggle--small .fds-toggle__input:checked ~ .fds-toggle__control .fds-toggle__thumb {
+  left: 18px;
+}
+.fds-toggle__text {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.fds-toggle__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-medium, 500);
+  color: var(--color-text, #171717);
+}
+.fds-toggle__description {
+  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);
+  color: var(--color-text-secondary, #525252);
+}

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, HTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes } from 'react';
 
 type ButtonVariant = 'primary' | 'outlined' | 'text' | 'neutral';
 type ButtonSize = 'x-small' | 'small' | 'medium' | 'big';
@@ -64,10 +64,23 @@ declare function MismatchCard({ title, properties, collapsedCount, defaultExpand
 interface DiffPropertyLine {
     /** Property name, e.g. "font-size". Rendered in mono. */
     property: string;
-    /** Value on the live page — what shipped. Left of the arrow (error register). */
-    live: string;
-    /** Value in the design — the target. Right of the arrow (success register). */
-    design: string;
+    /**
+     * Value on the live page — what shipped. Left of the arrow (error register).
+     * A string in the common case; accepts any node so a caller can prefix it
+     * with, e.g., a colour swatch.
+     */
+    live: ReactNode;
+    /**
+     * Value in the design — the target. Right of the arrow (success register).
+     * A string in the common case; accepts any node (see `live`).
+     */
+    design: ReactNode;
+    /**
+     * Optional content pinned to the right end of the row, after the delta —
+     * e.g. an occurrence count or a per-property review control. Omit for the
+     * plain read-only row. Presentational: the caller owns whatever lives here.
+     */
+    trailing?: ReactNode;
 }
 interface DiffElement {
     /** Element name, e.g. `"Pricing"`. */
@@ -150,5 +163,73 @@ interface DiffSectionProps extends HTMLAttributes<HTMLDivElement> {
  * decision 2026-04-24): each delta reads `live → design`.
  */
 declare function DiffSection({ number, name, mismatchCount, elements, defaultExpanded, headerless, onElementToggle, onElementHover, className, ...rest }: DiffSectionProps): react.JSX.Element;
+interface DiffPropertyListProps extends HTMLAttributes<HTMLDivElement> {
+    /** Property mismatch rows to render. */
+    properties: DiffPropertyLine[];
+}
+/**
+ * The bare list of property-delta rows — `property` on the left, a
+ * `live → design` mono delta, and an optional `trailing` slot — with the left
+ * rule and indent. Extracted from DiffSection so a caller that owns its own
+ * card shell (e.g. the extension's IssueCard) can render exactly these rows
+ * without DiffSection's element/section chrome. DiffSection uses it internally,
+ * so the two surfaces render byte-identical rows.
+ */
+declare function DiffPropertyList({ properties, className, ...rest }: DiffPropertyListProps): react.JSX.Element;
+
+interface SelectOption {
+    value: string;
+    label: string;
+    /** Secondary line, e.g. an @handle. */
+    secondary?: string;
+    /** Leading node (avatar / icon) shown in the option and, when selected, the trigger. */
+    avatar?: ReactNode;
+    disabled?: boolean;
+}
+interface SelectProps {
+    options: SelectOption[];
+    value?: string | null;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    disabled?: boolean;
+    /** Show a filter input at the top of the list. */
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    /** Leading node in the trigger; a selected option's `avatar` takes precedence. */
+    leadingIcon?: ReactNode;
+    id?: string;
+    /** When set, renders a hidden input so the value posts with a form. */
+    name?: string;
+    className?: string;
+    containerClassName?: string;
+}
+/**
+ * Fidel design-system Select — a listbox (optionally searchable) with avatar +
+ * secondary-line options and a checkmark on the selected row. Controlled via
+ * `value`/`onChange`. Keyboard: type/Enter/Space/↓ open; ↑/↓/Home/End move;
+ * Enter selects; Esc closes; click-outside closes. Measured from Figma "Fidel
+ * Library" Select (node 3521:5948).
+ */
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
+
+type ToggleSize = 'small' | 'medium';
+interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /** Size step. @default 'medium' */
+    size?: ToggleSize;
+    /** Text beside the switch. */
+    label?: ReactNode;
+    /** Secondary line under the label. */
+    description?: ReactNode;
+}
+/**
+ * Fidel design-system Toggle (switch). Renders a native checkbox with
+ * `role="switch"`; on/off/disabled are handled in CSS, so all standard input
+ * attributes (checked, defaultChecked, onChange, disabled, aria-*, …) pass
+ * through. Measured from Figma "Fidel Library" Toggle (node 3528:8473).
+ */
+declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLInputElement>>;
 
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, type DiffElement, type DiffPropertyLine, DiffSection, type DiffSectionProps, MismatchCard, type MismatchCardProps, type MismatchProperty };
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Select, type SelectOption, type SelectProps, Toggle, type ToggleProps, type ToggleSize };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, HTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes } from 'react';
 
 type ButtonVariant = 'primary' | 'outlined' | 'text' | 'neutral';
 type ButtonSize = 'x-small' | 'small' | 'medium' | 'big';
@@ -64,10 +64,23 @@ declare function MismatchCard({ title, properties, collapsedCount, defaultExpand
 interface DiffPropertyLine {
     /** Property name, e.g. "font-size". Rendered in mono. */
     property: string;
-    /** Value on the live page — what shipped. Left of the arrow (error register). */
-    live: string;
-    /** Value in the design — the target. Right of the arrow (success register). */
-    design: string;
+    /**
+     * Value on the live page — what shipped. Left of the arrow (error register).
+     * A string in the common case; accepts any node so a caller can prefix it
+     * with, e.g., a colour swatch.
+     */
+    live: ReactNode;
+    /**
+     * Value in the design — the target. Right of the arrow (success register).
+     * A string in the common case; accepts any node (see `live`).
+     */
+    design: ReactNode;
+    /**
+     * Optional content pinned to the right end of the row, after the delta —
+     * e.g. an occurrence count or a per-property review control. Omit for the
+     * plain read-only row. Presentational: the caller owns whatever lives here.
+     */
+    trailing?: ReactNode;
 }
 interface DiffElement {
     /** Element name, e.g. `"Pricing"`. */
@@ -150,5 +163,73 @@ interface DiffSectionProps extends HTMLAttributes<HTMLDivElement> {
  * decision 2026-04-24): each delta reads `live → design`.
  */
 declare function DiffSection({ number, name, mismatchCount, elements, defaultExpanded, headerless, onElementToggle, onElementHover, className, ...rest }: DiffSectionProps): react.JSX.Element;
+interface DiffPropertyListProps extends HTMLAttributes<HTMLDivElement> {
+    /** Property mismatch rows to render. */
+    properties: DiffPropertyLine[];
+}
+/**
+ * The bare list of property-delta rows — `property` on the left, a
+ * `live → design` mono delta, and an optional `trailing` slot — with the left
+ * rule and indent. Extracted from DiffSection so a caller that owns its own
+ * card shell (e.g. the extension's IssueCard) can render exactly these rows
+ * without DiffSection's element/section chrome. DiffSection uses it internally,
+ * so the two surfaces render byte-identical rows.
+ */
+declare function DiffPropertyList({ properties, className, ...rest }: DiffPropertyListProps): react.JSX.Element;
+
+interface SelectOption {
+    value: string;
+    label: string;
+    /** Secondary line, e.g. an @handle. */
+    secondary?: string;
+    /** Leading node (avatar / icon) shown in the option and, when selected, the trigger. */
+    avatar?: ReactNode;
+    disabled?: boolean;
+}
+interface SelectProps {
+    options: SelectOption[];
+    value?: string | null;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    label?: ReactNode;
+    hint?: ReactNode;
+    error?: ReactNode;
+    disabled?: boolean;
+    /** Show a filter input at the top of the list. */
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    /** Leading node in the trigger; a selected option's `avatar` takes precedence. */
+    leadingIcon?: ReactNode;
+    id?: string;
+    /** When set, renders a hidden input so the value posts with a form. */
+    name?: string;
+    className?: string;
+    containerClassName?: string;
+}
+/**
+ * Fidel design-system Select — a listbox (optionally searchable) with avatar +
+ * secondary-line options and a checkmark on the selected row. Controlled via
+ * `value`/`onChange`. Keyboard: type/Enter/Space/↓ open; ↑/↓/Home/End move;
+ * Enter selects; Esc closes; click-outside closes. Measured from Figma "Fidel
+ * Library" Select (node 3521:5948).
+ */
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
+
+type ToggleSize = 'small' | 'medium';
+interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    /** Size step. @default 'medium' */
+    size?: ToggleSize;
+    /** Text beside the switch. */
+    label?: ReactNode;
+    /** Secondary line under the label. */
+    description?: ReactNode;
+}
+/**
+ * Fidel design-system Toggle (switch). Renders a native checkbox with
+ * `role="switch"`; on/off/disabled are handled in CSS, so all standard input
+ * attributes (checked, defaultChecked, onChange, disabled, aria-*, …) pass
+ * through. Measured from Figma "Fidel Library" Toggle (node 3528:8473).
+ */
+declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLInputElement>>;
 
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, type DiffElement, type DiffPropertyLine, DiffSection, type DiffSectionProps, MismatchCard, type MismatchCardProps, type MismatchProperty };
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Select, type SelectOption, type SelectProps, Toggle, type ToggleProps, type ToggleSize };