STE USK React

Public React components for the Sanderson Technology Enterprises design-system ecosystem. The package combines accessible React behavior with the visual, interaction, and responsive-layout contracts already provided by the three usk-* CSS libraries.

Version 2.1.0 expands the public package with preset-aware component identity, a release-quality proof demo, and comprehensive rendered-contrast verification while preserving the stable UI Style Kit 2.6 semantic component API and CSS-library ownership boundaries. The code is licensed under MPL-2.0: applications that consume the package may remain proprietary, while distributed modifications to MPL-covered library files must remain available under MPL-2.0.

Install

No npm authentication is required to install the public package.

npm install @sanderson-technology-enterprises/ste-usk-react

Import the package stylesheet once near the application entry point.

import {
  Alert,
  Button,
  Form,
  InterfaceRoot,
  Layout,
} from "@sanderson-technology-enterprises/ste-usk-react";
import "@sanderson-technology-enterprises/ste-usk-react/styles.css";

export function AccountSettings() {
  return (
    <InterfaceRoot preset="minimal-saas" mode="light">
      <Layout.Wrapper measure="content">
        <Layout.Stack gap={4}>
          <h1>Account settings</h1>
          <Alert variant="success">Your profile is current.</Alert>
          <Form>
            <Form.Input label="Email" name="email" type="email" />
            <Form.Toggle label="Product updates" name="productUpdates" />
            <Button type="submit" tooltip="Save account settings">
              Save changes
            </Button>
          </Form>
        </Layout.Stack>
      </Layout.Wrapper>
    </InterfaceRoot>
  );
}

Library responsibilities

| Package | Responsibility | | ------------------------- | ------------------------------------------------------------------------------------------- | | ui-style-kit-css | Theme tokens, presets, component paint, borders, shadows, and textures | | interactive-surface-css | Focus, hover, active, disabled, elevation, and feedback states | | layout-style-css | Responsive structure, intrinsic compositions, wrappers, density, and layout personalities | | ste-usk-react | Semantic React APIs, accessibility behavior, composition, and stable usk-* identity hooks |

DOM-bearing primitives preserve native attributes and refs. Compound families can be consumed through a parent component or equivalent named exports:

import {
  Form,
  FormInput as Input,
  Table,
  TableTd as Td,
} from "@sanderson-technology-enterprises/ste-usk-react";

// Form.Input === Input and Table.Td === Td

Screen navigation and responsive section navigation use the same reusable overlay pieces:

<Navigation label="Primary" placement="bottom">
  <a href="/dashboard">Dashboard</a>
  <a href="/account">Account</a>
</Navigation>

<SectionNavigation label="On this page" placement="right">
  <a href="#overview">Overview</a>
  <a href="#details">Details</a>
</SectionNavigation>

Navigation supports top, right, bottom, and left placement and is sticky by default. SectionNavigation renders a wider persistent panel on tablet and desktop viewports, then switches the same content tree to an icon-triggered Drawer on mobile. Modal and Drawer are also exported for application-level overlays.

Portfolio-proven patterns are exposed as product-neutral building blocks. ContentSection, Accordion, RichText, and ContentRenderer cover structured content; ImagePreview and DocumentPreview provide reusable preview flows. DocumentPreview is the generalized successor to the portfolio-specific ResumePreview name and accepts any printable React document.

<DocumentPreview
  title="Service agreement"
  fileName="service-agreement.pdf"
  onDownload={downloadAgreement}
  onPrint={() => window.print()}
>
  <ServiceAgreement />
</DocumentPreview>

Application framing utilities include a slot-based Footer, a threshold-aware BackToTopButton, and an AccessibilityMenu that returns portable preferences without imposing persistence or global document mutations.

Component-owned interaction surfaces expose typed surfaceVariant, surfaceLevel, and surfaceFeedback props. Composite components expose native slot props so upstream classes remain consumer-configurable without moving CSS ownership into React.

<Form.Input
  label="Search"
  className="usk-input"
  fieldClassName="ly-stack"
  surfaceVariant="accent"
  surfaceLevel={2}
/>

<DocumentPreview
  title="Service agreement"
  triggerProps={{ className: "ly-cluster" }}
  modalProps={{ className: "usk-card" }}
  viewportProps={{ className: "ly-container" }}
  paperProps={{ className: "usk-prose" }}
>
  <ServiceAgreement />
</DocumentPreview>

Documentation

| Start here | Purpose | | ------------------------------------------------------------- | ---------------------------------------------------------------------- | | Documentation hub | Choose the right guide or component reference | | Getting started | Install, configure a root, and build a first interface | | Component composition | Use structured content, previews, navigation, controls, and feedback | | Layout and theming | Configure presets, modes, themes, responsive layout, and CSS ownership | | Component API | Browse generated JSDoc by component family | | Public publishing | Validate and release the public npm package |

The curated guides explain intent and recommended composition. The generated API pages provide exact props and signatures. Generated files under docs/api/ are replaced by npm run docs and should not be edited directly.

Development

npm install
npm run demo
npm test -- src/components/Button/Button.test.tsx
npm run docs
npm run verify
npm run test:browser:full
npm run test:consumer:candidates

npm run demo starts the library-owned quality demo. It is a real consumer surface rather than a separately painted showcase: its local stylesheet owns only documentation layout, while the three CSS libraries retain structure, paint, and interaction-state ownership. Every catalog example has copy-ready JSX through the icon action inside its View code disclosure, and the in-page audit measures rendered text/background pairs for the currently selected preset, theme, and mode. Its result distinguishes direct solid checks, labeled solid-fallback checks for image or gradient surfaces, and unverified candidates; unresolved paint is never reported as passing. Run npm run demo:build to produce a static, public-ready artifact in demo-dist/.

Every component lives in its own folder with a local index.ts. src/components/index.ts is the component barrel used by the package root. Add or update professional JSDoc with component changes, then run npm run docs before publication.

Use focused tests while developing. npm run verify is the final Chromium gate: CSS ownership, unit tests, type checking, linting, formatting, generated-document drift, production build, publint, tarball validation, and browser integration. Release candidates also run npm run test:browser:full for Chromium, Firefox, and WebKit and npm run test:consumer:candidates against the four local package archives.

License

STE USK React 2.0.0 and later are available under the Mozilla Public License 2.0. MPL-2.0 uses file-level copyleft: a proprietary application may use the package without relicensing the application, but distributed modifications to covered library files must be made available under MPL-2.0. The license does not grant rights to Sanderson Technology Enterprises LLC trademarks, service marks, or logos.

The package is configured for public npm publication. Local verification does not prove registry publication, package visibility, trusted-publisher configuration, or GitHub Release state; verify those boundaries independently for each release.