colibri-ui 0.8.71 → 0.8.73

package/Slider/Slider.js

@@ -0,0 +1,211 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var styles = require('./Slider.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var cx = function cx() {
+  for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
+    classNames[_key] = arguments[_key];
+  }
+  return classNames.filter(Boolean).join(" ");
+};
+var clamp = function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+};
+var decimals = function decimals(value) {
+  var _a;
+  return ((_a = String(value).split(".")[1]) !== null && _a !== void 0 ? _a : "").length;
+};
+var normalize = function normalize(value, min, max, step) {
+  var snapped = min + Math.round((clamp(value, min, max) - min) / step) * step;
+  return Number(clamp(snapped, min, max).toFixed(Math.max(decimals(step), decimals(min))));
+};
+var Slider = /*#__PURE__*/React.forwardRef(function SliderComponent(props, ref) {
+  var _a;
+  var _props$mode = props.mode,
+    mode = _props$mode === void 0 ? "single" : _props$mode,
+    value = props.value,
+    onChange = props.onChange,
+    onChangeCommitted = props.onChangeCommitted,
+    _props$min = props.min,
+    min = _props$min === void 0 ? 0 : _props$min,
+    _props$max = props.max,
+    max = _props$max === void 0 ? 100 : _props$max,
+    _props$step = props.step,
+    step = _props$step === void 0 ? 1 : _props$step,
+    label = props.label,
+    labelContent = props.labelContent,
+    _props$labelPlacement = props.labelPlacement,
+    labelPlacement = _props$labelPlacement === void 0 ? "top" : _props$labelPlacement,
+    _props$orientation = props.orientation,
+    orientation = _props$orientation === void 0 ? "horizontal" : _props$orientation,
+    _props$reversed = props.reversed,
+    reversed = _props$reversed === void 0 ? false : _props$reversed,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$size = props.size,
+    size = _props$size === void 0 ? "m" : _props$size,
+    _props$view = props.view,
+    view = _props$view === void 0 ? "default" : _props$view,
+    _props$pointerSize = props.pointerSize,
+    pointerSize = _props$pointerSize === void 0 ? "small" : _props$pointerSize,
+    _props$pointerVisibil = props.pointerVisibility,
+    pointerVisibility = _props$pointerVisibil === void 0 ? "always" : _props$pointerVisibil,
+    _props$showValue = props.showValue,
+    showValue = _props$showValue === void 0 ? false : _props$showValue,
+    _props$valueFormatter = props.valueFormatter,
+    valueFormatter = _props$valueFormatter === void 0 ? function (current) {
+      return current;
+    } : _props$valueFormatter,
+    _props$ticks = props.ticks,
+    ticks = _props$ticks === void 0 ? [] : _props$ticks,
+    _props$tickType = props.tickType,
+    tickType = _props$tickType === void 0 ? "bullet" : _props$tickType,
+    ariaLabel = props.ariaLabel,
+    name = props.name,
+    className = props.className,
+    rest = tslib.__rest(props, ["mode", "value", "onChange", "onChangeCommitted", "min", "max", "step", "label", "labelContent", "labelPlacement", "orientation", "reversed", "disabled", "size", "view", "pointerSize", "pointerVisibility", "showValue", "valueFormatter", "ticks", "tickType", "ariaLabel", "name", "className"]);
+  var trackRef = React.useRef(null);
+  var activeThumb = React.useRef(0);
+  var range = max - min || 1;
+  var values = mode === "range" ? [normalize(value[0], min, max, step), normalize(value[1], min, max, step)] : [min, normalize(value, min, max, step)];
+  var low = Math.min(values[0], values[1]);
+  var high = Math.max(values[0], values[1]);
+  var toPercent = function toPercent(current) {
+    return (current - min) / range * 100;
+  };
+  var toVisualPercent = function toVisualPercent(current) {
+    return reversed ? 100 - toPercent(current) : toPercent(current);
+  };
+  var thumbPercents = [toVisualPercent(values[0]), toVisualPercent(values[1])];
+  var lowPercent = mode === "range" ? Math.min.apply(Math, thumbPercents) : 0;
+  var highPercent = mode === "range" ? Math.max.apply(Math, thumbPercents) : thumbPercents[1];
+  var minDistance = mode === "range" ? Math.max(0, (_a = props.minDistance) !== null && _a !== void 0 ? _a : 0) : 0;
+  var emitValue = function emitValue(index, nextValue) {
+    var committed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var next = normalize(nextValue, min, max, step);
+    if (mode === "single") {
+      if (committed) onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(next);else onChange(next);
+      return;
+    }
+    var current = values;
+    var nextRange = index === 0 ? [Math.min(next, current[1] - minDistance), current[1]] : [current[0], Math.max(next, current[0] + minDistance)];
+    if (committed) onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(nextRange);else onChange(nextRange);
+  };
+  var valueFromPointer = function valueFromPointer(event) {
+    var _a;
+    var rect = (_a = trackRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    if (!rect) return min;
+    var rawRatio = orientation === "horizontal" ? (event.clientX - rect.left) / rect.width : (rect.bottom - event.clientY) / rect.height;
+    var ratio = reversed ? 1 - rawRatio : rawRatio;
+    return min + clamp(ratio, 0, 1) * range;
+  };
+  var handlePointerDown = function handlePointerDown(event) {
+    if (disabled || event.target instanceof HTMLInputElement) return;
+    var nextValue = valueFromPointer(event);
+    activeThumb.current = mode === "range" && Math.abs(nextValue - values[0]) <= Math.abs(nextValue - values[1]) ? 0 : 1;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    emitValue(activeThumb.current, nextValue);
+  };
+  var normalizedTicks = ticks.map(function (tick) {
+    return typeof tick === "number" ? {
+      value: tick,
+      label: tick
+    } : tick;
+  });
+  var horizontal = orientation === "horizontal";
+  var labelNode = labelPlacement !== "none" && (label || labelContent) && (/*#__PURE__*/React__default.default.createElement("div", {
+    className: styles__default.default.label_wrapper
+  }, labelContent && (/*#__PURE__*/React__default.default.createElement("span", {
+    className: styles__default.default.label_content
+  }, labelContent)), label && /*#__PURE__*/React__default.default.createElement("span", {
+    className: styles__default.default.label
+  }, label)));
+  return /*#__PURE__*/React__default.default.createElement("div", Object.assign({}, rest, {
+    ref: ref,
+    className: cx(styles__default.default.root, styles__default.default[size], styles__default.default[view], styles__default.default[orientation], styles__default.default["pointer_".concat(pointerSize)], pointerVisibility === "hover" && styles__default.default.pointer_on_hover, labelPlacement === "left" && styles__default.default.label_left, reversed && styles__default.default.reversed, disabled && styles__default.default.disabled, className)
+  }), labelPlacement === "top" && labelNode, /*#__PURE__*/React__default.default.createElement("div", {
+    className: styles__default.default.main
+  }, labelPlacement === "left" && labelNode, /*#__PURE__*/React__default.default.createElement("div", {
+    className: cx(styles__default.default.slider_area, mode === "range" && styles__default.default.range),
+    style: {
+      "--slider-low": "".concat(thumbPercents[0], "%"),
+      "--slider-high": "".concat(thumbPercents[1], "%")
+    }
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    ref: trackRef,
+    className: cx(styles__default.default.track, tickType === "separator" && styles__default.default.segmented),
+    onPointerDown: handlePointerDown,
+    onPointerMove: function onPointerMove(event) {
+      if (disabled || !event.currentTarget.hasPointerCapture(event.pointerId)) return;
+      emitValue(activeThumb.current, valueFromPointer(event));
+    },
+    onPointerUp: function onPointerUp(event) {
+      if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
+      event.currentTarget.releasePointerCapture(event.pointerId);
+      emitValue(activeThumb.current, valueFromPointer(event), true);
+    }
+  }, /*#__PURE__*/React__default.default.createElement("span", {
+    className: styles__default.default.fill,
+    style: horizontal ? {
+      left: "".concat(lowPercent, "%"),
+      width: "".concat(highPercent - lowPercent, "%")
+    } : {
+      bottom: "".concat(lowPercent, "%"),
+      height: "".concat(highPercent - lowPercent, "%")
+    }
+  }), normalizedTicks.map(function (tick) {
+    var percent = toVisualPercent(clamp(tick.value, min, max));
+    var filled = tick.value >= low && tick.value <= high;
+    return /*#__PURE__*/React__default.default.createElement("span", {
+      key: tick.value,
+      className: cx(styles__default.default.tick, filled && styles__default.default.tick_filled),
+      style: horizontal ? {
+        left: "".concat(percent, "%")
+      } : {
+        bottom: "".concat(percent, "%")
+      }
+    }, /*#__PURE__*/React__default.default.createElement("i", null), tick.label != null && /*#__PURE__*/React__default.default.createElement("b", null, tick.label));
+  })), (mode === "range" ? [0, 1] : [1]).map(function (index) {
+    var current = values[index];
+    var inputName = Array.isArray(name) ? name[index] : name;
+    var inputLabel = Array.isArray(ariaLabel) ? ariaLabel[index] : ariaLabel;
+    return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, {
+      key: index
+    }, /*#__PURE__*/React__default.default.createElement("input", {
+      className: styles__default.default.input,
+      type: "range",
+      min: min,
+      max: max,
+      step: step,
+      value: current,
+      name: inputName,
+      "aria-label": inputLabel,
+      disabled: disabled,
+      onChange: function onChange(event) {
+        return emitValue(index, Number(event.currentTarget.value));
+      },
+      onPointerUp: function onPointerUp(event) {
+        return emitValue(index, Number(event.currentTarget.value), true);
+      },
+      onKeyUp: function onKeyUp(event) {
+        return emitValue(index, Number(event.currentTarget.value), true);
+      }
+    }), showValue && (/*#__PURE__*/React__default.default.createElement("span", {
+      className: styles__default.default.current_value,
+      style: horizontal ? {
+        left: "".concat(toVisualPercent(current), "%")
+      } : {
+        bottom: "".concat(toVisualPercent(current), "%")
+      }
+    }, valueFormatter(current))));
+  }))));
+});
+
+exports.Slider = Slider;

package/Slider/Slider.module.css

@@ -0,0 +1,314 @@
+.root {
+  --slider-label-color: var(--color-text-primary);
+  --slider-value-color: var(--color-text-secondary);
+  --slider-rail-color: var(--color-bg-surface-strong);
+  --slider-fill-color: var(--color-action-primary);
+  --slider-thumb-color: var(--color-bg-surface);
+  --slider-thumb-border-color: var(--color-border-default);
+  --slider-focus-color: var(--color-focus-ring);
+  --slider-thumb-size: var(--space-4);
+  --slider-track-size: var(--space-1);
+  --slider-length: 20rem;
+  --slider-font-size: var(--font-size-text-md);
+  --slider-line-height: var(--line-height-text-md);
+  color: var(--slider-label-color);
+  display: inline-flex;
+  flex-direction: column;
+  font-family: var(--font-family-ui);
+  touch-action: none;
+}
+
+.accent {
+  --slider-fill-color: var(--color-action-secondary);
+  --slider-focus-color: var(--color-focus-ring);
+}
+
+.gradient {
+  --slider-fill-color: linear-gradient(
+    90deg,
+    var(--color-action-primary),
+    var(--color-action-secondary)
+  );
+  --slider-focus-color: var(--color-focus-ring);
+}
+
+.s {
+  --slider-font-size: var(--font-size-text-sm);
+  --slider-line-height: var(--line-height-text-sm);
+  --slider-length: 16rem;
+}
+
+.m {
+  --slider-font-size: var(--font-size-text-md);
+  --slider-line-height: var(--line-height-text-md);
+  --slider-length: 20rem;
+}
+
+.l {
+  --slider-font-size: var(--font-size-text-lg);
+  --slider-line-height: var(--line-height-text-lg);
+  --slider-length: 24rem;
+}
+
+.pointer_large {
+  --slider-thumb-size: var(--space-5);
+}
+
+.pointer_none {
+  --slider-thumb-size: var(--space-0);
+}
+
+.label_wrapper {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-1);
+  margin-bottom: var(--space-3);
+  min-width: 0;
+}
+
+.label {
+  font-size: var(--slider-font-size);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--slider-line-height);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.label_content {
+  display: inline-flex;
+  flex: none;
+}
+
+.main {
+  align-items: center;
+  display: flex;
+}
+
+.label_left .label_wrapper {
+  margin: var(--space-0) var(--space-4) var(--space-0) var(--space-0);
+}
+
+.slider_area {
+  height: var(--slider-thumb-size);
+  min-height: var(--space-4);
+  position: relative;
+  width: var(--slider-length);
+}
+
+.vertical .main {
+  align-items: flex-start;
+}
+
+.vertical .slider_area {
+  height: var(--slider-length);
+  min-width: var(--space-4);
+  width: var(--slider-thumb-size);
+}
+
+.track {
+  background: var(--slider-rail-color);
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  height: var(--slider-track-size);
+  left: 0;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 100%;
+}
+
+.vertical .track {
+  height: 100%;
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+  width: var(--slider-track-size);
+}
+
+.fill {
+  background: var(--slider-fill-color);
+  border-radius: inherit;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+
+.vertical .fill {
+  left: 0;
+  top: auto;
+  width: 100%;
+}
+
+.input {
+  cursor: pointer;
+  height: 100%;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  width: 100%;
+  z-index: 2;
+}
+
+.input::-webkit-slider-thumb {
+  appearance: none;
+  height: var(--slider-thumb-size);
+  pointer-events: auto;
+  width: var(--slider-thumb-size);
+}
+
+.input::-moz-range-thumb {
+  border: var(--space-0);
+  height: var(--slider-thumb-size);
+  pointer-events: auto;
+  width: var(--slider-thumb-size);
+}
+
+.input:focus-visible {
+  outline: none;
+}
+
+.vertical .input {
+  direction: rtl;
+  writing-mode: vertical-lr;
+}
+
+.vertical.reversed .input {
+  direction: ltr;
+}
+
+.slider_area::before,
+.slider_area::after {
+  background: var(--slider-thumb-color);
+  border: var(--border-width-hairline) solid var(--slider-thumb-border-color);
+  border-radius: var(--radius-full);
+  box-shadow: var(--shadow-switch-thumb);
+  box-sizing: border-box;
+  content: "";
+  height: var(--slider-thumb-size);
+  pointer-events: none;
+  position: absolute;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
+  width: var(--slider-thumb-size);
+  z-index: 1;
+}
+
+.slider_area::before {
+  display: none;
+}
+
+.range::before {
+  display: block;
+}
+
+.horizontal .slider_area::after {
+  left: var(--slider-high);
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.horizontal .slider_area::before {
+  left: var(--slider-low);
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.vertical .slider_area::after {
+  bottom: var(--slider-high);
+  left: 50%;
+  transform: translate(-50%, 50%);
+}
+
+.vertical .slider_area::before {
+  bottom: var(--slider-low);
+  left: 50%;
+  transform: translate(-50%, 50%);
+}
+
+.slider_area:focus-within::after,
+.slider_area:focus-within::before {
+  border-color: var(--slider-focus-color);
+  box-shadow: 0 0 0 var(--focus-ring-width) var(--slider-focus-color), var(--shadow-switch-thumb);
+}
+
+.pointer_on_hover:not(:hover, :focus-within) .slider_area::before,
+.pointer_on_hover:not(:hover, :focus-within) .slider_area::after {
+  opacity: 0;
+}
+
+.current_value {
+  color: var(--slider-value-color);
+  font-size: var(--font-size-text-sm);
+  line-height: var(--line-height-text-sm);
+  position: absolute;
+  white-space: nowrap;
+}
+
+.horizontal .current_value {
+  top: calc(100% + var(--space-2));
+  transform: translateX(-50%);
+}
+
+.vertical .current_value {
+  left: calc(100% + var(--space-3));
+  transform: translateY(50%);
+}
+
+.tick {
+  color: var(--slider-value-color);
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.vertical .tick {
+  left: 50%;
+  top: auto;
+  transform: translate(-50%, 50%);
+}
+
+.tick i {
+  background: var(--slider-rail-color);
+  border-radius: var(--radius-full);
+  display: block;
+  height: var(--space-2);
+  width: var(--space-2);
+}
+
+.tick_filled i {
+  background: var(--slider-fill-color);
+}
+
+.tick b {
+  font-size: var(--font-size-text-xs);
+  font-weight: var(--font-weight-regular);
+  left: 50%;
+  line-height: var(--line-height-text-xs);
+  position: absolute;
+  top: var(--space-3);
+  transform: translateX(-50%);
+  white-space: nowrap;
+}
+
+.vertical .tick b {
+  left: var(--space-3);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.segmented .tick i {
+  background: var(--slider-thumb-color);
+  border-radius: var(--radius-xs);
+  height: var(--space-4);
+  width: var(--space-1);
+}
+
+.disabled {
+  --slider-fill-color: var(--color-action-disabled-text);
+  --slider-rail-color: var(--color-action-disabled);
+  --slider-thumb-border-color: var(--color-border-subtle);
+  color: var(--color-text-disabled);
+  cursor: not-allowed;
+}

package/Slider/index.d.ts

@@ -0,0 +1,2 @@
+export { Slider } from "./Slider";
+export type { SliderOrientation, SliderPointerSize, SliderProps, SliderRangeProps, SliderSingleProps, SliderSize, SliderTick, SliderView, } from "./index.props";

package/Slider/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+var Slider = require('./Slider.js');
+
+
+
+exports.Slider = Slider.Slider;

package/Slider/index.props.d.ts

@@ -0,0 +1,47 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type SliderSize = "s" | "m" | "l";
+export type SliderView = "default" | "accent" | "gradient";
+export type SliderOrientation = "horizontal" | "vertical";
+export type SliderPointerSize = "small" | "large" | "none";
+export interface SliderTick {
+    value: number;
+    label?: ReactNode;
+}
+interface SliderCommonProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: ReactNode;
+    labelContent?: ReactNode;
+    labelPlacement?: "top" | "left" | "none";
+    orientation?: SliderOrientation;
+    reversed?: boolean;
+    disabled?: boolean;
+    size?: SliderSize;
+    view?: SliderView | string;
+    pointerSize?: SliderPointerSize;
+    pointerVisibility?: "always" | "hover";
+    showValue?: boolean;
+    valueFormatter?: (value: number) => ReactNode;
+    ticks?: Array<number | SliderTick>;
+    tickType?: "bullet" | "separator";
+}
+export interface SliderSingleProps extends SliderCommonProps {
+    mode?: "single";
+    value: number;
+    onChange: (value: number) => void;
+    onChangeCommitted?: (value: number) => void;
+    ariaLabel?: string;
+    name?: string;
+}
+export interface SliderRangeProps extends SliderCommonProps {
+    mode: "range";
+    value: [number, number];
+    onChange: (value: [number, number]) => void;
+    onChangeCommitted?: (value: [number, number]) => void;
+    ariaLabel?: [string, string];
+    name?: [string, string];
+    minDistance?: number;
+}
+export type SliderProps = SliderSingleProps | SliderRangeProps;
+export {};

package/Slider/package.json

@@ -0,0 +1,9 @@
+{
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "module": "../esm/Slider/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/Status/index.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
 import type { PropsWithChildren } from "react";
 import type { StatusProps } from "./index.props";
-declare const Status: ({ className, indicator, showIndicator, tag: Component, children, type, }: PropsWithChildren<StatusProps>) => React.JSX.Element;
-export default Status;
+export declare const Status: ({ className, indicator, showIndicator, tag: Component, children, type, }: PropsWithChildren<StatusProps>) => React.JSX.Element;

package/Status/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var clsx = require('clsx');
@@ -31,4 +29,4 @@ var Status = function Status(_ref) {
   }, indicator)), children);
 };
 
-exports.default = Status;
+exports.Status = Status;

package/Switch/index.d.ts

@@ -1,4 +1,3 @@
 import React from "react";
 import type { SwitchProps } from "./index.props";
-declare const Switch: ({ disabled, className, variant, hint, hasError, id, label, ref, ...props }: SwitchProps) => React.JSX.Element;
-export default Switch;
+export declare const Switch: ({ disabled, className, variant, hint, hasError, id, label, ref, ...props }: SwitchProps) => React.JSX.Element;

package/Switch/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var tslib = require('tslib');
 var React = require('react');
@@ -44,11 +42,11 @@ var Switch = function Switch(_a) {
     className: styles__default.default["base-switch"]
   })), label && /*#__PURE__*/React__default.default.createElement("span", {
     className: styles__default.default.text
-  }, label)), hint && (/*#__PURE__*/React__default.default.createElement(index.default, {
+  }, label)), hint && (/*#__PURE__*/React__default.default.createElement(index.Typography, {
     className: clsx__default.default(_defineProperty__default.default({}, styles__default.default.hint_error, hasError)),
     variant: hasError ? "alert" : "secondary",
     tag: "span"
   }, hint)));
 };
 
-exports.default = Switch;
+exports.Switch = Switch;

package/TabsMenu/Tab/Tab.d.ts

@@ -1,4 +1,3 @@
 import type { FC } from "react";
-import type { TabProps } from "./Tab.props";
-declare const Tab: FC<TabProps>;
-export default Tab;
+import type { TabProps } from "./index.props";
+export declare const Tab: FC<TabProps>;

package/TabsMenu/Tab/Tab.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var tslib = require('tslib');
 var React = require('react');
@@ -33,4 +31,4 @@ var Tab = function Tab(_a) {
   }), content);
 };
 
-exports.default = Tab;
+exports.Tab = Tab;

package/TabsMenu/index.d.ts

@@ -1,4 +1,3 @@
 import type { TabsMenuProps } from "./index.props";
 import type { FC } from "react";
-declare const TabsMenu: FC<TabsMenuProps>;
-export default TabsMenu;
+export declare const TabsMenu: FC<TabsMenuProps>;