@usefidel/design-system 0.14.0 → 0.15.0

package/dist/fidel.manifest.json

@@ -10,6 +10,6 @@
     "webapp.css"
   ],
   "storybookUrl": null,
-  "packageVersion": "0.14.0",
-  "resolvedSha": "2c6d6c9b1c4ca4dc54ec8a92f2a9d2d60dcaf34d"
+  "packageVersion": "0.15.0",
+  "resolvedSha": "51806455235b517cf1c3b2695f590570786af610"
 }

package/dist/index.cjs

@@ -21,14 +21,17 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   AppNav: () => AppNav,
+  Avatar: () => Avatar,
   Button: () => Button,
   DiffPropertyList: () => DiffPropertyList,
   DiffSection: () => DiffSection,
   MismatchCard: () => MismatchCard,
   Modal: () => Modal,
+  SectionHeader: () => SectionHeader,
   SegmentedControl: () => SegmentedControl,
   Select: () => Select,
   SettingsSection: () => SettingsSection,
+  Split: () => Split,
   TabNav: () => TabNav,
   Toggle: () => Toggle,
   breakpoints: () => breakpoints
@@ -867,17 +870,85 @@ var breakpoints = {
   /** Tablets, narrow windows. */
   lg: 900
 };
+
+// src/components/Avatar/Avatar.tsx
+var import_react9 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function initialsFor(name) {
+  const words = name.trim().split(/[\s._@-]+/).filter(Boolean);
+  if (words.length === 0) return "?";
+  if (words.length === 1) return words[0].slice(0, 2).toUpperCase();
+  return (words[0][0] + words[1][0]).toUpperCase();
+}
+function Avatar({ name, src, size = "medium", className, ...rest }) {
+  const [failedSrc, setFailedSrc] = (0, import_react9.useState)(null);
+  const showImage = !!src && src !== failedSrc;
+  const classes = ["fds-avatar", `fds-avatar--${size}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: classes, role: "img", "aria-label": name, ...rest, children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("img", { className: "fds-avatar__img", src, alt: "", onError: () => setFailedSrc(src) }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { "aria-hidden": "true", children: initialsFor(name) }) });
+}
+
+// src/components/SectionHeader/SectionHeader.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function SectionHeader({
+  title,
+  description,
+  as: Heading = "h2",
+  titleId,
+  className,
+  ...rest
+}) {
+  const classes = ["fds-section-header", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: classes, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Heading, { id: titleId, className: "fds-section-header__title", children: title }),
+    description != null && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "fds-section-header__description", children: description })
+  ] });
+}
+
+// src/components/Split/Split.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Split({
+  aside,
+  children,
+  asideWidth = "280px",
+  sticky = false,
+  collapseBelow = "lg",
+  className,
+  style,
+  ...rest
+}) {
+  const classes = [
+    "fds-split",
+    `fds-split--collapse-${collapseBelow}`,
+    sticky && "fds-split--sticky",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      className: classes,
+      style: { "--fds-split-aside": asideWidth, ...style },
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fds-split__aside", children: aside }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "fds-split__main", children })
+      ]
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AppNav,
+  Avatar,
   Button,
   DiffPropertyList,
   DiffSection,
   MismatchCard,
   Modal,
+  SectionHeader,
   SegmentedControl,
   Select,
   SettingsSection,
+  Split,
   TabNav,
   Toggle,
   breakpoints

package/dist/index.css

@@ -1321,3 +1321,103 @@
         transparent);
   }
 }
+
+/* src/components/Avatar/avatar.css */
+.fds-avatar {
+  box-sizing: border-box;
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: var(--radius-full, 9999px);
+  background: var(--color-accent-subtle, #ffedd5);
+  color: var(--color-accent-text, #c2410c);
+  font-family: var(--font-body, "Rethink Sans", system-ui, sans-serif);
+  font-weight: 600;
+  line-height: 1;
+  user-select: none;
+}
+.fds-avatar--small {
+  width: 24px;
+  height: 24px;
+  font-size: 10px;
+}
+.fds-avatar--medium {
+  width: 32px;
+  height: 32px;
+  font-size: 12px;
+}
+.fds-avatar--large {
+  width: 40px;
+  height: 40px;
+  font-size: 14px;
+}
+.fds-avatar__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+/* src/components/SectionHeader/section-header.css */
+.fds-section-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2, 8px);
+  min-width: 0;
+}
+.fds-section-header__title {
+  margin: 0;
+  font-family: var(--font-display, "Rethink Sans", system-ui, sans-serif);
+  font-size: 14.5px;
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: -0.005em;
+  color: var(--color-text, #171717);
+}
+.fds-section-header__description {
+  margin: 0;
+  max-width: 60ch;
+  font-size: 12.5px;
+  line-height: 1.55;
+  color: var(--color-text-muted, #a3a3a3);
+}
+
+/* src/components/Split/split.css */
+.fds-split {
+  display: grid;
+  grid-template-columns: var(--fds-split-aside, 280px) minmax(0, 1fr);
+  gap: var(--spacing-12, 48px);
+  align-items: start;
+}
+.fds-split__aside,
+.fds-split__main {
+  min-width: 0;
+}
+.fds-split__main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4, 16px);
+}
+.fds-split--sticky .fds-split__aside {
+  position: sticky;
+  top: var(--spacing-6, 24px);
+}
+@media (max-width: 900px) {
+  .fds-split--collapse-lg {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--spacing-4, 16px);
+  }
+  .fds-split--collapse-lg .fds-split__aside {
+    position: static;
+  }
+}
+@media (max-width: 640px) {
+  .fds-split--collapse-md {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--spacing-4, 16px);
+  }
+  .fds-split--collapse-md .fds-split__aside {
+    position: static;
+  }
+}

package/dist/index.d.cts

@@ -296,6 +296,9 @@ interface SettingsSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'
     children?: ReactNode;
 }
 /**
+ * @deprecated Compose `Split` and `SectionHeader` instead; this will be removed
+ * once fidel-web has moved off it.
+ *
  * Fidel design-system settings section: heading and description on the left,
  * content on the right, divided from the next section by a hairline. Stacks
  * into one column below 900px.
@@ -373,4 +376,49 @@ declare const breakpoints: {
 };
 type Breakpoint = keyof typeof breakpoints;
 
-export { AppNav, type AppNavProps, type Breakpoint, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, TabNav, type TabNavProps, Toggle, type ToggleProps, type ToggleSize, breakpoints };
+type AvatarSize = 'small' | 'medium' | 'large';
+interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** Person's name or handle; used for the initials and the accessible name. */
+    name: string;
+    /** Photo URL. Falls back to initials when missing or when it fails to load. */
+    src?: string | null;
+    /** small 24px, medium 32px, large 40px. @default 'medium' */
+    size?: AvatarSize;
+}
+/**
+ * Fidel design-system Avatar: a round photo, or initials on an accent tint
+ * when there is no photo. Exposes `name` as its accessible label.
+ */
+declare function Avatar({ name, src, size, className, ...rest }: AvatarProps): react.JSX.Element;
+
+interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    title: ReactNode;
+    /** Short muted line under the heading. */
+    description?: ReactNode;
+    /** Heading level. @default 'h2' */
+    as?: 'h2' | 'h3' | 'h4';
+    /** Id for the heading, so a surrounding region can use `aria-labelledby`. */
+    titleId?: string;
+}
+/** Fidel design-system section header: a heading with an optional muted description under it. */
+declare function SectionHeader({ title, description, as: Heading, titleId, className, ...rest }: SectionHeaderProps): react.JSX.Element;
+
+interface SplitProps extends HTMLAttributes<HTMLDivElement> {
+    /** The narrow side column, e.g. a SectionHeader. */
+    aside: ReactNode;
+    /** The main column. */
+    children?: ReactNode;
+    /** Width of the side column. @default '280px' */
+    asideWidth?: string;
+    /** Keep the side column in view while the main column scrolls. @default false */
+    sticky?: boolean;
+    /** Breakpoint below which the columns stack, aside first: md 640px, lg 900px. @default 'lg' */
+    collapseBelow?: 'md' | 'lg';
+}
+/**
+ * Fidel design-system two-column layout: a fixed-width side column beside a
+ * flexible main column, stacking into one column below a breakpoint.
+ */
+declare function Split({ aside, children, asideWidth, sticky, collapseBelow, className, style, ...rest }: SplitProps): react.JSX.Element;
+
+export { AppNav, type AppNavProps, Avatar, type AvatarProps, type AvatarSize, type Breakpoint, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Split, type SplitProps, TabNav, type TabNavProps, Toggle, type ToggleProps, type ToggleSize, breakpoints };

package/dist/index.d.ts

@@ -296,6 +296,9 @@ interface SettingsSectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'
     children?: ReactNode;
 }
 /**
+ * @deprecated Compose `Split` and `SectionHeader` instead; this will be removed
+ * once fidel-web has moved off it.
+ *
  * Fidel design-system settings section: heading and description on the left,
  * content on the right, divided from the next section by a hairline. Stacks
  * into one column below 900px.
@@ -373,4 +376,49 @@ declare const breakpoints: {
 };
 type Breakpoint = keyof typeof breakpoints;
 
-export { AppNav, type AppNavProps, type Breakpoint, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, TabNav, type TabNavProps, Toggle, type ToggleProps, type ToggleSize, breakpoints };
+type AvatarSize = 'small' | 'medium' | 'large';
+interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** Person's name or handle; used for the initials and the accessible name. */
+    name: string;
+    /** Photo URL. Falls back to initials when missing or when it fails to load. */
+    src?: string | null;
+    /** small 24px, medium 32px, large 40px. @default 'medium' */
+    size?: AvatarSize;
+}
+/**
+ * Fidel design-system Avatar: a round photo, or initials on an accent tint
+ * when there is no photo. Exposes `name` as its accessible label.
+ */
+declare function Avatar({ name, src, size, className, ...rest }: AvatarProps): react.JSX.Element;
+
+interface SectionHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    title: ReactNode;
+    /** Short muted line under the heading. */
+    description?: ReactNode;
+    /** Heading level. @default 'h2' */
+    as?: 'h2' | 'h3' | 'h4';
+    /** Id for the heading, so a surrounding region can use `aria-labelledby`. */
+    titleId?: string;
+}
+/** Fidel design-system section header: a heading with an optional muted description under it. */
+declare function SectionHeader({ title, description, as: Heading, titleId, className, ...rest }: SectionHeaderProps): react.JSX.Element;
+
+interface SplitProps extends HTMLAttributes<HTMLDivElement> {
+    /** The narrow side column, e.g. a SectionHeader. */
+    aside: ReactNode;
+    /** The main column. */
+    children?: ReactNode;
+    /** Width of the side column. @default '280px' */
+    asideWidth?: string;
+    /** Keep the side column in view while the main column scrolls. @default false */
+    sticky?: boolean;
+    /** Breakpoint below which the columns stack, aside first: md 640px, lg 900px. @default 'lg' */
+    collapseBelow?: 'md' | 'lg';
+}
+/**
+ * Fidel design-system two-column layout: a fixed-width side column beside a
+ * flexible main column, stacking into one column below a breakpoint.
+ */
+declare function Split({ aside, children, asideWidth, sticky, collapseBelow, className, style, ...rest }: SplitProps): react.JSX.Element;
+
+export { AppNav, type AppNavProps, Avatar, type AvatarProps, type AvatarSize, type Breakpoint, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Split, type SplitProps, TabNav, type TabNavProps, Toggle, type ToggleProps, type ToggleSize, breakpoints };

package/dist/index.js

@@ -838,16 +838,84 @@ var breakpoints = {
   /** Tablets, narrow windows. */
   lg: 900
 };
+
+// src/components/Avatar/Avatar.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+function initialsFor(name) {
+  const words = name.trim().split(/[\s._@-]+/).filter(Boolean);
+  if (words.length === 0) return "?";
+  if (words.length === 1) return words[0].slice(0, 2).toUpperCase();
+  return (words[0][0] + words[1][0]).toUpperCase();
+}
+function Avatar({ name, src, size = "medium", className, ...rest }) {
+  const [failedSrc, setFailedSrc] = useState5(null);
+  const showImage = !!src && src !== failedSrc;
+  const classes = ["fds-avatar", `fds-avatar--${size}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx11("span", { className: classes, role: "img", "aria-label": name, ...rest, children: showImage ? /* @__PURE__ */ jsx11("img", { className: "fds-avatar__img", src, alt: "", onError: () => setFailedSrc(src) }) : /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", children: initialsFor(name) }) });
+}
+
+// src/components/SectionHeader/SectionHeader.tsx
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+function SectionHeader({
+  title,
+  description,
+  as: Heading = "h2",
+  titleId,
+  className,
+  ...rest
+}) {
+  const classes = ["fds-section-header", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs10("div", { className: classes, ...rest, children: [
+    /* @__PURE__ */ jsx12(Heading, { id: titleId, className: "fds-section-header__title", children: title }),
+    description != null && /* @__PURE__ */ jsx12("p", { className: "fds-section-header__description", children: description })
+  ] });
+}
+
+// src/components/Split/Split.tsx
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+function Split({
+  aside,
+  children,
+  asideWidth = "280px",
+  sticky = false,
+  collapseBelow = "lg",
+  className,
+  style,
+  ...rest
+}) {
+  const classes = [
+    "fds-split",
+    `fds-split--collapse-${collapseBelow}`,
+    sticky && "fds-split--sticky",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: classes,
+      style: { "--fds-split-aside": asideWidth, ...style },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx13("div", { className: "fds-split__aside", children: aside }),
+        /* @__PURE__ */ jsx13("div", { className: "fds-split__main", children })
+      ]
+    }
+  );
+}
 export {
   AppNav,
+  Avatar,
   Button,
   DiffPropertyList,
   DiffSection,
   MismatchCard,
   Modal,
+  SectionHeader,
   SegmentedControl,
   Select,
   SettingsSection,
+  Split,
   TabNav,
   Toggle,
   breakpoints

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefidel/design-system",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Fidel brand design tokens + React component library — DTCG token source of truth, generated per-surface CSS + Tailwind-v4 parser-compatibility output, and on-brand React components (Button, MismatchCard, DiffSection).",
   "type": "module",
   "main": "./dist/index.cjs",