@wallarm-org/design-system 0.1.0

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

@@ -0,0 +1 @@
+export { Loader, type LoaderProps } from './Loader';

package/dist/components/Loader/index.js

@@ -0,0 +1,2 @@
+import { Loader } from "./Loader.js";
+export { Loader };

package/dist/components/NumberInput/NumberInput.d.ts

@@ -0,0 +1,10 @@
+import type { FC, Ref } from 'react';
+import { NumberInput as ArkUiNumberInput } from '@ark-ui/react/number-input';
+type NumberInputNativeProps = Omit<ArkUiNumberInput.RootProps, 'className' | 'invalid'>;
+interface NumberInputBaseProps {
+    error?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+export type NumberInputProps = NumberInputNativeProps & NumberInputBaseProps;
+export declare const NumberInput: FC<NumberInputProps>;
+export {};

package/dist/components/NumberInput/NumberInput.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NumberInput } from "@ark-ui/react/number-input";
+import { ChevronDown, ChevronUp } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+const numberInputTriggerClassNames = cn('w-16 h-14 px-2 py-1 rounded-2 transition-colors cursor-pointer', 'hover:bg-states-primary-hover', '[&[data-disabled]]:cursor-not-allowed [&[data-disabled]]:pointer-events-none');
+const NumberInput_NumberInput = ({ error = false, defaultValue = '0', ...props })=>/*#__PURE__*/ jsxs(NumberInput.Root, {
+        ...props,
+        invalid: error,
+        defaultValue: defaultValue,
+        className: cn('w-full h-36 has-[>textarea]:h-auto', 'flex items-stretch border rounded-8 bg-component-input-bg relative', 'border border-border-primary outline-none shadow-xs transition-[color,border,box-shadow]', '[&:not([data-disabled]):not([data-focus])]:hover:border-component-border-input-hover ', '[&[data-focus]:not([data-disabled])]:ring-3', '[&[data-focus]:not([data-disabled]):not([data-invalid])]:ring-focus-primary', '[&[data-focus]:not([data-disabled]):not([data-invalid])]:border-border-strong-primary', 'data-invalid:border-border-strong-danger data-invalid:ring-focus-destructive', '[&[data-invalid]:not([data-disabled])]:hover:border-border-strong-danger', '[&[data-invalid]:not([data-disabled]):not([data-focus])]:hover:ring-3', '[&[data-invalid]:not([data-disabled]):not([data-focus])]:hover:ring-focus-destructive-hover', '[&[data-invalid]:not([data-disabled])]:[&>input]:hover:ring-0', 'data-disabled:opacity-50', 'data-disabled:cursor-not-allowed', 'data-disabled:*:cursor-not-allowed'),
+        children: [
+            /*#__PURE__*/ jsx(NumberInput.Input, {
+                className: cn('flex-1 h-full px-12 py-8', 'rounded-none border-0 bg-transparent shadow-none outline-none', 'font-sans font-normal text-sm text-text-primary placeholder:text-text-secondary')
+            }),
+            /*#__PURE__*/ jsxs(NumberInput.Control, {
+                className: cn('flex flex-col justify-center px-4 py-2', 'bg-states-primary-default-alt border-l border-border-primary', '[&_svg]:icon-sm [&_svg]:text-icon-secondary [&_svg]:pointer-events-none'),
+                children: [
+                    /*#__PURE__*/ jsx(NumberInput.IncrementTrigger, {
+                        className: numberInputTriggerClassNames,
+                        children: /*#__PURE__*/ jsx(ChevronUp, {})
+                    }),
+                    /*#__PURE__*/ jsx(NumberInput.DecrementTrigger, {
+                        className: numberInputTriggerClassNames,
+                        children: /*#__PURE__*/ jsx(ChevronDown, {})
+                    })
+                ]
+            })
+        ]
+    });
+NumberInput_NumberInput.displayName = 'NumberInput';
+export { NumberInput_NumberInput as NumberInput };

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

@@ -0,0 +1 @@
+export { NumberInput, type NumberInputProps } from './NumberInput';

package/dist/components/NumberInput/index.js

@@ -0,0 +1,2 @@
+import { NumberInput } from "./NumberInput.js";
+export { NumberInput };

package/dist/components/NumericBadge/NumericBadge.d.ts

@@ -0,0 +1,10 @@
+import type { FC, HTMLAttributes } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const numericBadgeVariants: (props?: ({
+    type?: "primary" | "destructive" | "info" | "primary-alt" | "brand" | "outline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type NumericBadgeNativeProps = HTMLAttributes<HTMLDivElement>;
+type NumericBadgeVariantsProps = VariantProps<typeof numericBadgeVariants>;
+export type NumericBadgeProps = NumericBadgeNativeProps & NumericBadgeVariantsProps;
+export declare const NumericBadge: FC<NumericBadgeProps>;
+export {};

package/dist/components/NumericBadge/NumericBadge.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/NumericBadge/NumericBadge.figma.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { NumericBadge } from "./NumericBadge.js";
+const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/wip-components?node-id=56-1561&m=dev';
+code_connect.connect(NumericBadge, figmaNodeUrl, {
+    props: {
+        type: code_connect["enum"]('Type', {
+            Primary: 'primary',
+            'Primary-alt': 'primary-alt',
+            Brand: 'brand',
+            Destructive: 'destructive',
+            Outline: 'outline',
+            'New / Info': 'info'
+        }),
+        children: code_connect.string('#')
+    },
+    example: ({ type, children })=>/*#__PURE__*/ jsx(NumericBadge, {
+            type: type,
+            children: children
+        })
+});

package/dist/components/NumericBadge/NumericBadge.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const numericBadgeVariants = cva('inline-flex items-center rounded-full border-1 px-4 py-1 font-mono text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2', {
+    variants: {
+        type: {
+            primary: 'border-transparent bg-states-primary-active text-text-primary',
+            'primary-alt': 'border-transparent bg-states-primary-alt-active text-text-primary-alt',
+            brand: 'border-bg-fill-brand bg-bg-fill-brand text-text-primary-alt',
+            destructive: 'border-bg-fill-danger bg-bg-fill-danger text-text-primary-alt',
+            outline: 'border-border-primary bg-component-outline-button-bg text-text-primary',
+            info: 'border-states-info-active bg-states-info-active text-text-info'
+        }
+    }
+});
+const NumericBadge = ({ type = 'primary', ...props })=>/*#__PURE__*/ jsx("div", {
+        ...props,
+        "data-slot": "numeric-badge",
+        "data-type": type,
+        className: cn(numericBadgeVariants({
+            type
+        }))
+    });
+NumericBadge.displayName = 'NumericBadge';
+export { NumericBadge };

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

@@ -0,0 +1 @@
+export { NumericBadge, type NumericBadgeProps } from './NumericBadge';

package/dist/components/NumericBadge/index.js

@@ -0,0 +1,2 @@
+import { NumericBadge } from "./NumericBadge.js";
+export { NumericBadge };

package/dist/components/OverflowList/OverflowList.d.ts

@@ -0,0 +1,13 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from 'react';
+type CollapseDirection = 'start' | 'end';
+export interface OverflowListProps<T> extends HTMLAttributes<HTMLDivElement> {
+    items: T[];
+    itemRenderer: (item: T, index: number) => ReactNode;
+    overflowRenderer: (items: T[]) => ReactNode;
+    minVisibleItems?: number;
+    onOverflow?: (items: T[]) => void;
+    collapseFrom?: CollapseDirection;
+    alwaysRenderOverflow?: boolean;
+}
+export declare const OverflowList: <T>(props: OverflowListProps<T>) => ReactElement;
+export {};

package/dist/components/OverflowList/OverflowList.js

@@ -0,0 +1,80 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useMemo } from "react";
+import { useOverflowItems } from "../../hooks/index.js";
+import { cn } from "../../utils/cn.js";
+const OverflowListComponent = ({ items, itemRenderer, overflowRenderer, className, collapseFrom = 'end', minVisibleItems = 0, alwaysRenderOverflow = false, onOverflow, ...props })=>{
+    const memoizedItemRenderer = useCallback((item)=>{
+        const index = items.indexOf(item);
+        return itemRenderer(item, index);
+    }, [
+        items,
+        itemRenderer
+    ]);
+    const memoizedMeasurementRenderer = useCallback((item)=>{
+        const index = items.indexOf(item);
+        return itemRenderer(item, index);
+    }, [
+        items,
+        itemRenderer
+    ]);
+    const { containerRef, visibleItems, hiddenItems, MeasurementContainer } = useOverflowItems({
+        items,
+        renderItem: memoizedMeasurementRenderer,
+        overflowRenderer: (items)=>overflowRenderer(items),
+        reserveSpace: 80
+    });
+    const finalVisibleItems = useMemo(()=>{
+        if (visibleItems.length < minVisibleItems && items.length >= minVisibleItems) return items.slice(0, minVisibleItems);
+        return visibleItems;
+    }, [
+        visibleItems,
+        minVisibleItems,
+        items
+    ]);
+    const finalHiddenItems = useMemo(()=>{
+        if (finalVisibleItems.length !== visibleItems.length) return items.slice(finalVisibleItems.length);
+        return hiddenItems;
+    }, [
+        finalVisibleItems.length,
+        visibleItems.length,
+        items,
+        hiddenItems
+    ]);
+    const finalHiddenCount = finalHiddenItems.length;
+    useMemo(()=>{
+        if (onOverflow && finalHiddenItems.length > 0) onOverflow(finalHiddenItems);
+    }, [
+        finalHiddenItems,
+        onOverflow
+    ]);
+    const overflowElement = useMemo(()=>{
+        if (0 === finalHiddenCount && !alwaysRenderOverflow) return null;
+        return overflowRenderer(finalHiddenItems);
+    }, [
+        finalHiddenCount,
+        alwaysRenderOverflow,
+        overflowRenderer,
+        finalHiddenItems
+    ]);
+    const visibleElements = useMemo(()=>finalVisibleItems.map(memoizedItemRenderer), [
+        finalVisibleItems,
+        memoizedItemRenderer
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(MeasurementContainer, {}),
+            /*#__PURE__*/ jsxs("div", {
+                ref: containerRef,
+                className: cn('flex min-w-0', className),
+                ...props,
+                children: [
+                    'start' === collapseFrom && overflowElement,
+                    visibleElements,
+                    'end' === collapseFrom && overflowElement
+                ]
+            })
+        ]
+    });
+};
+const OverflowList = /*#__PURE__*/ memo(OverflowListComponent);
+export { OverflowList };

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

@@ -0,0 +1,2 @@
+export type { OverflowListProps } from './OverflowList';
+export { OverflowList } from './OverflowList';

package/dist/components/OverflowList/index.js

@@ -0,0 +1,2 @@
+import { OverflowList } from "./OverflowList.js";
+export { OverflowList };

package/dist/components/OverflowTooltip/OverflowTooltip.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+export interface OverflowTooltipProps {
+    children: ReactNode;
+    forceTooltip?: boolean;
+}
+/**
+ * Root component for OverflowTooltip.
+ * Automatically detects overflow in child elements.
+ */
+export declare const OverflowTooltip: {
+    ({ children, forceTooltip }: OverflowTooltipProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/OverflowTooltip/OverflowTooltip.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Tooltip, TooltipProvider } from "../Tooltip/index.js";
+import { OverflowTooltipContext } from "./OverflowTooltipContext.js";
+const OverflowTooltip = ({ children, forceTooltip = false })=>{
+    const [isOverflowing, setIsOverflowing] = useState(false);
+    const shouldShowTooltip = isOverflowing || forceTooltip;
+    return /*#__PURE__*/ jsx(OverflowTooltipContext.Provider, {
+        value: {
+            isOverflowing,
+            setIsOverflowing,
+            forceTooltip
+        },
+        children: /*#__PURE__*/ jsx(TooltipProvider, {
+            children: /*#__PURE__*/ jsx(Tooltip, {
+                open: shouldShowTooltip ? void 0 : false,
+                children: children
+            })
+        })
+    });
+};
+OverflowTooltip.displayName = 'OverflowTooltip';
+export { OverflowTooltip };

package/dist/components/OverflowTooltip/OverflowTooltipContent.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+export interface OverflowTooltipContentProps {
+    children: ReactNode;
+    className?: string;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    maxWidth?: number;
+}
+/**
+ * Content component for the overflow tooltip.
+ * Wraps the TooltipContent from Radix UI.
+ */
+export declare const OverflowTooltipContent: {
+    ({ children, className, side, maxWidth, }: OverflowTooltipContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/OverflowTooltip/OverflowTooltipContent.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { TooltipContent } from "../Tooltip/index.js";
+const OverflowTooltipContent = ({ children, className, side, maxWidth = 400 })=>/*#__PURE__*/ jsx(TooltipContent, {
+        side: side,
+        className: cn('whitespace-normal wrap-break-word', className),
+        style: {
+            maxWidth
+        },
+        children: children
+    });
+OverflowTooltipContent.displayName = 'OverflowTooltipContent';
+export { OverflowTooltipContent };

package/dist/components/OverflowTooltip/OverflowTooltipContext.d.ts

@@ -0,0 +1,8 @@
+interface OverflowTooltipContextValue {
+    isOverflowing: boolean;
+    setIsOverflowing: (value: boolean) => void;
+    forceTooltip?: boolean;
+}
+export declare const OverflowTooltipContext: import("react").Context<OverflowTooltipContextValue | null>;
+export declare const useOverflowTooltip: () => OverflowTooltipContextValue;
+export {};

package/dist/components/OverflowTooltip/OverflowTooltipContext.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+const OverflowTooltipContext = /*#__PURE__*/ createContext(null);
+const useOverflowTooltip = ()=>{
+    const context = useContext(OverflowTooltipContext);
+    if (!context) throw new Error('OverflowTooltip compound components must be used within OverflowTooltip');
+    return context;
+};
+export { OverflowTooltipContext, useOverflowTooltip };

package/dist/components/OverflowTooltip/OverflowTooltipTrigger.d.ts

@@ -0,0 +1,11 @@
+import { type FC, type ReactElement, type Ref } from 'react';
+export interface OverflowTooltipTriggerProps {
+    children: ReactElement;
+    asChild?: boolean;
+    ref?: Ref<HTMLElement>;
+}
+/**
+ * Trigger component that automatically detects overflow in the element.
+ * Checks for actual overflow by comparing scrollWidth/Height with clientWidth/Height.
+ */
+export declare const OverflowTooltipTrigger: FC<OverflowTooltipTriggerProps>;

package/dist/components/OverflowTooltip/OverflowTooltipTrigger.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import { cloneElement, isValidElement, useEffect, useRef } from "react";
+import { TooltipTrigger } from "../Tooltip/index.js";
+import { useOverflowTooltip } from "./OverflowTooltipContext.js";
+const OverflowTooltipTrigger = ({ children, asChild = true, ref })=>{
+    const { setIsOverflowing } = useOverflowTooltip();
+    const containerRef = useRef(null);
+    useEffect(()=>{
+        const container = containerRef.current;
+        if (!container) return;
+        const checkOverflow = ()=>{
+            const hasOverflow = container.scrollWidth > container.clientWidth || container.scrollHeight > container.clientHeight;
+            setIsOverflowing(hasOverflow);
+        };
+        checkOverflow();
+        const resizeObserver = new ResizeObserver(checkOverflow);
+        resizeObserver.observe(container);
+        const mutationObserver = new MutationObserver(checkOverflow);
+        mutationObserver.observe(container, {
+            childList: true,
+            subtree: true,
+            characterData: true
+        });
+        return ()=>{
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+        };
+    }, [
+        setIsOverflowing
+    ]);
+    const setRefs = (node)=>{
+        containerRef.current = node;
+        if (ref) if ('function' == typeof ref) ref(node);
+        else ref.current = node;
+        const originalRef = children.ref;
+        if (originalRef) if ('function' == typeof originalRef) originalRef(node);
+        else originalRef.current = node;
+    };
+    return /*#__PURE__*/ jsx(TooltipTrigger, {
+        asChild: asChild,
+        children: /*#__PURE__*/ isValidElement(children) ? /*#__PURE__*/ cloneElement(children, {
+            ref: setRefs
+        }) : children
+    });
+};
+OverflowTooltipTrigger.displayName = 'OverflowTooltipTrigger';
+export { OverflowTooltipTrigger };

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

@@ -0,0 +1,6 @@
+export type { OverflowTooltipProps } from './OverflowTooltip';
+export { OverflowTooltip } from './OverflowTooltip';
+export type { OverflowTooltipContentProps } from './OverflowTooltipContent';
+export { OverflowTooltipContent } from './OverflowTooltipContent';
+export type { OverflowTooltipTriggerProps } from './OverflowTooltipTrigger';
+export { OverflowTooltipTrigger } from './OverflowTooltipTrigger';

package/dist/components/OverflowTooltip/index.js

@@ -0,0 +1,4 @@
+import { OverflowTooltip } from "./OverflowTooltip.js";
+import { OverflowTooltipContent } from "./OverflowTooltipContent.js";
+import { OverflowTooltipTrigger } from "./OverflowTooltipTrigger.js";
+export { OverflowTooltip, OverflowTooltipContent, OverflowTooltipTrigger };

package/dist/components/Overlay/Overlay.d.ts

@@ -0,0 +1,6 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+type OverlayProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'> & {
+    ref?: Ref<HTMLDivElement>;
+};
+export declare const Overlay: FC<OverlayProps>;
+export {};

package/dist/components/Overlay/Overlay.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+const Overlay = (props)=>/*#__PURE__*/ jsx("div", {
+        ...props,
+        className: cn('fixed inset-0', 'data-[state=open]:animate-in data-[state=open]:fade-in-0', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0', 'transition-opacity duration-200', 'backdrop-blur-xs bg-component-dialog-overlay', 'z-[calc(var(--drawer-overlay-z-index)+(var(--layer-index)*var(--drawer-level-ratio)))]')
+    });
+Overlay.displayName = 'Overlay';
+export { Overlay };

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

@@ -0,0 +1 @@
+export { Overlay } from './Overlay';

package/dist/components/Overlay/index.js

@@ -0,0 +1,2 @@
+import { Overlay } from "./Overlay.js";
+export { Overlay };

package/dist/components/Polymorphic/Polymorphic.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentPropsWithoutRef, ElementType, FC, PropsWithChildren, ReactElement, Ref } from 'react';
+export type AsProp<C extends ElementType> = {
+    as?: C;
+};
+export type PolymorphicComponentProps<C extends ElementType, Props = object> = PropsWithChildren<Props & AsProp<C>> & Omit<ComponentPropsWithoutRef<C>, keyof (AsProp<C> & Props)>;
+export type PolymorphicComponent<T extends ElementType, Props = object> = {
+    <C extends ElementType = T>(props: PolymorphicComponentProps<C, Props> & {
+        ref?: Ref<unknown>;
+    }): ReactElement | null;
+};
+export type PolymorphicProps = {
+    className?: string;
+    ref?: Ref<unknown>;
+};
+export declare const Polymorphic: FC<PolymorphicComponentProps<ElementType, PolymorphicProps>>;

package/dist/components/Polymorphic/Polymorphic.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+const Polymorphic = ({ as = 'div', className, children, ...props })=>{
+    const Component = as;
+    return /*#__PURE__*/ jsx(Component, {
+        className: className,
+        ...props,
+        children: children
+    });
+};
+Polymorphic.displayName = 'Polymorphic';
+export { Polymorphic };

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

@@ -0,0 +1 @@
+export { type AsProp, Polymorphic, type PolymorphicComponent, type PolymorphicComponentProps, type PolymorphicProps, } from './Polymorphic';

package/dist/components/Polymorphic/index.js

@@ -0,0 +1,2 @@
+import { Polymorphic } from "./Polymorphic.js";
+export { Polymorphic };

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

@@ -0,0 +1,8 @@
+import type { FC, ReactNode } from 'react';
+interface PopoverProps {
+    children: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export declare const Popover: FC<PopoverProps>;
+export {};

package/dist/components/Popover/Popover.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import { Popover } from "@ark-ui/react";
+const POPOVER_POSITIONING_DEFAULT = {
+    gutter: 8,
+    offset: {
+        mainAxis: 12
+    }
+};
+const Popover_Popover = ({ children, open, onOpenChange })=>{
+    const handleOpenChange = ({ open })=>{
+        onOpenChange?.(open);
+    };
+    return /*#__PURE__*/ jsx(Popover.Root, {
+        positioning: POPOVER_POSITIONING_DEFAULT,
+        open: open,
+        onOpenChange: handleOpenChange,
+        lazyMount: true,
+        unmountOnExit: true,
+        children: children
+    });
+};
+Popover_Popover.displayName = 'Popover';
+export { Popover_Popover as Popover };

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

@@ -0,0 +1,11 @@
+import { type FC, type ReactNode } from 'react';
+import type { PopoverSizeDimension } from './types';
+interface PopoverContentProps {
+    children: ReactNode;
+    minHeight?: PopoverSizeDimension;
+    maxHeight?: PopoverSizeDimension;
+    minWidth?: PopoverSizeDimension;
+    maxWidth?: PopoverSizeDimension;
+}
+export declare const PopoverContent: FC<PopoverContentProps>;
+export {};

package/dist/components/Popover/PopoverContent.js

@@ -0,0 +1,51 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Popover, usePopoverContext } from "@ark-ui/react";
+import { Portal } from "@ark-ui/react/portal";
+import { cn } from "../../utils/cn.js";
+import { ScrollArea, ScrollAreaContent, ScrollAreaScrollbar, ScrollAreaViewport } from "../ScrollArea/index.js";
+import { POPOVER_MAX_HEIGHT, POPOVER_MAX_WIDTH, POPOVER_MIN_HEIGHT, POPOVER_MIN_WIDTH } from "./constants.js";
+const PopoverContent = ({ children, minHeight = POPOVER_MIN_HEIGHT, maxHeight = POPOVER_MAX_HEIGHT, minWidth = POPOVER_MIN_WIDTH, maxWidth = POPOVER_MAX_WIDTH })=>{
+    const { getContentProps } = usePopoverContext();
+    const { id } = getContentProps();
+    const style = useMemo(()=>({
+            '--popover-min-height': minHeight,
+            '--popover-max-height': maxHeight,
+            '--popover-min-width': minWidth,
+            '--popover-max-width': maxWidth
+        }), [
+        minHeight,
+        maxHeight,
+        minWidth,
+        maxWidth
+    ]);
+    const handleClick = (event)=>{
+        event.stopPropagation();
+    };
+    return /*#__PURE__*/ jsx(Portal, {
+        children: /*#__PURE__*/ jsx(Popover.Positioner, {
+            children: /*#__PURE__*/ jsx(Popover.Content, {
+                id: id,
+                style: style,
+                className: cn('flex flex-col', 'min-w-(--popover-min-width)', 'max-w-[clamp(var(--popover-min-width),var(--available-width),var(--popover-max-width))]', 'min-h-(--popover-min-height)', 'max-h-[clamp(var(--popover-min-height),var(--available-height),var(--popover-max-height))]', 'p-12 bg-bg-surface-2 rounded-12 border border-border-primary-light shadow-md', 'animate-in fade-in-0 zoom-in-95 origin-[--radix-tooltip-content-transform-origin]', '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'),
+                onClick: handleClick,
+                asChild: true,
+                children: /*#__PURE__*/ jsxs(ScrollArea, {
+                    ids: {
+                        root: id
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx(ScrollAreaViewport, {
+                            children: /*#__PURE__*/ jsx(ScrollAreaContent, {
+                                children: children
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(ScrollAreaScrollbar, {})
+                    ]
+                })
+            })
+        })
+    });
+};
+PopoverContent.displayName = 'PopoverContent';
+export { PopoverContent };

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

@@ -0,0 +1,10 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+type PopoverNativeProps = HTMLAttributes<HTMLButtonElement>;
+interface PopoverTriggerBaseProps {
+    children: ReactNode;
+    asChild?: boolean;
+    ref?: Ref<HTMLButtonElement>;
+}
+export type PopoverTriggerProps = PopoverNativeProps & PopoverTriggerBaseProps;
+export declare const PopoverTrigger: FC<PopoverTriggerProps>;
+export {};

package/dist/components/Popover/PopoverTrigger.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { Popover } from "@ark-ui/react/popover";
+const PopoverTrigger = ({ asChild = false, ...props })=>{
+    const handleClick = (event)=>{
+        event.stopPropagation();
+    };
+    return /*#__PURE__*/ jsx(Popover.Trigger, {
+        ...props,
+        asChild: asChild,
+        onClick: handleClick
+    });
+};
+PopoverTrigger.displayName = 'PopoverTrigger';
+export { PopoverTrigger };

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

@@ -0,0 +1,5 @@
+import type { PopoverSizeDimension } from './types';
+export declare const POPOVER_MIN_HEIGHT: PopoverSizeDimension;
+export declare const POPOVER_MAX_HEIGHT: PopoverSizeDimension;
+export declare const POPOVER_MIN_WIDTH: PopoverSizeDimension;
+export declare const POPOVER_MAX_WIDTH: PopoverSizeDimension;

package/dist/components/Popover/constants.js

@@ -0,0 +1,5 @@
+const POPOVER_MIN_HEIGHT = '156px';
+const POPOVER_MAX_HEIGHT = '560px';
+const POPOVER_MIN_WIDTH = '256px';
+const POPOVER_MAX_WIDTH = '560px';
+export { POPOVER_MAX_HEIGHT, POPOVER_MAX_WIDTH, POPOVER_MIN_HEIGHT, POPOVER_MIN_WIDTH };

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

@@ -0,0 +1,4 @@
+export { Popover } from './Popover';
+export { PopoverContent } from './PopoverContent';
+export { PopoverTrigger } from './PopoverTrigger';
+export type { PopoverSizeDimension } from './types';

package/dist/components/Popover/index.js

@@ -0,0 +1,4 @@
+import { Popover } from "./Popover.js";
+import { PopoverContent } from "./PopoverContent.js";
+import { PopoverTrigger } from "./PopoverTrigger.js";
+export { Popover, PopoverContent, PopoverTrigger };

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

@@ -0,0 +1 @@
+export type PopoverSizeDimension = `${number}px` | 'unset' | 'auto';

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import { RadioGroup as ArkUiRadioGroup } from '@ark-ui/react/radio-group';
+export type RadioProps = Omit<ArkUiRadioGroup.ItemProps, 'className'>;
+export declare const Radio: FC<RadioProps>;

package/dist/components/Radio/Radio.figma.d.ts

@@ -0,0 +1 @@
+export {};