myk-library 1.1.1 → 1.1.2

package/dist/index.es.js

@@ -247,7 +247,12 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
         &:focus {
           outline: none;
           border-color: ${({theme:e})=>e.colors.primary[600]};
-          box-shadow: 0 0 0 3px ${({theme:e})=>e.colors.primary[100]};
+          box-shadow: 0 0 0 3px ${({theme:e})=>e.colors.primary[200]};
+        }
+
+        &:active:not(:disabled) {
+          transform: translateY(1px);
+          transition: all 0.1s ease-in-out;
         }
       `;case"filled":return O`
         border: none;
@@ -262,7 +267,12 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
         &:focus {
           outline: none;
           background-color: ${({theme:e})=>e.colors.gray[50]};
-          border-bottom-color: ${({theme:e})=>e.colors.primary[500]};
+          border-bottom-color: ${({theme:e})=>e.colors.primary[600]};
+        }
+
+        &:active:not(:disabled) {
+          transform: translateY(1px);
+          transition: all 0.1s ease-in-out;
         }
       `;case"standard":return O`
         border: none;
@@ -277,7 +287,12 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
         &:focus {
           outline: none;
           border-bottom-width: 2px;
-          border-bottom-color: ${({theme:e})=>e.colors.primary[500]};
+          border-bottom-color: ${({theme:e})=>e.colors.primary[600]};
+        }
+
+        &:active:not(:disabled) {
+          transform: translateY(1px);
+          transition: all 0.1s ease-in-out;
         }
       `}})(e)}
   ${({$size:e})=>(e=>{switch(e){case"sm":return O`
@@ -299,10 +314,10 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
     `}
 
   ${({$isError:e,theme:t})=>e&&O`
-      border-color: ${t.colors.error[500]};
+      border-color: ${t.colors.error[600]};
 
       &:focus {
-        border-color: ${t.colors.error[500]};
+        border-color: ${t.colors.error[600]};
         box-shadow: 0 0 0 3px ${t.colors.error[100]};
       }
     `}
@@ -372,8 +387,8 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
       `}})(e)}
 
   ${({$checked:e,$indeterminate:t,theme:n})=>(e||t)&&O`
-      background-color: ${n.colors.primary[500]};
-      border-color: ${n.colors.primary[500]};
+      background-color: ${n.colors.primary[600]};
+      border-color: ${n.colors.primary[600]};
     `}
 
   ${({$isError:e,theme:t})=>e&&O`
@@ -399,11 +414,26 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
 
   ${Ee}:focus-visible + & {
     outline: none;
-    box-shadow: 0 0 0 3px ${({theme:e})=>e.colors.primary[100]};
+    box-shadow: 0 0 0 3px ${({theme:e})=>e.colors.primary[200]};
   }
 
   ${Ee}:not(:disabled) + &:hover {
     border-color: ${({theme:e})=>e.colors.primary[400]};
+
+    ${({$checked:e,$indeterminate:t,theme:n})=>(e||t)&&O`
+        background-color: ${le(.1,n.colors.primary[600])};
+        border-color: ${le(.1,n.colors.primary[600])};
+      `}
+  }
+
+  ${Ee}:not(:disabled):active + & {
+    transform: translateY(1px);
+    transition: all 0.1s ease-in-out;
+
+    ${({$checked:e,$indeterminate:t,theme:n})=>(e||t)&&O`
+        background-color: ${le(.15,n.colors.primary[600])};
+        border-color: ${le(.15,n.colors.primary[600])};
+      `}
   }
 
   /* Checkmark icon */
@@ -425,6 +455,7 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
   }
 `,Pe=k.span`
   font-size: ${({theme:e})=>e.fontSize.md};
+  font-weight: 500;
   color: ${({theme:e,$disabled:t})=>t?e.colors.gray[400]:e.colors.gray[900]};
   line-height: 1.5;
 
@@ -516,11 +547,36 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
 
   ${_e}:focus-visible + & {
     outline: none;
-    box-shadow: 0 0 0 3px ${({theme:e})=>e.colors.primary[100]};
+    box-shadow: 0 0 0 3px ${({theme:e})=>e.colors.primary[200]};
   }
 
   ${_e}:not(:disabled) + &:hover {
     border-color: ${({theme:e})=>e.colors.primary[400]};
+
+    ${({$checked:e,theme:t})=>e&&O`
+        border-color: ${le(.1,t.colors.primary[600])};
+      `}
+
+    &::after {
+      ${({$checked:e,theme:t})=>e&&O`
+          background-color: ${le(.1,t.colors.primary[600])};
+        `}
+    }
+  }
+
+  ${_e}:not(:disabled):active + & {
+    transform: translateY(1px);
+    transition: all 0.1s ease-in-out;
+
+    ${({$checked:e,theme:t})=>e&&O`
+        border-color: ${le(.15,t.colors.primary[600])};
+      `}
+
+    &::after {
+      ${({$checked:e,theme:t})=>e&&O`
+          background-color: ${le(.15,t.colors.primary[600])};
+        `}
+    }
   }
 
   /* Inner filled circle when checked */
@@ -533,6 +589,7 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
   }
 `,Te=k.span`
   font-size: ${({theme:e})=>e.fontSize.md};
+  font-weight: 500;
   color: ${({theme:e,$disabled:t})=>t?e.colors.gray[400]:e.colors.gray[900]};
   line-height: 1.5;
 
@@ -587,8 +644,13 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
 
         &:focus {
           outline: none;
-          border-color: ${({theme:e})=>e.colors.primary[500]};
-          box-shadow: 0 0 0 3px ${({theme:e})=>e.colors.primary[100]};
+          border-color: ${({theme:e})=>e.colors.primary[600]};
+          box-shadow: 0 0 0 3px ${({theme:e})=>e.colors.primary[200]};
+        }
+
+        &:active:not(:disabled) {
+          transform: translateY(1px);
+          transition: all 0.1s ease-in-out;
         }
       `;case"filled":return O`
         border: none;
@@ -603,7 +665,12 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
         &:focus {
           outline: none;
           background-color: ${({theme:e})=>e.colors.gray[50]};
-          border-bottom-color: ${({theme:e})=>e.colors.primary[500]};
+          border-bottom-color: ${({theme:e})=>e.colors.primary[600]};
+        }
+
+        &:active:not(:disabled) {
+          transform: translateY(1px);
+          transition: all 0.1s ease-in-out;
         }
       `;case"standard":return O`
         border: none;
@@ -618,7 +685,12 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
         &:focus {
           outline: none;
           border-bottom-width: 2px;
-          border-bottom-color: ${({theme:e})=>e.colors.primary[500]};
+          border-bottom-color: ${({theme:e})=>e.colors.primary[600]};
+        }
+
+        &:active:not(:disabled) {
+          transform: translateY(1px);
+          transition: all 0.1s ease-in-out;
         }
       `}})(e)}
   ${({$size:e})=>(e=>{switch(e){case"sm":return O`
@@ -643,10 +715,10 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
     `}
 
   ${({$isError:e,theme:t})=>e&&O`
-      border-color: ${t.colors.error[500]};
+      border-color: ${t.colors.error[600]};
 
       &:focus {
-        border-color: ${t.colors.error[500]};
+        border-color: ${t.colors.error[600]};
         box-shadow: 0 0 0 3px ${t.colors.error[100]};
       }
     `}
@@ -2638,6 +2710,11 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
   color: ${({theme:e})=>e.colors.gray[900]};
   transition: all ${({theme:e})=>e.transitions.fast};
 
+  /* Text overflow handling */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
   &::placeholder {
     color: ${({theme:e})=>e.colors.gray[400]};
   }
@@ -2650,7 +2727,12 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
     outline: none;
     border-color: ${({theme:e,$error:t})=>t?e.colors.error[600]:e.colors.primary[600]};
     box-shadow: 0 0 0 3px
-      ${({theme:e,$error:t})=>t?e.colors.error[100]:e.colors.primary[100]};
+      ${({theme:e,$error:t})=>t?e.colors.error[100]:e.colors.primary[200]};
+  }
+
+  &:active:not(:disabled) {
+    transform: translateY(1px);
+    transition: all 0.1s ease-in-out;
   }
 
   &:disabled {
@@ -2675,11 +2757,23 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
   padding: ${({theme:e})=>`${e.spacing.sm} ${e.spacing.md}`};
   cursor: pointer;
   background-color: ${({theme:e,$highlighted:t})=>t?e.colors.gray[100]:e.colors.white};
-  transition: background-color ${({theme:e})=>e.transitions.fast};
+  transition: all ${({theme:e})=>e.transitions.normal};
+  font-weight: 500;
+
+  /* Text overflow handling */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 
   &:hover {
     background-color: ${({theme:e})=>e.colors.gray[100]};
   }
+
+  &:active {
+    background-color: ${({theme:e})=>e.colors.gray[200]};
+    transform: translateY(1px);
+    transition: all 0.1s ease-in-out;
+  }
 `,ho=k.div`
   padding: ${({theme:e})=>`${e.spacing.md} ${e.spacing.lg}`};
   color: ${({theme:e})=>e.colors.gray[500]};
@@ -2687,7 +2781,7 @@ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import*as r from
 `,go=k.span`
   font-size: ${({theme:e})=>e.fontSize.xs};
   color: ${({theme:e,$error:t})=>t?e.colors.error[600]:e.colors.gray[600]};
-`,mo=({options:n,value:r,onChange:o,placeholder:i="Search...",label:c,size:u="md",disabled:d=!1,error:f=!1,helperText:p,className:h,noOptionsText:g="No options found"})=>{const[m,y]=s(""),[v,b]=s(!1),[x,w]=s(-1),$=a(null),k=a(null),S=n.filter(e=>e.label.toLowerCase().includes(m.toLowerCase()));l(()=>{const e=n.find(e=>e.value===r);e&&y(e.label)},[r,n]),l(()=>{const e=e=>{$.current&&!$.current.contains(e.target)&&b(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const O=c?.toLowerCase().replace(/\s+/g,"-");return e(so,{ref:$,className:h,children:[c&&t(co,{htmlFor:O,children:c}),t(uo,{id:O,ref:k,value:m,onChange:e=>{y(e.target.value),b(!0),w(-1)},onFocus:()=>{b(!0)},placeholder:i,disabled:d,$size:u,$error:f,"aria-invalid":f,"aria-expanded":v,"aria-autocomplete":"list",role:"combobox"}),t(fo,{$isOpen:v,role:"listbox",children:S.length>0?S.map((e,n)=>t(po,{onClick:()=>(e=>{y(e.label),o?.(e.value),b(!1)})(e),$highlighted:n===x,role:"option","aria-selected":e.value===r,children:e.label},e.value)):t(ho,{children:g})}),p&&t(go,{$error:f,children:p})]})},yo=k.div`
+`,mo=({options:n,value:r,onChange:o,placeholder:i="Search...",label:c,size:u="md",disabled:d=!1,error:f=!1,helperText:p,className:h,noOptionsText:g="No options found"})=>{const[m,y]=s(""),[v,b]=s(!1),[x,w]=s(-1),$=a(null),k=a(null),S=n.filter(e=>e.label.toLowerCase().includes(m.toLowerCase()));l(()=>{const e=n.find(e=>e.value===r);e&&y(e.label)},[r,n]),l(()=>{const e=e=>{$.current&&!$.current.contains(e.target)&&b(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const O=c?.toLowerCase().replace(/\s+/g,"-");return e(so,{ref:$,className:h,children:[c&&t(co,{htmlFor:O,children:c}),t(uo,{id:O,ref:k,value:m,onChange:e=>{y(e.target.value),b(!0),w(-1)},onFocus:()=>{b(!0)},placeholder:i,disabled:d,$size:u,$error:f,"aria-invalid":f,"aria-expanded":v,"aria-autocomplete":"list",role:"combobox",title:m}),t(fo,{$isOpen:v,role:"listbox",children:S.length>0?S.map((e,n)=>t(po,{onClick:()=>(e=>{y(e.label),o?.(e.value),b(!1)})(e),$highlighted:n===x,role:"option","aria-selected":e.value===r,title:e.label,children:e.label},e.value)):t(ho,{children:g})}),p&&t(go,{$error:f,children:p})]})},yo=k.div`
   display: flex;
   flex-direction: column;
   gap: ${({theme:e})=>e.spacing.xs};