ownui-system 0.1.10 → 1.0.0

package/README.md

@@ -1,113 +1,95 @@
-# ownui-design-system
+# ownui-system
 
-- react, tailwindcss
+A React-based UI component library built with Tailwind CSS and Framer Motion. 
 
-## Getting stated
+## Getting Started
 
-### setup tailwind css
+### 1. Install the package
 
-- install tailwind css
+Install the `ownui-system` package along with its peer dependencies.
 
+```bash
+npm install ownui-system
+# or
+yarn add ownui-system
+# or
+pnpm add ownui-system
 ```
-# or yarn or pnpm
-npm i autoprefixer postcss tailwindcss
+
+### 2. Setup Tailwind CSS
+
+If your project doesn't have Tailwind CSS set up yet, install the necessary dependencies:
+
+```bash
+npm install -D autoprefixer postcss tailwindcss
 npx tailwindcss init -p
 ```
 
-- configure tailwind.config
+### 3. Configure `tailwind.config.js`
 
-```
+You need to include the library's paths in your `content` array so Tailwind can process the styles. Also, include the `colors` and `twTypographyMap` plugins provided by `ownui-system`.
+
+```javascript
 const plugin = require("tailwindcss/plugin");
 const { colors, twTypographyMap } = require("ownui-system");
 
-
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
+    // Important: Include ownui-system dist to purge classes correctly
+    "./node_modules/ownui-system/dist/**/*.{js,jsx,ts,tsx}"
   ],
   theme: {
-    colors,
+    colors, // Injects ownui-system default colors
     extend: {},
   },
   plugins: [
     plugin(function ({ addUtilities }) {
-      // Add your custom styles here
+      // Add custom typography utilities
       addUtilities(twTypographyMap, ["responsive", "hover"]);
     }),
   ],
 };
-
 ```
 
-- add tailwind css to css file
+### 4. Add Tailwind CSS Directives
 
-```
+Add the basic Tailwind directives to your global CSS file (e.g., `index.css` or `global.css`):
+
+```css
 @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: {
-    colors,
-    extend: {},
-  },
-  plugins: [
-    plugin(function ({ addUtilities }) {
-      // Add your custom styles here
-      addUtilities(twTypographyMap, ["responsive", "hover"]);
-    }),
-  ],
-};
-
-```
-
-## UI Components
+## Available UI Components
 
+- [x] Accordion
+- [x] Badge
+- [x] BottomSheet
 - [x] Button
-- [x] Input
-- [x] TextField
-- [x] Spacing
-- [x] Flex
-- [x] Skeleton
-- [x] TextArea
-- [x] Text
+- [x] Checkbox
 - [x] Dimmed
-- [x] Modal
 - [x] Divider
-- [x] PopOver
-- [x] Tab / TabGroup
-- [x] Badge
-- [x] Checkbox
 - [x] Drawer
 - [x] Dropdown
-- [x] Accordion
-- [x] BottomSheet
+- [x] Flex
+- [x] Icon
+- [x] InfiniteSlider
+- [x] Input
+- [x] Modal
 - [x] Pagination
-- [x] Switch
+- [x] PopOver
 - [x] Radio / RadioGroup
-- [x] InfiniteSlider
-- [x] Tooltip
+- [x] Skeleton
 - [x] SnackBar
+- [x] Spacing
+- [x] Switch
+- [x] Tab / TabGroup
+- [x] Text
+- [x] TextArea
+- [x] TextField
+- [x] Tooltip
 - [ ] Step

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

@@ -1,5 +1,6 @@
-import Accordion from '.';
-import type { StoryObj } from "@storybook/react";
+import { default as Accordion } from '.';
+import { StoryObj } from '@storybook/react';
+
 declare const meta: {
     title: string;
     component: typeof Accordion;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface AccordionBodyProps {
     children: React.ReactNode;
     isAfterOpen: boolean;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type AccordionContextValue = {
     selected?: string | number;
     defaultSelected?: string | number;
@@ -9,8 +8,8 @@ type AccordionContextValue = {
 };
 declare function useContext(): AccordionContextValue;
 export declare function useAccordionContext(): {
-    AccordionProvider: import("react").Provider<AccordionContextValue | undefined>;
+    AccordionProvider: import('react').Provider<AccordionContextValue | undefined>;
     useContext: typeof useContext;
-    Context: import("react").Context<AccordionContextValue | undefined>;
+    Context: import('react').Context<AccordionContextValue | undefined>;
 };
 export {};

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface AccordionHeaderProps {
     isOpen: boolean;
     children: React.ReactNode;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface AccordionItemProps {
     header: React.ReactNode;
     headerIcon?: React.ReactNode;

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import AccordionBody from "./accordion-body";
-import AccordionHeader from "./accordion-header";
-import AccordionItem from "./accordion-item";
+import { default as AccordionBody } from './accordion-body';
+import { default as AccordionHeader } from './accordion-header';
+import { default as AccordionItem } from './accordion-item';
+
 interface AccordionProps {
     defaultSelected?: string | number;
     type?: "single" | "multi";

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

@@ -1,2 +1,3 @@
-import Accordion from "./accordion";
+import { default as Accordion } from './accordion';
+
 export default Accordion;

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

@@ -1,5 +1,6 @@
-import Badge from '.';
-import type { StoryObj } from "@storybook/react";
+import { default as Badge } from '.';
+import { StoryObj } from '@storybook/react';
+
 declare const meta: {
     title: string;
     component: typeof Badge;

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

@@ -1,26 +1,7 @@
-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;
-    };
-};
+import { VariantProps } from 'class-variance-authority';
+
+export declare const badgeVariants: (props?: ({
+    size?: "small" | "large" | "medium" | null | undefined;
+    placement?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type BadgeVariants = VariantProps<typeof badgeVariants>;

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

@@ -1,10 +1,9 @@
-/// <reference types="react" />
-interface BadgeProps {
+import { BadgeVariants } from './Badge.style';
+
+export interface BadgeProps extends BadgeVariants {
     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;

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

@@ -1,5 +1,6 @@
 import { BottomSheet } from '.';
-import type { StoryObj } from "@storybook/react";
+import { StoryObj } from '@storybook/react';
+
 declare const meta: {
     title: string;
     component: typeof BottomSheet;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface BottomSheetBodyProps {
     children: React.ReactNode;
     className?: string;

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

@@ -1,3 +1,4 @@
-import { PropsWithChildren } from "react";
+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,4 +1,3 @@
-/// <reference types="react" />
 type BottomSheetContextValue = {
     isOpen: boolean;
     zIndex: number;
@@ -9,8 +8,8 @@ type BottomSheetContextValue = {
 };
 declare function useContext(): BottomSheetContextValue;
 export declare function useBottomSheetContext(): {
-    BottomSheetProvider: import("react").Provider<BottomSheetContextValue | undefined>;
+    BottomSheetProvider: import('react').Provider<BottomSheetContextValue | undefined>;
     useContext: typeof useContext;
-    Context: import("react").Context<BottomSheetContextValue | undefined>;
+    Context: import('react').Context<BottomSheetContextValue | undefined>;
 };
 export {};

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

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface BottomSheetProps {
     isOpen: boolean;
     removeDimmer?: boolean;

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

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

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

@@ -1,43 +1,38 @@
-/// <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[];
-};
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Button } from './index';
+
+/**
+ * `Button` component is a flexible button component that supports various sizes, variants, and icon placements.
+ */
+declare const meta: Meta<typeof Button>;
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Button>;
 export declare const Default: Story;
+/**
+ * Various visual variants of the button.
+ */
+export declare const Variants: Story;
+/**
+ * All available sizes.
+ */
+export declare const Sizes: Story;
+/**
+ * Buttons with icons on the left or right.
+ */
+export declare const WithIcons: Story;
+/**
+ * Icon-only button variants.
+ */
+export declare const OnlyIcon: Story;
+/**
+ * The button in a disabled state.
+ */
+export declare const Disabled: Story;
+/**
+ * A full-width button.
+ */
+export declare const FullWidth: Story;
+/**
+ * Example of controlling typography externally via `className`.
+ */
+export declare const ExternalTypography: Story;

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

@@ -1,29 +1,11 @@
-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)]";
+import { VariantProps } from 'class-variance-authority';
+
+export declare const buttonVariants: (props?: ({
+    size?: "small" | "large" | "medium" | "xsmall" | "xlarge" | null | undefined;
+    variant?: "line" | "text" | "normal" | null | undefined;
+    isOnlyIcon?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ButtonVariants = VariantProps<typeof buttonVariants>;
 export declare function buttonTypeMap(color: string): {
     normal: {
         "--bg-color": string;

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

@@ -1,12 +1,12 @@
-import { type ComponentProps, type ReactNode } from "react";
-export interface ButtonProps extends ComponentProps<"button"> {
-    size?: "xsmall" | "small" | "medium" | "large" | "xlarge";
-    variant?: "normal" | "line" | "text";
+import { ComponentProps, ReactNode } from 'react';
+import { ButtonVariants } from './Button.style';
+
+export interface ButtonProps extends Omit<ComponentProps<"button">, "color">, ButtonVariants {
+    color?: string;
     width?: string;
     className?: string;
     startContent?: ReactNode;
     endContent?: ReactNode;
-    isOnlyIcon?: boolean;
 }
-declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+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 +1,16 @@
-/// <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[];
-        };
-    };
-};
+import { Meta, StoryObj } from '@storybook/react';
+import { default as Checkbox } from './index';
+
+/**
+ * `Checkbox` component for multi-selection.
+ */
+declare const meta: Meta<typeof Checkbox>;
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Checkbox>;
 export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const Colors: Story;
+export declare const Radius: Story;
+export declare const States: Story;
+export declare const CustomIcon: Story;
 export declare const Controlled: Story;
-export declare const Disabled: Story;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface CheckboxProps {
     size?: "small" | "medium" | "large";
     isChecked?: boolean;
@@ -13,5 +12,5 @@ export interface CheckboxProps {
     name?: string;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
-declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
+declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;
 export default Checkbox;

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

@@ -1,4 +1,5 @@
-import { type CSSProperties, type PropsWithChildren } from "react";
+import { CSSProperties, PropsWithChildren } from 'react';
+
 interface DimmedProps extends PropsWithChildren {
     className?: string;
     opacity?: CSSProperties["opacity"];

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

@@ -1,5 +1,6 @@
-import Divider from '.';
-import type { StoryObj } from "@storybook/react";
+import { default as Divider } from '.';
+import { StoryObj } from '@storybook/react';
+
 declare const meta: {
     title: string;
     component: typeof Divider;

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

@@ -1,5 +1,6 @@
-import type { StoryObj } from "@storybook/react";
-import Drawer from "./drawer";
+import { StoryObj } from '@storybook/react';
+import { default as Drawer } from './drawer';
+
 declare const meta: {
     title: string;
     component: typeof Drawer;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface DrawerContentProps {
     children: React.ReactNode | ((onClose: () => void) => React.ReactNode);
     className?: string;

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

@@ -1,7 +1,8 @@
-import type { ComponentPosition } from '../../types';
-import { HTMLMotionProps } from "framer-motion";
-import { ComponentProps } from "react";
-import Drawer from "./drawer";
+import { ComponentPosition } from '../../types';
+import { HTMLMotionProps } from 'framer-motion';
+import { ComponentProps } from 'react';
+import { default as Drawer } from './drawer';
+
 type DrawerProps = ComponentProps<typeof Drawer>;
 type DrawerContextValue = {
     isOpen: DrawerProps["isOpen"];
@@ -13,8 +14,8 @@ type DrawerContextValue = {
 };
 declare function useContext(): DrawerContextValue;
 export declare function useDrawerContext(): {
-    DrawerProvider: import("react").Provider<DrawerContextValue | undefined>;
+    DrawerProvider: import('react').Provider<DrawerContextValue | undefined>;
     useContext: typeof useContext;
-    Context: import("react").Context<DrawerContextValue | undefined>;
+    Context: import('react').Context<DrawerContextValue | undefined>;
 };
 export {};

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-import type { ComponentPosition } from '../../types';
-import { type HTMLMotionProps } from "framer-motion";
-import DrawerContent from "./drawer-content";
+import { ComponentPosition } from '../../types';
+import { HTMLMotionProps } from 'framer-motion';
+import { default as DrawerContent } from './drawer-content';
+
 export type DrawerProps = {
     onOpenChange: (isOpen: boolean) => void;
     isOpen: boolean;

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

@@ -1,4 +1,5 @@
-import { HTMLMotionProps } from "framer-motion";
+import { HTMLMotionProps } from 'framer-motion';
+
 type UseDrawerProps = {
     isOpen: boolean;
     placement?: "top" | "bottom" | "left" | "right";
@@ -12,7 +13,7 @@ type UseDrawerProps = {
 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;
+    motionVariant: import('framer-motion').Variants | undefined;
     zIndex: number | undefined;
     drawerId: string;
     onOpenChange: (isOpen: boolean) => void;

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

@@ -1,2 +1,3 @@
-import Drawer from "./drawer";
+import { default as Drawer } from './drawer';
+
 export default Drawer;

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

@@ -1,5 +1,6 @@
-import type { StoryObj } from "@storybook/react";
-import Dropdown from "./dropdown";
+import { StoryObj } from '@storybook/react';
+import { default as Dropdown } from './dropdown';
+
 declare const meta: {
     title: string;
     component: typeof Dropdown;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type DropdownBodyProps = {
     children: React.ReactNode;
     className?: string;