@wallarm-org/design-system 0.1.0

package/dist/components/InputGroup/InputGroupAddon.js

@@ -0,0 +1,70 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const inputGroupAddonVariants = cva(cn([
+    'flex items-center justify-center h-full gap-2 py-8',
+    'text-sm font-sans',
+    'select-none group-data-[disabled=true]/input-group:opacity-50',
+    "[&>svg]:text-icon-secondary [&>svg:not([class*='size-'])]:size-16",
+    'has-[>[data-scope=select]]:p-0',
+    '[&>[data-scope=select]]:[&>[data-part=control]]:[&>[data-part=trigger]]:bg-transparent',
+    '[&>[data-scope=select]]:[&>[data-part=control]]:[&>[data-part=trigger]]:border-none',
+    '[&>[data-scope=select]]:[&>[data-part=control]]:[&>[data-part=trigger]]:rounded-none',
+    '[&>[data-scope=select]]:[&>[data-part=control]]:[&>[data-part=trigger]]:shadow-none',
+    '[&>[data-scope=select]]:[&>[data-part=control]]:[&>[data-part=trigger]]:ring-0'
+]), {
+    variants: {
+        align: {
+            'inline-start': 'order-first pl-12 has-[>kbd]:pl-8',
+            'inline-end': 'order-last pr-12 has-[>kbd]:pr-8'
+        },
+        variant: {
+            outline: 'px-12 bg-states-primary-default-alt border-border-primary',
+            ghost: '[&:not(:has([data-scope=select]))+input]:px-0'
+        }
+    },
+    defaultVariants: {
+        align: 'inline-start'
+    },
+    compoundVariants: [
+        {
+            variant: 'outline',
+            align: 'inline-start',
+            className: 'border-r-1'
+        },
+        {
+            variant: 'outline',
+            align: 'inline-end',
+            className: 'border-l-1'
+        },
+        {
+            variant: 'ghost',
+            align: 'inline-start',
+            className: 'pr-8'
+        },
+        {
+            variant: 'ghost',
+            align: 'inline-end',
+            className: 'pl-8'
+        }
+    ]
+});
+const InputGroupAddon = ({ align = 'inline-start', variant = 'ghost', ...props })=>{
+    const handleClick = (event)=>{
+        if (event.target.closest('button')) return;
+        event.currentTarget.parentElement?.querySelector('input')?.focus();
+    };
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        role: "group",
+        "data-slot": "input-group-addon",
+        "data-align": align,
+        className: cn(inputGroupAddonVariants({
+            align,
+            variant
+        })),
+        onClick: handleClick
+    });
+};
+InputGroupAddon.displayName = 'InputGroupAddon';
+export { InputGroupAddon };

package/dist/components/InputGroup/InputGroupInput.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import { type InputProps } from '../Input';
+export type InputGroupInputProps = InputProps;
+export declare const InputGroupInput: FC<InputGroupInputProps>;

package/dist/components/InputGroup/InputGroupInput.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { Input } from "../Input/index.js";
+const InputGroupInput = (props)=>/*#__PURE__*/ jsx(Input, {
+        ...props,
+        className: cn('flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0'),
+        "data-slot": "input-group-control"
+    });
+InputGroupInput.displayName = 'InputGroupInput';
+export { InputGroupInput };

package/dist/components/InputGroup/InputGroupText.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+import { type TextProps } from '../Text';
+type InputGroupTextProps = Omit<TextProps, 'color' | 'size'>;
+export declare const InputGroupText: FC<InputGroupTextProps>;
+export {};

package/dist/components/InputGroup/InputGroupText.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { Text } from "../Text/index.js";
+const InputGroupText = (props)=>/*#__PURE__*/ jsx(Text, {
+        ...props,
+        color: "secondary",
+        size: "sm"
+    });
+InputGroupText.displayName = 'InputGroupText';
+export { InputGroupText };

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

@@ -0,0 +1,4 @@
+export { InputGroup } from './InputGroup';
+export { InputGroupAddon } from './InputGroupAddon';
+export { InputGroupInput } from './InputGroupInput';
+export { InputGroupText } from './InputGroupText';

package/dist/components/InputGroup/index.js

@@ -0,0 +1,5 @@
+import { InputGroup } from "./InputGroup.js";
+import { InputGroupAddon } from "./InputGroupAddon.js";
+import { InputGroupInput } from "./InputGroupInput.js";
+import { InputGroupText } from "./InputGroupText.js";
+export { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText };

package/dist/components/Kbd/Kbd.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps, FC } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const kbdVariants: (props?: ({
+    size?: "small" | "medium" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type KbdVariantsProps = VariantProps<typeof kbdVariants>;
+type KbdProps = ComponentProps<'kbd'> & KbdVariantsProps;
+export declare const Kbd: FC<KbdProps>;
+export {};

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

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

package/dist/components/Kbd/Kbd.figma.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Kbd } from "./Kbd.js";
+const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/wip-components?node-id=94-4053';
+code_connect.connect(Kbd, figmaNodeUrl, {
+    props: {
+        letter: code_connect.boolean('Letter'),
+        size: code_connect["enum"]('Size', {
+            Small: 'small',
+            Medium: 'medium'
+        }),
+        tooltip: code_connect.boolean('Tooltip')
+    },
+    variant: {
+        Letter: true
+    },
+    example: ({ size })=>/*#__PURE__*/ jsx(Kbd, {
+            size: size,
+            children: "K"
+        })
+});

package/dist/components/Kbd/Kbd.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const kbdVariants = cva(cn('inline-flex items-center justify-center gap-1 w-fit', 'border border-component-border-hotkey rounded-4 bg-bg-surface-2', 'font-sans font-medium', 'text-text-primary  text-xs', 'pointer-events-none select-none'), {
+    variants: {
+        size: {
+            small: 'h-20 min-w-20 p-4',
+            medium: 'h-24 min-w-24 p-6'
+        }
+    }
+});
+const Kbd = ({ size = 'small', ...props })=>/*#__PURE__*/ jsx("kbd", {
+        ...props,
+        "data-slot": "kbd",
+        className: cn(kbdVariants({
+            size
+        }))
+    });
+Kbd.displayName = 'Kbd';
+export { Kbd };

package/dist/components/Kbd/KbdGroup.d.ts

@@ -0,0 +1,4 @@
+import type { FC, HTMLAttributes } from 'react';
+type KbdGroupProps = HTMLAttributes<HTMLDivElement>;
+export declare const KbdGroup: FC<KbdGroupProps>;
+export {};

package/dist/components/Kbd/KbdGroup.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+const KbdGroup = (props)=>/*#__PURE__*/ jsx("kbd", {
+        ...props,
+        "data-slot": "kbd-group",
+        className: cn('inline-flex items-center gap-1')
+    });
+KbdGroup.displayName = 'KbdGroup';
+export { KbdGroup };

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

@@ -0,0 +1,2 @@
+export { Kbd } from './Kbd';
+export { KbdGroup } from './KbdGroup';

package/dist/components/Kbd/index.js

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

package/dist/components/Label/Label.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithoutRef, FC, Ref } from 'react';
+import { Root } from '@radix-ui/react-label';
+export type LabelProps = ComponentPropsWithoutRef<typeof Root> & {
+    ref?: Ref<HTMLLabelElement>;
+};
+export declare const Label: FC<LabelProps>;

package/dist/components/Label/Label.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { Root } from "@radix-ui/react-label";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const labelVariants = cva('text-sm font-medium leading-none peer-disabled:cursor-not-allowed');
+const Label = ({ className, ...props })=>/*#__PURE__*/ jsx(Root, {
+        className: cn(labelVariants(), className),
+        ...props
+    });
+export { Label };

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

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

package/dist/components/Label/index.js

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

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,11 @@
+import type { AnchorHTMLAttributes, FC, Ref } from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import { linkVariants } from './classes';
+type LinkNativeProps = AnchorHTMLAttributes<HTMLAnchorElement>;
+type LinkVariantsProps = VariantProps<typeof linkVariants>;
+export type LinkProps = LinkNativeProps & LinkVariantsProps & {
+    ref?: Ref<HTMLAnchorElement>;
+    asChild?: boolean;
+};
+export declare const Link: FC<LinkProps>;
+export {};

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

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

package/dist/components/Link/Link.figma.js

@@ -0,0 +1,125 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { SquareArrowOutUpRight } from "../../icons/index.js";
+import { Link } from "./Link.js";
+const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/wip-components?node-id=949-2830';
+code_connect.connect(Link, figmaNodeUrl, {
+    props: {
+        type: code_connect["enum"]('Type', {
+            Default: 'default',
+            Alt: 'alt',
+            Muted: 'muted'
+        }),
+        size: code_connect["enum"]('Size', {
+            xs: 'xs',
+            sm: 'sm',
+            md: 'md',
+            lg: 'lg',
+            xl: 'xl'
+        }),
+        medium: code_connect.boolean('Medium'),
+        label: code_connect.string('Label'),
+        newTab: code_connect.boolean('New tab'),
+        rightIcon: code_connect.boolean('Right icon'),
+        rightIconComponent: code_connect.instance('r-ic')
+    },
+    example: ({ type, size, label })=>/*#__PURE__*/ jsx(Link, {
+            type: type,
+            size: size,
+            children: label
+        })
+});
+code_connect.connect(Link, figmaNodeUrl, {
+    props: {
+        type: code_connect["enum"]('Type', {
+            Default: 'default',
+            Alt: 'alt',
+            Muted: 'muted'
+        }),
+        size: code_connect["enum"]('Size', {
+            xs: 'xs',
+            sm: 'sm',
+            md: 'md',
+            lg: 'lg',
+            xl: 'xl'
+        }),
+        medium: code_connect.boolean('Medium'),
+        label: code_connect.string('Label'),
+        newTab: code_connect.boolean('New tab'),
+        rightIcon: code_connect.boolean('Right icon'),
+        rightIconComponent: code_connect.instance('r-ic')
+    },
+    variant: {
+        Medium: true
+    },
+    example: ({ type, size, label })=>/*#__PURE__*/ jsx(Link, {
+            type: type,
+            size: size,
+            weight: "medium",
+            children: label
+        })
+});
+code_connect.connect(Link, figmaNodeUrl, {
+    props: {
+        type: code_connect["enum"]('Type', {
+            Default: 'default',
+            Alt: 'alt',
+            Muted: 'muted'
+        }),
+        size: code_connect["enum"]('Size', {
+            xs: 'xs',
+            sm: 'sm',
+            md: 'md',
+            lg: 'lg',
+            xl: 'xl'
+        }),
+        medium: code_connect.boolean('Medium'),
+        label: code_connect.string('Label'),
+        newTab: code_connect.boolean('New tab'),
+        rightIcon: code_connect.boolean('Right icon'),
+        rightIconComponent: code_connect.instance('r-ic')
+    },
+    variant: {
+        'New tab': true
+    },
+    example: ({ type, size, label })=>/*#__PURE__*/ jsxs(Link, {
+            type: type,
+            size: size,
+            children: [
+                label,
+                /*#__PURE__*/ jsx(SquareArrowOutUpRight, {})
+            ]
+        })
+});
+code_connect.connect(Link, figmaNodeUrl, {
+    props: {
+        type: code_connect["enum"]('Type', {
+            Default: 'default',
+            Alt: 'alt',
+            Muted: 'muted'
+        }),
+        size: code_connect["enum"]('Size', {
+            xs: 'xs',
+            sm: 'sm',
+            md: 'md',
+            lg: 'lg',
+            xl: 'xl'
+        }),
+        medium: code_connect.boolean('Medium'),
+        label: code_connect.string('Label'),
+        newTab: code_connect.boolean('New tab'),
+        rightIcon: code_connect.boolean('Right icon'),
+        rightIconComponent: code_connect.instance('r-ic')
+    },
+    variant: {
+        'Right icon': true
+    },
+    example: ({ type, size, label, rightIconComponent })=>/*#__PURE__*/ jsxs(Link, {
+            type: type,
+            size: size,
+            children: [
+                label,
+                rightIconComponent
+            ]
+        })
+});

package/dist/components/Link/Link.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../utils/cn.js";
+import { linkVariants } from "./classes.js";
+const Link = ({ asChild = false, type = 'default', size = 'lg', weight = 'regular', ...props })=>{
+    const Comp = asChild ? Slot : 'a';
+    return /*#__PURE__*/ jsx(Comp, {
+        ...props,
+        className: cn(linkVariants({
+            type,
+            size,
+            weight
+        }))
+    });
+};
+export { Link };

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

@@ -0,0 +1,5 @@
+export declare const linkVariants: (props?: ({
+    type?: "alt" | "default" | "muted" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    weight?: "regular" | "medium" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/Link/classes.js

@@ -0,0 +1,22 @@
+import { cva } from "class-variance-authority";
+const linkVariants = cva('inline-flex items-center gap-4 font-sans transition-colors underline decoration-transparent hover:decoration-current active:decoration-current outline-none [&_svg]:pointer-events-none [&_svg]:icon-md [&_svg]:shrink-0 cursor-pointer', {
+    variants: {
+        type: {
+            default: 'text-text-link-default hover:text-text-link-hover active:text-link-default',
+            alt: 'text-text-link-default-alt hover:text-text-link-hover-alt active:text-link-default-alt',
+            muted: 'text-text-secondary hover:text-text-link-hover active:text-link-default'
+        },
+        size: {
+            xs: 'text-2xs',
+            sm: 'text-xs',
+            md: 'text-sm',
+            lg: 'text-base',
+            xl: 'text-lg leading-xl'
+        },
+        weight: {
+            regular: 'font-normal',
+            medium: 'font-medium'
+        }
+    }
+});
+export { linkVariants };

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

@@ -0,0 +1,2 @@
+export { linkVariants } from './classes';
+export { Link, type LinkProps } from './Link';

package/dist/components/Link/index.js

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

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

@@ -0,0 +1,15 @@
+import type { FC } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const loaderVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
+    color?: "primary" | "primary-alt" | "danger" | "primary-alt-fixed" | "brand" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type LoaderType = 'circle' | 'sonner';
+type LoaderVariantsProps = VariantProps<typeof loaderVariants>;
+interface LoaderBaseProps {
+    type?: LoaderType;
+    background?: boolean;
+}
+export type LoaderProps = LoaderBaseProps & LoaderVariantsProps;
+export declare const Loader: FC<LoaderProps>;
+export {};

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

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

package/dist/components/Loader/Loader.figma.js

@@ -0,0 +1,64 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Loader } from "./Loader.js";
+const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/wip-components?node-id=856-394';
+code_connect.connect(Loader, figmaNodeUrl, {
+    props: {
+        type: code_connect["enum"]('Type', {
+            Circle: 'circle',
+            Sonner: 'sonner'
+        }),
+        size: code_connect["enum"]('Size', {
+            sm: 'sm',
+            md: 'md',
+            lg: 'lg',
+            xl: 'xl',
+            '2xl': '2xl',
+            '3xl': '3xl'
+        }),
+        color: code_connect["enum"]('Style', {
+            Primary: 'primary',
+            'Primary-alt': 'primary-alt',
+            Brand: 'brand',
+            Destructive: 'danger'
+        })
+    },
+    example: ({ type, color, size })=>/*#__PURE__*/ jsx(Loader, {
+            type: type,
+            size: size,
+            color: color
+        })
+});
+code_connect.connect(Loader, figmaNodeUrl, {
+    props: {
+        type: code_connect["enum"]('Type', {
+            Circle: 'circle',
+            Sonner: 'sonner'
+        }),
+        size: code_connect["enum"]('Size', {
+            sm: 'sm',
+            md: 'md',
+            lg: 'lg',
+            xl: 'xl',
+            '2xl': '2xl',
+            '3xl': '3xl'
+        }),
+        color: code_connect["enum"]('Style', {
+            Primary: 'primary',
+            'Primary-alt': 'primary-alt',
+            Brand: 'brand',
+            Destructive: 'danger'
+        }),
+        background: code_connect.boolean('Background')
+    },
+    variant: {
+        Type: 'Circle',
+        Background: false
+    },
+    example: ({ type, color, size })=>/*#__PURE__*/ jsx(Loader, {
+            type: type,
+            size: size,
+            color: color,
+            background: false
+        })
+});

package/dist/components/Loader/Loader.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+import { LoaderCircle } from "./LoaderCircle.js";
+import { LoaderSonner } from "./LoaderSonner.js";
+const loaderVariants = cva('animate-spin', {
+    variants: {
+        size: {
+            sm: 'size-12',
+            md: 'size-16',
+            lg: 'size-20',
+            xl: 'size-24',
+            '2xl': 'size-32',
+            '3xl': 'size-48'
+        },
+        color: {
+            primary: 'text-icon-primary',
+            'primary-alt': 'text-icon-primary-alt',
+            'primary-alt-fixed': 'text-icon-primary-alt-fixed',
+            brand: 'text-icon-brand',
+            danger: 'text-icon-danger'
+        }
+    }
+});
+const Loader = ({ type = 'circle', size = 'xl', color, background = true })=>{
+    const className = cn(loaderVariants({
+        size,
+        color
+    }));
+    if ('sonner' === type) return /*#__PURE__*/ jsx(LoaderSonner, {
+        className: className,
+        "data-role": "spinner"
+    });
+    return /*#__PURE__*/ jsx(LoaderCircle, {
+        className: className,
+        background: background,
+        "data-role": "spinner"
+    });
+};
+Loader.displayName = 'Loader';
+export { Loader };

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

@@ -0,0 +1,6 @@
+import type { FC, SVGProps } from 'react';
+type LoaderCircleProps = SVGProps<SVGSVGElement> & {
+    background: boolean;
+};
+export declare const LoaderCircle: FC<LoaderCircleProps>;
+export {};

package/dist/components/Loader/LoaderCircle.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const LoaderCircle = ({ background = true, ...props })=>/*#__PURE__*/ jsxs("svg", {
+        ...props,
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48",
+        fill: "currentColor",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                d: "M42 21.9992C43.1046 21.9992 44.0001 22.8965 44 24.0011C43.9996 28.2242 42.662 32.3385 40.1797 35.755C37.697 39.1718 34.1965 41.7156 30.1797 43.0206C26.1629 44.3256 21.8351 44.3259 17.8184 43.0206C13.8021 41.7154 10.3026 39.1714 7.82031 35.755C5.33787 32.3381 4 28.2226 4 23.9992C4.00003 19.7756 5.33779 15.6602 7.82031 12.2433C10.3028 8.8266 13.8037 6.28279 17.8203 4.97767C21.8368 3.67281 26.1632 3.67281 30.1797 4.97767C31.2299 5.31887 31.8055 6.44696 31.4648 7.4972C31.1235 8.54771 29.9939 9.12367 28.9434 8.78235C25.73 7.73847 22.268 7.73827 19.0547 8.78235C15.8417 9.82654 13.0425 11.8617 11.0566 14.5949C9.07062 17.3284 8.00002 20.6203 8 23.9992C8 27.3777 9.06895 30.67 11.0547 33.4034C13.0405 36.1368 15.8415 38.1717 19.0547 39.216C22.268 40.2601 25.73 40.2599 28.9434 39.216C32.1568 38.1719 34.9572 36.1369 36.9434 33.4034C38.9294 30.6701 39.9998 27.3779 40 23.9992C40.0005 22.895 40.8957 21.9991 42 21.9992Z"
+            }),
+            background && /*#__PURE__*/ jsx("path", {
+                opacity: "0.2",
+                d: "M6 25.9993C4.89543 25.9992 3.99995 25.1019 4 23.9973C4.00041 19.7742 5.33795 15.6599 7.82032 12.2434C10.303 8.8266 13.8035 6.28278 17.8203 4.97777C21.8372 3.67279 26.1649 3.67254 30.1816 4.97777C34.1979 6.28299 37.6974 8.82696 40.1797 12.2434C42.6621 15.6603 44 19.7758 44 23.9993C44 28.2228 42.6622 32.3382 40.1797 35.7551C37.6972 39.1718 34.1963 41.7156 30.1797 43.0207C26.1632 44.3256 21.8368 44.3256 17.8203 43.0207C16.7701 42.6795 16.1945 41.5515 16.5352 40.5012C16.8765 39.4507 18.0061 38.8747 19.0566 39.2161C22.27 40.2599 25.732 40.2601 28.9453 39.2161C32.1583 38.1719 34.9575 36.1367 36.9434 33.4036C38.9294 30.67 40 27.3781 40 23.9993C40 20.6207 38.9311 17.3284 36.9453 14.595C34.9595 11.8616 32.1585 9.82671 28.9453 8.78246C25.732 7.7383 22.27 7.73855 19.0566 8.78246C15.8432 9.82647 13.0428 11.8615 11.0566 14.595C9.07064 17.3284 8.00017 20.6205 8 23.9993C7.99952 25.1034 7.10426 25.9993 6 25.9993Z"
+            })
+        ]
+    });
+export { LoaderCircle };

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

@@ -0,0 +1,4 @@
+import type { FC, SVGProps } from 'react';
+type LoaderSonnerProps = SVGProps<SVGSVGElement>;
+export declare const LoaderSonner: FC<LoaderSonnerProps>;
+export {};

package/dist/components/Loader/LoaderSonner.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const LoaderSonner = (props)=>/*#__PURE__*/ jsxs("svg", {
+        ...props,
+        width: "48",
+        height: "48",
+        viewBox: "0 0 48 48",
+        fill: "currentColor",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                opacity: "0.1",
+                d: "M22.4039 12V6.00002C22.4039 5.11858 23.1186 4.40393 24 4.40393C24.8815 4.40393 25.5961 5.11858 25.5961 6.00002V12C25.5961 12.8815 24.8815 13.5961 24 13.5961C23.1186 13.5961 22.4039 12.8815 22.4039 12Z"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                opacity: "0.2",
+                d: "M14.2031 7.0292C14.9663 6.58938 15.9423 6.85216 16.3828 7.61514L19.3828 12.8089C19.8236 13.5722 19.5602 14.5502 18.7969 14.9909C18.0337 15.4307 17.0577 15.1679 16.6172 14.405L13.6172 9.20889C13.1774 8.4457 13.4402 7.46971 14.2031 7.0292Z"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                opacity: "0.3",
+                d: "M7.0292 14.2031C7.46971 13.4402 8.4457 13.1774 9.20889 13.6172L14.405 16.6172C15.1679 17.0577 15.4307 18.0337 14.9909 18.7969C14.5502 19.5602 13.5722 19.8236 12.8089 19.3828L7.61514 16.3828C6.85216 15.9423 6.58938 14.9663 7.0292 14.2031Z"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                opacity: "0.4",
+                d: "M12 22.4039C12.8815 22.4039 13.5961 23.1186 13.5961 24C13.5961 24.8815 12.8815 25.5961 12 25.5961H6.00002C5.11858 25.5961 4.40393 24.8815 4.40393 24C4.40393 23.1186 5.11858 22.4039 6.00002 22.4039H12Z"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                opacity: "0.5",
+                d: "M12.8089 28.6172C13.5722 28.1765 14.5502 28.4398 14.9909 29.2031C15.4307 29.9663 15.1679 30.9423 14.405 31.3828L9.20889 34.3828C8.4457 34.8227 7.46971 34.5599 7.0292 33.7969C6.58938 33.0337 6.85216 32.0577 7.61514 31.6172L12.8089 28.6172Z"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                opacity: "0.55",
+                d: "M16.6172 33.5951C17.0577 32.8321 18.0337 32.5694 18.7969 33.0092C19.5599 33.4497 19.8227 34.4257 19.3828 35.1889L16.3828 40.385C15.9423 41.1479 14.9663 41.4107 14.2031 40.9709C13.4398 40.5302 13.1765 39.5522 13.6172 38.7889L16.6172 33.5951Z"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                opacity: "0.6",
+                d: "M22.4039 42V36C22.4039 35.1186 23.1186 34.4039 24 34.4039C24.8815 34.4039 25.5961 35.1186 25.5961 36V42C25.5961 42.8815 24.8815 43.5961 24 43.5961C23.1186 43.5961 22.4039 42.8815 22.4039 42Z"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                opacity: "0.65",
+                d: "M29.2031 33.0092C29.9663 32.5694 30.9423 32.8321 31.3828 33.5951L34.3828 38.7889C34.8236 39.5522 34.5602 40.5302 33.7969 40.9709C33.0337 41.4107 32.0577 41.1479 31.6172 40.385L28.6172 35.1889C28.1774 34.4257 28.4402 33.4497 29.2031 33.0092Z"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                opacity: "0.7",
+                d: "M33.0092 29.2031C33.4497 28.4402 34.4257 28.1774 35.1889 28.6172L40.385 31.6172C41.1479 32.0577 41.4107 33.0337 40.9709 33.7969C40.5302 34.5602 39.5522 34.8236 38.7889 34.3828L33.5951 31.3828C32.8321 30.9423 32.5694 29.9663 33.0092 29.2031Z"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                opacity: "0.8",
+                d: "M42 22.4039C42.8815 22.4039 43.5961 23.1186 43.5961 24C43.5961 24.8815 42.8815 25.5961 42 25.5961H36C35.1186 25.5961 34.4039 24.8815 34.4039 24C34.4039 23.1186 35.1186 22.4039 36 22.4039H42Z"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                opacity: "0.9",
+                d: "M38.7914 13.6176C39.5546 13.1778 40.5306 13.4405 40.9711 14.2035C41.4109 14.9667 41.1481 15.9427 40.3851 16.3832L35.189 19.3832C34.4258 19.823 33.4498 19.5602 33.0094 18.7973C32.5694 18.0341 32.8323 17.0581 33.5953 16.6176L38.7914 13.6176Z"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                d: "M31.6172 7.61465C32.0577 6.85167 33.0337 6.58889 33.7969 7.02871C34.5598 7.46922 34.8226 8.44521 34.3828 9.2084L31.3828 14.4068C30.9421 15.1694 29.9661 15.4302 29.2031 14.9904C28.4401 14.5499 28.1773 13.5739 28.6172 12.8107L31.6172 7.61465Z"
+            })
+        ]
+    });
+export { LoaderSonner };