@pfct/purple 1.4.0-rc.6 → 1.4.0-rc.7

package/dist/components/index.js

@@ -0,0 +1,40 @@
+"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("./Badge"), exports);
+__exportStar(require("./Button"), exports);
+__exportStar(require("./Card"), exports);
+__exportStar(require("./Comment"), exports);
+__exportStar(require("./Control"), exports);
+__exportStar(require("./DatePicker"), exports);
+__exportStar(require("./Divider"), exports);
+__exportStar(require("./Input"), exports);
+__exportStar(require("./Loading"), exports);
+__exportStar(require("./MiniButton"), exports);
+__exportStar(require("./Navigation"), exports);
+__exportStar(require("./Segment"), exports);
+__exportStar(require("./SelectBox"), exports);
+__exportStar(require("./Chips"), exports);
+__exportStar(require("./Tabs"), exports);
+__exportStar(require("./Tag"), exports);
+__exportStar(require("./Title"), exports);
+__exportStar(require("./BottomSheet"), exports);
+__exportStar(require("./Modal"), exports);
+__exportStar(require("./Modal/BaseModal"), exports);
+__exportStar(require("./ToastMessage"), exports);
+__exportStar(require("./Tooltip"), exports);
+__exportStar(require("./ui/bottomSheet"), exports);
+__exportStar(require("./ui/button"), exports);

package/dist/components/ui/bottomSheet.js

@@ -0,0 +1,155 @@
+"use strict";
+'use client';
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BottomSheetNavigationHeader = exports.BottomSheetTitleHeader = exports.BottomSheetCloseIcon = exports.BottomSheetFooter = exports.BottomSheetBody = exports.BottomSheetTitle = exports.BottomSheetHeader = exports.BottomSheetDescription = exports.BottomSheetContent = exports.BottomSheetClose = exports.BottomSheetTrigger = exports.BottomSheet = void 0;
+const React = __importStar(require("react"));
+const useMediaQuery_1 = require("@/lib/useMediaQuery");
+const dialog_1 = require("@/components/ui/dialog");
+const drawer_1 = require("@/components/ui/drawer");
+const utils_1 = require("@/lib/utils");
+const lucide_react_1 = require("lucide-react");
+const BottomSheetContext = React.createContext({
+    isDesktop: false,
+    fullScreen: false,
+});
+const useBottomSheetContext = () => {
+    const context = React.useContext(BottomSheetContext);
+    if (!context) {
+        throw new Error('BottomSheet components cannot be rendered outside the BottomSheet Context');
+    }
+    return context;
+};
+const BottomSheet = (_a) => {
+    var { children, fullScreen } = _a, props = __rest(_a, ["children", "fullScreen"]);
+    const isDesktop = (0, useMediaQuery_1.useMediaQuery)('(min-width: 768px)');
+    const contextValue = React.useMemo(() => ({
+        isDesktop,
+        fullScreen,
+    }), [isDesktop, fullScreen]);
+    if (contextValue.isDesktop === undefined) {
+        return null;
+    }
+    const BottomSheet = contextValue.isDesktop ? dialog_1.Dialog : drawer_1.Drawer;
+    return (React.createElement(BottomSheetContext.Provider, { value: contextValue },
+        React.createElement(BottomSheet, Object.assign({}, props, (!isDesktop && { autoFocus: true })), children)));
+};
+exports.BottomSheet = BottomSheet;
+const BottomSheetTrigger = (_a) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    const { isDesktop } = useBottomSheetContext();
+    const BottomSheetTrigger = isDesktop ? dialog_1.DialogTrigger : drawer_1.DrawerTrigger;
+    return (React.createElement(BottomSheetTrigger, Object.assign({ className: className }, props), children));
+};
+exports.BottomSheetTrigger = BottomSheetTrigger;
+const BottomSheetClose = (_a) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    const { isDesktop } = useBottomSheetContext();
+    const BottomSheetClose = isDesktop ? dialog_1.DialogClose : drawer_1.DrawerClose;
+    return (React.createElement(BottomSheetClose, Object.assign({ className: className }, props), children));
+};
+exports.BottomSheetClose = BottomSheetClose;
+const BottomSheetContent = (_a) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    const { isDesktop, fullScreen } = useBottomSheetContext();
+    const BottomSheetContent = isDesktop ? dialog_1.DialogContent : drawer_1.DrawerContent;
+    return (React.createElement(BottomSheetContent, Object.assign({ className: (0, utils_1.cn)('flex flex-col', fullScreen &&
+            'h-screen data-[vaul-drawer-direction=bottom]:mt-0 data-[vaul-drawer-direction=bottom]:max-h-screen data-[vaul-drawer-direction=bottom]:rounded-t-none', className) }, props), children));
+};
+exports.BottomSheetContent = BottomSheetContent;
+const BottomSheetDescription = (_a) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    const { isDesktop } = useBottomSheetContext();
+    const BottomSheetDescription = isDesktop ? dialog_1.DialogDescription : drawer_1.DrawerDescription;
+    return (React.createElement(BottomSheetDescription, Object.assign({ className: (0, utils_1.cn)('typo-t3 text-gray-400', className) }, props), children));
+};
+exports.BottomSheetDescription = BottomSheetDescription;
+const BottomSheetHeader = (_a) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    const { isDesktop } = useBottomSheetContext();
+    const BottomSheetHeader = isDesktop ? dialog_1.DialogHeader : drawer_1.DrawerHeader;
+    return (React.createElement(BottomSheetHeader, Object.assign({ className: (0, utils_1.cn)('pt-6.25', className) }, props), children));
+};
+exports.BottomSheetHeader = BottomSheetHeader;
+const BottomSheetTitle = (_a) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    const { isDesktop } = useBottomSheetContext();
+    const BottomSheetTitle = isDesktop ? dialog_1.DialogTitle : drawer_1.DrawerTitle;
+    return (React.createElement(BottomSheetTitle, Object.assign({ className: (0, utils_1.cn)('typo-h4 text-gray-900', className) }, props), children));
+};
+exports.BottomSheetTitle = BottomSheetTitle;
+const BottomSheetBody = (_a) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (React.createElement("div", Object.assign({ className: (0, utils_1.cn)('scrollbar-hide mb-20 flex max-w-full overflow-x-hidden overflow-y-auto px-5 text-wrap break-all md:px-0', className) }, props), children));
+};
+exports.BottomSheetBody = BottomSheetBody;
+const BottomSheetFooter = (_a) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    const { isDesktop } = useBottomSheetContext();
+    const BottomSheetFooter = isDesktop ? dialog_1.DialogFooter : drawer_1.DrawerFooter;
+    return (React.createElement(BottomSheetFooter, Object.assign({ className: (0, utils_1.cn)('mb-5', className) }, props), children));
+};
+exports.BottomSheetFooter = BottomSheetFooter;
+const BottomSheetCloseIcon = ({ className }) => {
+    return (React.createElement(BottomSheetClose, { className: (0, utils_1.cn)('data-[state=open]:bg-accent data-[state=open]:text-muted-foreground', 'ring-offset-background rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden disabled:pointer-events-none', "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-6.25", className) },
+        React.createElement(lucide_react_1.XIcon, null),
+        React.createElement("span", { className: "sr-only" }, "Close")));
+};
+exports.BottomSheetCloseIcon = BottomSheetCloseIcon;
+const BottomSheetTitleHeader = ({ className, title, subtitle, right, }) => {
+    return (React.createElement(BottomSheetHeader, { className: (0, utils_1.cn)('flex', className) },
+        React.createElement(BottomSheetTitle, null, title),
+        React.createElement(BottomSheetDescription, null, subtitle),
+        React.createElement("div", { className: "absolute top-6.25 right-5" }, right)));
+};
+exports.BottomSheetTitleHeader = BottomSheetTitleHeader;
+const BottomSheetNavigationHeader = ({ className, title, left, right, }) => {
+    return (React.createElement(BottomSheetHeader, { className: (0, utils_1.cn)('mt-2.5 flex flex-row items-center justify-between py-3.75', className) },
+        left !== undefined ? left : React.createElement(lucide_react_1.ChevronLeft, null),
+        title ? React.createElement(BottomSheetTitle, { className: "typo-h5" }, title) : React.createElement("div", null),
+        right !== undefined ? right : React.createElement(BottomSheetCloseIcon, null)));
+};
+exports.BottomSheetNavigationHeader = BottomSheetNavigationHeader;

package/dist/components/ui/bottomSheet.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BottomSheet } from '@/components/ui/bottomSheet';
+declare const meta: Meta<typeof BottomSheet>;
+export default meta;
+type Story = StoryObj<typeof BottomSheet>;
+export declare const Default: Story;
+export declare const NavigationHeader: Story;
+export declare const CustomHeader: Story;
+export declare const Controlled: Story;
+export declare const LongContent: Story;
+export declare const NoCloseIcon: Story;
+export declare const BottomSheetWithButton: Story;
+export declare const BottomSheetWithDoubleButton: Story;
+export declare const FullScreenBottomSheet: Story;
+export declare const BottomSheetWithNavigation: Story;

package/dist/components/ui/bottomSheet.stories.js

@@ -0,0 +1,333 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BottomSheetWithNavigation = exports.FullScreenBottomSheet = exports.BottomSheetWithDoubleButton = exports.BottomSheetWithButton = exports.NoCloseIcon = exports.LongContent = exports.Controlled = exports.CustomHeader = exports.NavigationHeader = exports.Default = void 0;
+const react_1 = __importStar(require("react"));
+const button_1 = require("@/components/ui/button");
+const bottomSheet_1 = require("@/components/ui/bottomSheet");
+const meta = {
+    title: 'Component/BottomSheet/BottomSheetV2',
+    component: bottomSheet_1.BottomSheet,
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        open: {
+            control: 'boolean',
+        },
+        onOpenChange: {
+            control: undefined,
+        },
+    },
+    tags: ['autodocs'],
+};
+exports.default = meta;
+// Wrapper component to control the open state
+const ControlledBottomSheet = () => {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    return (react_1.default.createElement("div", { className: "flex flex-col items-center gap-4" },
+        react_1.default.createElement(button_1.Button, { onClick: () => setOpen(true) }, "\uBC14\uD140\uC2DC\uD2B8 \uC5F4\uAE30"),
+        react_1.default.createElement(bottomSheet_1.BottomSheet, { open: open, onOpenChange: (open) => setOpen(open) },
+            react_1.default.createElement(bottomSheet_1.BottomSheetContent, null,
+                react_1.default.createElement(bottomSheet_1.BottomSheetTitleHeader, { title: "\uD0C0\uC774\uD2C0\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694", subtitle: "\uC11C\uBE0C \uD0C0\uC774\uD2C0\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694", right: react_1.default.createElement(bottomSheet_1.BottomSheetCloseIcon, null) }),
+                react_1.default.createElement(bottomSheet_1.BottomSheetBody, null, "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694"),
+                react_1.default.createElement(bottomSheet_1.BottomSheetFooter, { className: "pt-2" },
+                    react_1.default.createElement(bottomSheet_1.BottomSheetClose, { asChild: true },
+                        react_1.default.createElement(button_1.Button, null, "Cancel")))))));
+};
+// Default story with automatic opening
+exports.Default = {
+    render: () => (react_1.default.createElement(bottomSheet_1.BottomSheet, null,
+        react_1.default.createElement(bottomSheet_1.BottomSheetTrigger, { asChild: true },
+            react_1.default.createElement(button_1.Button, null, "\uBC14\uD140\uC2DC\uD2B8 \uC5F4\uAE30")),
+        react_1.default.createElement(bottomSheet_1.BottomSheetContent, null,
+            react_1.default.createElement(bottomSheet_1.BottomSheetTitleHeader, { title: "\uD0C0\uC774\uD2C0\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694", subtitle: "\uC11C\uBE0C \uD0C0\uC774\uD2C0\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694", right: react_1.default.createElement(bottomSheet_1.BottomSheetCloseIcon, null) }),
+            react_1.default.createElement(bottomSheet_1.BottomSheetBody, null, "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694")))),
+    args: {},
+    argTypes: {},
+    parameters: {
+        docs: {
+            description: {
+                story: `
+- 바텀시트가 필요할 때 기본적으로 사용되며 사용자가 어떤 행동을 해야하는지 혹은 정보를 명확하게 인지시킬 때 사용합니다.
+- 하단 버튼이 없는 경우는 전체 범위를, 하단 버튼이 있는 경우는 버튼 위까지 스크롤 영역으로 지정합니다. 
+<br/>
+- BottomSheetTrigger 사용해서 바텀 시트 여는 경우`,
+            },
+        },
+    },
+};
+exports.Default.storyName = '바텀시트 - 타이틀';
+exports.NavigationHeader = {
+    render: () => (react_1.default.createElement(bottomSheet_1.BottomSheet, null,
+        react_1.default.createElement(bottomSheet_1.BottomSheetTrigger, { asChild: true },
+            react_1.default.createElement(button_1.Button, null, "\uBC14\uD140\uC2DC\uD2B8 \uC5F4\uAE30")),
+        react_1.default.createElement(bottomSheet_1.BottomSheetContent, null,
+            react_1.default.createElement(bottomSheet_1.BottomSheetNavigationHeader, { title: "\uD0C0\uC774\uD2C0\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694" }),
+            react_1.default.createElement(bottomSheet_1.BottomSheetBody, null, "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694")))),
+    args: {},
+    argTypes: {},
+    parameters: {
+        docs: {
+            description: {
+                story: `
+- 바텀시트 내에서 depth가 발생할 때 혹은 사용자가 어떤 곳에 머물고 있는지 가볍게 알려줄 때 사용합니다.
+<br/>
+- 네비게이션바 아래부터 버튼이 없는 경우는 가장 하단까지, 버튼이 있는 경우는 버튼 위까지 스크롤 영역으로 지정합니다.`,
+            },
+        },
+    },
+};
+exports.NavigationHeader.storyName = '바텀시트 - 네비게이션';
+exports.CustomHeader = {
+    render: () => (react_1.default.createElement(bottomSheet_1.BottomSheet, null,
+        react_1.default.createElement(bottomSheet_1.BottomSheetTrigger, { asChild: true },
+            react_1.default.createElement(button_1.Button, null, "\uBC14\uD140\uC2DC\uD2B8 \uC5F4\uAE30")),
+        react_1.default.createElement(bottomSheet_1.BottomSheetContent, null,
+            react_1.default.createElement(bottomSheet_1.BottomSheetHeader, { className: "items-center" },
+                react_1.default.createElement(bottomSheet_1.BottomSheetTitle, { className: "typo-h2" }, "\uB9C8\uC74C\uB300\uB85C \uCEE4\uC2A4\uD140"),
+                react_1.default.createElement(bottomSheet_1.BottomSheetDescription, { className: "typo-b2 text-red-400" }, "\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4"),
+                react_1.default.createElement(bottomSheet_1.BottomSheetCloseIcon, { className: "absolute top-6.25 left-5" })),
+            react_1.default.createElement(bottomSheet_1.BottomSheetBody, null, "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694")))),
+};
+exports.CustomHeader.storyName = '바텀시트 - 엣지케이스 필요시 커스텀';
+exports.Controlled = {
+    render: () => react_1.default.createElement(ControlledBottomSheet, null),
+    args: {},
+    argTypes: {},
+    parameters: {
+        docs: {
+            description: {
+                story: ` 
+- React 상태 관리 사용해서 바텀 시트 여는 경우`,
+            },
+        },
+    },
+};
+exports.LongContent = {
+    render: () => (react_1.default.createElement(bottomSheet_1.BottomSheet, null,
+        react_1.default.createElement(bottomSheet_1.BottomSheetTrigger, { asChild: true },
+            react_1.default.createElement(button_1.Button, null, "\uBC14\uD140\uC2DC\uD2B8 \uC5F4\uAE30")),
+        react_1.default.createElement(bottomSheet_1.BottomSheetContent, null,
+            react_1.default.createElement(bottomSheet_1.BottomSheetTitleHeader, { title: "\uD0C0\uC774\uD2C0\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694", subtitle: "\uC11C\uBE0C \uD0C0\uC774\uD2C0\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694", right: react_1.default.createElement(bottomSheet_1.BottomSheetCloseIcon, null) }),
+            react_1.default.createElement(bottomSheet_1.BottomSheetBody, null,
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null),
+                "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694",
+                react_1.default.createElement("br", null))))),
+    args: {},
+    argTypes: {},
+    parameters: {
+        docs: {
+            description: {
+                story: `
+- BottomSheetBody 내용이 많아 스크롤이 생기는 경우`,
+            },
+        },
+    },
+};
+exports.NoCloseIcon = {
+    render: () => (react_1.default.createElement(bottomSheet_1.BottomSheet, null,
+        react_1.default.createElement(bottomSheet_1.BottomSheetTrigger, { asChild: true },
+            react_1.default.createElement(button_1.Button, null, "\uBC14\uD140\uC2DC\uD2B8 \uC5F4\uAE30")),
+        react_1.default.createElement(bottomSheet_1.BottomSheetContent, null,
+            react_1.default.createElement(bottomSheet_1.BottomSheetTitleHeader, { title: "\uD0C0\uC774\uD2C0\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694", subtitle: "\uC11C\uBE0C \uD0C0\uC774\uD2C0\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694", right: react_1.default.createElement(bottomSheet_1.BottomSheetCloseIcon, null) })))),
+    args: {},
+    argTypes: {},
+    parameters: {
+        docs: {
+            description: {
+                story: `
+- BottomSheet 우측 상단 CloseIcon이 없는 경우`,
+            },
+        },
+    },
+};
+exports.BottomSheetWithButton = {
+    render: () => (react_1.default.createElement(bottomSheet_1.BottomSheet, null,
+        react_1.default.createElement(bottomSheet_1.BottomSheetTrigger, { asChild: true },
+            react_1.default.createElement(button_1.Button, null, "\uBC14\uD140\uC2DC\uD2B8 \uC5F4\uAE30")),
+        react_1.default.createElement(bottomSheet_1.BottomSheetContent, null,
+            react_1.default.createElement(bottomSheet_1.BottomSheetTitleHeader, { title: "\uD0C0\uC774\uD2C0\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694", subtitle: "\uC11C\uBE0C \uD0C0\uC774\uD2C0\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694" }),
+            react_1.default.createElement(bottomSheet_1.BottomSheetBody, null, "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694"),
+            react_1.default.createElement(bottomSheet_1.BottomSheetFooter, { className: "pt-2" },
+                react_1.default.createElement(bottomSheet_1.BottomSheetClose, { asChild: true },
+                    react_1.default.createElement(button_1.Button, { className: "w-full" }, "\uB2EB\uAE30")))))),
+    args: {},
+    argTypes: {},
+    parameters: {
+        docs: {
+            description: {
+                story: `
+- BottomSheet 하단 Button이 있는 경우`,
+            },
+        },
+    },
+};
+exports.BottomSheetWithDoubleButton = {
+    render: () => (react_1.default.createElement(bottomSheet_1.BottomSheet, null,
+        react_1.default.createElement(bottomSheet_1.BottomSheetTrigger, { asChild: true },
+            react_1.default.createElement(button_1.Button, null, "\uBC14\uD140\uC2DC\uD2B8 \uC5F4\uAE30")),
+        react_1.default.createElement(bottomSheet_1.BottomSheetContent, null,
+            react_1.default.createElement(bottomSheet_1.BottomSheetTitleHeader, { title: "\uD0C0\uC774\uD2C0\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694", subtitle: "\uC11C\uBE0C \uD0C0\uC774\uD2C0\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694" }),
+            react_1.default.createElement(bottomSheet_1.BottomSheetBody, null, "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694"),
+            react_1.default.createElement(bottomSheet_1.BottomSheetFooter, { className: "pt-2" },
+                react_1.default.createElement(bottomSheet_1.BottomSheetClose, { asChild: true },
+                    react_1.default.createElement(button_1.Button, { purpose: "sub", className: "flex-1" }, "\uCDE8\uC18C")),
+                react_1.default.createElement(bottomSheet_1.BottomSheetClose, { asChild: true },
+                    react_1.default.createElement(button_1.Button, { className: "flex-1" }, "\uD655\uC778")))))),
+    args: {},
+    argTypes: {},
+    parameters: {
+        docs: {
+            description: {
+                story: `
+- BottomSheet 하단 Double Button이 있는 경우`,
+            },
+        },
+    },
+};
+exports.FullScreenBottomSheet = {
+    render: () => (react_1.default.createElement(bottomSheet_1.BottomSheet, { fullScreen: true },
+        react_1.default.createElement(bottomSheet_1.BottomSheetTrigger, { asChild: true },
+            react_1.default.createElement(button_1.Button, null, "\uBC14\uD140\uC2DC\uD2B8 \uC5F4\uAE30")),
+        react_1.default.createElement(bottomSheet_1.BottomSheetContent, null,
+            react_1.default.createElement(bottomSheet_1.BottomSheetTitleHeader, { title: "\uD0C0\uC774\uD2C0\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694", subtitle: "\uC11C\uBE0C \uD0C0\uC774\uD2C0\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694", right: react_1.default.createElement(bottomSheet_1.BottomSheetCloseIcon, null) }),
+            react_1.default.createElement(bottomSheet_1.BottomSheetBody, { className: "flex-1 bg-red-100" }, "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694")))),
+    args: {},
+    argTypes: {},
+    parameters: {
+        docs: {
+            description: {
+                story: `
+- BottomSheet가 full screen인 경우`,
+            },
+        },
+    },
+};
+exports.BottomSheetWithNavigation = {
+    render: () => (react_1.default.createElement(bottomSheet_1.BottomSheet, null,
+        react_1.default.createElement(bottomSheet_1.BottomSheetTrigger, { asChild: true },
+            react_1.default.createElement(button_1.Button, null, "\uBC14\uD140\uC2DC\uD2B8 \uC5F4\uAE30")),
+        react_1.default.createElement(bottomSheet_1.BottomSheetContent, null,
+            react_1.default.createElement(bottomSheet_1.BottomSheetNavigationHeader, { title: "\uD0C0\uC774\uD2C0\uC744 \uC785\uB825\uD574\uC8FC\uC138\uC694" }),
+            react_1.default.createElement(bottomSheet_1.BottomSheetBody, { className: "flex-1 bg-red-100" }, "\uB0B4\uC6A9\uC744 \uC785\uB825\uD574 \uC8FC\uC138\uC694")))),
+    args: {},
+    argTypes: {},
+    parameters: {
+        docs: {
+            description: {
+                story: `
+- BottomSheet가 full screen인 경우`,
+            },
+        },
+    },
+};

package/dist/components/ui/button.d.ts

@@ -1,10 +1,12 @@
-import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
     colorType?: "pink" | "red" | "orange" | "yellow" | "lime" | "green" | "mint" | "skyblue" | "blue" | "indigo" | "purple" | "gray" | null | undefined;
     purpose?: "main" | "sub" | null | undefined;
-} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
-declare function Button({ className, asChild, purpose, colorType, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+type ButtonProps = React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
-}): React.JSX.Element;
+};
+declare function Button({ className, asChild, purpose, colorType, ...props }: ButtonProps): React.JSX.Element;
+export type { ButtonProps };
 export { Button, buttonVariants };