@refinn/core-ui 0.1.15 → 0.1.17

package/dist/index.cjs

@@ -553,6 +553,7 @@ var AlertBanner = (0, import_react5.forwardRef)(
     const descColorClass = isPage ? pageIsDark ? "text-alert-text-secondary" : "text-alert-text-secondary-inverse" : "text-alert-text-secondary";
     const linkColorClass = isPage ? pageIsDark ? "text-alert-text-primary" : "text-white-100" : "text-enabled";
     const closeButtonSurface = isPage ? "dark" : "default";
+    const hasIcon = Boolean(icon) || variant !== "none";
     const containerClasses = [
       "flex font-sans",
       isStacked ? "flex-col items-start gap-8" : "items-center gap-24",
@@ -561,7 +562,7 @@ var AlertBanner = (0, import_react5.forwardRef)(
       className
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", __spreadProps(__spreadValues({ ref, role: "alert", className: containerClasses }, rest), { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `flex w-full items-start gap-8 ${isStacked ? "" : "flex-1 min-w-0"}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `flex w-full gap-8 ${isStacked ? "items-start" : "items-center flex-1 min-w-0"}`, children: [
         icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DefaultIcon, { className: `h-20 w-20 shrink-0 ${iconColorClass}` }),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex-1 min-w-0 flex flex-col gap-2", children: [
           title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: `text-label-medium ${titleColorClass}`, children: title }),
@@ -590,7 +591,7 @@ var AlertBanner = (0, import_react5.forwardRef)(
           }
         )
       ] }),
-      isStacked && buttonAction && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex w-full items-start gap-12 pl-28", children: isPage ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { variant: "secondary", size: "sm", onClick: buttonAction.onClick, children: buttonAction.label }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      isStacked && buttonAction && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `flex w-full items-start gap-12 ${hasIcon ? "pl-28" : ""}`, children: isPage ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { variant: "secondary", size: "sm", onClick: buttonAction.onClick, children: buttonAction.label }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "a",
         {
           href: buttonAction.href,
@@ -1049,70 +1050,107 @@ Checkbox.displayName = "Checkbox";
 // src/components/Chip/Chip.tsx
 var import_react10 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var sizeClasses5 = {
-  sm: "h-32 text-label-medium px-12 py-6",
-  md: "h-40 text-label-large px-16 py-10",
-  lg: "h-48 text-label-large px-24 py-14"
+var sizeBaseClasses = {
+  sm: "min-h-32 min-w-56 gap-4 py-2 text-label-medium",
+  md: "min-h-40 min-w-56 gap-8 py-4 text-label-large",
+  lg: "min-h-48 min-w-96 gap-8 py-8 text-label-large"
 };
-var marginImgClasses = {
-  sm: "-ml-10 -my-4 h-28 w-28",
-  md: "-ml-12 -my-6 h-32 w-32",
-  lg: "-ml-18 -my-8 h-32 w-32"
+var paddingXClasses = {
+  sm: "px-12",
+  md: "px-16",
+  lg: "px-24"
 };
-var isOutlinedClasses = {
-  true: "border border-chip-border-enabled bg-chip-background-inverse",
-  false: "border-0 bg-chip-background-enabled"
-};
-var isDarkClasses = {
-  true: "!bg-chip-background-black-active !text-chip-text-inverse",
-  false: "!bg-chip-background-active !text-chip-text-inverse"
+var bankLogoPaddingXClasses = {
+  md: "pl-4 pr-16",
+  lg: "pl-8 pr-16"
 };
+function toneClasses(selected, outline, variant) {
+  if (selected) {
+    return variant === "dark" ? "bg-chip-background-black-active text-chip-text-inverse hover:bg-chip-background-black-active-hover group-disabled:bg-chip-background-active-disabled group-disabled:text-chip-text-inverse-disabled" : "bg-chip-background-active text-chip-text-inverse hover:bg-chip-background-active-hover group-disabled:bg-chip-background-active-disabled group-disabled:text-chip-text-inverse-disabled";
+  }
+  if (outline) {
+    return "bg-chip-background-inverse text-chip-text-enabled border border-chip-border-enabled hover:bg-chip-background-hover hover:border-chip-border-hover group-disabled:text-chip-text-disabled";
+  }
+  return "bg-chip-background-enabled text-chip-text-enabled hover:bg-chip-background-hover group-disabled:bg-chip-background-disabled group-disabled:text-chip-text-disabled";
+}
 var Chip = (0, import_react10.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       size = "md",
-      src,
-      alt = "",
       label,
-      icon,
-      isOutlined = false,
-      isDark = false,
-      isSelected = false,
+      variant = "brand",
+      outline = false,
+      selected,
+      defaultSelected = false,
+      onSelectedChange,
+      startIcon,
+      endIcon,
+      bankLogoSrc,
+      bankLogoAlt = "",
       disabled = false,
+      onClick,
       className = ""
     } = _b, rest = __objRest(_b, [
       "size",
-      "src",
-      "alt",
       "label",
-      "icon",
-      "isOutlined",
-      "isDark",
-      "isSelected",
+      "variant",
+      "outline",
+      "selected",
+      "defaultSelected",
+      "onSelectedChange",
+      "startIcon",
+      "endIcon",
+      "bankLogoSrc",
+      "bankLogoAlt",
       "disabled",
+      "onClick",
       "className"
     ]);
-    const sz = sizeClasses5[size];
-    const outlinedClass = isOutlinedClasses[String(isOutlined)];
-    const darkClass = isDarkClasses[String(isDark)];
-    const containerClasses = [
-      "w-fit rounded-full flex flex-row gap-8 items-center justify-center text-chip-text-enabled",
+    const [uncontrolledSelected, setUncontrolledSelected] = (0, import_react10.useState)(defaultSelected);
+    const isSelected = selected != null ? selected : uncontrolledSelected;
+    const showBankLogo = Boolean(bankLogoSrc) && size !== "sm";
+    const handleClick = (event) => {
+      onClick == null ? void 0 : onClick(event);
+      if (event.defaultPrevented) return;
+      const next = !isSelected;
+      if (selected === void 0) setUncontrolledSelected(next);
+      onSelectedChange == null ? void 0 : onSelectedChange(next);
+    };
+    const wrapperClasses = [
+      "group rounded-full border-2 border-transparent p-2 outline-none",
+      "transition-colors",
       disabled ? "cursor-not-allowed" : "cursor-pointer",
-      outlinedClass,
-      sz,
-      className,
-      isSelected ? darkClass : ""
+      "focus-visible:border-chip-border-focus",
+      className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-      "div",
+    const baseClasses = [
+      "flex items-center justify-center rounded-full transition-colors",
+      sizeBaseClasses[size],
+      showBankLogo ? bankLogoPaddingXClasses[size] : paddingXClasses[size],
+      toneClasses(isSelected, outline && !isSelected, variant)
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "button",
       __spreadProps(__spreadValues({
         ref,
-        className: containerClasses
+        type: "button",
+        disabled,
+        "aria-pressed": isSelected,
+        onClick: handleClick,
+        className: wrapperClasses
       }, rest), {
-        children: [
-          icon ? icon : src && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("img", { src, alt, className: `${marginImgClasses[size]} rounded-full` }),
-          label
-        ]
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: baseClasses, children: [
+          showBankLogo ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "img",
+            {
+              src: bankLogoSrc,
+              alt: bankLogoAlt,
+              className: "size-32 shrink-0 rounded-full object-contain"
+            }
+          ) : startIcon,
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "min-w-0 truncate", children: label }),
+          !showBankLogo && endIcon
+        ] })
       })
     );
   }
@@ -2507,25 +2545,43 @@ Radio.displayName = "Radio";
 // src/components/SegmentControl/SegmentControl.tsx
 var import_react20 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
+var itemSizeClasses = {
+  sm: "min-h-32 px-8 py-6 text-label-medium",
+  md: "min-h-40 px-12 py-8 text-label-large",
+  lg: "min-h-48 px-16 py-8 text-label-large"
+};
 var SegmentControl = (0, import_react20.forwardRef)(
   (_a, ref) => {
-    var _b = _a, { size = "md", items, selected, setSelected, className = "" } = _b, rest = __objRest(_b, ["size", "items", "selected", "setSelected", "className"]);
+    var _b = _a, { size = "md", items, selected, setSelected, onChange, className = "" } = _b, rest = __objRest(_b, ["size", "items", "selected", "setSelected", "onChange", "className"]);
     return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "div",
       __spreadProps(__spreadValues({
         ref,
-        className: `bg-background-tertiary rounded-full flex flex-row items-center justify-center p-4 gap-4 ${className}`
+        className: `bg-background-tertiary rounded-full flex flex-row items-center p-4 gap-4 ${className}`
       }, rest), {
-        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          "div",
-          {
-            onClick: () => setSelected == null ? void 0 : setSelected(item.value),
-            className: `cursor-pointer rounded-full text-center grow
-              ${size === "sm" ? "px-8 py-6 text-label-medium" : size === "md" ? "px-12 py-10 text-label-large" : "px-16 py-14 text-label-large"} ${selected === item.value ? "bg-segmented-control-background-active shadow-base text-segmented-control-text-primary hover:bg-segmented-control-background-active-hover" : "bg-segmented-control-background-enabled text-segmented-control-text-primary hover:bg-segmented-control-background-hover"} `,
-            children: item.label
-          },
-          item.value
-        ))
+        children: items.map((item) => {
+          const isSelected = selected === item.value;
+          return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-pressed": isSelected,
+              onClick: () => {
+                setSelected == null ? void 0 : setSelected(item.value);
+                onChange == null ? void 0 : onChange(item.value);
+              },
+              className: "group flex-1 min-w-0 rounded-full border-2 border-transparent p-2 outline-none cursor-pointer transition-colors focus-visible:border-segmented-control-border-focus",
+              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                "span",
+                {
+                  className: `flex w-full items-center justify-center rounded-full text-center transition-colors ${itemSizeClasses[size]} ${isSelected ? "bg-segmented-control-background-active text-segmented-control-text-inverse shadow-small group-focus-visible:bg-segmented-control-background-active-focus group-focus-visible:text-segmented-control-text-primary" : "text-segmented-control-text-primary hover:bg-segmented-control-background-hover"}`,
+                  children: item.label
+                }
+              )
+            },
+            item.value
+          );
+        })
       })
     );
   }

package/dist/index.d.mts

@@ -92,18 +92,24 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "siz
 declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
 
 type ChipSize = "sm" | "md" | "lg";
-interface ChipProps extends HTMLAttributes<HTMLDivElement> {
+type ChipVariant = "brand" | "dark";
+interface ChipProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
     size?: ChipSize;
-    src?: string;
-    alt?: string;
     label: string;
-    icon?: ReactNode;
-    isOutlined?: boolean;
-    isDark?: boolean;
-    isSelected?: boolean;
-    disabled?: boolean;
+    /** Only affects the selected appearance — unselected chips look the same for both variants. */
+    variant?: ChipVariant;
+    /** Ignored while selected — selection always renders as a solid chip. */
+    outline?: boolean;
+    selected?: boolean;
+    defaultSelected?: boolean;
+    onSelectedChange?: (selected: boolean) => void;
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+    /** Renders a circular financial-institution logo in place of startIcon. Not supported at size "sm". */
+    bankLogoSrc?: string;
+    bankLogoAlt?: string;
 }
-declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLDivElement>>;
+declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLButtonElement>>;
 
 type TextFieldSize = "md" | "lg";
 interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> {
@@ -270,7 +276,7 @@ interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"
 declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
 
 type SegmentControlSize = "sm" | "md" | "lg";
-interface SegmentControlProps extends HTMLAttributes<HTMLDivElement> {
+interface SegmentControlProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     size?: SegmentControlSize;
     items: {
         label: string;
@@ -278,6 +284,7 @@ interface SegmentControlProps extends HTMLAttributes<HTMLDivElement> {
     }[];
     selected: string;
     setSelected?: (value: string) => void;
+    onChange?: (value: string) => void;
 }
 declare const SegmentControl: react.ForwardRefExoticComponent<SegmentControlProps & react.RefAttributes<HTMLDivElement>>;
 

package/dist/index.d.ts

@@ -92,18 +92,24 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "siz
 declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
 
 type ChipSize = "sm" | "md" | "lg";
-interface ChipProps extends HTMLAttributes<HTMLDivElement> {
+type ChipVariant = "brand" | "dark";
+interface ChipProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
     size?: ChipSize;
-    src?: string;
-    alt?: string;
     label: string;
-    icon?: ReactNode;
-    isOutlined?: boolean;
-    isDark?: boolean;
-    isSelected?: boolean;
-    disabled?: boolean;
+    /** Only affects the selected appearance — unselected chips look the same for both variants. */
+    variant?: ChipVariant;
+    /** Ignored while selected — selection always renders as a solid chip. */
+    outline?: boolean;
+    selected?: boolean;
+    defaultSelected?: boolean;
+    onSelectedChange?: (selected: boolean) => void;
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+    /** Renders a circular financial-institution logo in place of startIcon. Not supported at size "sm". */
+    bankLogoSrc?: string;
+    bankLogoAlt?: string;
 }
-declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLDivElement>>;
+declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLButtonElement>>;
 
 type TextFieldSize = "md" | "lg";
 interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> {
@@ -270,7 +276,7 @@ interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"
 declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
 
 type SegmentControlSize = "sm" | "md" | "lg";
-interface SegmentControlProps extends HTMLAttributes<HTMLDivElement> {
+interface SegmentControlProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     size?: SegmentControlSize;
     items: {
         label: string;
@@ -278,6 +284,7 @@ interface SegmentControlProps extends HTMLAttributes<HTMLDivElement> {
     }[];
     selected: string;
     setSelected?: (value: string) => void;
+    onChange?: (value: string) => void;
 }
 declare const SegmentControl: react.ForwardRefExoticComponent<SegmentControlProps & react.RefAttributes<HTMLDivElement>>;
 

package/dist/index.js

@@ -510,6 +510,7 @@ var AlertBanner = forwardRef5(
     const descColorClass = isPage ? pageIsDark ? "text-alert-text-secondary" : "text-alert-text-secondary-inverse" : "text-alert-text-secondary";
     const linkColorClass = isPage ? pageIsDark ? "text-alert-text-primary" : "text-white-100" : "text-enabled";
     const closeButtonSurface = isPage ? "dark" : "default";
+    const hasIcon = Boolean(icon) || variant !== "none";
     const containerClasses = [
       "flex font-sans",
       isStacked ? "flex-col items-start gap-8" : "items-center gap-24",
@@ -518,7 +519,7 @@ var AlertBanner = forwardRef5(
       className
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxs4("div", __spreadProps(__spreadValues({ ref, role: "alert", className: containerClasses }, rest), { children: [
-      /* @__PURE__ */ jsxs4("div", { className: `flex w-full items-start gap-8 ${isStacked ? "" : "flex-1 min-w-0"}`, children: [
+      /* @__PURE__ */ jsxs4("div", { className: `flex w-full gap-8 ${isStacked ? "items-start" : "items-center flex-1 min-w-0"}`, children: [
         icon != null ? icon : /* @__PURE__ */ jsx5(DefaultIcon, { className: `h-20 w-20 shrink-0 ${iconColorClass}` }),
         /* @__PURE__ */ jsxs4("div", { className: "flex-1 min-w-0 flex flex-col gap-2", children: [
           title && /* @__PURE__ */ jsx5("p", { className: `text-label-medium ${titleColorClass}`, children: title }),
@@ -547,7 +548,7 @@ var AlertBanner = forwardRef5(
           }
         )
       ] }),
-      isStacked && buttonAction && /* @__PURE__ */ jsx5("div", { className: "flex w-full items-start gap-12 pl-28", children: isPage ? /* @__PURE__ */ jsx5(Button, { variant: "secondary", size: "sm", onClick: buttonAction.onClick, children: buttonAction.label }) : /* @__PURE__ */ jsxs4(
+      isStacked && buttonAction && /* @__PURE__ */ jsx5("div", { className: `flex w-full items-start gap-12 ${hasIcon ? "pl-28" : ""}`, children: isPage ? /* @__PURE__ */ jsx5(Button, { variant: "secondary", size: "sm", onClick: buttonAction.onClick, children: buttonAction.label }) : /* @__PURE__ */ jsxs4(
         "a",
         {
           href: buttonAction.href,
@@ -1011,73 +1012,111 @@ Checkbox.displayName = "Checkbox";
 
 // src/components/Chip/Chip.tsx
 import {
-  forwardRef as forwardRef10
+  forwardRef as forwardRef10,
+  useState as useState3
 } from "react";
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
-var sizeClasses5 = {
-  sm: "h-32 text-label-medium px-12 py-6",
-  md: "h-40 text-label-large px-16 py-10",
-  lg: "h-48 text-label-large px-24 py-14"
+var sizeBaseClasses = {
+  sm: "min-h-32 min-w-56 gap-4 py-2 text-label-medium",
+  md: "min-h-40 min-w-56 gap-8 py-4 text-label-large",
+  lg: "min-h-48 min-w-96 gap-8 py-8 text-label-large"
 };
-var marginImgClasses = {
-  sm: "-ml-10 -my-4 h-28 w-28",
-  md: "-ml-12 -my-6 h-32 w-32",
-  lg: "-ml-18 -my-8 h-32 w-32"
+var paddingXClasses = {
+  sm: "px-12",
+  md: "px-16",
+  lg: "px-24"
 };
-var isOutlinedClasses = {
-  true: "border border-chip-border-enabled bg-chip-background-inverse",
-  false: "border-0 bg-chip-background-enabled"
-};
-var isDarkClasses = {
-  true: "!bg-chip-background-black-active !text-chip-text-inverse",
-  false: "!bg-chip-background-active !text-chip-text-inverse"
+var bankLogoPaddingXClasses = {
+  md: "pl-4 pr-16",
+  lg: "pl-8 pr-16"
 };
+function toneClasses(selected, outline, variant) {
+  if (selected) {
+    return variant === "dark" ? "bg-chip-background-black-active text-chip-text-inverse hover:bg-chip-background-black-active-hover group-disabled:bg-chip-background-active-disabled group-disabled:text-chip-text-inverse-disabled" : "bg-chip-background-active text-chip-text-inverse hover:bg-chip-background-active-hover group-disabled:bg-chip-background-active-disabled group-disabled:text-chip-text-inverse-disabled";
+  }
+  if (outline) {
+    return "bg-chip-background-inverse text-chip-text-enabled border border-chip-border-enabled hover:bg-chip-background-hover hover:border-chip-border-hover group-disabled:text-chip-text-disabled";
+  }
+  return "bg-chip-background-enabled text-chip-text-enabled hover:bg-chip-background-hover group-disabled:bg-chip-background-disabled group-disabled:text-chip-text-disabled";
+}
 var Chip = forwardRef10(
   (_a, ref) => {
     var _b = _a, {
       size = "md",
-      src,
-      alt = "",
       label,
-      icon,
-      isOutlined = false,
-      isDark = false,
-      isSelected = false,
+      variant = "brand",
+      outline = false,
+      selected,
+      defaultSelected = false,
+      onSelectedChange,
+      startIcon,
+      endIcon,
+      bankLogoSrc,
+      bankLogoAlt = "",
       disabled = false,
+      onClick,
       className = ""
     } = _b, rest = __objRest(_b, [
       "size",
-      "src",
-      "alt",
       "label",
-      "icon",
-      "isOutlined",
-      "isDark",
-      "isSelected",
+      "variant",
+      "outline",
+      "selected",
+      "defaultSelected",
+      "onSelectedChange",
+      "startIcon",
+      "endIcon",
+      "bankLogoSrc",
+      "bankLogoAlt",
       "disabled",
+      "onClick",
       "className"
     ]);
-    const sz = sizeClasses5[size];
-    const outlinedClass = isOutlinedClasses[String(isOutlined)];
-    const darkClass = isDarkClasses[String(isDark)];
-    const containerClasses = [
-      "w-fit rounded-full flex flex-row gap-8 items-center justify-center text-chip-text-enabled",
+    const [uncontrolledSelected, setUncontrolledSelected] = useState3(defaultSelected);
+    const isSelected = selected != null ? selected : uncontrolledSelected;
+    const showBankLogo = Boolean(bankLogoSrc) && size !== "sm";
+    const handleClick = (event) => {
+      onClick == null ? void 0 : onClick(event);
+      if (event.defaultPrevented) return;
+      const next = !isSelected;
+      if (selected === void 0) setUncontrolledSelected(next);
+      onSelectedChange == null ? void 0 : onSelectedChange(next);
+    };
+    const wrapperClasses = [
+      "group rounded-full border-2 border-transparent p-2 outline-none",
+      "transition-colors",
       disabled ? "cursor-not-allowed" : "cursor-pointer",
-      outlinedClass,
-      sz,
-      className,
-      isSelected ? darkClass : ""
+      "focus-visible:border-chip-border-focus",
+      className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsxs9(
-      "div",
+    const baseClasses = [
+      "flex items-center justify-center rounded-full transition-colors",
+      sizeBaseClasses[size],
+      showBankLogo ? bankLogoPaddingXClasses[size] : paddingXClasses[size],
+      toneClasses(isSelected, outline && !isSelected, variant)
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx10(
+      "button",
       __spreadProps(__spreadValues({
         ref,
-        className: containerClasses
+        type: "button",
+        disabled,
+        "aria-pressed": isSelected,
+        onClick: handleClick,
+        className: wrapperClasses
       }, rest), {
-        children: [
-          icon ? icon : src && /* @__PURE__ */ jsx10("img", { src, alt, className: `${marginImgClasses[size]} rounded-full` }),
-          label
-        ]
+        children: /* @__PURE__ */ jsxs9("span", { className: baseClasses, children: [
+          showBankLogo ? /* @__PURE__ */ jsx10(
+            "img",
+            {
+              src: bankLogoSrc,
+              alt: bankLogoAlt,
+              className: "size-32 shrink-0 rounded-full object-contain"
+            }
+          ) : startIcon,
+          /* @__PURE__ */ jsx10("span", { className: "min-w-0 truncate", children: label }),
+          !showBankLogo && endIcon
+        ] })
       })
     );
   }
@@ -2499,29 +2538,45 @@ var Radio = forwardRef19(
 Radio.displayName = "Radio";
 
 // src/components/SegmentControl/SegmentControl.tsx
-import {
-  forwardRef as forwardRef20
-} from "react";
+import { forwardRef as forwardRef20 } from "react";
 import { jsx as jsx20 } from "react/jsx-runtime";
+var itemSizeClasses = {
+  sm: "min-h-32 px-8 py-6 text-label-medium",
+  md: "min-h-40 px-12 py-8 text-label-large",
+  lg: "min-h-48 px-16 py-8 text-label-large"
+};
 var SegmentControl = forwardRef20(
   (_a, ref) => {
-    var _b = _a, { size = "md", items, selected, setSelected, className = "" } = _b, rest = __objRest(_b, ["size", "items", "selected", "setSelected", "className"]);
+    var _b = _a, { size = "md", items, selected, setSelected, onChange, className = "" } = _b, rest = __objRest(_b, ["size", "items", "selected", "setSelected", "onChange", "className"]);
     return /* @__PURE__ */ jsx20(
       "div",
       __spreadProps(__spreadValues({
         ref,
-        className: `bg-background-tertiary rounded-full flex flex-row items-center justify-center p-4 gap-4 ${className}`
+        className: `bg-background-tertiary rounded-full flex flex-row items-center p-4 gap-4 ${className}`
       }, rest), {
-        children: items.map((item) => /* @__PURE__ */ jsx20(
-          "div",
-          {
-            onClick: () => setSelected == null ? void 0 : setSelected(item.value),
-            className: `cursor-pointer rounded-full text-center grow
-              ${size === "sm" ? "px-8 py-6 text-label-medium" : size === "md" ? "px-12 py-10 text-label-large" : "px-16 py-14 text-label-large"} ${selected === item.value ? "bg-segmented-control-background-active shadow-base text-segmented-control-text-primary hover:bg-segmented-control-background-active-hover" : "bg-segmented-control-background-enabled text-segmented-control-text-primary hover:bg-segmented-control-background-hover"} `,
-            children: item.label
-          },
-          item.value
-        ))
+        children: items.map((item) => {
+          const isSelected = selected === item.value;
+          return /* @__PURE__ */ jsx20(
+            "button",
+            {
+              type: "button",
+              "aria-pressed": isSelected,
+              onClick: () => {
+                setSelected == null ? void 0 : setSelected(item.value);
+                onChange == null ? void 0 : onChange(item.value);
+              },
+              className: "group flex-1 min-w-0 rounded-full border-2 border-transparent p-2 outline-none cursor-pointer transition-colors focus-visible:border-segmented-control-border-focus",
+              children: /* @__PURE__ */ jsx20(
+                "span",
+                {
+                  className: `flex w-full items-center justify-center rounded-full text-center transition-colors ${itemSizeClasses[size]} ${isSelected ? "bg-segmented-control-background-active text-segmented-control-text-inverse shadow-small group-focus-visible:bg-segmented-control-background-active-focus group-focus-visible:text-segmented-control-text-primary" : "text-segmented-control-text-primary hover:bg-segmented-control-background-hover"}`,
+                  children: item.label
+                }
+              )
+            },
+            item.value
+          );
+        })
       })
     );
   }
@@ -2533,7 +2588,7 @@ import {
   forwardRef as forwardRef21,
   useCallback as useCallback2,
   useId as useId5,
-  useState as useState10
+  useState as useState9
 } from "react";
 import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 var sizeConfig = {
@@ -2641,7 +2696,7 @@ var Slider = forwardRef21(
     const ariaLabel = ariaLabelProp != null ? ariaLabelProp : typeof label === "string" ? void 0 : "Slider";
     const ariaDescriptionId = description ? `${inputId}-description` : void 0;
     const isControlled = controlledValue !== void 0;
-    const [internalValue, setInternalValue] = useState10(defaultValue != null ? defaultValue : min);
+    const [internalValue, setInternalValue] = useState9(defaultValue != null ? defaultValue : min);
     const currentValue = isControlled ? controlledValue : internalValue;
     const handleChange = useCallback2(
       (e) => {
@@ -2812,7 +2867,7 @@ Tab.displayName = "Tab";
 
 // src/components/TextArea/TextArea.tsx
 import {
-  useState as useState11,
+  useState as useState10,
   forwardRef as forwardRef23
 } from "react";
 import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
@@ -2856,7 +2911,7 @@ var TextArea = forwardRef23(
       "className"
     ]);
     var _a2;
-    const [isFocused, setIsFocused] = useState11(false);
+    const [isFocused, setIsFocused] = useState10(false);
     const isActive = isFocused && !!value;
     return /* @__PURE__ */ jsxs18("div", { className: "w-full flex flex-col gap-4 font-sans", children: [
       label || showCounter ? /* @__PURE__ */ jsxs18("div", { className: "w-full flex justify-between items-center gap-8", children: [
@@ -3134,7 +3189,7 @@ ToggleSwitch.displayName = "ToggleSwitch";
 
 // src/components/Tooltip/Tooltip.tsx
 import {
-  useState as useState12,
+  useState as useState11,
   useEffect as useEffect5,
   useRef as useRef4,
   forwardRef as forwardRef26
@@ -3158,8 +3213,8 @@ var Tooltip = forwardRef26(
       "className"
     ]);
     const wrapperRef = useRef4(null);
-    const [isVisible, setIsVisible] = useState12(false);
-    const [isHovered, setIsHovered] = useState12(false);
+    const [isVisible, setIsVisible] = useState11(false);
+    const [isHovered, setIsHovered] = useState11(false);
     useEffect5(() => {
       const handleClickOutside = (event) => {
         if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {

package/dist/theme.css

@@ -401,8 +401,8 @@
   --color-button-background-primary-hover: var(--color-blue-700);
   --color-button-background-primary-active: var(--color-blue-800);
   --color-button-background-primary-focus: var(--color-blue-600);
-  --color-button-background-primary-disabled: var(--color-blue-600 / 40%);
-  --color-button-background-primary-pending: var(--color-blue-600 / 40%);
+  --color-button-background-primary-disabled: color-mix(in oklab, var(--color-blue-600) 40%, transparent);
+  --color-button-background-primary-pending: color-mix(in oklab, var(--color-blue-600) 40%, transparent);
   --color-button-background-secondary-enabled: var(--color-gray-100);
   --color-button-background-secondary-hover: var(--color-gray-200);
   --color-button-background-secondary-active: var(--color-gray-300);
@@ -433,7 +433,7 @@
   --color-button-text-brand: var(--color-blue-600);
   --color-button-text-inverse: var(--color-white-100);
   --color-button-text-inverse-disabled: var(--color-white-40);
-  --color-button-text-brand-pending: var(--color-blue-600 / 40%);
+  --color-button-text-brand-pending: color-mix(in oklab, var(--color-blue-600) 40%, transparent);
   --color-button-border-focus: var(--color-blue-500);
   --color-button-border-inverse: var(--color-white-100);
   --color-accordion-background-enabled: var(--color-white-100);
@@ -472,7 +472,7 @@
   --color-icon-button-icon-disabled: var(--color-gray-400);
   --color-icon-button-icon-inverse-disabled: var(--color-white-40);
   --color-icon-button-icon-brand: var(--color-blue-600);
-  --color-icon-button-icon-brand-disabled: var(--color-blue-600 / 40%);
+  --color-icon-button-icon-brand-disabled: color-mix(in oklab, var(--color-blue-600) 40%, transparent);
   --color-icon-button-icon-danger: var(--color-red-500);
   --color-icon-button-icon-inverse-danger: var(--color-red-400);
   --color-icon-button-border-focus: var(--color-blue-500);
@@ -482,7 +482,7 @@
   --color-toggle-switch-background-focus: var(--color-gray-200);
   --color-toggle-switch-background-disabled: var(--color-gray-100);
   --color-toggle-switch-background-active-hover: var(--color-green-700);
-  --color-toggle-switch-background-active-disabled: var(--color-green-600 / 40%);
+  --color-toggle-switch-background-active-disabled: color-mix(in oklab, var(--color-green-600) 40%, transparent);
   --color-toggle-switch-background-toggle: var(--color-white-100);
   --color-toggle-switch-background-active-focus: var(--color-green-600);
   --color-toggle-switch-text-primary: var(--color-gray-900);
@@ -686,7 +686,7 @@
   --color-chip-background-inverse: var(--color-white-100);
   --color-chip-background-black-active: var(--color-blue-950);
   --color-chip-background-black-active-hover: var(--color-blue-900);
-  --color-chip-background-active-disabled: var(--color-blue-600 / 40%);
+  --color-chip-background-active-disabled: color-mix(in oklab, var(--color-blue-600) 40%, transparent);
   --color-chip-text-disabled: var(--color-gray-400);
   --color-chip-text-inverse-disabled: var(--color-white-65);
   --color-chip-text-inverse: var(--color-white-100);
@@ -725,7 +725,7 @@
    * ======================================== */
   --color-background-primary: var(--color-white-100);
   --color-background-tertiary: var(--color-gray-100);
-  --color-background-overlay: var(--color-gray-900 / 50%);
+  --color-background-overlay: color-mix(in oklab, var(--color-gray-900) 50%, transparent);
   --color-background-disabled: var(--color-gray-100);
   --color-background-secondary: var(--color-gray-50);
   --color-background-inverse: var(--color-gray-900);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinn/core-ui",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "description": "Refinn Design System — UI components + Tailwind v4 theme preset",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",