cosscom__coss/apps/ui/public/r/group.json

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "group",
  "type": "registry:ui",
  "dependencies": ["@base-ui-components/react"],
  "registryDependencies": ["@coss/separator"],
  "files": [
    {
      "path": "registry/default/ui/group.tsx",
      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui-components/react/merge-props\"\nimport { useRender } from \"@base-ui-components/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Separator } from \"@/registry/default/ui/separator\"\n\nconst groupVariants = cva(\n  \"flex w-fit *:focus-visible:z-10 *:has-focus-visible:z-10 has-[>[data-slot=group]]:gap-2\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"*:not-first:rounded-s-none *:not-first:border-s-0 *:not-[&:nth-last-child(1_of_:not([aria-hidden],span[data-base-ui-inert]))]:rounded-e-none *:not-[&:nth-last-child(1_of_:not([aria-hidden],span[data-base-ui-inert]))]:border-e-0 *:not-first:before:-start-[0.5px] *:not-first:before:rounded-s-none *:not-[&:nth-last-child(1_of_:not([aria-hidden],span[data-base-ui-inert]))]:before:-end-[0.5px] *:not-[&:nth-last-child(1_of_:not([aria-hidden],span[data-base-ui-inert]))]:before:rounded-e-none *:pointer-coarse:after:min-w-auto\",\n        vertical:\n          \"flex-col *:not-first:rounded-t-none *:not-first:border-t-0 *:not-[&:nth-last-child(1_of_:not([aria-hidden],span[data-base-ui-inert]))]:rounded-b-none *:not-[&:nth-last-child(1_of_:not([aria-hidden],span[data-base-ui-inert]))]:border-b-0 *:not-first:before:-top-[0.5px] *:not-first:before:rounded-t-none *:not-[&:nth-last-child(1_of_:not([aria-hidden],span[data-base-ui-inert]))]:before:-bottom-[0.5px] *:not-[&:nth-last-child(1_of_:not([aria-hidden],span[data-base-ui-inert]))]:before:hidden *:not-[&:nth-last-child(1_of_:not([aria-hidden],span[data-base-ui-inert]))]:before:rounded-b-none dark:*:first:before:block dark:*:last:before:hidden *:pointer-coarse:after:min-h-auto\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction Group({\n  className,\n  orientation,\n  children,\n  ...props\n}: {\n  className?: string\n  orientation?: VariantProps<typeof groupVariants>[\"orientation\"]\n  children: React.ReactNode\n} & React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"group\"\n      data-orientation={orientation}\n      className={cn(groupVariants({ orientation }), className)}\n      role=\"group\"\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nfunction GroupText({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  const defaultProps = {\n    \"data-slot\": \"group-text\",\n    className: cn(\n      \"relative inline-flex items-center rounded-lg border border-border bg-muted bg-clip-padding px-[calc(--spacing(3)-1px)] text-sm font-medium whitespace-nowrap shadow-xs transition-shadow outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/64 dark:before:shadow-[0_-1px_--theme(--color-white/8%)] [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n      className\n    ),\n  }\n  return useRender({\n    defaultTagName: \"div\",\n    render,\n    props: mergeProps(defaultProps, props),\n  })\n}\n\nfunction GroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: {\n  className?: string\n} & React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      orientation={orientation}\n      className={cn(\n        \"relative z-20 has-[+[data-slot=input-control]:focus-within,+[data-slot=select-trigger]:focus-visible+*,+[data-slot=number-field]:focus-within]:translate-x-px has-[+[data-slot=input-control]:focus-within,+[data-slot=select-trigger]:focus-visible+*,+[data-slot=number-field]:focus-within]:bg-ring [[data-slot=input-control]:focus-within+&,[data-slot=select-trigger]:focus-visible+*+&]:-translate-x-px [[data-slot=input-control]:focus-within+&,[data-slot=select-trigger]:focus-visible+*+&,[data-slot=number-field]:focus-within+&]:bg-ring\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Group,\n  Group as ButtonGroup,\n  GroupText,\n  GroupText as ButtonGroupText,\n  GroupSeparator,\n  GroupSeparator as ButtonGroupSeparator,\n  groupVariants,\n}\n",
      "type": "registry:ui"
    }
  ]
}