@pipe0/react 0.2.14 → 0.2.16

package/dist/widgets/avatar-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-group.mjs","names":[],"sources":["../../src/widgets/avatar-group.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { getProviderEntry, type ProviderName } from \"@pipe0/base\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { type CSSProperties, forwardRef } from \"react\";\nimport { cn } from \"../lib/utils.js\";\n\nconst avatarGroupVariants = cva(\"pz:relative pz:inline-flex pz:items-center\", {\n  variants: {\n    size: {\n      sm: \"\",\n      md: \"\",\n      lg: \"\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nconst tileSize = {\n  sm: \"pz:h-5 pz:w-5\",\n  md: \"pz:h-8 pz:w-8\",\n  lg: \"pz:h-12 pz:w-12\",\n} as const;\n\nconst tileLogoSize = {\n  sm: \"pz:size-3\",\n  md: \"pz:size-5\",\n  lg: \"pz:size-7\",\n} as const;\n\nconst tileOverlap = {\n  sm: \"pz:-ml-1\",\n  md: \"pz:-ml-1.5\",\n  lg: \"pz:-ml-2\",\n} as const;\n\nconst overflowText = {\n  sm: \"pz:text-[9px]\",\n  md: \"pz:text-xs\",\n  lg: \"pz:text-sm\",\n} as const;\n\nconst DEFAULT_MAX_TILES = 4;\n\nexport interface AvatarGroupState {\n  overflows: boolean;\n  remaining: number;\n}\n\nexport interface AvatarGroupProps\n  extends VariantProps<typeof avatarGroupVariants>,\n    useRender.ComponentProps<\"div\", AvatarGroupState> {\n  providers: readonly ProviderName[];\n  /** Maximum tile slots before the overflow indicator. Default 4. */\n  max?: number;\n  /** Show the +N overflow tile when providers exceed `max`. Default true. */\n  showCount?: boolean;\n}\n\n/**\n * Horizontal stack of provider tiles. Each tile is a brand-colored rectangle\n * with the provider's logo on top; tiles overlap slightly to read as a group.\n * Defaults to a maximum of 4 tiles, then a \"+N\" overflow tile.\n *\n * Pure visual — no popover. For a hover-card with cost-per-provider, see\n * `<CatalogProviderAvatars>`.\n */\nexport const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(function AvatarGroup(\n  { providers, size, max = DEFAULT_MAX_TILES, showCount = true, className, render, ...rest },\n  ref,\n) {\n  const sizeKey = size ?? \"md\";\n  const overflows = providers.length > max;\n  const renderOverflow = overflows && showCount;\n  const visibleSlots = renderOverflow ? max - 1 : max;\n  const shown = providers.slice(0, visibleSlots);\n  const remaining = providers.length - shown.length;\n\n  const element = useRender({\n    ref,\n    defaultTagName: \"div\",\n    render,\n    state: { overflows, remaining },\n    props: mergeProps<\"div\">(\n      {\n        className: cn(avatarGroupVariants({ size }), className),\n        children: (\n          <>\n            {shown.map((provider, i) => (\n              <ProviderTile key={provider} provider={provider} size={sizeKey} first={i === 0} />\n            ))}\n            {renderOverflow ? (\n              <OverflowTile size={sizeKey} count={remaining} first={shown.length === 0} />\n            ) : null}\n          </>\n        ),\n        ...({ \"data-p0\": \"avatar-group\" } as Record<string, string>),\n      },\n      rest as Record<string, unknown>,\n    ),\n  });\n\n  if (!providers.length) return null;\n  return element;\n});\n\nconst tileBase =\n  \"pz:relative pz:flex pz:items-center pz:justify-center pz:rounded-md pz:overflow-hidden pz:ring-2 pz:ring-background pz:shrink-0\";\n\nfunction ProviderTile({\n  provider,\n  size,\n  first,\n}: {\n  provider: ProviderName;\n  size: \"sm\" | \"md\" | \"lg\";\n  first: boolean;\n}) {\n  const entry = getProviderEntry(provider);\n  const bg = entry?.background;\n  return (\n    <div\n      data-p0=\"avatar-group-tile\"\n      className={cn(tileBase, tileSize[size], first ? undefined : tileOverlap[size])}\n      title={entry?.label ?? provider}\n    >\n      {bg ? (\n        <>\n          <div\n            aria-hidden=\"true\"\n            className=\"pz:absolute pz:inset-0 pz:dark:hidden\"\n            style={{ backgroundColor: bg.light } as CSSProperties}\n          />\n          <div\n            aria-hidden=\"true\"\n            className=\"pz:absolute pz:inset-0 pz:hidden pz:dark:block\"\n            style={{ backgroundColor: bg.dark } as CSSProperties}\n          />\n        </>\n      ) : (\n        <div aria-hidden=\"true\" className=\"pz:absolute pz:inset-0 pz:bg-muted\" />\n      )}\n      {entry?.logoUrl ? (\n        <img\n          src={entry.logoUrl}\n          alt={entry.label ?? provider}\n          className={cn(\"pz:relative pz:object-contain\", tileLogoSize[size])}\n        />\n      ) : null}\n    </div>\n  );\n}\n\nfunction OverflowTile({\n  size,\n  count,\n  first,\n}: {\n  size: \"sm\" | \"md\" | \"lg\";\n  count: number;\n  first: boolean;\n}) {\n  return (\n    <div\n      data-p0=\"avatar-group-overflow\"\n      className={cn(\n        tileBase,\n        \"pz:bg-muted pz:text-muted-foreground pz:font-medium\",\n        tileSize[size],\n        overflowText[size],\n        first ? undefined : tileOverlap[size],\n      )}\n    >\n      +{count}\n    </div>\n  );\n}\n\nexport { avatarGroupVariants, tileSize as avatarSize };\n"],"mappings":";;;;;;;;;AAOA,MAAM,sBAAsB,IAAI,8CAA8C;CAC5E,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EAAE,MAAM,MAAM;CAChC,CAAC;AAEF,MAAM,WAAW;CACf,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,eAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,cAAc;CAClB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,eAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,oBAAoB;;;;;;;;;AAyB1B,MAAa,cAAc,WAA6C,SAAS,YAC/E,EAAE,WAAW,MAAM,MAAM,mBAAmB,YAAY,MAAM,WAAW,QAAQ,GAAG,QACpF,KACA;CACA,MAAM,UAAU,QAAQ;CACxB,MAAM,YAAY,UAAU,SAAS;CACrC,MAAM,iBAAiB,aAAa;CACpC,MAAM,eAAe,iBAAiB,MAAM,IAAI;CAChD,MAAM,QAAQ,UAAU,MAAM,GAAG,aAAa;CAC9C,MAAM,YAAY,UAAU,SAAS,MAAM;CAE3C,MAAM,UAAU,UAAU;EACxB;EACA,gBAAgB;EAChB;EACA,OAAO;GAAE;GAAW;GAAW;EAC/B,OAAO,WACL;GACE,WAAW,GAAG,oBAAoB,EAAE,MAAM,CAAC,EAAE,UAAU;GACvD,UACE,8CACG,MAAM,KAAK,UAAU,MACpB,oBAAC,cAAD;IAAuC;IAAU,MAAM;IAAS,OAAO,MAAM;IAAK,EAA/D,SAA+D,CAClF,EACD,iBACC,oBAAC,cAAD;IAAc,MAAM;IAAS,OAAO;IAAW,OAAO,MAAM,WAAW;IAAK,IAC1E,KACH;GAEC,WAAW;GAClB,EACD,KACD;EACF,CAAC;AAEF,KAAI,CAAC,UAAU,OAAQ,QAAO;AAC9B,QAAO;EACP;AAEF,MAAM,WACJ;AAEF,SAAS,aAAa,EACpB,UACA,MACA,SAKC;CACD,MAAM,QAAQ,iBAAiB,SAAS;CACxC,MAAM,KAAK,OAAO;AAClB,QACE,qBAAC,OAAD;EACE,WAAQ;EACR,WAAW,GAAG,UAAU,SAAS,OAAO,QAAQ,SAAY,YAAY,MAAM;EAC9E,OAAO,OAAO,SAAS;YAHzB,CAKG,KACC,8CACE,oBAAC,OAAD;GACE,eAAY;GACZ,WAAU;GACV,OAAO,EAAE,iBAAiB,GAAG,OAAO;GACpC,GACF,oBAAC,OAAD;GACE,eAAY;GACZ,WAAU;GACV,OAAO,EAAE,iBAAiB,GAAG,MAAM;GACnC,EACD,MAEH,oBAAC,OAAD;GAAK,eAAY;GAAO,WAAU;GAAuC,GAE1E,OAAO,UACN,oBAAC,OAAD;GACE,KAAK,MAAM;GACX,KAAK,MAAM,SAAS;GACpB,WAAW,GAAG,iCAAiC,aAAa,MAAM;GAClE,IACA,KACA;;;AAIV,SAAS,aAAa,EACpB,MACA,OACA,SAKC;AACD,QACE,qBAAC,OAAD;EACE,WAAQ;EACR,WAAW,GACT,UACA,uDACA,SAAS,OACT,aAAa,OACb,QAAQ,SAAY,YAAY,MACjC;YARH,CASC,KACG,MACE"}
+{"version":3,"file":"avatar-group.mjs","names":[],"sources":["../../src/widgets/avatar-group.tsx"],"sourcesContent":["import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { getProviderEntry, type ProviderName } from \"@pipe0/base\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { type CSSProperties, forwardRef } from \"react\";\nimport { cn } from \"../lib/utils.js\";\n\nconst avatarGroupVariants = cva(\"pz:relative pz:inline-flex pz:items-center\", {\n  variants: {\n    size: {\n      sm: \"\",\n      md: \"\",\n      lg: \"\",\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nconst tileSize = {\n  sm: \"pz:h-5 pz:w-5\",\n  md: \"pz:h-8 pz:w-8\",\n  lg: \"pz:h-12 pz:w-12\",\n} as const;\n\nconst tileLogoSize = {\n  sm: \"pz:size-3\",\n  md: \"pz:size-5\",\n  lg: \"pz:size-7\",\n} as const;\n\nconst tileOverlap = {\n  sm: \"pz:-ml-1.5\",\n  md: \"pz:-ml-2\",\n  lg: \"pz:-ml-2.5\",\n} as const;\n\n/* Stacked tiles fan apart when the group is hovered (marker: group/p0ag). */\nconst tileSpread = {\n  sm: \"pz:group-hover/p0ag:ml-0.5\",\n  md: \"pz:group-hover/p0ag:ml-0.5\",\n  lg: \"pz:group-hover/p0ag:ml-1\",\n} as const;\n\n/* Convex \"glass\" material: top glare + bottom inner shade + hairline ring +\n   a 2px separation ring in the host's background color. One paint per tile. */\nconst tileShadow = [\n  \"inset 0 1px 0 rgba(255,255,255,.5)\",\n  \"inset 0 -1px 0 rgba(0,0,0,.1)\",\n  \"0 0 0 .5px rgba(17,17,17,.14)\",\n  \"0 0 0 2px var(--background, var(--pz-color-background, #fff))\",\n].join(\", \");\n\nconst tileGlare =\n  \"linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 45%, rgba(0,0,0,.07))\";\n\nconst overflowText = {\n  sm: \"pz:text-[9px]\",\n  md: \"pz:text-xs\",\n  lg: \"pz:text-sm\",\n} as const;\n\nconst DEFAULT_MAX_TILES = 4;\n\nexport interface AvatarGroupState {\n  overflows: boolean;\n  remaining: number;\n}\n\nexport interface AvatarGroupProps\n  extends VariantProps<typeof avatarGroupVariants>,\n    useRender.ComponentProps<\"div\", AvatarGroupState> {\n  providers: readonly ProviderName[];\n  /** Maximum tile slots before the overflow indicator. Default 4. */\n  max?: number;\n  /** Show the +N overflow tile when providers exceed `max`. Default true. */\n  showCount?: boolean;\n}\n\n/**\n * Horizontal stack of provider tiles. Each tile is a brand-colored rectangle\n * with the provider's logo on top; tiles overlap slightly to read as a group.\n * Defaults to a maximum of 4 tiles, then a \"+N\" overflow tile.\n *\n * Pure visual — no popover. For a hover-card with cost-per-provider, see\n * `<CatalogProviderAvatars>`.\n */\nexport const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(function AvatarGroup(\n  { providers, size, max = DEFAULT_MAX_TILES, showCount = true, className, render, ...rest },\n  ref,\n) {\n  const sizeKey = size ?? \"md\";\n  const overflows = providers.length > max;\n  const renderOverflow = overflows && showCount;\n  const visibleSlots = renderOverflow ? max - 1 : max;\n  const shown = providers.slice(0, visibleSlots);\n  const remaining = providers.length - shown.length;\n\n  const element = useRender({\n    ref,\n    defaultTagName: \"div\",\n    render,\n    state: { overflows, remaining },\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\"pz:group/p0ag\", avatarGroupVariants({ size }), className),\n        children: (\n          <>\n            {shown.map((provider, i) => (\n              <ProviderTile key={provider} provider={provider} size={sizeKey} first={i === 0} />\n            ))}\n            {renderOverflow ? (\n              <OverflowTile size={sizeKey} count={remaining} first={shown.length === 0} />\n            ) : null}\n          </>\n        ),\n        ...({ \"data-p0\": \"avatar-group\" } as Record<string, string>),\n      },\n      rest as Record<string, unknown>,\n    ),\n  });\n\n  if (!providers.length) return null;\n  return element;\n});\n\nconst tileBase =\n  \"pz:relative pz:flex pz:items-center pz:justify-center pz:rounded-md pz:overflow-hidden pz:shrink-0 pz:transition-[margin-left] pz:duration-200 pz:ease-out\";\n\nfunction ProviderTile({\n  provider,\n  size,\n  first,\n}: {\n  provider: ProviderName;\n  size: \"sm\" | \"md\" | \"lg\";\n  first: boolean;\n}) {\n  const entry = getProviderEntry(provider);\n  const bg = entry?.background;\n  return (\n    <div\n      data-p0=\"avatar-group-tile\"\n      className={cn(\n        tileBase,\n        tileSize[size],\n        first ? undefined : [tileOverlap[size], tileSpread[size]],\n      )}\n      style={{ boxShadow: tileShadow } as CSSProperties}\n      title={entry?.label ?? provider}\n    >\n      {bg ? (\n        <>\n          <div\n            aria-hidden=\"true\"\n            className=\"pz:absolute pz:inset-0 pz:dark:hidden\"\n            style={{ backgroundColor: bg.light } as CSSProperties}\n          />\n          <div\n            aria-hidden=\"true\"\n            className=\"pz:absolute pz:inset-0 pz:hidden pz:dark:block\"\n            style={{ backgroundColor: bg.dark } as CSSProperties}\n          />\n        </>\n      ) : (\n        <div aria-hidden=\"true\" className=\"pz:absolute pz:inset-0 pz:bg-muted\" />\n      )}\n      <div\n        aria-hidden=\"true\"\n        className=\"pz:absolute pz:inset-0\"\n        style={{ background: tileGlare }}\n      />\n      {entry?.logoUrl ? (\n        <img\n          src={entry.logoUrl}\n          alt={entry.label ?? provider}\n          className={cn(\"pz:relative pz:object-contain\", tileLogoSize[size])}\n        />\n      ) : null}\n    </div>\n  );\n}\n\nfunction OverflowTile({\n  size,\n  count,\n  first,\n}: {\n  size: \"sm\" | \"md\" | \"lg\";\n  count: number;\n  first: boolean;\n}) {\n  return (\n    <div\n      data-p0=\"avatar-group-overflow\"\n      className={cn(\n        tileBase,\n        \"pz:bg-muted pz:text-muted-foreground pz:font-medium\",\n        tileSize[size],\n        overflowText[size],\n        first ? undefined : [tileOverlap[size], tileSpread[size]],\n      )}\n      style={{\n        boxShadow:\n          \"0 0 0 .5px rgba(17,17,17,.1), 0 0 0 2px var(--background, var(--pz-color-background, #fff))\",\n      }}\n    >\n      +{count}\n    </div>\n  );\n}\n\nexport { avatarGroupVariants, tileSize as avatarSize };\n"],"mappings":";;;;;;;;;AAOA,MAAM,sBAAsB,IAAI,8CAA8C;CAC5E,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,EACF;CACD,iBAAiB,EAAE,MAAM,MAAM;CAChC,CAAC;AAEF,MAAM,WAAW;CACf,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,eAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,cAAc;CAClB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAGD,MAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAID,MAAM,aAAa;CACjB;CACA;CACA;CACA;CACD,CAAC,KAAK,KAAK;AAEZ,MAAM,YACJ;AAEF,MAAM,eAAe;CACnB,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,MAAM,oBAAoB;;;;;;;;;AAyB1B,MAAa,cAAc,WAA6C,SAAS,YAC/E,EAAE,WAAW,MAAM,MAAM,mBAAmB,YAAY,MAAM,WAAW,QAAQ,GAAG,QACpF,KACA;CACA,MAAM,UAAU,QAAQ;CACxB,MAAM,YAAY,UAAU,SAAS;CACrC,MAAM,iBAAiB,aAAa;CACpC,MAAM,eAAe,iBAAiB,MAAM,IAAI;CAChD,MAAM,QAAQ,UAAU,MAAM,GAAG,aAAa;CAC9C,MAAM,YAAY,UAAU,SAAS,MAAM;CAE3C,MAAM,UAAU,UAAU;EACxB;EACA,gBAAgB;EAChB;EACA,OAAO;GAAE;GAAW;GAAW;EAC/B,OAAO,WACL;GACE,WAAW,GAAG,iBAAiB,oBAAoB,EAAE,MAAM,CAAC,EAAE,UAAU;GACxE,UACE,8CACG,MAAM,KAAK,UAAU,MACpB,oBAAC,cAAD;IAAuC;IAAU,MAAM;IAAS,OAAO,MAAM;IAAK,EAA/D,SAA+D,CAClF,EACD,iBACC,oBAAC,cAAD;IAAc,MAAM;IAAS,OAAO;IAAW,OAAO,MAAM,WAAW;IAAK,IAC1E,KACH;GAEC,WAAW;GAClB,EACD,KACD;EACF,CAAC;AAEF,KAAI,CAAC,UAAU,OAAQ,QAAO;AAC9B,QAAO;EACP;AAEF,MAAM,WACJ;AAEF,SAAS,aAAa,EACpB,UACA,MACA,SAKC;CACD,MAAM,QAAQ,iBAAiB,SAAS;CACxC,MAAM,KAAK,OAAO;AAClB,QACE,qBAAC,OAAD;EACE,WAAQ;EACR,WAAW,GACT,UACA,SAAS,OACT,QAAQ,SAAY,CAAC,YAAY,OAAO,WAAW,MAAM,CAC1D;EACD,OAAO,EAAE,WAAW,YAAY;EAChC,OAAO,OAAO,SAAS;YARzB;GAUG,KACC,8CACE,oBAAC,OAAD;IACE,eAAY;IACZ,WAAU;IACV,OAAO,EAAE,iBAAiB,GAAG,OAAO;IACpC,GACF,oBAAC,OAAD;IACE,eAAY;IACZ,WAAU;IACV,OAAO,EAAE,iBAAiB,GAAG,MAAM;IACnC,EACD,MAEH,oBAAC,OAAD;IAAK,eAAY;IAAO,WAAU;IAAuC;GAE3E,oBAAC,OAAD;IACE,eAAY;IACZ,WAAU;IACV,OAAO,EAAE,YAAY,WAAW;IAChC;GACD,OAAO,UACN,oBAAC,OAAD;IACE,KAAK,MAAM;IACX,KAAK,MAAM,SAAS;IACpB,WAAW,GAAG,iCAAiC,aAAa,MAAM;IAClE,IACA;GACA;;;AAIV,SAAS,aAAa,EACpB,MACA,OACA,SAKC;AACD,QACE,qBAAC,OAAD;EACE,WAAQ;EACR,WAAW,GACT,UACA,uDACA,SAAS,OACT,aAAa,OACb,QAAQ,SAAY,CAAC,YAAY,OAAO,WAAW,MAAM,CAC1D;EACD,OAAO,EACL,WACE,+FACH;YAZH,CAaC,KACG,MACE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pipe0/react",
-  "version": "0.2.14",
+  "version": "0.2.16",
   "description": "React component library for building forms and catalogs powered by pipe0 pipes and searches.",
   "license": "MIT",
   "author": "pipe0",
@@ -84,7 +84,7 @@
     "react-hook-form": "^7.62.0",
     "swr": "^2.4.1",
     "tailwind-merge": "^3.3.1",
-    "@pipe0/base": "0.5.14"
+    "@pipe0/base": "0.5.16"
   },
   "devDependencies": {
     "@base-ui/react": "^1.6.0",