@rovula/ui 0.0.22 → 0.0.24

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

@@ -1,12 +1,13 @@
 import React from "react";
-export type TextProps = {
+export type TextProps<T extends React.ElementType> = {
     variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitile1" | "subtitile2" | "subtitile3" | "subtitile4" | "subtitile5" | "subtitile6" | "body1" | "body2" | "body3" | "body4" | "small1" | "small2" | "small3" | "small4" | "small5" | "label1" | "label2" | "buttonL" | "buttonMS";
     color?: "primary" | "secondary" | "success" | "tertiary" | "info" | "warning" | "error";
     children?: React.ReactNode;
     className?: string;
-    tag?: keyof JSX.IntrinsicElements;
+    tag?: T;
     style?: React.CSSProperties;
     id?: string;
-};
-declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<keyof JSX.IntrinsicElements | undefined>>;
-export default Text;
+} & React.ComponentProps<T>;
+type TextComponent<T extends React.ElementType> = React.ForwardRefExoticComponent<TextProps<T> & React.RefAttributes<HTMLElement>>;
+declare const ForwardedText: TextComponent<any>;
+export default ForwardedText;

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

@@ -1,21 +1,13 @@
 import React from "react";
 declare const meta: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("./Text").TextProps & React.RefAttributes<keyof JSX.IntrinsicElements | undefined>>;
+    component: React.ForwardRefExoticComponent<any>;
     tags: string[];
     parameters: {
         layout: string;
     };
     decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
-        variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitile1" | "subtitile2" | "subtitile3" | "subtitile4" | "subtitile5" | "subtitile6" | "body1" | "body2" | "body3" | "body4" | "small1" | "small2" | "small3" | "small4" | "small5" | "label1" | "label2" | "buttonL" | "buttonMS" | undefined;
-        color?: "primary" | "secondary" | "tertiary" | "success" | "info" | "warning" | "error" | undefined;
-        children?: React.ReactNode;
-        className?: string | undefined;
-        tag?: keyof JSX.IntrinsicElements | undefined;
-        style?: React.CSSProperties | undefined;
-        id?: string | undefined;
-        ref?: React.LegacyRef<keyof JSX.IntrinsicElements | undefined> | undefined;
-        key?: React.Key | null | undefined;
+        [x: string]: any;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;

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,4 +1,3 @@
-"use client";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
 import { cn } from "@/utils/cn";

package/dist/components/Text/Text.js

@@ -1,3 +1,14 @@
+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 } from "react/jsx-runtime";
 import { cn } from "@/utils/cn";
 import { forwardRef } from "react";
@@ -15,8 +26,13 @@ const textVariants = cva(["text-foreground"], {
         },
     },
 });
+// montserrat: ["Montserrat", "sans-serif"],
+// poppins: ["Poppins", "sans-serif"],  font-montserrat, font-poppins
 // TODO font, fontBold, elipt
-const Text = forwardRef(({ variant = "body1", tag: Tag = "p", children, className = "", color, style, }) => {
-    return (_jsx(Tag, { className: cn(`typography-${variant}`, textVariants({ color }), className), style: style, children: children }));
-});
-export default Text;
+const Text = (_a, ref) => {
+    var { variant = "body1", tag: Tag = "p", children, className = "", color, style } = _a, props = __rest(_a, ["variant", "tag", "children", "className", "color", "style"]);
+    return (_jsx(Tag, Object.assign({ ref: ref, className: cn(`typography-${variant}`, textVariants({ color }), className), style: style }, props, { children: children })));
+};
+const ForwardedText = forwardRef(Text);
+ForwardedText.displayName = "Text";
+export default ForwardedText;