@mechane-ai/ui 0.0.0-stage → 0.2.1

package/dist/style-composition.d.ts

@@ -0,0 +1,22 @@
+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' | '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;
+};
+type CompiledStyles = {
+    readonly className?: string | undefined;
+    readonly style?: CSSProperties | undefined;
+};
+type MergeStylesInput<State> = StyleProperties<State> & {
+    readonly styles: CompiledStyles;
+};
+export declare function mergeStyles<State>({ className, style, styles }: MergeStylesInput<State>): StyleProperties<State>;
+export {};

package/dist/surfaces.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentProps, ReactNode } from 'react';
+type PanelProps = ComponentProps<'section'> & {
+    readonly padded?: boolean;
+};
+type RowProps = ComponentProps<'div'> & {
+    readonly between?: boolean;
+};
+type StackProps = ComponentProps<'div'> & {
+    readonly compact?: boolean;
+};
+type ColumnsProps = ComponentProps<'div'>;
+type DividerProps = ComponentProps<'hr'>;
+type EmptyStateProps = Omit<ComponentProps<'div'>, 'title'> & {
+    readonly title: string;
+    readonly action?: ReactNode;
+};
+type NoticeProps = ComponentProps<'div'> & {
+    readonly error?: boolean;
+};
+export declare function Panel({ padded, ...props }: PanelProps): ReactNode;
+export declare function Row({ between, ...props }: RowProps): ReactNode;
+export declare function Stack({ compact, ...props }: StackProps): ReactNode;
+export declare function Columns(props: ColumnsProps): ReactNode;
+export declare function Divider(props: DividerProps): ReactNode;
+export declare function EmptyState({ title, children, action, ...props }: EmptyStateProps): ReactNode;
+export declare function Notice({ error, ...props }: NoticeProps): ReactNode;
+export {};

package/dist/table.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps, ReactNode } from 'react';
+type TableHeader = string | {
+    readonly label: string;
+    readonly width: number;
+    readonly secondary?: boolean;
+};
+type TableProps = ComponentProps<'table'> & {
+    readonly headers: ReadonlyArray<TableHeader>;
+    readonly label: string;
+};
+type CellProps = ComponentProps<'td'> & {
+    readonly secondary?: boolean;
+    readonly mobileLabel?: string;
+};
+export declare function Table({ headers, children, label, ...props }: TableProps): ReactNode;
+export declare function Cell({ children, secondary, mobileLabel, ...props }: CellProps): ReactNode;
+export {};

package/dist/tabs.d.ts

@@ -0,0 +1,19 @@
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import type { ComponentProps, ReactNode } from 'react';
+import type { ValueStateProperties } from './control-state.ts';
+type BaseTabsRootProps = ComponentProps<typeof BaseTabs.Root>;
+type TabsRootProps = Omit<BaseTabsRootProps, 'value' | 'defaultValue' | 'onValueChange'> & ValueStateProperties<Exclude<BaseTabsRootProps['value'], undefined>, NonNullable<BaseTabsRootProps['onValueChange']>>;
+type TabsListProps = ComponentProps<typeof BaseTabs.List>;
+type TabsTabProps = ComponentProps<typeof BaseTabs.Tab>;
+type TabsPanelProps = ComponentProps<typeof BaseTabs.Panel>;
+declare function TabsRoot({ className, style, ...props }: TabsRootProps): ReactNode;
+declare function TabsList({ className, style, ...props }: TabsListProps): ReactNode;
+declare function TabsTab({ className, style, ...props }: TabsTabProps): ReactNode;
+declare function TabsPanel({ className, style, ...props }: TabsPanelProps): ReactNode;
+export declare const Tabs: {
+    Root: typeof TabsRoot;
+    List: typeof TabsList;
+    Tab: typeof TabsTab;
+    Panel: typeof TabsPanel;
+};
+export {};

package/dist/text.d.ts

@@ -0,0 +1,30 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { PlacementStyle } from './style-composition.ts';
+type TextVariant = 'body' | 'caption' | 'mono' | 'prose';
+type TextTone = 'ink' | 'muted';
+type StatusTone = 'neutral' | 'positive' | 'warning' | 'negative';
+type TextProps = ComponentProps<'span'> & {
+    readonly variant?: TextVariant;
+    readonly tone?: TextTone;
+    readonly xstyle?: PlacementStyle;
+};
+type HeadingProps = ComponentProps<'h1'>;
+type SubheadingProps = ComponentProps<'h2'>;
+type MutedProps = ComponentProps<'p'>;
+type IdentifierProps = ComponentProps<'span'>;
+type ProseProps = ComponentProps<'pre'>;
+type BadgeProps = ComponentProps<'span'> & {
+    readonly tone?: StatusTone;
+};
+type StatusProps = ComponentProps<'span'> & {
+    readonly tone?: StatusTone;
+};
+export declare function Text({ variant, tone, xstyle, ...props }: TextProps): ReactNode;
+export declare function Heading(props: HeadingProps): ReactNode;
+export declare function Subheading(props: SubheadingProps): ReactNode;
+export declare function Muted(props: MutedProps): ReactNode;
+export declare function Identifier(props: IdentifierProps): ReactNode;
+export declare function Prose(props: ProseProps): ReactNode;
+export declare function Badge({ children, tone, ...props }: BadgeProps): ReactNode;
+export declare function Status({ children, tone, ...props }: StatusProps): ReactNode;
+export {};

package/dist/tokens.js

@@ -0,0 +1,84 @@
+import "@stylexjs/stylex";
+// src/tokens.stylex.ts
+var e = {
+	canvas: "var(--x1nqxagb)",
+	surface: "var(--x1kupdtt)",
+	ink: "var(--x15p3jnv)",
+	inkHover: "var(--xhixglo)",
+	inverse: "var(--x1flvyz4)",
+	muted: "var(--xpd4v19)",
+	faint: "var(--xm6oem5)",
+	line: "var(--x1glhyjp)",
+	focus: "var(--x1p3cbpj)",
+	accent: "var(--xvee6di)",
+	accentSoft: "var(--xnwsrbi)",
+	warning: "var(--x40kjqr)",
+	warningSoft: "var(--xe3cigw)",
+	danger: "var(--xp9kirc)",
+	dangerHover: "var(--xg0vt9w)",
+	dangerSoft: "var(--xd94q93)",
+	overlay: "var(--xq6u5jv)",
+	__varGroupHash__: "xr1g0yw"
+}, t = {
+	xxs: "var(--xy2rqe2)",
+	xs: "var(--xrcifeq)",
+	sm: "var(--x1chpkuu)",
+	md: "var(--x2v3yb5)",
+	lg: "var(--xyf8nzo)",
+	xl: "var(--x1puc1tu)",
+	xxl: "var(--x1nlsusz)",
+	__varGroupHash__: "xnjkq85"
+}, n = {
+	fontFamily: "var(--x1m9j3x4)",
+	monoFamily: "var(--xekxf36)",
+	bodySize: "var(--x1pe3ll1)",
+	bodyLineHeight: "var(--x1o4ziua)",
+	captionSize: "var(--x1mwsp88)",
+	captionLineHeight: "var(--x10r02xe)",
+	inputSize: "var(--x14ocyhu)",
+	touchInputSize: "var(--x1cbkt0e)",
+	sectionSize: "var(--x12rnewd)",
+	sectionLineHeight: "var(--x13tj69x)",
+	headingSize: "var(--x1x4emdg)",
+	headingLineHeight: "var(--x1c3nks6)",
+	compactHeadingSize: "var(--x1p83npe)",
+	compactHeadingLineHeight: "var(--xntw5c)",
+	headingTracking: "var(--xau97yy)",
+	__varGroupHash__: "x19k47ix"
+}, r = {
+	smHeight: "var(--xauqmbp)",
+	mdHeight: "var(--x1ngx1aq)",
+	coarseTarget: "var(--xobaqj)",
+	iconSize: "var(--x9pj4p9)",
+	paddingInline: "var(--x143qv1u)",
+	gap: "var(--x17iw6mo)",
+	focusWidth: "var(--xb4pdys)",
+	disabledOpacity: "var(--x1qtwr64)",
+	__varGroupHash__: "x1w6w4x"
+}, i = {
+	sm: "var(--xlsahia)",
+	md: "var(--xmydd8r)",
+	__varGroupHash__: "x1rar5af"
+}, a = {
+	duration: "var(--x1a2hahs)",
+	easing: "var(--xp4majk)",
+	drawerDuration: "var(--xf96llh)",
+	drawerEasing: "var(--x1gpifc1)",
+	__varGroupHash__: "xrhtzqn"
+}, o = {
+	popup: "var(--xj28h13)",
+	__varGroupHash__: "x1o10zac"
+}, s = {
+	backdrop: "20",
+	dialog: "21",
+	popup: "30",
+	tooltip: "40",
+	skipLink: "50"
+}, c = {
+	coarsePointer: "@media (pointer: coarse)",
+	hoverPointer: "@media (hover: hover) and (pointer: fine)",
+	compactText: "@media (max-width:639px)",
+	compactTable: "@media (max-width:600px)",
+	reducedMotion: "@media (prefers-reduced-motion: reduce)"
+};
+export { e as colors, c as conditions, r as controls, s as layers, a as motion, i as radii, o as shadows, t as spacing, n as typography };

package/dist/tokens.stylex.d.ts

@@ -0,0 +1,83 @@
+import * as stylex from '@stylexjs/stylex';
+export declare const colors: stylex.VarGroup<Readonly<{
+    canvas: string;
+    surface: string;
+    ink: string;
+    inkHover: string;
+    inverse: string;
+    muted: string;
+    faint: string;
+    line: string;
+    focus: string;
+    accent: string;
+    accentSoft: string;
+    warning: string;
+    warningSoft: string;
+    danger: string;
+    dangerHover: string;
+    dangerSoft: string;
+    overlay: string;
+}>, symbol>;
+export declare const spacing: stylex.VarGroup<Readonly<{
+    xxs: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+}>, symbol>;
+export declare const typography: stylex.VarGroup<Readonly<{
+    fontFamily: string;
+    monoFamily: string;
+    bodySize: string;
+    bodyLineHeight: string;
+    captionSize: string;
+    captionLineHeight: string;
+    inputSize: string;
+    touchInputSize: string;
+    sectionSize: string;
+    sectionLineHeight: string;
+    headingSize: string;
+    headingLineHeight: string;
+    compactHeadingSize: string;
+    compactHeadingLineHeight: string;
+    headingTracking: string;
+}>, symbol>;
+export declare const controls: stylex.VarGroup<Readonly<{
+    smHeight: string;
+    mdHeight: string;
+    coarseTarget: string;
+    iconSize: string;
+    paddingInline: string;
+    gap: string;
+    focusWidth: string;
+    disabledOpacity: string;
+}>, symbol>;
+export declare const radii: stylex.VarGroup<Readonly<{
+    sm: string;
+    md: string;
+}>, symbol>;
+export declare const motion: stylex.VarGroup<Readonly<{
+    duration: string;
+    easing: string;
+    drawerDuration: string;
+    drawerEasing: string;
+}>, symbol>;
+export declare const shadows: stylex.VarGroup<Readonly<{
+    popup: string;
+}>, symbol>;
+export declare const layers: {
+    backdrop: string;
+    dialog: string;
+    popup: string;
+    tooltip: string;
+    skipLink: string;
+};
+export declare const conditions: {
+    coarsePointer: string;
+    hoverPointer: string;
+    compactText: string;
+    compactTable: string;
+    reducedMotion: string;
+};

package/dist/tooltip.d.ts

@@ -0,0 +1,18 @@
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
+import type { ComponentProps, ReactNode } from 'react';
+import type { OpenStateProperties } from './control-state.ts';
+type TooltipRootProps<Payload> = Omit<BaseTooltip.Root.Props<Payload>, 'open' | 'defaultOpen' | 'onOpenChange'> & OpenStateProperties<NonNullable<BaseTooltip.Root.Props<Payload>['onOpenChange']>>;
+type TooltipPositionerProps = ComponentProps<typeof BaseTooltip.Positioner>;
+type TooltipPopupProps = ComponentProps<typeof BaseTooltip.Popup>;
+declare function TooltipRoot<Payload = unknown>(props: TooltipRootProps<Payload>): ReactNode;
+declare function TooltipPositioner({ className, style, sideOffset, ...props }: TooltipPositionerProps): ReactNode;
+declare function TooltipPopup({ className, style, ...props }: TooltipPopupProps): ReactNode;
+export declare const Tooltip: {
+    Provider: import("react").FC<import("@base-ui/react").TooltipProviderProps>;
+    Root: typeof TooltipRoot;
+    Trigger: BaseTooltip.Trigger;
+    Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").TooltipPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Positioner: typeof TooltipPositioner;
+    Popup: typeof TooltipPopup;
+};
+export {};

package/package.json

@@ -1,6 +1,54 @@
 {
   "name": "@mechane-ai/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.1",
+  "description": "Mechane UI components, tokens, application layouts, and charts",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mechane-ai/mechane.git",
+    "directory": "workspaces/core/packages/browser/ui"
+  },
+  "files": [
+    "dist",
+    "src/tokens.stylex.ts",
+    "styles.css",
+    "README.md",
+    "LICENSE",
+    "NOTICE"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens": {
+      "types": "./dist/tokens.stylex.d.ts",
+      "import": "./dist/tokens.js"
+    },
+    "./tokens.stylex": "./src/tokens.stylex.ts",
+    "./layout": {
+      "types": "./dist/layout/index.d.ts",
+      "import": "./dist/layout.js"
+    },
+    "./charts": {
+      "types": "./dist/charts/index.d.ts",
+      "import": "./dist/charts.js"
+    },
+    "./styles.css": "./styles.css"
+  },
+  "dependencies": {
+    "@base-ui/react": "1.9.0",
+    "@stylexjs/stylex": "0.19.1",
+    "@visx/scale": "4.0.0",
+    "@visx/shape": "4.0.0",
+    "lucide-react": "1.66.0"
+  },
+  "peerDependencies": {
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1"
+  }
 }

package/src/tokens.stylex.ts

@@ -0,0 +1,81 @@
+import * as stylex from '@stylexjs/stylex';
+
+export const colors = stylex.defineVars({
+  canvas: '#f5f5f5',
+  surface: '#ffffff',
+  ink: '#0a0a0a',
+  inkHover: '#333333',
+  inverse: '#ffffff',
+  muted: '#545454',
+  faint: '#9d9d9d',
+  line: '#ebebeb',
+  focus: '#0a69e2',
+  accent: '#21684f',
+  accentSoft: '#eef6f1',
+  warning: '#875900',
+  warningSoft: '#fff7e6',
+  danger: '#b13838',
+  dangerHover: '#922d2d',
+  dangerSoft: '#fff1f1',
+  overlay: '#00000066',
+});
+
+export const spacing = stylex.defineVars({
+  xxs: '2px',
+  xs: '4px',
+  sm: '8px',
+  md: '12px',
+  lg: '16px',
+  xl: '24px',
+  xxl: '32px',
+});
+
+export const typography = stylex.defineVars({
+  fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", sans-serif',
+  monoFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+  bodySize: '13px',
+  bodyLineHeight: '20px',
+  captionSize: '12px',
+  captionLineHeight: '18px',
+  inputSize: '14px',
+  touchInputSize: '16px',
+  sectionSize: '16px',
+  sectionLineHeight: '22px',
+  headingSize: '36px',
+  headingLineHeight: '44px',
+  compactHeadingSize: '28px',
+  compactHeadingLineHeight: '36px',
+  headingTracking: '-0.035em',
+});
+
+export const controls = stylex.defineVars({
+  smHeight: '32px',
+  mdHeight: '36px',
+  coarseTarget: '44px',
+  iconSize: '16px',
+  paddingInline: '10px',
+  gap: '6px',
+  focusWidth: '2px',
+  disabledOpacity: '0.45',
+});
+
+export const radii = stylex.defineVars({ sm: '4px', md: '6px' });
+
+export const motion = stylex.defineVars({
+  duration: '140ms',
+  easing: 'cubic-bezier(0.23, 1, 0.32, 1)',
+  drawerDuration: '220ms',
+  drawerEasing: 'cubic-bezier(0.32, 0.72, 0, 1)',
+});
+
+export const shadows = stylex.defineVars({ popup: '0 4px 16px #00000014' });
+
+export const layers = stylex.defineConsts({ backdrop: '20', dialog: '21', popup: '30', tooltip: '40', skipLink: '50' });
+
+export const conditions = stylex.defineConsts({
+  coarsePointer: '@media (pointer: coarse)',
+  hoverPointer: '@media (hover: hover) and (pointer: fine)',
+  compactText: '@media (max-width:639px)',
+  compactTable: '@media (max-width:600px)',
+  reducedMotion: '@media (prefers-reduced-motion: reduce)',
+});

package/styles.css

@@ -0,0 +1,2 @@
+@layer reset, mechane;
+@import './dist/assets/stylex.css' layer(mechane);