glints-aries 4.0.244 → 4.0.245

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

@@ -5,5 +5,8 @@ export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
     onChange: () => void;
     value: string;
     withIcon?: boolean;
+    checkedText?: string;
+    uncheckedText?: string;
+    checkedBackgroundColor?: string;
 }
 export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;

package/es/@next/Switch/Switch.js

@@ -1,17 +1,24 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["checked", "disabled", "onChange", "value", "withIcon"];
+var _excluded = ["checked", "disabled", "onChange", "value", "withIcon", "checkedText", "uncheckedText", "checkedBackgroundColor"];
 import React from 'react';
 import { Icon } from '../Icon';
 import { Neutral } from '../utilities/colors';
-import { InputStyle, LabelStyle, SwitchStyle } from './SwitchStyle';
+import { InputStyle, LabelStyle, SwitchStyle, SwitchTextStyle } from './SwitchStyle';
 export var Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref, ref) {
   var checked = _ref.checked,
     disabled = _ref.disabled,
     onChange = _ref.onChange,
     value = _ref.value,
     withIcon = _ref.withIcon,
+    checkedText = _ref.checkedText,
+    uncheckedText = _ref.uncheckedText,
+    checkedBackgroundColor = _ref.checkedBackgroundColor,
     otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var withText = Boolean(checkedText) && Boolean(uncheckedText);
+  if (withText && withIcon) {
+    console.warn('Switch component cannot have both text and icon');
+  }
   var IconRender = function IconRender() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
       name: "ri-check",
@@ -21,6 +28,15 @@ export var Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref, ref) {
       fill: disabled ? Neutral.B85 : Neutral.B100
     }));
   };
+  var RenderSwitchText = function RenderSwitchText() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SwitchTextStyle, {
+      variant: "overline",
+      color: disabled ? Neutral.B85 : Neutral.B100
+    }, checkedText), /*#__PURE__*/React.createElement(SwitchTextStyle, {
+      variant: "overline",
+      color: disabled ? Neutral.B85 : Neutral.B100
+    }, uncheckedText));
+  };
   return /*#__PURE__*/React.createElement(LabelStyle, null, /*#__PURE__*/React.createElement(InputStyle, _extends({
     value: value
   }, otherProps, {
@@ -29,9 +45,12 @@ export var Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref, ref) {
     type: "checkbox",
     onChange: onChange,
     ref: ref,
-    "data-with-icon": withIcon
+    "data-with-icon": !withText && withIcon,
+    "data-with-text": withText,
+    backgroundColor: checkedBackgroundColor
   })), /*#__PURE__*/React.createElement(SwitchStyle, {
     "data-disabled": disabled,
-    "data-with-icon": withIcon
-  }, withIcon && /*#__PURE__*/React.createElement(IconRender, null)));
+    "data-with-icon": !withText && withIcon,
+    "data-with-text": withText
+  }, !withText && withIcon && /*#__PURE__*/React.createElement(IconRender, null), withText && /*#__PURE__*/React.createElement(RenderSwitchText, null)));
 });

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

@@ -3,3 +3,5 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Default: any;
 export declare const WithIcon: any;
+export declare const WithText: any;
+export declare const WithTextAndCustomBackgroundColor: any;

package/es/@next/Switch/SwitchStyle.d.ts

@@ -1,3 +1,7 @@
+/// <reference types="react" />
+export declare const SwitchTextStyle: import("styled-components").StyledComponent<({ as, children, variant, style, ...props }: import("..").TypographyProps) => JSX.Element, any, {}, never>;
 export declare const SwitchStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InputStyle: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const InputStyle: import("styled-components").StyledComponent<"input", any, {
+    backgroundColor: string;
+}, never>;
 export declare const LabelStyle: import("styled-components").StyledComponent<"label", any, {}, never>;

package/es/@next/Switch/SwitchStyle.js

@@ -1,15 +1,22 @@
 import styled from 'styled-components';
-import { Breakpoints, Spacing } from '..';
+import { Breakpoints, Spacing, Typography } from '..';
 import { Blue, Neutral } from '../utilities/colors';
+export var SwitchTextStyle = styled(Typography).withConfig({
+  displayName: "SwitchStyle__SwitchTextStyle",
+  componentId: "sc-7dlucf-0"
+})([""]);
 export var SwitchStyle = styled.div.withConfig({
   displayName: "SwitchStyle",
-  componentId: "sc-7dlucf-0"
-})(["display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative;width:", ";&[data-with-icon]{width:48px;}&[data-with-icon] svg{height:16px;}height:", ";background-color:", ";&[data-disabled='true']{background-color:", ";cursor:not-allowed;}border-radius:", ";padding:0;padding-left:8px;padding-right:8px;transition:300ms all;@media (max-width:", "){width:38px;&[data-with-icon]{width:44px;}&[data-with-icon] svg{height:14px;}height:22px;}&:before{transition:100ms all;content:'';position:absolute;width:16px;height:16px;border-radius:16px;top:50%;left:4px;background:", ";box-shadow:0px 1px 3px rgba(0,0,0,0.1);transform:translate(0,-50%);@media (max-width:", "){width:14px;height:14px;}}"], Spacing.space40, Spacing.space24, Neutral.B40, Neutral.B95, Spacing.space24, Breakpoints.large, Neutral.B100, Breakpoints.large);
+  componentId: "sc-7dlucf-1"
+})(["display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative;width:", ";&[data-with-icon='true']{width:48px;}&[data-with-text='true']{width:max-content;}&[data-with-icon='true'] svg{height:16px;}height:", ";background-color:", ";&[data-disabled='true']{background-color:", ";cursor:not-allowed;}border-radius:", ";padding:0;padding-left:8px;padding-right:8px;transition:300ms all;@media (max-width:", "){width:38px;&[data-with-icon='true']{width:44px;}&[data-with-icon='true'] svg{height:14px;}height:22px;}&:before{transition:100ms all;content:' ';cursor:pointer;position:absolute;width:16px;height:16px;left:4px;right:0;border-radius:16px;background:", ";box-shadow:0px 1px 3px rgba(0,0,0,0.1);transform:scale(1);@media (max-width:", "){width:14px;height:14px;}}"], Spacing.space40, Spacing.space24, Neutral.B40, Neutral.B95, Spacing.space24, Breakpoints.large, Neutral.B100, Breakpoints.large);
 export var InputStyle = styled.input.withConfig({
   displayName: "SwitchStyle__InputStyle",
-  componentId: "sc-7dlucf-1"
-})(["opacity:0;position:absolute;&:checked + ", "{background-color:", ";&[data-disabled='true']{background-color:", ";}&:before{transform:translate(16px,-50%);}&[data-with-icon]{&:before{transform:translate(24px,-50%);}}}& + ", " svg:nth-child(1){visibility:hidden;}& + ", " svg:nth-child(2){visibility:visible;}&:checked + ", " svg:nth-child(1){visibility:visible;}&:checked + ", " svg:nth-child(2){visibility:hidden;}"], SwitchStyle, Blue.S99, Neutral.B95, SwitchStyle, SwitchStyle, SwitchStyle, SwitchStyle);
+  componentId: "sc-7dlucf-2"
+})(["opacity:0;position:absolute;& + ", "{", "{padding-inline-start:18px;}}&:checked + ", "{", "{padding-inline-start:unset;padding-inline-end:18px;}background-color:", ";&[data-disabled='true']{background-color:", ";}&:before{right:4px;left:unset;}}& + ", " svg:nth-child(1){visibility:hidden;}& + ", " svg:nth-child(2){visibility:visible;}& + ", " ", ":nth-child(1){visibility:hidden;display:none;}& + ", " ", ":nth-child(2){visibility:visible;display:block;}&:checked + ", " svg:nth-child(1){visibility:visible;}&:checked + ", " svg:nth-child(2){visibility:hidden;}&:checked + ", " ", ":nth-child(1){visibility:visible;display:block;}&:checked + ", " ", ":nth-child(2){visibility:hidden;display:none;}"], SwitchStyle, SwitchTextStyle, SwitchStyle, SwitchTextStyle, function (_ref) {
+  var backgroundColor = _ref.backgroundColor;
+  return backgroundColor || Blue.S99;
+}, Neutral.B95, SwitchStyle, SwitchStyle, SwitchStyle, SwitchTextStyle, SwitchStyle, SwitchTextStyle, SwitchStyle, SwitchStyle, SwitchStyle, SwitchTextStyle, SwitchStyle, SwitchTextStyle);
 export var LabelStyle = styled.label.withConfig({
   displayName: "SwitchStyle__LabelStyle",
-  componentId: "sc-7dlucf-2"
+  componentId: "sc-7dlucf-3"
 })(["display:flex;align-items:center;gap:10px;cursor:pointer;"]);

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

@@ -78,7 +78,8 @@ export var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(_ref, ref) {
   var renderTabs = tabs.map(function (tab, index) {
     var tabId = tab.id || nextId();
     return /*#__PURE__*/React.createElement(StyledLi, {
-      key: tabId + "-" + index
+      key: tabId + "-" + index,
+      className: "tab-item"
     }, /*#__PURE__*/React.createElement(Tab, {
       id: tabId,
       key: "tab-" + tabId + "-" + index,
@@ -92,6 +93,7 @@ export var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(_ref, ref) {
   return /*#__PURE__*/React.createElement(StyledTabsContainer, {
     ref: ref
   }, /*#__PURE__*/React.createElement(StyledTabHeaderContainer, {
+    className: "tabs-header-container",
     ref: tabsHeaderRef,
     onScroll: handleScroll,
     onWheel: handleWheel,
@@ -104,5 +106,7 @@ export var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(_ref, ref) {
     "data-grabbing": isDragging
   }, /*#__PURE__*/React.createElement(StyledUl, {
     "data-fitted": fitted
-  }, renderTabs, " ")), /*#__PURE__*/React.createElement("div", null, children));
+  }, renderTabs, " ")), /*#__PURE__*/React.createElement("div", {
+    className: "tab-item-content"
+  }, children));
 });

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

@@ -5,5 +5,8 @@ export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
     onChange: () => void;
     value: string;
     withIcon?: boolean;
+    checkedText?: string;
+    uncheckedText?: string;
+    checkedBackgroundColor?: string;
 }
 export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;

package/lib/@next/Switch/Switch.js

@@ -9,14 +9,21 @@ var _react = _interopRequireDefault(require("react"));
 var _Icon = require("../Icon");
 var _colors = require("../utilities/colors");
 var _SwitchStyle = require("./SwitchStyle");
-var _excluded = ["checked", "disabled", "onChange", "value", "withIcon"];
+var _excluded = ["checked", "disabled", "onChange", "value", "withIcon", "checkedText", "uncheckedText", "checkedBackgroundColor"];
 var Switch = /*#__PURE__*/_react["default"].forwardRef(function Switch(_ref, ref) {
   var checked = _ref.checked,
     disabled = _ref.disabled,
     onChange = _ref.onChange,
     value = _ref.value,
     withIcon = _ref.withIcon,
+    checkedText = _ref.checkedText,
+    uncheckedText = _ref.uncheckedText,
+    checkedBackgroundColor = _ref.checkedBackgroundColor,
     otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var withText = Boolean(checkedText) && Boolean(uncheckedText);
+  if (withText && withIcon) {
+    console.warn('Switch component cannot have both text and icon');
+  }
   var IconRender = function IconRender() {
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
       name: "ri-check",
@@ -26,6 +33,15 @@ var Switch = /*#__PURE__*/_react["default"].forwardRef(function Switch(_ref, ref
       fill: disabled ? _colors.Neutral.B85 : _colors.Neutral.B100
     }));
   };
+  var RenderSwitchText = function RenderSwitchText() {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_SwitchStyle.SwitchTextStyle, {
+      variant: "overline",
+      color: disabled ? _colors.Neutral.B85 : _colors.Neutral.B100
+    }, checkedText), /*#__PURE__*/_react["default"].createElement(_SwitchStyle.SwitchTextStyle, {
+      variant: "overline",
+      color: disabled ? _colors.Neutral.B85 : _colors.Neutral.B100
+    }, uncheckedText));
+  };
   return /*#__PURE__*/_react["default"].createElement(_SwitchStyle.LabelStyle, null, /*#__PURE__*/_react["default"].createElement(_SwitchStyle.InputStyle, (0, _extends2["default"])({
     value: value
   }, otherProps, {
@@ -34,10 +50,13 @@ var Switch = /*#__PURE__*/_react["default"].forwardRef(function Switch(_ref, ref
     type: "checkbox",
     onChange: onChange,
     ref: ref,
-    "data-with-icon": withIcon
+    "data-with-icon": !withText && withIcon,
+    "data-with-text": withText,
+    backgroundColor: checkedBackgroundColor
   })), /*#__PURE__*/_react["default"].createElement(_SwitchStyle.SwitchStyle, {
     "data-disabled": disabled,
-    "data-with-icon": withIcon
-  }, withIcon && /*#__PURE__*/_react["default"].createElement(IconRender, null)));
+    "data-with-icon": !withText && withIcon,
+    "data-with-text": withText
+  }, !withText && withIcon && /*#__PURE__*/_react["default"].createElement(IconRender, null), withText && /*#__PURE__*/_react["default"].createElement(RenderSwitchText, null)));
 });
 exports.Switch = Switch;

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

@@ -3,3 +3,5 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Default: any;
 export declare const WithIcon: any;
+export declare const WithText: any;
+export declare const WithTextAndCustomBackgroundColor: any;

package/lib/@next/Switch/SwitchStyle.d.ts

@@ -1,3 +1,7 @@
+/// <reference types="react" />
+export declare const SwitchTextStyle: import("styled-components").StyledComponent<({ as, children, variant, style, ...props }: import("..").TypographyProps) => JSX.Element, any, {}, never>;
 export declare const SwitchStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InputStyle: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const InputStyle: import("styled-components").StyledComponent<"input", any, {
+    backgroundColor: string;
+}, never>;
 export declare const LabelStyle: import("styled-components").StyledComponent<"label", any, {}, never>;

package/lib/@next/Switch/SwitchStyle.js

@@ -2,22 +2,30 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.SwitchStyle = exports.LabelStyle = exports.InputStyle = void 0;
+exports.SwitchTextStyle = exports.SwitchStyle = exports.LabelStyle = exports.InputStyle = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _ = require("..");
 var _colors = require("../utilities/colors");
+var SwitchTextStyle = (0, _styledComponents["default"])(_.Typography).withConfig({
+  displayName: "SwitchStyle__SwitchTextStyle",
+  componentId: "sc-7dlucf-0"
+})([""]);
+exports.SwitchTextStyle = SwitchTextStyle;
 var SwitchStyle = _styledComponents["default"].div.withConfig({
   displayName: "SwitchStyle",
-  componentId: "sc-7dlucf-0"
-})(["display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative;width:", ";&[data-with-icon]{width:48px;}&[data-with-icon] svg{height:16px;}height:", ";background-color:", ";&[data-disabled='true']{background-color:", ";cursor:not-allowed;}border-radius:", ";padding:0;padding-left:8px;padding-right:8px;transition:300ms all;@media (max-width:", "){width:38px;&[data-with-icon]{width:44px;}&[data-with-icon] svg{height:14px;}height:22px;}&:before{transition:100ms all;content:'';position:absolute;width:16px;height:16px;border-radius:16px;top:50%;left:4px;background:", ";box-shadow:0px 1px 3px rgba(0,0,0,0.1);transform:translate(0,-50%);@media (max-width:", "){width:14px;height:14px;}}"], _.Spacing.space40, _.Spacing.space24, _colors.Neutral.B40, _colors.Neutral.B95, _.Spacing.space24, _.Breakpoints.large, _colors.Neutral.B100, _.Breakpoints.large);
+  componentId: "sc-7dlucf-1"
+})(["display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative;width:", ";&[data-with-icon='true']{width:48px;}&[data-with-text='true']{width:max-content;}&[data-with-icon='true'] svg{height:16px;}height:", ";background-color:", ";&[data-disabled='true']{background-color:", ";cursor:not-allowed;}border-radius:", ";padding:0;padding-left:8px;padding-right:8px;transition:300ms all;@media (max-width:", "){width:38px;&[data-with-icon='true']{width:44px;}&[data-with-icon='true'] svg{height:14px;}height:22px;}&:before{transition:100ms all;content:' ';cursor:pointer;position:absolute;width:16px;height:16px;left:4px;right:0;border-radius:16px;background:", ";box-shadow:0px 1px 3px rgba(0,0,0,0.1);transform:scale(1);@media (max-width:", "){width:14px;height:14px;}}"], _.Spacing.space40, _.Spacing.space24, _colors.Neutral.B40, _colors.Neutral.B95, _.Spacing.space24, _.Breakpoints.large, _colors.Neutral.B100, _.Breakpoints.large);
 exports.SwitchStyle = SwitchStyle;
 var InputStyle = _styledComponents["default"].input.withConfig({
   displayName: "SwitchStyle__InputStyle",
-  componentId: "sc-7dlucf-1"
-})(["opacity:0;position:absolute;&:checked + ", "{background-color:", ";&[data-disabled='true']{background-color:", ";}&:before{transform:translate(16px,-50%);}&[data-with-icon]{&:before{transform:translate(24px,-50%);}}}& + ", " svg:nth-child(1){visibility:hidden;}& + ", " svg:nth-child(2){visibility:visible;}&:checked + ", " svg:nth-child(1){visibility:visible;}&:checked + ", " svg:nth-child(2){visibility:hidden;}"], SwitchStyle, _colors.Blue.S99, _colors.Neutral.B95, SwitchStyle, SwitchStyle, SwitchStyle, SwitchStyle);
+  componentId: "sc-7dlucf-2"
+})(["opacity:0;position:absolute;& + ", "{", "{padding-inline-start:18px;}}&:checked + ", "{", "{padding-inline-start:unset;padding-inline-end:18px;}background-color:", ";&[data-disabled='true']{background-color:", ";}&:before{right:4px;left:unset;}}& + ", " svg:nth-child(1){visibility:hidden;}& + ", " svg:nth-child(2){visibility:visible;}& + ", " ", ":nth-child(1){visibility:hidden;display:none;}& + ", " ", ":nth-child(2){visibility:visible;display:block;}&:checked + ", " svg:nth-child(1){visibility:visible;}&:checked + ", " svg:nth-child(2){visibility:hidden;}&:checked + ", " ", ":nth-child(1){visibility:visible;display:block;}&:checked + ", " ", ":nth-child(2){visibility:hidden;display:none;}"], SwitchStyle, SwitchTextStyle, SwitchStyle, SwitchTextStyle, function (_ref) {
+  var backgroundColor = _ref.backgroundColor;
+  return backgroundColor || _colors.Blue.S99;
+}, _colors.Neutral.B95, SwitchStyle, SwitchStyle, SwitchStyle, SwitchTextStyle, SwitchStyle, SwitchTextStyle, SwitchStyle, SwitchStyle, SwitchStyle, SwitchTextStyle, SwitchStyle, SwitchTextStyle);
 exports.InputStyle = InputStyle;
 var LabelStyle = _styledComponents["default"].label.withConfig({
   displayName: "SwitchStyle__LabelStyle",
-  componentId: "sc-7dlucf-2"
+  componentId: "sc-7dlucf-3"
 })(["display:flex;align-items:center;gap:10px;cursor:pointer;"]);
 exports.LabelStyle = LabelStyle;

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

@@ -85,7 +85,8 @@ var Tabs = /*#__PURE__*/_react["default"].forwardRef(function Tabs(_ref, ref) {
   var renderTabs = tabs.map(function (tab, index) {
     var tabId = tab.id || (0, _reactIdGenerator["default"])();
     return /*#__PURE__*/_react["default"].createElement(_TabStyle.StyledLi, {
-      key: tabId + "-" + index
+      key: tabId + "-" + index,
+      className: "tab-item"
     }, /*#__PURE__*/_react["default"].createElement(_Tab.Tab, {
       id: tabId,
       key: "tab-" + tabId + "-" + index,
@@ -99,6 +100,7 @@ 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, {
+    className: "tabs-header-container",
     ref: tabsHeaderRef,
     onScroll: handleScroll,
     onWheel: handleWheel,
@@ -111,6 +113,8 @@ var Tabs = /*#__PURE__*/_react["default"].forwardRef(function Tabs(_ref, ref) {
     "data-grabbing": isDragging
   }, /*#__PURE__*/_react["default"].createElement(_TabStyle.StyledUl, {
     "data-fitted": fitted
-  }, renderTabs, " ")), /*#__PURE__*/_react["default"].createElement("div", null, children));
+  }, renderTabs, " ")), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "tab-item-content"
+  }, children));
 });
 exports.Tabs = Tabs;

package/package.json

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