@snack-uikit/button-combo 0.0.1-preview-a2f98ef7.0

package/dist/cjs/types.d.ts

@@ -0,0 +1,16 @@
+import { BaseButtonProps } from '@snack-uikit/button-private';
+import { BaseItemProps } from '@snack-uikit/list';
+export type Item = BaseItemProps & {
+    /** Название */
+    label?: string;
+};
+export type BaseButtonComboProps = Pick<BaseButtonProps, 'className' | 'disabled' | 'loading' | 'size' | 'type' | 'tabIndex' | 'fullWidth'> & {
+    /** CSS-класс Dropdown */
+    dropdownClassName?: string;
+    /** Начальное состояние */
+    defaultValue?: string;
+    /** Начальное состояние лейбла */
+    defaultLabel?: string;
+    /** Основные элементы списка */
+    items: Item[];
+};

package/dist/cjs/types.js

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

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

@@ -0,0 +1,11 @@
+import { WithSupportProps } from '@snack-uikit/utils';
+import { BaseButtonComboProps, Item } from '../types';
+export type ButtonComboProps = WithSupportProps<BaseButtonComboProps>;
+export declare const ButtonCombo: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string;
+} & import("react").AriaAttributes & Pick<import("@snack-uikit/button-private").BaseButtonProps, "className" | "tabIndex" | "loading" | "size" | "disabled" | "type" | "fullWidth"> & {
+    dropdownClassName?: string;
+    defaultValue?: string;
+    defaultLabel?: string;
+    items: Item[];
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/components/ButtonCombo.js

@@ -0,0 +1,44 @@
+var __rest = (this && this.__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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { forwardRef, useCallback, useMemo, useState } from 'react';
+import { ButtonPrivate, extractCommonButtonProps, HTML_TYPE, SIZE } from '@snack-uikit/button-private';
+import { ChevronDownSVG, ChevronUpSVG } from '@snack-uikit/icons';
+import { Droplist } from '@snack-uikit/list';
+import { extractSupportProps, useLayoutEffect } from '@snack-uikit/utils';
+import { DROPLIST_SIZE_MAP } from '../constants';
+import styles from './styles.module.css';
+import { extractButtonActionsProps, extractDroplistItemProps } from './utils';
+export const ButtonCombo = forwardRef((_a, ref) => {
+    var _b;
+    var { size = SIZE.S, type = HTML_TYPE.Button, defaultLabel = '', className, dropdownClassName, defaultValue, items, tabIndex, fullWidth } = _a, rest = __rest(_a, ["size", "type", "defaultLabel", "className", "dropdownClassName", "defaultValue", "items", "tabIndex", "fullWidth"]);
+    const [open, setOpen] = useState(false);
+    const [activeOption, setActiveOption] = useState({});
+    const droplistItems = useMemo(() => items.map(extractDroplistItemProps).map(item => (Object.assign(Object.assign({}, item), { id: item === null || item === void 0 ? void 0 : item.id, content: item === null || item === void 0 ? void 0 : item.label }))), [items]);
+    const handleSelectionChange = useCallback((value) => {
+        if (value) {
+            const option = items.find(item => (item === null || item === void 0 ? void 0 : item.id) === value);
+            option && setActiveOption(option);
+        }
+    }, [items]);
+    useLayoutEffect(() => {
+        if (defaultValue) {
+            handleSelectionChange(defaultValue);
+        }
+    }, [defaultValue, handleSelectionChange]);
+    return (_jsxs("div", Object.assign({}, extractSupportProps(rest), { ref: ref, className: cn(styles.buttonComboWrapper, className), tabIndex: tabIndex, "data-full-width": fullWidth || undefined, children: [_jsx(ButtonPrivate, Object.assign({}, extractCommonButtonProps(rest), extractButtonActionsProps(activeOption), { "data-type": 'option', size: size, label: (_b = activeOption === null || activeOption === void 0 ? void 0 : activeOption.label) !== null && _b !== void 0 ? _b : defaultLabel, type: type, fullWidth: fullWidth, iconClassName: styles.icon, labelClassName: styles.label, "data-test-id": 'button-combo__option' })), _jsx(Droplist, { items: droplistItems, open: open, onOpenChange: setOpen, selection: {
+                    defaultValue,
+                    mode: 'single',
+                    onChange: handleSelectionChange,
+                }, className: dropdownClassName, size: DROPLIST_SIZE_MAP[size], placement: 'bottom-end', closeDroplistOnItemClick: true, "data-test-id": 'button-combo__dropdown', children: _jsx(ButtonPrivate, Object.assign({}, extractCommonButtonProps(rest), { "data-type": 'dropdown', size: size, iconClassName: styles.icon, labelClassName: styles.label, icon: open ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}), "data-test-id": 'button-combo__dropdown-button' })) })] })));
+});

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

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

package/dist/esm/components/index.js

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

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

@@ -0,0 +1,221 @@
+.buttonComboWrapper{
+  display:inline-flex;
+  align-items:center;
+}
+.buttonComboWrapper[data-full-width]{
+  flex-grow:1;
+  flex-shrink:1;
+  width:100%;
+}
+.buttonComboWrapper button[data-type=option]{
+  border-right:var(--border-width-button-combo-divider, 1px) solid var(--sys-neutral-decor-default, #dde0ea);
+}
+.buttonComboWrapper button[data-type=option][data-size=xs]{
+  height:var(--size-button-xs, 24px);
+  border-top-left-radius:var(--radius-button-xs, 8px);
+  border-bottom-left-radius:var(--radius-button-xs, 8px);
+  padding-right:var(--space-button-xs-from-label, 8px);
+  padding-left:var(--space-button-xs-from-label, 8px);
+  border-right-width:var(--border-width-button-combo-divider, 1px);
+}
+.buttonComboWrapper button[data-type=option][data-size=s]{
+  height:var(--size-button-s, 32px);
+  border-top-left-radius:var(--radius-button-s, 12px);
+  border-bottom-left-radius:var(--radius-button-s, 12px);
+  padding-right:var(--space-button-s-from-label, 16px);
+  padding-left:var(--space-button-s-from-label, 16px);
+  border-right-width:var(--border-width-button-combo-divider, 1px);
+}
+.buttonComboWrapper button[data-type=option][data-size=m]{
+  height:var(--size-button-m, 40px);
+  border-top-left-radius:var(--radius-button-m, 14px);
+  border-bottom-left-radius:var(--radius-button-m, 14px);
+  padding-right:var(--space-button-m-from-label, 24px);
+  padding-left:var(--space-button-m-from-label, 24px);
+  border-right-width:var(--border-width-button-combo-divider, 1px);
+}
+.buttonComboWrapper button[data-type=option][data-size=l]{
+  height:var(--size-button-l, 48px);
+  border-top-left-radius:var(--radius-button-l, 16px);
+  border-bottom-left-radius:var(--radius-button-l, 16px);
+  padding-right:var(--space-button-l-from-label, 32px);
+  padding-left:var(--space-button-l-from-label, 32px);
+  border-right-width:var(--border-width-button-combo-divider, 1px);
+}
+.buttonComboWrapper button[data-type=dropdown][data-size=xs]{
+  border-top-right-radius:var(--radius-button-xs, 8px);
+  border-bottom-right-radius:var(--radius-button-xs, 8px);
+  width:var(--size-button-xs, 24px);
+  height:var(--size-button-xs, 24px);
+}
+.buttonComboWrapper button[data-type=dropdown][data-size=s]{
+  border-top-right-radius:var(--radius-button-s, 12px);
+  border-bottom-right-radius:var(--radius-button-s, 12px);
+  width:var(--size-button-s, 32px);
+  height:var(--size-button-s, 32px);
+}
+.buttonComboWrapper button[data-type=dropdown][data-size=m]{
+  border-top-right-radius:var(--radius-button-m, 14px);
+  border-bottom-right-radius:var(--radius-button-m, 14px);
+  width:var(--size-button-m, 40px);
+  height:var(--size-button-m, 40px);
+}
+.buttonComboWrapper button[data-type=dropdown][data-size=l]{
+  border-top-right-radius:var(--radius-button-l, 16px);
+  border-bottom-right-radius:var(--radius-button-l, 16px);
+  width:var(--size-button-l, 48px);
+  height:var(--size-button-l, 48px);
+}
+.buttonComboWrapper button[data-size=xs] .label{
+  font-family:var(--sans-label-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-s-font-weight, Semibold);
+  line-height:var(--sans-label-s-line-height, 14px);
+  font-size:var(--sans-label-s-font-size, 11px);
+  letter-spacing:var(--sans-label-s-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
+}
+.buttonComboWrapper button[data-size=xs] .icon{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  width:var(--size-icon-container-s, 24px);
+  height:var(--size-icon-container-s, 24px);
+}
+.buttonComboWrapper button[data-size=xs] .icon svg{
+  max-width:var(--size-icon-container-s, 24px);
+  max-height:var(--size-icon-container-s, 24px);
+}
+.buttonComboWrapper button[data-size=s] .label{
+  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);
+}
+.buttonComboWrapper button[data-size=s] .icon{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  width:var(--size-icon-container-s, 24px);
+  height:var(--size-icon-container-s, 24px);
+}
+.buttonComboWrapper button[data-size=s] .icon svg{
+  max-width:var(--size-icon-container-s, 24px);
+  max-height:var(--size-icon-container-s, 24px);
+}
+.buttonComboWrapper button[data-size=m] .label{
+  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);
+}
+.buttonComboWrapper button[data-size=m] .icon{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  width:var(--size-icon-container-s, 24px);
+  height:var(--size-icon-container-s, 24px);
+}
+.buttonComboWrapper button[data-size=m] .icon svg{
+  max-width:var(--size-icon-container-s, 24px);
+  max-height:var(--size-icon-container-s, 24px);
+}
+.buttonComboWrapper button[data-size=l] .label{
+  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);
+}
+.buttonComboWrapper button[data-size=l] .icon{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  width:var(--size-icon-container-s, 24px);
+  height:var(--size-icon-container-s, 24px);
+}
+.buttonComboWrapper button[data-size=l] .icon svg{
+  max-width:var(--size-icon-container-s, 24px);
+  max-height:var(--size-icon-container-s, 24px);
+}
+.buttonComboWrapper button[data-loading][data-variant=label-only] .icon{
+  position:absolute;
+  top:50%;
+  left:50%;
+  transform:translate(-50%, -50%);
+}
+.buttonComboWrapper button[data-loading][data-variant=label-only] .label{
+  opacity:var(--opacity-a0, 0);
+}
+.buttonComboWrapper button[data-appearance=primary]{
+  background-color:var(--sys-primary-accent-default, #794ed3);
+}
+.buttonComboWrapper button[data-appearance=primary] .label{
+  color:var(--sys-primary-on-accent, #fdfbff);
+}
+.buttonComboWrapper button[data-appearance=primary] .icon{
+  color:var(--sys-primary-on-accent, #fdfbff);
+}
+@media (hover: hover){
+  .buttonComboWrapper button[data-appearance=primary]:hover{
+    background-color:var(--sys-primary-accent-hovered, #6851a6);
+  }
+  .buttonComboWrapper button[data-appearance=primary]:hover .label{
+    color:var(--sys-primary-on-accent, #fdfbff);
+  }
+  .buttonComboWrapper button[data-appearance=primary]:hover .icon{
+    color:var(--sys-primary-on-accent, #fdfbff);
+  }
+}
+@media (hover: none) or (hover: hover){
+  .buttonComboWrapper button[data-appearance=primary]:focus-visible{
+    background-color:var(--sys-primary-accent-hovered, #6851a6);
+  }
+  .buttonComboWrapper button[data-appearance=primary]:focus-visible .label{
+    color:var(--sys-primary-on-accent, #fdfbff);
+  }
+  .buttonComboWrapper button[data-appearance=primary]:focus-visible .icon{
+    color:var(--sys-primary-on-accent, #fdfbff);
+  }
+  .buttonComboWrapper button[data-appearance=primary]:active{
+    background-color:var(--sys-primary-accent-pressed, #5b4796);
+  }
+  .buttonComboWrapper button[data-appearance=primary]:active .label{
+    color:var(--sys-primary-on-accent, #fdfbff);
+  }
+  .buttonComboWrapper button[data-appearance=primary]:active .icon{
+    color:var(--sys-primary-on-accent, #fdfbff);
+  }
+  .buttonComboWrapper button[data-appearance=primary][data-loading]{
+    background-color:var(--sys-primary-accent-pressed, #5b4796);
+  }
+  .buttonComboWrapper button[data-appearance=primary][data-loading] .label{
+    color:var(--sys-primary-on-accent, #fdfbff);
+  }
+  .buttonComboWrapper button[data-appearance=primary][data-loading] .icon{
+    color:var(--sys-primary-on-accent, #fdfbff);
+  }
+  .buttonComboWrapper button[data-appearance=primary]:disabled, .buttonComboWrapper button[data-appearance=primary][data-disabled]{
+    background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+  }
+  .buttonComboWrapper button[data-appearance=primary]:disabled .label, .buttonComboWrapper button[data-appearance=primary][data-disabled] .label{
+    color:var(--sys-neutral-text-light, #8b8e9b);
+  }
+  .buttonComboWrapper button[data-appearance=primary]:disabled .icon, .buttonComboWrapper button[data-appearance=primary][data-disabled] .icon{
+    color:var(--sys-neutral-text-light, #8b8e9b);
+  }
+}
+.buttonComboWrapper button[data-appearance=primary]:focus-visible{
+  z-index:1;
+  outline-color:var(--sys-available-complementary, #1c1c24);
+}
+.buttonComboWrapper button: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:var(--spacing-state-focus-offset, 2px);
+}

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

@@ -0,0 +1,3 @@
+import { Item } from '../types';
+export declare function extractDroplistItemProps(props: Item): Item;
+export declare function extractButtonActionsProps(props: Item): Item;

package/dist/esm/components/utils.js

@@ -0,0 +1,10 @@
+export function extractDroplistItemProps(props) {
+    return Object.keys(props)
+        .filter(item => !item.startsWith('on'))
+        .reduce((nextProps, prop) => (Object.assign(Object.assign({}, nextProps), { [prop]: props[prop] })), {});
+}
+export function extractButtonActionsProps(props) {
+    return Object.keys(props)
+        .filter(item => item.startsWith('on'))
+        .reduce((nextProps, prop) => (Object.assign(Object.assign({}, nextProps), { [prop]: props[prop] })), {});
+}

package/dist/esm/constants.d.ts

@@ -0,0 +1,3 @@
+import { Size } from '@snack-uikit/button-private';
+import { DroplistProps } from '@snack-uikit/list';
+export declare const DROPLIST_SIZE_MAP: Record<Size, DroplistProps['size']>;

package/dist/esm/constants.js

@@ -0,0 +1,7 @@
+import { SIZE } from '@snack-uikit/button-private';
+export const DROPLIST_SIZE_MAP = {
+    [SIZE.Xs]: 's',
+    [SIZE.S]: 's',
+    [SIZE.M]: 'm',
+    [SIZE.L]: 'l',
+};

package/dist/esm/index.d.ts

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

package/dist/esm/index.js

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

package/dist/esm/types.d.ts

@@ -0,0 +1,16 @@
+import { BaseButtonProps } from '@snack-uikit/button-private';
+import { BaseItemProps } from '@snack-uikit/list';
+export type Item = BaseItemProps & {
+    /** Название */
+    label?: string;
+};
+export type BaseButtonComboProps = Pick<BaseButtonProps, 'className' | 'disabled' | 'loading' | 'size' | 'type' | 'tabIndex' | 'fullWidth'> & {
+    /** CSS-класс Dropdown */
+    dropdownClassName?: string;
+    /** Начальное состояние */
+    defaultValue?: string;
+    /** Начальное состояние лейбла */
+    defaultLabel?: string;
+    /** Основные элементы списка */
+    items: Item[];
+};

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@snack-uikit/button-combo",
+  "publishConfig": {
+    "access": "public"
+  },
+  "title": "Button Combo",
+  "version": "0.0.1-preview-a2f98ef7.0",
+  "sideEffects": [
+    "*.css",
+    "*.woff",
+    "*.woff2"
+  ],
+  "description": "Кнопка с выбором действий",
+  "types": "./dist/esm/index.d.ts",
+  "exports": {
+    "import": "./dist/esm/index.js",
+    "require": "./dist/cjs/index.js"
+  },
+  "homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/button-combo",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cloud-ru-tech/snack-uikit.git",
+    "directory": "packages/button-combo"
+  },
+  "author": "Артемий Зимин <aazimin@cloud.ru>",
+  "contributors": [
+    "Артемий Зимин <aazimin@cloud.ru>"
+  ],
+  "files": [
+    "dist/cjs",
+    "dist/esm",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "license": "Apache-2.0",
+  "scripts": {},
+  "dependencies": {
+    "@snack-uikit/button-private": "0.0.1-preview-a2f98ef7.0",
+    "@snack-uikit/icons": "0.24.1",
+    "@snack-uikit/list": "0.22.3-preview-a2f98ef7.0",
+    "@snack-uikit/utils": "3.6.0",
+    "classnames": "2.5.1"
+  },
+  "gitHead": "16999df080b0b870c1a90ba74aa6c296cd4d480b"
+}

package/src/components/ButtonCombo.tsx

@@ -0,0 +1,105 @@
+import cn from 'classnames';
+import { forwardRef, useCallback, useMemo, useState } from 'react';
+
+import { ButtonPrivate, extractCommonButtonProps, HTML_TYPE, SIZE } from '@snack-uikit/button-private';
+import { ChevronDownSVG, ChevronUpSVG } from '@snack-uikit/icons';
+import { Droplist, ItemId } from '@snack-uikit/list';
+import { extractSupportProps, useLayoutEffect, WithSupportProps } from '@snack-uikit/utils';
+
+import { DROPLIST_SIZE_MAP } from '../constants';
+import { BaseButtonComboProps, Item } from '../types';
+import styles from './styles.module.scss';
+import { extractButtonActionsProps, extractDroplistItemProps } from './utils';
+
+export type ButtonComboProps = WithSupportProps<BaseButtonComboProps>;
+
+export const ButtonCombo = forwardRef<HTMLDivElement, ButtonComboProps>(
+  (
+    {
+      size = SIZE.S,
+      type = HTML_TYPE.Button,
+      defaultLabel = '',
+      className,
+      dropdownClassName,
+      defaultValue,
+      items,
+      tabIndex,
+      fullWidth,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [open, setOpen] = useState<boolean>(false);
+    const [activeOption, setActiveOption] = useState<Item>({});
+
+    const droplistItems = useMemo(
+      () => items.map(extractDroplistItemProps).map(item => ({ ...item, id: item?.id, content: item?.label })),
+      [items],
+    );
+
+    const handleSelectionChange = useCallback(
+      (value: ItemId) => {
+        if (value) {
+          const option = items.find(item => item?.id === value);
+
+          option && setActiveOption(option);
+        }
+      },
+      [items],
+    );
+
+    useLayoutEffect(() => {
+      if (defaultValue) {
+        handleSelectionChange(defaultValue);
+      }
+    }, [defaultValue, handleSelectionChange]);
+
+    return (
+      <div
+        {...extractSupportProps(rest)}
+        ref={ref}
+        className={cn(styles.buttonComboWrapper, className)}
+        tabIndex={tabIndex}
+        data-full-width={fullWidth || undefined}
+      >
+        <ButtonPrivate
+          {...extractCommonButtonProps(rest)}
+          {...extractButtonActionsProps(activeOption)}
+          data-type='option'
+          size={size}
+          label={activeOption?.label ?? defaultLabel}
+          type={type}
+          fullWidth={fullWidth}
+          iconClassName={styles.icon}
+          labelClassName={styles.label}
+          data-test-id='button-combo__option'
+        />
+        <Droplist
+          items={droplistItems}
+          open={open}
+          onOpenChange={setOpen}
+          selection={{
+            defaultValue,
+            mode: 'single',
+            onChange: handleSelectionChange,
+          }}
+          className={dropdownClassName}
+          size={DROPLIST_SIZE_MAP[size]}
+          placement='bottom-end'
+          closeDroplistOnItemClick
+          data-test-id='button-combo__dropdown'
+        >
+          <ButtonPrivate
+            {...extractCommonButtonProps(rest)}
+            data-type='dropdown'
+            size={size}
+            iconClassName={styles.icon}
+            labelClassName={styles.label}
+            icon={open ? <ChevronUpSVG /> : <ChevronDownSVG />}
+            data-test-id='button-combo__dropdown-button'
+          />
+        </Droplist>
+      </div>
+    );
+  },
+);

package/src/components/index.ts

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

package/src/components/styles.module.scss

@@ -0,0 +1,114 @@
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-button-buttonFilled';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-button-buttonCombo';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
+@use '../styles.module';
+
+$appearances: 'primary';
+$sizes: 'xs', 's', 'm', 'l';
+$typography: (
+  'xs': styles-tokens-button-buttonFilled.$sans-label-s,
+  's': styles-tokens-button-buttonFilled.$sans-label-m,
+  'm': styles-tokens-button-buttonFilled.$sans-label-l,
+  'l': styles-tokens-button-buttonFilled.$sans-label-l,
+);
+
+@mixin button-colors-styles {
+  @each $appearance in $appearances {
+    &[data-appearance='#{$appearance}'] {
+      @include styles.label-color(styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'on-accent'));
+      @include styles.icon-fill(styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'on-accent'));
+
+      background-color: styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'accent-default');
+
+      @media (hover: hover) {
+        &:hover {
+          @include styles.label-color(styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'on-accent'));
+          @include styles.icon-fill(styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'on-accent'));
+
+          background-color: styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'accent-hovered');
+        }
+      }
+
+      @media (hover: none) or (hover: hover) {
+        &:focus-visible {
+          @include styles.label-color(styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'on-accent'));
+          @include styles.icon-fill(styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'on-accent'));
+
+          background-color: styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'accent-hovered');
+        }
+
+        &:active {
+          @include styles.label-color(styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'on-accent'));
+          @include styles.icon-fill(styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'on-accent'));
+
+          background-color: styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'accent-pressed');
+        }
+
+        &[data-loading] {
+          @include styles.label-color(styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'on-accent'));
+          @include styles.icon-fill(styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'on-accent'));
+
+          background-color: styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', $appearance, 'accent-pressed');
+        }
+
+        &:disabled,
+        &[data-disabled] {
+          @include styles.label-color(styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', 'neutral', 'text-light'));
+          @include styles.icon-fill(styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', 'neutral', 'text-light'));
+
+          background-color: styles-tokens-button-buttonFilled.simple-var(styles-tokens-button-buttonFilled.$theme-variables, 'sys', 'neutral', 'decor-disabled');
+        }
+      }
+    }
+  }
+}
+
+@mixin button-outline-colors-styles {
+  @each $appearance in $appearances {
+    &[data-appearance='#{$appearance}'] {
+      &:focus-visible {
+        /* stylelint-disable-next-line declaration-property-value-allowed-list */
+        z-index: 1;
+        outline-color: styles-tokens-button-buttonFilled.$sys-available-complementary;
+      }
+    }
+  }
+}
+
+.buttonComboWrapper {
+  display: inline-flex;
+  align-items: center;
+
+  &[data-full-width] {
+    flex-grow: 1;
+    flex-shrink: 1;
+    width: 100%;
+  }
+
+  button {
+    &[data-type='option'] {
+      @each $size in $sizes {
+        &[data-size='#{$size}'] {
+          @include styles-tokens-element.composite-var(styles-tokens-button-buttonCombo.$button-combo, 'container', $size, 'option');
+        }
+      }
+
+      border-right: styles-theme-variables.$border-width-button-combo-divider solid
+        styles-theme-variables.$sys-neutral-decor-default;
+    }
+    &[data-type='dropdown'] {
+      @each $size in $sizes {
+        &[data-size='#{$size}'] {
+          @include styles-tokens-element.composite-var(styles-tokens-button-buttonCombo.$button-combo, 'container', $size, 'dropdown');
+        }
+      }
+    }
+
+    @include styles.button-anatomy-styles(styles-tokens-button-buttonFilled.$button-filled, $sizes, [], $typography);
+    @include styles.loading-label-only(styles-tokens-button-buttonFilled.$button-filled);
+    @include button-colors-styles;
+    @include button-outline-colors-styles;
+    @include styles.button-common-state;
+  }
+}

package/src/components/utils.ts

@@ -0,0 +1,25 @@
+import { Item } from '../types';
+
+export function extractDroplistItemProps(props: Item): Item {
+  return Object.keys(props)
+    .filter(item => !item.startsWith('on'))
+    .reduce(
+      (nextProps, prop) => ({
+        ...nextProps,
+        [prop]: props[prop as unknown as keyof Item],
+      }),
+      {},
+    );
+}
+
+export function extractButtonActionsProps(props: Item): Item {
+  return Object.keys(props)
+    .filter(item => item.startsWith('on'))
+    .reduce(
+      (nextProps, prop) => ({
+        ...nextProps,
+        [prop]: props[prop as unknown as keyof Item],
+      }),
+      {},
+    );
+}