4b: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"] 4c: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"] 4d:T15ca,import React, { createContext, useContext, useId, useState } from 'react'; import { getTabsListVariantKey, getTabsState, tabsStyleKeys } from '../lib/core'; import type { TabsBaseProps, TabsListBaseProps, TabsTriggerBaseProps, TabsContentBaseProps } from '../lib/core'; import styles from './tabs.module.scss'; interface TabsContextValue { value: string; orientation: 'horizontal' | 'vertical'; baseId: string; select: (value: string) => void; } const TabsContext = createContext(null); function useTabsContext(): TabsContextValue { const context = useContext(TabsContext); if (!context) { throw new Error('Tabs sub-components must be used within .'); } return context; } export interface TabsProps extends Omit, 'value' | 'defaultValue'>, TabsBaseProps {} const Tabs = React.forwardRef(({ className = '', value, defaultValue = '', orientation = 'horizontal', onValueChange, children, ...props }, ref) => { const [internalValue, setInternalValue] = useState(defaultValue); const currentValue = value !== undefined ? value : internalValue; const baseId = useId(); function select(next: string) { if (value === undefined) { setInternalValue(next); } onValueChange?.(next); } return (

{children}

); }); Tabs.displayName = 'Tabs'; export interface TabsListProps extends React.HTMLAttributes, TabsListBaseProps {} const TabsList = React.forwardRef(({ className = '', variant = 'default', children, onKeyDown, ...props }, ref) => { const context = useTabsContext(); const variantKey = getTabsListVariantKey(variant); const isVertical = context.orientation === 'vertical'; function handleKeyDown(event: React.KeyboardEvent) { onKeyDown?.(event); const nextKey = isVertical ? 'ArrowDown' : 'ArrowRight'; const prevKey = isVertical ? 'ArrowUp' : 'ArrowLeft'; const isNext = event.key === nextKey; const isPrev = event.key === prevKey; const isHome = event.key === 'Home'; const isEnd = event.key === 'End'; if (!isNext && !isPrev && !isHome && !isEnd) { return; } const triggers = Array.from(event.currentTarget.querySelectorAll('button[role="tab"]')).filter((trigger) => !trigger.disabled); if (triggers.length === 0) { return; } const currentIndex = triggers.indexOf(document.activeElement as HTMLButtonElement); let nextIndex: number; if (isHome) { nextIndex = 0; } else if (isEnd) { nextIndex = triggers.length - 1; } else { const direction = isNext ? 1 : -1; nextIndex = (currentIndex + direction + triggers.length) % triggers.length; } const nextTrigger = triggers[nextIndex]; nextTrigger?.focus(); // 自动激活：方向键移动焦点时同步选中对应标签页。 const nextValue = nextTrigger?.getAttribute('data-value'); if (nextValue !== null && nextValue !== undefined) { context.select(nextValue); } event.preventDefault(); } return (

{children}

); }); TabsList.displayName = 'TabsList'; export interface TabsTriggerProps extends Omit, 'value'>, TabsTriggerBaseProps { value: string; } const TabsTrigger = React.forwardRef(({ className = '', value, disabled = false, children, onClick, ...props }, ref) => { const context = useTabsContext(); const active = context.value === value; const state = getTabsState(active); const triggerId = `${context.baseId}-trigger-${value}`; const contentId = `${context.baseId}-content-${value}`; function handleClick(event: React.MouseEvent) { context.select(value); onClick?.(event); } return ( ); }); TabsTrigger.displayName = 'TabsTrigger'; export interface TabsContentProps extends React.HTMLAttributes, TabsContentBaseProps { value: string; } const TabsContent = React.forwardRef(({ className = '', value, children, ...props }, ref) => { const context = useTabsContext(); const active = context.value === value; const state = getTabsState(active); const triggerId = `${context.baseId}-trigger-${value}`; const contentId = `${context.baseId}-content-${value}`; return ( ); }); TabsContent.displayName = 'TabsContent'; export { Tabs, TabsList, TabsTrigger, TabsContent }; export default Tabs; 4e:T934,@use '../../../styles/variables/colors' as *; .root { display: flex; gap: $spacing-2; &[data-orientation='horizontal'] { flex-direction: column; } &[data-orientation='vertical'] { flex-direction: row; } } .list { display: inline-flex; width: fit-content; align-items: center; justify-content: center; border-radius: $radius-lg; padding: 3px; background-color: $muted; color: $muted-foreground; transition: background-color $transition-fast; outline: none; &:focus-visible { box-shadow: 0 0 0 2px $background, 0 0 0 4px $ring; } [data-orientation='horizontal'] & { height: 2.25rem; } [data-orientation='vertical'] & { height: fit-content; flex-direction: column; } // 变体 &.variantLine { gap: $spacing-1; background-color: transparent; border-radius: 0; .trigger[data-state='active'] { background-color: transparent; box-shadow: none; &::after { content: ''; position: absolute; background-color: $foreground; } } &[data-orientation='horizontal'] .trigger[data-state='active']::after { left: 0; right: 0; bottom: -5px; height: 2px; } &[data-orientation='vertical'] .trigger[data-state='active']::after { top: 0; bottom: 0; right: -4px; width: 2px; } } } .trigger { position: relative; display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: $spacing-1_5; border: 1px solid transparent; border-radius: $radius-md; padding: $spacing-1 $spacing-2; font-size: $text-sm; font-weight: $font-medium; white-space: nowrap; color: $muted-foreground; transition: color $transition-fast, box-shadow $transition-fast; outline: none; user-select: none; &:hover { color: $foreground; } &:focus-visible { border-color: $ring; box-shadow: 0 0 0 3px color-mix(in srgb, $ring 50%, transparent); } &:disabled { pointer-events: none; opacity: 0.5; } &[data-state='active'] { background-color: $background; color: $foreground; box-shadow: $shadow-sm; } [data-orientation='vertical'] & { width: 100%; justify-content: flex-start; } svg { pointer-events: none; width: 1rem; height: 1rem; flex-shrink: 0; } } .content { flex: 1; border-radius: $radius; outline: none; &:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, $ring 50%, transparent); } } 4a:["$","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,["$","$L4b",null,{"namespace":"@tile-ui","registryDependencies":["@tile-ui/core","@tile-ui/styles"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"packages/react/src/components/tabs/tabs.tsx","content":"$4d","type":"registry:ui","target":"components/ui/tabs/tabs.tsx"},{"path":"packages/styles/scss/components/tabs.module.scss","content":"$4e","type":"registry:file","target":"components/ui/tabs/tabs.module.scss"},{"path":"packages/react/src/components/tabs/index.ts","content":"export { Tabs, TabsList, TabsTrigger, TabsContent, type TabsProps, type TabsListProps, type TabsTriggerProps, type TabsContentProps } from './tabs';\n","type":"registry:ui","target":"components/ui/tabs/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]