design-zystem 1.0.336 → 1.0.337

package/dist/index.d.mts

@@ -761,6 +761,8 @@ interface TableRowProps extends HTMLAttributes<HTMLDivElement> {
     height?: string;
     isClickable?: boolean;
     hoverable?: boolean;
+    /** Colored bar on the left edge to flag a row, e.g. one needing follow-up. Drawn over the row so columns stay aligned with unflagged rows. */
+    accentColor?: string;
     onClick?: (e: MouseEvent<HTMLDivElement>) => void;
     style?: CSSProperties;
     className?: string;

package/dist/index.d.ts

@@ -761,6 +761,8 @@ interface TableRowProps extends HTMLAttributes<HTMLDivElement> {
     height?: string;
     isClickable?: boolean;
     hoverable?: boolean;
+    /** Colored bar on the left edge to flag a row, e.g. one needing follow-up. Drawn over the row so columns stay aligned with unflagged rows. */
+    accentColor?: string;
     onClick?: (e: MouseEvent<HTMLDivElement>) => void;
     style?: CSSProperties;
     className?: string;

package/dist/index.js

@@ -3990,7 +3990,8 @@ var shouldForwardPropTableRow = (prop) => ![
   "borderTop",
   "height",
   "isClickable",
-  "hoverable"
+  "hoverable",
+  "accentColor"
 ].includes(prop);
 var StyledTableRow = import_styled_components32.default.div.withConfig({
   shouldForwardProp: shouldForwardPropTableRow
@@ -4003,6 +4004,16 @@ var StyledTableRow = import_styled_components32.default.div.withConfig({
   border-top: ${(props) => props.borderTop || "none"};
   height: ${(props) => props.height || ""};
   transition: box-shadow 0.12s ease;
+  ${(props) => props.accentColor ? `position: relative;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 2px;
+    background-color: ${props.accentColor};
+  }` : ""}
 
   &:hover {
     ${(props) => props.hoverable ? "box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.025);" : `background-color: ${props.backgroundColor ? props.backgroundColor + "aa" : "#eaeaea"};`}

package/dist/index.mjs

@@ -3853,7 +3853,8 @@ var shouldForwardPropTableRow = (prop) => ![
   "borderTop",
   "height",
   "isClickable",
-  "hoverable"
+  "hoverable",
+  "accentColor"
 ].includes(prop);
 var StyledTableRow = styled32.div.withConfig({
   shouldForwardProp: shouldForwardPropTableRow
@@ -3866,6 +3867,16 @@ var StyledTableRow = styled32.div.withConfig({
   border-top: ${(props) => props.borderTop || "none"};
   height: ${(props) => props.height || ""};
   transition: box-shadow 0.12s ease;
+  ${(props) => props.accentColor ? `position: relative;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 2px;
+    background-color: ${props.accentColor};
+  }` : ""}
 
   &:hover {
     ${(props) => props.hoverable ? "box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.025);" : `background-color: ${props.backgroundColor ? props.backgroundColor + "aa" : "#eaeaea"};`}

package/dist/ui/index.d.mts

@@ -757,6 +757,8 @@ interface IconTabItem {
     icon: string;
     iconFamily?: IconFamily;
     label?: string;
+    /** Texte court sous l'icône, visible sur chaque onglet (ex. le prix du choix). */
+    caption?: string;
 }
 interface IconTabsProps {
     items: IconTabItem[];

package/dist/ui/index.d.ts

@@ -757,6 +757,8 @@ interface IconTabItem {
     icon: string;
     iconFamily?: IconFamily;
     label?: string;
+    /** Texte court sous l'icône, visible sur chaque onglet (ex. le prix du choix). */
+    caption?: string;
 }
 interface IconTabsProps {
     items: IconTabItem[];

package/dist/ui/index.js

@@ -3791,7 +3791,7 @@ var IconTabs = ({
             var _a2;
             const disabled = disabledIndexes.includes(index);
             const active = value === index;
-            return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
               "button",
               {
                 type: "button",
@@ -3799,19 +3799,33 @@ var IconTabs = ({
                   tabRefs.current[index] = el;
                 },
                 disabled,
+                "aria-label": item.caption ? `${item.label} ${item.caption}` : item.label,
+                "aria-pressed": active,
                 onClick: () => !disabled && (onChange == null ? void 0 : onChange(index)),
                 className: cn(
-                  "relative z-[1] m-[5px] flex items-center justify-center rounded-xl px-4 py-2 transition-colors",
+                  "relative z-[1] m-[5px] flex flex-col items-center justify-center gap-0.5 rounded-xl px-4 py-2 transition-colors",
                   active ? "text-blue-700" : "text-grey-500",
                   disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
                 ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                  "i",
-                  {
-                    className: `fa-${(_a2 = item.iconFamily) != null ? _a2 : "regular"} fa-${item.icon}`,
-                    style: { fontSize: 16 }
-                  }
-                )
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                    "i",
+                    {
+                      className: `fa-${(_a2 = item.iconFamily) != null ? _a2 : "regular"} fa-${item.icon}`,
+                      style: { fontSize: 16 }
+                    }
+                  ),
+                  item.caption && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                    "span",
+                    {
+                      className: cn(
+                        "text-[10px] leading-none",
+                        active && "font-semibold"
+                      ),
+                      children: item.caption
+                    }
+                  )
+                ]
               },
               index
             );

package/dist/ui/index.mjs

@@ -3634,7 +3634,7 @@ var IconTabs = ({
             var _a2;
             const disabled = disabledIndexes.includes(index);
             const active = value === index;
-            return /* @__PURE__ */ jsx51(
+            return /* @__PURE__ */ jsxs25(
               "button",
               {
                 type: "button",
@@ -3642,19 +3642,33 @@ var IconTabs = ({
                   tabRefs.current[index] = el;
                 },
                 disabled,
+                "aria-label": item.caption ? `${item.label} ${item.caption}` : item.label,
+                "aria-pressed": active,
                 onClick: () => !disabled && (onChange == null ? void 0 : onChange(index)),
                 className: cn(
-                  "relative z-[1] m-[5px] flex items-center justify-center rounded-xl px-4 py-2 transition-colors",
+                  "relative z-[1] m-[5px] flex flex-col items-center justify-center gap-0.5 rounded-xl px-4 py-2 transition-colors",
                   active ? "text-blue-700" : "text-grey-500",
                   disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
                 ),
-                children: /* @__PURE__ */ jsx51(
-                  "i",
-                  {
-                    className: `fa-${(_a2 = item.iconFamily) != null ? _a2 : "regular"} fa-${item.icon}`,
-                    style: { fontSize: 16 }
-                  }
-                )
+                children: [
+                  /* @__PURE__ */ jsx51(
+                    "i",
+                    {
+                      className: `fa-${(_a2 = item.iconFamily) != null ? _a2 : "regular"} fa-${item.icon}`,
+                      style: { fontSize: 16 }
+                    }
+                  ),
+                  item.caption && /* @__PURE__ */ jsx51(
+                    "span",
+                    {
+                      className: cn(
+                        "text-[10px] leading-none",
+                        active && "font-semibold"
+                      ),
+                      children: item.caption
+                    }
+                  )
+                ]
               },
               index
             );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "design-zystem",
-  "version": "1.0.336",
+  "version": "1.0.337",
   "description": "A React design system of importable components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",