@wallarm-org/design-system 0.1.0

package/dist/components/Breadcrumbs/BreadcrumbsSeparator.d.ts

@@ -0,0 +1,23 @@
+import type { FC, HTMLAttributes, ReactNode, Ref } from 'react';
+export type BreadcrumbsSeparatorProps = HTMLAttributes<HTMLLIElement> & {
+    ref?: Ref<HTMLLIElement>;
+    /** Additional CSS classes */
+    className?: string;
+    /** Custom separator icon (defaults to ChevronRight) */
+    children?: ReactNode;
+};
+/**
+ * Separator component for breadcrumbs.
+ *
+ * Shows a visual separator (typically a chevron) between breadcrumb items
+ * to indicate hierarchy direction.
+ *
+ * @example
+ * ```tsx
+ * <BreadcrumbsSeparator />
+ * <BreadcrumbsSeparator>
+ *   <CustomIcon />
+ * </BreadcrumbsSeparator>
+ * ```
+ */
+export declare const BreadcrumbsSeparator: FC<BreadcrumbsSeparatorProps>;

package/dist/components/Breadcrumbs/BreadcrumbsSeparator.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { ChevronRight } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+const BreadcrumbsSeparator = ({ className, children, ...props })=>/*#__PURE__*/ jsx("li", {
+        className: cn('flex items-center justify-center w-20 h-20', className),
+        "aria-hidden": "true",
+        ...props,
+        children: children || /*#__PURE__*/ jsx(ChevronRight, {
+            size: "md",
+            className: "text-icon-secondary"
+        })
+    });
+BreadcrumbsSeparator.displayName = 'BreadcrumbsSeparator';
+export { BreadcrumbsSeparator };

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

@@ -0,0 +1,4 @@
+export { Breadcrumbs, type BreadcrumbsProps } from './Breadcrumbs';
+export { BreadcrumbsEllipsis, type BreadcrumbsEllipsisProps, } from './BreadcrumbsEllipsis';
+export { BreadcrumbsItem, type BreadcrumbsItemProps } from './BreadcrumbsItem';
+export { BreadcrumbsSeparator, type BreadcrumbsSeparatorProps, } from './BreadcrumbsSeparator';

package/dist/components/Breadcrumbs/index.js

@@ -0,0 +1,5 @@
+import { Breadcrumbs } from "./Breadcrumbs.js";
+import { BreadcrumbsEllipsis } from "./BreadcrumbsEllipsis.js";
+import { BreadcrumbsItem } from "./BreadcrumbsItem.js";
+import { BreadcrumbsSeparator } from "./BreadcrumbsSeparator.js";
+export { Breadcrumbs, BreadcrumbsEllipsis, BreadcrumbsItem, BreadcrumbsSeparator };

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,11 @@
+import type { ElementType, FC } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { type ButtonBaseProps } from '../ButtonBase';
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "outline" | "ghost" | null | undefined;
+    color?: "destructive" | "brand" | "neutral" | "neutral-alt" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ButtonVariantProps = VariantProps<typeof buttonVariants>;
+export type ButtonProps<C extends ElementType = 'button'> = ButtonBaseProps<C> & ButtonVariantProps;
+export declare const Button: FC<ButtonProps<ElementType>>;
+export {};

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

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

package/dist/components/Button/Button.figma.js

@@ -0,0 +1,276 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Button } from "./Button.js";
+const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/wip-components?node-id=36%3A2305';
+code_connect.connect(Button, figmaNodeUrl, {
+    props: {
+        children: code_connect.string('Name'),
+        leftElement: code_connect.boolean('Left element'),
+        leftIcon: code_connect.instance('l-ic'),
+        rightElement: code_connect.boolean('Right element'),
+        rightIcon: code_connect.instance('r-ic'),
+        size: code_connect["enum"]('Size', {
+            Small: 'small',
+            Medium: 'medium',
+            Large: 'large'
+        }),
+        loading: code_connect["enum"]('State', {
+            Loading: true
+        }),
+        disabled: code_connect["enum"]('State', {
+            Disabled: true
+        }),
+        color: code_connect["enum"]('Color', {
+            Brand: 'brand',
+            Neutral: 'neutral',
+            Destructive: 'destructive'
+        }),
+        variant: code_connect["enum"]('Type', {
+            Primary: 'primary',
+            Outline: 'outline',
+            Ghost: 'ghost',
+            Secondary: 'secondary'
+        }),
+        iconOnly: code_connect.boolean('Icon only')
+    },
+    example: (props)=>/*#__PURE__*/ jsx(Button, {
+            variant: props.variant,
+            color: props.color,
+            size: props.size,
+            loading: props.loading,
+            disabled: props.disabled,
+            children: props.children
+        })
+});
+code_connect.connect(Button, figmaNodeUrl, {
+    props: {
+        children: code_connect.string('Name'),
+        leftElement: code_connect.boolean('Left element'),
+        leftIcon: code_connect.instance('l-ic'),
+        rightElement: code_connect.boolean('Right element'),
+        rightIcon: code_connect.instance('r-ic'),
+        size: code_connect["enum"]('Size', {
+            Small: 'small',
+            Medium: 'medium',
+            Large: 'large'
+        }),
+        loading: code_connect["enum"]('State', {
+            Loading: true
+        }),
+        disabled: code_connect["enum"]('State', {
+            Disabled: true
+        }),
+        color: code_connect["enum"]('Color', {
+            Brand: 'brand',
+            Neutral: 'neutral',
+            Destructive: 'destructive'
+        }),
+        variant: code_connect["enum"]('Type', {
+            Primary: 'primary',
+            Outline: 'outline',
+            Ghost: 'ghost',
+            Secondary: 'secondary'
+        }),
+        iconOnly: code_connect.boolean('Icon only')
+    },
+    variant: {
+        'Icon only': true,
+        'Left element': true
+    },
+    example: (props)=>/*#__PURE__*/ jsx(Button, {
+            variant: props.variant,
+            color: props.color,
+            size: props.size,
+            loading: props.loading,
+            disabled: props.disabled,
+            children: props.leftIcon
+        })
+});
+code_connect.connect(Button, figmaNodeUrl, {
+    props: {
+        children: code_connect.string('Name'),
+        leftElement: code_connect.boolean('Left element'),
+        leftIcon: code_connect.instance('l-ic'),
+        rightElement: code_connect.boolean('Right element'),
+        rightIcon: code_connect.instance('r-ic'),
+        size: code_connect["enum"]('Size', {
+            Small: 'small',
+            Medium: 'medium',
+            Large: 'large'
+        }),
+        loading: code_connect["enum"]('State', {
+            Loading: true
+        }),
+        disabled: code_connect["enum"]('State', {
+            Disabled: true
+        }),
+        color: code_connect["enum"]('Color', {
+            Brand: 'brand',
+            Neutral: 'neutral',
+            Destructive: 'destructive'
+        }),
+        variant: code_connect["enum"]('Type', {
+            Primary: 'primary',
+            Outline: 'outline',
+            Ghost: 'ghost',
+            Secondary: 'secondary'
+        }),
+        iconOnly: code_connect.boolean('Icon only')
+    },
+    variant: {
+        'Left element': true
+    },
+    example: (props)=>/*#__PURE__*/ jsxs(Button, {
+            variant: props.variant,
+            color: props.color,
+            size: props.size,
+            loading: props.loading,
+            disabled: props.disabled,
+            children: [
+                props.leftIcon,
+                props.children
+            ]
+        })
+});
+code_connect.connect(Button, figmaNodeUrl, {
+    props: {
+        children: code_connect.string('Name'),
+        leftElement: code_connect.boolean('Left element'),
+        leftIcon: code_connect.instance('l-ic'),
+        rightElement: code_connect.boolean('Right element'),
+        rightIcon: code_connect.instance('r-ic'),
+        size: code_connect["enum"]('Size', {
+            Small: 'small',
+            Medium: 'medium',
+            Large: 'large'
+        }),
+        loading: code_connect["enum"]('State', {
+            Loading: true
+        }),
+        disabled: code_connect["enum"]('State', {
+            Disabled: true
+        }),
+        color: code_connect["enum"]('Color', {
+            Brand: 'brand',
+            Neutral: 'neutral',
+            Destructive: 'destructive'
+        }),
+        variant: code_connect["enum"]('Type', {
+            Primary: 'primary',
+            Outline: 'outline',
+            Ghost: 'ghost',
+            Secondary: 'secondary'
+        }),
+        iconOnly: code_connect.boolean('Icon only')
+    },
+    variant: {
+        'Right element': true
+    },
+    example: (props)=>/*#__PURE__*/ jsxs(Button, {
+            variant: props.variant,
+            color: props.color,
+            size: props.size,
+            loading: props.loading,
+            disabled: props.disabled,
+            children: [
+                props.children,
+                props.rightIcon
+            ]
+        })
+});
+code_connect.connect(Button, figmaNodeUrl, {
+    props: {
+        children: code_connect.string('Name'),
+        leftElement: code_connect.boolean('Left element'),
+        leftIcon: code_connect.instance('l-ic'),
+        rightElement: code_connect.boolean('Right element'),
+        rightIcon: code_connect.instance('r-ic'),
+        size: code_connect["enum"]('Size', {
+            Small: 'small',
+            Medium: 'medium',
+            Large: 'large'
+        }),
+        loading: code_connect["enum"]('State', {
+            Loading: true
+        }),
+        disabled: code_connect["enum"]('State', {
+            Disabled: true
+        }),
+        color: code_connect["enum"]('Color', {
+            Brand: 'brand',
+            Neutral: 'neutral',
+            Destructive: 'destructive'
+        }),
+        variant: code_connect["enum"]('Type', {
+            Primary: 'primary',
+            Outline: 'outline',
+            Ghost: 'ghost',
+            Secondary: 'secondary'
+        }),
+        iconOnly: code_connect.boolean('Icon only')
+    },
+    variant: {
+        'Left element': true,
+        'Right element': true
+    },
+    example: (props)=>/*#__PURE__*/ jsxs(Button, {
+            variant: props.variant,
+            color: props.color,
+            size: props.size,
+            loading: props.loading,
+            disabled: props.disabled,
+            children: [
+                props.leftIcon,
+                props.children,
+                props.rightIcon
+            ]
+        })
+});
+code_connect.connect(Button, figmaNodeUrl, {
+    props: {
+        children: code_connect.string('Name'),
+        leftElement: code_connect.boolean('Left element'),
+        leftIcon: code_connect.instance('l-ic'),
+        rightElement: code_connect.boolean('Right element'),
+        rightIcon: code_connect.instance('r-ic'),
+        size: code_connect["enum"]('Size', {
+            Small: 'small',
+            Medium: 'medium',
+            Large: 'large'
+        }),
+        loading: code_connect["enum"]('State', {
+            Loading: true
+        }),
+        disabled: code_connect["enum"]('State', {
+            Disabled: true
+        }),
+        color: code_connect["enum"]('Color', {
+            Brand: 'brand',
+            Neutral: 'neutral',
+            Destructive: 'destructive'
+        }),
+        variant: code_connect["enum"]('Type', {
+            Primary: 'primary',
+            Outline: 'outline',
+            Ghost: 'ghost',
+            Secondary: 'secondary'
+        }),
+        iconOnly: code_connect.boolean('Icon only'),
+        badge: code_connect.boolean('Badge'),
+        numericBadge: code_connect.children('numeric-badge')
+    },
+    variant: {
+        Badge: true
+    },
+    example: (props)=>/*#__PURE__*/ jsxs(Button, {
+            variant: props.variant,
+            color: props.color,
+            size: props.size,
+            loading: props.loading,
+            disabled: props.disabled,
+            children: [
+                props.children,
+                props.numericBadge
+            ]
+        })
+});

package/dist/components/Button/Button.js

@@ -0,0 +1,105 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+import { ButtonBase } from "../ButtonBase/index.js";
+const buttonVariants = cva('', {
+    variants: {
+        variant: {
+            primary: 'not-focus:shadow-xs',
+            outline: 'not-focus:shadow-xs',
+            ghost: '',
+            secondary: ''
+        },
+        color: {
+            brand: 'focus-visible:ring-focus-brand data-[focus=true]:ring-focus-brand',
+            neutral: 'text-text-primary disabled:opacity-50 focus-visible:ring-focus-primary data-[focus=true]:ring-focus-primary',
+            'neutral-alt': 'text-text-primary-alt disabled:opacity-50 focus-visible:ring-focus-primary data-[focus=true]:ring-focus-primary',
+            destructive: 'focus-visible:ring-focus-destructive data-[focus=true]:ring-focus-destructive'
+        }
+    },
+    compoundVariants: [
+        {
+            color: 'brand',
+            variant: 'primary',
+            className: 'bg-bg-fill-brand text-text-primary-alt overlay hover:not-disabled:overlay-states-on-fill-hover active:not-disabled:overlay-states-on-fill-pressed disabled:overlay-states-on-fill-disabled'
+        },
+        {
+            color: 'brand',
+            variant: 'ghost',
+            className: 'bg-transparent text-text-brand hover:not-disabled:bg-states-brand-hover active:not-disabled:bg-states-brand-pressed disabled:bg-states-brand-default-alt disabled:opacity-50'
+        },
+        {
+            color: 'brand',
+            variant: 'secondary',
+            className: 'bg-states-brand-default-alt text-text-brand hover:not-disabled:bg-states-brand-hover active:not-disabled:bg-states-brand-pressed disabled:bg-states-brand-default-alt disabled:opacity-50'
+        },
+        {
+            color: 'neutral',
+            variant: 'outline',
+            className: 'border-1 border-border-primary bg-component-outline-button-bg overlay hover:not-disabled:overlay-states-primary-hover active:not-disabled:overlay-states-primary-pressed'
+        },
+        {
+            color: 'neutral',
+            variant: 'ghost',
+            className: 'bg-transparent border-1 border-transparent hover:not-disabled:bg-states-primary-hover active:not-disabled:bg-states-primary-pressed focus-visible:border-border-primary data-[focus=true]:border-border-primary'
+        },
+        {
+            color: 'neutral',
+            variant: 'secondary',
+            className: 'bg-states-primary-default-alt hover:not-disabled:bg-states-primary-hover active:not-disabled:bg-states-primary-pressed'
+        },
+        {
+            color: 'neutral-alt',
+            variant: 'outline',
+            className: 'border-1 border-border-primary bg-component-outline-button-bg overlay hover:overlay-states-primary-alt-hover active:overlay-states-primary-alt-pressed'
+        },
+        {
+            color: 'neutral-alt',
+            variant: 'ghost',
+            className: 'bg-transparent border-1 border-transparent hover:bg-states-primary-alt-hover active:bg-states-primary-alt-pressed focus-visible:border-border-primary data-[focus=true]:border-border-primary'
+        },
+        {
+            color: 'neutral-alt',
+            variant: 'secondary',
+            className: 'bg-states-primary-alt-default-alt hover:bg-states-primary-alt-hover active:bg-states-primary-alt-pressed'
+        },
+        {
+            color: 'destructive',
+            variant: 'primary',
+            className: 'bg-bg-fill-danger text-text-primary-alt overlay hover:not-disabled:overlay-states-on-fill-hover active:not-disabled:overlay-states-on-fill-pressed disabled:overlay-states-on-fill-disabled'
+        },
+        {
+            color: 'destructive',
+            variant: 'outline',
+            className: 'border-1 border-border-danger bg-component-outline-button-bg text-text-danger overlay hover:not-disabled:overlay-states-danger-hover active:not-disabled:overlay-states-danger-pressed disabled:opacity-50'
+        },
+        {
+            color: 'destructive',
+            variant: 'ghost',
+            className: 'bg-transparent text-text-danger hover:not-disabled:bg-states-danger-hover active:not-disabled:bg-states-danger-pressed disabled:bg-states-danger-default-alt disabled:opacity-50'
+        },
+        {
+            color: 'destructive',
+            variant: 'secondary',
+            className: 'bg-states-danger-default-alt text-text-danger hover:not-disabled:bg-states-danger-hover active:not-disabled:bg-states-danger-pressed disabled:opacity-50'
+        }
+    ]
+});
+const Button = ({ variant = 'primary', color = 'brand', size = 'large', loading = false, disabled = false, asChild = false, as, ref, className, ...props })=>{
+    const isDisabled = loading || disabled;
+    return /*#__PURE__*/ jsx(ButtonBase, {
+        ...props,
+        ref: ref,
+        as: as,
+        className: cn(buttonVariants({
+            variant,
+            color
+        }), className),
+        size: size,
+        loading: loading,
+        disabled: isDisabled,
+        asChild: asChild
+    });
+};
+Button.displayName = 'Button';
+export { Button };

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

@@ -0,0 +1 @@
+export { Button, type ButtonProps } from './Button';

package/dist/components/Button/index.js

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

package/dist/components/ButtonBase/ButtonBase.d.ts

@@ -0,0 +1,13 @@
+import type { ElementType, FC, Ref } from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import type { PolymorphicComponentProps } from '../Polymorphic';
+import { buttonBaseVariants } from './classes';
+type ButtonBaseVariantProps = Omit<VariantProps<typeof buttonBaseVariants>, 'iconOnly' | 'hasNonTextEnd'>;
+type ButtonBaseBaseProps = {
+    asChild?: boolean;
+    loading?: boolean;
+    ref?: Ref<HTMLElement>;
+};
+export type ButtonBaseProps<C extends ElementType = 'button'> = PolymorphicComponentProps<C, ButtonBaseVariantProps & ButtonBaseBaseProps>;
+export declare const ButtonBase: FC<PolymorphicComponentProps<ElementType, ButtonBaseVariantProps & ButtonBaseBaseProps>>;
+export {};

package/dist/components/ButtonBase/ButtonBase.js

@@ -0,0 +1,40 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../utils/cn.js";
+import { hasNonTextEnd } from "../../utils/hasNonTextEnd.js";
+import { isIconOnly } from "../../utils/isIconOnly.js";
+import { Loader } from "../Loader/index.js";
+import { buttonBaseVariants } from "./classes.js";
+const ButtonBase = ({ as = 'button', size = 'large', loading = false, disabled = false, asChild = false, fullWidth = false, children, className, ref, ...props })=>{
+    const Comp = asChild ? Slot : as;
+    const isDisabled = loading || disabled || false;
+    return /*#__PURE__*/ jsx(Comp, {
+        className: cn(buttonBaseVariants({
+            size,
+            iconOnly: isIconOnly(children),
+            hasNonTextEnd: hasNonTextEnd(children),
+            fullWidth,
+            loading
+        }), className),
+        ref: ref,
+        disabled: isDisabled,
+        "data-loading": loading ? 'true' : void 0,
+        ...props,
+        children: loading ? /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx("span", {
+                    className: "items-center justify-center opacity-0",
+                    children: children
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: "flex items-center justify-center w-full h-full absolute top-0 right-0 bottom-0 left-0",
+                    children: /*#__PURE__*/ jsx(Loader, {
+                        size: "md"
+                    })
+                })
+            ]
+        }) : children
+    });
+};
+ButtonBase.displayName = 'ButtonBase';
+export { ButtonBase };

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

@@ -0,0 +1,7 @@
+export declare const buttonBaseVariants: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+    iconOnly?: boolean | null | undefined;
+    loading?: boolean | null | undefined;
+    hasNonTextEnd?: boolean | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/ButtonBase/classes.js

@@ -0,0 +1,59 @@
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const buttonBaseVariants = cva(cn('items-center justify-center min-w-0 rounded-8', 'text-sm font-medium font-sans', 'cursor-pointer overflow-hidden transition-[color,border,box-shadow,opacity]', 'focus-visible:outline-none focus-visible:ring-3', 'data-[focus=true]:outline-none data-[focus=true]:ring-3', '[&_svg]:pointer-events-none [&_svg]:icon-md [&_svg]:shrink-0', 'disabled:cursor-not-allowed disabled:[&_*]:pointer-events-none'), {
+    variants: {
+        size: {
+            small: 'h-24 px-8 py-2 gap-4',
+            medium: 'h-32 px-12 py-6 gap-6',
+            large: 'h-36 px-16 py-8 gap-8'
+        },
+        iconOnly: {
+            true: '',
+            false: ''
+        },
+        loading: {
+            true: 'relative'
+        },
+        hasNonTextEnd: {
+            true: '',
+            false: ''
+        },
+        fullWidth: {
+            true: 'flex flex-1 basis-full w-full',
+            false: 'inline-flex'
+        }
+    },
+    compoundVariants: [
+        {
+            iconOnly: true,
+            size: 'small',
+            className: 'w-24 h-24 p-2'
+        },
+        {
+            iconOnly: true,
+            size: 'medium',
+            className: 'w-32 h-32 p-6'
+        },
+        {
+            iconOnly: true,
+            size: 'large',
+            className: 'w-36 h-36 p-8'
+        },
+        {
+            hasNonTextEnd: true,
+            size: 'small',
+            className: 'pr-2'
+        },
+        {
+            hasNonTextEnd: true,
+            size: 'medium',
+            className: 'pr-6'
+        },
+        {
+            hasNonTextEnd: true,
+            size: 'large',
+            className: 'pr-10'
+        }
+    ]
+});
+export { buttonBaseVariants };

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

@@ -0,0 +1,2 @@
+export { ButtonBase, type ButtonBaseProps } from './ButtonBase';
+export { buttonBaseVariants } from './classes';

package/dist/components/ButtonBase/index.js

@@ -0,0 +1,3 @@
+import { ButtonBase } from "./ButtonBase.js";
+import { buttonBaseVariants } from "./classes.js";
+export { ButtonBase, buttonBaseVariants };

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import { Checkbox as ArkUiCheckbox } from '@ark-ui/react/checkbox';
+export type CheckboxProps = Omit<ArkUiCheckbox.RootProps, 'className'>;
+export declare const Checkbox: FC<CheckboxProps>;

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

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