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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtivr4/a1-design-system-react",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "React components for the A1 token-driven design system.",
   "type": "module",
   "main": "./src/index.js",
@@ -17,6 +17,7 @@
     "README.md",
     "guidelines/**/*.md",
     "src/**/*.css",
+    "src/**/*.d.ts",
     "src/**/*.jsx",
     "src/index.js",
     "!src/**/*.stories.jsx",

package/src/components/accordion/Accordion.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+export interface AccordionProps {
+  /** Trigger label text */
+  label: string;
+  /** Controlled open state */
+  open?: boolean;
+  /** Initial open state (uncontrolled). Default: false */
+  defaultOpen?: boolean;
+  /** Called with the next boolean when the trigger is clicked */
+  onChange?: (open: boolean) => void;
+  /** Size — affects trigger text size and padding. Default: "md" */
+  size?: "sm" | "md" | "lg";
+  /** Prevent the accordion from being toggled. Default: false */
+  disabled?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export declare function Accordion(props: AccordionProps): React.ReactElement;

package/src/components/banner/Banner.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+export interface BannerProps {
+  /** Layout style. "inline" sits within content; "system" spans full width. Default: "inline" */
+  variant?: "inline" | "system";
+  /** Semantic status colour. Default: "neutral" */
+  status?: "neutral" | "info" | "success" | "warn" | "error";
+  /** Bold title text shown before the body */
+  title?: string;
+  /** Override the default status icon with any Material Symbols name */
+  icon?: string;
+  /** Action element (e.g. a Button) 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 Banner(props: BannerProps): React.ReactElement;

package/src/components/bleed/Bleed.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+type SpacingToken = 1 | 2 | 4 | 6 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 64 | 96 | 128;
+
+export interface BleedProps extends React.HTMLAttributes<HTMLElement> {
+  /** Underlying element. Default: "div" */
+  as?: React.ElementType;
+  /** Base bleed amount applied to all axes when no axis-specific value is set. Default: 16 */
+  space?: SpacingToken | "none";
+  /** Block-axis (top/bottom) bleed override. Default: "none" */
+  block?: SpacingToken | "none";
+  /** Inline-axis (left/right) bleed override. Falls back to `space`. */
+  inline?: SpacingToken;
+  children?: React.ReactNode;
+}
+
+export declare function Bleed(props: BleedProps): React.ReactElement;

package/src/components/blockquote/Blockquote.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+export interface BlockquoteProps extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * Visual style variant. Default: "border"
+   *
+   * border  — left accent border, subtle background
+   * filled  — filled neutral surface
+   * feature — large centered text with accent bar, for pullquotes
+   * minimal — no decoration, plain text
+   * accent  — filled action-colour background with inverse text
+   * pull    — centred editorial with curly quotes
+   * ruled   — top + bottom horizontal rules, centred
+   */
+  variant?: "border" | "filled" | "feature" | "minimal" | "accent" | "pull" | "ruled";
+  /** Attribution text rendered as a `<figcaption>` */
+  cite?: string;
+  /** URL that the cite text links to */
+  citeUrl?: string;
+  children?: React.ReactNode;
+}
+
+export declare function Blockquote(props: BlockquoteProps): React.ReactElement;

package/src/components/breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+}
+
+export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * Ordered list of breadcrumb items.
+   * The last item is treated as the current page (non-interactive).
+   * All previous items render as links or buttons.
+   */
+  items?: BreadcrumbItem[];
+  /**
+   * Label for the back link shown in narrow containers. Defaults to "Back".
+   */
+  backLabel?: string;
+}
+
+export declare function Breadcrumb(props: BreadcrumbProps): React.ReactElement;

package/src/components/button/Button.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Underlying element or component to render. Default: "button" */
+  as?: React.ElementType;
+  /** Visual style. Default: "primary" */
+  variant?: "primary" | "secondary" | "tertiary" | "destructive" | "success";
+  /** Size. Default: "md" */
+  size?: "sm" | "md" | "lg";
+  /** Material Symbols icon name to show alongside the label */
+  icon?: string;
+  /** Whether the icon appears before or after the label. Default: "start" */
+  iconPosition?: "start" | "end";
+  children?: React.ReactNode;
+}
+
+export declare function Button(props: ButtonProps): React.ReactElement;

package/src/components/button-container/ButtonContainer.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+export interface ButtonContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Horizontal alignment of buttons. Default: "start" */
+  align?: "start" | "center" | "end";
+  /** Default size passed to child Button elements that do not set their own size. */
+  size?: "sm" | "md" | "lg";
+  children?: React.ReactNode;
+}
+
+export declare function ButtonContainer(props: ButtonContainerProps): React.ReactElement;

package/src/components/calendar/Calendar.d.ts

@@ -0,0 +1,75 @@
+import * as React from "react";
+
+export interface CalendarMonth {
+  /** Full calendar year, e.g. 2026 */
+  year: number;
+  /** 1-indexed month: 1 = January … 12 = December */
+  month: number;
+}
+
+export interface CalendarProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Display mode.
+   * - `"scroll"` — renders all months vertically; parent container controls scrolling (default).
+   * - `"paginated"` — shows one month at a time with prev/next buttons and month/year selects.
+   */
+  variant?: "scroll" | "paginated";
+  /**
+   * Month to centre the scroll position on at mount (scroll) or the initial month shown (paginated).
+   * Accepts a `Date` object or `{ year, month }` (month is 1-indexed).
+   * Defaults to the current month.
+   */
+  initialMonth?: Date | CalendarMonth;
+  /**
+   * Total number of months to render. Only applies to `variant="scroll"`.
+   * Default: 13
+   */
+  monthsToShow?: number;
+  /**
+   * Highlight today's date with the action colour.
+   * Default: true
+   */
+  highlightToday?: boolean;
+  /**
+   * Apply a background tint to dates before today.
+   * Default: true
+   */
+  dimPast?: boolean;
+  /**
+   * Show a "Today" button in the paginated nav bar that jumps to the current month.
+   * Disabled automatically when already on the current month.
+   * Only applies to `variant="paginated"`.
+   * Default: false
+   */
+  todayButton?: boolean;
+  /**
+   * Enables date selection. When false (default), the calendar is display-only —
+   * no click handlers, hover effects, or keyboard interaction on day cells.
+   * Pass `selectedDate` or `defaultSelectedDate` alongside this prop.
+   * Default: false
+   */
+  selectable?: boolean;
+  /**
+   * The currently selected date (controlled). Pass `null` to clear the selection.
+   * Omit entirely to use uncontrolled mode with `defaultSelectedDate`.
+   */
+  selectedDate?: Date | null;
+  /**
+   * Initial selected date for uncontrolled mode. Ignored when `selectedDate` is provided.
+   */
+  defaultSelectedDate?: Date | null;
+  /**
+   * Called with the new `Date` whenever the user clicks a selectable day.
+   */
+  onChange?: (date: Date) => void;
+  /**
+   * Earliest selectable date (inclusive). Days before this are disabled.
+   */
+  minDate?: Date;
+  /**
+   * Latest selectable date (inclusive). Days after this are disabled.
+   */
+  maxDate?: Date;
+}
+
+export declare function Calendar(props: CalendarProps): React.ReactElement;

package/src/components/calendar/Calendar.jsx

@@ -42,6 +42,12 @@ export function Calendar({
   dimPast = true,
   variant = "scroll",
   todayButton = false,
+  selectable = false,
+  selectedDate,
+  defaultSelectedDate,
+  onChange,
+  minDate,
+  maxDate,
   className = "",
   ...props
 }) {
@@ -63,6 +69,35 @@ export function Calendar({
   const [viewMonth, setViewMonth] = useState(centerMonth);
   const currentMonthRef           = useRef(null);
 
+  // Selection — controlled when selectedDate is provided, otherwise internal state
+  const isControlled = selectedDate !== undefined;
+  const [internalSelected, setInternalSelected] = useState(defaultSelectedDate ?? null);
+  const selected = isControlled ? selectedDate : internalSelected;
+
+  function isSameDay(d, y, m, day) {
+    return d instanceof Date && d.getFullYear() === y && d.getMonth() === m && d.getDate() === day;
+  }
+
+  function isDayDisabled(y, m, day) {
+    const date = new Date(y, m, day);
+    if (minDate) {
+      const min = new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate());
+      if (date < min) return true;
+    }
+    if (maxDate) {
+      const max = new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate());
+      if (date > max) return true;
+    }
+    return false;
+  }
+
+  function handleDayClick(y, m, day) {
+    if (isDayDisabled(y, m, day)) return;
+    const date = new Date(y, m, day);
+    if (!isControlled) setInternalSelected(date);
+    onChange?.(date);
+  }
+
   // ── Localised strings ─────────────────────────────────────────
 
   // Month names
@@ -210,15 +245,30 @@ export function Calendar({
                   dimPast &&
                   new Date(year, month, day) < new Date(todayYear, todayMonth, todayDay);
 
+                const isSelected = isSameDay(selected, year, month, day);
+                const isDisabled = isDayDisabled(year, month, day);
+
                 return (
                   <td
                     key={di}
                     className={[
                       "a1-calendar__day",
-                      isToday && "a1-calendar__day--today",
-                      isPast  && "a1-calendar__day--past",
+                      isToday    && "a1-calendar__day--today",
+                      isPast     && "a1-calendar__day--past",
+                      isSelected && "a1-calendar__day--selected",
+                      isDisabled && "a1-calendar__day--disabled",
                     ].filter(Boolean).join(" ")}
                     aria-current={isToday ? "date" : undefined}
+                    aria-selected={isSelected ? true : undefined}
+                    aria-disabled={isDisabled ? true : undefined}
+                    tabIndex={selectable && !isDisabled ? 0 : undefined}
+                    onClick={selectable && !isDisabled ? () => handleDayClick(year, month, day) : undefined}
+                    onKeyDown={selectable && !isDisabled ? (e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        handleDayClick(year, month, day);
+                      }
+                    } : undefined}
                   >
                     <span className="a1-calendar__day-number" aria-hidden="true">
                       {day}
@@ -235,17 +285,27 @@ export function Calendar({
 
   // ── Paginated variant ─────────────────────────────────────────
   if (variant === "paginated") {
-    const yearStart = todayYear - 10;
-    const yearEnd   = todayYear + 15;
+    const minYear = minDate ? minDate.getFullYear() : todayYear - 10;
+    const minMon  = minDate ? minDate.getMonth()    : 0;
+    const maxYear = maxDate ? maxDate.getFullYear() : todayYear + 15;
+    const maxMon  = maxDate ? maxDate.getMonth()    : 11;
+
+    const yearStart = minDate ? minDate.getFullYear() : todayYear - 10;
+    const yearEnd   = maxDate ? maxDate.getFullYear() : todayYear + 15;
     const years     = Array.from({ length: yearEnd - yearStart + 1 }, (_, i) => yearStart + i);
 
+    const prevAtMin = viewYear === minYear && viewMonth === minMon;
+    const nextAtMax = viewYear === maxYear && viewMonth === maxMon;
+
     const goPrev = () => {
+      if (prevAtMin) return;
       const p = addMonths(viewYear, viewMonth, -1);
       setViewYear(p.year);
       setViewMonth(p.month);
     };
 
     const goNext = () => {
+      if (nextAtMax) return;
       const n = addMonths(viewYear, viewMonth, 1);
       setViewYear(n.year);
       setViewMonth(n.month);
@@ -263,19 +323,19 @@ export function Calendar({
 
     return (
       <div
-        className={["a1-calendar", "a1-calendar--paginated", className].filter(Boolean).join(" ")}
+        className={["a1-calendar", "a1-calendar--paginated", selectable && "a1-calendar--selectable", className].filter(Boolean).join(" ")}
         {...props}
       >
         <div className="a1-calendar__inner">
           <div className="a1-calendar__nav">
 
             <span className="a1-calendar__nav-wide">
-              <Button variant="tertiary" size="sm" icon={isRtl ? "chevron_right" : "chevron_left"} iconPosition="start" onClick={goPrev}>
+              <Button variant="tertiary" size="sm" icon={isRtl ? "chevron_right" : "chevron_left"} iconPosition="start" onClick={goPrev} disabled={prevAtMin}>
                 {prevMonthLabel}
               </Button>
             </span>
             <span className="a1-calendar__nav-narrow">
-              <IconButton icon={isRtl ? "chevron_right" : "chevron_left"} label={prevMonthLabel} variant="tertiary" onClick={goPrev} />
+              <IconButton icon={isRtl ? "chevron_right" : "chevron_left"} label={prevMonthLabel} variant="tertiary" onClick={goPrev} disabled={prevAtMin} />
             </span>
 
             <div className="a1-calendar__nav-label">
@@ -286,9 +346,12 @@ export function Calendar({
                 value={viewMonth}
                 onChange={e => setViewMonth(Number(e.target.value))}
               >
-                {MONTHS.map((name, i) => (
-                  <option key={i} value={i}>{name}</option>
-                ))}
+                {MONTHS.map((name, i) => {
+                  const disabled =
+                    (viewYear === minYear && i < minMon) ||
+                    (viewYear === maxYear && i > maxMon);
+                  return <option key={i} value={i} disabled={disabled}>{name}</option>;
+                })}
               </SelectField>
               <SelectField
                 className="a1-calendar__nav-field"
@@ -327,12 +390,12 @@ export function Calendar({
             </div>
 
             <span className="a1-calendar__nav-wide">
-              <Button variant="tertiary" size="sm" icon={isRtl ? "chevron_left" : "chevron_right"} iconPosition="end" onClick={goNext}>
+              <Button variant="tertiary" size="sm" icon={isRtl ? "chevron_left" : "chevron_right"} iconPosition="end" onClick={goNext} disabled={nextAtMax}>
                 {nextMonthLabel}
               </Button>
             </span>
             <span className="a1-calendar__nav-narrow">
-              <IconButton icon={isRtl ? "chevron_left" : "chevron_right"} label={nextMonthLabel} variant="tertiary" onClick={goNext} />
+              <IconButton icon={isRtl ? "chevron_left" : "chevron_right"} label={nextMonthLabel} variant="tertiary" onClick={goNext} disabled={nextAtMax} />
             </span>
 
           </div>
@@ -351,7 +414,7 @@ export function Calendar({
 
   return (
     <div
-      className={["a1-calendar", className].filter(Boolean).join(" ")}
+      className={["a1-calendar", selectable && "a1-calendar--selectable", className].filter(Boolean).join(" ")}
       {...props}
     >
       <div className="a1-calendar__inner">

package/src/components/calendar/calendar.css

@@ -110,6 +110,50 @@
   background: var(--semantic-color-surface-raised);
 }
 
+/* ── Selected — full-cell fill (display and selectable modes) ─── */
+
+.a1-calendar__day--selected {
+  background: var(--semantic-color-action-background);
+  color: var(--semantic-color-text-inverse);
+}
+
+/* ── Disabled (out of range) — same surface as past dates ──────── */
+
+.a1-calendar__day--disabled {
+  background: var(--semantic-color-surface-raised);
+}
+
+/* ── Selectable mode (opt-in via selectable prop) ──────────────── */
+
+.a1-calendar--selectable .a1-calendar__day:not(.a1-calendar__day--empty):not(.a1-calendar__day--disabled) {
+  cursor: pointer;
+}
+.a1-calendar--selectable .a1-calendar__day--disabled {
+  cursor: not-allowed;
+}
+
+/* Today — neutral ring instead of action fill (yields to selected) */
+.a1-calendar--selectable .a1-calendar__day--today:not(.a1-calendar__day--selected) {
+  background: transparent;
+  color: var(--semantic-color-text-default);
+}
+.a1-calendar--selectable .a1-calendar__day--today:not(.a1-calendar__day--selected) .a1-calendar__day-number {
+  outline: 2px solid var(--semantic-color-text-default);
+  outline-offset: -1px;
+}
+
+/* Full-cell hover for non-selected, non-disabled days */
+.a1-calendar--selectable .a1-calendar__day:not(.a1-calendar__day--empty):not(.a1-calendar__day--disabled):not(.a1-calendar__day--selected):hover {
+  background: var(--semantic-color-surface-panel);
+  color: var(--semantic-color-text-default);
+}
+
+/* Focus ring */
+.a1-calendar--selectable .a1-calendar__day:focus-visible {
+  outline: var(--component-field-focus-ring-width) solid var(--component-field-focus-ring-color);
+  outline-offset: -2px;
+}
+
 /* ── Paginated variant — nav bar ─────────────────────────── */
 
 .a1-calendar__nav {
@@ -178,6 +222,33 @@
     color: var(--semantic-color-text-inverse);
   }
 
+  /* Selected: revert to circle in narrow view */
+  .a1-calendar__day--selected {
+    background: transparent;
+    color: var(--semantic-color-text-default);
+  }
+  .a1-calendar__day--selected .a1-calendar__day-number {
+    background: var(--semantic-color-action-background);
+    color: var(--semantic-color-text-inverse);
+  }
+
+  /* Selectable: today ring (suppress action-bg circle from non-selectable narrow rule) */
+  .a1-calendar--selectable .a1-calendar__day--today:not(.a1-calendar__day--selected) .a1-calendar__day-number {
+    background: transparent;
+    color: var(--semantic-color-text-default);
+    outline: 2px solid var(--semantic-color-text-default);
+    outline-offset: -1px;
+  }
+
+  /* Selectable: hover as circle in narrow */
+  .a1-calendar--selectable .a1-calendar__day:not(.a1-calendar__day--empty):not(.a1-calendar__day--disabled):not(.a1-calendar__day--selected):hover {
+    background: transparent;
+    color: var(--semantic-color-text-default);
+  }
+  .a1-calendar--selectable .a1-calendar__day:not(.a1-calendar__day--empty):not(.a1-calendar__day--disabled):not(.a1-calendar__day--selected):hover .a1-calendar__day-number {
+    background: var(--semantic-color-surface-panel);
+  }
+
   .a1-calendar__nav {
     padding-block: var(--component-calendar-heading-padding-block-compact);
   }

package/src/components/card/Card.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+export interface CardProps extends React.HTMLAttributes<HTMLElement> {
+  /** Underlying element. Default: "div" */
+  as?: React.ElementType;
+  /** Visual and semantic card variant. Navigation cards make the entire card interactive. Default: "default" */
+  variant?: "default" | "navigation";
+  /** Destination for navigation cards. When `variant="navigation"` is set, the card renders as an anchor by default. */
+  href?: string;
+  /** Remove the card border and background. Default: false */
+  bare?: boolean;
+  /** Material Symbols icon name. Used by `iconDisplay` to render the icon. */
+  icon?: string;
+  /**
+   * Controls how the icon is displayed.
+   * - `"default"` — small tokenised icon block above card content; scales with the card container (sm/md/lg).
+   * - `"hero"` — full-bleed coloured header area at the top of the card.
+   * - `"none"` — icon is not rendered.
+   * Default: `"default"` (when `icon` is provided).
+   */
+  iconDisplay?: "none" | "default" | "hero";
+  /**
+   * Background colour of the hero block when `iconDisplay="hero"`.
+   * Accepts a semantic colour role or any valid CSS colour value.
+   * Default: "action"
+   */
+  heroColor?: "action" | "neutral" | "info" | "success" | "warn" | "error" | (string & {});
+  children?: React.ReactNode;
+}
+
+export declare function Card(props: CardProps): React.ReactElement;

package/src/components/checkbox-group/CheckboxGroup.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+
+export interface CheckboxOption {
+  value: string;
+  label: string;
+  hint?: string;
+  disabled?: boolean;
+}
+
+export interface CheckboxGroupProps {
+  /** 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 checkboxes side by side. Default: false */
+  inline?: boolean;
+  /** Input name attribute shared by all checkboxes */
+  name?: string;
+  /** Array of checkbox options */
+  options?: CheckboxOption[];
+  /** Controlled selected values */
+  value?: string[];
+  /** Default selected values (uncontrolled) */
+  defaultValue?: string[];
+  /** Called with the full updated array of selected values on change */
+  onChange?: (value: string[]) => void;
+  id?: string;
+  className?: string;
+}
+
+export declare function CheckboxGroup(props: CheckboxGroupProps): React.ReactElement;

package/src/components/choice-group/ChoiceGroup.d.ts

@@ -0,0 +1,68 @@
+import * as React from "react";
+
+export interface ChoiceGroupSection {
+  /** Section heading displayed above the section's tiles */
+  label: string;
+  /** Options in this section */
+  options: ChoiceOption[];
+}
+
+export interface ChoiceOption {
+  value: string;
+  label: string;
+  subtext?: string;
+  icon?: string;
+  disabled?: boolean;
+}
+
+export interface ChoiceGroupProps {
+  /** Group legend */
+  label?: string;
+  /** Helper text — hidden when error or success is present */
+  hint?: string;
+  /** Error message */
+  error?: string;
+  /** Success message — shown instead of hint when present, hidden if error is also present */
+  success?: string;
+  /** Tile size density — affects only padding and child element sizes. Default: "default" */
+  size?: "compact" | "default" | "comfortable";
+  /**
+   * Column count. Pass a number for a fixed count at all breakpoints, or a
+   * breakpoint object for responsive behaviour, e.g. `{ xs: 1, sm: 2, md: 3 }`.
+   * Omit (default) for automatic fill based on tile min-width.
+   */
+  columns?: number | Partial<Record<"xs" | "sm" | "md" | "lg" | "xl", number>>;
+  /**
+   * Allow multiple selections (checkbox semantics). When false, only one
+   * option may be selected at a time (radio semantics). Default: false
+   */
+  multiple?: boolean;
+  /**
+   * Place each tile's icon to the left of the label and subtext instead of
+   * above the content block. Has no effect on tiles with no icon. Default: false
+   */
+  inlineIcon?: boolean;
+  required?: boolean;
+  /** Input name attribute. Defaults to the group id. */
+  name?: string;
+  /** Flat list of options. Use sections instead for grouped options with headings. */
+  options?: ChoiceOption[];
+  /**
+   * Options divided into labeled sections with a divider between each group.
+   * When provided, options is ignored.
+   */
+  sections?: ChoiceGroupSection[];
+  /**
+   * Controlled value. String for single-select; string[] for multi-select.
+   * Pass undefined to use uncontrolled mode.
+   */
+  value?: string | string[] | null;
+  /** Default value for uncontrolled mode. Default: null / [] */
+  defaultValue?: string | string[] | null;
+  /** Called with the selected value (string or string[]) on change */
+  onChange?: (value: string | string[]) => void;
+  id?: string;
+  className?: string;
+}
+
+export declare function ChoiceGroup(props: ChoiceGroupProps): React.ReactElement;

package/src/components/circular-progress/CircularProgress.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+
+export interface CircularProgressProps {
+  /**
+   * Current value. Combined with max to compute the filled arc length.
+   * Ignored when indeterminate is true. Default: 0
+   */
+  value?: number;
+  /**
+   * Maximum value. Default: 100
+   */
+  max?: number;
+  /**
+   * Circle diameter. xs renders the smallest ring (no inner content — children
+   * are placed inline after the ring instead). Default: "md"
+   */
+  size?: "xs" | "sm" | "md" | "lg";
+  /**
+   * Shows a continuously rotating arc instead of a value-based fill.
+   * Removes aria-valuenow so assistive technology announces an indeterminate
+   * state. Default: false
+   */
+  indeterminate?: boolean;
+  /**
+   * Content centered inside the ring for sm / md / lg sizes.
+   * For xs, children are rendered inline after the ring.
+   * Always pass aria-label on the root element for an accessible name since
+   * this content receives aria-hidden="true".
+   */
+  children?: React.ReactNode;
+  /** Additional CSS class names applied to the root element. */
+  className?: string;
+}
+
+export declare function CircularProgress(
+  props: CircularProgressProps & React.HTMLAttributes<HTMLDivElement>
+): React.ReactElement;