@rovula/ui 0.1.4 → 0.1.5

package/dist/src/theme/global.css

@@ -8539,6 +8539,16 @@ input[type=number] {
   border-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.hover\:border-l-input-active-stroke:hover {
+  --tw-border-opacity: 1;
+  border-left-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
+.hover\:border-r-input-active-stroke:hover {
+  --tw-border-opacity: 1;
+  border-right-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
 .hover\:bg-\[var\(--dropdown-menu-hover-bg\)\]:hover {
   background-color: var(--dropdown-menu-hover-bg);
 }
@@ -8819,8 +8829,8 @@ input[type=number] {
   fill: color-mix(in srgb, var(--input-color-default-text) calc(100% * 1), transparent);
 }
 
-.hover\:stroke-input-active-stroke:hover {
-  stroke: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * 1), transparent);
+.hover\:fill-input-filled-text:hover {
+  fill: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
 }
 
 .hover\:stroke-input-filled-text:hover {
@@ -11077,6 +11087,11 @@ input[type=number] {
   color: color-mix(in srgb, var(--input-color-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
 }
 
+.hover\:\[\&_svg\]\:text-input-filled-text svg:hover {
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+}
+
 .peer:hover ~ .peer-hover\:\[\&_svg\]\:text-input-filled-text svg {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/PasswordInput/PasswordInput.stories.tsx

@@ -11,7 +11,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex w-full bg-[rgb(var(--base-bg-2))]">
+      <div className="p-5 flex w-full bg-base-bg2">
         <Story />
       </div>
     ),

package/src/components/PasswordInput/PasswordInput.tsx

@@ -26,8 +26,8 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
     };
 
     const toggleIcon = visible
-      ? showIcon ?? <Icon name="eye" type="lucide" size="inherit" className="size-full stroke-input-default-stroke hover:stroke-input-active-stroke" aria-label="Hide password" />
-      : hideIcon ?? <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 ?? <Icon name="eye" type="lucide" size="inherit" className="size-full" aria-label="Hide password" />
+      : hideIcon ?? <Icon name="eye-closed" type="lucide" size="inherit" className="size-full" aria-label="Show password" />;
 
     return (
       <TextInput

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

@@ -374,10 +374,10 @@ export const helperTextVariant = cva(
 
 const iconInteractiveColorStateClasses = [
   "fill-input-default-text",
-  "peer-hover:fill-input-filled-text peer-focus:fill-input-filled-text peer-active:fill-input-filled-text",
+  "hover:fill-input-filled-text peer-hover:fill-input-filled-text peer-focus:fill-input-filled-text peer-active:fill-input-filled-text",
   "peer-disabled:fill-input-disable-stroke",
   "[&_svg]:text-input-default-text",
-  "peer-hover:[&_svg]:text-input-filled-text peer-focus:[&_svg]:text-input-filled-text peer-active:[&_svg]:text-input-filled-text",
+  "hover:[&_svg]:text-input-filled-text peer-hover:[&_svg]:text-input-filled-text peer-focus:[&_svg]:text-input-filled-text peer-active:[&_svg]:text-input-filled-text",
   "peer-disabled:[&_svg]:text-input-disable-stroke",
 ];
 
@@ -419,21 +419,18 @@ export const inlineStartIconWrapperVariant = cva(
   },
 );
 
-export const iconActionVariant = cva(
-  ["cursor-pointer z-50"],
-  {
-    variants: {
-      size: {
-        sm: "size-3",
-        md: "size-4",
-        lg: "size-5",
-      },
-    },
-    defaultVariants: {
-      size: "md",
+export const iconActionVariant = cva(["cursor-pointer z-50"], {
+  variants: {
+    size: {
+      sm: "size-3",
+      md: "size-4",
+      lg: "size-5",
     },
   },
-);
+  defaultVariants: {
+    size: "md",
+  },
+});
 
 export const segmentedIconWrapperVariant = cva(
   [
@@ -462,11 +459,11 @@ export const segmentedIconWrapperVariant = cva(
       position: {
         start: [
           "inset-y-0 left-0 ",
-          "border-r border-r-input-default-stroke peer-hover:border-r-input-active-stroke peer-focus:border-r-input-active-stroke peer-disabled:border-r-input-disable-stroke",
+          "border-r border-r-input-default-stroke hover:border-r-input-active-stroke peer-hover:border-r-input-active-stroke peer-focus:border-r-input-active-stroke peer-disabled:border-r-input-disable-stroke",
         ],
         end: [
           "inset-y-0 right-0 ",
-          "border-l border-l-input-default-stroke peer-hover:border-l-input-active-stroke peer-focus:border-l-input-active-stroke peer-disabled:border-l-input-disable-stroke",
+          "border-l border-l-input-default-stroke hover:border-l-input-active-stroke peer-hover:border-l-input-active-stroke peer-focus:border-l-input-active-stroke peer-disabled:border-l-input-disable-stroke",
         ],
       },
     },