@danxbot/ui 3.10.1 → 3.12.0

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/Popover.d.ts

@@ -18,6 +18,19 @@ export interface PopoverProps {
      * documentation surface cannot dispatch a click.
      */
     defaultOpen?: boolean;
+    /**
+     * Told when the popup opens and when it closes. Uncontrolled still — this
+     * OBSERVES the state Base UI owns rather than taking it over, which is why
+     * there is no `open` prop beside it.
+     *
+     * `Collapsible`, `Dialog` and `Menu` all already carry this exact signature;
+     * the popover was the one overlay a consumer could not hear. The reason to
+     * hear it is almost never styling — it is WORK: a panel whose contents cost
+     * a request must not pay for that request while it is shut, and a page of a
+     * hundred closed popovers that each fetched on mount is a hundred requests
+     * for the one panel somebody eventually opens.
+     */
+    onOpenChange?: (open: boolean) => void;
     /**
      * Names the popup for assistive technology.
      *
@@ -30,7 +43,7 @@ export interface PopoverProps {
     "aria-labelledby"?: string;
     "aria-label"?: string;
 }
-export declare function Popover({ trigger, side, align, arrow, className, children, ref, defaultOpen, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, }: PopoverProps): import("react").JSX.Element;
+export declare function Popover({ trigger, side, align, arrow, className, children, ref, defaultOpen, onOpenChange, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, }: PopoverProps): import("react").JSX.Element;
 /** Closes the nearest Popover. */
 export declare function PopoverClose({ children }: {
     children: ReactNode;

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,24 @@ export interface ProvenanceDisclosureProps {
      * edges and does not want a second one.
      */
     triggerContent?: ReactNode;
+    /**
+     * Called with `true` when the panel opens and `false` when it closes.
+     *
+     * The signature `Collapsible`, `Dialog`, `Menu` and `Popover` all use, for
+     * the reason a fourth spelling would be worse than a familiar one: a
+     * consumer already knows what `onOpenChange` does everywhere else here.
+     *
+     * Purely an observation. The popover stays uncontrolled, so this does not
+     * make the caller responsible for closing it, for returning focus, or for
+     * escape — pass the callback and nothing else about the component moves.
+     *
+     * The reason it exists is the fetch: a value's citations, its source pages,
+     * its audit trail are usually a request, and this is the only moment at
+     * which a consumer knows that request is now worth making. It does NOT fire
+     * on mount — see the note at the top of this file for why that is the load-
+     * bearing half of the guarantee, not a footnote to it.
+     */
+    onOpenChange?: (open: boolean) => void;
     className?: string;
 }
-export declare function ProvenanceDisclosure({ record, actions, emptyLabel, redactedLabel, triggerBadge, valueWrap, triggerContent, className, }: ProvenanceDisclosureProps): import("react").JSX.Element;
+export declare function ProvenanceDisclosure({ record, actions, emptyLabel, redactedLabel, triggerBadge, valueWrap, triggerContent, 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.10.1",
+  "version": "3.12.0",
   "type": "module",
   "description": "Danxbot — a domain-agnostic React design system with motion as a first-class primitive.",
   "license": "MIT",