ownui-system 0.0.0 → 0.0.2

package/README.md

@@ -1,5 +1,7 @@
 # ownui-design-system
 
+- react, tailwindcss
+
 ## Components
 
 - [x] Button
@@ -20,7 +22,7 @@
 - [x] Drawer
 - [x] Dropdown
 - [x] Accordion
+- [x] BottomSheet
 - [ ] Tooltip
 - [ ] Radio / RadioGroup
 - [ ] Step
-- [ ] BottomSheet

package/dist/components/Accordion/Accordion.stories.d.ts

@@ -0,0 +1,23 @@
+import { Accordion } from '.';
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: typeof Accordion;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        type: {
+            if: {
+                arg: string;
+                exists: true;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Bordered: Story;
+export declare const Splitted: Story;
+export declare const Multi: Story;

package/dist/components/Accordion/accordion.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+interface AccordionProps {
+    defaultSelected?: string | number;
+    type?: "single" | "multi";
+    variant?: "light" | "splitted" | "bordered";
+    onChange?: (selected?: string | number) => void;
+    children: React.ReactNode;
+    color?: string;
+    className?: string;
+}
+declare function Accordion({ className, children, defaultSelected, type, variant, color, onChange, }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+export default Accordion;

package/dist/components/Accordion/index.d.ts

@@ -1,12 +1,2 @@
-/// <reference types="react" />
-interface AccordionProps {
-    defaultSelected?: string | number;
-    type?: "single" | "multi";
-    variant?: "light" | "splitted" | "bordered";
-    onChange?: (selected?: string | number) => void;
-    children: React.ReactNode;
-    color?: string;
-    className?: string;
-}
-declare function Accordion({ className, children, defaultSelected, type, variant, color, onChange, }: AccordionProps): import("react/jsx-runtime").JSX.Element;
-export default Accordion;
+export { default as Accordion } from "./accordion";
+export { default as AccordionItem } from "./accordion-item";

package/dist/components/Badge/Badge.stories.d.ts

@@ -0,0 +1,14 @@
+import Badge from '.';
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: typeof Badge;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithContent: Story;

package/dist/components/BottomSheet/bottomsheet-body.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface BottomSheetBodyProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare function BottomSheetBody({ children, className }: BottomSheetBodyProps): import("react/jsx-runtime").JSX.Element;
+export default BottomSheetBody;

package/dist/components/BottomSheet/bottomsheet-contents.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from "react";
+declare function BottomSheetContents({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export default BottomSheetContents;

package/dist/components/BottomSheet/bottomsheet-context.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+type BottomSheetContextValue = {
+    isOpen: boolean;
+    zIndex: number;
+    color: string;
+    onOpenChange: (isOpen: boolean) => void;
+};
+declare function useContext(): BottomSheetContextValue;
+export declare function useBottomSheetContext(): {
+    BottomSheetProvider: import("react").Provider<BottomSheetContextValue | undefined>;
+    useContext: typeof useContext;
+    Context: import("react").Context<BottomSheetContextValue | undefined>;
+};
+export {};

package/dist/components/BottomSheet/bottomsheet-header.d.ts

@@ -0,0 +1,3 @@
+import { ComponentProps } from "react";
+declare function BottomSheetHeader({ onPointerDown }: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export default BottomSheetHeader;

package/dist/components/BottomSheet/bottomsheet-transition.d.ts

@@ -0,0 +1,23 @@
+export declare function bottomSheetOpenClose(viewPort: string, minHeight: string, maxHeight: string): {
+    opened: {
+        top: string;
+        transition: {
+            duration: number;
+            ease: string;
+        };
+    };
+    closed: {
+        top: string;
+        transition: {
+            duration: number;
+            ease: string;
+        };
+    };
+    expanded: {
+        top: string;
+        transition: {
+            duration: number;
+            ease: string;
+        };
+    };
+};

package/dist/components/BottomSheet/bottomsheet.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export interface BottomSheetProps {
+    isOpen: boolean;
+    removeDimmer?: boolean;
+    zIndex?: number;
+    children: React.ReactNode;
+    color?: string;
+    allowCloseOnClickBackDrop?: boolean;
+    onClose?: () => void;
+    onOpen?: () => void;
+    onOpenChange: (isOpen: boolean) => void;
+}
+declare function BottomSheet({ children, removeDimmer, isOpen, allowCloseOnClickBackDrop, color, zIndex, ...props }: BottomSheetProps): import("react/jsx-runtime").JSX.Element;
+export default BottomSheet;

package/dist/components/BottomSheet/index.d.ts

@@ -0,0 +1 @@
+export { default as BottomSheet } from "./bottomsheet";

package/dist/components/Button/Button.stories.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import('.').ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        type: {
+            if: {
+                arg: string;
+                exists: true;
+            };
+        };
+        children: {
+            control: {
+                type: string;
+            };
+        };
+        disabled: {
+            control: {
+                type: string;
+            };
+        };
+        startContent: {
+            if: {
+                arg: string;
+                exists: true;
+            };
+        };
+        endContent: {
+            if: {
+                arg: string;
+                exists: true;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/Checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<import('.').CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        isChecked: {
+            if: {
+                arg: string;
+                exists: true;
+            };
+        };
+        radius: {
+            control: string;
+            options: string[];
+        };
+        size: {
+            control: string;
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Controlled: Story;
+export declare const Disabled: Story;

package/dist/components/Divider/Divider.stories.d.ts

@@ -0,0 +1,19 @@
+import Divider from '.';
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: typeof Divider;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        direction: {
+            control: string;
+            options: string[];
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/Drawer/Drawer.stories.d.ts

@@ -0,0 +1,36 @@
+import type { StoryObj } from "@storybook/react";
+import Drawer from "./drawer";
+declare const meta: {
+    title: string;
+    component: typeof Drawer;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        children: {
+            if: {
+                arg: string;
+                exists: false;
+            };
+        };
+        isOpen: {
+            if: {
+                arg: string;
+                exists: false;
+            };
+        };
+        motionVariant: {
+            if: {
+                arg: string;
+                exists: true;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const FromTop: Story;
+export declare const FromBottom: Story;
+export declare const FromLeft: Story;
+export declare const FromRight: Story;

package/dist/components/Drawer/drawer-context.d.ts

@@ -1,6 +1,6 @@
 import { HTMLMotionProps } from "framer-motion";
 import { ComponentProps } from "react";
-import Drawer from ".";
+import Drawer from "./drawer";
 type DrawerProps = ComponentProps<typeof Drawer>;
 type DrawerContextValue = {
     isOpen: DrawerProps["isOpen"];

package/dist/components/Drawer/drawer.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { HTMLMotionProps } from "framer-motion";
+export type DrawerProps = {
+    onOpenChange: (isOpen: boolean) => void;
+    isOpen: boolean;
+    children?: React.ReactNode;
+    placement?: "top" | "bottom" | "left" | "right";
+    zIndex?: number;
+    drawerId?: string;
+    allowCloseOnClickBackDrop?: boolean;
+    motionVariant?: HTMLMotionProps<"div">["variants"];
+};
+declare function Drawer({ children, motionVariant, allowCloseOnClickBackDrop, zIndex, placement, drawerId, ...restProps }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+export default Drawer;

package/dist/components/Drawer/index.d.ts

@@ -1,14 +1,2 @@
-/// <reference types="react" />
-import { HTMLMotionProps } from "framer-motion";
-export type DrawerProps = {
-    onOpenChange: (isOpen: boolean) => void;
-    isOpen: boolean;
-    children?: React.ReactNode;
-    placement?: "top" | "bottom" | "left" | "right";
-    zIndex?: number;
-    drawerId?: string;
-    allowCloseOnClickBackDrop?: boolean;
-    motionVariant?: HTMLMotionProps<"div">["variants"];
-};
-declare function Drawer({ children, motionVariant, allowCloseOnClickBackDrop, zIndex, placement, drawerId, ...restProps }: DrawerProps): import("react/jsx-runtime").JSX.Element;
-export default Drawer;
+export { default as Drawer } from "./drawer";
+export { default as DrawerContent } from "./drawer-content";

package/dist/components/Dropdown/Dropdown.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from "@storybook/react";
+import Dropdown from "./dropdown";
+declare const meta: {
+    title: string;
+    component: typeof Dropdown;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/Dropdown/dropdown.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface DropdownProps {
+    selectedItem: string;
+    trigger: React.ReactNode;
+    content?: React.ReactNode;
+    color?: string;
+    onSelect: (name: string) => void;
+}
+declare function Dropdown({ trigger, content, selectedItem, color, onSelect, }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+export default Dropdown;

package/dist/components/Dropdown/index.d.ts

@@ -1,10 +1,3 @@
-/// <reference types="react" />
-interface DropdownProps {
-    selectedItem: string;
-    trigger: React.ReactNode;
-    content?: React.ReactNode;
-    color?: string;
-    onSelect: (name: string) => void;
-}
-declare function Dropdown({ trigger, content, selectedItem, color, onSelect, }: DropdownProps): import("react/jsx-runtime").JSX.Element;
-export default Dropdown;
+export { default as Dropdown } from "./dropdown";
+export { default as DropdownBody } from "./dropdown-body";
+export { default as DropdownItem } from "./dropdown-item";

package/dist/components/Input/Input.stories.d.ts

@@ -0,0 +1,37 @@
+import type { StoryObj } from "@storybook/react";
+import Input from '.';
+declare const meta: {
+    title: string;
+    component: typeof Input;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        inValid: {
+            control: {
+                type: string;
+            };
+        };
+        disabled: {
+            control: {
+                type: string;
+            };
+        };
+        left: {
+            if: {
+                arg: string;
+                exists: true;
+            };
+        };
+        right: {
+            if: {
+                arg: string;
+                exists: true;
+            };
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/Input/Input.style.d.ts

@@ -1,5 +1,5 @@
 export declare const baseStyle = "rounded-[10px] border-solid border-[1px] border-[#ebebeb] box-border px-[15px] py-[10px]";
-export declare const inValidStyle = "rounded-[10px] border-solid border-[1px] border-[#ea3a3d] box-border px-[15px] py-[10px]";
+export declare const inValidStyle = "rounded-[10px] border-solid border-[1px]  border-[#ea3a3d] box-border px-[15px] py-[10px]";
 export declare const inputSizeMap: {
     small: string;
     medium: string;

package/dist/components/Modal/Modal.stories.d.ts

@@ -0,0 +1,12 @@
+import { Modal } from '.';
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: typeof Modal;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/Modal/index.d.ts

@@ -1,19 +1,5 @@
-/// <reference types="react" />
-import { HTMLMotionProps } from "framer-motion";
-export type ModalProps = {
-    onClose?: () => void;
-    onOpen?: () => void;
-    onOpenChange: (isOpen: boolean) => void;
-    isOpen: boolean;
-    removeDimmer?: boolean;
-    hideCloseButton?: boolean;
-    allowCloseOnClickBackDrop?: boolean;
-    children?: React.ReactNode;
-    closeButton?: React.ReactNode;
-    placement?: "top" | "bottom" | "center";
-    zIndex?: number;
-    modalId?: string;
-    motionVariant?: HTMLMotionProps<"div">["variants"];
-};
-declare function Modal({ children, removeDimmer, zIndex, allowCloseOnClickBackDrop, motionVariant, ...restProps }: ModalProps): import("react/jsx-runtime").JSX.Element;
-export default Modal;
+export { default as Modal } from "./modal";
+export { default as ModalContent } from "./modal-content";
+export { default as ModalHeader } from "./modal-header";
+export { default as ModalBody } from "./modal-body";
+export { default as ModalFooter } from "./modal-footer";

package/dist/components/Modal/modal-context.d.ts

@@ -1,6 +1,6 @@
 import { HTMLMotionProps } from "framer-motion";
 import { ComponentProps } from "react";
-import Modal from ".";
+import Modal from "./modal";
 type ModalProps = ComponentProps<typeof Modal>;
 type ModalPropsContextValue = {
     isOpen: ModalProps["isOpen"];

package/dist/components/Modal/modal.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { HTMLMotionProps } from "framer-motion";
+export type ModalProps = {
+    onClose?: () => void;
+    onOpen?: () => void;
+    onOpenChange: (isOpen: boolean) => void;
+    isOpen: boolean;
+    removeDimmer?: boolean;
+    hideCloseButton?: boolean;
+    allowCloseOnClickBackDrop?: boolean;
+    children?: React.ReactNode;
+    closeButton?: React.ReactNode;
+    placement?: "top" | "bottom" | "center";
+    zIndex?: number;
+    modalId?: string;
+    motionVariant?: HTMLMotionProps<"div">["variants"];
+};
+declare function Modal({ children, removeDimmer, zIndex, allowCloseOnClickBackDrop, motionVariant, ...restProps }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export default Modal;

package/dist/components/Popover/Popover.stories.d.ts

@@ -0,0 +1,32 @@
+import { Popover } from '.';
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: typeof Popover;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        children: {
+            if: {
+                arg: string;
+                exists: false;
+            };
+        };
+        isOpen: {
+            if: {
+                arg: string;
+                exists: false;
+            };
+        };
+        motionVariant: {
+            if: {
+                arg: string;
+                exists: true;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/Popover/index.d.ts

@@ -1,29 +1,3 @@
-import { HTMLMotionProps } from "framer-motion";
-import { ReactNode } from "react";
-export interface PopoverProps {
-    id?: string;
-    children: ReactNode[];
-    isOpen: boolean;
-    zIndex?: number;
-    offset?: number;
-    placement?: "top" | "bottom" | "left" | "right";
-    motionVariant?: HTMLMotionProps<"div">["variants"];
-    onOpenChange: (isOpen: boolean) => void;
-}
-/**
- * @example
- * <Popover
- *   isOpen={isOpen}
- *   onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
- *   offset={-70}
- * >
- *   <PopoverTrigger>
- *     <Button className=" bg-slate-600">Open Popover</Button>
- *   </PopoverTrigger>
- *   <PopoverContent>
- *     <div className=" bg-slate-500 p-[10px]">popover content</div>
- *   </PopoverContent>
- * </Popover>
- */
-declare function Popover({ children, id, placement, zIndex, offset, ...props }: PopoverProps): import("react/jsx-runtime").JSX.Element;
-export default Popover;
+export { default as Popover } from "./popover";
+export { default as PopoverContent } from "./popover-content";
+export { default as PopoverTrigger } from "./popover-trigger";

package/dist/components/Popover/popover-context.d.ts

@@ -1,6 +1,6 @@
 import { HTMLMotionProps } from "framer-motion";
 import { ComponentProps } from "react";
-import Popover from ".";
+import Popover from "./popover";
 type PopoverProps = ComponentProps<typeof Popover>;
 type PopoverPropsContextValue = {
     isOpen: PopoverProps["isOpen"];

package/dist/components/Popover/popover.d.ts

@@ -0,0 +1,29 @@
+import { HTMLMotionProps } from "framer-motion";
+import { ReactNode } from "react";
+export interface PopoverProps {
+    id?: string;
+    children: ReactNode[];
+    isOpen: boolean;
+    zIndex?: number;
+    offset?: number;
+    placement?: "top" | "bottom" | "left" | "right";
+    motionVariant?: HTMLMotionProps<"div">["variants"];
+    onOpenChange: (isOpen: boolean) => void;
+}
+/**
+ * @example
+ * <Popover
+ *   isOpen={isOpen}
+ *   onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+ *   offset={-70}
+ * >
+ *   <PopoverTrigger>
+ *     <Button className=" bg-slate-600">Open Popover</Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent>
+ *     <div className=" bg-slate-500 p-[10px]">popover content</div>
+ *   </PopoverContent>
+ * </Popover>
+ */
+declare function Popover({ children, id, placement, zIndex, offset, ...props }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export default Popover;

package/dist/components/Tab/Tab.stories.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from "@storybook/react";
+import Tab from ".";
+declare const meta: {
+    title: string;
+    component: typeof Tab;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Box: Story;
+export declare const TextTabGroup: Story;
+export declare const BoxTabGroup: Story;

package/dist/components/TextArea/TextArea.stories.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import type { StoryObj } from "@storybook/react";
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<Omit<import('.').TextAreaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        size: {
+            control: string;
+            options: string[];
+        };
+        hasError: {
+            control: {
+                type: string;
+            };
+        };
+        disabled: {
+            control: {
+                type: string;
+            };
+        };
+        focusColor: {
+            controls: {
+                type: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;