@dmsi/wedgekit-react 0.0.26 → 0.0.28

package/dist/components/Toast.js

@@ -1,13 +1,13 @@
 "use client";
 import {
   Heading3
-} from "../chunk-TJ44JJCB.js";
+} from "../chunk-J6LETUNM.js";
 import {
   Button
-} from "../chunk-T6HZARR7.js";
+} from "../chunk-MZJS2ZAU.js";
 import {
   Paragraph
-} from "../chunk-UIQ733QP.js";
+} from "../chunk-VG4EPHJA.js";
 import {
   Icon
 } from "../chunk-IGQVA7SC.js";
@@ -92,6 +92,7 @@ function getToastRoot() {
 }
 var Toast = (_a) => {
   var _b = _a, {
+    id,
     variant = "success",
     title,
     message,
@@ -101,6 +102,7 @@ var Toast = (_a) => {
     viewButtonLink,
     showViewButton = false
   } = _b, props = __objRest(_b, [
+    "id",
     "variant",
     "title",
     "message",
@@ -118,9 +120,7 @@ var Toast = (_a) => {
   useEffect(() => {
     if (show && !showToast) {
       if (toastElementRef.current) {
-        const animation = slideInFromBottomAnimation(
-          toastElementRef.current
-        );
+        const animation = slideInFromBottomAnimation(toastElementRef.current);
         animationRef.current = animation;
         animation.onfinish = () => {
           onClose == null ? void 0 : onClose();
@@ -152,7 +152,10 @@ var Toast = (_a) => {
       animationRef.current.addEventListener("finish", handleAnimationEnd);
       return () => {
         if (animationRef.current) {
-          animationRef.current.removeEventListener("finish", handleAnimationEnd);
+          animationRef.current.removeEventListener(
+            "finish",
+            handleAnimationEnd
+          );
         }
       };
     }
@@ -169,6 +172,7 @@ var Toast = (_a) => {
   return /* @__PURE__ */ jsxs(
     "div",
     __spreadProps(__spreadValues({
+      id,
       ref: toastElementRef,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
@@ -184,10 +188,18 @@ var Toast = (_a) => {
         iconElement,
         /* @__PURE__ */ jsxs("div", { className: clsx("flex items-center", layoutGroupGap), children: [
           /* @__PURE__ */ jsxs("div", { className: clsx("flex flex-col w-68", componentGap), children: [
-            title && /* @__PURE__ */ jsx(Heading3, { children: title }),
-            message && /* @__PURE__ */ jsx(Paragraph, { children: message })
+            title && /* @__PURE__ */ jsx(Heading3, { id: id ? `${id}-title` : void 0, children: title }),
+            message && /* @__PURE__ */ jsx(Paragraph, { id: id ? `${id}-message` : void 0, children: message })
           ] }),
-          showViewButton && /* @__PURE__ */ jsx(Button, { variant: "tertiary", href: viewButtonLink, children: "View" })
+          showViewButton && /* @__PURE__ */ jsx(
+            Button,
+            {
+              id: id ? `${id}-view-button` : void 0,
+              variant: "tertiary",
+              href: viewButtonLink,
+              children: "View"
+            }
+          )
         ] })
       ]
     })
@@ -207,6 +219,7 @@ function createToast(config) {
     /* @__PURE__ */ jsx(
       Toast,
       {
+        id: config.id,
         show: true,
         onClose: handleClose,
         variant: config.variant,

package/dist/components/Tooltip.cjs

@@ -167,6 +167,7 @@ var gapUsingContainerPadding = (0, import_clsx.default)(
 // src/components/Tooltip.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Tooltip = ({
+  id,
   message,
   position = "top",
   children,
@@ -175,7 +176,6 @@ var Tooltip = ({
 }) => {
   const ref = (0, import_react.useRef)(null);
   const tooltipRef = (0, import_react.useRef)(null);
-  const [isTruncated, setIsTruncated] = (0, import_react.useState)(false);
   const [tooltipPosition, setTooltipPosition] = (0, import_react.useState)({ top: 0, left: 0 });
   const [isVisible, setIsVisible] = (0, import_react.useState)(false);
   const [removeOpacity, setRemoveOpacity] = (0, import_react.useState)(false);
@@ -233,6 +233,7 @@ var Tooltip = ({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
+      id,
       ref,
       className: "relative inline-grid grid-cols-[auto_1fr] items-center",
       onMouseEnter: handleMouseEnter,
@@ -243,6 +244,7 @@ var Tooltip = ({
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "div",
             {
+              id: id ? `${id}-message` : void 0,
               ref: tooltipRef,
               style: {
                 position: "fixed",
@@ -268,9 +270,8 @@ var Tooltip = ({
     if (showOnTruncation && ref.current) {
       const paragraph = ref.current.querySelector("p");
       if (paragraph) {
-        const isTruncated2 = paragraph.scrollWidth > paragraph.clientWidth;
-        setIsTruncated(isTruncated2);
-        return isTruncated2;
+        const isTruncated = paragraph.scrollWidth > paragraph.clientWidth;
+        return isTruncated;
       }
     }
     return false;

package/dist/components/Tooltip.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   Tooltip
-} from "../chunk-YZQNTOIF.js";
+} from "../chunk-QZGUMB7T.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/components/TopBar.cjs

@@ -193,13 +193,14 @@ var gapUsingContainerPadding = (0, import_clsx.default)(
 
 // src/components/LogoDMSiTopBar.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function LogoDMSiTopBar() {
+function LogoDMSiTopBar(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "svg",
-    {
+    __spreadProps(__spreadValues({
       width: "106",
       height: "24",
-      viewBox: "0 0 106 24",
+      viewBox: "0 0 106 24"
+    }, props), {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
@@ -239,7 +240,7 @@ function LogoDMSiTopBar() {
           }
         )
       ]
-    }
+    })
   );
 }
 
@@ -252,19 +253,22 @@ var TopBarBase = (_a) => {
     topNavLinks,
     mobileLeft,
     mobileRight,
-    brandLogo = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LogoDMSiTopBar, {})
+    brandLogo = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LogoDMSiTopBar, {}),
+    id
   } = _b, props = __objRest(_b, [
     "left",
     "right",
     "topNavLinks",
     "mobileLeft",
     "mobileRight",
-    "brandLogo"
+    "brandLogo",
+    "id"
   ]);
   const defaultStyles = (0, import_clsx2.default)("bg-background-primary-normal");
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     __spreadProps(__spreadValues({
+      id,
       className: (0, import_clsx2.default)(
         "flex items-center justify-between",
         containerPaddingX,
@@ -330,19 +334,23 @@ var TopBarBase = (_a) => {
 var TopBar = (_a) => {
   var _b = _a, {
     left,
-    brandLogo = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LogoDMSiTopBar, {})
+    brandLogo = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LogoDMSiTopBar, {}),
+    id
   } = _b, props = __objRest(_b, [
     "left",
-    "brandLogo"
+    "brandLogo",
+    "id"
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     TopBarBase,
     __spreadProps(__spreadValues({}, props), {
+      id,
       brandLogo,
       left: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "a",
           {
+            id: id ? `${id}-brand-logo-link` : void 0,
             href: "/",
             className: "grow max-w-[400px] h-auto max-h-10 *:max-h-[inherit]",
             children: brandLogo && brandLogo

package/dist/components/TopBar.js

@@ -1,6 +1,6 @@
 import {
   LogoDMSiTopBar
-} from "../chunk-4RD5ZF2V.js";
+} from "../chunk-QBIEU25R.js";
 import {
   containerPaddingX,
   gapUsingContainerPadding,
@@ -24,19 +24,22 @@ var TopBarBase = (_a) => {
     topNavLinks,
     mobileLeft,
     mobileRight,
-    brandLogo = /* @__PURE__ */ jsx(LogoDMSiTopBar, {})
+    brandLogo = /* @__PURE__ */ jsx(LogoDMSiTopBar, {}),
+    id
   } = _b, props = __objRest(_b, [
     "left",
     "right",
     "topNavLinks",
     "mobileLeft",
     "mobileRight",
-    "brandLogo"
+    "brandLogo",
+    "id"
   ]);
   const defaultStyles = clsx("bg-background-primary-normal");
   return /* @__PURE__ */ jsxs(
     "div",
     __spreadProps(__spreadValues({
+      id,
       className: clsx(
         "flex items-center justify-between",
         containerPaddingX,
@@ -102,19 +105,23 @@ var TopBarBase = (_a) => {
 var TopBar = (_a) => {
   var _b = _a, {
     left,
-    brandLogo = /* @__PURE__ */ jsx(LogoDMSiTopBar, {})
+    brandLogo = /* @__PURE__ */ jsx(LogoDMSiTopBar, {}),
+    id
   } = _b, props = __objRest(_b, [
     "left",
-    "brandLogo"
+    "brandLogo",
+    "id"
   ]);
   return /* @__PURE__ */ jsx(
     TopBarBase,
     __spreadProps(__spreadValues({}, props), {
+      id,
       brandLogo,
       left: /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
           "a",
           {
+            id: id ? `${id}-brand-logo-link` : void 0,
             href: "/",
             className: "grow max-w-[400px] h-auto max-h-10 *:max-h-[inherit]",
             children: brandLogo && brandLogo

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.26",
+  "version": "0.0.28",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/Breadcrumbs.tsx

@@ -3,22 +3,28 @@
 import React, { useLayoutEffect, useState } from "react";
 import clsx from "clsx";
 import { Link } from "./Link";
-
 import { Icon } from "./Icon";
 
 type BreadcrumbsProps = {
   asCardStyle?: boolean;
   path?: string; // Optional override for SSR / testing
   crumbs: BreadcrumbProps[];
+  id?: string;
 };
 
 type BreadcrumbProps = {
   href: string;
   children: React.ReactNode;
   onClick?: () => void; // Optional click handler
+  id?: string;
 };
 
-export const Breadcrumb = ({ href, children, onClick }: BreadcrumbProps) => {
+export const Breadcrumb = ({
+  href,
+  children,
+  onClick,
+  id,
+}: BreadcrumbProps) => {
   const linkPadding = clsx(
     "!text-text-link-normal  whitespace-nowrap",
     "py-[calc(var(--spacing-mobile-component-padding)_+_3px)]",
@@ -27,8 +33,13 @@ export const Breadcrumb = ({ href, children, onClick }: BreadcrumbProps) => {
   );
 
   return (
-    <li key={href} className="flex items-center">
-      <Link className={linkPadding} href={href} onClick={onClick}>
+    <li key={href} id={id} className="flex items-center">
+      <Link
+        id={id ? `${id}-link` : undefined}
+        className={linkPadding}
+        href={href}
+        onClick={onClick}
+      >
         {children}
       </Link>
     </li>
@@ -36,35 +47,27 @@ export const Breadcrumb = ({ href, children, onClick }: BreadcrumbProps) => {
 };
 
 const Chevron = () => (
-  <li className="flex items-center">
+  <li className="flex items-center" aria-hidden="true">
     <Icon name="chevron_right" size={16} />
   </li>
 );
 
-export const Breadcrumbs = ({
-  asCardStyle,
-
-  crumbs,
-}: BreadcrumbsProps) => {
+export const Breadcrumbs = ({ asCardStyle, id, crumbs }: BreadcrumbsProps) => {
   const scrollableElement = React.useRef<HTMLElement | null>(null);
-
   const [isOverflow, setIsOverflow] = useState(false);
 
   useLayoutEffect(() => {
-    console.log(scrollableElement.current);
     scrollableElement.current?.scrollTo({
       left: scrollableElement.current?.scrollWidth ?? 0,
       behavior: "instant",
     });
 
     updateOverflow();
-    // Scroll to the start of the breadcrumbs when the component mounts
   }, [scrollableElement, crumbs]);
 
   const updateOverflow = () => {
     if (!scrollableElement.current) return;
 
-    // Check if the scrollable element has overflow
     setIsOverflow(
       scrollableElement.current.scrollWidth !==
         scrollableElement.current.clientWidth &&
@@ -74,6 +77,7 @@ export const Breadcrumbs = ({
 
   return (
     <nav
+      id={id}
       className={clsx(
         "relative select-none flex items-center  max-w-full w-full",
         {
@@ -92,6 +96,7 @@ export const Breadcrumbs = ({
       />
 
       <ol
+        id={id ? `${id}-list` : undefined}
         className="flex items-center overflow-x-scroll"
         style={{ scrollbarWidth: "none" }}
         onScroll={updateOverflow}
@@ -105,7 +110,11 @@ export const Breadcrumbs = ({
           return (
             <React.Fragment key={index}>
               {index > 0 && <Chevron />}
-              <Breadcrumb href={href} onClick={onClick}>
+              <Breadcrumb
+                href={href}
+                onClick={onClick}
+                id={id ? `${id}-crumb-${index}` : undefined}
+              >
                 {children}
               </Breadcrumb>
             </React.Fragment>

package/src/components/Button.tsx

@@ -31,6 +31,7 @@ type BaseButtonProps = Omit<
   disabled?: boolean;
   colorClassName?: string;
   href?: string;
+  id?: string;
 };
 
 // At least one of leftIcon, rightIcon, or children must be provided
@@ -54,9 +55,9 @@ export const Button = ({
   iconOnly = false,
   colorClassName,
   href,
+  id,
   ...props
 }: AsProps<Tags> & ButtonProps) => {
-  
   const primaryVariantStyles =
     variant === "primary" &&
     clsx(
@@ -147,7 +148,7 @@ export const Button = ({
         ? colorClassName
         : "text-text-on-action-primary-normal",
       "bg-transparent",
-      "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover", 
+      "hover:bg-background-on-action-secondary-hover hover:text-brand-text-action-primary-hover",
       // "hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover", // Will use this once colors are finalized
       "focus:bg-background-on-action-secondary-hover focus:text-brand-text-action-primary-hover focus:outline-0",
       // "focus:bg-background-action-secondary-hover focus:text-text-action-primary-hover", // Will use this once colors are finalized
@@ -190,6 +191,7 @@ export const Button = ({
 
   return (
     <Element
+      id={id}
       type={Element === "button" ? "button" : undefined}
       className={buttonClasses}
       {...props}
@@ -199,7 +201,9 @@ export const Button = ({
       {leftIcon && leftIcon}
 
       {!iconOnly && children && (
-        <span className={labelClasses}>{children}</span>
+        <span id={id ? `${id}-label` : undefined} className={labelClasses}>
+          {children}
+        </span>
       )}
 
       {rightIcon && rightIcon}

package/src/components/CalendarRange.tsx

@@ -25,6 +25,7 @@ export interface CalendarRangeProps {
    * Only applies when mode is "single".
    */
   disableRange?: boolean;
+  id?: string;
 }
 
 /**
@@ -53,6 +54,7 @@ interface DateCellProps {
   isRangeEnd?: boolean;
   /** True if range selection is disabled in single mode */
   isRangeDisabled?: boolean;
+  id?: string;
 }
 
 function DateCell({
@@ -69,11 +71,13 @@ function DateCell({
   onMouseLeave,
   cellPadding = "",
   isRangeDisabled = false,
+  id,
   ...props
 }: DateCellProps & { cellPadding?: string }) {
   return (
     <span
       {...props}
+      id={id}
       className={clsx(
         "flex items-center justify-center aspect-square select-none transition-colors border duration-100 font-medium",
         typography.caption,
@@ -137,6 +141,7 @@ export function CalendarRange({
   mode = "double",
   cardStyle = false,
   disableRange = false,
+  id,
 }: CalendarRangeProps) {
   const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
   // Parse from/to props
@@ -238,6 +243,7 @@ export function CalendarRange({
   // Render
   return (
     <div
+      id={id}
       className={clsx(
         "relative bg-background-grouped-primary-normal rounded-base w-fit",
         layoutPaddding,
@@ -275,6 +281,7 @@ export function CalendarRange({
                 >
                   {idx === 0 ? (
                     <button
+                      id={id ? `${id}-prev-month-button` : undefined}
                       type="button"
                       className={clsx(
                         "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
@@ -300,6 +307,7 @@ export function CalendarRange({
                   </div>
                   {(mode === "double" ? idx === 1 : true) ? (
                     <button
+                      id={id ? `${id}-next-month-button` : undefined}
                       type="button"
                       className={clsx(
                         "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
@@ -379,6 +387,7 @@ export function CalendarRange({
                     return (
                       <DateCell
                         key={i}
+                        id={id ? `${id}-date-${date.toString()}` : undefined}
                         date={date}
                         isInMonth={!!isInMonth}
                         isToday={!!isToday}

package/src/components/Caption.tsx

@@ -11,6 +11,7 @@ type Style = {
 type CaptionProps = {
   as?: Tags;
   style?: Style["style"];
+  id?: string;
 } & AsProps<Tags> &
   TextAttributes &
   TypographyProps;
@@ -22,15 +23,22 @@ export const Caption = ({
   style = "default",
   color,
   align,
+  id,
   ...props
 }: CaptionProps) => {
   const Element = as;
 
   return (
-    <div className="flex gap-1">
-      <WhichIcon style={style} size={16} className="mt-[3px] desktop:mt-0" />
+    <div id={id} className="flex gap-1">
+      <WhichIcon
+        id={id}
+        style={style}
+        size={16}
+        className="mt-[3px] desktop:mt-0"
+      />
 
       <Element
+        id={id ? `${id}-text` : undefined}
         className={clsx(
           typography.caption.replace("text-text-primary-normal", ""),
           (style === "default" || style === "info") &&
@@ -58,15 +66,22 @@ const WhichIcon = ({
   style,
   size,
   className,
+  id,
 }: {
   style: Style["style"];
   size: IconSize;
   className?: string;
+  id?: string;
 }) => {
   if (style === "success") {
     return (
       <span className="text-icon-success-normal contents">
-        <Icon className={className}name="check_circle" size={size} />
+        <Icon
+          id={id ? `${id}-icon` : undefined}
+          className={className}
+          name="check_circle"
+          size={size}
+        />
       </span>
     );
   }
@@ -74,7 +89,12 @@ const WhichIcon = ({
   if (style === "warning") {
     return (
       <span className="text-icon-warning-normal contents">
-        <Icon className={className}name="warning" size={size} />
+        <Icon
+          id={id ? `${id}-icon` : undefined}
+          className={className}
+          name="warning"
+          size={size}
+        />
       </span>
     );
   }
@@ -82,7 +102,12 @@ const WhichIcon = ({
   if (style === "error") {
     return (
       <span className="text-icon-critical-normal contents">
-        <Icon className={className}name="info" size={size} />
+        <Icon
+          id={id ? `${id}-icon` : undefined}
+          className={className}
+          name="info"
+          size={size}
+        />
       </span>
     );
   }
@@ -90,7 +115,12 @@ const WhichIcon = ({
   if (style === "info") {
     return (
       <span className="text-icon-primary-normal contents">
-        <Icon className={className}name="info" size={size} />
+        <Icon
+          id={id ? `${id}-icon` : undefined}
+          className={className}
+          name="info"
+          size={size}
+        />
       </span>
     );
   }

package/src/components/Checkbox.tsx

@@ -8,12 +8,13 @@ import { Paragraph } from "./Paragraph";
 interface CheckboxProps
   extends Omit<
     ComponentProps<"input">,
-    "type" | "className" | "children" | "dangerouslySetInnerHTML"
+    "type" | "className" | "children" | "dangerouslySetInnerHTML" | "id"
   > {
   label?: string;
   error?: boolean;
   indeterminate?: boolean;
   paragraphClassName?: string;
+  id?: string;
 }
 
 export const Checkbox = ({
@@ -25,6 +26,7 @@ export const Checkbox = ({
   onChange,
   indeterminate,
   paragraphClassName,
+  id,
   ...props
 }: CheckboxProps) => {
   const selected = indeterminate || checked;
@@ -78,6 +80,8 @@ export const Checkbox = ({
 
   return (
     <label
+      id={id}
+      htmlFor={`${id}-input`}
       className={clsx(
         "flex items-center",
         componentGap,
@@ -87,12 +91,12 @@ export const Checkbox = ({
     >
       <div className="relative">
         <input
+          id={id ? `${id}-input` : undefined}
           type="checkbox"
           className="sr-only peer"
           disabled={disabled}
           checked={selected}
           onChange={handleOnChange}
-          id={props.id}
           data-indeterminate={indeterminate}
           {...props}
         />
@@ -169,6 +173,7 @@ export const Checkbox = ({
 
       {label && (
         <Paragraph
+          id={id ? `${id}-label` : undefined}
           as="span"
           padded
           className={clsx(