@volvo-cars/react-icons - npm Package Compare versions

Comparing version 0.9.0 to 0.10.0

dist/icon-button.d.ts

 /// <reference types="react" />
-export type IconButtonIcon = 'avatar' | 'calendar' | 'checkmark' | 'communication-email' | 'communication-phone' | 'copy' | 'delete' | 'edit' | 'externallink' | 'favorite' | 'filter' | 'info' | 'media-pause' | 'media-play' | 'more' | 'navigation-arrowback' | 'navigation-arrowdown' | 'navigation-arrowforward' | 'navigation-arrowup' | 'navigation-chevronback' | 'navigation-chevrondown' | 'navigation-chevronforward' | 'navigation-chevronup' | 'navigation-close' | 'navigation-minus' | 'navigation-plus' | 'other-eye' | 'other-eyeslash' | 'refresh' | 'search' | 'settings';
+export type IconButtonIcon = 'alarm' | 'avatar' | 'calendar' | 'checkmark' | 'communication-email' | 'communication-phone' | 'copy' | 'delete' | 'edit' | 'externallink' | 'favorite' | 'filter' | 'info' | 'media-pause' | 'media-play' | 'more' | 'navigation-arrowback' | 'navigation-arrowdown' | 'navigation-arrowforward' | 'navigation-arrowup' | 'navigation-chevronback' | 'navigation-chevrondown' | 'navigation-chevronforward' | 'navigation-chevronup' | 'navigation-close' | 'navigation-minus' | 'navigation-plus' | 'other-eye' | 'other-eyeslash' | 'refresh' | 'search' | 'settings';
 type BaseProps = {
-    hidden?: boolean;
-    id?: string;
-    dir?: string;
-    lang?: string;
-    slot?: string;
-    tabIndex?: number;
-    className?: string;
     /**
@@ -40,2 +33,14 @@ * The icon name including the icon category, if any.
     disabled?: boolean;
+    /**
+     * Custom class name, merged with existing classes.
+     */
+    className?: string;
+    hidden?: boolean;
+    id?: string;
+    title?: string;
+    dir?: string;
+    lang?: string;
+    slot?: string;
+    style?: React.CSSProperties;
+    tabIndex?: number;
 };
@@ -82,12 +87,21 @@ type AriaProps = {
     type?: 'submit' | 'button';
+    /**
+     * Called when the button is clicked.
+     *
+     * If used within a `<form>`, prefer to set the button to `type=submit` and use the `onSubmit` event on the form
+     * instead.
+     */
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    onBlur?: React.FocusEventHandler<HTMLButtonElement>;
     onFocus?: React.FocusEventHandler<HTMLButtonElement>;
-    onBlur?: React.FocusEventHandler<HTMLButtonElement>;
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
     onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
     onKeyUp?: React.KeyboardEventHandler<HTMLButtonElement>;
+    onPointerDown?: React.PointerEventHandler<HTMLButtonElement>;
     onPointerEnter?: React.PointerEventHandler<HTMLButtonElement>;
+    onPointerLeave?: React.PointerEventHandler<HTMLButtonElement>;
     onPointerMove?: React.PointerEventHandler<HTMLButtonElement>;
-    onPointerDown?: React.PointerEventHandler<HTMLButtonElement>;
     onPointerUp?: React.PointerEventHandler<HTMLButtonElement>;
-    onPointerLeave?: React.PointerEventHandler<HTMLButtonElement>;
+    onAnimationEnd?: React.AnimationEventHandler<HTMLButtonElement>;
+    onAnimationStart?: React.AnimationEventHandler<HTMLButtonElement>;
+    onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement>;
 };
@@ -94,0 +108,0 @@ type AsChildProps = {

dist/icon.d.ts

 /// <reference types="react" />
 import { IconType } from './icons';
-declare const COLOR: readonly ["inherit", "primary", "secondary", "accent-blue", "feedback-green", "feedback-orange", "feedback-red", "always-white", "always-black"];
+declare const COLOR: readonly ["inherit", "inverted", "primary", "secondary", "accent-blue", "feedback-green", "feedback-orange", "feedback-red", "always-white", "always-black"];
 export type IconColor = (typeof COLOR)[number] | 'currentColor';
 export type IconProps = {
-    className?: string;
     /**
-     * Alternate text.
-     *
-     * May be omitted if the icon is purely decorational or if the alternate text is already present,
-     * such as in a button that already has a label.
-     */
-    alt?: string;
-    /**
      * The icon type - combining the icon category, the name of the icon and the size.
@@ -25,2 +17,23 @@ */
     color?: IconColor;
+    /**
+     * Custom class name, merged with existing classes.
+     */
+    className?: string;
+    /**
+     * Alternate text.
+     *
+     * May be omitted if the icon is purely decorational or if the alternate text is already present,
+     * such as in a button that already has a label.
+     */
+    alt?: string;
+    hidden?: boolean;
+    id?: string;
+    title?: string;
+    dir?: string;
+    lang?: string;
+    slot?: string;
+    style?: React.CSSProperties;
+    onAnimationEnd?: React.AnimationEventHandler<HTMLImageElement>;
+    onAnimationStart?: React.AnimationEventHandler<HTMLImageElement>;
+    onTransitionEnd?: React.TransitionEventHandler<HTMLImageElement>;
 };
@@ -27,0 +40,0 @@ /**

dist/icon.js

@@ -1,2 +0,2 @@
-import{d as a}from"./chunk-3HYLOXNB.js";export{a as Icon};
+import{d as a}from"./chunk-7HKAGNQV.js";export{a as Icon};
 //# sourceMappingURL=icon.js.map

dist/index.js

@@ -1,2 +0,2 @@
-import{a as h,b as g,c as s,d}from"./chunk-3HYLOXNB.js";import{Children as y,cloneElement as b,forwardRef as P}from"react";import{jsx as n}from"react/jsx-runtime";var B=P(function({iconName:i,className:o="",color:t,variant:r="outlined",bleed:f,disabled:m,...e},u){let l={className:`icon-button-${r} ${o}`.trim(),"data-color":t==="neutral"?void 0:t,"data-bleed":f&&r==="clear"?!0:void 0,"aria-disabled":m||e["aria-disabled"]||void 0},c=()=>n(d,{type:`${i}-16`,color:"currentColor"});if(e.children&&e.asChild){let{children:a,asChild:k,...v}=e;return b(y.only(a),{...v,...l},n(c,{}))}else return e.href?n("a",{ref:u,...e,...l,children:n(c,{})}):n("button",{ref:u,type:"button",...e,...l,onClick:a=>{m?a.preventDefault():e.onClick&&e.onClick(a)},children:n(c,{})})});import{forwardRef as E}from"react";import{jsx as I}from"react/jsx-runtime";var H=E(function({alt:i,height:o=8,...t},r){return I("img",{...t,ref:r,className:`wordmark text-primary ${t.className||""}`.trim(),width:o*13,height:o,src:s(),alt:i,style:{"--mask-url":`url('${s()}')`}})});export{d as Icon,B as IconButton,H as Wordmark,g as getIconSrc,h as setBaseUrl};
+import{a as h,b as E,c,d as s}from"./chunk-7HKAGNQV.js";import{Children as g,cloneElement as y,forwardRef as b}from"react";import{jsx as m}from"react/jsx-runtime";var P=b(function({iconName:a,className:t="",color:n,variant:o="outlined",bleed:f,disabled:d,...e},u){let i={className:`icon-button-${o} ${t}`.trim(),"data-color":n==="neutral"?void 0:n,"data-bleed":f&&o==="clear"?!0:void 0,"aria-disabled":d||e["aria-disabled"]||void 0},l=m(s,{type:`${a}-16`,color:"currentColor"});if(e.children&&e.asChild){let{children:r,asChild:L,...v}=e;return y(g.only(r),{...v,...i},l)}else return e.href?m("a",{ref:u,...e,...i,children:l}):m("button",{ref:u,type:"button",...e,...i,onClick:r=>{d?r.preventDefault():e.onClick&&e.onClick(r)},children:l})});import{forwardRef as B}from"react";import{jsx as R}from"react/jsx-runtime";var H=B(function({alt:a,height:t=8,...n},o){return R("img",{...n,ref:o,className:`wordmark text-primary ${n.className||""}`.trim(),width:t*13,height:t,src:c(),alt:a,style:{"--mask-url":`url('${c()}')`}})});export{s as Icon,P as IconButton,H as Wordmark,E as getIconSrc,h as setBaseUrl};
 //# sourceMappingURL=index.js.map

dist/lazy-icon.js

@@ -1,2 +0,2 @@
-"use client";import{d as o}from"./chunk-3HYLOXNB.js";import t,{useRef as s}from"react";import{jsx as c}from"react/jsx-runtime";var u=t.forwardRef(function(n){let e=s(null),[r,a]=t.useState(!0);return c(o,{...n,ref:e,loading:"lazy",...!e.current?.complete&&r?{onLoad:()=>a(!1)}:{"data-loaded":!0}})});export{u as LazyIcon};
+"use client";import{d as o}from"./chunk-7HKAGNQV.js";import t,{useRef as s}from"react";import{jsx as c}from"react/jsx-runtime";var u=t.forwardRef(function(n){let e=s(null),[r,a]=t.useState(!0);return c(o,{...n,ref:e,loading:"lazy",...!e.current?.complete&&r?{onLoad:()=>a(!1)}:{"data-loaded":!0}})});export{u as LazyIcon};
 //# sourceMappingURL=lazy-icon.js.map

package.json

 {
   "name": "@volvo-cars/react-icons",
   "description": "React Icons",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "license": "UNLICENSED",
@@ -46,4 +46,5 @@ "sideEffects": false,
   "devDependencies": {
-    "@types/react": "18.2.22",
+    "@types/react": "18.2.33",
     "@volvo-cars/browserslist-config": "workspace:*",
+    "@volvo-cars/css": "workspace:*",
     "react": "18.2.0",
@@ -50,0 +51,0 @@ "tsup": "7.2.0",

No alert changes

Improved metrics

Total package byte prevSize

142180

increased by2.72%

Lines of code

437

increased by6.85%

Worsened metrics

Dev dependency count

6

increased by20%

No dependency changes