@snack-uikit/segmented-control 0.2.4-preview-d46fe148.0 → 0.2.4-preview-1f246c4a.0

package/dist/cjs/components/SegmentedControl.js

@@ -0,0 +1,110 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SegmentedControl = SegmentedControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const uncontrollable_1 = require("uncontrollable");
+const utils_1 = require("@snack-uikit/utils");
+const constants_1 = require("../constants");
+const helperComponents_1 = require("../helperComponents");
+const hooks_1 = require("../hooks");
+const styles_module_scss_1 = __importDefault({});
+/**
+ * SegmentedControl
+ */
+function SegmentedControl(_a) {
+  var {
+      defaultValue,
+      size = 'm',
+      className,
+      onChange,
+      items,
+      value,
+      outline,
+      width = constants_1.WIDTH.Auto
+    } = _a,
+    other = __rest(_a, ["defaultValue", "size", "className", "onChange", "items", "value", "outline", "width"]);
+  const [selected, setSelected] = (0, uncontrollable_1.useUncontrolledProp)(value, defaultValue, onChange);
+  const {
+    focusableSegmentValue,
+    onGetFocusable,
+    onKeyDown
+  } = (0, hooks_1.useFocusControl)({
+    selected,
+    items
+  });
+  const containerRef = (0, react_1.useRef)(null);
+  const selectedElementRef = (0, react_1.useRef)();
+  const [selectionPosition, setSelectionPosition] = (0, react_1.useState)();
+  const updateSelectionPosition = (0, react_1.useCallback)(function () {
+    let element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : selectedElementRef.current;
+    if (!element) {
+      return;
+    }
+    selectedElementRef.current = element;
+    setTimeout(() => {
+      setSelectionPosition({
+        top: element.offsetTop,
+        left: element.offsetLeft,
+        width: element.offsetWidth,
+        height: element.offsetHeight
+      });
+    });
+  }, []);
+  (0, react_1.useEffect)(() => {
+    if (!containerRef.current) {
+      return;
+    }
+    const observer = new ResizeObserver(() => updateSelectionPosition());
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, [updateSelectionPosition]);
+  const itemsJSX = (0, react_1.useMemo)(() => items.map(props => (0, jsx_runtime_1.jsx)("div", {
+    className: styles_module_scss_1.default.segmentHolder,
+    "data-width": width,
+    children: (0, jsx_runtime_1.jsx)(helperComponents_1.Segment, Object.assign({}, props, {
+      size: size,
+      onGetFocusable: onGetFocusable,
+      selected: selected === props.value,
+      onClick: () => setSelected(props.value),
+      focusable: focusableSegmentValue === props.value,
+      onSelectionUpdated: updateSelectionPosition
+    }))
+  }, props.value)), [items, width, size, onGetFocusable, selected, focusableSegmentValue, updateSelectionPosition, setSelected]);
+  return (
+    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+    (0, jsx_runtime_1.jsxs)("div", Object.assign({
+      ref: containerRef,
+      "data-size": size,
+      onKeyDown: onKeyDown,
+      className: (0, classnames_1.default)(styles_module_scss_1.default.container, className),
+      role: 'radiogroup',
+      "data-outline": outline || undefined,
+      "data-width": width
+    }, (0, utils_1.extractDataTestProps)(other), (0, utils_1.extractSupportProps)(other), {
+      children: [(0, jsx_runtime_1.jsx)("div", {
+        "data-size": size,
+        style: selectionPosition,
+        className: styles_module_scss_1.default.selection,
+        "aria-hidden": true
+      }), itemsJSX]
+    }))
+  );
+}

package/dist/cjs/components/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./SegmentedControl"), exports);

package/dist/cjs/constants.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WIDTH = exports.SIZE = void 0;
+exports.SIZE = {
+  S: 's',
+  M: 'm',
+  L: 'l'
+};
+exports.WIDTH = {
+  Auto: 'auto',
+  Full: 'full'
+};

package/dist/cjs/helperComponents/Segment/Segment.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Segment = Segment;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
+const utils_1 = require("../../utils");
+const styles_module_scss_1 = __importDefault({});
+function Segment(_ref) {
+  let {
+    size,
+    label,
+    value,
+    selected,
+    onClick,
+    disabled,
+    icon,
+    focusable,
+    onGetFocusable,
+    onSelectionUpdated,
+    renderWrapSegment
+  } = _ref;
+  const buttonRef = (0, react_1.useRef)(null);
+  (0, react_1.useEffect)(() => {
+    if (focusable) {
+      onGetFocusable === null || onGetFocusable === void 0 ? void 0 : onGetFocusable(buttonRef.current);
+    }
+  }, [focusable, onGetFocusable]);
+  (0, react_1.useEffect)(() => {
+    if (selected && buttonRef.current) {
+      onSelectionUpdated(buttonRef.current);
+    }
+  }, [selected, buttonRef, onSelectionUpdated]);
+  const segment = (0, jsx_runtime_1.jsxs)("button", {
+    ref: buttonRef,
+    "data-test-id": `section-${value}`,
+    "data-active": selected || undefined,
+    "data-disabled": disabled || undefined,
+    "data-layout": (0, utils_1.getLayout)(icon, label),
+    className: (0, classnames_1.default)(styles_module_scss_1.default.segment),
+    onClick: onClick,
+    "data-size": size,
+    disabled: disabled,
+    tabIndex: focusable ? 0 : -1,
+    "aria-checked": selected,
+    role: 'radio',
+    type: 'button',
+    children: [icon && (0, jsx_runtime_1.jsx)("div", {
+      className: styles_module_scss_1.default.icon,
+      children: icon
+    }), label && (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+      className: styles_module_scss_1.default.label,
+      "data-size": size,
+      text: label
+    })]
+  });
+  return renderWrapSegment ? renderWrapSegment(segment) : segment;
+}

package/dist/cjs/helperComponents/Segment/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Segment"), exports);

package/dist/cjs/helperComponents/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Segment"), exports);

package/dist/cjs/hooks.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFocusControl = useFocusControl;
+const react_1 = require("react");
+function useFocusControl(_ref) {
+  let {
+    selected,
+    items
+  } = _ref;
+  const [focusableSegmentValue, setFocusableSegmentValue] = (0, react_1.useState)(selected);
+  const [_, setNeedSetFocus] = (0, react_1.useState)(false);
+  const {
+    prev,
+    next
+  } = (0, react_1.useMemo)(() => items.reduce((res, item) => {
+    if (res._isNextSearching && !res.next) {
+      res.next = item.disabled ? res.next : item.value;
+    }
+    if (focusableSegmentValue === item.value) {
+      res._isNextSearching = true;
+    }
+    if (!res._isNextSearching) {
+      res.prev = item.disabled ? res.prev : item.value;
+    }
+    return res;
+  }, {
+    _isNextSearching: false
+  }), [focusableSegmentValue, items]);
+  const onKeyDown = (0, react_1.useCallback)(e => {
+    switch (e.key) {
+      case 'ArrowLeft':
+        {
+          if (prev) {
+            setNeedSetFocus(true);
+            setFocusableSegmentValue(prev);
+          }
+          return;
+        }
+      case 'ArrowRight':
+        {
+          if (next) {
+            setNeedSetFocus(true);
+            setFocusableSegmentValue(next);
+          }
+          return;
+        }
+      default:
+        {
+          return;
+        }
+    }
+  }, [next, prev]);
+  const onGetFocusable = (0, react_1.useCallback)(ref => {
+    setNeedSetFocus(needSetFocus => {
+      if (needSetFocus) {
+        ref === null || ref === void 0 ? void 0 : ref.focus();
+      }
+      return false;
+    });
+  }, []);
+  return {
+    onKeyDown,
+    focusableSegmentValue,
+    onGetFocusable
+  };
+}

package/dist/cjs/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./components"), exports);

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/utils.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLayout = void 0;
+const getLayout = (icon, label) => {
+  if (icon && label) {
+    return 'icon-before';
+  }
+  if (label) {
+    return 'label-only';
+  }
+  return 'icon-only';
+};
+exports.getLayout = getLayout;

package/dist/esm/components/SegmentedControl.d.ts

@@ -0,0 +1,40 @@
+import { WithSupportProps } from '@snack-uikit/utils';
+import { IdType, Segment as SegmentType, Size, Width } from '../types';
+export type SegmentedControlProps<Value extends IdType = IdType> = WithSupportProps<{
+    /**
+     * Набор сегментов.
+     */
+    items: SegmentType<Value>[];
+    /**
+     * Value выбранного сегмента.
+     */
+    value?: Value;
+    /**
+     * ID выбранного по умолчанию сегмента. (в uncontrolled режиме)
+     */
+    defaultValue?: Value;
+    /**
+     * Колбек смены выбранного сегмента.
+     */
+    onChange?: (value: Value) => void;
+    /**
+     * CSS-класс контейнера.
+     */
+    className?: string;
+    /**
+     * Размер компонента.
+     */
+    size?: Size;
+    /**
+     * Обводка
+     */
+    outline?: boolean;
+    /**
+     * Управление шириной компонента.
+     */
+    width?: Width;
+}>;
+/**
+ * SegmentedControl
+ */
+export declare function SegmentedControl<Value extends IdType>({ defaultValue, size, className, onChange, items, value, outline, width, ...other }: SegmentedControlProps<Value>): import("react/jsx-runtime").JSX.Element;

package/dist/{components → esm/components}/SegmentedControl.js

@@ -48,14 +48,7 @@ export function SegmentedControl(_a) {
         }
         const observer = new ResizeObserver(() => updateSelectionPosition());
         observer.observe(containerRef.current);
-        const ob = new MutationObserver(() => updateSelectionPosition());
-        ob.observe(containerRef.current, {
-            childList: true,
-        });
-        return () => {
-            observer.disconnect();
-            ob.disconnect();
-        };
+        return () => observer.disconnect();
     }, [updateSelectionPosition]);
     const itemsJSX = useMemo(() => items.map(props => (_jsx("div", { className: styles.segmentHolder, "data-width": width, children: _jsx(Segment, Object.assign({}, props, { size: size, onGetFocusable: onGetFocusable, selected: selected === props.value, onClick: () => setSelected(props.value), focusable: focusableSegmentValue === props.value, onSelectionUpdated: updateSelectionPosition })) }, props.value))), [items, width, size, onGetFocusable, selected, focusableSegmentValue, updateSelectionPosition, setSelected]);
     return (

package/dist/esm/components/index.js

@@ -0,0 +1 @@
+export * from './SegmentedControl';

package/dist/esm/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const SIZE: {
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};
+export declare const WIDTH: {
+    readonly Auto: "auto";
+    readonly Full: "full";
+};

package/dist/esm/helperComponents/Segment/Segment.d.ts

@@ -0,0 +1,11 @@
+import { Segment as SegmentType, Size } from '../../types';
+type SegmentProps = SegmentType & {
+    size: Size;
+    selected: boolean;
+    onClick: () => void;
+    focusable?: boolean;
+    onGetFocusable?: (ref: HTMLButtonElement | null) => void;
+    onSelectionUpdated: (element: HTMLButtonElement) => void;
+};
+export declare function Segment({ size, label, value, selected, onClick, disabled, icon, focusable, onGetFocusable, onSelectionUpdated, renderWrapSegment, }: SegmentProps): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export {};

package/dist/esm/helperComponents/index.d.ts

@@ -0,0 +1 @@
+export * from './Segment';

package/dist/esm/helperComponents/index.js

@@ -0,0 +1 @@
+export * from './Segment';

package/dist/esm/hooks.d.ts

@@ -0,0 +1,12 @@
+import { KeyboardEventHandler } from 'react';
+import { IdType, Segment } from './types';
+type useFocusControlParams = {
+    items: Segment[];
+    selected?: IdType;
+};
+export declare function useFocusControl({ selected, items }: useFocusControlParams): {
+    onKeyDown: KeyboardEventHandler<HTMLDivElement>;
+    focusableSegmentValue: string | number | undefined;
+    onGetFocusable: (ref: HTMLButtonElement | null) => void;
+};
+export {};

package/dist/esm/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/esm/types.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { ValueOf } from '@snack-uikit/utils';
+import { SIZE, WIDTH } from './constants';
+export type IdType = string | number;
+export type Size = ValueOf<typeof SIZE>;
+export type Width = ValueOf<typeof WIDTH>;
+export type Segment<Value extends IdType = IdType> = {
+    /**
+     * Идентификатор сегмента.
+     */
+    value: Value;
+    /**
+     * Текстовый заголовок сегмента.
+     */
+    label?: string;
+    /**
+     * Состояние активности сегмента.
+     */
+    disabled?: boolean;
+    /**
+     * Иконка сегмента.
+     */
+    icon?: ReactNode;
+    /**
+     * Render-обертка над сегментом.
+     */
+    renderWrapSegment?: (segment: ReactNode) => ReactNode;
+};
+export type SelectionPosition = {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};

package/dist/esm/utils.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from 'react';
+export declare const getLayout: (icon?: ReactNode, label?: string) => "icon-before" | "label-only" | "icon-only";

package/package.json

@@ -4,15 +4,16 @@
     "access": "public"
   },
   "title": "Segmented Control",
-  "version": "0.2.4-preview-d46fe148.0",
+  "version": "0.2.4-preview-1f246c4a.0",
   "sideEffects": [
     "*.css",
     "*.woff",
     "*.woff2"
   ],
   "description": "",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
   "homepage": "https://cloud-ru-tech.github.io/snack-uikit/packages/segmented-control",
   "repository": {
     "type": "git",
@@ -24,7 +25,8 @@
     "Sergei Khlupin <svhlupin@cloud.ru>"
   ],
   "files": [
-    "dist",
+    "dist/cjs",
+    "dist/esm",
     "src",
     "./CHANGELOG.md",
     "./LICENSE"
@@ -32,10 +34,10 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/truncate-string": "0.4.24",
-    "@snack-uikit/utils": "3.4.0",
+    "@snack-uikit/truncate-string": "0.4.25-preview-1f246c4a.0",
+    "@snack-uikit/utils": "3.4.1-preview-1f246c4a.0",
     "classnames": "2.5.1",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "39027f47c1a2c50919d064ec52bc41730821fc55"
+  "gitHead": "a185a55c0722b19f70dd168cf299e6f53a0fd93f"
 }

package/src/components/SegmentedControl.tsx

@@ -86,16 +86,7 @@ export function SegmentedControl<Value extends IdType>({
 
     const observer = new ResizeObserver(() => updateSelectionPosition());
     observer.observe(containerRef.current);
-
-    const ob = new MutationObserver(() => updateSelectionPosition());
-    ob.observe(containerRef.current, {
-      childList: true,
-    });
-
-    return () => {
-      observer.disconnect();
-      ob.disconnect();
-    };
+    return () => observer.disconnect();
   }, [updateSelectionPosition]);
 
   const itemsJSX = useMemo(

package/dist/components/styles.module.css

@@ -1,82 +0,0 @@
-.container{
-  padding-top:var(--space-segmented-control-container-padding, 2px);
-  padding-bottom:var(--space-segmented-control-container-padding, 2px);
-  padding-left:var(--space-segmented-control-container-padding, 2px);
-  padding-right:var(--space-segmented-control-container-padding, 2px);
-  position:relative;
-  overflow:hidden;
-  display:inline-flex;
-  flex-direction:row;
-  justify-content:stretch;
-  max-width:100%;
-}
-.container::before{
-  content:" ";
-  position:absolute;
-  top:0;
-  left:0;
-  box-sizing:border-box;
-  width:100%;
-  height:100%;
-  background-color:var(--sys-neutral-background, #eeeff3);
-  border-color:var(--sys-neutral-background, #eeeff3);
-  border-style:solid;
-}
-.container[data-outline]::before{
-  border-color:var(--sys-neutral-decor-default, #dde0ea);
-}
-.container[data-width=full]{
-  display:flex;
-}
-.container[data-size=s]::before{
-  border-width:var(--border-width-segmented-control-single, 1px);
-  border-radius:var(--radius-segmented-control-container-s, 12px);
-}
-.container[data-size=m]::before{
-  border-width:var(--border-width-segmented-control-single, 1px);
-  border-radius:var(--radius-segmented-control-container-m, 14px);
-}
-.container[data-size=l]::before{
-  border-width:var(--border-width-segmented-control-single, 1px);
-  border-radius:var(--radius-segmented-control-container-l, 16px);
-}
-
-.segmentHolder{
-  overflow:hidden;
-  flex-grow:1;
-  flex-shrink:1;
-  justify-content:center;
-  min-width:0px;
-}
-.segmentHolder[data-outline]{
-  flex-basis:0;
-}
-
-.selection{
-  position:absolute;
-  overflow:hidden;
-  box-sizing:border-box;
-  background-color:var(--sys-neutral-background2-level, #ffffff);
-  transition:left 0.15s ease-in-out, width 0.15s ease-in-out;
-}
-.selection[data-size=s]{
-  border-radius:var(--radius-segmented-control-segment-s, 10px);
-  padding-left:var(--space-segmented-control-segment-s-icon-only, 2px);
-  padding-right:var(--space-segmented-control-segment-s-icon-only, 2px);
-  gap:var(--space-segmented-control-segment-s-gap, 4px);
-  height:var(--size-segmented-control-segment-s, 28px);
-}
-.selection[data-size=m]{
-  border-radius:var(--radius-segmented-control-segment-m, 12px);
-  padding-left:var(--space-segmented-control-segment-m-icon-only, 6px);
-  padding-right:var(--space-segmented-control-segment-m-icon-only, 6px);
-  gap:var(--space-segmented-control-segment-m-gap, 4px);
-  height:var(--size-segmented-control-segment-m, 36px);
-}
-.selection[data-size=l]{
-  border-radius:var(--radius-segmented-control-segment-l, 14px);
-  padding-left:var(--space-segmented-control-segment-l-icon-only, 10px);
-  padding-right:var(--space-segmented-control-segment-l-icon-only, 10px);
-  gap:var(--space-segmented-control-segment-l-gap, 4px);
-  height:var(--size-segmented-control-segment-l, 44px);
-}

package/dist/helperComponents/Segment/styles.module.css

@@ -1,126 +0,0 @@
-.segment{
-  cursor:pointer;
-  position:relative;
-  z-index:0;
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  width:100%;
-  color:var(--sys-neutral-text-support, #6d707f);
-  background-color:transparent;
-  border-width:0;
-}
-.segment:hover{
-  color:var(--sys-neutral-text-main, #41424e);
-}
-.segment[data-disabled], .segment[data-disabled]:hover{
-  cursor:not-allowed;
-  color:var(--sys-neutral-text-disabled, #aaaebd);
-}
-.segment[data-active]{
-  color:var(--sys-neutral-text-main, #41424e);
-}
-.segment[data-active][data-disabled], .segment[data-active][data-disabled]:hover{
-  color:var(--sys-neutral-text-disabled, #aaaebd);
-}
-.segment:focus-visible{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-  outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
-  outline-color:var(--sys-available-complementary, #1c1c24);
-}
-.segment[data-size=s][data-layout=label-only]{
-  border-radius:var(--radius-segmented-control-segment-s, 10px);
-  padding-left:var(--space-segmented-control-segment-s-from-label, 16px);
-  padding-right:var(--space-segmented-control-segment-s-from-label, 16px);
-  gap:var(--space-segmented-control-segment-s-gap, 4px);
-  height:var(--size-segmented-control-segment-s, 28px);
-}
-.segment[data-size=s][data-layout=icon-before]{
-  border-radius:var(--radius-segmented-control-segment-s, 10px);
-  padding-left:var(--space-segmented-control-segment-s-from-icon, 8px);
-  padding-right:var(--space-segmented-control-segment-s-from-label, 16px);
-  gap:var(--space-segmented-control-segment-s-gap, 4px);
-  height:var(--size-segmented-control-segment-s, 28px);
-}
-.segment[data-size=s][data-layout=icon-only]{
-  border-radius:var(--radius-segmented-control-segment-s, 10px);
-  padding-left:var(--space-segmented-control-segment-s-icon-only, 2px);
-  padding-right:var(--space-segmented-control-segment-s-icon-only, 2px);
-  gap:var(--space-segmented-control-segment-s-gap, 4px);
-  height:var(--size-segmented-control-segment-s, 28px);
-}
-.segment[data-size=m][data-layout=label-only]{
-  border-radius:var(--radius-segmented-control-segment-m, 12px);
-  padding-left:var(--space-segmented-control-segment-m-from-label, 24px);
-  padding-right:var(--space-segmented-control-segment-m-from-label, 24px);
-  gap:var(--space-segmented-control-segment-m-gap, 4px);
-  height:var(--size-segmented-control-segment-m, 36px);
-}
-.segment[data-size=m][data-layout=icon-before]{
-  border-radius:var(--radius-segmented-control-segment-m, 12px);
-  padding-left:var(--space-segmented-control-segment-m-from-icon, 16px);
-  padding-right:var(--space-segmented-control-segment-m-from-label, 24px);
-  gap:var(--space-segmented-control-segment-m-gap, 4px);
-  height:var(--size-segmented-control-segment-m, 36px);
-}
-.segment[data-size=m][data-layout=icon-only]{
-  border-radius:var(--radius-segmented-control-segment-m, 12px);
-  padding-left:var(--space-segmented-control-segment-m-icon-only, 6px);
-  padding-right:var(--space-segmented-control-segment-m-icon-only, 6px);
-  gap:var(--space-segmented-control-segment-m-gap, 4px);
-  height:var(--size-segmented-control-segment-m, 36px);
-}
-.segment[data-size=l][data-layout=label-only]{
-  border-radius:var(--radius-segmented-control-segment-l, 14px);
-  padding-left:var(--space-segmented-control-segment-l-from-label, 32px);
-  padding-right:var(--space-segmented-control-segment-l-from-label, 32px);
-  gap:var(--space-segmented-control-segment-l-gap, 4px);
-  height:var(--size-segmented-control-segment-l, 44px);
-}
-.segment[data-size=l][data-layout=icon-before]{
-  border-radius:var(--radius-segmented-control-segment-l, 14px);
-  padding-left:var(--space-segmented-control-segment-l-from-icon, 24px);
-  padding-right:var(--space-segmented-control-segment-l-from-label, 32px);
-  gap:var(--space-segmented-control-segment-l-gap, 4px);
-  height:var(--size-segmented-control-segment-l, 44px);
-}
-.segment[data-size=l][data-layout=icon-only]{
-  border-radius:var(--radius-segmented-control-segment-l, 14px);
-  padding-left:var(--space-segmented-control-segment-l-icon-only, 10px);
-  padding-right:var(--space-segmented-control-segment-l-icon-only, 10px);
-  gap:var(--space-segmented-control-segment-l-gap, 4px);
-  height:var(--size-segmented-control-segment-l, 44px);
-}
-
-.icon{
-  display:flex;
-  flex-shrink:0;
-  align-items:center;
-}
-
-.label[data-size=s]{
-  font-family:var(--sans-label-m-font-family, SB Sans Interface);
-  font-weight:var(--sans-label-m-font-weight, Semibold);
-  line-height:var(--sans-label-m-line-height, 16px);
-  font-size:var(--sans-label-m-font-size, 12px);
-  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
-  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
-}
-.label[data-size=m]{
-  font-family:var(--sans-label-m-font-family, SB Sans Interface);
-  font-weight:var(--sans-label-m-font-weight, Semibold);
-  line-height:var(--sans-label-m-line-height, 16px);
-  font-size:var(--sans-label-m-font-size, 12px);
-  letter-spacing:var(--sans-label-m-letter-spacing, 0px);
-  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
-}
-.label[data-size=l]{
-  font-family:var(--sans-label-l-font-family, SB Sans Interface);
-  font-weight:var(--sans-label-l-font-weight, Semibold);
-  line-height:var(--sans-label-l-line-height, 20px);
-  font-size:var(--sans-label-l-font-size, 14px);
-  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
-  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
-}