@mechane-ai/elements 0.11.0 → 0.13.0

package/dist/packages/foundations/src/control-styles.d.ts

@@ -0,0 +1,122 @@
+import * as stylex from '@stylexjs/stylex';
+export declare const controlStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly boxSizing: stylex.StyleXClassNameFor<"boxSizing", "border-box">;
+        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", string>;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", string>;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 1>;
+        readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "solid">;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", string>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
+        readonly WebkitFontSmoothing: stylex.StyleXClassNameFor<"WebkitFontSmoothing", "antialiased">;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+    }>;
+    readonly button: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "inline-flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly maxWidth: stylex.StyleXClassNameFor<"maxWidth", "100%">;
+        readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
+        readonly textAlign: stylex.StyleXClassNameFor<"textAlign", "center">;
+    }>;
+    readonly iconButton: Readonly<{
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", string>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 0>;
+    }>;
+    readonly field: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "block">;
+        readonly width: stylex.StyleXClassNameFor<"width", "100%">;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+    }>;
+    readonly fieldRoot: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: stylex.StyleXClassNameFor<"flexDirection", "column">;
+        readonly gap: stylex.StyleXClassNameFor<"gap", string>;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
+        readonly WebkitFontSmoothing: stylex.StyleXClassNameFor<"WebkitFontSmoothing", "antialiased">;
+    }>;
+    readonly label: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly fontWeight: stylex.StyleXClassNameFor<"fontWeight", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
+    }>;
+    readonly description: Readonly<{
+        readonly margin: stylex.StyleXClassNameFor<"margin", 0>;
+        readonly color: stylex.StyleXClassNameFor<"color", string>;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+        readonly overflowWrap: stylex.StyleXClassNameFor<"overflowWrap", "anywhere">;
+    }>;
+    readonly textarea: Readonly<{
+        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", 144>;
+        readonly resize: stylex.StyleXClassNameFor<"resize", "vertical">;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", string>;
+    }>;
+    readonly plainTextarea: Readonly<{
+        readonly minHeight: stylex.StyleXClassNameFor<"minHeight", string>;
+        readonly maxHeight: stylex.StyleXClassNameFor<"maxHeight", "30dvh">;
+        readonly fieldSizing: stylex.StyleXClassNameFor<"fieldSizing", "content">;
+        readonly resize: stylex.StyleXClassNameFor<"resize", "none">;
+        readonly paddingBlock: stylex.StyleXClassNameFor<"paddingBlock", 0>;
+        readonly paddingInline: stylex.StyleXClassNameFor<"paddingInline", 0>;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", 0>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+        readonly ':focus-visible': stylex.StyleXClassNameFor<":focus-visible", {
+            readonly outlineStyle: "none";
+        }>;
+        readonly ':disabled': stylex.StyleXClassNameFor<":disabled", {
+            readonly backgroundColor: "transparent";
+        }>;
+    }>;
+    readonly group: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "relative">;
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "stretch">;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", string>;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", string>;
+        readonly '::after': stylex.StyleXClassNameFor<"::after", {
+            readonly content: "\"\"";
+            readonly position: "absolute";
+            readonly inset: 0;
+            readonly pointerEvents: "none";
+            readonly borderWidth: 1;
+            readonly borderStyle: "solid";
+            readonly borderColor: stylex.StyleXVar<string>;
+            readonly borderRadius: stylex.StyleXVar<string>;
+        }>;
+        readonly ':has(input[aria-invalid="true"])': stylex.StyleXClassNameFor<":has(input[aria-invalid=\"true\"])", {
+            readonly '::after': {
+                borderColor: stylex.StyleXVar<string>;
+            };
+        }>;
+    }>;
+    readonly embedded: Readonly<{
+        readonly flex: stylex.StyleXClassNameFor<"flex", 1>;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly width: stylex.StyleXClassNameFor<"width", 0>;
+        readonly borderColor: stylex.StyleXClassNameFor<"borderColor", "transparent">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+        readonly ':is([data-invalid], [aria-invalid="true"])': stylex.StyleXClassNameFor<":is([data-invalid], [aria-invalid=\"true\"])", {
+            readonly borderColor: "transparent";
+        }>;
+        readonly ':focus-visible': stylex.StyleXClassNameFor<":focus-visible", {
+            readonly outlineOffset: `calc(0px - ${stylex.StyleXVar<string>})`;
+        }>;
+    }>;
+}>;

package/dist/packages/foundations/src/style-composition.d.ts

@@ -1,12 +1,10 @@
 import type { StyleXStyles } from '@stylexjs/stylex';
 import type { CSSProperties } from 'react';
 type PlacementProperties = Pick<CSSProperties, 'alignSelf' | 'flex' | 'flexGrow' | 'flexShrink' | 'gridArea' | 'gridColumn' | 'gridRow' | 'margin' | 'marginBlock' | 'marginInline' | 'marginBlockStart' | 'marginBlockEnd' | 'marginInlineStart' | 'marginInlineEnd' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'width' | 'maxWidth' | 'minWidth'>;
-type ControlGeometry = Pick<CSSProperties, 'height' | 'minHeight' | 'maxHeight' | 'padding' | 'paddingBlock' | 'paddingInline' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'borderRadius' | 'justifyContent' | 'alignItems' | 'gap'>;
 type DefinedProperties<Properties> = {
     readonly [Key in keyof Properties]?: Exclude<Properties[Key], undefined>;
 };
 export type PlacementStyle = StyleXStyles<DefinedProperties<PlacementProperties>>;
-export type ControlStyle = StyleXStyles<DefinedProperties<PlacementProperties & ControlGeometry>>;
 type StyleProperties<State> = {
     readonly className?: string | ((state: State) => string | undefined) | undefined;
     readonly style?: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined;

package/dist/packages/foundations/src/tokens.stylex.d.ts

@@ -158,8 +158,7 @@ export declare const typography: stylex.VarGroup<Readonly<{
     headingTracking: string;
 }>, symbol>;
 export declare const controls: stylex.VarGroup<Readonly<{
-    smHeight: string;
-    mdHeight: string;
+    height: string;
     coarseTarget: string;
     iconSize: string;
     paddingInline: string;
@@ -168,6 +167,11 @@ export declare const controls: stylex.VarGroup<Readonly<{
     focusWidth: string;
     disabledOpacity: string;
 }>, symbol>;
+export declare const pageGeometry: stylex.VarGroup<Readonly<{
+    inset: string;
+    toolbarHeight: string;
+    sectionGap: string;
+}>, symbol>;
 export declare const radii: stylex.VarGroup<Readonly<{
     sm: string;
     md: string;
@@ -178,13 +182,20 @@ export declare const motion: stylex.VarGroup<Readonly<{
     drawerDuration: string;
     drawerEasing: string;
 }>, symbol>;
+export declare const loading: {
+    delaySeconds: number;
+    revealMs: number;
+    placeholderMs: number;
+};
 export declare const shadows: stylex.VarGroup<Readonly<{
     popup: string;
+    selection: string;
 }>, symbol>;
 export declare const darkShadows: {
     popup: string;
 };
 export declare const layers: {
+    sticky: string;
     backdrop: string;
     dialog: string;
     popup: string;

package/dist/packages/layout/src/frame.stylex.d.ts

@@ -1,7 +1,6 @@
 import * as stylex from '@stylexjs/stylex';
 export declare const frame: stylex.VarGroup<Readonly<{
     sidebarWidth: string;
-    toolbarHeight: string;
     navigationHeight: string;
     navigationInset: string;
     navigationPadding: string;

package/dist/packages/layout/src/index.d.ts

@@ -4,6 +4,8 @@ export { FocusPage } from './focus-page.tsx';
 export { Workbench, WorkbenchScroll, WorkbenchFooter } from './workbench.tsx';
 export { ViewStack } from './view-stack.tsx';
 export { PageToolbar, ToolbarAction } from './page-toolbar.tsx';
+export type { PageContentProps } from './page-content.tsx';
+export { PageContent } from './page-content.tsx';
 export type { RecordPageRootProps, RecordPageToolbarProps, RecordPageBodyProps, RecordPageHeaderProps, RecordPageContentProps, RecordPageAsideProps, } from './record-page.tsx';
 export { RecordPage } from './record-page.tsx';
 export type { ResizableRootProps, ResizablePaneProps, ResizableHandleProps } from './resizable.tsx';

package/dist/packages/layout/src/page-content.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+export type PageContentProps = {
+    readonly children: ReactNode;
+};
+export declare function PageContent({ children }: PageContentProps): ReactNode;

package/dist/packages/layout/src/page-toolbar.d.ts

@@ -8,7 +8,7 @@ type PageToolbarProps = {
     readonly views?: ReactNode;
     readonly leading?: ReactNode;
 };
-type ToolbarActionProps = Omit<ComponentProps<typeof Button>, 'variant' | 'size' | 'xstyle'> & {
+type ToolbarActionProps = Omit<ComponentProps<typeof Button>, 'variant' | 'xstyle'> & {
     readonly icon?: ReactNode;
 };
 export declare function PageToolbar({ title, actions, breadcrumb, navigation, views, leading, }: PageToolbarProps): ReactNode;

package/dist/packages/layout/src/sidebar.d.ts

@@ -1,5 +1,5 @@
+import { Button as BaseButton } from '@base-ui/react/button';
 import type { ComponentProps, ReactNode, RefObject } from 'react';
-import { Button } from '../../core/src/index.ts';
 import { Drawer } from '../../overlays/src/index.ts';
 type SidebarState = {
     readonly isExpanded: boolean;
@@ -21,7 +21,7 @@ type NavigationProps = {
     readonly children: ReactNode;
     readonly label?: string;
 };
-type NavigationItemProps = Omit<ComponentProps<typeof Button>, 'variant' | 'tone' | 'size' | 'xstyle'> & {
+type NavigationItemProps = ComponentProps<typeof BaseButton> & {
     readonly icon?: ReactNode;
     readonly selected?: boolean;
 };
@@ -45,7 +45,7 @@ export declare function NavigationSection({ children, label, }: {
     readonly children: ReactNode;
     readonly label: string;
 }): ReactNode;
-export declare function NavigationItem({ children, icon, selected, onClick, ...props }: NavigationItemProps): ReactNode;
+export declare function NavigationItem({ children, icon, selected, onClick, className, style, ...props }: NavigationItemProps): ReactNode;
 export declare function NavigationLink({ children, icon, selected, onClick, className, style, ...props }: NavigationLinkProps): ReactNode;
 export declare function SidebarLabel({ children, grow }: SidebarLabelProps): ReactNode;
 export declare function SidebarFooter({ children, layout }: SidebarFooterProps): ReactNode;

package/dist/packages/navigation/src/index.d.ts

@@ -1,5 +1,5 @@
 export { Kbd, Breadcrumb } from './navigation.tsx';
-export type { PageNavigationItem, PageNavigationProps } from './page-navigation.tsx';
-export { PageNavigation } from './page-navigation.tsx';
+export type { PageNavigationItem, PageNavigationProps, PageNavigationPlaceholderProps } from './page-navigation.tsx';
+export { PageNavigation, PageNavigationPlaceholder } from './page-navigation.tsx';
 export { SkipLink } from './skip-link.tsx';
 export { Tabs } from './tabs.tsx';

package/dist/packages/navigation/src/page-navigation.d.ts

@@ -11,4 +11,9 @@ export type PageNavigationProps<ItemId extends string = string> = {
     readonly label?: string;
     readonly embedded?: boolean;
 };
+export type PageNavigationPlaceholderProps = {
+    readonly items: ReadonlyArray<Pick<PageNavigationItem, 'id' | 'label'>>;
+    readonly embedded?: boolean;
+};
+export declare function PageNavigationPlaceholder({ items, embedded }: PageNavigationPlaceholderProps): ReactNode;
 export declare function PageNavigation<ItemId extends string>({ items, selectedId, onNavigate, label, embedded, }: PageNavigationProps<ItemId>): ReactNode;

package/dist/{pierre-diff--zsiHCCB.js → pierre-diff-sUAU-xeL.js}

@@ -1,4 +1,4 @@
-import { n as e, t } from "./pierre-theme-D9hnHv3Z.js";
+import { n as e, t } from "./pierre-theme-CBAncKdH.js";
 import { t as n } from "./viewer-styles-CpHqp5Qv.js";
 import * as r from "@stylexjs/stylex";
 import { useCallback as i, useState as a } from "react";

package/dist/{pierre-theme-D9hnHv3Z.js → pierre-theme-CBAncKdH.js}

@@ -62,7 +62,7 @@ var o = {
 pre { font-family: ${a.monoFamily}; font-size: ${a.captionSize}; line-height: ${a.bodyLineHeight}; }
 [data-line-number] { color: ${e.muted}; }
 [data-diffs-header] {
-  min-height: ${n.mdHeight};
+  min-height: ${n.height};
   padding-block: ${r.sm};
   padding-inline: ${r.md};
   border-bottom: 1px solid ${e.line};

package/dist/{pierre-tree-D47uA7lb.js → pierre-tree-Db1yaDM2.js}

@@ -1,7 +1,7 @@
-import { c as e } from "./src-D05isEh_.js";
-import { l as t } from "./src-C_heP5kL.js";
+import { c as e } from "./src-BNlyCwOr.js";
+import { l as t } from "./src-DMsnWyru.js";
 import { conditions as n } from "./tokens.js";
-import { r } from "./pierre-theme-D9hnHv3Z.js";
+import { r } from "./pierre-theme-CBAncKdH.js";
 import * as i from "@stylexjs/stylex";
 import { useEffect as a, useId as o, useRef as s, useState as c } from "react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";