jvetrau-ds 0.1.18 → 0.1.20

package/components/action-group/action-group.cjs

@@ -0,0 +1,32 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('./action-group.css');
+var classnames = require('../helpers/classnames');
+
+const ActionGroup = ({
+  direction = "row",
+  align = "start",
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = classnames.classnames("action-group", className, {
+    "action-group--row": direction === "row",
+    "action-group--column": direction === "column",
+    "action-group--end": align === "end"
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children
+    }
+  );
+};
+var action_group_default = ActionGroup;
+
+module.exports = action_group_default;
+//# sourceMappingURL=action-group.cjs.map
+//# sourceMappingURL=action-group.cjs.map

package/components/action-group/action-group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/action-group/action-group.tsx"],"names":["classnames","jsx"],"mappings":";;;;;;AAUA,MAAM,cAA0C,CAAC;AAAA,EAC/C,SAAA,GAAY,KAAA;AAAA,EACZ,KAAA,GAAQ,OAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,cAAA,EAAgB,SAAA,EAAW;AAAA,IACpD,qBAAqB,SAAA,KAAc,KAAA;AAAA,IACnC,wBAAwB,SAAA,KAAc,QAAA;AAAA,IACtC,qBAAqB,KAAA,KAAU;AAAA,GAChC,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,oBAAA,GAAQ","file":"action-group.cjs","sourcesContent":["import React from 'react';\nimport './action-group.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface ActionGroupProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  direction?: 'row' | 'column';\n  align?: 'start' | 'end';\n}\n\nconst ActionGroup: React.FC<ActionGroupProps> = ({\n  direction = 'row',\n  align = 'start',\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames('action-group', className, {\n    'action-group--row': direction === 'row',\n    'action-group--column': direction === 'column',\n    'action-group--end': align === 'end',\n  });\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default ActionGroup;"]}

package/components/action-group/action-group.css

@@ -0,0 +1,24 @@
+.action-group {
+  display: flex;
+  gap: var(--margin-control);
+}
+
+.action-group--row {
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.action-group--column {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.action-group--end {
+  justify-content: flex-end;
+}
+
+.action-group--column.action-group--end {
+  align-items: flex-end;
+  justify-content: flex-start;
+}

package/components/action-group/action-group.d.cts

@@ -0,0 +1,9 @@
+import React from 'react';
+
+interface ActionGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    direction?: 'row' | 'column';
+    align?: 'start' | 'end';
+}
+declare const ActionGroup: React.FC<ActionGroupProps>;
+
+export { type ActionGroupProps, ActionGroup as default };

package/components/action-group/action-group.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+
+interface ActionGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    direction?: 'row' | 'column';
+    align?: 'start' | 'end';
+}
+declare const ActionGroup: React.FC<ActionGroupProps>;
+
+export { type ActionGroupProps, ActionGroup as default };

package/components/action-group/action-group.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import './action-group.css';
+import { classnames } from '../helpers/classnames';
+
+const ActionGroup = ({
+  direction = "row",
+  align = "start",
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = classnames("action-group", className, {
+    "action-group--row": direction === "row",
+    "action-group--column": direction === "column",
+    "action-group--end": align === "end"
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children
+    }
+  );
+};
+var action_group_default = ActionGroup;
+
+export { action_group_default as default };
+//# sourceMappingURL=action-group.js.map
+//# sourceMappingURL=action-group.js.map

package/components/action-group/action-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/action-group/action-group.tsx"],"names":[],"mappings":";;;;AAUA,MAAM,cAA0C,CAAC;AAAA,EAC/C,SAAA,GAAY,KAAA;AAAA,EACZ,KAAA,GAAQ,OAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,cAAA,EAAgB,SAAA,EAAW;AAAA,IACpD,qBAAqB,SAAA,KAAc,KAAA;AAAA,IACnC,wBAAwB,SAAA,KAAc,QAAA;AAAA,IACtC,qBAAqB,KAAA,KAAU;AAAA,GAChC,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,oBAAA,GAAQ","file":"action-group.js","sourcesContent":["import React from 'react';\nimport './action-group.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface ActionGroupProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  direction?: 'row' | 'column';\n  align?: 'start' | 'end';\n}\n\nconst ActionGroup: React.FC<ActionGroupProps> = ({\n  direction = 'row',\n  align = 'start',\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames('action-group', className, {\n    'action-group--row': direction === 'row',\n    'action-group--column': direction === 'column',\n    'action-group--end': align === 'end',\n  });\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default ActionGroup;"]}

package/components/action-group/index.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+var actionGroup = require('./action-group');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var actionGroup__default = /*#__PURE__*/_interopDefault(actionGroup);
+
+
+
+module.exports = actionGroup__default.default;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/components/action-group/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs","sourcesContent":[]}

package/components/action-group/index.d.cts

@@ -0,0 +1,2 @@
+export { ActionGroupProps, default } from './action-group.cjs';
+import 'react';

package/components/action-group/index.d.ts

@@ -0,0 +1,2 @@
+export { ActionGroupProps, default } from './action-group.js';
+import 'react';

package/components/action-group/index.js

@@ -0,0 +1,3 @@
+export { default } from './action-group';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/components/action-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/components/field/field.css

@@ -1,10 +1,10 @@
 .field {
   /* color */
-  --field-label-color: var(--color-text);
+/*  --field-label-color: var(--color-text);*/
   --field-message-color: var(--color-text-note);
   --field-error-color: var(--color-line-bad);
 
-  color: var(--field-label-color);
+/*  color: var(--field-label-color);*/
 
   /* typography */
   --field-label-font-family: var(--font-body-family);
@@ -39,7 +39,7 @@
 
 .field__label {
   /* color */
-  color: var(--field-label-color);
+/*  color: var(--field-label-color);*/  
 
   /* typography */
   font-family: var(--field-label-font-family);

package/components/index.cjs

@@ -9,13 +9,17 @@ 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');
+var actionGroup = require('./action-group/action-group');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -28,13 +32,17 @@ 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);
+var actionGroup__default = /*#__PURE__*/_interopDefault(actionGroup);
 
 
 
@@ -74,6 +82,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 +106,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; }
@@ -102,5 +122,9 @@ Object.defineProperty(exports, "Attach", {
   enumerable: true,
   get: function () { return attach__default.default; }
 });
+Object.defineProperty(exports, "ActionGroup", {
+  enumerable: true,
+  get: function () { return actionGroup__default.default; }
+});
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/components/index.d.cts

@@ -7,12 +7,16 @@ 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';
+export { default as ActionGroup, ActionGroupProps } from './action-group/action-group.cjs';
 import 'react';
 import '../types-DboVOY__.cjs';

package/components/index.d.ts

@@ -7,12 +7,16 @@ 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';
+export { default as ActionGroup, ActionGroupProps } from './action-group/action-group.js';
 import 'react';
 import '../types-DboVOY__.js';

package/components/index.js

@@ -7,12 +7,16 @@ 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';
+export { default as ActionGroup } from './action-group/action-group';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

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,83 @@
   /* motion */
 }
 
-.tabs:hover {
-}
+.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:focus {
-}
+  background: var(--tabs-tab-bg);
+  color: var(--tabs-tab-color);
 
-.tabs:focus-visible {
-}
+  /* typography */
+  font: inherit;
+  text-align: center;
+  white-space: nowrap;
 
-.tabs:active {
-}
+  /* size */
+  --tabs-tab-height: var(--size-tab-height);
+  --tabs-tab-padding-x: var(--padding-tab);
 
-.tabs:disabled {
-}
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  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 */
 
-.tabs--variant {
+  /* motion */
+  --tabs-transition-duration: var(--motion-duration1);
+
+  cursor: pointer;
+  transition:
+    background var(--tabs-transition-duration),
+    color var(--tabs-transition-duration),
+    border-color var(--tabs-transition-duration);
 }
 
-.tabs--state {
+.tabs__tab,
+.tabs__tab:active,
+.tabs__tab:focus,
+.tabs__tab:hover {
+  /* typography */
+  text-decoration: none;
 }
 
-.tabs > a {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 40px;
-  padding: 0 12px;
+.tabs__tab--selected {
+  /* color */
+  --tabs-tab-bg: var(--tabs-tab-bg-selected);
+  --tabs-tab-color: var(--tabs-tab-color-selected);
 
-  text-decoration: none;
-  cursor: pointer;
+  /* 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 };