@launchpad-ui/icons - npm Package Compare versions

Comparing version 0.18.14 to 0.19.0

dist/FlairIcon.d.ts

@@ -1,12 +0,7 @@
-import type { ComponentProps, ReactElement } from 'react';
-import type { IconProps } from './Icon';
-type FlairIconProps = Omit<ComponentProps<'div'>, 'className'> & {
-    'data-test-id'?: string;
-    gradient?: 'purpleToBlue' | 'yellowToCyan' | 'pinkToPurple' | 'cyanToBlue' | 'cyanToPurple';
-    isRounded?: boolean;
-    children: ReactElement<IconProps>;
-};
-declare const FlairIcon: ({ children, "data-test-id": testId, isRounded, gradient, ...props }: FlairIconProps) => import("react/jsx-runtime").JSX.Element;
+import type { BoxProps } from '@launchpad-ui/box';
+interface FlairIconProps extends BoxProps {
+}
+declare const FlairIcon: ({ children, ...props }: FlairIconProps) => import("react/jsx-runtime").JSX.Element;
 export { FlairIcon };
 export type { FlairIconProps };
 //# sourceMappingURL=FlairIcon.d.ts.map

dist/Icon.d.ts

@@ -1,14 +0,14 @@
-import type { ComponentProps } from 'react';
+import type { VariantProps } from 'class-variance-authority';
+import type { SVGAttributes } from 'react';
 import type { IconName } from './types';
-type IconProps = ComponentProps<'svg'> & {
-    name: IconName;
-    subtle?: boolean;
-    size?: 'micro' | 'tiny' | 'small' | 'medium' | 'mlarge' | 'large' | 'xlarge' | 'huge';
-    'data-test-id'?: string;
-    title?: string;
-    description?: string;
-};
-declare const Icon: ({ name, subtle, className, size, children, "data-test-id": testId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-hidden": ariaHidden, title, description, focusable, role, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+declare const icon: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+    variant?: "default" | "subtle" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface IconProps extends SVGAttributes<SVGElement>, VariantProps<typeof icon> {
+    name?: IconName;
+}
+declare const Icon: ({ name, className, children, focusable, role, size, variant, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
 export { Icon };
 export type { IconProps };
 //# sourceMappingURL=Icon.d.ts.map

dist/index.d.ts

 export type { IconProps } from './Icon';
-export type { IconContextState } from './context';
 export type { FlairIconProps } from './FlairIcon';
@@ -7,5 +6,4 @@ export type { StatusIconProps } from './StatusIcon';
 export { Icon } from './Icon';
-export { IconContext } from './context';
 export { FlairIcon } from './FlairIcon';
 export { StatusIcon } from './StatusIcon';
 //# sourceMappingURL=index.d.ts.map

dist/index.es.js

 import './style.css';
-import { jsx, jsxs } from "react/jsx-runtime";
-import { cx } from "classix";
-import { createContext, useId, useContext, cloneElement } from "react";
-const IconContext = /* @__PURE__ */ createContext({ path: void 0 });
-const cyanToBlue = "kck8EW_cyanToBlue";
-const cyanToPurple = "kck8EW_cyanToPurple";
-const flairIcon = "kck8EW_flairIcon";
-const flairIconContainer = "kck8EW_flairIconContainer";
-const huge = "kck8EW_huge";
-const icon = "kck8EW_icon";
-const isRounded = "kck8EW_isRounded";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Box } from "@launchpad-ui/box";
+const base = "kck8EW_base";
 const large = "kck8EW_large";
 const medium = "kck8EW_medium";
-const micro = "kck8EW_micro";
-const mlarge = "kck8EW_mlarge";
-const pinkToPurple = "kck8EW_pinkToPurple";
-const purpleToBlue = "kck8EW_purpleToBlue";
 const small = "kck8EW_small";
 const subtle = "kck8EW_subtle";
-const tiny = "kck8EW_tiny";
-const xlarge = "kck8EW_xlarge";
-const yellowToCyan = "kck8EW_yellowToCyan";
 const styles = {
-  cyanToBlue,
-  cyanToPurple,
-  flairIcon,
-  flairIconContainer,
-  huge,
-  icon,
-  isRounded,
+  base,
+  "default": "kck8EW_default",
   large,
   medium,
-  micro,
-  mlarge,
-  pinkToPurple,
-  purpleToBlue,
   small,
-  subtle,
-  tiny,
-  xlarge,
-  yellowToCyan
+  subtle
 };
+const icon = cva(styles.base, {
+  variants: {
+    size: {
+      small: styles.small,
+      medium: styles.medium,
+      large: styles.large
+    },
+    variant: {
+      default: styles.default,
+      subtle: styles.subtle
+    }
+  },
+  defaultVariants: {
+    size: "medium",
+    variant: "default"
+  }
+});
 const Icon = ({
   name,
-  subtle: subtle2,
   className,
-  size,
   children,
-  "data-test-id": testId = "icon",
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  "aria-hidden": ariaHidden,
-  title,
-  description,
   focusable = false,
   role = "img",
+  size = "medium",
+  variant = "default",
   ...props
 }) => {
-  const sizeClass = size ? styles[size] : false;
-  const classes = cx(styles.icon, sizeClass, subtle2 && styles.subtle, `icon-${name}`, className);
-  const prefix = `svg-${useId()}`;
-  const isAriaHidden = ariaHidden ?? (!ariaLabelledBy && !ariaLabel);
-  const titleId = title && `${prefix}-${name}-title`;
-  const descriptionId = description && `${prefix}-${name}-description`;
-  const { path: contextPath } = useContext(IconContext);
-  const iconId = `lp-icon-${name}`;
-  const spritePath = contextPath === void 0 ? "/static/sprite.svg" : contextPath;
-  return /* @__PURE__ */ jsx("span", { "data-test-id": testId, className: classes, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(
     "svg",
     {
-      "aria-hidden": isAriaHidden,
-      "aria-label": ariaLabel,
-      "aria-labelledby": titleId || ariaLabelledBy,
-      "aria-describedby": descriptionId,
+      "aria-hidden": props["aria-hidden"] ?? (!props["aria-labelledby"] && !props["aria-label"]),
       focusable,
       role,
+      className: icon({ size, variant, className }),
       ...props,
       children: [
-        title && /* @__PURE__ */ jsx("title", { id: titleId, children: title }),
-        description && /* @__PURE__ */ jsx("desc", { id: descriptionId, children: description }),
-        /* @__PURE__ */ jsx("use", { href: `${spritePath}#${iconId}` })
+        name && /* @__PURE__ */ jsx("use", { href: `#lp-icon-${name}` }),
+        children
       ]
     }
-  ) });
+  );
 };
-const FlairIcon = ({
-  children,
-  "data-test-id": testId = "flair-icon",
-  isRounded: isRounded2,
-  gradient = "purpleToBlue",
-  ...props
-}) => {
-  const getIconSize = () => {
-    let iconSize = children.props.size;
-    if (!iconSize) {
-      iconSize = "medium";
+const FlairIcon = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      background: "$purple-blue",
+      borderRadius: "50%",
+      color: "$white.950",
+      display: "inline-flex",
+      padding: "$400",
+      ...props,
+      children
     }
-    return iconSize;
-  };
-  const icon2 = /* @__PURE__ */ cloneElement(children, {
-    className: styles.flairIcon,
-    size: getIconSize()
-  });
-  const classes = cx(styles.flairIconContainer, styles[gradient], isRounded2 && styles.isRounded);
-  return /* @__PURE__ */ jsx("div", { className: classes, ...props, "data-test-id": testId, children: icon2 });
+  );
 };
@@ -138,5 +104,4 @@ const StatusIcon = ({ kind, size = "medium", ...rest }) => {
   Icon,
-  IconContext,
   StatusIcon
 };
 //# sourceMappingURL=index.es.js.map

dist/index.js

@@ -5,106 +5,72 @@ require('./style.css');
 const jsxRuntime = require("react/jsx-runtime");
-const classix = require("classix");
-const react = require("react");
-const IconContext = /* @__PURE__ */ react.createContext({ path: void 0 });
-const cyanToBlue = "kck8EW_cyanToBlue";
-const cyanToPurple = "kck8EW_cyanToPurple";
-const flairIcon = "kck8EW_flairIcon";
-const flairIconContainer = "kck8EW_flairIconContainer";
-const huge = "kck8EW_huge";
-const icon = "kck8EW_icon";
-const isRounded = "kck8EW_isRounded";
+const classVarianceAuthority = require("class-variance-authority");
+const box = require("@launchpad-ui/box");
+const base = "kck8EW_base";
 const large = "kck8EW_large";
 const medium = "kck8EW_medium";
-const micro = "kck8EW_micro";
-const mlarge = "kck8EW_mlarge";
-const pinkToPurple = "kck8EW_pinkToPurple";
-const purpleToBlue = "kck8EW_purpleToBlue";
 const small = "kck8EW_small";
 const subtle = "kck8EW_subtle";
-const tiny = "kck8EW_tiny";
-const xlarge = "kck8EW_xlarge";
-const yellowToCyan = "kck8EW_yellowToCyan";
 const styles = {
-  cyanToBlue,
-  cyanToPurple,
-  flairIcon,
-  flairIconContainer,
-  huge,
-  icon,
-  isRounded,
+  base,
+  "default": "kck8EW_default",
   large,
   medium,
-  micro,
-  mlarge,
-  pinkToPurple,
-  purpleToBlue,
   small,
-  subtle,
-  tiny,
-  xlarge,
-  yellowToCyan
+  subtle
 };
+const icon = classVarianceAuthority.cva(styles.base, {
+  variants: {
+    size: {
+      small: styles.small,
+      medium: styles.medium,
+      large: styles.large
+    },
+    variant: {
+      default: styles.default,
+      subtle: styles.subtle
+    }
+  },
+  defaultVariants: {
+    size: "medium",
+    variant: "default"
+  }
+});
 const Icon = ({
   name,
-  subtle: subtle2,
   className,
-  size,
   children,
-  "data-test-id": testId = "icon",
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  "aria-hidden": ariaHidden,
-  title,
-  description,
   focusable = false,
   role = "img",
+  size = "medium",
+  variant = "default",
   ...props
 }) => {
-  const sizeClass = size ? styles[size] : false;
-  const classes = classix.cx(styles.icon, sizeClass, subtle2 && styles.subtle, `icon-${name}`, className);
-  const prefix = `svg-${react.useId()}`;
-  const isAriaHidden = ariaHidden ?? (!ariaLabelledBy && !ariaLabel);
-  const titleId = title && `${prefix}-${name}-title`;
-  const descriptionId = description && `${prefix}-${name}-description`;
-  const { path: contextPath } = react.useContext(IconContext);
-  const iconId = `lp-icon-${name}`;
-  const spritePath = contextPath === void 0 ? "/static/sprite.svg" : contextPath;
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { "data-test-id": testId, className: classes, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     {
-      "aria-hidden": isAriaHidden,
-      "aria-label": ariaLabel,
-      "aria-labelledby": titleId || ariaLabelledBy,
-      "aria-describedby": descriptionId,
+      "aria-hidden": props["aria-hidden"] ?? (!props["aria-labelledby"] && !props["aria-label"]),
       focusable,
       role,
+      className: icon({ size, variant, className }),
       ...props,
       children: [
-        title && /* @__PURE__ */ jsxRuntime.jsx("title", { id: titleId, children: title }),
-        description && /* @__PURE__ */ jsxRuntime.jsx("desc", { id: descriptionId, children: description }),
-        /* @__PURE__ */ jsxRuntime.jsx("use", { href: `${spritePath}#${iconId}` })
+        name && /* @__PURE__ */ jsxRuntime.jsx("use", { href: `#lp-icon-${name}` }),
+        children
       ]
     }
-  ) });
+  );
 };
-const FlairIcon = ({
-  children,
-  "data-test-id": testId = "flair-icon",
-  isRounded: isRounded2,
-  gradient = "purpleToBlue",
-  ...props
-}) => {
-  const getIconSize = () => {
-    let iconSize = children.props.size;
-    if (!iconSize) {
-      iconSize = "medium";
+const FlairIcon = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    box.Box,
+    {
+      background: "$purple-blue",
+      borderRadius: "50%",
+      color: "$white.950",
+      display: "inline-flex",
+      padding: "$400",
+      ...props,
+      children
     }
-    return iconSize;
-  };
-  const icon2 = /* @__PURE__ */ react.cloneElement(children, {
-    className: styles.flairIcon,
-    size: getIconSize()
-  });
-  const classes = classix.cx(styles.flairIconContainer, styles[gradient], isRounded2 && styles.isRounded);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes, ...props, "data-test-id": testId, children: icon2 });
+  );
 };
@@ -140,4 +106,3 @@ const StatusIcon = ({ kind, size = "medium", ...rest }) => {
 exports.Icon = Icon;
-exports.IconContext = IconContext;
 exports.StatusIcon = StatusIcon;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@launchpad-ui/icons",
-  "version": "0.18.14",
+  "version": "0.19.0",
   "status": "beta",
@@ -36,3 +36,4 @@ "publishConfig": {
   "dependencies": {
-    "classix": "2.1.17",
+    "class-variance-authority": "0.7.0",
+    "@launchpad-ui/box": "~0.1.19",
     "@launchpad-ui/tokens": "~0.11.4"
@@ -39,0 +40,0 @@ },

README.md

@@ -20,3 +20,3 @@ # @launchpad-ui/icons
 
-By default, the `Icon` component expects the package's provided `sprite.svg` file to be located in `/static/sprite.svg` of your app. The `name` prop specifies which icon to render.
+The `name` prop specifies which icon to render.
 
@@ -29,45 +29,12 @@ ```js
 
-### Custom static location
-
-A custom path to the sprite can be set via the `IconContext` provider. For example, if importing a static asset returns a resolved URL ([like in Vite](https://vitejs.dev/guide/assets.html#importing-asset-as-url) or [Remix](https://remix.run/docs/en/1.18.1/other-api/asset-imports#asset-url-imports)) you can do the following in your app to load the icons:
-
-```js
-import { IconContext } from '@launchpad-ui/icons';
-import icons from '@launchpad-ui/icons/sprite.svg';
-import { createRoot } from 'react-dom/client';
-
-const domNode = document.getElementById('root');
-const root = createRoot(domNode);
-
-root.render(
-  <IconContext.Provider value={{ path: icons }}>
-    <App />
-  </IconContext.Provider>
-);
-```
-
 ### CORS limitation
 
-Unfortunately SVG sprites [cannot be accessed cross-domain](https://oreillymedia.github.io/Using_SVG/extras/ch10-cors.html). If you are hosting the sprite file in a CDN or different domain you will have to fetch the file and inject it into the document to access the icons directly.
+Unfortunately SVG sprites [cannot be accessed cross-domain](https://oreillymedia.github.io/Using_SVG/extras/ch10-cors.html). The workaround is to fetch the file and inject it into the document to access the icons directly.
 
-First set the `Icon` context path to an empty string to indicate the symbols are available in the DOM:
+Fetch and inject the sprite for `Icon` to render icons correctly:
 
 ```js
-import { IconContext } from '@launchpad-ui/icons';
-import { createRoot } from 'react-dom/client';
+import sprite from '@launchpad-ui/icons/sprite.svg';
 
-const domNode = document.getElementById('root');
-const root = createRoot(domNode);
-
-root.render(
-  <IconContext.Provider value={{ path: '' }}>
-    <App />
-  </IconContext.Provider>
-);
-```
-
-Then fetch and inject the sprite for `Icon` to render icons correctly:
-
-```js
-fetch('https://cdn.example.com/sprite.svg')
+fetch(sprite)
   .then(async (response) => response.text())
@@ -91,3 +58,3 @@ .then((data) => {
   rel="preload"
-  href="https://cdn.example.com/sprite.svg"
+  href="{assets_location}/sprite.svg"
   as="fetch"
@@ -94,0 +61,0 @@ type="image/svg+xml"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

215912

decreased by-5.12%

Dependency count

5

increased by25%

Number of package files

19

decreased by-9.52%

Lines of code

266

decreased by-24.43%

Number of lines in readme file

62

decreased by-34.74%

Dependency changes

• + Added@launchpad-ui/box@~0.1.19

• + Addedclass-variance-authority@0.7.0

• + Added@babel/runtime@7.25.6(transitive)

• + Added@emotion/hash@0.9.2(transitive)

• + Added@launchpad-ui/box@0.1.20(transitive)

• + Added@launchpad-ui/vars@0.2.26(transitive)

• + Added@radix-ui/react-compose-refs@1.1.0(transitive)

• + Added@radix-ui/react-slot@1.1.0(transitive)

• + Added@vanilla-extract/css@1.16.0(transitive)

• + Added@vanilla-extract/dynamic@2.1.0(transitive)

• + Added@vanilla-extract/private@1.0.6(transitive)

• + Addedclass-variance-authority@0.7.0(transitive)

• + Addedclsx@2.0.0(transitive)

• + Addedcss-what@6.1.0(transitive)

• + Addedcssesc@3.0.0(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addeddedent@1.5.3(transitive)

• + Addeddeep-object-diff@1.1.9(transitive)

• + Addeddeepmerge@4.3.1(transitive)

• + Addedlru-cache@10.4.3(transitive)

• + Addedmedia-query-parser@2.0.2(transitive)

• + Addedmodern-ahocorasick@1.0.1(transitive)

• + Addedpicocolors@1.1.0(transitive)

• + Addedrainbow-sprinkles@0.17.3(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• - Removedclassix@2.1.17

• - Removedclassix@2.1.17(transitive)