ownui-system 0.0.12 → 0.1.0

package/README.md

@@ -107,5 +107,6 @@ export default {
 - [x] Pagination
 - [x] Switch
 - [x] Radio / RadioGroup
-- [ ] Tooltip
+- [x] InfiniteSlider
+- [x] Tooltip
 - [ ] Step

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

@@ -21,3 +21,4 @@ export declare const Default: Story;
 export declare const Bordered: Story;
 export declare const Splitted: Story;
 export declare const Multi: Story;
+export declare const MultiDefaultOpen: Story;

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

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

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

@@ -6,6 +6,7 @@ interface AccordionItemProps {
     value: string | number;
     className?: string;
     disabled?: boolean;
+    defaultOpen?: boolean;
 }
-declare function AccordionItem({ className, header, headerIcon, body, value, disabled, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+declare function AccordionItem({ className, header, headerIcon, body, value, disabled, defaultOpen, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
 export default AccordionItem;

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

@@ -1,10 +1,11 @@
+import type { ComponentPosition } from '../../types';
 import { HTMLMotionProps } from "framer-motion";
 import { ComponentProps } from "react";
 import Drawer from "./drawer";
 type DrawerProps = ComponentProps<typeof Drawer>;
 type DrawerContextValue = {
     isOpen: DrawerProps["isOpen"];
-    placement?: "top" | "bottom" | "left" | "right";
+    placement?: ComponentPosition;
     motionVariant?: HTMLMotionProps<"div">["variants"];
     zIndex?: number;
     drawerId: string;

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

@@ -1,10 +1,11 @@
 /// <reference types="react" />
+import type { ComponentPosition } from '../../types';
 import { HTMLMotionProps } from "framer-motion";
 export type DrawerProps = {
     onOpenChange: (isOpen: boolean) => void;
     isOpen: boolean;
     children?: React.ReactNode;
-    placement?: "top" | "bottom" | "left" | "right";
+    placement?: ComponentPosition;
     zIndex?: number;
     drawerId?: string;
     allowCloseOnClickBackDrop?: boolean;

package/dist/components/InfiniteSlider/InfiniteSlider-item.d.ts

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

package/dist/components/InfiniteSlider/InfiniteSlider.d.ts

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from "react";
+import "./style.css";
+type InfiniteSliderProps = {
+    className?: string;
+    width: string;
+    height: string;
+    reverse?: boolean;
+    stopOnHover?: boolean;
+} & PropsWithChildren;
+declare function InfiniteSlider({ width, height, reverse, stopOnHover, children, }: InfiniteSliderProps): import("react/jsx-runtime").JSX.Element;
+export default InfiniteSlider;

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

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

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

@@ -0,0 +1,3 @@
+export declare const sliderWrapperStyle = "w-full h-[var(--height)] overflow-hidden";
+export declare const sliderListStyle = "flex w-full relative min-w-[calc(var(--width)*var(--quantity))]";
+export declare const sliderItemStyle = "w-[var(--width)] h-[var(--height)] absolute left-[100%]";

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

@@ -0,0 +1,2 @@
+export { default as InfiniteSlider } from "./InfiniteSlider";
+export { default as InfiniteSlideItem } from "./InfiniteSlider-item";

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

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

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

@@ -1,9 +1,10 @@
+import type { ComponentPosition } from '../../../types';
 import { HTMLMotionProps } from "framer-motion";
 type UsePopoverProps = {
     isOpen: boolean;
     zIndex: number;
     className?: string;
-    placement?: "top" | "bottom" | "left" | "right";
+    placement?: ComponentPosition;
     motionVariant?: HTMLMotionProps<"div">["variants"];
     onOpenChange: (isOpen: boolean) => void;
     onOpen?: () => void;
@@ -11,7 +12,7 @@ type UsePopoverProps = {
 };
 declare function usePopover({ isOpen, zIndex, placement, motionVariant, onOpen, onClose, onOpenChange, }: UsePopoverProps): {
     isOpen: boolean;
-    placement: "bottom" | "left" | "right" | "top" | undefined;
+    placement: ComponentPosition | undefined;
     motionVariant: import("framer-motion").Variants | {
         enter: {
             opacity: number;

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

@@ -1,10 +1,11 @@
+import type { ComponentPosition } from '../../types';
 import { HTMLMotionProps } from "framer-motion";
 import { ComponentProps } from "react";
 import Popover from "./popover";
 type PopoverProps = ComponentProps<typeof Popover>;
 type PopoverPropsContextValue = {
     isOpen: PopoverProps["isOpen"];
-    placement?: "top" | "bottom" | "left" | "right";
+    placement?: ComponentPosition;
     motionVariant?: HTMLMotionProps<"div">["variants"];
     zIndex: number;
     onClose?: () => void;

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

@@ -1,3 +1,4 @@
+import type { ComponentPosition } from '../../types';
 import { HTMLMotionProps } from "framer-motion";
 import { ReactNode } from "react";
 export interface PopoverProps {
@@ -7,7 +8,7 @@ export interface PopoverProps {
     zIndex?: number;
     topOffset?: number;
     leftOffset?: number;
-    placement?: "top" | "bottom" | "left" | "right";
+    placement?: ComponentPosition;
     motionVariant?: HTMLMotionProps<"div">["variants"];
     onOpenChange: (isOpen: boolean) => void;
 }

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

@@ -4,6 +4,7 @@ interface TabGroupProps {
     size?: "large" | "medium" | "small";
     activeColor?: string;
     children: React.ReactNode;
+    className?: string;
 }
-declare function TabGroup({ children, size, type, activeColor, }: TabGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function TabGroup({ children, className, size, type, activeColor, }: TabGroupProps): import("react/jsx-runtime").JSX.Element;
 export default TabGroup;

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

@@ -0,0 +1,16 @@
+import type { StoryObj } from "@storybook/react";
+import Tooltip from ".";
+declare const meta: {
+    title: string;
+    component: typeof Tooltip;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Top: Story;
+export declare const Bottom: Story;
+export declare const Left: Story;
+export declare const Right: Story;

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

@@ -0,0 +1,12 @@
+import type { ComponentPosition } from '../../types';
+import { type CSSProperties, type PropsWithChildren } from "react";
+type TooltipProps = {
+    open?: boolean;
+    message: string;
+    placement?: ComponentPosition;
+    className?: string;
+    tailOffset?: string;
+    bgColor?: CSSProperties["backgroundColor"];
+} & PropsWithChildren;
+declare function Tooltip({ children, className, open, message, placement, tailOffset, bgColor, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export default Tooltip;

package/dist/components/Tooltip/tooltip-style.d.ts

@@ -0,0 +1,29 @@
+export declare const baseStyle = "relative inline-block text-center";
+export declare const afterStyle = "after:absolute after:content-[''] after:block after:text-[var(--text-color)] after:border after:w-0 after:h-0 after:opacity-0 after:transition-all after:delay-100";
+export declare const beforeStyle = "before:absolute before:pointer-events-none before:z-[1] before:content-[attr(data-tip)] before:rounded-md before:px-1 before:py-2 before:bg-[var(--bg-color)] before:max-w-80 before:w-max before:whitespace-normal before:opacity-0 before:transition-all before:delay-100 ";
+export declare const hoverStyle: {
+    before: string;
+    after: string;
+};
+export declare const openStyle: {
+    before: string;
+    after: string;
+};
+export declare const positionStyle: {
+    top: {
+        after: string;
+        before: string;
+    };
+    bottom: {
+        after: string;
+        before: string;
+    };
+    left: {
+        after: string;
+        before: string;
+    };
+    right: {
+        after: string;
+        before: string;
+    };
+};

package/dist/components/index.d.ts

@@ -16,3 +16,8 @@ export * from "./Modal";
 export * from "./Dropdown";
 export * from "./Popover";
 export * from "./BottomSheet";
+export * from './InfiniteSlider';
+export * from './Checkbox';
+export * from './Radio';
+export * from './Pagination';
+export * from './Switch';