jvetrau-ds 0.2.13 → 0.2.14

package/components/attach/attach.cjs

@@ -2,8 +2,13 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 require('./attach.css');
+var Button = require('../button');
 var classnames = require('../helpers/classnames');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Button__default = /*#__PURE__*/_interopDefault(Button);
+
 function isImageAttach(item) {
   return item.mimeType?.startsWith("image/") ?? false;
 }
@@ -15,12 +20,13 @@ function formatFileSize(sizeBytes) {
     return "Size unknown";
   }
   if (sizeBytes < 1024) {
-    return `${sizeBytes} B`;
+    return `${sizeBytes} \u0411`;
   }
   if (sizeBytes < 1024 * 1024) {
-    return `${Math.round(sizeBytes / 1024)} KB`;
+    return `${Math.round(sizeBytes / 1024)} \u041A\u0411`;
   }
-  return `${(sizeBytes / 1024 / 1024).toFixed(1)} MB`;
+  const megabytes = (sizeBytes / 1024 / 1024).toFixed(1).replace(".", ",");
+  return `${megabytes} \u041C\u0411`;
 }
 function getLinkHostname(url) {
   try {
@@ -40,7 +46,11 @@ const Attach = ({
   if (items.length === 0) {
     return null;
   }
-  const classes = classnames.classnames("attach", className, {});
+  const classes = classnames.classnames(
+    "attach",
+    className,
+    {}
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -49,12 +59,20 @@ const Attach = ({
       children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "attach__list", children: items.map((item) => {
         const isLink = isLinkAttach(item);
         const isImage = !isLink && isImageAttach(item);
-        const itemClasses = classnames.classnames("attach__item", {
-          "attach__item--link": isLink,
-          "attach__item--image": isImage,
-          "attach__item--file": !isLink && !isImage
-        });
-        const meta = isLink ? getLinkHostname(item.url) : formatFileSize(item.sizeBytes);
+        const itemClasses = classnames.classnames(
+          "attach__item",
+          "",
+          {
+            "attach__item--link": isLink,
+            "attach__item--image": isImage,
+            "attach__item--file": !isLink && !isImage
+          }
+        );
+        const meta = isLink ? getLinkHostname(
+          item.url
+        ) : formatFileSize(
+          item.sizeBytes
+        );
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "li",
           {
@@ -81,13 +99,13 @@ const Attach = ({
                 }
               ),
               onRemove && /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
+                Button__default.default,
                 {
+                  mode: "toolbar",
                   className: "attach__remove",
-                  type: "button",
+                  icon: "close",
                   "aria-label": `${removeLabel}: ${item.name}`,
-                  onClick: () => onRemove(item.id),
-                  children: removeLabel
+                  onClick: () => onRemove(item.id)
                 }
               )
             ]

package/components/attach/attach.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/attach/attach.tsx"],"names":["classnames","jsx","jsxs"],"mappings":"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","file":"attach.cjs","sourcesContent":["import React from 'react';\nimport './attach.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type AttachItemKind = 'file' | 'link';\n\nexport interface AttachItem {\n  id: string;\n  name: string;\n  url: string;\n  kind?: AttachItemKind;\n  mimeType?: string;\n  sizeBytes?: number;\n}\n\nexport interface AttachProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  items: AttachItem[];\n  onRemove?: (id: string) => void;\n  removeLabel?: string;\n  emptyLabel?: string;\n}\n\nfunction isImageAttach(item: AttachItem) {\n  return item.mimeType?.startsWith('image/') ?? false;\n}\n\nfunction isLinkAttach(item: AttachItem) {\n  return item.kind === 'link';\n}\n\nfunction formatFileSize(sizeBytes?: number) {\n  if (sizeBytes === undefined) {\n    return 'Size unknown';\n  }\n\n  if (sizeBytes < 1024) {\n    return `${sizeBytes} B`;\n  }\n\n  if (sizeBytes < 1024 * 1024) {\n    return `${Math.round(sizeBytes / 1024)} KB`;\n  }\n\n  return `${(sizeBytes / 1024 / 1024).toFixed(1)} MB`;\n}\n\nfunction getLinkHostname(url: string) {\n  try {\n    return new URL(url).hostname.replace(/^www\\./u, '');\n  } catch {\n    return url;\n  }\n}\n\nconst Attach: React.FC<AttachProps> = ({\n  items,\n  onRemove,\n  removeLabel = 'Удалить',\n  emptyLabel,\n  className = '',\n  ...props\n}) => {\n  if (items.length === 0) {\n    return null;\n  }\n\n  const classes = classnames('attach', className, {});\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <ul className=\"attach__list\">\n        {items.map((item) => {\n          const isLink = isLinkAttach(item);\n          const isImage = !isLink && isImageAttach(item);\n\n          const itemClasses = classnames('attach__item', {\n            'attach__item--link': isLink,\n            'attach__item--image': isImage,\n            'attach__item--file': !isLink && !isImage,\n          });\n\n          const meta = isLink\n            ? getLinkHostname(item.url)\n            : formatFileSize(item.sizeBytes);\n\n          return (\n            <li\n              key={item.id}\n              className={itemClasses}\n            >\n              <a\n                className=\"attach__link\"\n                href={item.url}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {isImage ? (\n                  <img\n                    className=\"attach__preview\"\n                    src={item.url}\n                    alt={item.name}\n                  />\n                ) : (\n                  <span className=\"attach__file\">\n                    <span className=\"attach__name\">\n                      {item.name}\n                    </span>\n\n                    <span className=\"attach__meta\">\n                      {meta}\n                    </span>\n                  </span>\n                )}\n              </a>\n\n              {onRemove && (\n                <button\n                  className=\"attach__remove\"\n                  type=\"button\"\n                  aria-label={`${removeLabel}: ${item.name}`}\n                  onClick={() => onRemove(item.id)}\n                >\n                  {removeLabel}\n                </button>\n              )}\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n};\n\nexport default Attach;"]}
+{"version":3,"sources":["../../../src/components/attach/attach.tsx"],"names":["classnames","jsx","jsxs","Button"],"mappings":";;;;;;;;;;;AAyBA,SAAS,cAAc,IAAA,EAAkB;AACvC,EAAA,OAAO,IAAA,CAAK,QAAA,EAAU,UAAA,CAAW,QAAQ,CAAA,IAAK,KAAA;AAChD;AAEA,SAAS,aAAa,IAAA,EAAkB;AACtC,EAAA,OAAO,KAAK,IAAA,KAAS,MAAA;AACvB;AAEA,SAAS,eAAe,SAAA,EAAoB;AAC1C,EAAA,IAAI,cAAc,MAAA,EAAW;AAC3B,IAAA,OAAO,cAAA;AAAA,EACT;AAEA,EAAA,IAAI,YAAY,IAAA,EAAM;AACpB,IAAA,OAAO,GAAG,SAAS,CAAA,OAAA,CAAA;AAAA,EACrB;AAEA,EAAA,IAAI,SAAA,GAAY,OAAO,IAAA,EAAM;AAC3B,IAAA,OAAO,CAAA,EAAG,IAAA,CAAK,KAAA,CAAM,SAAA,GAAY,IAAI,CAAC,CAAA,aAAA,CAAA;AAAA,EACxC;AAEA,EAAA,MAAM,SAAA,GAAA,CACJ,YACA,IAAA,GACA,IAAA,EAEC,QAAQ,CAAC,CAAA,CACT,OAAA,CAAQ,GAAA,EAAK,GAAG,CAAA;AAEnB,EAAA,OAAO,GAAG,SAAS,CAAA,aAAA,CAAA;AACrB;AAEA,SAAS,gBAAgB,GAAA,EAAa;AACpC,EAAA,IAAI;AACF,IAAA,OAAO,IAAI,GAAA,CAAI,GAAG,EAAE,QAAA,CAAS,OAAA,CAAQ,WAAW,EAAE,CAAA;AAAA,EACpD,CAAA,CAAA,MAAQ;AACN,IAAA,OAAO,GAAA;AAAA,EACT;AACF;AAEA,MAAM,SAAgC,CAAC;AAAA,EACrC,KAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA,GAAc,4CAAA;AAAA,EACd,UAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,IAAI,KAAA,CAAM,WAAW,CAAA,EAAG;AACtB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,QAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEJ,yCAAC,IAAA,EAAA,EAAG,SAAA,EAAU,gBACX,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,KAAS;AACnB,QAAA,MAAM,MAAA,GACJ,aAAa,IAAI,CAAA;AAEnB,QAAA,MAAM,OAAA,GACJ,CAAC,MAAA,IACD,aAAA,CAAc,IAAI,CAAA;AAEpB,QAAA,MAAM,WAAA,GACJD,qBAAA;AAAA,UACE,cAAA;AAAA,UACA,EAAA;AAAA,UACA;AAAA,YACE,oBAAA,EACE,MAAA;AAAA,YACF,qBAAA,EACE,OAAA;AAAA,YACF,oBAAA,EACE,CAAC,MAAA,IACD,CAAC;AAAA;AACL,SACF;AAEF,QAAA,MAAM,OAAO,MAAA,GACT,eAAA;AAAA,UACE,IAAA,CAAK;AAAA,SACP,GACA,cAAA;AAAA,UACE,IAAA,CAAK;AAAA,SACP;AAEJ,QAAA,uBACEE,eAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YAEC,SAAA,EAAW,WAAA;AAAA,YAEX,QAAA,EAAA;AAAA,8BAAAD,cAAA;AAAA,gBAAC,GAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAU,cAAA;AAAA,kBACV,MAAM,IAAA,CAAK,GAAA;AAAA,kBACX,MAAA,EAAO,QAAA;AAAA,kBACP,GAAA,EAAI,YAAA;AAAA,kBAEH,QAAA,EAAA,OAAA,mBACCA,cAAA;AAAA,oBAAC,KAAA;AAAA,oBAAA;AAAA,sBACC,SAAA,EAAU,iBAAA;AAAA,sBACV,KAAK,IAAA,CAAK,GAAA;AAAA,sBACV,KAAK,IAAA,CAAK;AAAA;AAAA,mBACZ,mBAEAC,eAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,cAAA,EACd,QAAA,EAAA;AAAA,oCAAAD,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,cAAA,EACb,QAAA,EAAA,IAAA,CAAK,IAAA,EACR,CAAA;AAAA,oCAEAA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,cAAA,EACb,QAAA,EAAA,IAAA,EACH;AAAA,mBAAA,EACF;AAAA;AAAA,eAEJ;AAAA,cAEC,QAAA,oBACCA,cAAA;AAAA,gBAACE,uBAAA;AAAA,gBAAA;AAAA,kBACC,IAAA,EAAK,SAAA;AAAA,kBACL,SAAA,EAAU,gBAAA;AAAA,kBACV,IAAA,EAAK,OAAA;AAAA,kBACL,YAAA,EAAY,CAAA,EAAG,WAAW,CAAA,EAAA,EAAK,KAAK,IAAI,CAAA,CAAA;AAAA,kBACxC,OAAA,EAAS,MACP,QAAA,CAAS,IAAA,CAAK,EAAE;AAAA;AAAA;AAEpB;AAAA,WAAA;AAAA,UArCG,IAAA,CAAK;AAAA,SAuCZ;AAAA,MAEJ,CAAC,CAAA,EACH;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,cAAA,GAAQ","file":"attach.cjs","sourcesContent":["import React from 'react';\n\nimport './attach.css';\nimport Button from '../button';\nimport { classnames } from '../helpers/classnames';\n\nexport type AttachItemKind = 'file' | 'link';\n\nexport interface AttachItem {\n  id: string;\n  name: string;\n  url: string;\n  kind?: AttachItemKind;\n  mimeType?: string;\n  sizeBytes?: number;\n}\n\nexport interface AttachProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  items: AttachItem[];\n  onRemove?: (id: string) => void;\n  removeLabel?: string;\n  emptyLabel?: string;\n}\n\nfunction isImageAttach(item: AttachItem) {\n  return item.mimeType?.startsWith('image/') ?? false;\n}\n\nfunction isLinkAttach(item: AttachItem) {\n  return item.kind === 'link';\n}\n\nfunction formatFileSize(sizeBytes?: number) {\n  if (sizeBytes === undefined) {\n    return 'Size unknown';\n  }\n\n  if (sizeBytes < 1024) {\n    return `${sizeBytes} Б`;\n  }\n\n  if (sizeBytes < 1024 * 1024) {\n    return `${Math.round(sizeBytes / 1024)} КБ`;\n  }\n\n  const megabytes = (\n    sizeBytes /\n    1024 /\n    1024\n  )\n    .toFixed(1)\n    .replace('.', ',');\n\n  return `${megabytes} МБ`;\n}\n\nfunction getLinkHostname(url: string) {\n  try {\n    return new URL(url).hostname.replace(/^www\\./u, '');\n  } catch {\n    return url;\n  }\n}\n\nconst Attach: React.FC<AttachProps> = ({\n  items,\n  onRemove,\n  removeLabel = 'Удалить',\n  emptyLabel,\n  className = '',\n  ...props\n}) => {\n  if (items.length === 0) {\n    return null;\n  }\n\n  const classes = classnames(\n    'attach',\n    className,\n    {},\n  );\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <ul className=\"attach__list\">\n        {items.map((item) => {\n          const isLink =\n            isLinkAttach(item);\n\n          const isImage =\n            !isLink &&\n            isImageAttach(item);\n\n          const itemClasses =\n            classnames(\n              'attach__item',\n              '',\n              {\n                'attach__item--link':\n                  isLink,\n                'attach__item--image':\n                  isImage,\n                'attach__item--file':\n                  !isLink &&\n                  !isImage,\n              },\n            );\n\n          const meta = isLink\n            ? getLinkHostname(\n                item.url,\n              )\n            : formatFileSize(\n                item.sizeBytes,\n              );\n\n          return (\n            <li\n              key={item.id}\n              className={itemClasses}\n            >\n              <a\n                className=\"attach__link\"\n                href={item.url}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {isImage ? (\n                  <img\n                    className=\"attach__preview\"\n                    src={item.url}\n                    alt={item.name}\n                  />\n                ) : (\n                  <span className=\"attach__file\">\n                    <span className=\"attach__name\">\n                      {item.name}\n                    </span>\n\n                    <span className=\"attach__meta\">\n                      {meta}\n                    </span>\n                  </span>\n                )}\n              </a>\n\n              {onRemove && (\n                <Button\n                  mode=\"toolbar\"\n                  className=\"attach__remove\"\n                  icon=\"close\"\n                  aria-label={`${removeLabel}: ${item.name}`}\n                  onClick={() =>\n                    onRemove(item.id)\n                  }\n                />\n              )}\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n};\n\nexport default Attach;\n"]}

package/components/attach/attach.css

@@ -1,10 +1,9 @@
 .attach {
   /* color */
   --attachment-color: var(--color-text);
-  --attachment-item-bg: var(--color-control);
-  --attachment-item-color: var(--color-text-control);
-  --attachment-border-color: var(--color-line);
-  --attachment-item-meta-color: var(--color-text-note);
+  --attachment-item-bg: var(--color-bg-media);
+  --attachment-item-color: var(--color-text);
+  --attachment-item-meta-color: var(--color-text);
 
   color: var(--attachment-color);
 
@@ -22,15 +21,16 @@
   letter-spacing: var(--attachment-letter-spacing);
 
   /* size */
-  --attachment-gap: var(--margin-control);
-  --attachment-item-gap: var(--margin-icon);
-  --attachment-item-padding: var(--padding-control-vert);
-  --attachment-preview-max-width: 240px;
-  --attachment-preview-max-height: 180px;
+  --attachment-gap: var(--margin-container);
+  --attachment-item-padding: var(--padding-container);
+  --attachment-remove-offset: var(--margin-container);
+  --attachment-aspect-ratio: 9 / 6;
+
+  width: 100%;
+  min-width: 0;
 
   /* border */
-  --attachment-radius: var(--radius-control);
-  --attachment-border-width: var(--size-border-width-base);
+  --attachment-radius: var(--radius-container);
 
   /* depth */
 
@@ -43,9 +43,13 @@
   /* typography */
 
   /* size */
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns:
+    repeat(3, minmax(0, 1fr));
   gap: var(--attachment-gap);
+
+  width: 100%;
+  min-width: 0;
   margin: 0;
   padding: 0;
 
@@ -65,17 +69,14 @@
   /* typography */
 
   /* size */
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--attachment-item-gap);
-  padding: var(--attachment-item-padding);
+  position: relative;
+  min-width: 0;
+  aspect-ratio:
+    var(--attachment-aspect-ratio);
+
+  overflow: hidden;
 
   /* border */
-  border:
-    var(--attachment-border-width)
-    solid
-    var(--attachment-border-color);
   border-radius: var(--attachment-radius);
 
   /* depth */
@@ -91,6 +92,9 @@
   text-decoration: none;
 
   /* size */
+  display: block;
+  width: 100%;
+  height: 100%;
   min-width: 0;
 
   /* border */
@@ -100,6 +104,25 @@
   /* motion */
 }
 
+.attach__item--file .attach__link,
+.attach__item--link .attach__link {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: flex-end;
+
+  padding: var(--attachment-item-padding);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .attach__link:hover .attach__name {
   /* color */
 
@@ -122,12 +145,13 @@
 
   /* size */
   display: block;
-  max-width: var(--attachment-preview-max-width);
-  max-height: var(--attachment-preview-max-height);
-  object-fit: contain;
+
+  width: 100%;
+  height: 100%;
+
+  object-fit: cover;
 
   /* border */
-  border-radius: var(--attachment-radius);
 
   /* depth */
 
@@ -142,6 +166,8 @@
   /* size */
   display: flex;
   flex-direction: column;
+
+  width: 100%;
   min-width: 0;
 
   /* border */
@@ -159,6 +185,8 @@
   white-space: nowrap;
 
   /* size */
+  min-width: 0;
+
   overflow: hidden;
 
   /* border */
@@ -173,7 +201,11 @@
   color: var(--attachment-item-meta-color);
 
   /* typography */
-  font-size: 0.85em;
+  font-family: var(--font-body-family);
+  font-size: var(--font-body);
+  font-weight: var(--font-body-weight);
+  line-height: var(--font-body-line);
+  letter-spacing: var(--font-body-letter-spacing);
 
   /* size */
 
@@ -186,30 +218,28 @@
 
 .attach__remove {
   /* color */
-  background: transparent;
   color: inherit;
 
   /* typography */
-  font: inherit;
 
   /* size */
-  flex-shrink: 0;
-  padding: 0;
+  position: absolute;
+  top: var(--attachment-remove-offset);
+  right: var(--attachment-remove-offset);
+  z-index: 1;
 
   /* border */
-  border: 0;
 
   /* depth */
 
   /* motion */
-  cursor: pointer;
 }
 
-.attach__remove:hover {
+.attach__item--image .attach__remove {
   /* color */
+  color: var(--color-contrast);
 
   /* typography */
-  text-decoration: underline;
 
   /* size */
 

package/components/attach/attach.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import './attach.css';
+import Button from '../button';
 import { classnames } from '../helpers/classnames';
 
 function isImageAttach(item) {
@@ -13,12 +14,13 @@ function formatFileSize(sizeBytes) {
     return "Size unknown";
   }
   if (sizeBytes < 1024) {
-    return `${sizeBytes} B`;
+    return `${sizeBytes} \u0411`;
   }
   if (sizeBytes < 1024 * 1024) {
-    return `${Math.round(sizeBytes / 1024)} KB`;
+    return `${Math.round(sizeBytes / 1024)} \u041A\u0411`;
   }
-  return `${(sizeBytes / 1024 / 1024).toFixed(1)} MB`;
+  const megabytes = (sizeBytes / 1024 / 1024).toFixed(1).replace(".", ",");
+  return `${megabytes} \u041C\u0411`;
 }
 function getLinkHostname(url) {
   try {
@@ -38,7 +40,11 @@ const Attach = ({
   if (items.length === 0) {
     return null;
   }
-  const classes = classnames("attach", className, {});
+  const classes = classnames(
+    "attach",
+    className,
+    {}
+  );
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -47,12 +53,20 @@ const Attach = ({
       children: /* @__PURE__ */ jsx("ul", { className: "attach__list", children: items.map((item) => {
         const isLink = isLinkAttach(item);
         const isImage = !isLink && isImageAttach(item);
-        const itemClasses = classnames("attach__item", {
-          "attach__item--link": isLink,
-          "attach__item--image": isImage,
-          "attach__item--file": !isLink && !isImage
-        });
-        const meta = isLink ? getLinkHostname(item.url) : formatFileSize(item.sizeBytes);
+        const itemClasses = classnames(
+          "attach__item",
+          "",
+          {
+            "attach__item--link": isLink,
+            "attach__item--image": isImage,
+            "attach__item--file": !isLink && !isImage
+          }
+        );
+        const meta = isLink ? getLinkHostname(
+          item.url
+        ) : formatFileSize(
+          item.sizeBytes
+        );
         return /* @__PURE__ */ jsxs(
           "li",
           {
@@ -79,13 +93,13 @@ const Attach = ({
                 }
               ),
               onRemove && /* @__PURE__ */ jsx(
-                "button",
+                Button,
                 {
+                  mode: "toolbar",
                   className: "attach__remove",
-                  type: "button",
+                  icon: "close",
                   "aria-label": `${removeLabel}: ${item.name}`,
-                  onClick: () => onRemove(item.id),
-                  children: removeLabel
+                  onClick: () => onRemove(item.id)
                 }
               )
             ]

package/components/attach/attach.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/attach/attach.tsx"],"names":[],"mappings":"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","file":"attach.js","sourcesContent":["import React from 'react';\nimport './attach.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type AttachItemKind = 'file' | 'link';\n\nexport interface AttachItem {\n  id: string;\n  name: string;\n  url: string;\n  kind?: AttachItemKind;\n  mimeType?: string;\n  sizeBytes?: number;\n}\n\nexport interface AttachProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  items: AttachItem[];\n  onRemove?: (id: string) => void;\n  removeLabel?: string;\n  emptyLabel?: string;\n}\n\nfunction isImageAttach(item: AttachItem) {\n  return item.mimeType?.startsWith('image/') ?? false;\n}\n\nfunction isLinkAttach(item: AttachItem) {\n  return item.kind === 'link';\n}\n\nfunction formatFileSize(sizeBytes?: number) {\n  if (sizeBytes === undefined) {\n    return 'Size unknown';\n  }\n\n  if (sizeBytes < 1024) {\n    return `${sizeBytes} B`;\n  }\n\n  if (sizeBytes < 1024 * 1024) {\n    return `${Math.round(sizeBytes / 1024)} KB`;\n  }\n\n  return `${(sizeBytes / 1024 / 1024).toFixed(1)} MB`;\n}\n\nfunction getLinkHostname(url: string) {\n  try {\n    return new URL(url).hostname.replace(/^www\\./u, '');\n  } catch {\n    return url;\n  }\n}\n\nconst Attach: React.FC<AttachProps> = ({\n  items,\n  onRemove,\n  removeLabel = 'Удалить',\n  emptyLabel,\n  className = '',\n  ...props\n}) => {\n  if (items.length === 0) {\n    return null;\n  }\n\n  const classes = classnames('attach', className, {});\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <ul className=\"attach__list\">\n        {items.map((item) => {\n          const isLink = isLinkAttach(item);\n          const isImage = !isLink && isImageAttach(item);\n\n          const itemClasses = classnames('attach__item', {\n            'attach__item--link': isLink,\n            'attach__item--image': isImage,\n            'attach__item--file': !isLink && !isImage,\n          });\n\n          const meta = isLink\n            ? getLinkHostname(item.url)\n            : formatFileSize(item.sizeBytes);\n\n          return (\n            <li\n              key={item.id}\n              className={itemClasses}\n            >\n              <a\n                className=\"attach__link\"\n                href={item.url}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {isImage ? (\n                  <img\n                    className=\"attach__preview\"\n                    src={item.url}\n                    alt={item.name}\n                  />\n                ) : (\n                  <span className=\"attach__file\">\n                    <span className=\"attach__name\">\n                      {item.name}\n                    </span>\n\n                    <span className=\"attach__meta\">\n                      {meta}\n                    </span>\n                  </span>\n                )}\n              </a>\n\n              {onRemove && (\n                <button\n                  className=\"attach__remove\"\n                  type=\"button\"\n                  aria-label={`${removeLabel}: ${item.name}`}\n                  onClick={() => onRemove(item.id)}\n                >\n                  {removeLabel}\n                </button>\n              )}\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n};\n\nexport default Attach;"]}
+{"version":3,"sources":["../../../src/components/attach/attach.tsx"],"names":[],"mappings":"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","file":"attach.js","sourcesContent":["import React from 'react';\n\nimport './attach.css';\nimport Button from '../button';\nimport { classnames } from '../helpers/classnames';\n\nexport type AttachItemKind = 'file' | 'link';\n\nexport interface AttachItem {\n  id: string;\n  name: string;\n  url: string;\n  kind?: AttachItemKind;\n  mimeType?: string;\n  sizeBytes?: number;\n}\n\nexport interface AttachProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  items: AttachItem[];\n  onRemove?: (id: string) => void;\n  removeLabel?: string;\n  emptyLabel?: string;\n}\n\nfunction isImageAttach(item: AttachItem) {\n  return item.mimeType?.startsWith('image/') ?? false;\n}\n\nfunction isLinkAttach(item: AttachItem) {\n  return item.kind === 'link';\n}\n\nfunction formatFileSize(sizeBytes?: number) {\n  if (sizeBytes === undefined) {\n    return 'Size unknown';\n  }\n\n  if (sizeBytes < 1024) {\n    return `${sizeBytes} Б`;\n  }\n\n  if (sizeBytes < 1024 * 1024) {\n    return `${Math.round(sizeBytes / 1024)} КБ`;\n  }\n\n  const megabytes = (\n    sizeBytes /\n    1024 /\n    1024\n  )\n    .toFixed(1)\n    .replace('.', ',');\n\n  return `${megabytes} МБ`;\n}\n\nfunction getLinkHostname(url: string) {\n  try {\n    return new URL(url).hostname.replace(/^www\\./u, '');\n  } catch {\n    return url;\n  }\n}\n\nconst Attach: React.FC<AttachProps> = ({\n  items,\n  onRemove,\n  removeLabel = 'Удалить',\n  emptyLabel,\n  className = '',\n  ...props\n}) => {\n  if (items.length === 0) {\n    return null;\n  }\n\n  const classes = classnames(\n    'attach',\n    className,\n    {},\n  );\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <ul className=\"attach__list\">\n        {items.map((item) => {\n          const isLink =\n            isLinkAttach(item);\n\n          const isImage =\n            !isLink &&\n            isImageAttach(item);\n\n          const itemClasses =\n            classnames(\n              'attach__item',\n              '',\n              {\n                'attach__item--link':\n                  isLink,\n                'attach__item--image':\n                  isImage,\n                'attach__item--file':\n                  !isLink &&\n                  !isImage,\n              },\n            );\n\n          const meta = isLink\n            ? getLinkHostname(\n                item.url,\n              )\n            : formatFileSize(\n                item.sizeBytes,\n              );\n\n          return (\n            <li\n              key={item.id}\n              className={itemClasses}\n            >\n              <a\n                className=\"attach__link\"\n                href={item.url}\n                target=\"_blank\"\n                rel=\"noreferrer\"\n              >\n                {isImage ? (\n                  <img\n                    className=\"attach__preview\"\n                    src={item.url}\n                    alt={item.name}\n                  />\n                ) : (\n                  <span className=\"attach__file\">\n                    <span className=\"attach__name\">\n                      {item.name}\n                    </span>\n\n                    <span className=\"attach__meta\">\n                      {meta}\n                    </span>\n                  </span>\n                )}\n              </a>\n\n              {onRemove && (\n                <Button\n                  mode=\"toolbar\"\n                  className=\"attach__remove\"\n                  icon=\"close\"\n                  aria-label={`${removeLabel}: ${item.name}`}\n                  onClick={() =>\n                    onRemove(item.id)\n                  }\n                />\n              )}\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n};\n\nexport default Attach;\n"]}

package/components/attach/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from './attach';
-export type { AttachItem, AttachProps, } from './attach';
+export type { AttachItem, AttachItemKind, AttachProps, } from './attach';

package/components/index.d.ts

@@ -38,7 +38,7 @@ export type { LogoProps } from './logo/logo';
 export { default as Avatar } from './avatar/avatar';
 export type { AvatarProps } from './avatar/avatar';
 export { default as Attach } from './attach/attach';
-export type { AttachItem, AttachProps, } from './attach/attach';
+export type { AttachItem, AttachItemKind, AttachProps, } from './attach/attach';
 export { default as ActionGroup } from './action-group/action-group';
 export type { ActionGroupProps } from './action-group/action-group';
 export { default as CardGroup } from './card-group/card-group';

package/index.d.ts

@@ -45,7 +45,7 @@ export type { LogoProps } from './components/logo';
 export { default as Avatar } from './components/avatar';
 export type { AvatarProps } from './components/avatar';
 export { default as Attach } from './components/attach';
-export type { AttachItem, AttachProps, } from './components/attach';
+export type { AttachItem, AttachItemKind, AttachProps, } from './components/attach';
 export { default as ActionGroup } from './components/action-group';
 export type { ActionGroupProps } from './components/action-group';
 export { default as CardGroup } from './components/card-group';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jvetrau-ds",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "description": "Multi-brand React design system with semantic tokens",
   "license": "UNLICENSED",
   "type": "module",

package/styles.css

@@ -30,10 +30,9 @@
 .attach {
   /* color */
   --attachment-color: var(--color-text);
-  --attachment-item-bg: var(--color-control);
-  --attachment-item-color: var(--color-text-control);
-  --attachment-border-color: var(--color-line);
-  --attachment-item-meta-color: var(--color-text-note);
+  --attachment-item-bg: var(--color-bg-media);
+  --attachment-item-color: var(--color-text);
+  --attachment-item-meta-color: var(--color-text);
 
   color: var(--attachment-color);
 
@@ -51,15 +50,16 @@
   letter-spacing: var(--attachment-letter-spacing);
 
   /* size */
-  --attachment-gap: var(--margin-control);
-  --attachment-item-gap: var(--margin-icon);
-  --attachment-item-padding: var(--padding-control-vert);
-  --attachment-preview-max-width: 240px;
-  --attachment-preview-max-height: 180px;
+  --attachment-gap: var(--margin-container);
+  --attachment-item-padding: var(--padding-container);
+  --attachment-remove-offset: var(--margin-container);
+  --attachment-aspect-ratio: 9 / 6;
+
+  width: 100%;
+  min-width: 0;
 
   /* border */
-  --attachment-radius: var(--radius-control);
-  --attachment-border-width: var(--size-border-width-base);
+  --attachment-radius: var(--radius-container);
 
   /* depth */
 
@@ -72,9 +72,13 @@
   /* typography */
 
   /* size */
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns:
+    repeat(3, minmax(0, 1fr));
   gap: var(--attachment-gap);
+
+  width: 100%;
+  min-width: 0;
   margin: 0;
   padding: 0;
 
@@ -94,17 +98,14 @@
   /* typography */
 
   /* size */
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--attachment-item-gap);
-  padding: var(--attachment-item-padding);
+  position: relative;
+  min-width: 0;
+  aspect-ratio:
+    var(--attachment-aspect-ratio);
+
+  overflow: hidden;
 
   /* border */
-  border:
-    var(--attachment-border-width)
-    solid
-    var(--attachment-border-color);
   border-radius: var(--attachment-radius);
 
   /* depth */
@@ -120,6 +121,9 @@
   text-decoration: none;
 
   /* size */
+  display: block;
+  width: 100%;
+  height: 100%;
   min-width: 0;
 
   /* border */
@@ -129,6 +133,25 @@
   /* motion */
 }
 
+.attach__item--file .attach__link,
+.attach__item--link .attach__link {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: flex-end;
+
+  padding: var(--attachment-item-padding);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .attach__link:hover .attach__name {
   /* color */
 
@@ -151,12 +174,13 @@
 
   /* size */
   display: block;
-  max-width: var(--attachment-preview-max-width);
-  max-height: var(--attachment-preview-max-height);
-  object-fit: contain;
+
+  width: 100%;
+  height: 100%;
+
+  object-fit: cover;
 
   /* border */
-  border-radius: var(--attachment-radius);
 
   /* depth */
 
@@ -171,6 +195,8 @@
   /* size */
   display: flex;
   flex-direction: column;
+
+  width: 100%;
   min-width: 0;
 
   /* border */
@@ -188,6 +214,8 @@
   white-space: nowrap;
 
   /* size */
+  min-width: 0;
+
   overflow: hidden;
 
   /* border */
@@ -202,7 +230,11 @@
   color: var(--attachment-item-meta-color);
 
   /* typography */
-  font-size: 0.85em;
+  font-family: var(--font-body-family);
+  font-size: var(--font-body);
+  font-weight: var(--font-body-weight);
+  line-height: var(--font-body-line);
+  letter-spacing: var(--font-body-letter-spacing);
 
   /* size */
 
@@ -215,30 +247,28 @@
 
 .attach__remove {
   /* color */
-  background: transparent;
   color: inherit;
 
   /* typography */
-  font: inherit;
 
   /* size */
-  flex-shrink: 0;
-  padding: 0;
+  position: absolute;
+  top: var(--attachment-remove-offset);
+  right: var(--attachment-remove-offset);
+  z-index: 1;
 
   /* border */
-  border: 0;
 
   /* depth */
 
   /* motion */
-  cursor: pointer;
 }
 
-.attach__remove:hover {
+.attach__item--image .attach__remove {
   /* color */
+  color: var(--color-contrast);
 
   /* typography */
-  text-decoration: underline;
 
   /* size */