jvetrau-ds 0.1.18 → 0.1.19

package/components/index.cjs

@@ -9,10 +9,13 @@ var dropdown = require('./dropdown/dropdown');
 var checkbox = require('./checkbox/checkbox');
 var radio = require('./radio/radio');
 var field = require('./field/field');
+var menu = require('./menu/menu');
+var tabs = require('./tabs/tabs');
 var tag = require('./tag/tag');
 var progressbar = require('./progressbar/progressbar');
 var card = require('./card/card');
 var panel = require('./panel/panel');
+var video = require('./video/video');
 var logo = require('./logo/logo');
 var avatar = require('./avatar/avatar');
 var attach = require('./attach/attach');
@@ -28,10 +31,13 @@ var dropdown__default = /*#__PURE__*/_interopDefault(dropdown);
 var checkbox__default = /*#__PURE__*/_interopDefault(checkbox);
 var radio__default = /*#__PURE__*/_interopDefault(radio);
 var field__default = /*#__PURE__*/_interopDefault(field);
+var menu__default = /*#__PURE__*/_interopDefault(menu);
+var tabs__default = /*#__PURE__*/_interopDefault(tabs);
 var tag__default = /*#__PURE__*/_interopDefault(tag);
 var progressbar__default = /*#__PURE__*/_interopDefault(progressbar);
 var card__default = /*#__PURE__*/_interopDefault(card);
 var panel__default = /*#__PURE__*/_interopDefault(panel);
+var video__default = /*#__PURE__*/_interopDefault(video);
 var logo__default = /*#__PURE__*/_interopDefault(logo);
 var avatar__default = /*#__PURE__*/_interopDefault(avatar);
 var attach__default = /*#__PURE__*/_interopDefault(attach);
@@ -74,6 +80,14 @@ Object.defineProperty(exports, "Field", {
   enumerable: true,
   get: function () { return field__default.default; }
 });
+Object.defineProperty(exports, "Menu", {
+  enumerable: true,
+  get: function () { return menu__default.default; }
+});
+Object.defineProperty(exports, "Tabs", {
+  enumerable: true,
+  get: function () { return tabs__default.default; }
+});
 Object.defineProperty(exports, "Tag", {
   enumerable: true,
   get: function () { return tag__default.default; }
@@ -90,6 +104,10 @@ Object.defineProperty(exports, "Panel", {
   enumerable: true,
   get: function () { return panel__default.default; }
 });
+Object.defineProperty(exports, "Video", {
+  enumerable: true,
+  get: function () { return video__default.default; }
+});
 Object.defineProperty(exports, "Logo", {
   enumerable: true,
   get: function () { return logo__default.default; }

package/components/index.d.cts

@@ -7,12 +7,15 @@ export { default as Dropdown, DropdownProps } from './dropdown/dropdown.cjs';
 export { default as Checkbox, CheckboxProps } from './checkbox/checkbox.cjs';
 export { default as Radio, RadioProps } from './radio/radio.cjs';
 export { default as Field, FieldProps } from './field/field.cjs';
+export { default as Menu, MenuItem, MenuProps } from './menu/menu.cjs';
+export { TabItem, default as Tabs, TabsProps } from './tabs/tabs.cjs';
 export { default as Tag, TagProps } from './tag/tag.cjs';
 export { default as ProgressBar, ProgressBarProps } from './progressbar/progressbar.cjs';
 export { default as Card, CardProps } from './card/card.cjs';
 export { default as Panel, PanelProps } from './panel/panel.cjs';
+export { default as Video, VideoProps, VideoQuality } from './video/video.cjs';
 export { default as Logo, LogoProps } from './logo/logo.cjs';
 export { default as Avatar, AvatarProps } from './avatar/avatar.cjs';
-export { default as Attach, AttachProps } from './attach/attach.cjs';
+export { default as Attach, AttachItem, AttachProps } from './attach/attach.cjs';
 import 'react';
 import '../types-DboVOY__.cjs';

package/components/index.d.ts

@@ -7,12 +7,15 @@ export { default as Dropdown, DropdownProps } from './dropdown/dropdown.js';
 export { default as Checkbox, CheckboxProps } from './checkbox/checkbox.js';
 export { default as Radio, RadioProps } from './radio/radio.js';
 export { default as Field, FieldProps } from './field/field.js';
+export { default as Menu, MenuItem, MenuProps } from './menu/menu.js';
+export { TabItem, default as Tabs, TabsProps } from './tabs/tabs.js';
 export { default as Tag, TagProps } from './tag/tag.js';
 export { default as ProgressBar, ProgressBarProps } from './progressbar/progressbar.js';
 export { default as Card, CardProps } from './card/card.js';
 export { default as Panel, PanelProps } from './panel/panel.js';
+export { default as Video, VideoProps, VideoQuality } from './video/video.js';
 export { default as Logo, LogoProps } from './logo/logo.js';
 export { default as Avatar, AvatarProps } from './avatar/avatar.js';
-export { default as Attach, AttachProps } from './attach/attach.js';
+export { default as Attach, AttachItem, AttachProps } from './attach/attach.js';
 import 'react';
 import '../types-DboVOY__.js';

package/components/index.js

@@ -7,10 +7,13 @@ export { default as Dropdown } from './dropdown/dropdown';
 export { default as Checkbox } from './checkbox/checkbox';
 export { default as Radio } from './radio/radio';
 export { default as Field } from './field/field';
+export { default as Menu } from './menu/menu';
+export { default as Tabs } from './tabs/tabs';
 export { default as Tag } from './tag/tag';
 export { default as ProgressBar } from './progressbar/progressbar';
 export { default as Card } from './card/card';
 export { default as Panel } from './panel/panel';
+export { default as Video } from './video/video';
 export { default as Logo } from './logo/logo';
 export { default as Avatar } from './avatar/avatar';
 export { default as Attach } from './attach/attach';

package/components/tabs/index.d.cts

@@ -1,2 +1,2 @@
-export { TabsProps, default } from './tabs.cjs';
+export { TabItem, TabsProps, default } from './tabs.cjs';
 import 'react';

package/components/tabs/index.d.ts

@@ -1,2 +1,2 @@
-export { TabsProps, default } from './tabs.js';
+export { TabItem, TabsProps, default } from './tabs.js';
 import 'react';

package/components/tabs/tabs.cjs

@@ -5,12 +5,59 @@ var classnames = require('../helpers/classnames');
 require('./tabs.css');
 
 const Tabs = ({
+  items,
+  value,
   className = "",
-  children,
+  onValueChange,
   ...props
 }) => {
-  const classes = classnames.classnames("tabs", className);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes, ...props, children });
+  const classes = classnames.classnames("tabs", className, {});
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "tabs__list",
+          role: "tablist",
+          "aria-label": "Tabs",
+          children: items.map((item) => {
+            const isSelected = item.value === value;
+            const tabClasses = classnames.classnames("tabs__tab", {
+              "tabs__tab--selected": isSelected
+            });
+            if (item.href) {
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "a",
+                {
+                  className: tabClasses,
+                  href: item.href,
+                  "aria-current": isSelected ? "page" : void 0,
+                  onClick: () => onValueChange?.(item.value),
+                  children: item.label
+                },
+                item.value
+              );
+            }
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: tabClasses,
+                type: "button",
+                role: "tab",
+                "aria-selected": isSelected,
+                onClick: () => onValueChange?.(item.value),
+                children: item.label
+              },
+              item.value
+            );
+          })
+        }
+      )
+    }
+  );
 };
 var tabs_default = Tabs;
 

package/components/tabs/tabs.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/tabs/tabs.tsx"],"names":["classnames"],"mappings":";;;;;;AAMA,MAAM,OAA4B,CAAC;AAAA,EACjC,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,MAAA,EAAQ,SAAS,CAAA;AAE5C,EAAA,sCACG,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,EAAU,GAAG,OAC1B,QAAA,EACH,CAAA;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 TabsProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst Tabs: React.FC<TabsProps> = ({\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames('tabs', className);\n\n  return (\n    <div className={classes} {...props}>\n      {children}\n    </div>\n  );\n};\n\nexport default Tabs;"]}
+{"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;"]}

package/components/tabs/tabs.css

@@ -1,67 +1,48 @@
 .tabs {
   /* color */
-  --component-bg: transparent;
-  --component-text: inherit;
+  --tabs-color: var(--color-link);
 
-  background: var(--component-bg);
-  color: var(--component-text);
+  color: var(--tabs-color);
 
   /* typography */
-  --component-font-family: inherit;
-  --component-font-weight: inherit;
-  --component-font-size: inherit;
-  --component-line-height: inherit;
-  --component-letter-spacing: inherit;
-
-  font-family: var(--component-font-family);
-  font-size: var(--component-font-size);
-  font-weight: var(--component-font-weight);
-  line-height: var(--component-line-height);
-  letter-spacing: var(--component-letter-spacing);
+  --tabs-font-family: var(--font-body-family);
+  --tabs-font-weight: var(--font-body-weight);
+  --tabs-font-size: var(--font-body);
+  --tabs-line-height: var(--font-body-line);
+  --tabs-letter-spacing: var(--font-body-letter-spacing);
+
+  font-family: var(--tabs-font-family);
+  font-size: var(--tabs-font-size);
+  font-weight: var(--tabs-font-weight);
+  line-height: var(--tabs-line-height);
+  letter-spacing: var(--tabs-letter-spacing);
 
   /* size */
-  --component-width: auto;
-  --component-height: auto;
-  --component-gap: 0;
-  --component-padding-x: 0;
-  --component-padding-y: 0;
-
-  width: var(--component-width);
-  min-height: var(--component-height);
-  gap: var(--component-gap);
-  padding: var(--component-padding-y) var(--component-padding-x);
+  --tabs-gap: var(--margin-tab);
 
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  gap: var(--tabs-gap);
 
   /* border */
-  --component-border-width: 0;
-  --component-border-radius: 0;
-  --component-border-color: transparent;
-
-  border: var(--component-border-width) solid var(--component-border-color);
-  border-radius: var(--component-border-radius);
-  outline: none;
 
   /* depth */
 
   /* motion */
-  --component-opacity-disabled: 0.6;
-  --component-transition-duration: 0.2s;
-
-  transition:
-    border-color var(--component-transition-duration) ease,
-    opacity var(--component-transition-duration) ease,
-    background-color var(--component-transition-duration) ease,
-    color var(--component-transition-duration) ease;
 }
 
-.tabs__part {
+.tabs__list {
   /* color */
 
   /* typography */
 
   /* size */
+  --tabs-list-gap: var(--margin-tab);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--tabs-list-gap);
+  width: fit-content;
 
   /* border */
 
@@ -70,38 +51,75 @@
   /* motion */
 }
 
-.tabs:hover {
-}
-
-.tabs:focus {
-}
-
-.tabs:focus-visible {
-}
-
-.tabs:active {
-}
+.tabs__tab {
+  /* color */
+  --tabs-tab-bg: transparent;
+  --tabs-tab-color: var(--color-link);
+  --tabs-tab-bg-selected: var(--color-secondary);
+  --tabs-tab-color-selected: var(--color-text-secondary);
+  --tabs-tab-color-disabled: var(--color-text-note);
 
-.tabs:disabled {
-}
+  background: var(--tabs-tab-bg);
+  color: var(--tabs-tab-color);
 
-.tabs--variant {
-}
+  /* typography */
+  font: inherit;
+  text-align: center;
+  white-space: nowrap;
 
-.tabs--state {
-}
+  /* size */
+  --tabs-tab-height: var(--size-tab-height);
+  --tabs-tab-padding-x: var(--padding-tab);
 
-.tabs > a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: 40px;
-  padding: 0 12px;
+  min-height: var(--tabs-tab-height);
+  padding: 0 var(--tabs-tab-padding-x);
+
+  /* border */
+  --tabs-tab-radius: var(--radius-flowchart);
+  --tabs-tab-border-width: var(--size-border-width-min);
+  --tabs-tab-border-color: transparent;
+
+  border:
+    var(--tabs-tab-border-width)
+    solid
+    var(--tabs-tab-border-color);
+  border-radius: var(--tabs-tab-radius);
+
+  /* depth */
+
+  /* motion */
+  --tabs-transition-duration: var(--motion-duration1);
 
-  text-decoration: none;
   cursor: pointer;
+  transition:
+    background var(--tabs-transition-duration),
+    color var(--tabs-transition-duration),
+    border-color var(--tabs-transition-duration);
+}
+
+.tabs__tab--selected {
+  /* color */
+  --tabs-tab-bg: var(--tabs-tab-bg-selected);
+  --tabs-tab-color: var(--tabs-tab-color-selected);
+
+  /* border */
+  --tabs-tab-border-color: var(--color-line);
 }
 
-.tabs > a[aria-current='page'] {
-  font-weight: 600;
+.tabs__panel {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }

package/components/tabs/tabs.d.cts

@@ -1,7 +1,15 @@
 import React from 'react';
 
+interface TabItem {
+    value: string;
+    label: React.ReactNode;
+    href?: string;
+}
 interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
+    items: TabItem[];
+    value: string;
+    onValueChange?: (value: string) => void;
 }
 declare const Tabs: React.FC<TabsProps>;
 
-export { type TabsProps, Tabs as default };
+export { type TabItem, type TabsProps, Tabs as default };

package/components/tabs/tabs.d.ts

@@ -1,7 +1,15 @@
 import React from 'react';
 
+interface TabItem {
+    value: string;
+    label: React.ReactNode;
+    href?: string;
+}
 interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
+    items: TabItem[];
+    value: string;
+    onValueChange?: (value: string) => void;
 }
 declare const Tabs: React.FC<TabsProps>;
 
-export { type TabsProps, Tabs as default };
+export { type TabItem, type TabsProps, Tabs as default };

package/components/tabs/tabs.js

@@ -3,12 +3,59 @@ import { classnames } from '../helpers/classnames';
 import './tabs.css';
 
 const Tabs = ({
+  items,
+  value,
   className = "",
-  children,
+  onValueChange,
   ...props
 }) => {
-  const classes = classnames("tabs", className);
-  return /* @__PURE__ */ jsx("div", { className: classes, ...props, children });
+  const classes = classnames("tabs", className, {});
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "tabs__list",
+          role: "tablist",
+          "aria-label": "Tabs",
+          children: items.map((item) => {
+            const isSelected = item.value === value;
+            const tabClasses = classnames("tabs__tab", {
+              "tabs__tab--selected": isSelected
+            });
+            if (item.href) {
+              return /* @__PURE__ */ jsx(
+                "a",
+                {
+                  className: tabClasses,
+                  href: item.href,
+                  "aria-current": isSelected ? "page" : void 0,
+                  onClick: () => onValueChange?.(item.value),
+                  children: item.label
+                },
+                item.value
+              );
+            }
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: tabClasses,
+                type: "button",
+                role: "tab",
+                "aria-selected": isSelected,
+                onClick: () => onValueChange?.(item.value),
+                children: item.label
+              },
+              item.value
+            );
+          })
+        }
+      )
+    }
+  );
 };
 var tabs_default = Tabs;
 

package/components/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":";;;;AAMA,MAAM,OAA4B,CAAC;AAAA,EACjC,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,MAAA,EAAQ,SAAS,CAAA;AAE5C,EAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,EAAU,GAAG,OAC1B,QAAA,EACH,CAAA;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 TabsProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst Tabs: React.FC<TabsProps> = ({\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames('tabs', className);\n\n  return (\n    <div className={classes} {...props}>\n      {children}\n    </div>\n  );\n};\n\nexport default Tabs;"]}
+{"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;"]}

package/index.d.cts

@@ -8,8 +8,8 @@ export { default as Checkbox, CheckboxProps } from './components/checkbox/checkb
 export { default as Radio, RadioProps } from './components/radio/radio.cjs';
 export { default as Field, FieldProps } from './components/field/field.cjs';
 export { default as Menu, MenuProps } from './components/menu/menu.cjs';
-export { default as Tabs, TabsProps } from './components/tabs/tabs.cjs';
-export { default as Video, VideoProps } from './components/video/video.cjs';
+export { TabItem, default as Tabs, TabsProps } from './components/tabs/tabs.cjs';
+export { default as Video, VideoProps, VideoQuality } from './components/video/video.cjs';
 export { default as Search, SearchProps } from './components/search/search.cjs';
 export { default as RichEdit, RichEditProps } from './components/richedit/richedit.cjs';
 export { default as Tag, TagProps } from './components/tag/tag.cjs';

package/index.d.ts

@@ -8,8 +8,8 @@ export { default as Checkbox, CheckboxProps } from './components/checkbox/checkb
 export { default as Radio, RadioProps } from './components/radio/radio.js';
 export { default as Field, FieldProps } from './components/field/field.js';
 export { default as Menu, MenuProps } from './components/menu/menu.js';
-export { default as Tabs, TabsProps } from './components/tabs/tabs.js';
-export { default as Video, VideoProps } from './components/video/video.js';
+export { TabItem, default as Tabs, TabsProps } from './components/tabs/tabs.js';
+export { default as Video, VideoProps, VideoQuality } from './components/video/video.js';
 export { default as Search, SearchProps } from './components/search/search.js';
 export { default as RichEdit, RichEditProps } from './components/richedit/richedit.js';
 export { default as Tag, TagProps } from './components/tag/tag.js';

package/package.json

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