ownui-system 0.0.0

package/README.md

@@ -0,0 +1,26 @@
+# ownui-design-system
+
+## Components
+
+- [x] Button
+- [x] Input
+- [x] TextField
+- [x] Spacing
+- [x] Flex
+- [x] Skeleton
+- [x] TextArea
+- [x] Text
+- [x] Dimmed
+- [x] Modal
+- [x] Divider
+- [x] PopOver
+- [x] Tab / TabGroup
+- [x] Badge
+- [x] Checkbox
+- [x] Drawer
+- [x] Dropdown
+- [x] Accordion
+- [ ] Tooltip
+- [ ] Radio / RadioGroup
+- [ ] Step
+- [ ] BottomSheet

package/dist/App.d.ts

@@ -0,0 +1,2 @@
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface AccordionBodyProps {
+    children: React.ReactNode;
+}
+declare function AccordionBody({ children }: AccordionBodyProps): import("react/jsx-runtime").JSX.Element;
+export default AccordionBody;

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+type AccordionContextValue = {
+    selected?: string | number;
+    defaultSelected?: string | number;
+    type?: "single" | "multi";
+    variant: "light" | "splitted" | "bordered";
+    color: string;
+    onChange: (selected?: string | number) => void;
+};
+declare function useContext(): AccordionContextValue;
+export declare function useAccordionContext(): {
+    AccordionProvider: import("react").Provider<AccordionContextValue | undefined>;
+    useContext: typeof useContext;
+    Context: import("react").Context<AccordionContextValue | undefined>;
+};
+export {};

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface AccordionHeaderProps {
+    isOpen: boolean;
+    children: React.ReactNode;
+    icon?: React.ReactNode;
+    onClick?: () => void;
+}
+declare function AccordionHeader({ children, isOpen, icon, onClick, }: AccordionHeaderProps): import("react/jsx-runtime").JSX.Element;
+export default AccordionHeader;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+interface AccordionItemProps {
+    header: React.ReactNode;
+    headerIcon?: React.ReactNode;
+    body: React.ReactNode;
+    value: string | number;
+    className?: string;
+    disabled?: boolean;
+}
+declare function AccordionItem({ className, header, headerIcon, body, value, disabled, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+export default AccordionItem;

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

@@ -0,0 +1,10 @@
+export declare const baseStyle: {
+    light: string;
+    bordered: string;
+    splitted: string;
+};
+export declare const itemStyle: {
+    light: string;
+    bordered: string;
+    splitted: string;
+};

package/dist/components/Accordion/accortion-transition.d.ts

@@ -0,0 +1,24 @@
+export declare const collapse: {
+    enter: {
+        opacity: number;
+        height: string;
+        transition: {
+            height: {
+                duration: number;
+                ease: string;
+            };
+            opacity: {
+                duration: number;
+                ease: string;
+            };
+        };
+    };
+    exit: {
+        opacity: number;
+        height: number;
+        transition: {
+            duration: number;
+            ease: string;
+        };
+    };
+};

package/dist/components/Accordion/index.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/Badge/Badge.style.d.ts

@@ -0,0 +1,26 @@
+export declare const baseStyle = "flex items-center justify-center absolute z-[1] text-center";
+export declare const badgeSizeMap: {
+    small: string;
+    medium: string;
+    large: string;
+};
+export declare const badgePlacementMap: {
+    small: {
+        "top-left": string;
+        "top-right": string;
+        "bottom-left": string;
+        "bottom-right": string;
+    };
+    medium: {
+        "top-left": string;
+        "top-right": string;
+        "bottom-left": string;
+        "bottom-right": string;
+    };
+    large: {
+        "top-left": string;
+        "top-right": string;
+        "bottom-left": string;
+        "bottom-right": string;
+    };
+};

package/dist/components/Badge/badge-transition.d.ts

@@ -0,0 +1,18 @@
+export declare const fadeInOut: {
+    enter: {
+        opacity: number;
+        transition: {
+            opacity: {
+                duration: number;
+                ease: string;
+            };
+        };
+    };
+    exit: {
+        opacity: number;
+        transition: {
+            duration: number;
+            ease: string;
+        };
+    };
+};

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+interface BadgeProps {
+    content?: React.ReactNode;
+    color: string;
+    children?: React.ReactNode;
+    size?: "large" | "medium" | "small";
+    placement?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    className?: string;
+    radius?: string | number;
+    isVisible?: boolean;
+}
+declare function Badge({ className, radius, size, color, placement, content, isVisible, children, }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export default Badge;

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

@@ -0,0 +1,40 @@
+export type BUTTON_SIZE_TYPE = keyof typeof buttonSizeMap;
+export declare const baseStyle = "flex items-center justify-center h-fit transition-all duration-100 ease-linear w-[var(--width)] border-[1px] bg-[var(--bg-color)] border-[var(--border-color)] border-solid disabled:opacity-30";
+export declare const buttonSizeMap: {
+    normal: {
+        xsmall: string;
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+    icon: {
+        xsmall: string;
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+};
+export declare const buttonTextSize: {
+    xsmall: string;
+    small: string;
+    medium: string;
+    large: string;
+    xlarge: string;
+};
+export declare function buttonHoverStyle(variant: "normal" | "line" | "text"): "hover:text-white hover:bg-[var(--border-color)] disabled:bg-[var(--bg-color)] disabled:text-current" | "hover:opacity-[0.9] hover:brightness-[0.9] disabled:bg-[var(--bg-color)]";
+export declare function buttonTypeMap(color: string): {
+    normal: {
+        "--bg-color": string;
+        "--border-color": string;
+    };
+    line: {
+        "--border-color": string;
+        "--bg-color": string;
+    };
+    text: {
+        "--bg-color": string;
+        "--border-color": string;
+    };
+};

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

@@ -0,0 +1,12 @@
+import { ComponentProps, ReactNode } from "react";
+export interface ButtonProps extends ComponentProps<"button"> {
+    size?: "xsmall" | "small" | "medium" | "large" | "xlarge";
+    variant?: "normal" | "line" | "text";
+    width?: string;
+    className?: string;
+    startContent?: ReactNode;
+    endContent?: ReactNode;
+    isOnlyIcon?: boolean;
+}
+declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export default Button;

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

@@ -0,0 +1,28 @@
+export declare const labelStyle = "inline-flex gap-[6px] items-center ";
+export declare const wrapperStyle: {
+    base: string;
+    before: string;
+    after: string;
+};
+export declare const iconStyle = "absolute z-[3]";
+export declare const checkBoxSize: {
+    small: {
+        box: string;
+        icon: string;
+    };
+    medium: {
+        box: string;
+        icon: string;
+    };
+    large: {
+        box: string;
+        icon: string;
+    };
+};
+export declare const radiusSize: {
+    full: string;
+    large: string;
+    medium: string;
+    small: string;
+    none: string;
+};

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

@@ -0,0 +1,6 @@
+type CheckBoxIconProps = {
+    isChecked?: boolean;
+    className?: string;
+};
+declare function CheckIcon({ isChecked, className }: CheckBoxIconProps): import("react/jsx-runtime").JSX.Element;
+export default CheckIcon;

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export interface CheckboxProps {
+    size?: "small" | "medium" | "large";
+    isChecked?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    isRequired?: boolean;
+    radius?: "small" | "medium" | "large" | "full" | "none";
+    className?: string;
+    children?: React.ReactNode;
+    icon?: React.ReactNode;
+    color?: string;
+    name?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
+export default Checkbox;

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

@@ -0,0 +1,3 @@
+export declare const baseStyle = "fixed top-0 left-0 w-full h-full ";
+export declare const dimmerStyle = "bg-[#000000]";
+export declare const withoutDimmerStyle = "bg-[transparent]";

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

@@ -0,0 +1,10 @@
+import { CSSProperties, PropsWithChildren } from "react";
+interface DimmedProps extends PropsWithChildren {
+    className?: string;
+    opacity?: CSSProperties["opacity"];
+    removeDimmer?: boolean;
+    zIndex?: number;
+    onClick?: () => void;
+}
+declare function BackDrop({ children, onClick, className, opacity, removeDimmer, zIndex, }: DimmedProps): import("react/jsx-runtime").JSX.Element;
+export default BackDrop;

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

@@ -0,0 +1,8 @@
+type DividerProps = {
+    size?: string | number;
+    color?: string;
+    direction?: "horizontal" | "vertical";
+    margin?: string;
+};
+declare function Divider({ size, margin, color, direction, }: DividerProps): import("react/jsx-runtime").JSX.Element;
+export default Divider;

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

@@ -0,0 +1,7 @@
+export declare const drawerContentStyle = "fixed bg-[var(--bg-color)] z-[var(--zIndex)]";
+export declare const drawerPlacementStyle: {
+    top: string;
+    bottom: string;
+    left: string;
+    right: string;
+};

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface DrawerContentProps {
+    children: React.ReactNode | ((onClose: () => void) => React.ReactNode);
+    className?: string;
+    color?: string;
+}
+declare function DrawerContent({ children, className, color, }: DrawerContentProps): import("react/jsx-runtime").JSX.Element;
+export default DrawerContent;

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

@@ -0,0 +1,19 @@
+import { HTMLMotionProps } from "framer-motion";
+import { ComponentProps } from "react";
+import Drawer from ".";
+type DrawerProps = ComponentProps<typeof Drawer>;
+type DrawerContextValue = {
+    isOpen: DrawerProps["isOpen"];
+    placement?: "top" | "bottom" | "left" | "right";
+    motionVariant?: HTMLMotionProps<"div">["variants"];
+    zIndex?: number;
+    drawerId: string;
+    onOpenChange: (isOpen: boolean) => void;
+};
+declare function useContext(): DrawerContextValue;
+export declare function useDrawerContext(): {
+    DrawerProvider: import("react").Provider<DrawerContextValue | undefined>;
+    useContext: typeof useContext;
+    Context: import("react").Context<DrawerContextValue | undefined>;
+};
+export {};

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

@@ -0,0 +1,64 @@
+export declare const SlideInOutFromTop: {
+    enter: {
+        y: number;
+        transition: {
+            duration: number;
+            ease: string;
+        };
+    };
+    exit: {
+        y: string;
+        transition: {
+            duration: number;
+            ease: string;
+        };
+    };
+};
+export declare const SlideInOutFromBottom: {
+    enter: {
+        y: number;
+        transition: {
+            duration: number;
+            ease: string;
+        };
+    };
+    exit: {
+        y: string;
+        transition: {
+            duration: number;
+            ease: string;
+        };
+    };
+};
+export declare const SlideInOutFromLeft: {
+    enter: {
+        x: number;
+        transition: {
+            duration: number;
+            ease: string;
+        };
+    };
+    exit: {
+        x: string;
+        transition: {
+            duration: number;
+            ease: string;
+        };
+    };
+};
+export declare const SlideInOutFromRight: {
+    enter: {
+        x: number;
+        transition: {
+            duration: number;
+            ease: string;
+        };
+    };
+    exit: {
+        x: string;
+        transition: {
+            duration: number;
+            ease: string;
+        };
+    };
+};

package/dist/components/Drawer/hook/useDrawer.d.ts

@@ -0,0 +1,20 @@
+import { HTMLMotionProps } from "framer-motion";
+type UseDrawerProps = {
+    isOpen: boolean;
+    placement?: "top" | "bottom" | "left" | "right";
+    motionVariant?: HTMLMotionProps<"div">["variants"];
+    zIndex?: number;
+    drawerId: string;
+    onOpen?: () => void;
+    onClose?: () => void;
+    onOpenChange: (isOpen: boolean) => void;
+};
+declare function useDrawer({ isOpen, placement, motionVariant, zIndex, drawerId, onOpen, onClose, onOpenChange, }: UseDrawerProps): {
+    isOpen: boolean;
+    placement: "bottom" | "left" | "right" | "top" | undefined;
+    motionVariant: import("framer-motion").Variants | undefined;
+    zIndex: number | undefined;
+    drawerId: string;
+    onOpenChange: (isOpen: boolean) => void;
+};
+export default useDrawer;

package/dist/components/Drawer/index.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/Dropdown/dropdown-body.d.ts

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

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type DropdownContentProps = {
+    children: React.ReactNode;
+};
+declare function DropdownContent({ children }: DropdownContentProps): import("react/jsx-runtime").JSX.Element;
+export default DropdownContent;

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+type DropdownContextValue = {
+    isOpen: boolean;
+    selectedItem?: string;
+    color?: string;
+    onSelect: (name: string) => void;
+    onOpenChange: (isOpen: boolean) => void;
+};
+declare function useContext(): DropdownContextValue;
+export declare function useDropdownContext(): {
+    DropdownProvider: import("react").Provider<DropdownContextValue | undefined>;
+    useContext: typeof useContext;
+    Context: import("react").Context<DropdownContextValue | undefined>;
+};
+export {};

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type DropdownItemProps = {
+    className?: string;
+    value: string;
+    children: React.ReactNode;
+    disabled?: boolean;
+};
+declare function DropdownItem({ children, value, className, disabled, }: DropdownItemProps): import("react/jsx-runtime").JSX.Element;
+export default DropdownItem;

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

@@ -0,0 +1,20 @@
+export declare const scaleInOut: {
+    enter: {
+        opacity: number;
+        scale: number;
+        transition: {
+            opacity: {
+                duration: number;
+                ease: string;
+            };
+        };
+    };
+    exit: {
+        opacity: number;
+        scale: number;
+        transition: {
+            duration: number;
+            ease: string;
+        };
+    };
+};

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+type DropdownTriggerProps = {
+    children: React.ReactNode;
+};
+declare function DropdownTrigger({ children }: DropdownTriggerProps): import("react/jsx-runtime").JSX.Element;
+export default DropdownTrigger;

package/dist/components/Dropdown/hook/useDropdown.d.ts

@@ -0,0 +1,17 @@
+type UseDropdownProps = {
+    isOpen: boolean;
+    selectedItem: string;
+    color?: string;
+    onSelect: (name: string) => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+    onOpenChange: (isOpen: boolean) => void;
+};
+declare function useDropdown({ isOpen, selectedItem, color, onOpen, onClose, onSelect, onOpenChange, }: UseDropdownProps): {
+    isOpen: boolean;
+    selectedItem: string;
+    color: string | undefined;
+    onSelect: (name: string) => void;
+    onOpenChange: (isOpen: boolean) => void;
+};
+export default useDropdown;

package/dist/components/Dropdown/index.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/Input/Input.style.d.ts

@@ -0,0 +1,7 @@
+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 inputSizeMap: {
+    small: string;
+    medium: string;
+    large: string;
+};

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

@@ -0,0 +1,9 @@
+import { ComponentProps, ReactNode } from "react";
+interface InputProps extends Omit<ComponentProps<"input">, "size"> {
+    left?: ReactNode;
+    right?: ReactNode;
+    size?: "small" | "medium" | "large";
+    inValid?: boolean;
+}
+declare function Input({ className, size, type, left, right, disabled, inValid, style, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export default Input;

package/dist/components/Modal/hook/useModal.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { HTMLMotionProps } from "framer-motion";
+type UseModalProps = {
+    hideCloseButton?: boolean;
+    closeButton?: React.ReactNode;
+    className?: string;
+    isOpen: boolean;
+    placement?: "center" | "bottom" | "top";
+    motionVariant?: HTMLMotionProps<"div">["variants"];
+    zIndex: number;
+    onOpenChange: (isOpen: boolean) => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+};
+declare function useModal({ hideCloseButton, closeButton, isOpen, placement, motionVariant, zIndex, onOpen, onClose, onOpenChange, }: UseModalProps): {
+    isOpen: boolean;
+    placement: "center" | "bottom" | "top" | undefined;
+    hideCloseButton: boolean | undefined;
+    closeButton: import("react").ReactNode;
+    motionVariant: import("framer-motion").Variants | undefined;
+    zIndex: number;
+    onOpenChange: (isOpen: boolean) => void;
+};
+export default useModal;

package/dist/components/Modal/index.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/Modal/modal-body.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from "react";
+type ModalBodyProps = {
+    className?: string;
+} & PropsWithChildren;
+declare function ModalBody({ className, children }: ModalBodyProps): import("react/jsx-runtime").JSX.Element;
+export default ModalBody;

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface ModalContentProps {
+    children: React.ReactNode | ((onClose: () => void) => React.ReactNode);
+    disableAnimation?: boolean;
+    className?: string;
+}
+declare function ModalContent({ children, className, }: ModalContentProps): import("react/jsx-runtime").JSX.Element;
+export default ModalContent;