{ "name": "group", "type": "registry:ui", "title": "Group", "description": "Group joins related controls into one visual cluster with shared borders and connected radii.", "registryDependencies": [ "@siteplane/base", "@siteplane/separator" ], "dependencies": [ "@base-ui/react@1.5.0", "class-variance-authority@0.7.1" ], "files": [ { "path": "src/components/ui/group.tsx", "type": "registry:ui", "content": "\"use client\";\n\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { cn } from \"@/lib/utils\";\n\nexport const groupVariants = cva(\n \"flex w-fit *:focus-visible:z-1 has-[>[data-slot=group]]:gap-2 *:has-focus-visible:z-1 dark:*:[[data-slot=separator]:has(~button:hover):not(:has(~[data-slot=separator]~[data-slot]:hover)),[data-slot=separator]:has(~[data-slot][data-pressed]):not(:has(~[data-slot=separator]~[data-slot][data-pressed]))]:before:bg-input/64 dark:*:[button:hover~[data-slot=separator]:not([data-slot]:hover~[data-slot=separator]~[data-slot=separator]),[data-slot][data-pressed]~[data-slot=separator]:not([data-slot][data-pressed]~[data-slot=separator]~[data-slot=separator])]:before:bg-input/64\",\n {\n defaultVariants: {\n orientation: \"horizontal\",\n },\n variants: {\n orientation: {\n horizontal:\n \"*:pointer-coarse:after:min-w-auto *:data-slot:has-[~[data-slot]]:rounded-e-none *:data-slot:has-[~[data-slot]]:border-e-0 *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:-end-[0.5px] *:data-slot:has-[~[data-slot]]:before:rounded-e-none *:[[data-slot]~[data-slot]:not([data-slot=separator])]:before:-start-[0.5px] *:[[data-slot]~[data-slot]]:rounded-s-none *:[[data-slot]~[data-slot]]:border-s-0 *:[[data-slot]~[data-slot]]:before:rounded-s-none\",\n vertical:\n \"flex-col *:pointer-coarse:after:min-h-auto *:data-slot:has-[~[data-slot]]:rounded-b-none *:data-slot:has-[~[data-slot]]:border-b-0 *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:-bottom-[0.5px] *:data-slot:not-data-[slot=separator]:has-[~[data-slot]]:before:hidden *:data-slot:has-[~[data-slot]]:before:rounded-b-none dark:*:last:before:hidden dark:*:first:before:block *:[[data-slot]~[data-slot]:not([data-slot=separator])]:before:-top-[0.5px] *:[[data-slot]~[data-slot]]:rounded-t-none *:[[data-slot]~[data-slot]]:border-t-0 *:[[data-slot]~[data-slot]]:before:rounded-t-none\",\n },\n },\n },\n);\n\nexport function Group({\n className,\n orientation,\n children,\n ...props\n}: {\n className?: string;\n orientation?: VariantProps[\"orientation\"];\n children: React.ReactNode;\n} & React.ComponentProps<\"div\">): React.ReactElement {\n return (\n \n {children}\n \n );\n}\n\nexport function GroupText({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"relative inline-flex items-center gap-2 whitespace-nowrap rounded-lg border border-input bg-muted not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-base text-muted-foreground shadow-xs/5 outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:shadow-[0_1px_--theme(--color-black/6%)] sm:text-sm dark:bg-input/64 dark:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:-mx-0.5 [&_svg]:shrink-0\",\n className,\n ),\n \"data-slot\": \"group-text\",\n };\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps(defaultProps, props),\n render,\n });\n}\n\nexport function GroupSeparator({\n className,\n orientation = \"vertical\",\n ...props\n}: {\n className?: string;\n} & React.ComponentProps): React.ReactElement {\n return (\n \n );\n}\n\n" } ], "categories": [ "layout" ], "docs": "# Group\n\n> Siteplane UI release `0.1.1`.\n\n## Public Purpose\n\nGroup joins related controls into one visual cluster with shared borders and\nconnected radii. Use ordinary flex or grid for unrelated actions or layout.\n\n## Import\n\n`import { Group, GroupSeparator, GroupText } from \"@/components/ui/group\";`\n\n## Public API\n\n- `orientation` accepts `\"horizontal\"` or `\"vertical\"`.\n- Match `GroupSeparator orientation` to the divider itself. A vertical Group\n needs `orientation=\"horizontal\"` separators between rows.\n- `GroupText` is a non-interactive prefix, suffix, or status segment.\n- Nested direct-child Groups remain separate clusters with the native gap,\n allowing a toolbar to contain several connected control sets.\n\n## Public Motion\n\n- Group does not animate. Children retain their native interaction and\n reduced-motion behavior.\n- Connected borders, radii, focus rings, and invalid state come from Group.\n- Do not add transforms to the entire cluster.\n\n## Public Accessibility\n\n- Name every meaningful control group through `aria-label` or\n `aria-labelledby`.\n- Every icon-only Button needs its own accessible label.\n- Toggle-like controls retain `aria-pressed` or their native selection\n semantics.\n- `GroupText` is supporting text, never a control.\n\n## Public Agent Guidance\n\n- Group only visually connects controls that belong to one task.\n- Use matching separator orientation and nested Groups for multiple clusters.\n- Do not use Group as a replacement for Toolbar semantics or general layout.\n\n## Public Links\n\n- [Documentation and preview](https://ui.siteplane.io/docs/components/layout/group)\n\n- [Registry source](https://ui.siteplane.io/r/group.json)\n", "meta": { "siteplane:agentContractVersion": 1, "siteplane:docs": "https://ui.siteplane.io/docs/components/layout/group", "siteplane:releaseVersion": "0.1.1", "siteplane:sourceOwned": true }, "devDependencies": [] }