ownui-system 0.0.13 → 0.1.1

package/README.md

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

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

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

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

@@ -1,4 +1,4 @@
-import { ComponentProps, ReactNode } from "react";
+import { type ComponentProps, type ReactNode } from "react";
 export interface ButtonProps extends ComponentProps<"button"> {
     size?: "xsmall" | "small" | "medium" | "large" | "xlarge";
     variant?: "normal" | "line" | "text";

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

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

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 { HTMLMotionProps } from "framer-motion";
+import type { ComponentPosition } from '../../types';
+import { type 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/Dropdown/dropdown-header.d.ts

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

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

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import { type PropsWithChildren } from "react";
 interface DropdownProps extends PropsWithChildren {
     selectedItem: {
         name: string;

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

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import { type PropsWithChildren } from "react";
 import "./style.css";
 type InfiniteSliderProps = {
     className?: string;

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

@@ -1,4 +1,4 @@
-import { ComponentProps, ReactNode } from "react";
+import { type ComponentProps, type ReactNode } from "react";
 interface InputProps extends Omit<ComponentProps<"input">, "size"> {
     left?: ReactNode;
     right?: ReactNode;

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

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import { type PropsWithChildren } from "react";
 type ModalBodyProps = {
     className?: string;
 } & PropsWithChildren;

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

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import { type PropsWithChildren } from "react";
 type ModalFooterProps = {
     className?: string;
 } & PropsWithChildren;

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

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import { type PropsWithChildren } from "react";
 type ModalBodyProps = {
     className?: string;
 } & PropsWithChildren;

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 { HTMLMotionProps } from "framer-motion";
-import { ComponentProps } from "react";
+import type { ComponentPosition } from '../../types';
+import { type HTMLMotionProps } from "framer-motion";
+import { type 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-trigger.d.ts

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

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

@@ -1,5 +1,6 @@
+import type { ComponentPosition } from '../../types';
 import { HTMLMotionProps } from "framer-motion";
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 export interface PopoverProps {
     id?: string;
     children: ReactNode[];
@@ -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/Radio/radio-group.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import { type PropsWithChildren } from "react";
 interface RadioGroupProps extends PropsWithChildren {
     className?: string;
     activeColor?: string;

package/dist/components/Radio/radio-item.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps } from "react";
+import { type ComponentProps } from "react";
 export type RadioItemProps = {
     name: string;
     id: string;

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

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from "react";
+import { type CSSProperties, type ReactNode } from "react";
 interface SkeletinProps {
     width: CSSProperties["width"];
     height: CSSProperties["height"];

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/Text/index.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, PropsWithChildren } from "react";
+import { type CSSProperties, type PropsWithChildren } from "react";
 type TextProps = {
     fontSize?: CSSProperties["fontSize"];
     fontWeight?: CSSProperties["fontWeight"];

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

@@ -1,4 +1,4 @@
-import { CSSProperties, ComponentProps } from "react";
+import { type CSSProperties, type ComponentProps } from "react";
 export interface TextAreaProps extends Omit<ComponentProps<"textarea">, "size"> {
     label?: React.ReactNode;
     hasError?: boolean;

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;
+    };
+};