@edux-design/chips 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# @edux-design/chips
+
+## 0.2.0
+
+### Minor Changes
+
+- Add typed removeButtonProps for native remove-button descriptions, refs and composed handlers while preserving Chip removal, label and disabled semantics. Keep collection state and post-removal focus with the host.
+
+## 0.1.0
+
+### Minor Changes
+
+- Moved react / dom to peer deps
+
+### Patch Changes
+
+- Updated dependencies
+  - @edux-design/icons@0.1.0
+  - @edux-design/utils@0.1.0

package/README.md

@@ -14,6 +14,18 @@ npm install @edux-design/chips @edux-design/utils @edux-design/icons
 
 The package ships React components and depends on `react@^19.1.0` / `react-dom@^19.1.0`.
 
+## Token contract
+
+Small chips use the shared `min-h-32` token and both chip sizes use the shared
+`size-16` token for the remove control. The default chip remains `40px` tall
+through an explicit component-owned `min-h-[40px]` value because the current
+theme has no 40px spacing or control token; introducing a new semantic token
+would be broader than this package change and is intentionally deferred.
+
+Padding, gaps, borders, colours, and focus treatment use existing Edux numeric
+and semantic tokens. Consumers should import `@edux-design/tokens/theme` so
+those utilities resolve consistently.
+
 ---
 
 ## Usage

package/dist/index.d.mts

@@ -1,5 +1,3 @@
-import * as react from 'react';
-
 /**
  * Token-driven chip that composes existing primitives (i.e. TagNumber) inside.
  *
@@ -9,8 +7,21 @@ import * as react from 'react';
  *   onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void,
  *   removeLabel?: string,
  *   disabled?: boolean,
+ *   removeButtonProps?: Omit<React.ComponentPropsWithRef<"button">, "type"|"disabled"|"aria-label"|"aria-labelledby"|"children">,
  * }} ChipProps
  */
-declare const Chip: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
+/** @type {React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>} */
+declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Token-driven chip that composes existing primitives (i.e. TagNumber) inside.
+ */
+type ChipProps = React.HTMLAttributes<HTMLDivElement> & {
+    label?: React.ReactNode;
+    size?: "default" | "small";
+    onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    removeLabel?: string;
+    disabled?: boolean;
+    removeButtonProps?: Omit<React.ComponentPropsWithRef<"button">, "type" | "disabled" | "aria-label" | "aria-labelledby" | "children">;
+};
 
 export { Chip };

package/dist/index.d.ts

@@ -1,5 +1,3 @@
-import * as react from 'react';
-
 /**
  * Token-driven chip that composes existing primitives (i.e. TagNumber) inside.
  *
@@ -9,8 +7,21 @@ import * as react from 'react';
  *   onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void,
  *   removeLabel?: string,
  *   disabled?: boolean,
+ *   removeButtonProps?: Omit<React.ComponentPropsWithRef<"button">, "type"|"disabled"|"aria-label"|"aria-labelledby"|"children">,
  * }} ChipProps
  */
-declare const Chip: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
+/** @type {React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>} */
+declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Token-driven chip that composes existing primitives (i.e. TagNumber) inside.
+ */
+type ChipProps = React.HTMLAttributes<HTMLDivElement> & {
+    label?: React.ReactNode;
+    size?: "default" | "small";
+    onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    removeLabel?: string;
+    disabled?: boolean;
+    removeButtonProps?: Omit<React.ComponentPropsWithRef<"button">, "type" | "disabled" | "aria-label" | "aria-labelledby" | "children">;
+};
 
 export { Chip };

package/dist/index.js

@@ -41,11 +41,11 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var SIZE_MAP = {
   default: {
     container: "text-sm min-h-[40px] px-8 py-6 gap-8",
-    close: "h-[16px] w-[16px]"
+    close: "size-16"
   },
   small: {
-    container: "text-xs min-h-[32px] px-8 py-4 gap-6",
-    close: "h-[16px] w-[16px]"
+    container: "text-xs min-h-32 px-8 py-4 gap-6",
+    close: "size-16"
   }
 };
 var BASE_STYLES = (0, import_utils.cx)(
@@ -64,9 +64,15 @@ var Chip = (0, import_react.forwardRef)(function Chip2({
   onRemove,
   removeLabel = "Remove chip",
   disabled = false,
+  removeButtonProps = {},
   className,
   ...rest
 }, ref) {
+  const {
+    className: removeClassName,
+    onClick: onRemoveClick,
+    ...buttonProps
+  } = removeButtonProps;
   const sizeStyles = SIZE_MAP[size] ?? SIZE_MAP.default;
   const containerClass = (0, import_utils.cx)(
     BASE_STYLES,
@@ -86,6 +92,7 @@ var Chip = (0, import_react.forwardRef)(function Chip2({
       className: containerClass,
       "data-disabled": disabled ? "true" : void 0,
       ...rest,
+      "aria-disabled": disabled ? true : rest["aria-disabled"],
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex min-w-0 flex-1 items-center gap-6", children: [
           shouldRenderChildren && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex items-center gap-4 shrink-0 [&>*]:shrink-0", children: normalizedChildren.map(
@@ -96,12 +103,16 @@ var Chip = (0, import_react.forwardRef)(function Chip2({
         onRemove && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "button",
           {
+            ...buttonProps,
             type: "button",
             disabled,
             "aria-label": removeLabel,
+            "aria-labelledby": void 0,
             onClick: (event) => {
               event.stopPropagation();
-              onRemove(event);
+              if (disabled) return;
+              onRemoveClick == null ? void 0 : onRemoveClick(event);
+              if (!event.defaultPrevented) onRemove(event);
             },
             className: (0, import_utils.cx)(
               "ml-4 inline-flex items-center justify-center rounded-full text-fg-subtle",
@@ -110,7 +121,8 @@ var Chip = (0, import_react.forwardRef)(function Chip2({
               "focus-visible:shadow-focus focus-visible:outline-none",
               "active:bg-bg-primary-subtle-90",
               disabled && "opacity-60 pointer-events-none bg-transparent text-fg-inactive",
-              sizeStyles.close
+              sizeStyles.close,
+              removeClassName
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Close, {})
           }

package/dist/index.mjs

@@ -6,11 +6,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var SIZE_MAP = {
   default: {
     container: "text-sm min-h-[40px] px-8 py-6 gap-8",
-    close: "h-[16px] w-[16px]"
+    close: "size-16"
   },
   small: {
-    container: "text-xs min-h-[32px] px-8 py-4 gap-6",
-    close: "h-[16px] w-[16px]"
+    container: "text-xs min-h-32 px-8 py-4 gap-6",
+    close: "size-16"
   }
 };
 var BASE_STYLES = cx(
@@ -29,9 +29,15 @@ var Chip = forwardRef(function Chip2({
   onRemove,
   removeLabel = "Remove chip",
   disabled = false,
+  removeButtonProps = {},
   className,
   ...rest
 }, ref) {
+  const {
+    className: removeClassName,
+    onClick: onRemoveClick,
+    ...buttonProps
+  } = removeButtonProps;
   const sizeStyles = SIZE_MAP[size] ?? SIZE_MAP.default;
   const containerClass = cx(
     BASE_STYLES,
@@ -51,6 +57,7 @@ var Chip = forwardRef(function Chip2({
       className: containerClass,
       "data-disabled": disabled ? "true" : void 0,
       ...rest,
+      "aria-disabled": disabled ? true : rest["aria-disabled"],
       children: [
         /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-6", children: [
           shouldRenderChildren && /* @__PURE__ */ jsx("span", { className: "flex items-center gap-4 shrink-0 [&>*]:shrink-0", children: normalizedChildren.map(
@@ -61,12 +68,16 @@ var Chip = forwardRef(function Chip2({
         onRemove && /* @__PURE__ */ jsx(
           "button",
           {
+            ...buttonProps,
             type: "button",
             disabled,
             "aria-label": removeLabel,
+            "aria-labelledby": void 0,
             onClick: (event) => {
               event.stopPropagation();
-              onRemove(event);
+              if (disabled) return;
+              onRemoveClick == null ? void 0 : onRemoveClick(event);
+              if (!event.defaultPrevented) onRemove(event);
             },
             className: cx(
               "ml-4 inline-flex items-center justify-center rounded-full text-fg-subtle",
@@ -75,7 +86,8 @@ var Chip = forwardRef(function Chip2({
               "focus-visible:shadow-focus focus-visible:outline-none",
               "active:bg-bg-primary-subtle-90",
               disabled && "opacity-60 pointer-events-none bg-transparent text-fg-inactive",
-              sizeStyles.close
+              sizeStyles.close,
+              removeClassName
             ),
             children: /* @__PURE__ */ jsx(Close, {})
           }

package/docs/removal.md

@@ -0,0 +1,26 @@
+# Removal, descriptions and focus
+
+`Chip` remains a static native div with a forwarded `HTMLDivElement` ref. Passing
+`onRemove` renders its existing native button. Set a specific `removeLabel`, such
+as `Remove AC9M3N01`.
+
+`removeButtonProps` forwards attributes, native handlers, style, className and an
+`HTMLButtonElement` ref to that same button. It adds no wrapper or tab stop. Use
+`aria-describedby` to associate host-owned context with the actual remove action;
+descriptions on an ancestor are not inherited. A visual tooltip can still use
+`TooltipTrigger asChild` around the Chip root.
+
+Chip owns the remove button's `type="button"`, `disabled`, accessible name and
+icon children. `type`, `disabled`, `aria-label`, `aria-labelledby` and `children`
+are excluded from the public slot props and cannot override those core semantics.
+The slot's click handler runs before `onRemove`; `event.preventDefault()` cancels
+removal. Click propagation is stopped, including when cancelled, so an ancestor
+does not also toggle the selection. A disabled Chip invokes neither click
+callback. Other native events, including keyboard and focus handlers, forward
+normally. Class names merge with the existing button presentation.
+
+Collection state and focus after removal belong to the host. Use the public
+button refs to focus the next enabled remove action, then the previous action,
+then a stable host control when the last chip disappears. Do not query private
+button markup or focus the noninteractive root. The Selection adoption story
+demonstrates this recipe with descriptions and keyboard/pointer removal.

package/package.json

@@ -1,36 +1,24 @@
 {
   "name": "@edux-design/chips",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": false,
   "sideEffects": [
     "**/*.css"
   ],
   "files": [
-    "dist"
+    "dist",
+    "docs",
+    "README.md",
+    "CHANGELOG.md"
   ],
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.js"
     }
   },
-  "scripts": {
-    "lint": "eslint . --max-warnings 0",
-    "build": "tsup src/index.js --format esm,cjs --dts",
-    "dev": "tsup src/index.js --watch --format esm,cjs --dts",
-    "generate:component": "turbo gen react-component",
-    "check-types": "tsc --noEmit"
-  },
-  "devDependencies": {
-    "typescript": "^5.9.2",
-    "tailwindcss": "^4.1.12",
-    "postcss": "^8.5.6",
-    "tsup": "^8.5.0",
-    "@tailwindcss/cli": "^4.1.12",
-    "@tailwindcss/postcss": "^4.1.12"
-  },
   "dependencies": {
     "@edux-design/utils": "*",
     "@edux-design/icons": "*"