@rovula/ui 0.1.3 → 0.1.4

package/src/components/Switch/Switch.tsx

@@ -3,58 +3,81 @@
 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<
   React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & {
+    forceHover?: boolean;
+  }
+>(({ className, forceHover = false, ...props }, ref) => (
   <SwitchPrimitives.Root
-    className={cn(
-      switchBaseClasses,
-      switchStateClasses.unchecked,
-      switchStateClasses.checked,
-      switchStateClasses.disabled,
-      className
-    )}
+    className={cn(switchRootVariants({ forceHover }), className)}
     {...props}
     ref={ref}
   >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        thumbBaseClasses,
-        thumbStateClasses.unchecked,
-        thumbStateClasses.checked,
-        thumbStateClasses.hover,
-        thumbStateClasses.hoverColor,
-        thumbStateClasses.disabled
-      )}
-    />
+    <SwitchPrimitives.Thumb className={switchThumbVariants({ forceHover })}>
+      <span aria-hidden className={switchThumbHaloVariants()}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="40"
+          height="40"
+          viewBox="0 0 40 40"
+          fill="none"
+        >
+          <g filter="url(#switch-hover-halo-shadow)">
+            <circle
+              cx="20"
+              cy="18"
+              r="12"
+              fill="currentColor"
+              shapeRendering="crispEdges"
+            />
+          </g>
+          <defs>
+            <filter
+              id="switch-hover-halo-shadow"
+              x="0"
+              y="0"
+              width="40"
+              height="40"
+              filterUnits="userSpaceOnUse"
+              colorInterpolationFilters="sRGB"
+            >
+              <feFlood floodOpacity="0" result="BackgroundImageFix" />
+              <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"
+              />
+              <feOffset dy="2" />
+              <feGaussianBlur stdDeviation="4" />
+              <feComposite in2="hardAlpha" operator="out" />
+              <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"
+              />
+              <feBlend
+                mode="normal"
+                in2="BackgroundImageFix"
+                result="effect1_dropShadow"
+              />
+              <feBlend
+                mode="normal"
+                in="SourceGraphic"
+                in2="effect1_dropShadow"
+                result="shape"
+              />
+            </filter>
+          </defs>
+        </svg>
+      </span>
+    </SwitchPrimitives.Thumb>
   </SwitchPrimitives.Root>
 ));
 

package/src/components/TextInput/TextInput.stories.tsx

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

package/src/components/TextInput/TextInput.styles.ts

@@ -41,6 +41,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: "",
       },
@@ -356,11 +359,15 @@ export const helperTextVariant = cva(
         true: "text-input-error",
         false: "text-input-filled-text",
       },
+      warning: {
+        true: "text-warning",
+      },
     },
     defaultVariants: {
       size: "md",
       disabled: false,
       error: false,
+      warning: false,
     },
   },
 );
@@ -449,6 +456,9 @@ export const segmentedIconWrapperVariant = cva(
       error: {
         false: "",
       },
+      warning: {
+        false: "",
+      },
       position: {
         start: [
           "inset-y-0 left-0 ",
@@ -503,11 +513,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/src/components/TextInput/TextInput.tsx

@@ -32,9 +32,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;
@@ -70,9 +73,12 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       iconMode = "solid",
       helperText,
       errorMessage,
+      warningMessage,
+      status,
       fullwidth = true,
       disabled = false,
       error = false,
+      warning = false,
       required = true,
       isFloatingLabel = true,
       keepCloseIconOnValue = false,
@@ -95,6 +101,21 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
     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,
@@ -102,7 +123,8 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       variant,
       fullwidth,
       disabled,
-      error,
+      error: isError,
+      warning: isWarning,
       hasSearchIcon:
         (iconMode === "flat" && hasLeftSectionIcon) || hasSearchIcon,
       hasClearIcon:
@@ -113,7 +135,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
     const labelClassname = labelVariant({
       size,
       disabled,
-      error,
+      error: isError,
       hasSearchIcon:
         (iconMode === "flat" && hasLeftSectionIcon) || hasSearchIcon,
       hasLeftSectionIcon: iconMode === "solid" ? hasLeftSectionIcon : false,
@@ -121,7 +143,8 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
     });
     const helperTextClassname = helperTextVariant({
       size,
-      error,
+      error: isError,
+      warning: isWarning,
       disabled,
     });
     const inlineEndIconWrapperClassname = inlineEndIconWrapperVariant({ size });
@@ -135,13 +158,15 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
     const startSegmentIconWrapperClassname = segmentedIconWrapperVariant({
       size,
       rounded,
-      error,
+      error: isError,
+      warning: isWarning,
       position: "start",
     });
     const endSegmentIconWrapperClassname = segmentedIconWrapperVariant({
       size,
       rounded,
-      error,
+      error: isError,
+      warning: isWarning,
       position: "end",
     });
 
@@ -346,24 +371,28 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
             )}
           </label>
         </div>
-        {(errorMessage || helperText || keepFooterSpace) && (
+        {(feedbackMessage || keepFooterSpace) && (
           <span className={helperTextClassname}>
-            {(errorMessage || helperText) && (
+            {feedbackMessage && (
               <span className="h-full shrink-0">
                 <CircleAlert
                   width={14}
                   height={14}
                   className={cn(
-                    "fill-none",
-                    error ? "stroke-input-error" : "stroke-input-filled-text"
+                    "fill-none stroke-current",
+                    isError
+                      ? "text-input-error"
+                      : isWarning
+                        ? "text-warning"
+                        : "text-input-filled-text"
                   )}
                 />
               </span>
             )}
-            {keepFooterSpace && !error && !helperText && (
+            {keepFooterSpace && !feedbackMessage && (
               <span className="block min-h-[14px]" aria-hidden />
             )}
-            {(error ? errorMessage : helperText) || ''}
+            {feedbackMessage || ""}
           </span>
         )}
       </div>

package/src/components/Toast/Toast.stories.tsx

@@ -14,10 +14,14 @@ const meta = {
   tags: ["autodocs"],
   parameters: {
     layout: "fullscreen",
+    backgrounds: {
+      default: "white",
+      values: [{ name: "white", value: "#ffffff" }],
+    },
   },
   decorators: [
     (Story) => (
-      <div className="flex  max-h-screen w-full">
+      <div className="flex max-h-screen w-full bg-white p-4">
         <Story />
       </div>
     ),
@@ -47,11 +51,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);
@@ -66,11 +74,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 (
       <div className="flex flex-row gap-4 w-full">
@@ -98,6 +107,7 @@ export const Simple = {
     | null
     | undefined;
   contentMode: "horizontal" | "vertical";
+  showBorder: boolean;
   position?:
     | "top-center"
     | "top-left"

package/src/components/Toast/Toast.styles.tsx

@@ -3,22 +3,54 @@ 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,
     },
   }
 );

package/src/components/Toast/Toast.tsx

@@ -15,7 +15,7 @@ const ToastProvider = ToastPrimitives.Provider;
 const ToastViewport = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Viewport>,
   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport> &
-    VariantProps<typeof toastViewportVariants>
+  VariantProps<typeof toastViewportVariants>
 >(({ className, position, ...props }, ref) => (
   <ToastPrimitives.Viewport
     ref={ref}
@@ -28,12 +28,12 @@ ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
+  VariantProps<typeof toastVariants>
+>(({ className, variant, showBorder, ...props }, ref) => {
   return (
     <ToastPrimitives.Root
       ref={ref}
-      className={cn(toastVariants({ variant }), className)}
+      className={cn(toastVariants({ variant, showBorder }), className)}
       {...props}
     />
   );
@@ -50,7 +50,7 @@ const ToastAction = React.forwardRef<
     {...props}
     asChild
   >
-    <Button variant="outline" size="sm">
+    <Button variant="outline" color="secondary" size="sm">
       {children}
     </Button>
   </ToastPrimitives.Action>
@@ -63,7 +63,7 @@ const ToastClose = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Close
     ref={ref}
-    className={cn("-mr-2 self-center text-input-default-text", className)}
+    className={cn("-mr-2 self-center text-grey-light", className)}
     toast-close=""
     {...props}
     asChild
@@ -93,7 +93,7 @@ const ToastDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Description
     ref={ref}
-    className={cn("typography-subtitile5 text-input-default-text", className)}
+    className={cn("typography-subtitile4 text-grey-light", className)}
     {...props}
   />
 ));

package/src/components/Toast/Toaster.tsx

@@ -47,6 +47,26 @@ export function Toaster({
         renderIcon,
         ...props
       }) {
+        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 (
           <Toast key={id} {...props}>
             <div
@@ -59,9 +79,9 @@ export function Toaster({
                 renderIcon?.()
               ) : (
                 <Icon
-                  type="heroicons"
-                  name="check-circle"
-                  className="size-6"
+                  type="lucide"
+                  name={defaultIconName}
+                  className="size-[22px]"
                   {...iconProps}
                 />
               )}
@@ -73,7 +93,9 @@ export function Toaster({
               )}
             >
               {title && (
-                <ToastTitle className={titleClassName}>{title}</ToastTitle>
+                <ToastTitle className={cn(titleToneClass, titleClassName)}>
+                  {title}
+                </ToastTitle>
               )}
               {description && (
                 <ToastDescription className={descriptionClassName}>

package/src/theme/themes/xspector/baseline.css

@@ -6,4 +6,3 @@
 @import url(components/action-button.css);
 @import url(components/loading.css);
 @import url(components/dropdown-menu.css);
-@import url(components/switch.css);

package/src/theme/tokens/components/switch.css

@@ -7,24 +7,23 @@
   /* ------------------------------------------------------------------ */
 
   /* Default State */
-  --switch-default-color: rgb(from var(--state-color-tertiary-active) r g b / 0.32);
-  --switch-thumb-default-color: var(--state-color-tertiary-active);
+  --switch-default-color: rgb(from var(--grey-grey-100, #9e9e9e) r g b / 0.32);
+  --switch-thumb-default-color: var(--grey-grey-100, #9e9e9e);
+  --switch-thumb-filter: drop-shadow(0 2px 8px rgba(145, 158, 171, 0.24));
 
   /* Hover State */
-  --switch-hover-color: rgb(from var(--state-color-tertiary-active) r g b / 0.48);
-  --switch-thumb-hover-color: var(--switch-thumb-default-color);
-  --switch-thumb-hover-ring: var(--state-color-tertiary-hover-bg);
+  --switch-hover-color: rgb(from var(--grey-grey-80, #b1b1b1) r g b / 0.48);
+  --switch-thumb-hover-color: var(--grey-grey-80, #b1b1b1);
 
   /* Active State */
-  --switch-active-color: rgb(from var(--state-color-secondary-active) r g b / 0.32);
-  --switch-thumb-active-color: var(--state-color-secondary-active);
+  --switch-active-color: rgb(from var(--state-color-primary-active) r g b / 0.32);
+  --switch-thumb-active-color: var(--state-color-primary-active, #ddcd00);
 
   /* Active Hover State */
-  --switch-active-hover-color: rgb(from var(--state-color-secondary-active) r g b / 0.48);
-  --switch-thumb-active-hover-color: var(--switch-thumb-active-color);
-  --switch-thumb-active-hover-ring: var(--state-color-secondary-hover-bg);
+  --switch-active-hover-color: rgb(from var(--state-color-primary-text-hover) r g b / 0.48);
+  --switch-thumb-active-hover-color: var(--state-color-primary-text-hover);
 
   /* Disabled State */
   --switch-disabled-color: rgb(from var(--state-color-disable-solid) r g b / 0.32);
-  --switch-thumb-disabled-color: var(--state-color-disable-solid)
+  --switch-thumb-disabled-color: var(--state-color-disable-solid, #454f5b);
 }