@latte-macchiat-io/latte-vanilla-components 0.0.484 → 0.0.485

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.484",
+  "version": "0.0.485",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/ExpandCollapse/Item/index.tsx

@@ -37,9 +37,9 @@ export const ExpandCollapseItem = ({ title, text, icon }: ExpandCollapseItemsPro
         className={collapseExpandItemTitle}
         onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && toggleList()}>
         <Icon
-          size={15}
           iconPath={icon || icons.caret}
           className={collapseExpandTitleIcon}
+          size={themeContract.expandCollapse.item.title.icon.size || 20}
           color={themeContract.expandCollapse.item.title.icon.color || themeContract.icon.color}
         />
         <Heading as="h3" size="sm">

package/src/components/ExpandCollapse/theme.ts

@@ -108,6 +108,7 @@ const themeExpandCollapseBase = {
         },
 
         icon: {
+          size: '30px',
           marginTop: {
             mobile: '15px',
             sm: '15px',

package/src/components/Icon/index.tsx

@@ -1,22 +1,27 @@
 import path from './path';
 
 import { iconRecipe } from './style.css';
+
 import { themeContract } from '../../theme/contract.css';
 import { cn } from '../../utils/styleOverride';
 
 export type IconProps = React.HTMLAttributes<HTMLDivElement> & {
   icon?: string;
-  size?: number;
   color?: string;
   viewBox?: string;
   iconPath?: string;
+  size?: number | string;
 };
 
 export const Icon = ({ icon = '', className, size = 24, iconPath = '', viewBox = '0 0 24 24', color = themeContract.icon.color }: IconProps) => {
   const d = iconPath || path[icon as keyof typeof path];
 
   return (
-    <svg className={cn(iconRecipe, className)} viewBox={viewBox} width={`${size}px`} height={`${size}px`}>
+    <svg
+      viewBox={viewBox}
+      className={cn(iconRecipe, className)}
+      width={typeof size === 'number' ? `${size}px` : size}
+      height={typeof size === 'number' ? `${size}px` : size}>
       <path d={d} fill={color} />
     </svg>
   );

package/src/theme/contract.css.ts

@@ -1379,6 +1379,7 @@ export const themeContract = createGlobalThemeContract({
         },
 
         icon: {
+          size: 'latte-expandCollapse-item-title-icon-size',
           color: 'latte-expandCollapse-item-title-icon-color',
           marginTop: {
             mobile: 'latte-expandCollapse-item-title-icon-marginTop-mobile',