@easemate/web-kit 0.2.0 → 0.3.0

package/build/register.server.cjs

@@ -0,0 +1,19 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/register.server.ts
+var register_server_exports = {};
+module.exports = __toCommonJS(register_server_exports);
+//# sourceMappingURL=register.server.cjs.map

package/build/register.server.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/register.server.ts"],"sourcesContent":["/**\n * Server-side no-op for @easemate/web-kit/register\n *\n * This module is used in server environments (Node.js, React Server Components)\n * to prevent the actual component registration code from running on the server,\n * which would cause errors due to missing `window` and `customElements` APIs.\n *\n * The conditional export in package.json routes server environments to this file\n * while browser environments get the real register.ts with side effects.\n *\n * @module @easemate/web-kit/register (server)\n */\n\n// No-op export for server environments\nexport {};\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;;","names":[]}

package/build/register.server.d.cts

@@ -0,0 +1,2 @@
+
+export {  }

package/build/register.server.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/build/register.server.js

@@ -0,0 +1 @@
+//# sourceMappingURL=register.server.js.map

package/build/register.server.js.map

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

package/build/registry-9GX9KTG1.d.cts

@@ -0,0 +1,264 @@
+/**
+ * Color scale levels
+ */
+type ColorScale = {
+    100?: string;
+    200?: string;
+    300?: string;
+    400?: string;
+    500?: string;
+    600?: string;
+    700?: string;
+    800?: string;
+    900?: string;
+    1000?: string;
+    1100?: string;
+};
+/**
+ * Gray color scale with additional intermediate values
+ */
+type GrayScale = ColorScale & {
+    0?: string;
+    825?: string;
+    850?: string;
+    875?: string;
+};
+/**
+ * Alpha color variations
+ */
+type AlphaColors = {
+    0?: string;
+    2?: string;
+    4?: string;
+    6?: string;
+    8?: string;
+    10?: string;
+    12?: string;
+    15?: string;
+    20?: string;
+    30?: string;
+    40?: string;
+    50?: string;
+    70?: string;
+    80?: string;
+    90?: string;
+};
+/**
+ * Color palette configuration
+ */
+interface ColorPalette {
+    /** Gray scale colors */
+    gray?: GrayScale;
+    /** Blue scale colors */
+    blue?: ColorScale;
+    /** Green scale colors */
+    green?: ColorScale;
+    /** Red scale colors */
+    red?: ColorScale;
+    /** Orange scale colors */
+    orange?: ColorScale;
+    /** Yellow scale colors */
+    yellow?: ColorScale;
+    /** Base white color */
+    white?: string;
+    /** Base black color */
+    black?: string;
+    /** White alpha variations */
+    whiteAlpha?: AlphaColors;
+    /** Black alpha variations */
+    blackAlpha?: AlphaColors;
+    /** Foreground color */
+    foreground?: string;
+}
+/**
+ * Border radius configuration
+ */
+interface RadiiConfig {
+    /** Small radius (4px default) */
+    sm?: string;
+    /** Medium radius (8px default) */
+    md?: string;
+    /** Large radius (12px default) */
+    lg?: string;
+    /** Extra large radius (16px default) */
+    xl?: string;
+    /** Full/pill radius */
+    full?: string;
+}
+/**
+ * Spacing configuration
+ */
+interface SpacingConfig {
+    /** Extra small spacing */
+    xs?: string;
+    /** Small spacing */
+    sm?: string;
+    /** Medium spacing */
+    md?: string;
+    /** Large spacing */
+    lg?: string;
+    /** Extra large spacing */
+    xl?: string;
+}
+/**
+ * Typography configuration
+ */
+interface TypographyConfig {
+    /** Font family for body text */
+    fontFamily?: string;
+    /** Font family for monospace/code */
+    fontMono?: string;
+    /** Base font size */
+    fontSize?: string;
+    /** Line height */
+    lineHeight?: string;
+}
+/**
+ * Arbitrary CSS custom properties to apply alongside the theme tokens.
+ *
+ * Keys may be provided with or without the `--` prefix.
+ *
+ * @example
+ * ```ts
+ * vars: {
+ *   '--ease-panel-padding': '16px',
+ *   'ease-field-label-width': '40%'
+ * }
+ * ```
+ */
+type ThemeVars = Record<string, string | number | null | undefined>;
+/**
+ * Complete theme configuration
+ */
+interface ThemeConfig {
+    /** Color palette */
+    colors?: ColorPalette;
+    /** Border radii */
+    radii?: RadiiConfig;
+    /** Spacing values */
+    spacing?: SpacingConfig;
+    /** Typography settings */
+    typography?: TypographyConfig;
+    /**
+     * Extra CSS variables (component tokens, app tokens, etc).
+     * This is the recommended place to set `--ease-*` variables.
+     */
+    vars?: ThemeVars;
+}
+/**
+ * Default color values (oklab)
+ */
+declare const defaultColors: Required<ColorPalette>;
+/**
+ * Default border radius values
+ */
+declare const defaultRadii: Required<RadiiConfig>;
+/**
+ * Default spacing values
+ */
+declare const defaultSpacing: Required<SpacingConfig>;
+/**
+ * Default typography values
+ */
+declare const defaultTypography: Required<TypographyConfig>;
+
+/**
+ * Augmentable interface for theme names.
+ * Consumers can extend this via module augmentation to add custom theme names:
+ *
+ * @example
+ * ```ts
+ * declare module '@easemate/web-kit' {
+ *   interface WebKitThemeRegistry {
+ *     custom: true;
+ *     brand: true;
+ *   }
+ * }
+ * ```
+ */
+interface WebKitThemeRegistry {
+    default: true;
+    dark: true;
+}
+/**
+ * Union of all registered theme names.
+ */
+type WebKitThemeName = keyof WebKitThemeRegistry;
+/**
+ * A strongly-typed theme reference.
+ * Use this for type-safe theme references without module augmentation.
+ */
+interface WebKitThemeRef<Name extends string = string> {
+    readonly __brand: 'WebKitThemeRef';
+    readonly name: Name;
+}
+/**
+ * Valid theme input for APIs: a registered theme name, a theme ref, or an inline config.
+ */
+type ThemeInput = WebKitThemeName | WebKitThemeRef | ThemeConfig;
+/**
+ * Options for registering a theme.
+ */
+interface RegisterThemeOptions {
+    /**
+     * Base theme to extend from.
+     * - `'default'` (or any registered name) - extends that theme
+     * - `null` - no base, starts from scratch
+     * - `undefined` - defaults to `'default'`
+     */
+    base?: WebKitThemeName | WebKitThemeRef | null;
+    /**
+     * Theme configuration (overrides on top of base).
+     */
+    config?: ThemeConfig;
+}
+/**
+ * Check if a value is a theme ref.
+ */
+declare const isThemeRef: (value: unknown) => value is WebKitThemeRef;
+/**
+ * Check if a value is a theme config object.
+ */
+declare const isThemeConfig: (value: unknown) => value is ThemeConfig;
+/**
+ * Register a custom theme.
+ *
+ * @param name - Theme name (must be unique)
+ * @param options - Theme options (base + config)
+ * @returns A typed theme reference
+ *
+ * @example
+ * ```ts
+ * const custom = registerTheme('custom', {
+ *   base: 'default',
+ *   config: {
+ *     vars: { '--ease-panel-radius': '14px' }
+ *   }
+ * });
+ *
+ * initWebKit({ theme: custom });
+ * ```
+ */
+declare function registerTheme<Name extends string>(name: Name, options?: RegisterThemeOptions): WebKitThemeRef<Name>;
+/**
+ * Get a theme's resolved configuration.
+ *
+ * @param theme - Theme name, ref, or inline config
+ * @returns Resolved theme configuration
+ */
+declare function getTheme(theme: ThemeInput): ThemeConfig;
+/**
+ * Check if a theme is registered.
+ */
+declare function hasTheme(name: string): boolean;
+/**
+ * Get all registered theme names.
+ */
+declare function getThemeNames(): string[];
+/**
+ * Create a theme ref for a registered theme name.
+ * Useful for type-safe references without module augmentation.
+ */
+declare function themeRef<Name extends WebKitThemeName>(name: Name): WebKitThemeRef<Name>;
+
+export { type AlphaColors as A, type ColorScale as C, type GrayScale as G, type RegisterThemeOptions as R, type SpacingConfig as S, type ThemeVars as T, type WebKitThemeRegistry as W, type ThemeConfig as a, type WebKitThemeName as b, type WebKitThemeRef as c, type ThemeInput as d, isThemeConfig as e, getThemeNames as f, getTheme as g, hasTheme as h, isThemeRef as i, type ColorPalette as j, type RadiiConfig as k, type TypographyConfig as l, defaultColors as m, defaultRadii as n, defaultSpacing as o, defaultTypography as p, registerTheme as r, themeRef as t };

package/build/registry-9GX9KTG1.d.ts

@@ -0,0 +1,264 @@
+/**
+ * Color scale levels
+ */
+type ColorScale = {
+    100?: string;
+    200?: string;
+    300?: string;
+    400?: string;
+    500?: string;
+    600?: string;
+    700?: string;
+    800?: string;
+    900?: string;
+    1000?: string;
+    1100?: string;
+};
+/**
+ * Gray color scale with additional intermediate values
+ */
+type GrayScale = ColorScale & {
+    0?: string;
+    825?: string;
+    850?: string;
+    875?: string;
+};
+/**
+ * Alpha color variations
+ */
+type AlphaColors = {
+    0?: string;
+    2?: string;
+    4?: string;
+    6?: string;
+    8?: string;
+    10?: string;
+    12?: string;
+    15?: string;
+    20?: string;
+    30?: string;
+    40?: string;
+    50?: string;
+    70?: string;
+    80?: string;
+    90?: string;
+};
+/**
+ * Color palette configuration
+ */
+interface ColorPalette {
+    /** Gray scale colors */
+    gray?: GrayScale;
+    /** Blue scale colors */
+    blue?: ColorScale;
+    /** Green scale colors */
+    green?: ColorScale;
+    /** Red scale colors */
+    red?: ColorScale;
+    /** Orange scale colors */
+    orange?: ColorScale;
+    /** Yellow scale colors */
+    yellow?: ColorScale;
+    /** Base white color */
+    white?: string;
+    /** Base black color */
+    black?: string;
+    /** White alpha variations */
+    whiteAlpha?: AlphaColors;
+    /** Black alpha variations */
+    blackAlpha?: AlphaColors;
+    /** Foreground color */
+    foreground?: string;
+}
+/**
+ * Border radius configuration
+ */
+interface RadiiConfig {
+    /** Small radius (4px default) */
+    sm?: string;
+    /** Medium radius (8px default) */
+    md?: string;
+    /** Large radius (12px default) */
+    lg?: string;
+    /** Extra large radius (16px default) */
+    xl?: string;
+    /** Full/pill radius */
+    full?: string;
+}
+/**
+ * Spacing configuration
+ */
+interface SpacingConfig {
+    /** Extra small spacing */
+    xs?: string;
+    /** Small spacing */
+    sm?: string;
+    /** Medium spacing */
+    md?: string;
+    /** Large spacing */
+    lg?: string;
+    /** Extra large spacing */
+    xl?: string;
+}
+/**
+ * Typography configuration
+ */
+interface TypographyConfig {
+    /** Font family for body text */
+    fontFamily?: string;
+    /** Font family for monospace/code */
+    fontMono?: string;
+    /** Base font size */
+    fontSize?: string;
+    /** Line height */
+    lineHeight?: string;
+}
+/**
+ * Arbitrary CSS custom properties to apply alongside the theme tokens.
+ *
+ * Keys may be provided with or without the `--` prefix.
+ *
+ * @example
+ * ```ts
+ * vars: {
+ *   '--ease-panel-padding': '16px',
+ *   'ease-field-label-width': '40%'
+ * }
+ * ```
+ */
+type ThemeVars = Record<string, string | number | null | undefined>;
+/**
+ * Complete theme configuration
+ */
+interface ThemeConfig {
+    /** Color palette */
+    colors?: ColorPalette;
+    /** Border radii */
+    radii?: RadiiConfig;
+    /** Spacing values */
+    spacing?: SpacingConfig;
+    /** Typography settings */
+    typography?: TypographyConfig;
+    /**
+     * Extra CSS variables (component tokens, app tokens, etc).
+     * This is the recommended place to set `--ease-*` variables.
+     */
+    vars?: ThemeVars;
+}
+/**
+ * Default color values (oklab)
+ */
+declare const defaultColors: Required<ColorPalette>;
+/**
+ * Default border radius values
+ */
+declare const defaultRadii: Required<RadiiConfig>;
+/**
+ * Default spacing values
+ */
+declare const defaultSpacing: Required<SpacingConfig>;
+/**
+ * Default typography values
+ */
+declare const defaultTypography: Required<TypographyConfig>;
+
+/**
+ * Augmentable interface for theme names.
+ * Consumers can extend this via module augmentation to add custom theme names:
+ *
+ * @example
+ * ```ts
+ * declare module '@easemate/web-kit' {
+ *   interface WebKitThemeRegistry {
+ *     custom: true;
+ *     brand: true;
+ *   }
+ * }
+ * ```
+ */
+interface WebKitThemeRegistry {
+    default: true;
+    dark: true;
+}
+/**
+ * Union of all registered theme names.
+ */
+type WebKitThemeName = keyof WebKitThemeRegistry;
+/**
+ * A strongly-typed theme reference.
+ * Use this for type-safe theme references without module augmentation.
+ */
+interface WebKitThemeRef<Name extends string = string> {
+    readonly __brand: 'WebKitThemeRef';
+    readonly name: Name;
+}
+/**
+ * Valid theme input for APIs: a registered theme name, a theme ref, or an inline config.
+ */
+type ThemeInput = WebKitThemeName | WebKitThemeRef | ThemeConfig;
+/**
+ * Options for registering a theme.
+ */
+interface RegisterThemeOptions {
+    /**
+     * Base theme to extend from.
+     * - `'default'` (or any registered name) - extends that theme
+     * - `null` - no base, starts from scratch
+     * - `undefined` - defaults to `'default'`
+     */
+    base?: WebKitThemeName | WebKitThemeRef | null;
+    /**
+     * Theme configuration (overrides on top of base).
+     */
+    config?: ThemeConfig;
+}
+/**
+ * Check if a value is a theme ref.
+ */
+declare const isThemeRef: (value: unknown) => value is WebKitThemeRef;
+/**
+ * Check if a value is a theme config object.
+ */
+declare const isThemeConfig: (value: unknown) => value is ThemeConfig;
+/**
+ * Register a custom theme.
+ *
+ * @param name - Theme name (must be unique)
+ * @param options - Theme options (base + config)
+ * @returns A typed theme reference
+ *
+ * @example
+ * ```ts
+ * const custom = registerTheme('custom', {
+ *   base: 'default',
+ *   config: {
+ *     vars: { '--ease-panel-radius': '14px' }
+ *   }
+ * });
+ *
+ * initWebKit({ theme: custom });
+ * ```
+ */
+declare function registerTheme<Name extends string>(name: Name, options?: RegisterThemeOptions): WebKitThemeRef<Name>;
+/**
+ * Get a theme's resolved configuration.
+ *
+ * @param theme - Theme name, ref, or inline config
+ * @returns Resolved theme configuration
+ */
+declare function getTheme(theme: ThemeInput): ThemeConfig;
+/**
+ * Check if a theme is registered.
+ */
+declare function hasTheme(name: string): boolean;
+/**
+ * Get all registered theme names.
+ */
+declare function getThemeNames(): string[];
+/**
+ * Create a theme ref for a registered theme name.
+ * Useful for type-safe references without module augmentation.
+ */
+declare function themeRef<Name extends WebKitThemeName>(name: Name): WebKitThemeRef<Name>;
+
+export { type AlphaColors as A, type ColorScale as C, type GrayScale as G, type RegisterThemeOptions as R, type SpacingConfig as S, type ThemeVars as T, type WebKitThemeRegistry as W, type ThemeConfig as a, type WebKitThemeName as b, type WebKitThemeRef as c, type ThemeInput as d, isThemeConfig as e, getThemeNames as f, getTheme as g, hasTheme as h, isThemeRef as i, type ColorPalette as j, type RadiiConfig as k, type TypographyConfig as l, defaultColors as m, defaultRadii as n, defaultSpacing as o, defaultTypography as p, registerTheme as r, themeRef as t };

package/build/template-helpers-CguLXtLD.d.cts

@@ -0,0 +1,10 @@
+import { nothing, TemplateResult } from 'lit-html';
+import { repeat } from 'lit-html/directives/repeat.js';
+import { styleMap } from 'lit-html/directives/style-map.js';
+
+declare function renderIf<T>(condition: T | undefined | null, template: TemplateResult | (() => TemplateResult)): TemplateResult | typeof nothing;
+declare function renderList<T>(items: readonly T[], template: (item: T, index: number) => TemplateResult, key?: (item: T, index: number) => unknown): ReturnType<typeof repeat>;
+declare function styleObject(input: Record<string, string | number | null | undefined>): ReturnType<typeof styleMap>;
+declare const optionalAttribute: <T>(value: T) => typeof nothing | NonNullable<T>;
+
+export { renderList as a, optionalAttribute as o, renderIf as r, styleObject as s };

package/build/template-helpers-CguLXtLD.d.ts

@@ -0,0 +1,10 @@
+import { nothing, TemplateResult } from 'lit-html';
+import { repeat } from 'lit-html/directives/repeat.js';
+import { styleMap } from 'lit-html/directives/style-map.js';
+
+declare function renderIf<T>(condition: T | undefined | null, template: TemplateResult | (() => TemplateResult)): TemplateResult | typeof nothing;
+declare function renderList<T>(items: readonly T[], template: (item: T, index: number) => TemplateResult, key?: (item: T, index: number) => unknown): ReturnType<typeof repeat>;
+declare function styleObject(input: Record<string, string | number | null | undefined>): ReturnType<typeof styleMap>;
+declare const optionalAttribute: <T>(value: T) => typeof nothing | NonNullable<T>;
+
+export { renderList as a, optionalAttribute as o, renderIf as r, styleObject as s };