@godxjp/ui 31.31.8 → 32.0.0

package/dist/components/general/typography.js

@@ -157,7 +157,7 @@ function TypographyEditor({
     enterIcon !== null ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ui-typography-edit-confirm", children: enterIcon ?? "\u23CE" }) : null
   ] });
 }
-function useTypographyBlock(props, allowRows) {
+function useTypographyBlock(props) {
   const { t } = useTranslation();
   const { children, copyable, editable, ellipsis, actions, disabled } = props;
   const placement = actions?.placement ?? "end";
@@ -204,13 +204,11 @@ function useTypographyBlock(props, allowRows) {
     }
   };
   const [enableEllipsis, ellipsisConfig] = useMergedConfig(ellipsis);
-  const [expanded, setExpanded] = useControlledFlag(
+  const [expanded] = useControlledFlag(
     ellipsisConfig.defaultExpanded ?? false,
     ellipsisConfig.expanded
   );
-  const rows = allowRows ? ellipsisConfig.rows ?? 1 : 1;
-  const expandable = allowRows ? ellipsisConfig.expandable : void 0;
-  const clamping = enableEllipsis && (!expanded || expandable === "collapsible");
+  const clamping = enableEllipsis && !expanded;
   const [isEllipsis, setIsEllipsis] = React.useState(false);
   const elementRef = React.useRef(null);
   const onEllipsisRef = React.useRef(ellipsisConfig.onEllipsis);
@@ -218,13 +216,13 @@ function useTypographyBlock(props, allowRows) {
   const measure = React.useCallback(() => {
     const node = elementRef.current;
     if (!node || !enableEllipsis) return;
-    const next = rows > 1 ? node.scrollHeight > node.clientHeight : node.scrollWidth > node.clientWidth;
+    const next = node.scrollWidth > node.clientWidth || node.scrollHeight > node.clientHeight;
     setIsEllipsis((prev) => {
       if (prev === next) return prev;
       onEllipsisRef.current?.(next);
       return next;
     });
-  }, [enableEllipsis, rows]);
+  }, [enableEllipsis]);
   const measureRef = React.useCallback((node) => {
     elementRef.current = node;
   }, []);
@@ -242,11 +240,6 @@ function useTypographyBlock(props, allowRows) {
       observer.disconnect();
     };
   }, [measure, enableEllipsis]);
-  const onExpandClick = (event) => {
-    const next = !expanded;
-    setExpanded(next);
-    ellipsisConfig.onExpand?.(event, { expanded: next });
-  };
   const copyLabels = toCopyConfigList(copyConfig.tooltips);
   const copyIcons = toCopyConfigList(copyConfig.icon);
   const systemCopyLabel = copied ? t("ui.typography.copied") : t("ui.typography.copy");
@@ -279,20 +272,7 @@ function useTypographyBlock(props, allowRows) {
       children: editConfig.icon ?? /* @__PURE__ */ jsx(Pencil, { "aria-hidden": true, className: "ui-typography-icon" })
     }
   ) }, "edit") : null;
-  const showExpand = Boolean(expandable) && (isEllipsis || expanded);
-  const expandSymbol = typeof ellipsisConfig.symbol === "function" ? ellipsisConfig.symbol(expanded) : ellipsisConfig.symbol ?? (expanded ? t("ui.typography.collapse") : t("ui.typography.expand"));
-  const expandNode = showExpand ? /* @__PURE__ */ jsx(
-    TypographyAction,
-    {
-      slot: expanded ? "typography-collapse" : "typography-expand",
-      "aria-expanded": expanded,
-      "aria-label": expanded ? t("ui.typography.collapse") : t("ui.typography.expand"),
-      onClick: onExpandClick,
-      children: expandSymbol
-    },
-    "expand"
-  ) : null;
-  const hasActions = Boolean(copyNode || editNode || expandNode);
+  const hasActions = Boolean(copyNode || editNode);
   const actionsNode = hasActions ? /* @__PURE__ */ jsxs(
     "span",
     {
@@ -300,7 +280,6 @@ function useTypographyBlock(props, allowRows) {
       "data-placement": placement,
       className: "ui-typography-actions",
       children: [
-        expandNode,
         editNode,
         copyNode
       ]
@@ -399,7 +378,6 @@ const TextBase = React.forwardRef((props, ref) => {
     className,
     style,
     children,
-    allowRows = false,
     // antd block behaviour — read by `useTypographyBlock`, never spread onto the DOM.
     copyable: _copyable,
     editable: _editable,
@@ -417,8 +395,7 @@ const TextBase = React.forwardRef((props, ref) => {
   } = props;
   const asChildElement = asChild && React.isValidElement(children) ? children : null;
   const block = useTypographyBlock(
-    asChildElement ? { ...props, children: asChildElement.props.children } : props,
-    allowRows
+    asChildElement ? { ...props, children: asChildElement.props.children } : props
   );
   const element = as ?? component ?? "span";
   const clampLines = typeof clamp === "number" && Number.isFinite(clamp) && clamp >= 1 ? Math.floor(clamp) : void 0;
@@ -529,19 +506,6 @@ const TextBase = React.forwardRef((props, ref) => {
 TextBase.displayName = "TextBase";
 const Text = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(TextBase, { ref, ...props }));
 Text.displayName = "Text";
-const Paragraph = React.forwardRef(
-  ({ as = "div", className, ...rest }, ref) => /* @__PURE__ */ jsx(
-    TextBase,
-    {
-      ref,
-      as,
-      allowRows: true,
-      className: cn("ui-typography-paragraph", className),
-      ...rest
-    }
-  )
-);
-Paragraph.displayName = "Paragraph";
 const Link = React.forwardRef(
   ({ as = "a", rel, target, className, ...rest }, ref) => /* @__PURE__ */ jsx(
     TextBase,
@@ -584,110 +548,12 @@ const Heading = React.forwardRef(
   })
 );
 Heading.displayName = "Heading";
-const Title = React.forwardRef((props, ref) => {
-  const {
-    level = 1,
-    as,
-    component,
-    tone,
-    type,
-    align,
-    truncate,
-    weight = "medium",
-    className,
-    style,
-    children: _children,
-    ellipsis,
-    copyable: _copyable,
-    editable: _editable,
-    actions: _actions,
-    disabled,
-    code: _code,
-    mark: _mark,
-    underline: _underline,
-    delete: _delete,
-    keyboard: _keyboard,
-    italic: _italic,
-    ...rest
-  } = props;
-  const block = useTypographyBlock(props, true);
-  const safeLevel = level >= 1 && level <= 5 ? level : 1;
-  const element = as ?? component ?? `h${safeLevel}`;
-  const ellipsisRowCount = ellipsis ? ellipsisRows(ellipsis) : 0;
-  const effectiveClamp = ellipsisRowCount > 1 ? ellipsisRowCount : void 0;
-  const truncating = (truncate === true || ellipsisRowCount === 1) && effectiveClamp === void 0;
-  const clampStyle = effectiveClamp !== void 0 ? { ...style, "--text-clamp": effectiveClamp } : style;
-  if (block.editing) return block.editor;
-  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
-    block.leading,
-    block.wrapsContent ? /* @__PURE__ */ jsx(
-      "span",
-      {
-        "data-slot": "typography-content",
-        "data-truncate": truncating ? "" : void 0,
-        "data-clamp": effectiveClamp !== void 0 ? "" : void 0,
-        className: "ui-typography-content",
-        style: clampStyle,
-        children: block.text
-      }
-    ) : block.text,
-    block.trailing
-  ] });
-  const rendered = React.createElement(
-    element,
-    {
-      ref: composeRefs(block.measureRef, ref),
-      "data-slot": "heading",
-      "data-level": safeLevel,
-      "data-tone": tone ?? (type ? TYPE_TO_TONE[type] : void 0) ?? "default",
-      "data-align": align,
-      "data-weight": weight,
-      "data-truncate": truncating && !block.wrapsContent ? "" : void 0,
-      "data-clamp": effectiveClamp !== void 0 && !block.wrapsContent ? "" : void 0,
-      "aria-disabled": disabled ? true : void 0,
-      style: clampStyle,
-      ...block.attrs,
-      onClick: block.onTextClick,
-      className: cn("ui-heading", "ui-typography-title", className),
-      ...rest
-    },
-    body
-  );
-  if (!block.showsEllipsisTooltip) return rendered;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    rendered,
-    /* @__PURE__ */ jsx(EllipsisTooltip, { anchorRef: block.anchorRef, title: block.ellipsisTooltip })
-  ] });
-});
-Title.displayName = "Title";
-const TypographyRoot = React.forwardRef(
-  ({ as, component, className, children, ...rest }, ref) => React.createElement(
-    as ?? component ?? "article",
-    {
-      ref,
-      "data-slot": "typography",
-      className: cn("ui-typography", className),
-      ...rest
-    },
-    children
-  )
-);
-TypographyRoot.displayName = "Typography";
-const Typography = Object.assign(TypographyRoot, {
-  Text,
-  Title,
-  Paragraph,
-  Link
-});
 export {
   ActionTooltip,
   COPIED_RESET_MS,
   Heading,
   Link,
-  Paragraph,
   Text,
-  Title,
-  Typography,
   getNode,
   toCopyConfigList,
   useMergedConfig,

package/dist/components/layout/aspect-ratio.d.ts

@@ -1 +1,24 @@
-export { AspectRatio } from "../ui/aspect-ratio.js";
+import * as React from "react";
+/**
+ * AspectRatio — hộp giữ tỉ lệ, dựng bằng thuộc tính CSS `aspect-ratio`.
+ *
+ * Radix dựng cái này bằng mẹo `padding-bottom` thời chưa có `aspect-ratio`: một
+ * div bọc `position: relative; width: 100%; padding-bottom: (100/ratio)%`, rồi
+ * div THẬT nằm trong nó ở `position: absolute; inset: 0`. Hai node, hai lớp
+ * định vị, chỉ để nói một câu mà CSS ngày nay nói được bằng một khai báo.
+ *
+ * Nên node bọc biến mất và `.ui-aspect-ratio` giờ LÀ hộp tỉ lệ. Kiểm trước khi
+ * đổi: không luật nào trong `src/styles/` bám vào `[data-radix-aspect-ratio-wrapper]`
+ * hay vào việc `.ui-aspect-ratio` phải là con của một node khác — luật duy nhất
+ * chạm tới nó là `.ui-aspect-ratio { overflow: clip; overflow-clip-margin }`
+ * trong `layout.css`, và nó bám vào CHÍNH node này, node vẫn còn.
+ *
+ * `position: relative` được giữ lại dù không còn cần cho mẹo padding: node bọc
+ * trước đây là containing block của mọi con `position: absolute` mà consumer
+ * đặt vào (một overlay, một badge góc). Bỏ nó đi thì những con ấy lặng lẽ nhảy
+ * ra neo vào tổ tiên định vị gần nhất ở ngoài.
+ */
+export declare const AspectRatio: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    asChild?: boolean;
+    ratio?: number;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/aspect-ratio.js

@@ -1,4 +1,21 @@
-import { AspectRatio } from "../ui/aspect-ratio.js";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "../../lib/slot.js";
+import { cn } from "../../lib/utils.js";
+const AspectRatio = React.forwardRef(({ className, ratio = 16 / 9, style, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-slot": "aspect-ratio",
+      className: cn("ui-aspect-ratio", className),
+      style: { ...style, position: "relative", width: "100%", aspectRatio: `${ratio}` },
+      ...props
+    }
+  );
+});
+AspectRatio.displayName = "AspectRatio";
 export {
   AspectRatio
 };

package/dist/components/layout/auth-divider.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../lib/utils.js";
-import { Separator } from "../ui/separator.js";
+import { Separator } from "./separator.js";
 function AuthDivider({ label, className }) {
   return /* @__PURE__ */ jsx(
     Separator,

package/dist/components/layout/auth-identity.js

@@ -1,11 +1,15 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Clock } from "lucide-react";
 import { isValidElement } from "react";
+import { useAppPreset } from "../../app/preset.js";
 import { Slot } from "../../lib/slot.js";
 import { cn } from "../../lib/utils.js";
-import { Heading, Logo, Text } from "../general/index.js";
+import { Heading, Text } from "../general/typography.js";
 function AuthIdentity({ title, brand, requester, className }) {
-  const artwork = brand === void 0 || brand === null ? /* @__PURE__ */ jsx(Logo, { mark: "godx", tone: "success" }) : isValidElement(brand) ? /* @__PURE__ */ jsx(Slot, { "aria-hidden": "true", children: brand }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: brand });
+  const presetMark = useAppPreset()?.brandMark;
+  const mark = brand === void 0 ? presetMark : brand;
+  const artwork = mark === void 0 || mark === null || mark === false ? null : isValidElement(mark) ? /* @__PURE__ */ jsx(Slot, { "aria-hidden": "true", children: mark }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: mark });
   return /* @__PURE__ */ jsxs("div", { "data-slot": "auth-identity", className: cn("ui-auth-identity", className), children: [
     artwork,
     /* @__PURE__ */ jsx(Heading, { level: 1, children: title }),

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

@@ -1,11 +1,16 @@
 import type { CenteredShellProp } from "../../props/components/layout.prop.js";
-export type { CenteredShellProp, CenteredShellProp as CenteredShellProps, } from "../../props/components/layout.prop.js";
+export type { CenteredShellProp, CenteredShellProp as CenteredShellProps, CenteredShellAuthProp, CenteredShellPageProp, } from "../../props/components/layout.prop.js";
 /**
- * CenteredShell — authenticated, no-sidebar, centred-column page shell: the hosted-ID "My Page",
- * account / self-service, and standalone-settings shape. It fills the gap between the two existing
- * shells: - `AppShell` REQUIRES a sidebar — its padded topbar chrome (`.app-topbar`) is a grid
- * area beside the nav rail, so you cannot get a padded top bar without a rail. - `AuthShell` is
- * the UNAUTHENTICATED root (login/mfa/reset); it centres its card VERTICALLY, so a page that
- * scrolls its own content belongs here instead.
+ * CenteredShell — the ONE centred root shell (v32 #1223 folded `AuthShell` in), in two shapes the
+ * `variant` picks:
+ *
+ * - `"page"` (default) — authenticated, no-sidebar, centred-column page: the hosted-ID "My Page",
+ *   account / self-service, and standalone-settings shape. `AppShell` REQUIRES a sidebar (its
+ *   padded topbar chrome is a grid area beside the nav rail); this is the padded top bar without
+ *   one, over a top-aligned column that flows and scrolls.
+ * - `"auth"` / `"auth-canonical"` — the UNAUTHENTICATED root (login · mfa · passkey · device ·
+ *   reset): a brand bar (banner) that also carries page-level `actions` at its inline end, a
+ *   vertically centred `main` holding the auth `Card`, an optional footer, over a `min-h-dvh`
+ *   surface. `measure="wide"` opens the slot to a split login (a brand panel beside the card).
  */
-export declare function CenteredShell({ topbar, footer, children, width, align, preset, className, }: CenteredShellProp): import("react").JSX.Element;
+export declare function CenteredShell(props: CenteredShellProp): import("react").JSX.Element;

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

@@ -2,7 +2,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
-function CenteredShell({
+function CenteredShell(props) {
+  return isAuth(props) ? /* @__PURE__ */ jsx(AuthLayout, { ...props }) : /* @__PURE__ */ jsx(PageLayout, { ...props });
+}
+function isAuth(props) {
+  return props.variant === "auth" || props.variant === "auth-canonical";
+}
+function PageLayout({
   topbar,
   footer,
   children,
@@ -40,6 +46,42 @@ function CenteredShell({
     }
   );
 }
+function AuthLayout({
+  variant,
+  brand,
+  actions,
+  footer,
+  children,
+  preset = "default",
+  measure = "default",
+  align,
+  density,
+  className
+}) {
+  const { t } = useTranslation();
+  const canonical = variant === "auth-canonical";
+  const resolvedDensity = density ?? (canonical ? "compact" : "comfortable");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "auth-shell",
+      "data-variant": canonical ? "canonical" : "default",
+      "data-preset": preset === "default" ? void 0 : preset,
+      "data-measure": measure === "default" ? void 0 : measure,
+      "data-align": align,
+      "data-density": resolvedDensity,
+      className: cn("ui-auth-shell", className),
+      children: [
+        (brand !== void 0 || actions !== void 0) && /* @__PURE__ */ jsxs("header", { className: "ui-auth-shell-bar", "aria-label": t("layout.authShell.brandLabel"), children: [
+          brand,
+          actions !== void 0 && /* @__PURE__ */ jsx("div", { className: "ui-auth-shell-bar-actions", children: actions })
+        ] }),
+        /* @__PURE__ */ jsx("main", { className: "ui-auth-shell-main", "aria-label": t("layout.authShell.mainLabel"), children: /* @__PURE__ */ jsx("div", { className: "ui-auth-shell-card", children }) }),
+        footer !== void 0 && /* @__PURE__ */ jsx("footer", { className: "ui-auth-shell-footer", "aria-label": t("layout.authShell.footerLabel"), children: footer })
+      ]
+    }
+  );
+}
 export {
   CenteredShell
 };

package/dist/components/layout/flex.d.ts

@@ -1,3 +1,3 @@
 import type { FlexProp } from "../../props/components/layout.prop.js";
 export type { FlexAlignProp, FlexDirectionProp, FlexJustifyProp, FlexMarkerProp, FlexMeasureProp, FlexProp, FlexProp as FlexProps, } from "../../props/components/layout.prop.js";
-export declare function Flex({ as: Element, direction, marker, grow, shrink, surface, bleed, reveal, gap, gapRaw, pad, padRaw, align, justify, wrap, hideBelow, hideFrom, hideBelowRaw, hideFromRaw, fill, width, measure, className, style, children, ...props }: FlexProp): import("react").JSX.Element;
+export declare function Flex(props: FlexProp): import("react").JSX.Element;

package/dist/components/layout/flex.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Children } from "react";
 import { mergeAriaIds } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
 import { flexGapClass, padStyle, padStepToken } from "../../lib/variants.js";
@@ -12,7 +13,10 @@ const listMarker = (element, marker) => {
   return resolved === "none" ? void 0 : resolved;
 };
 const HAS_IMPLICIT_ROLE = /* @__PURE__ */ new Set(["ul", "ol", "li"]);
-function Flex({
+function Flex(props) {
+  return props.attached ? /* @__PURE__ */ jsx(AttachedFlex, { ...props }) : /* @__PURE__ */ jsx(LayoutFlex, { ...props });
+}
+function LayoutFlex({
   as: Element = "div",
   direction = "row",
   marker,
@@ -35,6 +39,9 @@ function Flex({
   fill = false,
   width,
   measure,
+  attached: _attached,
+  fullWidth: _fullWidth,
+  density: _density,
   className,
   style,
   children,
@@ -104,6 +111,71 @@ function Flex({
     }
   );
 }
+function AttachedFlex({
+  as: _as,
+  direction,
+  marker: _marker,
+  grow: _grow,
+  shrink: _shrink,
+  surface: _surface,
+  bleed: _bleed,
+  reveal: _reveal,
+  gap: _gap,
+  gapRaw: _gapRaw,
+  pad: _pad,
+  padRaw: _padRaw,
+  align: _align,
+  justify: _justify,
+  wrap: _wrap,
+  hideBelow: _hideBelow,
+  hideFrom: _hideFrom,
+  hideBelowRaw: _hideBelowRaw,
+  hideFromRaw: _hideFromRaw,
+  fill: _fill,
+  width: _width,
+  measure: _measure,
+  attached: _attached,
+  fullWidth,
+  density,
+  className,
+  children,
+  ...props
+}) {
+  const axis = typeof direction === "object" ? direction.base : direction;
+  const orientation = axis === "col" ? "vertical" : "horizontal";
+  let domProps = props;
+  if (props.role === void 0 && (props["aria-label"] !== void 0 || props["aria-labelledby"] !== void 0)) {
+    const {
+      "aria-required": _ariaRequired,
+      "aria-invalid": _ariaInvalid,
+      "aria-errormessage": ariaErrorMessage,
+      ...allowed
+    } = props;
+    domProps = {
+      ...allowed,
+      role: "group",
+      "aria-describedby": mergeAriaIds(props["aria-describedby"], ariaErrorMessage)
+    };
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "space-compact",
+      "data-orientation": orientation,
+      "data-full-width": fullWidth ? "true" : void 0,
+      className: cn("ui-space-compact", density && `ui-density-${density}`, className),
+      ...domProps,
+      children: Children.toArray(children).map((child, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-slot": "space-compact-item",
+          children: child
+        },
+        index
+      ))
+    }
+  );
+}
 export {
   Flex
 };

package/dist/components/layout/index.d.ts

@@ -1,11 +1,7 @@
 export { PageContainer } from "./page-container.js";
 export type { PageContainerProp, PageContainerProps, BreadcrumbItem, BreadcrumbItemProp, } from "./page-container.js";
-export { PageCover } from "./page-cover.js";
-export type { PageCoverProp, PageCoverProps } from "./page-cover.js";
 export { Flex } from "./flex.js";
 export type { FlexAlignProp, FlexDirectionProp, FlexJustifyProp, FlexProp, FlexProps, } from "./flex.js";
-export { SpaceCompact } from "./space-compact.js";
-export type { SpaceCompactProp, SpaceCompactProps } from "./space-compact.js";
 export { ResizablePanel, ResizablePanelGroup, ResizableHandle } from "./resizable.js";
 export { NavList } from "./nav-list.js";
 export type { NavListProp, NavListProps } from "./nav-list.js";
@@ -15,8 +11,6 @@ export { AppLauncher } from "./app-launcher.js";
 export type { AppLauncherApp, AppLauncherGroup, AppLauncherLabels, AppLauncherProp, AppLauncherProps, } from "./app-launcher.js";
 export { OrgSwitcher } from "./org-switcher.js";
 export type { OrgSwitcherLabels, OrgSwitcherOrganization, OrgSwitcherProp, OrgSwitcherProps, } from "./org-switcher.js";
-export { AuthShell } from "./auth-shell.js";
-export type { AuthShellProp, AuthShellProps } from "./auth-shell.js";
 export type { AuthShellPresetProp } from "../../props/vocabulary/index.js";
 export { AuthDivider } from "./auth-divider.js";
 export type { AuthDividerProp, AuthDividerProps } from "./auth-divider.js";
@@ -34,7 +28,7 @@ export { MobileShell } from "./mobile-shell.js";
 export type { MobileShellProp, MobileShellProps } from "./mobile-shell.js";
 export type { MobileShellHeightProp } from "../../props/vocabulary/index.js";
 export { CenteredShell } from "./centered-shell.js";
-export type { CenteredShellProp, CenteredShellProps } from "./centered-shell.js";
+export type { CenteredShellProp, CenteredShellProps, CenteredShellAuthProp, CenteredShellPageProp, } from "./centered-shell.js";
 export type { CenteredShellWidthProp, CenteredShellAlignProp } from "../../props/vocabulary/index.js";
 export { ErrorSurface } from "./error-surface.js";
 export type { ErrorSurfaceMaintenanceProp, ErrorSurfaceProp, ErrorSurfaceProps, } from "./error-surface.js";
@@ -53,17 +47,11 @@ export { MasterDetail } from "./master-detail.js";
 export type { MasterDetailProps } from "./master-detail.js";
 export { SplitPane } from "./split-pane.js";
 export type { SplitPaneProps } from "./split-pane.js";
-export { DraggablePanel } from "./draggable-panel.js";
-export type { DraggablePanelProp, DraggablePanelProps, DraggablePanelPlacementProp, DraggablePanelPositionProp, DraggablePanelLabels, DragAxisProp, DragBoundsProp, } from "./draggable-panel.js";
 export { Separator } from "./separator.js";
 export type { SeparatorProp, SeparatorProps } from "./separator.js";
 export { AspectRatio } from "./aspect-ratio.js";
-export { LegalDocumentShell } from "./legal-document-shell.js";
-export type { LegalDocumentSectionProp, LegalDocumentShellProp, LegalDocumentShellProps, } from "./legal-document-shell.js";
 export { ServiceRolePanel } from "./service-role-panel.js";
 export type { ServiceRoleItemProp, ServiceRolePanelProp, ServiceRolePanelProps, } from "./service-role-panel.js";
 export { useAppShellNavigationMode } from "./app-shell.js";
-export { Masonry } from "./masonry.js";
-export type { MasonryColumnsProp, MasonryGapProp, MasonryItemProp, MasonryLayoutEntryProp, MasonryProp, MasonryProps, } from "./masonry.js";
 export { Affix } from "./affix.js";
 export type { AffixProp, AffixProps, AffixTargetProp } from "./affix.js";

package/dist/components/layout/index.js

@@ -1,13 +1,10 @@
 import { PageContainer } from "./page-container.js";
-import { PageCover } from "./page-cover.js";
 import { Flex } from "./flex.js";
-import { SpaceCompact } from "./space-compact.js";
 import { ResizablePanel, ResizablePanelGroup, ResizableHandle } from "./resizable.js";
 import { NavList } from "./nav-list.js";
 import { AppShell } from "./app-shell.js";
 import { AppLauncher } from "./app-launcher.js";
 import { OrgSwitcher } from "./org-switcher.js";
-import { AuthShell } from "./auth-shell.js";
 import { AuthDivider } from "./auth-divider.js";
 import { AuthIdentity } from "./auth-identity.js";
 import { AccountChip } from "./account-chip.js";
@@ -24,13 +21,10 @@ import { TopbarItem } from "./topbar-item.js";
 import { ResponsiveGrid } from "./responsive-grid.js";
 import { MasterDetail } from "./master-detail.js";
 import { SplitPane } from "./split-pane.js";
-import { DraggablePanel } from "./draggable-panel.js";
 import { Separator } from "./separator.js";
 import { AspectRatio } from "./aspect-ratio.js";
-import { LegalDocumentShell } from "./legal-document-shell.js";
 import { ServiceRolePanel } from "./service-role-panel.js";
 import { useAppShellNavigationMode } from "./app-shell.js";
-import { Masonry } from "./masonry.js";
 import { Affix } from "./affix.js";
 export {
   AccountChip,
@@ -42,21 +36,16 @@ export {
   AuthDivider,
   AuthFooter,
   AuthIdentity,
-  AuthShell,
   AuthStack,
   Breadcrumb,
   CenteredShell,
-  DraggablePanel,
   ErrorSurface,
   Flex,
-  LegalDocumentShell,
-  Masonry,
   MasterDetail,
   MobileShell,
   NavList,
   OrgSwitcher,
   PageContainer,
-  PageCover,
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
@@ -67,7 +56,6 @@ export {
   SidebarHeader,
   SidebarItem,
   SidebarSection,
-  SpaceCompact,
   SplitPane,
   Topbar,
   TopbarItem,

package/dist/components/layout/separator.d.ts

@@ -1,2 +1,25 @@
-export { Separator } from "../ui/separator.js";
-export type { SeparatorProp, SeparatorProps } from "../ui/separator.js";
+import * as React from "react";
+export type { SeparatorProp, SeparatorProp as SeparatorProps, } from "../../props/components/layout.prop.js";
+/**
+ * ACCESSIBILITY — the whole point of the labelled form is that the label is ANNOUNCED, exactly
+ * ONCE. Without a label the rule stays `decorative` (`role="none"`), which is right: a section
+ * rule carries no information.
+ *
+ * SUBSTRATE — React Aria Components. Its `Separator` has no `decorative` prop: `useSeparator`
+ * emits `role="separator"` unconditionally (and `aria-orientation="vertical"` on the vertical
+ * rule), and it drops `children` entirely. Both are handled in the `render` override below, which
+ * is RAC's supported escape hatch for owning the element: it hands us the computed DOM props and
+ * the ref, and we decide what element carries them.
+ */
+export declare const Separator: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    labelSize?: "2xs" | "xs" | "sm" | "md";
+    space?: import("../../props/index.js").GapProp;
+    hideBelow?: import("../../props/index.js").BreakpointProp;
+    hideFrom?: import("../../props/index.js").BreakpointProp;
+    orientation?: import("../../props/index.js").OrientationProp;
+    label?: string;
+    labelAlign?: import("../../props/index.js").TextAlignProp;
+    tone?: import("../../props/index.js").TextToneProp;
+    decorative?: boolean;
+    className?: import("../../props/index.js").ClassNameProp;
+} & React.RefAttributes<HTMLDivElement>>;