@particle-academy/react-fancy 5.28.1 → 5.29.1

package/README.md

@@ -221,6 +221,60 @@ All components render a `data-react-fancy-*` attribute on their root element (e.
 document.querySelectorAll("[data-react-fancy-dropdown-item]");
 ```
 
+## Your brand colour
+
+Every component that takes a `color` accepts `"brand"` — your colour, not one of
+Tailwind's hues:
+
+```jsx
+<Button color="brand">Save</Button>
+<Badge color="brand">New</Badge>
+```
+
+It resolves through three CSS variables you set once:
+
+```css
+:root {
+  --color-brand: #003057;           /* the brand colour itself */
+  --color-brand-contrast: #ffffff;  /* text + icons ON that colour */
+  --color-brand-hover: #D4A017;     /* need NOT be a shade of brand */
+}
+```
+
+Three rather than one because a generated hover assumes "same hue, darker", and
+a brand palette need not work that way — a navy whose hover is gold cannot be
+derived from navy by any amount of arithmetic. You state it.
+
+The tinted variants (`outline`, `ghost`, `soft`) derive from the same three with
+opacity, so you never need to supply a 50–950 scale.
+
+### Dark mode: swap the PAIR
+
+`--color-brand` and `--color-brand-contrast` only make sense together. Repointing
+one without the other is the obvious wrong move, and it **fails quietly** — the
+button still renders, it is just unreadable:
+
+```css
+/* WRONG — the surface goes pale, the label stays white on top of it */
+.dark { --color-brand: #BFD7EA; }
+
+/* RIGHT — the pair turns over together */
+.dark {
+  --color-brand: #BFD7EA;
+  --color-brand-contrast: #003057;
+}
+```
+
+The same swap fixes ghost and outline buttons, where the brand colour is the
+LABEL rather than the surface: a dark-mode brand that stayed navy would put navy
+text on a near-black background.
+
+`--color-brand-hover` often needs no per-mode value. An accent chosen to stand
+against the brand usually stands against it in both modes.
+
+Reported by a consumer running a three-colour palette; the wrong version above
+is the one they hit first.
+
 ## Dark Mode
 
 Dark mode works via Tailwind's `dark:` class strategy. The library's `Portal` component automatically detects the `dark` class (or `data-theme="dark"`) on `<html>` and propagates it into portaled content (modals, dropdowns, tooltips, toasts, etc.).

package/dist/{FieldMode.context-DNyItEKV.d.ts → FieldMode.context-Bl41F2WF.d.ts}

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { FormHTMLAttributes, ReactNode } from 'react';
-import { F as FieldMode } from './inputs.types-vl3PAc4q.js';
-import { S as Size } from './types-8Sv0rCjw.js';
+import { F as FieldMode } from './inputs.types-DzGcqcPf.js';
+import { S as Size } from './types-DJI492iY.js';
 
 interface FormProviderProps {
     /** `"edit"` (default) or `"view"` — applied to every input below that doesn't override it. */

package/dist/{FieldMode.context-BOShROIw.d.cts → FieldMode.context-CU5h1CyF.d.cts}

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { FormHTMLAttributes, ReactNode } from 'react';
-import { F as FieldMode } from './inputs.types-CJbAS14j.cjs';
-import { S as Size } from './types-8Sv0rCjw.cjs';
+import { F as FieldMode } from './inputs.types-duxPKadC.cjs';
+import { S as Size } from './types-DJI492iY.cjs';
 
 interface FormProviderProps {
     /** `"edit"` (default) or `"view"` — applied to every input below that doesn't override it. */

package/dist/{Timeline-Cvrd7N7-.d.ts → Timeline-B-3JFX43.d.ts}

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { C as Color } from './types-8Sv0rCjw.js';
+import { C as Color } from './types-DJI492iY.js';
 
 type TimelineVariant = "stacked" | "alternating" | "horizontal";
 /** @deprecated Use TimelineVariant instead */

package/dist/{Timeline-7zHhIk3P.d.cts → Timeline-BSk0X2nV.d.cts}

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { C as Color } from './types-8Sv0rCjw.cjs';
+import { C as Color } from './types-DJI492iY.cjs';
 
 type TimelineVariant = "stacked" | "alternating" | "horizontal";
 /** @deprecated Use TimelineVariant instead */

package/dist/autocomplete.d.cts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { F as FieldMode } from './inputs.types-CJbAS14j.cjs';
-import './types-8Sv0rCjw.cjs';
+import { F as FieldMode } from './inputs.types-duxPKadC.cjs';
+import './types-DJI492iY.cjs';
 
 interface AutocompleteOption {
     value: string;

package/dist/autocomplete.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { F as FieldMode } from './inputs.types-vl3PAc4q.js';
-import './types-8Sv0rCjw.js';
+import { F as FieldMode } from './inputs.types-DzGcqcPf.js';
+import './types-DJI492iY.js';
 
 interface AutocompleteOption {
     value: string;

package/dist/badge.cjs

@@ -1,14 +1,14 @@
 'use strict';
 
 require('./chunk-VBWRH4UW.cjs');
-var chunkH5OPZEVQ_cjs = require('./chunk-H5OPZEVQ.cjs');
+var chunkMOU6O324_cjs = require('./chunk-MOU6O324.cjs');
 require('./chunk-ZU5Q77OT.cjs');
 
 
 
 Object.defineProperty(exports, "Badge", {
   enumerable: true,
-  get: function () { return chunkH5OPZEVQ_cjs.Badge; }
+  get: function () { return chunkMOU6O324_cjs.Badge; }
 });
 //# sourceMappingURL=badge.cjs.map
 //# sourceMappingURL=badge.cjs.map

package/dist/badge.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { HTMLAttributes } from 'react';
-import { C as Color } from './types-8Sv0rCjw.cjs';
+import { C as Color } from './types-DJI492iY.cjs';
 
 interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     /** Badge color — any color in the Tailwind v4 palette. */

package/dist/badge.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { HTMLAttributes } from 'react';
-import { C as Color } from './types-8Sv0rCjw.js';
+import { C as Color } from './types-DJI492iY.js';
 
 interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
     /** Badge color — any color in the Tailwind v4 palette. */

package/dist/badge.js

@@ -1,5 +1,5 @@
 import './chunk-IQ4KQJAO.js';
-export { Badge } from './chunk-EWRP6KCY.js';
+export { Badge } from './chunk-6FCQD2KQ.js';
 import './chunk-MMW2JGKZ.js';
 //# sourceMappingURL=badge.js.map
 //# sourceMappingURL=badge.js.map

package/dist/breadcrumbs.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { N as NavigableProps } from './types-8Sv0rCjw.cjs';
+import { N as NavigableProps } from './types-DJI492iY.cjs';
 
 interface BreadcrumbsProps {
     children: ReactNode;

package/dist/breadcrumbs.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { N as NavigableProps } from './types-8Sv0rCjw.js';
+import { N as NavigableProps } from './types-DJI492iY.js';
 
 interface BreadcrumbsProps {
     children: ReactNode;

package/dist/button.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 require('./chunk-M5MUGSON.cjs');
-var chunkF2VJEXN2_cjs = require('./chunk-F2VJEXN2.cjs');
+var chunkUWL6U3L7_cjs = require('./chunk-UWL6U3L7.cjs');
 require('./chunk-XCZZVRBY.cjs');
 require('./chunk-QKFOJKVE.cjs');
 require('./chunk-BFKCVSNK.cjs');
@@ -11,11 +11,11 @@ require('./chunk-ZU5Q77OT.cjs');
 
 Object.defineProperty(exports, "Action", {
   enumerable: true,
-  get: function () { return chunkF2VJEXN2_cjs.Action; }
+  get: function () { return chunkUWL6U3L7_cjs.Action; }
 });
 Object.defineProperty(exports, "Button", {
   enumerable: true,
-  get: function () { return chunkF2VJEXN2_cjs.Button; }
+  get: function () { return chunkUWL6U3L7_cjs.Button; }
 });
 //# sourceMappingURL=button.cjs.map
 //# sourceMappingURL=button.cjs.map

package/dist/button.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ButtonHTMLAttributes, ElementType, AnchorHTMLAttributes } from 'react';
-import { B as ButtonColor, S as Size } from './types-8Sv0rCjw.cjs';
+import { B as ButtonColor, S as Size } from './types-DJI492iY.cjs';
 
 interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> {
     /** Shape/fill variant */

package/dist/button.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ButtonHTMLAttributes, ElementType, AnchorHTMLAttributes } from 'react';
-import { B as ButtonColor, S as Size } from './types-8Sv0rCjw.js';
+import { B as ButtonColor, S as Size } from './types-DJI492iY.js';
 
 interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> {
     /** Shape/fill variant */

package/dist/button.js

@@ -1,5 +1,5 @@
 import './chunk-LQ4ICCN2.js';
-export { Action, Button } from './chunk-VYQI4R6S.js';
+export { Action, Button } from './chunk-G6VMNSCM.js';
 import './chunk-45BBNJQD.js';
 import './chunk-IVRYSSM7.js';
 import './chunk-XJXQG34J.js';

package/dist/callout.cjs

@@ -1,14 +1,14 @@
 'use strict';
 
 require('./chunk-3I2KWNXT.cjs');
-var chunkEJHAIXAE_cjs = require('./chunk-EJHAIXAE.cjs');
+var chunkLCNHEYIM_cjs = require('./chunk-LCNHEYIM.cjs');
 require('./chunk-ZU5Q77OT.cjs');
 
 
 
 Object.defineProperty(exports, "Callout", {
   enumerable: true,
-  get: function () { return chunkEJHAIXAE_cjs.Callout; }
+  get: function () { return chunkLCNHEYIM_cjs.Callout; }
 });
 //# sourceMappingURL=callout.cjs.map
 //# sourceMappingURL=callout.cjs.map

package/dist/callout.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
-import { C as Color } from './types-8Sv0rCjw.cjs';
+import { C as Color } from './types-DJI492iY.cjs';
 
 interface CalloutProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;

package/dist/callout.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
-import { C as Color } from './types-8Sv0rCjw.js';
+import { C as Color } from './types-DJI492iY.js';
 
 interface CalloutProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;

package/dist/callout.js

@@ -1,5 +1,5 @@
 import './chunk-NMXCQOHV.js';
-export { Callout } from './chunk-4JGUPG22.js';
+export { Callout } from './chunk-ZXZJYVWP.js';
 import './chunk-MMW2JGKZ.js';
 //# sourceMappingURL=callout.js.map
 //# sourceMappingURL=callout.js.map

package/dist/checkbox-group.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { a as InputBaseProps, b as InputOption } from './inputs.types-CJbAS14j.cjs';
-import './types-8Sv0rCjw.cjs';
+import { a as InputBaseProps, b as InputOption } from './inputs.types-duxPKadC.cjs';
+import './types-DJI492iY.cjs';
 
 interface CheckboxGroupProps<V = string> extends Omit<InputBaseProps, "id"> {
     list: InputOption<V>[];

package/dist/checkbox-group.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
-import { a as InputBaseProps, b as InputOption } from './inputs.types-vl3PAc4q.js';
-import './types-8Sv0rCjw.js';
+import { a as InputBaseProps, b as InputOption } from './inputs.types-DzGcqcPf.js';
+import './types-DJI492iY.js';
 
 interface CheckboxGroupProps<V = string> extends Omit<InputBaseProps, "id"> {
     list: InputOption<V>[];

package/dist/checkbox.d.cts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { HTMLAttributes } from 'react';
-import { a as InputBaseProps } from './inputs.types-CJbAS14j.cjs';
-import './types-8Sv0rCjw.cjs';
+import { a as InputBaseProps } from './inputs.types-duxPKadC.cjs';
+import './types-DJI492iY.cjs';
 
 interface CheckboxProps extends Omit<InputBaseProps, "label">, Omit<HTMLAttributes<HTMLDivElement>, "color" | "defaultChecked" | "onChange" | "id"> {
     checked?: boolean;

package/dist/checkbox.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { HTMLAttributes } from 'react';
-import { a as InputBaseProps } from './inputs.types-vl3PAc4q.js';
-import './types-8Sv0rCjw.js';
+import { a as InputBaseProps } from './inputs.types-DzGcqcPf.js';
+import './types-DJI492iY.js';
 
 interface CheckboxProps extends Omit<InputBaseProps, "label">, Omit<HTMLAttributes<HTMLDivElement>, "color" | "defaultChecked" | "onChange" | "id"> {
     checked?: boolean;

package/dist/{chunk-ZDVVE4OV.js → chunk-2HGYDDIQ.js}

@@ -1,4 +1,4 @@
-import { Switch } from './chunk-QJKWBU3I.js';
+import { Switch } from './chunk-6ZDXG5VC.js';
 import { DatePicker } from './chunk-L2FPIFMN.js';
 import { Input } from './chunk-L5KKMJ2Q.js';
 import { Select } from './chunk-ZH3SPBVB.js';
@@ -7,9 +7,9 @@ import { Textarea } from './chunk-DEFGT75G.js';
 import { DisplayValue } from './chunk-KKWNKBKR.js';
 import { resolveOption } from './chunk-GFYSELJF.js';
 import { ColorPicker } from './chunk-6PF5ENWM.js';
-import { Badge } from './chunk-EWRP6KCY.js';
-import { Button } from './chunk-VYQI4R6S.js';
-import { Callout } from './chunk-4JGUPG22.js';
+import { Badge } from './chunk-6FCQD2KQ.js';
+import { Button } from './chunk-G6VMNSCM.js';
+import { Callout } from './chunk-ZXZJYVWP.js';
 import { useInlineEdit } from './chunk-OL53XYHF.js';
 import { cn } from './chunk-MMW2JGKZ.js';
 import { createContext, forwardRef, useId, useRef, useMemo, useState, useEffect, useCallback, useContext } from 'react';
@@ -1337,5 +1337,5 @@ function buildItems({
 }
 
 export { JSON_FIELD_TYPES, JsonEditor, applyJsonEdit, describeEdit, findJsonConflicts, getAtPath, inferType, parseKeyMap, parsePath, pathToString, resolveKeyRule, typeMatches };
-//# sourceMappingURL=chunk-ZDVVE4OV.js.map
-//# sourceMappingURL=chunk-ZDVVE4OV.js.map
+//# sourceMappingURL=chunk-2HGYDDIQ.js.map
+//# sourceMappingURL=chunk-2HGYDDIQ.js.map