@gtivr4/a1-design-system-react 0.4.1 → 0.5.0

package/src/components/page-nav/PageNav.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+export interface PageNavSection {
+  /** Unique ID that matches the `id` on the corresponding heading/section element */
+  id: string;
+  /** Label shown in the nav */
+  label: string;
+  /** Heading nesting level for indentation. Default: 1 */
+  level?: 1 | 2;
+}
+
+export interface PageNavProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** List of page sections to link to */
+  sections?: PageNavSection[];
+  /** Accessible label for the `<nav>` and the visible heading. Default: "On this page" */
+  label?: string;
+}
+
+export declare function PageNav(props: PageNavProps): React.ReactElement;

package/src/components/pagination/Pagination.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+export interface PaginationProps {
+  /** Current page number (1-based) */
+  page: number;
+  /** Total number of pages */
+  totalPages: number;
+  /** Called with the new page number when a page button is clicked */
+  onChange?: (page: number) => void;
+  /**
+   * How many page numbers to show on each side of the current page.
+   * Default: 1
+   */
+  siblings?: number;
+  /** Size of the pagination buttons. Default: "md" */
+  size?: "sm" | "md" | "lg";
+}
+
+export declare function Pagination(props: PaginationProps): React.ReactElement;

package/src/components/paragraph/Paragraph.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+type Breakpoints = "xs" | "sm" | "md" | "lg" | "xl";
+type ParagraphSize = "xs" | "sm" | "md" | "lg" | "xl";
+
+export interface ParagraphProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  /** Underlying element. Default: "p" */
+  as?: React.ElementType;
+  /**
+   * Font size. Responsive object syntax supported. Default: "md"
+   * @example size={{ xs: "sm", md: "md" }}
+   */
+  size?: ParagraphSize | Partial<Record<Breakpoints, ParagraphSize>>;
+  /** Text colour. Default: "default" */
+  color?: "default" | "muted";
+  /** Apply text-wrap. "balance" distributes line lengths evenly — use for short intro copy. */
+  textWrap?: "balance";
+  /** Horizontal text alignment. "start"/"end" are logical aliases for LTR/RTL-safe alignment. */
+  align?: "left" | "center" | "right" | "start" | "end";
+  children?: React.ReactNode;
+}
+
+export declare function Paragraph(props: ParagraphProps): React.ReactElement;

package/src/components/radio-group/RadioGroup.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+
+export interface RadioOption {
+  value: string;
+  label: string;
+  hint?: string;
+  disabled?: boolean;
+}
+
+export interface RadioGroupProps {
+  /** Group legend */
+  label?: string;
+  /** Helper text */
+  hint?: string;
+  /** Error message */
+  error?: string;
+  /** Size density. Inherits from parent `Fieldset` when omitted. Default: "default" */
+  size?: "comfortable" | "default" | "compact";
+  required?: boolean;
+  disabled?: boolean;
+  /** Render radios side by side. Default: false */
+  inline?: boolean;
+  /** Input name attribute shared by all radios */
+  name?: string;
+  /** Array of radio options */
+  options?: RadioOption[];
+  /** Controlled selected value */
+  value?: string | null;
+  /** Default selected value (uncontrolled). Default: null */
+  defaultValue?: string | null;
+  /** Called with the selected value string on change */
+  onChange?: (value: string) => void;
+  id?: string;
+  className?: string;
+}
+
+export declare function RadioGroup(props: RadioGroupProps): React.ReactElement;

package/src/components/section/Section.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+
+type Breakpoints = "xs" | "sm" | "md" | "lg" | "xl";
+type PaddingSize = "lg" | "md" | "sm" | "xs" | "none";
+type ResponsivePadding = PaddingSize | Partial<Record<Breakpoints, PaddingSize>>;
+type AlignmentValue = "left" | "center" | "right";
+type ResponsiveAlignment = AlignmentValue | Partial<Record<Breakpoints, AlignmentValue>>;
+
+export interface SectionProps extends React.HTMLAttributes<HTMLElement> {
+  /** Underlying element. Default: "section" */
+  as?: React.ElementType;
+  /** Block padding scale. Responsive object syntax supported. Default: "md" */
+  padding?: ResponsivePadding;
+  /** Background surface treatment */
+  surface?: "page" | "panel" | "raised";
+  /** Gap between direct children */
+  gap?: "xs" | "sm" | "md" | "lg";
+  /** Gradient overlay colour */
+  gradient?: "accent" | "highlight" | "info" | "success" | "warn";
+  /** Gradient origin. Default: "center" */
+  gradientPosition?: "top" | "top-right" | "right" | "bottom-right" | "bottom" | "bottom-left" | "left" | "top-left" | "center";
+  /** Apply inverse (dark) colour scheme to this section */
+  inverse?: boolean;
+  /** Constrain inner content to a max-width and centre it */
+  contentWidth?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+  /** Force a specific height. "hero" fills 90svh minus the sticky header height and vertically centres content. */
+  height?: "screen" | "hero";
+  /** Horizontal layout alignment for direct children. Responsive object syntax supported. */
+  align?: ResponsiveAlignment;
+  children?: React.ReactNode;
+}
+
+export declare function Section(props: SectionProps): React.ReactElement;

package/src/components/segmented-control/SegmentedControl.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+export interface SegmentOption {
+  value: string;
+  label?: string;
+  icon?: string;
+  ariaLabel?: string;
+}
+
+export interface SegmentedControlProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Option list. Pass strings or `{ value, label, icon }` objects. */
+  options?: (string | SegmentOption)[];
+  /** Currently selected value (controlled) */
+  value?: string;
+  /** Called with the new value when an option is selected */
+  onChange?: (value: string) => void;
+  /** Stretch to fill the container width. Default: false */
+  fullWidth?: boolean;
+  /** Height scale. Default: "md" */
+  size?: "sm" | "md" | "lg";
+}
+
+export declare function SegmentedControl(props: SegmentedControlProps): React.ReactElement;

package/src/components/side-nav/SideNav.d.ts

@@ -0,0 +1,62 @@
+import * as React from "react";
+
+export interface SideNavProps {
+  /**
+   * Header slot. Pass a render function to receive the current `collapsed` state:
+   * `header={(collapsed) => <Logo collapsed={collapsed} />}`
+   */
+  header?: React.ReactNode | ((collapsed: boolean) => React.ReactNode);
+  /** Footer slot — hidden when collapsed */
+  footer?: React.ReactNode | ((collapsed: boolean) => React.ReactNode);
+  /** `SideNavItem` and `SideNavGroup` elements */
+  children?: React.ReactNode;
+  /** Controls overlay visibility on xs/sm/md viewports. Default: false */
+  open?: boolean;
+  /** Called when the scrim, Escape key, or close button is triggered */
+  onClose?: () => void;
+  /** Initial collapsed state for lg/xl (uncontrolled). Default: false */
+  defaultCollapsed?: boolean;
+  /** Controlled collapsed state for lg/xl */
+  collapsed?: boolean;
+  /** Called with next boolean when collapsed state changes */
+  onCollapsedChange?: (collapsed: boolean) => void;
+  /** Where the desktop collapse toggle appears. Default: "header" */
+  collapseButtonPlacement?: "header" | "footer";
+  /** Side of the layout the nav occupies. Default: "start" */
+  placement?: "start" | "end";
+  className?: string;
+}
+
+export interface SideNavGroupProps {
+  /** Material Symbols icon (recommended for collapsed state) */
+  icon?: string;
+  /** Trigger label */
+  label: string;
+  /** Initial expanded state (uncontrolled). Default: false */
+  defaultOpen?: boolean;
+  /** Controlled expanded state */
+  open?: boolean;
+  /** Called with next boolean when toggled */
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface SideNavItemProps {
+  /** Underlying element. Default: "a" */
+  as?: React.ElementType;
+  /** Material Symbols icon name */
+  icon?: string;
+  /** Visible label (also used as tooltip when collapsed) */
+  label: string;
+  /** Badge count shown next to the label */
+  badge?: string | number;
+  /** Mark as the current page. Default: false */
+  active?: boolean;
+  className?: string;
+  [key: string]: any;
+}
+
+export declare function SideNav(props: SideNavProps): React.ReactElement;
+export declare function SideNavGroup(props: SideNavGroupProps): React.ReactElement;
+export declare function SideNavItem(props: SideNavItemProps): React.ReactElement;

package/src/components/spacer/Spacer.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+
+type Breakpoints = "xs" | "sm" | "md" | "lg" | "xl";
+type SpacerSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+
+export interface SpacerProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Space height. Responsive object syntax supported.
+   * xs=8px · sm=16px · md=24px · lg=40px · xl=64px · xxl=96px
+   * Default: "md"
+   * @example size={{ xs: "sm", md: "lg" }}
+   */
+  size?: SpacerSize | Partial<Record<Breakpoints, SpacerSize>>;
+}
+
+export declare function Spacer(props: SpacerProps): React.ReactElement;

package/src/components/stack/Stack.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+
+type Breakpoints = "xs" | "sm" | "md" | "lg" | "xl";
+type Direction = "column" | "column-reverse" | "row" | "row-reverse";
+type Justify = "start" | "center" | "end" | "between" | "around" | "evenly";
+type Align = "stretch" | "start" | "center" | "end" | "baseline";
+type SemanticGap = "xs" | "sm" | "md" | "lg";
+type SpacingToken = 1 | 2 | 4 | 6 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 64 | 96 | 128;
+
+export interface StackProps extends React.HTMLAttributes<HTMLElement> {
+  /** Underlying element. Default: "div" */
+  as?: React.ElementType;
+  /**
+   * Flex direction. Responsive object syntax supported.
+   * Default: "column"
+   * @example direction={{ xs: "column", md: "row" }}
+   */
+  direction?: Direction | Partial<Record<Breakpoints, Direction>>;
+  /**
+   * Gap between children. Use a semantic token ("xs"–"lg") or a numeric spacing value.
+   * Default: 16
+   */
+  gap?: SemanticGap | SpacingToken;
+  /**
+   * Align-items. Default: "stretch"
+   */
+  align?: Align;
+  /**
+   * Justify-content. Responsive object syntax supported.
+   * Default: "start"
+   */
+  justify?: Justify | Partial<Record<Breakpoints, Justify>>;
+  /** Allow children to wrap. Default: false */
+  wrap?: boolean;
+  children?: React.ReactNode;
+}
+
+export declare function Stack(props: StackProps): React.ReactElement;

package/src/components/status-bar/StatusBar.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+
+export interface StatusBarProps {
+  /**
+   * Current value. Combined with max to compute the fill percentage.
+   * Ignored when indeterminate is true. Default: 0
+   */
+  value?: number;
+  /**
+   * Maximum value. Default: 100
+   */
+  max?: number;
+  /**
+   * Label displayed adjacent to the bar. Accepts any ReactNode — plain string,
+   * bold/inline markup, or composed components. Also provides the accessible
+   * name for the progressbar via aria-labelledby.
+   *
+   * @example <StatusBar label="Storage used" />
+   * @example <StatusBar label={<><strong>73%</strong> used</>} />
+   */
+  label?: React.ReactNode;
+  /**
+   * Position of the label relative to the bar.
+   * "above" and "below" use a column layout; "before" and "after" use a row
+   * layout and are RTL-aware ("before" = inline-start side). Default: "above"
+   */
+  labelPosition?: "above" | "below" | "before" | "after";
+  /**
+   * Bar height. Default: "md"
+   */
+  size?: "sm" | "md" | "lg";
+  /**
+   * Shows an animated loading sweep instead of a value-based fill.
+   * Removes aria-valuenow so assistive technology announces an indeterminate
+   * state. After 3 seconds a pause/resume button appears. Default: false
+   */
+  indeterminate?: boolean;
+  /** Additional CSS class names applied to the root element. */
+  className?: string;
+}
+
+export declare function StatusBar(props: StatusBarProps & React.HTMLAttributes<HTMLDivElement>): React.ReactElement;

package/src/components/switch/Switch.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+
+export interface SwitchProps {
+  /** Visible label text */
+  label?: string;
+  /** Helper text shown below the switch */
+  hint?: string;
+  /** Error message */
+  error?: string;
+  /** Size density. Inherits from parent `Fieldset` when omitted. Default: "default" */
+  size?: "comfortable" | "default" | "compact";
+  /** Position of the label relative to the toggle. Default: "end" */
+  labelPosition?: "start" | "end";
+  disabled?: boolean;
+  /** Controlled checked state */
+  checked?: boolean;
+  /** Initial checked state (uncontrolled). Default: false */
+  defaultChecked?: boolean;
+  /** Called with (checked, event) when the value changes */
+  onChange?: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+  id?: string;
+  name?: string;
+  value?: string;
+  className?: string;
+}
+
+export declare function Switch(props: SwitchProps): React.ReactElement;

package/src/components/system-banner/SystemBanner.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+export interface SystemBannerProps {
+  /** Semantic status colour. Default: "neutral" */
+  status?: "neutral" | "info" | "success" | "warn" | "error";
+  /** Bold title text */
+  title?: string;
+  /** Override the default status icon with any Material Symbols name */
+  icon?: string;
+  /** Action element rendered at the trailing end */
+  action?: React.ReactNode;
+  /** Called when the dismiss button is clicked. Omit to hide the dismiss button. */
+  onDismiss?: () => void;
+  children?: React.ReactNode;
+}
+
+export declare function SystemBanner(props: SystemBannerProps): React.ReactElement;

package/src/components/tabs/Tabs.d.ts

@@ -0,0 +1,53 @@
+import * as React from "react";
+
+export interface TabsProps {
+  /** Currently active tab value (controlled) */
+  value: string;
+  /** Called with the new value when a tab is clicked */
+  onChange?: (value: string) => void;
+  /**
+   * Visual style. Default: "line"
+   * line     — underline indicator
+   * pills    — filled pill buttons
+   * segment  — segmented control style
+   * progress — step-progress indicator
+   * folder   — browser-tab style folders
+   */
+  variant?: "line" | "pills" | "segment" | "progress" | "folder";
+  /**
+   * Heading level for accessibility. Tabs at level 1 sit above level 2 tabs.
+   * Default: 1
+   */
+  level?: 1 | 2;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface TabListProps {
+  children?: React.ReactNode;
+}
+
+export interface TabProps {
+  /** Value identifier — must match the corresponding `TabPanel` value */
+  value: string;
+  /** Badge count shown next to the label */
+  count?: number;
+  /** Material Symbols icon name */
+  icon?: string;
+  /** Icon placement relative to the label. Default: "start" */
+  iconPosition?: "start" | "end" | "above";
+  /** Status indicator (used in "progress" variant) */
+  status?: "completed" | "error" | "warn";
+  children?: React.ReactNode;
+}
+
+export interface TabPanelProps {
+  /** Value identifier — panel renders only when this matches the active `Tabs` value */
+  value: string;
+  children?: React.ReactNode;
+}
+
+export declare function Tabs(props: TabsProps): React.ReactElement;
+export declare function TabList(props: TabListProps): React.ReactElement;
+export declare function Tab(props: TabProps): React.ReactElement;
+export declare function TabPanel(props: TabPanelProps): React.ReactElement;

package/src/index.js

@@ -6,12 +6,14 @@ export { Breadcrumb } from "./components/breadcrumb/Breadcrumb.jsx";
 export { Notification } from "./components/notification/Notification.jsx";
 export { Snackbar } from "./components/snackbar/Snackbar.jsx";
 export { StatusBar } from "./components/status-bar/StatusBar.jsx";
+export { CircularProgress } from "./components/circular-progress/CircularProgress.jsx";
 export { Bleed } from "./components/bleed/Bleed.jsx";
 export { IconButton } from "./components/icon-button/IconButton.jsx";
 export { Button } from "./components/button/Button.jsx";export { ButtonContainer } from "./components/button-container/ButtonContainer.jsx";
 export { Card } from "./components/card/Card.jsx";
 export { Cluster } from "./components/cluster/Cluster.jsx";
 export { Code } from "./components/code/Code.jsx";
+export { DefinitionList } from "./components/definition-list/DefinitionList.jsx";
 export { Dialog } from "./components/dialog/Dialog.jsx";
 export { Divider } from "./components/divider/Divider.jsx";
 export { InlineEditable } from "./components/inline-editable/InlineEditable.jsx";

package/src/tokens.css

@@ -408,6 +408,14 @@
   --component-choice-group-comfortable-min-width: 12.5rem;
   --component-choice-group-comfortable-group-gap: 0.5rem;
   --component-choice-group-comfortable-items-top-gap: 1rem;
+  --component-circular-progress-xs-size: 2.5rem;
+  --component-circular-progress-sm-size: 4rem;
+  --component-circular-progress-md-size: 6rem;
+  --component-circular-progress-lg-size: 8rem;
+  --component-circular-progress-track-color: #e1e8f3;
+  --component-circular-progress-fill-color: #7c3aed;
+  --component-circular-progress-gap: 0.5rem;
+  --component-circular-progress-indeterminate-duration: 1200ms;
   --component-data-table-border-width: 1px;
   --component-data-table-header-font-weight: 500;
   --component-data-table-focus-ring-width: 0.125rem;
@@ -421,6 +429,20 @@
   --component-data-table-density-comfortable-cell-padding-block: 1.25rem;
   --component-data-table-density-comfortable-cell-padding-inline: 1.25rem;
   --component-data-table-density-comfortable-font-size: 0.875rem;
+  --component-definition-list-gap-sm: 0.5rem;
+  --component-definition-list-gap-md: 0.75rem;
+  --component-definition-list-gap-lg: 1rem;
+  --component-definition-list-row-gap-sm: 0.375rem;
+  --component-definition-list-row-gap-md: 0.5rem;
+  --component-definition-list-row-gap-lg: 0.75rem;
+  --component-definition-list-column-gap-sm: 0.75rem;
+  --component-definition-list-column-gap-md: 1rem;
+  --component-definition-list-column-gap-lg: 1.25rem;
+  --component-definition-list-label-width-min: 6rem;
+  --component-definition-list-label-width-preferred: 28cqi;
+  --component-definition-list-label-width-max: 8rem;
+  --component-definition-list-label-font-weight: 500;
+  --component-definition-list-copy-gap: 0.5rem;
   --component-dialog-padding: 1.5rem;
   --component-dialog-border-radius: 0.75rem;
   --component-dialog-border-width: 1px;