4e: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1c21,"use client"; import * as React from "react"; import { Tabs as BaseTabs } from "@base-ui/react/tabs"; import { motion, AnimatePresence } from "motion/react"; import { Highlight, HighlightItem, } from "@/registry/optics/helpers/primitives/effects/highlight"; import { AutoHeight } from "@/registry/optics/helpers/primitives/effects/auto-height"; import { getStrictContext } from "@/registry/optics/lib/get-strict-context"; import { useControlledState } from "@/registry/optics/hooks/use-controlled-state"; import { cn } from "@/registry/optics/lib/utils"; // --- Internal Primitive Logic --- const [TabsProvider, useTabs] = getStrictContext("TabsContext"); const [TabsVariantProvider, useTabsVariant] = getStrictContext("TabsVariantContext"); function PrimitiveTabs(props = {}) { const [value, setValue] = useControlledState({ value: props?.value, defaultValue: props?.defaultValue, onChange: props?.onValueChange, }); return ( ); } function PrimitiveTabsHighlight({ transition = { type: "spring", stiffness: 200, damping: 25 }, ...props } = {}) { const { value } = useTabs(); return ( ); } function PrimitiveTabsList(props = {}) { return ; } function PrimitiveTabsHighlightItem(props = {}) { return ; } function PrimitiveTabsTab(props = {}) { return ; } function PrimitiveTabsPanel({ value = "", keepMounted = false, transition = { duration: 0.5, ease: "easeInOut" }, ...props } = {}) { return ( } keepMounted={keepMounted} value={value} /> ); } const defaultTransition = { type: "spring", stiffness: 200, damping: 30, }; function isAutoMode(props = {}) { return !props.mode || props.mode === "auto-height"; } function PrimitiveTabsPanels(props = {}) { const { value } = useTabs(); if (isAutoMode(props)) { const { children = null, transition = defaultTransition, ...autoProps } = props; return ( {children} ); } const { children = null, style = {}, transition = defaultTransition, ...layoutProps } = props; return ( {children} ); } // --- User-Facing Components --- function Tabs({ className = "", ...props } = {}) { return ( ); } function TabsList({ className = "", variant = "default", ...props } = {}) { const highlightStyles = { default: "absolute z-0 inset-0 border border-transparent rounded-md bg-background dark:border-input dark:bg-input/30 shadow-sm", outline: "absolute z-0 inset-0 border rounded-md dark:border-input dark:bg-input/30", underline: "absolute z-0 -bottom-0.25 left-0 right-0 h-0.5 bg-foreground", }; const listStyles = { default: "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]", outline: "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]", underline: "inline-flex h-9 w-fit items-center justify-center gap-1 border-b border-border", }; return ( ); } function TabsTab({ className = "", value = "", ...props } = {}) { const { variant } = useTabsVariant(); const triggerStyles = { default: "data-[selected]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", outline: "data-[selected]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", underline: "data-[selected]:text-foreground text-muted-foreground inline-flex h-full flex-1 items-center justify-center gap-1.5 w-full px-3 py-2 text-sm font-medium whitespace-nowrap transition-colors duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", }; return ( ); } // Aliases for backward compatibility const TabsTrigger = TabsTab; const TabsPanels = PrimitiveTabsPanels; // Original name was TabsPanels in previous version, but let's keep it consistent const TabsContents = PrimitiveTabsPanels; const TabsPanel = ({ className = "", ...props } = {}) => ( ); const TabsContent = TabsPanel; Tabs.displayName = "Tabs"; TabsList.displayName = "TabsList"; TabsTab.displayName = "TabsTab"; TabsTrigger.displayName = "TabsTrigger"; TabsPanels.displayName = "TabsPanels"; TabsContents.displayName = "TabsContents"; TabsPanel.displayName = "TabsPanel"; TabsContent.displayName = "TabsContent"; export { Tabs, TabsList, TabsTab, TabsTrigger, TabsPanels, TabsContents, TabsPanel, TabsContent, }; 4d:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui-components/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui-components%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui-components/react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L4e",null,{"namespace":"@optics","registryDependencies":["https://optics.agusmayol.com.ar/r/highlight.json","https://optics.agusmayol.com.ar/r/auto-height.json","https://optics.agusmayol.com.ar/r/get-strict-context.json","https://optics.agusmayol.com.ar/r/use-controlled-state.json","https://optics.agusmayol.com.ar/r/utils.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/optics/tabs.jsx","content":"$50","type":"registry:component","target":"components/optics/tabs.jsx"}],"className":"h-[70svh] min-h-80"}]]}]