@arbor-education/design-system.components 0.25.1 → 0.25.2

package/dist/components/toggleGroup/ToggleGroup.stories.js

@@ -0,0 +1,342 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { fn } from 'storybook/test';
+import { Controls, Heading as DocHeading, Markdown, Primary as DocPrimary, Stories, Subtitle, Title, } from '@storybook/addon-docs/blocks';
+import { Icon } from '../icon/Icon.js';
+import { ToggleGroup } from './ToggleGroup.js';
+// ---------------------------------------------------------------------------
+// Docs page content
+// ---------------------------------------------------------------------------
+const DESCRIPTION_INTRO = [
+    'ToggleGroup renders a set of mutually exclusive toggle options built on',
+    '[Radix UI Toggle Group](https://www.radix-ui.com/primitives/docs/components/toggle-group).',
+    'Each option can carry a semantic `color` (`"red"`, `"yellow"`, or `"green"`) that applies',
+    'a background and text colour from the design token palette when the item is active.',
+    'It behaves as a radio group — only one option can be selected at a time.',
+    'Typical use cases include attendance status pickers (Present / Late / Absent) and any',
+    'single-select choice set where each option has a semantic colour meaning.',
+].join(' ');
+const USAGE_GUIDANCE = [
+    '### When to use',
+    '',
+    '- **Categorised single-select** — when each option has a distinct semantic colour (attendance, priority, status)',
+    '- **Compact radio replacement** — when a traditional radio group would take too much vertical space',
+    '- **Immediate selection** — when choosing an option takes effect right away without a form submission',
+    '',
+    '---',
+    '',
+    '### When NOT to use',
+    '',
+    '| Situation | Use instead |',
+    '|---|---|',
+    '| Multiple options can be selected | `CheckboxGroup` |',
+    '| Options are part of a larger form submission | `RadioButtonGroup` — communicates deferred action |',
+    '| More than ~6 options | `SelectDropdown` — toggle groups become unwieldy at scale |',
+].join('\n');
+const DEVELOPER_NOTES = [
+    '### Controlled vs uncontrolled',
+    '',
+    'Use `defaultValue` for uncontrolled mode — the component manages its own selection state.',
+    'Use `value` + `onValueChange` for controlled mode when you need to read or sync the value externally.',
+    '',
+    '**`onValueChange` receives the new value string directly**, not a React event.',
+    '',
+    '---',
+    '',
+    '### Option colour',
+    '',
+    'The `color` prop accepts `"red"`, `"yellow"`, or `"green"` and is optional.',
+    'When set, the colour is applied as background and text colour using semantic design tokens on the active item.',
+    'When omitted, the primary button style is used for the selected state.',
+    'Options within the same group can mix coloured and uncoloured items.',
+    '',
+    '---',
+    '',
+    '### Accessibility',
+    '',
+    '- Rendered as `role="group"` containing `role="radio"` items',
+    '- Keyboard navigation: `Tab` focuses the group, arrow keys move between items, `Space`/`Enter` select',
+    '- Each item uses its `text` value as the accessible label',
+    '- The `disabled` prop on the root or individual options correctly sets the `disabled` attribute',
+].join('\n');
+// ---------------------------------------------------------------------------
+// Docs page
+// ---------------------------------------------------------------------------
+function ToggleGroupDocsPage() {
+    return (_jsxs(_Fragment, { children: [_jsx(Title, {}), _jsx(Subtitle, {}), _jsx(Markdown, { children: DESCRIPTION_INTRO }), _jsx(DocHeading, { children: "Interactive example" }), _jsx(DocPrimary, {}), _jsx(Controls, {}), _jsx(DocHeading, { children: "Usage guidance" }), _jsx(Markdown, { children: USAGE_GUIDANCE }), _jsx(DocHeading, { children: "Developer notes" }), _jsx(Markdown, { children: DEVELOPER_NOTES }), _jsx(DocHeading, { children: "Examples" }), _jsx(Stories, { title: "" })] }));
+}
+// ---------------------------------------------------------------------------
+// Meta
+// ---------------------------------------------------------------------------
+const attendanceOptions = [
+    { value: 'present', text: 'Present' },
+    { value: 'late', text: 'Late' },
+    { value: 'absent', text: 'Absent' },
+];
+const meta = {
+    title: 'Components/ToggleGroup',
+    component: ToggleGroup,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            page: ToggleGroupDocsPage,
+        },
+    },
+    tags: ['autodocs'],
+    args: {
+        options: attendanceOptions,
+        onValueChange: fn(),
+    },
+    argTypes: {
+        value: {
+            control: 'text',
+            description: 'The controlled selected value. Pair with `onValueChange`.',
+            table: { type: { summary: 'string' } },
+        },
+        defaultValue: {
+            control: 'text',
+            description: 'The initial selected value for uncontrolled usage.',
+            table: { type: { summary: 'string' } },
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disables all options in the group.',
+            table: { type: { summary: 'boolean' }, defaultValue: { summary: 'false' } },
+        },
+        onValueChange: {
+            action: 'valueChange',
+            control: false,
+            description: 'Callback fired when the selection changes. Receives the new value string.',
+            table: { type: { summary: '(value: string) => void' } },
+        },
+        options: {
+            control: false,
+            description: 'Array of option configs. Each accepts `value`, `text`, `color` (`"red" | "yellow" | "green"`), `icon`, and `disabled`.',
+            table: { type: { summary: 'ToggleGroupOption[]' } },
+        },
+    },
+};
+export default meta;
+const withDescription = (story, description) => ({
+    ...story,
+    parameters: {
+        ...story.parameters,
+        docs: { ...story.parameters?.docs, description: { story: description } },
+    },
+});
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+export const Default = withDescription({
+    args: {
+        options: attendanceOptions,
+        value: undefined,
+        onValueChange: fn(),
+    },
+}, 'No option selected. Click an option to see the selected state.');
+export const WithDefaultValue = withDescription({
+    args: {
+        options: attendanceOptions,
+        defaultValue: 'present',
+        onValueChange: undefined,
+    },
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { ToggleGroup } from '@arbor-education/design-system.components';
+
+const options = [
+  { value: 'present', text: 'Present' },
+  { value: 'late',    text: 'Late' },
+  { value: 'absent',  text: 'Absent' },
+];
+
+<ToggleGroup options={options} defaultValue="present" />
+`.trim(),
+            },
+        },
+    },
+}, 'Uncontrolled mode — `defaultValue` sets the initial selection and the component manages state internally.');
+export const Controlled = withDescription({
+    render: (args) => {
+        const [value, setValue] = useState('present');
+        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--spacing-small)' }, children: [_jsx(ToggleGroup, { options: args.options, disabled: args.disabled, className: args.className, value: value, onValueChange: (v) => {
+                        setValue(v);
+                        args.onValueChange?.(v);
+                    } }), _jsxs("p", { style: { margin: 0, fontSize: 'var(--font-size-2-13)', color: 'var(--color-grey-600)' }, children: ["Selected:", ' ', _jsx("strong", { children: value || '—' })] })] }));
+    },
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { useState } from 'react';
+import { ToggleGroup } from '@arbor-education/design-system.components';
+
+const options = [
+  { value: 'present', text: 'Present' },
+  { value: 'late',    text: 'Late' },
+  { value: 'absent',  text: 'Absent' },
+];
+
+function AttendancePicker() {
+  const [status, setStatus] = useState('present');
+  return <ToggleGroup options={options} value={status} onValueChange={setStatus} />;
+}
+`.trim(),
+            },
+        },
+    },
+}, 'Controlled mode — `value` and `onValueChange` manage selection externally. The label below reflects the current value.');
+export const WithColours = withDescription({
+    args: {
+        options: [
+            { value: 'present', text: 'Present', color: 'green' },
+            { value: 'late', text: 'Late', color: 'yellow' },
+            { value: 'absent', text: 'Absent', color: 'red' },
+        ],
+        defaultValue: 'present',
+        onValueChange: undefined,
+    },
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { ToggleGroup } from '@arbor-education/design-system.components';
+
+const options = [
+  { value: 'present', text: 'Present', color: 'green' },
+  { value: 'late',    text: 'Late',    color: 'yellow' },
+  { value: 'absent',  text: 'Absent',  color: 'red' },
+];
+
+<ToggleGroup options={options} defaultValue="present" />
+`.trim(),
+            },
+        },
+    },
+}, 'Each option accepts an optional `color` prop (`"green"`, `"yellow"`, or `"red"`). The colour is applied using semantic design tokens when the item is selected.');
+export const WithMixedColours = withDescription({
+    args: {
+        options: [
+            { value: 'present', text: 'Present', color: 'green' },
+            { value: 'late', text: 'Late', color: 'yellow' },
+            { value: 'absent', text: 'Absent', color: 'red' },
+            { value: 'not-required', text: 'Not required' },
+        ],
+        defaultValue: 'not-required',
+        onValueChange: undefined,
+    },
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { ToggleGroup } from '@arbor-education/design-system.components';
+
+const options = [
+  { value: 'present',      text: 'Present',      color: 'green' },
+  { value: 'late',         text: 'Late',          color: 'yellow' },
+  { value: 'absent',       text: 'Absent',        color: 'red' },
+  { value: 'not-required', text: 'Not required' },
+];
+
+<ToggleGroup options={options} defaultValue="not-required" />
+`.trim(),
+            },
+        },
+    },
+}, 'Options within the same group can mix coloured and uncoloured items. Uncoloured items use the primary button style when selected.');
+export const WithColoursAndIcons = withDescription({
+    args: {
+        options: [
+            { value: 'present', text: 'Present', color: 'green', icon: _jsx(Icon, { name: "check", size: 16 }) },
+            { value: 'late', text: 'Late', color: 'yellow', icon: _jsx(Icon, { name: "clock-3", size: 16 }) },
+            { value: 'absent', text: 'Absent', color: 'red', icon: _jsx(Icon, { name: "x", size: 16 }) },
+        ],
+        defaultValue: 'present',
+        onValueChange: undefined,
+    },
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Icon, ToggleGroup } from '@arbor-education/design-system.components';
+
+const options = [
+  { value: 'present', text: 'Present', color: 'green',  icon: <Icon name="check"   size={16} /> },
+  { value: 'late',    text: 'Late',    color: 'yellow', icon: <Icon name="clock-3" size={16} /> },
+  { value: 'absent',  text: 'Absent',  color: 'red',    icon: <Icon name="x"       size={16} /> },
+];
+
+<ToggleGroup options={options} defaultValue="present" />
+`.trim(),
+            },
+        },
+    },
+}, 'Options can combine a semantic colour with an icon.');
+export const WithIcons = withDescription({
+    args: {
+        options: [
+            { value: 'present', text: 'Present', icon: _jsx(Icon, { name: "check", size: 16 }) },
+            { value: 'late', text: 'Late', icon: _jsx(Icon, { name: "clock-3", size: 16 }) },
+            { value: 'absent', text: 'Absent', icon: _jsx(Icon, { name: "x", size: 16 }) },
+        ],
+        defaultValue: 'present',
+        onValueChange: undefined,
+    },
+    parameters: {
+        controls: { disable: true },
+        docs: {
+            source: {
+                language: 'tsx',
+                code: `
+import { Icon, ToggleGroup } from '@arbor-education/design-system.components';
+
+const options = [
+  { value: 'present', text: 'Present', icon: <Icon name="check"   size={16} /> },
+  { value: 'late',    text: 'Late',    icon: <Icon name="clock-3" size={16} /> },
+  { value: 'absent',  text: 'Absent',  icon: <Icon name="x"       size={16} /> },
+];
+
+<ToggleGroup options={options} defaultValue="present" />
+`.trim(),
+            },
+        },
+    },
+}, 'Each option can include an `icon`. The icon renders to the left of the label text.');
+export const Disabled = withDescription({
+    args: {
+        options: attendanceOptions,
+        defaultValue: 'late',
+        disabled: true,
+        onValueChange: undefined,
+    },
+    parameters: {
+        controls: { disable: true },
+    },
+}, 'The entire group can be disabled with the `disabled` prop. Use when the field exists but cannot currently be changed.');
+export const PartiallyDisabled = withDescription({
+    args: {
+        options: [
+            { value: 'present', text: 'Present' },
+            { value: 'late', text: 'Late', disabled: true },
+            { value: 'absent', text: 'Absent' },
+        ],
+        defaultValue: 'present',
+        onValueChange: undefined,
+    },
+    parameters: {
+        controls: { disable: true },
+    },
+}, 'Individual options can be disabled by setting `disabled: true` on the option config.');
+//# sourceMappingURL=ToggleGroup.stories.js.map

package/dist/components/toggleGroup/ToggleGroup.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.stories.js","sourceRoot":"","sources":["../../../src/components/toggleGroup/ToggleGroup.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/toggleGroup/ToggleGroup.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/vitest';
+//# sourceMappingURL=ToggleGroup.test.d.ts.map

package/dist/components/toggleGroup/ToggleGroup.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.test.d.ts","sourceRoot":"","sources":["../../../src/components/toggleGroup/ToggleGroup.test.tsx"],"names":[],"mappings":"AAGA,OAAO,kCAAkC,CAAC"}

package/dist/components/toggleGroup/ToggleGroup.test.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, test, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/vitest';
+import { ToggleGroup } from './ToggleGroup.js';
+const options = [
+    { value: 'present', text: 'Present', color: 'green' },
+    { value: 'late', text: 'Late', color: 'yellow' },
+    { value: 'absent', text: 'Absent', color: 'red' },
+];
+describe('ToggleGroup component', () => {
+    test('renders all options', () => {
+        render(_jsx(ToggleGroup, { options: options }));
+        expect(screen.getByRole('group')).toBeInTheDocument();
+        expect(screen.getAllByRole('radio')).toHaveLength(3);
+    });
+    test('renders option text', () => {
+        render(_jsx(ToggleGroup, { options: options }));
+        expect(screen.getByText('Present')).toBeInTheDocument();
+        expect(screen.getByText('Late')).toBeInTheDocument();
+        expect(screen.getByText('Absent')).toBeInTheDocument();
+    });
+    test('applies ds-toggle-group base class', () => {
+        render(_jsx(ToggleGroup, { options: options }));
+        expect(screen.getByRole('group')).toHaveClass('ds-toggle-group');
+    });
+    test('applies additional className alongside base class', () => {
+        render(_jsx(ToggleGroup, { options: options, className: "custom-class" }));
+        const group = screen.getByRole('group');
+        expect(group).toHaveClass('ds-toggle-group');
+        expect(group).toHaveClass('custom-class');
+    });
+    test('no option is selected by default', () => {
+        render(_jsx(ToggleGroup, { options: options }));
+        screen.getAllByRole('radio').forEach((radio) => {
+            expect(radio).toHaveAttribute('data-state', 'off');
+        });
+    });
+    test('selects the option matching defaultValue in uncontrolled mode', () => {
+        render(_jsx(ToggleGroup, { options: options, defaultValue: "late" }));
+        expect(screen.getByRole('radio', { name: 'Late' })).toHaveAttribute('data-state', 'on');
+        expect(screen.getByRole('radio', { name: 'Present' })).toHaveAttribute('data-state', 'off');
+    });
+    test('selects the option matching value in controlled mode', () => {
+        render(_jsx(ToggleGroup, { options: options, value: "absent", onValueChange: vi.fn() }));
+        expect(screen.getByRole('radio', { name: 'Absent' })).toHaveAttribute('data-state', 'on');
+    });
+    test('calls onValueChange with the clicked option value', () => {
+        const handleChange = vi.fn();
+        render(_jsx(ToggleGroup, { options: options, value: "", onValueChange: handleChange }));
+        fireEvent.click(screen.getByRole('radio', { name: 'Present' }));
+        expect(handleChange).toHaveBeenCalledTimes(1);
+        expect(handleChange).toHaveBeenCalledWith('present');
+    });
+    test('applies color class for green option when selected', () => {
+        render(_jsx(ToggleGroup, { options: options, value: "present", onValueChange: vi.fn() }));
+        expect(screen.getByRole('radio', { name: 'Present' })).toHaveClass('ds-toggle-group__item--green');
+    });
+    test('applies color class for yellow option when selected', () => {
+        render(_jsx(ToggleGroup, { options: options, value: "late", onValueChange: vi.fn() }));
+        expect(screen.getByRole('radio', { name: 'Late' })).toHaveClass('ds-toggle-group__item--yellow');
+    });
+    test('applies color class for red option when selected', () => {
+        render(_jsx(ToggleGroup, { options: options, value: "absent", onValueChange: vi.fn() }));
+        expect(screen.getByRole('radio', { name: 'Absent' })).toHaveClass('ds-toggle-group__item--red');
+    });
+    test('does not apply a color class when the option is not selected', () => {
+        render(_jsx(ToggleGroup, { options: options, value: "absent", onValueChange: vi.fn() }));
+        const present = screen.getByRole('radio', { name: 'Present' });
+        expect(present).not.toHaveClass('ds-toggle-group__item--green');
+    });
+    test('does not apply a color class when no color is provided', () => {
+        const noColorOptions = [{ value: 'yes', text: 'Yes' }, { value: 'no', text: 'No' }];
+        render(_jsx(ToggleGroup, { options: noColorOptions, value: "yes", onValueChange: vi.fn() }));
+        const yes = screen.getByRole('radio', { name: 'Yes' });
+        expect(yes).not.toHaveClass('ds-toggle-group__item--green');
+        expect(yes).not.toHaveClass('ds-toggle-group__item--yellow');
+        expect(yes).not.toHaveClass('ds-toggle-group__item--red');
+    });
+    test('disables the whole group when disabled prop is set', () => {
+        render(_jsx(ToggleGroup, { options: options, disabled: true }));
+        screen.getAllByRole('radio').forEach((radio) => {
+            expect(radio).toBeDisabled();
+        });
+    });
+    test('disables a single option when its disabled prop is set', () => {
+        const mixedOptions = [
+            { value: 'a', text: 'A', color: 'green' },
+            { value: 'b', text: 'B', color: 'red', disabled: true },
+        ];
+        render(_jsx(ToggleGroup, { options: mixedOptions }));
+        expect(screen.getByRole('radio', { name: 'B' })).toBeDisabled();
+        expect(screen.getByRole('radio', { name: 'A' })).not.toBeDisabled();
+    });
+    test('does not deselect an active option when clicked again', () => {
+        const handleChange = vi.fn();
+        render(_jsx(ToggleGroup, { options: options, value: "present", onValueChange: handleChange }));
+        fireEvent.click(screen.getByRole('radio', { name: 'Present' }));
+        expect(handleChange).not.toHaveBeenCalled();
+        expect(screen.getByRole('radio', { name: 'Present' })).toHaveAttribute('data-state', 'on');
+    });
+    test('renders an icon when provided', () => {
+        const withIcon = [{ value: 'x', text: 'X', icon: _jsx("svg", { "data-testid": "test-icon" }) }];
+        render(_jsx(ToggleGroup, { options: withIcon }));
+        expect(screen.getByTestId('test-icon')).toBeInTheDocument();
+    });
+    describe('keyboard navigation', () => {
+        test('all items are individually reachable via Tab', async () => {
+            const user = userEvent.setup();
+            render(_jsxs("div", { children: [_jsx("button", { children: "Before" }), _jsx(ToggleGroup, { options: options, value: "late", onValueChange: vi.fn() })] }));
+            await user.tab();
+            expect(document.activeElement).toHaveTextContent('Before');
+            await user.tab();
+            expect(document.activeElement).toBe(screen.getByRole('radio', { name: 'Present' }));
+            await user.tab();
+            expect(document.activeElement).toBe(screen.getByRole('radio', { name: 'Late' }));
+            await user.tab();
+            expect(document.activeElement).toBe(screen.getByRole('radio', { name: 'Absent' }));
+        });
+    });
+});
+//# sourceMappingURL=ToggleGroup.test.js.map

package/dist/components/toggleGroup/ToggleGroup.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.test.js","sourceRoot":"","sources":["../../../src/components/toggleGroup/ToggleGroup.test.tsx"],"names":[],"mappings":"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"}

package/dist/components/toggleGroup/ToggleGroupItem.d.ts

@@ -0,0 +1,10 @@
+import { type ToggleGroupItemProps as RadixToggleGroupItemProps } from '@radix-ui/react-toggle-group';
+export type ToggleGroupItemColor = 'red' | 'yellow' | 'green';
+export type ToggleGroupItemProps = {
+    text: string;
+    color?: ToggleGroupItemColor;
+    icon?: React.ReactNode;
+    isActive?: boolean;
+} & RadixToggleGroupItemProps;
+export declare const ToggleGroupItem: ({ text, color, icon, isActive, ...radixProps }: ToggleGroupItemProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ToggleGroupItem.d.ts.map

package/dist/components/toggleGroup/ToggleGroupItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroupItem.d.ts","sourceRoot":"","sources":["../../../src/components/toggleGroup/ToggleGroupItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,oBAAoB,IAAI,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAG5G,MAAM,MAAM,oBAAoB,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE9D,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,yBAAyB,CAAC;AAE9B,eAAO,MAAM,eAAe,GAAI,gDAAwD,oBAAoB,4CAW3G,CAAC"}

package/dist/components/toggleGroup/ToggleGroupItem.js

@@ -0,0 +1,5 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Item } from '@radix-ui/react-toggle-group';
+import { Button } from '../button/Button.js';
+export const ToggleGroupItem = ({ text, color, icon, isActive = false, ...radixProps }) => (_jsx(Item, { ...radixProps, asChild: true, children: _jsxs(Button, { className: isActive && color ? `ds-toggle-group__item--${color}` : undefined, borderless: true, variant: isActive ? 'primary' : 'secondary', children: [icon, text] }) }));
+//# sourceMappingURL=ToggleGroupItem.js.map

package/dist/components/toggleGroup/ToggleGroupItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroupItem.js","sourceRoot":"","sources":["../../../src/components/toggleGroup/ToggleGroupItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAA0D,MAAM,8BAA8B,CAAC;AAC5G,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAWlD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,UAAU,EAAwB,EAAE,EAAE,CAAC,CAC/G,KAAC,IAAI,OAAK,UAAU,EAAE,OAAO,kBAC3B,MAAC,MAAM,IACL,SAAS,EAAE,QAAQ,IAAI,KAAK,CAAC,CAAC,CAAC,0BAA0B,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,EAC5E,UAAU,QACV,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,aAE1C,IAAI,EACJ,IAAI,IACE,GACJ,CACR,CAAC"}

package/dist/index.css

@@ -5304,6 +5304,39 @@ li.ds-combobox__option--disabled {
   background-color: var(--toggle-on-disabled-color-dot);
 }
 
+.ds-toggle-group {
+  display: inline-flex;
+  border-radius: var(--border-radius-round);
+  border: var(--toggle-weight-border) solid var(--color-grey-100);
+  padding: var(--border-radius-small);
+  gap: 8px;
+  align-items: center;
+}
+.ds-toggle-group .ds-toggle-group__item--red {
+  background-color: var(--color-semantic-destructive-100);
+  color: var(--color-semantic-destructive-700);
+}
+.ds-toggle-group .ds-toggle-group__item--red:focus, .ds-toggle-group .ds-toggle-group__item--red:hover {
+  background-color: var(--color-semantic-destructive-100);
+  color: var(--color-semantic-destructive-700);
+}
+.ds-toggle-group .ds-toggle-group__item--yellow {
+  background-color: var(--color-semantic-caution-100);
+  color: var(--color-semantic-caution-700);
+}
+.ds-toggle-group .ds-toggle-group__item--yellow:focus, .ds-toggle-group .ds-toggle-group__item--yellow:hover {
+  background-color: var(--color-semantic-caution-100);
+  color: var(--color-semantic-caution-700);
+}
+.ds-toggle-group .ds-toggle-group__item--green {
+  background-color: var(--color-semantic-success-100);
+  color: var(--color-semantic-success-700);
+}
+.ds-toggle-group .ds-toggle-group__item--green:focus, .ds-toggle-group .ds-toggle-group__item--green:hover {
+  background-color: var(--color-semantic-success-100);
+  color: var(--color-semantic-success-700);
+}
+
 .ds-data-view-card {
   display: flex;
   flex-direction: row;