@ledgerhq/lumen-ui-react 0.1.54 → 0.1.56

package/dist/lib/Components/core/Card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/Card/Card.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAEV,2BAA2B,EAC3B,gBAAgB,EAChB,mBAAmB,EACnB,qBAAqB,EACrB,gBAAgB,EAChB,sBAAsB,EACtB,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,SAAS,EACT,iBAAiB,EACjB,QAAQ,EACT,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,uBAAuB,GAAI,wCAKrC;IACD,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAChC,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;CACjC,KAAG,gBA2BH,CAAC;AAiDF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,IAAI,GAAI,qFAUlB,SAAS,4CAkCX,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,wCAKxB,eAAe,4CA8BjB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,GAAI,wCAKzB,gBAAgB,4CAUlB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,GAAI,wCAKzB,gBAAgB,4CAkBlB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,wCAK5B,mBAAmB,4CAmBrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,wCAK9B,qBAAqB,4CAmBvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,GAAI,wCAKpC,2BAA2B,4CAmB7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,wCAK1B,iBAAiB,4CAqBnB,CAAC;AAiBF;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,oDAMxB,eAAe,4CA4BjB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,wCAK/B,sBAAsB,4CAQxB,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/Card/Card.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAEV,2BAA2B,EAC3B,gBAAgB,EAChB,mBAAmB,EACnB,qBAAqB,EACrB,gBAAgB,EAChB,sBAAsB,EACtB,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,SAAS,EACT,iBAAiB,EACjB,QAAQ,EACT,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,uBAAuB,GAAI,wCAKrC;IACD,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IAChC,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;CACjC,KAAG,gBA2BH,CAAC;AA4CF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,IAAI,GAAI,qFAUlB,SAAS,4CAwCX,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,wCAKxB,eAAe,4CA8BjB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,GAAI,wCAKzB,gBAAgB,4CAUlB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,GAAI,wCAKzB,gBAAgB,4CAkBlB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,wCAK5B,mBAAmB,4CAmBrB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,wCAK9B,qBAAqB,4CAmBvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,sBAAsB,GAAI,wCAKpC,2BAA2B,4CAmB7B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,wCAK1B,iBAAiB,4CAqBnB,CAAC;AAiBF;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,oDAMxB,eAAe,4CA4BjB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,wCAK/B,sBAAsB,4CAQxB,CAAC"}

package/dist/lib/Components/core/Card/Card.js

@@ -1,4 +1,4 @@
-import { jsx as n, jsxs as f, Fragment as p } from "react/jsx-runtime";
+import { jsx as n, jsxs as f, Fragment as b } from "react/jsx-runtime";
 import { createSafeContext as m, DisabledProvider as g, cn as o, getButtonA11yProps as C } from "../../../../libs/utils-shared/dist/index.js";
 import { cva as v } from "class-variance-authority";
 import { useMemo as h } from "react";
@@ -47,17 +47,13 @@ const k = ({
 ), [q, x] = m("CardContentAlign", {
   align: "left"
 }), E = v(
-  "flex w-full flex-col overflow-clip rounded-lg bg-surface text-base transition-colors",
+  "relative flex w-full flex-col overflow-clip rounded-lg bg-surface text-base transition-colors",
   {
     variants: {
       interactive: {
         true: "cursor-pointer hover:bg-surface-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus active:bg-surface-pressed",
         false: ""
       },
-      outlined: {
-        true: "border-2 border-active",
-        false: ""
-      },
       disabled: {
         true: "cursor-default",
         false: ""
@@ -72,7 +68,6 @@ const k = ({
     ],
     defaultVariants: {
       interactive: !1,
-      outlined: !1,
       disabled: !1
     }
   }
@@ -83,34 +78,43 @@ const k = ({
   expanded: e,
   outlined: s = !1,
   disabled: i = !1,
-  onClick: l,
-  children: d,
-  ...b
+  onClick: d,
+  children: l,
+  ...p
 }) => {
   const u = h(
     () => k({
       type: a,
       expanded: e,
-      onClick: l,
+      onClick: d,
       disabled: i
     }),
-    [a, e, l, i]
+    [a, e, d, i]
   );
-  return /* @__PURE__ */ n(R, { value: u, children: /* @__PURE__ */ n(g, { value: { disabled: i }, children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ n(R, { value: u, children: /* @__PURE__ */ n(g, { value: { disabled: i }, children: /* @__PURE__ */ f(
     "div",
     {
       ref: r,
-      ...u.cardClickable && C({ onClick: l, disabled: i }),
+      ...u.cardClickable && C({ onClick: d, disabled: i }),
       className: o(
         E({
           interactive: u.cardClickable,
-          outlined: s,
           disabled: i
         }),
         t
       ),
-      ...b,
-      children: d
+      ...p,
+      children: [
+        l,
+        s && /* @__PURE__ */ n(
+          "span",
+          {
+            "data-testid": "card-outline",
+            className: "pointer-events-none absolute inset-0 rounded-[inherit] border-2 border-active",
+            "aria-hidden": "true"
+          }
+        )
+      ]
     }
   ) }) });
 }, T = ({
@@ -119,7 +123,7 @@ const k = ({
   className: a,
   ...e
 }) => {
-  const { disabled: s, headerClickable: i, footerExpanded: l, onHeaderClick: d } = c({
+  const { disabled: s, headerClickable: i, footerExpanded: d, onHeaderClick: l } = c({
     consumerName: "CardHeader",
     contextRequired: !1
   });
@@ -127,8 +131,8 @@ const k = ({
     "div",
     {
       ref: r,
-      "aria-expanded": d ? l : void 0,
-      ...C({ onClick: d, disabled: s }),
+      "aria-expanded": l ? d : void 0,
+      ...C({ onClick: l, disabled: s }),
       className: o(
         "flex items-center gap-12 p-12",
         i && "cursor-pointer -outline-offset-6 transition-colors hover:bg-surface-hover focus-visible:outline-2 focus-visible:outline-focus active:bg-surface-pressed",
@@ -137,9 +141,9 @@ const k = ({
       ...e,
       children: [
         t,
-        d && /* @__PURE__ */ f(p, { children: [
-          l && /* @__PURE__ */ n(N, { className: "text-muted", size: 20 }),
-          !l && /* @__PURE__ */ n(w, { className: "text-muted", size: 20 })
+        l && /* @__PURE__ */ f(b, { children: [
+          d && /* @__PURE__ */ n(N, { className: "text-muted", size: 20 }),
+          !d && /* @__PURE__ */ n(w, { className: "text-muted", size: 20 })
         ] })
       ]
     }
@@ -292,7 +296,7 @@ const k = ({
   appearance: e = "plain",
   ...s
 }) => {
-  const { disabled: i, footerExpanded: l } = c({
+  const { disabled: i, footerExpanded: d } = c({
     consumerName: "CardFooter",
     contextRequired: !1
   });
@@ -301,7 +305,7 @@ const k = ({
     {
       className: o(
         H({ appearance: e }),
-        l ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+        d ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
       ),
       children: /* @__PURE__ */ n("div", { className: "overflow-hidden", children: /* @__PURE__ */ n(
         "div",

package/dist/lib/Components/core/SearchInput/types.d.ts

@@ -1,10 +1,10 @@
 import { ComponentPropsWithRef } from 'react';
 import { BaseInputProps } from '../../internal/BaseInput/types';
-export type SearchInputProps = Omit<BaseInputProps, 'prefix' | 'label' | 'labelClassName'> & {
+export type SearchInputProps = Omit<BaseInputProps, 'prefix' | 'label' | 'labelClassName' | 'multiline' | 'minLines' | 'maxLines' | 'scrollbarWidth' | 'ref' | 'onChange'> & Pick<ComponentPropsWithRef<'input'>, 'ref' | 'onChange'> & {
     /**
      * The visual appearance of the search input
      * @default 'plain'
      */
     appearance?: 'plain' | 'transparent';
-} & ComponentPropsWithRef<'input'>;
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/lib/Components/core/SearchInput/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/SearchInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAErE,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,cAAc,EACd,QAAQ,GAAG,OAAO,GAAG,gBAAgB,CACtC,GAAG;IACF;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;CACtC,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/SearchInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAErE,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,cAAc,EACZ,QAAQ,GACR,OAAO,GACP,gBAAgB,GAChB,WAAW,GACX,UAAU,GACV,UAAU,GACV,gBAAgB,GAChB,KAAK,GACL,UAAU,CACb,GACC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC,GAAG;IACzD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;CACtC,CAAC"}

package/dist/lib/Components/core/SegmentedControl/SegmentedControl.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import { SegmentedControlButtonProps, SegmentedControlProps, SegmentedControlValue } from './types';
-export declare function SegmentedControlButton<T extends SegmentedControlValue = SegmentedControlValue>({ value, children, icon: Icon, trailingContent, onClick, className, ...props }: SegmentedControlButtonProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function SegmentedControlButton<T extends SegmentedControlValue = SegmentedControlValue>({ value, children, icon: Icon, trailingContent, onClick, className, disabled, ...props }: SegmentedControlButtonProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare function SegmentedControl<T extends SegmentedControlValue = SegmentedControlValue>({ selectedValue, onSelectedChange, children, className, disabled: disabledProp, appearance, tabLayout, ...props }: SegmentedControlProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare function createSegmentedControl<T extends SegmentedControlValue = never>(): {
     SegmentedControl: (props: SegmentedControlProps<T>) => ReactElement;

package/dist/lib/Components/core/SegmentedControl/SegmentedControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAM1C,OAAO,KAAK,EACV,2BAA2B,EAC3B,qBAAqB,EACrB,qBAAqB,EACtB,MAAM,SAAS,CAAC;AAwDjB,wBAAgB,sBAAsB,CACpC,CAAC,SAAS,qBAAqB,GAAG,qBAAqB,EACvD,EACA,KAAK,EACL,QAAQ,EACR,IAAI,EAAE,IAAI,EACV,eAAe,EACf,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,2BAA2B,CAAC,CAAC,CAAC,2CAgChC;AAED,wBAAgB,gBAAgB,CAC9B,CAAC,SAAS,qBAAqB,GAAG,qBAAqB,EACvD,EACA,aAAa,EACb,gBAAgB,EAChB,QAAQ,EACR,SAAS,EACT,QAAQ,EAAE,YAAY,EACtB,UAAyB,EACzB,SAAmB,EACnB,GAAG,KAAK,EACT,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CAoD1B;AAED,wBAAgB,sBAAsB,CACpC,CAAC,SAAS,qBAAqB,GAAG,KAAK,KACpC;IACH,gBAAgB,EAAE,CAAC,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,KAAK,YAAY,CAAC;IACpE,sBAAsB,EAAE,CACtB,KAAK,EAAE,2BAA2B,CAAC,CAAC,CAAC,KAClC,YAAY,CAAC;CACnB,CAEA"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAGV,YAAY,EAEb,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EACV,2BAA2B,EAC3B,qBAAqB,EACrB,qBAAqB,EACtB,MAAM,SAAS,CAAC;AA8PjB,wBAAgB,sBAAsB,CACpC,CAAC,SAAS,qBAAqB,GAAG,qBAAqB,EACvD,EACA,KAAK,EACL,QAAQ,EACR,IAAI,EAAE,IAAI,EACV,eAAe,EACf,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,2BAA2B,CAAC,CAAC,CAAC,2CAuChC;AAED,wBAAgB,gBAAgB,CAC9B,CAAC,SAAS,qBAAqB,GAAG,qBAAqB,EACvD,EACA,aAAa,EACb,gBAAgB,EAChB,QAAQ,EACR,SAAS,EACT,QAAQ,EAAE,YAAY,EACtB,UAAyB,EACzB,SAAmB,EACnB,GAAG,KAAK,EACT,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CAqC1B;AAED,wBAAgB,sBAAsB,CACpC,CAAC,SAAS,qBAAqB,GAAG,KAAK,KACpC;IACH,gBAAgB,EAAE,CAAC,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,KAAK,YAAY,CAAC;IACpE,sBAAsB,EAAE,CACtB,KAAK,EAAE,2BAA2B,CAAC,CAAC,CAAC,KAClC,YAAY,CAAC;CACnB,CAEA"}

package/dist/lib/Components/core/SegmentedControl/SegmentedControl.js

@@ -1,23 +1,22 @@
-import { jsx as a, jsxs as x } from "react/jsx-runtime";
-import { cn as g, useDisabledContext as v } from "../../../../libs/utils-shared/dist/index.js";
-import { cva as b } from "class-variance-authority";
-import { useRef as C } from "react";
-import { useSegmentedControlContext as y, SegmentedControlContextProvider as S } from "./SegmentedControlContext.js";
-import { useSegmentedControlSelectedIndex as w, usePillElementLayoutEffect as N } from "./usePillElementLayoutEffect.js";
-const p = {
-  root: b("relative flex flex-row items-center rounded-sm", {
+import { jsx as o, jsxs as b } from "react/jsx-runtime";
+import { cn as h, useDisabledContext as y } from "../../../../libs/utils-shared/dist/index.js";
+import { cva as m } from "class-variance-authority";
+import { useMemo as w, useRef as v } from "react";
+import { useSegmentedControlContext as k, SegmentedControlContextProvider as N } from "./SegmentedControlContext.js";
+import { useSegmentedControlSelectedIndex as R, usePillElementLayoutEffect as I } from "./usePillElementLayoutEffect.js";
+import { useScrollArrows as j, useScrollSelectedIntoView as z } from "./useScrollArrows.js";
+import { ChevronLeft as A } from "../../symbols/icons/ChevronLeft.js";
+import { ChevronRight as L } from "../../symbols/icons/ChevronRight.js";
+const f = {
+  root: m("relative flex-row items-center rounded-sm", {
     variants: {
-      appearance: {
-        background: "bg-surface",
-        "no-background": "bg-transparent"
-      },
       tabLayout: {
         fit: "inline-flex",
-        fixed: "w-full"
+        fixed: "flex w-full"
       }
     }
   }),
-  pill: b("pointer-events-none absolute top-0 left-0 z-0 rounded-sm", {
+  pill: m("pointer-events-none absolute top-0 left-0 z-0 rounded-sm", {
     variants: {
       disabled: {
         true: "bg-base-transparent-pressed",
@@ -29,8 +28,9 @@ const p = {
       }
     }
   }),
-  item: b(
-    "z-10 flex cursor-pointer flex-row items-center justify-center rounded-sm px-16 py-8 select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus disabled:cursor-not-allowed",
+  item: m(
+    // The focus ring is inset because the scroll container clips anything drawn outside the box.
+    "z-10 flex cursor-pointer flex-row items-center justify-center rounded-sm px-16 py-8 select-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus disabled:cursor-not-allowed",
     {
       variants: {
         selected: {
@@ -51,112 +51,257 @@ const p = {
         }
       ]
     }
+  ),
+  scrollArea: m("relative rounded-sm", {
+    variants: {
+      appearance: {
+        background: "bg-surface",
+        "no-background": "bg-transparent"
+      },
+      tabLayout: {
+        // Fit lets the segments size themselves, so the area must not stretch.
+        fit: "",
+        fixed: "w-full"
+      }
+    }
+  }),
+  arrow: m(
+    "absolute inset-y-0 z-20 flex cursor-pointer items-center justify-center rounded-sm py-8 text-muted transition-opacity duration-200 hover:text-muted-hover",
+    {
+      variants: {
+        visible: {
+          true: "opacity-100",
+          false: "pointer-events-none opacity-0"
+        },
+        side: {
+          left: "left-0 pr-16 pl-8",
+          right: "right-0 pr-8 pl-16"
+        }
+      }
+    }
   )
 };
-function k({
-  value: s,
-  children: i,
+function B(e, t) {
+  return `linear-gradient(to right, ${e ? "transparent 0px, transparent 40px, black 72px" : "black 0px"}, ${t ? "black calc(100% - 72px), transparent calc(100% - 40px), transparent 100%" : "black 100%"})`;
+}
+function x({
+  side: e,
   icon: t,
-  trailingContent: l,
-  onClick: d,
-  className: c,
-  ...r
+  label: r,
+  visible: n,
+  onClick: a
 }) {
-  const { selectedValue: u, onSelectedChange: o, disabled: e, tabLayout: m } = y(), n = u === s;
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ o(
+    "button",
+    {
+      type: "button",
+      "aria-label": r,
+      "aria-hidden": !n,
+      tabIndex: -1,
+      disabled: !n,
+      onClick: a,
+      className: f.arrow({ visible: n, side: e }),
+      children: /* @__PURE__ */ o(t, { size: 20 })
+    }
+  );
+}
+function D({
+  appearance: e,
+  tabLayout: t,
+  className: r,
+  selectedIndex: n,
+  children: a,
+  ...d
+}) {
+  const l = v(null), { canScrollLeft: c, canScrollRight: s, scrollBy: u } = j(l);
+  z(l, n);
+  const i = c || s ? B(c, s) : void 0;
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      ...d,
+      className: h(
+        f.scrollArea({ appearance: e, tabLayout: t }),
+        r
+      ),
+      children: [
+        /* @__PURE__ */ o(
+          "div",
+          {
+            ref: l,
+            className: "scrollbar-none overflow-x-auto",
+            style: i ? { maskImage: i, WebkitMaskImage: i } : void 0,
+            children: a
+          }
+        ),
+        /* @__PURE__ */ o(
+          x,
+          {
+            side: "left",
+            icon: A,
+            label: "Scroll left",
+            visible: c,
+            onClick: () => u("left")
+          }
+        ),
+        /* @__PURE__ */ o(
+          x,
+          {
+            side: "right",
+            icon: L,
+            label: "Scroll right",
+            visible: s,
+            onClick: () => u("right")
+          }
+        )
+      ]
+    }
+  );
+}
+function M({
+  layout: e,
+  isReady: t,
+  disabled: r
+}) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      "aria-hidden": !0,
+      className: f.pill({ disabled: r, isReady: t }),
+      style: {
+        width: e.width,
+        height: e.height,
+        transform: `translateX(${e.x}px)`
+      }
+    }
+  );
+}
+function P({
+  tabLayout: e,
+  disabled: t,
+  selectedIndex: r,
+  children: n
+}) {
+  const a = v(null), { pill: d, isReady: l } = I({
+    ref: a,
+    selectedIndex: r,
+    children: n
+  });
+  return /* @__PURE__ */ b(
+    "div",
+    {
+      ref: a,
+      role: "radiogroup",
+      "aria-disabled": t,
+      className: f.root({ tabLayout: e }),
+      children: [
+        n,
+        /* @__PURE__ */ o(
+          M,
+          {
+            layout: d,
+            isReady: l,
+            disabled: t
+          }
+        )
+      ]
+    }
+  );
+}
+function $({
+  value: e,
+  children: t,
+  icon: r,
+  trailingContent: n,
+  onClick: a,
+  className: d,
+  disabled: l,
+  ...c
+}) {
+  const {
+    selectedValue: s,
+    onSelectedChange: u,
+    disabled: i,
+    tabLayout: S
+  } = k(), g = s === e, p = w(() => !!(l || i), [l, i]);
+  return /* @__PURE__ */ o(
     "button",
     {
       type: "button",
       role: "radio",
-      "aria-checked": n,
-      "aria-disabled": e,
-      disabled: e,
-      onClick: (f) => {
-        e || (o(s), d?.(f));
+      "aria-checked": g,
+      "aria-disabled": p,
+      disabled: p,
+      onClick: (C) => {
+        p || (u(e), a?.(C));
       },
-      className: g(
-        p.item({ selected: n, disabled: !!e }),
-        m === "fixed" && "min-w-0 flex-1",
-        c
+      className: h(
+        f.item({ selected: g, disabled: p }),
+        S === "fixed" && "min-w-0 flex-1",
+        d
       ),
-      ...r,
-      children: /* @__PURE__ */ x("span", { className: "inline-flex min-w-0 items-center justify-center gap-8", children: [
-        t && /* @__PURE__ */ a(t, { size: 16, className: "shrink-0" }),
-        /* @__PURE__ */ a("span", { className: "min-w-0 truncate", children: i }),
-        l
+      ...c,
+      children: /* @__PURE__ */ b("span", { className: "inline-flex min-w-0 items-center justify-center gap-8", children: [
+        r && /* @__PURE__ */ o(r, { size: 16, className: "shrink-0" }),
+        /* @__PURE__ */ o("span", { className: "min-w-0 truncate", children: t }),
+        n
       ] })
     }
   );
 }
-function j({
-  selectedValue: s,
-  onSelectedChange: i,
-  children: t,
-  className: l,
-  disabled: d,
-  appearance: c = "background",
-  tabLayout: r = "fixed",
-  ...u
+function E({
+  selectedValue: e,
+  onSelectedChange: t,
+  children: r,
+  className: n,
+  disabled: a,
+  appearance: d = "background",
+  tabLayout: l = "fixed",
+  ...c
 }) {
-  const o = v({
+  const s = y({
     consumerName: "SegmentedControl",
-    mergeWith: { disabled: d }
-  }), e = C(null), m = w(
-    s,
-    t
-  ), { pill: n, isReady: f } = N({
-    ref: e,
-    selectedIndex: m,
-    children: t
-  });
-  return /* @__PURE__ */ a(
-    S,
+    mergeWith: { disabled: a }
+  }), u = R(
+    e,
+    r
+  );
+  return /* @__PURE__ */ o(
+    N,
     {
       value: {
-        selectedValue: s,
-        onSelectedChange: (h) => i(h),
-        disabled: o,
-        tabLayout: r
+        selectedValue: e,
+        onSelectedChange: (i) => t(i),
+        disabled: s,
+        tabLayout: l
       },
-      children: /* @__PURE__ */ x(
-        "div",
+      children: /* @__PURE__ */ o(
+        D,
         {
-          ...u,
-          ref: e,
-          role: "radiogroup",
-          "aria-disabled": o,
-          className: g(
-            p.root({
-              appearance: c,
-              tabLayout: r
-            }),
-            l
-          ),
-          children: [
-            t,
-            /* @__PURE__ */ a(
-              "div",
-              {
-                "aria-hidden": !0,
-                className: p.pill({ disabled: o, isReady: f }),
-                style: {
-                  width: n.width,
-                  height: n.height,
-                  transform: `translateX(${n.x}px)`
-                }
-              }
-            )
-          ]
+          ...c,
+          appearance: d,
+          tabLayout: l,
+          className: n,
+          selectedIndex: u,
+          children: /* @__PURE__ */ o(
+            P,
+            {
+              tabLayout: l,
+              disabled: s,
+              selectedIndex: u,
+              children: r
+            }
+          )
         }
       )
     }
   );
 }
-function D() {
-  return { SegmentedControl: j, SegmentedControlButton: k };
+function O() {
+  return { SegmentedControl: E, SegmentedControlButton: $ };
 }
 export {
-  j as SegmentedControl,
-  k as SegmentedControlButton,
-  D as createSegmentedControl
+  E as SegmentedControl,
+  $ as SegmentedControlButton,
+  O as createSegmentedControl
 };

package/dist/lib/Components/core/SegmentedControl/SegmentedControlContext.d.ts

@@ -1,8 +1,9 @@
+import { SegmentedControlProps } from './types';
 export type SegmentedControlContextValue = {
     selectedValue: string;
     onSelectedChange: (value: string) => void;
     disabled: boolean;
-    tabLayout: 'fit' | 'fixed';
+    tabLayout: NonNullable<SegmentedControlProps['tabLayout']>;
 };
 declare const SegmentedControlContextProvider: import('react').FC<{
     children: import('react').ReactNode;

package/dist/lib/Components/core/SegmentedControl/SegmentedControlContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlContext.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/SegmentedControl/SegmentedControlContext.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,4BAA4B,GAAG;IACzC,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,KAAK,GAAG,OAAO,CAAC;CAC5B,CAAC;AAEF,QAAA,MAAO,+BAA+B;;;EAC+B,CAAC;AAEtE,eAAO,MAAM,0BAA0B,oCAInC,CAAC;AAEL,OAAO,EAAE,+BAA+B,EAAE,CAAC"}
+{"version":3,"file":"SegmentedControlContext.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/SegmentedControl/SegmentedControlContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,MAAM,MAAM,4BAA4B,GAAG;IACzC,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,WAAW,CAAC,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC;CAC5D,CAAC;AAEF,QAAA,MAAO,+BAA+B;;;EAC+B,CAAC;AAEtE,eAAO,MAAM,0BAA0B,oCAInC,CAAC;AAEL,OAAO,EAAE,+BAA+B,EAAE,CAAC"}

package/dist/lib/Components/core/SegmentedControl/types.d.ts

@@ -21,11 +21,12 @@ export type SegmentedControlProps<T extends SegmentedControlValue = SegmentedCon
     appearance?: 'background' | 'no-background';
     /**
      * Controls how tab widths are calculated.
-     * - "fit": each tab sizes to its content
-     * - "fixed": all tabs share equal width, filling the container
+     * - `"fixed"`: all tabs share equal width, filling the container
+     * - `"fit"`: each tab sizes to its content; when tabs overflow the container,
+     *   left/right arrow buttons appear automatically to scroll them into view
      * @default 'fixed'
      */
-    tabLayout?: 'fit' | 'fixed';
+    tabLayout?: 'fixed' | 'fit';
     /**
      * Segment buttons (SegmentedControlButton).
      */

package/dist/lib/Components/core/SegmentedControl/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/SegmentedControl/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAChF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,qBAAqB,CAC/B,CAAC,SAAS,qBAAqB,GAAG,qBAAqB,IACrD;IACF;;OAEG;IACH,aAAa,EAAE,CAAC,CAAC;IACjB;;OAEG;IACH,gBAAgB,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,YAAY,GAAG,eAAe,CAAC;IAC5C;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AAEtD,KAAK,aAAa,GAAG,aAAa,CAAC;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,MAAM,2BAA2B,CACrC,CAAC,SAAS,qBAAqB,GAAG,qBAAqB,IACrD;IACF;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IACT;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B,GAAG,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/core/SegmentedControl/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAChF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,qBAAqB,CAC/B,CAAC,SAAS,qBAAqB,GAAG,qBAAqB,IACrD;IACF;;OAEG;IACH,aAAa,EAAE,CAAC,CAAC;IACjB;;OAEG;IACH,gBAAgB,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,YAAY,GAAG,eAAe,CAAC;IAC5C;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC5B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;AAEtD,KAAK,aAAa,GAAG,aAAa,CAAC;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,MAAM,MAAM,2BAA2B,CACrC,CAAC,SAAS,qBAAqB,GAAG,qBAAqB,IACrD;IACF;;OAEG;IACH,KAAK,EAAE,CAAC,CAAC;IACT;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B,GAAG,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC"}

package/dist/lib/Components/core/SegmentedControl/usePillElementLayoutEffect.js

@@ -1,40 +1,41 @@
-import { useMemo as h, Children as y, isValidElement as g, useState as u, useLayoutEffect as p, useEffect as v } from "react";
-function R({
+import { useMemo as m, Children as h, isValidElement as y, useState as f, useLayoutEffect as p, useEffect as g } from "react";
+function E({
   ref: n,
   selectedIndex: e,
   children: r
 }) {
-  const [f, c] = u({ width: 0, height: 0, x: 0 }), [a, l] = u(!1);
+  const [u, c] = f({ width: 0, height: 0, x: 0 }), [a, l] = f(!1);
   return p(() => {
     const t = n.current;
-    if (!t) return;
+    if (!t)
+      return;
     const o = () => {
-      const { height: d } = t.getBoundingClientRect(), m = Array.from(t.children).slice(0, -1), i = e >= 0 ? m[e] : void 0;
+      const d = Array.from(t.children).slice(0, -1), i = e >= 0 ? d[e] : void 0;
       c({
         width: i?.offsetWidth ?? 0,
-        height: d,
+        height: t.offsetHeight,
         x: i?.offsetLeft ?? 0
       });
     };
     if (o(), typeof ResizeObserver > "u") return;
     const s = new ResizeObserver(o);
     return s.observe(t), () => s.disconnect();
-  }, [r, e, n]), v(() => {
+  }, [r, e, n]), g(() => {
     const t = requestAnimationFrame(() => {
       l(!0);
     });
     return () => cancelAnimationFrame(t);
-  }, []), { pill: f, isReady: a };
+  }, []), { pill: u, isReady: a };
 }
 function b(n, e) {
-  return h(
-    () => y.toArray(e).findIndex(
-      (r) => g(r) && r.props.value === n
+  return m(
+    () => h.toArray(e).findIndex(
+      (r) => y(r) && r.props.value === n
     ),
     [n, e]
   );
 }
 export {
-  R as usePillElementLayoutEffect,
+  E as usePillElementLayoutEffect,
   b as useSegmentedControlSelectedIndex
 };