@rojaostudio/ds 2.0.0-next.21 → 2.0.0-next.23

package/dist/components/chart.d.ts

@@ -43,7 +43,8 @@ interface ChartProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'onS
     showAllDates?: boolean;
     /**
      * bar and column: where each item leads, in the order of `labels`. In bar each bar becomes a link named
-     * "<label>: <value>"; in column a click or Enter on the plot follows the item's link.
+     * "<label>: <value>"; in column a click or Enter on the plot follows the item's link. Only http(s) URLs, relative
+     * paths and #fragments are followed; any other scheme (javascript:, data:…) is ignored, with a warning in dev.
      */
     hrefs?: Array<string | undefined>;
     /** bar and column: called with the item's index when it is chosen (click, Enter). In bar each bar becomes a button. */
@@ -53,11 +54,6 @@ interface ChartProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'onS
     /** Height of the plot area, in px (Figma: 200). */
     height?: number;
 }
-/**
- * Chart — Figma [RDS] Content/Chart. The chart area, to go inside a Card. Every chart carries a table with the same
- * data (visually hidden unless `showTable`). In line and column the plot is a slider for screen readers and the
- * keyboard: the arrows move from point to point, and each point is read with its label and values. Styles: chart.css.
- */
-declare function Chart({ label, type, labels, series, formatLeft, formatRight, showRightAxis, showLegend, showTooltip, dates, dateEvery, showAllDates, hrefs, onSelect, showTable, height, className, ...rest }: ChartProps): react.JSX.Element;
+declare function Chart({ label, type, labels, series, formatLeft, formatRight, showRightAxis, showLegend, showTooltip, dates, dateEvery, showAllDates, hrefs: hrefsProp, onSelect, showTable, height, className, ...rest }: ChartProps): react.JSX.Element;
 
 export { Chart, type ChartProps, type ChartSeries, type ChartType };

package/dist/components/chart.js

@@ -5,7 +5,7 @@ import {
   __spreadValues
 } from "../chunk-ORMEWXMH.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useId, useState } from "react";
+import { useId, useMemo, useState } from "react";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
 const compact = new Intl.NumberFormat("pt-BR", { notation: "compact", maximumFractionDigits: 1 });
 const defaultFormat = (value) => compact.format(value);
@@ -25,6 +25,20 @@ function scaleOf(values) {
   const max = min + step * 4;
   return { min, max, ticks: [4, 3, 2, 1, 0].map((i) => min + step * i) };
 }
+const SAFE_PROTOCOLS = /* @__PURE__ */ new Set(["http:", "https:"]);
+function safeHref(href) {
+  if (!href) return void 0;
+  if (href.startsWith("#")) return href;
+  try {
+    const base = typeof window !== "undefined" && SAFE_PROTOCOLS.has(window.location.protocol) ? window.location.href : "https://example.invalid/";
+    if (SAFE_PROTOCOLS.has(new URL(href, base).protocol)) return href;
+  } catch (e) {
+  }
+  if (process.env.NODE_ENV !== "production") {
+    console.warn(`Chart: href "${href}" ignored. Only http(s) URLs, relative paths and #fragments are followed.`);
+  }
+  return void 0;
+}
 function Chart(_a) {
   var _b = _a, {
     label,
@@ -39,7 +53,7 @@ function Chart(_a) {
     dates,
     dateEvery,
     showAllDates,
-    hrefs,
+    hrefs: hrefsProp,
     onSelect,
     showTable = false,
     height = 200,
@@ -65,6 +79,7 @@ function Chart(_a) {
   ]);
   var _a2;
   const [active, setActive] = useState(null);
+  const hrefs = useMemo(() => hrefsProp == null ? void 0 : hrefsProp.map(safeHref), [hrefsProp]);
   const tooltipId = useId();
   const count = labels.length;
   const shown = type === "bar" ? series.slice(0, 1) : series.slice(0, 5);
@@ -92,7 +107,10 @@ function Chart(_a) {
   const linked = type !== "line" && Boolean(onSelect || (hrefs == null ? void 0 : hrefs.some(Boolean)));
   const choose = (index) => {
     if (onSelect) onSelect(index);
-    else if (hrefs == null ? void 0 : hrefs[index]) window.location.assign(hrefs[index]);
+    else {
+      const href = safeHref(hrefs == null ? void 0 : hrefs[index]);
+      if (href) window.location.assign(href);
+    }
   };
   const onPointerMove = (event) => {
     const box = event.currentTarget.getBoundingClientRect();

package/dist/components/saving-bar.d.ts

@@ -35,10 +35,10 @@ interface SavingBarProps extends HTMLAttributes<HTMLDivElement> {
 }
 /**
  * SavingBar — Figma [RDS] Actions/SavingBar. Shows at the foot of the screen while a change is not
- * saved, and leaves once saved. It is the brand plate on purpose (.ds-plate on the bar, in every brand and in
- * light or dark alike): a state that waits for a decision, not a notice. It does not place itself: put it
- * sticky or fixed at the bottom. Its Buttons are Salvar in tone action and Descartar in tone neutral ghost, read
- * inside the plate. Styles: saving-bar.css.
+ * saved, and leaves once saved. It is the brand's primary colour (savingbar/background, colors/primary/default),
+ * in light and dark and in every brand: a state that waits for a decision, not a notice. It does not place itself:
+ * put it sticky or fixed at the bottom. Its Buttons are Salvar in tone action and Descartar in tone neutral ghost,
+ * with the bar's colours (savingbar/button/*). Styles: saving-bar.css.
  */
 declare function SavingBar({ status, message, savingMessage, errorMessage, onSave, onDiscard, saveLabel, retryLabel, discardLabel, onDetails, detailsLabel, detailsExpanded, detailsControls, className, ...rest }: SavingBarProps): react.JSX.Element;
 

package/dist/components/saving-bar.js

@@ -50,7 +50,7 @@ function SavingBar(_a) {
       role: "region",
       "aria-label": "Salvar altera\xE7\xF5es"
     }, rest), {
-      className: ["rds-savingbar", "ds-plate", className].filter(Boolean).join(" "),
+      className: ["rds-savingbar", className].filter(Boolean).join(" "),
       children: /* @__PURE__ */ jsxs("div", { className: "rds-savingbar__row", children: [
         /* @__PURE__ */ jsxs("p", { className: ["rds-savingbar__message", details && "rds-savingbar__message--details"].filter(Boolean).join(" "), role: "status", children: [
           saving && /* @__PURE__ */ jsx("span", { className: "rds-savingbar__icon rds-savingbar__loader", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Loader, {}) }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rojaostudio/ds",
-  "version": "2.0.0-next.21",
+  "version": "2.0.0-next.23",
   "type": "module",
   "description": "Rojão Design System — componentes React, estilos e alvo React Native. O motor vive em @rojaostudio/ds-core.",
   "license": "MIT",
@@ -190,7 +190,7 @@
     "@radix-ui/react-toggle": "^1.1.18",
     "@radix-ui/react-toggle-group": "^1.1.19",
     "@radix-ui/react-tooltip": "^1.2.16",
-    "@rojaostudio/ds-core": "1.1.0-next.8"
+    "@rojaostudio/ds-core": "1.1.0-next.9"
   },
   "scripts": {
     "build": "pnpm run build:tokens && pnpm run build:themes && pnpm run build:rds && pnpm run build:native && tsup",

package/styles/rds/components-styles.css

@@ -8460,10 +8460,14 @@ input:focus-visible + .rds-radio__circle {
 /* @tokens savingbar */
 /*
  * SavingBar (Actions collection, savingbar/*): full width (at least 320), 12 24 padding, 16 between the
- * message (label, medium, at most 2 lines with an ellipsis) and the actions (8 apart). The bar is the brand plate
- * (.ds-plate on the element, set by the component): savingbar/background is surface/page and savingbar/text is text/body,
- * read in the brand mode, so it comes out the same over a light or a dark page. The Buttons are tone action (Salvar)
- * and tone neutral ghost (Descartar), read on the plate too.
+ * message (label, medium, at most 2 lines with an ellipsis) and the actions (8 apart). The bar is the brand's
+ * primary colour: savingbar/background is colors/primary/default and savingbar/text is text/on/primary (the text,
+ * the error alert, the chevron and the loader), so it follows the theme, light or dark, and every brand.
+ * The Buttons stay the Button: Salvar tone action fill and Descartar tone neutral ghost, with the bar's colours.
+ * The bar redeclares the Button tokens those two read: the Salvar fill is savingbar/button/fill/background with
+ * savingbar/button/fill/label, its hover the fill at 85% over the bar (active 70%); the Descartar label is
+ * savingbar/button/ghost/label, its hover the label colour at 15% (active 25%); the focus ring is savingbar/focus/ring;
+ * disabled (saving) is each Button at 40% over the bar, as the Figma layer opacity.
  * Two arrangements, by the screen width, as the Figma viewport mode (layout/compact below lg 1024): expanded from 1024,
  * the message grows (at least 160) beside the actions; compact below it, the message on top and Descartar and
  * Salvar under it, sharing the width.
@@ -8480,6 +8484,23 @@ input:focus-visible + .rds-radio__circle {
   background: var(--savingbar-background);
   color: var(--savingbar-text);
   font-family: var(--type-font-stack);
+
+  /* The Button tokens Salvar (action fill) and Descartar (neutral ghost) read, in the bar's colours. */
+  --button-focus-ring: var(--savingbar-focus-ring);
+  --button-action-fill-background-default: var(--savingbar-button-fill-background);
+  --button-action-fill-background-hover: color-mix(in srgb, var(--savingbar-button-fill-background) 85%, var(--savingbar-background));
+  --button-action-fill-background-active: color-mix(in srgb, var(--savingbar-button-fill-background) 70%, var(--savingbar-background));
+  --button-action-fill-label: var(--savingbar-button-fill-label);
+  --button-action-fill-icon: var(--savingbar-button-fill-label);
+  --button-neutral-ghost-label: var(--savingbar-button-ghost-label);
+  --button-neutral-ghost-icon: var(--savingbar-button-ghost-label);
+  --button-neutral-ghost-background-hover: color-mix(in srgb, var(--savingbar-button-ghost-label) 15%, transparent);
+  --button-neutral-ghost-background-active: color-mix(in srgb, var(--savingbar-button-ghost-label) 25%, transparent);
+  --button-disabled-fill-background: color-mix(in srgb, var(--savingbar-button-fill-background) 40%, var(--savingbar-background));
+  --button-disabled-fill-label: color-mix(in srgb, var(--savingbar-button-fill-label) 40%, var(--savingbar-background));
+  --button-disabled-fill-icon: var(--button-disabled-fill-label);
+  --button-disabled-ghost-label: color-mix(in srgb, var(--savingbar-button-ghost-label) 40%, var(--savingbar-background));
+  --button-disabled-ghost-icon: var(--button-disabled-ghost-label);
 }
 
 .rds-savingbar__row {

package/styles/rds/components.css

@@ -73,7 +73,7 @@
   --button-inverse-focus-ring: var(--text-on-primary-strong);
   --button-inverse-disabled-fill-background: var(--colors-primary-light);
   --button-inverse-disabled-label: var(--text-disabled-invert);
-  --savingbar-background: var(--surface-page);
+  --savingbar-background: var(--colors-primary-default);
   --toggle-label: var(--text-body);
   --toggle-border: var(--border-strong);
   --toggle-background-hover: var(--surface-muted);
@@ -83,7 +83,7 @@
   --toggle-label-disabled: var(--text-disabled);
   --toggle-border-pressed: var(--colors-primary-default);
   --toggle-border-disabled: var(--border-default);
-  --savingbar-text: var(--text-body);
+  --savingbar-text: var(--text-on-primary);
   --fab-cta-background-default: var(--colors-primary-default);
   --fab-cta-background-hover: var(--colors-primary-active);
   --fab-cta-text: var(--text-on-primary);
@@ -120,7 +120,10 @@
   --button-size-lg-icon-only: var(--size-24);
   --button-size-lg-text-size: var(--type-body-size);
   --button-size-lg-text-line: var(--type-body-line);
-  --savingbar-focus-ring: var(--focus-ring);
+  --savingbar-focus-ring: var(--text-on-primary);
+  --savingbar-button-fill-background: var(--text-on-primary);
+  --savingbar-button-fill-label: var(--colors-primary-default);
+  --savingbar-button-ghost-label: var(--text-on-primary);
 
   /* blocks */
   --topnav-background: var(--surface-card);