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

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx } from "react/jsx-runtime";
import { useListRenderItems } from '@workday/canvas-kit-react/collection';
import { createSubcomponent } from '@workday/canvas-kit-react/common';
import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
import { base, system } from '@workday/canvas-tokens-web';
import { useSegmentedControlModel } from './hooks/useSegmentedControlModel';
export const segmentedControlListStencil = 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");
export const SegmentedControlList = createSubcomponent('div')({
    displayName: 'SegmentedControl.List',
    modelHook: useSegmentedControlModel,
})(({ children, ...elemProps }, Element, model) => {
    return (_jsx(Element, { role: "group", ...handleCsProp(elemProps, segmentedControlListStencil({
            items: `${model.state.items.length}`,
            orientation: model.state.orientation,
            size: model.state.size,
        })), children: useListRenderItems(model, children) }));
});