ownui-system 0.0.0

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

@@ -0,0 +1,22 @@
+import { HTMLMotionProps } from "framer-motion";
+import { ComponentProps } from "react";
+import Modal from ".";
+type ModalProps = ComponentProps<typeof Modal>;
+type ModalPropsContextValue = {
+    isOpen: ModalProps["isOpen"];
+    hideCloseButton: boolean | undefined;
+    closeButton: React.ReactNode;
+    placement?: "center" | "bottom" | "top";
+    motionVariant?: HTMLMotionProps<"div">["variants"];
+    zIndex: number;
+    onClose?: () => void;
+    onOpen?: () => void;
+    onOpenChange: (isOpen: boolean) => void;
+};
+declare function useContext(): ModalPropsContextValue;
+export declare function useModalContext(): {
+    ModalProvider: import("react").Provider<ModalPropsContextValue | undefined>;
+    useContext: typeof useContext;
+    Context: import("react").Context<ModalPropsContextValue | undefined>;
+};
+export {};

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

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

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

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

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

@@ -0,0 +1,46 @@
+export declare const scaleInOut: {
+    enter: {
+        opacity: number;
+        x: string;
+        y: string;
+        transition: {
+            opacity: {
+                duration: number;
+                ease: string;
+            };
+        };
+    };
+    exit: {
+        opacity: number;
+        x: string;
+        y: string;
+        transition: {
+            duration: number;
+            ease: string;
+        };
+    };
+};
+export declare const slideInOut: {
+    enter: {
+        y: number;
+        x: string;
+        transition: {
+            y: {
+                bounce: number;
+                duration: number;
+                ease: string;
+            };
+        };
+    };
+    exit: {
+        y: string;
+        x: string;
+        transition: {
+            y: {
+                bounce: number;
+                duration: number;
+                ease: string;
+            };
+        };
+    };
+};

package/dist/components/Popover/hook/usePopover.d.ts

@@ -0,0 +1,38 @@
+import { HTMLMotionProps } from "framer-motion";
+type UsePopoverProps = {
+    isOpen: boolean;
+    zIndex: number;
+    className?: string;
+    placement?: "top" | "bottom" | "left" | "right";
+    motionVariant?: HTMLMotionProps<"div">["variants"];
+    onOpenChange: (isOpen: boolean) => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+};
+declare function usePopover({ isOpen, zIndex, placement, motionVariant, onOpen, onClose, onOpenChange, }: UsePopoverProps): {
+    isOpen: boolean;
+    placement: "bottom" | "left" | "right" | "top" | undefined;
+    motionVariant: import("framer-motion").Variants | {
+        enter: {
+            opacity: number;
+            scale: number;
+            transition: {
+                opacity: {
+                    duration: number;
+                    ease: string;
+                };
+            };
+        };
+        exit: {
+            opacity: number;
+            scale: number;
+            transition: {
+                duration: number;
+                ease: string;
+            };
+        };
+    };
+    zIndex: number;
+    onOpenChange: (isOpen: boolean) => void;
+};
+export default usePopover;

package/dist/components/Popover/index.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/Popover/popover-content.d.ts

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

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

@@ -0,0 +1,20 @@
+import { HTMLMotionProps } from "framer-motion";
+import { ComponentProps } from "react";
+import Popover from ".";
+type PopoverProps = ComponentProps<typeof Popover>;
+type PopoverPropsContextValue = {
+    isOpen: PopoverProps["isOpen"];
+    placement?: "top" | "bottom" | "left" | "right";
+    motionVariant?: HTMLMotionProps<"div">["variants"];
+    zIndex: number;
+    onClose?: () => void;
+    onOpen?: () => void;
+    onOpenChange: (isOpen: boolean) => void;
+};
+declare function useContext(): PopoverPropsContextValue;
+export declare function usePopoverContext(): {
+    PopoverProvider: import("react").Provider<PopoverPropsContextValue | undefined>;
+    useContext: typeof useContext;
+    Context: import("react").Context<PopoverPropsContextValue | undefined>;
+};
+export {};

package/dist/components/Popover/popover-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/Popover/popover-trigger.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from "react";
+declare function PopoverTrigger({ children }: PropsWithChildren): import("react").FunctionComponentElement<any>;
+export default PopoverTrigger;

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

@@ -0,0 +1,10 @@
+import { CSSProperties, ReactNode } from "react";
+interface SkeletinProps {
+    width: CSSProperties["width"];
+    height: CSSProperties["height"];
+    borderRadius?: CSSProperties["borderRadius"];
+    children?: ReactNode;
+    className?: string;
+}
+declare function Skeleton({ className, children, width, height, borderRadius, }: SkeletinProps): import("react/jsx-runtime").JSX.Element;
+export default Skeleton;

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

@@ -0,0 +1,29 @@
+export declare const baseStyle: {
+    text: string;
+    box: string;
+};
+export declare const activeStyle: {
+    text: string;
+    box: string;
+};
+export declare const tabSize: {
+    text: {
+        large: string;
+        medium: string;
+        small: string;
+    };
+    box: {
+        large: string;
+        medium: string;
+        small: string;
+    };
+};
+export declare const tabGroupBaseStyle: {
+    text: string;
+    box: string;
+};
+export declare const tabGroupGap: {
+    large: string;
+    medium: string;
+    small: string;
+};

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

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

package/dist/components/Tab/tab-context.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+type TabPropsContextValue = {
+    type?: "text" | "box";
+    size?: "large" | "medium" | "small";
+    activeColor?: string;
+};
+declare function useContext(): TabPropsContextValue;
+export declare function useTabContext(): {
+    TabProvider: import("react").Provider<TabPropsContextValue | undefined>;
+    useContext: typeof useContext;
+    Context: import("react").Context<TabPropsContextValue | undefined>;
+};
+export {};

package/dist/components/Tab/tab-group.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface TabGroupProps {
+    type?: "text" | "box";
+    size?: "large" | "medium" | "small";
+    activeColor?: string;
+    children: React.ReactNode;
+}
+declare function TabGroup({ children, size, type, activeColor, }: TabGroupProps): import("react/jsx-runtime").JSX.Element;
+export default TabGroup;

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

@@ -0,0 +1,10 @@
+import { CSSProperties, PropsWithChildren } from "react";
+type TextProps = {
+    fontSize?: CSSProperties["fontSize"];
+    fontWeight?: CSSProperties["fontWeight"];
+    color?: CSSProperties["color"];
+    bold?: boolean;
+    needGradient?: boolean;
+} & PropsWithChildren;
+declare function Text({ fontSize, fontWeight, color, bold, needGradient, children, }: TextProps): import("react/jsx-runtime").JSX.Element;
+export default Text;

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

@@ -0,0 +1,6 @@
+export declare const baseStyle: string;
+export declare const inValidStyle: string;
+export declare const textAreaSizeMap: {
+    small: string;
+    large: string;
+};

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

@@ -0,0 +1,10 @@
+import { CSSProperties, ComponentProps } from "react";
+export interface TextAreaProps extends Omit<ComponentProps<"textarea">, "size"> {
+    label?: React.ReactNode;
+    hasError?: boolean;
+    helpMessage?: React.ReactNode;
+    focusColor?: CSSProperties["color"];
+    size?: "small" | "large";
+}
+declare const TextArea: import("react").ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+export default TextArea;

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

@@ -0,0 +1,10 @@
+import { CSSProperties, ComponentProps } from "react";
+export interface TextFieldProps extends Omit<ComponentProps<"input">, "size"> {
+    label?: React.ReactNode;
+    hasError?: boolean;
+    helpMessage?: React.ReactNode;
+    focusColor?: CSSProperties["color"];
+    size?: "small" | "medium" | "large";
+}
+declare const TextField: import("react").ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export default TextField;

package/dist/components/index.d.ts

@@ -0,0 +1,9 @@
+export { default as Dimmed } from "./Dimmed";
+export { default as Button } from "./Button";
+export { default as Input } from "./Input";
+export { default as Text } from "./Text";
+export { default as TextArea } from "./TextArea";
+export { default as TextField } from "./TextField";
+export { default as Divider } from "./Divider";
+export { default as Skeleton } from "./Skeleton";
+export { default as Badge } from "./Badge";

package/dist/components/shared/Flex.d.ts

@@ -0,0 +1,13 @@
+import { CSSProperties, PropsWithChildren } from "react";
+interface FlexProps extends PropsWithChildren {
+    display?: "flex" | "inline-flex";
+    align?: CSSProperties["alignItems"];
+    justify?: CSSProperties["justifyContent"];
+    direction?: CSSProperties["flexDirection"];
+    style?: CSSProperties;
+    className?: string;
+    wrap?: boolean;
+    onClick?: () => void;
+}
+declare function Flex({ className, display, align, justify, direction, wrap, style, children, onClick, }: FlexProps): import("react/jsx-runtime").JSX.Element;
+export default Flex;

package/dist/components/shared/Portal.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type Props = {
+    children: React.ReactNode;
+    container?: React.RefObject<HTMLElement>;
+    id?: string;
+};
+export declare function createPortalRoot(id: string): HTMLDivElement;
+declare function Portal({ children, ...rest }: Props): import("react/jsx-runtime").JSX.Element | null;
+export default Portal;

package/dist/components/shared/Spacing.d.ts

@@ -0,0 +1,6 @@
+interface SpacingProps {
+    size: number;
+    direction?: "vertical" | "horizontal";
+}
+declare function Spacing({ size, direction }: SpacingProps): import("react/jsx-runtime").JSX.Element;
+export default Spacing;

package/dist/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export { default as useClickOutSideEffect } from "./useClickOutSideEffect";
+export { default as useDomRef } from "./useDomRef";
+export { default as useMounted } from "./useMounted";
+export { default as useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";

package/dist/hooks/useClickOutSideEffect.d.ts

@@ -0,0 +1,3 @@
+type OneOrMore<T> = T | T[];
+declare function useClickOutSideEffect(container: OneOrMore<HTMLElement> | null, callback: VoidFunction): void;
+export default useClickOutSideEffect;

package/dist/hooks/useDomRef.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ReactRef } from '../types';
+declare function useDOMRef<T extends HTMLElement = HTMLElement>(ref?: ReactRef<T | null>): import("react").RefObject<T>;
+export default useDOMRef;

package/dist/hooks/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,7 @@
+import { useEffect } from "react";
+/**
+ * @description serverside인 경우 useLayoutEffect에 대한 경고 메시지가 발생하는 이슈에 대하여
+ * clientside인 경우 useLayoutEffect, serverside인 경우 useEffect를 사용하도록 하는 목적의 커스텀 훅
+ */
+declare const useIsomorphicLayoutEffect: typeof useEffect;
+export default useIsomorphicLayoutEffect;

package/dist/hooks/useMounted.d.ts

@@ -0,0 +1,2 @@
+declare function useMounted(condition?: boolean): boolean;
+export default useMounted;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./components";
+export * from "./hooks";
+export * from "./types";
+export * from "./styles/typography";
+export * from "./styles/colors";