4c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:Td25,import React, { createContext, useContext, useState } from 'react'; import { getToggleGroupItemState, getToggleStyleKeys, toggleGroupStyleKeys, toggleValueInList } from '../lib/core'; import type { ToggleGroupBaseProps, ToggleGroupItemBaseProps } from '../lib/core'; import styles from './toggle-group.module.scss'; type ToggleGroupValue = string | string[]; interface ToggleGroupContextValue { type: 'single' | 'multiple'; value: ToggleGroupValue; onItemClick: (itemValue: string) => void; } const ToggleGroupContext = createContext(null); function useToggleGroupContext(): ToggleGroupContextValue { const context = useContext(ToggleGroupContext); if (!context) { throw new Error('ToggleGroupItem must be used within .'); } return context; } export interface ToggleGroupProps extends React.HTMLAttributes, ToggleGroupBaseProps { value?: string | string[]; defaultValue?: string | string[]; onValueChange?: (value: string | string[]) => void; } const ToggleGroup = React.forwardRef(({ className = '', type = 'single', value, defaultValue, onValueChange, children, ...props }, ref) => { const [internalValue, setInternalValue] = useState(defaultValue ?? (type === 'single' ? '' : [])); const currentValue = value !== undefined ? value : internalValue; function handleItemClick(itemValue: string) { let next: ToggleGroupValue; if (type === 'single') { next = currentValue === itemValue ? '' : itemValue; } else { const list = Array.isArray(currentValue) ? currentValue : []; next = toggleValueInList(itemValue, list); } if (value === undefined) { setInternalValue(next); } onValueChange?.(next); } const context: ToggleGroupContextValue = { type, value: currentValue, onItemClick: handleItemClick }; return (

{children}

); }); ToggleGroup.displayName = 'ToggleGroup'; export interface ToggleGroupItemProps extends Omit, 'value'>, ToggleGroupItemBaseProps {} const ToggleGroupItem = React.forwardRef( ({ className = '', value, variant = 'default', size = 'default', disabled, children, ...props }, ref) => { const context = useToggleGroupContext(); const selected = context.type === 'single' ? context.value === value : Array.isArray(context.value) ? context.value.includes(value) : false; const state = getToggleGroupItemState(selected); const styleKeys = getToggleStyleKeys(variant, size); const classes = [styles[toggleGroupStyleKeys.item], styles[styleKeys.variant], styles[styleKeys.size], className].filter(Boolean).join(' '); return ( ); }, ); ToggleGroupItem.displayName = 'ToggleGroupItem'; export { ToggleGroup, ToggleGroupItem }; export default ToggleGroup; 4f:T86c,@use '../../../styles/variables/colors' as *; .root { display: inline-flex; width: fit-content; align-items: center; border-radius: $radius; &[data-orientation='horizontal'] { > *:not(:first-child) { border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; } > *:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } } &[data-orientation='vertical'] { flex-direction: column; align-items: stretch; > *:not(:first-child) { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; } > *:not(:last-child) { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } } } .item { display: inline-flex; align-items: center; justify-content: center; gap: $spacing-2; white-space: nowrap; border-radius: $radius; border: 1px solid transparent; font-size: $text-sm; font-weight: $font-medium; transition: color $transition-fast, background-color $transition-fast, border-color $transition-fast, box-shadow $transition-fast; outline: none; cursor: pointer; &:focus-visible { border-color: $ring; box-shadow: 0 0 0 3px color-mix(in srgb, $ring 50%, transparent); z-index: 1; } &:disabled { pointer-events: none; opacity: 0.5; cursor: not-allowed; } svg { pointer-events: none; flex-shrink: 0; width: 1rem; height: 1rem; } // 状态 &[data-state='on'] { background-color: $accent; color: $accent-foreground; } &[data-state='off'] { background-color: transparent; color: $foreground; &:hover:not(:disabled) { background-color: $muted; color: $muted-foreground; } } // 样式变体 &.variantOutline { border-color: $border; box-shadow: $shadow-sm; } &.variantGhost { background-color: transparent; &[data-state='on'] { background-color: $muted; color: $muted-foreground; } } // 尺寸变体 &.sizeDefault { height: 2.25rem; min-width: 2.25rem; padding: 0 $spacing-2; } &.sizeSm { height: 2rem; min-width: 2rem; padding: 0 $spacing-1_5; } &.sizeLg { height: 2.5rem; min-width: 2.5rem; padding: 0 $spacing-2_5; } } 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4c",null,{"namespace":"@tile-ui","registryDependencies":["@tile-ui/core","@tile-ui/styles"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"packages/react/src/components/toggle-group/toggle-group.tsx","content":"$4e","type":"registry:ui","target":"components/ui/toggle-group/toggle-group.tsx"},{"path":"packages/styles/scss/components/toggle-group.module.scss","content":"$4f","type":"registry:file","target":"components/ui/toggle-group/toggle-group.module.scss"},{"path":"packages/react/src/components/toggle-group/index.ts","content":"export { ToggleGroup, ToggleGroupItem, type ToggleGroupProps, type ToggleGroupItemProps } from './toggle-group';\n","type":"registry:ui","target":"components/ui/toggle-group/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]