@kvdbil/components 17.7.0 → 17.8.0

package/cjs/components/Chip/index.js

@@ -20,6 +20,7 @@
     background-color 0.3s ease,
     border 0.3s ease;
   box-sizing: border-box;
+  width: ${({fullWidth:e})=>e?"100%":"auto"};
 
   ${e=>!e.isDisabled&&e.isClickable&&` &:hover {\n    border-color: ${i.getHoverBorderColor(e)};\n    background-color: ${i.getHoverBackgroundColor(e)};\n    color: ${i.getHoverColor(e)};\n  } &:active {\n    background-color: ${i.getActiveBackgroundColor(e)};\n    border-color: ${i.getActiveBorderColor(e)};\n    color: ${i.getActiveColor(e)};\n  }`}
 `,s=l.default.span`
@@ -63,4 +64,4 @@
   &:hover:before {
     opacity: 1;
   }
-`,g=({color:r="primary",children:i,component:t,isDisabled:l,onClick:a,size:g="regular",prefix:u,onDelete:p,variant:b="solid",role:x,...f})=>{const v=!(!a||l),h=!(!p||l),m=!!u,y=e=>{e.stopPropagation(),p?.(e)};return e.jsx(n,{...f,role:x??(v?"button":void 0),onClick:v?a:void 0,tabIndex:v?0:void 0,as:t??(v?"button":"div"),color:r,isDisabled:l,size:g,isClickable:v,isDeletable:h,variant:b,hasPrefix:m,"aria-disabled":l,children:e.jsxs(s,{children:[u&&e.jsx(d,{className:"prefix",children:u}),i,p&&e.jsx(c,{role:"button","aria-label":"Remove","aria-disabled":l,onClick:h?y:void 0,color:r,variant:b,isClickable:v,isDisabled:l,isDeletable:!0,size:"regular",tabIndex:h?0:void 0,onKeyDown:e=>{("Enter"===e.key||" "===e.key)&&h&&(e.preventDefault(),y(e))},children:e.jsx(o.default,{})})]})})};exports.Chip=g,exports.default=g;
+`,g=({color:r="primary",children:i,component:t,isDisabled:l,onClick:a,size:g="regular",prefix:u,onDelete:p,variant:b="solid",role:x,...f})=>{const h=!(!a||l),v=!(!p||l),m=!!u,y=e=>{e.stopPropagation(),p?.(e)};return e.jsx(n,{...f,role:x??(h?"button":void 0),onClick:h?a:void 0,tabIndex:h?0:void 0,as:t??(h?"button":"div"),color:r,isDisabled:l,size:g,isClickable:h,isDeletable:v,variant:b,hasPrefix:m,"aria-disabled":l,children:e.jsxs(s,{children:[u&&e.jsx(d,{className:"prefix",children:u}),i,p&&e.jsx(c,{role:"button","aria-label":"Remove","aria-disabled":l,onClick:v?y:void 0,color:r,variant:b,isClickable:h,isDisabled:l,isDeletable:!0,size:"regular",tabIndex:v?0:void 0,onKeyDown:e=>{("Enter"===e.key||" "===e.key)&&v&&(e.preventDefault(),y(e))},children:e.jsx(o.default,{})})]})})};exports.Chip=g,exports.default=g;

package/esm/components/Chip/index.js

@@ -1,6 +1,6 @@
-import{jsx as l,jsxs as k}from"react/jsx-runtime";import a from"styled-components";import C from"../../icons/components/CloseIcon.js";import{getFontSize as $,getCursorType as b,getBackgroundColor as D,getColor as z,getBorderColor as B,getHoverBorderColor as H,getHoverBackgroundColor as j,getHoverColor as w,getActiveBackgroundColor as m,getActiveBorderColor as A,getActiveColor as F,getSufixHoverBackgroundColor as I}from"./styles.js";import"../../utils/utils.js";const P={small:"2px 16px",regular:"3px 16px",large:"7px 16px"},S=a.div`
+import{jsx as l,jsxs as $}from"react/jsx-runtime";import a from"styled-components";import k from"../../icons/components/CloseIcon.js";import{getFontSize as C,getCursorType as b,getBackgroundColor as D,getColor as z,getBorderColor as B,getHoverBorderColor as w,getHoverBackgroundColor as H,getHoverColor as j,getActiveBackgroundColor as m,getActiveBorderColor as A,getActiveColor as W,getSufixHoverBackgroundColor as F}from"./styles.js";import"../../utils/utils.js";const I={small:"2px 16px",regular:"3px 16px",large:"7px 16px"},P=a.div`
   font-family: ${({theme:e})=>e.typography.fontBaseFamily};
-  font-size: ${({size:e})=>$(e)};
+  font-size: ${({size:e})=>C(e)};
   font-weight: ${({theme:e})=>e.typography.fontBaseBoldWeight};
   line-height: 1.25;
   letter-spacing: 0.1px;
@@ -14,29 +14,30 @@ import{jsx as l,jsxs as k}from"react/jsx-runtime";import a from"styled-component
   border-style: solid;
   border-color: ${B};
   border-radius: 1.293rem;
-  padding: ${({size:e,isDeletable:n})=>n?"0 0.5rem 0 1rem":P[e]};
+  padding: ${({size:e,isDeletable:n})=>n?"0 0.5rem 0 1rem":I[e]};
   transition:
     color 0.3s ease,
     background-color 0.3s ease,
     border 0.3s ease;
   box-sizing: border-box;
+  width: ${({fullWidth:e})=>e?"100%":"auto"};
 
   ${e=>!e.isDisabled&&e.isClickable&&` &:hover {
-    border-color: ${H(e)};
-    background-color: ${j(e)};
-    color: ${w(e)};
+    border-color: ${w(e)};
+    background-color: ${H(e)};
+    color: ${j(e)};
   } &:active {
     background-color: ${m(e)};
     border-color: ${A(e)};
-    color: ${F(e)};
+    color: ${W(e)};
   }`}
-`,T=a.span`
+`,S=a.span`
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   line-height: 1.5;
-`,W=a.span`
+`,T=a.span`
   margin-right: 0.625rem;
   display: flex;
   align-items: center;
@@ -59,7 +60,7 @@ import{jsx as l,jsxs as k}from"react/jsx-runtime";import a from"styled-component
     width: 80%;
     border-radius: 50%;
     z-index: -1;
-    background-color: ${I};
+    background-color: ${F};
     opacity: 0;
   }
 
@@ -71,4 +72,4 @@ import{jsx as l,jsxs as k}from"react/jsx-runtime";import a from"styled-component
   &:hover:before {
     opacity: 1;
   }
-`,u=({color:e="primary",children:n,component:f,isDisabled:r,onClick:d,size:h="regular",prefix:s,onDelete:c,variant:g="solid",role:x,...v})=>{const i=!!(d&&!r),t=!!(c&&!r),y=!!s,p=o=>{o.stopPropagation(),c?.(o)};return l(S,{...v,role:x??(i?"button":void 0),onClick:i?d:void 0,tabIndex:i?0:void 0,as:f??(i?"button":"div"),color:e,isDisabled:r,size:h,isClickable:i,isDeletable:t,variant:g,hasPrefix:y,"aria-disabled":r,children:k(T,{children:[s&&l(W,{className:"prefix",children:s}),n,c&&l(E,{role:"button","aria-label":"Remove","aria-disabled":r,onClick:t?p:void 0,color:e,variant:g,isClickable:i,isDisabled:r,isDeletable:!0,size:"regular",tabIndex:t?0:void 0,onKeyDown:o=>{(o.key==="Enter"||o.key===" ")&&t&&(o.preventDefault(),p(o))},children:l(C,{})})]})})};export{u as Chip,u as default};
+`,u=({color:e="primary",children:n,component:h,isDisabled:r,onClick:d,size:f="regular",prefix:s,onDelete:c,variant:g="solid",role:x,...v})=>{const i=!!(d&&!r),t=!!(c&&!r),y=!!s,p=o=>{o.stopPropagation(),c?.(o)};return l(P,{...v,role:x??(i?"button":void 0),onClick:i?d:void 0,tabIndex:i?0:void 0,as:h??(i?"button":"div"),color:e,isDisabled:r,size:f,isClickable:i,isDeletable:t,variant:g,hasPrefix:y,"aria-disabled":r,children:$(S,{children:[s&&l(T,{className:"prefix",children:s}),n,c&&l(E,{role:"button","aria-label":"Remove","aria-disabled":r,onClick:t?p:void 0,color:e,variant:g,isClickable:i,isDisabled:r,isDeletable:!0,size:"regular",tabIndex:t?0:void 0,onKeyDown:o=>{(o.key==="Enter"||o.key===" ")&&t&&(o.preventDefault(),p(o))},children:l(k,{})})]})})};export{u as Chip,u as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "17.7.0",
+  "version": "17.8.0",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/package.json.tmp

@@ -1,6 +1,6 @@
 {
   "name": "@kvdbil/components",
-  "version": "17.7.0",
+  "version": "17.8.0",
   "sideEffects": false,
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/types/components/Chip/index.d.ts

@@ -26,6 +26,7 @@ export interface ItemProps {
     theme: DefaultTheme;
     tabIndex?: number;
     onClick?: (e: MouseEvent) => void;
+    fullWidth?: boolean;
 }
 export declare const Chip: ({ color, children, component, isDisabled, onClick, size, prefix, onDelete, variant, role, ...props }: ChipProps) => import("react/jsx-runtime").JSX.Element;
 export default Chip;