@workday/canvas-kit-react/dist/commonjs/segmented-control/lib/SegmentedControlButton.js

The parent module that contains all Workday Canvas Kit React components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SegmentedControlButton = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const button_1 = require("@workday/canvas-kit-react/button");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const common_1 = require("@workday/canvas-kit-react/common");
const icon_1 = require("@workday/canvas-kit-react/icon");
const segmentedControlButtonStencil = (0, canvas_kit_styling_1.createStencil)({
    extends: button_1.buttonStencil,
    base: { name: "19yhl7", styles: "box-sizing:border-box;border-inline-start:none;min-width:auto;--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-soft);--border-button-85bf0e:var(--cnvs-sys-color-border-container);--borderRadius-button-85bf0e:var(--cnvs-sys-shape-zero);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-soft);&:hover, &.hover{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);}&:active, &.active{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-softer);--border-button-85bf0e:var(--cnvs-sys-color-border-container);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);}&:first-of-type{border-radius:var(--cnvs-sys-shape-x1) 0 0 var(--cnvs-sys-shape-x1);border-inline-start:0.0625rem solid var(--cnvs-sys-color-border-container);}&:last-of-type{border-radius:0 var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) 0;}&[aria-pressed=\"true\"]{--background-button-85bf0e:var(--cnvs-brand-primary-base);--border-button-85bf0e:var(--cnvs-brand-primary-base);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-inverse);&:first-of-type{border-inline-start-color:var(--cnvs-brand-primary-base);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-softer);--border-button-85bf0e:var(--cnvs-sys-color-border-container);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);}}&:focus-visible, &.focus{border-radius:var(--cnvs-sys-shape-x1);z-index:1;animation:none;transition:all 120ms border-radius 1ms;}" },
    modifiers: {
        segmentedControlButtonSize: {
            small: { name: "ecaf5", styles: "width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x8);" },
            medium: { name: "1sckhz", styles: "width:var(--cnvs-sys-space-x10);height:var(--cnvs-sys-space-x10);" },
            large: { name: "35mv5r", styles: "width:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));height:calc(var(--cnvs-sys-space-x10) + var(--cnvs-sys-space-x2));" }
        }
    }
}, "segmented-control-button-c9fec8");
/**
 * @deprecated ⚠️ `SegmentedControlButton` in Main has been deprecated and will be removed in a future major version. Please use [`SegmentedControl` in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs) instead.
 */
exports.SegmentedControlButton = (0, common_1.createComponent)('button')({
    displayName: 'Button',
    Component: ({ value, icon, toggled, ...props }, ref, Element) => {
        return ((0, jsx_runtime_1.jsx)(button_1.BaseButton, { as: Element, ref: ref, "aria-pressed": toggled, value: value, ...(0, canvas_kit_styling_1.handleCsProp)(props, segmentedControlButtonStencil({ segmentedControlButtonSize: props.size || 'medium' })), children: (0, jsx_runtime_1.jsx)(button_1.BaseButton.Icon, { size: props.size || 'large', icon: icon }) }));
    },
});