jvetrau-ds 0.1.45 → 0.2.2

package/components/tabs/tabs.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var classnames = require('../helpers/classnames');
 require('./tabs.css');
+var classnames = require('../helpers/classnames');
 
 const Tabs = ({
   items,
@@ -11,7 +11,11 @@ const Tabs = ({
   onValueChange,
   ...props
 }) => {
-  const classes = classnames.classnames("tabs", className, {});
+  const classes = classnames.classnames(
+    "tabs",
+    className,
+    {}
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -25,9 +29,17 @@ const Tabs = ({
           "aria-label": "Tabs",
           children: items.map((item) => {
             const isSelected = item.value === value;
-            const tabClasses = classnames.classnames("tabs__tab", {
-              "tabs__tab--selected": isSelected
-            });
+            const hasCount = item.count !== void 0;
+            const tabClasses = classnames.classnames(
+              "tabs__tab",
+              {
+                "tabs__tab--selected": isSelected
+              }
+            );
+            const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabs__label", children: item.label }),
+              hasCount && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabs__count", children: item.count })
+            ] });
             if (item.href) {
               return /* @__PURE__ */ jsxRuntime.jsx(
                 "a",
@@ -35,8 +47,10 @@ const Tabs = ({
                   className: tabClasses,
                   href: item.href,
                   "aria-current": isSelected ? "page" : void 0,
-                  onClick: () => onValueChange?.(item.value),
-                  children: item.label
+                  onClick: () => onValueChange?.(
+                    item.value
+                  ),
+                  children: content
                 },
                 item.value
               );
@@ -48,8 +62,10 @@ const Tabs = ({
                 type: "button",
                 role: "tab",
                 "aria-selected": isSelected,
-                onClick: () => onValueChange?.(item.value),
-                children: item.label
+                onClick: () => onValueChange?.(
+                  item.value
+                ),
+                children: content
               },
               item.value
             );

package/components/tabs/tabs.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/tabs/tabs.tsx"],"names":["classnames","jsx"],"mappings":";;;;;;AAiBA,MAAM,OAA4B,CAAC;AAAA,EACjC,KAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,aAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,MAAA,EAAQ,SAAA,EAAW,EAAE,CAAA;AAEhD,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAAA,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAU,YAAA;AAAA,UACV,IAAA,EAAK,SAAA;AAAA,UACL,YAAA,EAAW,MAAA;AAAA,UAEV,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,KAAS;AACnB,YAAA,MAAM,UAAA,GAAa,KAAK,KAAA,KAAU,KAAA;AAElC,YAAA,MAAM,UAAA,GAAaD,sBAAW,WAAA,EAAa;AAAA,cACzC,qBAAA,EAAuB;AAAA,aACxB,CAAA;AAED,YAAA,IAAI,KAAK,IAAA,EAAM;AACb,cAAA,uBACEC,cAAA;AAAA,gBAAC,GAAA;AAAA,gBAAA;AAAA,kBAEC,SAAA,EAAW,UAAA;AAAA,kBACX,MAAM,IAAA,CAAK,IAAA;AAAA,kBACX,cAAA,EAAc,aAAa,MAAA,GAAS,MAAA;AAAA,kBACpC,OAAA,EAAS,MAAM,aAAA,GAAgB,IAAA,CAAK,KAAK,CAAA;AAAA,kBAExC,QAAA,EAAA,IAAA,CAAK;AAAA,iBAAA;AAAA,gBAND,IAAA,CAAK;AAAA,eAOZ;AAAA,YAEJ;AAEA,YAAA,uBACEA,cAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBAEC,SAAA,EAAW,UAAA;AAAA,gBACX,IAAA,EAAK,QAAA;AAAA,gBACL,IAAA,EAAK,KAAA;AAAA,gBACL,eAAA,EAAe,UAAA;AAAA,gBACf,OAAA,EAAS,MAAM,aAAA,GAAgB,IAAA,CAAK,KAAK,CAAA;AAAA,gBAExC,QAAA,EAAA,IAAA,CAAK;AAAA,eAAA;AAAA,cAPD,IAAA,CAAK;AAAA,aAQZ;AAAA,UAEJ,CAAC;AAAA;AAAA;AACH;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"tabs.cjs","sourcesContent":["import React from 'react';\nimport { classnames } from '../helpers/classnames';\nimport './tabs.css';\n\nexport interface TabItem {\n  value: string;\n  label: React.ReactNode;\n  href?: string;\n}\n\nexport interface TabsProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  items: TabItem[];\n  value: string;\n  onValueChange?: (value: string) => void;\n}\n\nconst Tabs: React.FC<TabsProps> = ({\n  items,\n  value,\n  className = '',\n  onValueChange,\n  ...props\n}) => {\n  const classes = classnames('tabs', className, {});\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <div\n        className=\"tabs__list\"\n        role=\"tablist\"\n        aria-label=\"Tabs\"\n      >\n        {items.map((item) => {\n          const isSelected = item.value === value;\n\n          const tabClasses = classnames('tabs__tab', {\n            'tabs__tab--selected': isSelected,\n          });\n\n          if (item.href) {\n            return (\n              <a\n                key={item.value}\n                className={tabClasses}\n                href={item.href}\n                aria-current={isSelected ? 'page' : undefined}\n                onClick={() => onValueChange?.(item.value)}\n              >\n                {item.label}\n              </a>\n            );\n          }\n\n          return (\n            <button\n              key={item.value}\n              className={tabClasses}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={isSelected}\n              onClick={() => onValueChange?.(item.value)}\n            >\n              {item.label}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default Tabs;"]}
+{"version":3,"sources":["../../../src/components/tabs/tabs.tsx"],"names":["classnames","jsx","jsxs","Fragment"],"mappings":";;;;;;AAmBA,MAAM,OAA4B,CAAC;AAAA,EACjC,KAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,aAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,MAAA;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,QAAA,kBAAAA,cAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAU,YAAA;AAAA,UACV,IAAA,EAAK,SAAA;AAAA,UACL,YAAA,EAAW,MAAA;AAAA,UAEV,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,KAAS;AACnB,YAAA,MAAM,UAAA,GACJ,KAAK,KAAA,KAAU,KAAA;AAEjB,YAAA,MAAM,QAAA,GACJ,KAAK,KAAA,KAAU,MAAA;AAEjB,YAAA,MAAM,UAAA,GAAaD,qBAAA;AAAA,cACjB,WAAA;AAAA,cACA;AAAA,gBACE,qBAAA,EACE;AAAA;AACJ,aACF;AAEA,YAAA,MAAM,0BACJE,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,8BAAAF,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,aAAA,EACb,QAAA,EAAA,IAAA,CAAK,KAAA,EACR,CAAA;AAAA,cAEC,4BACCA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,aAAA,EACb,eAAK,KAAA,EACR;AAAA,aAAA,EAEJ,CAAA;AAGF,YAAA,IAAI,KAAK,IAAA,EAAM;AACb,cAAA,uBACEA,cAAA;AAAA,gBAAC,GAAA;AAAA,gBAAA;AAAA,kBAEC,SAAA,EAAW,UAAA;AAAA,kBACX,MAAM,IAAA,CAAK,IAAA;AAAA,kBACX,cAAA,EACE,aACI,MAAA,GACA,MAAA;AAAA,kBAEN,SAAS,MACP,aAAA;AAAA,oBACE,IAAA,CAAK;AAAA,mBACP;AAAA,kBAGD,QAAA,EAAA;AAAA,iBAAA;AAAA,gBAdI,IAAA,CAAK;AAAA,eAeZ;AAAA,YAEJ;AAEA,YAAA,uBACEA,cAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBAEC,SAAA,EAAW,UAAA;AAAA,gBACX,IAAA,EAAK,QAAA;AAAA,gBACL,IAAA,EAAK,KAAA;AAAA,gBACL,eAAA,EAAe,UAAA;AAAA,gBACf,SAAS,MACP,aAAA;AAAA,kBACE,IAAA,CAAK;AAAA,iBACP;AAAA,gBAGD,QAAA,EAAA;AAAA,eAAA;AAAA,cAXI,IAAA,CAAK;AAAA,aAYZ;AAAA,UAEJ,CAAC;AAAA;AAAA;AACH;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"tabs.cjs","sourcesContent":["import React from 'react';\n\nimport './tabs.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface TabItem {\n  value: string;\n  label: React.ReactNode;\n  count?: number;\n  href?: string;\n}\n\nexport interface TabsProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  items: TabItem[];\n  value: string;\n  onValueChange?: (value: string) => void;\n}\n\nconst Tabs: React.FC<TabsProps> = ({\n  items,\n  value,\n  className = '',\n  onValueChange,\n  ...props\n}) => {\n  const classes = classnames(\n    'tabs',\n    className,\n    {},\n  );\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <div\n        className=\"tabs__list\"\n        role=\"tablist\"\n        aria-label=\"Tabs\"\n      >\n        {items.map((item) => {\n          const isSelected =\n            item.value === value;\n\n          const hasCount =\n            item.count !== undefined;\n\n          const tabClasses = classnames(\n            'tabs__tab',\n            {\n              'tabs__tab--selected':\n                isSelected,\n            },\n          );\n\n          const content = (\n            <>\n              <span className=\"tabs__label\">\n                {item.label}\n              </span>\n\n              {hasCount && (\n                <span className=\"tabs__count\">\n                  {item.count}\n                </span>\n              )}\n            </>\n          );\n\n          if (item.href) {\n            return (\n              <a\n                key={item.value}\n                className={tabClasses}\n                href={item.href}\n                aria-current={\n                  isSelected\n                    ? 'page'\n                    : undefined\n                }\n                onClick={() =>\n                  onValueChange?.(\n                    item.value,\n                  )\n                }\n              >\n                {content}\n              </a>\n            );\n          }\n\n          return (\n            <button\n              key={item.value}\n              className={tabClasses}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={isSelected}\n              onClick={() =>\n                onValueChange?.(\n                  item.value,\n                )\n              }\n            >\n              {content}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default Tabs;"]}

package/components/tabs/tabs.css

@@ -129,5 +129,68 @@
 
   /* depth */
 
+  /* motion */
+}
+
+.tabs__label {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.tabs__count {
+  /* color */
+  color: var(--color-text);
+
+  /* typography */
+
+  /* size */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  margin-inline-start: var(--margin-icon);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.tabs__tab--selected .tabs__count {
+  /* color */
+  color: var(--tabs-tab-color);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.tabs__tab--selected .tabs__count {
+  /* color */
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
   /* motion */
 }

package/components/tabs/tabs.d.ts

@@ -3,6 +3,7 @@ import './tabs.css';
 export interface TabItem {
     value: string;
     label: React.ReactNode;
+    count?: number;
     href?: string;
 }
 export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {

package/components/tabs/tabs.js

@@ -1,6 +1,6 @@
-import { jsx } from 'react/jsx-runtime';
-import { classnames } from '../helpers/classnames';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import './tabs.css';
+import { classnames } from '../helpers/classnames';
 
 const Tabs = ({
   items,
@@ -9,7 +9,11 @@ const Tabs = ({
   onValueChange,
   ...props
 }) => {
-  const classes = classnames("tabs", className, {});
+  const classes = classnames(
+    "tabs",
+    className,
+    {}
+  );
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -23,9 +27,17 @@ const Tabs = ({
           "aria-label": "Tabs",
           children: items.map((item) => {
             const isSelected = item.value === value;
-            const tabClasses = classnames("tabs__tab", {
-              "tabs__tab--selected": isSelected
-            });
+            const hasCount = item.count !== void 0;
+            const tabClasses = classnames(
+              "tabs__tab",
+              {
+                "tabs__tab--selected": isSelected
+              }
+            );
+            const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "tabs__label", children: item.label }),
+              hasCount && /* @__PURE__ */ jsx("span", { className: "tabs__count", children: item.count })
+            ] });
             if (item.href) {
               return /* @__PURE__ */ jsx(
                 "a",
@@ -33,8 +45,10 @@ const Tabs = ({
                   className: tabClasses,
                   href: item.href,
                   "aria-current": isSelected ? "page" : void 0,
-                  onClick: () => onValueChange?.(item.value),
-                  children: item.label
+                  onClick: () => onValueChange?.(
+                    item.value
+                  ),
+                  children: content
                 },
                 item.value
               );
@@ -46,8 +60,10 @@ const Tabs = ({
                 type: "button",
                 role: "tab",
                 "aria-selected": isSelected,
-                onClick: () => onValueChange?.(item.value),
-                children: item.label
+                onClick: () => onValueChange?.(
+                  item.value
+                ),
+                children: content
               },
               item.value
             );

package/components/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":";;;;AAiBA,MAAM,OAA4B,CAAC;AAAA,EACjC,KAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,aAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,MAAA,EAAQ,SAAA,EAAW,EAAE,CAAA;AAEhD,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAU,YAAA;AAAA,UACV,IAAA,EAAK,SAAA;AAAA,UACL,YAAA,EAAW,MAAA;AAAA,UAEV,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,KAAS;AACnB,YAAA,MAAM,UAAA,GAAa,KAAK,KAAA,KAAU,KAAA;AAElC,YAAA,MAAM,UAAA,GAAa,WAAW,WAAA,EAAa;AAAA,cACzC,qBAAA,EAAuB;AAAA,aACxB,CAAA;AAED,YAAA,IAAI,KAAK,IAAA,EAAM;AACb,cAAA,uBACE,GAAA;AAAA,gBAAC,GAAA;AAAA,gBAAA;AAAA,kBAEC,SAAA,EAAW,UAAA;AAAA,kBACX,MAAM,IAAA,CAAK,IAAA;AAAA,kBACX,cAAA,EAAc,aAAa,MAAA,GAAS,MAAA;AAAA,kBACpC,OAAA,EAAS,MAAM,aAAA,GAAgB,IAAA,CAAK,KAAK,CAAA;AAAA,kBAExC,QAAA,EAAA,IAAA,CAAK;AAAA,iBAAA;AAAA,gBAND,IAAA,CAAK;AAAA,eAOZ;AAAA,YAEJ;AAEA,YAAA,uBACE,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBAEC,SAAA,EAAW,UAAA;AAAA,gBACX,IAAA,EAAK,QAAA;AAAA,gBACL,IAAA,EAAK,KAAA;AAAA,gBACL,eAAA,EAAe,UAAA;AAAA,gBACf,OAAA,EAAS,MAAM,aAAA,GAAgB,IAAA,CAAK,KAAK,CAAA;AAAA,gBAExC,QAAA,EAAA,IAAA,CAAK;AAAA,eAAA;AAAA,cAPD,IAAA,CAAK;AAAA,aAQZ;AAAA,UAEJ,CAAC;AAAA;AAAA;AACH;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"tabs.js","sourcesContent":["import React from 'react';\nimport { classnames } from '../helpers/classnames';\nimport './tabs.css';\n\nexport interface TabItem {\n  value: string;\n  label: React.ReactNode;\n  href?: string;\n}\n\nexport interface TabsProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  items: TabItem[];\n  value: string;\n  onValueChange?: (value: string) => void;\n}\n\nconst Tabs: React.FC<TabsProps> = ({\n  items,\n  value,\n  className = '',\n  onValueChange,\n  ...props\n}) => {\n  const classes = classnames('tabs', className, {});\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <div\n        className=\"tabs__list\"\n        role=\"tablist\"\n        aria-label=\"Tabs\"\n      >\n        {items.map((item) => {\n          const isSelected = item.value === value;\n\n          const tabClasses = classnames('tabs__tab', {\n            'tabs__tab--selected': isSelected,\n          });\n\n          if (item.href) {\n            return (\n              <a\n                key={item.value}\n                className={tabClasses}\n                href={item.href}\n                aria-current={isSelected ? 'page' : undefined}\n                onClick={() => onValueChange?.(item.value)}\n              >\n                {item.label}\n              </a>\n            );\n          }\n\n          return (\n            <button\n              key={item.value}\n              className={tabClasses}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={isSelected}\n              onClick={() => onValueChange?.(item.value)}\n            >\n              {item.label}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default Tabs;"]}
+{"version":3,"sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":";;;;AAmBA,MAAM,OAA4B,CAAC;AAAA,EACjC,KAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,aAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,MAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAU,YAAA;AAAA,UACV,IAAA,EAAK,SAAA;AAAA,UACL,YAAA,EAAW,MAAA;AAAA,UAEV,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,KAAS;AACnB,YAAA,MAAM,UAAA,GACJ,KAAK,KAAA,KAAU,KAAA;AAEjB,YAAA,MAAM,QAAA,GACJ,KAAK,KAAA,KAAU,MAAA;AAEjB,YAAA,MAAM,UAAA,GAAa,UAAA;AAAA,cACjB,WAAA;AAAA,cACA;AAAA,gBACE,qBAAA,EACE;AAAA;AACJ,aACF;AAEA,YAAA,MAAM,0BACJ,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,aAAA,EACb,QAAA,EAAA,IAAA,CAAK,KAAA,EACR,CAAA;AAAA,cAEC,4BACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,aAAA,EACb,eAAK,KAAA,EACR;AAAA,aAAA,EAEJ,CAAA;AAGF,YAAA,IAAI,KAAK,IAAA,EAAM;AACb,cAAA,uBACE,GAAA;AAAA,gBAAC,GAAA;AAAA,gBAAA;AAAA,kBAEC,SAAA,EAAW,UAAA;AAAA,kBACX,MAAM,IAAA,CAAK,IAAA;AAAA,kBACX,cAAA,EACE,aACI,MAAA,GACA,MAAA;AAAA,kBAEN,SAAS,MACP,aAAA;AAAA,oBACE,IAAA,CAAK;AAAA,mBACP;AAAA,kBAGD,QAAA,EAAA;AAAA,iBAAA;AAAA,gBAdI,IAAA,CAAK;AAAA,eAeZ;AAAA,YAEJ;AAEA,YAAA,uBACE,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBAEC,SAAA,EAAW,UAAA;AAAA,gBACX,IAAA,EAAK,QAAA;AAAA,gBACL,IAAA,EAAK,KAAA;AAAA,gBACL,eAAA,EAAe,UAAA;AAAA,gBACf,SAAS,MACP,aAAA;AAAA,kBACE,IAAA,CAAK;AAAA,iBACP;AAAA,gBAGD,QAAA,EAAA;AAAA,eAAA;AAAA,cAXI,IAAA,CAAK;AAAA,aAYZ;AAAA,UAEJ,CAAC;AAAA;AAAA;AACH;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"tabs.js","sourcesContent":["import React from 'react';\n\nimport './tabs.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface TabItem {\n  value: string;\n  label: React.ReactNode;\n  count?: number;\n  href?: string;\n}\n\nexport interface TabsProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  items: TabItem[];\n  value: string;\n  onValueChange?: (value: string) => void;\n}\n\nconst Tabs: React.FC<TabsProps> = ({\n  items,\n  value,\n  className = '',\n  onValueChange,\n  ...props\n}) => {\n  const classes = classnames(\n    'tabs',\n    className,\n    {},\n  );\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      <div\n        className=\"tabs__list\"\n        role=\"tablist\"\n        aria-label=\"Tabs\"\n      >\n        {items.map((item) => {\n          const isSelected =\n            item.value === value;\n\n          const hasCount =\n            item.count !== undefined;\n\n          const tabClasses = classnames(\n            'tabs__tab',\n            {\n              'tabs__tab--selected':\n                isSelected,\n            },\n          );\n\n          const content = (\n            <>\n              <span className=\"tabs__label\">\n                {item.label}\n              </span>\n\n              {hasCount && (\n                <span className=\"tabs__count\">\n                  {item.count}\n                </span>\n              )}\n            </>\n          );\n\n          if (item.href) {\n            return (\n              <a\n                key={item.value}\n                className={tabClasses}\n                href={item.href}\n                aria-current={\n                  isSelected\n                    ? 'page'\n                    : undefined\n                }\n                onClick={() =>\n                  onValueChange?.(\n                    item.value,\n                  )\n                }\n              >\n                {content}\n              </a>\n            );\n          }\n\n          return (\n            <button\n              key={item.value}\n              className={tabClasses}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={isSelected}\n              onClick={() =>\n                onValueChange?.(\n                  item.value,\n                )\n              }\n            >\n              {content}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n};\n\nexport default Tabs;"]}

package/components/video/video.cjs

@@ -4,30 +4,47 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var Hls = require('hls.js');
 require('./video.css');
+var Icon = require('../../icons/icon');
+var Button = require('../button');
+var Dropdown = require('../dropdown');
 var classnames = require('../helpers/classnames');
-var ButtonIcon = require('../button-icon');
 var ProgressBar = require('../progressbar');
-var Dropdown = require('../dropdown');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var Hls__default = /*#__PURE__*/_interopDefault(Hls);
-var ButtonIcon__default = /*#__PURE__*/_interopDefault(ButtonIcon);
-var ProgressBar__default = /*#__PURE__*/_interopDefault(ProgressBar);
+var Icon__default = /*#__PURE__*/_interopDefault(Icon);
+var Button__default = /*#__PURE__*/_interopDefault(Button);
 var Dropdown__default = /*#__PURE__*/_interopDefault(Dropdown);
+var ProgressBar__default = /*#__PURE__*/_interopDefault(ProgressBar);
 
 function getClampedValue(value, min, max) {
-  return Math.min(Math.max(value, min), max);
+  return Math.min(
+    Math.max(value, min),
+    max
+  );
 }
 function formatTime(value) {
-  if (!Number.isFinite(value)) return "0:00";
-  const minutes = Math.floor(value / 60);
-  const seconds = Math.floor(value % 60);
-  return `${minutes}:${String(seconds).padStart(2, "0")}`;
+  if (!Number.isFinite(value)) {
+    return "0:00";
+  }
+  const minutes = Math.floor(
+    value / 60
+  );
+  const seconds = Math.floor(
+    value % 60
+  );
+  return `${minutes}:${String(
+    seconds
+  ).padStart(2, "0")}`;
 }
 function getBufferedEnd(video) {
-  if (video.buffered.length === 0) return 0;
-  return video.buffered.end(video.buffered.length - 1);
+  if (video.buffered.length === 0) {
+    return 0;
+  }
+  return video.buffered.end(
+    video.buffered.length - 1
+  );
 }
 function getVideoSource(src, qualities, selectedQuality) {
   const selectedQualityItem = qualities.find(
@@ -85,13 +102,24 @@ const Video = ({
 }) => {
   const videoRef = react.useRef(null);
   const [isPlaying, setIsPlaying] = react.useState(false);
-  const [isVolumeOpen, setIsVolumeOpen] = react.useState(false);
-  const [selectedQuality, setSelectedQuality] = react.useState(defaultQuality);
-  const [currentTime, setCurrentTime] = react.useState(0);
+  const [
+    isVolumeOpen,
+    setIsVolumeOpen
+  ] = react.useState(false);
+  const [
+    selectedQuality,
+    setSelectedQuality
+  ] = react.useState(defaultQuality);
+  const [
+    currentTime,
+    setCurrentTime
+  ] = react.useState(0);
   const [duration, setDuration] = react.useState(0);
   const [buffered, setBuffered] = react.useState(0);
   const [volume, setVolume] = react.useState(initialVolume);
-  const [isMuted, setIsMuted] = react.useState(muted ?? initialMuted);
+  const [isMuted, setIsMuted] = react.useState(
+    muted ?? initialMuted
+  );
   const hasAppliedInitialTimeRef = react.useRef(false);
   const lastProgressCommitAtRef = react.useRef(0);
   const loadedMediaKeyRef = react.useRef(void 0);
@@ -110,7 +138,9 @@ const Video = ({
   }, [onPlaybackError]);
   react.useEffect(() => {
     const video = videoRef.current;
-    if (!video || !videoSrc) return;
+    if (!video || !videoSrc) {
+      return;
+    }
     const isSameMedia = loadedMediaKeyRef.current !== void 0 && loadedMediaKeyRef.current === effectiveMediaKey;
     if (isSameMedia) {
       pendingRestoreTimeRef.current = video.currentTime;
@@ -126,7 +156,9 @@ const Video = ({
     loadedMediaKeyRef.current = effectiveMediaKey;
     video.removeAttribute("src");
     video.load();
-    if (video.canPlayType("application/vnd.apple.mpegurl")) {
+    if (video.canPlayType(
+      "application/vnd.apple.mpegurl"
+    )) {
       video.src = videoSrc;
       return;
     }
@@ -135,14 +167,20 @@ const Video = ({
       return;
     }
     const hls = new Hls__default.default();
-    hls.on(Hls__default.default.Events.ERROR, (_, data) => {
-      console.error("HLS error", data);
-      onPlaybackErrorRef.current?.({
-        type: "hls",
-        fatal: data.fatal,
-        error: data
-      });
-    });
+    hls.on(
+      Hls__default.default.Events.ERROR,
+      (_, data) => {
+        console.error(
+          "HLS error",
+          data
+        );
+        onPlaybackErrorRef.current?.({
+          type: "hls",
+          fatal: data.fatal,
+          error: data
+        });
+      }
+    );
     hls.loadSource(videoSrc);
     hls.attachMedia(video);
     return () => {
@@ -152,16 +190,26 @@ const Video = ({
   const hasStarted = currentTime > 0 || isPlaying;
   const hasControls = hasStarted;
   const hasVolume = isVolumeOpen;
-  const classes = classnames.classnames("video", className, {
-    "video--with-controls": hasControls,
-    "video--with-volume": hasVolume
-  });
+  const classes = classnames.classnames(
+    "video",
+    className,
+    {
+      "video--with-controls": hasControls,
+      "video--with-volume": hasVolume
+    }
+  );
   const syncMediaState = () => {
     const video = videoRef.current;
-    if (!video) return;
+    if (!video) {
+      return;
+    }
     setCurrentTime(video.currentTime);
-    setDuration(video.duration || 0);
-    setBuffered(getBufferedEnd(video));
+    setDuration(
+      video.duration || 0
+    );
+    setBuffered(
+      getBufferedEnd(video)
+    );
     setVolume(video.volume);
     setIsMuted(video.muted);
     setIsPlaying(!video.paused);
@@ -176,7 +224,9 @@ const Video = ({
   };
   const handlePlayToggle = async () => {
     const video = videoRef.current;
-    if (!video) return;
+    if (!video) {
+      return;
+    }
     console.log("play click", {
       paused: video.paused,
       readyState: video.readyState,
@@ -187,9 +237,14 @@ const Video = ({
     if (video.paused) {
       try {
         await video.play();
-        console.log("play success");
+        console.log(
+          "play success"
+        );
       } catch (error) {
-        console.error("play failed", error);
+        console.error(
+          "play failed",
+          error
+        );
       }
       return;
     }
@@ -197,17 +252,23 @@ const Video = ({
   };
   const handleSeek = (nextValue) => {
     const video = videoRef.current;
-    if (!video) return;
+    if (!video) {
+      return;
+    }
     video.currentTime = getClampedValue(
       nextValue,
       0,
       duration
     );
-    setCurrentTime(video.currentTime);
+    setCurrentTime(
+      video.currentTime
+    );
   };
   const handleVolumeChange = (nextValue) => {
     const video = videoRef.current;
-    if (!video) return;
+    if (!video) {
+      return;
+    }
     const nextVolume = getClampedValue(
       nextValue,
       0,
@@ -220,13 +281,17 @@ const Video = ({
   };
   const handleSoundToggle = () => {
     const video = videoRef.current;
-    if (!video) return;
+    if (!video) {
+      return;
+    }
     video.muted = !video.muted;
     setIsMuted(video.muted);
   };
   const handleFullscreen = () => {
     const video = videoRef.current;
-    if (!video) return;
+    if (!video) {
+      return;
+    }
     video.requestFullscreen?.();
   };
   const handleQualityChange = (quality) => {
@@ -270,12 +335,16 @@ const Video = ({
   };
   const handlePause = (event) => {
     setIsPlaying(false);
-    commitProgress(event.currentTarget);
+    commitProgress(
+      event.currentTarget
+    );
     onPause?.(event);
   };
   const handleEnded = (event) => {
     syncMediaState();
-    commitProgress(event.currentTarget);
+    commitProgress(
+      event.currentTarget
+    );
     onEnded?.(event);
   };
   const handleNativeError = (event) => {
@@ -331,21 +400,28 @@ const Video = ({
             }
           ),
           !hasStarted && /* @__PURE__ */ jsxRuntime.jsx(
-            ButtonIcon__default.default,
+            Button__default.default,
             {
+              mode: "toolbar",
               className: "video__main-action",
-              icon: "play",
-              label: "Play video",
+              icon: /* @__PURE__ */ jsxRuntime.jsx(Icon__default.default, { name: "play" }),
+              "aria-label": "Play video",
               onClick: handlePlayToggle
             }
           )
         ] }),
         hasControls && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "video__controls", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            ButtonIcon__default.default,
+            Button__default.default,
             {
-              icon: isPlaying ? "pause" : "play",
-              label: isPlaying ? "Pause video" : "Play video",
+              mode: "toolbar",
+              icon: /* @__PURE__ */ jsxRuntime.jsx(
+                Icon__default.default,
+                {
+                  name: isPlaying ? "pause" : "play"
+                }
+              ),
+              "aria-label": isPlaying ? "Pause video" : "Play video",
               onClick: handlePlayToggle
             }
           ),
@@ -364,10 +440,11 @@ const Video = ({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            ButtonIcon__default.default,
+            Button__default.default,
             {
-              icon: "fullscreen",
-              label: "Fullscreen",
+              mode: "toolbar",
+              icon: /* @__PURE__ */ jsxRuntime.jsx(Icon__default.default, { name: "fullscreen" }),
+              "aria-label": "Fullscreen",
               onClick: handleFullscreen
             }
           ),
@@ -375,16 +452,28 @@ const Video = ({
             "div",
             {
               className: "video__sound-control",
-              onMouseLeave: () => setIsVolumeOpen(false),
+              onMouseLeave: () => setIsVolumeOpen(
+                false
+              ),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  ButtonIcon__default.default,
+                  Button__default.default,
                   {
-                    icon: isMuted ? "sound-off" : "sound",
-                    label: isMuted ? "Unmute video" : "Mute video",
+                    mode: "toolbar",
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(
+                      Icon__default.default,
+                      {
+                        name: isMuted ? "sound-off" : "sound"
+                      }
+                    ),
+                    "aria-label": isMuted ? "Unmute video" : "Mute video",
                     onClick: handleSoundToggle,
-                    onMouseEnter: () => setIsVolumeOpen(true),
-                    onFocus: () => setIsVolumeOpen(true)
+                    onMouseEnter: () => setIsVolumeOpen(
+                      true
+                    ),
+                    onFocus: () => setIsVolumeOpen(
+                      true
+                    )
                   }
                 ),
                 hasVolume && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "video__volume", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -410,10 +499,11 @@ const Video = ({
               label: "Video quality",
               onChange: handleQualityChange,
               trigger: /* @__PURE__ */ jsxRuntime.jsx(
-                ButtonIcon__default.default,
+                Button__default.default,
                 {
-                  icon: "settings",
-                  label: "Video quality"
+                  mode: "toolbar",
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(Icon__default.default, { name: "settings" }),
+                  "aria-label": "Video quality"
                 }
               )
             }