@ledgerhq/lumen-ui-react 0.1.6 → 0.1.8

package/dist/lib/Components/Divider/Divider.js

@@ -1,25 +1,25 @@
-import { jsx as i } from "react/jsx-runtime";
-import { cn as l } from "../../../libs/utils-shared/dist/index.js";
-const t = ({
+import { jsx as a } from "react/jsx-runtime";
+import { cn as i } from "../../../libs/utils-shared/dist/index.js";
+const l = ({
   ref: o,
   className: e,
   orientation: r = "horizontal",
-  ...a
-}) => /* @__PURE__ */ i(
+  ...t
+}) => /* @__PURE__ */ a(
   "div",
   {
     ref: o,
     role: "separator",
     "aria-orientation": r,
-    className: l(
+    className: i(
       "border-muted-subtle",
       r === "horizontal" ? "w-full border-t" : "h-full border-l",
       e
     ),
-    ...a
+    ...t
   }
 );
-t.displayName = "Divider";
+l.displayName = "Divider";
 export {
-  t as Divider
+  l as Divider
 };

package/dist/lib/Components/Icon/Icon.js

@@ -23,18 +23,18 @@ const l = a("inline-block", {
   className: i = "",
   children: c,
   viewBox: e,
-  xmlns: r,
-  ...t
+  xmlns: t,
+  ...r
 }) => k(
   "svg",
   {
     ref: o,
     fill: "none",
     "aria-hidden": "true",
-    xmlns: r,
+    xmlns: t,
     viewBox: e,
     className: s(i, l({ size: n }), "inline-block"),
-    ...t
+    ...r
   },
   c
 );

package/dist/lib/Components/Icon/createIcon.d.ts

@@ -8,7 +8,7 @@ import { IconProps } from './types';
  * @returns Icon component
  */
 declare const createIcon: (iconName: string, iconJsx: React.ReactElement<SVGProps<SVGSVGElement>>) => {
-    ({ ref, className, ...props }: Omit<IconProps, "children">): import('react').FunctionComponentElement<IconProps>;
+    ({ ref, className, disabled, ...props }: Omit<IconProps, "children">): import('react').FunctionComponentElement<IconProps>;
     displayName: string;
 };
 export default createIcon;

package/dist/lib/Components/Icon/createIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Icon/createIcon.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC;;;;;;GAMG;AACH,QAAA,MAAM,UAAU,aACJ,MAAM,WACP,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;mCAMjD,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;;CAY/B,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"createIcon.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Icon/createIcon.ts"],"names":[],"mappings":"AAKA,OAAO,EAAiB,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC;;;;;;GAMG;AACH,QAAA,MAAM,UAAU,aACJ,MAAM,WACP,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;6CAOjD,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;;CAkB/B,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/lib/Components/Icon/createIcon.js

@@ -1,20 +1,27 @@
-import { toPascalCase as m } from "../../../libs/utils-shared/dist/index.js";
-import { createElement as n } from "react";
-import { Icon as c } from "./Icon.js";
-const d = (r, o) => {
-  const e = ({
-    ref: t,
-    className: a,
-    ...p
-  }) => n(c, {
-    ref: t,
-    className: a,
-    viewBox: o.props.viewBox,
-    ...p,
-    children: o.props.children
-  });
-  return e.displayName = m(r), e;
+import { toPascalCase as c, useDisabledContext as i, cn as l } from "../../../libs/utils-shared/dist/index.js";
+import { createElement as p } from "react";
+import { Icon as d } from "./Icon.js";
+const b = (e, t) => {
+  const r = ({
+    ref: o,
+    className: s,
+    disabled: a,
+    ...m
+  }) => {
+    const n = i({
+      consumerName: e,
+      mergeWith: { disabled: a }
+    });
+    return p(d, {
+      ref: o,
+      className: l(n && "text-disabled", s),
+      viewBox: t.props.viewBox,
+      ...m,
+      children: t.props.children
+    });
+  };
+  return r.displayName = c(e), r;
 };
 export {
-  d as default
+  b as default
 };

package/dist/lib/Components/Icon/types.d.ts

@@ -9,6 +9,11 @@ export type IconProps = {
      * The class name of the icon.
      */
     className?: string;
+    /**
+     * Whether the icon is disabled.
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * The children of the icon.
      */

package/dist/lib/Components/Icon/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Icon/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE7D,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Icon/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE7D,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC"}

package/dist/lib/Components/Link/Link.js

@@ -33,33 +33,33 @@ const k = h(
   className: m,
   children: r,
   appearance: p,
-  size: t = "inherit",
+  size: n = "inherit",
   underline: f = !0,
   icon: u,
   isExternal: i = !1,
-  asChild: n = !1,
+  asChild: t = !1,
   ...d
 }) => {
-  const a = t ? {
+  const a = n ? {
     sm: 16,
     md: 20
-  }[t] : 20, s = u;
+  }[n] : 20, s = u;
   return /* @__PURE__ */ e(
-    n ? b : "a",
+    t ? b : "a",
     {
       ref: l,
       className: v(
         m,
         k({
           appearance: p,
-          size: t,
+          size: n,
           underline: f
         })
       ),
-      target: i && !n ? "_blank" : void 0,
-      rel: i && !n ? "noopener noreferrer" : void 0,
+      target: i && !t ? "_blank" : void 0,
+      rel: i && !t ? "noopener noreferrer" : void 0,
       ...d,
-      children: n ? r : /* @__PURE__ */ o(c, { children: [
+      children: t ? r : /* @__PURE__ */ o(c, { children: [
         s && /* @__PURE__ */ e(s, { size: a, className: "shrink-0" }),
         /* @__PURE__ */ e("span", { className: "min-w-0 truncate", children: r }),
         i && /* @__PURE__ */ o(c, { children: [

package/dist/lib/Components/NavBar/CoinCapsule.js

@@ -2,21 +2,21 @@ import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import { cn as l } from "../../../libs/utils-shared/dist/index.js";
 const i = ({
   ref: s,
-  ticker: a,
-  icon: n,
-  className: t
+  ticker: t,
+  icon: a,
+  className: n
 }) => /* @__PURE__ */ r(
   "div",
   {
     ref: s,
     className: l(
       "flex items-center gap-8 rounded-full bg-muted-transparent py-8 pr-12 pl-8",
-      t
+      n
     ),
     "data-slot": "coin-capsule",
     children: [
-      /* @__PURE__ */ e("span", { className: "flex size-24 shrink-0 items-center justify-center", children: n }),
-      /* @__PURE__ */ e("span", { className: "body-1 text-base select-none", children: a })
+      /* @__PURE__ */ e("span", { className: "flex size-24 shrink-0 items-center justify-center", children: a }),
+      /* @__PURE__ */ e("span", { className: "body-1 text-base select-none", children: t })
     ]
   }
 );

package/dist/lib/Components/NavBar/NavBar.js

@@ -6,15 +6,15 @@ import { IconButton as m } from "../IconButton/IconButton.js";
 import { ArrowLeft as c } from "../../Symbols/Icons/ArrowLeft.js";
 const p = ({
   ref: a,
-  ticker: r,
-  icon: t,
+  ticker: t,
+  icon: r,
   className: e
-}) => /* @__PURE__ */ n("div", { className: "flex flex-1 items-center", "data-slot": "navbar-coin-capsule", children: /* @__PURE__ */ n(i, { ref: a, ticker: r, icon: t, className: e }) });
+}) => /* @__PURE__ */ n("div", { className: "flex flex-1 items-center", "data-slot": "navbar-coin-capsule", children: /* @__PURE__ */ n(i, { ref: a, ticker: t, icon: r, className: e }) });
 p.displayName = "NavBarCoinCapsule";
 const N = ({
   ref: a,
-  onClick: r,
-  "aria-label": t,
+  onClick: t,
+  "aria-label": r,
   className: e
 }) => {
   const { t: s } = l();
@@ -25,9 +25,9 @@ const N = ({
       appearance: "no-background",
       size: "sm",
       icon: c,
-      onClick: r,
+      onClick: t,
       className: o("shrink-0", e),
-      "aria-label": t ?? s("components.navBar.goBackAriaLabel"),
+      "aria-label": r ?? s("components.navBar.goBackAriaLabel"),
       "data-slot": "navbar-back-button"
     }
   );
@@ -35,8 +35,8 @@ const N = ({
 N.displayName = "NavBarBackButton";
 const v = ({
   ref: a,
-  children: r,
-  className: t,
+  children: t,
+  className: r,
   as: e = "h1"
 }) => /* @__PURE__ */ n(
   e,
@@ -44,37 +44,37 @@ const v = ({
     ref: a,
     className: o(
       "min-w-0 flex-1 truncate heading-4-semi-bold text-base",
-      t
+      r
     ),
     "data-slot": "navbar-title",
-    children: r
+    children: t
   }
 );
 v.displayName = "NavBarTitle";
 const B = ({
   ref: a,
-  children: r,
-  className: t,
+  children: t,
+  className: r,
   ...e
 }) => /* @__PURE__ */ n(
   "div",
   {
     ref: a,
-    className: o("ml-auto flex shrink-0 items-center gap-4", t),
+    className: o("ml-auto flex shrink-0 items-center gap-4", r),
     "data-slot": "navbar-trailing",
     ...e,
-    children: r
+    children: t
   }
 );
 B.displayName = "NavBarTrailing";
-const d = ({ ref: a, children: r, className: t, ...e }) => /* @__PURE__ */ n(
+const d = ({ ref: a, children: t, className: r, ...e }) => /* @__PURE__ */ n(
   "nav",
   {
     ref: a,
-    className: o("flex items-center gap-4", t),
+    className: o("flex items-center gap-4", r),
     "data-slot": "navbar",
     ...e,
-    children: r
+    children: t
   }
 );
 d.displayName = "NavBar";

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

@@ -0,0 +1,10 @@
+import { SegmentedControlButtonProps, SegmentedControlProps } from './types';
+export declare function SegmentedControlButton({ value, children, icon: Icon, onClick, className, ...props }: SegmentedControlButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SegmentedControlButton {
+    var displayName: string;
+}
+export declare function SegmentedControl({ selectedValue, onSelectedChange, children, className, disabled, appearance, ...props }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SegmentedControl {
+    var displayName: string;
+}
+//# sourceMappingURL=SegmentedControl.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,2BAA2B,EAC3B,qBAAqB,EACtB,MAAM,SAAS,CAAC;AAMjB,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,QAAQ,EACR,IAAI,EAAE,IAAI,EACV,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,2BAA2B,2CAiC7B;yBAxCe,sBAAsB;;;AA4CtC,wBAAgB,gBAAgB,CAAC,EAC/B,aAAa,EACb,gBAAgB,EAChB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,UAAyB,EACzB,GAAG,KAAK,EACT,EAAE,qBAAqB,2CA2CvB;yBAnDe,gBAAgB"}

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

@@ -0,0 +1,100 @@
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { cn as m } from "../../../libs/utils-shared/dist/index.js";
+import { useRef as p } from "react";
+import { useSegmentedControlContext as b, SegmentedControlContextProvider as x } from "./SegmentedControlContext.js";
+import { useSegmentedControlSelectedIndex as g, usePillElementLayoutEffect as h } from "./usePillElementLayoutEffect.js";
+function v({
+  value: o,
+  children: l,
+  icon: e,
+  onClick: d,
+  className: n,
+  ...a
+}) {
+  const { selectedValue: u, onSelectedChange: i, disabled: r } = b(), t = u === o;
+  return /* @__PURE__ */ s(
+    "button",
+    {
+      type: "button",
+      role: "radio",
+      "aria-checked": t,
+      "aria-disabled": r,
+      disabled: r,
+      onClick: (f) => {
+        r || (i(o), d?.(f));
+      },
+      className: m(
+        "z-10 flex min-w-0 flex-1 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",
+        t ? "body-2-semi-bold text-base" : "body-2 text-muted hover:body-2-semi-bold hover:text-muted-hover",
+        n
+      ),
+      ...a,
+      children: /* @__PURE__ */ c("span", { className: "inline-flex shrink-0 items-center justify-center gap-8", children: [
+        e && /* @__PURE__ */ s(e, { size: 16 }),
+        /* @__PURE__ */ s("span", { children: l })
+      ] })
+    }
+  );
+}
+v.displayName = "SegmentedControlButton";
+function y({
+  selectedValue: o,
+  onSelectedChange: l,
+  children: e,
+  className: d,
+  disabled: n,
+  appearance: a = "background",
+  ...u
+}) {
+  const i = p(null), r = g(
+    o,
+    e
+  ), { pill: t } = h({
+    ref: i,
+    selectedIndex: r,
+    children: e
+  });
+  return /* @__PURE__ */ s(
+    x,
+    {
+      value: { selectedValue: o, onSelectedChange: l, disabled: n },
+      children: /* @__PURE__ */ c(
+        "div",
+        {
+          ...u,
+          ref: i,
+          role: "radiogroup",
+          "aria-disabled": n,
+          className: m(
+            "relative flex w-full flex-row items-center rounded-sm",
+            a === "background" && "bg-surface",
+            d
+          ),
+          children: [
+            e,
+            /* @__PURE__ */ s(
+              "div",
+              {
+                "aria-hidden": !0,
+                className: m(
+                  "pointer-events-none absolute top-0 left-0 z-0 rounded-sm transition-transform duration-250 ease-in-out",
+                  n ? "bg-base-transparent-pressed" : "bg-muted-transparent"
+                ),
+                style: {
+                  width: t.width,
+                  height: t.height,
+                  transform: `translateX(${t.x}px)`
+                }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+y.displayName = "SegmentedControl";
+export {
+  y as SegmentedControl,
+  v as SegmentedControlButton
+};

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

@@ -0,0 +1,12 @@
+export type SegmentedControlContextValue = {
+    selectedValue: string;
+    onSelectedChange: (value: string) => void;
+    disabled?: boolean;
+};
+declare const SegmentedControlContextProvider: import('react').FC<{
+    children: import('react').ReactNode;
+    value: SegmentedControlContextValue;
+}>;
+export declare const useSegmentedControlContext: () => SegmentedControlContextValue;
+export { SegmentedControlContextProvider };
+//# sourceMappingURL=SegmentedControlContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControlContext.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/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,CAAC,EAAE,OAAO,CAAC;CACpB,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/SegmentedControl/SegmentedControlContext.js

@@ -0,0 +1,9 @@
+import { createSafeContext as e } from "../../../libs/utils-shared/dist/index.js";
+const [n, t] = e("SegmentedControl"), r = () => t({
+  consumerName: "SegmentedControlButton",
+  contextRequired: !0
+});
+export {
+  n as SegmentedControlContextProvider,
+  r as useSegmentedControlContext
+};

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

@@ -0,0 +1,3 @@
+export * from './SegmentedControl';
+export type * from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/SegmentedControl/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,mBAAmB,SAAS,CAAC"}

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

@@ -0,0 +1,45 @@
+import { ComponentType, ReactNode, ComponentPropsWithoutRef } from 'react';
+import { IconSize } from '../Icon/types';
+export type SegmentedControlProps = {
+    /**
+     * The value of the currently selected segment (drives the sliding pill).
+     */
+    selectedValue: string;
+    /**
+     * Callback when the selected segment value changes.
+     */
+    onSelectedChange: (value: string) => void;
+    /**
+     * When true, the entire control is disabled (no interaction, selected uses muted styling).
+     */
+    disabled?: boolean;
+    /**
+     * Visual style of the control container: "background" shows the surface bg, "no-background" is transparent.
+     * @default 'background'
+     */
+    appearance?: 'background' | 'no-background';
+    /**
+     * Segment buttons (SegmentedControlButton).
+     */
+    children: ReactNode;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'children'>;
+type IconComponent = ComponentType<{
+    size?: IconSize;
+    className?: string;
+}>;
+export type SegmentedControlButtonProps = {
+    /**
+     * Value for this segment (must be unique among siblings).
+     */
+    value: string;
+    /**
+     * Button label.
+     */
+    children: ReactNode;
+    /**
+     * Optional icon shown to the left of the label (from Symbols).
+     */
+    icon?: IconComponent;
+} & Omit<ComponentPropsWithoutRef<'button'>, 'children'>;
+export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/SegmentedControl/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,YAAY,GAAG,eAAe,CAAC;IAC5C;;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,GAAG;IACxC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB,GAAG,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,CAAC"}

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

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export type PillLayout = {
+    width: number;
+    height: number;
+    x: number;
+};
+type UsePillElementLayoutEffectParams = {
+    ref: React.RefObject<HTMLDivElement | null>;
+    selectedIndex: number;
+    children: React.ReactNode;
+};
+export declare function usePillElementLayoutEffect({ ref, selectedIndex, children, }: UsePillElementLayoutEffectParams): {
+    pill: PillLayout;
+};
+export declare function useSegmentedControlSelectedIndex(selectedValue: string, children: React.ReactNode): number;
+export {};
+//# sourceMappingURL=usePillElementLayoutEffect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"usePillElementLayoutEffect.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/SegmentedControl/usePillElementLayoutEffect.ts"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAElE,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,KAAK,gCAAgC,GAAG;IACtC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC5C,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,wBAAgB,0BAA0B,CAAC,EACzC,GAAG,EACH,aAAa,EACb,QAAQ,GACT,EAAE,gCAAgC,GAAG;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,CA0BzD;AAED,wBAAgB,gCAAgC,CAC9C,aAAa,EAAE,MAAM,EACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,GACxB,MAAM,CAUR"}

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

@@ -0,0 +1,35 @@
+import r, { useMemo as a, useState as m, useLayoutEffect as p } from "react";
+function y({
+  ref: e,
+  selectedIndex: t,
+  children: n
+}) {
+  const [f, l] = m({ width: 0, height: 0, x: 0 });
+  return p(() => {
+    const o = e.current;
+    if (!o) return;
+    const i = () => {
+      const { width: d, height: h } = o.getBoundingClientRect(), u = r.Children.count(n), c = u > 0 ? d / u : 0;
+      l({
+        width: c,
+        height: h,
+        x: t >= 0 ? t * c : 0
+      });
+    };
+    if (i(), typeof ResizeObserver > "u") return;
+    const s = new ResizeObserver(i);
+    return s.observe(o), () => s.disconnect();
+  }, [n, t, e]), { pill: f };
+}
+function v(e, t) {
+  return a(
+    () => r.Children.toArray(t).findIndex(
+      (n) => r.isValidElement(n) && n.props.value === e
+    ),
+    [e, t]
+  );
+}
+export {
+  y as usePillElementLayoutEffect,
+  v as useSegmentedControlSelectedIndex
+};

package/dist/lib/Components/SideBar/SideBar.js

@@ -3,11 +3,11 @@ import { createSafeContext as k, cn as c } from "../../../libs/utils-shared/dist
 import { cva as v } from "class-variance-authority";
 import { t as h } from "../../../node_modules/i18next/dist/esm/i18next.js";
 import { useCallback as B } from "react";
-import { Tooltip as j, TooltipTrigger as P, TooltipContent as R } from "../Tooltip/Tooltip.js";
+import { Tooltip as j, TooltipTrigger as z, TooltipContent as P } from "../Tooltip/Tooltip.js";
 import { useControllableState as x } from "../../../utils/useControllableState/useControllableState.js";
-import { ExpandRight as V } from "../../Symbols/Icons/ExpandRight.js";
-import { ExpandLeft as q } from "../../Symbols/Icons/ExpandLeft.js";
-const [z, S] = k("SideBar"), d = {
+import { ExpandRight as R } from "../../Symbols/Icons/ExpandRight.js";
+import { ExpandLeft as V } from "../../Symbols/Icons/ExpandLeft.js";
+const [q, S] = k("SideBar"), d = {
   root: v(
     [
       "flex h-full flex-col justify-between gap-16 overflow-y-auto rounded-xl bg-muted-transparent p-16",
@@ -72,7 +72,7 @@ const [z, S] = k("SideBar"), d = {
     onChange: s
   });
   return /* @__PURE__ */ a(
-    z,
+    q,
     {
       value: { collapsed: m, setCollapsed: g, active: u, onActiveChange: l },
       children: /* @__PURE__ */ a(
@@ -104,7 +104,7 @@ const F = ({
   }
 );
 F.displayName = "SideBarLeading";
-const J = ({
+const O = ({
   ref: n,
   children: t,
   className: e,
@@ -118,8 +118,8 @@ const J = ({
     children: t
   }
 );
-J.displayName = "SideBarTrailing";
-const K = ({
+O.displayName = "SideBarTrailing";
+const D = ({
   ref: n,
   value: t,
   icon: e,
@@ -159,12 +159,12 @@ const K = ({
     }
   );
   return /* @__PURE__ */ C(j, { open: m ? void 0 : !1, children: [
-    /* @__PURE__ */ a(P, { asChild: !0, children: A }),
-    /* @__PURE__ */ a(R, { side: "right", sideOffset: 8, children: y })
+    /* @__PURE__ */ a(z, { asChild: !0, children: A }),
+    /* @__PURE__ */ a(P, { side: "right", sideOffset: 8, children: y })
   ] });
 };
-K.displayName = "SideBarItem";
-const O = ({
+D.displayName = "SideBarItem";
+const G = ({
   className: n,
   ...t
 }) => {
@@ -173,7 +173,7 @@ const O = ({
     contextRequired: !0
   }), r = B(() => {
     o(!e);
-  }, [e, o]), i = e ? V : q;
+  }, [e, o]), i = e ? R : V;
   return /* @__PURE__ */ a(
     "button",
     {
@@ -189,11 +189,11 @@ const O = ({
     }
   );
 };
-O.displayName = "SideBarCollapseToggle";
+G.displayName = "SideBarCollapseToggle";
 export {
   E as SideBar,
-  O as SideBarCollapseToggle,
-  K as SideBarItem,
+  G as SideBarCollapseToggle,
+  D as SideBarItem,
   F as SideBarLeading,
-  J as SideBarTrailing
+  O as SideBarTrailing
 };

package/dist/lib/Components/Spot/Spot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spot.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Spot/Spot.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,SAAS,EAAY,MAAM,SAAS,CAAC;AA8B9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,IAAI;YAAW,SAAS;;CAyDpC,CAAC"}
+{"version":3,"file":"Spot.d.ts","sourceRoot":"","sources":["../../../../src/lib/Components/Spot/Spot.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,SAAS,EAAY,MAAM,SAAS,CAAC;AA8B9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,IAAI;YAAW,SAAS;;CA2EpC,CAAC"}