@rovula/ui 0.0.30 → 0.0.31

package/dist/components/Search/Search.stories.js

@@ -8,7 +8,7 @@ const meta = {
         layout: "fullscreen",
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-base-bg2", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;
@@ -20,6 +20,7 @@ export const Default = {
     args: {
         label: "Choose an option:",
         fullwidth: true,
+        size: "md",
         options,
     },
     render: (args) => {

package/dist/components/TextInput/TextInput.js

@@ -70,7 +70,8 @@ export const TextInput = forwardRef((_a, ref) => {
     }, [disabled, onClickEndIcon]);
     return (_jsxs("div", { className: `inline-flex flex-col ${fullwidth ? "w-full" : ""}`, children: [_jsxs("div", { className: "relative", children: [hasSearchIcon && (_jsx("div", { className: iconSearchWrapperClassname, children: _jsx(MagnifyingGlassIcon, { className: iconClassname }) })), _jsx("input", Object.assign({}, props, { placeholder: " ", ref: inputRef, type: type, id: _id, disabled: disabled, className: cn(inputClassname, props.className) })), hasClearIcon && !hasRightSectionIcon && (_jsx("div", { className: iconWrapperClassname, style: {
                             display: keepCloseIconOnValue && props.value ? "flex" : undefined,
-                        }, children: _jsx(XCircleIcon, { type: "button", className: iconClassname, onMouseDown: handleClearInput }) })), hasRightSectionIcon && renderEndIcon ? (renderEndIcon()) : (_jsx("div", { className: endIconWrapperClassname, onClick: handleOnClickRightSectionIcon, children: endIcon })), _jsxs("label", { htmlFor: _id, className: cn(labelClassname, labelClassName), children: [label, " ", required && (_jsx("span", { className: cn("text-error", {
+                        }, children: _jsx(XCircleIcon, { type: "button", className: iconClassname, onMouseDown: handleClearInput }) })), hasRightSectionIcon &&
+                        (renderEndIcon ? (renderEndIcon()) : (_jsx("div", { className: endIconWrapperClassname, onClick: handleOnClickRightSectionIcon, children: endIcon }))), _jsxs("label", { htmlFor: _id, className: cn(labelClassname, labelClassName), children: [label, " ", required && (_jsx("span", { className: cn("text-error", {
                                     "text-input-disable-text": disabled,
                                 }), children: "*" }))] })] }), (errorMessage || helperText) && (_jsxs("span", { className: helperTextClassname, children: [_jsx("span", { className: "h-full", children: _jsx(ExclamationCircleIcon, { width: 16, height: 16, className: error ? "fill-error" : "" }) }), errorMessage || helperText] }))] }));
 });

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

@@ -1,5 +1,6 @@
 import { cva } from "class-variance-authority";
 export const inputVariant = cva([
+    "truncate",
     "border-0 outline-none",
     "p-1 flex w-auto box-border",
     "peer text-input-filled-text placeholder:text-transparent bg-transparent caret-primary",
@@ -72,47 +73,47 @@ export const inputVariant = cva([
         {
             hasSearchIcon: true,
             size: "sm",
-            class: "ps-6",
+            class: "!ps-6",
         },
         {
             hasSearchIcon: true,
             size: "md",
-            class: "ps-9",
+            class: "!ps-9",
         },
         {
             hasSearchIcon: true,
             size: "lg",
-            class: "ps-11",
+            class: "!ps-11",
         },
         {
             leftSectionIcon: true,
             size: "sm",
-            class: "ps-[38px]",
+            class: "!ps-[38px]",
         },
         {
             leftSectionIcon: true,
             size: "md",
-            class: "ps-[46px]",
+            class: "!ps-[46px]",
         },
         {
             leftSectionIcon: true,
             size: "lg",
-            class: "ps-[72px]",
+            class: "!ps-[72px]",
         },
         {
             rightSectionIcon: true,
             size: "sm",
-            class: "pe-[38px]",
+            class: "!pe-[38px]",
         },
         {
             rightSectionIcon: true,
             size: "md",
-            class: "pe-[46px]",
+            class: "!pe-[46px]",
         },
         {
             rightSectionIcon: true,
             size: "lg",
-            class: "pe-[72px]",
+            class: "!pe-[72px]",
         },
     ],
     defaultVariants: {

package/dist/esm/bundle.css

@@ -709,6 +709,9 @@ body {
 .grid{
   display: grid;
 }
+.contents{
+  display: contents;
+}
 .hidden{
   display: none;
 }
@@ -719,14 +722,6 @@ body {
   width: 3.5rem;
   height: 3.5rem;
 }
-.size-2{
-  width: 0.5rem;
-  height: 0.5rem;
-}
-.size-2\.5{
-  width: 0.625rem;
-  height: 0.625rem;
-}
 .size-3{
   width: 0.75rem;
   height: 0.75rem;
@@ -810,6 +805,9 @@ body {
 .h-\[32px\]{
   height: 32px;
 }
+.h-\[400px\]{
+  height: 400px;
+}
 .h-\[40px\]{
   height: 40px;
 }
@@ -1286,6 +1284,10 @@ body {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--state-color-error-stroke) calc(100% * var(--tw-border-opacity)), transparent);
 }
+.border-function-default-solid{
+  --tw-border-opacity: 1;
+  border-color: color-mix(in srgb, var(--function-default-solid) calc(100% * var(--tw-border-opacity)), transparent);
+}
 .border-info-stroke{
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--state-color-info-stroke) calc(100% * var(--tw-border-opacity)), transparent);
@@ -1328,6 +1330,10 @@ body {
   --tw-border-opacity: 1;
   border-left-color: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * var(--tw-border-opacity)), transparent);
 }
+.border-l-input-disable-stroke{
+  --tw-border-opacity: 1;
+  border-left-color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-border-opacity)), transparent);
+}
 .border-l-input-error{
   --tw-border-opacity: 1;
   border-left-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-border-opacity)), transparent);
@@ -1403,6 +1409,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--base-color-popup-curtain) calc(100% * var(--tw-bg-opacity)), transparent);
 }
+.bg-base-popup-highlight{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--base-color-popup-hightlight) calc(100% * var(--tw-bg-opacity)), transparent);
+}
 .bg-black{
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -1499,6 +1509,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--other-transparency-error-8) calc(100% * var(--tw-bg-opacity)), transparent);
 }
+.bg-function-active-hover{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-bg-opacity)), transparent);
+}
 .bg-gray-200{
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@@ -1547,10 +1561,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-bg-opacity)), transparent);
 }
-.bg-secondary-hover{
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-hover) calc(100% * var(--tw-bg-opacity)), transparent);
-}
 .bg-state-disable-solid{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -1679,6 +1689,9 @@ body {
 .fill-input-default-text{
   fill: color-mix(in srgb, var(--input-color-default-text) calc(100% * 1), transparent);
 }
+.fill-input-disable-stroke{
+  fill: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * 1), transparent);
+}
 .fill-primary{
   fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
 }
@@ -1688,6 +1701,9 @@ body {
 .stroke-input-default-stroke{
   stroke: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * 1), transparent);
 }
+.stroke-input-disable-stroke{
+  stroke: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * 1), transparent);
+}
 .stroke-primary-default{
   stroke: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
 }
@@ -1822,23 +1838,41 @@ body {
   padding-top: var(--spacing-spacing-xxs);
   padding-bottom: var(--spacing-spacing-xxs);
 }
+.\!pe-\[38px\]{
+  padding-inline-end: 38px !important;
+}
+.\!pe-\[46px\]{
+  padding-inline-end: 46px !important;
+}
+.\!pe-\[72px\]{
+  padding-inline-end: 72px !important;
+}
+.\!ps-11{
+  padding-inline-start: 2.75rem !important;
+}
+.\!ps-6{
+  padding-inline-start: 1.5rem !important;
+}
+.\!ps-9{
+  padding-inline-start: 2.25rem !important;
+}
+.\!ps-\[38px\]{
+  padding-inline-start: 38px !important;
+}
+.\!ps-\[46px\]{
+  padding-inline-start: 46px !important;
+}
+.\!ps-\[72px\]{
+  padding-inline-start: 72px !important;
+}
 .pe-\[30px\]{
   padding-inline-end: 30px;
 }
-.pe-\[38px\]{
-  padding-inline-end: 38px;
-}
 .pe-\[40px\]{
   padding-inline-end: 40px;
 }
-.pe-\[46px\]{
-  padding-inline-end: 46px;
-}
-.pe-\[48px\]{
-  padding-inline-end: 48px;
-}
-.pe-\[72px\]{
-  padding-inline-end: 72px;
+.pe-\[68px\]{
+  padding-inline-end: 68px;
 }
 .pl-8{
   padding-left: 2rem;
@@ -1852,24 +1886,6 @@ body {
 .pr-xxl{
   padding-right: var(--spacing-spacing-xxl);
 }
-.ps-11{
-  padding-inline-start: 2.75rem;
-}
-.ps-6{
-  padding-inline-start: 1.5rem;
-}
-.ps-9{
-  padding-inline-start: 2.25rem;
-}
-.ps-\[38px\]{
-  padding-inline-start: 38px;
-}
-.ps-\[46px\]{
-  padding-inline-start: 46px;
-}
-.ps-\[72px\]{
-  padding-inline-start: 72px;
-}
 .text-left{
   text-align: left;
 }
@@ -2220,6 +2236,14 @@ body {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--foreground) calc(100% * var(--tw-text-opacity)), transparent);
 }
+.text-function-active-icon{
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--function-active-icon) calc(100% * var(--tw-text-opacity)), transparent);
+}
+.text-function-default-solid{
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--function-default-solid) calc(100% * var(--tw-text-opacity)), transparent);
+}
 .text-gray-400{
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -2699,13 +2723,13 @@ body {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--button-warning-solid-hover-border) calc(100% * var(--tw-border-opacity)), transparent);
 }
-.hover\:border-input-active-stroke:hover{
+.hover\:border-function-default-hover:hover{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity)), transparent);
+  border-color: color-mix(in srgb, var(--function-default-hover) calc(100% * var(--tw-border-opacity)), transparent);
 }
-.hover\:border-primary-hover:hover{
+.hover\:border-input-active-stroke:hover{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-primary-hover) calc(100% * var(--tw-border-opacity)), transparent);
+  border-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity)), transparent);
 }
 .hover\:bg-action-button-icon-active-hover:hover{
   --tw-bg-opacity: 1;
@@ -4043,6 +4067,9 @@ body {
 .peer:disabled ~ .peer-disabled\:opacity-70{
   opacity: 0.7;
 }
+.data-\[disabled\]\:\!pointer-events-none[data-disabled]{
+  pointer-events: none !important;
+}
 .data-\[disabled\]\:pointer-events-none[data-disabled]{
   pointer-events: none;
 }
@@ -4066,12 +4093,15 @@ body {
   --tw-translate-x: var(--radix-toast-swipe-move-x);
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.data-\[disabled\]\:\!cursor-not-allowed[data-disabled]{
+  cursor: not-allowed !important;
+}
 .data-\[disabled\]\:cursor-not-allowed[data-disabled]{
   cursor: not-allowed;
 }
-.data-\[disabled\]\:border-state-disable-solid[data-disabled]{
-  --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-border-opacity)), transparent);
+.data-\[disabled\]\:\!border-state-disable-solid[data-disabled]{
+  --tw-border-opacity: 1 !important;
+  border-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-border-opacity)), transparent) !important;
 }
 .data-\[loading\=true\]\:border-button-error-flat-active[data-loading=true]{
   --tw-border-opacity: 1;
@@ -4157,9 +4187,9 @@ body {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--button-warning-solid-active-border) calc(100% * var(--tw-border-opacity)), transparent);
 }
-.data-\[state\=checked\]\:border-secondary[data-state=checked]{
+.data-\[state\=checked\]\:border-function-active-solid[data-state=checked]{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-border-opacity)), transparent);
+  border-color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-border-opacity)), transparent);
 }
 .data-\[disabled\]\:\!bg-\[var\(--dropdown-menu-disabled-bg\)\][data-disabled]{
   background-color: var(--dropdown-menu-disabled-bg) !important;
@@ -4254,9 +4284,9 @@ body {
 .data-\[state\=\'checked\'\]\:bg-\[var\(--dropdown-menu-selected-bg\)\][data-state='checked']{
   background-color: var(--dropdown-menu-selected-bg);
 }
-.data-\[state\=checked\]\:bg-secondary[data-state=checked]{
+.data-\[state\=checked\]\:bg-function-active-solid[data-state=checked]{
   --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-bg-opacity)), transparent);
+  background-color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 .data-\[state\=checked\]\:bg-secondary-active\/\[0\.32\][data-state=checked]{
   background-color: color-mix(in srgb, var(--state-color-secondary-active) calc(100% * 0.32), transparent);
@@ -4276,8 +4306,8 @@ body {
 .data-\[state\=unchecked\]\:bg-tertiary-active\/\[0\.32\][data-state=unchecked]{
   background-color: color-mix(in srgb, var(--state-color-tertiary-active) calc(100% * 0.32), transparent);
 }
-.data-\[disabled\]\:fill-state-disable-solid[data-disabled]{
-  fill: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * 1), transparent);
+.data-\[disabled\]\:\!fill-state-disable-solid[data-disabled]{
+  fill: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * 1), transparent) !important;
 }
 .data-\[loading\=true\]\:fill-button-error-flat-active[data-loading=true]{
   fill: color-mix(in srgb, var(--button-error-flat-active-text) calc(100% * 1), transparent);
@@ -4345,9 +4375,9 @@ body {
 .data-\[disabled\]\:\!text-\[var\(--dropdown-menu-disabled-text\)\][data-disabled]{
   color: var(--dropdown-menu-disabled-text) !important;
 }
-.data-\[disabled\]\:text-state-disable-solid[data-disabled]{
-  --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-text-opacity)), transparent);
+.data-\[disabled\]\:\!text-state-disable-solid[data-disabled]{
+  --tw-text-opacity: 1 !important;
+  color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-text-opacity)), transparent) !important;
 }
 .data-\[loading\=true\]\:text-button-error-flat-active[data-loading=true]{
   --tw-text-opacity: 1;
@@ -4436,13 +4466,13 @@ body {
 .data-\[state\=\'checked\'\]\:text-\[var\(--dropdown-menu-selected-text\)\][data-state='checked']{
   color: var(--dropdown-menu-selected-text);
 }
-.data-\[state\=checked\]\:text-secondary[data-state=checked]{
+.data-\[state\=checked\]\:text-function-active-icon[data-state=checked]{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-text-opacity)), transparent);
+  color: color-mix(in srgb, var(--function-active-icon) calc(100% * var(--tw-text-opacity)), transparent);
 }
-.data-\[state\=checked\]\:text-secondary-foreground[data-state=checked]{
+.data-\[state\=checked\]\:text-function-active-solid[data-state=checked]{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--secondary-foreground) calc(100% * var(--tw-text-opacity)), transparent);
+  color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-text-opacity)), transparent);
 }
 .data-\[state\=open\]\:text-primary-foreground[data-state=open]{
   --tw-text-opacity: 1;
@@ -4456,23 +4486,23 @@ body {
   line-height: var(--subtitle5-line-height, 22px);
   font-weight: var(--subtitle5-weight, 500);
 }
-.hover\:data-\[state\=checked\]\:border-secondary-hover[data-state=checked]:hover{
+.hover\:data-\[state\=checked\]\:border-function-active-hover[data-state=checked]:hover{
   --tw-border-opacity: 1;
-  border-color: color-mix(in srgb, var(--state-color-secondary-hover) calc(100% * var(--tw-border-opacity)), transparent);
+  border-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-border-opacity)), transparent);
+}
+.hover\:data-\[state\=checked\]\:bg-function-active-hover[data-state=checked]:hover{
+  --tw-bg-opacity: 1;
+  background-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-bg-opacity)), transparent);
 }
 .hover\:data-\[state\=checked\]\:bg-secondary-active\/\[0\.48\][data-state=checked]:hover{
   background-color: color-mix(in srgb, var(--state-color-secondary-active) calc(100% * 0.48), transparent);
 }
-.hover\:data-\[state\=checked\]\:bg-secondary-hover[data-state=checked]:hover{
-  --tw-bg-opacity: 1;
-  background-color: color-mix(in srgb, var(--state-color-secondary-hover) calc(100% * var(--tw-bg-opacity)), transparent);
-}
 .hover\:data-\[state\=unchecked\]\:bg-tertiary-active\/\[0\.48\][data-state=unchecked]:hover{
   background-color: color-mix(in srgb, var(--state-color-tertiary-active) calc(100% * 0.48), transparent);
 }
-.hover\:data-\[state\=checked\]\:text-secondary-hover[data-state=checked]:hover{
+.hover\:data-\[state\=checked\]\:text-function-active-hover[data-state=checked]:hover{
   --tw-text-opacity: 1;
-  color: color-mix(in srgb, var(--state-color-secondary-hover) calc(100% * var(--tw-text-opacity)), transparent);
+  color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-text-opacity)), transparent);
 }
 .group:hover .group-hover\:data-\[state\=checked\]\:ring-secondary-hover-bg[data-state=checked]{
   --tw-ring-opacity: 1;