@snack-uikit/segmented-control 0.2.4 → 0.2.5-preview-71543426.0

package/dist/cjs/components/SegmentedControl.js

@@ -0,0 +1,117 @@
+"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(require('./styles.module.css'));
+/**
+ * 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);
+    const ob = new MutationObserver(() => updateSelectionPosition());
+    ob.observe(containerRef.current, {
+      childList: true
+    });
+    return () => {
+      observer.disconnect();
+      ob.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(require('./styles.module.css'));
+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/esm/components/index.js

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

package/dist/esm/components/styles.module.css

@@ -0,0 +1,82 @@
+.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/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/Segment/styles.module.css

@@ -0,0 +1,126 @@
+.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);
+}

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",
+  "version": "0.2.5-preview-71543426.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-71543426.0",
+    "@snack-uikit/utils": "3.4.1-preview-71543426.0",
     "classnames": "2.5.1",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "afecc9211933c29bda1ea798dadecc2eccdb0e52"
+  "gitHead": "3102614275e261c8f41db0f6c00a1f6b6276b2a9"
 }