{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"integrations-section","type":"registry:block","title":"Integrations Section","description":"Integrations showcase pairing a hub-and-spoke orbit (your logo at the center, integration icons on counter-rotating rings that keep icons upright and pause on hover) with a searchable card grid filtered by category chips behind a gliding pill, where cards enter, leave and reflow with spring layout animation.","author":"kara ","dependencies":["clsx","lucide-react","motion","tailwind-merge"],"registryDependencies":[],"files":[{"path":"components/motion/integrations-section.tsx","type":"registry:component","target":"@components/motion/integrations-section.tsx","content":"\"use client\";\n// karaui.kamisama-v0.my.id/components/blocks/integrations-section\n\nimport { ArrowUpRight, Search, X } from \"lucide-react\";\nimport {\n AnimatePresence,\n LayoutGroup,\n motion,\n useReducedMotion,\n} from \"motion/react\";\nimport { type CSSProperties, type ReactNode, useId, useMemo, useState } from \"react\";\nimport { EASE_OUT, SPRING_LAYOUT } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface Integration {\n id: string;\n name: string;\n category: string;\n description?: ReactNode;\n /** Icon or logo node; sized to fit a small tile. */\n icon: ReactNode;\n href?: string;\n /** Small label on the card, e.g. \"Beta\" or \"New\". */\n badge?: ReactNode;\n /** Extra text matched by search (aliases, keywords). */\n keywords?: string[];\n}\n\nexport interface IntegrationsSectionProps {\n integrations: Integration[];\n /** The hub at the center of the orbit (your product's logo). */\n centerLogo: ReactNode;\n /** Accessible name for the hub. Default \"Our product\". */\n centerLabel?: string;\n /** Ids shown on the orbit, inner ring first. Defaults to the first 14 integrations. */\n orbitIds?: string[];\n /** Icons on the inner ring; the rest go on the outer ring. Default 5. */\n innerCount?: number;\n /** Seconds per inner-ring revolution; the outer ring is 1.5× slower and turns the other way. Default 40. */\n speed?: number;\n /** Category chips in order. Derived from `integrations` when omitted. */\n categories?: string[];\n /** Label of the chip that shows everything. Default \"All\". */\n allLabel?: string;\n /** Controlled category (\"\" or `allLabel` means all). */\n category?: string;\n defaultCategory?: string;\n onCategoryChange?: (category: string) => void;\n /** Show the search field. Default true. */\n searchable?: boolean;\n searchPlaceholder?: string;\n eyebrow?: ReactNode;\n heading?: ReactNode;\n description?: ReactNode;\n className?: string;\n /** Classes for the scrolling card list (e.g. a max height). */\n listClassName?: string;\n}\n\ninterface OrbitIcon {\n integration: Integration;\n angle: number;\n}\n\nfunction spread(items: Integration[], offset: number): OrbitIcon[] {\n return items.map((integration, index) => ({\n integration,\n angle: offset + (360 / Math.max(1, items.length)) * index,\n }));\n}\n\n/** Percent position of a point on a circle inscribed in its box. */\nfunction onCircle(angle: number): CSSProperties {\n const rad = (angle * Math.PI) / 180;\n // Rounded so server and client stringify the same value.\n const round = (n: number) => Math.round(n * 1000) / 1000;\n return {\n left: `${round(50 + 50 * Math.cos(rad))}%`,\n top: `${round(50 + 50 * Math.sin(rad))}%`,\n };\n}\n\nfunction OrbitRing({\n icons,\n inset,\n duration,\n reverse,\n animated,\n}: {\n icons: OrbitIcon[];\n inset: string;\n duration: number;\n reverse: boolean;\n animated: boolean;\n}) {\n // The whole HTML ring rotates (CSS `spin`); each icon runs the same spin\n // in the opposite direction at the same duration, so it stays upright.\n const spin: CSSProperties = animated\n ? {\n animationDuration: `${duration}s`,\n animationDirection: reverse ? \"reverse\" : \"normal\",\n }\n : {};\n const counter: CSSProperties = animated\n ? {\n animationDuration: `${duration}s`,\n animationDirection: reverse ? \"normal\" : \"reverse\",\n }\n : {};\n return (\n \n {icons.map(({ integration, angle }) => (\n \n \n {integration.icon}\n \n \n ))}\n \n );\n}\n\nfunction Orbit({\n center,\n centerLabel,\n inner,\n outer,\n speed,\n reduce,\n}: {\n center: ReactNode;\n centerLabel: string;\n inner: OrbitIcon[];\n outer: OrbitIcon[];\n speed: number;\n reduce: boolean | null;\n}) {\n const animated = !reduce;\n return (\n icon.integration.name)\n .join(\", \")}`}\n className=\"group/orbit relative mx-auto aspect-square w-full max-w-[19rem]\"\n >\n {/* Soft halo behind the hub. */}\n \n
\n {outer.length ? (\n \n ) : null}\n {inner.length ? (\n \n ) : null}\n
\n {animated ? (\n \n ) : null}\n
\n {center}\n
\n
\n
\n \n );\n}\n\nfunction matches(integration: Integration, query: string) {\n if (!query) return true;\n const haystack = [\n integration.name,\n integration.category,\n typeof integration.description === \"string\" ? integration.description : \"\",\n ...(integration.keywords ?? []),\n ]\n .join(\" \")\n .toLowerCase();\n return query\n .toLowerCase()\n .split(/\\s+/)\n .filter(Boolean)\n .every((word) => haystack.includes(word));\n}\n\n/**\n * Integrations section: a hub-and-spoke orbit (your logo at the center,\n * integration icons riding one or two slowly counter-rotating rings, paused\n * on hover and still under reduced motion) beside a searchable grid of\n * integration cards. Category chips filter the grid with a gliding pill, and\n * cards enter, leave and reflow with layout animation.\n */\nexport function IntegrationsSection({\n integrations,\n centerLogo,\n centerLabel = \"Our product\",\n orbitIds,\n innerCount = 5,\n speed = 40,\n categories: categoriesProp,\n allLabel = \"All\",\n category: categoryProp,\n defaultCategory,\n onCategoryChange,\n searchable = true,\n searchPlaceholder = \"Search integrations\",\n eyebrow,\n heading,\n description,\n className,\n listClassName,\n}: IntegrationsSectionProps) {\n const reduce = useReducedMotion();\n const pillId = useId();\n const searchId = useId();\n const [query, setQuery] = useState(\"\");\n const [internalCategory, setInternalCategory] = useState(\n defaultCategory ?? allLabel,\n );\n const rawCategory = categoryProp ?? internalCategory;\n const category = rawCategory === \"\" ? allLabel : rawCategory;\n\n const categories = useMemo(() => {\n if (categoriesProp) return categoriesProp;\n const seen: string[] = [];\n for (const item of integrations) {\n if (!seen.includes(item.category)) seen.push(item.category);\n }\n return seen;\n }, [categoriesProp, integrations]);\n\n const { inner, outer } = useMemo(() => {\n const picked = orbitIds\n ? orbitIds\n .map((id) => integrations.find((item) => item.id === id))\n .filter((item): item is Integration => Boolean(item))\n : integrations.slice(0, 14);\n return {\n inner: spread(picked.slice(0, innerCount), -90),\n // Offset half a slot so outer icons sit between inner ones.\n outer: spread(\n picked.slice(innerCount),\n -90 + 180 / Math.max(1, picked.length - innerCount),\n ),\n };\n }, [integrations, orbitIds, innerCount]);\n\n const visible = useMemo(\n () =>\n integrations.filter(\n (item) =>\n (category === allLabel || item.category === category) &&\n matches(item, query.trim()),\n ),\n [integrations, category, allLabel, query],\n );\n\n const pick = (next: string) => {\n if (next === category) return;\n if (categoryProp === undefined) setInternalCategory(next);\n onCategoryChange?.(next);\n };\n\n const header =\n eyebrow || heading || description ? (\n
\n {eyebrow ? (\n

\n {eyebrow}\n

\n ) : null}\n {heading ? (\n

\n {heading}\n

\n ) : null}\n {description ? (\n

\n {description}\n

\n ) : null}\n
\n ) : null;\n\n const chips = [allLabel, ...categories];\n\n return (\n
\n {header}\n
\n \n\n
\n {searchable ? (\n
\n \n \n setQuery(event.target.value)}\n placeholder={searchPlaceholder}\n autoComplete=\"off\"\n className=\"h-10 w-full rounded-full border border-border bg-card pr-10 pl-10 text-sm text-foreground outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-border-strong focus-visible:ring-2 focus-visible:ring-ring/40 [&::-webkit-search-cancel-button]:hidden\"\n />\n {query ? (\n setQuery(\"\")}\n aria-label=\"Clear search\"\n className=\"absolute top-1/2 right-2 grid size-7 -translate-y-1/2 place-items-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50\"\n >\n \n \n ) : null}\n
\n ) : null}\n\n \n
\n Filter by category\n {chips.map((chip) => {\n const selected = chip === category;\n return (\n pick(chip)}\n className={cn(\n \"relative h-8 shrink-0 rounded-full px-3 text-xs font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/50\",\n selected\n ? \"text-primary-foreground\"\n : \"text-muted-foreground hover:text-foreground\",\n )}\n >\n {selected ? (\n \n ) : null}\n {chip}\n \n );\n })}\n
\n \n\n

\n {`${visible.length} integration${visible.length === 1 ? \"\" : \"s\"}`}\n

\n\n \n {/* Layout animation is the point here: cards reflow as the\n filter changes, so `layout` (position/size) is intended. */}\n \n \n {visible.map((item) => (\n \n \n {item.icon}\n \n \n \n {item.href ? (\n \n {item.name}\n \n ) : (\n \n {item.name}\n \n )}\n {item.badge ? (\n \n {item.badge}\n \n ) : null}\n {item.href ? (\n \n ) : null}\n \n \n {item.category}\n \n {item.description ? (\n \n {item.description}\n \n ) : null}\n \n \n ))}\n \n \n {visible.length === 0 ? (\n \n {query ? `No integrations match \"${query.trim()}\".` : \"No integrations in this category yet.\"}\n \n ) : null}\n
\n
\n \n
\n );\n}\n"},{"path":"lib/ease.ts","type":"registry:lib","target":"@lib/ease.ts","content":"// Shared motion tokens. Easing curves mirror the CSS custom properties in\n// globals.css; springs are the canonical physics used across components.\n// Strong custom variants — defaults like `ease-in`/`ease-out` feel weak.\n\nexport const EASE_OUT = [0.16, 1, 0.3, 1] as const;\nexport const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;\nexport const EASE_DRAWER = [0.32, 0.72, 0, 1] as const;\n\n/** CSS string form of EASE_OUT for inline style transitions. */\nexport const EASE_OUT_CSS = \"cubic-bezier(0.16, 1, 0.3, 1)\";\n\n/** Press feedback on buttons and other tappable surfaces. */\nexport const SPRING_PRESS = {\n type: \"spring\",\n stiffness: 500,\n damping: 30,\n mass: 0.6,\n} as const;\n\n/** Content swaps — label/icon slots trading places inside a control. */\nexport const SPRING_SWAP = {\n type: \"spring\",\n stiffness: 460,\n damping: 30,\n mass: 0.55,\n} as const;\n\n/** Overlay panel entrances — modals and sheets summoned by pointer. */\nexport const SPRING_PANEL = {\n type: \"spring\",\n stiffness: 420,\n damping: 40,\n mass: 0.5,\n} as const;\n\n/** Shared-layout glides — pills, indicators and panels morphing between positions. */\nexport const SPRING_LAYOUT = {\n type: \"spring\",\n stiffness: 360,\n damping: 32,\n mass: 0.6,\n} as const;\n\n/** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */\nexport const SPRING_MOUSE = {\n stiffness: 200,\n damping: 15,\n mass: 0.3,\n} as const;\n\n/** Dragged handles and fills (sliders) — critically damped `useSpring` config,\n * so the value follows the pointer butterily and never rebounds off an end. */\nexport const SPRING_GLIDE = {\n stiffness: 700,\n damping: 50,\n mass: 0.5,\n} as const;\n"},{"path":"lib/utils.ts","type":"registry:lib","target":"@lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n"}]}