@rovula/ui 0.0.23 → 0.0.25

package/dist/cjs/types/components/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };

package/dist/cjs/types/components/DropdownMenu/DropdownMenu.stories.d.ts

@@ -0,0 +1,54 @@
+import React from "react";
+declare const meta: {
+    title: string;
+    component: React.FC<import("@radix-ui/react-dropdown-menu").DropdownMenuProps>;
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        children?: React.ReactNode;
+        dir?: ("ltr" | "rtl") | undefined;
+        open?: boolean | undefined;
+        defaultOpen?: boolean | undefined;
+        onOpenChange?: ((open: boolean) => void) | undefined;
+        modal?: boolean | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+export declare const Default: {
+    args: {};
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const WithIcon: {
+    args: {};
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const WithLabel: {
+    args: {};
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const Checkboxes: {
+    args: {};
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const SubMenu: {
+    args: {};
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const OnIcon: {
+    args: {};
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const AsChild: {
+    args: {};
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const Position: {
+    args: {
+        side: string;
+        align: string;
+        sideOffset: number;
+        alignOffset: number;
+    };
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/cjs/types/index.d.ts

@@ -25,6 +25,7 @@ export * from "./components/AlertDialog/AlertDialog";
 export * from "./components/Search/Search";
 export * from "./components/Slider/Slider";
 export * from "./components/Switch/Switch";
+export * from "./components/DropdownMenu/DropdownMenu";
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";
 export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,74 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { cn } from "@/utils/cn";
+import Icon from "../Icon/Icon";
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+const DropdownMenuSubTrigger = React.forwardRef((_a, ref) => {
+    var { className, inset, children } = _a, props = __rest(_a, ["className", "inset", "children"]);
+    return (_jsxs(DropdownMenuPrimitive.SubTrigger, Object.assign({ ref: ref, className: cn(
+        // "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-primary data-[state=open]:bg-primary",
+        "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-4 typography-subtitile4 outline-none transition-colors data-[disabled]:pointer-events-none", "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]", "active:opacity-75", "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]", "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]", inset && "pl-8", className) }, props, { children: [children, _jsx(Icon, { type: "heroicons", name: "chevron-right", className: "ml-auto h-4 w-4" })] })));
+});
+DropdownMenuSubTrigger.displayName =
+    DropdownMenuPrimitive.SubTrigger.displayName;
+const DropdownMenuSubContent = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(DropdownMenuPrimitive.SubContent, Object.assign({ ref: ref, className: cn("z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground shadow-[var(--dropdown-menu-shadow)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className) }, props)));
+});
+DropdownMenuSubContent.displayName =
+    DropdownMenuPrimitive.SubContent.displayName;
+const DropdownMenuContent = React.forwardRef((_a, ref) => {
+    var { className, sideOffset = 4 } = _a, props = __rest(_a, ["className", "sideOffset"]);
+    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, Object.assign({ ref: ref, sideOffset: sideOffset, className: cn("z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground shadow-[0px_2px_24px_0px_rgba(145,_158,_171,_0.24)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className) }, props)) }));
+});
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+const DropdownMenuItem = React.forwardRef((_a, ref) => {
+    var { className, inset } = _a, props = __rest(_a, ["className", "inset"]);
+    return (_jsx(DropdownMenuPrimitive.Item, Object.assign({ ref: ref, className: cn("relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitile4 outline-none transition-colors data-[disabled]:pointer-events-none", "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]", "active:opacity-75", "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]", "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]", inset && "pl-8", className) }, props)));
+});
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+const DropdownMenuCheckboxItem = React.forwardRef((_a, ref) => {
+    var { className, children, checked } = _a, props = __rest(_a, ["className", "children", "checked"]);
+    return (_jsxs(DropdownMenuPrimitive.CheckboxItem, Object.assign({ ref: ref, className: cn("relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitile4 outline-none transition-colors data-[disabled]:pointer-events-none", "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]", "active:opacity-75", "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]", "data-[state='checked']:bg-[var(--dropdown-menu-selected-bg)] data-[state='checked']:text-[var(--dropdown-menu-selected-text)]  data-[state='checked']:typography-subtitile5", "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]", className), checked: checked }, props, { children: [_jsx("span", { className: "absolute left-4 flex items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Icon, { type: "heroicons", name: "check", className: "size-4" }) }) }), children] })));
+});
+DropdownMenuCheckboxItem.displayName =
+    DropdownMenuPrimitive.CheckboxItem.displayName;
+const DropdownMenuRadioItem = React.forwardRef((_a, ref) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (_jsxs(DropdownMenuPrimitive.RadioItem, Object.assign({ ref: ref, className: cn("relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-xxl typography-subtitile4 outline-none transition-colors data-[disabled]:pointer-events-none", "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]", "active:opacity-75", "focus:!bg-[var(--dropdown-menu-hover-bg)] focus:!text-[var(--dropdown-menu-hover-text)]", "data-[state='checked']:bg-[var(--dropdown-menu-selected-bg)] data-[state='checked']:text-[var(--dropdown-menu-selected-text)]  data-[state='checked']:typography-subtitile5", "data-[disabled]:!bg-[var(--dropdown-menu-disabled-bg)] data-[disabled]:!text-[var(--dropdown-menu-disabled-text)]", className) }, props, { children: [_jsx("span", { className: "absolute left-4 flex items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Icon, { type: "heroicons", name: "circle", className: "h-2 w-2 fill-current" }) }) }), children] })));
+});
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+const DropdownMenuLabel = React.forwardRef((_a, ref) => {
+    var { className, inset } = _a, props = __rest(_a, ["className", "inset"]);
+    return (_jsx(DropdownMenuPrimitive.Label, Object.assign({ ref: ref, className: cn("px-3 py-2 typography-small4 text-text-grey-medium", inset && "pl-8", className) }, props)));
+});
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+const DropdownMenuSeparator = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(DropdownMenuPrimitive.Separator, Object.assign({ ref: ref, className: cn("-mx-2 my-2 h-px bg-[var(--dropdown-menu-seperator-bg)]", className) }, props)));
+});
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+const DropdownMenuShortcut = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("span", Object.assign({ className: cn("ml-auto text-xs tracking-widest opacity-60", className) }, props)));
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };

package/dist/components/DropdownMenu/DropdownMenu.stories.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./DropdownMenu";
+import Button from "../Button/Button";
+import Icon from "../Icon/Icon";
+import ActionButton from "../ActionButton/ActionButton";
+const meta = {
+    title: "Components/DropdownMenu",
+    component: DropdownMenu,
+    // tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+    // DropdownMenu: "Lorem Ipsum",
+    // value: "Lorem Ipsum",
+    // fullwidth: true,
+    },
+    render: (args) => {
+        console.log("args ", args);
+        const props = Object.assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx("div", { className: "flex flex-1 justify-center items-center space-x-2", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: "Open" }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { disabled: true, children: "Option Description" }), _jsxs(DropdownMenuItem, { children: [_jsx(Icon, { type: "heroicons", name: "check", className: "size-4" }), "Option Description"] }), _jsx(DropdownMenuItem, { children: "Option Description" })] })] }) }) }));
+    },
+};
+export const WithIcon = {
+    args: {
+    // DropdownMenu: "Lorem Ipsum",
+    // value: "Lorem Ipsum",
+    // fullwidth: true,
+    },
+    render: (args) => {
+        console.log("args ", args);
+        const props = Object.assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx("div", { className: "flex flex-1 justify-center items-center space-x-2", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open" }) }), _jsxs(DropdownMenuContent, { children: [_jsxs(DropdownMenuItem, { children: [_jsx(Icon, { type: "heroicons", name: "rocket-launch", className: "size-4" }), _jsx("span", { children: "Option Description" })] }), _jsxs(DropdownMenuItem, { children: [_jsx(Icon, { type: "heroicons", name: "rocket-launch", className: "size-4" }), _jsx("span", { children: "Option Description" })] }), _jsxs(DropdownMenuItem, { disabled: true, children: [_jsx(Icon, { type: "heroicons", name: "rocket-launch", className: "size-4" }), _jsx("span", { children: "Option Description" })] })] })] }) }) }));
+    },
+};
+export const WithLabel = {
+    args: {
+    // DropdownMenu: "Lorem Ipsum",
+    // value: "Lorem Ipsum",
+    // fullwidth: true,
+    },
+    render: (args) => {
+        console.log("args ", args);
+        const props = Object.assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx("div", { className: "flex flex-1 justify-center items-center space-x-2", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open" }) }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: "Sort by" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" })] })] }) }) }));
+    },
+};
+export const Checkboxes = {
+    args: {
+    // DropdownMenu: "Lorem Ipsum",
+    // value: "Lorem Ipsum",
+    // fullwidth: true,
+    },
+    render: (args) => {
+        console.log("args ", args);
+        const props = Object.assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx("div", { className: "flex flex-1 justify-center items-center space-x-2", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Open" }) }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuCheckboxItem, { children: "Option Description" }), _jsx(DropdownMenuCheckboxItem, { checked: true, children: "Option Description" }), _jsx(DropdownMenuCheckboxItem, { disabled: true, children: "Option Description" }), _jsx(DropdownMenuCheckboxItem, { checked: true, disabled: true, children: "Option Description" }), _jsxs(DropdownMenuCheckboxItem, { children: [_jsx(Icon, { type: "heroicons", name: "rocket-launch", className: "size-4" }), _jsx("span", { children: "Option Description" })] }), _jsxs(DropdownMenuCheckboxItem, { checked: true, children: [_jsx(Icon, { type: "heroicons", name: "rocket-launch", className: "size-4" }), _jsx("span", { children: "Option Description" })] }), _jsxs(DropdownMenuCheckboxItem, { disabled: true, children: [_jsx(Icon, { type: "heroicons", name: "rocket-launch", className: "size-4" }), _jsx("span", { children: "Option Description" })] }), _jsxs(DropdownMenuCheckboxItem, { checked: true, disabled: true, children: [_jsx(Icon, { type: "heroicons", name: "rocket-launch", className: "size-4" }), _jsx("span", { children: "Option Description" })] })] })] }) }) }));
+    },
+};
+export const SubMenu = {
+    args: {
+    // DropdownMenu: "Lorem Ipsum",
+    // value: "Lorem Ipsum",
+    // fullwidth: true,
+    },
+    render: (args) => {
+        console.log("args ", args);
+        const props = Object.assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx("div", { className: "flex flex-1 justify-center items-center space-x-2", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: "Open" }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuLabel, { children: "My Account" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { children: "Profile" }), _jsx(DropdownMenuItem, { children: "Billing" }), _jsx(DropdownMenuItem, { children: "Team" }), _jsx(DropdownMenuItem, { children: "Subscription" }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuGroup, { children: [_jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { children: _jsx("span", { children: "Invite users" }) }), _jsx(DropdownMenuPortal, { children: _jsxs(DropdownMenuSubContent, { children: [_jsx(DropdownMenuItem, { children: _jsx("span", { children: "Email" }) }), _jsx(DropdownMenuItem, { children: _jsx("span", { children: "Message" }) }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { children: _jsx("span", { children: "More..." }) })] }) })] }), _jsx(DropdownMenuCheckboxItem, { children: "Panel" })] })] })] }) }) }));
+    },
+};
+export const OnIcon = {
+    args: {
+    // DropdownMenu: "Lorem Ipsum",
+    // value: "Lorem Ipsum",
+    // fullwidth: true,
+    },
+    render: (args) => {
+        console.log("args ", args);
+        const props = Object.assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx("div", { className: "flex flex-1 justify-center items-center space-x-2", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { children: _jsx(Icon, { type: "heroicons", name: "ellipsis-vertical" }) }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" })] })] }) }) }));
+    },
+};
+export const AsChild = {
+    args: {
+    // DropdownMenu: "Lorem Ipsum",
+    // value: "Lorem Ipsum",
+    // fullwidth: true,
+    },
+    render: (args) => {
+        console.log("args ", args);
+        const props = Object.assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx("div", { className: "flex flex-1 justify-center items-center space-x-2", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(ActionButton, { variant: "icon", children: _jsx(Icon, { type: "heroicons", name: "ellipsis-vertical" }) }) }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" })] })] }) }) }));
+    },
+};
+export const Position = {
+    args: {
+        side: "bottom",
+        align: "center",
+        sideOffset: 5,
+        alignOffset: 0,
+    },
+    render: (args) => {
+        console.log("args ", args);
+        const props = Object.assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx("div", { className: "flex flex-1 justify-center items-center space-x-2", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(ActionButton, { variant: "icon", children: _jsx(Icon, { type: "heroicons", name: "ellipsis-vertical" }) }) }), _jsxs(DropdownMenuContent, Object.assign({}, args, { side: "bottom" // controls the side (top, bottom, left, right)
+                            , align: "start" // controls the alignment (start, center, end)
+                            , sideOffset: 5, alignOffset: 0, children: [_jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" }), _jsx(DropdownMenuItem, { children: "Option Description" })] }))] }) }) }));
+    },
+};

package/dist/components/Tabs/Tabs.js

@@ -1,5 +1,4 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-("");
 import { useState, useRef, useEffect } from "react";
 import { cn } from "@/utils/cn";
 const Tabs = ({ tabs = [], initialTab = 0, tabBarSize = 38, enableBorderLine = true, tabMode = "start", className, tabBarClassName, tabButtonClassName, tabButtonActiveClassName, tabContentClassName, borderSliderClassname, }) => {

package/dist/components/Text/Text.js

@@ -26,6 +26,8 @@ const textVariants = cva(["text-foreground"], {
         },
     },
 });
+// montserrat: ["Montserrat", "sans-serif"],
+// poppins: ["Poppins", "sans-serif"],  font-montserrat, font-poppins
 // TODO font, fontBold, elipt
 const Text = (_a, ref) => {
     var { variant = "body1", tag: Tag = "p", children, className = "", color, style } = _a, props = __rest(_a, ["variant", "tag", "children", "className", "color", "style"]);

package/dist/esm/bundle.css

@@ -628,10 +628,18 @@ body {
 .m-0{
   margin: 0px;
 }
+.-mx-2{
+  margin-left: -0.5rem;
+  margin-right: -0.5rem;
+}
 .mx-auto{
   margin-left: auto;
   margin-right: auto;
 }
+.my-2{
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
 .ml-2{
   margin-left: 0.5rem;
 }
@@ -641,6 +649,9 @@ body {
 .ml-4{
   margin-left: 1rem;
 }
+.ml-auto{
+  margin-left: auto;
+}
 .mr-2{
   margin-right: 0.5rem;
 }
@@ -800,6 +811,9 @@ body {
 .h-full{
   height: 100%;
 }
+.h-px{
+  height: 1px;
+}
 .h-screen{
   height: 100vh;
 }
@@ -812,6 +826,9 @@ body {
 .w-10{
   width: 2.5rem;
 }
+.w-2{
+  width: 0.5rem;
+}
 .w-4{
   width: 1rem;
 }
@@ -860,6 +877,9 @@ body {
 .min-w-72{
   min-width: 18rem;
 }
+.min-w-\[154px\]{
+  min-width: 154px;
+}
 .max-w-lg{
   max-width: 32rem;
 }
@@ -905,6 +925,9 @@ body {
 .animate-spin{
   animation: spin 1s linear infinite;
 }
+.cursor-default{
+  cursor: default;
+}
 .cursor-pointer{
   cursor: pointer;
 }
@@ -1275,6 +1298,15 @@ body {
 .bg-\[rgb\(var\(--navbar-bg-color\)\)\]{
   background-color: rgb(var(--navbar-bg-color));
 }
+.bg-\[var\(--dropdown-menu-default-bg\)\]{
+  background-color: var(--dropdown-menu-default-bg);
+}
+.bg-\[var\(--dropdown-menu-selected-bg\)\]{
+  background-color: var(--dropdown-menu-selected-bg);
+}
+.bg-\[var\(--dropdown-menu-seperator-bg\)\]{
+  background-color: var(--dropdown-menu-seperator-bg);
+}
 .bg-action-button-icon-active{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--action-button-icon-active-bg) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -1616,6 +1648,10 @@ body {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
 }
+.px-2{
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
 .px-3{
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -1668,6 +1704,10 @@ body {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
+.py-1\.5{
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
 .py-14{
   padding-top: 3.5rem;
   padding-bottom: 3.5rem;
@@ -1726,6 +1766,18 @@ body {
 .pe-\[72px\]{
   padding-inline-end: 72px;
 }
+.pl-8{
+  padding-left: 2rem;
+}
+.pl-9{
+  padding-left: 2.25rem;
+}
+.pr-4{
+  padding-right: 1rem;
+}
+.pr-xxl{
+  padding-right: var(--spacing-spacing-xxl);
+}
 .ps-11{
   padding-inline-start: 2.75rem;
 }
@@ -1756,6 +1808,9 @@ body {
 .align-middle{
   vertical-align: middle;
 }
+.font-poppins{
+  font-family: Poppins, sans-serif;
+}
 .text-body1{
   font-size: var(--body1-size, 16px);
   line-height: var(--body1-line-height, 20px);
@@ -1904,6 +1959,10 @@ body {
   font-size: 1.25rem;
   line-height: 1.75rem;
 }
+.text-xs{
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
 .font-bold{
   font-weight: 700;
 }
@@ -1922,6 +1981,9 @@ body {
 .tracking-tight{
   letter-spacing: -0.025em;
 }
+.tracking-widest{
+  letter-spacing: 0.1em;
+}
 .\!text-primary-foreground{
   --tw-text-opacity: 1 !important;
   color: color-mix(in srgb, var(--primary-foreground) calc(100% * var(--tw-text-opacity)), transparent) !important;
@@ -1929,6 +1991,12 @@ body {
 .text-\[rgb\(var\(--navbar-text-color\)\)\]{
   color: rgb(var(--navbar-text-color));
 }
+.text-\[var\(--dropdown-menu-default-text\)\]{
+  color: var(--dropdown-menu-default-text);
+}
+.text-\[var\(--dropdown-menu-selected-text\)\]{
+  color: var(--dropdown-menu-selected-text);
+}
 .text-\[var\(--loading-process-color\)\]{
   color: var(--loading-process-color);
 }
@@ -2174,9 +2242,17 @@ body {
 .caret-primary{
   caret-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
 }
+.opacity-60{
+  opacity: 0.6;
+}
 .opacity-70{
   opacity: 0.7;
 }
+.shadow-\[0px_2px_24px_0px_rgba\(145\2c _158\2c _171\2c _0\.24\)\]{
+  --tw-shadow: 0px 2px 24px 0px rgba(145, 158, 171, 0.24);
+  --tw-shadow-colored: 0px 2px 24px 0px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .shadow-lg{
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -2187,6 +2263,10 @@ body {
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-\[var\(--dropdown-menu-shadow\)\]{
+  --tw-shadow-color: var(--dropdown-menu-shadow);
+  --tw-shadow: var(--tw-shadow-colored);
+}
 .outline-none{
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -2904,6 +2984,13 @@ body {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * var(--tw-border-opacity)), transparent);
 }
+.focus\:\!bg-\[var\(--dropdown-menu-hover-bg\)\]:focus{
+  background-color: var(--dropdown-menu-hover-bg) !important;
+}
+.focus\:bg-primary:focus{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-bg-opacity)), transparent);
+}
 .focus\:pe-10:focus{
   padding-inline-end: 2.5rem;
 }
@@ -2913,6 +3000,9 @@ body {
 .focus\:pe-8:focus{
   padding-inline-end: 2rem;
 }
+.focus\:\!text-\[var\(--dropdown-menu-hover-text\)\]:focus{
+  color: var(--dropdown-menu-hover-text) !important;
+}
 .focus\:text-input-filled-text:focus{
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity)), transparent);
@@ -3393,6 +3483,9 @@ body {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--text-dark) calc(100% * var(--tw-text-opacity)), transparent);
 }
+.active\:opacity-75:active{
+  opacity: 0.75;
+}
 .active\:ring-input-disable-stroke:active{
   --tw-ring-opacity: 1;
   --tw-ring-color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-ring-opacity)), transparent);
@@ -3842,6 +3935,9 @@ body {
 .peer:disabled ~ .peer-disabled\:opacity-70{
   opacity: 0.7;
 }
+.data-\[disabled\]\:pointer-events-none[data-disabled]{
+  pointer-events: none;
+}
 .data-\[state\=checked\]\:translate-x-4[data-state=checked]{
   --tw-translate-x: 1rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -3938,6 +4034,9 @@ body {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-border-opacity)), transparent);
 }
+.data-\[disabled\]\:\!bg-\[var\(--dropdown-menu-disabled-bg\)\][data-disabled]{
+  background-color: var(--dropdown-menu-disabled-bg) !important;
+}
 .data-\[loading\=true\]\:bg-button-error-flat-active[data-loading=true]{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--button-error-flat-active-bg) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -4022,6 +4121,9 @@ body {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--button-warning-solid-active-bg) calc(100% * var(--tw-bg-opacity)), transparent);
 }
+.data-\[state\=\'checked\'\]\:bg-\[var\(--dropdown-menu-selected-bg\)\][data-state='checked']{
+  background-color: var(--dropdown-menu-selected-bg);
+}
 .data-\[state\=checked\]\:bg-primary[data-state=checked]{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -4107,6 +4209,9 @@ body {
 .data-\[loading\=true\]\:fill-button-warning-solid-active[data-loading=true]{
   fill: color-mix(in srgb, var(--button-warning-solid-active-text) calc(100% * 1), transparent);
 }
+.data-\[disabled\]\:\!text-\[var\(--dropdown-menu-disabled-text\)\][data-disabled]{
+  color: var(--dropdown-menu-disabled-text) !important;
+}
 .data-\[loading\=true\]\:text-button-error-flat-active[data-loading=true]{
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--button-error-flat-active-text) calc(100% * var(--tw-text-opacity)), transparent);
@@ -4191,6 +4296,9 @@ body {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--button-warning-solid-active-text) calc(100% * var(--tw-text-opacity)), transparent);
 }
+.data-\[state\=\'checked\'\]\:text-\[var\(--dropdown-menu-selected-text\)\][data-state='checked']{
+  color: var(--dropdown-menu-selected-text);
+}
 .data-\[state\=checked\]\:text-primary-foreground[data-state=checked]{
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--primary-foreground) calc(100% * var(--tw-text-opacity)), transparent);
@@ -4199,6 +4307,11 @@ body {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--primary-foreground) calc(100% * var(--tw-text-opacity)), transparent);
 }
+.data-\[state\=\'checked\'\]\:typography-subtitile5[data-state='checked']{
+  font-size: var(--subtitle5-size, 14px);
+  line-height: var(--subtitle5-line-height, 22px);
+  font-weight: var(--subtitle5-weight, 500);
+}
 @media (min-width: 640px){
 
   .sm\:mt-0{