@wallarm-org/design-system 0.1.0

package/dist/components/Radio/Radio.figma.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Radio } from "./Radio.js";
+import { RadioDescription } from "./RadioDescription.js";
+import { RadioIndicator } from "./RadioIndicator.js";
+import { RadioLabel } from "./RadioLabel.js";
+const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/wip-components?node-id=290-5732';
+code_connect.connect(Radio, figmaNodeUrl, {
+    props: {
+        disabled: code_connect.boolean('Disable'),
+        label: code_connect.textContent('Label'),
+        description: code_connect.boolean("Description"),
+        descriptionText: code_connect.string("Descript")
+    },
+    example: ({ label })=>/*#__PURE__*/ jsxs(Radio, {
+            value: label,
+            children: [
+                /*#__PURE__*/ jsx(RadioIndicator, {}),
+                /*#__PURE__*/ jsx(RadioLabel, {
+                    children: label
+                })
+            ]
+        })
+});
+code_connect.connect(Radio, figmaNodeUrl, {
+    props: {
+        disabled: code_connect.boolean('Disable'),
+        label: code_connect.textContent('Label'),
+        description: code_connect.boolean("Description"),
+        descriptionText: code_connect.string("Descript")
+    },
+    variant: {
+        Disable: true
+    },
+    example: ({ label, disabled })=>/*#__PURE__*/ jsxs(Radio, {
+            value: label,
+            disabled: disabled,
+            children: [
+                /*#__PURE__*/ jsx(RadioIndicator, {}),
+                /*#__PURE__*/ jsx(RadioLabel, {
+                    children: label
+                })
+            ]
+        })
+});
+code_connect.connect(Radio, figmaNodeUrl, {
+    props: {
+        disabled: code_connect.boolean('Disable'),
+        label: code_connect.textContent('Label'),
+        description: code_connect.boolean("Description"),
+        descriptionText: code_connect.string("Descript")
+    },
+    variant: {
+        Description: true
+    },
+    example: ({ label, disabled, descriptionText })=>/*#__PURE__*/ jsxs(Radio, {
+            value: label,
+            disabled: disabled,
+            children: [
+                /*#__PURE__*/ jsx(RadioIndicator, {}),
+                /*#__PURE__*/ jsx(RadioLabel, {
+                    children: label
+                }),
+                /*#__PURE__*/ jsx(RadioDescription, {
+                    children: descriptionText
+                })
+            ]
+        })
+});

package/dist/components/Radio/Radio.js

@@ -0,0 +1,13 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RadioGroup } from "@ark-ui/react/radio-group";
+import { cn } from "../../utils/cn.js";
+const Radio = ({ children, ...props })=>/*#__PURE__*/ jsxs(RadioGroup.Item, {
+        ...props,
+        className: cn('items-center gap-x-8', "[&:not(:has([data-part=description]))]:flex", "[&:has([data-part=description])]:grid", "[&:has([data-part=description])]:grid-cols-[16px_auto]", "*:data-[part=description]:col-start-2 *:data-[part=description]:col-end-3", '[&:not([data-disabled])]:cursor-pointer', 'data-disabled:**:pointer-events-none data-disabled:cursor-not-allowed'),
+        children: [
+            children,
+            /*#__PURE__*/ jsx(RadioGroup.ItemHiddenInput, {})
+        ]
+    });
+Radio.displayName = 'Radio';
+export { Radio };

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

@@ -0,0 +1,3 @@
+import type { FC, HTMLAttributes } from 'react';
+export type RadioDescriptionProps = Omit<HTMLAttributes<HTMLParagraphElement>, 'className'>;
+export declare const RadioDescription: FC<RadioDescriptionProps>;

package/dist/components/Radio/RadioDescription.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { Text } from "../Text/index.js";
+const RadioDescription = (props)=>/*#__PURE__*/ jsx(Text, {
+        ...props,
+        size: "sm",
+        weight: "regular",
+        color: "secondary",
+        "data-scope": "radio",
+        "data-part": "description"
+    });
+RadioDescription.displayName = "RadioDescription";
+export { RadioDescription };

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

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import { RadioGroup as ArkUiRadioGroup } from '@ark-ui/react/radio-group';
+import { type VariantProps } from 'class-variance-authority';
+declare const radioGroupVariants: (props?: ({
+    variant?: "default" | "card" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type RadioGroupNativeProps = Omit<ArkUiRadioGroup.RootProps, 'className'>;
+export type RadioGroupVariantsProps = VariantProps<typeof radioGroupVariants>;
+export type RadioGroupProps = RadioGroupNativeProps & RadioGroupVariantsProps;
+export declare const RadioGroup: FC<RadioGroupProps>;
+export {};

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

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

package/dist/components/Radio/RadioGroup.figma.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { RadioGroup } from "./RadioGroup.js";
+const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/wip-components?node-id=290-5899';
+code_connect.connect(RadioGroup, figmaNodeUrl, {
+    props: {
+        children: code_connect.children('radio-item')
+    },
+    example: ({ children })=>/*#__PURE__*/ jsx(RadioGroup, {
+            value: "any",
+            children: children
+        })
+});

package/dist/components/Radio/RadioGroup.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { RadioGroup } from "@ark-ui/react/radio-group";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const radioGroupVariants = cva('', {
+    variants: {
+        variant: {
+            default: cn('[&_[data-part=item][data-disabled]]:opacity-50'),
+            card: cn('[&_[data-part=item]]:py-12 [&_[data-part=item]]:pl-12 [&_[data-part=item]]:pr-16', '[&_[data-part=item]]:rounded-8 [&_[data-part=item]]:border [&_[data-part=item]]:bg-bg-surface-2', '[&_[data-part=item]]:transition-colors [&_[data-part=item]]:overlay', '[&_[data-part=item][data-state=unchecked]]:border-border-primary', '[&_[data-part=item][data-state=unchecked]:not([data-disabled])]:hover:overlay-states-primary-hover', '[&_[data-part=item][data-state=unchecked]:not([data-disabled])]:active:overlay-states-primary-pressed', '[&_[data-part=item][data-state=checked]]:border-border-brand', '[&_[data-part=item][data-state=checked]:not([data-disabled])]:hover:overlay-states-brand-hover', '[&_[data-part=item][data-state=checked]:not([data-disabled])]:active:overlay-states-brand-pressed', '[&_[data-part=item][data-disabled]]:[&_[data-part=item-text]]:opacity-50', "[&_[data-part=item][data-disabled]]:[&_[data-part=description]]:opacity-50", '[&_[data-part=item][data-disabled]]:[&_[data-part=item-control]]:opacity-50')
+        }
+    }
+});
+const RadioGroup_RadioGroup = ({ variant = 'default', ...props })=>/*#__PURE__*/ jsx(RadioGroup.Root, {
+        ...props,
+        className: cn(radioGroupVariants({
+            variant
+        }), 'flex flex-col gap-8')
+    });
+RadioGroup_RadioGroup.displayName = 'RadioGroup';
+export { RadioGroup_RadioGroup as RadioGroup };

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

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

package/dist/components/Radio/RadioIndicator.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { RadioGroup, useRadioGroupItemContext } from "@ark-ui/react/radio-group";
+import { Dot } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+const RadioIndicator = ()=>{
+    const { checked } = useRadioGroupItemContext();
+    return /*#__PURE__*/ jsx(RadioGroup.ItemControl, {
+        className: cn('flex items-center justify-center self-start my-2', 'w-16 h-16', 'rounded-full shadow-xs overlay transition-all data-focus-visible:ring-3', '[&_svg]:icon-md [&_svg]:text-icon-primary-alt [&_svg]:shrink-0 [&_svg]:pointer-events-none [&_svg]:stroke-6', 'bg-bg-surface-3 border border-border-primary', '[&[data-state=unchecked][data-hover]:not([data-active])]:bg-states-primary-hover', '[&[data-state=unchecked][data-active]]:bg-states-primary-pressed', '[&[data-state=unchecked][data-focus-visible]]:ring-focus-primary', 'data-[state=checked]:bg-bg-fill-brand', 'data-[state=checked]:border-bg-fill-brand', '[&[data-state=checked][data-hover]:not([data-active])]:overlay-states-on-fill-hover', '[&[data-state=checked][data-active]]:overlay-states-on-fill-hover', '[&[data-state=checked][data-focus-visible]]:overlay-states-on-fill-hover', '[&[data-state=checked][data-focus-visible]]:ring-focus-brand'),
+        children: checked && /*#__PURE__*/ jsx(Dot, {})
+    });
+};
+RadioIndicator.displayName = 'RadioIndicator';
+export { RadioIndicator };

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

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

package/dist/components/Radio/RadioLabel.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { RadioGroup } from "@ark-ui/react";
+const RadioLabel = (props)=>/*#__PURE__*/ jsx(RadioGroup.ItemText, {
+        ...props,
+        className: "flex gap-4 font-sans text-sm font-normal text-text-primary"
+    });
+RadioLabel.displayName = 'RadioLabel';
+export { RadioLabel };

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

@@ -0,0 +1,5 @@
+export { Radio, type RadioProps } from './Radio';
+export { RadioDescription, type RadioDescriptionProps, } from './RadioDescription';
+export { RadioGroup, type RadioGroupProps } from './RadioGroup';
+export { RadioIndicator } from './RadioIndicator';
+export { RadioLabel, type RadioLabelProps } from './RadioLabel';

package/dist/components/Radio/index.js

@@ -0,0 +1,6 @@
+import { Radio } from "./Radio.js";
+import { RadioDescription } from "./RadioDescription.js";
+import { RadioGroup } from "./RadioGroup.js";
+import { RadioIndicator } from "./RadioIndicator.js";
+import { RadioLabel } from "./RadioLabel.js";
+export { Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel };

package/dist/components/ScrollArea/ScrollArea.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import { ScrollArea as ArkUiScrollArea } from '@ark-ui/react/scroll-area';
+export type ScrollAreaProps = ArkUiScrollArea.RootProps;
+export declare const ScrollArea: FC<ScrollAreaProps>;

package/dist/components/ScrollArea/ScrollArea.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { ScrollArea } from "@ark-ui/react/scroll-area";
+import { cn } from "../../utils/cn.js";
+const ScrollArea_ScrollArea = ({ className, ...props })=>/*#__PURE__*/ jsx(ScrollArea.Root, {
+        ...props,
+        className: cn('h-full outline-none [&:has(:is([data-overflow-x],[data-overflow-y]))_[data-part=thumb][data-hover]]:opacity-50', className)
+    });
+ScrollArea_ScrollArea.displayName = 'ScrollArea';
+export { ScrollArea_ScrollArea as ScrollArea };

package/dist/components/ScrollArea/ScrollAreaContent.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import { ScrollArea as ArkUiScrollArea } from '@ark-ui/react/scroll-area';
+export type ScrollAreaContentProps = ArkUiScrollArea.ContentProps;
+export declare const ScrollAreaContent: FC<ScrollAreaContentProps>;

package/dist/components/ScrollArea/ScrollAreaContent.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { ScrollArea } from "@ark-ui/react/scroll-area";
+import { cn } from "../../utils/cn.js";
+const ScrollAreaContent = ({ className, ...props })=>/*#__PURE__*/ jsx(ScrollArea.Content, {
+        ...props,
+        className: cn('h-full outline-none', className)
+    });
+ScrollAreaContent.displayName = 'ScrollAreaContent';
+export { ScrollAreaContent };

package/dist/components/ScrollArea/ScrollAreaCorner.d.ts

@@ -0,0 +1,2 @@
+import { ScrollArea as ArkUiScrollArea } from '@ark-ui/react/scroll-area';
+export declare const ScrollAreaCorner: import("react").ForwardRefExoticComponent<ArkUiScrollArea.CornerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/ScrollArea/ScrollAreaCorner.js

@@ -0,0 +1,4 @@
+import { ScrollArea } from "@ark-ui/react/scroll-area";
+const ScrollAreaCorner = ScrollArea.Corner;
+ScrollAreaCorner.displayName = 'ScrollAreaCorner';
+export { ScrollAreaCorner };

package/dist/components/ScrollArea/ScrollAreaScrollbar.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import { ScrollArea as ArkUiScrollArea } from '@ark-ui/react/scroll-area';
+export type ScrollAreaScrollbarProps = Omit<ArkUiScrollArea.ScrollbarProps, 'className' | 'style'>;
+export declare const ScrollAreaScrollbar: FC<ScrollAreaScrollbarProps>;

package/dist/components/ScrollArea/ScrollAreaScrollbar.js

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { ScrollArea } from "@ark-ui/react/scroll-area";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const scrollAreaScrollbarVariants = cva('bg-transparent rounded-8 transition-opacity overflow-hidden', {
+    variants: {
+        orientation: {
+            vertical: 'w-4 mr-3 my-auto',
+            horizontal: 'h-4 mb-3 mx-auto'
+        }
+    }
+});
+const scrollAreaScrollbarThumbVariants = cva('bg-badge-slate-dark-alt opacity-0 transition-opacity', {
+    variants: {
+        orientation: {
+            vertical: 'w-4',
+            horizontal: 'h-4'
+        }
+    }
+});
+const ScrollAreaScrollbar = ({ orientation = 'vertical', ...props })=>{
+    const scrollbarStyle = useMemo(()=>{
+        if ('horizontal' === orientation) return {
+            left: 4,
+            bottom: 4,
+            right: 4
+        };
+        return {
+            top: 4,
+            bottom: 4
+        };
+    }, [
+        orientation
+    ]);
+    return /*#__PURE__*/ jsx(ScrollArea.Scrollbar, {
+        ...props,
+        style: scrollbarStyle,
+        orientation: orientation,
+        className: cn(scrollAreaScrollbarVariants({
+            orientation
+        })),
+        children: /*#__PURE__*/ jsx(ScrollArea.Thumb, {
+            className: cn(scrollAreaScrollbarThumbVariants({
+                orientation
+            }))
+        })
+    });
+};
+ScrollAreaScrollbar.displayName = 'ScrollAreaScrollbar';
+export { ScrollAreaScrollbar };

package/dist/components/ScrollArea/ScrollAreaViewport.d.ts

@@ -0,0 +1,6 @@
+import type { FC, Ref } from 'react';
+import { ScrollArea as ArkUiScrollArea } from '@ark-ui/react/scroll-area';
+export type ScrollAreaViewportProps = Omit<ArkUiScrollArea.ViewportProps, 'className'> & {
+    ref?: Ref<HTMLDivElement>;
+};
+export declare const ScrollAreaViewport: FC<ScrollAreaViewportProps>;

package/dist/components/ScrollArea/ScrollAreaViewport.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { ScrollArea } from "@ark-ui/react/scroll-area";
+const ScrollAreaViewport = (props)=>/*#__PURE__*/ jsx(ScrollArea.Viewport, {
+        ...props,
+        className: "h-full"
+    });
+ScrollAreaViewport.displayName = 'ScrollAreaViewport';
+export { ScrollAreaViewport };

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

@@ -0,0 +1,5 @@
+export { ScrollArea, type ScrollAreaProps } from './ScrollArea';
+export { ScrollAreaContent, type ScrollAreaContentProps, } from './ScrollAreaContent';
+export { ScrollAreaCorner } from './ScrollAreaCorner';
+export { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, } from './ScrollAreaScrollbar';
+export { ScrollAreaViewport, type ScrollAreaViewportProps, } from './ScrollAreaViewport';

package/dist/components/ScrollArea/index.js

@@ -0,0 +1,6 @@
+import { ScrollArea } from "./ScrollArea.js";
+import { ScrollAreaContent } from "./ScrollAreaContent.js";
+import { ScrollAreaCorner } from "./ScrollAreaCorner.js";
+import { ScrollAreaScrollbar } from "./ScrollAreaScrollbar.js";
+import { ScrollAreaViewport } from "./ScrollAreaViewport.js";
+export { ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport };

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

@@ -0,0 +1,31 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import { segmentedControlVariants } from './classes';
+type SegmentedControlVariantProps = VariantProps<typeof segmentedControlVariants>;
+type SegmentedControlNativeProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'>;
+/**
+ * SegmentedControl component for switching between different views or options.
+ *
+ * Built on Ark UI's SegmentGroup with radio input behavior and accessibility.
+ * This is a controlled component - selection state is managed by the parent.
+ */
+export interface SegmentedControlBaseProps {
+    /** The currently selected value */
+    value?: string;
+    /** The default selected value */
+    defaultValue?: string;
+    /** Callback function called when the selection changes */
+    onChange?: (value: string) => void;
+    /** Whether the segmented control should take full width and stretch items equally */
+    fullWidth?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+export type SegmentedControlProps = SegmentedControlNativeProps & SegmentedControlVariantProps & SegmentedControlBaseProps;
+/**
+ * SegmentedControl component for switching between different views or options.
+ *
+ * Built on Ark UI's SegmentGroup with radio input behavior and accessibility.
+ * This is a controlled component - selection state is managed by the parent.
+ */
+export declare const SegmentedControl: FC<SegmentedControlProps>;
+export {};

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

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

package/dist/components/SegmentedControl/SegmentedControl.figma.js

@@ -0,0 +1,118 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { NumericBadge } from "../NumericBadge/index.js";
+import { SegmentedControl } from "./SegmentedControl.js";
+import { SegmentedControlButton } from "./SegmentedControlButton.js";
+import { SegmentedControlItem } from "./SegmentedControlItem.js";
+import { SegmentedControlSeparator } from "./SegmentedControlSeparator.js";
+const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/wip-components?node-id=647-3325';
+code_connect.connect(SegmentedControl, figmaNodeUrl, {
+    example: ()=>/*#__PURE__*/ jsxs(SegmentedControl, {
+            value: "1",
+            children: [
+                /*#__PURE__*/ jsx(SegmentedControlItem, {
+                    value: "1",
+                    children: "Headers"
+                }),
+                /*#__PURE__*/ jsx(SegmentedControlItem, {
+                    value: "2",
+                    children: "Parameters"
+                }),
+                /*#__PURE__*/ jsx(SegmentedControlItem, {
+                    value: "3",
+                    children: "Schema"
+                })
+            ]
+        })
+});
+code_connect.connect(SegmentedControl, figmaNodeUrl, {
+    variant: {
+        'Has Counts': true
+    },
+    example: ()=>/*#__PURE__*/ jsxs(SegmentedControl, {
+            value: "1",
+            onChange: ()=>{},
+            children: [
+                /*#__PURE__*/ jsxs(SegmentedControlItem, {
+                    value: "1",
+                    children: [
+                        "Headers",
+                        /*#__PURE__*/ jsx(NumericBadge, {
+                            children: 33
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs(SegmentedControlItem, {
+                    value: "2",
+                    children: [
+                        "Parameters",
+                        /*#__PURE__*/ jsx(NumericBadge, {
+                            children: 100
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(SegmentedControlItem, {
+                    value: "3",
+                    children: "Schema"
+                })
+            ]
+        })
+});
+code_connect.connect(SegmentedControl, figmaNodeUrl, {
+    variant: {
+        'Has More': true
+    },
+    example: ()=>/*#__PURE__*/ jsxs(SegmentedControl, {
+            value: "1",
+            onChange: ()=>{},
+            children: [
+                /*#__PURE__*/ jsx(SegmentedControlItem, {
+                    value: "1",
+                    children: "Overview"
+                }),
+                /*#__PURE__*/ jsx(SegmentedControlItem, {
+                    value: "2",
+                    children: "Analytics"
+                }),
+                /*#__PURE__*/ jsx(SegmentedControlItem, {
+                    value: "3",
+                    children: "Reports"
+                }),
+                /*#__PURE__*/ jsx(SegmentedControlSeparator, {}),
+                /*#__PURE__*/ jsx(SegmentedControlButton, {
+                    children: "More"
+                })
+            ]
+        })
+});
+code_connect.connect(SegmentedControl, figmaNodeUrl, {
+    props: {
+        fullWidth: code_connect.boolean('Full Width')
+    },
+    variant: {
+        'Full Width': true
+    },
+    example: ({ fullWidth = true })=>/*#__PURE__*/ jsxs(SegmentedControl, {
+            value: "1",
+            onChange: ()=>{},
+            fullWidth: fullWidth,
+            children: [
+                /*#__PURE__*/ jsx(SegmentedControlItem, {
+                    value: "1",
+                    children: "Overview"
+                }),
+                /*#__PURE__*/ jsx(SegmentedControlItem, {
+                    value: "2",
+                    children: "Analytics"
+                }),
+                /*#__PURE__*/ jsx(SegmentedControlItem, {
+                    value: "3",
+                    children: "Reports"
+                }),
+                /*#__PURE__*/ jsx(SegmentedControlItem, {
+                    value: "4",
+                    children: "Settings"
+                })
+            ]
+        })
+});

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SegmentGroup } from "@ark-ui/react/segment-group";
+import { useControlled } from "../../hooks/index.js";
+import { cn } from "../../utils/cn.js";
+import { segmentedControlIndicatorClassNames, segmentedControlVariants } from "./classes.js";
+const SegmentedControl = ({ className, fullWidth = false, value: valueProp, defaultValue, onChange, children, ref, ...props })=>{
+    const [value, setValue] = useControlled({
+        controlled: valueProp,
+        default: defaultValue
+    });
+    const handleValueChange = ({ value })=>{
+        if (value) {
+            setValue(value);
+            onChange?.(value);
+        }
+    };
+    return /*#__PURE__*/ jsxs(SegmentGroup.Root, {
+        ref: ref,
+        value: value,
+        onValueChange: handleValueChange,
+        className: cn(segmentedControlVariants({
+            fullWidth
+        }), className),
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(SegmentGroup.Indicator, {
+                className: segmentedControlIndicatorClassNames
+            }),
+            children
+        ]
+    });
+};
+SegmentedControl.displayName = 'SegmentedControl';
+export { SegmentedControl };

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

@@ -0,0 +1,13 @@
+import type { FC, Ref } from 'react';
+import { type ButtonBaseProps } from '../ButtonBase';
+/**
+ * "More" button component for SegmentedControl.
+ *
+ * Used to show additional options or trigger a menu when there are too many items
+ * to display in the segmented control. Uses compound pattern - pass icon and text as children.
+ * Height matches SegmentedControlItem (28px) as per Figma design.
+ */
+export type SegmentedControlButtonProps = ButtonBaseProps & {
+    ref?: Ref<HTMLButtonElement>;
+};
+export declare const SegmentedControlButton: FC<SegmentedControlButtonProps>;

package/dist/components/SegmentedControl/SegmentedControlButton.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { ButtonBase } from "../ButtonBase/index.js";
+const SegmentedControlButton = ({ className, children, size = 'medium', ref, ...props })=>/*#__PURE__*/ jsx(ButtonBase, {
+        ref: ref,
+        size: size,
+        className: cn('min-h-28 min-w-28 h-auto px-12 py-4', 'bg-transparent text-text-secondary', 'hover:text-text-primary', 'focus-visible:ring-3 focus-visible:ring-focus-primary', className),
+        ...props,
+        children: children
+    });
+SegmentedControlButton.displayName = 'SegmentedControlButton';
+export { SegmentedControlButton };

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

@@ -0,0 +1,17 @@
+import type { FC, PropsWithChildren, Ref } from 'react';
+/**
+ * Individual item within a SegmentedControl.
+ *
+ * Built on Ark UI's SegmentGroup.Item with radio input behavior and accessibility.
+ * Selection state is managed by the parent SegmentedControl.
+ */
+export interface SegmentedControlItemProps {
+    /** Unique value that identifies this item */
+    value: string;
+    /** Whether this item is disabled */
+    disabled?: boolean;
+    /** Additional CSS class */
+    className?: string;
+    ref?: Ref<HTMLLabelElement>;
+}
+export declare const SegmentedControlItem: FC<PropsWithChildren<SegmentedControlItemProps>>;

package/dist/components/SegmentedControl/SegmentedControlItem.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SegmentGroup } from "@ark-ui/react/segment-group";
+import { cn } from "../../utils/cn.js";
+import { segmentedControlItemClassNamesBase } from "./classes.js";
+const SegmentedControlItem = ({ className, value, disabled, children, ref })=>{
+    const handleKeyDown = (event)=>{
+        if ((' ' === event.key || 'Enter' === event.key) && !disabled) event.currentTarget.click();
+    };
+    return /*#__PURE__*/ jsxs(SegmentGroup.Item, {
+        ref: ref,
+        value: value,
+        disabled: disabled,
+        tabIndex: disabled ? -1 : 0,
+        onKeyDown: handleKeyDown,
+        className: cn(segmentedControlItemClassNamesBase, 'hover:data-[state=unchecked]:not-data-disabled:text-text-primary', 'data-[state=checked]:text-text-primary', className),
+        children: [
+            children,
+            /*#__PURE__*/ jsx(SegmentGroup.ItemControl, {
+                className: "absolute inset-0 opacity-0 pointer-events-none"
+            }),
+            /*#__PURE__*/ jsx(SegmentGroup.ItemHiddenInput, {
+                className: "absolute inset-0 opacity-0",
+                tabIndex: -1
+            })
+        ]
+    });
+};
+SegmentedControlItem.displayName = 'SegmentedControlItem';
+export { SegmentedControlItem };

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

@@ -0,0 +1,20 @@
+import type { ComponentRef, FC, Ref } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { Separator, type SeparatorProps } from '../Separator';
+declare const segmentedControlSeparatorVariants: (props?: ({
+    mx?: 1 | 2 | 4 | 6 | 8 | 12 | 16 | 20 | 32 | 24 | 28 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type SegmentedControlSeparatorVariants = VariantProps<typeof segmentedControlSeparatorVariants>;
+/**
+ * Visual separator component for SegmentedControl.
+ *
+ * Used to create visual separation between groups of items,
+ * typically before a "More" button or to group related items.
+ */
+interface SegmentedControlSeparatorBaseProps extends SeparatorProps {
+    className?: string;
+    ref?: Ref<ComponentRef<typeof Separator>>;
+}
+export type SegmentedControlSeparatorProps = SegmentedControlSeparatorBaseProps & SegmentedControlSeparatorVariants;
+export declare const SegmentedControlSeparator: FC<SegmentedControlSeparatorProps>;
+export {};