@govtechsg/sgds-web-component 3.24.1-rc.2 → 3.24.1-rc.3

package/react/index.d.ts

@@ -3,10 +3,10 @@ export { default as SgdsAccordion } from './accordion';
 export { default as SgdsAlertLink } from './alert-link';
 export { default as SgdsAlert } from './alert';
 export { default as SgdsBadge } from './badge';
-export { default as SgdsButton } from './button';
-export { default as SgdsCard } from './card';
 export { default as SgdsBreadcrumbItem } from './breadcrumb-item';
 export { default as SgdsBreadcrumb } from './breadcrumb';
+export { default as SgdsButton } from './button';
+export { default as SgdsCard } from './card';
 export { default as SgdsCheckboxGroup } from './checkbox-group';
 export { default as SgdsCheckbox } from './checkbox';
 export { default as SgdsCloseButton } from './close-button';
@@ -19,7 +19,6 @@ export { default as SgdsDataTable } from './data-table';
 export { default as SgdsDatepicker } from './datepicker';
 export { default as SgdsDescriptionListGroup } from './description-list-group';
 export { default as SgdsDescriptionList } from './description-list';
-export { default as SgdsDivider } from './divider';
 export { default as SgdsDrawer } from './drawer';
 export { default as SgdsDropdownItem } from './dropdown-item';
 export { default as SgdsDropdown } from './dropdown';
@@ -28,6 +27,7 @@ export { default as SgdsFooterItem } from './footer-item';
 export { default as SgdsFooter } from './footer';
 export { default as SgdsIcon } from './icon';
 export { default as SgdsIconButton } from './icon-button';
+export { default as SgdsDivider } from './divider';
 export { default as SgdsIconCard } from './icon-card';
 export { default as SgdsIconList } from './icon-list';
 export { default as SgdsImageCard } from './image-card';

package/react/index.js

@@ -4,10 +4,10 @@ export { default as SgdsAccordion } from './accordion/index.js';
 export { default as SgdsAlertLink } from './alert-link/index.js';
 export { default as SgdsAlert } from './alert/index.js';
 export { default as SgdsBadge } from './badge/index.js';
-export { default as SgdsButton } from './button/index.js';
-export { default as SgdsCard } from './card/index.js';
 export { default as SgdsBreadcrumbItem } from './breadcrumb-item/index.js';
 export { default as SgdsBreadcrumb } from './breadcrumb/index.js';
+export { default as SgdsButton } from './button/index.js';
+export { default as SgdsCard } from './card/index.js';
 export { default as SgdsCheckboxGroup } from './checkbox-group/index.js';
 export { default as SgdsCheckbox } from './checkbox/index.js';
 export { default as SgdsCloseButton } from './close-button/index.js';
@@ -20,7 +20,6 @@ export { default as SgdsDataTable } from './data-table/index.js';
 export { default as SgdsDatepicker } from './datepicker/index.js';
 export { default as SgdsDescriptionListGroup } from './description-list-group/index.js';
 export { default as SgdsDescriptionList } from './description-list/index.js';
-export { default as SgdsDivider } from './divider/index.js';
 export { default as SgdsDrawer } from './drawer/index.js';
 export { default as SgdsDropdownItem } from './dropdown-item/index.js';
 export { default as SgdsDropdown } from './dropdown/index.js';
@@ -29,6 +28,7 @@ export { default as SgdsFooterItem } from './footer-item/index.js';
 export { default as SgdsFooter } from './footer/index.js';
 export { default as SgdsIcon } from './icon/index.js';
 export { default as SgdsIconButton } from './icon-button/index.js';
+export { default as SgdsDivider } from './divider/index.js';
 export { default as SgdsIconCard } from './icon-card/index.js';
 export { default as SgdsIconList } from './icon-list/index.js';
 export { default as SgdsImageCard } from './image-card/index.js';

package/types/react.d.ts

@@ -187,6 +187,20 @@ Variants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `
   onSgdsAfterHide?: 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 {
@@ -270,20 +284,6 @@ export interface SgdsCardProps extends SgdsBaseProps {
   orientation?: CardOrientation;
 }
 
-// ── 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;
-}
-
 // ── CheckboxGroup ─────────────────────────────────────────────────────────────
 
 export interface SgdsCheckboxGroupProps extends SgdsBaseProps {
@@ -654,15 +654,6 @@ export interface SgdsDescriptionListProps extends SgdsBaseProps {
   bordered?: boolean;
 }
 
-// ── Divider ─────────────────────────────────────────────────────────────
-
-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 */
-  thickness?: "thin" | "thick" | "thicker";
-}
-
 // ── Drawer ─────────────────────────────────────────────────────────────
 
 export interface SgdsDrawerProps extends SgdsBaseProps {
@@ -861,6 +852,15 @@ export interface SgdsIconButtonProps extends SgdsBaseProps {
   onSgdsFocus?: SgdsEventHandler;
 }
 
+// ── Divider ─────────────────────────────────────────────────────────────
+
+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 */
+  thickness?: "thin" | "thick" | "thicker";
+}
+
 // ── IconCard ─────────────────────────────────────────────────────────────
 
 export interface SgdsIconCardProps extends SgdsBaseProps {
@@ -1809,10 +1809,10 @@ declare module "react" {
       "sgds-alert-link": React.DetailedHTMLProps<SgdsAlertLinkProps, HTMLElement>;
       "sgds-alert": React.DetailedHTMLProps<SgdsAlertProps, HTMLElement>;
       "sgds-badge": React.DetailedHTMLProps<SgdsBadgeProps, HTMLElement>;
-      "sgds-button": React.DetailedHTMLProps<SgdsButtonProps, HTMLElement>;
-      "sgds-card": React.DetailedHTMLProps<SgdsCardProps, HTMLElement>;
       "sgds-breadcrumb-item": React.DetailedHTMLProps<SgdsBreadcrumbItemProps, HTMLElement>;
       "sgds-breadcrumb": React.DetailedHTMLProps<SgdsBreadcrumbProps, HTMLElement>;
+      "sgds-button": React.DetailedHTMLProps<SgdsButtonProps, HTMLElement>;
+      "sgds-card": React.DetailedHTMLProps<SgdsCardProps, HTMLElement>;
       "sgds-checkbox-group": React.DetailedHTMLProps<SgdsCheckboxGroupProps, HTMLElement>;
       "sgds-checkbox": React.DetailedHTMLProps<SgdsCheckboxProps, HTMLElement>;
       "sgds-close-button": React.DetailedHTMLProps<SgdsCloseButtonProps, HTMLElement>;
@@ -1825,7 +1825,6 @@ declare module "react" {
       "sgds-datepicker": React.DetailedHTMLProps<SgdsDatepickerProps, HTMLElement>;
       "sgds-description-list-group": React.DetailedHTMLProps<SgdsDescriptionListGroupProps, HTMLElement>;
       "sgds-description-list": React.DetailedHTMLProps<SgdsDescriptionListProps, HTMLElement>;
-      "sgds-divider": React.DetailedHTMLProps<SgdsDividerProps, HTMLElement>;
       "sgds-drawer": React.DetailedHTMLProps<SgdsDrawerProps, HTMLElement>;
       "sgds-dropdown-item": React.DetailedHTMLProps<SgdsDropdownItemProps, HTMLElement>;
       "sgds-dropdown": React.DetailedHTMLProps<SgdsDropdownProps, HTMLElement>;
@@ -1834,6 +1833,7 @@ declare module "react" {
       "sgds-footer": React.DetailedHTMLProps<SgdsFooterProps, HTMLElement>;
       "sgds-icon": React.DetailedHTMLProps<SgdsIconProps, HTMLElement>;
       "sgds-icon-button": React.DetailedHTMLProps<SgdsIconButtonProps, HTMLElement>;
+      "sgds-divider": React.DetailedHTMLProps<SgdsDividerProps, HTMLElement>;
       "sgds-icon-card": React.DetailedHTMLProps<SgdsIconCardProps, HTMLElement>;
       "sgds-icon-list": React.DetailedHTMLProps<SgdsIconListProps, HTMLElement>;
       "sgds-image-card": React.DetailedHTMLProps<SgdsImageCardProps, HTMLElement>;
@@ -1896,10 +1896,10 @@ declare global {
     "sgds-alert-link": HTMLElement;
     "sgds-alert": HTMLElement;
     "sgds-badge": HTMLElement;
-    "sgds-button": HTMLElement;
-    "sgds-card": HTMLElement;
     "sgds-breadcrumb-item": HTMLElement;
     "sgds-breadcrumb": HTMLElement;
+    "sgds-button": HTMLElement;
+    "sgds-card": HTMLElement;
     "sgds-checkbox-group": HTMLElement;
     "sgds-checkbox": HTMLElement;
     "sgds-close-button": HTMLElement;
@@ -1912,7 +1912,6 @@ declare global {
     "sgds-datepicker": HTMLElement;
     "sgds-description-list-group": HTMLElement;
     "sgds-description-list": HTMLElement;
-    "sgds-divider": HTMLElement;
     "sgds-drawer": HTMLElement;
     "sgds-dropdown-item": HTMLElement;
     "sgds-dropdown": HTMLElement;
@@ -1921,6 +1920,7 @@ declare global {
     "sgds-footer": HTMLElement;
     "sgds-icon": HTMLElement;
     "sgds-icon-button": HTMLElement;
+    "sgds-divider": HTMLElement;
     "sgds-icon-card": HTMLElement;
     "sgds-icon-list": HTMLElement;
     "sgds-image-card": HTMLElement;