@wallarm-org/design-system 0.1.0

package/dist/components/Separator/Separator.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentPropsWithoutRef, FC, Ref } from 'react';
+import { Root } from '@radix-ui/react-separator';
+import { type VariantProps } from 'class-variance-authority';
+declare const separatorVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    spacing?: 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;
+export type SeparatorProps = Omit<ComponentPropsWithoutRef<typeof Root>, 'className'> & VariantProps<typeof separatorVariants> & {
+    ref?: Ref<HTMLHRElement>;
+};
+export declare const Separator: FC<SeparatorProps>;
+export {};

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

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

package/dist/components/Separator/Separator.figma.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Separator } from "./Separator.js";
+const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/wip-components?node-id=314-10573';
+code_connect.connect(Separator, figmaNodeUrl, {
+    props: {
+        orientation: code_connect["enum"]('Orientation', {
+            Vertical: 'vertical',
+            Horizontal: 'horizontal'
+        })
+    },
+    example: ({ orientation })=>/*#__PURE__*/ jsx(Separator, {
+            orientation: orientation
+        })
+});

package/dist/components/Separator/Separator.js

@@ -0,0 +1,269 @@
+import { jsx } from "react/jsx-runtime";
+import { Root } from "@radix-ui/react-separator";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const separatorVariants = cva('shrink-0 bg-border-primary', {
+    variants: {
+        orientation: {
+            horizontal: 'h-[1px] w-full',
+            vertical: 'w-[1px] self-stretch'
+        },
+        spacing: {
+            1: '',
+            2: '',
+            4: '',
+            6: '',
+            8: '',
+            12: '',
+            16: '',
+            20: '',
+            24: '',
+            28: '',
+            32: '',
+            36: '',
+            40: '',
+            44: '',
+            48: '',
+            56: '',
+            64: '',
+            80: '',
+            96: '',
+            112: '',
+            128: '',
+            144: ''
+        }
+    },
+    compoundVariants: [
+        {
+            orientation: 'horizontal',
+            spacing: 1,
+            className: 'my-1'
+        },
+        {
+            orientation: 'horizontal',
+            spacing: 2,
+            className: 'my-2'
+        },
+        {
+            orientation: 'horizontal',
+            spacing: 4,
+            className: 'my-4'
+        },
+        {
+            orientation: 'horizontal',
+            spacing: 6,
+            className: 'my-6'
+        },
+        {
+            orientation: 'horizontal',
+            spacing: 8,
+            className: 'my-8'
+        },
+        {
+            orientation: 'horizontal',
+            spacing: 12,
+            className: 'my-12'
+        },
+        {
+            orientation: 'horizontal',
+            spacing: 16,
+            className: 'my-16'
+        },
+        {
+            orientation: 'horizontal',
+            spacing: 20,
+            className: 'my-20'
+        },
+        {
+            orientation: 'horizontal',
+            spacing: 24,
+            className: 'my-24'
+        },
+        {
+            orientation: 'horizontal',
+            spacing: 28,
+            className: 'my-28'
+        },
+        {
+            orientation: 'horizontal',
+            spacing: 32,
+            className: 'my-32'
+        },
+        {
+            orientation: 'horizontal',
+            spacing: 36,
+            className: 'my-36'
+        },
+        {
+            orientation: 'horizontal',
+            spacing: 40,
+            className: 'my-40'
+        },
+        {
+            orientation: 'horizontal',
+            spacing: 44,
+            className: 'my-44'
+        },
+        {
+            orientation: 'horizontal',
+            spacing: 48,
+            className: 'my-48'
+        },
+        {
+            orientation: 'horizontal',
+            spacing: 56,
+            className: 'my-56'
+        },
+        {
+            orientation: 'horizontal',
+            spacing: 64,
+            className: 'my-64'
+        },
+        {
+            orientation: 'horizontal',
+            spacing: 80,
+            className: 'my-80'
+        },
+        {
+            orientation: 'horizontal',
+            spacing: 96,
+            className: 'my-96'
+        },
+        {
+            orientation: 'horizontal',
+            spacing: 112,
+            className: 'my-112'
+        },
+        {
+            orientation: 'horizontal',
+            spacing: 128,
+            className: 'my-128'
+        },
+        {
+            orientation: 'horizontal',
+            spacing: 144,
+            className: 'my-144'
+        },
+        {
+            orientation: 'vertical',
+            spacing: 1,
+            className: 'mx-1'
+        },
+        {
+            orientation: 'vertical',
+            spacing: 2,
+            className: 'mx-2'
+        },
+        {
+            orientation: 'vertical',
+            spacing: 4,
+            className: 'mx-4'
+        },
+        {
+            orientation: 'vertical',
+            spacing: 6,
+            className: 'mx-6'
+        },
+        {
+            orientation: 'vertical',
+            spacing: 8,
+            className: 'mx-8'
+        },
+        {
+            orientation: 'vertical',
+            spacing: 12,
+            className: 'mx-12'
+        },
+        {
+            orientation: 'vertical',
+            spacing: 16,
+            className: 'mx-16'
+        },
+        {
+            orientation: 'vertical',
+            spacing: 20,
+            className: 'mx-20'
+        },
+        {
+            orientation: 'vertical',
+            spacing: 24,
+            className: 'mx-24'
+        },
+        {
+            orientation: 'vertical',
+            spacing: 28,
+            className: 'mx-28'
+        },
+        {
+            orientation: 'vertical',
+            spacing: 32,
+            className: 'mx-32'
+        },
+        {
+            orientation: 'vertical',
+            spacing: 36,
+            className: 'mx-36'
+        },
+        {
+            orientation: 'vertical',
+            spacing: 40,
+            className: 'mx-40'
+        },
+        {
+            orientation: 'vertical',
+            spacing: 44,
+            className: 'mx-44'
+        },
+        {
+            orientation: 'vertical',
+            spacing: 48,
+            className: 'mx-48'
+        },
+        {
+            orientation: 'vertical',
+            spacing: 56,
+            className: 'mx-56'
+        },
+        {
+            orientation: 'vertical',
+            spacing: 64,
+            className: 'mx-64'
+        },
+        {
+            orientation: 'vertical',
+            spacing: 80,
+            className: 'mx-80'
+        },
+        {
+            orientation: 'vertical',
+            spacing: 96,
+            className: 'mx-96'
+        },
+        {
+            orientation: 'vertical',
+            spacing: 112,
+            className: 'mx-112'
+        },
+        {
+            orientation: 'vertical',
+            spacing: 128,
+            className: 'mx-128'
+        },
+        {
+            orientation: 'vertical',
+            spacing: 144,
+            className: 'mx-144'
+        }
+    ]
+});
+const Separator = ({ orientation = 'horizontal', decorative = true, spacing, ...props })=>/*#__PURE__*/ jsx(Root, {
+        decorative: decorative,
+        orientation: orientation,
+        className: cn(separatorVariants({
+            orientation,
+            spacing
+        })),
+        ...props
+    });
+Separator.displayName = 'Separator';
+export { Separator };

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

@@ -0,0 +1 @@
+export { Separator, type SeparatorProps } from './Separator';

package/dist/components/Separator/index.js

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

package/dist/components/Stack/HStack.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import { type StackProps } from './Stack';
+export type HStackProps = Omit<StackProps, 'direction'>;
+export declare const HStack: FC<HStackProps>;

package/dist/components/Stack/HStack.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { Stack } from "./Stack.js";
+const HStack = ({ align = 'center', justify = 'start', ...props })=>/*#__PURE__*/ jsx(Stack, {
+        align: align,
+        justify: justify,
+        direction: "row",
+        ...props
+    });
+HStack.displayName = 'HStack';
+export { HStack };

package/dist/components/Stack/Stack.d.ts

@@ -0,0 +1,17 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const stackVariants: (props?: ({
+    direction?: "row" | "column" | "row-reverse" | "column-reverse" | null | undefined;
+    align?: "end" | "baseline" | "start" | "center" | "stretch" | null | undefined;
+    justify?: "end" | "start" | "center" | "between" | "around" | "evenly" | null | undefined;
+    wrap?: "reverse" | "wrap" | "nowrap" | null | undefined;
+    spacing?: 0 | 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 StackNativeProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+type StackVariantProps = VariantProps<typeof stackVariants>;
+export type StackProps = StackNativeProps & StackVariantProps & {
+    ref?: Ref<HTMLDivElement>;
+    asChild?: boolean;
+};
+export declare const Stack: FC<StackProps>;
+export {};

package/dist/components/Stack/Stack.js

@@ -0,0 +1,85 @@
+import { jsx } from "react/jsx-runtime";
+import { Fragment, useMemo } from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+import { getValidChildren } from "./utils.js";
+const stackVariants = cva('flex flex-1 w-full', {
+    variants: {
+        direction: {
+            row: 'flex-row',
+            column: 'flex-col',
+            'row-reverse': 'flex-row-reverse',
+            'column-reverse': 'flex-col-reverse'
+        },
+        align: {
+            start: 'items-start',
+            center: 'items-center',
+            end: 'items-end',
+            stretch: 'items-stretch',
+            baseline: 'items-baseline'
+        },
+        justify: {
+            start: 'justify-start',
+            center: 'justify-center',
+            end: 'justify-end',
+            between: 'justify-between',
+            around: 'justify-around',
+            evenly: 'justify-evenly'
+        },
+        wrap: {
+            wrap: 'flex-wrap',
+            nowrap: 'flex-nowrap',
+            reverse: 'flex-wrap-reverse'
+        },
+        spacing: {
+            0: '',
+            1: 'gap-1',
+            2: 'gap-2',
+            4: 'gap-4',
+            6: 'gap-6',
+            8: 'gap-8',
+            12: 'gap-12',
+            16: 'gap-16',
+            20: 'gap-20',
+            24: 'gap-24',
+            28: 'gap-28',
+            32: 'gap-32',
+            36: 'gap-36',
+            40: 'gap-40',
+            44: 'gap-44',
+            48: 'gap-48',
+            56: 'gap-56',
+            64: 'gap-64',
+            80: 'gap-80',
+            96: 'gap-96',
+            112: 'gap-112',
+            128: 'gap-128',
+            144: 'gap-144'
+        }
+    }
+});
+const Stack = ({ direction = 'column', align = 'stretch', justify = 'start', wrap = 'nowrap', spacing = 4, asChild = false, children, ...props })=>{
+    const clones = useMemo(()=>getValidChildren(children).map((child, index)=>{
+            const key = void 0 !== child.key ? child.key : index;
+            return /*#__PURE__*/ jsx(Fragment, {
+                children: child
+            }, key);
+        }), [
+        children
+    ]);
+    const Comp = asChild ? Slot : 'div';
+    return /*#__PURE__*/ jsx(Comp, {
+        ...props,
+        className: cn(stackVariants({
+            direction,
+            align,
+            justify,
+            wrap,
+            spacing
+        })),
+        children: clones
+    });
+};
+Stack.displayName = 'Stack';
+export { Stack };

package/dist/components/Stack/VStack.d.ts

@@ -0,0 +1,6 @@
+import type { FC, Ref } from 'react';
+import { type StackProps } from './Stack';
+export interface VStackProps extends Omit<StackProps, 'direction'> {
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const VStack: FC<VStackProps>;

package/dist/components/Stack/VStack.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { Stack } from "./Stack.js";
+const VStack = ({ align = 'start', ref, ...props })=>/*#__PURE__*/ jsx(Stack, {
+        ref: ref,
+        align: align,
+        direction: "column",
+        ...props
+    });
+VStack.displayName = 'VStack';
+export { VStack };

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

@@ -0,0 +1,3 @@
+export { HStack, type HStackProps } from './HStack';
+export { Stack, type StackProps } from './Stack';
+export { VStack, type VStackProps } from './VStack';

package/dist/components/Stack/index.js

@@ -0,0 +1,4 @@
+import { HStack } from "./HStack.js";
+import { Stack } from "./Stack.js";
+import { VStack } from "./VStack.js";
+export { HStack, Stack, VStack };

package/dist/components/Stack/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ReactElement, type ReactNode } from 'react';
+export declare const getValidChildren: (children: ReactNode) => ReactElement[];

package/dist/components/Stack/utils.js

@@ -0,0 +1,3 @@
+import { Children, isValidElement } from "react";
+const getValidChildren = (children)=>Children.toArray(children).filter((child)=>isValidElement(child));
+export { getValidChildren };

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,6 @@
+import type { FC } from 'react';
+import { Switch as ArkUiSwitch } from '@ark-ui/react/switch';
+export interface SwitchProps extends Omit<ArkUiSwitch.RootProps, 'className'> {
+    a11yMode?: boolean;
+}
+export declare const Switch: FC<SwitchProps>;

package/dist/components/Switch/Switch.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Switch } from "@ark-ui/react/switch";
+import { cn } from "../../utils/cn.js";
+import { SwitchContext } from "./SwitchContext.js";
+const Switch_Switch = ({ children, a11yMode = false, ...props })=>/*#__PURE__*/ jsx(SwitchContext.Provider, {
+        value: {
+            a11yMode
+        },
+        children: /*#__PURE__*/ jsxs(Switch.Root, {
+            ...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-[40px_auto]", "*:data-[part=description]:col-start-2 *:data-[part=description]:col-end-3", '[&:not([data-disabled])]:cursor-pointer', 'data-disabled:opacity-50 data-disabled:pointer-events-none data-disabled:cursor-not-allowed'),
+            children: [
+                children,
+                /*#__PURE__*/ jsx(Switch.HiddenInput, {})
+            ]
+        })
+    });
+Switch_Switch.displayName = 'Switch';
+export { Switch_Switch as Switch };

package/dist/components/Switch/SwitchContext.d.ts

@@ -0,0 +1,4 @@
+export interface SwitchContextValue {
+    a11yMode: boolean;
+}
+export declare const SwitchContext: import("react").Context<SwitchContextValue>;

package/dist/components/Switch/SwitchContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const SwitchContext = createContext({
+    a11yMode: false
+});
+export { SwitchContext };

package/dist/components/Switch/SwitchControl.d.ts

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

package/dist/components/Switch/SwitchControl.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { Switch, useSwitchContext } from "@ark-ui/react/switch";
+import { Check, X } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { SwitchContext } from "./SwitchContext.js";
+const SwitchControl = ()=>{
+    const arkContext = useSwitchContext();
+    const { a11yMode } = useContext(SwitchContext);
+    const isChecked = arkContext.checked;
+    return /*#__PURE__*/ jsxs(Switch.Control, {
+        className: cn('relative flex items-center self-start my-2', 'w-34 h-20', 'rounded-8 overflow-hidden overlay transition-all data-focus-visible:ring-3', 'bg-component-switcher-bg', '[&[data-hover]:not([data-active]):not([data-state=checked])]:overlay-states-primary-hover', '[&[data-active]:not([data-state=checked])]:overlay-states-primary-pressed', '[&[data-focus-visible]:not([data-state=checked])]:ring-focus-primary', 'data-[state=checked]:bg-bg-fill-brand', '[&[data-hover]:not([data-active])[data-state=checked]]:overlay-states-on-fill-hover', '[&[data-active][data-state=checked]]:overlay-states-on-fill-pressed', '[&[data-focus-visible][data-state=checked]]:ring-focus-brand'),
+        children: [
+            a11yMode && !isChecked && /*#__PURE__*/ jsx(X, {
+                className: "absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 text-icon-secondary pointer-events-none z-0"
+            }),
+            a11yMode && isChecked && /*#__PURE__*/ jsx(Check, {
+                className: "absolute left-2 top-1/2 -translate-y-1/2 w-10 h-10 text-white pointer-events-none z-0"
+            }),
+            /*#__PURE__*/ jsx(Switch.Thumb, {
+                className: cn('w-16 h-12', 'bg-icon-primary-alt rounded-4 shadow-sm transition-all relative z-10', 'translate-x-4', 'data-[state=checked]:translate-x-14')
+            })
+        ]
+    });
+};
+SwitchControl.displayName = 'SwitchControl';
+export { SwitchControl };

package/dist/components/Switch/SwitchDescription.d.ts

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

package/dist/components/Switch/SwitchDescription.js

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

package/dist/components/Switch/SwitchLabel.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import { Switch as ArkUiSwitch } from '@ark-ui/react/switch';
+export type SwitchLabelProps = Omit<ArkUiSwitch.LabelProps, 'className'>;
+export declare const SwitchLabel: FC<SwitchLabelProps>;

package/dist/components/Switch/SwitchLabel.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { Switch } from "@ark-ui/react/switch";
+import { cn } from "../../utils/cn.js";
+const SwitchLabel = (props)=>/*#__PURE__*/ jsx(Switch.Label, {
+        ...props,
+        className: cn('flex items-center gap-4', 'font-sans text-sm font-normal text-text-primary')
+    });
+SwitchLabel.displayName = 'SwitchLabel';
+export { SwitchLabel };

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

@@ -0,0 +1,5 @@
+export { Switch, type SwitchProps } from './Switch';
+export { SwitchContext, type SwitchContextValue } from './SwitchContext';
+export { SwitchControl } from './SwitchControl';
+export { SwitchDescription, type SwitchDescriptionProps, } from './SwitchDescription';
+export { SwitchLabel, type SwitchLabelProps } from './SwitchLabel';

package/dist/components/Switch/index.js

@@ -0,0 +1,6 @@
+import { Switch } from "./Switch.js";
+import { SwitchContext } from "./SwitchContext.js";
+import { SwitchControl } from "./SwitchControl.js";
+import { SwitchDescription } from "./SwitchDescription.js";
+import { SwitchLabel } from "./SwitchLabel.js";
+export { Switch, SwitchContext, SwitchControl, SwitchDescription, SwitchLabel };

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,15 @@
+import type { FC, ReactNode } from 'react';
+import type { TabsSize, TabsVariant } from './types';
+interface TabsProps {
+    children: ReactNode;
+    size?: TabsSize;
+    variant?: TabsVariant;
+    value?: string;
+    defaultValue?: string;
+    lazyMount?: boolean;
+    unmountOnExit?: boolean;
+    asChild?: boolean;
+    onChange?: (value: string) => void;
+}
+export declare const Tabs: FC<TabsProps>;
+export {};

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,27 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { Tabs } from "@ark-ui/react/tabs";
+import { cn } from "../../utils/cn.js";
+import { TabsSharedContextProvider } from "./TabsSharedContext/index.js";
+const Tabs_Tabs = ({ children, value, defaultValue, onChange, size, variant, lazyMount = true, unmountOnExit = true, asChild = false })=>{
+    const handleChange = ({ value })=>{
+        onChange?.(value);
+    };
+    return /*#__PURE__*/ jsx(TabsSharedContextProvider, {
+        size: size,
+        variant: variant,
+        children: /*#__PURE__*/ jsx(Tabs.Root, {
+            className: cn('relative'),
+            value: value,
+            defaultValue: defaultValue,
+            onValueChange: handleChange,
+            lazyMount: lazyMount,
+            unmountOnExit: unmountOnExit,
+            asChild: asChild,
+            children: asChild ? /*#__PURE__*/ jsx(Fragment, {
+                children: children
+            }) : children
+        })
+    });
+};
+Tabs_Tabs.displayName = 'Tabs';
+export { Tabs_Tabs as Tabs };

package/dist/components/Tabs/TabsButton.d.ts

@@ -0,0 +1,14 @@
+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 interface TabsButtonProps extends ButtonBaseProps {
+    size?: 'small' | 'medium';
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare const TabsButton: FC<TabsButtonProps>;