@orianatech/pire 0.19.0 → 0.20.0

package/dist/components/core/Tag.d.cts

@@ -3,6 +3,21 @@ export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
     /** Provide to render the remove affordance — filter tokens, multi-select values. */
     onRemove?: () => void;
     isDisabled?: boolean;
+    /**
+     * Marks the tag as one of a set of **categories** — kinds of a thing, where none is good or bad.
+     * Use it for payment kinds, document types, cost-centre groups.
+     *
+     * This is what `Badge` is not for. `Badge`'s five values are *states*: painting a category
+     * "negative" says something went wrong when nothing did.
+     *
+     * The number is a slot in the shared `--viz` ramp, not a colour. Assign in order and do not
+     * cycle past 6 — colour-blind separation is measured between adjacent slots, and a seventh
+     * category implies a distinction the eye cannot recover. Fold the tail into one "Other".
+     *
+     * The colour rides on a swatch, never on the text: the label stays in normal ink so it keeps
+     * its contrast, and the category is never carried by colour alone.
+     */
+    category?: 1 | 2 | 3 | 4 | 5 | 6;
 }
 /** A removable token: applied filters, multi-select values. */
-export declare function Tag({ children, onRemove, isDisabled, className, ...rest }: TagProps): React.JSX.Element;
+export declare function Tag({ children, onRemove, isDisabled, category, className, ...rest }: TagProps): React.JSX.Element;

package/dist/components/core/Tag.d.ts

@@ -3,7 +3,22 @@ export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
     /** Provide to render the remove affordance — filter tokens, multi-select values. */
     onRemove?: () => void;
     isDisabled?: boolean;
+    /**
+     * Marks the tag as one of a set of **categories** — kinds of a thing, where none is good or bad.
+     * Use it for payment kinds, document types, cost-centre groups.
+     *
+     * This is what `Badge` is not for. `Badge`'s five values are *states*: painting a category
+     * "negative" says something went wrong when nothing did.
+     *
+     * The number is a slot in the shared `--viz` ramp, not a colour. Assign in order and do not
+     * cycle past 6 — colour-blind separation is measured between adjacent slots, and a seventh
+     * category implies a distinction the eye cannot recover. Fold the tail into one "Other".
+     *
+     * The colour rides on a swatch, never on the text: the label stays in normal ink so it keeps
+     * its contrast, and the category is never carried by colour alone.
+     */
+    category?: 1 | 2 | 3 | 4 | 5 | 6;
 }
 /** A removable token: applied filters, multi-select values. */
-export declare function Tag({ children, onRemove, isDisabled, className, ...rest }: TagProps): React.JSX.Element;
+export declare function Tag({ children, onRemove, isDisabled, category, className, ...rest }: TagProps): React.JSX.Element;
 //# sourceMappingURL=Tag.d.ts.map

package/dist/components/core/Tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/core/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAKpC,MAAM,WAAW,QAAS,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACrE,oFAAoF;IACpF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,+DAA+D;AAC/D,wBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,QAAQ,qBAYnF"}
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/core/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAKpC,MAAM,WAAW,QAAS,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACrE,oFAAoF;IACpF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;OAaG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;CAClC;AAED,+DAA+D;AAC/D,wBAAgB,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,QAAQ,qBAe7F"}

package/dist/components.css

@@ -62,6 +62,18 @@
 .pire-badge[data-status="neutral"]{background:var(--status-neutral-bg);color:var(--status-neutral-fg);border-color:var(--status-neutral-border)}
 .pire-tag{display:inline-flex;align-items:center;gap:var(--sp-1);height:24px;padding:0 var(--sp-1) 0 var(--sp-2);border:1px solid var(--border-default);border-radius:var(--radius-1);background:var(--surface-sunken);color:var(--text-primary);font:var(--type-caption);white-space:nowrap}
 .pire-tag[data-disabled]{color:var(--text-disabled);background:var(--surface-disabled)}
+/* Category identity rides on a mark, never on the label: the text keeps --text-primary so its
+   contrast holds in every token scope, and the category is never colour-alone. Slots come from the
+   shared --viz ramp, which is already validated for colour-blind separation between adjacent
+   slots — a second categorical palette would have to earn that again and could be confused with
+   this one. */
+.pire-tag-swatch{flex:0 0 auto;width:8px;height:8px;border-radius:var(--radius-pill);background:var(--viz-1)}
+.pire-tag-swatch[data-category="2"]{background:var(--viz-2)}
+.pire-tag-swatch[data-category="3"]{background:var(--viz-3)}
+.pire-tag-swatch[data-category="4"]{background:var(--viz-4)}
+.pire-tag-swatch[data-category="5"]{background:var(--viz-5)}
+.pire-tag-swatch[data-category="6"]{background:var(--viz-6)}
+.pire-tag[data-disabled] .pire-tag-swatch{background:var(--text-disabled)}
 .pire-tag-remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:0;border-radius:var(--radius-1);background:transparent;color:var(--text-secondary);cursor:pointer}
 .pire-tag-remove[data-hovered]{background:var(--surface-active);color:var(--text-primary)}
 

package/dist/index.cjs

@@ -604,8 +604,9 @@ function Badge({ children, status = "neutral", showIcon = true, className, ...re
 // src/components/core/Tag.tsx
 var import_react_aria_components4 = require("react-aria-components");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-function Tag({ children, onRemove, isDisabled, className, ...rest }) {
+function Tag({ children, onRemove, isDisabled, category, className, ...rest }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: cx("pire-tag", className), "data-disabled": isDisabled ? "true" : void 0, ...rest, children: [
+    category ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "pire-tag-swatch", "data-category": category, "aria-hidden": "true" }) : null,
     children,
     onRemove ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       import_react_aria_components4.Button,