draft-components 2.4.2 → 2.5.0

package/css/draft-components.css

@@ -570,153 +570,83 @@
 }
 
 .dc-avatar {
-  --dc-avatar-size: 40px;
-  --dc-avatar-radius: 50%;
-  --dc-avatar-font-size: 16px;
-  --dc-avatar-color: var(--dc-white);
-  --dc-avatar-bg: var(--dc-gray-400);
-  --dc-avatar-image-border-color: rgb(var(--dc-gray-700-rgb) / 0.1);
+  --dc-avatar-monogram-color: var(--dc-white);
+  --dc-avatar-silhouette-color: var(--dc-white);
+  --dc-avatar-bg-color-1: #94a3b8;
+  --dc-avatar-bg-color-2: #64748b;
+  --dc-avatar-border-color: rgb(var(--dc-black-rgb) / 0.025);
 
-  color-scheme: light;
-  font-family: var(--dc-primary-font);
-  font-size: var(--dc-avatar-font-size);
-  font-weight: 600;
-  line-height: 1;
-  color: var(--dc-avatar-color);
-  position: relative;
-  display: inline-flex;
-  overflow: hidden;
   -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  align-items: center;
-  justify-content: center;
-  width: var(--dc-avatar-size);
-  height: var(--dc-avatar-size);
-  border-radius: var(--dc-avatar-radius);
-  background: var(--dc-avatar-bg);
-}
-
-.dc-avatar_image::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  border: 1px solid var(--dc-avatar-image-border-color);
-  border-radius: inherit;
-}
-
-.dc-avatar_size_xs {
-  --dc-avatar-size: 24px;
-  --dc-avatar-font-size: 10px;
-}
 
-.dc-avatar_size_sm {
-  --dc-avatar-size: 32px;
-  --dc-avatar-font-size: 12px;
-}
-
-.dc-avatar_size_lg {
-  --dc-avatar-size: 48px;
-  --dc-avatar-font-size: 20px;
-}
-
-.dc-avatar_size_xl {
-  --dc-avatar-size: 56px;
-  --dc-avatar-font-size: 24px;
-}
-
-.dc-avatar_square {
-  --dc-avatar-radius: 8px;
-}
-
-.dc-avatar_square.dc-avatar_size_xs {
-  --dc-avatar-radius: 4px;
-}
-
-.dc-avatar_square.dc-avatar_size_sm {
-  --dc-avatar-radius: 6px;
-}
+     -moz-user-select: none;
 
-.dc-avatar_square.dc-avatar_size_lg {
-  --dc-avatar-radius: 9px;
+          user-select: none;
 }
 
-.dc-avatar_square.dc-avatar_size_xl {
-  --dc-avatar-radius: 10px;
+.dc-avatar_type_image {
+  --dc-avatar-border-color: rgb(var(--dc-black-rgb) / 0.1);
 }
 
 .dc-avatar_fill_pink {
-  --dc-avatar-color: var(--dc-white);
-  --dc-avatar-bg: #f472b6;
+  --dc-avatar-bg-color-1: #fb7185;
+  --dc-avatar-bg-color-2: #f43f5e;
 }
 
 .dc-avatar_fill_red {
-  --dc-avatar-color: var(--dc-white);
-  --dc-avatar-bg: #f87171;
+  --dc-avatar-bg-color-1: #f87171;
+  --dc-avatar-bg-color-2: #ef4444;
 }
 
 .dc-avatar_fill_orange {
-  --dc-avatar-color: var(--dc-white);
-  --dc-avatar-bg: #fb923c;
+  --dc-avatar-bg-color-1: #fb923c;
+  --dc-avatar-bg-color-2: #f97316;
 }
 
 .dc-avatar_fill_yellow {
-  --dc-avatar-color: var(--dc-white);
-  --dc-avatar-bg: #fbbf24;
+  --dc-avatar-bg-color-1: #fbbf24;
+  --dc-avatar-bg-color-2: #f59e0b;
 }
 
 .dc-avatar_fill_green {
-  --dc-avatar-color: var(--dc-white);
-  --dc-avatar-bg: #4ade80;
+  --dc-avatar-bg-color-1: #4ade80;
+  --dc-avatar-bg-color-2: #22c55e;
 }
 
 .dc-avatar_fill_teal {
-  --dc-avatar-color: var(--dc-white);
-  --dc-avatar-bg: #2dd4bf;
+  --dc-avatar-bg-color-1: #2dd4bf;
+  --dc-avatar-bg-color-2: #14b8a6;
 }
 
 .dc-avatar_fill_blue {
-  --dc-avatar-color: var(--dc-white);
-  --dc-avatar-bg: #60a5fa;
+  --dc-avatar-bg-color-1: #38bdf8;
+  --dc-avatar-bg-color-2: #0ea5e9;
 }
 
 .dc-avatar_fill_indigo {
-  --dc-avatar-color: var(--dc-white);
-  --dc-avatar-bg: #818cf8;
+  --dc-avatar-bg-color-1: #818cf8;
+  --dc-avatar-bg-color-2: #6366f1;
 }
 
 .dc-avatar_fill_violet {
-  --dc-avatar-color: var(--dc-white);
-  --dc-avatar-bg: #a78bfa;
+  --dc-avatar-bg-color-1: #c084fc;
+  --dc-avatar-bg-color-2: #a855f7;
 }
 
-.dc-avatar__image,
-.dc-avatar__silhouette {
-  line-height: 1;
-  width: 100%;
-  height: 100%;
-  border-radius: inherit;
-}
-
-.dc-avatar-group {
-  --dc-avatar-in-group-stroke: var(--dc-primary-bg);
-
-  color-scheme: light;
-  display: inline-flex;
-  align-items: center;
-  box-sizing: border-box;
+.dc-avatar__monogram {
+  font-family: var(--dc-primary-font);
+  font-size: 24px;
+  font-weight: 600;
+  letter-spacing: 0.025em;
+  fill: var(--dc-avatar-monogram-color);
 }
 
-.dc-avatar-group > .dc-avatar {
-  box-shadow: 0 0 0 2px var(--dc-avatar-in-group-stroke);
+.dc-avatar__silhouette {
+  fill: var(--dc-avatar-silhouette-color);
 }
 
-.dc-avatar-group > .dc-avatar:nth-child(n + 2) {
-  margin-left: -10px;
+.dc-avatar__border {
+  fill: none;
+  stroke: var(--dc-avatar-border-color);
 }
 
 .dc-button {

package/css/draft-components.dark.css

@@ -289,14 +289,14 @@
 
 .dark .dc-avatar,
 .dark.dc-avatar {
-  --dc-avatar-image-border-color: rgb(var(--dc-gray-50-rgb) / 0.15);
+  --dc-avatar-border-color: rgb(var(--dc-white-rgb) / 0.025);
 
   color-scheme: dark;
 }
 
-.dark .dc-avatar-group,
-.dark.dc-avatar-group {
-  color-scheme: dark;
+.dark .dc-avatar_type_image,
+.dark.dc-avatar_type_image {
+  --dc-avatar-border-color: rgb(var(--dc-white-rgb) / 0.1);
 }
 
 .dark .dc-button,

package/dist/components/avatar/avatar.d.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithRef } from 'react';
-type AvatarHTMLProps = ComponentPropsWithRef<'div'>;
+type AvatarHTMLProps = ComponentPropsWithRef<'svg'>;
+type AvatarBaseProps = Omit<AvatarHTMLProps, 'fill'>;
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type AvatarFill = 'gray' | 'pink' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'indigo' | 'violet';
 export type AvatarProps = {
@@ -8,7 +9,7 @@ export type AvatarProps = {
     fill?: AvatarFill;
     src?: string;
     altText?: string;
-    initials?: string;
-} & AvatarHTMLProps;
-export declare const Avatar: import("react").ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    monogram?: string;
+} & AvatarBaseProps;
+export declare const Avatar: import("react").ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 export {};

package/dist/components/avatar/avatar.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState } from 'react';
+import { forwardRef, useId } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
 const sizesInPixels = {
     xs: 24,
@@ -8,40 +8,32 @@ const sizesInPixels = {
     lg: 48,
     xl: 56,
 };
-export const Avatar = forwardRef(function Avatar({ square, size = 'md', fill = 'gray', src, altText, initials, className, ...props }, ref) {
+export const Avatar = forwardRef(function Avatar({ square, size = 'md', fill = 'gray', src, altText, monogram, className, ...props }, ref) {
+    const id = useId();
+    const titleId = altText ? `${id}avatar-title` : undefined;
+    const maskId = `${id}avatar-mask`;
+    const gradientId = `${id}avatar-gradient`;
     const sizePx = sizesInPixels[size] ?? sizesInPixels.md;
-    const [type, setType] = useState(() => {
-        let type;
-        if (src) {
-            type = 'image';
-        }
-        else if (initials) {
-            type = 'initials';
-        }
-        else {
-            type = 'silhouette';
-        }
-        return type;
-    });
     let children;
-    if (type === 'image') {
-        children = (_jsx("img", { className: "dc-avatar__image", src: src, width: sizePx, height: sizePx, alt: "", loading: "lazy", onLoad: (event) => {
-                if (altText) {
-                    event.currentTarget.setAttribute('alt', altText);
-                }
-            }, onError: () => {
-                setType(initials ? 'initials' : 'silhouette');
-            } }));
+    let type;
+    if (src) {
+        type = 'image';
+        children = (_jsx("image", { href: src, width: "100%", height: "100%", preserveAspectRatio: "xMidYMid slice" }));
     }
-    else if (type === 'initials') {
-        children = (_jsx("span", { className: "dc-avatar__initials", "aria-label": altText, children: initials }));
+    else if (monogram) {
+        type = 'monogram';
+        children = (_jsx("text", { className: "dc-avatar__monogram", x: "28", y: "28", dy: "5%", textAnchor: "middle", dominantBaseline: "middle", children: monogram.slice(0, 2) }));
     }
     else {
-        children = (_jsxs("svg", { className: "dc-avatar__silhouette", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 56 56", width: sizePx, height: sizePx, fill: "none", children: [altText ? _jsx("title", { children: altText }) : null, square ? (_jsx("path", { fill: "white", fillRule: "evenodd", clipRule: "evenodd", d: "M28.0001 29.5957C33.3078 29.5957 37.6106 24.9852 37.6106 19.2979C37.6106 13.6105 33.3078 9 28.0001 9C22.6923 9 18.3895 13.6105 18.3895 19.2979C18.3895 24.9852 22.6923 29.5957 28.0001 29.5957ZM7.03967 49.4839C6.71299 51.4741 8.45242 53 10.4693 53H45.5305C47.5474 53 49.2868 51.4741 48.9601 49.4839C47.6918 41.7571 39.6459 33.3404 27.9999 33.3404C16.3538 33.3404 8.30794 41.7571 7.03967 49.4839Z" })) : (_jsx("path", { fill: "white", fillRule: "evenodd", clipRule: "evenodd", d: "M9.28643 44.5776C12.6548 39.0053 19.3297 34.3404 27.9999 34.3404C36.6702 34.3404 43.3451 39.0054 46.7134 44.5777C42.1335 49.7439 35.447 53 28 53C20.5529 53 13.8664 49.7438 9.28643 44.5776ZM37.6106 20.2979C37.6106 25.9852 33.3078 30.5957 28.0001 30.5957C22.6923 30.5957 18.3895 25.9852 18.3895 20.2979C18.3895 14.6105 22.6923 10 28.0001 10C33.3078 10 37.6106 14.6105 37.6106 20.2979Z" }))] }));
+        type = 'silhouette';
+        children = square ? (_jsx("path", { className: "dc-avatar__silhouette", fillRule: "evenodd", clipRule: "evenodd", d: "M28.0001 29.5957C33.3078 29.5957 37.6106 24.9852 37.6106 19.2979C37.6106 13.6105 33.3078 9 28.0001 9C22.6923 9 18.3895 13.6105 18.3895 19.2979C18.3895 24.9852 22.6923 29.5957 28.0001 29.5957ZM7.03967 49.4839C6.71299 51.4741 8.45242 53 10.4693 53H45.5305C47.5474 53 49.2868 51.4741 48.9601 49.4839C47.6918 41.7571 39.6459 33.3404 27.9999 33.3404C16.3538 33.3404 8.30794 41.7571 7.03967 49.4839Z" })) : (_jsx("path", { className: "dc-avatar__silhouette", fillRule: "evenodd", clipRule: "evenodd", d: "M9.28643 44.5776C12.6548 39.0053 19.3297 34.3404 27.9999 34.3404C36.6702 34.3404 43.3451 39.0054 46.7134 44.5777C42.1335 49.7439 35.447 53 28 53C20.5529 53 13.8664 49.7438 9.28643 44.5776ZM37.6106 20.2979C37.6106 25.9852 33.3078 30.5957 28.0001 30.5957C22.6923 30.5957 18.3895 25.9852 18.3895 20.2979C18.3895 14.6105 22.6923 10 28.0001 10C33.3078 10 37.6106 14.6105 37.6106 20.2979Z" }));
     }
-    return (_jsx("div", { ref: ref, "data-size": size, "data-fill": size, className: classNames(className, 'dc-avatar', `dc-avatar_${type}`, {
-            [`dc-avatar_size_${size}`]: size,
+    const maskElement = square
+        ? _jsx("rect", { width: "56", height: "56", rx: "10", fill: "#fff" })
+        : _jsx("circle", { r: "28", cx: "28", cy: "28", fill: "#fff" });
+    return (_jsxs("svg", { ref: ref, className: classNames(className, {
+            'dc-avatar': true,
+            [`dc-avatar_type_${type}`]: type,
             [`dc-avatar_fill_${fill}`]: fill,
-            'dc-avatar_square': square,
-        }), ...props, children: children }));
+        }), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 56 56", width: sizePx, height: sizePx, role: "img", "aria-labelledby": titleId, ...props, children: [altText ? _jsx("title", { id: titleId, children: altText }) : null, _jsxs("defs", { children: [_jsx("mask", { id: maskId, children: maskElement }), _jsxs("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1", children: [_jsx("stop", { stopColor: "var(--dc-avatar-bg-color-1)", offset: "0%" }), _jsx("stop", { stopColor: "var(--dc-avatar-bg-color-2)", offset: "100%" })] })] }), _jsxs("g", { mask: `url(#${maskId})`, children: [_jsx("rect", { fill: `url(#${gradientId})`, width: "56", height: "56" }), children, _jsx(maskElement.type, { ...maskElement.props, className: "dc-avatar__border", strokeWidth: "3" })] })] }));
 });

package/dist/components/index.d.ts

@@ -1,6 +1,5 @@
 export * from './alert/index.js';
 export * from './avatar/index.js';
-export * from './avatar-group/index.js';
 export * from './badge/index.js';
 export * from './breadcrumbs/index.js';
 export * from './button/index.js';

package/dist/components/index.js

@@ -1,6 +1,5 @@
 export * from './alert/index.js';
 export * from './avatar/index.js';
-export * from './avatar-group/index.js';
 export * from './badge/index.js';
 export * from './breadcrumbs/index.js';
 export * from './button/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "2.4.2",
+  "version": "2.5.0",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {
@@ -10,6 +10,7 @@
     },
     "./css/*": "./css/*"
   },
+  "types": "./dist/index.d.ts",
   "engines": {
     "node": ">= 16"
   },
@@ -51,48 +52,50 @@
     "react-dom": ">= 18"
   },
   "devDependencies": {
-    "@alexzimakov/eslint-config": "1.7.0",
+    "@alexzimakov/eslint-config": "1.8.0",
     "@heroicons/react": "2.0.18",
-    "@storybook/addon-actions": "7.4.6",
-    "@storybook/addon-essentials": "7.4.6",
-    "@storybook/addon-links": "7.4.6",
-    "@storybook/addon-themes": "7.4.6",
-    "@storybook/react": "7.4.6",
-    "@storybook/react-vite": "7.4.6",
+    "@storybook/addon-actions": "7.5.3",
+    "@storybook/addon-essentials": "7.5.3",
+    "@storybook/addon-links": "7.5.3",
+    "@storybook/addon-themes": "7.5.3",
+    "@storybook/react": "7.5.3",
+    "@storybook/react-vite": "7.5.3",
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "6.1.4",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.5.1",
-    "@types/node": "18.18.5",
-    "@types/react": "18.2.28",
-    "@types/react-dom": "18.2.13",
-    "@typescript-eslint/eslint-plugin": "6.7.5",
-    "@typescript-eslint/parser": "6.7.5",
+    "@types/node": "20.9.0",
+    "@types/react": "18.2.37",
+    "@types/react-dom": "18.2.15",
+    "@typescript-eslint/eslint-plugin": "6.10.0",
     "@vitest/coverage-istanbul": "0.34.6",
     "autoprefixer": "10.4.16",
-    "eslint": "8.51.0",
-    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint": "8.53.0",
+    "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-storybook": "0.6.15",
     "eslint-plugin-testing-library": "6.1.0",
     "husky": "8.0.3",
     "jsdom": "22.1.0",
-    "lint-staged": "15.0.1",
+    "lint-staged": "15.0.2",
     "postcss": "8.4.31",
     "postcss-import": "15.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "storybook": "7.4.6",
-    "stylelint": "15.10.3",
+    "storybook": "7.5.3",
+    "stylelint": "15.11.0",
     "stylelint-config-standard": "34.0.0",
     "stylelint-order": "6.0.3",
     "typescript": "5.2.2",
-    "vite": "4.4.11",
+    "vite": "4.5.0",
     "vitest": "0.34.6"
   },
   "lint-staged": {
     "*.ts?(x)": "npm run lint-js",
     "*.css": "npm run lint-css"
+  },
+  "dependencies": {
+    "@typescript-eslint/parser": "6.10.0"
   }
 }

package/dist/components/avatar-group/avatar-group.d.ts

@@ -1,7 +0,0 @@
-import { ComponentPropsWithoutRef, JSX } from 'react';
-type AvatarGroupBaseProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'>;
-export type AvatarGroupProps = AvatarGroupBaseProps & {
-    children: JSX.Element | JSX.Element[];
-};
-export declare function AvatarGroup({ className, children, ...props }: AvatarGroupProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/avatar-group/avatar-group.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from '../../lib/react-helpers.js';
-export function AvatarGroup({ className, children, ...props }) {
-    return (_jsx("div", { ...props, className: classNames(className, 'dc-avatar-group'), children: children }));
-}

package/dist/components/avatar-group/index.d.ts

@@ -1 +0,0 @@
-export * from './avatar-group.js';

package/dist/components/avatar-group/index.js

@@ -1 +0,0 @@
-export * from './avatar-group.js';