@wallarm-org/design-system 0.1.0

package/dist/components/SegmentedControl/SegmentedControlSeparator.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+import { Separator } from "../Separator/index.js";
+const segmentedControlSeparatorVariants = cva('flex h-16', {
+    variants: {
+        mx: {
+            1: 'mx-1',
+            2: 'mx-2',
+            4: 'mx-4',
+            6: 'mx-6',
+            8: 'mx-8',
+            12: 'mx-12',
+            16: 'mx-16',
+            20: 'mx-20',
+            24: 'mx-24',
+            28: 'mx-28',
+            32: 'mx-32',
+            36: 'mx-36',
+            40: 'mx-40',
+            44: 'mx-44',
+            48: 'mx-48',
+            56: 'mx-56',
+            64: 'mx-64',
+            80: 'mx-80',
+            96: 'mx-96',
+            112: 'mx-112',
+            128: 'mx-128',
+            144: 'mx-144'
+        }
+    }
+});
+const SegmentedControlSeparator = ({ className, mx = 2, ref, ...props })=>/*#__PURE__*/ jsx("div", {
+        className: cn('flex items-center content-stretch relative shrink-0', className),
+        children: /*#__PURE__*/ jsx("div", {
+            className: cn(segmentedControlSeparatorVariants({
+                mx
+            })),
+            children: /*#__PURE__*/ jsx(Separator, {
+                ref: ref,
+                orientation: "vertical",
+                ...props
+            })
+        })
+    });
+SegmentedControlSeparator.displayName = 'SegmentedControlSeparator';
+export { SegmentedControlSeparator };

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

@@ -0,0 +1,5 @@
+export declare const segmentedControlVariants: (props?: ({
+    fullWidth?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const segmentedControlIndicatorClassNames: string;
+export declare const segmentedControlItemClassNamesBase: string;

package/dist/components/SegmentedControl/classes.js

@@ -0,0 +1,16 @@
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const segmentedControlVariants = cva('flex bg-bg-primary p-4 gap-0 items-center rounded-12', {
+    variants: {
+        fullWidth: {
+            true: 'w-full [&_label]:flex-1',
+            false: ''
+        }
+    },
+    defaultVariants: {
+        fullWidth: false
+    }
+});
+const segmentedControlIndicatorClassNames = cn('bg-bg-surface-3 rounded-8 shadow-sm w-(--width) h-(--height) top-(--top) left-(--left)');
+const segmentedControlItemClassNamesBase = cn('relative flex items-center justify-center gap-6 min-h-28 min-w-28 px-12 py-4', 'rounded-8 text-sm font-sans font-medium text-center transition-all cursor-pointer', 'bg-transparent text-text-secondary', 'focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-focus-primary', 'data-disabled:opacity-50 data-disabled:cursor-not-allowed');
+export { segmentedControlIndicatorClassNames, segmentedControlItemClassNamesBase, segmentedControlVariants };

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

@@ -0,0 +1,5 @@
+export { segmentedControlIndicatorClassNames, segmentedControlItemClassNamesBase, segmentedControlVariants, } from './classes';
+export { SegmentedControl, type SegmentedControlProps, } from './SegmentedControl';
+export { SegmentedControlButton, type SegmentedControlButtonProps, } from './SegmentedControlButton';
+export { SegmentedControlItem, type SegmentedControlItemProps, } from './SegmentedControlItem';
+export { SegmentedControlSeparator, type SegmentedControlSeparatorProps, } from './SegmentedControlSeparator';

package/dist/components/SegmentedControl/index.js

@@ -0,0 +1,6 @@
+import { segmentedControlIndicatorClassNames, segmentedControlItemClassNamesBase, segmentedControlVariants } from "./classes.js";
+import { SegmentedControl } from "./SegmentedControl.js";
+import { SegmentedControlButton } from "./SegmentedControlButton.js";
+import { SegmentedControlItem } from "./SegmentedControlItem.js";
+import { SegmentedControlSeparator } from "./SegmentedControlSeparator.js";
+export { SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator, segmentedControlIndicatorClassNames, segmentedControlItemClassNamesBase, segmentedControlVariants };

package/dist/components/SegmentedTabs/SegmentedTabs.d.ts

@@ -0,0 +1,18 @@
+import type { FC, ReactNode } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const segmentedControlVariants: (props?: ({
+    fullWidth?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type SegmentedTabsVariantProps = VariantProps<typeof segmentedControlVariants>;
+interface SegmentedTabsBaseProps {
+    children: ReactNode;
+    value?: string;
+    defaultValue?: string;
+    lazyMount?: boolean;
+    unmountOnExit?: boolean;
+    fullWidth?: boolean;
+    onChange?: (value: string) => void;
+}
+type SegmentedTabsProps = SegmentedTabsVariantProps & SegmentedTabsBaseProps;
+export declare const SegmentedTabs: FC<SegmentedTabsProps>;
+export {};

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

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

package/dist/components/SegmentedTabs/SegmentedTabs.figma.js

@@ -0,0 +1,186 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { SegmentedControlButton, SegmentedControlSeparator } from "../SegmentedControl/index.js";
+import { SegmentedTabs } from "./SegmentedTabs.js";
+import { SegmentedTabsTrigger } from "./SegmentedTabsTrigger.js";
+const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/wip-components?node-id=1956-8100';
+code_connect.connect(SegmentedTabs, figmaNodeUrl, {
+    variant: {
+        '#': '5',
+        'Actionable pills': 'Off'
+    },
+    example: ()=>/*#__PURE__*/ jsxs(SegmentedTabs, {
+            value: "1",
+            children: [
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "1",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "2",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "3",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "4",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "5",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedControlSeparator, {}),
+                /*#__PURE__*/ jsx(SegmentedControlButton, {
+                    children: "More"
+                })
+            ]
+        })
+});
+code_connect.connect(SegmentedTabs, figmaNodeUrl, {
+    variant: {
+        '#': '5',
+        'Actionable pills': 'On'
+    },
+    example: ()=>/*#__PURE__*/ jsxs(SegmentedTabs, {
+            value: "1",
+            children: [
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "1",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "2",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "3",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "4",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "5",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedControlSeparator, {}),
+                /*#__PURE__*/ jsx(SegmentedControlButton, {
+                    children: "More"
+                })
+            ]
+        })
+});
+code_connect.connect(SegmentedTabs, figmaNodeUrl, {
+    variant: {
+        '#': '10',
+        'Actionable pills': 'Off'
+    },
+    example: ()=>/*#__PURE__*/ jsxs(SegmentedTabs, {
+            value: "1",
+            children: [
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "1",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "2",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "3",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "4",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "5",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "6",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "7",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "8",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "9",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "10",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedControlSeparator, {}),
+                /*#__PURE__*/ jsx(SegmentedControlButton, {
+                    children: "More"
+                })
+            ]
+        })
+});
+code_connect.connect(SegmentedTabs, figmaNodeUrl, {
+    variant: {
+        '#': '10',
+        'Actionable pills': 'On'
+    },
+    example: ()=>/*#__PURE__*/ jsxs(SegmentedTabs, {
+            value: "1",
+            children: [
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "1",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "2",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "3",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "4",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "5",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "6",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "7",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "8",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "9",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedTabsTrigger, {
+                    value: "10",
+                    children: "Item"
+                }),
+                /*#__PURE__*/ jsx(SegmentedControlSeparator, {}),
+                /*#__PURE__*/ jsx(SegmentedControlButton, {
+                    children: "More"
+                })
+            ]
+        })
+});

package/dist/components/SegmentedTabs/SegmentedTabs.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import { Tabs } from "@ark-ui/react/tabs";
+import { cva } from "class-variance-authority";
+import { useControlled } from "../../hooks/index.js";
+import { cn } from "../../utils/cn.js";
+const segmentedControlVariants = cva('', {
+    variants: {
+        fullWidth: {
+            true: 'w-full [&_[data-part=trigger]]:w-full',
+            false: ''
+        }
+    },
+    defaultVariants: {
+        fullWidth: false
+    }
+});
+const SegmentedTabs = ({ children, value: valueProp, defaultValue, onChange, lazyMount = true, unmountOnExit = true, fullWidth = false })=>{
+    const [value, setValue] = useControlled({
+        controlled: valueProp,
+        default: defaultValue
+    });
+    const handleValueChange = ({ value })=>{
+        setValue(value);
+        onChange?.(value);
+    };
+    return /*#__PURE__*/ jsx(Tabs.Root, {
+        className: cn(segmentedControlVariants({
+            fullWidth
+        })),
+        value: value,
+        defaultValue: defaultValue,
+        lazyMount: lazyMount,
+        unmountOnExit: unmountOnExit,
+        onValueChange: handleValueChange,
+        children: children
+    });
+};
+export { SegmentedTabs };

package/dist/components/SegmentedTabs/SegmentedTabsButton.d.ts

@@ -0,0 +1 @@
+export declare const SegmentedTabsButton: import("react").FC<import("../SegmentedControl").SegmentedControlButtonProps>;

package/dist/components/SegmentedTabs/SegmentedTabsButton.js

@@ -0,0 +1,4 @@
+import { SegmentedControlButton } from "../SegmentedControl/index.js";
+const SegmentedTabsButton = SegmentedControlButton;
+SegmentedTabsButton.displayName = 'SegmentedTabsButton';
+export { SegmentedTabsButton };

package/dist/components/SegmentedTabs/SegmentedTabsContent.d.ts

@@ -0,0 +1,8 @@
+import type { FC, ReactNode } from 'react';
+interface SegmentedTabsContentProps {
+    value: string;
+    children: ReactNode;
+    asChild?: boolean;
+}
+export declare const SegmentedTabsContent: FC<SegmentedTabsContentProps>;
+export {};

package/dist/components/SegmentedTabs/SegmentedTabsContent.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { Tabs } from "@ark-ui/react/tabs";
+import { cn } from "../../utils/cn.js";
+const SegmentedTabsContent = ({ value, children, asChild = false })=>/*#__PURE__*/ jsx(Tabs.Content, {
+        className: cn('outline-none'),
+        value: value,
+        asChild: asChild,
+        children: children
+    });
+export { SegmentedTabsContent };

package/dist/components/SegmentedTabs/SegmentedTabsList.d.ts

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

package/dist/components/SegmentedTabs/SegmentedTabsList.js

@@ -0,0 +1,14 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tabs } from "@ark-ui/react/tabs";
+import { cn } from "../../utils/cn.js";
+import { segmentedControlIndicatorClassNames, segmentedControlVariants } from "../SegmentedControl/index.js";
+const SegmentedTabsList = ({ children })=>/*#__PURE__*/ jsxs(Tabs.List, {
+        className: cn(segmentedControlVariants()),
+        children: [
+            children,
+            /*#__PURE__*/ jsx(Tabs.Indicator, {
+                className: cn(segmentedControlIndicatorClassNames)
+            })
+        ]
+    });
+export { SegmentedTabsList };

package/dist/components/SegmentedTabs/SegmentedTabsSeparator.d.ts

@@ -0,0 +1 @@
+export declare const SegmentedTabsSeparator: import("react").FC<import("../SegmentedControl").SegmentedControlSeparatorProps>;

package/dist/components/SegmentedTabs/SegmentedTabsSeparator.js

@@ -0,0 +1,4 @@
+import { SegmentedControlSeparator } from "../SegmentedControl/index.js";
+const SegmentedTabsSeparator = SegmentedControlSeparator;
+SegmentedTabsSeparator.displayName = 'SegmentedTabsSeparator';
+export { SegmentedTabsSeparator };

package/dist/components/SegmentedTabs/SegmentedTabsTrigger.d.ts

@@ -0,0 +1,9 @@
+import type { FC, ReactNode } from 'react';
+interface SegmentedTabsTriggerProps {
+    children: ReactNode;
+    value: string;
+    disabled?: boolean;
+    asChild?: boolean;
+}
+export declare const SegmentedTabsTrigger: FC<SegmentedTabsTriggerProps>;
+export {};

package/dist/components/SegmentedTabs/SegmentedTabsTrigger.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { Tabs } from "@ark-ui/react/tabs";
+import { cn } from "../../utils/cn.js";
+import { segmentedControlItemClassNamesBase } from "../SegmentedControl/index.js";
+const SegmentedTabsTrigger = ({ children, value, disabled = false, asChild = false })=>/*#__PURE__*/ jsx(Tabs.Trigger, {
+        className: cn(segmentedControlItemClassNamesBase, 'group z-1', '[&:has([data-slot=segmented-tabs-trigger-button])]:px-20', '[&:has([data-slot=segmented-tabs-trigger-button])]:overflow-hidden', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:absolute', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:right-0', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:w-32', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:h-24', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:transition-opacity', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:opacity-0', '[&:has([data-slot=segmented-tabs-trigger-button]):hover]:before:opacity-100', '[&:has([data-slot=segmented-tabs-trigger-button]):active]:before:opacity-100', '[&:has([data-slot=segmented-tabs-trigger-button][data-state=open])]:before:opacity-100', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:bg-linear-to-r', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:from-transparent', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:to-20%', '[&:has([data-slot=segmented-tabs-trigger-button])]:before:to-bg-primary', '[[data-selected]:has([data-slot=segmented-tabs-trigger-button])]:before:to-bg-surface-3', '[&:has([data-slot=segmented-tabs-trigger-button][data-state=open])]:before:to-bg-primary', '[[data-selected]:has([data-slot=segmented-tabs-trigger-button][data-state=open])]:before:to-bg-surface-3', '**:data-[slot=segmented-tabs-trigger-button]:absolute', '**:data-[slot=segmented-tabs-trigger-button]:right-2', '**:data-[slot=segmented-tabs-trigger-button]:top-1/2', '**:data-[slot=segmented-tabs-trigger-button]:-translate-y-1/2 ', '**:data-[slot=segmented-tabs-trigger-button]:z-1', '**:data-[slot=segmented-tabs-trigger-button]:overflow-visible', '**:data-[slot=segmented-tabs-trigger-button]:opacity-0', '**:data-[slot=segmented-tabs-trigger-button]:data-[state=open]:opacity-100', 'not-data-disabled:not-data-selected:hover:text-text-primary', 'hover:[&:not([data-disabled])_[data-slot=segmented-tabs-trigger-button]]:opacity-100', 'data-selected:text-text-primary'),
+        value: value,
+        disabled: disabled,
+        asChild: asChild,
+        children: children
+    });
+export { SegmentedTabsTrigger };

package/dist/components/SegmentedTabs/SegmentedTabsTriggerButton.d.ts

@@ -0,0 +1,7 @@
+import type { FC, Ref } from 'react';
+import { type ButtonProps } from '../Button';
+type SegmentedTabsTriggerButtonProps = Omit<ButtonProps<'span'>, 'children' | 'variant' | 'color' | 'size' | 'tabIndex'> & {
+    ref?: Ref<HTMLElement>;
+};
+export declare const SegmentedTabsTriggerButton: FC<SegmentedTabsTriggerButtonProps>;
+export {};

package/dist/components/SegmentedTabs/SegmentedTabsTriggerButton.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { Ellipsis } from "../../icons/index.js";
+import { Button } from "../Button/index.js";
+const SegmentedTabsTriggerButton = (props)=>/*#__PURE__*/ jsx(Button, {
+        ...props,
+        as: "span",
+        variant: "ghost",
+        color: "neutral",
+        size: "small",
+        "data-slot": "segmented-tabs-trigger-button",
+        tabIndex: -1,
+        children: /*#__PURE__*/ jsx(Ellipsis, {})
+    });
+SegmentedTabsTriggerButton.displayName = 'SegmentedTabsTriggerButton';
+export { SegmentedTabsTriggerButton };

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

@@ -0,0 +1,7 @@
+export { SegmentedTabs } from './SegmentedTabs';
+export { SegmentedTabsButton } from './SegmentedTabsButton';
+export { SegmentedTabsContent } from './SegmentedTabsContent';
+export { SegmentedTabsList } from './SegmentedTabsList';
+export { SegmentedTabsSeparator } from './SegmentedTabsSeparator';
+export { SegmentedTabsTrigger } from './SegmentedTabsTrigger';
+export { SegmentedTabsTriggerButton } from './SegmentedTabsTriggerButton';

package/dist/components/SegmentedTabs/index.js

@@ -0,0 +1,8 @@
+import { SegmentedTabs } from "./SegmentedTabs.js";
+import { SegmentedTabsButton } from "./SegmentedTabsButton.js";
+import { SegmentedTabsContent } from "./SegmentedTabsContent.js";
+import { SegmentedTabsList } from "./SegmentedTabsList.js";
+import { SegmentedTabsSeparator } from "./SegmentedTabsSeparator.js";
+import { SegmentedTabsTrigger } from "./SegmentedTabsTrigger.js";
+import { SegmentedTabsTriggerButton } from "./SegmentedTabsTriggerButton.js";
+export { SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton };

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,11 @@
+import { type CollectionItem, type SelectRootProps } from '@ark-ui/react/select';
+type SelectNativeProps<T extends CollectionItem> = Omit<SelectRootProps<T>, 'positioning' | 'lazyMount' | 'unmountOnExit'>;
+interface SelectBaseProps {
+    loading?: boolean;
+}
+type SelectProps<T extends CollectionItem> = SelectNativeProps<T> & SelectBaseProps;
+export declare const Select: {
+    <T extends unknown>({ children, loading, disabled, ...props }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/Select/Select.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Select } from "@ark-ui/react/select";
+import { SelectSharedProvider } from "./SelectSharedContext/index.js";
+const Select_Select = ({ children, loading = false, disabled = false, ...props })=>{
+    const positioning = useMemo(()=>({
+            offset: {
+                mainAxis: 4
+            },
+            gutter: 4,
+            overflowPadding: 4
+        }), []);
+    return /*#__PURE__*/ jsx(SelectSharedProvider, {
+        value: {
+            loading
+        },
+        children: /*#__PURE__*/ jsxs(Select.Root, {
+            ...props,
+            disabled: disabled,
+            positioning: positioning,
+            lazyMount: true,
+            unmountOnExit: true,
+            children: [
+                /*#__PURE__*/ jsx(Select.HiddenSelect, {}),
+                children
+            ]
+        })
+    });
+};
+Select_Select.displayName = 'Select';
+export { Select_Select as Select };

package/dist/components/Select/SelectArrow.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+interface SelectArrowProps {
+    className?: string;
+}
+export declare const SelectArrow: FC<SelectArrowProps>;
+export {};

package/dist/components/Select/SelectArrow.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { Select } from "@ark-ui/react/select";
+import { ChevronDown } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+const SelectArrow = ({ className })=>/*#__PURE__*/ jsx(Select.Indicator, {
+        className: cn('ml-auto icon-md transition-transform data-[state=open]:rotate-180', className),
+        asChild: true,
+        children: /*#__PURE__*/ jsx(ChevronDown, {})
+    });
+export { SelectArrow };

package/dist/components/Select/SelectButton.d.ts

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import { type ButtonProps } from '../Button';
+import { type SelectValueTextProps } from './SelectValueText';
+type SelectButtonBaseProps = Omit<ButtonProps, 'variant' | 'color' | 'size' | 'disabled'>;
+interface SelectButtonVariantProps {
+    variant?: Exclude<ButtonProps['variant'], 'primary'>;
+    color?: Exclude<ButtonProps['color'], 'destructive'>;
+}
+type SelectButtonProps = SelectButtonBaseProps & SelectButtonVariantProps & SelectValueTextProps;
+export declare const SelectButton: FC<SelectButtonProps>;
+export {};

package/dist/components/Select/SelectButton.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Select, useSelectContext } from "@ark-ui/react/select";
+import { Button } from "../Button/index.js";
+import { SelectArrow } from "./SelectArrow.js";
+import { useSelectSharedContext } from "./SelectSharedContext/index.js";
+import { SelectValueIcon } from "./SelectValueIcon.js";
+import { SelectValueText } from "./SelectValueText.js";
+const SelectButton = ({ placeholder = 'Choose...', variant = 'outline', color = 'neutral', ...props })=>{
+    const { loading } = useSelectSharedContext();
+    const { disabled } = useSelectContext();
+    return /*#__PURE__*/ jsx(Select.Control, {
+        children: /*#__PURE__*/ jsx(Select.Trigger, {
+            asChild: true,
+            children: /*#__PURE__*/ jsxs(Button, {
+                ...props,
+                variant: variant,
+                color: color,
+                size: "large",
+                loading: loading,
+                disabled: disabled,
+                fullWidth: true,
+                children: [
+                    /*#__PURE__*/ jsx(SelectValueIcon, {}),
+                    /*#__PURE__*/ jsx(SelectValueText, {
+                        placeholder: placeholder
+                    }),
+                    /*#__PURE__*/ jsx(SelectArrow, {})
+                ]
+            })
+        })
+    });
+};
+SelectButton.displayName = 'SelectButton';
+export { SelectButton };

package/dist/components/Select/SelectButtonTag/SelectButtonTag.d.ts

@@ -0,0 +1,5 @@
+import type { FC, PropsWithChildren } from 'react';
+import { type TagProps } from '../../Tag';
+type SelectButtonProps = Omit<TagProps, 'disabled'>;
+export declare const SelectButtonTag: FC<PropsWithChildren<SelectButtonProps>>;
+export {};

package/dist/components/Select/SelectButtonTag/SelectButtonTag.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Select, useSelectContext } from "@ark-ui/react/select";
+import { Tag } from "../../Tag/index.js";
+import { SelectArrow } from "../SelectArrow.js";
+const SelectButtonTag = ({ children, ...props })=>{
+    const { disabled } = useSelectContext();
+    return /*#__PURE__*/ jsx(Select.Control, {
+        children: /*#__PURE__*/ jsx(Select.Trigger, {
+            asChild: true,
+            children: /*#__PURE__*/ jsxs(Tag, {
+                ...props,
+                disabled: disabled,
+                children: [
+                    children,
+                    /*#__PURE__*/ jsx(SelectArrow, {})
+                ]
+            })
+        })
+    });
+};
+SelectButtonTag.displayName = 'SelectButtonTag';
+export { SelectButtonTag };

package/dist/components/Select/SelectButtonTag/SelectButtonTagValue.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+interface SelectButtonTagValueProps {
+    placeholder: string;
+}
+export declare const SelectButtonTagValue: FC<SelectButtonTagValueProps>;
+export {};

package/dist/components/Select/SelectButtonTag/SelectButtonTagValue.js

@@ -0,0 +1,6 @@
+import { useSelectContext } from "@ark-ui/react/select";
+const SelectButtonTagValue = ({ placeholder })=>{
+    const { valueAsString } = useSelectContext();
+    return valueAsString ? `${placeholder}: ${valueAsString}` : placeholder;
+};
+export { SelectButtonTagValue };

package/dist/components/Select/SelectButtonTag/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectButtonTag } from './SelectButtonTag';
+export { SelectButtonTagValue } from './SelectButtonTagValue';

package/dist/components/Select/SelectButtonTag/index.js

@@ -0,0 +1,3 @@
+import { SelectButtonTag } from "./SelectButtonTag.js";
+import { SelectButtonTagValue } from "./SelectButtonTagValue.js";
+export { SelectButtonTag, SelectButtonTagValue };

package/dist/components/Select/SelectClearTrigger.d.ts

@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import { Select as ArkUiSelect } from '@ark-ui/react/select';
+import type { VariantProps } from 'class-variance-authority';
+import { linkVariants } from '../Link';
+type SelectClearTriggerNativeProps = Omit<ArkUiSelect.TriggerProps, 'className' | 'type'>;
+type SelectClearTriggerVariantsProps = VariantProps<typeof linkVariants>;
+type SelectClearTriggerProps = SelectClearTriggerNativeProps & SelectClearTriggerVariantsProps;
+export declare const SelectClearTrigger: FC<SelectClearTriggerProps>;
+export {};