period-ui 0.4.8 → 0.4.10

package/dist/components/atoms/badge/badge-styles.d.ts

@@ -2,4 +2,11 @@ export declare const badgeStyles: (props?: ({
     variant?: "alert" | "error" | "info" | "success" | "neutral" | "advertisement" | null | undefined;
     hasShadow?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const badgeDotStyles: (props?: ({
+    variant?: "alert" | "error" | "info" | "success" | "neutral" | "advertisement" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const badgeMediumStyles: (props?: ({
+    variant?: "alert" | "error" | "info" | "success" | "neutral" | "advertisement" | null | undefined;
+    isSingleCharacter?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 //# sourceMappingURL=badge-styles.d.ts.map

package/dist/components/atoms/badge/badge-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge-styles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/badge/badge-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW;;;mFAsBvB,CAAC"}
+{"version":3,"file":"badge-styles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/badge/badge-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW;;;mFAsBvB,CAAC;AAWF,eAAO,MAAM,cAAc;;mFAOzB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;mFAe7B,CAAC"}

package/dist/components/atoms/badge/badge-styles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.badgeStyles = void 0;
+exports.badgeMediumStyles = exports.badgeDotStyles = exports.badgeStyles = void 0;
 const class_variance_authority_1 = require("class-variance-authority");
 exports.badgeStyles = (0, class_variance_authority_1.cva)(['inline-flex flex-row items-center justify-center gap-2', 'w-fit rounded-full', 'py-2 px-4'], {
     variants: {
@@ -22,4 +22,33 @@ exports.badgeStyles = (0, class_variance_authority_1.cva)(['inline-flex flex-row
         hasShadow: false,
     },
 });
+const solidVariantColors = {
+    info: 'bg-blue-01',
+    success: 'bg-green-01',
+    error: 'bg-red-01',
+    alert: 'bg-yellow-01',
+    neutral: 'bg-gray-02',
+    advertisement: 'bg-purple-01',
+};
+exports.badgeDotStyles = (0, class_variance_authority_1.cva)(['inline-block w-2 h-2 rounded-full'], {
+    variants: {
+        variant: solidVariantColors,
+    },
+    defaultVariants: {
+        variant: 'neutral',
+    },
+});
+exports.badgeMediumStyles = (0, class_variance_authority_1.cva)(['inline-flex items-center justify-center', 'h-4 md:h-5 rounded-full py-[1px]'], {
+    variants: {
+        variant: solidVariantColors,
+        isSingleCharacter: {
+            true: 'md:w-5 w-4 px-0',
+            false: 'w-fit px-1',
+        },
+    },
+    defaultVariants: {
+        variant: 'neutral',
+        isSingleCharacter: false,
+    },
+});
 //# sourceMappingURL=badge-styles.js.map

package/dist/components/atoms/badge/badge-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge-styles.js","sourceRoot":"","sources":["../../../../src/components/atoms/badge/badge-styles.ts"],"names":[],"mappings":";;;AAAA,uEAA+C;AAElC,QAAA,WAAW,GAAG,IAAA,8BAAG,EAC5B,CAAC,wDAAwD,EAAE,oBAAoB,EAAE,WAAW,CAAC,EAC7F;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE,yBAAyB;YAC/B,OAAO,EAAE,2BAA2B;YACpC,KAAK,EAAE,uBAAuB;YAC9B,KAAK,EAAE,6BAA6B;YACpC,OAAO,EAAE,yBAAyB;YAClC,aAAa,EAAE,6BAA6B;SAC7C;QACD,SAAS,EAAE;YACT,IAAI,EAAE,kBAAkB;YACxB,KAAK,EAAE,EAAE;SACV;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;QAClB,SAAS,EAAE,KAAK;KACjB;CACF,CACF,CAAC"}
+{"version":3,"file":"badge-styles.js","sourceRoot":"","sources":["../../../../src/components/atoms/badge/badge-styles.ts"],"names":[],"mappings":";;;AAAA,uEAA+C;AAElC,QAAA,WAAW,GAAG,IAAA,8BAAG,EAC5B,CAAC,wDAAwD,EAAE,oBAAoB,EAAE,WAAW,CAAC,EAC7F;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE,yBAAyB;YAC/B,OAAO,EAAE,2BAA2B;YACpC,KAAK,EAAE,uBAAuB;YAC9B,KAAK,EAAE,6BAA6B;YACpC,OAAO,EAAE,yBAAyB;YAClC,aAAa,EAAE,6BAA6B;SAC7C;QACD,SAAS,EAAE;YACT,IAAI,EAAE,kBAAkB;YACxB,KAAK,EAAE,EAAE;SACV;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;QAClB,SAAS,EAAE,KAAK;KACjB;CACF,CACF,CAAC;AAEF,MAAM,kBAAkB,GAAG;IACzB,IAAI,EAAE,YAAY;IAClB,OAAO,EAAE,aAAa;IACtB,KAAK,EAAE,WAAW;IAClB,KAAK,EAAE,cAAc;IACrB,OAAO,EAAE,YAAY;IACrB,aAAa,EAAE,cAAc;CAC9B,CAAC;AAEW,QAAA,cAAc,GAAG,IAAA,8BAAG,EAAC,CAAC,mCAAmC,CAAC,EAAE;IACvE,QAAQ,EAAE;QACR,OAAO,EAAE,kBAAkB;KAC5B;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;KACnB;CACF,CAAC,CAAC;AAEU,QAAA,iBAAiB,GAAG,IAAA,8BAAG,EAClC,CAAC,yCAAyC,EAAE,kCAAkC,CAAC,EAC/E;IACE,QAAQ,EAAE;QACR,OAAO,EAAE,kBAAkB;QAC3B,iBAAiB,EAAE;YACjB,IAAI,EAAE,iBAAiB;YACvB,KAAK,EAAE,YAAY;SACpB;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;QAClB,iBAAiB,EAAE,KAAK;KACzB;CACF,CACF,CAAC"}

package/dist/components/atoms/badge/badge-types.d.ts

@@ -6,4 +6,9 @@ export declare enum BadgeVariant {
     NEUTRAL = "neutral",
     ADVERTISEMENT = "advertisement"
 }
+export declare enum BadgeSize {
+    SMALL = "SMALL",
+    MEDIUM = "MEDIUM",
+    LARGE = "LARGE"
+}
 //# sourceMappingURL=badge-types.d.ts.map

package/dist/components/atoms/badge/badge-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge-types.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/badge/badge-types.ts"],"names":[],"mappings":"AAAA,oBAAY,YAAY;IACtB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,aAAa,kBAAkB;CAChC"}
+{"version":3,"file":"badge-types.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/badge/badge-types.ts"],"names":[],"mappings":"AAAA,oBAAY,YAAY;IACtB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,aAAa,kBAAkB;CAChC;AAED,oBAAY,SAAS;IACnB,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB"}

package/dist/components/atoms/badge/badge-types.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BadgeVariant = void 0;
+exports.BadgeSize = exports.BadgeVariant = void 0;
 var BadgeVariant;
 (function (BadgeVariant) {
     BadgeVariant["INFO"] = "info";
@@ -10,4 +10,10 @@ var BadgeVariant;
     BadgeVariant["NEUTRAL"] = "neutral";
     BadgeVariant["ADVERTISEMENT"] = "advertisement";
 })(BadgeVariant || (exports.BadgeVariant = BadgeVariant = {}));
+var BadgeSize;
+(function (BadgeSize) {
+    BadgeSize["SMALL"] = "SMALL";
+    BadgeSize["MEDIUM"] = "MEDIUM";
+    BadgeSize["LARGE"] = "LARGE";
+})(BadgeSize || (exports.BadgeSize = BadgeSize = {}));
 //# sourceMappingURL=badge-types.js.map

package/dist/components/atoms/badge/badge-types.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge-types.js","sourceRoot":"","sources":["../../../../src/components/atoms/badge/badge-types.ts"],"names":[],"mappings":";;;AAAA,IAAY,YAOX;AAPD,WAAY,YAAY;IACtB,6BAAa,CAAA;IACb,mCAAmB,CAAA;IACnB,+BAAe,CAAA;IACf,+BAAe,CAAA;IACf,mCAAmB,CAAA;IACnB,+CAA+B,CAAA;AACjC,CAAC,EAPW,YAAY,4BAAZ,YAAY,QAOvB"}
+{"version":3,"file":"badge-types.js","sourceRoot":"","sources":["../../../../src/components/atoms/badge/badge-types.ts"],"names":[],"mappings":";;;AAAA,IAAY,YAOX;AAPD,WAAY,YAAY;IACtB,6BAAa,CAAA;IACb,mCAAmB,CAAA;IACnB,+BAAe,CAAA;IACf,+BAAe,CAAA;IACf,mCAAmB,CAAA;IACnB,+CAA+B,CAAA;AACjC,CAAC,EAPW,YAAY,4BAAZ,YAAY,QAOvB;AAED,IAAY,SAIX;AAJD,WAAY,SAAS;IACnB,4BAAe,CAAA;IACf,8BAAiB,CAAA;IACjB,4BAAe,CAAA;AACjB,CAAC,EAJW,SAAS,yBAAT,SAAS,QAIpB"}

package/dist/components/atoms/badge/badge.d.ts

@@ -1,10 +1,12 @@
 import { ComponentProps } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { IconSymbol } from '../billo-icon';
+import { BadgeSize } from './badge-types';
 import { badgeStyles } from './badge-styles';
 type Props = ComponentProps<'span'> & VariantProps<typeof badgeStyles> & {
-    label: string;
+    label?: string;
     icon?: IconSymbol;
+    size?: BadgeSize;
 };
 export declare const Badge: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 export type { Props as BadgeProps };

package/dist/components/atoms/badge/badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EAAkC,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3E,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,KAAK,KAAK,GAAG,cAAc,CAAC,MAAM,CAAC,GACjC,YAAY,CAAC,OAAO,WAAW,CAAC,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEJ,eAAO,MAAM,KAAK,gHAiBhB,CAAC;AAEH,YAAY,EAAE,KAAK,IAAI,UAAU,EAAE,CAAC"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EAAkC,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3E,OAAO,EAAE,SAAS,EAAgB,MAAM,eAAe,CAAC;AACxD,OAAO,EAAqC,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAEhF,KAAK,KAAK,GAAG,cAAc,CAAC,MAAM,CAAC,GACjC,YAAY,CAAC,OAAO,WAAW,CAAC,GAAG;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEJ,eAAO,MAAM,KAAK,gHAoDhB,CAAC;AAEH,YAAY,EAAE,KAAK,IAAI,UAAU,EAAE,CAAC"}

package/dist/components/atoms/badge/badge.js

@@ -8,7 +8,14 @@ const billo_icon_1 = require("../billo-icon");
 const text_1 = require("../text");
 const badge_types_1 = require("./badge-types");
 const badge_styles_1 = require("./badge-styles");
-exports.Badge = (0, react_1.forwardRef)(function Badge({ label, icon, variant = badge_types_1.BadgeVariant.NEUTRAL, hasShadow, className, ...props }, forwardedRef) {
+exports.Badge = (0, react_1.forwardRef)(function Badge({ label, icon, hasShadow, className, size = badge_types_1.BadgeSize.LARGE, variant = badge_types_1.BadgeVariant.NEUTRAL, ...props }, forwardedRef) {
+    if (size === badge_types_1.BadgeSize.SMALL) {
+        return ((0, jsx_runtime_1.jsx)("span", { ref: forwardedRef, "aria-hidden": "true", className: (0, tailwind_utils_1.tailwind)((0, badge_styles_1.badgeDotStyles)({ variant }), className), ...props }));
+    }
+    if (size === badge_types_1.BadgeSize.MEDIUM) {
+        const isSingleCharacter = label?.length === 1;
+        return ((0, jsx_runtime_1.jsx)("span", { ref: forwardedRef, className: (0, tailwind_utils_1.tailwind)((0, badge_styles_1.badgeMediumStyles)({ variant, isSingleCharacter }), className), ...props, children: (0, jsx_runtime_1.jsx)(text_1.Text, { as: "span", variant: text_1.TextVariant.BODY_SEMIBOLD, color: text_1.TextColors.WHITE, children: label }) }));
+    }
     return ((0, jsx_runtime_1.jsxs)("span", { ref: forwardedRef, className: (0, tailwind_utils_1.tailwind)((0, badge_styles_1.badgeStyles)({ variant, hasShadow }), className), ...props, children: [icon && (0, jsx_runtime_1.jsx)(billo_icon_1.BilloIcon, { icon: icon, size: billo_icon_1.IconSize.SM, color: billo_icon_1.IconColor.NONE }), (0, jsx_runtime_1.jsx)(text_1.Text, { as: "span", variant: text_1.TextVariant.BODY, color: text_1.TextColors.NONE, children: label })] }));
 });
 //# sourceMappingURL=badge.js.map

package/dist/components/atoms/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../src/components/atoms/badge/badge.tsx"],"names":[],"mappings":";;;;AAAA,iCAAmD;AAEnD,kEAAyD;AACzD,8CAA2E;AAC3E,kCAAwD;AACxD,+CAA6C;AAC7C,iDAA6C;AAQhC,QAAA,KAAK,GAAG,IAAA,kBAAU,EAAyB,SAAS,KAAK,CACpE,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,GAAG,0BAAY,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAC/E,YAAY;IAEZ,OAAO,CACL,kCACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,yBAAQ,EAAC,IAAA,0BAAW,EAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,CAAC,KAC/D,KAAK,aAER,IAAI,IAAI,uBAAC,sBAAS,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,qBAAQ,CAAC,EAAE,EAAE,KAAK,EAAE,sBAAS,CAAC,IAAI,GAAI,EAE5E,uBAAC,WAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAE,kBAAW,CAAC,IAAI,EAAE,KAAK,EAAE,iBAAU,CAAC,IAAI,YAC9D,KAAK,GACD,IACF,CACR,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../src/components/atoms/badge/badge.tsx"],"names":[],"mappings":";;;;AAAA,iCAAmD;AAEnD,kEAAyD;AACzD,8CAA2E;AAC3E,kCAAwD;AACxD,+CAAwD;AACxD,iDAAgF;AASnE,QAAA,KAAK,GAAG,IAAA,kBAAU,EAAyB,SAAS,KAAK,CACpE,EACE,KAAK,EACL,IAAI,EACJ,SAAS,EACT,SAAS,EACT,IAAI,GAAG,uBAAS,CAAC,KAAK,EACtB,OAAO,GAAG,0BAAY,CAAC,OAAO,EAC9B,GAAG,KAAK,EACT,EACD,YAAY;IAEZ,IAAI,IAAI,KAAK,uBAAS,CAAC,KAAK,EAAE,CAAC;QAC7B,OAAO,CACL,iCACE,GAAG,EAAE,YAAY,iBACL,MAAM,EAClB,SAAS,EAAE,IAAA,yBAAQ,EAAC,IAAA,6BAAc,EAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,KACvD,KAAK,GACT,CACH,CAAC;IACJ,CAAC;IAED,IAAI,IAAI,KAAK,uBAAS,CAAC,MAAM,EAAE,CAAC;QAC9B,MAAM,iBAAiB,GAAG,KAAK,EAAE,MAAM,KAAK,CAAC,CAAC;QAE9C,OAAO,CACL,iCACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,yBAAQ,EAAC,IAAA,gCAAiB,EAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,CAAC,EAAE,SAAS,CAAC,KAC7E,KAAK,YAET,uBAAC,WAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAE,kBAAW,CAAC,aAAa,EAAE,KAAK,EAAE,iBAAU,CAAC,KAAK,YACxE,KAAK,GACD,GACF,CACR,CAAC;IACJ,CAAC;IAED,OAAO,CACL,kCACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,yBAAQ,EAAC,IAAA,0BAAW,EAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,CAAC,KAC/D,KAAK,aAER,IAAI,IAAI,uBAAC,sBAAS,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,qBAAQ,CAAC,EAAE,EAAE,KAAK,EAAE,sBAAS,CAAC,IAAI,GAAI,EAE5E,uBAAC,WAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAE,kBAAW,CAAC,IAAI,EAAE,KAAK,EAAE,iBAAU,CAAC,IAAI,YAC9D,KAAK,GACD,IACF,CACR,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/components/atoms/segmented-button/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './segment';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/atoms/segmented-button/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/segmented-button/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/dist/components/atoms/segmented-button/components/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./segment"), exports);
+//# sourceMappingURL=index.js.map

package/dist/components/atoms/segmented-button/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/atoms/segmented-button/components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,4CAA0B"}

package/dist/components/atoms/segmented-button/components/segment-styles.d.ts

@@ -0,0 +1,9 @@
+import { IconColor } from '../../billo-icon';
+import { TextColors } from '../../text';
+export declare const segmentStyles: (props?: ({
+    isSelected?: boolean | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare function getSegmentTextColor(isSelected: boolean, isDisabled: boolean): TextColors;
+export declare function getSegmentIconColor(isSelected: boolean, isDisabled: boolean): IconColor;
+//# sourceMappingURL=segment-styles.d.ts.map

package/dist/components/atoms/segmented-button/components/segment-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segment-styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/segmented-button/components/segment-styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,eAAO,MAAM,aAAa;;;mFAyBzB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,GAAG,UAAU,CAMxF;AAED,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,GAAG,SAAS,CAMvF"}

package/dist/components/atoms/segmented-button/components/segment-styles.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.segmentStyles = void 0;
+exports.getSegmentTextColor = getSegmentTextColor;
+exports.getSegmentIconColor = getSegmentIconColor;
+const class_variance_authority_1 = require("class-variance-authority");
+const billo_icon_1 = require("../../billo-icon");
+const text_1 = require("../../text");
+exports.segmentStyles = (0, class_variance_authority_1.cva)([
+    'relative z-10 flex items-center justify-center gap-2',
+    'py-[10px] px-4 rounded-full',
+    'transition-colors duration-300 ease-in-out',
+    'cursor-pointer disabled:cursor-not-allowed',
+    'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-01',
+], {
+    variants: {
+        isSelected: {
+            true: 'hover:bg-gray-05 focus-visible:bg-gray-05 disabled:hover:bg-transparent disabled:focus-visible:bg-transparent',
+            false: 'hover:bg-gray-04 focus-visible:bg-gray-04 disabled:hover:bg-transparent disabled:focus-visible:bg-transparent',
+        },
+        fullWidth: {
+            true: 'flex-1',
+            false: '',
+        },
+    },
+    defaultVariants: {
+        isSelected: false,
+        fullWidth: false,
+    },
+});
+function getSegmentTextColor(isSelected, isDisabled) {
+    if (isSelected) {
+        return isDisabled ? text_1.TextColors.BLUE_03 : text_1.TextColors.BLUE;
+    }
+    return isDisabled ? text_1.TextColors.BLACK_03 : text_1.TextColors.BLACK;
+}
+function getSegmentIconColor(isSelected, isDisabled) {
+    if (isSelected) {
+        return isDisabled ? billo_icon_1.IconColor.BLUE_03 : billo_icon_1.IconColor.BLUE_01;
+    }
+    return isDisabled ? billo_icon_1.IconColor.GRAY_03 : billo_icon_1.IconColor.GRAY_01;
+}
+//# sourceMappingURL=segment-styles.js.map

package/dist/components/atoms/segmented-button/components/segment-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segment-styles.js","sourceRoot":"","sources":["../../../../../src/components/atoms/segmented-button/components/segment-styles.ts"],"names":[],"mappings":";;;AA+BA,kDAMC;AAED,kDAMC;AA7CD,uEAA+C;AAC/C,iDAA6C;AAC7C,qCAAwC;AAE3B,QAAA,aAAa,GAAG,IAAA,8BAAG,EAC9B;IACE,sDAAsD;IACtD,6BAA6B;IAC7B,4CAA4C;IAC5C,4CAA4C;IAC5C,sFAAsF;CACvF,EACD;IACE,QAAQ,EAAE;QACR,UAAU,EAAE;YACV,IAAI,EAAE,+GAA+G;YACrH,KAAK,EACH,+GAA+G;SAClH;QACD,SAAS,EAAE;YACT,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,EAAE;SACV;KACF;IACD,eAAe,EAAE;QACf,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,KAAK;KACjB;CACF,CACF,CAAC;AAEF,SAAgB,mBAAmB,CAAC,UAAmB,EAAE,UAAmB;IAC1E,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,UAAU,CAAC,CAAC,CAAC,iBAAU,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAU,CAAC,IAAI,CAAC;IAC3D,CAAC;IAED,OAAO,UAAU,CAAC,CAAC,CAAC,iBAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAU,CAAC,KAAK,CAAC;AAC7D,CAAC;AAED,SAAgB,mBAAmB,CAAC,UAAmB,EAAE,UAAmB;IAC1E,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,UAAU,CAAC,CAAC,CAAC,sBAAS,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAS,CAAC,OAAO,CAAC;IAC5D,CAAC;IAED,OAAO,UAAU,CAAC,CAAC,CAAC,sBAAS,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAS,CAAC,OAAO,CAAC;AAC5D,CAAC"}

package/dist/components/atoms/segmented-button/components/segment.d.ts

@@ -0,0 +1,15 @@
+import { IconSize, IconSymbol } from '../../../../components';
+type Props = {
+    value: string;
+    label: string;
+    icon?: IconSymbol;
+    iconSize: IconSize;
+    width?: number;
+    fullWidth?: boolean;
+    isSelected: boolean;
+    isDisabled: boolean;
+    onSelect: (value: string) => void;
+};
+export declare const Segment: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLButtonElement>>;
+export type { Props as SegmentProps };
+//# sourceMappingURL=segment.d.ts.map

package/dist/components/atoms/segmented-button/components/segment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segment.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/segmented-button/components/segment.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,QAAQ,EAAE,UAAU,EAAqB,MAAM,wBAAwB,CAAC;AAI5F,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,QAAQ,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,OAAO,qGA6BlB,CAAC;AAEH,YAAY,EAAE,KAAK,IAAI,YAAY,EAAE,CAAC"}

package/dist/components/atoms/segmented-button/components/segment.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Segment = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const components_1 = require("../../../../components");
+const tailwind_utils_1 = require("../../../../utils/tailwind-utils");
+const segment_styles_1 = require("./segment-styles");
+exports.Segment = (0, react_1.forwardRef)(function Segment({ value, label, icon, iconSize, width, fullWidth = false, isSelected, isDisabled, onSelect }, forwardedRef) {
+    const textColor = (0, segment_styles_1.getSegmentTextColor)(isSelected, isDisabled);
+    const iconColor = (0, segment_styles_1.getSegmentIconColor)(isSelected, isDisabled);
+    const style = fullWidth ? { minWidth: width } : { width };
+    return ((0, jsx_runtime_1.jsxs)("button", { ref: forwardedRef, type: "button", role: "radio", "aria-checked": isSelected, disabled: isDisabled, onClick: () => onSelect(value), style: style, className: (0, tailwind_utils_1.tailwind)((0, segment_styles_1.segmentStyles)({ isSelected, fullWidth })), children: [icon && (0, jsx_runtime_1.jsx)(components_1.BilloIcon, { icon: icon, size: iconSize, color: iconColor }), (0, jsx_runtime_1.jsx)(components_1.Text, { as: "span", variant: components_1.TextVariant.BODY_SEMIBOLD, color: textColor, children: label })] }));
+});
+//# sourceMappingURL=segment.js.map

package/dist/components/atoms/segmented-button/components/segment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segment.js","sourceRoot":"","sources":["../../../../../src/components/atoms/segmented-button/components/segment.tsx"],"names":[],"mappings":";;;;AAAA,iCAAmC;AACnC,uDAA4F;AAC5F,qEAA4D;AAC5D,qDAA2F;AAc9E,QAAA,OAAO,GAAG,IAAA,kBAAU,EAA2B,SAAS,OAAO,CAC1E,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,GAAG,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,EAC5F,YAAY;IAEZ,MAAM,SAAS,GAAG,IAAA,oCAAmB,EAAC,UAAU,EAAE,UAAU,CAAC,CAAC;IAC9D,MAAM,SAAS,GAAG,IAAA,oCAAmB,EAAC,UAAU,EAAE,UAAU,CAAC,CAAC;IAI9D,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC;IAE1D,OAAO,CACL,oCACE,GAAG,EAAE,YAAY,EACjB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,OAAO,kBACE,UAAU,EACxB,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC9B,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAA,yBAAQ,EAAC,IAAA,8BAAa,EAAC,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC,CAAC,aAE5D,IAAI,IAAI,uBAAC,sBAAS,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,GAAI,EAEpE,uBAAC,iBAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAE,wBAAW,CAAC,aAAa,EAAE,KAAK,EAAE,SAAS,YACjE,KAAK,GACD,IACA,CACV,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/components/atoms/segmented-button/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './segmented-button';
+export * from './segmented-button-types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/atoms/segmented-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/segmented-button/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC"}

package/dist/components/atoms/segmented-button/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components"), exports);
+__exportStar(require("./segmented-button"), exports);
+__exportStar(require("./segmented-button-types"), exports);
+//# sourceMappingURL=index.js.map

package/dist/components/atoms/segmented-button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/atoms/segmented-button/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,+CAA6B;AAC7B,qDAAmC;AACnC,2DAAyC"}

package/dist/components/atoms/segmented-button/segmented-button-styles.d.ts

@@ -0,0 +1,5 @@
+export declare const segmentedButtonStyles: (props?: ({
+    fullWidth?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const segmentedButtonHighlightStyles: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+//# sourceMappingURL=segmented-button-styles.d.ts.map

package/dist/components/atoms/segmented-button/segmented-button-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-button-styles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/segmented-button/segmented-button-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB;;mFAajC,CAAC;AAEF,eAAO,MAAM,8BAA8B,yFAGzC,CAAC"}

package/dist/components/atoms/segmented-button/segmented-button-styles.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.segmentedButtonHighlightStyles = exports.segmentedButtonStyles = void 0;
+const class_variance_authority_1 = require("class-variance-authority");
+exports.segmentedButtonStyles = (0, class_variance_authority_1.cva)(['relative inline-flex items-center rounded-full bg-gray-05 p-1'], {
+    variants: {
+        fullWidth: {
+            true: 'w-full',
+            false: 'w-fit',
+        },
+    },
+    defaultVariants: {
+        fullWidth: false,
+    },
+});
+exports.segmentedButtonHighlightStyles = (0, class_variance_authority_1.cva)([
+    'absolute rounded-full bg-white shadow-white-two pointer-events-none',
+    'transition-all duration-300 ease-in-out',
+]);
+//# sourceMappingURL=segmented-button-styles.js.map

package/dist/components/atoms/segmented-button/segmented-button-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-button-styles.js","sourceRoot":"","sources":["../../../../src/components/atoms/segmented-button/segmented-button-styles.ts"],"names":[],"mappings":";;;AAAA,uEAA+C;AAElC,QAAA,qBAAqB,GAAG,IAAA,8BAAG,EACtC,CAAC,+DAA+D,CAAC,EACjE;IACE,QAAQ,EAAE;QACR,SAAS,EAAE;YACT,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,OAAO;SACf;KACF;IACD,eAAe,EAAE;QACf,SAAS,EAAE,KAAK;KACjB;CACF,CACF,CAAC;AAEW,QAAA,8BAA8B,GAAG,IAAA,8BAAG,EAAC;IAChD,qEAAqE;IACrE,yCAAyC;CAC1C,CAAC,CAAC"}

package/dist/components/atoms/segmented-button/segmented-button-types.d.ts

@@ -0,0 +1,8 @@
+import { IconSymbol } from '../billo-icon';
+export type SegmentedButtonOption = {
+    value: string;
+    label: string;
+    icon?: IconSymbol;
+    disabled?: boolean;
+};
+//# sourceMappingURL=segmented-button-types.d.ts.map

package/dist/components/atoms/segmented-button/segmented-button-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-button-types.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/segmented-button/segmented-button-types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}

package/dist/components/atoms/segmented-button/segmented-button-types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=segmented-button-types.js.map

package/dist/components/atoms/segmented-button/segmented-button-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-button-types.js","sourceRoot":"","sources":["../../../../src/components/atoms/segmented-button/segmented-button-types.ts"],"names":[],"mappings":""}

package/dist/components/atoms/segmented-button/segmented-button.d.ts

@@ -0,0 +1,13 @@
+import { SegmentedButtonOption } from './segmented-button-types';
+type Props = {
+    segments: SegmentedButtonOption[];
+    selected: string;
+    onSelected: (value: string) => void;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    className?: string;
+    ariaLabel?: string;
+};
+export declare const SegmentedButton: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export type { Props as SegmentedButtonProps };
+//# sourceMappingURL=segmented-button.d.ts.map

package/dist/components/atoms/segmented-button/segmented-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-button.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/segmented-button/segmented-button.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAGjE,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,qBAAqB,EAAE,CAAC;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,eAAe,kGAiG1B,CAAC;AAEH,YAAY,EAAE,KAAK,IAAI,oBAAoB,EAAE,CAAC"}

package/dist/components/atoms/segmented-button/segmented-button.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SegmentedButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const components_1 = require("../../../components");
+const tailwind_utils_1 = require("../../../utils/tailwind-utils");
+const window_dimensions_utils_1 = require("../../../utils/window-dimensions-utils");
+const components_2 = require("./components");
+const segmented_button_styles_1 = require("./segmented-button-styles");
+const use_segmented_button_1 = require("./use-segmented-button");
+exports.SegmentedButton = (0, react_1.forwardRef)(function SegmentedButton({ segments, selected, onSelected, disabled = false, fullWidth = false, className, ariaLabel }, forwardedRef) {
+    const { isMobile } = (0, window_dimensions_utils_1.useWindowDimensions)();
+    const iconSize = isMobile ? components_1.IconSize.LG : components_1.IconSize.XL;
+    const { segmentWidth, highlightRect, isHighlightTransitionEnabled, registerSegmentRef, focusSegment, } = (0, use_segmented_button_1.useSegmentedButton)({ segments, selected });
+    const areSegmentsGrowable = fullWidth && segmentWidth !== undefined;
+    function getEnabledSegments() {
+        return segments.filter((segment) => !disabled && !segment.disabled);
+    }
+    function handleSelect(value) {
+        onSelected(value);
+    }
+    function handleKeyDown(event) {
+        const isNext = event.key === 'ArrowRight' || event.key === 'ArrowDown';
+        const isPrevious = event.key === 'ArrowLeft' || event.key === 'ArrowUp';
+        if (!isNext && !isPrevious) {
+            return;
+        }
+        const enabledSegments = getEnabledSegments();
+        if (enabledSegments.length === 0) {
+            return;
+        }
+        event.preventDefault();
+        const currentIndex = enabledSegments.findIndex((segment) => segment.value === selected);
+        const step = isNext ? 1 : -1;
+        const nextIndex = (currentIndex + step + enabledSegments.length) % enabledSegments.length;
+        const nextSegment = enabledSegments[nextIndex];
+        handleSelect(nextSegment.value);
+        focusSegment(nextSegment.value);
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: forwardedRef, role: "radiogroup", "aria-label": ariaLabel, "aria-disabled": disabled || undefined, onKeyDown: handleKeyDown, className: (0, tailwind_utils_1.tailwind)((0, segmented_button_styles_1.segmentedButtonStyles)({ fullWidth }), className), children: [(0, jsx_runtime_1.jsx)("div", { "aria-hidden": "true", className: (0, tailwind_utils_1.tailwind)((0, segmented_button_styles_1.segmentedButtonHighlightStyles)(), !isHighlightTransitionEnabled && 'transition-none'), style: {
+                    top: highlightRect.top,
+                    left: highlightRect.left,
+                    width: highlightRect.width,
+                    height: highlightRect.height,
+                } }), segments.map((segment) => {
+                const isSegmentDisabled = disabled || Boolean(segment.disabled);
+                return ((0, jsx_runtime_1.jsx)(components_2.Segment, { ref: registerSegmentRef(segment.value), value: segment.value, label: segment.label, icon: segment.icon, iconSize: iconSize, width: segmentWidth, fullWidth: areSegmentsGrowable, isSelected: segment.value === selected, isDisabled: isSegmentDisabled, onSelect: handleSelect }, segment.value));
+            })] }));
+});
+//# sourceMappingURL=segmented-button.js.map

package/dist/components/atoms/segmented-button/segmented-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-button.js","sourceRoot":"","sources":["../../../../src/components/atoms/segmented-button/segmented-button.tsx"],"names":[],"mappings":"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"}

package/dist/components/atoms/segmented-button/use-segmented-button.d.ts

@@ -0,0 +1,21 @@
+import { SegmentedButtonOption } from './segmented-button-types';
+type HighlightRect = {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};
+type UseSegmentedButtonProps = {
+    segments: SegmentedButtonOption[];
+    selected: string;
+};
+type UseSegmentedButtonHook = {
+    segmentWidth: number | undefined;
+    highlightRect: HighlightRect;
+    isHighlightTransitionEnabled: boolean;
+    registerSegmentRef: (value: string) => (element: HTMLButtonElement | null) => void;
+    focusSegment: (value: string) => void;
+};
+export declare function useSegmentedButton({ segments, selected, }: UseSegmentedButtonProps): UseSegmentedButtonHook;
+export {};
+//# sourceMappingURL=use-segmented-button.d.ts.map

package/dist/components/atoms/segmented-button/use-segmented-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-segmented-button.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/segmented-button/use-segmented-button.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,KAAK,aAAa,GAAG;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,uBAAuB,GAAG;IAC7B,QAAQ,EAAE,qBAAqB,EAAE,CAAC;IAClC,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,KAAK,sBAAsB,GAAG;IAC5B,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,aAAa,EAAE,aAAa,CAAC;IAC7B,4BAA4B,EAAE,OAAO,CAAC;IACtC,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC,OAAO,EAAE,iBAAiB,GAAG,IAAI,KAAK,IAAI,CAAC;IACnF,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,CAAC;AAkCF,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,QAAQ,GACT,EAAE,uBAAuB,GAAG,sBAAsB,CAsIlD"}

package/dist/components/atoms/segmented-button/use-segmented-button.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSegmentedButton = useSegmentedButton;
+const react_1 = require("react");
+const window_dimensions_utils_1 = require("../../../utils/window-dimensions-utils");
+const INITIAL_HIGHLIGHT_RECT = { top: 0, left: 0, width: 0, height: 0 };
+function getSegmentsContentKey(segments) {
+    return segments
+        .map((segment) => `${segment.value}:${segment.label}:${segment.icon ?? ''}`)
+        .join('|');
+}
+function areRectsEqual(a, b) {
+    return a.top === b.top && a.left === b.left && a.width === b.width && a.height === b.height;
+}
+function useSegmentedButton({ segments, selected, }) {
+    const { isMobile } = (0, window_dimensions_utils_1.useWindowDimensions)();
+    const segmentElementsRef = (0, react_1.useRef)({});
+    const segmentWidthRef = (0, react_1.useRef)(undefined);
+    const [segmentWidth, setSegmentWidthState] = (0, react_1.useState)(undefined);
+    const [highlightRect, setHighlightRect] = (0, react_1.useState)(INITIAL_HIGHLIGHT_RECT);
+    const [isHighlightTransitionEnabled, setIsHighlightTransitionEnabled] = (0, react_1.useState)(false);
+    const segmentsContentKey = getSegmentsContentKey(segments);
+    function setSegmentWidth(width) {
+        segmentWidthRef.current = width;
+        setSegmentWidthState(width);
+    }
+    const measureMaxSegmentWidth = (0, react_1.useCallback)(() => {
+        const widths = segments.map((segment) => segmentElementsRef.current[segment.value]?.offsetWidth ?? 0);
+        return Math.max(0, ...widths);
+    }, [segments]);
+    const revalidateHighlightRect = (0, react_1.useCallback)(() => {
+        const selectedElement = segmentElementsRef.current[selected];
+        if (!selectedElement) {
+            return;
+        }
+        const nextRect = {
+            top: selectedElement.offsetTop,
+            left: selectedElement.offsetLeft,
+            width: selectedElement.offsetWidth,
+            height: selectedElement.offsetHeight,
+        };
+        setHighlightRect((previousRect) => areRectsEqual(previousRect, nextRect) ? previousRect : nextRect);
+    }, [selected]);
+    (0, react_1.useLayoutEffect)(() => {
+        setSegmentWidth(undefined);
+    }, [segmentsContentKey, isMobile]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (segmentWidth !== undefined) {
+            return;
+        }
+        const maxWidth = measureMaxSegmentWidth();
+        if (maxWidth > 0) {
+            setSegmentWidth(maxWidth);
+        }
+    }, [segmentWidth, measureMaxSegmentWidth]);
+    (0, react_1.useLayoutEffect)(() => {
+        revalidateHighlightRect();
+    }, [selected, segmentWidth, revalidateHighlightRect]);
+    const revalidateRef = (0, react_1.useRef)(() => { });
+    revalidateRef.current = function revalidate() {
+        if (segmentWidthRef.current === undefined) {
+            const maxWidth = measureMaxSegmentWidth();
+            if (maxWidth > 0) {
+                setSegmentWidth(maxWidth);
+            }
+        }
+        revalidateHighlightRect();
+    };
+    const resizeObserverRef = (0, react_1.useRef)(null);
+    if (!resizeObserverRef.current && typeof ResizeObserver !== 'undefined') {
+        resizeObserverRef.current = new ResizeObserver(() => revalidateRef.current());
+    }
+    (0, react_1.useEffect)(() => {
+        return () => {
+            resizeObserverRef.current?.disconnect();
+            resizeObserverRef.current = null;
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const frameId = requestAnimationFrame(() => setIsHighlightTransitionEnabled(true));
+        return () => cancelAnimationFrame(frameId);
+    }, []);
+    function registerSegmentRef(value) {
+        return (element) => {
+            const previousElement = segmentElementsRef.current[value];
+            if (previousElement) {
+                resizeObserverRef.current?.unobserve(previousElement);
+            }
+            segmentElementsRef.current[value] = element;
+            if (element) {
+                resizeObserverRef.current?.observe(element);
+            }
+        };
+    }
+    function focusSegment(value) {
+        segmentElementsRef.current[value]?.focus();
+    }
+    return {
+        segmentWidth,
+        highlightRect,
+        isHighlightTransitionEnabled,
+        registerSegmentRef,
+        focusSegment,
+    };
+}
+//# sourceMappingURL=use-segmented-button.js.map

package/dist/components/atoms/segmented-button/use-segmented-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-segmented-button.js","sourceRoot":"","sources":["../../../../src/components/atoms/segmented-button/use-segmented-button.ts"],"names":[],"mappings":"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"}