@govtechsg/sgds-web-component 3.19.0-rc.1 → 3.19.0-rc.3

package/types/react.d.ts

@@ -26,10 +26,10 @@ export {};
 // Helpers
 // ---------------------------------------------------------------------------
 
-type SgdsEventHandler = (event: CustomEvent) => void;
+export type SgdsEventHandler = (event: CustomEvent) => void;
 
 /** Common props shared by every SGDS element */
-interface SgdsBaseProps extends React.HTMLAttributes<HTMLElement>, React.RefAttributes<HTMLElement> {
+export interface SgdsBaseProps extends React.HTMLAttributes<HTMLElement> {
   /** Override the CSS `class` attribute (use `className` in JSX for React) */
   class?: string;
 }
@@ -91,7 +91,7 @@ interface ISgdsSwitchChangeEventDetail {
 
 // ── AccordionItem ─────────────────────────────────────────────────────────────
 
-interface SgdsAccordionItemProps extends SgdsBaseProps {
+export interface SgdsAccordionItemProps extends SgdsBaseProps {
   /** Controls whether accordion-item is open or close */
   open?: boolean;
   /** Disables the accordion item */
@@ -106,7 +106,7 @@ interface SgdsAccordionItemProps extends SgdsBaseProps {
 
 // ── Accordion ─────────────────────────────────────────────────────────────
 
-interface SgdsAccordionProps extends SgdsBaseProps {
+export interface SgdsAccordionProps extends SgdsBaseProps {
   /** Allows multiple accordion items to be opened at the same time */
   allowMultiple?: boolean;
   /** The variant of accordion */
@@ -117,7 +117,7 @@ interface SgdsAccordionProps extends SgdsBaseProps {
 
 // ── AlertLink ─────────────────────────────────────────────────────────────
 
-interface SgdsAlertLinkProps extends SgdsBaseProps {
+export interface SgdsAlertLinkProps extends SgdsBaseProps {
   /** Forwards to href attribute of anchor element */
   href?: string;
   /** Tells the browser where to open the link */
@@ -126,7 +126,7 @@ interface SgdsAlertLinkProps extends SgdsBaseProps {
 
 // ── Alert ─────────────────────────────────────────────────────────────
 
-interface SgdsAlertProps extends SgdsBaseProps {
+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. */
@@ -141,9 +141,70 @@ interface SgdsAlertProps extends SgdsBaseProps {
   "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;
+}
+
+// ── Card ─────────────────────────────────────────────────────────────
+
+export interface SgdsCardProps extends SgdsBaseProps {
+  /** Sets the image position of the card. Available options: `before`, `after` */
+  imagePosition?: CardImagePosition;
+  /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
+  imageAdjustment?: CardImageAdjustment;
+  /** Used only for SSR to indicate the presence of the `image` slot. */
+  hasImageSlot?: boolean;
+  /** Used only for SSR to indicate the presence of the `icon` slot. */
+  hasIconSlot?: boolean;
+  /** Used only for SSR to indicate the presence of the `upper` slot. */
+  hasUpperSlot?: boolean;
+  /** Extends the link passed in either `footer` or `link`(deprecated) slot. */
+  stretchedLink?: boolean;
+  /** Disables the card */
+  disabled?: boolean;
+  /** When true, hides the default border of the card. */
+  hideBorder?: boolean;
+  /** When true, applies a tinted background color to the card. */
+  tinted?: boolean;
+  /** Sets the orientation of the card. Available options: `vertical`, `horizontal` */
+  orientation?: CardOrientation;
+}
+
 // ── Button ─────────────────────────────────────────────────────────────
 
-interface SgdsButtonProps extends SgdsBaseProps {
+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
@@ -191,70 +252,9 @@ value of this attribute must be an id of a form in the same document or shadow r
   "onsgds-focus"?: SgdsEventHandler;
 }
 
-// ── BreadcrumbItem ─────────────────────────────────────────────────────────────
-
-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 ─────────────────────────────────────────────────────────────
-
-interface SgdsBreadcrumbProps extends SgdsBaseProps {
-  /** The aria-label of nav element within breadcrumb component. */
-  ariaLabel?: string;
-}
-
-// ── Card ─────────────────────────────────────────────────────────────
-
-interface SgdsCardProps extends SgdsBaseProps {
-  /** Sets the image position of the card. Available options: `before`, `after` */
-  imagePosition?: CardImagePosition;
-  /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
-  imageAdjustment?: CardImageAdjustment;
-  /** Used only for SSR to indicate the presence of the `image` slot. */
-  hasImageSlot?: boolean;
-  /** Used only for SSR to indicate the presence of the `icon` slot. */
-  hasIconSlot?: boolean;
-  /** Used only for SSR to indicate the presence of the `upper` slot. */
-  hasUpperSlot?: boolean;
-  /** Extends the link passed in either `footer` or `link`(deprecated) slot. */
-  stretchedLink?: boolean;
-  /** Disables the card */
-  disabled?: boolean;
-  /** When true, hides the default border of the card. */
-  hideBorder?: boolean;
-  /** When true, applies a tinted background color to the card. */
-  tinted?: boolean;
-  /** Sets the orientation of the card. Available options: `vertical`, `horizontal` */
-  orientation?: CardOrientation;
-}
-
-// ── Badge ─────────────────────────────────────────────────────────────
-
-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;
-}
-
 // ── CheckboxGroup ─────────────────────────────────────────────────────────────
 
-interface SgdsCheckboxGroupProps extends SgdsBaseProps {
+export interface SgdsCheckboxGroupProps extends SgdsBaseProps {
   /** The checkbox group's label */
   label?: string;
   /** Feedback text for error state when validated */
@@ -283,7 +283,7 @@ interface SgdsCheckboxGroupProps extends SgdsBaseProps {
 
 // ── Checkbox ─────────────────────────────────────────────────────────────
 
-interface SgdsCheckboxProps extends SgdsBaseProps {
+export interface SgdsCheckboxProps extends SgdsBaseProps {
   /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */
   value?: string;
   /** Draws the checkbox in a checked state. */
@@ -321,7 +321,7 @@ interface SgdsCheckboxProps extends SgdsBaseProps {
 
 // ── CloseButton ─────────────────────────────────────────────────────────────
 
-interface SgdsCloseButtonProps extends SgdsBaseProps {
+export interface SgdsCloseButtonProps extends SgdsBaseProps {
   /** Specifies a large or small button */
   size?: "sm" | "md";
   /** The tone of the close button */
@@ -330,7 +330,7 @@ interface SgdsCloseButtonProps extends SgdsBaseProps {
 
 // ── ComboBoxOption ─────────────────────────────────────────────────────────────
 
-interface SgdsComboBoxOptionProps extends SgdsBaseProps {
+export interface SgdsComboBoxOptionProps extends SgdsBaseProps {
   /** Disables the Item */
   disabled?: boolean;
   /** The value of the option item */
@@ -339,7 +339,7 @@ interface SgdsComboBoxOptionProps extends SgdsBaseProps {
 
 // ── ComboBox ─────────────────────────────────────────────────────────────
 
-interface SgdsComboBoxProps extends SgdsBaseProps {
+export interface SgdsComboBoxProps extends SgdsBaseProps {
   /** If true, renders multiple checkbox selection items. If false, single-select. */
   multiSelect?: boolean;
   /** If true, renders badge that fills width of combobox */
@@ -413,7 +413,7 @@ value: string;
 
 // ── Datepicker ─────────────────────────────────────────────────────────────
 
-interface SgdsDatepickerProps extends SgdsBaseProps {
+export interface SgdsDatepickerProps extends SgdsBaseProps {
   /** When true, adds required attribute to input element */
   required?: boolean;
   /** The datepicker input's name attribute */
@@ -470,7 +470,7 @@ range mode as array of string. eg.'["22/12/2023"]' for single &
 
 // ── DescriptionListGroup ─────────────────────────────────────────────────────────────
 
-interface SgdsDescriptionListGroupProps extends SgdsBaseProps {
+export interface SgdsDescriptionListGroupProps extends SgdsBaseProps {
   /** When true, adds a border around the entire group. */
   bordered?: boolean;
   /** When true, the description lists are displayed in a stacked layout. */
@@ -483,7 +483,7 @@ interface SgdsDescriptionListGroupProps extends SgdsBaseProps {
 
 // ── DescriptionList ─────────────────────────────────────────────────────────────
 
-interface SgdsDescriptionListProps extends SgdsBaseProps {
+export interface SgdsDescriptionListProps extends SgdsBaseProps {
   /** Makes the label and the data stacked */
   stacked?: boolean;
   /** Changes the border bottom styles for bordered description list group */
@@ -492,7 +492,7 @@ interface SgdsDescriptionListProps extends SgdsBaseProps {
 
 // ── Divider ─────────────────────────────────────────────────────────────
 
-interface SgdsDividerProps extends SgdsBaseProps {
+export interface SgdsDividerProps extends SgdsBaseProps {
   /** Sets the orientation of divider to vertical. Defaults to horizontal */
   orientation?: "horizontal" | "vertical";
   /** Sets the orientation of divider to vertical. Defaults to false */
@@ -501,7 +501,7 @@ interface SgdsDividerProps extends SgdsBaseProps {
 
 // ── Drawer ─────────────────────────────────────────────────────────────
 
-interface SgdsDrawerProps extends SgdsBaseProps {
+export interface SgdsDrawerProps extends SgdsBaseProps {
   /** Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can
 use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state. */
   open?: boolean;
@@ -525,7 +525,7 @@ its parent element, set this attribute and add `position: relative` to the paren
 
 // ── DropdownItem ─────────────────────────────────────────────────────────────
 
-interface SgdsDropdownItemProps extends SgdsBaseProps {
+export interface SgdsDropdownItemProps extends SgdsBaseProps {
   /** when true, sets the active stylings of dropdown item */
   active?: boolean;
   /** Disables the SgdsMainnavItem */
@@ -534,7 +534,7 @@ interface SgdsDropdownItemProps extends SgdsBaseProps {
 
 // ── Dropdown ─────────────────────────────────────────────────────────────
 
-interface SgdsDropdownProps extends SgdsBaseProps {
+export interface SgdsDropdownProps extends SgdsBaseProps {
   /** Controls auto-flipping of menu */
   noFlip?: boolean;
   /** When true, aligns right edge of menu with right edge of button */
@@ -559,7 +559,7 @@ interface SgdsDropdownProps extends SgdsBaseProps {
 
 // ── FileUpload ─────────────────────────────────────────────────────────────
 
-interface SgdsFileUploadProps extends SgdsBaseProps {
+export interface SgdsFileUploadProps extends SgdsBaseProps {
   /** Allows multiple files to be listed for uploading */
   multiple?: boolean;
   /** Specify the acceptable file type */
@@ -591,12 +591,12 @@ interface SgdsFileUploadProps extends SgdsBaseProps {
 
 // ── FooterItem ─────────────────────────────────────────────────────────────
 
-interface SgdsFooterItemProps extends SgdsBaseProps {
+export interface SgdsFooterItemProps extends SgdsBaseProps {
 }
 
 // ── Footer ─────────────────────────────────────────────────────────────
 
-interface SgdsFooterProps extends SgdsBaseProps {
+export interface SgdsFooterProps extends SgdsBaseProps {
   /** Sets copyrightLiner of SgdsFooter */
   copyrightLiner?: string;
   /** href link for contacts */
@@ -623,7 +623,7 @@ interface SgdsFooterProps extends SgdsBaseProps {
 
 // ── Icon ─────────────────────────────────────────────────────────────
 
-interface SgdsIconProps extends SgdsBaseProps {
+export interface SgdsIconProps extends SgdsBaseProps {
   /** The name of the icon from sgds icon library */
   name?: string;
   /** Specifies a small, medium or large icon, the size is medium by default. */
@@ -632,7 +632,7 @@ interface SgdsIconProps extends SgdsBaseProps {
 
 // ── IconButton ─────────────────────────────────────────────────────────────
 
-interface SgdsIconButtonProps extends SgdsBaseProps {
+export interface SgdsIconButtonProps extends SgdsBaseProps {
   /** The name of the icon from sgds icon library */
   name?: string;
   /** Sets the visual variants such as: `primary`, `outline`, `ghost`. `danger` is @deprecated since v3.5.6 */
@@ -661,7 +661,7 @@ interface SgdsIconButtonProps extends SgdsBaseProps {
 
 // ── IconCard ─────────────────────────────────────────────────────────────
 
-interface SgdsIconCardProps extends SgdsBaseProps {
+export interface SgdsIconCardProps extends SgdsBaseProps {
   /** Removes the card's internal padding when set to true. */
   noPadding?: boolean;
   /** Extends the link passed in either `footer` or `link`(deprecated) slot. */
@@ -678,7 +678,7 @@ interface SgdsIconCardProps extends SgdsBaseProps {
 
 // ── IconList ─────────────────────────────────────────────────────────────
 
-interface SgdsIconListProps extends SgdsBaseProps {
+export interface SgdsIconListProps extends SgdsBaseProps {
   /** Sets the aria-role of the sgds-icon-list */
   role?: string;
   /** The size of icon list. Changes the font-size the list items */
@@ -687,7 +687,7 @@ interface SgdsIconListProps extends SgdsBaseProps {
 
 // ── ImageCard ─────────────────────────────────────────────────────────────
 
-interface SgdsImageCardProps extends SgdsBaseProps {
+export interface SgdsImageCardProps extends SgdsBaseProps {
   /** Removes the card's internal padding when set to true. */
   noPadding?: boolean;
   /** Sets the image position of the card. Available options: `before`, `after` */
@@ -708,7 +708,7 @@ interface SgdsImageCardProps extends SgdsBaseProps {
 
 // ── Input ─────────────────────────────────────────────────────────────
 
-interface SgdsInputProps extends SgdsBaseProps {
+export interface SgdsInputProps extends SgdsBaseProps {
   type?: | "email"
     | "number"
     | "password"
@@ -781,7 +781,7 @@ implied, allowing any numeric value. Only applies to number input types. */
 
 // ── Link ─────────────────────────────────────────────────────────────
 
-interface SgdsLinkProps extends SgdsBaseProps {
+export interface SgdsLinkProps extends SgdsBaseProps {
   /** Determines the size of the link */
   size?: "xs" | "sm" | "md" | "lg";
   /** Sets the colour of the link @deprecated since 3.6.0 */
@@ -796,7 +796,7 @@ interface SgdsLinkProps extends SgdsBaseProps {
 
 // ── MainnavDropdown ─────────────────────────────────────────────────────────────
 
-interface SgdsMainnavDropdownProps extends SgdsBaseProps {
+export interface SgdsMainnavDropdownProps extends SgdsBaseProps {
   /** When true,  applies active styles on the dropdown button */
   active?: boolean;
   /** When true,  applies active styles on the dropdown button */
@@ -805,7 +805,7 @@ interface SgdsMainnavDropdownProps extends SgdsBaseProps {
 
 // ── MainnavItem ─────────────────────────────────────────────────────────────
 
-interface SgdsMainnavItemProps extends SgdsBaseProps {
+export interface SgdsMainnavItemProps extends SgdsBaseProps {
   /** when true, sets the active stylings of the navigation item */
   active?: boolean;
   /** Disables the SgdsMainnavItem */
@@ -814,7 +814,7 @@ interface SgdsMainnavItemProps extends SgdsBaseProps {
 
 // ── Mainnav ─────────────────────────────────────────────────────────────
 
-interface SgdsMainnavProps extends SgdsBaseProps {
+export interface SgdsMainnavProps extends SgdsBaseProps {
   /** Used only for SSR to indicate the presence of the `non-collapsible` slot. */
   hasNonCollapsibleSlot?: boolean;
   /** The href link for brand logo */
@@ -831,14 +831,14 @@ interface SgdsMainnavProps extends SgdsBaseProps {
 
 // ── Masthead ─────────────────────────────────────────────────────────────
 
-interface SgdsMastheadProps extends SgdsBaseProps {
+export interface SgdsMastheadProps extends SgdsBaseProps {
   /** When true, removes max-width constraint to allow content to stretch full screen width */
   fluid?: boolean;
 }
 
 // ── Modal ─────────────────────────────────────────────────────────────
 
-interface SgdsModalProps extends SgdsBaseProps {
+export interface SgdsModalProps extends SgdsBaseProps {
   /** Indicates whether or not the modal is open. You can use this in lieu of the show/hide methods. */
   open?: boolean;
   /** Removes the default animation when opening and closing of modal */
@@ -858,14 +858,14 @@ interface SgdsModalProps extends SgdsBaseProps {
 
 // ── OverflowMenu ─────────────────────────────────────────────────────────────
 
-interface SgdsOverflowMenuProps extends SgdsBaseProps {
+export interface SgdsOverflowMenuProps extends SgdsBaseProps {
   /** Specifies a large or small button */
   size?: "sm" | "md";
 }
 
 // ── Pagination ─────────────────────────────────────────────────────────────
 
-interface SgdsPaginationProps extends SgdsBaseProps {
+export interface SgdsPaginationProps extends SgdsBaseProps {
   /** Inserts the length value from a given sets of data objects */
   dataLength?: number;
   /** Sets the starting active page upon render */
@@ -883,7 +883,7 @@ interface SgdsPaginationProps extends SgdsBaseProps {
 
 // ── ProgressBar ─────────────────────────────────────────────────────────────
 
-interface SgdsProgressBarProps extends SgdsBaseProps {
+export interface SgdsProgressBarProps extends SgdsBaseProps {
   /** The background color of the progress bar. Available options: `primary`, `neutral` */
   variant?: "primary" | "neutral";
   /** The current progress as a percentage, from 0 to 100. */
@@ -904,7 +904,7 @@ The aria-valuemax attribute defines the maximum allowed value for a range widget
 
 // ── QuantityToggle ─────────────────────────────────────────────────────────────
 
-interface SgdsQuantityToggleProps extends SgdsBaseProps {
+export interface SgdsQuantityToggleProps extends SgdsBaseProps {
   /** The input's value. Set to 0 by default */
   value?: number;
   /** Controls the incremental / decremental value of the input */
@@ -941,7 +941,7 @@ interface SgdsQuantityToggleProps extends SgdsBaseProps {
 
 // ── RadioGroup ─────────────────────────────────────────────────────────────
 
-interface SgdsRadioGroupProps extends SgdsBaseProps {
+export interface SgdsRadioGroupProps extends SgdsBaseProps {
   /** The selected value of the control. */
   value?: string;
   /** Feedback text for error state when validated */
@@ -971,7 +971,7 @@ interface SgdsRadioGroupProps extends SgdsBaseProps {
 
 // ── Radio ─────────────────────────────────────────────────────────────
 
-interface SgdsRadioProps extends SgdsBaseProps {
+export interface SgdsRadioProps extends SgdsBaseProps {
   /** Draws the radio in a checked state. When used with SgdsRadioGroup, the value prop of SgdsRadioGroup overrides the checked prop */
   checked?: boolean;
   /** The radio's value attribute. */
@@ -988,7 +988,7 @@ interface SgdsRadioProps extends SgdsBaseProps {
 
 // ── SelectOption ─────────────────────────────────────────────────────────────
 
-interface SgdsSelectOptionProps extends SgdsBaseProps {
+export interface SgdsSelectOptionProps extends SgdsBaseProps {
   /** Disables the Item */
   disabled?: boolean;
   /** The value of the option item */
@@ -997,7 +997,7 @@ interface SgdsSelectOptionProps extends SgdsBaseProps {
 
 // ── Select ─────────────────────────────────────────────────────────────
 
-interface SgdsSelectProps extends SgdsBaseProps {
+export interface SgdsSelectProps extends SgdsBaseProps {
   /** The input's label */
   label?: string;
   /** The input's hint text below the label */
@@ -1054,7 +1054,7 @@ value: string;
 
 // ── SidebarGroup ─────────────────────────────────────────────────────────────
 
-interface SgdsSidebarGroupProps extends SgdsBaseProps {
+export interface SgdsSidebarGroupProps extends SgdsBaseProps {
   /** Reports the visibility state of the submenu for nested groups.
 Returns true when the submenu is displayed showing child items, false when hidden.
 Only applicable for nested groups (level 2+). Root-level groups use drawer overlay instead. */
@@ -1070,7 +1070,7 @@ Should be unique among siblings in the same navigation level. */
 
 // ── SidebarItem ─────────────────────────────────────────────────────────────
 
-interface SgdsSidebarItemProps extends SgdsBaseProps {
+export interface SgdsSidebarItemProps extends SgdsBaseProps {
   /** The display title/label for the sidebar element.
 Shown in the UI and used for accessibility labels (aria-label). */
   title?: string;
@@ -1082,7 +1082,7 @@ Should be unique among siblings in the same navigation level. */
 
 // ── SidebarSection ─────────────────────────────────────────────────────────────
 
-interface SgdsSidebarSectionProps extends SgdsBaseProps {
+export interface SgdsSidebarSectionProps extends SgdsBaseProps {
   /** The display title/label for the sidebar section header.
 Always visible in the sidebar, used to group related items. */
   title?: string;
@@ -1104,7 +1104,7 @@ Should be unique among siblings in the same navigation level. */
 
 // ── Sidebar ─────────────────────────────────────────────────────────────
 
-interface SgdsSidebarProps extends SgdsBaseProps {
+export interface SgdsSidebarProps extends SgdsBaseProps {
   /** Controls whether the sidebar is collapsed or expanded to save screen space.
 When true, sidebar displays icon-only mode for root items. When false, full labels and content are shown.
 On mobile devices (width <= 576px), this is automatically toggled based on screen size.
@@ -1133,7 +1133,7 @@ Override when your page uses a more specific term (e.g. `"Dashboard navigation"`
 
 // ── SidenavItem ─────────────────────────────────────────────────────────────
 
-interface SgdsSidenavItemProps extends SgdsBaseProps {
+export interface SgdsSidenavItemProps extends SgdsBaseProps {
   body?: HTMLElement;
   /** when true, toggles the sidenav-item to open on first load and set the active stylings. */
   active?: boolean;
@@ -1148,7 +1148,7 @@ interface SgdsSidenavItemProps extends SgdsBaseProps {
 
 // ── SidenavLink ─────────────────────────────────────────────────────────────
 
-interface SgdsSidenavLinkProps extends SgdsBaseProps {
+export interface SgdsSidenavLinkProps extends SgdsBaseProps {
   /** when true, sets the active stylings of .nav-link */
   active?: boolean;
   /** Disables the SgdsMainnavItem */
@@ -1157,14 +1157,14 @@ interface SgdsSidenavLinkProps extends SgdsBaseProps {
 
 // ── Sidenav ─────────────────────────────────────────────────────────────
 
-interface SgdsSidenavProps extends SgdsBaseProps {
+export interface SgdsSidenavProps extends SgdsBaseProps {
   /** Apply position sticky to the sidenav */
   sticky?: boolean;
 }
 
 // ── Skeleton ─────────────────────────────────────────────────────────────
 
-interface SgdsSkeletonProps extends SgdsBaseProps {
+export interface SgdsSkeletonProps extends SgdsBaseProps {
   /** Sets the width of skeleton. Pass value in string with length units like pixels or percentage. */
   width?: string;
   /** Sets the height of skeleton. Pass value in string with length units like pixels or percentage. */
@@ -1182,7 +1182,7 @@ taking into account that there is a gap set by root css variable `--sgds-gap-xs`
 
 // ── Spinner ─────────────────────────────────────────────────────────────
 
-interface SgdsSpinnerProps extends SgdsBaseProps {
+export interface SgdsSpinnerProps extends SgdsBaseProps {
   /** The variant of spinner. Deprecated in favor of `tone` @deprecated */
   variant?: "primary" | "neutral";
   /** The color tones of spinner, replaces variant prop */
@@ -1197,7 +1197,7 @@ interface SgdsSpinnerProps extends SgdsBaseProps {
 
 // ── Step ─────────────────────────────────────────────────────────────
 
-interface SgdsStepProps extends SgdsBaseProps {
+export interface SgdsStepProps extends SgdsBaseProps {
   /** The header text for the step */
   stepHeader?: string;
   /** Optional icon name to display instead of step number */
@@ -1208,7 +1208,7 @@ interface SgdsStepProps extends SgdsBaseProps {
 
 // ── Stepper ─────────────────────────────────────────────────────────────
 
-interface SgdsStepperProps extends SgdsBaseProps {
+export interface SgdsStepperProps extends SgdsBaseProps {
   /** The metadata of stepper, type `IStepMetaData`. Deprecated: use sgds-step child components instead. */
   steps?: IStepMetaData[];
   /** The current state of active step. Defaults to 0 */
@@ -1229,7 +1229,7 @@ interface SgdsStepperProps extends SgdsBaseProps {
 
 // ── SubnavItem ─────────────────────────────────────────────────────────────
 
-interface SgdsSubnavItemProps extends SgdsBaseProps {
+export interface SgdsSubnavItemProps extends SgdsBaseProps {
   /** when true, sets the active stylings of the navigation item */
   active?: boolean;
   /** Disables the SgdsSubnavItem */
@@ -1238,7 +1238,7 @@ interface SgdsSubnavItemProps extends SgdsBaseProps {
 
 // ── Subnav ─────────────────────────────────────────────────────────────
 
-interface SgdsSubnavProps extends SgdsBaseProps {
+export interface SgdsSubnavProps extends SgdsBaseProps {
   /** Used only for SSR to indicate the presence of the `actions` slot. */
   hasActionsSlot?: boolean;
   "onsgds-show"?: SgdsEventHandler;
@@ -1249,7 +1249,7 @@ interface SgdsSubnavProps extends SgdsBaseProps {
 
 // ── Switch ─────────────────────────────────────────────────────────────
 
-interface SgdsSwitchProps extends SgdsBaseProps {
+export interface SgdsSwitchProps extends SgdsBaseProps {
   /** The size of the switch. By default, it is small size */
   size?: "sm" | "md" | "lg";
   /** When enabled, icon appears in the switch */
@@ -1267,7 +1267,7 @@ interface SgdsSwitchProps extends SgdsBaseProps {
 
 // ── SystemBannerItem ─────────────────────────────────────────────────────────────
 
-interface SgdsSystemBannerItemProps extends SgdsBaseProps {
+export interface SgdsSystemBannerItemProps extends SgdsBaseProps {
   /** Used only for SSR to indicate the presence of the `action` slot. */
   hasActionSlot?: boolean;
   /** Disables the action link that appears when text content is clamped */
@@ -1277,7 +1277,7 @@ interface SgdsSystemBannerItemProps extends SgdsBaseProps {
 
 // ── SystemBanner ─────────────────────────────────────────────────────────────
 
-interface SgdsSystemBannerProps extends SgdsBaseProps {
+export interface SgdsSystemBannerProps extends SgdsBaseProps {
   /** Controls the appearance of the alert */
   show?: boolean;
   /** Enables a close button that allows the user to dismiss the alert. */
@@ -1292,7 +1292,7 @@ interface SgdsSystemBannerProps extends SgdsBaseProps {
 
 // ── TabGroup ─────────────────────────────────────────────────────────────
 
-interface SgdsTabGroupProps extends SgdsBaseProps {
+export interface SgdsTabGroupProps extends SgdsBaseProps {
   /** The variant of tabs. Controls the visual styles of all `sgds-tabs` in its slot. It also sets the variant atttribute of `sgds-tab` */
   variant?: "underlined" | "solid";
   /** The orientation of tabs. Controls the orientation of all `sgds-tabs` in its slot. It also sets the orientation attribute of `sgds-tab` */
@@ -1305,7 +1305,7 @@ interface SgdsTabGroupProps extends SgdsBaseProps {
 
 // ── TabPanel ─────────────────────────────────────────────────────────────
 
-interface SgdsTabPanelProps extends SgdsBaseProps {
+export interface SgdsTabPanelProps extends SgdsBaseProps {
   /** The tab panel's name. */
   name?: string;
   /** When true, the tab panel will be shown. When used with tab-group, this property is already being managed */
@@ -1314,7 +1314,7 @@ interface SgdsTabPanelProps extends SgdsBaseProps {
 
 // ── Tab ─────────────────────────────────────────────────────────────
 
-interface SgdsTabProps extends SgdsBaseProps {
+export interface SgdsTabProps extends SgdsBaseProps {
   /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */
   panel?: string;
   /** Draws the tab in an active state. When used with tab group, this state is already managed. Use it to set the initial active tab on first load of page */
@@ -1325,22 +1325,22 @@ interface SgdsTabProps extends SgdsBaseProps {
 
 // ── TableCell ─────────────────────────────────────────────────────────────
 
-interface SgdsTableCellProps extends SgdsBaseProps {
+export interface SgdsTableCellProps extends SgdsBaseProps {
 }
 
 // ── TableHead ─────────────────────────────────────────────────────────────
 
-interface SgdsTableHeadProps extends SgdsBaseProps {
+export interface SgdsTableHeadProps extends SgdsBaseProps {
 }
 
 // ── TableRow ─────────────────────────────────────────────────────────────
 
-interface SgdsTableRowProps extends SgdsBaseProps {
+export interface SgdsTableRowProps extends SgdsBaseProps {
 }
 
 // ── Table ─────────────────────────────────────────────────────────────
 
-interface SgdsTableProps extends SgdsBaseProps {
+export interface SgdsTableProps extends SgdsBaseProps {
   /** Specifies the responsive breakpoint for the table.
 Use "sm", "md", "lg", or "xl" to create responsive tables up to a particular breakpoint.
 From that breakpoint and up, the table will behave normally and not scroll horizontally.
@@ -1369,12 +1369,12 @@ When true, displays visible borders between all table cells. */
 
 // ── TableOfContents ─────────────────────────────────────────────────────────────
 
-interface SgdsTableOfContentsProps extends SgdsBaseProps {
+export interface SgdsTableOfContentsProps extends SgdsBaseProps {
 }
 
 // ── Textarea ─────────────────────────────────────────────────────────────
 
-interface SgdsTextareaProps extends SgdsBaseProps {
+export interface SgdsTextareaProps extends SgdsBaseProps {
   /** The textarea's name attribute */
   name?: string;
   /** The textarea's value attribute. */
@@ -1436,7 +1436,7 @@ interface SgdsTextareaProps extends SgdsBaseProps {
 
 // ── ThumbnailCard ─────────────────────────────────────────────────────────────
 
-interface SgdsThumbnailCardProps extends SgdsBaseProps {
+export interface SgdsThumbnailCardProps extends SgdsBaseProps {
   /** Removes the card's internal padding when set to true. */
   noPadding?: boolean;
   /** Extends the link passed in either `footer` or `link`(deprecated) slot. */
@@ -1453,7 +1453,7 @@ interface SgdsThumbnailCardProps extends SgdsBaseProps {
 
 // ── ToastContainer ─────────────────────────────────────────────────────────────
 
-interface SgdsToastContainerProps extends SgdsBaseProps {
+export interface SgdsToastContainerProps extends SgdsBaseProps {
   /** Controls the position of `sgds-toast` within itself.
 Since 3.7.1, the positions "top-start", "middle-start", "middle-center", and "middle-end" are deprecated. */
   position?: "top-start" | "top-center" | "top-end" | "middle-start" | "middle-center" | "middle-end" | "bottom-start" | "bottom-center" | "bottom-end";
@@ -1461,7 +1461,7 @@ Since 3.7.1, the positions "top-start", "middle-start", "middle-center", and "mi
 
 // ── Toast ─────────────────────────────────────────────────────────────
 
-interface SgdsToastProps extends SgdsBaseProps {
+export interface SgdsToastProps extends SgdsBaseProps {
   /** Controls the appearance of toast */
   show?: boolean;
   /** The header title of toast. It is required to assign a title to toast */
@@ -1484,7 +1484,7 @@ interface SgdsToastProps extends SgdsBaseProps {
 
 // ── Tooltip ─────────────────────────────────────────────────────────────
 
-interface SgdsTooltipProps extends SgdsBaseProps {
+export interface SgdsTooltipProps extends SgdsBaseProps {
   /** The tooltip's content. Must be text */
   content?: string;
   /** The placement of tooltip relative to its target */
@@ -1508,11 +1508,11 @@ declare module "react" {
       "sgds-accordion": SgdsAccordionProps;
       "sgds-alert-link": SgdsAlertLinkProps;
       "sgds-alert": SgdsAlertProps;
-      "sgds-button": SgdsButtonProps;
+      "sgds-badge": SgdsBadgeProps;
       "sgds-breadcrumb-item": SgdsBreadcrumbItemProps;
       "sgds-breadcrumb": SgdsBreadcrumbProps;
       "sgds-card": SgdsCardProps;
-      "sgds-badge": SgdsBadgeProps;
+      "sgds-button": SgdsButtonProps;
       "sgds-checkbox-group": SgdsCheckboxGroupProps;
       "sgds-checkbox": SgdsCheckboxProps;
       "sgds-close-button": SgdsCloseButtonProps;
@@ -1591,11 +1591,11 @@ declare global {
     "sgds-accordion": HTMLElement;
     "sgds-alert-link": HTMLElement;
     "sgds-alert": HTMLElement;
-    "sgds-button": HTMLElement;
+    "sgds-badge": HTMLElement;
     "sgds-breadcrumb-item": HTMLElement;
     "sgds-breadcrumb": HTMLElement;
     "sgds-card": HTMLElement;
-    "sgds-badge": HTMLElement;
+    "sgds-button": HTMLElement;
     "sgds-checkbox-group": HTMLElement;
     "sgds-checkbox": HTMLElement;
     "sgds-close-button": HTMLElement;