@nadicodeai/ui 12.1.100 → 12.1.101

package/dist/components/settings-section.d.ts

@@ -33,9 +33,9 @@ export type SettingsSectionProps = Omit<React.ComponentProps<"section">, "title"
  * @family Compositions
  * @when A few related values a person changes and saves together, on a SettingsPage or as a section of an ObjectPage: Personal details, Company identity, Notifications.
  * @instead Read-only values are a SettingsFactsSection; Theme and Language, which apply on change, live in the account menu; a record's edit in a list is a RowEditForm.
- * @behaviour With `save`: Save stays disabled until a field differs from what is saved, says `pendingLabel` while saving with Cancel held beside it, then the footer shows the ok check and `savedLabel` until the next change. A failure keeps every value and shows under its field until that field changes, or above the footer until the next save. A `cancel` that runs work of its own says its `pendingLabel` while `pending`. Without `save`, the footer holds `footerHint` and `footer`, and is left out when both are.
- * @words The title names the values ("Personal details"); the description says what changing them does, in one line; the hint says where the save applies ("Saved for every device you sign in on."); Save, Saving and Saved come from the product's catalogue.
- * @access The title is the section's h2 and names the form that saves it. The footer's hint and saved line are one status, announced politely; a failure under a field marks the control invalid and describes it.
+ * @behaviour With `save`: Save stays disabled until a field differs from what is saved, says `pendingLabel` while saving with Cancel held beside it, then calls `saved`, which the product answers with its own toast; the footer never shows a saved state. A failure keeps every value and shows under its field until that field changes, or above the footer until the next save. A `cancel` that runs work of its own says its `pendingLabel` while `pending`. Without `save`, the footer holds `footerHint` and `footer`, and is left out when both are.
+ * @words The title names the values ("Personal details"); the description says what changing them does, in one line; the hint is optional and says what is specific to this card: a limit ("Please use 32 characters at maximum."), what a value is for, the plan a feature needs, or a "Learn more" link, never one sentence every card repeats; Save and Saving come from the product's catalogue, and the saved toast from its notices.
+ * @access The title is the section's h2 and names the form that saves it. The saved toast is announced by the product's toast region; a failure under a field marks the control invalid and describes it.
  */
 declare function SettingsSection({ title, description, actions, columns, children, className, save, footer, footerHint, ...props }: SettingsSectionProps): React.JSX.Element;
 /**

package/dist/components/settings-section.js

@@ -11,9 +11,9 @@ import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLab
  * @family Compositions
  * @when A few related values a person changes and saves together, on a SettingsPage or as a section of an ObjectPage: Personal details, Company identity, Notifications.
  * @instead Read-only values are a SettingsFactsSection; Theme and Language, which apply on change, live in the account menu; a record's edit in a list is a RowEditForm.
- * @behaviour With `save`: Save stays disabled until a field differs from what is saved, says `pendingLabel` while saving with Cancel held beside it, then the footer shows the ok check and `savedLabel` until the next change. A failure keeps every value and shows under its field until that field changes, or above the footer until the next save. A `cancel` that runs work of its own says its `pendingLabel` while `pending`. Without `save`, the footer holds `footerHint` and `footer`, and is left out when both are.
- * @words The title names the values ("Personal details"); the description says what changing them does, in one line; the hint says where the save applies ("Saved for every device you sign in on."); Save, Saving and Saved come from the product's catalogue.
- * @access The title is the section's h2 and names the form that saves it. The footer's hint and saved line are one status, announced politely; a failure under a field marks the control invalid and describes it.
+ * @behaviour With `save`: Save stays disabled until a field differs from what is saved, says `pendingLabel` while saving with Cancel held beside it, then calls `saved`, which the product answers with its own toast; the footer never shows a saved state. A failure keeps every value and shows under its field until that field changes, or above the footer until the next save. A `cancel` that runs work of its own says its `pendingLabel` while `pending`. Without `save`, the footer holds `footerHint` and `footer`, and is left out when both are.
+ * @words The title names the values ("Personal details"); the description says what changing them does, in one line; the hint is optional and says what is specific to this card: a limit ("Please use 32 characters at maximum."), what a value is for, the plan a feature needs, or a "Learn more" link, never one sentence every card repeats; Save and Saving come from the product's catalogue, and the saved toast from its notices.
+ * @access The title is the section's h2 and names the form that saves it. The saved toast is announced by the product's toast region; a failure under a field marks the control invalid and describes it.
  */
 function SettingsSection({ title, description, actions, columns = 1, children, className, save, footer, footerHint, ...props }) {
     const titleId = React.useId();

package/dist/internal/settings-save.d.ts

@@ -12,9 +12,9 @@ export type SettingsSave = {
     label: string;
     /** "Saving" */
     pendingLabel: string;
-    /** "Saved" */
-    savedLabel: string;
-    /** The footer's left side until a save: "Saved for every device you sign in on." */
+    /** Called once a save resolves null: the product announces it through its own toast. */
+    saved: () => void;
+    /** What is specific to this card, on the footer's left: a limit, what a value is for, a plan it needs, a link. Absent: nothing. */
     hint?: ReactNode;
     /**
      * An in-place edit of an object's section closes without saving. A cancel that runs work of its own, such as

package/dist/internal/settings-save.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-save.d.ts","sourceRoot":"","sources":["../../src/internal/settings-save.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAOf,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAOtF,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,eAAe,CAAC;IACzB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,+DAA+D;IAC/D,MAAM,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACpE,aAAa;IACb,KAAK,EAAE,MAAM,CAAC;IACd,eAAe;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,oFAAoF;IACpF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3F;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAsHF,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,OAAO,EACP,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAoFA;AAED,wBAAgB,oBAAoB,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,sCA2B1D"}
+{"version":3,"file":"settings-save.d.ts","sourceRoot":"","sources":["../../src/internal/settings-save.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAOf,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAOtF,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,eAAe,CAAC;IACzB,2FAA2F;IAC3F,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,+DAA+D;IAC/D,MAAM,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACpE,aAAa;IACb,KAAK,EAAE,MAAM,CAAC;IACd,eAAe;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,wFAAwF;IACxF,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,mIAAmI;IACnI,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC3F;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAgGF,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,OAAO,EACP,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,YAAY,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BAkFA;AAED,wBAAgB,oBAAoB,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,sCA2B1D"}

package/dist/internal/settings-save.js

@@ -1,6 +1,5 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CircleCheck } from "lucide-react";
 import { createContext, use, useCallback, useEffect, useRef, useState, } from "react";
 import { useFormStatus } from "react-dom";
 import { Button } from "../components/button.js";
@@ -54,9 +53,9 @@ function editableValues(form) {
         ? [name, [value.name, value.size, value.type, value.lastModified]]
         : [name, value]));
 }
-function SaveFooter({ save, changed, saved, }) {
+function SaveFooter({ save, changed }) {
     const { pending } = useFormStatus();
-    return (_jsxs(FooterStrip, { hint: _jsx("div", { role: "status", children: saved ? (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-success", children: [_jsx(CircleCheck, { "aria-hidden": "true", className: "size-4" }), save.savedLabel] })) : (save.hint) }), hintSlot: "settings-section-hint", children: [save.cancel ? (_jsx(Button, { "aria-busy": save.cancel.pending || undefined, disabled: pending || save.cancel.pending, onClick: save.cancel.onCancel, type: "button", variant: "outline", children: _jsx(PendingLabel, { pending: save.cancel.pending ?? false, pendingLabel: save.cancel.pendingLabel ?? save.cancel.label, children: save.cancel.label }) })) : null, _jsx(FormSubmitButton, { submit: {
+    return (_jsxs(FooterStrip, { hint: save.hint, hintSlot: "settings-section-hint", children: [save.cancel ? (_jsx(Button, { "aria-busy": save.cancel.pending || undefined, disabled: pending || save.cancel.pending, onClick: save.cancel.onCancel, type: "button", variant: "outline", children: _jsx(PendingLabel, { pending: save.cancel.pending ?? false, pendingLabel: save.cancel.pendingLabel ?? save.cancel.label, children: save.cancel.label }) })) : null, _jsx(FormSubmitButton, { submit: {
                     label: save.label,
                     pendingLabel: save.pendingLabel,
                     pending,
@@ -66,7 +65,6 @@ function SaveFooter({ save, changed, saved, }) {
 export function SettingsSaveForm({ save, titleId, children, }) {
     const [fieldsChanged, setFieldsChanged] = useState(false);
     const [failure, setFailure] = useState(null);
-    const [saved, setSaved] = useState(false);
     const [claimedFields, setClaimedFields] = useState(() => new Set());
     const submittedValues = useRef(null);
     const keepValuesOnReset = useRef(false);
@@ -103,20 +101,20 @@ export function SettingsSaveForm({ save, titleId, children, }) {
                 const result = await save.action(formData);
                 keepValuesOnReset.current = result !== null;
                 setFailure(result);
-                setSaved(result === null);
+                if (result === null)
+                    save.saved();
             }, onChange: (event) => {
                 const edited = event.target;
                 if (edited instanceof Element &&
                     failure?.field !== undefined &&
                     edited.id === failure.field)
                     setFailure(null);
-                setSaved(false);
                 setFieldsChanged(hasChangedFields(event.currentTarget));
             }, onSubmit: (event) => {
                 setFailure(null);
                 keepValuesOnReset.current = false;
                 submittedValues.current = editableValues(event.currentTarget);
-            }, children: [_jsx("fieldset", { className: "contents", disabled: !hydrated, children: children }), sectionFailure ? (_jsx(CardContent, { children: _jsx(MessageNotice, { message: sectionFailure.message, placement: "action" }) })) : null, _jsx(SaveFooter, { changed: changed, save: save, saved: saved && !changed })] }) }));
+            }, children: [_jsx("fieldset", { className: "contents", disabled: !hydrated, children: children }), sectionFailure ? (_jsx(CardContent, { children: _jsx(MessageNotice, { message: sectionFailure.message, placement: "action" }) })) : null, _jsx(SaveFooter, { changed: changed, save: save })] }) }));
 }
 export function SettingsFieldFailure({ id }) {
     const context = use(SettingsSaveContext);

package/dist/showcase/specimens/compositions.js

@@ -236,8 +236,8 @@ function SettingsSectionSpecimen() {
             action: async () => null,
             label: "Save",
             pendingLabel: "Saving",
-            savedLabel: "Saved",
-            hint: "Saved for every device you sign in on.",
+            saved: () => undefined,
+            hint: "Please use 32 characters at maximum.",
         }, title: "Sender", children: _jsx(SettingsField, { id: "showcase-sender-name", label: "Sender name", children: ({ controlProps }) => (_jsx(Input, { ...controlProps, defaultValue: "Acme Quotes", name: "senderName" })) }) }));
 }
 export const COMPOSITIONS = {

package/dist/showcase/usage.generated.js

@@ -230,9 +230,9 @@ export const USAGE = [
         summary: "A card of related settings that says what changing them does and saves them from its own footer.",
         when: "A few related values a person changes and saves together, on a SettingsPage or as a section of an ObjectPage: Personal details, Company identity, Notifications.",
         instead: "Read-only values are a SettingsFactsSection; Theme and Language, which apply on change, live in the account menu; a record's edit in a list is a RowEditForm.",
-        behaviour: "With `save`: Save stays disabled until a field differs from what is saved, says `pendingLabel` while saving with Cancel held beside it, then the footer shows the ok check and `savedLabel` until the next change. A failure keeps every value and shows under its field until that field changes, or above the footer until the next save. A `cancel` that runs work of its own says its `pendingLabel` while `pending`. Without `save`, the footer holds `footerHint` and `footer`, and is left out when both are.",
-        words: 'The title names the values ("Personal details"); the description says what changing them does, in one line; the hint says where the save applies ("Saved for every device you sign in on."); Save, Saving and Saved come from the product\'s catalogue.',
-        access: "The title is the section's h2 and names the form that saves it. The footer's hint and saved line are one status, announced politely; a failure under a field marks the control invalid and describes it.",
+        behaviour: "With `save`: Save stays disabled until a field differs from what is saved, says `pendingLabel` while saving with Cancel held beside it, then calls `saved`, which the product answers with its own toast; the footer never shows a saved state. A failure keeps every value and shows under its field until that field changes, or above the footer until the next save. A `cancel` that runs work of its own says its `pendingLabel` while `pending`. Without `save`, the footer holds `footerHint` and `footer`, and is left out when both are.",
+        words: 'The title names the values ("Personal details"); the description says what changing them does, in one line; the hint is optional and says what is specific to this card: a limit ("Please use 32 characters at maximum."), what a value is for, the plan a feature needs, or a "Learn more" link, never one sentence every card repeats; Save and Saving come from the product\'s catalogue, and the saved toast from its notices.',
+        access: "The title is the section's h2 and names the form that saves it. The saved toast is announced by the product's toast region; a failure under a field marks the control invalid and describes it.",
     },
     {
         name: "Button",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/ui",
-  "version": "12.1.100",
+  "version": "12.1.101",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -80,7 +80,7 @@
     "@base-ui/react": "^1.9.0",
     "@iconify-icons/logos": "^2.0.2",
     "@iconify/react": "^6.0.2",
-    "@nadicodeai/design-system": "12.1.100",
+    "@nadicodeai/design-system": "12.1.101",
     "@tanstack/react-table": "^9.2.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",