{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"group","title":"Group","description":"Composition for visually joined controls, text segments, and separators.","dependencies":["@base-ui/react@1.7.0","class-variance-authority@0.7.1"],"registryDependencies":["@siteplane/base","@siteplane/separator"],"files":[{"path":"packages/ui/src/components/group/group.tsx","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 * as React from \"react\";\n\nimport { cn } from \"../../system/utils/cn\";\nimport { slotClass } from \"../../system/utils/slot-class\";\nimport { Separator } from \"../separator\";\nimport { KitSeparator } from \"../separator/separator-internal\";\n\n// The joins are design-rework.css's (Group): the children's edges and corners,\n// so the joins of a control's own rules still win; the ::before layer of each\n// child; the short divider of separator=\"inset\"; and the separators' fill in\n// Dark, which deepens beside the item under the pointer or pressed.\nexport const groupVariants = cva(\n  \"flex w-fit *:focus-visible:z-1 *:has-focus-visible:z-1\",\n  {\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n    variants: {\n      orientation: {\n        horizontal: \"*:pointer-coarse:after:min-w-auto\",\n        vertical: \"flex-col *:pointer-coarse:after:min-h-auto\",\n      },\n      separator: {\n        inset: \"\",\n      },\n    },\n  },\n);\n\ntype GroupOrientation = NonNullable<\n  VariantProps<typeof groupVariants>[\"orientation\"]\n>;\n\n// A separator runs across its group: vertical between the items of a\n// horizontal group, horizontal between those of a vertical one.\nconst GroupOrientationContext: React.Context<GroupOrientation> =\n  React.createContext<GroupOrientation>(\"horizontal\");\n\nexport function Group({\n  className,\n  orientation,\n  separator,\n  children,\n  ...props\n}: {\n  className?: string;\n  orientation?: VariantProps<typeof groupVariants>[\"orientation\"];\n  separator?: VariantProps<typeof groupVariants>[\"separator\"];\n  children: React.ReactNode;\n} & React.ComponentProps<\"div\">): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        slotClass(\"group\", props),\n        groupVariants({ orientation, separator }),\n        className,\n      )}\n      data-orientation={orientation}\n      data-separator={separator}\n      data-slot=\"group\"\n      role=\"group\"\n      {...props}\n    >\n      <GroupOrientationContext.Provider value={orientation ?? \"horizontal\"}>\n        {children}\n      </GroupOrientationContext.Provider>\n    </div>\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      slotClass(\"group-text\", props, render),\n      \"relative inline-flex items-center gap-2 whitespace-nowrap bg-muted not-dark:bg-clip-padding px-[calc(--spacing(3)-1px)] text-base text-muted-foreground outline-none transition-shadow duration-(--motion-duration-fast) ease-(--motion-ease-state) sm:text-sm dark:bg-input/64 [&_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: orientationProp,\n  ...props\n}: {\n  className?: string;\n} & React.ComponentProps<typeof Separator>): React.ReactElement {\n  const groupOrientation = React.useContext(GroupOrientationContext);\n  const orientation =\n    orientationProp ??\n    (groupOrientation === \"vertical\" ? \"horizontal\" : \"vertical\");\n  return (\n    <KitSeparator\n      className={cn(\n        \"pointer-events-none relative z-2 before:absolute before:inset-0\",\n        className,\n      )}\n      orientation={orientation}\n      profile=\"group\"\n      {...props}\n    />\n  );\n}\n","type":"registry:ui","target":"~/src/siteplane/components/group/group.tsx"},{"path":"packages/ui/src/components/group/index.ts","content":"export * from \"./group\";\n","type":"registry:ui","target":"~/src/siteplane/components/group/index.ts"}],"type":"registry:ui","docs":"https://ui.siteplane.io/docs-markdown/components/group.md","categories":["Forms & selection"],"meta":{"avoidWhen":["Avoid when the controls need shared roving focus; use Toolbar.","Avoid when the controls share a pressed selection; use Toggle Group."],"description":"Composition for visually joined controls, text segments, and separators.","knownLimitations":["Controls keep their own behavior and focus stops; Group adds no roving focus and no shared selection."],"providerNotes":[],"releaseStatus":"stable","searchTerms":["group"],"useWhen":["Use to join related controls, text segments and separators into one visual unit, such as a button beside an input."]}}