ownui-system 0.0.2 → 0.0.4

package/README.md

@@ -2,7 +2,70 @@
 
 - react, tailwindcss
 
-## Components
+## Getting stated
+
+### setup tailwind css
+
+- install tailwind css
+
+```
+# or yarn or pnpm
+npm i autoprefixer postcss tailwindcss
+npx tailwindcss init -p
+```
+
+- configure tailwind.config
+
+```
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+};
+
+```
+
+- add tailwind css to css file
+
+```
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+### install package
+
+```
+npm i ownui-system
+#
+yarn add ownui-system
+#
+pnpm add ownui-system
+```
+
+- include "./node_modules/ownui-system/dist/\*_/_.{js,jsx,ts,tsx}" to tailwind.config content
+
+```
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/ownui-system/dist/**/*.{js,jsx,ts,tsx}"
+  ],
+  theme: {
+    extend: {},
+  },
+};
+
+```
+
+## UI Components
 
 - [x] Button
 - [x] Input

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ownui-system",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "files": [
     "dist"
@@ -21,10 +21,10 @@
   "keywords": [
     "react",
     "typescript",
+    "tailwind",
     "ownui"
   ],
   "scripts": {
-    "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "eslint --fix --ext tx,tsx \"src/**/*.{js,jsx,ts,tsx}\"",

package/dist/App.d.ts

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

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

@@ -1,23 +0,0 @@
-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-body.d.ts

@@ -1,6 +0,0 @@
-/// <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

@@ -1,16 +0,0 @@
-/// <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

@@ -1,9 +0,0 @@
-/// <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

@@ -1,11 +0,0 @@
-/// <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

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

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

@@ -1,12 +0,0 @@
-/// <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/accortion-transition.d.ts

@@ -1,24 +0,0 @@
-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

@@ -1,2 +0,0 @@
-export { default as Accordion } from "./accordion";
-export { default as AccordionItem } from "./accordion-item";

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

@@ -1,14 +0,0 @@
-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/Badge/Badge.style.d.ts

@@ -1,26 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,13 +0,0 @@
-/// <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/BottomSheet/bottomsheet-body.d.ts

@@ -1,7 +0,0 @@
-/// <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

@@ -1,3 +0,0 @@
-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

@@ -1,14 +0,0 @@
-/// <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

@@ -1,3 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,14 +0,0 @@
-/// <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

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

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

@@ -1,43 +0,0 @@
-/// <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/Button/Button.style.d.ts

@@ -1,40 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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.stories.d.ts

@@ -1,30 +0,0 @@
-/// <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/Checkbox/Checkbox.style.d.ts

@@ -1,28 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,17 +0,0 @@
-/// <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

@@ -1,3 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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/Divider.stories.d.ts

@@ -1,19 +0,0 @@
-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/Divider/index.d.ts

@@ -1,8 +0,0 @@
-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/Drawer.stories.d.ts

@@ -1,36 +0,0 @@
-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/DrawerStyle.d.ts

@@ -1,7 +0,0 @@
-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

@@ -1,8 +0,0 @@
-/// <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;