@stonedogcode/style 0.9.0

package/src/config/style-config.tsx

@@ -0,0 +1,263 @@
+"use client";
+
+import React, { createContext, useContext, useMemo } from "react";
+import type { DensityProfile, FontSizeProfile, IconSize, ThemeVariant } from "./types";
+import { resolveDensityStep, type DensityBase, type DensityStep } from "./density";
+import { THEME_VARIANTS } from "./types";
+import { IntentIconProvider, type IntentIcons } from "./intent-icons";
+
+/**
+ * Everything this component library needs to know about the host application.
+ *
+ * The components were extracted from an app where they read a 461-line Zustand
+ * store holding auth, widgets, notes, services and config together. Depending on
+ * that store is what made them unshareable, so the seam was drawn at the
+ * narrowest possible place: **these two settings are all the styling actually
+ * needs.** Anything a component wants beyond them belongs in a prop.
+ *
+ * Keeping this interface small is a load-bearing constraint, not tidiness. Every
+ * field added here is a field a second host must supply before it can render a
+ * single button.
+ */
+export interface StyleConfig {
+  /**
+   * The user's app-wide text size. Drives `StyledText`, and through it nearly
+   * all visible text.
+   */
+  fontSizeProfile: FontSizeProfile;
+
+  /**
+   * The user's app-wide appearance. A component may override it per call site;
+   * see `useResolvedVariant` for the precedence rule.
+   */
+  variant: ThemeVariant;
+
+  /**
+   * The **user's** density preference, relative to the app's baseline.
+   *
+   * Not cosmetic: at `compact` the intent buttons drop their text label and
+   * show only their icon, so this changes what a control *says*, not just its
+   * padding. That is why it lives here rather than being left to CSS.
+   */
+  density: DensityProfile;
+
+  /**
+   * The **application's** density baseline — the rung `density: "normal"` means.
+   *
+   * HopperGuard runs `spacious`, both Optima products `compact`, RozCards
+   * `standard`. See `config/density.ts`: this and `density` are a position and
+   * an offset on one scale, not two competing axes.
+   *
+   * Defaults to `standard`, whose spacing (8px) is exactly the fallback the
+   * recipes have always used — so a host that says nothing sees no change.
+   */
+  densityBase: DensityBase;
+
+  /**
+   * The app-wide default icon size, used by any `StyledIcon` that is not given
+   * an explicit `size`.
+   *
+   * This exists because the alternative is naming a size at every call site,
+   * which is how an application ends up with three icon scales and no way to
+   * retune any of them. Font size is already host-tunable — every `fontSizeMap`
+   * entry is a `var(--font-sizes-*)` reference the host can define — and this is
+   * the equivalent seam for icons.
+   *
+   * The default stays `"2x"`: HopperGuard serves an often-elderly, sometimes
+   * cognitively-impaired audience and runs deliberately large, and ~150 of its
+   * call sites rely on that default. A host wanting a conventional web scale
+   * (a business tool for a general audience) sets `"md"`.
+   */
+  iconSize: IconSize;
+}
+
+/**
+ * What a host that supplies nothing gets.
+ *
+ * Both values are deliberately the middle/safest option rather than the
+ * smallest or the flashiest: an unconfigured app should be readable and plain,
+ * so that forgetting the provider degrades to "looks unstyled" rather than
+ * "unreadable at 0.75rem".
+ */
+export const DEFAULT_STYLE_CONFIG: StyleConfig = {
+  fontSizeProfile: "md",
+  variant: "solid",
+  density: "normal",
+  // `standard` + `normal` resolves to 8px, which is the fallback baked into
+  // every recipe. An unconfigured host renders exactly as it did before the
+  // ladder existed.
+  densityBase: "standard",
+  // Not the middle of the scale, unlike the two above: this one is pinned to
+  // what the originating application already renders. Changing it would be an
+  // invisible, app-wide visual change to every existing consumer.
+  iconSize: "2x",
+};
+
+const StyleConfigContext = createContext<StyleConfig>(DEFAULT_STYLE_CONFIG);
+
+/**
+ * Every setting optional, and explicitly accepting `undefined`.
+ *
+ * `Partial<StyleConfig>` alone is not enough under
+ * `exactOptionalPropertyTypes`: it makes each key optional but still refuses an
+ * explicit `undefined`. Hosts routinely pass one — `variant={user?.variant}` —
+ * and rejecting that would push a conditional spread into every call site for
+ * no benefit, since the provider already treats absent and undefined the same.
+ */
+type OptionalStyleConfig = {
+  [K in keyof StyleConfig]?: StyleConfig[K] | undefined;
+};
+
+export interface StonedogStyleProviderProps extends OptionalStyleConfig {
+  children: React.ReactNode;
+  /**
+   * Which icon to draw for each intent — see `config/intent-icons.tsx`.
+   *
+   * This is how one `StyledDeleteButton` serves a Font Awesome product and a
+   * Lucide one. Optional: an unregistered intent simply renders no icon.
+   */
+  icons?: IntentIcons | undefined;
+}
+
+/**
+ * Supplies the styling settings to everything beneath it.
+ *
+ * Wrap the app once, near the root, and feed it from wherever the host keeps
+ * user preferences. HopperGuard renders it inside its existing config provider
+ * and passes the two values through from the Zustand store; a host with no such
+ * store can pass literals, or omit the provider entirely and take the defaults.
+ *
+ * ```tsx
+ * <StonedogStyleProvider fontSizeProfile={profile} variant={variant}>
+ *   <App />
+ * </StonedogStyleProvider>
+ * ```
+ *
+ * Props are merged over the defaults individually, so a host that only cares
+ * about font size does not have to name a variant it has no opinion on.
+ */
+export function StonedogStyleProvider({
+  children,
+  fontSizeProfile,
+  variant,
+  iconSize,
+  density,
+  densityBase,
+  icons,
+}: StonedogStyleProviderProps) {
+  const value = useMemo<StyleConfig>(
+    () => ({
+      fontSizeProfile:
+        fontSizeProfile ?? DEFAULT_STYLE_CONFIG.fontSizeProfile,
+      variant: variant ?? DEFAULT_STYLE_CONFIG.variant,
+      iconSize: iconSize ?? DEFAULT_STYLE_CONFIG.iconSize,
+      density: density ?? DEFAULT_STYLE_CONFIG.density,
+      densityBase: densityBase ?? DEFAULT_STYLE_CONFIG.densityBase,
+    }),
+    [fontSizeProfile, variant, iconSize, density, densityBase],
+  );
+
+  return (
+    <StyleConfigContext.Provider value={value}>
+      {/*
+        The icon registry rides along with the style config so a host wires up
+        one provider, not two — and so the intent buttons cannot end up inside
+        a styled tree with no icons registered.
+      */}
+      <IntentIconProvider icons={icons ?? {}}>{children}</IntentIconProvider>
+    </StyleConfigContext.Provider>
+  );
+}
+
+/**
+ * @deprecated Renamed to `StonedogStyleProvider` (NEH-251).
+ *
+ * Kept so each consumer can bump its submodule pointer on its own schedule
+ * rather than every repo moving in one lockstep sweep. Removed once HopperGuard,
+ * optima-filings and optima-cloud-saas have all landed their consumer PRs.
+ */
+export const HopperStyleProvider = StonedogStyleProvider;
+
+/** @deprecated Renamed to `StonedogStyleProviderProps` (NEH-251). */
+export type HopperStyleProviderProps = StonedogStyleProviderProps;
+
+/** The current styling settings. Safe outside a provider — returns defaults. */
+export function useStyleConfig(): StyleConfig {
+  return useContext(StyleConfigContext);
+}
+
+/** The user's app-wide font-size profile. */
+export function useFontSizeProfile(): FontSizeProfile {
+  return useStyleConfig().fontSizeProfile;
+}
+
+/** The app-wide default icon size. `StyledIcon` uses it when given no `size`. */
+export function useIconSize(): IconSize {
+  return useStyleConfig().iconSize;
+}
+
+/**
+ * Resolve a control's appearance: **the caller's, else the user's app-wide
+ * setting, else `solid`.**
+ *
+ * This is three lines, which is exactly why it is shared. In the originating
+ * codebase each control picked its own default — a checkbox hard-coded `solid`,
+ * a wheel picker defaulted to `outline`, a phone field to `solid` — each
+ * plausible alone, and together they produced a form whose checkbox, phone
+ * field and wheel ignored the theme every other control followed.
+ *
+ * The narrowing matters as much as the fallback: a caller may pass a variant the
+ * theme recipes have no case for (`ghost`, `link`, or a value read from storage
+ * written by an older release). Coercing to `solid` renders a plain control;
+ * passing it through renders an *unstyled* one, because a recipe silently emits
+ * nothing for a variant it does not define.
+ *
+ * ## Pass `allowed` when your recipe defines more than the theme five
+ *
+ * The default list is the five appearances a user can select app-wide, and for
+ * most controls that is the right gate. But some recipes define extras that are
+ * reachable per-call-site and not offerable globally — `inputBoolRecipe` has
+ * `ghost` and `none`. Narrowing those to `solid` is silent: the control renders,
+ * it just quietly ignores what the call site asked for.
+ *
+ * That is not hypothetical. Migrating `StyledInputBool` into this package with
+ * the default list dropped `variant="ghost"` on the floor, and nothing failed
+ * except one test in the consuming app that happened to assert it.
+ *
+ * `allowed` must contain `"solid"`, since that is the fallback.
+ */
+export function useResolvedVariant(variant?: string): ThemeVariant;
+export function useResolvedVariant<T extends string>(
+  variant: string | undefined,
+  allowed: readonly T[],
+): T;
+export function useResolvedVariant(
+  variant?: string,
+  allowed: readonly string[] = THEME_VARIANTS,
+): string {
+  const globalVariant = useStyleConfig().variant;
+  const candidate = variant ?? globalVariant;
+  return allowed.includes(candidate) ? candidate : "solid";
+}
+
+/**
+ * The user's density preference, as they chose it.
+ *
+ * Relative to the app's baseline, so it answers "did the user ask for tighter?"
+ * rather than "how much padding is there?". `useDensityStep` answers the
+ * second. `compact` is what makes intent buttons icon-only.
+ */
+export function useDensity(): DensityProfile {
+  return useStyleConfig().density;
+}
+
+/**
+ * Where the app's baseline and the user's preference actually land.
+ *
+ * This is the value that maps to real spacing — feed it to
+ * `densityCustomProperties` to get the properties the recipes read.
+ */
+export function useDensityStep(): DensityStep {
+  const { densityBase, density } = useStyleConfig();
+  return resolveDensityStep(densityBase, density);
+}

package/src/config/types.ts

@@ -0,0 +1,137 @@
+/**
+ * The vocabulary shared by the recipes and the components.
+ *
+ * Ported from HopperGuard's `hopper-types` so this package depends on nothing
+ * private. The tuples are the source of truth — the unions derive from them, so
+ * a value can be validated at runtime and narrowed at compile time from one
+ * declaration.
+ */
+
+/**
+ * The five appearances a user can choose app-wide. Every recipe defines all
+ * five, which is why `staticCss` force-generates them (see the preset).
+ */
+export const THEME_VARIANTS = [
+  "solid",
+  "outline",
+  "aurora",
+  "glass",
+  "matte",
+] as const;
+
+/**
+ * Appearances a *call site* can ask for but a user cannot select globally —
+ * a `ghost` toolbar button stays ghost whatever the app-wide variant is.
+ */
+export const STYLE_VARIANTS = [
+  "ghost",
+  "none",
+  "link",
+  "unstyled",
+  "selected",
+] as const;
+
+/** Semantic text treatments. Not appearances — meanings. */
+export const TEXT_VARIANTS = ["unstyled", "error", "pop", "warning"] as const;
+
+export const ALL_VARIANTS = [...THEME_VARIANTS, ...STYLE_VARIANTS] as const;
+
+export type ThemeVariant = (typeof THEME_VARIANTS)[number];
+export type StyleVariant = (typeof STYLE_VARIANTS)[number];
+export type AllowedTextVariant = (typeof TEXT_VARIANTS)[number];
+export type AllowedVariant = (typeof ALL_VARIANTS)[number];
+
+/**
+ * The user's app-wide text-size setting.
+ *
+ * Five tiers, not the thirteen `fontSizeMap` defines: the extra sizes exist so a
+ * heading can step one above body text, but only these five are offerable as a
+ * global preference.
+ */
+export const FONT_SIZE_PROFILES = ["xs", "sm", "md", "lg", "xl"] as const;
+export type FontSizeProfile = (typeof FONT_SIZE_PROFILES)[number];
+
+/** Every size key `fontSizeMap` understands, including the heading-only tiers. */
+export const FONT_SIZE_KEYS = [
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "2xl",
+  "3xl",
+  "4xl",
+  "5xl",
+  "6xl",
+  "7xl",
+  "8xl",
+  "9xl",
+] as const;
+export type FontSizeKey = (typeof FONT_SIZE_KEYS)[number];
+
+/**
+ * The icon size vocabulary.
+ *
+ * Deliberately the Font Awesome scale, because ~150 call sites in the
+ * originating app are written against it and silently changing what `"2x"`
+ * means would have been an invisible, app-wide visual change. It is just a set
+ * of names here — no icon library is implied by using them.
+ *
+ * It covers **all** of Font Awesome's `SizeProp`, `2xs` and `2xl` included.
+ * That completeness is the point: an adapter that maps its library's size type
+ * onto this one has to be able to, and an incomplete union turns into a type
+ * error at every call site that happens to use a missing value. `md` is the one
+ * addition, an alias for `1x`.
+ *
+ * It lives here rather than beside `StyledIcon` because `StyleConfig` names it —
+ * the app-wide default icon size is a host setting — and having the config
+ * import the component that imports the config would be a cycle.
+ */
+export const ICON_SIZES = [
+  "2xs",
+  "xs",
+  "sm",
+  "1x",
+  "md",
+  "lg",
+  "2x",
+  "xl",
+  "2xl",
+  "3x",
+  "4x",
+  "5x",
+  "6x",
+  "7x",
+  "8x",
+  "9x",
+  "10x",
+] as const;
+export type IconSize = (typeof ICON_SIZES)[number];
+
+export function isThemeVariant(value: unknown): value is ThemeVariant {
+  return THEME_VARIANTS.includes(value as ThemeVariant);
+}
+
+export function isFontSizeProfile(value: unknown): value is FontSizeProfile {
+  return FONT_SIZE_PROFILES.includes(value as FontSizeProfile);
+}
+
+/**
+ * How tightly the UI packs. A user preference, not a viewport thing — someone
+ * with limited dexterity picks `comfortable` on a phone, and someone managing a
+ * dense list picks `compact` on a desktop.
+ *
+ * It changes more than padding: at `compact` the intent buttons drop their
+ * text label and show only their icon, which is why the shared components need
+ * to know about it rather than the host handling it alone.
+ */
+export const DENSITY_PROFILES = ["compact", "normal", "comfortable"] as const;
+export type DensityProfile = (typeof DENSITY_PROFILES)[number];
+
+export function isDensityProfile(value: unknown): value is DensityProfile {
+  return DENSITY_PROFILES.includes(value as DensityProfile);
+}
+
+export function isIconSize(value: unknown): value is IconSize {
+  return ICON_SIZES.includes(value as IconSize);
+}

package/src/index.ts

@@ -0,0 +1,259 @@
+/**
+ * @stonedogcode/style — public API.
+ *
+ * Components are exported both as named exports and, individually, as default
+ * exports from their own module. Prefer the named export; the default exports
+ * exist because the originating codebase used them at ~1,400 call sites and
+ * changing that was not worth bundling into the extraction.
+ *
+ * The Panda preset is NOT re-exported here. It is imported by the consumer's
+ * `panda.config.ts`, which runs in Node at build time, and pulling the whole
+ * component tree (and React with it) into that context is a needless cost —
+ * hence the separate `@stonedogcode/style/preset` entry point.
+ */
+
+// ---------------------------------------------------------------------------
+// Configuration seam — what a host application must wire up.
+// ---------------------------------------------------------------------------
+export {
+  StonedogStyleProvider,
+  useStyleConfig,
+  useFontSizeProfile,
+  useIconSize,
+  useResolvedVariant,
+  DEFAULT_STYLE_CONFIG,
+} from "./config/style-config";
+export type {
+  StyleConfig,
+  StonedogStyleProviderProps,
+} from "./config/style-config";
+
+/**
+ * Deprecated `Hopper*` aliases — NEH-251. See `config/style-config.tsx`.
+ * Removed once every consumer has landed its rename PR.
+ */
+export { HopperStyleProvider } from "./config/style-config";
+export type { HopperStyleProviderProps } from "./config/style-config";
+
+export { setStyleLogger } from "./config/logger";
+export type { StyleLogger } from "./config/logger";
+
+export {
+  fontSizeMap,
+  getFontSizeLabel,
+  getFontSizeValue,
+  stepUpFontSize,
+  FONT_SIZE_ORDER,
+} from "./config/font-size";
+
+export {
+  THEME_VARIANTS,
+  STYLE_VARIANTS,
+  TEXT_VARIANTS,
+  ALL_VARIANTS,
+  FONT_SIZE_PROFILES,
+  FONT_SIZE_KEYS,
+  ICON_SIZES,
+  isThemeVariant,
+  isFontSizeProfile,
+  isIconSize,
+} from "./config/types";
+export type {
+  ThemeVariant,
+  StyleVariant,
+  AllowedVariant,
+  AllowedTextVariant,
+  FontSizeProfile,
+  FontSizeKey,
+  IconSize,
+} from "./config/types";
+
+// ---------------------------------------------------------------------------
+// Layout primitives
+// ---------------------------------------------------------------------------
+export { default as StyledBox, StyledBox as Box } from "./components/StyledBox";
+export type { StyledBoxProps } from "./components/StyledBox";
+
+export { default as StyledFlex } from "./components/StyledFlex";
+export type { StyledFlexProps } from "./components/StyledFlex";
+
+export { default as StyledGrid } from "./components/StyledGrid";
+export type { StyledGridProps } from "./components/StyledGrid";
+
+export { default as StyledGridItem } from "./components/StyledGridItem";
+export type { StyledGridItemProps } from "./components/StyledGridItem";
+
+export { default as StyledSimpleGrid } from "./components/StyledSimpleGrid";
+
+export { default as StyledStack } from "./components/StyledStack";
+export type { StyledStackProps } from "./components/StyledStack";
+
+export { default as StyledHStack } from "./components/StyledHStack";
+export type { StyledHStackProps } from "./components/StyledHStack";
+
+export { default as StyledVStack } from "./components/StyledVStack";
+export type { StyledVStackProps } from "./components/StyledVStack";
+
+export { default as StyledScrollbar } from "./components/StyledScrollbar";
+export { default as StyledSidebar, StyledSidebar as Sidebar } from "./components/StyledSidebar";
+export type { StyledSidebarProps, SidebarItem } from "./components/StyledSidebar";
+export { default as StyledCollapsible } from "./components/StyledCollapsible";
+export type { StyledCollapsibleProps } from "./components/StyledCollapsible";
+
+export { default as StyledFooter, StyledFooter as Footer } from "./components/StyledFooter";
+export type {
+  StyledFooterProps,
+  StyledFooterVersion,
+  StyledFooterStatusBadge,
+} from "./components/StyledFooter";
+export type { StyledScrollbarProps } from "./components/StyledScrollbar";
+
+// ---------------------------------------------------------------------------
+// Typography & dividers
+// ---------------------------------------------------------------------------
+export { default as StyledText } from "./components/StyledText";
+export type { StyledTextProps } from "./components/StyledText";
+
+export { default as StyledHeading } from "./components/StyledHeading";
+
+export { default as StyledSeparator } from "./components/StyledSeparator";
+export type { StyledSeparatorProps } from "./components/StyledSeparator";
+
+export { default as StyledHrRule } from "./components/StyledHrRule";
+export type { StyledHrRuleProps } from "./components/StyledHrRule";
+
+export {
+  default as TitleLogo,
+  TITLE_LOGO_METRICS,
+  TITLE_LOGO_SIZES,
+  isTitleLogoSize,
+} from "./components/TitleLogo";
+export type { TitleLogoProps, TitleLogoSize } from "./components/TitleLogo";
+
+// ---------------------------------------------------------------------------
+// Icons — the seam, not the artwork. See the README.
+// ---------------------------------------------------------------------------
+export { default as StyledIcon } from "./components/StyledIcon";
+// `IconSize` is exported above, from `config/types` — it is a config-level
+// vocabulary now that `StyleConfig` names it. `StyledIcon` still re-exports it
+// so the older import path keeps working for consumers.
+export type { StyledIconProps } from "./components/StyledIcon";
+export { createIcon, createIconFromComponent } from "./components/create-icon";
+
+// ---------------------------------------------------------------------------
+// Overlay
+// ---------------------------------------------------------------------------
+export * from "./components/intent-buttons";
+export { createIntentButton } from "./components/create-intent-button";
+export type { IntentButtonProps, IntentButtonSpec } from "./components/create-intent-button";
+
+export {
+  IntentIconProvider,
+  useIntentIcon,
+  useIntentIcons,
+  missingIntentIcons,
+  ICON_INTENTS,
+} from "./config/intent-icons";
+export type { IconIntent, IntentIcons } from "./config/intent-icons";
+
+export { useDensity, useDensityStep } from "./config/style-config";
+export { DENSITY_PROFILES, isDensityProfile } from "./config/types";
+export type { DensityProfile } from "./config/types";
+export {
+  DENSITY_STEPS,
+  DENSITY_BASES,
+  DENSITY_METRICS,
+  densityCustomProperties,
+  isDensityBase,
+  isDensityStep,
+  resolveDensityStep,
+} from "./config/density";
+export type { DensityBase, DensityStep } from "./config/density";
+
+export { default as StyledButton } from "./components/StyledButton";
+export type { StyledButtonProps } from "./components/StyledButton";
+
+export { default as StyledIconButton } from "./components/StyledIconButton";
+export type { StyledIconButtonProps, IconButtonSize } from "./components/StyledIconButton";
+
+export { default as StyledSpinner } from "./components/StyledSpinner";
+export type { StyledSpinnerProps } from "./components/StyledSpinner";
+
+export { default as StyledTooltip } from "./components/StyledTooltip";
+// Exported so a host can make the same decision for its own controls. A product
+// that renders its own hover-revealed affordance has the identical problem, and
+// re-deriving "can this device hover" per app is how two answers appear.
+export { useCanHover } from "./config/can-hover";
+export type { StyledTooltipProps } from "./components/StyledTooltip";
+
+// ---------------------------------------------------------------------------
+// Form controls
+// ---------------------------------------------------------------------------
+export { default as StyledFormLabel } from "./components/StyledFormLabel";
+export type { StyledFormLabelProps } from "./components/StyledFormLabel";
+
+export { default as StyledInputBool } from "./components/StyledInputBool";
+export type { StyledInputBoolProps, InputBoolVariant } from "./components/StyledInputBool";
+export { INPUT_BOOL_VARIANTS } from "./components/StyledInputBool";
+
+export { default as StyledInputSlider } from "./components/StyledInputSlider";
+export type { StyledInputSliderProps } from "./components/StyledInputSlider";
+
+// ---------------------------------------------------------------------------
+// Text inputs — dictation is supplied by the host, never implemented here
+// ---------------------------------------------------------------------------
+export type { Dictation } from "./components/dictation";
+
+export { default as StyledInputText } from "./components/StyledInputText";
+export type { StyledInputTextProps, InputTextVariant } from "./components/StyledInputText";
+export { INPUT_TEXT_VARIANTS } from "./components/StyledInputText";
+
+export { default as StyledInputTextArea } from "./components/StyledInputTextArea";
+export type { StyledInputTextAreaProps } from "./components/StyledInputTextArea";
+export { default as DictationPrompt } from "./components/DictationPrompt";
+
+// ---------------------------------------------------------------------------
+// Select + search
+// ---------------------------------------------------------------------------
+export { default as StyledInputSelect } from "./components/StyledInputSelect";
+export type {
+  StyledInputSelectProps,
+  SelectOption,
+  SelectVariant,
+} from "./components/StyledInputSelect";
+export { SELECT_VARIANTS } from "./components/StyledInputSelect";
+
+export { default as StyledSearch } from "./components/StyledSearch";
+export type { StyledSearchProps } from "./components/StyledSearch";
+
+export { default as StyledInputToggle } from "./components/StyledInputToggle";
+export type { StyledInputToggleProps } from "./components/StyledInputToggle";
+
+export { default as StyledInputRadio } from "./components/StyledInputRadio";
+export type { StyledInputRadioProps, RadioItem, RadioVariant } from "./components/StyledInputRadio";
+export { RADIO_VARIANTS } from "./components/StyledInputRadio";
+
+export { default as StyledFieldset } from "./components/StyledFieldset";
+export type { StyledFieldsetProps, FieldsetVariant } from "./components/StyledFieldset";
+export { FIELDSET_VARIANTS } from "./components/StyledFieldset";
+
+// ---------------------------------------------------------------------------
+// Data display
+// ---------------------------------------------------------------------------
+export { default as StyledList } from "./components/StyledList";
+export type {
+  StyledListRootProps,
+  StyledListItemProps,
+  ListVariant,
+} from "./components/StyledList";
+export { LIST_VARIANTS } from "./components/StyledList";
+
+export { default as StyledDefinitionList } from "./components/StyledDefinitionList";
+export type {
+  StyledDefinitionListProps,
+  DlVariant,
+} from "./components/StyledDefinitionList";
+export { DL_VARIANTS } from "./components/StyledDefinitionList";
+
+export { default as StyledSparkLine } from "./components/StyledSparkLine";
+export type { StyledSparkLineProps } from "./components/StyledSparkLine";