@edux-design/chips 0.0.1

package/README.md

@@ -0,0 +1,64 @@
+# @edux-design/chips
+
+Token-driven filter chips that compose existing primitives (like `TagNumber`) without extra props. Each chip renders a pill with a count, label, and optional dismiss control that mirrors the spec in `chips.png`.
+
+---
+
+## Installation
+
+```bash
+pnpm add @edux-design/chips @edux-design/utils @edux-design/icons
+# or
+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`.
+
+---
+
+## Usage
+
+```jsx
+import { Chip } from "@edux-design/chips";
+import { TagNumber } from "@edux-design/tags";
+
+export function Filters({ onRemove }) {
+  return (
+    <Chip label="Label" onRemove={onRemove}>
+      <TagNumber variant="brand" tone="solid">999</TagNumber>
+    </Chip>
+  );
+}
+```
+
+### Key Props
+
+| Prop | Description |
+| ---- | ----------- |
+| `label` | Primary text rendered inside the chip (truncated when needed). |
+| `size` | `"default"` (40px tall) or `"small"` (32px tall). |
+| `onRemove` | When provided, renders a close icon button that calls the handler. |
+| `removeLabel` | Accessible label for the close button. Defaults to `"Remove chip"`. |
+| `disabled` | Mutes colors, disables the close button, and removes pointer interactions. |
+
+`children` are rendered before the label, so you can compose `TagNumber` (or any other primitive) directly inside the chip without a dedicated prop.
+
+---
+
+## Development
+
+```bash
+pnpm --filter @edux-design/chips lint
+pnpm --filter @edux-design/chips check-types
+pnpm --filter @edux-design/chips build
+```
+
+Stories live under `src/demos/Chip.stories.jsx` with size + state examples pulled from `chips.png`.
+
+---
+
+## Notes
+
+- Focus, hover, pressed, dragged, and inactive visuals are all handled via Tailwind utility classes wired to the shared design tokens.
+- The chip container uses `focus-within` so the focus ring appears when the remove button is tabbed to.
+- Feel free to slot other components ahead of the label; the layout simply spaces whatever you supply, so TagNumber composition stays entirely declarative.

package/dist/index.d.mts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+
+/**
+ * Token-driven chip that composes existing primitives (i.e. TagNumber) inside.
+ *
+ * @typedef {React.HTMLAttributes<HTMLDivElement> & {
+ *   label?: React.ReactNode,
+ *   size?: "default"|"small",
+ *   onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void,
+ *   removeLabel?: string,
+ *   disabled?: boolean,
+ * }} ChipProps
+ */
+declare const Chip: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
+
+export { Chip };

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+
+/**
+ * Token-driven chip that composes existing primitives (i.e. TagNumber) inside.
+ *
+ * @typedef {React.HTMLAttributes<HTMLDivElement> & {
+ *   label?: React.ReactNode,
+ *   size?: "default"|"small",
+ *   onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void,
+ *   removeLabel?: string,
+ *   disabled?: boolean,
+ * }} ChipProps
+ */
+declare const Chip: react.ForwardRefExoticComponent<react.RefAttributes<any>>;
+
+export { Chip };

package/dist/index.js

@@ -0,0 +1,125 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.js
+var index_exports = {};
+__export(index_exports, {
+  Chip: () => Chip
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/elements/Chip.jsx
+var import_react = __toESM(require("react"));
+var import_utils = require("@edux-design/utils");
+var import_icons = require("@edux-design/icons");
+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]"
+  },
+  small: {
+    container: "text-xs min-h-[32px] px-8 py-4 gap-6",
+    close: "h-[16px] w-[16px]"
+  }
+};
+var BASE_STYLES = (0, import_utils.cx)(
+  "inline-flex items-center rounded-full border border-border-minimal bg-bg-base text-fg-base w-fit",
+  "transition-all duration-200 ease-out",
+  "hover:border-border-primary-base hover:bg-bg-primary-subtle",
+  "active:border-border-primary-emphasis active:bg-bg-primary-subtle-90",
+  "focus-within:shadow-focus focus-within:border-border-emphasis",
+  "shadow-sm"
+);
+var DISABLED_STYLES = "bg-bg-inactive text-fg-inactive border-border-subtle cursor-not-allowed pointer-events-none";
+var Chip = (0, import_react.forwardRef)(function Chip2({
+  label,
+  children,
+  size = "default",
+  onRemove,
+  removeLabel = "Remove chip",
+  disabled = false,
+  className,
+  ...rest
+}, ref) {
+  const sizeStyles = SIZE_MAP[size] ?? SIZE_MAP.default;
+  const containerClass = (0, import_utils.cx)(
+    BASE_STYLES,
+    sizeStyles.container,
+    disabled && DISABLED_STYLES,
+    className
+  );
+  const shouldRenderLabel = label !== void 0 && label !== null && label !== false;
+  const shouldRenderChildren = children !== void 0 && children !== null && !(Array.isArray(children) && children.length === 0);
+  const normalizedChildren = import_react.default.Children.toArray(children).filter(
+    (child) => child !== null && child !== void 0 && child !== false
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref,
+      className: containerClass,
+      "data-disabled": disabled ? "true" : void 0,
+      ...rest,
+      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(
+            (child, index) => (0, import_react.isValidElement)(child) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex items-center", children: child }, child.key ?? index) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: child }, index)
+          ) }),
+          shouldRenderLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate text-left", children: label })
+        ] }),
+        onRemove && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            disabled,
+            "aria-label": removeLabel,
+            onClick: (event) => {
+              event.stopPropagation();
+              onRemove(event);
+            },
+            className: (0, import_utils.cx)(
+              "ml-4 inline-flex items-center justify-center rounded-full text-fg-subtle",
+              "transition-colors duration-150 ease-in-out",
+              "hover:bg-bg-primary-subtle hover:text-fg-primary-base",
+              "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
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Close, {})
+          }
+        )
+      ]
+    }
+  );
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Chip
+});

package/dist/index.mjs

@@ -0,0 +1,89 @@
+// src/elements/Chip.jsx
+import React, { forwardRef, isValidElement } from "react";
+import { cx } from "@edux-design/utils";
+import { Close } from "@edux-design/icons";
+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]"
+  },
+  small: {
+    container: "text-xs min-h-[32px] px-8 py-4 gap-6",
+    close: "h-[16px] w-[16px]"
+  }
+};
+var BASE_STYLES = cx(
+  "inline-flex items-center rounded-full border border-border-minimal bg-bg-base text-fg-base w-fit",
+  "transition-all duration-200 ease-out",
+  "hover:border-border-primary-base hover:bg-bg-primary-subtle",
+  "active:border-border-primary-emphasis active:bg-bg-primary-subtle-90",
+  "focus-within:shadow-focus focus-within:border-border-emphasis",
+  "shadow-sm"
+);
+var DISABLED_STYLES = "bg-bg-inactive text-fg-inactive border-border-subtle cursor-not-allowed pointer-events-none";
+var Chip = forwardRef(function Chip2({
+  label,
+  children,
+  size = "default",
+  onRemove,
+  removeLabel = "Remove chip",
+  disabled = false,
+  className,
+  ...rest
+}, ref) {
+  const sizeStyles = SIZE_MAP[size] ?? SIZE_MAP.default;
+  const containerClass = cx(
+    BASE_STYLES,
+    sizeStyles.container,
+    disabled && DISABLED_STYLES,
+    className
+  );
+  const shouldRenderLabel = label !== void 0 && label !== null && label !== false;
+  const shouldRenderChildren = children !== void 0 && children !== null && !(Array.isArray(children) && children.length === 0);
+  const normalizedChildren = React.Children.toArray(children).filter(
+    (child) => child !== null && child !== void 0 && child !== false
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: containerClass,
+      "data-disabled": disabled ? "true" : void 0,
+      ...rest,
+      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(
+            (child, index) => isValidElement(child) ? /* @__PURE__ */ jsx("span", { className: "flex items-center", children: child }, child.key ?? index) : /* @__PURE__ */ jsx("span", { children: child }, index)
+          ) }),
+          shouldRenderLabel && /* @__PURE__ */ jsx("span", { className: "truncate text-left", children: label })
+        ] }),
+        onRemove && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled,
+            "aria-label": removeLabel,
+            onClick: (event) => {
+              event.stopPropagation();
+              onRemove(event);
+            },
+            className: cx(
+              "ml-4 inline-flex items-center justify-center rounded-full text-fg-subtle",
+              "transition-colors duration-150 ease-in-out",
+              "hover:bg-bg-primary-subtle hover:text-fg-primary-base",
+              "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
+            ),
+            children: /* @__PURE__ */ jsx(Close, {})
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  Chip
+};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@edux-design/chips",
+  "version": "0.0.1",
+  "private": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "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": "*",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "peerDependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  }
+}