@mechane-ai/elements 0.12.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mechane-ai/elements",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "description": "Elements by Mechane — React components for applications, AI interfaces, and analytical graphics",
   "license": "Apache-2.0",
   "repository": {
@@ -10,6 +10,7 @@
   },
   "files": [
     "dist",
+    "packages/foundations/src/constants.stylex.ts",
     "packages/foundations/src/tokens.stylex.ts",
     "styles.css",
     "README.md",
@@ -122,9 +123,10 @@
       "import": "./dist/csp.js"
     },
     "./tokens": {
-      "types": "./dist/packages/foundations/src/tokens.stylex.d.ts",
+      "types": "./dist/packages/foundations/src/tokens.d.ts",
       "import": "./dist/tokens.js"
     },
+    "./constants.stylex": "./packages/foundations/src/constants.stylex.ts",
     "./tokens.stylex": "./packages/foundations/src/tokens.stylex.ts",
     "./styles.css": "./styles.css"
   },

package/packages/foundations/src/constants.stylex.ts

@@ -0,0 +1,91 @@
+import * as stylex from '@stylexjs/stylex';
+
+export const darkColors = stylex.defineConsts({
+  canvas: '#191919',
+  surface: '#101010',
+  ink: '#f2f2f2',
+  inkHover: '#d6d6d6',
+  inverse: '#0a0a0a',
+  muted: '#b0b0b0',
+  faint: '#777777',
+  line: '#303030',
+  focus: '#79b3ff',
+  accent: '#8ed3b3',
+  accentSoft: '#152b22',
+  warning: '#edc479',
+  warningSoft: '#302511',
+  danger: '#f59696',
+  dangerHover: '#ffc3c3',
+  dangerSoft: '#321c1c',
+  overlay: '#00000099',
+});
+
+export const darkChartColors = stylex.defineConsts({
+  series1: '#86a9d3',
+  series2: '#83b69f',
+  series3: '#b49bce',
+  series4: '#cfad70',
+  series5: '#80bbc0',
+  series6: '#d39aad',
+  negative: '#e0929b',
+  positive: '#80add0',
+  missing: '#363636',
+});
+
+export const darkAvatarColors = stylex.defineConsts({
+  identity1: '#f07d75',
+  identity2: '#f09a75',
+  identity3: '#f07598',
+  identity4: '#f075bb',
+  identity5: '#f075e6',
+  identity6: '#d375f0',
+  identity7: '#b375f0',
+  identity8: '#9275f0',
+  identity9: '#7575f0',
+  identity10: '#7596f0',
+  identity11: '#75b3f0',
+  identity12: '#75cff0',
+  identity13: '#75e8f0',
+  identity14: '#75f0e3',
+  identity15: '#75f0cd',
+  identity16: '#75f0b5',
+  identity17: '#75f09c',
+  identity18: '#75f080',
+  identity19: '#8cf075',
+  identity20: '#b0f075',
+  identity21: '#d7f075',
+  identity22: '#f0e175',
+  identity23: '#f0c375',
+  identity24: '#f0a875',
+});
+
+export const darkSyntaxColors = stylex.defineConsts({
+  keyword: '#c4a1e5',
+  string: '#8ed3b3',
+  comment: '#a3a3a3',
+  number: '#edc479',
+  type: '#84bce3',
+});
+
+export const loading = stylex.defineConsts({ delaySeconds: 2, revealMs: 80, placeholderMs: 120 });
+
+export const darkShadows = stylex.defineConsts({ popup: '0 4px 16px #00000066' });
+
+export const layers = stylex.defineConsts({
+  sticky: '1',
+  backdrop: '20',
+  dialog: '21',
+  popup: '30',
+  tooltip: '40',
+  skipLink: '50',
+});
+
+export const tableGeometry = stylex.defineConsts({ rowHeight: 48, headerHeight: 36 });
+
+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/packages/foundations/src/tokens.stylex.ts

@@ -20,26 +20,6 @@ export const colors = stylex.defineVars({
   overlay: '#00000066',
 });
 
-export const darkColors = stylex.defineConsts({
-  canvas: '#191919',
-  surface: '#101010',
-  ink: '#f2f2f2',
-  inkHover: '#d6d6d6',
-  inverse: '#0a0a0a',
-  muted: '#b0b0b0',
-  faint: '#777777',
-  line: '#303030',
-  focus: '#79b3ff',
-  accent: '#8ed3b3',
-  accentSoft: '#152b22',
-  warning: '#edc479',
-  warningSoft: '#302511',
-  danger: '#f59696',
-  dangerHover: '#ffc3c3',
-  dangerSoft: '#321c1c',
-  overlay: '#00000099',
-});
-
 export const chartColors = stylex.defineVars({
   series1: '#5178a8',
   series2: '#568b76',
@@ -52,18 +32,6 @@ export const chartColors = stylex.defineVars({
   missing: '#e7e7e7',
 });
 
-export const darkChartColors = stylex.defineConsts({
-  series1: '#86a9d3',
-  series2: '#83b69f',
-  series3: '#b49bce',
-  series4: '#cfad70',
-  series5: '#80bbc0',
-  series6: '#d39aad',
-  negative: '#e0929b',
-  positive: '#80add0',
-  missing: '#363636',
-});
-
 export const avatarColors = stylex.defineVars({
   identity1: '#e3291c',
   identity2: '#e1571c',
@@ -91,33 +59,6 @@ export const avatarColors = stylex.defineVars({
   identity24: '#d1661a',
 });
 
-export const darkAvatarColors = stylex.defineConsts({
-  identity1: '#f07d75',
-  identity2: '#f09a75',
-  identity3: '#f07598',
-  identity4: '#f075bb',
-  identity5: '#f075e6',
-  identity6: '#d375f0',
-  identity7: '#b375f0',
-  identity8: '#9275f0',
-  identity9: '#7575f0',
-  identity10: '#7596f0',
-  identity11: '#75b3f0',
-  identity12: '#75cff0',
-  identity13: '#75e8f0',
-  identity14: '#75f0e3',
-  identity15: '#75f0cd',
-  identity16: '#75f0b5',
-  identity17: '#75f09c',
-  identity18: '#75f080',
-  identity19: '#8cf075',
-  identity20: '#b0f075',
-  identity21: '#d7f075',
-  identity22: '#f0e175',
-  identity23: '#f0c375',
-  identity24: '#f0a875',
-});
-
 export const syntaxColors = stylex.defineVars({
   keyword: '#785ba1',
   string: '#21684f',
@@ -126,14 +67,6 @@ export const syntaxColors = stylex.defineVars({
   type: '#1c628f',
 });
 
-export const darkSyntaxColors = stylex.defineConsts({
-  keyword: '#c4a1e5',
-  string: '#8ed3b3',
-  comment: '#a3a3a3',
-  number: '#edc479',
-  type: '#84bce3',
-});
-
 export const spacing = stylex.defineVars({
   xxs: '2px',
   xs: '4px',
@@ -191,24 +124,3 @@ export const motion = stylex.defineVars({
 });
 
 export const shadows = stylex.defineVars({ popup: '0 4px 16px #00000014', selection: 'inset 2px 0 currentColor' });
-
-export const darkShadows = stylex.defineConsts({ popup: '0 4px 16px #00000066' });
-
-export const layers = stylex.defineConsts({
-  sticky: '1',
-  backdrop: '20',
-  dialog: '21',
-  popup: '30',
-  tooltip: '40',
-  skipLink: '50',
-});
-
-export const tableGeometry = stylex.defineConsts({ rowHeight: 48, headerHeight: 36 });
-
-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/dist/packages/collections/src/table.d.ts

@@ -1,17 +0,0 @@
-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/packages/feedback/src/loading.d.ts

@@ -1,7 +0,0 @@
-import type { ReactNode } from 'react';
-type LoadingProps = {
-    readonly label: string;
-    readonly shape?: 'rows' | 'detail';
-};
-export declare function Loading({ label, shape }: LoadingProps): ReactNode;
-export {};

package/dist/pierre-theme-CBAncKdH.js

@@ -1,126 +0,0 @@
-import { colors as e, conditions as t, controls as n, spacing as r, syntaxColors as i, typography as a } from "./tokens.js";
-// packages/content/src/pierre-theme.ts
-var o = {
-	name: "Elements",
-	appearance: "light",
-	cssVariables: {
-		prefix: "--elements-syntax-",
-		defaults: {
-			foreground: e.ink,
-			background: e.surface,
-			keyword: i.keyword,
-			string: i.string,
-			comment: i.comment,
-			number: i.number,
-			type: i.type,
-			punctuation: e.muted
-		}
-	},
-	style: {
-		"editor.background": "background",
-		"editor.foreground": "foreground",
-		syntax: {
-			keyword: {
-				color: "keyword",
-				font_weight: 600
-			},
-			string: "string",
-			comment: "comment",
-			number: "number",
-			type: "type",
-			function: "foreground",
-			operator: "punctuation",
-			punctuation: "punctuation"
-		}
-	}
-}, s = `
-:host {
-  color-scheme: inherit;
-  --diffs-font-family: ${a.monoFamily};
-  --diffs-header-font-family: ${a.fontFamily};
-  --diffs-font-size: ${a.captionSize};
-  --diffs-line-height: ${a.bodyLineHeight};
-  --diffs-gap-inline: ${r.sm};
-  --diffs-gap-block: ${r.sm};
-  --diffs-bg: ${e.surface};
-  --diffs-fg: ${e.ink};
-  --diffs-fg-number: ${e.muted};
-  --diffs-bg-addition: ${e.accentSoft};
-  --diffs-bg-deletion: ${e.dangerSoft};
-  --diffs-addition-color-override: ${e.accent};
-  --diffs-deletion-color-override: ${e.danger};
-  --diffs-modified-color-override: ${e.focus};
-  --diffs-bg-context-override: ${e.surface};
-  --diffs-bg-context-gutter-override: ${e.canvas};
-  --diffs-bg-separator-override: ${e.canvas};
-  --diffs-selection-background: ${e.accentSoft};
-  font-family: ${a.monoFamily};
-  font-size: ${a.captionSize};
-  color: ${e.ink};
-  background: ${e.surface};
-}
-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.height};
-  padding-block: ${r.sm};
-  padding-inline: ${r.md};
-  border-bottom: 1px solid ${e.line};
-  font-size: ${a.captionSize};
-  line-height: ${a.captionLineHeight};
-  font-weight: ${a.mediumWeight};
-  flex-wrap: wrap;
-}
-[data-header-content] { flex: 1 1 12ch; }
-`, c = `
-:host {
-  color-scheme: inherit;
-  color: ${e.ink};
-  background: ${e.surface};
-  font-family: ${a.fontFamily};
-  font-size: ${a.bodySize};
-  --trees-font-family-override: ${a.fontFamily};
-  --trees-font-size-override: ${a.bodySize};
-  --trees-font-weight-regular-override: ${a.regularWeight};
-  --trees-font-weight-semibold-override: ${a.strongWeight};
-  --trees-search-font-weight-override: ${a.strongWeight};
-  --trees-padding-inline-override: ${r.md};
-  --trees-item-padding-x-override: ${r.sm};
-  --trees-item-row-gap-override: ${n.gap};
-  --trees-bg-override: ${e.surface};
-  --trees-fg-override: ${e.ink};
-  --trees-fg-muted-override: ${e.muted};
-  --trees-bg-muted-override: ${e.canvas};
-  --trees-input-bg-override: ${e.surface};
-  --trees-border-color-override: ${e.line};
-  --trees-border-radius-override: 0px;
-  --trees-accent-override: ${e.focus};
-  --trees-focus-ring-color-override: ${e.focus};
-  --trees-focus-ring-width-override: ${n.focusWidth};
-  --trees-focus-ring-offset-override: -2px;
-  --trees-selected-fg-override: ${e.ink};
-  --trees-selected-bg-override: ${e.canvas};
-  --trees-selected-focused-border-color-override: ${e.focus};
-  --trees-status-added-override: ${e.accent};
-  --trees-status-deleted-override: ${e.danger};
-  --trees-status-ignored-override: ${e.muted};
-  --trees-status-modified-override: ${e.warning};
-  --trees-status-renamed-override: ${e.warning};
-  --trees-status-untracked-override: ${e.accent};
-}
-[data-type="item"]:hover:not([data-item-selected="true"]):not([data-item-context-hover="true"]) {
-  background-color: ${e.surface};
-  --truncate-marker-background-overlay-color: transparent;
-}
-${t.hoverPointer} {
-  [data-type="item"]:hover:not([data-item-selected="true"]):not([data-item-context-hover="true"]) {
-    background-color: ${e.canvas};
-    --truncate-marker-background-overlay-color: ${e.canvas};
-  }
-}
-[data-type="item"]:active:not([data-item-selected="true"]):not([data-item-context-hover="true"]) {
-  background-color: ${e.canvas};
-  --truncate-marker-background-overlay-color: ${e.canvas};
-}
-`;
-export { s as n, c as r, o as t };