@rovula/ui 0.1.3 → 0.1.5

package/dist/cjs/types/components/Dropdown/Dropdown.stories.d.ts

@@ -298,7 +298,9 @@ declare const meta: {
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLInputElement> | undefined;
         form?: string | undefined | undefined;
         list?: string | undefined | undefined;
+        status?: "default" | "warning" | "error" | undefined;
         step?: number | string | undefined | undefined;
+        warning?: boolean | undefined;
         title?: string | undefined | undefined;
         startIcon?: React.ReactNode;
         endIcon?: React.ReactNode;
@@ -363,6 +365,7 @@ declare const meta: {
         readOnly?: boolean | undefined | undefined;
         src?: string | undefined | undefined;
         iconMode?: "flat" | "solid" | undefined;
+        warningMessage?: string | undefined;
         keepCloseIconOnValue?: boolean | undefined;
         keepFooterSpace?: boolean | undefined;
         labelClassName?: string | undefined;

package/dist/cjs/types/components/InputFilter/InputFilter.stories.d.ts

@@ -285,7 +285,9 @@ declare const meta: {
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLInputElement> | undefined;
         form?: string | undefined | undefined;
         list?: string | undefined | undefined;
+        status?: "default" | "warning" | "error" | undefined;
         step?: number | string | undefined | undefined;
+        warning?: boolean | undefined;
         title?: string | undefined | undefined;
         startIcon?: React.ReactNode;
         endIcon?: React.ReactNode;
@@ -350,6 +352,7 @@ declare const meta: {
         readOnly?: boolean | undefined | undefined;
         src?: string | undefined | undefined;
         iconMode?: "flat" | "solid" | undefined;
+        warningMessage?: string | undefined;
         keepCloseIconOnValue?: boolean | undefined;
         keepFooterSpace?: boolean | undefined;
         labelClassName?: string | undefined;

package/dist/cjs/types/components/MaskedTextInput/MaskedTextInput.d.ts

@@ -40,9 +40,12 @@ export declare const MaskedTextInput: React.ForwardRefExoticComponent<{
     type?: React.HTMLInputTypeAttribute;
     helperText?: string;
     errorMessage?: string;
+    warningMessage?: string;
+    status?: "default" | "warning" | "error";
     fullwidth?: boolean;
     disabled?: boolean;
     error?: boolean;
+    warning?: boolean;
     required?: boolean;
     isFloatingLabel?: boolean;
     keepCloseIconOnValue?: boolean;

package/dist/cjs/types/components/MaskedTextInput/MaskedTextInput.stories.d.ts

@@ -11,9 +11,12 @@ declare const meta: {
         type?: React.HTMLInputTypeAttribute;
         helperText?: string;
         errorMessage?: string;
+        warningMessage?: string;
+        status?: "default" | "warning" | "error";
         fullwidth?: boolean;
         disabled?: boolean;
         error?: boolean;
+        warning?: boolean;
         required?: boolean;
         isFloatingLabel?: boolean;
         keepCloseIconOnValue?: boolean;
@@ -58,9 +61,12 @@ declare const meta: {
         type?: React.HTMLInputTypeAttribute | undefined;
         helperText?: string | undefined;
         errorMessage?: string | undefined;
+        warningMessage?: string | undefined;
+        status?: "default" | "warning" | "error" | undefined;
         fullwidth?: boolean | undefined;
         disabled?: boolean | undefined;
         error?: boolean | undefined;
+        warning?: boolean | undefined;
         required?: boolean | undefined;
         isFloatingLabel?: boolean | undefined;
         keepCloseIconOnValue?: boolean | undefined;

package/dist/cjs/types/components/PasswordInput/PasswordInput.stories.d.ts

@@ -244,7 +244,9 @@ declare const meta: {
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLInputElement> | undefined;
         form?: string | undefined | undefined;
         list?: string | undefined | undefined;
+        status?: "default" | "warning" | "error" | undefined;
         step?: number | string | undefined | undefined;
+        warning?: boolean | undefined;
         error?: boolean | undefined;
         size?: "sm" | "md" | "lg" | undefined;
         disabled?: boolean | undefined;
@@ -319,6 +321,7 @@ declare const meta: {
         iconMode?: "flat" | "solid" | undefined;
         helperText?: string | undefined;
         errorMessage?: string | undefined;
+        warningMessage?: string | undefined;
         keepCloseIconOnValue?: boolean | undefined;
         keepFooterSpace?: boolean | undefined;
         labelClassName?: string | undefined;

package/dist/cjs/types/components/Search/Search.stories.d.ts

@@ -279,7 +279,9 @@ declare const meta: {
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLInputElement> | undefined;
         form?: string | undefined | undefined;
         list?: string | undefined | undefined;
+        status?: "default" | "warning" | "error" | undefined;
         step?: number | string | undefined | undefined;
+        warning?: boolean | undefined;
         title?: string | undefined | undefined;
         startIcon?: React.ReactNode;
         endIcon?: React.ReactNode;
@@ -344,6 +346,7 @@ declare const meta: {
         readOnly?: boolean | undefined | undefined;
         src?: string | undefined | undefined;
         iconMode?: "flat" | "solid" | undefined;
+        warningMessage?: string | undefined;
         keepCloseIconOnValue?: boolean | undefined;
         keepFooterSpace?: boolean | undefined;
         labelClassName?: string | undefined;

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

@@ -1,4 +1,6 @@
 import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
-declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    forceHover?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
 export { Switch };

package/dist/cjs/types/components/Switch/Switch.stories.d.ts

@@ -1,7 +1,9 @@
 import React from "react";
 declare const meta: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-switch").SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    component: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-switch").SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+        forceHover?: boolean;
+    } & React.RefAttributes<HTMLButtonElement>>;
     tags: string[];
     parameters: {
         layout: string;
@@ -288,14 +290,20 @@ declare const meta: {
         required?: boolean | undefined;
         asChild?: boolean | undefined;
         onCheckedChange?: ((checked: boolean) => void) | undefined;
+        forceHover?: boolean | undefined;
         ref?: React.LegacyRef<HTMLButtonElement> | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;
 export declare const Default: {
     args: {
-        checked: boolean;
-        disabled: boolean;
+        checked: false;
+        disabled: false;
     };
-    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+    render: (args: Omit<import("@radix-ui/react-switch").SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+        forceHover?: boolean;
+    } & React.RefAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
+};
+export declare const FigmaPreview: {
+    render: () => import("react/jsx-runtime").JSX.Element;
 };

package/dist/cjs/types/components/Switch/Switch.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const switchRootVariants: (props?: ({
+    forceHover?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const switchThumbVariants: (props?: ({
+    forceHover?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const switchThumbHaloVariants: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/dist/cjs/types/components/TextInput/TextInput.d.ts

@@ -9,9 +9,12 @@ export type InputProps = {
     type?: React.HTMLInputTypeAttribute;
     helperText?: string;
     errorMessage?: string;
+    warningMessage?: string;
+    status?: "default" | "warning" | "error";
     fullwidth?: boolean;
     disabled?: boolean;
     error?: boolean;
+    warning?: boolean;
     required?: boolean;
     isFloatingLabel?: boolean;
     keepCloseIconOnValue?: boolean;
@@ -44,9 +47,12 @@ export declare const TextInput: React.ForwardRefExoticComponent<{
     type?: React.HTMLInputTypeAttribute;
     helperText?: string;
     errorMessage?: string;
+    warningMessage?: string;
+    status?: "default" | "warning" | "error";
     fullwidth?: boolean;
     disabled?: boolean;
     error?: boolean;
+    warning?: boolean;
     required?: boolean;
     isFloatingLabel?: boolean;
     keepCloseIconOnValue?: boolean;

package/dist/cjs/types/components/TextInput/TextInput.stories.d.ts

@@ -11,9 +11,12 @@ declare const meta: {
         type?: React.HTMLInputTypeAttribute;
         helperText?: string;
         errorMessage?: string;
+        warningMessage?: string;
+        status?: "default" | "warning" | "error";
         fullwidth?: boolean;
         disabled?: boolean;
         error?: boolean;
+        warning?: boolean;
         required?: boolean;
         isFloatingLabel?: boolean;
         keepCloseIconOnValue?: boolean;
@@ -50,9 +53,12 @@ declare const meta: {
         type?: React.HTMLInputTypeAttribute | undefined;
         helperText?: string | undefined;
         errorMessage?: string | undefined;
+        warningMessage?: string | undefined;
+        status?: "default" | "warning" | "error" | undefined;
         fullwidth?: boolean | undefined;
         disabled?: boolean | undefined;
         error?: boolean | undefined;
+        warning?: boolean | undefined;
         required?: boolean | undefined;
         isFloatingLabel?: boolean | undefined;
         keepCloseIconOnValue?: boolean | undefined;
@@ -406,3 +412,6 @@ export declare const KeepFooterSpace: {
     };
     render: () => import("react/jsx-runtime").JSX.Element;
 };
+export declare const FeedbackApiCompatibility: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/cjs/types/components/TextInput/TextInput.styles.d.ts

@@ -5,6 +5,7 @@ export declare const inputVariant: (props?: ({
     fullwidth?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
     error?: boolean | null | undefined;
+    warning?: boolean | null | undefined;
     hasClearIcon?: boolean | null | undefined;
     hasSearchIcon?: boolean | null | undefined;
     leftSectionIcon?: boolean | null | undefined;
@@ -22,6 +23,7 @@ export declare const helperTextVariant: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
     disabled?: boolean | null | undefined;
     error?: boolean | null | undefined;
+    warning?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const inlineEndIconWrapperVariant: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
@@ -36,6 +38,7 @@ export declare const segmentedIconWrapperVariant: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
     rounded?: "none" | "normal" | "full" | null | undefined;
     error?: boolean | null | undefined;
+    warning?: boolean | null | undefined;
     position?: "end" | "start" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const iconWrapperVariant: (props?: ({
@@ -51,5 +54,6 @@ export declare const sectionIconWrapperVariant: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
     rounded?: "none" | "normal" | "full" | null | undefined;
     error?: boolean | null | undefined;
+    warning?: boolean | null | undefined;
     position?: "end" | "start" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/dist/cjs/types/components/Toast/Toast.d.ts

@@ -7,6 +7,7 @@ declare const ToastViewport: React.ForwardRefExoticComponent<Omit<ToastPrimitive
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLOListElement>>;
 declare const Toast: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastProps & React.RefAttributes<HTMLLIElement>, "ref"> & VariantProps<(props?: ({
     variant?: "default" | "success" | "info" | "warning" | "error" | null | undefined;
+    showBorder?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLLIElement>>;
 declare const ToastAction: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const ToastClose: React.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/cjs/types/components/Toast/Toast.stories.d.ts

@@ -3,10 +3,18 @@ declare const meta: {
     title: string;
     component: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-toast").ToastProps & React.RefAttributes<HTMLLIElement>, "ref"> & import("class-variance-authority").VariantProps<(props?: ({
         variant?: "default" | "success" | "info" | "warning" | "error" | null | undefined;
+        showBorder?: boolean | null | undefined;
     } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLLIElement>>;
     tags: string[];
     parameters: {
         layout: string;
+        backgrounds: {
+            default: string;
+            values: {
+                name: string;
+                value: string;
+            }[];
+        };
     };
     decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
         suppressHydrationWarning?: boolean | undefined | undefined;
@@ -323,6 +331,7 @@ declare const meta: {
             };
         }>, "currentTarget">) => void) | undefined;
         variant?: "default" | "success" | "info" | "warning" | "error" | null | undefined;
+        showBorder?: boolean | null | undefined;
         ref?: React.LegacyRef<HTMLLIElement> | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
@@ -341,15 +350,20 @@ export declare const Simple: {
             control: "select";
             options: string[];
         };
+        showBorder: {
+            control: "boolean";
+        };
     };
     args: {
         variant: "default";
         contentMode: "horizontal";
         position: "top-center";
+        showBorder: false;
     };
     render: (args: {
         variant: "default" | "success" | "info" | "warning" | "error" | null | undefined;
         contentMode: "horizontal" | "vertical";
+        showBorder: boolean;
         position?: "top-center" | "top-left" | "top-right" | "bottom-center" | "bottom-left" | "bottom-right" | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/cjs/types/components/Toast/Toast.styles.d.ts

@@ -1,5 +1,6 @@
 export declare const toastVariants: (props?: ({
     variant?: "default" | "success" | "info" | "warning" | "error" | null | undefined;
+    showBorder?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const toastViewportVariants: (props?: ({
     position?: "top-center" | "top-left" | "top-right" | "bottom-center" | "bottom-left" | "bottom-right" | null | undefined;

package/dist/components/PasswordInput/PasswordInput.js

@@ -28,8 +28,8 @@ export const PasswordInput = forwardRef((_a, ref) => {
         onClickEndIcon === null || onClickEndIcon === void 0 ? void 0 : onClickEndIcon();
     };
     const toggleIcon = visible
-        ? showIcon !== null && showIcon !== void 0 ? showIcon : _jsx(Icon, { name: "eye", type: "lucide", size: "inherit", className: "size-full stroke-input-default-stroke hover:stroke-input-active-stroke", "aria-label": "Hide password" })
-        : hideIcon !== null && hideIcon !== void 0 ? hideIcon : _jsx(Icon, { name: "eye-closed", type: "lucide", size: "inherit", className: "size-full stroke-input-default-stroke hover:stroke-input-active-stroke", "aria-label": "Show password" });
+        ? showIcon !== null && showIcon !== void 0 ? showIcon : _jsx(Icon, { name: "eye", type: "lucide", size: "inherit", className: "size-full", "aria-label": "Hide password" })
+        : hideIcon !== null && hideIcon !== void 0 ? hideIcon : _jsx(Icon, { name: "eye-closed", type: "lucide", size: "inherit", className: "size-full", "aria-label": "Show password" });
     return (_jsx(TextInput, Object.assign({ iconMode: "flat" }, props, { ref: inputRef, type: visible ? "text" : "password", hasClearIcon: hasClearIcon, endIcon: showToggle ? toggleIcon : endIcon, renderEndIcon: renderEndIcon, onClickEndIcon: showToggle ? handleToggleVisibility : onClickEndIcon, autoComplete: (_b = props.autoComplete) !== null && _b !== void 0 ? _b : "current-password" })));
 });
 PasswordInput.displayName = "PasswordInput";

package/dist/components/PasswordInput/PasswordInput.stories.js

@@ -8,7 +8,7 @@ const meta = {
         layout: "fullscreen",
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-[rgb(var(--base-bg-2))]", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-base-bg2", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;

package/dist/components/Switch/Switch.js

@@ -10,27 +10,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 import { cn } from "@/utils/cn";
-const switchBaseClasses = "group inline-flex h-3 w-[32px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors";
-const switchStateClasses = {
-    unchecked: "data-[state=unchecked]:bg-[var(--switch-default-color)] hover:data-[state=unchecked]:bg-[var(--switch-hover-color)]",
-    checked: "data-[state=checked]:bg-[var(--switch-active-color)] hover:data-[state=checked]:bg-[var(--switch-active-hover-color)]",
-    disabled: "data-[disabled]:cursor-not-allowed data-[disabled]:!bg-[var(--switch-disabled-color)] data-[disabled]:pointer-events-none",
-};
-const thumbBaseClasses = "block size-4 rounded-full shadow-lg transition-transform";
-const thumbStateClasses = {
-    unchecked: "data-[state=unchecked]:bg-[var(--switch-thumb-default-color)] data-[state=unchecked]:-translate-x-[2px]",
-    checked: "data-[state=checked]:bg-[var(--switch-thumb-active-color)] data-[state=checked]:translate-x-4",
-    hover: "group-hover:ring group-hover:data-[state=checked]:ring-[var(--switch-thumb-active-hover-ring)] group-hover:data-[state=unchecked]:ring-[var(--switch-thumb-hover-ring)]",
-    hoverColor: "group-hover:data-[state=checked]:bg-[var(--switch-thumb-active-hover-color)] group-hover:data-[state=unchecked]:bg-[var(--switch-thumb-hover-color)]",
-    disabled: "group-disabled:!bg-[--switch-thumb-disabled-color]",
-};
+import { switchRootVariants, switchThumbHaloVariants, switchThumbVariants, } from "./Switch.styles";
 const Switch = React.forwardRef((_a, ref) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(SwitchPrimitives.Root, Object.assign({ className: cn(switchBaseClasses, switchStateClasses.unchecked, switchStateClasses.checked, switchStateClasses.disabled, className) }, props, { ref: ref, children: _jsx(SwitchPrimitives.Thumb, { className: cn(thumbBaseClasses, thumbStateClasses.unchecked, thumbStateClasses.checked, thumbStateClasses.hover, thumbStateClasses.hoverColor, thumbStateClasses.disabled) }) })));
+    var { className, forceHover = false } = _a, props = __rest(_a, ["className", "forceHover"]);
+    return (_jsx(SwitchPrimitives.Root, Object.assign({ className: cn(switchRootVariants({ forceHover }), className) }, props, { ref: ref, children: _jsx(SwitchPrimitives.Thumb, { className: switchThumbVariants({ forceHover }), children: _jsx("span", { "aria-hidden": true, className: switchThumbHaloVariants(), children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "40", height: "40", viewBox: "0 0 40 40", fill: "none", children: [_jsx("g", { filter: "url(#switch-hover-halo-shadow)", children: _jsx("circle", { cx: "20", cy: "18", r: "12", fill: "currentColor", shapeRendering: "crispEdges" }) }), _jsx("defs", { children: _jsxs("filter", { id: "switch-hover-halo-shadow", x: "0", y: "0", width: "40", height: "40", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [_jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), _jsx("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), _jsx("feOffset", { dy: "2" }), _jsx("feGaussianBlur", { stdDeviation: "4" }), _jsx("feComposite", { in2: "hardAlpha", operator: "out" }), _jsx("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.568627 0 0 0 0 0.619608 0 0 0 0 0.670588 0 0 0 0.24 0" }), _jsx("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow" }), _jsx("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow", result: "shape" })] }) })] }) }) }) })));
 });
 Switch.displayName = SwitchPrimitives.Root.displayName;
 export { Switch };

package/dist/components/Switch/Switch.stories.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Switch } from "./Switch";
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta = {
@@ -20,8 +20,18 @@ export const Default = {
         disabled: false,
     },
     render: (args) => {
-        console.log("args ", args);
         const props = Object.assign({}, args);
         return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Switch, Object.assign({}, props)) }));
     },
 };
+const switchPreviewRows = [
+    { label: "On - Default", checked: true },
+    { label: "On - Hover", checked: true, forceHover: true },
+    { label: "On - Disable", checked: true, disabled: true },
+    { label: "Off - Default", checked: false },
+    { label: "Off - Hover", checked: false, forceHover: true },
+    { label: "Off - Disable", checked: false, disabled: true },
+];
+export const FigmaPreview = {
+    render: () => (_jsx("div", { className: "bg-base-bg2 p-8 min-h-screen", children: _jsx("div", { className: "mx-auto flex w-full max-w-[300px] flex-col gap-4 rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-6", children: switchPreviewRows.map((row) => (_jsxs("div", { className: "grid grid-cols-[1fr_40px] items-center gap-6", children: [_jsx("span", { className: "text-sm font-medium text-text-white", children: row.label }), _jsx(Switch, { checked: row.checked, disabled: row.disabled, forceHover: row.forceHover })] }, row.label))) }) })),
+};

package/dist/components/Switch/Switch.styles.js

@@ -0,0 +1,39 @@
+import { cva } from "class-variance-authority";
+export const switchRootVariants = cva([
+    "group relative inline-flex h-6 w-10 shrink-0 cursor-pointer items-center overflow-visible px-1",
+    "before:pointer-events-none before:absolute before:left-1 before:top-1/2 before:h-3 before:w-8 before:-translate-y-1/2 before:rounded-full before:transition-colors",
+    "data-[state=unchecked]:before:bg-[var(--switch-default-color)] hover:data-[state=unchecked]:before:bg-[var(--switch-hover-color)]",
+    "data-[state=checked]:before:bg-[var(--switch-active-color)] hover:data-[state=checked]:before:bg-[var(--switch-active-hover-color)]",
+    "data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none data-[disabled]:before:!bg-[var(--switch-disabled-color)]",
+], {
+    variants: {
+        forceHover: {
+            true: "data-[state=unchecked]:before:bg-[var(--switch-hover-color)] data-[state=checked]:before:bg-[var(--switch-active-hover-color)]",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        forceHover: false,
+    },
+});
+export const switchThumbVariants = cva([
+    "relative isolate block size-4 rounded-full [filter:var(--switch-thumb-filter)] transition-[transform,background-color,color,filter]",
+    "data-[state=unchecked]:bg-[var(--switch-thumb-default-color)] data-[state=unchecked]:translate-x-0",
+    "data-[state=checked]:bg-[var(--switch-thumb-active-color)] data-[state=checked]:translate-x-4",
+    "data-[state=unchecked]:text-[var(--state-color-tertiary-hover-bg)] data-[state=checked]:text-[var(--state-color-primary-hover-bg)]",
+    "group-hover:[&_.switch-thumb-halo]:opacity-100 group-hover:data-[state=checked]:bg-[var(--switch-thumb-active-hover-color)] group-hover:data-[state=unchecked]:bg-[var(--switch-thumb-hover-color)]",
+    "group-disabled:!bg-[var(--switch-thumb-disabled-color)] group-disabled:[&_.switch-thumb-halo]:opacity-0",
+], {
+    variants: {
+        forceHover: {
+            true: "[&_.switch-thumb-halo]:opacity-100 data-[state=unchecked]:bg-[var(--switch-thumb-hover-color)] data-[state=checked]:bg-[var(--switch-thumb-active-hover-color)]",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        forceHover: false,
+    },
+});
+export const switchThumbHaloVariants = cva([
+    "switch-thumb-halo pointer-events-none absolute left-0 top-0.5 -z-10 block size-6 -translate-x-1/2 -translate-y-1/2 opacity-0 transition-opacity",
+]);

package/dist/components/TextInput/TextInput.js

@@ -15,18 +15,32 @@ import { helperTextVariant, iconActionVariant, inlineEndIconWrapperVariant, inli
 import { CircleAlert, CircleX, Search, } from "lucide-react";
 import { cn } from "@/utils/cn";
 export const TextInput = forwardRef((_a, ref) => {
-    var { id, label, size = "md", rounded = "normal", variant = "outline", type = "text", iconMode = "solid", helperText, errorMessage, fullwidth = true, disabled = false, error = false, required = true, isFloatingLabel = true, keepCloseIconOnValue = false, keepFooterSpace = true, hasClearIcon = true, hasSearchIcon = false, startIcon, endIcon, labelClassName, onClickStartIcon, onClickEndIcon, renderStartIcon, renderEndIcon, classes } = _a, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "type", "iconMode", "helperText", "errorMessage", "fullwidth", "disabled", "error", "required", "isFloatingLabel", "keepCloseIconOnValue", "keepFooterSpace", "hasClearIcon", "hasSearchIcon", "startIcon", "endIcon", "labelClassName", "onClickStartIcon", "onClickEndIcon", "renderStartIcon", "renderEndIcon", "classes"]);
+    var { id, label, size = "md", rounded = "normal", variant = "outline", type = "text", iconMode = "solid", helperText, errorMessage, warningMessage, status, fullwidth = true, disabled = false, error = false, warning = false, required = true, isFloatingLabel = true, keepCloseIconOnValue = false, keepFooterSpace = true, hasClearIcon = true, hasSearchIcon = false, startIcon, endIcon, labelClassName, onClickStartIcon, onClickEndIcon, renderStartIcon, renderEndIcon, classes } = _a, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "type", "iconMode", "helperText", "errorMessage", "warningMessage", "status", "fullwidth", "disabled", "error", "warning", "required", "isFloatingLabel", "keepCloseIconOnValue", "keepFooterSpace", "hasClearIcon", "hasSearchIcon", "startIcon", "endIcon", "labelClassName", "onClickStartIcon", "onClickEndIcon", "renderStartIcon", "renderEndIcon", "classes"]);
     const inputRef = useRef(null);
     const _id = id || `${type}-${label}-input`;
     const hasLeftSectionIcon = !!startIcon || !!renderStartIcon;
     const hasRightSectionIcon = !!endIcon || !!renderEndIcon;
+    const feedbackStatus = status ||
+        (error || !!errorMessage
+            ? "error"
+            : warning || !!warningMessage
+                ? "warning"
+                : "default");
+    const isError = feedbackStatus === "error";
+    const isWarning = feedbackStatus === "warning";
+    const feedbackMessage = feedbackStatus === "error"
+        ? errorMessage
+        : feedbackStatus === "warning"
+            ? warningMessage
+            : helperText;
     const inputClassname = inputVariant({
         size,
         rounded,
         variant,
         fullwidth,
         disabled,
-        error,
+        error: isError,
+        warning: isWarning,
         hasSearchIcon: (iconMode === "flat" && hasLeftSectionIcon) || hasSearchIcon,
         hasClearIcon: (iconMode === "flat" && hasRightSectionIcon) || hasClearIcon,
         leftSectionIcon: iconMode === "solid" ? hasLeftSectionIcon : false,
@@ -35,14 +49,15 @@ export const TextInput = forwardRef((_a, ref) => {
     const labelClassname = labelVariant({
         size,
         disabled,
-        error,
+        error: isError,
         hasSearchIcon: (iconMode === "flat" && hasLeftSectionIcon) || hasSearchIcon,
         hasLeftSectionIcon: iconMode === "solid" ? hasLeftSectionIcon : false,
         isFloatingLabel,
     });
     const helperTextClassname = helperTextVariant({
         size,
-        error,
+        error: isError,
+        warning: isWarning,
         disabled,
     });
     const inlineEndIconWrapperClassname = inlineEndIconWrapperVariant({ size });
@@ -54,13 +69,15 @@ export const TextInput = forwardRef((_a, ref) => {
     const startSegmentIconWrapperClassname = segmentedIconWrapperVariant({
         size,
         rounded,
-        error,
+        error: isError,
+        warning: isWarning,
         position: "start",
     });
     const endSegmentIconWrapperClassname = segmentedIconWrapperVariant({
         size,
         rounded,
-        error,
+        error: isError,
+        warning: isWarning,
         position: "end",
     });
     useImperativeHandle(ref, () => inputRef === null || inputRef === void 0 ? void 0 : inputRef.current);
@@ -136,6 +153,10 @@ export const TextInput = forwardRef((_a, ref) => {
                             // "fill-none stroke-input-default-text hover:stroke-input-filled-text active:stroke-input-filled-text",
                             classes === null || classes === void 0 ? void 0 : classes.icon), onMouseDown: handleClearInput }) })), endIconElement, _jsxs("label", { htmlFor: _id, className: cn(labelClassname), children: [label, " ", required && (_jsx("span", { className: cn("text-input-error", {
                                     "text-input-disable-text": disabled,
-                                }), children: "*" }))] })] }), (errorMessage || helperText || keepFooterSpace) && (_jsxs("span", { className: helperTextClassname, children: [(errorMessage || helperText) && (_jsx("span", { className: "h-full shrink-0", children: _jsx(CircleAlert, { width: 14, height: 14, className: cn("fill-none", error ? "stroke-input-error" : "stroke-input-filled-text") }) })), keepFooterSpace && !error && !helperText && (_jsx("span", { className: "block min-h-[14px]", "aria-hidden": true })), (error ? errorMessage : helperText) || ''] }))] }));
+                                }), children: "*" }))] })] }), (feedbackMessage || keepFooterSpace) && (_jsxs("span", { className: helperTextClassname, children: [feedbackMessage && (_jsx("span", { className: "h-full shrink-0", children: _jsx(CircleAlert, { width: 14, height: 14, className: cn("fill-none stroke-current", isError
+                                ? "text-input-error"
+                                : isWarning
+                                    ? "text-warning"
+                                    : "text-input-filled-text") }) })), keepFooterSpace && !feedbackMessage && (_jsx("span", { className: "block min-h-[14px]", "aria-hidden": true })), feedbackMessage || ""] }))] }));
 });
 export default TextInput;

package/dist/components/TextInput/TextInput.stories.js

@@ -88,3 +88,16 @@ export const KeepFooterSpace = {
     },
     render: () => _jsx(KeepFooterSpaceDemo, {}),
 };
+const FeedbackApiDemo = () => {
+    const [legacyError, setLegacyError] = useState(false);
+    const [legacyWarning, setLegacyWarning] = useState(false);
+    const [useStatusOverride, setUseStatusOverride] = useState(false);
+    return (_jsxs("div", { className: "flex flex-col gap-6 w-full max-w-2xl", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-4 text-sm text-text-grey-dark", children: [_jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: legacyError, onChange: (e) => setLegacyError(e.target.checked) }), "legacy error"] }), _jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: legacyWarning, onChange: (e) => setLegacyWarning(e.target.checked) }), "legacy warning"] }), _jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: useStatusOverride, onChange: (e) => setUseStatusOverride(e.target.checked) }), "status override = warning"] })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("h4", { className: "text-sm font-medium text-text-grey-dark", children: "Legacy API (error / warning)" }), _jsx(TextInput, { id: "legacy-feedback", label: "Email", helperText: "We will never share your email.", keepFooterSpace: true, error: legacyError, errorMessage: legacyError ? "Invalid email format." : undefined, warning: legacyWarning, warningMessage: legacyWarning ? "Please verify this email." : undefined })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("h4", { className: "text-sm font-medium text-text-grey-dark", children: "New API (status + message)" }), _jsx(TextInput, { id: "status-feedback", label: "Email", helperText: "We will never share your email.", keepFooterSpace: true, status: useStatusOverride ? "warning" : "default", error: legacyError, errorMessage: legacyError ? "Invalid email format." : undefined, warning: legacyWarning, warningMessage: useStatusOverride
+                                    ? "Status explicitly sets warning."
+                                    : legacyWarning
+                                        ? "Please verify this email."
+                                        : undefined })] })] })] }));
+};
+export const FeedbackApiCompatibility = {
+    render: () => _jsx(FeedbackApiDemo, {}),
+};