/** * SGDS Web Components – React TypeScript Type Definitions * * Auto-generated by scripts/generateSgdsTypes.mjs — do not edit by hand. * * Provides typed JSX intrinsic elements for all `sgds-*` custom elements so * that React and Next.js TypeScript projects get IntelliSense and type-safety * without importing the full library at runtime. * * Usage – add ONE of the following to your project's `types.d.ts`: * * // Triple-slash reference (works in any tsconfig): * /// * * // ES import (tsconfig must include this file via `include` or `typeRoots`): * import "@govtechsg/sgds-web-component/sgds-types"; * * Custom event handlers use the lowercase kebab-case `onsgds-*` form — * React 19 maps these directly to native addEventListener calls: * */ export {}; // --------------------------------------------------------------------------- // Helpers // --------------------------------------------------------------------------- export type SgdsEventHandler = (event: CustomEvent) => void; /** Common props shared by every SGDS element */ export interface SgdsBaseProps extends React.HTMLAttributes { /** Override the CSS `class` attribute (use `className` in JSX for React) */ class?: string; } // --------------------------------------------------------------------------- // Event detail interfaces (from per-component types.d.ts) // --------------------------------------------------------------------------- // ── Card ───────────────────────────────────────────────────────────── type CardImageAdjustment = "default" | "padding around" | "aspect ratio"; type CardImagePosition = "before" | "after"; type CardOrientation = "vertical" | "horizontal"; // ── ComboBox ───────────────────────────────────────────────────────────── interface ISgdsComboBoxInputEventDetail { displayValue: string; } // ── Datepicker ───────────────────────────────────────────────────────────── type ViewEnum = "days" | "months" | "years"; // ── FileUpload ───────────────────────────────────────────────────────────── type ISgdsFileUploadAddFilesEventDetail = FileList; type ISgdsFileUploadChangeEventDetail = FileList; type ISgdsFileUploadFilesSelectedEventDetail = FileList; interface ISgdsFileUploadRemoveFileEventDetail { file: File; files: FileList; } // ── Pagination ───────────────────────────────────────────────────────────── interface ISgdsPaginationPageChangeEventDetail { currentPage: number; } // ── Radio ───────────────────────────────────────────────────────────── interface ISgdsRadioGroupChangeEventDetail { value: string; } // ── Stepper ───────────────────────────────────────────────────────────── interface IStepMetaData { component: unknown; stepHeader: string; iconName?: string; isCompleted?: boolean; } // ── Switch ───────────────────────────────────────────────────────────── interface ISgdsSwitchChangeEventDetail { checked: boolean; } // --------------------------------------------------------------------------- // Component prop interfaces // --------------------------------------------------------------------------- // ── AccordionItem ───────────────────────────────────────────────────────────── export interface SgdsAccordionItemProps extends SgdsBaseProps { /** Controls whether accordion-item is open or close */ open?: boolean; /** Disables the accordion item */ disabled?: boolean; /** Controls the density of the individual accordion item. This value is controlled by sgds-accordion */ density?: AccordionDensity; /** The aria-label attribute forwarded to the accordion item button. */ ariaLabel?: string; "onsgds-show"?: SgdsEventHandler; "onsgds-after-show"?: SgdsEventHandler; "onsgds-hide"?: SgdsEventHandler; "onsgds-after-hide"?: SgdsEventHandler; } // ── Accordion ───────────────────────────────────────────────────────────── export interface SgdsAccordionProps extends SgdsBaseProps { /** Allows multiple accordion items to be opened at the same time */ allowMultiple?: boolean; /** The variant of accordion */ variant?: "default" | "border"; /** The density of accordion */ density?: "default" | "compact" | "spacious"; } // ── AlertLink ───────────────────────────────────────────────────────────── export interface SgdsAlertLinkProps extends SgdsBaseProps { /** Forwards to href attribute of anchor element */ href?: string; /** Tells the browser where to open the link */ target?: "_blank" | "_parent" | "_self" | "_top"; } // ── Alert ───────────────────────────────────────────────────────────── export interface SgdsAlertProps extends SgdsBaseProps { /** Controls the appearance of the alert */ show?: boolean; /** Enables a close button that allows the user to dismiss the alert. */ dismissible?: boolean; /** The alert's theme variant. */ variant?: "info" | "success" | "danger" | "warning" | "neutral"; /** Controls the alert visual between a lighter outline and a solid darker variant. */ outlined?: boolean; /** The title of the alert. Only text is allowed */ title?: string; "onsgds-show"?: SgdsEventHandler; "onsgds-hide"?: SgdsEventHandler; } // ── Badge ───────────────────────────────────────────────────────────── export interface SgdsBadgeProps extends SgdsBaseProps { /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true */ show?: boolean; /** One or more badge variant combinations. Variants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `purple`, `neutral`, `white`, `info`. (@deprecated) The `info` variant is deprecated. Use `primary` instead. */ variant?: "primary" | "accent" | "success" | "danger" | "warning" | "cyan" | "purple" | "neutral" | "white" | "info"; /** Manually set the outlined state to false */ outlined?: boolean; /** Manually set the dismissible state of the button to `false` */ dismissible?: boolean; /** Manually enable full width */ fullWidth?: boolean; "onsgds-show"?: SgdsEventHandler; "onsgds-hide"?: SgdsEventHandler; "onsgds-after-show"?: SgdsEventHandler; "onsgds-after-hide"?: SgdsEventHandler; } // ── BreadcrumbItem ───────────────────────────────────────────────────────────── export interface SgdsBreadcrumbItemProps extends SgdsBaseProps { /** Indicates the link matches the current location of the page. Programmatically handled by SgdsBreadcrumb to set this prop to true for the last breadcrumb item */ active?: boolean; } // ── Breadcrumb ───────────────────────────────────────────────────────────── export interface SgdsBreadcrumbProps extends SgdsBaseProps { /** The aria-label of nav element within breadcrumb component. */ ariaLabel?: string; } // ── Button ───────────────────────────────────────────────────────────── export interface SgdsButtonProps extends SgdsBaseProps { /** The behavior of the button with default as `type='button', `reset` resets all the controls to their initial values and `submit` submits the form data to the server */ type?: "button" | "submit" | "reset"; /** The "form owner" to associate the button with. If omitted, the closest containing form will be used instead. The value of this attribute must be an id of a form in the same document or shadow root as the button. */ form?: string; /** Used to override the form owner's `action` attribute. */ formAction?: string; /** Used to override the form owner's `method` attribute. */ formMethod?: "post" | "get"; /** Used to override the form owner's `novalidate` attribute. */ formNoValidate?: boolean; /** Used to override the form owner's `target` attribute. */ formTarget?: | "_self" | "_blank" | "_parent" | "_top" | string; /** When set, the button will be in full width. */ fullWidth?: boolean; /** Used only for SSR to indicate the presence of the `leftIcon` slot. */ hasLeftIconSlot?: boolean; /** Used only for SSR to indicate the presence of the `rightIcon` slot. */ hasRightIconSlot?: boolean; /** Sets the visual variants such as: `primary`, `outline`, `ghost`. `danger` is @deprecated since v3.5.6 */ variant?: "primary" | "outline" | "ghost" | "danger"; /** Sets the visual colour of the button: `brand`, `danger`, `fixed-light`, `neutral` */ tone?: "brand" | "danger" | "fixed-light" | "neutral"; /** Specifies a small, medium or large button, the size is medium by default. */ size?: "xs" | "sm" | "md" | "lg"; /** Manually set the visual state of the button to `:active` */ active?: boolean; /** The disabled state of the button */ disabled?: boolean; /** When set, the underlying button will be rendered as an `` with this `href` instead of a `