period-ui 0.1.0

package/dist/components/atoms/drop-down-menu/drop-down-menu.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropDownMenu = DropDownMenu;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const tailwind_utils_1 = require("../../../utils/tailwind-utils");
+const menu_item_1 = require("./components/menu-item");
+function DropDownMenu({ options, className, emptyElement, selectedIDs = [], variant = menu_item_1.MenuItemVariant.DEFAULT, }) {
+    function handleIsSelected(optionID) {
+        return selectedIDs.includes(optionID);
+    }
+    const uniqueOptions = options?.filter((_option, index, self) => self.findIndex((option) => option.value === _option.value) === index);
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, tailwind_utils_1.tailwind)('absolute z-30 mt-2 shadow-black-01 rounded-lg w-fit', 'overflow-y-auto overflow-x-hidden h-fit', className), children: uniqueOptions && uniqueOptions.length > 0
+            ? uniqueOptions.map((option, key) => {
+                const isLastItem = key === uniqueOptions.length - 1;
+                const isFistItem = key === 0;
+                return ((0, react_1.createElement)(menu_item_1.MenuItem, { ...option, variant: option.variant ?? variant, key: option.value, id: option.value, className: (0, tailwind_utils_1.tailwind)({
+                        'rounded-b-lg': isLastItem,
+                        'rounded-t-lg': isFistItem,
+                        'border-t': !isFistItem,
+                    }), isSelected: handleIsSelected(option.value) }));
+            })
+            : emptyElement }));
+}
+//# sourceMappingURL=drop-down-menu.js.map

package/dist/components/atoms/drop-down-menu/drop-down-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drop-down-menu.js","sourceRoot":"","sources":["../../../../src/components/atoms/drop-down-menu/drop-down-menu.tsx"],"names":[],"mappings":";;AAuBA,oCA6CC;;;AAlED,kEAAyD;AAEzD,sDAAmE;AAmBnE,SAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,SAAS,EACT,YAAY,EACZ,WAAW,GAAG,EAAE,EAChB,OAAO,GAAG,2BAAe,CAAC,OAAO,GAC3B;IACN,SAAS,gBAAgB,CAAC,QAAgB;QACxC,OAAO,WAAW,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC;IAED,MAAM,aAAa,GAAG,OAAO,EAAE,MAAM,CACnC,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,OAAO,CAAC,KAAK,CAAC,KAAK,KAAK,CAC/F,CAAC;IAEF,OAAO,CACL,gCACE,SAAS,EAAE,IAAA,yBAAQ,EACjB,qDAAqD,EACrD,yCAAyC,EACzC,SAAS,CACV,YAEA,aAAa,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC;YACxC,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE;gBAChC,MAAM,UAAU,GAAG,GAAG,KAAK,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;gBACpD,MAAM,UAAU,GAAG,GAAG,KAAK,CAAC,CAAC;gBAC7B,OAAO,CACL,2BAAC,oBAAQ,OACH,MAAM,EACV,OAAO,EAAE,MAAM,CAAC,OAAO,IAAI,OAAO,EAClC,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,EAAE,EAAE,MAAM,CAAC,KAAK,EAChB,SAAS,EAAE,IAAA,yBAAQ,EAAC;wBAClB,cAAc,EAAE,UAAU;wBAC1B,cAAc,EAAE,UAAU;wBAC1B,UAAU,EAAE,CAAC,UAAU;qBACxB,CAAC,EACF,UAAU,EAAE,gBAAgB,CAAC,MAAM,CAAC,KAAK,CAAC,GAC1C,CACH,CAAC;YACJ,CAAC,CAAC;YACJ,CAAC,CAAC,YAAY,GACZ,CACP,CAAC;AACJ,CAAC"}

package/dist/components/atoms/drop-down-menu/drop-down-menu.stories.d.ts

@@ -0,0 +1,16 @@
+import { DropDownMenu } from '@/components';
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<typeof DropDownMenu>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const DefaultIcon: Story;
+export declare const DefaultHelperText: Story;
+export declare const DisableHelperText: Story;
+export declare const DestructiveIcon: Story;
+export declare const Disabled: Story;
+export declare const CheckBox: Story;
+export declare const Destructive: Story;
+export declare const TextButton: Story;
+export declare const MixedVariants: Story;
+//# sourceMappingURL=drop-down-menu.stories.d.ts.map

package/dist/components/atoms/drop-down-menu/drop-down-menu.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drop-down-menu.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/drop-down-menu/drop-down-menu.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAc,MAAM,cAAc,CAAC;AACxD,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAOnC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA+DnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAyBzB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAyB/B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA4B/B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAyB7B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAMzB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAC"}

package/dist/components/atoms/drop-down-menu/drop-down-menu.stories.js

@@ -0,0 +1,222 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MixedVariants = exports.TextButton = exports.Destructive = exports.CheckBox = exports.Disabled = exports.DestructiveIcon = exports.DisableHelperText = exports.DefaultHelperText = exports.DefaultIcon = exports.Default = void 0;
+const components_1 = require("@/components");
+const menu_item_1 = require("./components/menu-item");
+const meta = {
+    title: 'Components/Atoms/DropDownMenu',
+    component: components_1.DropDownMenu,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+const baseArgs = {
+    className: 'flex flex-col max-w-40',
+};
+const defaultOptions = Array.from({ length: 6 }, (_, i) => {
+    const value = `option ${i + 1}`;
+    return { label: value, value: value };
+});
+const disabledOptions = defaultOptions.map((option) => ({
+    ...option,
+    isDisabled: true,
+}));
+const mixedOptions = [
+    {
+        label: 'option 1',
+        value: 'option 1',
+        variant: menu_item_1.MenuItemVariant.DEFAULT,
+    },
+    {
+        label: 'disabled 1',
+        value: 'disabled 1',
+        variant: menu_item_1.MenuItemVariant.DEFAULT,
+        isDisabled: true,
+    },
+    {
+        label: 'option 2',
+        value: 'option 2',
+        variant: menu_item_1.MenuItemVariant.CHECK_BOX,
+    },
+    {
+        label: 'disabled 2',
+        value: 'disabled 2',
+        variant: menu_item_1.MenuItemVariant.CHECK_BOX,
+        isDisabled: true,
+    },
+    {
+        label: 'option 3',
+        value: 'option 3',
+        variant: menu_item_1.MenuItemVariant.DESTRUCTIVE,
+    },
+    {
+        label: 'disabled 3',
+        value: 'disabled 3',
+        variant: menu_item_1.MenuItemVariant.DESTRUCTIVE,
+        isDisabled: true,
+    },
+    {
+        label: 'option 4',
+        value: 'option 4',
+        variant: menu_item_1.MenuItemVariant.TEXT_BUTTON,
+    },
+    {
+        label: 'disabled 4',
+        value: 'disabled 4',
+        variant: menu_item_1.MenuItemVariant.TEXT_BUTTON,
+        isDisabled: true,
+    },
+];
+exports.Default = {
+    args: {
+        ...baseArgs,
+        options: defaultOptions,
+        variant: menu_item_1.MenuItemVariant.DEFAULT,
+    },
+};
+exports.DefaultIcon = {
+    args: {
+        ...baseArgs,
+        options: [
+            {
+                label: 'option 1',
+                value: 'option 1',
+                variant: menu_item_1.MenuItemVariant.DEFAULT,
+                icon: components_1.IconSymbol.PENCIL,
+            },
+            {
+                label: 'option 1',
+                value: 'option 1',
+                variant: menu_item_1.MenuItemVariant.DEFAULT,
+                icon: components_1.IconSymbol.PENCIL,
+            },
+            {
+                label: 'option 2',
+                value: 'option 2',
+                variant: menu_item_1.MenuItemVariant.DEFAULT,
+                icon: components_1.IconSymbol.PENCIL,
+            },
+        ],
+        variant: menu_item_1.MenuItemVariant.DEFAULT,
+    },
+};
+exports.DefaultHelperText = {
+    args: {
+        ...baseArgs,
+        options: [
+            {
+                label: 'option 1',
+                value: 'option 1',
+                variant: menu_item_1.MenuItemVariant.DEFAULT,
+                helperLabel: 'helper',
+            },
+            {
+                label: 'option 1',
+                value: 'option 1',
+                variant: menu_item_1.MenuItemVariant.DEFAULT,
+                helperLabel: 'helper',
+            },
+            {
+                label: 'option 2',
+                value: 'option 2',
+                variant: menu_item_1.MenuItemVariant.DEFAULT,
+                helperLabel: 'helper',
+            },
+        ],
+        variant: menu_item_1.MenuItemVariant.DEFAULT,
+    },
+};
+exports.DisableHelperText = {
+    args: {
+        ...baseArgs,
+        options: [
+            {
+                label: 'option 1',
+                value: 'option 1',
+                isDisabled: true,
+                variant: menu_item_1.MenuItemVariant.DEFAULT,
+                helperLabel: 'helper',
+            },
+            {
+                label: 'option 1',
+                value: 'option 1',
+                isDisabled: true,
+                variant: menu_item_1.MenuItemVariant.DEFAULT,
+                helperLabel: 'helper',
+            },
+            {
+                label: 'option 2',
+                value: 'option 2',
+                isDisabled: true,
+                variant: menu_item_1.MenuItemVariant.DEFAULT,
+                helperLabel: 'helper',
+            },
+        ],
+        variant: menu_item_1.MenuItemVariant.DEFAULT,
+    },
+};
+exports.DestructiveIcon = {
+    args: {
+        ...baseArgs,
+        options: [
+            {
+                label: 'option 1',
+                value: 'option 1',
+                variant: menu_item_1.MenuItemVariant.DESTRUCTIVE,
+                icon: components_1.IconSymbol.PENCIL,
+            },
+            {
+                label: 'option 1',
+                value: 'option 1',
+                variant: menu_item_1.MenuItemVariant.DESTRUCTIVE,
+                icon: components_1.IconSymbol.PENCIL,
+            },
+            {
+                label: 'option 2',
+                value: 'option 2',
+                variant: menu_item_1.MenuItemVariant.DESTRUCTIVE,
+                icon: components_1.IconSymbol.PENCIL,
+            },
+        ],
+        variant: menu_item_1.MenuItemVariant.DESTRUCTIVE,
+    },
+};
+exports.Disabled = {
+    args: {
+        ...baseArgs,
+        options: disabledOptions,
+        variant: menu_item_1.MenuItemVariant.DEFAULT,
+    },
+};
+exports.CheckBox = {
+    args: {
+        ...baseArgs,
+        options: defaultOptions,
+        variant: menu_item_1.MenuItemVariant.CHECK_BOX,
+        selectedIDs: ['option 1', 'option 2', 'option 3'],
+    },
+};
+exports.Destructive = {
+    args: {
+        ...baseArgs,
+        options: defaultOptions,
+        variant: menu_item_1.MenuItemVariant.DESTRUCTIVE,
+    },
+};
+exports.TextButton = {
+    args: {
+        ...baseArgs,
+        options: defaultOptions,
+        variant: menu_item_1.MenuItemVariant.TEXT_BUTTON,
+    },
+};
+exports.MixedVariants = {
+    args: {
+        ...baseArgs,
+        options: mixedOptions,
+        variant: menu_item_1.MenuItemVariant.TEXT_BUTTON,
+    },
+};
+//# sourceMappingURL=drop-down-menu.stories.js.map

package/dist/components/atoms/drop-down-menu/drop-down-menu.stories.js.map

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

package/dist/components/atoms/drop-down-menu/drop-down-menu.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=drop-down-menu.test.d.ts.map

package/dist/components/atoms/drop-down-menu/drop-down-menu.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drop-down-menu.test.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/drop-down-menu/drop-down-menu.test.tsx"],"names":[],"mappings":""}

package/dist/components/atoms/drop-down-menu/drop-down-menu.test.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const vitest_1 = require("vitest");
+const billo_icon_1 = require("../billo-icon/billo-icon");
+const drop_down_menu_1 = require("../drop-down-menu/drop-down-menu");
+const menu_item_1 = require("./components/menu-item");
+(0, vitest_1.describe)('DropDownMenu', () => {
+    const mockOptions = [
+        {
+            label: 'Option 1',
+            value: 'Option 1',
+            icon: billo_icon_1.IconSymbol.ICON_X,
+            isSelected: false,
+            onClick: vitest_1.vi.fn(),
+        },
+        {
+            label: 'Option 2',
+            value: 'Option 2',
+            isSelected: false,
+            onClick: vitest_1.vi.fn(),
+        },
+        {
+            label: 'Option 3',
+            value: 'Option 3',
+            isSelected: true,
+            onClick: vitest_1.vi.fn(),
+        },
+    ];
+    (0, vitest_1.it)('renders the correct number of options', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(drop_down_menu_1.DropDownMenu, { options: mockOptions, selectedIDs: ['Option 3'] }));
+        const selectedOption = react_1.screen.getByTestId('Option 3');
+        (0, vitest_1.expect)(selectedOption).toBeInTheDocument();
+    });
+    (0, vitest_1.it)('marks the correct option as selected', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(drop_down_menu_1.DropDownMenu, { options: mockOptions, selectedIDs: ['Option 3'] }));
+        const selectedOption = react_1.screen.getByTestId('Option 3');
+        (0, vitest_1.expect)(selectedOption).toHaveClass('bg-gray-04');
+    });
+    (0, vitest_1.it)('calls onClick when an option is clicked', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(drop_down_menu_1.DropDownMenu, { options: mockOptions, selectedIDs: [] }));
+        const option = react_1.screen.getByTestId('Option 1');
+        react_1.fireEvent.click(option);
+        (0, vitest_1.expect)(mockOptions[0].onClick).toHaveBeenCalled();
+    });
+    (0, vitest_1.it)('applies the correct variant to the MenuItem', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(drop_down_menu_1.DropDownMenu, { options: mockOptions, selectedIDs: [], variant: menu_item_1.MenuItemVariant.TEXT_BUTTON }));
+        const option = react_1.screen.getByTestId('Option 1');
+        (0, vitest_1.expect)(option).toHaveClass('py-2');
+    });
+    (0, vitest_1.it)('disables options correctly when isDisabled is true', () => {
+        const disabledOption = mockOptions.map((current) => ({ ...current, isDisabled: true }));
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(drop_down_menu_1.DropDownMenu, { options: disabledOption, selectedIDs: [] }));
+        const option = react_1.screen.getByTestId('Option 1');
+        (0, vitest_1.expect)(option).toBeDisabled();
+    });
+    (0, vitest_1.it)('renders a custom helperLabel when provided', () => {
+        const optionWithHelper = { ...mockOptions[1], helperLabel: 'Helper Text' };
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(drop_down_menu_1.DropDownMenu, { options: [optionWithHelper], selectedIDs: [] }));
+        (0, vitest_1.expect)(react_1.screen.getByText('Helper Text')).toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=drop-down-menu.test.js.map

package/dist/components/atoms/drop-down-menu/drop-down-menu.test.js.map

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

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

@@ -0,0 +1,12 @@
+import { IconColor, IconSize, IconSymbol } from '../../../components';
+type Props = {
+    isDisabled?: boolean;
+    icon: IconSymbol;
+    size?: IconSize;
+    color?: IconColor;
+    onClick?: () => void;
+    className?: string;
+};
+export declare function IconButton({ isDisabled, icon, size, color, onClick, className, }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=icon-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/icon-button/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAGjF,KAAK,KAAK,GAAG;IACX,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EACzB,UAAkB,EAClB,IAAI,EACJ,IAAkB,EAClB,KAAyB,EACzB,OAAO,EACP,SAAS,GACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAmBrB"}

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconButton = IconButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const components_1 = require("../../../components");
+const tailwind_utils_1 = require("../../../utils/tailwind-utils");
+function IconButton({ isDisabled = false, icon, size = components_1.IconSize.LG, color = components_1.IconColor.GRAY_02, onClick, className, }) {
+    const isClickable = Boolean(onClick);
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", disabled: isDisabled, onClick: onClick, className: (0, tailwind_utils_1.tailwind)('inline-flex items-center justify-center', isClickable && 'w-10 h-10', isClickable && 'cursor-pointer', isDisabled && 'cursor-not-allowed', className), children: (0, jsx_runtime_1.jsx)(components_1.BilloIcon, { icon: icon, size: size, color: color }) }));
+}
+//# sourceMappingURL=icon-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../../src/components/atoms/icon-button/icon-button.tsx"],"names":[],"mappings":";;AAYA,gCA0BC;;AAtCD,oDAAiF;AACjF,kEAAyD;AAWzD,SAAgB,UAAU,CAAC,EACzB,UAAU,GAAG,KAAK,EAClB,IAAI,EACJ,IAAI,GAAG,qBAAQ,CAAC,EAAE,EAClB,KAAK,GAAG,sBAAS,CAAC,OAAO,EACzB,OAAO,EACP,SAAS,GACH;IACN,MAAM,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IAErC,OAAO,CACL,mCACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,IAAA,yBAAQ,EACjB,yCAAyC,EACzC,WAAW,IAAI,WAAW,EAC1B,WAAW,IAAI,gBAAgB,EAC/B,UAAU,IAAI,oBAAoB,EAClC,SAAS,CACV,YAED,uBAAC,sBAAS,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,GAAI,GAC5C,CACV,CAAC;AACJ,CAAC"}

package/dist/components/atoms/icon-button/icon-button.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { IconButton } from '@/components';
+declare const meta: Meta<typeof IconButton>;
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+export declare const Default: Story;
+export declare const Disabled: Story;
+export declare const CustomSizeAndColor: Story;
+//# sourceMappingURL=icon-button.stories.d.ts.map

package/dist/components/atoms/icon-button/icon-button.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/icon-button/icon-button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAmC,MAAM,cAAc,CAAC;AAE3E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAgCjC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAEzC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC"}

package/dist/components/atoms/icon-button/icon-button.stories.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomSizeAndColor = exports.Disabled = exports.Default = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const test_1 = require("@storybook/test");
+const components_1 = require("@/components");
+const meta = {
+    title: 'Components/Atoms/IconButton',
+    component: components_1.IconButton,
+    argTypes: {
+        icon: {
+            control: { type: 'select' },
+            options: Object.values(components_1.IconSymbol),
+        },
+        size: {
+            control: { type: 'select' },
+            options: Object.values(components_1.IconSize),
+        },
+        color: {
+            control: { type: 'select' },
+            options: Object.values(components_1.IconColor),
+        },
+        isDisabled: {
+            control: 'boolean',
+        },
+        onClick: { action: 'clicked' },
+    },
+    args: {
+        icon: components_1.IconSymbol.MAGNIFYING_GLASS,
+        size: components_1.IconSize.LG,
+        color: components_1.IconColor.GRAY_02,
+        isDisabled: false,
+        onClick: (0, test_1.fn)(),
+    },
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Default = {
+    render: (args) => (0, jsx_runtime_1.jsx)(components_1.IconButton, { ...args }),
+};
+exports.Disabled = {
+    args: {
+        isDisabled: true,
+    },
+    render: (args) => (0, jsx_runtime_1.jsx)(components_1.IconButton, { ...args }),
+};
+exports.CustomSizeAndColor = {
+    args: {
+        size: components_1.IconSize.XL,
+        color: components_1.IconColor.BLUE_02,
+        icon: components_1.IconSymbol.ICON_X,
+    },
+    render: (args) => (0, jsx_runtime_1.jsx)(components_1.IconButton, { ...args }),
+};
+//# sourceMappingURL=icon-button.stories.js.map

package/dist/components/atoms/icon-button/icon-button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.stories.js","sourceRoot":"","sources":["../../../../src/components/atoms/icon-button/icon-button.stories.tsx"],"names":[],"mappings":";;;;AACA,0CAAqC;AACrC,6CAA2E;AAE3E,MAAM,IAAI,GAA4B;IACpC,KAAK,EAAE,6BAA6B;IACpC,SAAS,EAAE,uBAAU;IACrB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,uBAAU,CAAC;SACnC;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,qBAAQ,CAAC;SACjC;QACD,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,sBAAS,CAAC;SAClC;QACD,UAAU,EAAE;YACV,OAAO,EAAE,SAAS;SACnB;QACD,OAAO,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE;KAC/B;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,uBAAU,CAAC,gBAAgB;QACjC,IAAI,EAAE,qBAAQ,CAAC,EAAE;QACjB,KAAK,EAAE,sBAAS,CAAC,OAAO;QACxB,UAAU,EAAE,KAAK;QACjB,OAAO,EAAE,IAAA,SAAE,GAAE;KACd;IACD,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,uBAAC,uBAAU,OAAK,IAAI,GAAI;CAC3C,CAAC;AAEW,QAAA,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,UAAU,EAAE,IAAI;KACjB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,uBAAC,uBAAU,OAAK,IAAI,GAAI;CAC3C,CAAC;AAEW,QAAA,kBAAkB,GAAU;IACvC,IAAI,EAAE;QACJ,IAAI,EAAE,qBAAQ,CAAC,EAAE;QACjB,KAAK,EAAE,sBAAS,CAAC,OAAO;QACxB,IAAI,EAAE,uBAAU,CAAC,MAAM;KACxB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,uBAAC,uBAAU,OAAK,IAAI,GAAI;CAC3C,CAAC"}

package/dist/components/atoms/icon-button/icon-button.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=icon-button.test.d.ts.map

package/dist/components/atoms/icon-button/icon-button.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.test.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/icon-button/icon-button.test.tsx"],"names":[],"mappings":""}

package/dist/components/atoms/icon-button/icon-button.test.js

@@ -0,0 +1,71 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const vitest_1 = require("vitest");
+const icon_button_1 = require("./icon-button");
+const components_1 = require("@/components");
+describe('IconButton component', () => {
+    it('renders the button with an icon element', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { icon: components_1.IconSymbol.ICON_X }));
+        const button = react_1.screen.getByRole('button');
+        const icon = button.querySelector('i');
+        expect(icon).toBeInTheDocument();
+    });
+    it('applies the correct icon class to the icon element', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { icon: components_1.IconSymbol.ICON_X }));
+        const button = react_1.screen.getByRole('button');
+        const icon = button.querySelector('i');
+        expect(icon).toHaveClass(components_1.IconSymbol.ICON_X);
+    });
+    it('applies default classes when no props are passed', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { icon: components_1.IconSymbol.ICON_X }));
+        const button = react_1.screen.getByRole('button');
+        expect(button).toHaveClass('inline-flex items-center justify-center');
+    });
+    it('disables the button when isDisabled is true', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { icon: components_1.IconSymbol.ICON_X, isDisabled: true }));
+        const button = react_1.screen.getByRole('button');
+        expect(button).toBeDisabled();
+    });
+    it('applies the correct disabled class when isDisabled is true', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { icon: components_1.IconSymbol.ICON_X, isDisabled: true }));
+        const button = react_1.screen.getByRole('button');
+        expect(button).toHaveClass('cursor-not-allowed');
+    });
+    it('calls onClick handler when clicked', async () => {
+        const handleClick = vitest_1.vi.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { icon: components_1.IconSymbol.ICON_X, onClick: handleClick }));
+        const button = react_1.screen.getByRole('button');
+        await user_event_1.default.click(button);
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    it('does not call onClick when disabled', async () => {
+        const handleClick = vitest_1.vi.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { icon: components_1.IconSymbol.ICON_X, isDisabled: true, onClick: handleClick }));
+        const button = react_1.screen.getByRole('button');
+        await user_event_1.default.click(button);
+        expect(handleClick).not.toHaveBeenCalled();
+    });
+    it('renders with a custom size and color', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { icon: components_1.IconSymbol.ICON_X, size: components_1.IconSize.XL, color: components_1.IconColor.BLUE_02 }));
+        const button = react_1.screen.getByRole('button');
+        expect(button).toBeInTheDocument();
+    });
+    it('supports custom className', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { icon: components_1.IconSymbol.ICON_X, className: "test-class" }));
+        const button = react_1.screen.getByRole('button');
+        expect(button).toHaveClass('test-class');
+    });
+    it('is focusable and responds to keyboard tab', async () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { icon: components_1.IconSymbol.ICON_X }));
+        const button = react_1.screen.getByRole('button');
+        await user_event_1.default.tab();
+        expect(button).toHaveFocus();
+    });
+});
+//# sourceMappingURL=icon-button.test.js.map

package/dist/components/atoms/icon-button/icon-button.test.js.map

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

package/dist/components/atoms/search-bar/components/clear-button.d.ts

@@ -0,0 +1,10 @@
+import { IconSize } from '../../billo-icon/billo-icon';
+type Props = {
+    isDisabled: boolean;
+    size?: IconSize;
+    onClick: () => void;
+    className?: string;
+};
+export declare function ClearButton({ isDisabled, size, onClick, className, }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=clear-button.d.ts.map

package/dist/components/atoms/search-bar/components/clear-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clear-button.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/search-bar/components/clear-button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAwB,QAAQ,EAAc,MAAM,6BAA6B,CAAC;AAEzF,KAAK,KAAK,GAAG;IACX,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,UAAU,EACV,IAAkB,EAClB,OAAO,EACP,SAAS,GACV,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA6BrB"}

package/dist/components/atoms/search-bar/components/clear-button.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClearButton = ClearButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tailwind_utils_1 = require("../../../../utils/tailwind-utils");
+const billo_icon_1 = require("../../billo-icon/billo-icon");
+function ClearButton({ isDisabled, size = billo_icon_1.IconSize.LG, onClick, className, }) {
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", disabled: isDisabled, onClick: onClick, className: (0, tailwind_utils_1.tailwind)('group', 'w-[34px] h-[34px] md:w-[40px] md:h-[40px]', 'active:bg-gray-04', 'hover:bg-gray-05', 'focus:bg-gray-05 focus:outline-2 focus:outline-offset-2 focus:outline-blue-01', 'rounded-full cursor-pointer', isDisabled && 'cursor-not-allowed', className), children: (0, jsx_runtime_1.jsx)(billo_icon_1.BilloIcon, { icon: billo_icon_1.IconSymbol.ICON_X, size: size, color: isDisabled ? billo_icon_1.IconColor.GRAY_03 : billo_icon_1.IconColor.GRAY_02, touchTarget: "w-[34px] h-[34px] md:w-[40px] md:h-[40px]", className: (0, tailwind_utils_1.tailwind)(!isDisabled &&
+                'group-active:text-gray-01 group-hover:text-gray-01 group-focus:text-gray-01') }) }));
+}
+//# sourceMappingURL=clear-button.js.map

package/dist/components/atoms/search-bar/components/clear-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clear-button.js","sourceRoot":"","sources":["../../../../../src/components/atoms/search-bar/components/clear-button.tsx"],"names":[],"mappings":";;AAUA,kCAkCC;;AA5CD,qEAA4D;AAC5D,4DAAyF;AASzF,SAAgB,WAAW,CAAC,EAC1B,UAAU,EACV,IAAI,GAAG,qBAAQ,CAAC,EAAE,EAClB,OAAO,EACP,SAAS,GACH;IACN,OAAO,CACL,mCACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,IAAA,yBAAQ,EACjB,OAAO,EACP,2CAA2C,EAC3C,mBAAmB,EACnB,kBAAkB,EAClB,+EAA+E,EAC/E,6BAA6B,EAC7B,UAAU,IAAI,oBAAoB,EAClC,SAAS,CACV,YAED,uBAAC,sBAAS,IACR,IAAI,EAAE,uBAAU,CAAC,MAAM,EACvB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,sBAAS,CAAC,OAAO,CAAC,CAAC,CAAC,sBAAS,CAAC,OAAO,EACzD,WAAW,EAAC,2CAA2C,EACvD,SAAS,EAAE,IAAA,yBAAQ,EACjB,CAAC,UAAU;gBACT,6EAA6E,CAChF,GACD,GACK,CACV,CAAC;AACJ,CAAC"}

package/dist/components/atoms/search-bar/search-bar.d.ts

@@ -0,0 +1,12 @@
+import { ChangeEvent } from 'react';
+type Props = {
+    isDisabled?: boolean;
+    value: string;
+    placeholder?: string;
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    onClear: () => void;
+    className?: string;
+};
+export declare function SearchBar({ isDisabled, value, placeholder, onChange, onClear, className, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=search-bar.d.ts.map

package/dist/components/atoms/search-bar/search-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-bar.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/search-bar/search-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAOpC,KAAK,KAAK,GAAG;IACX,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,UAAkB,EAClB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAO,EACP,SAAS,GACV,EAAE,KAAK,2CA+CP"}

package/dist/components/atoms/search-bar/search-bar.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchBar = SearchBar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tailwind_utils_1 = require("../../../utils/tailwind-utils");
+const window_dimensions_utils_1 = require("../../../utils/window-dimensions-utils");
+const billo_icon_1 = require("../billo-icon/billo-icon");
+const text_1 = require("../text/text");
+const clear_button_1 = require("./components/clear-button");
+function SearchBar({ isDisabled = false, value, placeholder, onChange, onClear, className, }) {
+    const { isMobile } = (0, window_dimensions_utils_1.useWindowDimensions)();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, tailwind_utils_1.tailwind)('flex items-center rounded-full', 'w-[272px] md:w-[314px] lg:w-[314px] xl:w-[314px]', 'h-[50px] md:h-[56px] lg:h-[56px] xl:h-[56px]', 'border border-gray-04', value ? 'pl-4 pr-2' : 'px-4', isDisabled && 'bg-gray-05 cursor-not-allowed', !isDisabled &&
+            'hover:border-blue-02 focus-within:border-blue-01 focus-within:hover:border-blue-01', className), children: [(0, jsx_runtime_1.jsx)(billo_icon_1.BilloIcon, { icon: billo_icon_1.IconSymbol.MAGNIFYING_GLASS, size: isMobile ? billo_icon_1.IconSize.LG : billo_icon_1.IconSize.XL, color: isDisabled ? billo_icon_1.IconColor.GRAY_03 : billo_icon_1.IconColor.GRAY_02 }), (0, jsx_runtime_1.jsx)("input", { disabled: isDisabled, type: "text", value: value, placeholder: placeholder, onChange: onChange, className: (0, tailwind_utils_1.tailwind)('flex flex-row items-center py-4 ml-2 w-full', 'bg-transparent outline-none', `${text_1.TextStyle[text_1.TextVariant.BODY]}`, 'text-gray-01', 'placeholder:text-gray-03', 'disabled:text-gray-03 disabled:cursor-not-allowed') }), (0, jsx_runtime_1.jsx)(clear_button_1.ClearButton, { isDisabled: isDisabled, size: isMobile ? billo_icon_1.IconSize.XS : billo_icon_1.IconSize.SM, onClick: onClear, className: (0, tailwind_utils_1.tailwind)(!value && 'hidden') })] }));
+}
+//# sourceMappingURL=search-bar.js.map