@yewdiel21/motion-kit 0.0.0-stage → 0.9.0

package/dist/theme/generate.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/theme/generate.ts"],"sourcesContent":["import {\n  Hct,\n  MaterialDynamicColors,\n  SchemeContent,\n  SchemeExpressive,\n  SchemeFidelity,\n  SchemeMonochrome,\n  SchemeNeutral,\n  SchemeTonalSpot,\n  SchemeVibrant,\n  argbFromHex,\n  hexFromArgb,\n} from '@material/material-color-utilities';\nimport { ROLES, type Role } from './presets';\nimport { themeCss, type Palette, type ThemePalettes } from './css-format';\nimport { registerTheme, setTheme } from './theme';\n\n/*\n * Material 3 palettes from any colour, in the same 37 roles as Stepbro's themes.\n * Needs the optional peer @material/material-color-utilities ^0.3.0\n * (0.4.0 publishes ESM imports without extensions that Node cannot load).\n */\n\nexport type ThemeVariant = 'tonal-spot' | 'vibrant' | 'expressive' | 'neutral' | 'content' | 'fidelity' | 'monochrome';\n\nexport interface GenerateOptions {\n  variant?: ThemeVariant;\n  /** -1 (reduced) … 0 (standard) … 1 (high). */\n  contrast?: number;\n}\n\nconst SCHEMES = {\n  'tonal-spot': SchemeTonalSpot,\n  vibrant: SchemeVibrant,\n  expressive: SchemeExpressive,\n  neutral: SchemeNeutral,\n  content: SchemeContent,\n  fidelity: SchemeFidelity,\n  monochrome: SchemeMonochrome,\n} as const;\n\nconst camel = (role: string) => role.replace(/-([a-z])/g, (_, c: string) => c.toUpperCase());\ntype Dynamic = { getArgb(scheme: unknown): number };\n\nexport function generateTheme(seed: string, { variant = 'tonal-spot', contrast = 0 }: GenerateOptions = {}): ThemePalettes {\n  if (!/^#?[0-9a-f]{6}$/i.test(seed)) throw new Error(`generateTheme: seed must be a #rrggbb colour (got \"${seed}\")`);\n  const Scheme = SCHEMES[variant];\n  if (!Scheme) throw new Error(`generateTheme: unknown variant \"${variant}\"`);\n  const source = Hct.fromInt(argbFromHex(seed.startsWith('#') ? seed : `#${seed}`));\n  const palette = (dark: boolean): Palette => {\n    const scheme = new Scheme(source, dark, contrast);\n    const colors = MaterialDynamicColors as unknown as Record<string, Dynamic>;\n    return Object.fromEntries(ROLES.map((role) => [role, hexFromArgb(colors[camel(role)].getArgb(scheme))])) as Record<Role, string>;\n  };\n  return { light: palette(false), dark: palette(true) };\n}\n\nexport { themeCss };\n\n/** Generate a theme from `seed`, inject it as a <style>, register and select it. */\nexport function applyTheme(seed: string, { id = 'custom', ...options }: GenerateOptions & { id?: string } = {}) {\n  const css = themeCss(id, generateTheme(seed, options));\n  let style = document.querySelector<HTMLStyleElement>(`style[data-mk-theme-style=\"${id}\"]`);\n  if (!style) {\n    style = document.createElement('style');\n    style.dataset.mkThemeStyle = id;\n    document.head.append(style);\n  }\n  style.textContent = css;\n  registerTheme(id);\n  return setTheme(id);\n}\n"],"mappings":";;;;;;;;;;;AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAmBP,IAAM,UAAU;AAAA,EACd,cAAc;AAAA,EACd,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,SAAS;AAAA,EACT,UAAU;AAAA,EACV,YAAY;AACd;AAEA,IAAM,QAAQ,CAAC,SAAiB,KAAK,QAAQ,aAAa,CAAC,GAAG,MAAc,EAAE,YAAY,CAAC;AAGpF,SAAS,cAAc,MAAc,EAAE,UAAU,cAAc,WAAW,EAAE,IAAqB,CAAC,GAAkB;AACzH,MAAI,CAAC,mBAAmB,KAAK,IAAI,EAAG,OAAM,IAAI,MAAM,sDAAsD,IAAI,IAAI;AAClH,QAAM,SAAS,QAAQ,OAAO;AAC9B,MAAI,CAAC,OAAQ,OAAM,IAAI,MAAM,mCAAmC,OAAO,GAAG;AAC1E,QAAM,SAAS,IAAI,QAAQ,YAAY,KAAK,WAAW,GAAG,IAAI,OAAO,IAAI,IAAI,EAAE,CAAC;AAChF,QAAM,UAAU,CAAC,SAA2B;AAC1C,UAAM,SAAS,IAAI,OAAO,QAAQ,MAAM,QAAQ;AAChD,UAAM,SAAS;AACf,WAAO,OAAO,YAAY,MAAM,IAAI,CAAC,SAAS,CAAC,MAAM,YAAY,OAAO,MAAM,IAAI,CAAC,EAAE,QAAQ,MAAM,CAAC,CAAC,CAAC,CAAC;AAAA,EACzG;AACA,SAAO,EAAE,OAAO,QAAQ,KAAK,GAAG,MAAM,QAAQ,IAAI,EAAE;AACtD;AAKO,SAAS,WAAW,MAAc,EAAE,KAAK,UAAU,GAAG,QAAQ,IAAuC,CAAC,GAAG;AAC9G,QAAM,MAAM,SAAS,IAAI,cAAc,MAAM,OAAO,CAAC;AACrD,MAAI,QAAQ,SAAS,cAAgC,8BAA8B,EAAE,IAAI;AACzF,MAAI,CAAC,OAAO;AACV,YAAQ,SAAS,cAAc,OAAO;AACtC,UAAM,QAAQ,eAAe;AAC7B,aAAS,KAAK,OAAO,KAAK;AAAA,EAC5B;AACA,QAAM,cAAc;AACpB,gBAAc,EAAE;AAChB,SAAO,SAAS,EAAE;AACpB;","names":[]}

package/dist/theme/index.d.ts

@@ -0,0 +1,17 @@
+import { R as Role } from '../theme-BFMoCzi6.js';
+export { D as DEFAULT_THEME, I as InitThemeOptions, M as MK_THEME_HEAD_SCRIPT, c as ROLES, d as THEMES, e as THEME_EVENT, f as ThemeId, b as ThemeMode, g as ThemePreset, T as ThemeState, h as getTheme, i as initTheme, r as registerTheme, a as setMode, s as setTheme, t as themeHeadScript } from '../theme-BFMoCzi6.js';
+
+type Palette = Record<Role, string>;
+interface ThemePalettes {
+    light: Palette;
+    dark: Palette;
+}
+/**
+ * A theme's stylesheet: light on `[data-mk-theme="<id>"]`, dark when the element
+ * or an ancestor has `data-mk-mode="dark"`, and dark under the system's dark
+ * scheme unless the page forces light. Same format as css/themes/*.css
+ * (scripts/import-themes.mjs keeps a copy of this function; a test checks they agree).
+ */
+declare function themeCss(id: string, { light, dark }: ThemePalettes): string;
+
+export { type Palette, Role, type ThemePalettes, themeCss };

package/dist/theme/index.js

@@ -0,0 +1,32 @@
+import {
+  themeCss
+} from "../chunk-ABNRDDO7.js";
+import {
+  DEFAULT_THEME,
+  MK_THEME_HEAD_SCRIPT,
+  ROLES,
+  THEMES,
+  THEME_EVENT,
+  getTheme,
+  initTheme,
+  registerTheme,
+  setMode,
+  setTheme,
+  themeHeadScript
+} from "../chunk-J27KH2A2.js";
+import "../chunk-TGV27ZWM.js";
+export {
+  DEFAULT_THEME,
+  MK_THEME_HEAD_SCRIPT,
+  ROLES,
+  THEMES,
+  THEME_EVENT,
+  getTheme,
+  initTheme,
+  registerTheme,
+  setMode,
+  setTheme,
+  themeCss,
+  themeHeadScript
+};
+//# sourceMappingURL=index.js.map

package/dist/theme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/theme-BFMoCzi6.d.ts

@@ -0,0 +1,158 @@
+/** The 37 Material 3 colour roles every theme defines (`--md-sys-color-<role>`). */
+declare const ROLES: readonly ["background", "on-background", "surface", "surface-dim", "surface-bright", "surface-container-lowest", "surface-container-low", "surface-container", "surface-container-high", "surface-container-highest", "on-surface", "surface-variant", "on-surface-variant", "inverse-surface", "inverse-on-surface", "outline", "outline-variant", "shadow", "scrim", "surface-tint", "primary", "on-primary", "primary-container", "on-primary-container", "inverse-primary", "secondary", "on-secondary", "secondary-container", "on-secondary-container", "tertiary", "on-tertiary", "tertiary-container", "on-tertiary-container", "error", "on-error", "error-container", "on-error-container"];
+type Role = (typeof ROLES)[number];
+interface ThemePreset {
+    readonly id: string;
+    readonly name: string;
+    /** Hidden from Stepbro's own picker (kept in its code). */
+    readonly hidden: boolean;
+    /** Modes with their own palette. OLED is dark-only and uses Black in light mode. */
+    readonly modes: readonly ('light' | 'dark')[];
+    /** Representative colour (dark surface-tint): swatch and generator seed. */
+    readonly seed: string;
+}
+declare const THEMES: readonly [{
+    readonly id: "black";
+    readonly name: "Black";
+    readonly hidden: true;
+    readonly modes: readonly ["light", "dark"];
+    readonly seed: "#b4c7ed";
+}, {
+    readonly id: "blue";
+    readonly name: "Blue";
+    readonly hidden: false;
+    readonly modes: readonly ["light", "dark"];
+    readonly seed: "#b3c5ff";
+}, {
+    readonly id: "purple";
+    readonly name: "Purple";
+    readonly hidden: false;
+    readonly modes: readonly ["light", "dark"];
+    readonly seed: "#d2bcff";
+}, {
+    readonly id: "neogreen";
+    readonly name: "Neogreen";
+    readonly hidden: false;
+    readonly modes: readonly ["light", "dark"];
+    readonly seed: "#00e563";
+}, {
+    readonly id: "green";
+    readonly name: "Green";
+    readonly hidden: true;
+    readonly modes: readonly ["light", "dark"];
+    readonly seed: "#53e081";
+}, {
+    readonly id: "red";
+    readonly name: "Red";
+    readonly hidden: false;
+    readonly modes: readonly ["light", "dark"];
+    readonly seed: "#ffb4ac";
+}, {
+    readonly id: "orange";
+    readonly name: "Orange";
+    readonly hidden: true;
+    readonly modes: readonly ["light", "dark"];
+    readonly seed: "#ffc988";
+}, {
+    readonly id: "pink";
+    readonly name: "Pink";
+    readonly hidden: false;
+    readonly modes: readonly ["light", "dark"];
+    readonly seed: "#f7acff";
+}, {
+    readonly id: "pastel-pink";
+    readonly name: "Pastel Pink";
+    readonly hidden: false;
+    readonly modes: readonly ["light", "dark"];
+    readonly seed: "#ffcee8";
+}, {
+    readonly id: "brown";
+    readonly name: "Brown";
+    readonly hidden: false;
+    readonly modes: readonly ["light", "dark"];
+    readonly seed: "#ffb783";
+}, {
+    readonly id: "super-blue";
+    readonly name: "Super Blue";
+    readonly hidden: false;
+    readonly modes: readonly ["light", "dark"];
+    readonly seed: "#bcc2ff";
+}, {
+    readonly id: "cold-blue";
+    readonly name: "Cold Blue";
+    readonly hidden: true;
+    readonly modes: readonly ["light", "dark"];
+    readonly seed: "#87ceff";
+}, {
+    readonly id: "modern-1";
+    readonly name: "Modern";
+    readonly hidden: true;
+    readonly modes: readonly ["light", "dark"];
+    readonly seed: "#b3c5ff";
+}, {
+    readonly id: "gray";
+    readonly name: "Gray";
+    readonly hidden: false;
+    readonly modes: readonly ["light", "dark"];
+    readonly seed: "#c6c6c6";
+}, {
+    readonly id: "oled";
+    readonly name: "Oled";
+    readonly hidden: false;
+    readonly modes: readonly ["dark"];
+    readonly seed: "#9fb8e4";
+}, {
+    readonly id: "funny";
+    readonly name: "Funny";
+    readonly hidden: true;
+    readonly modes: readonly ["light", "dark"];
+    readonly seed: "#22d3ee";
+}, {
+    readonly id: "new";
+    readonly name: "New";
+    readonly hidden: true;
+    readonly modes: readonly ["light", "dark"];
+    readonly seed: "#c4a68d";
+}, {
+    readonly id: "new2";
+    readonly name: "New 2";
+    readonly hidden: true;
+    readonly modes: readonly ["light", "dark"];
+    readonly seed: "#a3ffb7";
+}, {
+    readonly id: "black-green";
+    readonly name: "Black Green";
+    readonly hidden: true;
+    readonly modes: readonly ["light", "dark"];
+    readonly seed: "#a0d499";
+}];
+type ThemeId = (typeof THEMES)[number]['id'];
+declare const DEFAULT_THEME: ThemeId;
+
+type ThemeMode = 'light' | 'dark' | 'system';
+interface ThemeState {
+    id: string;
+    mode: ThemeMode;
+    /** The mode actually shown (system resolved through prefers-color-scheme). */
+    resolved: 'light' | 'dark';
+}
+interface InitThemeOptions {
+    /** Theme when nothing is stored or set on the root. Default: neogreen. */
+    default?: ThemeId | (string & {});
+    mode?: ThemeMode;
+    storageKey?: string;
+    root?: HTMLElement;
+}
+declare const THEME_EVENT = "mk:theme";
+/** Accept an extra theme id in setTheme (generated or project themes). */
+declare function registerTheme(id: string): void;
+declare function getTheme(): ThemeState;
+/** Apply the stored (or default) theme and mode. Call once on startup. */
+declare function initTheme(options?: InitThemeOptions): ThemeState;
+declare function setTheme(id: ThemeId | (string & {})): ThemeState;
+declare function setMode(mode: ThemeMode): ThemeState;
+/** Inline script for <head>: applies the stored choice before the first paint (no flash). */
+declare function themeHeadScript({ storageKey, default: fallback, mode }?: Omit<InitThemeOptions, 'root'>): string;
+declare const MK_THEME_HEAD_SCRIPT: string;
+
+export { DEFAULT_THEME as D, type InitThemeOptions as I, MK_THEME_HEAD_SCRIPT as M, type Role as R, type ThemeState as T, setMode as a, type ThemeMode as b, ROLES as c, THEMES as d, THEME_EVENT as e, type ThemeId as f, type ThemePreset as g, getTheme as h, initTheme as i, registerTheme as r, setTheme as s, themeHeadScript as t };

package/dist/types-BkS_raL8.d.ts

@@ -0,0 +1,7 @@
+/** Every recipe returns at least this. `destroy()` is idempotent and leaves the DOM as it found it. */
+interface Instance {
+    destroy(): void;
+}
+type Cleanup = () => void;
+
+export type { Cleanup as C, Instance as I };

package/package.json

@@ -1,6 +1,117 @@
 {
   "name": "@yewdiel21/motion-kit",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.9.0",
+  "description": "Motion toolkit for vanilla, Astro and React: GSAP recipes, accessible components, 19 themes, CSS controls and optional WebGL effects.",
+  "type": "module",
+  "license": "UNLICENSED",
+  "homepage": "https://github.com/YewdielMartinez/motion-kit#readme",
+  "bugs": {
+    "url": "https://github.com/YewdielMartinez/motion-kit/issues"
+  },
+  "keywords": [
+    "animation",
+    "gsap",
+    "react",
+    "astro",
+    "webgl",
+    "motion",
+    "ui"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/YewdielMartinez/motion-kit.git",
+    "directory": "packages/motion-kit"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js"
+    },
+    "./auto": {
+      "types": "./dist/auto/index.d.ts",
+      "import": "./dist/auto/index.js"
+    },
+    "./elements": {
+      "types": "./dist/elements/index.d.ts",
+      "import": "./dist/elements/index.js"
+    },
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "import": "./dist/theme/index.js"
+    },
+    "./theme/generate": {
+      "types": "./dist/theme/generate.d.ts",
+      "import": "./dist/theme/generate.js"
+    },
+    "./gl": {
+      "types": "./dist/gl/index.d.ts",
+      "import": "./dist/gl/index.js"
+    },
+    "./css": {
+      "types": "./css.d.ts",
+      "default": "./dist/index.css"
+    },
+    "./css/*": {
+      "types": "./css.d.ts",
+      "default": "./dist/css/*.css"
+    },
+    "./package.json": "./package.json",
+    "./registry.json": "./registry.json"
+  },
+  "bin": {
+    "motion-kit": "bin/motion-kit.mjs"
+  },
+  "files": [
+    "dist",
+    "src",
+    "registry.json",
+    "bin",
+    "skills",
+    "NOTICE",
+    "css.d.ts"
+  ],
+  "peerDependencies": {
+    "gsap": ">=3.13.0",
+    "react": ">=18",
+    "@material/material-color-utilities": "^0.3.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "@material/material-color-utilities": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "devDependencies": {
+    "@material/material-color-utilities": "^0.3.0",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/react": "^16.3.3",
+    "@types/node": "^24.19.2",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "gsap": "3.14.2",
+    "jsdom": "^30.1.3",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "tsup": "^8.5.1",
+    "typescript": "5.9.3",
+    "vitest": "4.1.11"
+  },
+  "scripts": {
+    "build": "tsup && node scripts/build-css.mjs",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  }
 }