@wallarm-org/design-system 0.1.0

package/dist/components/Field/FieldAction.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../utils/cn.js";
+import { linkVariants } from "../Link/index.js";
+const FieldAction = ({ asChild = false, ...props })=>{
+    const Comp = asChild ? Slot : 'button';
+    return /*#__PURE__*/ jsx(Comp, {
+        ...props,
+        className: cn(linkVariants({
+            type: 'default',
+            weight: 'medium',
+            size: 'sm'
+        }), 'ml-auto hover:decoration-transparent active:decoration-transparent')
+    });
+};
+FieldAction.displayName = 'FieldAction';
+export { FieldAction };

package/dist/components/Field/FieldContent.d.ts

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

package/dist/components/Field/FieldContent.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+const FieldContent = (props)=>/*#__PURE__*/ jsx("div", {
+        ...props,
+        "data-slot": "field-content",
+        className: cn('group/field-content flex flex-1 flex-col gap-4 leading-snug')
+    });
+FieldContent.displayName = 'FieldContent';
+export { FieldContent };

package/dist/components/Field/FieldDescription.d.ts

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

package/dist/components/Field/FieldDescription.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+const FieldDescription = (props)=>/*#__PURE__*/ jsx("p", {
+        ...props,
+        "data-slot": "field-description",
+        className: cn('text-text-secondary text-sm font-normal leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance', 'nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:mb-16')
+    });
+FieldDescription.displayName = "FieldDescription";
+export { FieldDescription };

package/dist/components/Field/FieldError.d.ts

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

package/dist/components/Field/FieldError.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { OctagonAlert } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+import { Text } from "../Text/index.js";
+const FieldError = ({ children, ...props })=>/*#__PURE__*/ jsxs("div", {
+        ...props,
+        role: "alert",
+        "data-slot": "field-error",
+        className: cn('flex gap-4 text-text-danger'),
+        children: [
+            /*#__PURE__*/ jsx(OctagonAlert, {
+                size: "md",
+                className: "self-start my-2"
+            }),
+            /*#__PURE__*/ jsx(Text, {
+                size: "sm",
+                color: "danger",
+                children: children
+            })
+        ]
+    });
+FieldError.displayName = 'FieldError';
+export { FieldError };

package/dist/components/Field/FieldGroup.d.ts

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

package/dist/components/Field/FieldGroup.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+const FieldGroup = ({ ...props })=>/*#__PURE__*/ jsx("div", {
+        ...props,
+        "data-slot": "field-group",
+        className: cn('group/field-group @container/field-group flex w-full flex-col gap-16 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4')
+    });
+FieldGroup.displayName = 'FieldGroup';
+export { FieldGroup };

package/dist/components/Field/FieldIndicator.d.ts

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

package/dist/components/Field/FieldIndicator.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { useFieldContext } from "@ark-ui/react/field";
+import { Text } from "../Text/index.js";
+const FieldIndicator = ()=>{
+    const { required } = useFieldContext();
+    return /*#__PURE__*/ jsx(Text, {
+        size: "sm",
+        color: required ? 'danger' : 'secondary',
+        children: required ? '*' : '(Optional)'
+    });
+};
+export { FieldIndicator };

package/dist/components/Field/FieldLabel.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentProps, FC } from 'react';
+import { Label } from '../Label';
+type LabelProps = ComponentProps<typeof Label>;
+export declare const FieldLabel: FC<LabelProps>;
+export {};

package/dist/components/Field/FieldLabel.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { useFieldContext } from "@ark-ui/react/field";
+import { mergeProps } from "@ark-ui/react/utils";
+import { cn } from "../../utils/cn.js";
+import { Label } from "../Label/index.js";
+const FieldLabel = (props)=>{
+    const field = useFieldContext();
+    const mergedProps = mergeProps(field?.getLabelProps(), props);
+    return /*#__PURE__*/ jsx(Label, {
+        ...props,
+        ...mergedProps,
+        "data-slot": "field-label",
+        className: cn('group/field-label peer/field-label flex w-fit gap-4 leading-snug group-data-[disabled=true]/field:opacity-50', 'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:rounded-8 has-[>[data-slot=field]]:border [&>[data-slot=field]]:p-4')
+    });
+};
+FieldLabel.displayName = 'FieldLabel';
+export { FieldLabel };

package/dist/components/Field/FieldLegend.d.ts

@@ -0,0 +1,8 @@
+import type { FC, HTMLAttributes } from 'react';
+type FieldLegendNativeProps = HTMLAttributes<HTMLLegendElement>;
+interface FieldLegendBaseProps {
+    variant?: 'legend' | 'label';
+}
+type FieldLegendProps = FieldLegendNativeProps & FieldLegendBaseProps;
+export declare const FieldLegend: FC<FieldLegendProps>;
+export {};

package/dist/components/Field/FieldLegend.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+const FieldLegend = ({ variant = 'legend', ...props })=>/*#__PURE__*/ jsx("legend", {
+        ...props,
+        "data-slot": "field-legend",
+        "data-variant": variant,
+        className: cn('font-medium text-text-primary', 'data-[variant=legend]:text-lg', 'data-[variant=label]:text-sm', '[&+[data-slot=field-group]]:mt-16')
+    });
+FieldLegend.displayName = 'FieldLegend';
+export { FieldLegend };

package/dist/components/Field/FieldSeparator.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+import { type SeparatorProps } from '../Separator';
+type FieldSeparatorProps = SeparatorProps;
+export declare const FieldSeparator: FC<FieldSeparatorProps>;
+export {};

package/dist/components/Field/FieldSeparator.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+import { Separator } from "../Separator/index.js";
+const FieldSeparator = (props)=>/*#__PURE__*/ jsx(Separator, {
+        ...props
+    });
+FieldSeparator.displayName = 'FieldSeparator';
+export { FieldSeparator };

package/dist/components/Field/FieldSet.d.ts

@@ -0,0 +1,4 @@
+import type { FC, FieldsetHTMLAttributes } from 'react';
+type FieldSetProps = FieldsetHTMLAttributes<HTMLFieldSetElement>;
+export declare const FieldSet: FC<FieldSetProps>;
+export {};

package/dist/components/Field/FieldSet.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+const FieldSet = ({ className, ...props })=>/*#__PURE__*/ jsx("fieldset", {
+        ...props,
+        "data-slot": "field-set",
+        className: cn('flex flex-col gap-16', 'max-w-full min-w-0', 'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3', className)
+    });
+FieldSet.displayName = 'FieldSet';
+export { FieldSet };

package/dist/components/Field/FieldTitle.d.ts

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

package/dist/components/Field/FieldTitle.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+const FieldTitle = (props)=>/*#__PURE__*/ jsx("div", {
+        ...props,
+        "data-slot": "field-label",
+        className: cn('flex w-fit items-center gap-4 text-sm font-medium leading-snug group-data-[disabled=true]/field:opacity-50')
+    });
+FieldTitle.displayName = 'FieldTitle';
+export { FieldTitle };

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

@@ -0,0 +1,11 @@
+export { Field } from './Field';
+export { FieldContent } from './FieldContent';
+export { FieldDescription } from './FieldDescription';
+export { FieldError } from './FieldError';
+export { FieldGroup } from './FieldGroup';
+export { FieldIndicator } from './FieldIndicator';
+export { FieldLabel } from './FieldLabel';
+export { FieldLegend } from './FieldLegend';
+export { FieldSeparator } from './FieldSeparator';
+export { FieldSet } from './FieldSet';
+export { FieldTitle } from './FieldTitle';

package/dist/components/Field/index.js

@@ -0,0 +1,12 @@
+import { Field } from "./Field.js";
+import { FieldContent } from "./FieldContent.js";
+import { FieldDescription } from "./FieldDescription.js";
+import { FieldError } from "./FieldError.js";
+import { FieldGroup } from "./FieldGroup.js";
+import { FieldIndicator } from "./FieldIndicator.js";
+import { FieldLabel } from "./FieldLabel.js";
+import { FieldLegend } from "./FieldLegend.js";
+import { FieldSeparator } from "./FieldSeparator.js";
+import { FieldSet } from "./FieldSet.js";
+import { FieldTitle } from "./FieldTitle.js";
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldIndicator, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };

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

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

package/dist/components/Field/utils.js

@@ -0,0 +1,7 @@
+import { Children, isValidElement } from "react";
+import { CheckboxGroup } from "../Checkbox/index.js";
+const checkContainCheckboxGroup = (children)=>{
+    const checkboxGroup = Children.toArray(children).find((item)=>isValidElement(item) && item.type === CheckboxGroup);
+    return !!checkboxGroup;
+};
+export { checkContainCheckboxGroup };

package/dist/components/Flex/Flex.d.ts

@@ -0,0 +1,21 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const flexVariants: (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;
+    gap?: 1 | 2 | 4 | 6 | 8 | 12 | 16 | 20 | 32 | 24 | 28 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
+    grow?: boolean | null | undefined;
+    shrink?: boolean | null | undefined;
+    fullWidth?: boolean | null | undefined;
+    basis?: 0 | "auto" | "full" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type FlexNativeProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
+type FlexVariantProps = VariantProps<typeof flexVariants>;
+export type FlexProps = FlexNativeProps & FlexVariantProps & {
+    ref?: Ref<HTMLDivElement>;
+    asChild?: boolean;
+};
+export declare const Flex: FC<FlexProps>;
+export {};

package/dist/components/Flex/Flex.js

@@ -0,0 +1,120 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const flexVariants = cva('flex', {
+    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'
+        },
+        gap: {
+            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'
+        },
+        grow: {
+            true: 'flex-grow',
+            false: 'flex-grow-0'
+        },
+        shrink: {
+            true: 'flex-shrink',
+            false: 'flex-shrink-0'
+        },
+        fullWidth: {
+            true: 'w-full'
+        },
+        basis: {
+            auto: 'basis-auto',
+            full: 'basis-full',
+            '1/2': 'basis-1/2',
+            '1/3': 'basis-1/3',
+            '2/3': 'basis-2/3',
+            '1/4': 'basis-1/4',
+            '2/4': 'basis-2/4',
+            '3/4': 'basis-3/4',
+            '1/5': 'basis-1/5',
+            '2/5': 'basis-2/5',
+            '3/5': 'basis-3/5',
+            '4/5': 'basis-4/5',
+            '1/6': 'basis-1/6',
+            '2/6': 'basis-2/6',
+            '3/6': 'basis-3/6',
+            '4/6': 'basis-4/6',
+            '5/6': 'basis-5/6',
+            '1/12': 'basis-1/12',
+            '2/12': 'basis-2/12',
+            '3/12': 'basis-3/12',
+            '4/12': 'basis-4/12',
+            '5/12': 'basis-5/12',
+            '6/12': 'basis-6/12',
+            '7/12': 'basis-7/12',
+            '8/12': 'basis-8/12',
+            '9/12': 'basis-9/12',
+            '10/12': 'basis-10/12',
+            '11/12': 'basis-11/12',
+            0: 'basis-0'
+        }
+    }
+});
+const Flex = ({ direction = 'row', align = 'stretch', justify = 'start', wrap = 'nowrap', gap, grow, shrink, basis, fullWidth, asChild = false, children, ...props })=>{
+    const Comp = asChild ? Slot : 'div';
+    return /*#__PURE__*/ jsx(Comp, {
+        className: cn(flexVariants({
+            direction,
+            align,
+            justify,
+            wrap,
+            gap,
+            grow,
+            shrink,
+            basis,
+            fullWidth
+        })),
+        ...props,
+        children: children
+    });
+};
+Flex.displayName = 'Flex';
+export { Flex };

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

@@ -0,0 +1 @@
+export { Flex, type FlexProps } from './Flex';

package/dist/components/Flex/index.js

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

package/dist/components/Heading/Heading.d.ts

@@ -0,0 +1,20 @@
+import type { ElementType, FC, Ref } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import type { PolymorphicComponentProps } from '../Polymorphic';
+declare const headingVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | null | undefined;
+    weight?: "bold" | "light" | "regular" | "medium" | null | undefined;
+    color?: "inherit" | "primary" | "primary-alt" | "secondary" | "secondary-alt" | null | undefined;
+    align?: "left" | "center" | "right" | null | undefined;
+    grow?: boolean | null | undefined;
+    truncate?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type HeadingVariantProps = VariantProps<typeof headingVariants>;
+interface HeadingBaseProps {
+    asChild?: boolean;
+    lineClamp?: number;
+    ref?: Ref<HTMLElement>;
+}
+export type HeadingProps<C extends ElementType = 'h1'> = PolymorphicComponentProps<C, HeadingVariantProps & HeadingBaseProps>;
+export declare const Heading: FC<PolymorphicComponentProps<ElementType, HeadingVariantProps & HeadingBaseProps>>;
+export {};

package/dist/components/Heading/Heading.js

@@ -0,0 +1,60 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const headingVariants = cva('font-sans-display text-text-primary tracking-[-0.02em]', {
+    variants: {
+        size: {
+            sm: 'text-sm',
+            md: 'text-base',
+            lg: 'text-lg',
+            xl: 'text-xl',
+            '2xl': 'text-2xl',
+            '3xl': 'text-3xl',
+            '4xl': 'text-4xl',
+            '5xl': 'text-5xl',
+            '6xl': 'text-6xl',
+            '7xl': 'text-7xl'
+        },
+        weight: {
+            light: 'font-light',
+            regular: 'font-normal',
+            medium: 'font-medium',
+            bold: 'font-bold'
+        },
+        color: {
+            primary: 'text-text-primary',
+            'primary-alt': 'text-text-primary-alt',
+            secondary: 'text-text-secondary',
+            'secondary-alt': 'text-text-secondary-alt',
+            inherit: 'text-inherit'
+        },
+        align: {
+            left: 'text-left',
+            center: 'text-center',
+            right: 'text-right'
+        },
+        grow: {
+            true: 'flex-1 w-full'
+        },
+        truncate: {
+            true: 'truncate'
+        }
+    }
+});
+const Heading = ({ as = 'h1', size = 'xl', weight = 'bold', color = 'inherit', asChild = false, truncate = false, grow = false, align, lineClamp, ...props })=>{
+    const Component = asChild ? Slot : as;
+    return /*#__PURE__*/ jsx(Component, {
+        ...props,
+        className: cn(headingVariants({
+            size,
+            weight,
+            truncate,
+            color,
+            align,
+            grow
+        }), lineClamp && `line-clamp-${lineClamp}`)
+    });
+};
+Heading.displayName = 'Heading';
+export { Heading };

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

@@ -0,0 +1 @@
+export { Heading, type HeadingProps } from './Heading';

package/dist/components/Heading/index.js

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

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,10 @@
+import type { FC, InputHTMLAttributes, Ref } from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import { inputVariants } from './classes';
+type InputNativeProps = InputHTMLAttributes<HTMLInputElement>;
+type InputVariantsProps = VariantProps<typeof inputVariants>;
+export type InputProps = InputNativeProps & InputVariantsProps & {
+    ref?: Ref<HTMLInputElement>;
+};
+export declare const Input: FC<InputProps>;
+export {};

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

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

package/dist/components/Input/Input.figma.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Input } from "./Input.js";
+const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/wip-components?node-id=94-1411';
+code_connect.connect(Input, figmaNodeUrl, {
+    props: {
+        error: code_connect.boolean('Error'),
+        placeholder: code_connect.string('Placeholder')
+    },
+    example: ({ placeholder })=>/*#__PURE__*/ jsx(Input, {
+            placeholder: placeholder
+        })
+});
+code_connect.connect(Input, figmaNodeUrl, {
+    props: {
+        error: code_connect.boolean('Error'),
+        placeholder: code_connect.string('Placeholder')
+    },
+    variant: {
+        Error: true
+    },
+    example: ({ placeholder })=>/*#__PURE__*/ jsx(Input, {
+            placeholder: placeholder,
+            error: true
+        })
+});
+code_connect.connect(Input, figmaNodeUrl, {
+    props: {
+        error: code_connect.boolean('Error'),
+        placeholder: code_connect.string('Placeholder'),
+        state: code_connect["enum"]('State', {
+            Disabled: 'disabled'
+        })
+    },
+    variant: {
+        State: 'Disabled'
+    },
+    example: ({ placeholder, error })=>/*#__PURE__*/ jsx(Input, {
+            placeholder: placeholder,
+            error: error,
+            disabled: true
+        })
+});

package/dist/components/Input/Input.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { useFieldContext } from "@ark-ui/react/field";
+import { mergeProps } from "@ark-ui/react/utils";
+import { cn } from "../../utils/cn.js";
+import { inputVariants } from "./classes.js";
+const Input = ({ className, error = false, disabled = false, ...props })=>{
+    const field = useFieldContext();
+    const mergedProps = mergeProps(field?.getInputProps(), props);
+    return /*#__PURE__*/ jsx("input", {
+        ...mergedProps,
+        ...props,
+        className: cn('h-36 py-8', inputVariants({
+            error
+        }), className),
+        disabled: disabled,
+        "aria-invalid": Boolean(error),
+        "aria-disabled": disabled
+    });
+};
+Input.displayName = 'Input';
+export { Input };

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

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

package/dist/components/Input/classes.js

@@ -0,0 +1,19 @@
+import { cva } from "class-variance-authority";
+const inputVariants = cva([
+    'flex w-full px-12 rounded-8 border bg-component-input-bg',
+    'font-sans text-sm text-text-primary placeholder:text-text-secondary',
+    'shadow-xs transition-[color,border,box-shadow]',
+    'focus-visible:outline-none focus-visible:ring-3',
+    'disabled:cursor-not-allowed disabled:opacity-50'
+], {
+    variants: {
+        error: {
+            true: 'border-border-strong-danger hover:not-disabled:border-border-strong-danger hover:not-disabled:outline-none hover:not-disabled:ring-3 hover:not-disabled:ring-focus-destructive-hover focus-visible:ring-focus-destructive',
+            false: [
+                'border-border-primary hover:not-disabled:border-component-border-input-hover',
+                'focus-visible:not-disabled:border-border-strong-primary focus-visible:ring-focus-primary'
+            ]
+        }
+    }
+});
+export { inputVariants };

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

@@ -0,0 +1,2 @@
+export { inputVariants } from './classes';
+export { Input, type InputProps } from './Input';

package/dist/components/Input/index.js

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

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

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

package/dist/components/InputGroup/InputGroup.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+const InputGroup = (props)=>/*#__PURE__*/ jsx("div", {
+        "data-slot": "input-group",
+        role: "group",
+        className: cn('group/input-group', 'w-full h-36 has-[>textarea]:h-auto', 'flex items-center border rounded-8 bg-component-input-bg relative', 'border border-border-primary outline-none shadow-xs transition-[color,border,box-shadow]', 'has-[[data-slot=input-group-control]:not(:disabled):not(:focus-visible)]:hover:border-component-border-input-hover', 'focus-visible:ring-focus-primary', 'has-[[data-slot=input-group-control]:focus-visible]:ring-3', 'has-[[data-slot=input-group-control]:focus-visible]:ring-focus-primary', 'has-[[data-slot=input-group-control]:focus-visible]:border-border-strong-primary', 'has-[[data-slot][aria-invalid=true]]:border-border-strong-danger', 'has-[[data-slot][aria-invalid=true]]:ring-focus-destructive', 'has-[[data-slot][aria-invalid=true]:not(:disabled)]:hover:border-border-strong-danger', 'has-[[data-slot][aria-invalid=true]:not(:disabled)]:hover:ring-3', 'has-[[data-slot][aria-invalid=true]:not(:disabled)]:hover:ring-focus-destructive-hover', 'has-[[data-slot][aria-invalid=true]:not(:disabled)]:[&>input]:hover:ring-0', 'has-[[data-slot=input-group-control]:disabled]:opacity-50', 'has-[[data-slot=input-group-control]:disabled]:cursor-not-allowed'),
+        ...props
+    });
+InputGroup.displayName = 'InputGroup';
+export { InputGroup };

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

@@ -0,0 +1,8 @@
+import type { ComponentProps, FC } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const inputGroupAddonVariants: (props?: ({
+    align?: "inline-start" | "inline-end" | null | undefined;
+    variant?: "outline" | "ghost" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const InputGroupAddon: FC<ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>>;
+export {};