jvetrau-ds 0.2.19 → 0.2.22

package/components/logo/logo.js

@@ -1,43 +1,85 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import './logo.css';
 import { classnames } from '../helpers/classnames';
-import logoSymbol from './assets/logo-symbol.svg';
-import logoWordmark from './assets/logo-wordmark.svg';
+import brandcopilotSymbol from './assets/brandcopilot-symbol.svg';
+import brandcopilotWordmark from './assets/brandcopilot-wordmark.svg';
+import dmpatternsSymbol from './assets/dmpatterns-symbol.svg';
+import dmpatternsWordmark from './assets/dmpatterns-wordmark.svg';
 
+const logoBrands = {
+  dmpatterns: {
+    label: "\u041F\u0430\u0442\u0442\u0435\u0440\u043D\u044B \u0434\u0438\u0437\u0430\u0439\u043D-\u043C\u0435\u043D\u0435\u0434\u0436\u043C\u0435\u043D\u0442\u0430",
+    symbol: dmpatternsSymbol,
+    wordmark: dmpatternsWordmark
+  },
+  brandcopilot: {
+    label: "Brandcopilot",
+    symbol: brandcopilotSymbol,
+    wordmark: brandcopilotWordmark
+  },
+  pdigest: {
+    label: "PDigest",
+    symbol: dmpatternsSymbol,
+    wordmark: dmpatternsWordmark
+  },
+  retrack: {
+    label: "Retrack",
+    symbol: dmpatternsSymbol,
+    wordmark: dmpatternsWordmark
+  }
+};
 const Logo = ({
+  brand = "dmpatterns",
   mode = "full",
-  label = "\u041F\u0430\u0442\u0442\u0435\u0440\u043D\u044B \u0434\u0438\u0437\u0430\u0439\u043D-\u043C\u0435\u043D\u0435\u0434\u0436\u043C\u0435\u043D\u0442\u0430",
+  label,
   className = "",
   ...props
 }) => {
-  const classes = classnames("logo", className, {
-    "logo--symbol": mode === "symbol"
-  });
+  const logo = logoBrands[brand];
+  const accessibleLabel = label ?? logo.label;
+  const classes = classnames(
+    "logo",
+    `logo--${brand}`,
+    className,
+    {
+      "logo--symbol": mode === "symbol"
+    }
+  );
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: classes,
-      "aria-label": label,
+      "aria-label": accessibleLabel,
       ...props,
       children: [
         /* @__PURE__ */ jsx(
           "img",
           {
             className: "logo__symbol",
-            src: logoSymbol,
+            src: logo.symbol,
             alt: "",
             "aria-hidden": "true"
           }
         ),
-        mode === "full" && /* @__PURE__ */ jsx(
+        mode === "full" && (brand === "brandcopilot" ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "logo__wordmark logo__wordmark--mask",
+            "aria-hidden": "true",
+            style: {
+              WebkitMaskImage: `url("${logo.wordmark}")`,
+              maskImage: `url("${logo.wordmark}")`
+            }
+          }
+        ) : /* @__PURE__ */ jsx(
           "img",
           {
             className: "logo__wordmark",
-            src: logoWordmark,
+            src: logo.wordmark,
             alt: "",
             "aria-hidden": "true"
           }
-        )
+        ))
       ]
     }
   );

package/components/logo/logo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/logo/logo.tsx"],"names":[],"mappings":";;;;;;AAaA,MAAM,OAA4B,CAAC;AAAA,EACjC,IAAA,GAAO,MAAA;AAAA,EACP,KAAA,GAAQ,0JAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,MAAA,EAAQ,SAAA,EAAW;AAAA,IAC5C,gBAAgB,IAAA,KAAS;AAAA,GAC1B,CAAA;AAED,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,YAAA,EAAY,KAAA;AAAA,MACX,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,cAAA;AAAA,YACV,GAAA,EAAK,UAAA;AAAA,YACL,GAAA,EAAI,EAAA;AAAA,YACJ,aAAA,EAAY;AAAA;AAAA,SACd;AAAA,QAEC,SAAS,MAAA,oBACR,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,gBAAA;AAAA,YACV,GAAA,EAAK,YAAA;AAAA,YACL,GAAA,EAAI,EAAA;AAAA,YACJ,aAAA,EAAY;AAAA;AAAA;AACd;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"logo.js","sourcesContent":["import React from 'react';\nimport './logo.css';\nimport { classnames } from '../helpers/classnames';\n\nimport logoSymbol from './assets/logo-symbol.svg';\nimport logoWordmark from './assets/logo-wordmark.svg';\n\nexport interface LogoProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  mode?: 'full' | 'symbol';\n  label?: string;\n}\n\nconst Logo: React.FC<LogoProps> = ({\n  mode = 'full',\n  label = 'Паттерны дизайн-менеджмента',\n  className = '',\n  ...props\n}) => {\n  const classes = classnames('logo', className, {\n    'logo--symbol': mode === 'symbol',\n  });\n\n  return (\n    <div\n      className={classes}\n      aria-label={label}\n      {...props}\n    >\n      <img\n        className=\"logo__symbol\"\n        src={logoSymbol}\n        alt=\"\"\n        aria-hidden=\"true\"\n      />\n\n      {mode === 'full' && (\n        <img\n          className=\"logo__wordmark\"\n          src={logoWordmark}\n          alt=\"\"\n          aria-hidden=\"true\"\n        />\n      )}\n    </div>\n  );\n};\n\nexport default Logo;"]}
+{"version":3,"sources":["../../../src/components/logo/logo.tsx"],"names":[],"mappings":";;;;;;;;AAuBA,MAAM,UAAA,GAGF;AAAA,EACF,UAAA,EAAY;AAAA,IACV,KAAA,EAAO,0JAAA;AAAA,IACP,MAAA,EAAQ,gBAAA;AAAA,IACR,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,KAAA,EAAO,cAAA;AAAA,IACP,MAAA,EAAQ,kBAAA;AAAA,IACR,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,OAAA,EAAS;AAAA,IACP,KAAA,EAAO,SAAA;AAAA,IACP,MAAA,EAAQ,gBAAA;AAAA,IACR,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,OAAA,EAAS;AAAA,IACP,KAAA,EAAO,SAAA;AAAA,IACP,MAAA,EAAQ,gBAAA;AAAA,IACR,QAAA,EAAU;AAAA;AAEd,CAAA;AASA,MAAM,OAA4B,CAAC;AAAA,EACjC,KAAA,GAAQ,YAAA;AAAA,EACR,IAAA,GAAO,MAAA;AAAA,EACP,KAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,IAAA,GAAO,WAAW,KAAK,CAAA;AAC7B,EAAA,MAAM,eAAA,GAAkB,SAAS,IAAA,CAAK,KAAA;AAEtC,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,MAAA;AAAA,IACA,SAAS,KAAK,CAAA,CAAA;AAAA,IACd,SAAA;AAAA,IACA;AAAA,MACE,gBAAgB,IAAA,KAAS;AAAA;AAC3B,GACF;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,YAAA,EAAY,eAAA;AAAA,MACX,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,cAAA;AAAA,YACV,KAAK,IAAA,CAAK,MAAA;AAAA,YACV,GAAA,EAAI,EAAA;AAAA,YACJ,aAAA,EAAY;AAAA;AAAA,SACd;AAAA,QAEC,IAAA,KAAS,MAAA,KACP,KAAA,KAAU,cAAA,mBACT,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,qCAAA;AAAA,YACV,aAAA,EAAY,MAAA;AAAA,YACZ,KAAA,EAAO;AAAA,cACL,eAAA,EAAiB,CAAA,KAAA,EAAQ,IAAA,CAAK,QAAQ,CAAA,EAAA,CAAA;AAAA,cACtC,SAAA,EAAW,CAAA,KAAA,EAAQ,IAAA,CAAK,QAAQ,CAAA,EAAA;AAAA;AAClC;AAAA,SACF,mBAEA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,gBAAA;AAAA,YACV,KAAK,IAAA,CAAK,QAAA;AAAA,YACV,GAAA,EAAI,EAAA;AAAA,YACJ,aAAA,EAAY;AAAA;AAAA,SACd;AAAA;AAAA;AAAA,GAEN;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"logo.js","sourcesContent":["import React from 'react';\nimport './logo.css';\nimport { classnames } from '../helpers/classnames';\n\nimport brandcopilotSymbol from './assets/brandcopilot-symbol.svg';\nimport brandcopilotWordmark from './assets/brandcopilot-wordmark.svg';\nimport dmpatternsSymbol from './assets/dmpatterns-symbol.svg';\nimport dmpatternsWordmark from './assets/dmpatterns-wordmark.svg';\n\nexport type LogoBrand =\n  | 'dmpatterns'\n  | 'brandcopilot'\n  | 'pdigest'\n  | 'retrack';\n\nexport type LogoMode = 'full' | 'symbol';\n\ninterface LogoBrandDefinition {\n  label: string;\n  symbol: string;\n  wordmark: string;\n}\n\nconst logoBrands: Record<\n  LogoBrand,\n  LogoBrandDefinition\n> = {\n  dmpatterns: {\n    label: 'Паттерны дизайн-менеджмента',\n    symbol: dmpatternsSymbol,\n    wordmark: dmpatternsWordmark,\n  },\n  brandcopilot: {\n    label: 'Brandcopilot',\n    symbol: brandcopilotSymbol,\n    wordmark: brandcopilotWordmark,\n  },\n  pdigest: {\n    label: 'PDigest',\n    symbol: dmpatternsSymbol,\n    wordmark: dmpatternsWordmark,\n  },\n  retrack: {\n    label: 'Retrack',\n    symbol: dmpatternsSymbol,\n    wordmark: dmpatternsWordmark,\n  },\n};\n\nexport interface LogoProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  brand?: LogoBrand;\n  mode?: LogoMode;\n  label?: string;\n}\n\nconst Logo: React.FC<LogoProps> = ({\n  brand = 'dmpatterns',\n  mode = 'full',\n  label,\n  className = '',\n  ...props\n}) => {\n  const logo = logoBrands[brand];\n  const accessibleLabel = label ?? logo.label;\n\n  const classes = classnames(\n    'logo',\n    `logo--${brand}`,\n    className,\n    {\n      'logo--symbol': mode === 'symbol',\n    },\n  );\n\n  return (\n    <div\n      className={classes}\n      aria-label={accessibleLabel}\n      {...props}\n    >\n      <img\n        className=\"logo__symbol\"\n        src={logo.symbol}\n        alt=\"\"\n        aria-hidden=\"true\"\n      />\n\n      {mode === 'full' &&\n        (brand === 'brandcopilot' ? (\n          <span\n            className=\"logo__wordmark logo__wordmark--mask\"\n            aria-hidden=\"true\"\n            style={{\n              WebkitMaskImage: `url(\"${logo.wordmark}\")`,\n              maskImage: `url(\"${logo.wordmark}\")`,\n            }}\n          />\n        ) : (\n          <img\n            className=\"logo__wordmark\"\n            src={logo.wordmark}\n            alt=\"\"\n            aria-hidden=\"true\"\n          />\n        ))}\n    </div>\n  );\n};\n\nexport default Logo;\n"]}

package/components/logo/logo.meta.d.ts

@@ -1,10 +1,2 @@
-export declare const logoMeta: {
-    name: string;
-    purpose: string;
-    anatomy: string[];
-    states: string[];
-    props: string[];
-    usage: string[];
-    llmDescription: string;
-    example: string;
-};
+import type { ComponentMeta } from '../../catalog/types';
+export declare const logoMeta: ComponentMeta;

package/components/markdown/markdown.css

@@ -1,211 +1,2 @@
 .markdown {
-  /* color */
-
-  /* typography */
-
-  /* size */
-  --markdown-block-gap: var(--margin-container-item);
-  --markdown-list-gap: var(--margin-control);
-  --markdown-list-padding: var(--padding-container);
-  --markdown-code-padding-inline: var(--padding-control-horz);
-  --markdown-code-padding-block: var(--padding-control-vert);
-  --markdown-table-cell-padding: var(--padding-control-vert);
-
-  /* border */
-  --markdown-border-width: var(--size-border-width-base);
-  --markdown-radius: var(--radius-control);
-
-  /* depth */
-
-  /* motion */
-}
-
-.markdown > * {
-  /* size */
-  margin: 0;
-}
-
-.markdown > :not(:first-child) {
-  /* size */
-  margin-top: var(--markdown-block-gap);
-}
-
-.markdown h1,
-.markdown h2,
-.markdown h3,
-.markdown h4,
-.markdown h5,
-.markdown h6,
-.markdown p {
-  /* size */
-  margin: 0;
-}
-
-.markdown h5,
-.markdown h6 {
-  /* typography */
-  font-family: var(--font-h4-family);
-  font-size: var(--font-h4);
-  font-weight: var(--font-h4-weight);
-  line-height: var(--font-h4-line);
-  letter-spacing: var(--font-h4-letter-spacing);
-}
-
-.markdown ul,
-.markdown ol {
-  /* size */
-  display: flex;
-  flex-direction: column;
-  gap: var(--markdown-list-gap);
-  margin: 0;
-  padding-left: var(--markdown-list-padding);
-}
-
-.markdown ul {
-  /* border */
-  list-style: disc;
-}
-
-.markdown ol {
-  /* border */
-  list-style: decimal;
-}
-
-.markdown li {
-  /* size */
-  margin: 0;
-}
-
-.markdown li > ul,
-.markdown li > ol {
-  /* size */
-  margin-top: var(--markdown-list-gap);
-}
-
-.markdown blockquote {
-  /* color */
-  color: var(--color-text-note);
-
-  /* size */
-  margin: 0;
-  padding-left: var(--padding-container);
-
-  /* border */
-  border-left:
-    var(--markdown-border-width)
-    solid
-    var(--color-line);
-}
-
-.markdown img {
-  /* size */
-  display: block;
-  max-width: 100%;
-  height: auto;
-
-  /* border */
-  border-radius: var(--markdown-radius);
-}
-
-.markdown hr {
-  /* size */
-  margin: 0;
-
-  /* border */
-  border: 0;
-  border-top:
-    var(--markdown-border-width)
-    solid
-    var(--color-line);
-}
-
-.markdown code {
-  /* color */
-  background: var(--color-control);
-  color: var(--color-text-control);
-
-  /* typography */
-  font-family: monospace;
-  font-size: 0.9em;
-
-  /* size */
-  padding:
-    0
-    var(--markdown-code-padding-inline);
-
-  /* border */
-  border-radius: var(--markdown-radius);
-}
-
-.markdown pre {
-  /* color */
-  background: var(--color-control);
-  color: var(--color-text-control);
-
-  /* size */
-  margin: 0;
-  padding:
-    var(--markdown-code-padding-block)
-    var(--markdown-code-padding-inline);
-  overflow-x: auto;
-
-  /* border */
-  border-radius: var(--markdown-radius);
-}
-
-.markdown pre code {
-  /* color */
-  background: transparent;
-  color: inherit;
-
-  /* typography */
-  font-size: inherit;
-
-  /* size */
-  padding: 0;
-
-  /* border */
-  border-radius: 0;
-}
-
-.markdown table {
-  /* size */
-  width: 100%;
-
-  /* border */
-  border-collapse: collapse;
-}
-
-.markdown th,
-.markdown td {
-  /* color */
-  color: inherit;
-
-  /* typography */
-  text-align: left;
-  vertical-align: top;
-
-  /* size */
-  padding: var(--markdown-table-cell-padding);
-
-  /* border */
-  border:
-    var(--markdown-border-width)
-    solid
-    var(--color-line);
-}
-
-.markdown th {
-  /* typography */
-  font-weight: var(--font-body-weight);
-}
-
-.markdown input[type='checkbox'] {
-  /* size */
-  margin: 0;
-}
-
-.markdown--excerpt > p {
-  /* size */
-  margin: 0;
 }

package/fonts/fonts.css

@@ -3,6 +3,6 @@
   font-family: 'PP Object Sans Variable';
   src: url('./pp-object-sans/PP Object Sans Variable.woff2') format('woff2');
   font-style: normal;
-  font-weight: 300 900;
+  font-weight: 143 900;
   font-display: swap;
-}
+}

package/index.d.ts

@@ -45,9 +45,9 @@ export type { CardProps } from './components/card';
 export { default as Panel } from './components/panel';
 export type { PanelProps } from './components/panel';
 export { default as Logo } from './components/logo';
-export type { LogoProps } from './components/logo';
+export type { LogoBrand, LogoMode, LogoProps, } from './components/logo';
 export { default as Avatar } from './components/avatar';
-export type { AvatarProps } from './components/avatar';
+export type { AvatarProps, AvatarSize, } from './components/avatar';
 export { default as Attach } from './components/attach';
 export type { AttachItem, AttachItemKind, AttachProps, } from './components/attach';
 export { default as ActionGroup } from './components/action-group';

package/layouts/base/base.css

@@ -96,6 +96,21 @@
   /* motion */
 }
 
+.layout-base__content > .panel + .panel {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  margin-top: var(--margin-container-item);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .layout-base__content--narrow {
   --layout-base-content-width: 720px;
 }

package/layouts/sidebar/sidebar.css

@@ -47,6 +47,21 @@
   /* motion */
 }
 
+.layout-sidebar__main > .panel + .panel {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  margin-top: var(--margin-container-item);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .layout-sidebar__side {
   /* color */
 

package/package.json

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