@graphty/compact-mantine 0.9.26 → 0.9.28

package/dist/index.d.cts

@@ -1873,58 +1873,6 @@ export declare interface ControlSectionProps extends DisclosureProps {
     collapsible?: boolean;
 }
 
-/**
- * A collapsible sub-group of controls, lighter than a section.
- *
- * Prefer an `AdvancedButton` that opens a pop-out: that is how Figma keeps rare
- * settings off the panel. Where a fold inside the section is still wanted, this
- * draws it the Figma way: a 32px row whose chevron hangs in the 16px gutter to
- * the left of the section's content edge, and a label in the secondary text
- * color that comes up to the primary one under the pointer. The content opens
- * in one frame, on the same grid as the rows around it.
- *
- * The header is one button carrying the open state, and the controls it reveals
- * are a labeled region that the button points at. Nothing inside a closed
- * sub-group can be reached by Tab.
- *
- * Drive it from your own state with `opened` and `onOpenChange`, or leave both
- * out and let it remember its own with `defaultOpened`.
- * @param props - Component props
- * @param props.label - The sub-group's name, drawn beside its chevron
- * @param props.opened - Whether the sub-group is open, when you drive it from your own state
- * @param props.defaultOpened - Whether it starts open when it keeps its own state, defaulting to false
- * @param props.onOpenChange - Called when it opens or closes, with the new state first and the event second
- * @param props.children - The controls the sub-group holds
- * @returns The sub-group, its header and its controls
- * @example
- * ```tsx
- * <ControlSection label="Labels">
- *     <ToggleRow label="Labels" defaultChecked />
- *     <ControlSubGroup label="Text effects" defaultOpened={false}>
- *         <ToggleRow label="Outline" />
- *         <ToggleRow label="Shadow" />
- *     </ControlSubGroup>
- * </ControlSection>
- * ```
- */
-export declare function ControlSubGroup(props: ControlSubGroupProps): default_2.JSX.Element;
-
-/**
- * Props for the ControlSubGroup component.
- */
-export declare interface ControlSubGroupProps extends DisclosureProps {
-    /**
-     * The sub-group's name, drawn beside its chevron.
-     *
-     * One to three words in sentence case. It is also the accessible name of
-     * the header button, prefixed with "Expand" or "Collapse", and the name of
-     * the region the header opens.
-     */
-    label: string;
-    /** The controls the sub-group holds, stacked in the order you write them. */
-    children: default_2.ReactNode;
-}
-
 /**
  * Creates a new ColorStop with a unique ID.
  * @param offset - The position of the stop (0-1)
@@ -4083,6 +4031,11 @@ export declare interface PanelFieldProps extends Omit<default_2.ComponentPropsWi
     max?: number;
     /** How much one press of an arrow key changes a number field. Shift moves ten. */
     step?: number;
+    /**
+     * How many digits after the decimal separator a number field keeps. A
+     * committed value is rounded to it, so `0` makes an integer field.
+     */
+    decimalScale?: number;
     /**
      * What a number field says about its arrow keys, after its name and value,
      * as its `aria-description`. Pass an empty string to say nothing.
@@ -4126,6 +4079,16 @@ export declare interface PanelFieldProps extends Omit<default_2.ComponentPropsWi
      * announced as unavailable.
      */
     disabled?: boolean;
+    /**
+     * One sentence saying why the field is off, used only while `disabled` is
+     * true.
+     *
+     * It is appended to the field's name after a full stop in the tooltip --
+     * "Size. Load data first" -- and joins the field's accessible description,
+     * so a screen reader reads the reason instead of announcing an unexplained
+     * unavailable field.
+     */
+    disabledReason?: string;
     /**
      * Whether the value can be read but not changed.
      *
@@ -5407,6 +5370,50 @@ export declare function renameTreeItem<T extends TreeLike<T> & {
     name: string;
 }>(items: readonly T[], id: string, name: string): T[];
 
+/**
+ * A small button that gives a row's value back to its default.
+ *
+ * Put it in the row's trailing slot, and draw it only once the reader has set a
+ * value of their own, so a panel of untouched rows stays quiet and a row with a
+ * reset reads as "changed here" (design/figma-spec.md 6.1: the reset sits in the
+ * trailing slot, never inside the field).
+ * @param props - Component props
+ * @param props.label - The name of the control the button resets
+ * @param props.onClick - Called when the button is activated
+ * @param props.disabled - Whether the button cannot be used
+ * @returns The reset button
+ * @example
+ * ```tsx
+ * const [size, setSize] = useState<number | undefined>(undefined);
+ *
+ * <FieldRow trailing={size !== undefined && <ResetButton label="Size" onClick={() => { setSize(undefined); }} />}>
+ *     <PanelField label="Size" kind="number" value={size ?? 10} onChange={(next) => { setSize(Number(next)); }} />
+ * </FieldRow>
+ * ```
+ */
+export declare const ResetButton: default_2.ForwardRefExoticComponent<ResetButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Props for the reset button.
+ */
+export declare interface ResetButtonProps extends Omit<default_2.ButtonHTMLAttributes<HTMLButtonElement>, "color" | "onClick" | "type"> {
+    /**
+     * The name of the control the button resets, such as `"Size"`.
+     *
+     * The button's accessible name and tooltip are built from it -- "Reset
+     * Size to default" in English, and whatever `LabelsProvider` was given
+     * otherwise.
+     */
+    label: string;
+    /** Called when the button is activated, by a click or from the keyboard, with that event. */
+    onClick?: ActivationHandler;
+    /**
+     * Whether the button cannot be used.
+     * @default false
+     */
+    disabled?: boolean;
+}
+
 /**
  * A handle that resizes a panel by dragging, by the arrow keys, or back to its default size by
  * a double-click.
@@ -5869,249 +5876,6 @@ export declare interface SplitButtonProps extends BoxProps, ElementProps<"div",
     menuProps?: Omit<MenuProps, "children">;
 }
 
-/**
- * A number box that says whether the reader typed its value or inherited it.
- *
- * It is a Mantine `NumberInput` with one idea added: `undefined` means "nothing
- * has been entered here", so the control shows `defaultValue` and offers no
- * reset. As soon as the reader commits a number of their own a reset button
- * appears beside it, and pressing that reset
- * reports `undefined` again. A panel built from these reads at a glance as a
- * list of what has been customized and what has not.
- *
- * The number is committed on Enter, Tab or blur, not on every keystroke, so
- * what the reader is part-way through typing is never sent anywhere and the
- * control never takes the caret away mid-word. What is typed may be arithmetic
- * (`40*2` commits 80); text that is not a number reverts. On commit the number
- * is pulled into `min`..`max` and the box is redrawn showing what was actually
- * kept. ArrowUp and ArrowDown step it at once (Shift: ten steps), Escape
- * abandons what was typed.
- *
- * What the reader types is read in their own locale, so `3,14` is 3.14 wherever
- * the comma is the decimal separator, and the locale's own digits are numbers
- * rather than nonsense. The locale comes from `LabelsProvider`, then from the
- * document, then from the browser.
- *
- * Reach for Mantine's own `NumberInput` for an ordinary form. Reach for this
- * one where a value has a sensible default that the reader is overriding rather
- * than filling in.
- * @param props - Component props
- * @param props.label - The control's name, drawn above it
- * @param props.value - The number, when you drive the control from your own state
- * @param props.defaultValue - What is shown while the reader has entered nothing of their own
- * @param props.onChange - Called with the committed number, or with `undefined` when the control is reset
- * @param props.min - The smallest number accepted
- * @param props.max - The largest number accepted
- * @param props.step - How far the arrow keys move the number
- * @param props.decimalScale - How many digits after the decimal separator to keep
- * @param props.suffix - A unit written after the number
- * @param props.disabled - Whether the control cannot be used at all
- * @param props.disabledReason - One sentence saying why the control is off, drawn only while it is off
- * @param props.onFocus - Called when the control takes focus
- * @param props.onBlur - Called when the control loses focus, after the number has been committed
- * @returns The number box, and its reset button when a number has been entered
- * @example
- * ```tsx
- * const [size, setSize] = useState<number | undefined>(undefined);
- *
- * <StyleNumberInput
- *     label="Size"
- *     value={size}
- *     defaultValue={10}
- *     min={1}
- *     max={100}
- *     suffix="px"
- *     onChange={setSize}
- * />
- * ```
- */
-export declare function StyleNumberInput({ label, value, defaultValue, onChange, min, max, step, decimalScale, suffix, disabled, disabledReason, onFocus, onBlur, }: StyleNumberInputProps): default_2.JSX.Element;
-
-/**
- * Props for the StyleNumberInput component.
- */
-export declare interface StyleNumberInputProps {
-    /** The control's name, drawn above it and read out as its accessible name. */
-    label: string;
-    /**
-     * The number, when you drive the control from your own state.
-     *
-     * `undefined` does not mean "empty" here: it means the reader has typed
-     * nothing and the control is showing `defaultValue`.
-     */
-    value?: number | undefined;
-    /** What is shown while the reader has entered nothing of their own. */
-    defaultValue: number;
-    /**
-     * Called when the reader commits a number, and with `undefined` when they
-     * reset the control to its default.
-     *
-     * A number is committed when the control loses focus rather than on every
-     * keystroke, so a half-typed "1" on the way to "12" is never reported. The
-     * event that caused the change is passed second.
-     */
-    onChange?: ChangeHandler<number | undefined>;
-    /** The smallest number accepted. Anything lower is pulled up to it on commit. */
-    min?: number;
-    /** The largest number accepted. Anything higher is pulled down to it on commit. */
-    max?: number;
-    /** How far the arrow keys move the number each time. Shift moves ten. */
-    step?: number;
-    /** How many digits after the decimal separator to keep. */
-    decimalScale?: number;
-    /** A unit written after the number, such as `"%"` or `"px"`. */
-    suffix?: string;
-    /**
-     * Kept so existing callers still compile; it no longer changes anything.
-     *
-     * Figma's number fields never draw up and down steppers, so neither does
-     * this one; the arrow keys step the number instead.
-     * @deprecated The steppers are gone at either value.
-     */
-    hideControls?: boolean;
-    /**
-     * Whether the control cannot be used at all.
-     *
-     * A disabled control is drawn in the same dimmed ink as every other
-     * disabled control in the library, is skipped by the Tab key, and is
-     * announced as unavailable. Its reset button is disabled with it, so the
-     * value cannot be changed by any route.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * One sentence saying why the control is off, shown only while `disabled`
-     * is true.
-     *
-     * It is appended to the control's own name after a full stop and drawn as
-     * the tooltip -- "Width. Load data first" -- and it also joins the
-     * control's accessible description, so a screen reader reads the reason out
-     * instead of announcing an unexplained unavailable control.
-     *
-     * Write it as a whole sentence naming what would make the control usable
-     * again.
-     */
-    disabledReason?: string;
-    /** Called when the control takes focus. Forwarded unchanged. */
-    onFocus?: default_2.FocusEventHandler<HTMLInputElement>;
-    /**
-     * Called when the control loses focus.
-     *
-     * Forwarded after the number has been committed, so reading the state you
-     * keep for this control inside the handler sees the new value.
-     */
-    onBlur?: default_2.FocusEventHandler<HTMLInputElement>;
-}
-
-/**
- * A dropdown that says whether the reader chose its value or inherited it.
- *
- * It is drawn as Figma's outlined select trigger (the theme's Select), and its
- * list is the dark listbox, opening over the trigger with the current choice
- * on top of it (design/figma-spec.md 6.4, 6.5).
- *
- * It is a Mantine `Select` with one idea added: `undefined` means "nothing has
- * been chosen here", so the control shows `defaultValue` and offers no reset.
- * As soon as the reader picks something a reset button appears beside it, and pressing that reset reports `undefined`
- * again. A panel built from these reads at a glance as a list of what has been
- * customized and what has not.
- *
- * Reach for Mantine's own `Select` for an ordinary form. Reach for this one
- * where a value has a sensible default that the reader is overriding rather
- * than filling in.
- * @param props - Component props
- * @param props.label - The control's name, drawn above it
- * @param props.value - The chosen value, when you drive the control from your own state
- * @param props.defaultValue - What is shown while the reader has chosen nothing of their own
- * @param props.options - The choices offered
- * @param props.onChange - Called with the new choice, or with `undefined` when the control is reset
- * @param props.disabled - Whether the control cannot be used at all
- * @param props.disabledReason - One sentence saying why the control is off, drawn only while it is off
- * @param props.onFocus - Called when the control takes focus
- * @param props.onBlur - Called when the control loses focus
- * @returns The dropdown, and its reset button when a choice has been made
- * @example
- * ```tsx
- * const [shape, setShape] = useState<string | undefined>(undefined);
- *
- * <StyleSelect
- *     label="Shape"
- *     value={shape}
- *     defaultValue="circle"
- *     options={[
- *         {value: "circle", label: "Circle"},
- *         {value: "square", label: "Square"},
- *     ]}
- *     onChange={setShape}
- * />
- * ```
- */
-export declare function StyleSelect({ label, value, defaultValue, options, onChange, disabled, disabledReason, onFocus, onBlur, }: StyleSelectProps): default_2.JSX.Element;
-
-/**
- * One choice in a {@link StyleSelect}.
- */
-export declare interface StyleSelectOption {
-    /** What is stored when this choice is picked. */
-    value: string;
-    /** The words drawn for this choice, in the reader's own language. */
-    label: string;
-}
-
-/**
- * Props for the StyleSelect component.
- */
-export declare interface StyleSelectProps {
-    /** The control's name, drawn above it and read out as its accessible name. */
-    label: string;
-    /**
-     * The chosen value, when you drive the control from your own state.
-     *
-     * `undefined` does not mean "empty" here: it means the reader has not
-     * chosen anything and the control is showing `defaultValue`.
-     */
-    value?: string | undefined;
-    /** What is shown while the reader has chosen nothing of their own. */
-    defaultValue: string;
-    /** The choices offered, in the order they should be listed. */
-    options: StyleSelectOption[];
-    /**
-     * Called when the reader picks a choice, and with `undefined` when they
-     * reset the control to its default.
-     *
-     * The value comes first; Mantine's own dropdown reports no event for a
-     * choice, so the second argument is present only for the reset.
-     */
-    onChange?: ChangeHandler<string | undefined>;
-    /**
-     * Whether the control cannot be used at all.
-     *
-     * A disabled control is drawn in the same dimmed ink as every other
-     * disabled control in the library, is skipped by the Tab key, and is
-     * announced as unavailable. Its reset button is disabled with it, so the
-     * value cannot be changed by any route.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * One sentence saying why the control is off, shown only while `disabled`
-     * is true.
-     *
-     * It is appended to the control's own name after a full stop and drawn as
-     * the tooltip -- "Fill. Load data first" -- and it also joins the control's
-     * accessible description, so a screen reader reads the reason out instead
-     * of announcing an unexplained unavailable control.
-     *
-     * Write it as a whole sentence naming what would make the control usable
-     * again, not as a restatement that it is off.
-     */
-    disabledReason?: string;
-    /** Called when the control takes focus. Forwarded unchanged. */
-    onFocus?: default_2.FocusEventHandler<HTMLInputElement>;
-    /** Called when the control loses focus. Forwarded unchanged. */
-    onBlur?: default_2.FocusEventHandler<HTMLInputElement>;
-}
-
 /**
  * Swatches with alpha channel for HEXA color pickers.
  * Includes both fully opaque (FF) and semi-transparent (80) variants.
@@ -6534,7 +6298,7 @@ export declare interface ToggleRowProps {
  * ```tsx
  * <ToggleWithContent label="Glow" defaultChecked>
  *     <CompactColorInput label="Color" defaultColor="#5b8ff9" />
- *     <StyleNumberInput label="Radius" defaultValue={4} min={0} max={20} />
+ *     <PanelField label="Radius" kind="number" defaultValue={4} min={0} max={20} />
  * </ToggleWithContent>
  * ```
  */
@@ -6567,7 +6331,7 @@ export declare interface ToggleWithContentProps {
      * @example
      * ```tsx
      * <ToggleWithContent label="Glow" onChange={(next) => { setGlow(next); }}>
-     *     <StyleNumberInput label="Radius" defaultValue={4} />
+     *     <PanelField label="Radius" kind="number" defaultValue={4} />
      * </ToggleWithContent>
      * ```
      */