@ntmats/hc-ui 0.11.0 → 0.12.0

package/dist/index.d.ts

@@ -97,7 +97,14 @@ export declare const IconButton: ForwardRefExoticComponent<IconButtonProps & Ref
 interface ChipBaseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Toggle state for filters; omit for a plain action chip. */
     selected?: boolean;
+    /** Decorative icon before the label (18px at `md`); its side of the pill gets a little less room than text. */
     icon?: ReactNode;
+    /**
+     * Round picture before the label, concentric with the pill's start: 24px at `md` and `sm`, 18px at
+     * `xs` (a character, a player). Pass an `img` (or an `AvatarView`); the chip sizes and rounds it.
+     * Decorative: the label names the chip. Takes the place of `icon` when both are given.
+     */
+    avatar?: ReactNode;
     /**
      * `md` (default): 36px, 13px text (HCUI `chip`). `sm`: 36px, 12px text and 12px padding (HCUI's
      * desktop filter pills and sort trigger). `xs`: 26px, 11px text, muted fill without ring (HCUI's

package/dist/index.js

@@ -156,18 +156,18 @@ var glyph = (size, d) => /* @__PURE__ */ jsx("svg", { width: size, height: size,
 var CHEVRON_DOWN = "M6 9L12 15L18 9";
 var XMARK = "M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426";
 var visible = (node) => node !== void 0 && node !== null && node !== false && node !== "";
-var Chip = forwardRef(function Chip2({ selected, icon, size = "md", variant = "outline", applied = false, count, badge, badgePlacement = "inline", informative = false, chevron, onClear, clearLabel, type = "button", className, children, ...props }, ref) {
+var Chip = forwardRef(function Chip2({ selected, icon, avatar, size = "md", variant = "outline", applied = false, count, badge, badgePlacement = "inline", informative = false, chevron, onClear, clearLabel, type = "button", className, children, ...props }, ref) {
   const popup = props["aria-haspopup"];
   const withChevron = chevron ?? (popup !== void 0 && popup !== false && popup !== "false");
   const look = {
     "data-size": size === "md" ? void 0 : size,
     "data-variant": variant === "outline" ? void 0 : variant,
     "data-applied": applied || void 0,
-    "data-icon-only": icon && !visible(children) || void 0,
+    "data-icon-only": icon && !avatar && !visible(children) || void 0,
     "data-informative": informative || void 0
   };
   const content = /* @__PURE__ */ jsxs(Fragment2, { children: [
-    icon && /* @__PURE__ */ jsx("span", { className: "hc-ui-chip__icon", "aria-hidden": "true", children: icon }),
+    avatar ? /* @__PURE__ */ jsx("span", { className: "hc-ui-chip__avatar", "aria-hidden": "true", children: avatar }) : icon && /* @__PURE__ */ jsx("span", { className: "hc-ui-chip__icon", "aria-hidden": "true", children: icon }),
     children,
     visible(count) && /* @__PURE__ */ jsx("span", { className: "hc-ui-chip__count", children: count }),
     visible(badge) && /* @__PURE__ */ jsx("span", { className: "hc-ui-chip__badge", "data-placement": badgePlacement === "corner" ? "corner" : void 0, children: badge }),

package/dist/styles.css

@@ -64,7 +64,8 @@
   min-width: var(--hc-segmented-option-min-width, 0);
   min-height: 38px;
   margin: 0;
-  padding: 0 var(--hc-space-3);
+  /* Text gets the pill's room (as Chip); an icon before the label, a little less. */
+  padding: 0 var(--hc-space-4);
   color: var(--hc-color-text-secondary);
   font-family: var(--hc-font-body);
   font-size: var(--hc-font-size-sm);
@@ -84,7 +85,8 @@
     box-shadow var(--hc-transition-fast), font-weight 220ms var(--hc-ease-standard);
 }
 
-[data-hc-ds] .hc-ui-segmented[data-density='compact'] .hc-ui-segmented__option { min-height: 32px; }
+[data-hc-ds] .hc-ui-segmented[data-density='compact'] .hc-ui-segmented__option { min-height: 32px; padding: 0 14px; }
+[data-hc-ds] .hc-ui-segmented:not([data-labels='hidden']) .hc-ui-segmented__option:has(> .hc-ui-segmented__icon + .hc-ui-segmented__label) { padding-inline-start: var(--hc-space-3); }
 
 [data-hc-ds] .hc-ui-segmented[data-labels='hidden'] .hc-ui-segmented__option {
   width: 40px;
@@ -216,9 +218,11 @@
 
 /* Button — HCUI btn-base / btn-primary / btn-outline / btn-danger / btn-lg. */
 [data-hc-ds] .hc-ui-button {
+  --hc-button-pad: var(--hc-space-5);
+  --hc-button-pad-icon: var(--hc-space-4);
   gap: var(--hc-space-2);
   min-height: var(--hc-control-height-md);
-  padding: 0 var(--hc-space-5);
+  padding: 0 var(--hc-button-pad);
   color: var(--hc-color-text-primary);
   background-color: var(--hc-color-bg-muted);
   font-size: var(--hc-font-size-md);
@@ -237,8 +241,11 @@
 [data-hc-ds] .hc-ui-button:is([data-variant='secondary'], [data-variant='outline'], [data-variant='ghost'])[data-tone='danger'] { color: var(--hc-color-danger); }
 /* An open popup trigger: the 1.5px ring in the text color, as Chip (HCUI's Importar, Entrar and Convidar). */
 [data-hc-ds] .hc-ui-button:is([data-variant='secondary'], [data-variant='outline'], [data-variant='ghost'])[aria-haspopup]:not([aria-haspopup='false'])[aria-expanded='true'] { box-shadow: inset 0 0 0 1.5px var(--hc-color-text-primary); }
-[data-hc-ds] .hc-ui-button[data-size='sm'] { min-height: var(--hc-control-height-chip); padding: 0 var(--hc-space-4); font-size: var(--hc-font-size-sm); }
-[data-hc-ds] .hc-ui-button[data-size='lg'] { min-height: var(--hc-control-height-lg); padding: 0 var(--hc-space-6); font-size: var(--hc-font-size-base); }
+[data-hc-ds] .hc-ui-button[data-size='sm'] { --hc-button-pad: var(--hc-space-4); --hc-button-pad-icon: var(--hc-space-3); min-height: var(--hc-control-height-chip); font-size: var(--hc-font-size-sm); }
+[data-hc-ds] .hc-ui-button[data-size='lg'] { --hc-button-pad: var(--hc-space-6); --hc-button-pad-icon: var(--hc-space-5); min-height: var(--hc-control-height-lg); font-size: var(--hc-font-size-base); }
+/* An icon (or the spinner) at a side takes a little less room than text (Material 3: 16 and 24 at 40). */
+[data-hc-ds] .hc-ui-button:has(> :is(.hc-ui-button__icon, .hc-ui-button__spinner):first-child) { padding-inline-start: var(--hc-button-pad-icon); }
+[data-hc-ds] .hc-ui-button:has(> .hc-ui-button__icon:last-child) { padding-inline-end: var(--hc-button-pad-icon); }
 [data-hc-ds] .hc-ui-button[data-full-width] { width: 100%; }
 [data-hc-ds] .hc-ui-button:disabled { opacity: 0.4; cursor: default; }
 [data-hc-ds] .hc-ui-button { max-width: 100%; }
@@ -297,11 +304,21 @@
 [data-hc-ds] .hc-ui-icon-button:disabled { opacity: 0.4; cursor: default; }
 
 /* Chip — HCUI chip / chip-active. */
+/*
+ * Side space of a pill (Chip, Button, SegmentedControl): text needs more room than an icon or an
+ * avatar, because the round end eats into the text and a glyph is already round. A side with text
+ * gets about half the height (Material 3: 16/32 and 24/40; eBay Playbook: 16/32 and 20/40); a side
+ * that starts or ends with an icon gets a little less; an avatar sits concentric with the end.
+ */
 [data-hc-ds] .hc-ui-chip {
+  --hc-chip-pad: 16px;
+  --hc-chip-pad-icon: 12px;
+  --hc-chip-pad-avatar: 6px;
+  --hc-chip-avatar: 24px;
   flex: 0 0 auto;
   gap: 6px;
   min-height: var(--hc-control-height-chip);
-  padding: 0 14px;
+  padding: 0 var(--hc-chip-pad);
   color: var(--hc-color-text-primary);
   background-color: var(--hc-color-bg-surface);
   box-shadow: inset 0 0 0 1px var(--hc-color-border-strong);
@@ -335,16 +352,33 @@
   font-variant-numeric: tabular-nums;
 }
 [data-hc-ds] .hc-ui-chip__chevron { display: inline-flex; flex: 0 0 auto; }
+/* An icon or avatar at the start, a chevron or an inline badge at the end: less room on that side. */
+[data-hc-ds] .hc-ui-chip:not([data-icon-only]):has(> .hc-ui-chip__icon:first-child) { padding-inline-start: var(--hc-chip-pad-icon); }
+[data-hc-ds] .hc-ui-chip:not([data-icon-only]):has(> .hc-ui-chip__avatar:first-child) { padding-inline-start: var(--hc-chip-pad-avatar); }
+[data-hc-ds] .hc-ui-chip:has(> :is(.hc-ui-chip__chevron, .hc-ui-chip__badge:not([data-placement='corner'])):last-child) { padding-inline-end: var(--hc-chip-pad-icon); }
+/* Avatar: a round picture concentric with the pill's start (24px at 36px, 18px at 26px). */
+[data-hc-ds] .hc-ui-chip__avatar {
+  display: inline-flex;
+  flex: 0 0 auto;
+  width: var(--hc-chip-avatar);
+  height: var(--hc-chip-avatar);
+  overflow: hidden;
+  border-radius: var(--hc-radius-full);
+}
+[data-hc-ds] .hc-ui-chip__avatar > :is(img, svg, .hc-ui-avatar) { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
 [data-hc-ds] .hc-ui-chip__chevron svg { display: block; }
 /* Applied filter, or the trigger of an open popup: a 1.5px ring (the selected fill below wins). */
 [data-hc-ds] .hc-ui-chip:is([data-applied], [aria-expanded='true']):not([aria-pressed='true'], [aria-checked='true'], [data-selected]) { box-shadow: inset 0 0 0 1.5px var(--hc-color-text-primary); }
 /* Line height `normal`, as HCUI's filter pills: on 2x screens 18px moves the text by half a pixel. */
-[data-hc-ds] .hc-ui-chip[data-size='sm'] { padding: 0 var(--hc-space-3); font-size: var(--hc-font-size-xs); line-height: normal; }
+[data-hc-ds] .hc-ui-chip[data-size='sm'] { --hc-chip-pad: 14px; --hc-chip-pad-icon: 10px; font-size: var(--hc-font-size-xs); line-height: normal; }
 [data-hc-ds] .hc-ui-chip[data-size='xs'] {
   gap: var(--hc-space-1);
+  --hc-chip-pad: 10px;
+  --hc-chip-pad-icon: 7px;
+  --hc-chip-pad-avatar: 4px;
+  --hc-chip-avatar: 18px;
   min-height: 26px;
   height: 26px;
-  padding: 0 var(--hc-space-2);
   background-color: var(--hc-color-bg-muted);
   box-shadow: none;
   font-size: var(--hc-font-size-2xs);
@@ -352,8 +386,9 @@
 [data-hc-ds] .hc-ui-chip[data-size='xs']:is([data-applied], [aria-expanded='true']):not([aria-pressed='true'], [aria-checked='true'], [data-selected]) { box-shadow: inset 0 0 0 1.5px var(--hc-color-text-primary); }
 /* Quiet: HCUI's rule filter pills, lighter until applied. */
 [data-hc-ds] .hc-ui-chip[data-variant='quiet'] {
+  --hc-chip-pad: 15px;
+  --hc-chip-pad-icon: 11px;
   gap: 5px;
-  padding: 0 13px;
   color: var(--hc-color-text-secondary);
   box-shadow: inset 0 0 0 1px var(--hc-color-border);
   font-weight: 560;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntmats/hc-ui",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "type": "module",
   "description": "Shared HCUI/Arena React presentation primitives.",
   "license": "UNLICENSED",