rift-ds 1.0.0

package/components/Checkbox/Checkbox.css

@@ -0,0 +1,183 @@
+/* ============================================
+   CHECKBOX COMPONENT
+   Custom checkbox with check / indeterminate icon
+   ============================================ */
+
+.ds-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-200); /* 8px */
+  cursor: pointer;
+  user-select: none;
+}
+
+/* ============================================
+   BOX
+   ============================================ */
+
+.ds-checkbox__box {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  box-sizing: border-box;
+  border: var(--border-050) solid var(--color-bg-container-border);
+  border-radius: var(--radius-200); /* 8px */
+  background-color: var(--color-bg-container-primary-transparent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard), border-color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* ============================================
+   ICON
+   ============================================ */
+
+.ds-checkbox__icon {
+  width: 14px;
+  height: 14px;
+  color: var(--color-action-primary-text-active);
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+  display: block;
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.ds-checkbox__label {
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  letter-spacing: var(--font-paragraph-letter-spacing);
+  color: var(--color-text-primary);
+}
+
+/* Helper line: label and helper stack in a text column beside the box; the
+   box aligns to the first text line rather than the column's centre. */
+.ds-checkbox--has-helper {
+  align-items: flex-start;
+}
+
+.ds-checkbox__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-050); /* 2px */
+}
+
+.ds-checkbox__helper {
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  color: var(--color-text-tertiary);
+}
+
+.ds-checkbox--error .ds-checkbox__helper {
+  color: var(--color-status-error-border);
+}
+
+/* ============================================
+   CHECKED STATE
+   ============================================ */
+
+.ds-checkbox--checked .ds-checkbox__box {
+  background-color: var(--color-action-primary-bg);
+  border-color: var(--color-action-primary-bg);
+}
+
+.ds-checkbox--checked .ds-checkbox__icon {
+  opacity: 1;
+}
+
+/* ============================================
+   INDETERMINATE STATE
+   ============================================ */
+
+.ds-checkbox--indeterminate .ds-checkbox__box {
+  background-color: var(--color-action-primary-bg);
+  border-color: var(--color-action-primary-bg);
+}
+
+.ds-checkbox--indeterminate .ds-checkbox__icon {
+  opacity: 1;
+}
+
+/* ============================================
+   HOVER STATE
+   ============================================ */
+
+.ds-checkbox:not(.ds-checkbox--disabled):hover .ds-checkbox__box {
+  border-color: var(--color-action-primary-bg);
+}
+
+.ds-checkbox--checked:not(.ds-checkbox--disabled):hover .ds-checkbox__box {
+  background-color: var(--color-action-primary-bg-hover);
+  border-color: var(--color-action-primary-bg-hover);
+}
+
+/* ============================================
+   FOCUS STATE
+   ============================================ */
+
+.ds-checkbox:focus-visible .ds-checkbox__box {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   DISABLED STATE
+   ============================================ */
+
+.ds-checkbox--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ============================================
+   SIZE — COMPACT
+   ============================================ */
+
+.ds-checkbox--compact .ds-checkbox__box {
+  width: 20px;
+  height: 20px;
+}
+
+.ds-checkbox--compact .ds-checkbox__icon {
+  width: 12px;
+  height: 12px;
+}
+
+.ds-checkbox--compact .ds-checkbox__label {
+  font-size: var(--font-paragraph-sm-size);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+}
+
+/* ============================================
+   CHECKBOX GROUP
+   ============================================ */
+
+.ds-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-200); /* 8px */
+}
+
+/* The group label is Field's (ds-field__label) — the group composes
+   <Field group>, so the scaffolding classes come from Field.css. */
+
+.ds-checkbox-group__items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-200); /* 8px */
+}
+
+.ds-checkbox-group--horizontal .ds-checkbox-group__items {
+  flex-direction: row;
+  gap: var(--gap-500); /* 20px */
+}

package/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,81 @@
+import { default as React } from 'react';
+/** Props owned by Checkbox itself — everything else falls through to the wrapper. */
+type CheckboxOwnProps = {
+    /** Label text */
+    label?: string;
+    /** Helper or error message rendered under the label text */
+    helperText?: string;
+    /** Error state — recolours the helper text and marks the checkbox invalid */
+    error?: boolean;
+    /** Whether the checkbox is checked */
+    checked?: boolean;
+    /** Whether the checkbox is in an indeterminate state */
+    indeterminate?: boolean;
+    /** Whether the checkbox is disabled */
+    disabled?: boolean;
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Called with the next checked state when toggled */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Legacy change handler, kept for backwards compatibility.
+     *
+     * @deprecated Use `onCheckedChange` instead.
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * Legacy accessible-name prop.
+     *
+     * @deprecated Pass the native `aria-label` attribute instead.
+     */
+    ariaLabel?: string;
+    /**
+     * Legacy form-field name.
+     *
+     * @deprecated No-op. This component renders a `<div role="checkbox">`, not a
+     * native `<input>`, so it cannot participate in native form submission.
+     * Declared only so the attribute is not forwarded to an element that rejects it.
+     */
+    name?: string;
+};
+export interface CheckboxProps extends CheckboxOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof CheckboxOwnProps> {
+}
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLDivElement>>;
+type CheckboxGroupOwnProps = {
+    /** Group label */
+    label?: string;
+    /** Helper or error message rendered below the group */
+    helperText?: string;
+    /** Error state — recolours the helper text and marks the group invalid */
+    error?: boolean;
+    /** Marks the group required and renders the required marker on its label */
+    required?: boolean;
+    /** Checkbox options */
+    items: {
+        label: string;
+        value: string;
+        disabled?: boolean;
+    }[];
+    /** Currently selected values */
+    values?: string[];
+    /** Layout direction */
+    direction?: 'vertical' | 'horizontal';
+    /** Component size */
+    size?: 'default' | 'compact';
+    /** Called with the next selected values */
+    onValuesChange?: (values: string[]) => void;
+    /** Additional CSS classes */
+    className?: string;
+    /**
+     * Legacy change handler, kept for backwards compatibility.
+     *
+     * @deprecated Use `onValuesChange` instead.
+     */
+    onChange?: (values: string[]) => void;
+};
+export interface CheckboxGroupProps extends CheckboxGroupOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof CheckboxGroupOwnProps> {
+}
+export declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Checkbox/Checkbox.js

@@ -0,0 +1,176 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useId } from "react";
+import { Field } from "../Field/Field.js";
+import "./Checkbox.css";
+const CheckIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "ds-checkbox__icon",
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M2 7.5L5.5 11L12 3",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+const MinusIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "ds-checkbox__icon",
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx("path", { d: "M2 7H12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
+  }
+);
+const Checkbox = React.forwardRef(
+  ({
+    label,
+    helperText,
+    error = false,
+    checked = false,
+    indeterminate = false,
+    disabled = false,
+    size = "default",
+    onCheckedChange,
+    onChange,
+    className = "",
+    ariaLabel,
+    name: _name,
+    onClick,
+    onKeyDown,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-checkbox";
+    const generatedId = useId();
+    const helperId = helperText ? `${generatedId}-helper` : void 0;
+    const describedBy = helperId ?? rest["aria-describedby"];
+    const classes = [
+      baseClass,
+      size === "compact" ? `${baseClass}--compact` : "",
+      checked ? `${baseClass}--checked` : "",
+      indeterminate && !checked ? `${baseClass}--indeterminate` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      helperText ? `${baseClass}--has-helper` : "",
+      error ? `${baseClass}--error` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const toggle = () => {
+      if (disabled) return;
+      onCheckedChange?.(!checked);
+      onChange?.(!checked);
+    };
+    const handleClick = (e) => {
+      onClick?.(e);
+      toggle();
+    };
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        toggle();
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref,
+        className: classes,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        role: "checkbox",
+        "aria-checked": indeterminate && !checked ? "mixed" : checked,
+        "aria-disabled": disabled,
+        "aria-label": rest["aria-label"] || ariaLabel || label,
+        "aria-describedby": describedBy,
+        "aria-invalid": error || void 0,
+        tabIndex: disabled ? -1 : 0,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__box`, children: indeterminate && !checked ? /* @__PURE__ */ jsx(MinusIcon, {}) : /* @__PURE__ */ jsx(CheckIcon, {}) }),
+          helperText ? /* @__PURE__ */ jsxs("span", { className: `${baseClass}__text`, children: [
+            label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__helper`, id: helperId, children: helperText })
+          ] }) : label && /* @__PURE__ */ jsx("span", { className: `${baseClass}__label`, children: label })
+        ]
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+const CheckboxGroup = React.forwardRef(
+  ({
+    label,
+    helperText,
+    error = false,
+    required = false,
+    items,
+    values = [],
+    direction = "vertical",
+    size = "default",
+    onValuesChange,
+    onChange,
+    className = "",
+    id,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-checkbox-group";
+    const classes = [baseClass, `${baseClass}--${direction}`, className].filter(Boolean).join(" ");
+    const generatedId = useId();
+    const groupId = id || generatedId;
+    const labelId = label ? `${groupId}-label` : void 0;
+    const describedBy = helperText ? `${groupId}-helper` : rest["aria-describedby"];
+    const handleToggle = (itemValue) => {
+      const next = values.includes(itemValue) ? values.filter((v) => v !== itemValue) : [...values, itemValue];
+      onValuesChange?.(next);
+      onChange?.(next);
+    };
+    return /* @__PURE__ */ jsx(
+      Field,
+      {
+        ...rest,
+        ref,
+        className: classes,
+        group: true,
+        label,
+        helperText,
+        error,
+        required,
+        id: groupId,
+        role: "group",
+        "aria-labelledby": labelId,
+        "aria-describedby": describedBy,
+        "aria-invalid": error || void 0,
+        children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__items`, children: items.map((item) => /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            label: item.label,
+            checked: values.includes(item.value),
+            disabled: item.disabled,
+            size,
+            onCheckedChange: () => handleToggle(item.value)
+          },
+          item.value
+        )) })
+      }
+    );
+  }
+);
+CheckboxGroup.displayName = "CheckboxGroup";
+export {
+  Checkbox,
+  CheckboxGroup
+};

package/components/Chip/Chip.css

@@ -0,0 +1,231 @@
+/* ============================================
+   CHIP COMPONENT
+   Compact pill for attributes, filters, and
+   inline metadata. Non-clickable by default;
+   clickable, selectable, and removable variants.
+   ============================================ */
+
+.ds-chip {
+  /* Layout */
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap-200); /* 8px */
+
+  /* Spacing — 32px tall at default size */
+  padding: var(--padding-150) var(--padding-300); /* 6px 12px */
+
+  /* Shape */
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-pill);
+  background-color: var(--color-bg-page-primary);
+
+  /* Typography — same em style as Badge */
+  font-family: var(--font-paragraph-sm-emphasis-family);
+  font-size: var(--font-paragraph-sm-emphasis-size);
+  font-weight: var(--font-paragraph-sm-emphasis-weight);
+  line-height: var(--font-paragraph-sm-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-sm-emphasis-letter-spacing);
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+
+  transition: background-color var(--motion-duration-base) var(--motion-ease-standard), border-color var(--motion-duration-base) var(--motion-ease-standard),
+    color var(--motion-duration-base) var(--motion-ease-standard), opacity var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+/* ============================================
+   SIZE — LARGE (40px tall)
+   The default Button's footprint and the body
+   paragraph scale, so a chip used as a primary
+   tap target reads at the same weight as the
+   text around it.
+   ============================================ */
+
+.ds-chip--large {
+  padding: var(--padding-200) var(--padding-500); /* 8px 20px */
+  font-family: var(--font-paragraph-emphasis-family);
+  font-size: var(--font-paragraph-emphasis-size);
+  font-weight: var(--font-paragraph-emphasis-weight);
+  line-height: var(--font-paragraph-emphasis-line-height);
+  letter-spacing: var(--font-paragraph-emphasis-letter-spacing);
+}
+
+.ds-chip--large .ds-chip__icon,
+.ds-chip--large .ds-chip__remove .material-symbols-rounded {
+  --icon-size: var(--icon-size-600);
+}
+
+.ds-chip--large .ds-chip__icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+/* ============================================
+   SIZE — COMPACT (24px tall)
+   ============================================ */
+
+.ds-chip--compact {
+  gap: var(--gap-100); /* 4px */
+  padding: var(--padding-050) var(--padding-200); /* 2px 8px */
+}
+
+/* ============================================
+   ICON (leading)
+   ============================================ */
+
+.ds-chip__icon {
+  flex-shrink: 0;
+  --icon-size: var(--icon-size-500);
+  line-height: 1;
+  color: var(--color-icon-primary);
+  transition: color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-chip__icon svg {
+  width: 20px;
+  height: 20px;
+}
+
+.ds-chip--compact .ds-chip__icon {
+  --icon-size: var(--icon-size-500);
+}
+
+.ds-chip--compact .ds-chip__icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* ============================================
+   LABEL
+   ============================================ */
+
+.ds-chip__label {
+  flex-shrink: 0;
+}
+
+/* ============================================
+   CLICKABLE (rendered as <button>)
+   ============================================ */
+
+.ds-chip--clickable {
+  cursor: pointer;
+}
+
+.ds-chip--clickable:not(.ds-chip--disabled):not(.ds-chip--selected):hover {
+  background-color: var(--color-action-passive-bg-hover);
+}
+
+.ds-chip--clickable:not(.ds-chip--disabled):not(.ds-chip--selected):active {
+  background-color: var(--color-action-passive-bg-active);
+}
+
+/* ============================================
+   SELECTED — teal active fill, matching the
+   SegmentedControl selection convention
+   ============================================ */
+
+.ds-chip--selected {
+  background-color: var(--color-action-primary-bg);
+  border-color: var(--color-action-primary-bg);
+  color: var(--color-action-primary-text);
+}
+
+.ds-chip--selected .ds-chip__icon {
+  color: var(--color-action-primary-text);
+}
+
+.ds-chip--selected.ds-chip--clickable:not(.ds-chip--disabled):hover {
+  background-color: var(--color-action-primary-bg-hover);
+}
+
+.ds-chip--selected.ds-chip--clickable:not(.ds-chip--disabled):active {
+  background-color: var(--color-action-primary-bg-active);
+}
+
+/* ============================================
+   REMOVABLE — <span> container with an inner
+   main region (when clickable) + close button
+   ============================================ */
+
+.ds-chip__main {
+  display: inline-flex;
+  align-items: center;
+  gap: inherit;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  font: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+.ds-chip__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  border-radius: var(--radius-pill);
+  color: var(--color-icon-primary);
+  cursor: pointer;
+  transition: color var(--motion-duration-base) var(--motion-ease-standard);
+}
+
+.ds-chip__remove .material-symbols-rounded {
+  --icon-size: var(--icon-size-500);
+  line-height: 1;
+}
+
+.ds-chip--compact .ds-chip__remove .material-symbols-rounded {
+  --icon-size: var(--icon-size-500);
+}
+
+.ds-chip__remove:not(:disabled):hover {
+  color: var(--color-text-primary);
+}
+
+.ds-chip--selected .ds-chip__remove {
+  color: var(--color-action-primary-text);
+}
+
+.ds-chip--selected .ds-chip__remove:not(:disabled):hover {
+  color: var(--color-action-primary-text-active);
+}
+
+/* ============================================
+   DISABLED
+   ============================================ */
+
+.ds-chip--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-chip--disabled .ds-chip__main,
+.ds-chip--disabled .ds-chip__remove {
+  cursor: not-allowed;
+}
+
+/* ============================================
+   FOCUS
+   ============================================ */
+
+.ds-chip--clickable:focus-visible,
+.ds-chip__main:focus-visible,
+.ds-chip__remove:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: 2px;
+}
+
+/* Icons take the colour of the text around them. Explicit, not just
+   inherited by default: a consumer stylesheet that sets a colour on
+   .material-symbols-rounded itself (a common global default) would
+   otherwise override inheritance and detach the icon from the state
+   colours this component sets on its parents. */
+.ds-chip .material-symbols-rounded {
+  color: inherit;
+}

package/components/Chip/Chip.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+export interface ChipProps {
+    /** Chip label — string for plain text, ReactNode for richer content (e.g. a numbered prefix) */
+    label: React.ReactNode;
+    /** Leading icon — Material Symbol name (string) or custom element (ReactNode) */
+    icon?: string | React.ReactNode;
+    /** Selected state (filter-style chips) — renders the teal active fill */
+    selected?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Chip size — `large` matches the default Button and paragraph body scale, for pills that are a primary tap target rather than metadata */
+    size?: 'large' | 'default' | 'compact';
+    /** Click handler — presence makes the chip an interactive <button> */
+    onClick?: () => void;
+    /** Remove handler — renders a trailing close button (input-style chips) */
+    onRemove?: () => void;
+    /** Accessible label for the remove button */
+    removeLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Chip component — compact pill for attributes, filters, and inline metadata.
+ * Non-clickable by default (renders a <span>); pass onClick for an
+ * interactive <button>, and/or onRemove for a trailing close button.
+ */
+export declare const Chip: ({ label, icon, selected, disabled, size, onClick, onRemove, removeLabel, className, }: ChipProps) => React.JSX.Element;