glints-aries 4.0.237 → 4.0.238

package/es/@next/Badge/Badge.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-declare const badgeStatusVariant: readonly ["neutral", "success", "informational", "warning", "critical", "promotion", "new"];
+declare const badgeStatusVariant: readonly ["neutral", "success", "information", "warning", "critical", "promotion", "enticing", "attention"];
 export declare type BadgeStatusVariant = typeof badgeStatusVariant[number];
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
+    hasBorder?: boolean;
     status?: BadgeStatusVariant;
     textColor?: string;
 }

package/es/@next/Badge/Badge.js

@@ -1,22 +1,19 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["children", "status", "textColor"];
+var _excluded = ["children", "hasBorder", "status", "textColor"];
 import React from 'react';
 import { Typography } from '../Typography';
-import { Neutral } from '../utilities/colors';
-import { BadgeStyle } from './BadgeStyle';
-var badgeStatusVariant = ['neutral', 'success', 'informational', 'warning', 'critical', 'promotion', 'new'];
+import { BadgeStyle, badgeTextColor } from './BadgeStyle';
+var badgeStatusVariant = ['neutral', 'success', 'information', 'warning', 'critical', 'promotion', 'enticing', 'attention'];
 var renderTextColor = function renderTextColor(textColor, status) {
   if (textColor) {
     return textColor;
   }
-  if (status === 'new') {
-    return Neutral.B100;
-  }
-  return Neutral.B18;
+  return badgeTextColor[status];
 };
 export var Badge = /*#__PURE__*/React.forwardRef(function Badge(_ref, ref) {
   var children = _ref.children,
+    hasBorder = _ref.hasBorder,
     status = _ref.status,
     textColor = _ref.textColor,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -27,6 +24,7 @@ export var Badge = /*#__PURE__*/React.forwardRef(function Badge(_ref, ref) {
   }, children) : children;
   return /*#__PURE__*/React.createElement(BadgeStyle, _extends({
     ref: ref,
-    status: status ? status : 'neutral'
+    status: status ? status : 'neutral',
+    "data-border": hasBorder
   }, props), /*#__PURE__*/React.createElement("div", null, content));
 });

package/es/@next/Badge/Badge.stories.d.ts

@@ -2,3 +2,4 @@ import { Meta } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Interactive: any;
+export declare const WithBorder: any;

package/es/@next/Badge/BadgeStyle.d.ts

@@ -1,2 +1,5 @@
-import { BadgeProps } from './Badge';
+import { BadgeProps, BadgeStatusVariant } from './Badge';
+export declare const badgeTextColor: {
+    [variant in BadgeStatusVariant]: string;
+};
 export declare const BadgeStyle: import("styled-components").StyledComponent<"div", any, BadgeProps, never>;

package/es/@next/Badge/BadgeStyle.js

@@ -1,9 +1,10 @@
-var _badgeBackgroundColor;
+var _badgeBackgroundColor, _badgeTextColor;
 import styled from 'styled-components';
 import { borderRadius20 } from '../utilities/borderRadius';
 import { Blue, Green, Neutral, Orange, Red, Yellow } from '../utilities/colors';
 import { space8 } from '../utilities/spacing';
-var badgeBackgroundColor = (_badgeBackgroundColor = {}, _badgeBackgroundColor['neutral'] = Neutral.B95, _badgeBackgroundColor['success'] = Green.B89, _badgeBackgroundColor['informational'] = Blue.S08, _badgeBackgroundColor['warning'] = Orange.S42, _badgeBackgroundColor['critical'] = Red.B100, _badgeBackgroundColor['promotion'] = Yellow.S75, _badgeBackgroundColor['new'] = Orange.S87, _badgeBackgroundColor);
+var badgeBackgroundColor = (_badgeBackgroundColor = {}, _badgeBackgroundColor['neutral'] = Neutral.B95, _badgeBackgroundColor['success'] = Green.B89, _badgeBackgroundColor['information'] = Blue.S08, _badgeBackgroundColor['warning'] = Orange.S42, _badgeBackgroundColor['critical'] = Red.B100, _badgeBackgroundColor['promotion'] = Yellow.S75, _badgeBackgroundColor['enticing'] = Orange.S87, _badgeBackgroundColor['attention'] = Red.B93, _badgeBackgroundColor);
+export var badgeTextColor = (_badgeTextColor = {}, _badgeTextColor['neutral'] = Neutral.B18, _badgeTextColor['success'] = Neutral.B18, _badgeTextColor['information'] = Neutral.B18, _badgeTextColor['warning'] = Neutral.B18, _badgeTextColor['critical'] = Neutral.B18, _badgeTextColor['promotion'] = Neutral.B18, _badgeTextColor['enticing'] = Neutral.B100, _badgeTextColor['attention'] = Neutral.B100, _badgeTextColor);
 var getBadgeBackgroundColor = function getBadgeBackgroundColor(status) {
   if (!(status in badgeBackgroundColor)) {
     console.warn(status + " is not a valid status, default will be used");
@@ -14,9 +15,9 @@ var getBadgeBackgroundColor = function getBadgeBackgroundColor(status) {
 export var BadgeStyle = styled.div.withConfig({
   displayName: "BadgeStyle",
   componentId: "sc-qx6mou-0"
-})(["", " width:fit-content;padding:2px ", ";border-radius:", ";line-height:0;"], function (_ref) {
+})(["", " width:fit-content;padding:2px ", ";border-radius:", ";line-height:0;&[data-border='true']{border:1px solid ", ";}"], function (_ref) {
   var status = _ref.status;
   return {
     'background-color': getBadgeBackgroundColor(status)
   };
-}, space8, borderRadius20);
+}, space8, borderRadius20, Neutral.B100);

package/es/@next/Badge/FloatingBadge.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;

package/es/@next/Badge/FloatingBadgeSyle.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledBadge: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("./Badge").BadgeProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/es/@next/Badge/FloatingBadgeSyle.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+import { Badge } from '../Badge';
+export var StyledBadge = styled(Badge).withConfig({
+  displayName: "FloatingBadgeSyle__StyledBadge",
+  componentId: "sc-1w6mukf-0"
+})(["position:absolute;z-index:2;top:-10px;right:-16px;"]);

package/es/@next/Tabs/Tab.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { Typography } from '../Typography';
 import { StyledSpan, StyledTabButton } from './TabStyle';
 export var Tab = function Tab(_ref) {
@@ -6,12 +6,19 @@ export var Tab = function Tab(_ref) {
     id = _ref.id,
     selected = _ref.selected,
     onSelect = _ref.onSelect;
+  var tabRef = useRef(null);
+  var handleClick = function handleClick(event) {
+    event.preventDefault();
+    tabRef.current.scrollIntoView({
+      behavior: 'smooth'
+    });
+    onSelect();
+  };
   return /*#__PURE__*/React.createElement(StyledTabButton, {
+    ref: tabRef,
     "data-selected": selected,
     id: id,
-    onClick: function onClick() {
-      return onSelect();
-    }
+    onClick: handleClick
   }, /*#__PURE__*/React.createElement(StyledSpan, null, /*#__PURE__*/React.createElement(Typography, {
     as: "span",
     variant: "body1"

package/es/@next/Tabs/TabStyle.js

@@ -9,11 +9,11 @@ export var StyledTabsContainer = styled.div.withConfig({
 export var StyledTabHeaderContainer = styled.div.withConfig({
   displayName: "TabStyle__StyledTabHeaderContainer",
   componentId: "sc-3xj4eu-1"
-})(["box-shadow:inset 0px -1px 0px #e1e3e5;"]);
+})(["box-shadow:inset 0px -1px 0px #e1e3e5;overflow-x:auto;white-space:nowrap;background:transparent;position:relative;margin:", " 0;::-webkit-scrollbar{display:none;}&[data-scroll-left='true']{box-shadow:30px 0 50px -50px #474747 inset;}&[data-scroll-right='true']{box-shadow:-30px 0px 50px -50px #474747 inset;}&[data-scroll-left='true'][data-scroll-right='true']{box-shadow:30px 0 50px -50px #474747 inset,-30px 0px 50px -50px #474747 inset;}&[data-grabbing='true']{cursor:grabbing;}"], space16);
 export var StyledUl = styled.ul.withConfig({
   displayName: "TabStyle__StyledUl",
   componentId: "sc-3xj4eu-2"
-})(["display:flex;flex-direction:row;align-items:flex-start;padding:0;gap:", ";&[data-fitted='true'] li{flex:1;}"], space8);
+})(["display:flex;flex-direction:row;align-items:flex-start;padding:0;gap:", ";margin:0;&[data-fitted='true'] li{flex:1;}"], space8);
 export var StyledLi = styled.li.withConfig({
   displayName: "TabStyle__StyledLi",
   componentId: "sc-3xj4eu-3"
@@ -25,4 +25,4 @@ export var StyledSpan = styled.span.withConfig({
 export var StyledTabButton = styled.button.withConfig({
   displayName: "TabStyle__StyledTabButton",
   componentId: "sc-3xj4eu-5"
-})(["border:0;background:", ";height:56px;cursor:pointer;color:", ";margin-bottom:1px;width:100%;padding:0 ", ";&:hover{color:", ";}&:hover span::before{background:", ";}&[data-selected='true']{color:", ";}&[data-selected='true'] > span::before{background:", ";}@media (max-width:", "){height:48px;}"], Neutral.B100, Neutral.B40, space4, Neutral.B18, Blue.S100, Blue.S99, Blue.S99, Breakpoints.large);
+})(["border:0;background:transparent;height:56px;cursor:pointer;color:", ";margin-bottom:1px;width:100%;padding:0 ", ";&:hover{color:", ";}&:hover span::before{background:", ";}&[data-selected='true']{color:", ";}&[data-selected='true'] > span::before{background:", ";}@media (max-width:", "){height:48px;}"], Neutral.B40, space4, Neutral.B18, Blue.S100, Blue.S99, Blue.S99, Breakpoints.large);

package/es/@next/Tabs/Tabs.js

@@ -1,5 +1,5 @@
 import nextId from 'react-id-generator';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Tab } from './Tab';
 import { StyledLi, StyledTabHeaderContainer, StyledTabsContainer, StyledUl } from './TabStyle';
 export var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(_ref, ref) {
@@ -9,16 +9,68 @@ export var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(_ref, ref) {
     children = _ref.children,
     fitted = _ref.fitted,
     onSelected = _ref.onSelected;
+  var tabsHeaderRef = useRef(null);
   var tabLength = tabs.length;
   var _useState = useState(0),
     selectedTabIndex = _useState[0],
     setSelectedTabIndex = _useState[1];
+  var _useState2 = useState(false),
+    canScrollLeft = _useState2[0],
+    setCanScrollLeft = _useState2[1];
+  var _useState3 = useState(false),
+    canScrollRight = _useState3[0],
+    setCanScrollRight = _useState3[1];
+  var _useState4 = useState(false),
+    isDragging = _useState4[0],
+    setIsDragging = _useState4[1];
+  var _useState5 = useState(0),
+    dragStartX = _useState5[0],
+    setDragStartX = _useState5[1];
+  var _useState6 = useState(0),
+    scrollLeft = _useState6[0],
+    setScrollLeft = _useState6[1];
+  useEffect(function () {
+    var element = tabsHeaderRef.current;
+    var isElOverFlowX = (element == null ? void 0 : element.scrollWidth) > (element == null ? void 0 : element.clientWidth);
+    setCanScrollRight(isElOverFlowX);
+  }, []);
   useEffect(function () {
     if (selectedIndex < 0 || selectedIndex >= tabLength) {
       return;
     }
     setSelectedTabIndex(selectedIndex);
   }, [selectedIndex, tabLength]);
+  var handleMouseDown = function handleMouseDown(event) {
+    setIsDragging(true);
+    var startX = event.clientX - tabsHeaderRef.current.offsetLeft;
+    setDragStartX(startX);
+    setScrollLeft(tabsHeaderRef.current.scrollLeft);
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    setIsDragging(false);
+  };
+  var handleMouseUp = function handleMouseUp() {
+    setIsDragging(false);
+  };
+  var handleMouseMove = function handleMouseMove(event) {
+    if (!isDragging) return;
+    event.preventDefault();
+    var x = event.clientX - tabsHeaderRef.current.offsetLeft;
+    var scrollMultiplier = (x - dragStartX) * 3;
+    tabsHeaderRef.current.scrollLeft = scrollLeft - scrollMultiplier;
+  };
+  var handleScroll = function handleScroll() {
+    var element = tabsHeaderRef.current;
+    setCanScrollLeft((element == null ? void 0 : element.scrollLeft) > 0);
+    setCanScrollRight(element.scrollLeft < element.scrollWidth - element.clientWidth);
+  };
+  var handleWheel = function handleWheel(event) {
+    var element = tabsHeaderRef.current;
+    element.scrollTo({
+      left: element.scrollLeft + event.deltaY * 1,
+      behavior: 'smooth'
+    });
+  };
   var handleSelectedIndexChanged = function handleSelectedIndexChanged(index) {
     setSelectedTabIndex(index);
     onSelected == null ? void 0 : onSelected(index);
@@ -39,7 +91,18 @@ export var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(_ref, ref) {
   });
   return /*#__PURE__*/React.createElement(StyledTabsContainer, {
     ref: ref
-  }, /*#__PURE__*/React.createElement(StyledTabHeaderContainer, null, /*#__PURE__*/React.createElement(StyledUl, {
+  }, /*#__PURE__*/React.createElement(StyledTabHeaderContainer, {
+    ref: tabsHeaderRef,
+    onScroll: handleScroll,
+    onWheel: handleWheel,
+    onMouseDown: handleMouseDown,
+    onMouseMove: handleMouseMove,
+    onMouseUp: handleMouseUp,
+    onMouseLeave: handleMouseLeave,
+    "data-scroll-left": canScrollLeft,
+    "data-scroll-right": canScrollRight,
+    "data-grabbing": isDragging
+  }, /*#__PURE__*/React.createElement(StyledUl, {
     "data-fitted": fitted
   }, renderTabs, " ")), /*#__PURE__*/React.createElement("div", null, children));
 });

package/es/@next/Tabs/Tabs.stories.d.ts

@@ -2,3 +2,4 @@ import { Meta } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Interactive: any;
+export declare const Overflow: any;

package/lib/@next/Badge/Badge.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-declare const badgeStatusVariant: readonly ["neutral", "success", "informational", "warning", "critical", "promotion", "new"];
+declare const badgeStatusVariant: readonly ["neutral", "success", "information", "warning", "critical", "promotion", "enticing", "attention"];
 export declare type BadgeStatusVariant = typeof badgeStatusVariant[number];
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
+    hasBorder?: boolean;
     status?: BadgeStatusVariant;
     textColor?: string;
 }

package/lib/@next/Badge/Badge.js

@@ -7,21 +7,18 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
 var _Typography = require("../Typography");
-var _colors = require("../utilities/colors");
 var _BadgeStyle = require("./BadgeStyle");
-var _excluded = ["children", "status", "textColor"];
-var badgeStatusVariant = ['neutral', 'success', 'informational', 'warning', 'critical', 'promotion', 'new'];
+var _excluded = ["children", "hasBorder", "status", "textColor"];
+var badgeStatusVariant = ['neutral', 'success', 'information', 'warning', 'critical', 'promotion', 'enticing', 'attention'];
 var renderTextColor = function renderTextColor(textColor, status) {
   if (textColor) {
     return textColor;
   }
-  if (status === 'new') {
-    return _colors.Neutral.B100;
-  }
-  return _colors.Neutral.B18;
+  return _BadgeStyle.badgeTextColor[status];
 };
 var Badge = /*#__PURE__*/_react["default"].forwardRef(function Badge(_ref, ref) {
   var children = _ref.children,
+    hasBorder = _ref.hasBorder,
     status = _ref.status,
     textColor = _ref.textColor,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
@@ -32,7 +29,8 @@ var Badge = /*#__PURE__*/_react["default"].forwardRef(function Badge(_ref, ref)
   }, children) : children;
   return /*#__PURE__*/_react["default"].createElement(_BadgeStyle.BadgeStyle, (0, _extends2["default"])({
     ref: ref,
-    status: status ? status : 'neutral'
+    status: status ? status : 'neutral',
+    "data-border": hasBorder
   }, props), /*#__PURE__*/_react["default"].createElement("div", null, content));
 });
 exports.Badge = Badge;

package/lib/@next/Badge/Badge.stories.d.ts

@@ -2,3 +2,4 @@ import { Meta } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Interactive: any;
+export declare const WithBorder: any;

package/lib/@next/Badge/BadgeStyle.d.ts

@@ -1,2 +1,5 @@
-import { BadgeProps } from './Badge';
+import { BadgeProps, BadgeStatusVariant } from './Badge';
+export declare const badgeTextColor: {
+    [variant in BadgeStatusVariant]: string;
+};
 export declare const BadgeStyle: import("styled-components").StyledComponent<"div", any, BadgeProps, never>;

package/lib/@next/Badge/BadgeStyle.js

@@ -2,13 +2,15 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.BadgeStyle = void 0;
+exports.badgeTextColor = exports.BadgeStyle = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _borderRadius = require("../utilities/borderRadius");
 var _colors = require("../utilities/colors");
 var _spacing = require("../utilities/spacing");
-var _badgeBackgroundColor;
-var badgeBackgroundColor = (_badgeBackgroundColor = {}, _badgeBackgroundColor['neutral'] = _colors.Neutral.B95, _badgeBackgroundColor['success'] = _colors.Green.B89, _badgeBackgroundColor['informational'] = _colors.Blue.S08, _badgeBackgroundColor['warning'] = _colors.Orange.S42, _badgeBackgroundColor['critical'] = _colors.Red.B100, _badgeBackgroundColor['promotion'] = _colors.Yellow.S75, _badgeBackgroundColor['new'] = _colors.Orange.S87, _badgeBackgroundColor);
+var _badgeBackgroundColor, _badgeTextColor;
+var badgeBackgroundColor = (_badgeBackgroundColor = {}, _badgeBackgroundColor['neutral'] = _colors.Neutral.B95, _badgeBackgroundColor['success'] = _colors.Green.B89, _badgeBackgroundColor['information'] = _colors.Blue.S08, _badgeBackgroundColor['warning'] = _colors.Orange.S42, _badgeBackgroundColor['critical'] = _colors.Red.B100, _badgeBackgroundColor['promotion'] = _colors.Yellow.S75, _badgeBackgroundColor['enticing'] = _colors.Orange.S87, _badgeBackgroundColor['attention'] = _colors.Red.B93, _badgeBackgroundColor);
+var badgeTextColor = (_badgeTextColor = {}, _badgeTextColor['neutral'] = _colors.Neutral.B18, _badgeTextColor['success'] = _colors.Neutral.B18, _badgeTextColor['information'] = _colors.Neutral.B18, _badgeTextColor['warning'] = _colors.Neutral.B18, _badgeTextColor['critical'] = _colors.Neutral.B18, _badgeTextColor['promotion'] = _colors.Neutral.B18, _badgeTextColor['enticing'] = _colors.Neutral.B100, _badgeTextColor['attention'] = _colors.Neutral.B100, _badgeTextColor);
+exports.badgeTextColor = badgeTextColor;
 var getBadgeBackgroundColor = function getBadgeBackgroundColor(status) {
   if (!(status in badgeBackgroundColor)) {
     console.warn(status + " is not a valid status, default will be used");
@@ -19,10 +21,10 @@ var getBadgeBackgroundColor = function getBadgeBackgroundColor(status) {
 var BadgeStyle = _styledComponents["default"].div.withConfig({
   displayName: "BadgeStyle",
   componentId: "sc-qx6mou-0"
-})(["", " width:fit-content;padding:2px ", ";border-radius:", ";line-height:0;"], function (_ref) {
+})(["", " width:fit-content;padding:2px ", ";border-radius:", ";line-height:0;&[data-border='true']{border:1px solid ", ";}"], function (_ref) {
   var status = _ref.status;
   return {
     'background-color': getBadgeBackgroundColor(status)
   };
-}, _spacing.space8, _borderRadius.borderRadius20);
+}, _spacing.space8, _borderRadius.borderRadius20, _colors.Neutral.B100);
 exports.BadgeStyle = BadgeStyle;

package/lib/@next/Badge/FloatingBadge.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;

package/lib/@next/Badge/FloatingBadgeSyle.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledBadge: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("./Badge").BadgeProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/lib/@next/Badge/FloatingBadgeSyle.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.StyledBadge = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Badge = require("../Badge");
+var StyledBadge = (0, _styledComponents["default"])(_Badge.Badge).withConfig({
+  displayName: "FloatingBadgeSyle__StyledBadge",
+  componentId: "sc-1w6mukf-0"
+})(["position:absolute;z-index:2;top:-10px;right:-16px;"]);
+exports.StyledBadge = StyledBadge;

package/lib/@next/Tabs/Tab.js

@@ -1,22 +1,30 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.Tab = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _Typography = require("../Typography");
 var _TabStyle = require("./TabStyle");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var Tab = function Tab(_ref) {
   var content = _ref.content,
     id = _ref.id,
     selected = _ref.selected,
     onSelect = _ref.onSelect;
+  var tabRef = (0, _react.useRef)(null);
+  var handleClick = function handleClick(event) {
+    event.preventDefault();
+    tabRef.current.scrollIntoView({
+      behavior: 'smooth'
+    });
+    onSelect();
+  };
   return /*#__PURE__*/_react["default"].createElement(_TabStyle.StyledTabButton, {
+    ref: tabRef,
     "data-selected": selected,
     id: id,
-    onClick: function onClick() {
-      return onSelect();
-    }
+    onClick: handleClick
   }, /*#__PURE__*/_react["default"].createElement(_TabStyle.StyledSpan, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     as: "span",
     variant: "body1"

package/lib/@next/Tabs/TabStyle.js

@@ -17,12 +17,12 @@ exports.StyledTabsContainer = StyledTabsContainer;
 var StyledTabHeaderContainer = _styledComponents["default"].div.withConfig({
   displayName: "TabStyle__StyledTabHeaderContainer",
   componentId: "sc-3xj4eu-1"
-})(["box-shadow:inset 0px -1px 0px #e1e3e5;"]);
+})(["box-shadow:inset 0px -1px 0px #e1e3e5;overflow-x:auto;white-space:nowrap;background:transparent;position:relative;margin:", " 0;::-webkit-scrollbar{display:none;}&[data-scroll-left='true']{box-shadow:30px 0 50px -50px #474747 inset;}&[data-scroll-right='true']{box-shadow:-30px 0px 50px -50px #474747 inset;}&[data-scroll-left='true'][data-scroll-right='true']{box-shadow:30px 0 50px -50px #474747 inset,-30px 0px 50px -50px #474747 inset;}&[data-grabbing='true']{cursor:grabbing;}"], _spacing.space16);
 exports.StyledTabHeaderContainer = StyledTabHeaderContainer;
 var StyledUl = _styledComponents["default"].ul.withConfig({
   displayName: "TabStyle__StyledUl",
   componentId: "sc-3xj4eu-2"
-})(["display:flex;flex-direction:row;align-items:flex-start;padding:0;gap:", ";&[data-fitted='true'] li{flex:1;}"], _spacing.space8);
+})(["display:flex;flex-direction:row;align-items:flex-start;padding:0;gap:", ";margin:0;&[data-fitted='true'] li{flex:1;}"], _spacing.space8);
 exports.StyledUl = StyledUl;
 var StyledLi = _styledComponents["default"].li.withConfig({
   displayName: "TabStyle__StyledLi",
@@ -37,5 +37,5 @@ exports.StyledSpan = StyledSpan;
 var StyledTabButton = _styledComponents["default"].button.withConfig({
   displayName: "TabStyle__StyledTabButton",
   componentId: "sc-3xj4eu-5"
-})(["border:0;background:", ";height:56px;cursor:pointer;color:", ";margin-bottom:1px;width:100%;padding:0 ", ";&:hover{color:", ";}&:hover span::before{background:", ";}&[data-selected='true']{color:", ";}&[data-selected='true'] > span::before{background:", ";}@media (max-width:", "){height:48px;}"], _colors.Neutral.B100, _colors.Neutral.B40, _spacing.space4, _colors.Neutral.B18, _colors.Blue.S100, _colors.Blue.S99, _colors.Blue.S99, Breakpoints.large);
+})(["border:0;background:transparent;height:56px;cursor:pointer;color:", ";margin-bottom:1px;width:100%;padding:0 ", ";&:hover{color:", ";}&:hover span::before{background:", ";}&[data-selected='true']{color:", ";}&[data-selected='true'] > span::before{background:", ";}@media (max-width:", "){height:48px;}"], _colors.Neutral.B40, _spacing.space4, _colors.Neutral.B18, _colors.Blue.S100, _colors.Blue.S99, _colors.Blue.S99, Breakpoints.large);
 exports.StyledTabButton = StyledTabButton;

package/lib/@next/Tabs/Tabs.js

@@ -16,16 +16,68 @@ var Tabs = /*#__PURE__*/_react["default"].forwardRef(function Tabs(_ref, ref) {
     children = _ref.children,
     fitted = _ref.fitted,
     onSelected = _ref.onSelected;
+  var tabsHeaderRef = (0, _react.useRef)(null);
   var tabLength = tabs.length;
   var _useState = (0, _react.useState)(0),
     selectedTabIndex = _useState[0],
     setSelectedTabIndex = _useState[1];
+  var _useState2 = (0, _react.useState)(false),
+    canScrollLeft = _useState2[0],
+    setCanScrollLeft = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    canScrollRight = _useState3[0],
+    setCanScrollRight = _useState3[1];
+  var _useState4 = (0, _react.useState)(false),
+    isDragging = _useState4[0],
+    setIsDragging = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    dragStartX = _useState5[0],
+    setDragStartX = _useState5[1];
+  var _useState6 = (0, _react.useState)(0),
+    scrollLeft = _useState6[0],
+    setScrollLeft = _useState6[1];
+  (0, _react.useEffect)(function () {
+    var element = tabsHeaderRef.current;
+    var isElOverFlowX = (element == null ? void 0 : element.scrollWidth) > (element == null ? void 0 : element.clientWidth);
+    setCanScrollRight(isElOverFlowX);
+  }, []);
   (0, _react.useEffect)(function () {
     if (selectedIndex < 0 || selectedIndex >= tabLength) {
       return;
     }
     setSelectedTabIndex(selectedIndex);
   }, [selectedIndex, tabLength]);
+  var handleMouseDown = function handleMouseDown(event) {
+    setIsDragging(true);
+    var startX = event.clientX - tabsHeaderRef.current.offsetLeft;
+    setDragStartX(startX);
+    setScrollLeft(tabsHeaderRef.current.scrollLeft);
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    setIsDragging(false);
+  };
+  var handleMouseUp = function handleMouseUp() {
+    setIsDragging(false);
+  };
+  var handleMouseMove = function handleMouseMove(event) {
+    if (!isDragging) return;
+    event.preventDefault();
+    var x = event.clientX - tabsHeaderRef.current.offsetLeft;
+    var scrollMultiplier = (x - dragStartX) * 3;
+    tabsHeaderRef.current.scrollLeft = scrollLeft - scrollMultiplier;
+  };
+  var handleScroll = function handleScroll() {
+    var element = tabsHeaderRef.current;
+    setCanScrollLeft((element == null ? void 0 : element.scrollLeft) > 0);
+    setCanScrollRight(element.scrollLeft < element.scrollWidth - element.clientWidth);
+  };
+  var handleWheel = function handleWheel(event) {
+    var element = tabsHeaderRef.current;
+    element.scrollTo({
+      left: element.scrollLeft + event.deltaY * 1,
+      behavior: 'smooth'
+    });
+  };
   var handleSelectedIndexChanged = function handleSelectedIndexChanged(index) {
     setSelectedTabIndex(index);
     onSelected == null ? void 0 : onSelected(index);
@@ -46,7 +98,18 @@ var Tabs = /*#__PURE__*/_react["default"].forwardRef(function Tabs(_ref, ref) {
   });
   return /*#__PURE__*/_react["default"].createElement(_TabStyle.StyledTabsContainer, {
     ref: ref
-  }, /*#__PURE__*/_react["default"].createElement(_TabStyle.StyledTabHeaderContainer, null, /*#__PURE__*/_react["default"].createElement(_TabStyle.StyledUl, {
+  }, /*#__PURE__*/_react["default"].createElement(_TabStyle.StyledTabHeaderContainer, {
+    ref: tabsHeaderRef,
+    onScroll: handleScroll,
+    onWheel: handleWheel,
+    onMouseDown: handleMouseDown,
+    onMouseMove: handleMouseMove,
+    onMouseUp: handleMouseUp,
+    onMouseLeave: handleMouseLeave,
+    "data-scroll-left": canScrollLeft,
+    "data-scroll-right": canScrollRight,
+    "data-grabbing": isDragging
+  }, /*#__PURE__*/_react["default"].createElement(_TabStyle.StyledUl, {
     "data-fitted": fitted
   }, renderTabs, " ")), /*#__PURE__*/_react["default"].createElement("div", null, children));
 });

package/lib/@next/Tabs/Tabs.stories.d.ts

@@ -2,3 +2,4 @@ import { Meta } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Interactive: any;
+export declare const Overflow: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glints-aries",
-  "version": "4.0.237",
+  "version": "4.0.238",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",