@mks2508/mks-ui 0.5.1 → 0.5.2

package/dist/react-ui/index.js

@@ -68,6 +68,8 @@ import { dataCardStyles, dataCardVariants } from "./ui/DataCard/DataCard.styles.
 import { DataCard, DataCardActions, DataCardBracket, DataCardLabel, DataCardToggle, DataCardValue, useDataCard } from "./ui/DataCard/index.js";
 import { useListFormat } from "./hooks/Formatting/UseListFormat.js";
 import { TextFlow } from "./ui/TextFlow/index.js";
+import { dynamicToggleStyles } from "./ui/DynamicToggle/DynamicToggle.styles.js";
+import { DynamicToggle, DynamicToggleGroup, DynamicToggleOption } from "./ui/DynamicToggle/index.js";
 import "./ui/index.js";
 import { MorphingPopover, MorphingPopoverWithTarget } from "./components/MorphingPopover/index.js";
 import "./components/index.js";
@@ -108,4 +110,4 @@ import { HugeIcons } from "./icons/index.js";
 import { IconWrapper } from "./lib/icon-wrapper.js";
 import "./lib/index.js";
 
-export { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionStyles, AccordionTrigger, ActivityIcon, AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPortal, AlertDialogStyles, AlertDialogTitle, AlertDialogTrigger, ArrowDownToLineIcon, ArrowUpIcon, AutoHeight, Badge, BellElectricIcon, BellIcon, BotIcon, BoxIcon, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Check, Checkbox, CheckboxIndicator, CircleCheckIcon, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, CornerBracket, CountingNumber, DataCard, DataCardActions, DataCardBracket, DataCardLabel, DataCardToggle, DataCardValue, DeleteIcon, Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EASINGS, EFFECTS, Edit2, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Globe, Highlight, HighlightItem, HomeIcon, HugeIcons, IconWrapper, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Layers, LayoutPanelTopIcon, ListIcon, Menu, MenuArrow, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuGroup, MenuGroupLabel, MenuHighlight, MenuHighlightItem, MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuSeparator, MenuShortcut, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Morph, MorphingPopover, MorphingPopoverWithTarget, PRESETS, Package, Palette, PlusIcon, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RESPONSIVE_CONFIGS, RefreshCw, ReorderRoot as Reorder, Rocket, Save, SearchIcon, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsIcon, SlidingNumber, SlidingText, Slot, Switch, SwitchIcon, SwitchThumb, TIMING, TRANSFORMS, Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab, TerminalIcon, TextFlow, Textarea, Tooltip, TooltipArrow, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, Trash2, TrendingDownIcon, TrendingUpIcon, Type, Upload, XIcon, accordionVariants, badgeVariants, bracketVariants, buttonStateStyles, buttonVariants, calculateSeparatorCoordination, cardVariants, checkboxStyles, cn, dataCardStyles, dataCardVariants, dialogStyles, fieldVariants, getResponsiveDuration, getResponsiveStagger, getStrictContext, inputGroupAddonVariants, inputGroupButtonVariants, popoverStyles, progressStyles, shouldShowSeparator, switchStyles, tabsIndicatorVariants, tabsListVariants, tabsTabVariants, tooltipStyles, useAccordionItem, useAlertDialog, useAnimationOrchestrator, useAutoHeight, useCSSGridMorph, useCheckbox, useComboboxAnchor, useControlledState, useDataCard, useDataState, useDialog, useElementRegistry, useFLIPAnimation, useFLIPClipPath, useHighlight, useIsInView, useListFormat, useMenu, useMenuActiveValue, useMorph, useMorphContext, usePopover, usePositionCapture, useProgress, useReorder, useReorderPresence, useSwitch, useTooltip, useViewTransitions };
+export { ANIMATION_CONFIGS, ANIMATION_DEFAULTS, Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionStyles, AccordionTrigger, ActivityIcon, AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogPortal, AlertDialogStyles, AlertDialogTitle, AlertDialogTrigger, ArrowDownToLineIcon, ArrowUpIcon, AutoHeight, Badge, BellElectricIcon, BellIcon, BotIcon, BoxIcon, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Check, Checkbox, CheckboxIndicator, CircleCheckIcon, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, CornerBracket, CountingNumber, DataCard, DataCardActions, DataCardBracket, DataCardLabel, DataCardToggle, DataCardValue, DeleteIcon, Dialog, DialogBackdrop, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicToggle, DynamicToggleGroup, DynamicToggleOption, EASINGS, EFFECTS, Edit2, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Globe, Highlight, HighlightItem, HomeIcon, HugeIcons, IconWrapper, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Layers, LayoutPanelTopIcon, ListIcon, Menu, MenuArrow, MenuCheckboxItem, MenuCheckboxItemIndicator, MenuGroup, MenuGroupLabel, MenuHighlight, MenuHighlightItem, MenuItem, MenuPopup, MenuPortal, MenuPositioner, MenuRadioGroup, MenuRadioItem, MenuRadioItemIndicator, MenuSeparator, MenuShortcut, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Morph, MorphingPopover, MorphingPopoverWithTarget, PRESETS, Package, Palette, PlusIcon, Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverDescription, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, RESPONSIVE_CONFIGS, RefreshCw, ReorderRoot as Reorder, Rocket, Save, SearchIcon, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SettingsIcon, SlidingNumber, SlidingText, Slot, Switch, SwitchIcon, SwitchThumb, TIMING, TRANSFORMS, Tabs, TabsHighlight, TabsHighlightItem, TabsList, TabsPanel, TabsPanels, TabsTab, TerminalIcon, TextFlow, Textarea, Tooltip, TooltipArrow, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipProvider, TooltipTrigger, Trash2, TrendingDownIcon, TrendingUpIcon, Type, Upload, XIcon, accordionVariants, badgeVariants, bracketVariants, buttonStateStyles, buttonVariants, calculateSeparatorCoordination, cardVariants, checkboxStyles, cn, dataCardStyles, dataCardVariants, dialogStyles, dynamicToggleStyles, fieldVariants, getResponsiveDuration, getResponsiveStagger, getStrictContext, inputGroupAddonVariants, inputGroupButtonVariants, popoverStyles, progressStyles, shouldShowSeparator, switchStyles, tabsIndicatorVariants, tabsListVariants, tabsTabVariants, tooltipStyles, useAccordionItem, useAlertDialog, useAnimationOrchestrator, useAutoHeight, useCSSGridMorph, useCheckbox, useComboboxAnchor, useControlledState, useDataCard, useDataState, useDialog, useElementRegistry, useFLIPAnimation, useFLIPClipPath, useHighlight, useIsInView, useListFormat, useMenu, useMenuActiveValue, useMorph, useMorphContext, usePopover, usePositionCapture, useProgress, useReorder, useReorderPresence, useSwitch, useTooltip, useViewTransitions };

package/dist/react-ui/ui/DynamicToggle/DynamicToggle.styles.d.ts

@@ -0,0 +1,23 @@
+/**
+ * DynamicToggle style slots and types.
+ *
+ * Uses semantic CSS variables for all colors.
+ * Animation handled in DynamicToggle.css (clip-path, transitions).
+ *
+ * @module @mks2508/mks-ui/react/ui/DynamicToggle
+ */
+import type { StyleSlots } from '../../../core/types';
+/** Slot names for DynamicToggle */
+export type DynamicToggleSlot = 'root' | 'track' | 'option' | 'indicator' | 'group' | 'groupLabel' | 'groupIndicator';
+/**
+ * Default styles for each DynamicToggle slot.
+ *
+ * @example
+ * ```tsx
+ * <DynamicToggle slots={{ root: 'w-72', indicator: 'bg-primary' }}>
+ *   ...
+ * </DynamicToggle>
+ * ```
+ */
+export declare const dynamicToggleStyles: StyleSlots<DynamicToggleSlot>;
+//# sourceMappingURL=DynamicToggle.styles.d.ts.map

package/dist/react-ui/ui/DynamicToggle/DynamicToggle.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicToggle.styles.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DynamicToggle/DynamicToggle.styles.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,mCAAmC;AACnC,MAAM,MAAM,iBAAiB,GACzB,MAAM,GACN,OAAO,GACP,QAAQ,GACR,WAAW,GACX,OAAO,GACP,YAAY,GACZ,gBAAgB,CAAC;AAErB;;;;;;;;;GASG;AACH,eAAO,MAAM,mBAAmB,EAAE,UAAU,CAAC,iBAAiB,CAiC7D,CAAC"}

package/dist/react-ui/ui/DynamicToggle/DynamicToggle.styles.js

@@ -0,0 +1,39 @@
+//#region src/react-ui/ui/DynamicToggle/DynamicToggle.styles.ts
+/**
+* Default styles for each DynamicToggle slot.
+*
+* @example
+* ```tsx
+* <DynamicToggle slots={{ root: 'w-72', indicator: 'bg-primary' }}>
+*   ...
+* </DynamicToggle>
+* ```
+*/
+const dynamicToggleStyles = {
+	root: ["relative rounded-full border border-border bg-card", "p-[2px] select-none"].join(" "),
+	track: ["relative grid place-items-center", "w-full h-full"].join(" "),
+	option: [
+		"inline-grid place-items-center cursor-pointer",
+		"text-xs font-medium z-[2] h-full w-full",
+		"transition-[color,opacity] duration-[220ms]"
+	].join(" "),
+	indicator: [
+		"absolute w-1/2 left-0 top-0 bottom-0",
+		"bg-foreground rounded-full",
+		"pointer-events-none z-0"
+	].join(" "),
+	group: ["relative w-full h-full grid", "border border-transparent"].join(" "),
+	groupLabel: [
+		"absolute left-1/2 top-1/2 z-[2]",
+		"text-xs font-medium text-foreground",
+		"pointer-events-none"
+	].join(" "),
+	groupIndicator: [
+		"absolute left-1/2 top-0 bottom-0",
+		"bg-foreground rounded-full",
+		"pointer-events-none z-0"
+	].join(" ")
+};
+
+//#endregion
+export { dynamicToggleStyles };

package/dist/react-ui/ui/DynamicToggle/DynamicToggle.types.d.ts

@@ -0,0 +1,89 @@
+/**
+ * DynamicToggle type definitions.
+ *
+ * A CSS-animated toggle where one option can expand into sub-options.
+ * Uses hidden radio inputs + `:has(:checked)` for zero-JS animation.
+ *
+ * @module @mks2508/mks-ui/react/ui/DynamicToggle
+ */
+import type { SlotOverrides } from '../../../core/types';
+import type { DynamicToggleSlot } from './DynamicToggle.styles';
+/**
+ * Context shared between DynamicToggle root and its children.
+ */
+export type DynamicToggleContextType = {
+    /** Current selected value */
+    value: string;
+    /** Update selected value */
+    setValue: (value: string) => void;
+    /** Auto-generated radio group name */
+    groupName: string;
+    /** Whether a group child is active */
+    groupActive: boolean;
+};
+/**
+ * Props for the DynamicToggle root container.
+ *
+ * @example
+ * ```tsx
+ * <DynamicToggle value="tree" onValueChange={setVal}>
+ *   <DynamicToggleOption value="tree">Tree</DynamicToggleOption>
+ *   <DynamicToggleGroup label="Changes">
+ *     <DynamicToggleOption value="flat">Flat</DynamicToggleOption>
+ *     <DynamicToggleOption value="grouped">Grouped</DynamicToggleOption>
+ *   </DynamicToggleGroup>
+ * </DynamicToggle>
+ * ```
+ */
+export interface IDynamicToggleProps {
+    /** Controlled value */
+    value?: string;
+    /** Uncontrolled default value */
+    defaultValue?: string;
+    /** Change callback */
+    onValueChange?: (value: string) => void;
+    /** Slot class overrides */
+    slots?: SlotOverrides<DynamicToggleSlot>;
+    /** Additional class for the root */
+    className?: string;
+    /** DynamicToggleOption and DynamicToggleGroup children */
+    children: React.ReactNode;
+}
+/**
+ * Props for a single toggle option (top-level or inside a group).
+ *
+ * @example
+ * ```tsx
+ * <DynamicToggleOption value="tree">Tree</DynamicToggleOption>
+ * ```
+ */
+export interface IDynamicToggleOptionProps {
+    /** Value this option represents */
+    value: string;
+    /** Label content */
+    children: React.ReactNode;
+    /** Additional class */
+    className?: string;
+}
+/**
+ * Props for an expandable group of options.
+ * When none of the group's options are active, shows the collapsed `label`.
+ * When one is active, expands to show all sub-options.
+ *
+ * @example
+ * ```tsx
+ * <DynamicToggleGroup label="Changes">
+ *   <DynamicToggleOption value="flat">Flat</DynamicToggleOption>
+ *   <DynamicToggleOption value="grouped">Grouped</DynamicToggleOption>
+ * </DynamicToggleGroup>
+ * ```
+ */
+export interface IDynamicToggleGroupProps {
+    /** Label shown when collapsed */
+    label: string;
+    /** DynamicToggleOption children */
+    children: React.ReactNode;
+    /** Additional class */
+    className?: string;
+}
+//# sourceMappingURL=DynamicToggle.types.d.ts.map

package/dist/react-ui/ui/DynamicToggle/DynamicToggle.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicToggle.types.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DynamicToggle/DynamicToggle.types.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAEhE;;GAEG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,sCAAsC;IACtC,SAAS,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,mBAAmB;IAClC,uBAAuB;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sBAAsB;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,2BAA2B;IAC3B,KAAK,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACzC,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,yBAAyB;IACxC,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,wBAAwB;IACvC,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/react-ui/ui/DynamicToggle/index.d.ts

@@ -0,0 +1,29 @@
+import type { IDynamicToggleProps, IDynamicToggleOptionProps, IDynamicToggleGroupProps } from './DynamicToggle.types';
+/**
+ * Root container — pill-shaped toggle control.
+ *
+ * @param props - Component props
+ * @returns React component
+ */
+declare function DynamicToggle({ slots, className, children, ...props }: IDynamicToggleProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * A single toggle option — renders a hidden radio + visible label.
+ * Can be used at the top level or inside a DynamicToggleGroup.
+ *
+ * @param props - Component props
+ * @returns React component
+ */
+declare function DynamicToggleOption({ value, children, className }: IDynamicToggleOptionProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * An expandable group of options. Shows `label` when collapsed,
+ * expands to show sub-options when one is active.
+ *
+ * @param props - Component props
+ * @returns React component
+ */
+declare function DynamicToggleGroup({ label, children, className }: IDynamicToggleGroupProps): import("react/jsx-runtime").JSX.Element;
+export { DynamicToggle, DynamicToggleOption, DynamicToggleGroup };
+export type { IDynamicToggleProps, IDynamicToggleOptionProps, IDynamicToggleGroupProps, DynamicToggleContextType, } from './DynamicToggle.types';
+export type { DynamicToggleSlot } from './DynamicToggle.styles';
+export { dynamicToggleStyles } from './DynamicToggle.styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/react-ui/ui/DynamicToggle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-ui/ui/DynamicToggle/index.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAEV,mBAAmB,EACnB,yBAAyB,EACzB,wBAAwB,EACzB,MAAM,uBAAuB,CAAC;AAyD/B;;;;;GAKG;AACH,iBAAS,aAAa,CAAC,EACrB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAiDrB;AAMD;;;;;;GAMG;AACH,iBAAS,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,yBAAyB,2CA0BrF;AAMD;;;;;;GAMG;AACH,iBAAS,kBAAkB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,wBAAwB,2CAqBnF;AAMD,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;AAElE,YAAY,EACV,mBAAmB,EACnB,yBAAyB,EACzB,wBAAwB,EACxB,wBAAwB,GACzB,MAAM,uBAAuB,CAAC;AAE/B,YAAY,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/react-ui/ui/DynamicToggle/index.js

@@ -0,0 +1,169 @@
+'use client';
+
+import { cn } from "../../lib/utils.js";
+import { getStrictContext } from "../../lib/get-strict-context.js";
+import { useControlledState } from "../../hooks/State/UseControlledState.js";
+import { dynamicToggleStyles } from "./DynamicToggle.styles.js";
+import * as React$1 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/ui/DynamicToggle/index.tsx
+/**
+* DynamicToggle — CSS-animated toggle where one option expands into sub-options.
+*
+* Uses hidden radio inputs + `:has(:checked)` for zero-JS animation.
+* The indicator slides between options, and group options expand/collapse
+* with a clip-path reveal animation.
+*
+* @module @mks2508/mks-ui/react/ui/DynamicToggle
+*
+* @example
+* ```tsx
+* <DynamicToggle value="tree" onValueChange={setVal}>
+*   <DynamicToggleOption value="tree">Tree</DynamicToggleOption>
+*   <DynamicToggleGroup label="Changes">
+*     <DynamicToggleOption value="flat">Flat</DynamicToggleOption>
+*     <DynamicToggleOption value="grouped">Grouped</DynamicToggleOption>
+*   </DynamicToggleGroup>
+* </DynamicToggle>
+* ```
+*/
+const DT_CSS_ID = "mks-dynamic-toggle-css";
+/** Reads the CSS file content at build time via rolldown */
+const DT_CSS = `
+:root{--dt-duration:0.22s;--dt-ease:cubic-bezier(0.22,0.61,0.36,1);--dt-drop-off:0.45}
+[data-slot="dt-track"]{grid-template-columns:repeat(4,1fr)}
+[data-slot="dt-track"]>label:first-of-type,[data-slot="dt-group"]{grid-column:span 2}
+[data-slot="dt-indicator"]{transition:translate var(--dt-duration) var(--dt-ease)}
+[data-slot="dt-track"]:has(>input:checked) [data-slot="dt-indicator"]{translate:0 0}
+[data-slot="dt-track"]:not(:has(>input:checked)) [data-slot="dt-indicator"]{translate:100% 0}
+[data-slot="dt-track"]:has(>input:checked)>label{color:var(--card)}
+[data-slot="dt-track"]:not(:has(>input:checked))>label{color:var(--foreground);opacity:var(--dt-drop-off)}
+[data-slot="dt-group"]{container-type:size;grid-template-columns:1fr 1fr}
+[data-slot="dt-group-label"]{translate:-50% -80%;transition:translate var(--dt-duration) var(--dt-ease),scale var(--dt-duration) var(--dt-ease)}
+[data-slot="dt-group"]:has(input:checked) [data-slot="dt-group-label"]{translate:-50% -250%;scale:0.85}
+[data-slot="dt-group-indicator"]{transition:translate var(--dt-duration) var(--dt-ease),clip-path var(--dt-duration) var(--dt-ease),background var(--dt-duration) var(--dt-ease);clip-path:inset(73cqh calc(50% + 1px) calc(27cqh - 2px) calc(50% - 3px) round 100px);translate:-50% 0;background:var(--foreground)}
+[data-slot="dt-group"]:has(input:checked) [data-slot="dt-group-indicator"]{background:var(--card);clip-path:inset(0 0 0 0 round 100px)}
+[data-slot="dt-group"]:has(input:nth-of-type(1):checked) [data-slot="dt-group-indicator"]{translate:-100% 0}
+[data-slot="dt-group"]:has(input:nth-of-type(2):checked) [data-slot="dt-group-indicator"]{translate:0 0}
+[data-slot="dt-group"] label{color:var(--muted-foreground);transition:color var(--dt-duration) var(--dt-ease),opacity var(--dt-duration) var(--dt-ease)}
+[data-slot="dt-group"] label span{transition:scale var(--dt-duration) var(--dt-ease)}
+[data-slot="dt-track"]:has(>input:checked) [data-slot="dt-group"] label{color:var(--muted-foreground)}
+[data-slot="dt-group"]:has(input:checked) label{color:var(--muted-foreground);opacity:0.75}
+[data-slot="dt-group"]:has(input:nth-of-type(1):checked) label:nth-of-type(1),[data-slot="dt-group"]:has(input:nth-of-type(2):checked) label:nth-of-type(2){color:var(--foreground);opacity:1}
+[data-slot="dt-group"] label:nth-of-type(1) span{scale:0.75;transform-origin:150% 150%}
+[data-slot="dt-group"] label:nth-of-type(2) span{scale:0.75;transform-origin:-65% 150%}
+[data-slot="dt-group"]:has(input:checked) label span{scale:1}
+[data-slot="dt-radio"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
+`;
+function useDynamicToggleCSS() {
+	React$1.useEffect(() => {
+		if (typeof document === "undefined") return;
+		if (document.getElementById(DT_CSS_ID)) return;
+		const style = document.createElement("style");
+		style.id = DT_CSS_ID;
+		style.textContent = DT_CSS;
+		document.head.appendChild(style);
+	}, []);
+}
+const [DynamicToggleProvider, useDynamicToggle] = getStrictContext("DynamicToggleContext");
+/**
+* Root container — pill-shaped toggle control.
+*
+* @param props - Component props
+* @returns React component
+*/
+function DynamicToggle({ slots, className, children, ...props }) {
+	useDynamicToggleCSS();
+	const [value, setValue] = useControlledState({
+		value: props.value,
+		defaultValue: props.defaultValue ?? "",
+		onChange: props.onValueChange
+	});
+	const groupName = React$1.useId();
+	const groupActive = React$1.useMemo(() => {
+		const vals = [];
+		React$1.Children.forEach(children, (child) => {
+			if (React$1.isValidElement(child) && child.type === DynamicToggleGroup) React$1.Children.forEach(child.props.children, (gc) => {
+				if (React$1.isValidElement(gc) && gc.props.value) vals.push(gc.props.value);
+			});
+		});
+		return vals;
+	}, [children]).includes(value);
+	return /* @__PURE__ */ jsx(DynamicToggleProvider, {
+		value: {
+			value,
+			setValue,
+			groupName,
+			groupActive
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "dt-root",
+			"data-group-active": groupActive || void 0,
+			className: cn(dynamicToggleStyles.root, slots?.root, className),
+			children: /* @__PURE__ */ jsxs("div", {
+				"data-slot": "dt-track",
+				className: cn(dynamicToggleStyles.track, slots?.track),
+				children: [/* @__PURE__ */ jsx("div", {
+					"data-slot": "dt-indicator",
+					className: cn(dynamicToggleStyles.indicator, slots?.indicator)
+				}), children]
+			})
+		})
+	});
+}
+/**
+* A single toggle option — renders a hidden radio + visible label.
+* Can be used at the top level or inside a DynamicToggleGroup.
+*
+* @param props - Component props
+* @returns React component
+*/
+function DynamicToggleOption({ value, children, className }) {
+	const ctx = useDynamicToggle();
+	const id = React$1.useId();
+	const isActive = ctx.value === value;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("label", {
+		htmlFor: id,
+		"data-slot": "dt-option",
+		"data-active": isActive || void 0,
+		className: cn(dynamicToggleStyles.option, className),
+		children: /* @__PURE__ */ jsx("span", { children })
+	}), /* @__PURE__ */ jsx("input", {
+		"data-slot": "dt-radio",
+		type: "radio",
+		name: ctx.groupName,
+		id,
+		value,
+		checked: isActive,
+		onChange: () => ctx.setValue(value)
+	})] });
+}
+/**
+* An expandable group of options. Shows `label` when collapsed,
+* expands to show sub-options when one is active.
+*
+* @param props - Component props
+* @returns React component
+*/
+function DynamicToggleGroup({ label, children, className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "dt-group",
+		className: cn(dynamicToggleStyles.group, className),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"data-slot": "dt-group-label",
+				className: dynamicToggleStyles.groupLabel,
+				children: label
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"data-slot": "dt-group-indicator",
+				className: dynamicToggleStyles.groupIndicator
+			}),
+			children
+		]
+	});
+}
+
+//#endregion
+export { DynamicToggle, DynamicToggleGroup, DynamicToggleOption };

package/dist/react-ui/ui/index.d.ts

@@ -30,4 +30,5 @@ export * from './Separator';
 export * from './Textarea';
 export * from './DataCard';
 export * from './TextFlow';
+export * from './DynamicToggle';
 //# sourceMappingURL=index.d.ts.map

package/dist/react-ui/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react-ui/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAG1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAG3B,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react-ui/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAG1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAG3B,cAAc,YAAY,CAAC;AAG3B,cAAc,iBAAiB,CAAC"}

package/dist/react-ui/ui/index.js

@@ -39,3 +39,5 @@ import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScro
 import { dataCardStyles, dataCardVariants } from "./DataCard/DataCard.styles.js";
 import { DataCard, DataCardActions, DataCardBracket, DataCardLabel, DataCardToggle, DataCardValue, useDataCard } from "./DataCard/index.js";
 import { TextFlow } from "./TextFlow/index.js";
+import { dynamicToggleStyles } from "./DynamicToggle/DynamicToggle.styles.js";
+import { DynamicToggle, DynamicToggleGroup, DynamicToggleOption } from "./DynamicToggle/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mks2508/mks-ui",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "UI component library - Shadcn/Animate UI based with DevEnv components",
   "type": "module",
   "main": "./dist/index.js",

package/src/react-ui/ui/DynamicToggle/DynamicToggle.css

@@ -0,0 +1,150 @@
+/**
+ * DynamicToggle — CSS-only animated transitions.
+ *
+ * Ported from @jh3yy codepen. All colors via CSS variables (semantic tokens).
+ * Uses :has(:checked) for state-driven animation.
+ * container-type: size on group for cqh units in clip-path.
+ */
+
+:root {
+  --dt-duration: 0.22s;
+  --dt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
+  --dt-drop-off: 0.45;
+}
+
+/* ── Track layout ── */
+[data-slot="dt-track"] {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+[data-slot="dt-track"] > label:first-of-type,
+[data-slot="dt-group"] {
+  grid-column: span 2;
+}
+
+/* ── Main indicator slide ── */
+[data-slot="dt-indicator"] {
+  transition: translate var(--dt-duration) var(--dt-ease);
+}
+
+/* When primary (non-group) is checked → indicator on left */
+[data-slot="dt-track"]:has(> input:checked) [data-slot="dt-indicator"] {
+  translate: 0 0;
+}
+
+/* When nothing in track is checked → group is active → indicator slides right */
+[data-slot="dt-track"]:not(:has(> input:checked)) [data-slot="dt-indicator"] {
+  translate: 100% 0;
+}
+
+/* ── Primary option text ── */
+[data-slot="dt-track"]:has(> input:checked) > label {
+  color: var(--card);
+}
+
+[data-slot="dt-track"]:not(:has(> input:checked)) > label {
+  color: var(--foreground);
+  opacity: var(--dt-drop-off);
+}
+
+/* ── Group container ── */
+[data-slot="dt-group"] {
+  container-type: size;
+  grid-template-columns: 1fr 1fr;
+}
+
+/* ── Group collapsed label ("Changes") ── */
+[data-slot="dt-group-label"] {
+  translate: -50% -80%;
+  transition: translate var(--dt-duration) var(--dt-ease),
+              scale var(--dt-duration) var(--dt-ease);
+}
+
+/* When group is active → label moves up and shrinks */
+[data-slot="dt-group"]:has(input:checked) [data-slot="dt-group-label"] {
+  translate: -50% -250%;
+  scale: 0.85;
+}
+
+/* ── Group internal indicator ── */
+[data-slot="dt-group-indicator"] {
+  transition: translate var(--dt-duration) var(--dt-ease),
+              clip-path var(--dt-duration) var(--dt-ease),
+              background var(--dt-duration) var(--dt-ease);
+  /* Collapsed: clip to tiny pill in center */
+  clip-path: inset(73cqh calc(50% + 1px) calc(27cqh - 2px) calc(50% - 3px) round 100px);
+  translate: -50% 0;
+  background: var(--foreground);
+}
+
+/* When group is active → indicator expands and positions */
+[data-slot="dt-group"]:has(input:checked) [data-slot="dt-group-indicator"] {
+  background: var(--card);
+  clip-path: inset(0 0 0 0 round 100px);
+}
+
+/* First sub-option checked → indicator left */
+[data-slot="dt-group"]:has(input:nth-of-type(1):checked) [data-slot="dt-group-indicator"] {
+  translate: -100% 0;
+}
+
+/* Second sub-option checked → indicator right */
+[data-slot="dt-group"]:has(input:nth-of-type(2):checked) [data-slot="dt-group-indicator"] {
+  translate: 0 0;
+}
+
+/* ── Group option labels ── */
+[data-slot="dt-group"] label {
+  color: var(--muted-foreground);
+  transition: color var(--dt-duration) var(--dt-ease),
+              opacity var(--dt-duration) var(--dt-ease);
+}
+
+[data-slot="dt-group"] label span {
+  transition: scale var(--dt-duration) var(--dt-ease);
+}
+
+/* When group collapsed: hide sub-option labels */
+[data-slot="dt-track"]:has(> input:checked) [data-slot="dt-group"] label {
+  color: var(--muted-foreground);
+}
+
+/* When group active: show labels, highlight active one */
+[data-slot="dt-group"]:has(input:checked) label {
+  color: var(--muted-foreground);
+  opacity: 0.75;
+}
+
+[data-slot="dt-group"]:has(input:nth-of-type(1):checked) label:nth-of-type(1),
+[data-slot="dt-group"]:has(input:nth-of-type(2):checked) label:nth-of-type(2) {
+  color: var(--foreground);
+  opacity: 1;
+}
+
+/* Sub-option label scale animation */
+[data-slot="dt-group"] label:nth-of-type(1) span {
+  scale: 0.75;
+  transform-origin: 150% 150%;
+}
+
+[data-slot="dt-group"] label:nth-of-type(2) span {
+  scale: 0.75;
+  transform-origin: -65% 150%;
+}
+
+[data-slot="dt-group"]:has(input:checked) label span {
+  scale: 1;
+}
+
+/* ── Screen reader only (hidden radios) ── */
+[data-slot="dt-radio"] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

package/src/react-ui/ui/DynamicToggle/DynamicToggle.styles.ts

@@ -0,0 +1,65 @@
+/**
+ * DynamicToggle style slots and types.
+ *
+ * Uses semantic CSS variables for all colors.
+ * Animation handled in DynamicToggle.css (clip-path, transitions).
+ *
+ * @module @mks2508/mks-ui/react/ui/DynamicToggle
+ */
+
+import type { StyleSlots } from '@/core/types';
+
+/** Slot names for DynamicToggle */
+export type DynamicToggleSlot =
+  | 'root'
+  | 'track'
+  | 'option'
+  | 'indicator'
+  | 'group'
+  | 'groupLabel'
+  | 'groupIndicator';
+
+/**
+ * Default styles for each DynamicToggle slot.
+ *
+ * @example
+ * ```tsx
+ * <DynamicToggle slots={{ root: 'w-72', indicator: 'bg-primary' }}>
+ *   ...
+ * </DynamicToggle>
+ * ```
+ */
+export const dynamicToggleStyles: StyleSlots<DynamicToggleSlot> = {
+  root: [
+    'relative rounded-full border border-border bg-card',
+    'p-[2px] select-none',
+  ].join(' '),
+  track: [
+    'relative grid place-items-center',
+    'w-full h-full',
+  ].join(' '),
+  option: [
+    'inline-grid place-items-center cursor-pointer',
+    'text-xs font-medium z-[2] h-full w-full',
+    'transition-[color,opacity] duration-[220ms]',
+  ].join(' '),
+  indicator: [
+    'absolute w-1/2 left-0 top-0 bottom-0',
+    'bg-foreground rounded-full',
+    'pointer-events-none z-0',
+  ].join(' '),
+  group: [
+    'relative w-full h-full grid',
+    'border border-transparent',
+  ].join(' '),
+  groupLabel: [
+    'absolute left-1/2 top-1/2 z-[2]',
+    'text-xs font-medium text-foreground',
+    'pointer-events-none',
+  ].join(' '),
+  groupIndicator: [
+    'absolute left-1/2 top-0 bottom-0',
+    'bg-foreground rounded-full',
+    'pointer-events-none z-0',
+  ].join(' '),
+};

package/src/react-ui/ui/DynamicToggle/DynamicToggle.types.ts

@@ -0,0 +1,93 @@
+/**
+ * DynamicToggle type definitions.
+ *
+ * A CSS-animated toggle where one option can expand into sub-options.
+ * Uses hidden radio inputs + `:has(:checked)` for zero-JS animation.
+ *
+ * @module @mks2508/mks-ui/react/ui/DynamicToggle
+ */
+
+import type { SlotOverrides } from '@/core/types';
+import type { DynamicToggleSlot } from './DynamicToggle.styles';
+
+/**
+ * Context shared between DynamicToggle root and its children.
+ */
+export type DynamicToggleContextType = {
+  /** Current selected value */
+  value: string;
+  /** Update selected value */
+  setValue: (value: string) => void;
+  /** Auto-generated radio group name */
+  groupName: string;
+  /** Whether a group child is active */
+  groupActive: boolean;
+};
+
+/**
+ * Props for the DynamicToggle root container.
+ *
+ * @example
+ * ```tsx
+ * <DynamicToggle value="tree" onValueChange={setVal}>
+ *   <DynamicToggleOption value="tree">Tree</DynamicToggleOption>
+ *   <DynamicToggleGroup label="Changes">
+ *     <DynamicToggleOption value="flat">Flat</DynamicToggleOption>
+ *     <DynamicToggleOption value="grouped">Grouped</DynamicToggleOption>
+ *   </DynamicToggleGroup>
+ * </DynamicToggle>
+ * ```
+ */
+export interface IDynamicToggleProps {
+  /** Controlled value */
+  value?: string;
+  /** Uncontrolled default value */
+  defaultValue?: string;
+  /** Change callback */
+  onValueChange?: (value: string) => void;
+  /** Slot class overrides */
+  slots?: SlotOverrides<DynamicToggleSlot>;
+  /** Additional class for the root */
+  className?: string;
+  /** DynamicToggleOption and DynamicToggleGroup children */
+  children: React.ReactNode;
+}
+
+/**
+ * Props for a single toggle option (top-level or inside a group).
+ *
+ * @example
+ * ```tsx
+ * <DynamicToggleOption value="tree">Tree</DynamicToggleOption>
+ * ```
+ */
+export interface IDynamicToggleOptionProps {
+  /** Value this option represents */
+  value: string;
+  /** Label content */
+  children: React.ReactNode;
+  /** Additional class */
+  className?: string;
+}
+
+/**
+ * Props for an expandable group of options.
+ * When none of the group's options are active, shows the collapsed `label`.
+ * When one is active, expands to show all sub-options.
+ *
+ * @example
+ * ```tsx
+ * <DynamicToggleGroup label="Changes">
+ *   <DynamicToggleOption value="flat">Flat</DynamicToggleOption>
+ *   <DynamicToggleOption value="grouped">Grouped</DynamicToggleOption>
+ * </DynamicToggleGroup>
+ * ```
+ */
+export interface IDynamicToggleGroupProps {
+  /** Label shown when collapsed */
+  label: string;
+  /** DynamicToggleOption children */
+  children: React.ReactNode;
+  /** Additional class */
+  className?: string;
+}

package/src/react-ui/ui/DynamicToggle/index.tsx

@@ -0,0 +1,240 @@
+'use client';
+
+/**
+ * DynamicToggle — CSS-animated toggle where one option expands into sub-options.
+ *
+ * Uses hidden radio inputs + `:has(:checked)` for zero-JS animation.
+ * The indicator slides between options, and group options expand/collapse
+ * with a clip-path reveal animation.
+ *
+ * @module @mks2508/mks-ui/react/ui/DynamicToggle
+ *
+ * @example
+ * ```tsx
+ * <DynamicToggle value="tree" onValueChange={setVal}>
+ *   <DynamicToggleOption value="tree">Tree</DynamicToggleOption>
+ *   <DynamicToggleGroup label="Changes">
+ *     <DynamicToggleOption value="flat">Flat</DynamicToggleOption>
+ *     <DynamicToggleOption value="grouped">Grouped</DynamicToggleOption>
+ *   </DynamicToggleGroup>
+ * </DynamicToggle>
+ * ```
+ */
+
+import * as React from 'react';
+import { useControlledState } from '@/react-ui/hooks/State/UseControlledState';
+import { getStrictContext } from '@/react-ui/lib/get-strict-context';
+import { cn } from '@/react-ui/lib/utils';
+import { dynamicToggleStyles } from './DynamicToggle.styles';
+import type {
+  DynamicToggleContextType,
+  IDynamicToggleProps,
+  IDynamicToggleOptionProps,
+  IDynamicToggleGroupProps,
+} from './DynamicToggle.types';
+// ---------------------------------------------------------------------------
+// CSS injection (same pattern as Tabs — inject once into document head)
+// ---------------------------------------------------------------------------
+
+const DT_CSS_ID = 'mks-dynamic-toggle-css';
+
+/** Reads the CSS file content at build time via rolldown */
+const DT_CSS = `
+:root{--dt-duration:0.22s;--dt-ease:cubic-bezier(0.22,0.61,0.36,1);--dt-drop-off:0.45}
+[data-slot="dt-track"]{grid-template-columns:repeat(4,1fr)}
+[data-slot="dt-track"]>label:first-of-type,[data-slot="dt-group"]{grid-column:span 2}
+[data-slot="dt-indicator"]{transition:translate var(--dt-duration) var(--dt-ease)}
+[data-slot="dt-track"]:has(>input:checked) [data-slot="dt-indicator"]{translate:0 0}
+[data-slot="dt-track"]:not(:has(>input:checked)) [data-slot="dt-indicator"]{translate:100% 0}
+[data-slot="dt-track"]:has(>input:checked)>label{color:var(--card)}
+[data-slot="dt-track"]:not(:has(>input:checked))>label{color:var(--foreground);opacity:var(--dt-drop-off)}
+[data-slot="dt-group"]{container-type:size;grid-template-columns:1fr 1fr}
+[data-slot="dt-group-label"]{translate:-50% -80%;transition:translate var(--dt-duration) var(--dt-ease),scale var(--dt-duration) var(--dt-ease)}
+[data-slot="dt-group"]:has(input:checked) [data-slot="dt-group-label"]{translate:-50% -250%;scale:0.85}
+[data-slot="dt-group-indicator"]{transition:translate var(--dt-duration) var(--dt-ease),clip-path var(--dt-duration) var(--dt-ease),background var(--dt-duration) var(--dt-ease);clip-path:inset(73cqh calc(50% + 1px) calc(27cqh - 2px) calc(50% - 3px) round 100px);translate:-50% 0;background:var(--foreground)}
+[data-slot="dt-group"]:has(input:checked) [data-slot="dt-group-indicator"]{background:var(--card);clip-path:inset(0 0 0 0 round 100px)}
+[data-slot="dt-group"]:has(input:nth-of-type(1):checked) [data-slot="dt-group-indicator"]{translate:-100% 0}
+[data-slot="dt-group"]:has(input:nth-of-type(2):checked) [data-slot="dt-group-indicator"]{translate:0 0}
+[data-slot="dt-group"] label{color:var(--muted-foreground);transition:color var(--dt-duration) var(--dt-ease),opacity var(--dt-duration) var(--dt-ease)}
+[data-slot="dt-group"] label span{transition:scale var(--dt-duration) var(--dt-ease)}
+[data-slot="dt-track"]:has(>input:checked) [data-slot="dt-group"] label{color:var(--muted-foreground)}
+[data-slot="dt-group"]:has(input:checked) label{color:var(--muted-foreground);opacity:0.75}
+[data-slot="dt-group"]:has(input:nth-of-type(1):checked) label:nth-of-type(1),[data-slot="dt-group"]:has(input:nth-of-type(2):checked) label:nth-of-type(2){color:var(--foreground);opacity:1}
+[data-slot="dt-group"] label:nth-of-type(1) span{scale:0.75;transform-origin:150% 150%}
+[data-slot="dt-group"] label:nth-of-type(2) span{scale:0.75;transform-origin:-65% 150%}
+[data-slot="dt-group"]:has(input:checked) label span{scale:1}
+[data-slot="dt-radio"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
+`;
+
+function useDynamicToggleCSS() {
+  React.useEffect(() => {
+    if (typeof document === 'undefined') return;
+    if (document.getElementById(DT_CSS_ID)) return;
+    const style = document.createElement('style');
+    style.id = DT_CSS_ID;
+    style.textContent = DT_CSS;
+    document.head.appendChild(style);
+  }, []);
+}
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+
+const [DynamicToggleProvider, useDynamicToggle] =
+  getStrictContext<DynamicToggleContextType>('DynamicToggleContext');
+
+// ---------------------------------------------------------------------------
+// DynamicToggle (Root)
+// ---------------------------------------------------------------------------
+
+/**
+ * Root container — pill-shaped toggle control.
+ *
+ * @param props - Component props
+ * @returns React component
+ */
+function DynamicToggle({
+  slots,
+  className,
+  children,
+  ...props
+}: IDynamicToggleProps) {
+  useDynamicToggleCSS();
+
+  const [value, setValue] = useControlledState({
+    value: props.value,
+    defaultValue: props.defaultValue ?? '',
+    onChange: props.onValueChange,
+  });
+
+  const groupName = React.useId();
+
+  // Detect if group child is active (check children for group values)
+  const groupValues = React.useMemo(() => {
+    const vals: string[] = [];
+    React.Children.forEach(children, (child) => {
+      if (React.isValidElement<IDynamicToggleGroupProps>(child) && child.type === DynamicToggleGroup) {
+        React.Children.forEach(child.props.children, (gc) => {
+          if (React.isValidElement<IDynamicToggleOptionProps>(gc) && gc.props.value) {
+            vals.push(gc.props.value);
+          }
+        });
+      }
+    });
+    return vals;
+  }, [children]);
+
+  const groupActive = groupValues.includes(value);
+
+  return (
+    <DynamicToggleProvider value={{ value, setValue, groupName, groupActive }}>
+      <div
+        data-slot="dt-root"
+        data-group-active={groupActive || undefined}
+        className={cn(dynamicToggleStyles.root, slots?.root, className)}
+      >
+        <div
+          data-slot="dt-track"
+          className={cn(dynamicToggleStyles.track, slots?.track)}
+        >
+          {/* Main sliding indicator */}
+          <div
+            data-slot="dt-indicator"
+            className={cn(dynamicToggleStyles.indicator, slots?.indicator)}
+          />
+          {children}
+        </div>
+      </div>
+    </DynamicToggleProvider>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// DynamicToggleOption
+// ---------------------------------------------------------------------------
+
+/**
+ * A single toggle option — renders a hidden radio + visible label.
+ * Can be used at the top level or inside a DynamicToggleGroup.
+ *
+ * @param props - Component props
+ * @returns React component
+ */
+function DynamicToggleOption({ value, children, className }: IDynamicToggleOptionProps) {
+  const ctx = useDynamicToggle();
+  const id = React.useId();
+  const isActive = ctx.value === value;
+
+  return (
+    <>
+      <label
+        htmlFor={id}
+        data-slot="dt-option"
+        data-active={isActive || undefined}
+        className={cn(dynamicToggleStyles.option, className)}
+      >
+        <span>{children}</span>
+      </label>
+      <input
+        data-slot="dt-radio"
+        type="radio"
+        name={ctx.groupName}
+        id={id}
+        value={value}
+        checked={isActive}
+        onChange={() => ctx.setValue(value)}
+      />
+    </>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// DynamicToggleGroup
+// ---------------------------------------------------------------------------
+
+/**
+ * An expandable group of options. Shows `label` when collapsed,
+ * expands to show sub-options when one is active.
+ *
+ * @param props - Component props
+ * @returns React component
+ */
+function DynamicToggleGroup({ label, children, className }: IDynamicToggleGroupProps) {
+  return (
+    <div
+      data-slot="dt-group"
+      className={cn(dynamicToggleStyles.group, className)}
+    >
+      {/* Collapsed label */}
+      <span
+        data-slot="dt-group-label"
+        className={dynamicToggleStyles.groupLabel}
+      >
+        {label}
+      </span>
+      {/* Internal sliding indicator */}
+      <div
+        data-slot="dt-group-indicator"
+        className={dynamicToggleStyles.groupIndicator}
+      />
+      {children}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Exports
+// ---------------------------------------------------------------------------
+
+export { DynamicToggle, DynamicToggleOption, DynamicToggleGroup };
+
+export type {
+  IDynamicToggleProps,
+  IDynamicToggleOptionProps,
+  IDynamicToggleGroupProps,
+  DynamicToggleContextType,
+} from './DynamicToggle.types';
+
+export type { DynamicToggleSlot } from './DynamicToggle.styles';
+export { dynamicToggleStyles } from './DynamicToggle.styles';

package/src/react-ui/ui/index.ts

@@ -36,3 +36,6 @@ export * from './DataCard';
 
 // WAAPI-based components
 export * from './TextFlow';
+
+// CSS-animated components
+export * from './DynamicToggle';