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

The parent module that contains all Workday Canvas Kit React components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SegmentedControlList = exports.segmentedControlListStencil = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const collection_1 = require("@workday/canvas-kit-react/collection");
const common_1 = require("@workday/canvas-kit-react/common");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const useSegmentedControlModel_1 = require("./hooks/useSegmentedControlModel");
exports.segmentedControlListStencil = (0, canvas_kit_styling_1.createStencil)({
    vars: {
        items: '',
    },
    base: { name: "214am1", styles: "box-sizing:border-box;display:inline-grid;background-color:var(--cnvs-sys-color-surface-alt-default, var(--cnvs-sys-color-bg-alt-soft, oklch(0.3343 0.0951 253.3 / 0.05)));border:0 solid var(--cnvs-sys-color-border-transparent);border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));grid-gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));" },
    modifiers: {
        size: {
            large: { name: "3u67yv", styles: "padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));" },
            medium: { name: "3m3i1i", styles: "padding:var(--cnvs-base-size-25, 0.125rem);" },
            small: { name: "h1ntj", styles: "padding:var(--cnvs-base-size-25, 0.125rem);gap:var(--cnvs-base-size-25, 0.125rem);" }
        },
        orientation: {
            vertical: { name: "2iy36v", styles: "grid-template-rows:repeat(var(--items-segmented-control-list-abbea3), 1fr);" },
            horizontal: { name: "2he8ef", styles: "grid-template-columns:repeat(var(--items-segmented-control-list-abbea3), 1fr);" }
        }
    }
}, "segmented-control-list-abbea3");
exports.SegmentedControlList = (0, common_1.createSubcomponent)('div')({
    displayName: 'SegmentedControl.List',
    modelHook: useSegmentedControlModel_1.useSegmentedControlModel,
})(({ children, ...elemProps }, Element, model) => {
    return ((0, jsx_runtime_1.jsx)(Element, { role: "group", ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.segmentedControlListStencil)({
            items: `${model.state.items.length}`,
            orientation: model.state.orientation,
            size: model.state.size,
        })), children: (0, collection_1.useListRenderItems)(model, children) }));
});