@danxbot/ui 3.11.0 → 3.12.1

package/dist/types/components/Menu.d.ts

@@ -20,6 +20,16 @@ export interface MenuProps {
     children: ReactNode;
 }
 export declare function Menu({ trigger, side, align, open, onOpenChange, className, children, }: MenuProps): import("react").JSX.Element;
+/**
+ * Neutral, or destructive.
+ *
+ * The same two-value union `IconButtonTone` declares, and named to match it
+ * rather than to be exhaustive: a menu row is not a palette, and every tone
+ * beyond "this one deletes something" would be a colour choice rather than a
+ * property of the action. `Badge` has seven because a badge's whole job is to
+ * carry a state; a menu item's job is to be picked.
+ */
+export type MenuItemTone = "neutral" | "danger";
 export interface MenuItemProps extends Omit<BaseMenu.Item.Props, "className"> {
     className?: string;
     /**
@@ -30,9 +40,24 @@ export interface MenuItemProps extends Omit<BaseMenu.Item.Props, "className"> {
      * a tick is not a state a pointer can see it is already on.
      */
     selected?: boolean;
+    /**
+     * `danger` marks the row destructive. Resting state is unchanged.
+     *
+     * Same sentence as `IconButton.tone`, and the same contract behind it — the
+     * row is quiet until approached, and "approached" here includes arrowing onto
+     * it, which a `hover:` rule cannot see. See `DANGER_ITEM` above for why that
+     * distinction is the reason this lives in the library rather than in each
+     * consumer's stylesheet.
+     *
+     * A DANGER ROW THAT IS ALSO `selected` DRAWS AS SELECTED. The two are merged
+     * in that order deliberately: "this is the one you are on" is the more urgent
+     * of the two things to say, and a destructive action is a poor candidate for
+     * being the current choice in the first place.
+     */
+    tone?: MenuItemTone;
     ref?: Ref<HTMLDivElement>;
 }
-export declare function MenuItem({ className, selected, children, ref, ...props }: MenuItemProps): import("react").JSX.Element;
+export declare function MenuItem({ className, selected, tone, children, ref, ...props }: MenuItemProps): import("react").JSX.Element;
 export interface MenuRadioGroupProps extends Omit<BaseMenu.RadioGroup.Props, "className"> {
     className?: string;
 }

package/dist/types/components/RecordCard.d.ts

@@ -34,7 +34,7 @@ declare const record: import("tailwind-variants").TVReturnType<{
     identifier: string;
     title: string;
     subtitle: string;
-    badges: string;
+    badges: string[];
     metrics: string;
     metricLabel: string;
     metricValue: string;
@@ -72,7 +72,7 @@ declare const record: import("tailwind-variants").TVReturnType<{
     identifier: string;
     title: string;
     subtitle: string;
-    badges: string;
+    badges: string[];
     metrics: string;
     metricLabel: string;
     metricValue: string;
@@ -110,7 +110,7 @@ declare const record: import("tailwind-variants").TVReturnType<{
     identifier: string;
     title: string;
     subtitle: string;
-    badges: string;
+    badges: string[];
     metrics: string;
     metricLabel: string;
     metricValue: string;
@@ -136,7 +136,7 @@ declare const recordCard: import("tailwind-variants").TVReturnType<{
     handle: string;
     eyebrow: string;
     title: string;
-    badges: string;
+    badges: string[];
     media: string;
     meta: string;
 }, undefined, {
@@ -159,7 +159,7 @@ declare const recordCard: import("tailwind-variants").TVReturnType<{
     handle: string;
     eyebrow: string;
     title: string;
-    badges: string;
+    badges: string[];
     media: string;
     meta: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
@@ -182,7 +182,7 @@ declare const recordCard: import("tailwind-variants").TVReturnType<{
     handle: string;
     eyebrow: string;
     title: string;
-    badges: string;
+    badges: string[];
     media: string;
     meta: string;
 }>>;
@@ -273,7 +273,14 @@ export interface RecordCardBadgesProps {
 }
 /** A wrapping row for a SMALL set of status/priority badges — `Badge` from
  *  this same library, composed by the consumer. This component supplies only
- *  the row layout; it has no opinion on how many badges is too many. */
+ *  the row layout; it has no opinion on how many badges is too many.
+ *
+ *  IT DOES HAVE AN OPINION ON HOW WIDE. The row can never exceed its card, and
+ *  a single badge can never exceed the row — the containment is the row's job
+ *  because the consumer's badge cannot do it from inside. `BADGE_ROW` above
+ *  carries the measurements and the one limitation (it clips; it does not
+ *  ellipsize). A caller's `className` still wins over everything here, including
+ *  `shrink-0`, which is exactly the class that made the reported card leak. */
 export declare function RecordCardBadges({ className, children, ref }: RecordCardBadgesProps): import("react").JSX.Element;
 export interface RecordCardMediaProps extends VariantProps<typeof recordCard> {
     className?: string;

package/dist/types/components/StatusSelect.d.ts

@@ -37,7 +37,19 @@ export interface StatusSelectProps<Value extends string = string> {
     value: Value;
     options: StatusOption<Value>[];
     onValueChange: (value: Value) => void;
-    size?: "sm" | "md";
+    /**
+     * The same three steps `Badge` has, because the trigger IS a Badge.
+     *
+     * It stopped at `md` for no reason anybody could point at, and the cost was
+     * paid one surface at a time: a consumer that wanted the status at the weight
+     * of a page heading pinned the metrics by hand, beside a component that
+     * already knew how to draw them and would have kept them in step with the
+     * rest of the scale for free.
+     *
+     * The chevron travels with it — see the trigger below. Defaults to `sm`,
+     * unchanged: this is a step ADDED to the top of the scale, not a new default.
+     */
+    size?: "sm" | "md" | "lg";
     /** Accessible name for the trigger — there is no visible label otherwise. */
     "aria-label"?: string;
     disabled?: boolean;

package/dist/types/components/ThemeMenu.d.ts

@@ -1,4 +1,46 @@
 export interface ThemeMenuProps {
+    /**
+     * Restyles the POPUP, not the trigger — see `triggerClassName` below.
+     *
+     * Stated rather than left to be discovered, because the discovery is
+     * expensive and has already been made once. This is the only styling prop
+     * this component had, `Popover` forwards it to `Popover.Popup`, and a caller
+     * reaching for "the class that styles this component" reasonably expects it
+     * on the button they can see. It is kept where it is because a consumer sizes
+     * the panel with it; moving it would be a silent breaking change wearing a
+     * bug fix's clothes.
+     */
     className?: string;
+    /**
+     * Restyles the TRIGGER.
+     *
+     * Named after `Collapsible.triggerClassName`, which exists for exactly this
+     * situation one component over: a component that supplies its own trigger has
+     * two boxes a caller might mean, and only one of them can have `className`.
+     * Prefer `iconOnly` below when the goal is the icon-only shape — that is a
+     * MODE this component knows how to enter, and re-drawing it from classes
+     * means re-deriving `Button`'s square box by hand.
+     */
+    triggerClassName?: string;
+    /**
+     * Drop the "Appearance" label and render the trigger as a square icon button.
+     *
+     * Named after `Button.iconOnly`, which is the variant it forwards to — the
+     * width is pinned to the control height there, so the hit area stays square
+     * and can never fall below the tap minimum.
+     *
+     * WHY A MODE AND NOT A CLASS. The label is `hidden sm:inline`: present from
+     * 640px up, which is most screens the app runs on. So "make it icon-only"
+     * from the outside means a descendant selector plus an `!` to out-specify a
+     * responsive rule, next to a hand-copy of `Button`'s `px-0 aspect-square` —
+     * which is what the consuming app that reported this shipped, and which
+     * drifts the moment either of those changes here. The mode removes the label
+     * from the tree instead of fighting a media query for it.
+     *
+     * The accessible name is unaffected: `aria-label="Appearance settings"` is on
+     * the button in both modes, and it is what a screen reader announces either
+     * way — the visible text was never the name.
+     */
+    iconOnly?: boolean;
 }
-export declare function ThemeMenu({ className }: ThemeMenuProps): import("react").JSX.Element;
+export declare function ThemeMenu({ className, triggerClassName, iconOnly }: ThemeMenuProps): import("react").JSX.Element;

package/dist/types/components/provenance/ProvenanceDisclosure.d.ts

@@ -59,6 +59,54 @@ export interface ProvenanceDisclosureProps {
      * edges and does not want a second one.
      */
     triggerContent?: ReactNode;
+    /**
+     * Draw the PANEL HEADER'S VALUE yourself — an editor, most usefully.
+     *
+     * This replaces the one paragraph that prints the value inside the open
+     * panel, and nothing else: the field name above it, the state badge beside
+     * it, the confidence meter under it, and every row below the separator are
+     * still the component's. It does not touch the trigger — the value on the
+     * page is still drawn from `record`, still truncated or wrapped per
+     * `valueWrap`, still announced as part of the trigger's own name. The
+     * closed page does not change because a consumer supplied this.
+     *
+     * UNLIKE `triggerContent`, THIS MAY BE INTERACTIVE, and that is the entire
+     * reason it exists. `triggerContent` sits inside the disclosure's `<button>`,
+     * so a control there would nest a control inside a control — invalid and
+     * unfocusable. This sits in the panel body, which Base UI gives
+     * `role="dialog"` and full focus management: an `InlineEdit`, a select, a
+     * confirm/cancel pair are all legitimate here.
+     *
+     * WHY A SLOT AND NOT AN `onCorrect` PROP. The same reason `actions` is a
+     * slot: this library has no idea who is allowed to correct an extracted
+     * value, what the permitted values are, or what writing one costs. What it
+     * does know is WHERE the correction belongs — against the value, in the
+     * surface someone opened to judge it — and the observed alternative is a
+     * consumer putting its editor in `actions`, which reads as "here is the
+     * value, and separately, down here, a form about some value".
+     *
+     * IT OVERRIDES THE ABSENCES TOO — redacted, empty and failed alike — and
+     * that is a deliberate choice rather than an oversight. A slot that
+     * disappeared whenever the value was missing would vanish in exactly the
+     * case a value editor is most wanted: a field that was never extracted is
+     * the one somebody actually has to type. It would also make the header's
+     * shape depend on a state the consumer did not ask about, so an editor would
+     * silently become a read-only word for reasons invisible at the call site.
+     * The absence vocabulary is not lost — the struck-through eye, the dash and
+     * the triangle still do their whole job on the trigger, which is the surface
+     * the density argument was ever about.
+     *
+     * The redaction gate is unchanged and still worth knowing about: the panel
+     * keeps withholding the quote, the reasoning and the sign-off note from a
+     * record marked `redacted`. It cannot police a node you built yourself, so
+     * a consumer rendering this against a redactable record owns that one
+     * decision — `record.redacted` is right there to branch on.
+     *
+     * Passing `null` or `undefined` falls back to the built-in paragraph, so
+     * gating editability is `canEdit ? <Editor … /> : null` rather than two
+     * spellings of the whole component.
+     */
+    valueContent?: ReactNode;
     /**
      * Called with `true` when the panel opens and `false` when it closes.
      *
@@ -79,4 +127,4 @@ export interface ProvenanceDisclosureProps {
     onOpenChange?: (open: boolean) => void;
     className?: string;
 }
-export declare function ProvenanceDisclosure({ record, actions, emptyLabel, redactedLabel, triggerBadge, valueWrap, triggerContent, onOpenChange, className, }: ProvenanceDisclosureProps): import("react").JSX.Element;
+export declare function ProvenanceDisclosure({ record, actions, emptyLabel, redactedLabel, triggerBadge, valueWrap, triggerContent, valueContent, onOpenChange, className, }: ProvenanceDisclosureProps): import("react").JSX.Element;

package/dist/types/index.d.ts

@@ -29,7 +29,7 @@ export { Checkbox, Switch, Radio, RadioGroup, CheckboxField, SwitchField, RadioF
 export { Dialog, DialogClose, AlertDialog, type DialogProps, type AlertDialogProps, } from "./components/Dialog";
 export { Popover, PopoverClose, Tooltip, TooltipProvider, type PopoverProps, type TooltipProps, } from "./components/Popover";
 export { Toaster, ToastProvider, useToast, type ToasterProps, type ToastProviderProps, type ToastOptions, type ToastTone, } from "./components/Toast";
-export { Menu, MenuItem, MenuGroup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSub, type MenuProps, type MenuItemProps, type MenuGroupProps, type MenuRadioGroupProps, type MenuRadioItemProps, type MenuSubProps, } from "./components/Menu";
+export { Menu, MenuItem, MenuGroup, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSub, type MenuProps, type MenuItemProps, type MenuItemTone, type MenuGroupProps, type MenuRadioGroupProps, type MenuRadioItemProps, type MenuSubProps, } from "./components/Menu";
 export { ThemeMenu, type ThemeMenuProps } from "./components/ThemeMenu";
 export { AppShell, type AppShellProps, type NavItem, type NavSection, } from "./components/AppShell";
 export { FileUpload, type FileUploadProps, type UploadFile } from "./components/FileUpload";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danxbot/ui",
-  "version": "3.11.0",
+  "version": "3.12.1",
   "type": "module",
   "description": "Danxbot — a domain-agnostic React design system with motion as a first-class primitive.",
   "license": "MIT",