{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "tabs", "title": "Tabs", "description": "The key stretches across the list to the tab you pick, and the panel slides in from that side.", "dependencies": [ "@ui-sdk/core@0.1.0-beta.2", "@ui-sdk/react@0.1.0-beta.2" ], "registryDependencies": [ "@keyframery/motion" ], "files": [ { "path": "registry/components/keyframery/primitives/tabs.tsx", "content": "\"use client\"\n\n/* Animated drop-in for `@ui-sdk/react/tabs`: same parts, same props. Swap the import and keep your code.\n This file adds motion only. Colours, radii, shadows and spacing stay yours. */\n\nimport {\n TabsIndicator as TabsIndicatorPart,\n TabsList as TabsListPart,\n TabsPanel as TabsPanelPart,\n TabsTab as TabsTabPart,\n} from \"@ui-sdk/react/tabs\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport * from \"@ui-sdk/react/tabs\"\n\nfunction TabsList({ className, ...props }: React.ComponentProps) {\n return \n}\n\nfunction TabsTab({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\n/* Stretch: every edge of the marker is tracked twice, once quickly and once slowly with a\n 70ms lag. Each edge then uses whichever of the two is further out, so the edge facing the\n direction of travel leads and the opposite edge follows: the marker stretches toward where\n it is going, then closes up. (No spring here: an overshoot would push it out of its track.) It needs no direction attribute, so it is right on the\n first move and in both directions. The registered properties are inherited, so anything\n inside the indicator can read the same moving edges. */\nconst stretchProperties = [\"la\", \"lb\", \"ra\", \"rb\", \"ta\", \"tb\", \"ba\", \"bb\"]\n .map((n) => `@property --kf-${n}{syntax:\"\";inherits:true;initial-value:0px}`)\n .join(\"\")\n\nfunction TabsIndicator({ className, ...props }: React.ComponentProps) {\n /* Hold the transitions until UI SDK has measured the first tab, so the marker\n is simply there on load instead of sliding in from the corner. */\n const [ready, setReady] = React.useState(false)\n React.useEffect(() => {\n const timer = setTimeout(() => setReady(true), 150)\n return () => clearTimeout(timer)\n }, [])\n\n return (\n <>\n \n \n \n )\n}\n\n/* Optional: put the panels inside TabsPanels and the one leaving overlaps the one\n arriving. Without it, the old panel leaves at once and the new one still animates in. */\nfunction TabsPanels({ className, ...props }: React.ComponentProps<\"div\">) {\n return
\n}\n\nfunction TabsPanel({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\nexport { TabsIndicator, TabsList, TabsPanel, TabsPanels, TabsTab }\n", "type": "registry:component", "target": "components/keyframery/primitives/tabs.tsx" }, { "path": "registry/components/keyframery/tabs.tsx", "content": "\"use client\"\n\n/* Styled tabs: the animated primitive plus the Keyframery look. */\n\nimport * as React from \"react\"\n\nimport {\n Tabs as TabsRoot,\n TabsIndicator as TabsIndicatorPrimitive,\n TabsList as TabsListPrimitive,\n TabsPanel as TabsPanelPrimitive,\n TabsPanels as TabsPanelsPrimitive,\n TabsTab as TabsTabPrimitive,\n} from \"@/components/keyframery/primitives/tabs\"\nimport { cn } from \"@/lib/utils\"\n\n/* One box shared by the real tab and its copy inside the key, so both lay out identically. */\nconst tabBox =\n \"inline-flex h-8 shrink-0 items-center justify-center gap-1.5 rounded-[9px] px-3 text-[13px] leading-none font-medium whitespace-nowrap [&_svg]:size-3.5 [&_svg]:shrink-0\"\n\nconst listLayout =\n \"flex items-center gap-0.5 p-1 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch\"\n\nfunction Tabs({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction TabsList({\n className,\n children,\n ...props\n}: Omit, \"children\"> & {\n children?: React.ReactNode\n}) {\n return (\n \n {children}\n {/* The key: a raised surface that stretches toward the tab you pick. */}\n \n {/* A copy of the labels in the selected colour, clipped to the key. It is offset by the\n key's own moving edges, so it stays still while the key passes over it. */}\n \n \n {React.Children.map(children, (child) =>\n React.isValidElement<{ children?: React.ReactNode }>(child) ? (\n {child.props.children}\n ) : null,\n )}\n \n \n \n \n )\n}\n\nfunction TabsTab({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction TabsPanels({ className, ...props }: React.ComponentProps) {\n return \n}\n\nfunction TabsPanel({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\nexport { Tabs, TabsList, TabsPanel, TabsPanels, TabsTab }\n", "type": "registry:component", "target": "components/keyframery/tabs.tsx" } ], "type": "registry:component" }