@wallarm-org/design-system 0.1.0

package/dist/components/Drawer/DrawerRoot.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { Dialog } from "@ark-ui/react/dialog";
+import { useDrawerContext } from "./DrawerContext/index.js";
+const DrawerRoot = ({ children, closeOnEscape, closeOnOutsideClick })=>{
+    const { isOpen, onOpenChange } = useDrawerContext();
+    const handleOpenChange = ({ open })=>{
+        onOpenChange(open);
+    };
+    return /*#__PURE__*/ jsx(Dialog.Root, {
+        open: isOpen,
+        onOpenChange: handleOpenChange,
+        closeOnEscape: closeOnEscape,
+        closeOnInteractOutside: closeOnOutsideClick,
+        modal: true,
+        lazyMount: true,
+        unmountOnExit: true,
+        children: children
+    });
+};
+DrawerRoot.displayName = 'DrawerRoot';
+export { DrawerRoot };

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

@@ -0,0 +1,6 @@
+import type { FC, ReactNode, Ref } from 'react';
+export interface DrawerTitleProps {
+    children: ReactNode;
+    ref?: Ref<HTMLHeadingElement>;
+}
+export declare const DrawerTitle: FC<DrawerTitleProps>;

package/dist/components/Drawer/DrawerTitle.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { Dialog } from "@ark-ui/react/dialog";
+import { cn } from "../../utils/cn.js";
+const DrawerTitle = ({ children, ref })=>/*#__PURE__*/ jsx(Dialog.Title, {
+        ref: ref,
+        className: cn('flex-1 min-w-0', 'font-sans-display font-medium text-lg leading-28', 'text-text-primary'),
+        children: children
+    });
+DrawerTitle.displayName = 'DrawerTitle';
+export { DrawerTitle };

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

@@ -0,0 +1,8 @@
+import type { FC, ReactNode, Ref } from 'react';
+export interface DrawerTriggerProps {
+    children: ReactNode;
+    /** Render as child component */
+    asChild?: boolean;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare const DrawerTrigger: FC<DrawerTriggerProps>;

package/dist/components/Drawer/DrawerTrigger.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { Dialog } from "@ark-ui/react/dialog";
+const DrawerTrigger = ({ children, asChild = false, ref })=>/*#__PURE__*/ jsx(Dialog.Trigger, {
+        ref: ref,
+        asChild: asChild,
+        children: children
+    });
+DrawerTrigger.displayName = 'DrawerTrigger';
+export { DrawerTrigger };

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

@@ -0,0 +1,6 @@
+export declare const drawerContentVariants: (props?: ({
+    isResizing?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const drawerPositionerVariants: (props?: ({
+    isResizing?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/Drawer/classes.js

@@ -0,0 +1,17 @@
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const drawerContentVariants = cva(cn('relative', 'bg-bg-surface-2', 'border border-border-primary-light', 'rounded-12', 'shadow-xl', 'flex flex-col', 'overflow-visible', 'outline-none', '**:data-[slot=drawer-scroll-area-content]:pb-24', 'has-data-[slot=drawer-footer]:**:data-[slot=drawer-scroll-area-content]:pb-0', '[&_[data-slot=drawer-body]:has([data-part=viewport][data-overflow-y])]:border-y', '[&_[data-slot=drawer-body]:has([data-part=viewport][data-overflow-y])]:border-transparent', '[&_[data-slot=drawer-body]:has([data-part=viewport][data-overflow-y])]:transition-colors', '[&_[data-slot=drawer-body]:has([data-part=viewport][data-overflow-y]:not([data-at-top]))]:border-t-border-primary-light', '[&_[data-slot=drawer-body]:has([data-part=viewport][data-overflow-y]:not([data-at-bottom]))]:border-b-border-primary-light', '[&:has([data-slot=drawer-header] [data-scope=tabs])_[data-slot=drawer-body]]:border-t-0', '[&:has([data-slot=drawer-header] [data-slot=tabs-list])_[data-slot=drawer-body]]:border-t-0', '[&:has([data-slot=drawer-header]+[data-scope=tabs])_[data-slot=drawer-body]]:border-t-0', '[&:has([data-slot=drawer-header]+[data-slot=tabs-list])_[data-slot=drawer-body]]:border-t-0', 'data-[state=open]:animate-in data-[state=closed]:animate-out', 'data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0', 'data-[state=open]:duration-300 data-[state=closed]:duration-150'), {
+    variants: {
+        isResizing: {
+            true: 'transition-none'
+        }
+    }
+});
+const drawerPositionerVariants = cva(cn('flex w-full', 'origin-[right center]', 'z-[calc(var(--drawer-positioner-z-index)+(var(--layer-index)*var(--drawer-level-ratio)))]'), {
+    variants: {
+        isResizing: {
+            true: 'transition-transform'
+        }
+    }
+});
+export { drawerContentVariants, drawerPositionerVariants };

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

@@ -0,0 +1,11 @@
+/** Preset drawer widths in pixels */
+export declare const DRAWER_SIZES: {
+    readonly small: 640;
+    readonly medium: 960;
+    readonly large: 1130;
+};
+/** Default min/max width constraints in pixels */
+export declare const DRAWER_WIDTH_CONSTRAINTS: {
+    readonly min: 400;
+    readonly max: 1130;
+};

package/dist/components/Drawer/constants.js

@@ -0,0 +1,10 @@
+const DRAWER_SIZES = {
+    small: 640,
+    medium: 960,
+    large: 1130
+};
+const DRAWER_WIDTH_CONSTRAINTS = {
+    min: 400,
+    max: 1130
+};
+export { DRAWER_SIZES, DRAWER_WIDTH_CONSTRAINTS };

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

@@ -0,0 +1,15 @@
+export { drawerContentVariants, drawerPositionerVariants } from './classes';
+export { Drawer, type DrawerProps } from './Drawer';
+export { DrawerBody, type DrawerBodyProps } from './DrawerBody';
+export { DrawerClose, type DrawerCloseProps } from './DrawerClose';
+export { DrawerContent, type DrawerContentProps } from './DrawerContent';
+export { useDrawerContext } from './DrawerContext';
+export { DrawerFooter, type DrawerFooterProps } from './DrawerFooter';
+export { DrawerFooterControls, type DrawerFooterControlsProps, } from './DrawerFooterControls';
+export { DrawerHeader, type DrawerHeaderProps } from './DrawerHeader';
+export { DrawerOverlay } from './DrawerOverlay';
+export { DrawerPortal } from './DrawerPortal';
+export { DrawerPositioner, type DrawerPositionerProps, } from './DrawerPositioner';
+export { DrawerResizeHandle } from './DrawerResizeHandle';
+export { DrawerTitle, type DrawerTitleProps } from './DrawerTitle';
+export { DrawerTrigger, type DrawerTriggerProps } from './DrawerTrigger';

package/dist/components/Drawer/index.js

@@ -0,0 +1,16 @@
+import { drawerContentVariants, drawerPositionerVariants } from "./classes.js";
+import { Drawer } from "./Drawer.js";
+import { DrawerBody } from "./DrawerBody.js";
+import { DrawerClose } from "./DrawerClose.js";
+import { DrawerContent } from "./DrawerContent.js";
+import { useDrawerContext } from "./DrawerContext/index.js";
+import { DrawerFooter } from "./DrawerFooter.js";
+import { DrawerFooterControls } from "./DrawerFooterControls.js";
+import { DrawerHeader } from "./DrawerHeader.js";
+import { DrawerOverlay } from "./DrawerOverlay.js";
+import { DrawerPortal } from "./DrawerPortal.js";
+import { DrawerPositioner } from "./DrawerPositioner.js";
+import { DrawerResizeHandle } from "./DrawerResizeHandle.js";
+import { DrawerTitle } from "./DrawerTitle.js";
+import { DrawerTrigger } from "./DrawerTrigger.js";
+export { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, drawerContentVariants, drawerPositionerVariants, useDrawerContext };

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

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import { type DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
+export declare const DropdownMenu: FC<DropdownMenuProps>;

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+import { Root } from "@radix-ui/react-dropdown-menu";
+const DropdownMenu = (props)=>/*#__PURE__*/ jsx(Root, {
+        ...props
+    });
+DropdownMenu.displayName = 'DropdownMenu';
+export { DropdownMenu };

package/dist/components/DropdownMenu/DropdownMenuContent.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithoutRef, ElementRef, FC, Ref } from 'react';
+import { Content } from '@radix-ui/react-dropdown-menu';
+type DropdownMenuContentProps = ComponentPropsWithoutRef<typeof Content> & {
+    ref?: Ref<ElementRef<typeof Content>>;
+};
+export declare const DropdownMenuContent: FC<DropdownMenuContentProps>;
+export {};

package/dist/components/DropdownMenu/DropdownMenuContent.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Content } from "@radix-ui/react-dropdown-menu";
+import { cn } from "../../utils/cn.js";
+import { ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport } from "../ScrollArea/index.js";
+import { dropdownMenuClassNames } from "./classes.js";
+import { DropdownMenuPortal } from "./DropdownMenuPortal.js";
+const DropdownMenuContent = ({ className, sideOffset = 4, children, ref, ...props })=>/*#__PURE__*/ jsx(DropdownMenuPortal, {
+        children: /*#__PURE__*/ jsx(Content, {
+            ref: ref,
+            sideOffset: sideOffset,
+            collisionPadding: 4,
+            className: cn(dropdownMenuClassNames, 'max-h-(--radix-dropdown-menu-content-available-height)', 'origin-[--radix-dropdown-menu-content-transform-origin]', className),
+            ...props,
+            asChild: true,
+            children: /*#__PURE__*/ jsxs(ScrollArea, {
+                children: [
+                    /*#__PURE__*/ jsx(ScrollAreaViewport, {
+                        children: /*#__PURE__*/ jsx(ScrollAreaContent, {
+                            className: cn('flex flex-col gap-1'),
+                            children: children
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(ScrollAreaScrollbar, {}),
+                    /*#__PURE__*/ jsx(ScrollAreaCorner, {})
+                ]
+            })
+        })
+    });
+DropdownMenuContent.displayName = 'DropdownMenuContent';
+export { DropdownMenuContent };

package/dist/components/DropdownMenu/DropdownMenuGroup.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import { type DropdownMenuGroupProps } from '@radix-ui/react-dropdown-menu';
+export declare const DropdownMenuGroup: FC<DropdownMenuGroupProps>;

package/dist/components/DropdownMenu/DropdownMenuGroup.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+import { Group } from "@radix-ui/react-dropdown-menu";
+const DropdownMenuGroup = (props)=>/*#__PURE__*/ jsx(Group, {
+        ...props
+    });
+DropdownMenuGroup.displayName = 'DropdownMenuGroup';
+export { DropdownMenuGroup };

package/dist/components/DropdownMenu/DropdownMenuItem.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentPropsWithoutRef, ElementRef, FC, Ref } from 'react';
+import { Item } from '@radix-ui/react-dropdown-menu';
+import type { VariantProps } from 'class-variance-authority';
+import { dropdownMenuItemVariants } from './classes';
+type DropdownMenuItemNativeProps = ComponentPropsWithoutRef<typeof Item>;
+export type DropdownMenuItemVariantsProps = VariantProps<typeof dropdownMenuItemVariants>;
+interface DropdownMenuItemBaseProps {
+    inset?: boolean;
+    ref?: Ref<ElementRef<typeof Item>>;
+}
+type DropdownMenuItemProps = DropdownMenuItemNativeProps & DropdownMenuItemVariantsProps & DropdownMenuItemBaseProps;
+export declare const DropdownMenuItem: FC<DropdownMenuItemProps>;
+export {};

package/dist/components/DropdownMenu/DropdownMenuItem.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { Item } from "@radix-ui/react-dropdown-menu";
+import { cn } from "../../utils/cn.js";
+import { dropdownMenuItemVariants } from "./classes.js";
+const DropdownMenuItem = ({ inset = false, variant = 'default', ...props })=>/*#__PURE__*/ jsx(Item, {
+        ...props,
+        className: cn(dropdownMenuItemVariants({
+            variant,
+            inset
+        }))
+    });
+DropdownMenuItem.displayName = 'DropdownMenuItem';
+export { DropdownMenuItem };

package/dist/components/DropdownMenu/DropdownMenuItemContent.d.ts

@@ -0,0 +1,2 @@
+import type { FC, PropsWithChildren } from 'react';
+export declare const DropdownMenuItemContent: FC<PropsWithChildren>;

package/dist/components/DropdownMenu/DropdownMenuItemContent.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { VStack } from "../Stack/index.js";
+const DropdownMenuItemContent = ({ children })=>/*#__PURE__*/ jsx(VStack, {
+        spacing: 0,
+        align: "start",
+        children: children
+    });
+export { DropdownMenuItemContent };

package/dist/components/DropdownMenu/DropdownMenuItemDescription.d.ts

@@ -0,0 +1,2 @@
+import type { FC, PropsWithChildren } from 'react';
+export declare const DropdownMenuItemDescription: FC<PropsWithChildren>;

package/dist/components/DropdownMenu/DropdownMenuItemDescription.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { Text } from "../Text/index.js";
+const DropdownMenuItemDescription = ({ children })=>/*#__PURE__*/ jsx(Text, {
+        size: "sm",
+        color: "secondary",
+        "data-slot": "dropdown-menu-item-description",
+        children: children
+    });
+export { DropdownMenuItemDescription };

package/dist/components/DropdownMenu/DropdownMenuItemIcon.d.ts

@@ -0,0 +1,2 @@
+import type { FC, PropsWithChildren } from 'react';
+export declare const DropdownMenuItemIcon: FC<PropsWithChildren>;

package/dist/components/DropdownMenu/DropdownMenuItemIcon.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+const DropdownMenuItemIcon = ({ children })=>/*#__PURE__*/ jsx("div", {
+        className: cn('flex items-start self-start h-full pt-2'),
+        children: children
+    });
+export { DropdownMenuItemIcon };

package/dist/components/DropdownMenu/DropdownMenuItemText.d.ts

@@ -0,0 +1,2 @@
+import type { FC, PropsWithChildren } from 'react';
+export declare const DropdownMenuItemText: FC<PropsWithChildren>;

package/dist/components/DropdownMenu/DropdownMenuItemText.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+import { Text } from "../Text/index.js";
+const DropdownMenuItemText = ({ children })=>/*#__PURE__*/ jsx(Text, {
+        size: "sm",
+        children: children
+    });
+export { DropdownMenuItemText };

package/dist/components/DropdownMenu/DropdownMenuLabel.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentPropsWithoutRef, FC, Ref } from 'react';
+import { Label } from '@radix-ui/react-dropdown-menu';
+import type { VariantProps } from 'class-variance-authority';
+import { dropdownMenuLabelVariants } from './classes';
+type DropdownMenuLabelNativeProps = ComponentPropsWithoutRef<typeof Label>;
+type DropdownMenuLabelVariantsProps = VariantProps<typeof dropdownMenuLabelVariants>;
+export type DropdownMenuLabelProps = DropdownMenuLabelNativeProps & DropdownMenuLabelVariantsProps & {
+    ref?: Ref<HTMLDivElement>;
+};
+export declare const DropdownMenuLabel: FC<DropdownMenuLabelProps>;
+export {};

package/dist/components/DropdownMenu/DropdownMenuLabel.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { Label } from "@radix-ui/react-dropdown-menu";
+import { cn } from "../../utils/cn.js";
+import { dropdownMenuLabelVariants } from "./classes.js";
+const DropdownMenuLabel = ({ className, inset, ...props })=>/*#__PURE__*/ jsx(Label, {
+        className: cn(dropdownMenuLabelVariants({
+            inset
+        }), className),
+        ...props
+    });
+DropdownMenuLabel.displayName = 'DropdownMenuLabel';
+export { DropdownMenuLabel };

package/dist/components/DropdownMenu/DropdownMenuPortal.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import { type DropdownMenuPortalProps } from '@radix-ui/react-dropdown-menu';
+export declare const DropdownMenuPortal: FC<DropdownMenuPortalProps>;

package/dist/components/DropdownMenu/DropdownMenuPortal.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+import { Portal } from "@radix-ui/react-dropdown-menu";
+const DropdownMenuPortal = (props)=>/*#__PURE__*/ jsx(Portal, {
+        ...props
+    });
+DropdownMenuPortal.displayName = 'DropdownMenuPortal';
+export { DropdownMenuPortal };

package/dist/components/DropdownMenu/DropdownMenuSeparator.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithoutRef, FC, Ref } from 'react';
+import { Separator } from '@radix-ui/react-dropdown-menu';
+export type DropdownMenuSeparatorProps = ComponentPropsWithoutRef<typeof Separator> & {
+    ref?: Ref<HTMLDivElement>;
+};
+export declare const DropdownMenuSeparator: FC<DropdownMenuSeparatorProps>;

package/dist/components/DropdownMenu/DropdownMenuSeparator.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { Separator } from "@radix-ui/react-dropdown-menu";
+import { cn } from "../../utils/cn.js";
+const DropdownMenuSeparator = ({ className, ...props })=>/*#__PURE__*/ jsx(Separator, {
+        className: cn('mx-8 my-4 h-px bg-border-primary', className),
+        ...props
+    });
+DropdownMenuSeparator.displayName = 'DropdownMenuSeparator';
+export { DropdownMenuSeparator };

package/dist/components/DropdownMenu/DropdownMenuShortcut.d.ts

@@ -0,0 +1,2 @@
+import type { FC, HTMLAttributes } from 'react';
+export declare const DropdownMenuShortcut: FC<HTMLAttributes<HTMLSpanElement>>;

package/dist/components/DropdownMenu/DropdownMenuShortcut.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+const DropdownMenuShortcut = ({ ...props })=>/*#__PURE__*/ jsx("div", {
+        ...props,
+        className: cn('ml-auto self-start pl-8')
+    });
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+export { DropdownMenuShortcut };

package/dist/components/DropdownMenu/DropdownMenuSub.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import { type DropdownMenuSubProps } from '@radix-ui/react-dropdown-menu';
+export declare const DropdownMenuSub: FC<DropdownMenuSubProps>;

package/dist/components/DropdownMenu/DropdownMenuSub.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+import { Sub } from "@radix-ui/react-dropdown-menu";
+const DropdownMenuSub = (props)=>/*#__PURE__*/ jsx(Sub, {
+        ...props
+    });
+DropdownMenuSub.displayName = 'DropdownMenuSub';
+export { DropdownMenuSub };

package/dist/components/DropdownMenu/DropdownMenuSubContent.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithoutRef, ElementRef, FC, Ref } from 'react';
+import { SubContent } from '@radix-ui/react-dropdown-menu';
+type DropdownMenuSubContentProps = ComponentPropsWithoutRef<typeof SubContent> & {
+    ref?: Ref<ElementRef<typeof SubContent>>;
+};
+export declare const DropdownMenuSubContent: FC<DropdownMenuSubContentProps>;
+export {};

package/dist/components/DropdownMenu/DropdownMenuSubContent.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { SubContent } from "@radix-ui/react-dropdown-menu";
+import { cn } from "../../utils/cn.js";
+const DROPDOWN_MENU_SUB_CONTENT_ALIGN_OFFSET = -9;
+const DROPDOWN_MENU_SUB_SIDE_OFFSET = 4;
+const DropdownMenuSubContent = ({ className, ref, ...props })=>/*#__PURE__*/ jsx(SubContent, {
+        ref: ref,
+        className: cn('min-w-128', 'z-50 overflow-hidden', 'rounded-12 border border-border-primary bg-bg-surface-2 p-8 text-text-primary shadow-md', 'origin-[--radix-dropdown-menu-content-transform-origin]', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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),
+        alignOffset: DROPDOWN_MENU_SUB_CONTENT_ALIGN_OFFSET,
+        sideOffset: DROPDOWN_MENU_SUB_SIDE_OFFSET,
+        ...props
+    });
+DropdownMenuSubContent.displayName = 'DropdownMenuSubContent';
+export { DropdownMenuSubContent };

package/dist/components/DropdownMenu/DropdownMenuSubTrigger.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentPropsWithoutRef, ElementRef, FC, Ref } from 'react';
+import { SubTrigger } from '@radix-ui/react-dropdown-menu';
+import type { DropdownMenuItemVariantsProps } from './DropdownMenuItem';
+type DropdownMenuSubTriggerNativeProps = ComponentPropsWithoutRef<typeof SubTrigger>;
+export type DropdownMenuSubTriggerVariantsProps = DropdownMenuItemVariantsProps;
+interface DropdownMenuSubTriggerBaseProps {
+    inset?: boolean;
+    ref?: Ref<ElementRef<typeof SubTrigger>>;
+}
+type DropdownMenuSubTriggerProps = DropdownMenuSubTriggerNativeProps & DropdownMenuSubTriggerVariantsProps & DropdownMenuSubTriggerBaseProps;
+export declare const DropdownMenuSubTrigger: FC<DropdownMenuSubTriggerProps>;
+export {};

package/dist/components/DropdownMenu/DropdownMenuSubTrigger.js

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SubTrigger } from "@radix-ui/react-dropdown-menu";
+import { ChevronRight } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { dropdownMenuItemVariants } from "./classes.js";
+const DropdownMenuSubTrigger = ({ inset = false, variant = 'default', children, ...props })=>/*#__PURE__*/ jsxs(SubTrigger, {
+        ...props,
+        className: cn(dropdownMenuItemVariants({
+            variant,
+            inset
+        })),
+        children: [
+            children,
+            /*#__PURE__*/ jsx("div", {
+                className: 'ml-auto before:content-[""] before:flex before:w-8 before:shrink-0',
+                children: /*#__PURE__*/ jsx(ChevronRight, {})
+            })
+        ]
+    });
+DropdownMenuSubTrigger.displayName = 'DropdownMenuSubTrigger';
+export { DropdownMenuSubTrigger };

package/dist/components/DropdownMenu/DropdownMenuTrigger.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import { type DropdownMenuTriggerProps } from '@radix-ui/react-dropdown-menu';
+export declare const DropdownMenuTrigger: FC<DropdownMenuTriggerProps>;

package/dist/components/DropdownMenu/DropdownMenuTrigger.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+import { Trigger } from "@radix-ui/react-dropdown-menu";
+const DropdownMenuTrigger = (props)=>/*#__PURE__*/ jsx(Trigger, {
+        ...props
+    });
+DropdownMenuTrigger.displayName = 'DropdownMenuTrigger';
+export { DropdownMenuTrigger };

package/dist/components/DropdownMenu/classes.d.ts

@@ -0,0 +1,8 @@
+export declare const dropdownMenuClassNames: string;
+export declare const dropdownMenuItemVariants: (props?: ({
+    variant?: "destructive" | "brand" | "default" | null | undefined;
+    inset?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const dropdownMenuLabelVariants: (props?: ({
+    inset?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/DropdownMenu/classes.js

@@ -0,0 +1,28 @@
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const dropdownMenuClassNames = cn('flex flex-col gap-1 min-w-128', 'z-50 overflow-y-auto overflow-x-hidden outline-none', 'rounded-12 border border-border-primary-light bg-bg-surface-2 p-8 font-sans text-text-primary shadow-md outline-none', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0  data-[state=closed]:zoom-out-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');
+const dropdownMenuItemVariants = cva([
+    'flex items-center gap-8 rounded-6 px-8 py-6 text-sm',
+    'relative cursor-pointer select-none outline-none transition-colors',
+    'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+    '[&_svg]:pointer-events-none [&_svg]:icon-md [&>svg]:icon-md [&>svg]:shrink-0'
+], {
+    variants: {
+        variant: {
+            default: cn('text-text-primary', 'not-data-disabled:hover:bg-states-primary-hover', 'not-data-disabled:focus:bg-states-primary-hover', 'not-data-disabled:active:bg-states-primary-pressed', 'not-data-disabled:data-[state=open]:bg-states-primary-hover'),
+            brand: cn('text-text-brand', 'not-data-disabled:hover:bg-states-brand-hover', 'not-data-disabled:focus:bg-states-brand-hover', 'not-data-disabled:active:bg-states-brand-pressed', 'not-data-disabled:data-[state=open]:bg-states-brand-hover'),
+            destructive: cn('text-text-danger', 'not-data-disabled:hover:bg-states-danger-hover', 'not-data-disabled:focus:bg-states-danger-hover', 'not-data-disabled:active:bg-states-danger-pressed', 'not-data-disabled:data-[state=open]:bg-states-danger-hover')
+        },
+        inset: {
+            true: 'pl-32'
+        }
+    }
+});
+const dropdownMenuLabelVariants = cva('flex justify-between gap-8 px-8 pt-8 pb-2 text-xs font-medium text-text-secondary', {
+    variants: {
+        inset: {
+            true: 'pl-32'
+        }
+    }
+});
+export { dropdownMenuClassNames, dropdownMenuItemVariants, dropdownMenuLabelVariants };

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

@@ -0,0 +1,13 @@
+export { dropdownMenuClassNames, dropdownMenuItemVariants, dropdownMenuLabelVariants, } from './classes';
+export { DropdownMenu } from './DropdownMenu';
+export { DropdownMenuContent } from './DropdownMenuContent';
+export { DropdownMenuGroup } from './DropdownMenuGroup';
+export { DropdownMenuItem } from './DropdownMenuItem';
+export { DropdownMenuLabel } from './DropdownMenuLabel';
+export { DropdownMenuPortal } from './DropdownMenuPortal';
+export { DropdownMenuSeparator } from './DropdownMenuSeparator';
+export { DropdownMenuShortcut } from './DropdownMenuShortcut';
+export { DropdownMenuSub } from './DropdownMenuSub';
+export { DropdownMenuSubContent } from './DropdownMenuSubContent';
+export { DropdownMenuSubTrigger } from './DropdownMenuSubTrigger';
+export { DropdownMenuTrigger } from './DropdownMenuTrigger';

package/dist/components/DropdownMenu/index.js

@@ -0,0 +1,14 @@
+import { dropdownMenuClassNames, dropdownMenuItemVariants, dropdownMenuLabelVariants } from "./classes.js";
+import { DropdownMenu } from "./DropdownMenu.js";
+import { DropdownMenuContent } from "./DropdownMenuContent.js";
+import { DropdownMenuGroup } from "./DropdownMenuGroup.js";
+import { DropdownMenuItem } from "./DropdownMenuItem.js";
+import { DropdownMenuLabel } from "./DropdownMenuLabel.js";
+import { DropdownMenuPortal } from "./DropdownMenuPortal.js";
+import { DropdownMenuSeparator } from "./DropdownMenuSeparator.js";
+import { DropdownMenuShortcut } from "./DropdownMenuShortcut.js";
+import { DropdownMenuSub } from "./DropdownMenuSub.js";
+import { DropdownMenuSubContent } from "./DropdownMenuSubContent.js";
+import { DropdownMenuSubTrigger } from "./DropdownMenuSubTrigger.js";
+import { DropdownMenuTrigger } from "./DropdownMenuTrigger.js";
+export { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, dropdownMenuClassNames, dropdownMenuItemVariants, dropdownMenuLabelVariants };

package/dist/components/Field/Field.d.ts

@@ -0,0 +1,11 @@
+import type { FC, HTMLAttributes } from 'react';
+import { Field as ArkUiField } from '@ark-ui/react/field';
+import { type VariantProps } from 'class-variance-authority';
+declare const fieldVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type FieldNativeProps = Omit<HTMLAttributes<HTMLElement>, 'className'> & Omit<ArkUiField.RootProps, 'className'>;
+type FieldVariantsProps = VariantProps<typeof fieldVariants>;
+type FieldProps = FieldNativeProps & FieldVariantsProps;
+export declare const Field: FC<FieldProps>;
+export {};

package/dist/components/Field/Field.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import { Field } from "@ark-ui/react/field";
+import { Fieldset } from "@ark-ui/react/fieldset";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+import { checkContainCheckboxGroup } from "./utils.js";
+const fieldVariants = cva('group/field flex gap-4 w-full min-w-0 data-[invalid=true]:text-text-danger', {
+    variants: {
+        orientation: {
+            vertical: [
+                'flex-col [&>*]:w-full [&>.sr-only]:w-auto'
+            ],
+            horizontal: [
+                'flex-row items-center',
+                '[&>[data-slot=field-label]]:flex-auto',
+                'has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start'
+            ],
+            responsive: [
+                '@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto',
+                '@md/field-group:[&>[data-slot=field-label]]:flex-auto',
+                '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px'
+            ]
+        }
+    },
+    defaultVariants: {
+        orientation: 'vertical'
+    }
+});
+const Field_Field = ({ orientation = 'vertical', children, ...props })=>{
+    const isContainCheckboxGroup = checkContainCheckboxGroup(children);
+    const Comp = isContainCheckboxGroup ? Fieldset.Root : Field.Root;
+    return /*#__PURE__*/ jsx(Comp, {
+        ...props,
+        role: "group",
+        "data-slot": "field",
+        "data-orientation": orientation,
+        className: cn(fieldVariants({
+            orientation
+        })),
+        children: children
+    });
+};
+Field_Field.displayName = 'Field';
+export { Field_Field as Field };

package/dist/components/Field/FieldAction.d.ts

@@ -0,0 +1,9 @@
+import type { ButtonHTMLAttributes, FC, Ref } from 'react';
+type FieldActionNativeProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'color' | 'disabled'>;
+interface FieldActionBaseProps {
+    asChild?: boolean;
+    ref?: Ref<HTMLButtonElement>;
+}
+type FieldActionProps = FieldActionNativeProps & FieldActionBaseProps;
+export declare const FieldAction: FC<FieldActionProps>;
+export {};