@j2-health/design-system 0.6.0 → 0.6.2

package/README.md

@@ -201,12 +201,15 @@ consequences worth knowing before you change anything here:
   11.5.1, which is exactly what Node 24.5.0 ships. The workflow asserts this
   rather than letting it surface later as an unexplained 401.
 
-To release a new version — maintainers only, since step 2 needs write access to
-this repository:
+To release a new version, bump `version` in `package.json` in a pull request —
+on its own, or in the PR carrying the change you want to release — and merge it.
+That is the whole procedure: the merge to `main` triggers the publish workflow,
+which checks that `version` changed and is not already on npm, then publishes it
+and creates the matching `vX.Y.Z` tag. A merge that touches `package.json`
+without changing `version` (a dependency bump, say) publishes nothing.
 
-1. Bump `version` in `package.json` in a pull request — on its own, or in the PR
-   carrying the change you want to release — and merge it.
-2. Dispatch the publish workflow against `main`:
+If an automatic release needs re-running, dispatch the workflow against `main` —
+maintainers only, since it needs write access to this repository:
 
 ```bash
 $ gh workflow run publish-workflow.yml --ref main
@@ -217,10 +220,8 @@ Pick the ref carefully: the publish job is _skipped_ rather than failed on any
 other ref, so a dispatch from a feature branch reports success without
 publishing.
 
-That is the whole procedure. The workflow publishes the version `package.json`
-declares and then creates the matching `vX.Y.Z` tag itself, so you do not
-normally tag by hand — the `tag` job's own comments cover the one case that
-needs it, where publishing succeeds and tagging fails.
+You do not normally tag by hand — the `tag` job's own comments cover the one
+case that needs it, where publishing succeeds and tagging fails.
 
 `npm version` is not the tool here, despite being the obvious one: it writes the
 bump as a local commit, and `main` requires a pull request, so that commit has

package/dist/index.cjs

@@ -4,12 +4,14 @@ const require_tailwind = require("./tailwind.cjs");
 const require_appTheme = require("./src/appTheme.cjs");
 const require_AppConfigProvider = require("./src/AppConfigProvider.cjs");
 const require_Alert = require("./src/components/alert/Alert.cjs");
+const require_BareButton = require("./src/components/bareButton/BareButton.cjs");
 const require_BarChart = require("./src/components/barchart/BarChart.cjs");
 const require_Breadcrumb = require("./src/components/breadcrumb/Breadcrumb.cjs");
 const require_Button = require("./src/components/button/Button.cjs");
 const require_BulkActionBar = require("./src/components/bulkActionBar/BulkActionBar.cjs");
 const require_Card = require("./src/components/card/Card.cjs");
 const require_Swatch = require("./src/components/swatch/Swatch.cjs");
+const require_useRender = require("./src/utils/useRender.cjs");
 const require_ChangeChip = require("./src/components/changeChip/ChangeChip.cjs");
 const require_Checkbox = require("./src/components/checkbox/Checkbox.cjs");
 const require_CheckboxTree = require("./src/components/checkboxTree/CheckboxTree.cjs");
@@ -67,6 +69,7 @@ exports.AntdSearchInput = require_AntdSearchInput.AntdSearchInput;
 exports.AntdSelect = require_AntdSelect.AntdSelect;
 exports.AppConfigProvider = require_AppConfigProvider.AppConfigProvider;
 exports.BarChart = require_BarChart.BarChart;
+exports.BareButton = require_BareButton.BareButton;
 exports.Breadcrumb = require_Breadcrumb.Breadcrumb;
 exports.BulkActionBar = require_BulkActionBar.BulkActionBar;
 exports.Button = require_Button.Button;
@@ -128,6 +131,7 @@ Object.defineProperty(exports, "icons", {
 	}
 });
 exports.isMultiValueTextOperator = require_filterHelpers.isMultiValueTextOperator;
+exports.mergeProps = require_useRender.mergeProps;
 exports.normalizeMultiValues = require_filterHelpers.normalizeMultiValues;
 exports.operatorOptionsFor = require_useFilterField.operatorOptionsFor;
 exports.tailwindPreset = require_tailwind.tailwindPreset;

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export * from './tailwind.config.js';
 export * from './src/AppConfigProvider.js';
 export * from './src/appTheme.js';
 export * from './src/components/alert/index.js';
+export * from './src/components/bareButton/index.js';
 export * from './src/components/barchart/index.js';
 export * from './src/components/breadcrumb/index.js';
 export * from './src/components/bulkActionBar/index.js';
@@ -47,5 +48,6 @@ export * from './src/components/thresholdBar/index.js';
 export * from './src/components/tooltip/index.js';
 export * from './src/components/vennDiagram/index.js';
 export * from './src/components/legacyNavMenu/index.js';
+export { mergeProps, type RenderProp, type RenderProps, } from './src/utils/useRender.js';
 import * as icons from '@phosphor-icons/react';
 export { icons };

package/dist/index.js

@@ -2,6 +2,7 @@ import { tailwindPreset } from "./tailwind.js";
 import { appTheme } from "./src/appTheme.js";
 import { AppConfigProvider } from "./src/AppConfigProvider.js";
 import { Alert } from "./src/components/alert/Alert.js";
+import { BareButton } from "./src/components/bareButton/BareButton.js";
 import { BarChart } from "./src/components/barchart/BarChart.js";
 import { HighchartsReact } from "./src/components/barchart/index.js";
 import { Breadcrumb } from "./src/components/breadcrumb/Breadcrumb.js";
@@ -9,6 +10,7 @@ import { Button } from "./src/components/button/Button.js";
 import { BulkActionBar } from "./src/components/bulkActionBar/BulkActionBar.js";
 import { Card } from "./src/components/card/Card.js";
 import { Swatch } from "./src/components/swatch/Swatch.js";
+import { mergeProps } from "./src/utils/useRender.js";
 import { ChangeChip } from "./src/components/changeChip/ChangeChip.js";
 import { Checkbox } from "./src/components/checkbox/Checkbox.js";
 import { CheckboxTree } from "./src/components/checkboxTree/CheckboxTree.js";
@@ -58,4 +60,4 @@ import { VennDiagram } from "./src/components/vennDiagram/VennDiagram.js";
 import { UserProfile } from "./src/components/legacyNavMenu/UserProfile.js";
 import { LegacyNavMenu } from "./src/components/legacyNavMenu/LegacyNavMenu.js";
 import { icons } from "./index2.js";
-export { Alert, AntdInput, AntdSearchInput, AntdSelect, AppConfigProvider, BarChart, Breadcrumb, BulkActionBar, Button, Card, ChangeChip, Checkbox, CheckboxTree, Collapse, Drawer, Dropdown, EmptyState, FiltersForm, Form, HighchartsReact, Input, InputNumber, LegacyNavMenu, ListPopover, ListRow, ManageColumnsPanel, Menu, Modal, MultiValueTextOperatorOptions, NavMenu, NotificationModal, Pagination, Popover, Progress, Radio, RadioGroup, Rate, Select, SelectAll, Skeleton, Spinner, StatusPill, Steps, SummarizedSelect, Swatch, SwatchStrip, Switch, Table, Tabs, Tag, ThresholdBar, Tooltip, UserProfile, VennDiagram, appTheme, icons, isMultiValueTextOperator, normalizeMultiValues, operatorOptionsFor, tailwindPreset, useMessage, useNotification, useSteps, withDesignSystemPaginationOverrides };
+export { Alert, AntdInput, AntdSearchInput, AntdSelect, AppConfigProvider, BarChart, BareButton, Breadcrumb, BulkActionBar, Button, Card, ChangeChip, Checkbox, CheckboxTree, Collapse, Drawer, Dropdown, EmptyState, FiltersForm, Form, HighchartsReact, Input, InputNumber, LegacyNavMenu, ListPopover, ListRow, ManageColumnsPanel, Menu, Modal, MultiValueTextOperatorOptions, NavMenu, NotificationModal, Pagination, Popover, Progress, Radio, RadioGroup, Rate, Select, SelectAll, Skeleton, Spinner, StatusPill, Steps, SummarizedSelect, Swatch, SwatchStrip, Switch, Table, Tabs, Tag, ThresholdBar, Tooltip, UserProfile, VennDiagram, appTheme, icons, isMultiValueTextOperator, mergeProps, normalizeMultiValues, operatorOptionsFor, tailwindPreset, useMessage, useNotification, useSteps, withDesignSystemPaginationOverrides };

package/dist/index2.js

@@ -2,6 +2,7 @@ import { tailwindPreset } from "./tailwind.js";
 import { appTheme } from "./src/appTheme.js";
 import { AppConfigProvider } from "./src/AppConfigProvider.js";
 import { Alert } from "./src/components/alert/Alert.js";
+import { BareButton } from "./src/components/bareButton/BareButton.js";
 import { BarChart } from "./src/components/barchart/BarChart.js";
 import { HighchartsReact } from "./src/components/barchart/index.js";
 import { Breadcrumb } from "./src/components/breadcrumb/Breadcrumb.js";
@@ -9,6 +10,7 @@ import { Button } from "./src/components/button/Button.js";
 import { BulkActionBar } from "./src/components/bulkActionBar/BulkActionBar.js";
 import { Card } from "./src/components/card/Card.js";
 import { Swatch } from "./src/components/swatch/Swatch.js";
+import { mergeProps } from "./src/utils/useRender.js";
 import { ChangeChip } from "./src/components/changeChip/ChangeChip.js";
 import { Checkbox } from "./src/components/checkbox/Checkbox.js";
 import { CheckboxTree } from "./src/components/checkboxTree/CheckboxTree.js";
@@ -58,4 +60,4 @@ import { VennDiagram } from "./src/components/vennDiagram/VennDiagram.js";
 import { UserProfile } from "./src/components/legacyNavMenu/UserProfile.js";
 import { LegacyNavMenu } from "./src/components/legacyNavMenu/LegacyNavMenu.js";
 import * as icons from "@phosphor-icons/react";
-export { Alert, AntdInput, AntdSearchInput, AntdSelect, AppConfigProvider, BarChart, Breadcrumb, BulkActionBar, Button, Card, ChangeChip, Checkbox, CheckboxTree, Collapse, Drawer, Dropdown, EmptyState, FiltersForm, Form, HighchartsReact, Input, InputNumber, LegacyNavMenu, ListPopover, ListRow, ManageColumnsPanel, Menu, Modal, MultiValueTextOperatorOptions, NavMenu, NotificationModal, Pagination, Popover, Progress, Radio, RadioGroup, Rate, Select, SelectAll, Skeleton, Spinner, StatusPill, Steps, SummarizedSelect, Swatch, SwatchStrip, Switch, Table, Tabs, Tag, ThresholdBar, Tooltip, UserProfile, VennDiagram, appTheme, icons, isMultiValueTextOperator, normalizeMultiValues, operatorOptionsFor, tailwindPreset, useMessage, useNotification, useSteps, withDesignSystemPaginationOverrides };
+export { Alert, AntdInput, AntdSearchInput, AntdSelect, AppConfigProvider, BarChart, BareButton, Breadcrumb, BulkActionBar, Button, Card, ChangeChip, Checkbox, CheckboxTree, Collapse, Drawer, Dropdown, EmptyState, FiltersForm, Form, HighchartsReact, Input, InputNumber, LegacyNavMenu, ListPopover, ListRow, ManageColumnsPanel, Menu, Modal, MultiValueTextOperatorOptions, NavMenu, NotificationModal, Pagination, Popover, Progress, Radio, RadioGroup, Rate, Select, SelectAll, Skeleton, Spinner, StatusPill, Steps, SummarizedSelect, Swatch, SwatchStrip, Switch, Table, Tabs, Tag, ThresholdBar, Tooltip, UserProfile, VennDiagram, appTheme, icons, isMultiValueTextOperator, mergeProps, normalizeMultiValues, operatorOptionsFor, tailwindPreset, useMessage, useNotification, useSteps, withDesignSystemPaginationOverrides };

package/dist/src/components/bareButton/BareButton.cjs

@@ -0,0 +1,31 @@
+const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames, 1);
+//#region src/components/bareButton/BareButton.tsx
+/**
+* A button with no look of its own: its children supply every pixel. For
+* making a purely visual component clickable, e.g. as a `render` element:
+* `<SwatchStrip renderItem={(props) => <BareButton {...props} onClick={…} />} />`.
+* Adds only a pointer cursor and a focus ring; Tailwind's preflight already
+* resets the browser's button styles.
+*
+* The ring reads `--j2-focus-ring-width` (2px), `--j2-focus-ring-color` (the
+* primary color) and `--j2-focus-ring-offset` (0px, so a ring isn't covered by
+* a neighbour placed close by). Change it by setting them on the button or
+* any ancestor, with a class such as `[--j2-focus-ring-offset:2px]` or through
+* `style`. A competing `focus-visible:` class isn't reliable: the order of
+* rules in the generated CSS decides which one wins.
+*/
+var BareButton = (0, react.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+	...props,
+	ref,
+	type: "button",
+	className: (0, classnames.default)("cursor-pointer disabled:cursor-not-allowed focus-visible:[outline:var(--j2-focus-ring-width,2px)_solid_var(--j2-focus-ring-color,var(--j2-color-primary))] focus-visible:[outline-offset:var(--j2-focus-ring-offset,0px)]", className)
+}));
+BareButton.displayName = "BareButton";
+//#endregion
+exports.BareButton = BareButton;
+
+//# sourceMappingURL=BareButton.cjs.map

package/dist/src/components/bareButton/BareButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BareButton.cjs","names":["forwardRef","cx"],"sources":["../../../../src/components/bareButton/BareButton.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport cx from 'classnames'\n\nexport type BareButtonProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'type'\n>\n\n/**\n * A button with no look of its own: its children supply every pixel. For\n * making a purely visual component clickable, e.g. as a `render` element:\n * `<SwatchStrip renderItem={(props) => <BareButton {...props} onClick={…} />} />`.\n * Adds only a pointer cursor and a focus ring; Tailwind's preflight already\n * resets the browser's button styles.\n *\n * The ring reads `--j2-focus-ring-width` (2px), `--j2-focus-ring-color` (the\n * primary color) and `--j2-focus-ring-offset` (0px, so a ring isn't covered by\n * a neighbour placed close by). Change it by setting them on the button or\n * any ancestor, with a class such as `[--j2-focus-ring-offset:2px]` or through\n * `style`. A competing `focus-visible:` class isn't reliable: the order of\n * rules in the generated CSS decides which one wins.\n */\nexport const BareButton = forwardRef<HTMLButtonElement, BareButtonProps>(\n  ({ className, ...props }, ref) => (\n    <button\n      {...props}\n      ref={ref}\n      type=\"button\"\n      className={cx(\n        'cursor-pointer disabled:cursor-not-allowed focus-visible:[outline:var(--j2-focus-ring-width,2px)_solid_var(--j2-focus-ring-color,var(--j2-color-primary))] focus-visible:[outline-offset:var(--j2-focus-ring-offset,0px)]',\n        className\n      )}\n    />\n  )\n)\nBareButton.displayName = 'BareButton'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAsBA,IAAa,cAAA,GAAaA,MAAAA,WAAAA,EACvB,EAAE,WAAW,GAAG,SAAS,QACxB,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;CACE,GAAI;CACC;CACL,MAAK;CACL,YAAA,GAAWC,WAAAA,QAAAA,CACT,6NACA,SACF;AACD,CAAA,CAEL;AACA,WAAW,cAAc"}

package/dist/src/components/bareButton/BareButton.d.ts

@@ -0,0 +1,16 @@
+export type BareButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'>;
+/**
+ * A button with no look of its own: its children supply every pixel. For
+ * making a purely visual component clickable, e.g. as a `render` element:
+ * `<SwatchStrip renderItem={(props) => <BareButton {...props} onClick={…} />} />`.
+ * Adds only a pointer cursor and a focus ring; Tailwind's preflight already
+ * resets the browser's button styles.
+ *
+ * The ring reads `--j2-focus-ring-width` (2px), `--j2-focus-ring-color` (the
+ * primary color) and `--j2-focus-ring-offset` (0px, so a ring isn't covered by
+ * a neighbour placed close by). Change it by setting them on the button or
+ * any ancestor, with a class such as `[--j2-focus-ring-offset:2px]` or through
+ * `style`. A competing `focus-visible:` class isn't reliable: the order of
+ * rules in the generated CSS decides which one wins.
+ */
+export declare const BareButton: import('react').ForwardRefExoticComponent<BareButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/src/components/bareButton/BareButton.js

@@ -0,0 +1,29 @@
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import cx from "classnames";
+//#region src/components/bareButton/BareButton.tsx
+/**
+* A button with no look of its own: its children supply every pixel. For
+* making a purely visual component clickable, e.g. as a `render` element:
+* `<SwatchStrip renderItem={(props) => <BareButton {...props} onClick={…} />} />`.
+* Adds only a pointer cursor and a focus ring; Tailwind's preflight already
+* resets the browser's button styles.
+*
+* The ring reads `--j2-focus-ring-width` (2px), `--j2-focus-ring-color` (the
+* primary color) and `--j2-focus-ring-offset` (0px, so a ring isn't covered by
+* a neighbour placed close by). Change it by setting them on the button or
+* any ancestor, with a class such as `[--j2-focus-ring-offset:2px]` or through
+* `style`. A competing `focus-visible:` class isn't reliable: the order of
+* rules in the generated CSS decides which one wins.
+*/
+var BareButton = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("button", {
+	...props,
+	ref,
+	type: "button",
+	className: cx("cursor-pointer disabled:cursor-not-allowed focus-visible:[outline:var(--j2-focus-ring-width,2px)_solid_var(--j2-focus-ring-color,var(--j2-color-primary))] focus-visible:[outline-offset:var(--j2-focus-ring-offset,0px)]", className)
+}));
+BareButton.displayName = "BareButton";
+//#endregion
+export { BareButton };
+
+//# sourceMappingURL=BareButton.js.map

package/dist/src/components/bareButton/BareButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BareButton.js","names":[],"sources":["../../../../src/components/bareButton/BareButton.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport cx from 'classnames'\n\nexport type BareButtonProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'type'\n>\n\n/**\n * A button with no look of its own: its children supply every pixel. For\n * making a purely visual component clickable, e.g. as a `render` element:\n * `<SwatchStrip renderItem={(props) => <BareButton {...props} onClick={…} />} />`.\n * Adds only a pointer cursor and a focus ring; Tailwind's preflight already\n * resets the browser's button styles.\n *\n * The ring reads `--j2-focus-ring-width` (2px), `--j2-focus-ring-color` (the\n * primary color) and `--j2-focus-ring-offset` (0px, so a ring isn't covered by\n * a neighbour placed close by). Change it by setting them on the button or\n * any ancestor, with a class such as `[--j2-focus-ring-offset:2px]` or through\n * `style`. A competing `focus-visible:` class isn't reliable: the order of\n * rules in the generated CSS decides which one wins.\n */\nexport const BareButton = forwardRef<HTMLButtonElement, BareButtonProps>(\n  ({ className, ...props }, ref) => (\n    <button\n      {...props}\n      ref={ref}\n      type=\"button\"\n      className={cx(\n        'cursor-pointer disabled:cursor-not-allowed focus-visible:[outline:var(--j2-focus-ring-width,2px)_solid_var(--j2-focus-ring-color,var(--j2-color-primary))] focus-visible:[outline-offset:var(--j2-focus-ring-offset,0px)]',\n        className\n      )}\n    />\n  )\n)\nBareButton.displayName = 'BareButton'\n"],"mappings":";;;;;;;;;;;;;;;;;;AAsBA,IAAa,aAAa,YACvB,EAAE,WAAW,GAAG,SAAS,QACxB,oBAAC,UAAD;CACE,GAAI;CACC;CACL,MAAK;CACL,WAAW,GACT,6NACA,SACF;AACD,CAAA,CAEL;AACA,WAAW,cAAc"}

package/dist/src/components/bareButton/index.d.ts

@@ -0,0 +1 @@
+export { BareButton, type BareButtonProps } from './BareButton.js';

package/dist/src/components/changeChip/ChangeChip.cjs

@@ -1,5 +1,6 @@
 const require_runtime = require("../../../_virtual/_rolldown/runtime.cjs");
 const require_Swatch = require("../swatch/Swatch.cjs");
+const require_useRender = require("../../utils/useRender.cjs");
 let react = require("react");
 let _phosphor_icons_react = require("@phosphor-icons/react");
 _phosphor_icons_react = require_runtime.__toESM(_phosphor_icons_react, 1);
@@ -10,39 +11,44 @@ classnames = require_runtime.__toESM(classnames, 1);
 /**
 * A compact chip for one change: an optional swatch, a label and a delta.
 * It is a button, so it can open a popover with the details; wrap it in a
-* `Popover` (it forwards its ref and handlers).
+* `Popover` (it forwards its ref and handlers). Pass `render={<span />}` for
+* a chip that only displays. The ref is an `HTMLElement`, since `render` can
+* swap the button for another element.
 */
-var ChangeChip = (0, react.forwardRef)(({ swatch, label, delta, placeholder, srLabel, className, ...props }, ref) => {
+var ChangeChip = (0, react.forwardRef)(({ swatch, label, delta, placeholder, srLabel, className, render, ...props }, ref) => {
 	const Arrow = delta?.direction === "down" ? _phosphor_icons_react.ArrowDownIcon : _phosphor_icons_react.ArrowUpIcon;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-		...props,
+	return require_useRender.useRender({
+		render,
 		ref,
-		type: "button",
-		className: (0, classnames.default)("inline-flex cursor-pointer items-center gap-1 whitespace-nowrap rounded-j2-sm border border-j2-border bg-[var(--j2-color-fill-quaternary)] px-2 py-px text-xs text-j2-text transition-colors hover:bg-j2-gray-2", className),
-		children: [
-			swatch && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Swatch.Swatch, {
-				...swatch,
-				size: 12
-			}),
-			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }),
-			delta && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				className: "inline-flex items-center gap-0.5 font-medium",
-				style: { color: delta.color ?? "var(--j2-color-primary)" },
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Arrow, {
-					size: 11,
-					weight: "bold",
-					"aria-hidden": true
-				}), delta.value]
-			}),
-			!delta && placeholder && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-j2-text-secondary",
-				children: placeholder
-			}),
-			srLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "sr-only",
-				children: srLabel
-			})
-		]
+		state: {},
+		defaultTagName: "button",
+		props: require_useRender.mergeProps(props, {
+			className: (0, classnames.default)("inline-flex items-center gap-1 whitespace-nowrap rounded-j2-sm border border-j2-border bg-[var(--j2-color-fill-quaternary)] px-2 py-px text-xs text-j2-text transition-colors enabled:cursor-pointer enabled:hover:bg-j2-gray-2", className),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				swatch && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Swatch.Swatch, {
+					...swatch,
+					size: 12
+				}),
+				label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: label }),
+				delta && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "inline-flex items-center gap-0.5 font-medium",
+					style: { color: delta.color ?? "var(--j2-color-primary)" },
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Arrow, {
+						size: 11,
+						weight: "bold",
+						"aria-hidden": true
+					}), delta.value]
+				}),
+				!delta && placeholder && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-j2-text-secondary",
+					children: placeholder
+				}),
+				srLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "sr-only",
+					children: srLabel
+				})
+			] })
+		})
 	});
 });
 ChangeChip.displayName = "ChangeChip";

package/dist/src/components/changeChip/ChangeChip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChangeChip.cjs","names":["forwardRef","ArrowDownIcon","ArrowUpIcon","cx","Swatch"],"sources":["../../../../src/components/changeChip/ChangeChip.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport cx from 'classnames'\nimport { ArrowDownIcon, ArrowUpIcon } from '@phosphor-icons/react'\n\nimport { Swatch, type SwatchProps } from '../swatch'\n\nexport type ChangeChipProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'type'\n> & {\n  /** A leading swatch, e.g. the kind of change. */\n  swatch?: Omit<SwatchProps, 'size'>\n  /** What changed, e.g. an area's name. */\n  label?: React.ReactNode\n  /** How much it changed. */\n  delta?: {\n    direction: 'up' | 'down'\n    value: React.ReactNode\n    /** Text color for the arrow and value. Defaults to the primary color. */\n    color?: string\n  }\n  /** Trailing text when there is no delta to show, e.g. an em dash. */\n  placeholder?: React.ReactNode\n  /** A full description for assistive tech, when the visible text is terse. */\n  srLabel?: string\n}\n\n/**\n * A compact chip for one change: an optional swatch, a label and a delta.\n * It is a button, so it can open a popover with the details; wrap it in a\n * `Popover` (it forwards its ref and handlers).\n */\nexport const ChangeChip = forwardRef<HTMLButtonElement, ChangeChipProps>(\n  (\n    { swatch, label, delta, placeholder, srLabel, className, ...props },\n    ref\n  ) => {\n    const Arrow = delta?.direction === 'down' ? ArrowDownIcon : ArrowUpIcon\n    return (\n      <button\n        {...props}\n        ref={ref}\n        type=\"button\"\n        className={cx(\n          'inline-flex cursor-pointer items-center gap-1 whitespace-nowrap rounded-j2-sm border border-j2-border bg-[var(--j2-color-fill-quaternary)] px-2 py-px text-xs text-j2-text transition-colors hover:bg-j2-gray-2',\n          className\n        )}\n      >\n        {swatch && <Swatch {...swatch} size={12} />}\n        {label && <span>{label}</span>}\n        {delta && (\n          <span\n            className=\"inline-flex items-center gap-0.5 font-medium\"\n            style={{ color: delta.color ?? 'var(--j2-color-primary)' }}\n          >\n            <Arrow size={11} weight=\"bold\" aria-hidden />\n            {delta.value}\n          </span>\n        )}\n        {!delta && placeholder && (\n          <span className=\"text-j2-text-secondary\">{placeholder}</span>\n        )}\n        {srLabel && <span className=\"sr-only\">{srLabel}</span>}\n      </button>\n    )\n  }\n)\nChangeChip.displayName = 'ChangeChip'\n"],"mappings":";;;;;;;;;;;;;;AAgCA,IAAa,cAAA,GAAaA,MAAAA,WAAAA,EAEtB,EAAE,QAAQ,OAAO,OAAO,aAAa,SAAS,WAAW,GAAG,SAC5D,QACG;CACH,MAAM,QAAQ,OAAO,cAAc,SAASC,sBAAAA,gBAAgBC,sBAAAA;CAC5D,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,UAAD;EACE,GAAI;EACC;EACL,MAAK;EACL,YAAA,GAAWC,WAAAA,QAAAA,CACT,mNACA,SACF;EAPF,UAAA;GASG,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD;IAAQ,GAAI;IAAQ,MAAM;GAAK,CAAA;GACzC,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAA,UAAO,MAAY,CAAA;GAC5B,SACC,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;IACE,WAAU;IACV,OAAO,EAAE,OAAO,MAAM,SAAS,0BAA0B;IAF3D,UAAA,CAIE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;KAAO,MAAM;KAAI,QAAO;KAAO,eAAA;IAAa,CAAA,GAC3C,MAAM,KACH;;GAEP,CAAC,SAAS,eACT,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAU;IAA0B,UAAA;GAAkB,CAAA;GAE7D,WAAW,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAU;IAAW,UAAA;GAAc,CAAA;EAC/C;;AAEZ,CACF;AACA,WAAW,cAAc"}
+{"version":3,"file":"ChangeChip.cjs","names":["forwardRef","ArrowDownIcon","ArrowUpIcon","useRender","mergeProps","cx","_Fragment","Swatch"],"sources":["../../../../src/components/changeChip/ChangeChip.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport cx from 'classnames'\nimport { ArrowDownIcon, ArrowUpIcon } from '@phosphor-icons/react'\n\nimport { Swatch, type SwatchVisualProps } from '../swatch'\nimport { mergeProps, useRender, type RenderProp } from '../../utils/useRender'\n\nexport type ChangeChipProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'type'\n> & {\n  /** A leading swatch, e.g. the kind of change. */\n  swatch?: Omit<SwatchVisualProps, 'size'>\n  /** What changed, e.g. an area's name. */\n  label?: React.ReactNode\n  /** How much it changed. */\n  delta?: {\n    direction: 'up' | 'down'\n    value: React.ReactNode\n    /** Text color for the arrow and value. Defaults to the primary color. */\n    color?: string\n  }\n  /** Trailing text when there is no delta to show, e.g. an em dash. */\n  placeholder?: React.ReactNode\n  /** A full description for assistive tech, when the visible text is terse. */\n  srLabel?: string\n  /**\n   * Replaces the button, e.g. `<span />` for a chip that opens nothing. The\n   * hover and pointer apply only while the element is an enabled button. A\n   * render function should spread its props: a wrapping `Popover` passes its\n   * handlers through them.\n   */\n  render?: RenderProp<Record<string, never>>\n}\n\n/**\n * A compact chip for one change: an optional swatch, a label and a delta.\n * It is a button, so it can open a popover with the details; wrap it in a\n * `Popover` (it forwards its ref and handlers). Pass `render={<span />}` for\n * a chip that only displays. The ref is an `HTMLElement`, since `render` can\n * swap the button for another element.\n */\nexport const ChangeChip = forwardRef<HTMLElement, ChangeChipProps>(\n  (\n    { swatch, label, delta, placeholder, srLabel, className, render, ...props },\n    ref\n  ) => {\n    const Arrow = delta?.direction === 'down' ? ArrowDownIcon : ArrowUpIcon\n    return useRender({\n      render,\n      ref,\n      state: {},\n      defaultTagName: 'button',\n      props: mergeProps(props, {\n        className: cx(\n          'inline-flex items-center gap-1 whitespace-nowrap rounded-j2-sm border border-j2-border bg-[var(--j2-color-fill-quaternary)] px-2 py-px text-xs text-j2-text transition-colors enabled:cursor-pointer enabled:hover:bg-j2-gray-2',\n          className\n        ),\n        children: (\n          <>\n            {swatch && <Swatch {...swatch} size={12} />}\n            {label && <span>{label}</span>}\n            {delta && (\n              <span\n                className=\"inline-flex items-center gap-0.5 font-medium\"\n                style={{ color: delta.color ?? 'var(--j2-color-primary)' }}\n              >\n                <Arrow size={11} weight=\"bold\" aria-hidden />\n                {delta.value}\n              </span>\n            )}\n            {!delta && placeholder && (\n              <span className=\"text-j2-text-secondary\">{placeholder}</span>\n            )}\n            {srLabel && <span className=\"sr-only\">{srLabel}</span>}\n          </>\n        ),\n      }),\n    })\n  }\n)\nChangeChip.displayName = 'ChangeChip'\n"],"mappings":";;;;;;;;;;;;;;;;;AA0CA,IAAa,cAAA,GAAaA,MAAAA,WAAAA,EAEtB,EAAE,QAAQ,OAAO,OAAO,aAAa,SAAS,WAAW,QAAQ,GAAG,SACpE,QACG;CACH,MAAM,QAAQ,OAAO,cAAc,SAASC,sBAAAA,gBAAgBC,sBAAAA;CAC5D,OAAOC,kBAAAA,UAAU;EACf;EACA;EACA,OAAO,CAAC;EACR,gBAAgB;EAChB,OAAOC,kBAAAA,WAAW,OAAO;GACvB,YAAA,GAAWC,WAAAA,QAAAA,CACT,mOACA,SACF;GACA,UACE,iBAAA,GAAA,kBAAA,KAAA,CAAAC,kBAAAA,UAAA,EAAA,UAAA;IACG,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAACC,eAAAA,QAAD;KAAQ,GAAI;KAAQ,MAAM;IAAK,CAAA;IACzC,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAA,UAAO,MAAY,CAAA;IAC5B,SACC,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;KACE,WAAU;KACV,OAAO,EAAE,OAAO,MAAM,SAAS,0BAA0B;KAF3D,UAAA,CAIE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;MAAO,MAAM;MAAI,QAAO;MAAO,eAAA;KAAa,CAAA,GAC3C,MAAM,KACH;;IAEP,CAAC,SAAS,eACT,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;KAAM,WAAU;KAA0B,UAAA;IAAkB,CAAA;IAE7D,WAAW,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;KAAM,WAAU;KAAW,UAAA;IAAc,CAAA;GACrD,EAAA,CAAA;EAEN,CAAC;CACH,CAAC;AACH,CACF;AACA,WAAW,cAAc"}

package/dist/src/components/changeChip/ChangeChip.d.ts

@@ -1,7 +1,8 @@
-import { SwatchProps } from '../swatch/index.js';
+import { SwatchVisualProps } from '../swatch/index.js';
+import { RenderProp } from '../../utils/useRender.js';
 export type ChangeChipProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> & {
     /** A leading swatch, e.g. the kind of change. */
-    swatch?: Omit<SwatchProps, 'size'>;
+    swatch?: Omit<SwatchVisualProps, 'size'>;
     /** What changed, e.g. an area's name. */
     label?: React.ReactNode;
     /** How much it changed. */
@@ -15,15 +16,24 @@ export type ChangeChipProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
     placeholder?: React.ReactNode;
     /** A full description for assistive tech, when the visible text is terse. */
     srLabel?: string;
+    /**
+     * Replaces the button, e.g. `<span />` for a chip that opens nothing. The
+     * hover and pointer apply only while the element is an enabled button. A
+     * render function should spread its props: a wrapping `Popover` passes its
+     * handlers through them.
+     */
+    render?: RenderProp<Record<string, never>>;
 };
 /**
  * A compact chip for one change: an optional swatch, a label and a delta.
  * It is a button, so it can open a popover with the details; wrap it in a
- * `Popover` (it forwards its ref and handlers).
+ * `Popover` (it forwards its ref and handlers). Pass `render={<span />}` for
+ * a chip that only displays. The ref is an `HTMLElement`, since `render` can
+ * swap the button for another element.
  */
 export declare const ChangeChip: import('react').ForwardRefExoticComponent<Omit<import('react').ButtonHTMLAttributes<HTMLButtonElement>, "type"> & {
     /** A leading swatch, e.g. the kind of change. */
-    swatch?: Omit<SwatchProps, "size">;
+    swatch?: Omit<SwatchVisualProps, "size">;
     /** What changed, e.g. an area's name. */
     label?: React.ReactNode;
     /** How much it changed. */
@@ -37,4 +47,11 @@ export declare const ChangeChip: import('react').ForwardRefExoticComponent<Omit<
     placeholder?: React.ReactNode;
     /** A full description for assistive tech, when the visible text is terse. */
     srLabel?: string;
-} & import('react').RefAttributes<HTMLButtonElement>>;
+    /**
+     * Replaces the button, e.g. `<span />` for a chip that opens nothing. The
+     * hover and pointer apply only while the element is an enabled button. A
+     * render function should spread its props: a wrapping `Popover` passes its
+     * handlers through them.
+     */
+    render?: RenderProp<Record<string, never>>;
+} & import('react').RefAttributes<HTMLElement>>;

package/dist/src/components/changeChip/ChangeChip.js

@@ -1,45 +1,51 @@
 import { Swatch } from "../swatch/Swatch.js";
+import { mergeProps, useRender } from "../../utils/useRender.js";
 import { forwardRef } from "react";
 import { ArrowDownIcon, ArrowUpIcon } from "@phosphor-icons/react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import cx from "classnames";
 //#region src/components/changeChip/ChangeChip.tsx
 /**
 * A compact chip for one change: an optional swatch, a label and a delta.
 * It is a button, so it can open a popover with the details; wrap it in a
-* `Popover` (it forwards its ref and handlers).
+* `Popover` (it forwards its ref and handlers). Pass `render={<span />}` for
+* a chip that only displays. The ref is an `HTMLElement`, since `render` can
+* swap the button for another element.
 */
-var ChangeChip = forwardRef(({ swatch, label, delta, placeholder, srLabel, className, ...props }, ref) => {
+var ChangeChip = forwardRef(({ swatch, label, delta, placeholder, srLabel, className, render, ...props }, ref) => {
 	const Arrow = delta?.direction === "down" ? ArrowDownIcon : ArrowUpIcon;
-	return /* @__PURE__ */ jsxs("button", {
-		...props,
+	return useRender({
+		render,
 		ref,
-		type: "button",
-		className: cx("inline-flex cursor-pointer items-center gap-1 whitespace-nowrap rounded-j2-sm border border-j2-border bg-[var(--j2-color-fill-quaternary)] px-2 py-px text-xs text-j2-text transition-colors hover:bg-j2-gray-2", className),
-		children: [
-			swatch && /* @__PURE__ */ jsx(Swatch, {
-				...swatch,
-				size: 12
-			}),
-			label && /* @__PURE__ */ jsx("span", { children: label }),
-			delta && /* @__PURE__ */ jsxs("span", {
-				className: "inline-flex items-center gap-0.5 font-medium",
-				style: { color: delta.color ?? "var(--j2-color-primary)" },
-				children: [/* @__PURE__ */ jsx(Arrow, {
-					size: 11,
-					weight: "bold",
-					"aria-hidden": true
-				}), delta.value]
-			}),
-			!delta && placeholder && /* @__PURE__ */ jsx("span", {
-				className: "text-j2-text-secondary",
-				children: placeholder
-			}),
-			srLabel && /* @__PURE__ */ jsx("span", {
-				className: "sr-only",
-				children: srLabel
-			})
-		]
+		state: {},
+		defaultTagName: "button",
+		props: mergeProps(props, {
+			className: cx("inline-flex items-center gap-1 whitespace-nowrap rounded-j2-sm border border-j2-border bg-[var(--j2-color-fill-quaternary)] px-2 py-px text-xs text-j2-text transition-colors enabled:cursor-pointer enabled:hover:bg-j2-gray-2", className),
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				swatch && /* @__PURE__ */ jsx(Swatch, {
+					...swatch,
+					size: 12
+				}),
+				label && /* @__PURE__ */ jsx("span", { children: label }),
+				delta && /* @__PURE__ */ jsxs("span", {
+					className: "inline-flex items-center gap-0.5 font-medium",
+					style: { color: delta.color ?? "var(--j2-color-primary)" },
+					children: [/* @__PURE__ */ jsx(Arrow, {
+						size: 11,
+						weight: "bold",
+						"aria-hidden": true
+					}), delta.value]
+				}),
+				!delta && placeholder && /* @__PURE__ */ jsx("span", {
+					className: "text-j2-text-secondary",
+					children: placeholder
+				}),
+				srLabel && /* @__PURE__ */ jsx("span", {
+					className: "sr-only",
+					children: srLabel
+				})
+			] })
+		})
 	});
 });
 ChangeChip.displayName = "ChangeChip";

package/dist/src/components/changeChip/ChangeChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChangeChip.js","names":[],"sources":["../../../../src/components/changeChip/ChangeChip.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport cx from 'classnames'\nimport { ArrowDownIcon, ArrowUpIcon } from '@phosphor-icons/react'\n\nimport { Swatch, type SwatchProps } from '../swatch'\n\nexport type ChangeChipProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'type'\n> & {\n  /** A leading swatch, e.g. the kind of change. */\n  swatch?: Omit<SwatchProps, 'size'>\n  /** What changed, e.g. an area's name. */\n  label?: React.ReactNode\n  /** How much it changed. */\n  delta?: {\n    direction: 'up' | 'down'\n    value: React.ReactNode\n    /** Text color for the arrow and value. Defaults to the primary color. */\n    color?: string\n  }\n  /** Trailing text when there is no delta to show, e.g. an em dash. */\n  placeholder?: React.ReactNode\n  /** A full description for assistive tech, when the visible text is terse. */\n  srLabel?: string\n}\n\n/**\n * A compact chip for one change: an optional swatch, a label and a delta.\n * It is a button, so it can open a popover with the details; wrap it in a\n * `Popover` (it forwards its ref and handlers).\n */\nexport const ChangeChip = forwardRef<HTMLButtonElement, ChangeChipProps>(\n  (\n    { swatch, label, delta, placeholder, srLabel, className, ...props },\n    ref\n  ) => {\n    const Arrow = delta?.direction === 'down' ? ArrowDownIcon : ArrowUpIcon\n    return (\n      <button\n        {...props}\n        ref={ref}\n        type=\"button\"\n        className={cx(\n          'inline-flex cursor-pointer items-center gap-1 whitespace-nowrap rounded-j2-sm border border-j2-border bg-[var(--j2-color-fill-quaternary)] px-2 py-px text-xs text-j2-text transition-colors hover:bg-j2-gray-2',\n          className\n        )}\n      >\n        {swatch && <Swatch {...swatch} size={12} />}\n        {label && <span>{label}</span>}\n        {delta && (\n          <span\n            className=\"inline-flex items-center gap-0.5 font-medium\"\n            style={{ color: delta.color ?? 'var(--j2-color-primary)' }}\n          >\n            <Arrow size={11} weight=\"bold\" aria-hidden />\n            {delta.value}\n          </span>\n        )}\n        {!delta && placeholder && (\n          <span className=\"text-j2-text-secondary\">{placeholder}</span>\n        )}\n        {srLabel && <span className=\"sr-only\">{srLabel}</span>}\n      </button>\n    )\n  }\n)\nChangeChip.displayName = 'ChangeChip'\n"],"mappings":";;;;;;;;;;;AAgCA,IAAa,aAAa,YAEtB,EAAE,QAAQ,OAAO,OAAO,aAAa,SAAS,WAAW,GAAG,SAC5D,QACG;CACH,MAAM,QAAQ,OAAO,cAAc,SAAS,gBAAgB;CAC5D,OACE,qBAAC,UAAD;EACE,GAAI;EACC;EACL,MAAK;EACL,WAAW,GACT,mNACA,SACF;EAPF,UAAA;GASG,UAAU,oBAAC,QAAD;IAAQ,GAAI;IAAQ,MAAM;GAAK,CAAA;GACzC,SAAS,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA;GAC5B,SACC,qBAAC,QAAD;IACE,WAAU;IACV,OAAO,EAAE,OAAO,MAAM,SAAS,0BAA0B;IAF3D,UAAA,CAIE,oBAAC,OAAD;KAAO,MAAM;KAAI,QAAO;KAAO,eAAA;IAAa,CAAA,GAC3C,MAAM,KACH;;GAEP,CAAC,SAAS,eACT,oBAAC,QAAD;IAAM,WAAU;IAA0B,UAAA;GAAkB,CAAA;GAE7D,WAAW,oBAAC,QAAD;IAAM,WAAU;IAAW,UAAA;GAAc,CAAA;EAC/C;;AAEZ,CACF;AACA,WAAW,cAAc"}
+{"version":3,"file":"ChangeChip.js","names":["_Fragment"],"sources":["../../../../src/components/changeChip/ChangeChip.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport cx from 'classnames'\nimport { ArrowDownIcon, ArrowUpIcon } from '@phosphor-icons/react'\n\nimport { Swatch, type SwatchVisualProps } from '../swatch'\nimport { mergeProps, useRender, type RenderProp } from '../../utils/useRender'\n\nexport type ChangeChipProps = Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'type'\n> & {\n  /** A leading swatch, e.g. the kind of change. */\n  swatch?: Omit<SwatchVisualProps, 'size'>\n  /** What changed, e.g. an area's name. */\n  label?: React.ReactNode\n  /** How much it changed. */\n  delta?: {\n    direction: 'up' | 'down'\n    value: React.ReactNode\n    /** Text color for the arrow and value. Defaults to the primary color. */\n    color?: string\n  }\n  /** Trailing text when there is no delta to show, e.g. an em dash. */\n  placeholder?: React.ReactNode\n  /** A full description for assistive tech, when the visible text is terse. */\n  srLabel?: string\n  /**\n   * Replaces the button, e.g. `<span />` for a chip that opens nothing. The\n   * hover and pointer apply only while the element is an enabled button. A\n   * render function should spread its props: a wrapping `Popover` passes its\n   * handlers through them.\n   */\n  render?: RenderProp<Record<string, never>>\n}\n\n/**\n * A compact chip for one change: an optional swatch, a label and a delta.\n * It is a button, so it can open a popover with the details; wrap it in a\n * `Popover` (it forwards its ref and handlers). Pass `render={<span />}` for\n * a chip that only displays. The ref is an `HTMLElement`, since `render` can\n * swap the button for another element.\n */\nexport const ChangeChip = forwardRef<HTMLElement, ChangeChipProps>(\n  (\n    { swatch, label, delta, placeholder, srLabel, className, render, ...props },\n    ref\n  ) => {\n    const Arrow = delta?.direction === 'down' ? ArrowDownIcon : ArrowUpIcon\n    return useRender({\n      render,\n      ref,\n      state: {},\n      defaultTagName: 'button',\n      props: mergeProps(props, {\n        className: cx(\n          'inline-flex items-center gap-1 whitespace-nowrap rounded-j2-sm border border-j2-border bg-[var(--j2-color-fill-quaternary)] px-2 py-px text-xs text-j2-text transition-colors enabled:cursor-pointer enabled:hover:bg-j2-gray-2',\n          className\n        ),\n        children: (\n          <>\n            {swatch && <Swatch {...swatch} size={12} />}\n            {label && <span>{label}</span>}\n            {delta && (\n              <span\n                className=\"inline-flex items-center gap-0.5 font-medium\"\n                style={{ color: delta.color ?? 'var(--j2-color-primary)' }}\n              >\n                <Arrow size={11} weight=\"bold\" aria-hidden />\n                {delta.value}\n              </span>\n            )}\n            {!delta && placeholder && (\n              <span className=\"text-j2-text-secondary\">{placeholder}</span>\n            )}\n            {srLabel && <span className=\"sr-only\">{srLabel}</span>}\n          </>\n        ),\n      }),\n    })\n  }\n)\nChangeChip.displayName = 'ChangeChip'\n"],"mappings":";;;;;;;;;;;;;;AA0CA,IAAa,aAAa,YAEtB,EAAE,QAAQ,OAAO,OAAO,aAAa,SAAS,WAAW,QAAQ,GAAG,SACpE,QACG;CACH,MAAM,QAAQ,OAAO,cAAc,SAAS,gBAAgB;CAC5D,OAAO,UAAU;EACf;EACA;EACA,OAAO,CAAC;EACR,gBAAgB;EAChB,OAAO,WAAW,OAAO;GACvB,WAAW,GACT,mOACA,SACF;GACA,UACE,qBAAAA,YAAA,EAAA,UAAA;IACG,UAAU,oBAAC,QAAD;KAAQ,GAAI;KAAQ,MAAM;IAAK,CAAA;IACzC,SAAS,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA;IAC5B,SACC,qBAAC,QAAD;KACE,WAAU;KACV,OAAO,EAAE,OAAO,MAAM,SAAS,0BAA0B;KAF3D,UAAA,CAIE,oBAAC,OAAD;MAAO,MAAM;MAAI,QAAO;MAAO,eAAA;KAAa,CAAA,GAC3C,MAAM,KACH;;IAEP,CAAC,SAAS,eACT,oBAAC,QAAD;KAAM,WAAU;KAA0B,UAAA;IAAkB,CAAA;IAE7D,WAAW,oBAAC,QAAD;KAAM,WAAU;KAAW,UAAA;IAAc,CAAA;GACrD,EAAA,CAAA;EAEN,CAAC;CACH,CAAC;AACH,CACF;AACA,WAAW,cAAc"}

package/dist/src/components/input/AntdInput.d.ts

@@ -293,11 +293,11 @@ export declare const AntdInput: import('react').ForwardRefExoticComponent<{
     prefixCls?: string | undefined;
     list?: string | undefined | undefined;
     step?: number | string | undefined | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
-    hidden?: boolean | undefined | undefined;
-    content?: string | undefined | undefined;
-    multiple?: boolean | undefined | undefined;
-    translate?: "yes" | "no" | undefined | undefined;
+    formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
+    formEncType?: string | undefined | undefined;
+    formMethod?: string | undefined | undefined;
+    formNoValidate?: boolean | undefined | undefined;
+    formTarget?: string | undefined | undefined;
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -307,10 +307,14 @@ export declare const AntdInput: import('react').ForwardRefExoticComponent<{
     contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
     contextMenu?: string | undefined | undefined;
     dir?: string | undefined | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
     enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+    hidden?: boolean | undefined | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
     radioGroup?: string | undefined | undefined;
     about?: string | undefined | undefined;
+    content?: string | undefined | undefined;
     datatype?: string | undefined | undefined;
     inlist?: any;
     prefix?: import('react').ReactNode;
@@ -337,11 +341,7 @@ export declare const AntdInput: import('react').ForwardRefExoticComponent<{
     inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
     is?: string | undefined | undefined;
     exportparts?: string | undefined | undefined;
-    formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
-    formEncType?: string | undefined | undefined;
-    formMethod?: string | undefined | undefined;
-    formNoValidate?: boolean | undefined | undefined;
-    formTarget?: string | undefined | undefined;
+    multiple?: boolean | undefined | undefined;
     count?: import('@rc-component/input/lib/interface').CountConfig | undefined;
     placeholder?: string | undefined | undefined;
     checked?: boolean | undefined | undefined;

package/dist/src/components/input/AntdSearchInput.d.ts

@@ -305,11 +305,11 @@ export declare const AntdSearchInput: import('react').ForwardRefExoticComponent<
     prefixCls?: string | undefined;
     list?: string | undefined | undefined;
     step?: number | string | undefined | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
-    hidden?: boolean | undefined | undefined;
-    content?: string | undefined | undefined;
-    multiple?: boolean | undefined | undefined;
-    translate?: "yes" | "no" | undefined | undefined;
+    formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
+    formEncType?: string | undefined | undefined;
+    formMethod?: string | undefined | undefined;
+    formNoValidate?: boolean | undefined | undefined;
+    formTarget?: string | undefined | undefined;
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -319,10 +319,14 @@ export declare const AntdSearchInput: import('react').ForwardRefExoticComponent<
     contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
     contextMenu?: string | undefined | undefined;
     dir?: string | undefined | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
     enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+    hidden?: boolean | undefined | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
+    translate?: "yes" | "no" | undefined | undefined;
     radioGroup?: string | undefined | undefined;
     about?: string | undefined | undefined;
+    content?: string | undefined | undefined;
     datatype?: string | undefined | undefined;
     inlist?: any;
     prefix?: import('react').ReactNode;
@@ -349,11 +353,7 @@ export declare const AntdSearchInput: import('react').ForwardRefExoticComponent<
     inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
     is?: string | undefined | undefined;
     exportparts?: string | undefined | undefined;
-    formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
-    formEncType?: string | undefined | undefined;
-    formMethod?: string | undefined | undefined;
-    formNoValidate?: boolean | undefined | undefined;
-    formTarget?: string | undefined | undefined;
+    multiple?: boolean | undefined | undefined;
     count?: import('@rc-component/input/lib/interface').CountConfig | undefined;
     placeholder?: string | undefined | undefined;
     checked?: boolean | undefined | undefined;