@godxjp/ui 33.19.0 → 33.21.0

package/dist/components/data-display/badge.js

@@ -62,8 +62,10 @@ const badgeVariants = cva(
       variant: {
         default: "border-transparent bg-primary text-primary-foreground",
         secondary: "border-transparent bg-secondary text-secondary-foreground",
-        outline: "text-foreground",
-        dashed: "border-dashed text-foreground",
+        // gh#1439 — the outline / dashed ink is a role-mirror knob (default --foreground), so a
+        // brand whose plain chip reads muted sets it once instead of wrapping every label.
+        outline: "text-[color:var(--badge-outline-foreground,hsl(var(--foreground)))]",
+        dashed: "border-dashed text-[color:var(--badge-outline-foreground,hsl(var(--foreground)))]",
         /* `color` mode. Deliberately empty and deliberately NOT in the public
          * `BadgeVariant` union: every fill, border and text utility has to stay
          * off the element so badge-layout.css's `[data-tinted]` rule is

package/dist/components/data-display/descriptions.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { WidthProp } from "../../props/vocabulary/shared.prop.js";
 import type { DescriptionsLayoutProp } from "../../props/vocabulary/interaction.prop.js";
 import type { DescriptionsColumnProp, DescriptionsItemsProp, DescriptionsSpanProp } from "../../props/vocabulary/data.prop.js";
 export type { DescriptionsLayoutProp };
@@ -16,6 +17,9 @@ export interface DescriptionsProps {
      * it there would read as a mistake, exactly like `Form`'s own contract.
      */
     labelAlign?: "start" | "end";
+    /** Horizontal label width. Omitted/auto keeps the theme width; content shares the longest
+     * label track per visual column. CSS lengths (numbers are px) override the theme per list. */
+    labelWidth?: WidthProp | "content";
     /**
      * Draw the grid as a bordered table (antd `bordered`): an outer frame, a rule between every
      * cell, and a shaded label cell. Colour and rhythm come from the `--descriptions-*` tokens.
@@ -29,7 +33,7 @@ export interface DescriptionsProps {
     className?: string;
     children?: React.ReactNode;
 }
-export declare function Descriptions({ columns, layout, labelAlign, bordered, items, className, children, }: DescriptionsProps): React.JSX.Element;
+export declare function Descriptions({ columns, layout, labelAlign, labelWidth, bordered, items, className, children, }: DescriptionsProps): React.JSX.Element;
 export declare namespace Descriptions {
     export { DescriptionsItem as Item };
 }

package/dist/components/data-display/descriptions.js

@@ -5,7 +5,8 @@ import { cn } from "../../lib/utils.js";
 const DescriptionsLayoutContext = React.createContext({
   layout: "vertical",
   labelAlign: "start",
-  bordered: false
+  bordered: false,
+  contentLabels: false
 });
 const BREAKPOINT_LADDER = ["sm", "md", "lg", "xl"];
 function responsiveVars(name, base, steps) {
@@ -25,6 +26,7 @@ function Descriptions({
   columns = 2,
   layout = "vertical",
   labelAlign = "start",
+  labelWidth,
   bordered = false,
   items,
   className,
@@ -32,21 +34,31 @@ function Descriptions({
 }) {
   const legacyColumns = typeof columns === "number" ? LEGACY_COLUMN_CLASS[columns] : void 0;
   const responsiveColumns = legacyColumns === void 0 ? typeof columns === "number" ? { sm: Math.min(columns, 2), lg: columns } : columns : void 0;
+  const intrinsicWidth = labelWidth === "content" || labelWidth === "max-content" || labelWidth === "min-content" || labelWidth === "fit-content";
+  const contentLabels = layout === "horizontal" && intrinsicWidth;
+  const labelStyle = layout === "horizontal" && labelWidth !== void 0 && labelWidth !== "auto" && !intrinsicWidth ? {
+    "--descriptions-label-width": typeof labelWidth === "number" ? `${labelWidth}px` : labelWidth
+  } : {};
+  const contentColumns = contentLabels && !responsiveColumns ? typeof columns === "number" ? columns === 3 ? { sm: 2, lg: 3 } : columns === 2 ? { sm: 2 } : {} : columns : responsiveColumns;
   const context = React.useMemo(
-    () => ({ layout, labelAlign, bordered }),
-    [layout, labelAlign, bordered]
+    () => ({ layout, labelAlign, bordered, contentLabels }),
+    [layout, labelAlign, bordered, contentLabels]
   );
   return /* @__PURE__ */ jsx(DescriptionsLayoutContext.Provider, { value: context, children: /* @__PURE__ */ jsxs(
     "dl",
     {
       "data-slot": "descriptions",
       "data-columns": typeof columns === "number" ? columns : void 0,
-      "data-columns-responsive": responsiveColumns ? "" : void 0,
+      "data-columns-responsive": responsiveColumns || contentLabels ? "" : void 0,
+      "data-label-width": contentLabels ? "content" : void 0,
       "data-bordered": bordered ? "" : void 0,
-      style: responsiveColumns ? responsiveVars("--descriptions-column-count", 1, responsiveColumns) : void 0,
+      style: {
+        ...contentColumns ? responsiveVars("--descriptions-column-count", 1, contentColumns) : {},
+        ...labelStyle
+      },
       className: cn(
         "grid gap-x-[var(--descriptions-column-gap)] gap-y-[var(--descriptions-row-gap)]",
-        legacyColumns,
+        !contentLabels && legacyColumns,
         className
       ),
       children: [
@@ -71,9 +83,9 @@ const LEGACY_SPAN_CLASS = {
   3: "sm:col-span-2 lg:col-span-3"
 };
 function DescriptionsItem({ label, mono, span, className, children }) {
-  const { layout, labelAlign } = React.useContext(DescriptionsLayoutContext);
-  const legacySpan = typeof span === "number" ? LEGACY_SPAN_CLASS[span] : void 0;
-  const responsiveSpan = span !== void 0 && span !== "filled" && legacySpan === void 0 ? typeof span === "number" ? { sm: span } : span : void 0;
+  const { layout, labelAlign, contentLabels } = React.useContext(DescriptionsLayoutContext);
+  const legacySpan = !contentLabels && typeof span === "number" ? LEGACY_SPAN_CLASS[span] : void 0;
+  const responsiveSpan = span !== void 0 && span !== "filled" && legacySpan === void 0 ? typeof span === "number" ? span === 3 ? { sm: 2, lg: 3 } : { sm: span } : span : void 0;
   const endAlignedLabel = layout === "horizontal" && labelAlign === "end";
   return /* @__PURE__ */ jsxs(
     "div",

package/dist/components/data-entry/form-field.js

@@ -54,7 +54,7 @@ function FormField({
   const labelId = `${resolvedId}-label`;
   const hasLabel = !(label === void 0 || label === null || label === false || label === "");
   const helperId = helper ? `${resolvedId}-helper` : void 0;
-  const helperNode = helper ? /* @__PURE__ */ jsx("p", { id: helperId, className: "ui-form-field-note text-muted-foreground text-xs", children: helper }) : null;
+  const helperNode = helper ? /* @__PURE__ */ jsx("p", { id: helperId, className: "ui-form-field-note text-muted-foreground", children: helper }) : null;
   const validationStatus = error ? "error" : validateStatus;
   const feedbackId = hasFeedback && validationStatus ? `${resolvedId}-feedback` : void 0;
   const FeedbackIcon = validationStatus === "validating" ? LoaderCircle : validationStatus === "error" ? CircleAlert : validationStatus === "warning" ? TriangleAlert : CheckCircle;
@@ -200,7 +200,7 @@ function FormField({
             }
           ) : null,
           helperPlacement === "after" ? helperNode : null,
-          error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "ui-form-field-note text-error-strong text-xs", children: error }) : null
+          error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "ui-form-field-note text-error-strong", children: error }) : null
         ] })
       ]
     }

package/dist/components/data-entry/number-input.d.ts

@@ -25,6 +25,7 @@ export declare const NumberInput: React.ForwardRefExoticComponent<import(".").Fi
     placeholder?: import("../../props/index.js").PlaceholderProp;
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
+    width?: import("../../props/index.js").ControlWidthProp;
     name?: import("../../props/index.js").NameProp;
     id?: import("../../props/index.js").IdProp;
     className?: import("../../props/index.js").ClassNameProp;

package/dist/components/data-entry/number-input.js

@@ -15,6 +15,7 @@ function decimalsOf(n) {
   const dot = s.indexOf(".");
   return dot === -1 ? 0 : s.length - dot - 1;
 }
+const AUTO_CHARS_UNBOUNDED = 6;
 function clamp(n, min, max) {
   let out = n;
   if (min != null && out < min) out = min;
@@ -51,6 +52,7 @@ const NumberInput = React.forwardRef(
     placeholder,
     prefix,
     suffix,
+    width = "full",
     name,
     id,
     className,
@@ -182,6 +184,10 @@ const NumberInput = React.forwardRef(
       if (!changeOnWheel || !interactive || !focused || event.deltaY === 0) return;
       stepBy(event.deltaY < 0 ? 1 : -1);
     };
+    const autoChars = width !== "auto" ? null : min == null && max == null ? AUTO_CHARS_UNBOUNDED : Math.max(
+      ...[min, max].filter((bound) => bound != null && Number.isFinite(bound)).map((bound) => formatAtRest(bound).length),
+      1
+    );
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -190,7 +196,9 @@ const NumberInput = React.forwardRef(
         "data-status": status,
         "data-variant": variant,
         "data-controls": controls ? void 0 : "off",
+        "data-width": width === "full" ? void 0 : width,
         className: cn("ui-number-input", className),
+        style: autoChars == null ? void 0 : { "--number-input-chars": autoChars },
         children: [
           prefix != null ? /* @__PURE__ */ jsx(
             "span",

package/dist/components/data-entry/select.js

@@ -319,6 +319,7 @@ const SelectTrigger = React.forwardRef(
       },
       [ref]
     );
+    const openedWithPointer = React.useRef(false);
     const wasOpen = React.useRef(false);
     React.useEffect(() => {
       if (!wasOpen.current || isOpen) {
@@ -354,6 +355,7 @@ const SelectTrigger = React.forwardRef(
         ref: composedRef,
         id,
         onPointerDown: (event) => {
+          openedWithPointer.current = true;
           event.currentTarget.focus();
         },
         ...events,
@@ -384,6 +386,10 @@ const SelectTrigger = React.forwardRef(
             "data-status": status,
             "data-width": width,
             "data-state": isOpen ? "open" : "closed",
+            "data-open-modality": isOpen ? openedWithPointer.current ? "pointer" : "keyboard" : void 0,
+            onKeyDownCapture: () => {
+              openedWithPointer.current = false;
+            },
             "data-placeholder": hasValue ? void 0 : "",
             "data-value": dataValue
           }
@@ -600,6 +606,13 @@ function groupDataOptions(options) {
   }
   return order.map((key) => ({ heading: key || void 0, items: buckets.get(key) ?? [] }));
 }
+function withOptionIcon(option, label) {
+  if (!option.icon) return label;
+  return /* @__PURE__ */ jsxs("span", { className: "ui-select-option-body", children: [
+    /* @__PURE__ */ jsx("span", { className: "ui-select-option-icon", "aria-hidden": "true", children: option.icon }),
+    /* @__PURE__ */ jsx("span", { className: "ui-select-option-label", children: label })
+  ] });
+}
 function DataSelectLabel({
   labelRender,
   options
@@ -716,7 +729,7 @@ function DataSelect(props) {
         disabled: option.disabled,
         "data-testid": optionTestId(option.value),
         selectedIcon: menuItemSelectedIcon,
-        children: optionRender ? optionRender(option, { index }) : renderOption ? renderOption(option) : option.label
+        children: optionRender ? optionRender(option, { index }) : renderOption ? renderOption(option) : withOptionIcon(option, option.label)
       },
       option.value
     );
@@ -771,7 +784,16 @@ function DataSelect(props) {
             ...ariaProps,
             children: [
               prefix === void 0 || prefix === null ? null : /* @__PURE__ */ jsx("span", { "data-slot": "select-prefix", className: "ui-select-prefix", children: prefix }),
-              /* @__PURE__ */ jsx(SelectValue, { placeholder: placeholder ?? t("dataEntry.searchSelect.placeholder"), children: labelRender ? /* @__PURE__ */ jsx(DataSelectLabel, { labelRender, options }) : void 0 }),
+              /* @__PURE__ */ jsx(SelectValue, { placeholder: placeholder ?? t("dataEntry.searchSelect.placeholder"), children: labelRender ? /* @__PURE__ */ jsx(DataSelectLabel, { labelRender, options }) : options.some((option) => option.icon) ? (
+                // gh#1444 — the selected option's icon leads the trigger too, as in the search panel.
+                /* @__PURE__ */ jsx(
+                  DataSelectLabel,
+                  {
+                    labelRender: ({ label, option }) => option ? withOptionIcon(option, label) : label,
+                    options
+                  }
+                )
+              ) : void 0 }),
               suffixIcon === void 0 || suffixIcon === null || showClear || loading ? null : /* @__PURE__ */ jsx("span", { "data-slot": "select-suffix", className: "ui-select-suffix", "aria-hidden": "true", children: suffixIcon })
             ]
           }

package/dist/components/data-entry/toggle.d.ts

@@ -55,9 +55,10 @@ type TogglePressedFields = {
  * accessible name (gh#734) — without a second counting API growing beside this one (gh#762).
  * It defaults to `toggle`, so every existing call emits the identical markup it always has.
  */
-declare function useCounterPill({ count, overflowCount, showZero, countLabel, ariaLabel, slot, }: ToggleCountFields & {
+declare function useCounterPill({ count, overflowCount, showZero, countLabel, ariaLabel, slot, countTone, }: ToggleCountFields & {
     ariaLabel?: string;
     slot?: string;
+    countTone?: "neutral" | "accent";
 }): {
     pill: null;
     resolvedAriaLabel: string | undefined;

package/dist/components/data-entry/toggle.js

@@ -58,7 +58,8 @@ function useCounterPill({
   showZero = true,
   countLabel,
   ariaLabel,
-  slot = "toggle"
+  slot = "toggle",
+  countTone
 }) {
   const { locale } = useTranslation();
   const visible = count != null && (count !== 0 || showZero);
@@ -73,7 +74,16 @@ function useCounterPill({
   const spoken = countLabel ? `${formatted} ${countLabel}` : formatted;
   return {
     pill: /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("span", { "data-slot": `${slot}-count`, className: `ui-${slot}-count`, "aria-hidden": "true", children: formatted }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-slot": `${slot}-count`,
+          "data-count-tone": countTone,
+          className: `ui-${slot}-count`,
+          "aria-hidden": "true",
+          children: formatted
+        }
+      ),
       /* @__PURE__ */ jsx("span", { className: "sr-only", children: `, ${spoken}` })
     ] }),
     resolvedAriaLabel: ariaLabel == null ? ariaLabel : `${ariaLabel}, ${spoken}`

package/dist/components/general/button.js

@@ -74,6 +74,11 @@ const buttonVariants = cva("ui-button", {
   },
   defaultVariants: { variant: "default", size: "default", shape: "default" }
 });
+function hasDirectText(children) {
+  return React.Children.toArray(children).some(
+    (child) => typeof child === "string" && child.trim() !== "" || typeof child === "number"
+  );
+}
 const Button = React.forwardRef(
   ({
     className,
@@ -108,6 +113,7 @@ const Button = React.forwardRef(
     const spokenCount = countLabel ? `${countText} ${countLabel}` : countText;
     const ariaLabel = props["aria-label"];
     const foldedAriaLabel = showCount && ariaLabel != null ? { "aria-label": `${ariaLabel}, ${spokenCount}` } : null;
+    const labelled = asChild ? React.isValidElement(children) && hasDirectText(children.props.children) : hasDirectText(loadingText ?? children);
     const countNode = showCount ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("span", { "data-slot": "button-count", className: "ui-button-count", "aria-hidden": "true", children: countText }),
       /* @__PURE__ */ jsx("span", { className: "sr-only", children: `, ${spokenCount}` })
@@ -124,6 +130,7 @@ const Button = React.forwardRef(
         "data-wrap": wrap ? "" : void 0,
         "data-align": align === "center" ? void 0 : align,
         "data-loading": isLoading ? "" : void 0,
+        "data-label": labelled ? "" : void 0,
         "aria-busy": isLoading || void 0,
         disabled: isLoading || disabled,
         type: asChild ? void 0 : type ?? "button",

package/dist/components/general/typography.d.ts

@@ -44,7 +44,7 @@ export declare const Text: React.ForwardRefExoticComponent<Omit<React.HTMLAttrib
     as?: "span" | "p" | "div" | "a" | "label" | "strong" | "em" | "small" | "code" | "kbd" | "dt" | "dd" | "caption" | "abbr";
     asChild?: import("../../props/index.js").AsChildProp;
     link?: boolean;
-    size?: import("../../props/index.js").TextSizeProp;
+    size?: import("../../props/index.js").TextSizeProp | "inherit";
     tone?: import("../../props/index.js").TextToneProp;
     weight?: import("../../props/index.js").FontWeightProp;
     align?: import("../../props/index.js").TextAlignProp;

package/dist/components/layout/app-shell.d.ts

@@ -3,4 +3,4 @@ import type { AppShellProp } from "../../props/components/layout.prop.js";
 export type { AppShellProp, AppShellProp as AppShellProps, } from "../../props/components/layout.prop.js";
 /** Same rail boundary as shell-layout.css; SSR starts in docked mode. */
 export declare function useAppShellNavigationMode(): "drawer" | "docked";
-export declare function AppShell({ sidebar, topbar, topbarLeft, topbarRight, logo, logoCompact, logoCompactBelow, breadcrumb, footer, children, sidebarCollapsed, responsiveNavigation, topbarSpan, navRail, navRailPosition, navRailEnd, navRailLabel, mobileNav, mobileNavLabel, mobileNavTriggerLabel, mobileNavOnCloseAutoFocus, mobileNavOpen, onMobileNavOpenChange, }: AppShellProp): React.JSX.Element;
+export declare function AppShell({ sidebar, topbar, topbarLeft, topbarRight, logo, logoCompact, logoCompactBelow, breadcrumb, footer, children, sidebarCollapsed, responsiveNavigation, topbarSpan, navRail, navRailPosition, navRailEnd, navRailLabel, mobileTabBar, mobileTabBarLabel, mobileNav, mobileNavLabel, mobileNavTriggerLabel, mobileNavOnCloseAutoFocus, mobileNavOpen, onMobileNavOpenChange, }: AppShellProp): React.JSX.Element;

package/dist/components/layout/app-shell.js

@@ -6,6 +6,8 @@ import { Menu } from "lucide-react";
 import { useMediaQuery } from "../../lib/hooks.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { Sheet, SheetBody, SheetContent, SheetHeader, SheetTrigger } from "../feedback/sheet.js";
+import { ShellTabBar } from "./mobile-shell.js";
+import { useToastStickyBarClearance } from "../../lib/toast-clearance.js";
 import { NavSurfaceProvider } from "./nav-surface.js";
 import { TopbarItem } from "./topbar-item.js";
 import { isDevelopment } from "../../lib/dev.js";
@@ -30,6 +32,8 @@ function AppShell({
   navRailPosition = "start",
   navRailEnd,
   navRailLabel,
+  mobileTabBar,
+  mobileTabBarLabel,
   mobileNav,
   mobileNavLabel,
   mobileNavTriggerLabel,
@@ -39,6 +43,23 @@ function AppShell({
 }) {
   const { t } = useTranslation();
   const navigationMode = useAppShellNavigationMode();
+  const rootRef = React.useRef(null);
+  const tabBarRef = React.useRef(null);
+  const showTabBar = responsiveNavigation === "drawer" && navigationMode === "drawer" && mobileTabBar != null && mobileTabBar !== false;
+  useToastStickyBarClearance(showTabBar ? [tabBarRef] : [], showTabBar);
+  React.useEffect(() => {
+    const root = rootRef.current;
+    const bar2 = tabBarRef.current;
+    if (!root || !bar2 || !showTabBar || typeof ResizeObserver === "undefined") return;
+    const publish = () => root.style.setProperty("--app-shell-mobile-tab-bar-block-size", `${bar2.offsetHeight}px`);
+    publish();
+    const observer = new ResizeObserver(publish);
+    observer.observe(bar2, { box: "border-box" });
+    return () => {
+      observer.disconnect();
+      root.style.removeProperty("--app-shell-mobile-tab-bar-block-size");
+    };
+  }, [showTabBar]);
   const hasSidebar = sidebar !== void 0 && sidebar !== null && sidebar !== false;
   const railContent = navRail === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
     navRail,
@@ -146,10 +167,13 @@ function AppShell({
     ] }),
     hasTopbarContent && resolvedTopbar
   ] });
+  const footerRegion = footer !== void 0 ? /* @__PURE__ */ jsx("footer", { className: "app-footer", "aria-label": t("layout.appShell.footerLabel"), children: footer }) : null;
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: rootRef,
       className: "app-root",
+      "data-mobile-tab-bar": showTabBar ? "" : void 0,
       "data-collapsed": hasSidebar && sidebarCollapsed ? "true" : void 0,
       "data-sidebar": hasSidebar ? void 0 : "none",
       "data-responsive-navigation": responsiveNavigation,
@@ -177,11 +201,13 @@ function AppShell({
             tabIndex: 0,
             children: [
               breadcrumb !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-breadcrumb", children: breadcrumb }),
-              children
+              children,
+              showTabBar && footerRegion
             ]
           }
         ),
-        footer !== void 0 && /* @__PURE__ */ jsx("footer", { className: "app-footer", "aria-label": t("layout.appShell.footerLabel"), children: footer })
+        !showTabBar && footerRegion,
+        showTabBar && /* @__PURE__ */ jsx(ShellTabBar, { ref: tabBarRef, className: "app-mobile-tab-bar", "aria-label": mobileTabBarLabel, children: mobileTabBar })
       ]
     }
   );

package/dist/components/layout/centered-shell.js

@@ -15,6 +15,8 @@ function PageLayout({
   width = "md",
   align = "start",
   preset = "default",
+  footerTone = "default",
+  flow = "column",
   className
 }) {
   const { t } = useTranslation();
@@ -23,6 +25,7 @@ function PageLayout({
     {
       "data-slot": "centered-shell",
       "data-preset": preset === "default" ? void 0 : preset,
+      "data-flow": flow === "sections" ? "sections" : void 0,
       className: cn("ui-centered-shell", className),
       children: [
         topbar !== void 0 && /* @__PURE__ */ jsx(
@@ -39,6 +42,7 @@ function PageLayout({
           {
             className: "ui-centered-shell-footer",
             "aria-label": t("layout.centeredShell.footerLabel"),
+            "data-tone": footerTone === "inverse" ? "inverse" : void 0,
             children: footer
           }
         )

package/dist/components/layout/editorial-account.d.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+import type { EditorialAuthCardProp, EditorialAuthProp, EditorialEmptyPanelProp, EditorialFootnoteProp, EditorialMetaBarProp, EditorialStatsProp, EditorialTextButtonProp, EditorialToggleGroupProp, EditorialToolbarProp, HoldingCardActionProp, HoldingCardProp, HoldingGridProp, SettingsLayoutProp, SettingsPanelProp, ThemePickerProp } from "../../props/components/editorial-account.prop.js";
+export type { EditorialAuthCardProp, EditorialAuthCardProp as EditorialAuthCardProps, EditorialAuthProp, EditorialAuthProp as EditorialAuthProps, EditorialEmptyPanelProp, EditorialEmptyPanelProp as EditorialEmptyPanelProps, EditorialFootnoteProp, EditorialFootnoteProp as EditorialFootnoteProps, EditorialMetaBarProp, EditorialMetaBarProp as EditorialMetaBarProps, EditorialStatsItemProp, EditorialStatsProp, EditorialStatsProp as EditorialStatsProps, EditorialTextButtonProp, EditorialTextButtonProp as EditorialTextButtonProps, EditorialToggleGroupItemProp, EditorialToggleGroupProp, EditorialToggleGroupProp as EditorialToggleGroupProps, EditorialToolbarProp, EditorialToolbarProp as EditorialToolbarProps, HoldingCardActionProp, HoldingCardProp, HoldingCardProp as HoldingCardProps, HoldingGridProp, HoldingGridProp as HoldingGridProps, HoldingViewProp, SettingsLayoutProp, SettingsLayoutProp as SettingsLayoutProps, SettingsPanelProp, SettingsPanelProp as SettingsPanelProps, ThemePickerOptionProp, ThemePickerPreviewProp, ThemePickerProp, ThemePickerProp as ThemePickerProps, } from "../../props/components/editorial-account.prop.js";
+/** A named group of `aria-pressed` buttons, one pressed at a time: text filter or icon switch. */
+export declare function EditorialToggleGroup({ items, value, onValueChange, variant, className, ...rest }: EditorialToggleGroupProp): React.JSX.Element;
+/** A hairline-ruled strip: a glyph and a line at the start, a badge at the end. */
+export declare function EditorialMetaBar({ icon, start, end, className }: EditorialMetaBarProp): React.JSX.Element;
+/** A centred signed-out (`guest`, with a card-stack illustration) or empty (`empty`) panel. */
+export declare function EditorialEmptyPanel({ variant, eyebrow, title, level, description, actions, icon, className, }: EditorialEmptyPanelProp): React.JSX.Element;
+/** A strip of figure tiles on unequal tracks; the first tile is the lead. */
+export declare function EditorialStats({ items, className, ...rest }: EditorialStatsProp): React.JSX.Element;
+/**
+ * The row above a collection: a summary (count + note) and / or a start cluster, an end cluster
+ * (order, view switch, primary action), optionally over a hairline. With a `summary` it is a
+ * listing row that keeps one line; without one it is a bar whose clusters may stack.
+ */
+export declare function EditorialToolbar({ summary, start, end, divider, className, }: EditorialToolbarProp): React.JSX.Element;
+/** The track of HoldingCards; `view="list"` turns every card into a wide row. */
+export declare function HoldingGrid({ view, children, className, ...rest }: HoldingGridProp): React.JSX.Element;
+/** One owned item: picture ground, overline, title, meta, tags, purchase line, date, actions. */
+export declare function HoldingCard({ media, overline, title, level, meta, tags, purchase, date, actions, className, }: HoldingCardProp): React.JSX.Element;
+/** A quiet glyph + label action of a HoldingCard; `asChild` turns a router link into it. */
+export declare function HoldingCardAction({ icon, children, asChild, onClick, disabled, className, ...rest }: HoldingCardActionProp): React.JSX.Element;
+/** A settings page: a sticky rail beside the panels. */
+export declare function SettingsLayout({ aside, children, className }: SettingsLayoutProp): React.JSX.Element;
+/** One bordered settings section: number, title, description, then its fields. */
+export declare function SettingsPanel({ number, title, level, description, children, titleId, className, }: SettingsPanelProp): React.JSX.Element;
+/** An illustrated radio group for the colour theme (painted light / dark / system previews). */
+export declare function ThemePicker({ legend, options, value, defaultValue, onValueChange, name, className, }: ThemePickerProp): React.JSX.Element;
+/** A sign-in / sign-up page: the story column beside the form card. */
+export declare function EditorialAuth({ eyebrow, title, description, art, benefits, children, className, }: EditorialAuthProp): React.JSX.Element;
+/** The form card of EditorialAuth: badge, title, copy, the form and a ruled footer line. */
+export declare function EditorialAuthCard({ badge, title, level, description, children, footer, className, }: EditorialAuthCardProp): React.JSX.Element;
+/** An underlined text action in the primary tone; `asChild` turns a router link into it. */
+export declare function EditorialTextButton({ children, icon, asChild, onClick, disabled, className, }: EditorialTextButtonProp): React.JSX.Element;
+/**
+ * `EditorialSearch variant="inline"` (gh#1439) — internal: a collection's own search row, visible
+ * label, framed field with a glyph and a live count. Rendered by EditorialSearch; not exported.
+ */
+export declare function EditorialSearchInline({ label, id, placeholder, defaultValue, onSearch, debounce, count, className, }: {
+    label: string;
+    id?: string;
+    placeholder?: string;
+    defaultValue?: string;
+    onSearch?: (query: string) => void;
+    debounce?: number;
+    count?: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;
+/** A quiet closing line: a note at the start, an optional action at the end. */
+export declare function EditorialFootnote({ children, action, align, className, }: EditorialFootnoteProp): React.JSX.Element;