@rovula/ui 0.1.2 → 0.1.4

package/dist/components/Checkbox/Checkbox.stories.js

@@ -29,10 +29,32 @@ export const WithText = {
         return (_jsxs("div", { className: "items-top flex space-x-2", children: [_jsx(Checkbox, { id: "terms1" }), _jsxs("div", { className: "grid gap-1.5 leading-none", children: [_jsx("label", { htmlFor: "terms1", className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "Accept terms and conditions" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "You agree to our Terms of Service and Privacy Policy." })] })] }));
     },
 };
-export const Diabled = {
+export const Disabled = {
     args: {},
     render: (args) => {
         const props = Object.assign({}, args);
         return (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, { id: "terms2", disabled: true }), _jsx("label", { htmlFor: "terms2", className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "Accept terms and conditions" })] }));
     },
 };
+const checkboxPreviewRows = [
+    { label: "Default", checked: false },
+    { label: "Hover", checked: false, className: "!border-function-default-hover" },
+    { label: "Disable", checked: false, disabled: true },
+    { label: "Checked", checked: true },
+    {
+        label: "Checked - Hover",
+        checked: true,
+        className: "!data-[state=checked]:border-function-active-hover !data-[state=checked]:bg-function-active-hover",
+    },
+    { label: "Checked - Disable", checked: true, disabled: true },
+    { label: "Indeterminate", checked: "indeterminate" },
+    {
+        label: "Indeterminate - Hover",
+        checked: "indeterminate",
+        className: "!data-[state=indeterminate]:border-function-active-hover !data-[state=indeterminate]:bg-function-active-hover",
+    },
+    { label: "Indeterminate - Disable", checked: "indeterminate", 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-[360px] flex-col gap-4 rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-6", children: checkboxPreviewRows.map((row) => (_jsxs("div", { className: "grid grid-cols-[160px_16px] items-center gap-4", children: [_jsx("span", { className: "text-sm font-medium text-text-white", children: row.label }), _jsx(Checkbox, { checked: row.checked, disabled: row.disabled, className: row.className })] }, row.label))) }) })),
+};

package/dist/components/InputFilter/InputFilter.js

@@ -119,6 +119,6 @@ const InputFilter = forwardRef((_a, ref) => {
         active: !!values.length,
         disabled,
     });
-    return (_jsxs("div", { ref: containerRef, className: `relative ${fullwidth ? "w-full" : ""}`, children: [_jsx(TextInput, Object.assign({ hasClearIcon: false, endIcon: _jsx("div", { className: filterIconClassName, children: _jsx(Icon, { type: "heroicons", name: "adjustments-horizontal", variant: "outline", color: "inherit", stroke: "inherit", fill: "transparent" }) }) }, props, { ref: ref, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: customInputVariant({ size }), onFocus: handleOnFocus, onKeyDown: handleOnKeyDown })), isFocused && renderOptions()] }));
+    return (_jsxs("div", { ref: containerRef, className: `relative ${fullwidth ? "w-full" : ""}`, children: [_jsx(TextInput, Object.assign({ hasClearIcon: false, endIcon: _jsx(Icon, { type: "heroicons", name: "adjustments-horizontal", variant: "outline", color: "inherit", stroke: "inherit", fill: "transparent" }), classes: { endIconWrapper: filterIconClassName } }, props, { ref: ref, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: customInputVariant({ size }), onFocus: handleOnFocus, onKeyDown: handleOnKeyDown })), isFocused && renderOptions()] }));
 });
 export { InputFilter };

package/dist/components/InputFilter/InputFilter.styles.js

@@ -1,7 +1,7 @@
 import { cva } from "class-variance-authority";
 export const filterIconVariant = cva([
     // Base styles
-    "absolute contents items-center justify-center cursor-pointer",
+    "absolute flex items-center justify-center cursor-pointer",
     // Border styles
     "border-l border-l-input-default-stroke",
     "peer-hover:border-l-input-active-stroke",

package/dist/components/RadioGroup/RadioGroup.js

@@ -20,7 +20,7 @@ const RadioGroup = React.forwardRef((_a, ref) => {
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 const RadioGroupItem = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(RadioGroupPrimitive.Item, Object.assign({ ref: ref, className: cn("aspect-square box-border size-4 rounded-full border border-function-default-solid text-function-default-solid", "hover:border-function-default-hover", "focus:outline-none", 
+    return (_jsx(RadioGroupPrimitive.Item, Object.assign({ ref: ref, className: cn("aspect-square box-border size-4 cursor-pointer rounded-full border border-function-default-solid text-function-default-solid", "hover:border-function-default-hover", "focus:outline-none", 
         // Disabled state styles
         "data-[disabled]:!border-state-disable-solid data-[disabled]:!fill-state-disable-solid data-[disabled]:!cursor-not-allowed data-[disabled]:!pointer-events-none data-[disabled]:!text-state-disable-solid", 
         // Checked state styles

package/dist/components/RadioGroup/RadioGroup.stories.js

@@ -22,7 +22,7 @@ export const Default = {
         return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsxs(RadioGroup, Object.assign({ defaultValue: "option-one" }, props, { children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option-one", id: "option-one" }), _jsx(Label, { htmlFor: "option-one", children: "Option One" })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option-two", id: "option-two" }), _jsx(Label, { htmlFor: "option-two", children: "Option Two" })] })] })) }));
     },
 };
-export const Diabled = {
+export const Disabled = {
     args: {
         disabled: true,
     },
@@ -40,3 +40,18 @@ export const Horizontal = {
         return (_jsxs(RadioGroup, { defaultValue: "option1", className: "flex flex-row space-x-4", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option1", id: "option1" }), _jsx(Label, { htmlFor: "option1", children: "Option 1" })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option2", id: "option2" }), _jsx(Label, { htmlFor: "option2", children: "Option 2" })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option3", id: "option3" }), _jsx(Label, { htmlFor: "option3", children: "Option 3" })] })] }));
     },
 };
+const radioPreviewRows = [
+    { label: "Default", checked: false },
+    { label: "Hover", checked: false, className: "!border-function-default-hover" },
+    { label: "Disable", checked: false, disabled: true },
+    { label: "Checked", checked: true },
+    {
+        label: "Checked - Hover",
+        checked: true,
+        className: "!data-[state=checked]:border-function-active-hover !data-[state=checked]:text-function-active-hover",
+    },
+    { label: "Checked - Disable", checked: true, 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-[360px] flex-col gap-4 rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-6", children: radioPreviewRows.map((row) => (_jsxs("div", { className: "grid grid-cols-[160px_16px] items-center gap-4", children: [_jsx("span", { className: "text-sm font-medium text-text-white", children: row.label }), _jsx(RadioGroup, { defaultValue: row.checked ? "option" : undefined, disabled: row.disabled, children: _jsx(RadioGroupItem, { value: "option", className: row.className }) })] }, row.label))) }) })),
+};

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, {}),
+};

package/dist/components/TextInput/TextInput.styles.js

@@ -37,6 +37,9 @@ export const inputVariant = cva([
         error: {
             true: "ring-input-error hover:ring-input-error focus:ring-input-error",
         },
+        warning: {
+            true: "ring-warning-stroke hover:ring-warning-stroke focus:ring-warning-stroke",
+        },
         hasClearIcon: {
             true: "",
         },
@@ -343,11 +346,15 @@ export const helperTextVariant = cva(["typography-small1 flex flex-row items-cen
             true: "text-input-error",
             false: "text-input-filled-text",
         },
+        warning: {
+            true: "text-warning",
+        },
     },
     defaultVariants: {
         size: "md",
         disabled: false,
         error: false,
+        warning: false,
     },
 });
 const iconInteractiveColorStateClasses = [
@@ -419,6 +426,9 @@ export const segmentedIconWrapperVariant = cva([
         error: {
             false: "",
         },
+        warning: {
+            false: "",
+        },
         position: {
             start: [
                 "inset-y-0 left-0 ",
@@ -473,11 +483,23 @@ export const segmentedIconWrapperVariant = cva([
             error: true,
             className: "border-l-input-error",
         },
+        // --- Warning start ---
+        {
+            position: "start",
+            warning: true,
+            className: "border-r-warning-stroke",
+        },
+        {
+            position: "end",
+            warning: true,
+            className: "border-l-warning-stroke",
+        },
     ],
     defaultVariants: {
         size: "md",
         rounded: "normal",
         error: false,
+        warning: false,
         position: "end",
     },
 });

package/dist/components/Toast/Toast.js

@@ -25,18 +25,18 @@ const ToastViewport = React.forwardRef((_a, ref) => {
 });
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 const Toast = React.forwardRef((_a, ref) => {
-    var { className, variant } = _a, props = __rest(_a, ["className", "variant"]);
-    return (_jsx(ToastPrimitives.Root, Object.assign({ ref: ref, className: cn(toastVariants({ variant }), className) }, props)));
+    var { className, variant, showBorder } = _a, props = __rest(_a, ["className", "variant", "showBorder"]);
+    return (_jsx(ToastPrimitives.Root, Object.assign({ ref: ref, className: cn(toastVariants({ variant, showBorder }), className) }, props)));
 });
 Toast.displayName = ToastPrimitives.Root.displayName;
 const ToastAction = React.forwardRef((_a, ref) => {
     var { className, children } = _a, props = __rest(_a, ["className", "children"]);
-    return (_jsx(ToastPrimitives.Action, Object.assign({ ref: ref, className: cn("", className) }, props, { asChild: true, children: _jsx(Button, { variant: "outline", size: "sm", children: children }) })));
+    return (_jsx(ToastPrimitives.Action, Object.assign({ ref: ref, className: cn("", className) }, props, { asChild: true, children: _jsx(Button, { variant: "outline", color: "secondary", size: "sm", children: children }) })));
 });
 ToastAction.displayName = ToastPrimitives.Action.displayName;
 const ToastClose = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(ToastPrimitives.Close, Object.assign({ ref: ref, className: cn("-mr-2 self-center text-input-default-text", className), "toast-close": "" }, props, { asChild: true, children: _jsx(ActionButton, { variant: "icon", size: "sm", children: _jsx(Icon, { type: "heroicons", name: "xmark" }) }) })));
+    return (_jsx(ToastPrimitives.Close, Object.assign({ ref: ref, className: cn("-mr-2 self-center text-grey-light", className), "toast-close": "" }, props, { asChild: true, children: _jsx(ActionButton, { variant: "icon", size: "sm", children: _jsx(Icon, { type: "heroicons", name: "xmark" }) }) })));
 });
 ToastClose.displayName = ToastPrimitives.Close.displayName;
 const ToastTitle = React.forwardRef((_a, ref) => {
@@ -46,7 +46,7 @@ const ToastTitle = React.forwardRef((_a, ref) => {
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
 const ToastDescription = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(ToastPrimitives.Description, Object.assign({ ref: ref, className: cn("typography-subtitile5 text-input-default-text", className) }, props)));
+    return (_jsx(ToastPrimitives.Description, Object.assign({ ref: ref, className: cn("typography-subtitile4 text-grey-light", className) }, props)));
 });
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
 export { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, };

package/dist/components/Toast/Toast.stories.js

@@ -11,9 +11,13 @@ const meta = {
     tags: ["autodocs"],
     parameters: {
         layout: "fullscreen",
+        backgrounds: {
+            default: "white",
+            values: [{ name: "white", value: "#ffffff" }],
+        },
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "flex  max-h-screen w-full", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "flex max-h-screen w-full bg-white p-4", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;
@@ -38,11 +42,15 @@ export const Simple = {
                 "bottom-right",
             ],
         },
+        showBorder: {
+            control: "boolean",
+        },
     },
     args: {
         variant: "default",
         contentMode: "horizontal",
         position: "top-center",
+        showBorder: false,
     },
     render: (args) => {
         console.log("args ", args);
@@ -53,11 +61,12 @@ export const Simple = {
         useEffect(() => {
             toast({
                 variant: props.variant,
+                showBorder: props.showBorder,
                 title: "Success",
                 description: "This is an Info alert — check it out!",
                 contentMode: props.contentMode,
             });
-        }, [props.variant, props.contentMode]);
+        }, [props.variant, props.contentMode, props.showBorder]);
         return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(Toaster, {}), _jsx(Button, { onClick: () => {
                         toast({
                             title: "Scheduled: Catch up",

package/dist/components/Toast/Toast.styles.js

@@ -1,21 +1,53 @@
 import { cva } from "class-variance-authority";
 export const toastVariants = cva([
     "group pointer-events-auto relative flex w-full",
-    "rounded-md shadow-lg px-4 py-3 gap-1",
+    "rounded-lg shadow-[0px_8px_16px_0px_rgba(0,0,0,0.12)] px-4 py-3 gap-1",
     "transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
     "bg-base-popup text-base-popup-foreground",
 ], {
     variants: {
         variant: {
-            default: "border",
-            success: "border border-success-stroke",
-            info: "border border-info-stroke",
-            warning: "border border-warning-stroke",
-            error: "border border-error-stroke",
+            default: "",
+            success: "",
+            info: "",
+            warning: "",
+            error: "",
+        },
+        showBorder: {
+            true: "",
+            false: "border-transparent",
         },
     },
+    compoundVariants: [
+        {
+            variant: "default",
+            showBorder: true,
+            className: "border",
+        },
+        {
+            variant: "success",
+            showBorder: true,
+            className: "border border-success-stroke",
+        },
+        {
+            variant: "info",
+            showBorder: true,
+            className: "border border-info-stroke",
+        },
+        {
+            variant: "warning",
+            showBorder: true,
+            className: "border border-warning-stroke",
+        },
+        {
+            variant: "error",
+            showBorder: true,
+            className: "border border-error-stroke",
+        },
+    ],
     defaultVariants: {
         variant: "success",
+        showBorder: false,
     },
 });
 export const toastViewportVariants = cva(["fixed z-[1000] flex w-auto flex-col-reverse px-4"], {

package/dist/components/Toast/Toaster.js

@@ -21,6 +21,22 @@ export function Toaster(_a) {
     const { toasts, position } = useToast();
     return (_jsxs(ToastProvider, Object.assign({}, toastProviderProps, { children: [toasts.map(function (_a) {
                 var { id, title, description, action, contentMode = "horizontal", iconProps, renderIcon } = _a, props = __rest(_a, ["id", "title", "description", "action", "contentMode", "iconProps", "renderIcon"]);
-                return (_jsxs(Toast, Object.assign({}, props, { children: [_jsx("div", { className: cn(toastIconVariants({ variant: props.variant }), iconWrapperClassName), children: renderIcon ? (renderIcon === null || renderIcon === void 0 ? void 0 : renderIcon()) : (_jsx(Icon, Object.assign({ type: "heroicons", name: "check-circle", className: "size-6" }, iconProps))) }), _jsxs("div", { className: cn(toastContentVariants({ contentMode }), contentClassName), children: [title && (_jsx(ToastTitle, { className: titleClassName, children: title })), description && (_jsx(ToastDescription, { className: descriptionClassName, children: description }))] }), _jsx("div", { className: cn("self-center ml-[var(--spacing-spacing-xl)]", actionWrapperClassName), children: action }), _jsx(ToastClose, {})] }), id));
+                const defaultIconName = props.variant === "error"
+                    ? "circle-x"
+                    : props.variant === "warning"
+                        ? "circle-alert"
+                        : props.variant === "info"
+                            ? "info"
+                            : "circle-check";
+                const titleToneClass = props.variant === "error"
+                    ? "text-error"
+                    : props.variant === "warning"
+                        ? "text-warning"
+                        : props.variant === "info"
+                            ? "text-info"
+                            : props.variant === "success"
+                                ? "text-success"
+                                : "text-base-popup-foreground";
+                return (_jsxs(Toast, Object.assign({}, props, { children: [_jsx("div", { className: cn(toastIconVariants({ variant: props.variant }), iconWrapperClassName), children: renderIcon ? (renderIcon === null || renderIcon === void 0 ? void 0 : renderIcon()) : (_jsx(Icon, Object.assign({ type: "lucide", name: defaultIconName, className: "size-[22px]" }, iconProps))) }), _jsxs("div", { className: cn(toastContentVariants({ contentMode }), contentClassName), children: [title && (_jsx(ToastTitle, { className: cn(titleToneClass, titleClassName), children: title })), description && (_jsx(ToastDescription, { className: descriptionClassName, children: description }))] }), _jsx("div", { className: cn("self-center ml-[var(--spacing-spacing-xl)]", actionWrapperClassName), children: action }), _jsx(ToastClose, {})] }), id));
             }), _jsx(ToastViewport, { position: position, className: viewportClassName })] })));
 }