@infonomic/uikit 1.0.0

package/dist/components/dropdown/dropdown_module.css

@@ -0,0 +1,117 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography;
+
+@layer infonomic-components {
+  .dropdown-content-oNxY22, .dropdown-subcontent-JZGnvB {
+    z-index: 20;
+    background-color: var(--canvas-25);
+    will-change: transform, opacity;
+    border-width: var(--border-width-thin);
+    border-color: var(--border-color);
+    border-style: var(--border-style-solid);
+    border-radius: var(--border-radius-md);
+    box-shadow: var(--shadow-sm);
+    padding: 4px;
+    animation-duration: .4s;
+    animation-timing-function: cubic-bezier(.16, 1, .3, 1);
+  }
+
+  :is(.dropdown-content-oNxY22, .dropdown-subcontent-JZGnvB)[data-side="top"] {
+    animation-name: slideDownAndFade-s05SMv;
+  }
+
+  :is(.dropdown-content-oNxY22, .dropdown-subcontent-JZGnvB)[data-side="right"] {
+    animation-name: slideLeftAndFade-Zi7piX;
+  }
+
+  :is(.dropdown-content-oNxY22, .dropdown-subcontent-JZGnvB)[data-side="bottom"] {
+    animation-name: slideUpAndFade-bRhQGn;
+  }
+
+  :is(.dropdown-content-oNxY22, .dropdown-subcontent-JZGnvB)[data-side="left"] {
+    animation-name: slideRightAndFade-pN0UdB;
+  }
+
+  .dropdown-item-FFroRa {
+    align-items: center;
+    gap: var(--gap-1);
+    width: 100%;
+    font-size: var(--font-size-sm);
+    cursor: default;
+    border-radius: var(--border-radius-sm);
+    outline: none;
+    padding: 5px 2px;
+    transition: background-color .2s;
+    display: flex;
+  }
+
+  .dropdown-item-FFroRa:hover, .dropdown-item-FFroRa:focus {
+    background-color: var(--canvas-50);
+  }
+
+  .dropdown-separator-scM_7b {
+    background-color: var(--border-color);
+    width: 90%;
+    margin: 0 auto;
+    margin: var(--spacing-1) 0;
+    border-top-width: var(--border-width-thin);
+    border-top-color: var(--border-color);
+    border-top-style: var(--border-style-solid);
+  }
+
+  .dark .dropdown-content-oNxY22:not(:where([class~="not-dark"], [class~="not-dark"] *)), .dark .dropdown-subcontent-JZGnvB:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    background-color: var(--canvas-800);
+  }
+
+  .dark .dropdown-item-FFroRa:hover:not(:where([class~="not-dark"], [class~="not-dark"] *)), .dark .dropdown-item-FFroRa:focus:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    background-color: var(--canvas-700);
+  }
+
+  @keyframes slideUpAndFade-bRhQGn {
+    from {
+      opacity: 0;
+      transform: translateY(2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideRightAndFade-pN0UdB {
+    from {
+      opacity: 0;
+      transform: translateX(-2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes slideDownAndFade-s05SMv {
+    from {
+      opacity: 0;
+      transform: translateY(-2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes slideLeftAndFade-Zi7piX {
+    from {
+      opacity: 0;
+      transform: translateX(2px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+}
+

package/dist/components/hamburger/hamburger.d.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+interface HamburgerProps {
+    className?: string;
+    color?: string;
+    activeBorderColor?: string;
+    open: boolean;
+    onChange: (event: React.MouseEvent<HTMLButtonElement> | null) => void;
+}
+export declare function Hamburger({ className, color, activeBorderColor, open, onChange, ...other }: HamburgerProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=hamburger.d.ts.map

package/dist/components/hamburger/hamburger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hamburger.d.ts","sourceRoot":"","sources":["../../../src/components/hamburger/hamburger.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,UAAU,cAAc;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,IAAI,EAAE,OAAO,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;CACtE;AAED,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,KAAiD,EACjD,iBAAiB,EACjB,IAAI,EACJ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA2CpC"}

package/dist/components/hamburger/hamburger.js

@@ -0,0 +1,49 @@
+'use client'
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import classnames from "classnames";
+function Hamburger({ className, color = 'bg-white before:bg-white after:bg-white', activeBorderColor, open, onChange, ...other }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const handleClick = (event)=>{
+        setIsOpen(!isOpen);
+        onChange(event);
+    };
+    const handleEscapeKey = useCallback((event)=>{
+        if ('Escape' === event.key) {
+            if (isOpen) {
+                setIsOpen(false);
+                onChange(null);
+            }
+        }
+    }, [
+        isOpen,
+        onChange
+    ]);
+    useEffect(()=>{
+        setIsOpen(open);
+        document.addEventListener('keydown', handleEscapeKey, false);
+        return ()=>{
+            document.removeEventListener('keydown', handleEscapeKey, false);
+        };
+    }, [
+        open,
+        handleEscapeKey
+    ]);
+    return /*#__PURE__*/ jsx("button", {
+        onClick: handleClick,
+        className: classnames(`component--hamburger ${isOpen ? 'is_active' : ''}`, className),
+        tabIndex: 0,
+        "aria-label": "Open main menu",
+        "aria-controls": "main-menu",
+        "aria-haspopup": "true",
+        ...other,
+        children: /*#__PURE__*/ jsx("span", {
+            className: "box",
+            "aria-hidden": "true",
+            children: /*#__PURE__*/ jsx("span", {
+                className: classnames('inner', color)
+            })
+        })
+    });
+}
+export { Hamburger };

package/dist/components/input/@types/checkbox.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { Intent as t } from '../../@types/shared.js';
+/**
+ * This file contains the types and prop-types for Button and IconButton component.
+ */
+export declare const variant: readonly ["outlined", "filled"];
+export type Variant = (typeof variant)[number];
+export declare const size: readonly ["sm", "md", "lg"];
+export type Size = (typeof size)[number];
+export type Intent = 'primary' | t;
+export type ClassName = string;
+export type Children = ReactNode;
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/components/input/@types/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/input/@types/checkbox.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,MAAM,IAAI,CAAC,EAAE,MAAM,wBAAwB,CAAA;AAEzD;;GAEG;AAGH,eAAO,MAAM,OAAO,iCAAkC,CAAA;AACtD,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAA;AAE9C,eAAO,MAAM,IAAI,6BAA8B,CAAA;AAC/C,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAA;AAExC,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,CAAC,CAAA;AAClC,MAAM,MAAM,SAAS,GAAG,MAAM,CAAA;AAC9B,MAAM,MAAM,QAAQ,GAAG,SAAS,CAAA"}

package/dist/components/input/@types/checkbox.js

@@ -0,0 +1,10 @@
+const variant = [
+    'outlined',
+    'filled'
+];
+const size = [
+    'sm',
+    'md',
+    'lg'
+];
+export { size, variant };

package/dist/components/input/@types/input.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import type { Intent as t } from '../../@types/shared.js';
+/**
+ * This file contains the types and prop-types for Button and IconButton component.
+ */
+export declare const variant: readonly ["outlined", "filled", "underlined"];
+export type Variant = (typeof variant)[number];
+export declare const size: readonly ["sm", "md", "lg"];
+export type Size = (typeof size)[number];
+export type Intent = 'primary' | t;
+export type ClassName = string;
+export type Children = ReactNode;
+//# sourceMappingURL=input.d.ts.map

package/dist/components/input/@types/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../../src/components/input/@types/input.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,MAAM,IAAI,CAAC,EAAE,MAAM,wBAAwB,CAAA;AAEzD;;GAEG;AAGH,eAAO,MAAM,OAAO,+CAAgD,CAAA;AACpE,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAA;AAE9C,eAAO,MAAM,IAAI,6BAA8B,CAAA;AAC/C,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAA;AAExC,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,CAAC,CAAA;AAClC,MAAM,MAAM,SAAS,GAAG,MAAM,CAAA;AAC9B,MAAM,MAAM,QAAQ,GAAG,SAAS,CAAA"}

package/dist/components/input/@types/input.js

@@ -0,0 +1,11 @@
+const variant = [
+    'outlined',
+    'filled',
+    'underlined'
+];
+const size = [
+    'sm',
+    'md',
+    'lg'
+];
+export { size, variant };

package/dist/components/input/checkbox-group.d.ts

@@ -0,0 +1,14 @@
+import type React from 'react';
+export interface CheckboxGroupProps {
+    groupName: string;
+    checkBoxes: {
+        id: string;
+        label: string;
+    }[];
+    defaultValues?: string[];
+    controlledValue?: string;
+    disabled?: boolean;
+    onChange?: (selectedRoles: string[]) => void;
+}
+export declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
+//# sourceMappingURL=checkbox-group.d.ts.map

package/dist/components/input/checkbox-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../src/components/input/checkbox-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CAC7C;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6DtD,CAAA"}

package/dist/components/input/checkbox-group.js

@@ -0,0 +1,42 @@
+'use client'
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Checkbox } from "./checkbox.js";
+const CheckboxGroup = ({ groupName, checkBoxes, defaultValues, controlledValue, disabled = false, onChange })=>{
+    let initialValue = [];
+    if (void 0 !== controlledValue && controlledValue.length > 0) initialValue = controlledValue.split(',');
+    else if (void 0 !== defaultValues) initialValue = defaultValues;
+    const [selected, setSelected] = useState(initialValue);
+    useEffect(()=>{
+        if (void 0 !== controlledValue && controlledValue.length > 0) setSelected(controlledValue.split(','));
+        else void 0 !== defaultValues ? setSelected(defaultValues) : setSelected([]);
+    }, [
+        controlledValue,
+        defaultValues
+    ]);
+    const handleCheckboxChange = (id, checked)=>{
+        const s = [
+            ...selected
+        ];
+        if (true === checked) {
+            if (false === s.includes(id)) s.push(id);
+        } else {
+            const index = s.indexOf(id);
+            if (-1 !== index) s.splice(index, 1);
+        }
+        setSelected(s);
+        null == onChange || onChange(s);
+    };
+    return /*#__PURE__*/ jsx("div", {
+        className: "space-y-2",
+        children: checkBoxes.map((cb)=>/*#__PURE__*/ jsx(Checkbox, {
+                id: `${groupName}-${cb.id}`,
+                name: `${groupName}-${cb.id}`,
+                label: cb.label,
+                checked: selected.includes(cb.id),
+                disabled: disabled,
+                onCheckedChange: (checked)=>handleCheckboxChange(cb.id, checked)
+            }, cb.id))
+    });
+};
+export { CheckboxGroup };

package/dist/components/input/checkbox.d.ts

@@ -0,0 +1,23 @@
+import type * as React from 'react';
+import type { Intent, Size, Variant } from './@types/checkbox.js';
+export interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    id: string;
+    name: string;
+    label: string;
+    variant?: Variant;
+    size?: Size;
+    intent?: Intent;
+    reverse?: boolean;
+    checked?: boolean;
+    className?: string;
+    containerClasses?: string;
+    labelClasses?: string;
+    error?: boolean;
+    helpText?: string;
+    errorText?: string;
+    onCheckedChange?: (checked: boolean | 'indeterminate') => void;
+}
+export declare const Checkbox: ({ ref, id, name, label, variant, size, intent, reverse, className, containerClasses, labelClasses, error, helpText, errorText, ...rest }: Props & {
+    ref?: React.RefObject<HTMLButtonElement>;
+}) => React.JSX.Element;
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/components/input/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/input/checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAOnC,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAMjE,MAAM,WAAW,KAAM,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,eAAe,KAAK,IAAI,CAAA;CAC/D;AAED,eAAO,MAAM,QAAQ,GAAqB,0IAgBvC,KAAK,GAAG;IACT,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;CACzC,KAAG,KAAK,CAAC,GAAG,CAAC,OA2Bb,CAAA"}

package/dist/components/input/checkbox.js

@@ -0,0 +1,47 @@
+'use client'
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "@radix-ui/react-icons";
+import classnames from "classnames";
+import { Checkbox as external_radix_ui_Checkbox, Label } from "radix-ui";
+import { ErrorText } from "./error-text.js";
+import { HelpText } from "./help-text.js";
+import checkbox_module from "./checkbox.module.js";
+const checkbox_Checkbox = function({ ref, id, name, label, variant = 'outlined', size = 'md', intent = 'primary', reverse = false, className, containerClasses, labelClasses, error = false, helpText = '', errorText = '', ...rest }) {
+    return /*#__PURE__*/ jsxs("div", {
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: classnames(checkbox_module.container, containerClasses, {
+                    [checkbox_module.reverse]: reverse
+                }),
+                children: [
+                    /*#__PURE__*/ jsx(external_radix_ui_Checkbox.Root, {
+                        ref: ref,
+                        id: id,
+                        name: name,
+                        className: classnames(checkbox_module.checkbox, checkbox_module[variant], checkbox_module[size], checkbox_module[intent], className),
+                        ...rest,
+                        children: /*#__PURE__*/ jsx(external_radix_ui_Checkbox.Indicator, {
+                            forceMount: true,
+                            className: checkbox_module.indicator,
+                            children: /*#__PURE__*/ jsx(CheckIcon, {
+                                className: checkbox_module.icon
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Label.Label, {
+                        htmlFor: id,
+                        className: classnames(checkbox_module.label, labelClasses),
+                        children: label
+                    })
+                ]
+            }),
+            error ? /*#__PURE__*/ jsx(ErrorText, {
+                id: `error-for-${id}`,
+                text: errorText ?? helpText
+            }) : (null == helpText ? void 0 : helpText.length) > 0 && /*#__PURE__*/ jsx(HelpText, {
+                text: helpText
+            })
+        ]
+    });
+};
+export { checkbox_Checkbox as Checkbox };

package/dist/components/input/checkbox.module.js

@@ -0,0 +1,25 @@
+import "./checkbox_module.css";
+const checkbox_module = {
+    container: "container-Vffpk2",
+    reverse: "reverse-zpoUi8",
+    checkbox: "checkbox-pyuf1w",
+    indicator: "indicator-Q101gw",
+    icon: "icon-P5QloZ",
+    checkBoxIn: "checkBoxIn-yYID5l",
+    checkBoxOut: "checkBoxOut-bVuKzb",
+    label: "label-WUOrjh",
+    errorText: "errorText-bMyiOA",
+    sm: "sm-gLkW6x",
+    md: "md-o__rzc",
+    lg: "lg-WOB1US",
+    outlined: "outlined-XUVtqj",
+    filled: "filled-xQyvip",
+    primary: "primary-mNSmqc",
+    secondary: "secondary-B96Jra",
+    noeffect: "noeffect-J5I4Dv",
+    success: "success-LoZ4k7",
+    info: "info-NNf4yN",
+    warning: "warning-eEgBnF",
+    danger: "danger-FZ5wZH"
+};
+export { checkbox_module as default };

package/dist/components/input/checkbox_module.css

@@ -0,0 +1,248 @@
+@layer infonomic-base, infonomic-utilities, infonomic-theme, infonomic-typography;
+
+@layer infonomic-components {
+  .container-Vffpk2 {
+    align-items: center;
+    gap: var(--gap-2);
+    display: flex;
+  }
+
+  .reverse-zpoUi8 {
+    flex-direction: row-reverse;
+  }
+
+  .checkbox-pyuf1w {
+    border-radius: var(--border-radius-sm);
+    transition: all var(--transition-normal);
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .checkbox-pyuf1w[data-state="checked"] {
+    --ring-offset-color: var(--background);
+    --ring-offset-shadow: var(--ring-inset) 0 0 0 var(--ring-offset-width) var(--ring-offset-color);
+    --ring-shadow: var(--ring-inset) 0 0 0 calc(1px + var(--ring-offset-width)) var(--ring-color);
+    box-shadow: var(--ring-offset-shadow), var(--ring-shadow), var(--shadow, 0 0 #0000);
+  }
+
+  .checkbox-pyuf1w:disabled, .checkbox-pyuf1w[disabled] {
+    pointer-events: none;
+  }
+
+  .indicator-Q101gw {
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+
+  .icon-P5QloZ {
+    width: 20px;
+    height: 20px;
+    color: var(--checkbox-icon-color);
+  }
+
+  .indicator-Q101gw[data-state="checked"] .icon-P5QloZ {
+    opacity: 1;
+    animation: .3s cubic-bezier(.25, 1.5, .5, 1) forwards checkBoxIn-yYID5l;
+    transform: scale(1);
+  }
+
+  .indicator-Q101gw[data-state="unchecked"] .icon-P5QloZ {
+    opacity: 0;
+    animation: .2s ease-in checkBoxOut-bVuKzb;
+    transform: scale(.8);
+  }
+
+  .label-WUOrjh {
+    cursor: pointer;
+    color: var(--label-color);
+    margin-left: .25rem;
+    font-weight: 500;
+  }
+
+  .checkbox-pyuf1w:disabled ~ .label-WUOrjh, .checkbox-pyuf1w[disabled] ~ .label-WUOrjh {
+    pointer-events: none;
+  }
+
+  .errorText-bMyiOA {
+    color: red;
+    margin-top: .25rem;
+    font-size: .875rem;
+  }
+
+  .sm-gLkW6x {
+    width: 18px;
+    height: 18px;
+  }
+
+  .md-o__rzc {
+    width: 20px;
+    height: 20px;
+  }
+
+  .lg-WOB1US {
+    width: 22px;
+    height: 22px;
+  }
+
+  .outlined-XUVtqj {
+    border: 2px solid var(--checkbox-variant-outlined-border);
+    --checkbox-icon-color: white;
+  }
+
+  .outlined-XUVtqj[data-state="checked"] {
+    --ring-color: var(--checkbox-variant-outline-ring-color);
+    background-color: var(--checkbox-variant-outlined);
+  }
+
+  .filled-xQyvip {
+    background-color: var(--checkbox-variant-filled);
+    --checkbox-icon-color: white;
+  }
+
+  .primary-mNSmqc {
+    --checkbox-variant-outlined-border: var(--primary-400);
+    --checkbox-variant-outlined: var(--primary-400);
+    --checkbox-variant-outlined-hover-border: var(--primary-500);
+    --checkbox-variant-outline-ring-color: var(--primary-400);
+    --checkbox-variant-filled: var(--primary-400);
+  }
+
+  .secondary-B96Jra {
+    --checkbox-variant-outlined-border: var(--secondary-500);
+    --checkbox-variant-outlined: var(--secondary-500);
+    --checkbox-variant-outlined-hover-border: var(--secondary-500);
+    --checkbox-variant-outline-ring-color: var(--secondary-500);
+    --checkbox-variant-filled: var(--secondary-500);
+  }
+
+  .noeffect-J5I4Dv {
+    --checkbox-variant-outlined-border: var(--gray-400);
+    --checkbox-variant-outlined: var(--gray-400);
+    --checkbox-variant-outlined-hover-border: var(--gray-400);
+    --checkbox-variant-outline-ring-color: var(--gray-400);
+    --checkbox-variant-filled: var(--gray-400);
+  }
+
+  .success-LoZ4k7 {
+    --checkbox-variant-outlined-border: var(--green-400);
+    --checkbox-variant-outlined: var(--green-400);
+    --checkbox-variant-outlined-hover-border: var(--green-400);
+    --checkbox-variant-outline-ring-color: var(--green-400);
+    --checkbox-variant-filled: var(--green-400);
+  }
+
+  .info-NNf4yN {
+    --checkbox-variant-outlined-border: var(--blue-400);
+    --checkbox-variant-outlined: var(--blue-400);
+    --checkbox-variant-outlined-hover-border: var(--blue-400);
+    --checkbox-variant-outline-ring-color: var(--blue-400);
+    --checkbox-variant-filled: var(--blue-400);
+  }
+
+  .warning-eEgBnF {
+    --checkbox-variant-outlined-border: var(--yellow-400);
+    --checkbox-variant-outlined: var(--yellow-400);
+    --checkbox-variant-outlined-hover-border: var(--yellow-400);
+    --checkbox-variant-outline-ring-color: var(--yellow-400);
+    --checkbox-variant-filled: var(--yellow-400);
+  }
+
+  .danger-FZ5wZH {
+    --checkbox-variant-outlined-border: var(--red-400);
+    --checkbox-variant-outlined: var(--red-400);
+    --checkbox-variant-outlined-hover-border: var(--red-400);
+    --checkbox-variant-outline-ring-color: var(--red-400);
+    --checkbox-variant-filled: var(--red-400);
+  }
+
+  .dark .primary-mNSmqc:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --checkbox-variant-outlined-border: var(--primary-300);
+    --checkbox-variant-outlined: var(--primary-300);
+    --checkbox-variant-outlined-hover-border: var(--primary-500);
+    --checkbox-variant-outline-ring-color: var(--primary-300);
+    --checkbox-variant-filled: var(--primary-500);
+  }
+
+  .dark .secondary-B96Jra:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --checkbox-variant-outlined-border: var(--secondary-500);
+    --checkbox-variant-outlined: var(--secondary-500);
+    --checkbox-variant-outlined-hover-border: var(--secondary-500);
+    --checkbox-variant-outline-ring-color: var(--secondary-500);
+    --checkbox-variant-filled: var(--secondary-500);
+  }
+
+  .dark .noeffect-J5I4Dv:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --checkbox-variant-outlined-border: var(--gray-400);
+    --checkbox-variant-outlined: var(--gray-400);
+    --checkbox-variant-outlined-hover-border: var(--gray-400);
+    --checkbox-variant-outline-ring-color: var(--gray-400);
+    --checkbox-variant-filled: var(--gray-400);
+  }
+
+  .dark .success-LoZ4k7:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --checkbox-variant-outlined-border: var(--green-400);
+    --checkbox-variant-outlined: var(--green-400);
+    --checkbox-variant-outlined-hover-border: var(--green-400);
+    --checkbox-variant-outline-ring-color: var(--green-400);
+    --checkbox-variant-filled: var(--green-400);
+  }
+
+  .dark .info-NNf4yN:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --checkbox-variant-outlined-border: var(--blue-400);
+    --checkbox-variant-outlined: var(--blue-400);
+    --checkbox-variant-outlined-hover-border: var(--blue-400);
+    --checkbox-variant-outline-ring-color: var(--blue-400);
+    --checkbox-variant-filled: var(--blue-400);
+  }
+
+  .dark .warning-eEgBnF:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --checkbox-variant-outlined-border: var(--yellow-400);
+    --checkbox-variant-outlined: var(--yellow-400);
+    --checkbox-variant-outlined-hover-border: var(--yellow-400);
+    --checkbox-variant-outline-ring-color: var(--yellow-400);
+    --checkbox-variant-filled: var(--yellow-400);
+  }
+
+  .dark .danger-FZ5wZH:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+    --checkbox-variant-outlined-border: var(--red-400);
+    --checkbox-variant-outlined: var(--red-400);
+    --checkbox-variant-outlined-hover-border: var(--red-400);
+    --checkbox-variant-outline-ring-color: var(--red-400);
+    --checkbox-variant-filled: var(--red-400);
+  }
+
+  @keyframes checkBoxIn-yYID5l {
+    0% {
+      opacity: 0;
+      transform: scale(.8);
+    }
+
+    50% {
+      opacity: 1;
+      transform: scale(1.2);
+    }
+
+    80% {
+      transform: scale(.9);
+    }
+
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  @keyframes checkBoxOut-bVuKzb {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    to {
+      opacity: 0;
+      transform: scale(.8);
+    }
+  }
+}
+

package/dist/components/input/error-text.d.ts

@@ -0,0 +1,9 @@
+import type React from 'react';
+interface ErrorTextProps {
+    id: string;
+    className?: string;
+    text: string;
+}
+export declare function ErrorText({ id, className, text }: ErrorTextProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=error-text.d.ts.map

package/dist/components/input/error-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-text.d.ts","sourceRoot":"","sources":["../../../src/components/input/error-text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,UAAU,cAAc;IACtB,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;CACb;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAMpF"}