@askrjs/themes 0.0.1

package/package.json

@@ -0,0 +1,122 @@
+{
+  "name": "@askrjs/themes",
+  "version": "0.0.1",
+  "description": "Default theme tokens, styles, and themed layout wrappers for askr-ui.",
+  "keywords": [
+    "askr",
+    "css",
+    "design-tokens",
+    "themes"
+  ],
+  "homepage": "https://github.com/askrjs/askr-themes#readme",
+  "bugs": {
+    "url": "https://github.com/askrjs/askr-themes/issues"
+  },
+  "license": "Apache-2.0",
+  "author": {
+    "name": "askrjs",
+    "url": "https://github.com/askrjs"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/askrjs/askr-themes.git"
+  },
+  "files": [
+    "dist",
+    "src",
+    "templates",
+    "scripts/new-theme.js",
+    "THEMING.md",
+    "LICENSE"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": "./src/index.css",
+    "./default": "./src/themes/default/index.css",
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/components/index.js"
+    },
+    "./default/card.css": "./src/themes/default/styles/display/card.css",
+    "./default/tokens.css": "./src/themes/default/tokens.css",
+    "./default/accordion.css": "./src/themes/default/styles/disclosure/accordion.css",
+    "./default/alert-dialog.css": "./src/themes/default/styles/overlays/alert-dialog.css",
+    "./default/avatar.css": "./src/themes/default/styles/display/avatar.css",
+    "./default/badge.css": "./src/themes/default/styles/display/badge.css",
+    "./default/breadcrumb.css": "./src/themes/default/styles/navigation/breadcrumb.css",
+    "./default/button.css": "./src/themes/default/styles/actions/button.css",
+    "./default/checkbox.css": "./src/themes/default/styles/forms/checkbox.css",
+    "./default/collapsible.css": "./src/themes/default/styles/disclosure/collapsible.css",
+    "./default/coverage.css": "./src/themes/default/styles/display/coverage.css",
+    "./default/table.css": "./src/themes/default/styles/display/table.css",
+    "./default/dashboard-layout.css": "./src/themes/default/styles/layout/dashboard-layout.css",
+    "./default/dialog.css": "./src/themes/default/styles/overlays/dialog.css",
+    "./default/docs-layout.css": "./src/themes/default/styles/layout/docs-layout.css",
+    "./default/dropdown-menu.css": "./src/themes/default/styles/overlays/dropdown-menu.css",
+    "./default/input.css": "./src/themes/default/styles/forms/input.css",
+    "./default/label.css": "./src/themes/default/styles/forms/label.css",
+    "./default/menu.css": "./src/themes/default/styles/navigation/menu.css",
+    "./default/menubar.css": "./src/themes/default/styles/navigation/menubar.css",
+    "./default/navbar.css": "./src/themes/default/styles/shell/navbar.css",
+    "./default/navigation-menu.css": "./src/themes/default/styles/navigation/navigation-menu.css",
+    "./default/patterns.css": "./src/themes/default/styles/layout/patterns.css",
+    "./default/popover.css": "./src/themes/default/styles/overlays/popover.css",
+    "./default/progress.css": "./src/themes/default/styles/display/progress.css",
+    "./default/progress-circle.css": "./src/themes/default/styles/display/progress-circle.css",
+    "./default/radio-group.css": "./src/themes/default/styles/forms/radio-group.css",
+    "./default/responsive-layout.css": "./src/themes/default/styles/layout/responsive-layout.css",
+    "./default/select.css": "./src/themes/default/styles/forms/select.css",
+    "./default/separator.css": "./src/themes/default/styles/display/separator.css",
+    "./default/sidebar.css": "./src/themes/default/styles/layout/sidebar.css",
+    "./default/skeleton.css": "./src/themes/default/styles/display/skeleton.css",
+    "./default/slider.css": "./src/themes/default/styles/forms/slider.css",
+    "./default/spinner.css": "./src/themes/default/styles/display/spinner.css",
+    "./default/switch.css": "./src/themes/default/styles/forms/switch.css",
+    "./default/tabs.css": "./src/themes/default/styles/navigation/tabs.css",
+    "./default/textarea.css": "./src/themes/default/styles/forms/textarea.css",
+    "./default/toast.css": "./src/themes/default/styles/overlays/toast.css",
+    "./default/toggle.css": "./src/themes/default/styles/actions/toggle.css",
+    "./default/toggle-group.css": "./src/themes/default/styles/actions/toggle-group.css",
+    "./default/tooltip.css": "./src/themes/default/styles/overlays/tooltip.css",
+    "./templates/*": "./templates/*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "new:theme": "node ./scripts/new-theme.js",
+    "verify:token-contract": "node ./scripts/verify-token-contract.js",
+    "verify:responsive": "node ./scripts/verify-responsive-theme.js",
+    "verify:slots": "node ./scripts/verify-slot-coverage.js",
+    "test": "npm run test:unit && npm run test:jsdom && npm run test:browser",
+    "test:unit": "vp test run -c vitest.config.ts",
+    "test:jsdom": "npm run test:unit",
+    "test:browser": "vp test run -c vitest.browser.config.ts",
+    "fmt": "vp fmt .",
+    "lint": "vp lint .",
+    "build:types": "tsc -p tsconfig.pack.json --emitDeclarationOnly --outDir dist",
+    "build": "vp pack && npm run build:types && npm run verify:token-contract && npm run verify:responsive && npm run verify:slots",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@askrjs/askr": ">=0.0.1 <0.1.0",
+    "@askrjs/ui": ">=0.0.1 <0.1.0",
+    "@askrjs/vite": ">=0.0.1 <0.1.0",
+    "@tsdown/css": "0.21.10",
+    "@types/node": "^25.6.0",
+    "jsdom": "^29.1.1",
+    "playwright": "^1.59.1",
+    "typescript": "^6.0.3",
+    "vite-plus": "^0.1.20"
+  },
+  "peerDependencies": {
+    "@askrjs/askr": ">=0.0.1 <0.1.0",
+    "@askrjs/ui": ">=0.0.1 <0.1.0"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/scripts/new-theme.js

@@ -0,0 +1,87 @@
+import { cp, mkdir, readFile, readdir, stat, writeFile } from "node:fs/promises";
+import path from "node:path";
+
+const THEME_NAME_RE = /^[a-z0-9-]+$/;
+
+function printUsage() {
+  console.log("Usage: npm run new:theme -- <theme-name>");
+  console.log("Example: npm run new:theme -- ocean");
+}
+
+async function pathExists(targetPath) {
+  try {
+    await stat(targetPath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function walkFiles(dirPath) {
+  const entries = await readdir(dirPath, { withFileTypes: true });
+  const files = [];
+
+  for (const entry of entries) {
+    const entryPath = path.join(dirPath, entry.name);
+    if (entry.isDirectory()) {
+      files.push(...(await walkFiles(entryPath)));
+    } else {
+      files.push(entryPath);
+    }
+  }
+
+  return files;
+}
+
+async function replacePlaceholdersInThemeFiles(dirPath, themeName) {
+  const files = await walkFiles(dirPath);
+
+  for (const filePath of files) {
+    if (!/\.(css|md|json|ts|tsx|js)$/.test(filePath)) continue;
+    const content = await readFile(filePath, "utf8");
+    const updated = content.replaceAll("__THEME_NAME__", themeName);
+    if (updated !== content) {
+      await writeFile(filePath, updated, "utf8");
+    }
+  }
+}
+
+async function main() {
+  const themeName = process.argv[2]?.trim();
+
+  if (!themeName) {
+    printUsage();
+    process.exit(1);
+  }
+
+  if (!THEME_NAME_RE.test(themeName)) {
+    console.error("Theme name must match /^[a-z0-9-]+$/.");
+    process.exit(1);
+  }
+
+  const root = process.cwd();
+  const templateDir = path.join(root, "templates", "theme");
+  const outputDir = path.join(root, "src", "themes", themeName);
+
+  if (!(await pathExists(templateDir))) {
+    console.error("Missing templates/theme directory.");
+    process.exit(1);
+  }
+
+  if (await pathExists(outputDir)) {
+    console.error(`Theme already exists: ${themeName}`);
+    process.exit(1);
+  }
+
+  await mkdir(path.dirname(outputDir), { recursive: true });
+  await cp(templateDir, outputDir, { recursive: true });
+  await replacePlaceholdersInThemeFiles(outputDir, themeName);
+
+  console.log(`Created theme at src/themes/${themeName}`);
+  console.log("Next step: add exports in package.json for your new theme entrypoints.");
+}
+
+main().catch((error) => {
+  console.error(error instanceof Error ? error.message : String(error));
+  process.exit(1);
+});

package/src/askr-compat.d.ts

@@ -0,0 +1,110 @@
+// Temporary local type shim for sibling `file:` dependencies.
+// Remove this once `../askr` and `../askr-ui` reliably emit the dist .d.ts
+// files referenced by this package's tsconfig path mappings.
+
+declare module "@askrjs/askr/foundations" {
+  export type Ref<T> = { current: T | null } | ((value: T | null) => void) | null | undefined;
+
+  export type Props = Record<string, unknown> & {
+    children?: unknown;
+    ref?: unknown;
+  };
+
+  export interface JSXElement {
+    $$typeof: symbol;
+    type: string | ((props: Props) => unknown) | symbol;
+    props: Props;
+    key?: string | number | null;
+  }
+
+  export interface SlotProps extends Props {
+    asChild?: boolean;
+  }
+
+  export function Slot(props: SlotProps): JSXElement;
+
+  export function mergeProps<
+    TProps extends Record<string, unknown>,
+    TOverrides extends Record<string, unknown>,
+  >(props: TProps, overrides: TOverrides): TProps & TOverrides;
+
+  export interface PresenceProps extends Props {
+    present?: boolean;
+  }
+
+  export function Presence(props: PresenceProps): JSXElement | null;
+
+  export function composeRefs<T>(...refs: Array<Ref<T>>): Ref<T>;
+}
+
+declare module "@askrjs/askr" {
+  import type { JSXElement } from "@askrjs/askr/foundations";
+
+  export interface State<T> {
+    (): T;
+    set(value: T): void;
+    set(updater: (prev: T) => T): void;
+    [Symbol.iterator](): Iterator<State<T> | State<T>["set"]>;
+  }
+
+  export interface Context<T> {
+    readonly key: symbol;
+    readonly defaultValue: T;
+    readonly Scope: (props: { value: unknown; children?: unknown }) => JSXElement;
+  }
+
+  type ForEachSource<T> = T[] | (() => T[]);
+
+  type ForBaseProps<T> = {
+    each: ForEachSource<T>;
+    fallback?: unknown;
+    children: (item: T, index: () => number) => unknown;
+  };
+
+  type KeyedForProps<T, K extends string | number> = ForBaseProps<T> & {
+    by: (item: T, index: number) => K;
+    byIndex?: never;
+  };
+
+  type IndexedForProps<T> = ForBaseProps<T> & {
+    by?: never;
+    byIndex: true;
+  };
+
+  export type ForProps<T, K extends string | number = string | number> =
+    | KeyedForProps<T, K>
+    | IndexedForProps<T>;
+
+  export function state<T>(initialValue: T): State<T>;
+  export function defineContext<T>(defaultValue: T): Context<T>;
+  export function readContext<T>(context: Context<T>): T;
+  export const For: <T, K extends string | number = string | number>(
+    props: ForProps<T, K>,
+  ) => JSXElement;
+}
+
+declare module "@askrjs/askr/jsx-runtime" {
+  import type { JSXElement } from "@askrjs/askr/foundations";
+
+  export const Fragment: symbol;
+  export function jsx(
+    type: unknown,
+    props: Record<string, unknown>,
+    key?: string | number,
+  ): JSXElement;
+  export const jsxs: typeof jsx;
+}
+
+declare module "@askrjs/askr/jsx-dev-runtime" {
+  import type { JSXElement } from "@askrjs/askr/foundations";
+
+  export const Fragment: symbol;
+  export function jsxDEV(
+    type: unknown,
+    props: Record<string, unknown>,
+    key?: string | number,
+    isStaticChildren?: boolean,
+    source?: unknown,
+    self?: unknown,
+  ): JSXElement;
+}

package/src/components/_internal/box-layout.ts

@@ -0,0 +1,156 @@
+import { mergeLayoutStyles, resolveSpaceValue, setResponsiveStyleVar } from "./layout";
+import type { BoxLayoutOwnProps } from "../box/box.types";
+
+const SPACE_PROP_KEYS = new Set([
+  "m",
+  "mx",
+  "my",
+  "mt",
+  "mr",
+  "mb",
+  "ml",
+  "p",
+  "px",
+  "py",
+  "pt",
+  "pr",
+  "pb",
+  "pl",
+  "inset",
+  "top",
+  "right",
+  "bottom",
+  "left",
+]);
+
+const BOX_PROP_KEYS = new Set<keyof BoxLayoutOwnProps>([
+  "display",
+  "m",
+  "mx",
+  "my",
+  "mt",
+  "mr",
+  "mb",
+  "ml",
+  "p",
+  "px",
+  "py",
+  "pt",
+  "pr",
+  "pb",
+  "pl",
+  "width",
+  "minWidth",
+  "maxWidth",
+  "height",
+  "minHeight",
+  "maxHeight",
+  "position",
+  "inset",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "overflow",
+  "overflowX",
+  "overflowY",
+  "flexBasis",
+  "flexGrow",
+  "flexShrink",
+  "gridArea",
+  "gridColumn",
+  "gridColumnStart",
+  "gridColumnEnd",
+  "gridRow",
+  "gridRowStart",
+  "gridRowEnd",
+]);
+
+function variableNameForProp(prop: keyof BoxLayoutOwnProps): string {
+  switch (prop) {
+    case "overflowX":
+      return "overflow-x";
+    case "overflowY":
+      return "overflow-y";
+    case "minWidth":
+      return "min-width";
+    case "maxWidth":
+      return "max-width";
+    case "minHeight":
+      return "min-height";
+    case "maxHeight":
+      return "max-height";
+    case "flexBasis":
+      return "flex-basis";
+    case "flexGrow":
+      return "flex-grow";
+    case "flexShrink":
+      return "flex-shrink";
+    case "gridArea":
+      return "grid-area";
+    case "gridColumn":
+      return "grid-column";
+    case "gridColumnStart":
+      return "grid-column-start";
+    case "gridColumnEnd":
+      return "grid-column-end";
+    case "gridRow":
+      return "grid-row";
+    case "gridRowStart":
+      return "grid-row-start";
+    case "gridRowEnd":
+      return "grid-row-end";
+    default:
+      return prop;
+  }
+}
+
+export function splitBoxLayoutProps<T extends Record<string, unknown>>(
+  props: T,
+): {
+  boxProps: Partial<BoxLayoutOwnProps>;
+  rest: Omit<T, keyof BoxLayoutOwnProps>;
+} {
+  const boxProps: Partial<BoxLayoutOwnProps> = {};
+  const rest: Record<string, unknown> = {};
+
+  for (const [key, value] of Object.entries(props)) {
+    if (BOX_PROP_KEYS.has(key as keyof BoxLayoutOwnProps)) {
+      (boxProps as Record<string, unknown>)[key] = value;
+    } else {
+      rest[key] = value;
+    }
+  }
+
+  return { boxProps, rest: rest as Omit<T, keyof BoxLayoutOwnProps> };
+}
+
+export function applyBoxLayoutStyles(
+  styles: Record<string, string | number>,
+  boxProps: Partial<BoxLayoutOwnProps>,
+) {
+  for (const key of BOX_PROP_KEYS) {
+    const value = boxProps[key];
+    if (value === undefined) continue;
+
+    const variable = variableNameForProp(key);
+    if (SPACE_PROP_KEYS.has(key)) {
+      setResponsiveStyleVar(styles, variable, value as string | number, resolveSpaceValue);
+      continue;
+    }
+
+    setResponsiveStyleVar(
+      styles,
+      variable,
+      value as string | number,
+      (input) => input as string | number,
+    );
+  }
+}
+
+export function withBoxLayoutStyle(
+  styles: Record<string, string | number>,
+  userStyle: unknown,
+): string | undefined {
+  return mergeLayoutStyles(styles, userStyle);
+}

package/src/components/_internal/classes.ts

@@ -0,0 +1,5 @@
+export function classes(...values: Array<unknown>): string | undefined {
+  const value = values.filter((item) => typeof item === "string" && item.trim()).join(" ");
+
+  return value || undefined;
+}

package/src/components/_internal/jsx.ts

@@ -0,0 +1,141 @@
+import type { JSXElement } from "@askrjs/askr/foundations";
+
+export function isJsxElement(value: unknown): value is JSXElement {
+  return typeof value === "object" && value !== null && "$$typeof" in value && "props" in value;
+}
+
+export function hasJsxIntrinsicType(value: unknown, expectedType: string): value is JSXElement {
+  return isJsxElement(value) && value.type === expectedType;
+}
+
+export function toChildArray(children: unknown): unknown[] {
+  if (Array.isArray(children)) {
+    return children;
+  }
+
+  return children === undefined || children === null ? [] : [children];
+}
+
+export function mapJsxTree(children: unknown, mapper: (element: JSXElement) => unknown): unknown {
+  if (Array.isArray(children)) {
+    return children.map((child) => mapJsxTree(child, mapper));
+  }
+
+  if (!isJsxElement(children)) {
+    return children;
+  }
+
+  const mapped = mapper(children);
+
+  if (!isJsxElement(mapped)) {
+    return mapped;
+  }
+
+  const currentChildren = mapped.props?.children;
+  const nextChildren = mapJsxTree(currentChildren, mapper);
+
+  if (nextChildren === currentChildren) {
+    return mapped;
+  }
+
+  return {
+    ...mapped,
+    props: {
+      ...mapped.props,
+      children: nextChildren,
+    },
+  };
+}
+
+export function collectJsxElements(
+  children: unknown,
+  predicate?: (element: JSXElement) => boolean,
+): JSXElement[] {
+  const result: JSXElement[] = [];
+
+  const visit = (value: unknown) => {
+    if (Array.isArray(value)) {
+      value.forEach(visit);
+      return;
+    }
+
+    if (!isJsxElement(value)) {
+      return;
+    }
+
+    if (!predicate || predicate(value)) {
+      result.push(value);
+    }
+
+    visit(value.props?.children);
+  };
+
+  visit(children);
+
+  return result;
+}
+
+export function extractTextContent(value: unknown): string {
+  if (Array.isArray(value)) {
+    return value.map((entry) => extractTextContent(entry)).join("");
+  }
+
+  if (
+    value === undefined ||
+    value === null ||
+    typeof value === "boolean" ||
+    typeof value === "function"
+  ) {
+    return "";
+  }
+
+  if (typeof value === "string" || typeof value === "number") {
+    return String(value);
+  }
+
+  if (isJsxElement(value)) {
+    return extractTextContent(value.props?.children);
+  }
+
+  return "";
+}
+
+export function serializeForId(value: unknown): string {
+  if (Array.isArray(value)) {
+    return value.map((item) => serializeForId(item)).join("|");
+  }
+
+  if (value === undefined || value === null || typeof value === "boolean") {
+    return "";
+  }
+
+  if (typeof value === "string" || typeof value === "number") {
+    return String(value);
+  }
+
+  if (isJsxElement(value)) {
+    const typeName =
+      typeof value.type === "string"
+        ? value.type
+        : typeof value.type === "function"
+          ? value.type.name || "component"
+          : "component";
+    const propEntries = Object.entries(value.props ?? {})
+      .filter(
+        ([key, entryValue]) =>
+          key !== "children" &&
+          key !== "ref" &&
+          !key.startsWith("on") &&
+          (typeof entryValue === "string" ||
+            typeof entryValue === "number" ||
+            typeof entryValue === "boolean"),
+      )
+      .sort(([left], [right]) => left.localeCompare(right))
+      .map(([key, entryValue]) => `${key}:${String(entryValue)}`)
+      .join(",");
+
+    return `${typeName}[${propEntries}](${serializeForId(value.props?.children)})`;
+  }
+
+  return typeof value;
+}