@arbor-css/core 0.0.1

package/dist/index.js

@@ -0,0 +1,13 @@
+export * from '@arbor-css/colors';
+export { $systemProps, createGlobals, defaultGlobals, } from '@arbor-css/globals';
+export * from '@arbor-css/modes';
+export * from '@arbor-css/shadows';
+export * from '@arbor-css/spacing';
+export * from '@arbor-css/tokens';
+export * from '@arbor-css/typography';
+export * from './arborPreset.js';
+export * from './config.js';
+export * from './primitives/primitives.js';
+export { generateStylesheet } from './stylesheet/generateStylesheet.js';
+export { convertStructure } from './util/convertStructure.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,OAAO,EACN,YAAY,EACZ,aAAa,EACb,cAAc,GAGd,MAAM,oBAAoB,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/primitives/labelProps.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=labelProps.d.ts.map

package/dist/primitives/labelProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"labelProps.d.ts","sourceRoot":"","sources":["../../src/primitives/labelProps.ts"],"names":[],"mappings":""}

package/dist/primitives/labelProps.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=labelProps.js.map

package/dist/primitives/labelProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"labelProps.js","sourceRoot":"","sources":["../../src/primitives/labelProps.ts"],"names":[],"mappings":""}

package/dist/primitives/localProps.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=localProps.d.ts.map

package/dist/primitives/localProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"localProps.d.ts","sourceRoot":"","sources":["../../src/primitives/localProps.ts"],"names":[],"mappings":""}

package/dist/primitives/localProps.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=localProps.js.map

package/dist/primitives/localProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"localProps.js","sourceRoot":"","sources":["../../src/primitives/localProps.ts"],"names":[],"mappings":""}

package/dist/primitives/primitives.d.ts

@@ -0,0 +1,46 @@
+import { ColorRangeItem, CompiledColors } from '@arbor-css/colors';
+import { GlobalConfig } from '@arbor-css/globals';
+import { CompiledShadows } from '@arbor-css/shadows';
+import { CompiledSpacing } from '@arbor-css/spacing';
+import { Token, TokenSchema } from '@arbor-css/tokens';
+import { CompiledTypography } from '@arbor-css/typography';
+export declare const defaultDefaultScheme = "light";
+export interface PrimitivesConfig<TCompiledColors extends CompiledColors<any, any>, TCompiledTypography extends CompiledTypography<any>, TCompiledSpacing extends CompiledSpacing<any>, TCompiledShadows extends CompiledShadows<any>, TOtherTokens extends TokenSchema = TokenSchema> {
+    colors: TCompiledColors;
+    typography: TCompiledTypography;
+    spacing: TCompiledSpacing;
+    shadows: TCompiledShadows;
+    misc?: TOtherTokens;
+    defaultScheme?: keyof TCompiledColors;
+    schemeTags?: Record<string, string>;
+    globals?: Partial<GlobalConfig>;
+}
+type LiteralsToTokens<T extends Record<string, any>> = {
+    [K in keyof T]: T[K] extends string | number ? Token : T[K] extends Record<string, any> ? LiteralsToTokens<T[K]> : never;
+};
+export interface PrimitivesColorScheme {
+    [Color: string]: ColorRangeItem[];
+}
+export type Primitives<TCompiledColors extends CompiledColors<any, any> = CompiledColors<any, any>, TCompiledTypography extends CompiledTypography = CompiledTypography, TCompiledSpacing extends CompiledSpacing = CompiledSpacing, TCompiledShadows extends CompiledShadows = CompiledShadows, TOtherTokens extends TokenSchema = TokenSchema> = {
+    /**
+     * A map of color values, keyed by scheme name.
+     * Each entry is the same structure: a record of color name keys
+     * and string values which represent CSS colors.
+     */
+    colors: TCompiledColors;
+    typography: TCompiledTypography;
+    spacing: TCompiledSpacing;
+    shadows: TCompiledShadows;
+    defaultScheme: keyof TCompiledColors;
+    schemeTags: Record<string, string>;
+    globals: GlobalConfig;
+    $tokens: {
+        colors: LiteralsToTokens<TCompiledColors[keyof TCompiledColors]['colors']>;
+        typography: LiteralsToTokens<TCompiledTypography['levels']>;
+        spacing: LiteralsToTokens<TCompiledSpacing['levels']>;
+        shadows: LiteralsToTokens<TCompiledShadows['levels']>;
+    } & TOtherTokens;
+};
+export declare function createPrimitives<TCompiledColors extends CompiledColors<any, any>, TCompiledTypography extends CompiledTypography, TCompiledSpacing extends CompiledSpacing, TCompiledShadows extends CompiledShadows, TOtherTokens extends TokenSchema>(config: PrimitivesConfig<TCompiledColors, TCompiledTypography, TCompiledSpacing, TCompiledShadows, TOtherTokens>): Primitives<TCompiledColors, TCompiledTypography, TCompiledSpacing, TCompiledShadows, TOtherTokens>;
+export {};
+//# sourceMappingURL=primitives.d.ts.map

package/dist/primitives/primitives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../src/primitives/primitives.ts"],"names":[],"mappings":"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"}

package/dist/primitives/primitives.js

@@ -0,0 +1,75 @@
+import { defaultGlobals } from '@arbor-css/globals';
+import { createToken } from '@arbor-css/tokens';
+import { isTypographyLevel } from '@arbor-css/typography';
+import { convertStructure } from '../util/convertStructure.js';
+export const defaultDefaultScheme = 'light';
+export function createPrimitives(config) {
+    const { colors, defaultScheme, globals: userGlobals } = config;
+    const arbitraryScheme = Object.values(colors)[0];
+    if (!arbitraryScheme) {
+        throw new Error('At least one color scheme must be defined in primitives');
+    }
+    // TODO: validate all scheme shapes are the same...
+    const $colorProps = convertStructure(arbitraryScheme.colors, (item) => typeof item === 'string', (_, path) => createToken(path.join('-'), {
+        type: 'color',
+        purpose: 'color',
+        group: path.slice(0, -1).join('-'),
+        tag: '🎨',
+    }));
+    const $typographyProps = convertStructure(config.typography.levels, isTypographyLevel, (_, path) => ({
+        size: createToken(`typography-${path.join('-')}-size`, {
+            type: 'length',
+            purpose: 'font-size',
+            group: path.join('-'),
+            tag: '🅰️',
+        }),
+        weight: createToken(`typography-${path.join('-')}-weight`, {
+            type: '*',
+            purpose: 'font-weight',
+            group: path.join('-'),
+            tag: '🅰️',
+        }),
+        lineHeight: createToken(`typography-${path.join('-')}-line-height`, {
+            type: '*',
+            purpose: 'line-height',
+            group: path.join('-'),
+            tag: '🅰️',
+        }),
+    }));
+    const $spacingProps = convertStructure(config.spacing.levels, (value) => typeof value === 'string' || typeof value === 'number', (_, path) => createToken(`spacing-${path.join('-')}`, {
+        type: 'length',
+        purpose: 'spacing',
+        tag: 's',
+    }));
+    const $shadowProps = convertStructure(config.shadows.levels, (value) => typeof value === 'string' || typeof value === 'number', (_, path) => createToken(`shadow-${path.join('-')}`, {
+        type: '*',
+        purpose: 'shadow',
+        tag: '🌫️',
+    }));
+    const globals = {
+        ...defaultGlobals,
+        ...userGlobals,
+    };
+    const schemeTags = {
+        light: '☀️',
+        dark: '🌑',
+        ...config.schemeTags,
+    };
+    return {
+        defaultScheme: defaultScheme ?? defaultDefaultScheme,
+        schemeTags,
+        globals,
+        colors,
+        typography: config.typography,
+        spacing: config.spacing,
+        shadows: config.shadows,
+        $tokens: {
+            ...(config.misc ?? {}),
+            colors: $colorProps,
+            typography: $typographyProps,
+            spacing: $spacingProps,
+            shadows: $shadowProps,
+        },
+    };
+}
+//# sourceMappingURL=primitives.js.map

package/dist/primitives/primitives.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.js","sourceRoot":"","sources":["../../src/primitives/primitives.ts"],"names":[],"mappings":"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"}

package/dist/primitives/systemProps.d.ts

@@ -0,0 +1,329 @@
+export declare const $labelProps: {
+    mode: {
+        "@@TOKEN@@": true;
+        name: string;
+        type: import("@arbor-css/tokens").PropertyType;
+        fallback: string | number | undefined;
+        var: string;
+        varFallback: (fallbackOverride?: string | number) => string;
+        assign: (value?: string | number) => string;
+        definition: string;
+        suffixed: (suffix: string) => /*elided*/ any;
+        prefixed: (prefix: string) => /*elided*/ any;
+    };
+    scheme: {
+        "@@TOKEN@@": true;
+        name: string;
+        type: import("@arbor-css/tokens").PropertyType;
+        fallback: string | number | undefined;
+        var: string;
+        varFallback: (fallbackOverride?: string | number) => string;
+        assign: (value?: string | number) => string;
+        definition: string;
+        suffixed: (suffix: string) => /*elided*/ any;
+        prefixed: (prefix: string) => /*elided*/ any;
+    };
+};
+export declare const $systemProps: {
+    labels: {
+        mode: {
+            "@@TOKEN@@": true;
+            name: string;
+            type: import("@arbor-css/tokens").PropertyType;
+            fallback: string | number | undefined;
+            var: string;
+            varFallback: (fallbackOverride?: string | number) => string;
+            assign: (value?: string | number) => string;
+            definition: string;
+            suffixed: (suffix: string) => /*elided*/ any;
+            prefixed: (prefix: string) => /*elided*/ any;
+        };
+        scheme: {
+            "@@TOKEN@@": true;
+            name: string;
+            type: import("@arbor-css/tokens").PropertyType;
+            fallback: string | number | undefined;
+            var: string;
+            varFallback: (fallbackOverride?: string | number) => string;
+            assign: (value?: string | number) => string;
+            definition: string;
+            suffixed: (suffix: string) => /*elided*/ any;
+            prefixed: (prefix: string) => /*elided*/ any;
+        };
+    };
+    fg: {
+        applied: {
+            "@@TOKEN@@": true;
+            name: string;
+            type: import("@arbor-css/tokens").PropertyType;
+            fallback: string | number | undefined;
+            var: string;
+            varFallback: (fallbackOverride?: string | number) => string;
+            assign: (value?: string | number) => string;
+            definition: string;
+            suffixed: (suffix: string) => /*elided*/ any;
+            prefixed: (prefix: string) => /*elided*/ any;
+        };
+        opacity: {
+            "@@TOKEN@@": true;
+            name: string;
+            type: import("@arbor-css/tokens").PropertyType;
+            fallback: string | number | undefined;
+            var: string;
+            varFallback: (fallbackOverride?: string | number) => string;
+            assign: (value?: string | number) => string;
+            definition: string;
+            suffixed: (suffix: string) => /*elided*/ any;
+            prefixed: (prefix: string) => /*elided*/ any;
+        };
+    };
+    bg: {
+        applied: {
+            "@@TOKEN@@": true;
+            name: string;
+            type: import("@arbor-css/tokens").PropertyType;
+            fallback: string | number | undefined;
+            var: string;
+            varFallback: (fallbackOverride?: string | number) => string;
+            assign: (value?: string | number) => string;
+            definition: string;
+            suffixed: (suffix: string) => /*elided*/ any;
+            prefixed: (prefix: string) => /*elided*/ any;
+        };
+        opacity: {
+            "@@TOKEN@@": true;
+            name: string;
+            type: import("@arbor-css/tokens").PropertyType;
+            fallback: string | number | undefined;
+            var: string;
+            varFallback: (fallbackOverride?: string | number) => string;
+            assign: (value?: string | number) => string;
+            definition: string;
+            suffixed: (suffix: string) => /*elided*/ any;
+            prefixed: (prefix: string) => /*elided*/ any;
+        };
+    };
+    borderColor: {
+        all: {
+            applied: {
+                "@@TOKEN@@": true;
+                name: string;
+                type: import("@arbor-css/tokens").PropertyType;
+                fallback: string | number | undefined;
+                var: string;
+                varFallback: (fallbackOverride?: string | number) => string;
+                assign: (value?: string | number) => string;
+                definition: string;
+                suffixed: (suffix: string) => /*elided*/ any;
+                prefixed: (prefix: string) => /*elided*/ any;
+            };
+            opacity: {
+                "@@TOKEN@@": true;
+                name: string;
+                type: import("@arbor-css/tokens").PropertyType;
+                fallback: string | number | undefined;
+                var: string;
+                varFallback: (fallbackOverride?: string | number) => string;
+                assign: (value?: string | number) => string;
+                definition: string;
+                suffixed: (suffix: string) => /*elided*/ any;
+                prefixed: (prefix: string) => /*elided*/ any;
+            };
+        };
+        top: {
+            applied: {
+                "@@TOKEN@@": true;
+                name: string;
+                type: import("@arbor-css/tokens").PropertyType;
+                fallback: string | number | undefined;
+                var: string;
+                varFallback: (fallbackOverride?: string | number) => string;
+                assign: (value?: string | number) => string;
+                definition: string;
+                suffixed: (suffix: string) => /*elided*/ any;
+                prefixed: (prefix: string) => /*elided*/ any;
+            };
+            opacity: {
+                "@@TOKEN@@": true;
+                name: string;
+                type: import("@arbor-css/tokens").PropertyType;
+                fallback: string | number | undefined;
+                var: string;
+                varFallback: (fallbackOverride?: string | number) => string;
+                assign: (value?: string | number) => string;
+                definition: string;
+                suffixed: (suffix: string) => /*elided*/ any;
+                prefixed: (prefix: string) => /*elided*/ any;
+            };
+        };
+        right: {
+            applied: {
+                "@@TOKEN@@": true;
+                name: string;
+                type: import("@arbor-css/tokens").PropertyType;
+                fallback: string | number | undefined;
+                var: string;
+                varFallback: (fallbackOverride?: string | number) => string;
+                assign: (value?: string | number) => string;
+                definition: string;
+                suffixed: (suffix: string) => /*elided*/ any;
+                prefixed: (prefix: string) => /*elided*/ any;
+            };
+            opacity: {
+                "@@TOKEN@@": true;
+                name: string;
+                type: import("@arbor-css/tokens").PropertyType;
+                fallback: string | number | undefined;
+                var: string;
+                varFallback: (fallbackOverride?: string | number) => string;
+                assign: (value?: string | number) => string;
+                definition: string;
+                suffixed: (suffix: string) => /*elided*/ any;
+                prefixed: (prefix: string) => /*elided*/ any;
+            };
+        };
+        bottom: {
+            applied: {
+                "@@TOKEN@@": true;
+                name: string;
+                type: import("@arbor-css/tokens").PropertyType;
+                fallback: string | number | undefined;
+                var: string;
+                varFallback: (fallbackOverride?: string | number) => string;
+                assign: (value?: string | number) => string;
+                definition: string;
+                suffixed: (suffix: string) => /*elided*/ any;
+                prefixed: (prefix: string) => /*elided*/ any;
+            };
+            opacity: {
+                "@@TOKEN@@": true;
+                name: string;
+                type: import("@arbor-css/tokens").PropertyType;
+                fallback: string | number | undefined;
+                var: string;
+                varFallback: (fallbackOverride?: string | number) => string;
+                assign: (value?: string | number) => string;
+                definition: string;
+                suffixed: (suffix: string) => /*elided*/ any;
+                prefixed: (prefix: string) => /*elided*/ any;
+            };
+        };
+        left: {
+            applied: {
+                "@@TOKEN@@": true;
+                name: string;
+                type: import("@arbor-css/tokens").PropertyType;
+                fallback: string | number | undefined;
+                var: string;
+                varFallback: (fallbackOverride?: string | number) => string;
+                assign: (value?: string | number) => string;
+                definition: string;
+                suffixed: (suffix: string) => /*elided*/ any;
+                prefixed: (prefix: string) => /*elided*/ any;
+            };
+            opacity: {
+                "@@TOKEN@@": true;
+                name: string;
+                type: import("@arbor-css/tokens").PropertyType;
+                fallback: string | number | undefined;
+                var: string;
+                varFallback: (fallbackOverride?: string | number) => string;
+                assign: (value?: string | number) => string;
+                definition: string;
+                suffixed: (suffix: string) => /*elided*/ any;
+                prefixed: (prefix: string) => /*elided*/ any;
+            };
+        };
+    };
+    ring: {
+        target: {
+            "@@TOKEN@@": true;
+            name: string;
+            type: import("@arbor-css/tokens").PropertyType;
+            fallback: string | number | undefined;
+            var: string;
+            varFallback: (fallbackOverride?: string | number) => string;
+            assign: (value?: string | number) => string;
+            definition: string;
+            suffixed: (suffix: string) => /*elided*/ any;
+            prefixed: (prefix: string) => /*elided*/ any;
+        };
+        applied: {
+            "@@TOKEN@@": true;
+            name: string;
+            type: import("@arbor-css/tokens").PropertyType;
+            fallback: string | number | undefined;
+            var: string;
+            varFallback: (fallbackOverride?: string | number) => string;
+            assign: (value?: string | number) => string;
+            definition: string;
+            suffixed: (suffix: string) => /*elided*/ any;
+            prefixed: (prefix: string) => /*elided*/ any;
+        };
+        opacity: {
+            "@@TOKEN@@": true;
+            name: string;
+            type: import("@arbor-css/tokens").PropertyType;
+            fallback: string | number | undefined;
+            var: string;
+            varFallback: (fallbackOverride?: string | number) => string;
+            assign: (value?: string | number) => string;
+            definition: string;
+            suffixed: (suffix: string) => /*elided*/ any;
+            prefixed: (prefix: string) => /*elided*/ any;
+        };
+    };
+    placeholder: {
+        applied: {
+            "@@TOKEN@@": true;
+            name: string;
+            type: import("@arbor-css/tokens").PropertyType;
+            fallback: string | number | undefined;
+            var: string;
+            varFallback: (fallbackOverride?: string | number) => string;
+            assign: (value?: string | number) => string;
+            definition: string;
+            suffixed: (suffix: string) => /*elided*/ any;
+            prefixed: (prefix: string) => /*elided*/ any;
+        };
+        opacity: {
+            "@@TOKEN@@": true;
+            name: string;
+            type: import("@arbor-css/tokens").PropertyType;
+            fallback: string | number | undefined;
+            var: string;
+            varFallback: (fallbackOverride?: string | number) => string;
+            assign: (value?: string | number) => string;
+            definition: string;
+            suffixed: (suffix: string) => /*elided*/ any;
+            prefixed: (prefix: string) => /*elided*/ any;
+        };
+    };
+    accent: {
+        applied: {
+            "@@TOKEN@@": true;
+            name: string;
+            type: import("@arbor-css/tokens").PropertyType;
+            fallback: string | number | undefined;
+            var: string;
+            varFallback: (fallbackOverride?: string | number) => string;
+            assign: (value?: string | number) => string;
+            definition: string;
+            suffixed: (suffix: string) => /*elided*/ any;
+            prefixed: (prefix: string) => /*elided*/ any;
+        };
+        opacity: {
+            "@@TOKEN@@": true;
+            name: string;
+            type: import("@arbor-css/tokens").PropertyType;
+            fallback: string | number | undefined;
+            var: string;
+            varFallback: (fallbackOverride?: string | number) => string;
+            assign: (value?: string | number) => string;
+            definition: string;
+            suffixed: (suffix: string) => /*elided*/ any;
+            prefixed: (prefix: string) => /*elided*/ any;
+        };
+    };
+};
+//# sourceMappingURL=systemProps.d.ts.map

package/dist/primitives/systemProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"systemProps.d.ts","sourceRoot":"","sources":["../../src/primitives/systemProps.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;CAGvB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyBxB,CAAC"}

package/dist/primitives/systemProps.js

@@ -0,0 +1,45 @@
+import { createToken } from '@arbor-css/tokens';
+export const $labelProps = {
+    mode: createToken('ℹ️-mode', { type: 'string' }),
+    scheme: createToken('ℹ️-scheme', { type: 'string' }),
+};
+export const $systemProps = {
+    labels: $labelProps,
+    // System color tokens are well-known properties you can
+    // assign colors to which are used by util classes for
+    // color mixing and other things...
+    // TODO: move these to `classes`? Not sure they're relevant
+    // outside that package.
+    fg: makeSystemColorTokens('fg'),
+    bg: makeSystemColorTokens('bg'),
+    borderColor: {
+        all: makeSystemColorTokens('borderColor-all'),
+        top: makeSystemColorTokens('borderColor-top'),
+        right: makeSystemColorTokens('borderColor-right'),
+        bottom: makeSystemColorTokens('borderColor-bottom'),
+        left: makeSystemColorTokens('borderColor-left'),
+    },
+    ring: {
+        ...makeSystemColorTokens('ring'),
+        target: createToken(`💲-ring-target`, {
+            type: 'color',
+            inherits: false,
+        }),
+    },
+    placeholder: makeSystemColorTokens('placeholder'),
+    accent: makeSystemColorTokens('accent'),
+};
+function makeSystemColorTokens(name) {
+    return {
+        applied: createToken(`💲-${name}`, {
+            type: 'color',
+            inherits: true,
+        }),
+        opacity: createToken(`💲-${name}-op`, {
+            type: 'number',
+            inherits: false,
+            fallback: '100%',
+        }),
+    };
+}
+//# sourceMappingURL=systemProps.js.map

package/dist/primitives/systemProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"systemProps.js","sourceRoot":"","sources":["../../src/primitives/systemProps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,CAAC,MAAM,WAAW,GAAG;IAC1B,IAAI,EAAE,WAAW,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;IAChD,MAAM,EAAE,WAAW,CAAC,WAAW,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;CACpD,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG;IAC3B,MAAM,EAAE,WAAW;IACnB,wDAAwD;IACxD,sDAAsD;IACtD,mCAAmC;IACnC,2DAA2D;IAC3D,wBAAwB;IACxB,EAAE,EAAE,qBAAqB,CAAC,IAAI,CAAC;IAC/B,EAAE,EAAE,qBAAqB,CAAC,IAAI,CAAC;IAC/B,WAAW,EAAE;QACZ,GAAG,EAAE,qBAAqB,CAAC,iBAAiB,CAAC;QAC7C,GAAG,EAAE,qBAAqB,CAAC,iBAAiB,CAAC;QAC7C,KAAK,EAAE,qBAAqB,CAAC,mBAAmB,CAAC;QACjD,MAAM,EAAE,qBAAqB,CAAC,oBAAoB,CAAC;QACnD,IAAI,EAAE,qBAAqB,CAAC,kBAAkB,CAAC;KAC/C;IACD,IAAI,EAAE;QACL,GAAG,qBAAqB,CAAC,MAAM,CAAC;QAChC,MAAM,EAAE,WAAW,CAAC,gBAAgB,EAAE;YACrC,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,KAAK;SACf,CAAC;KACF;IACD,WAAW,EAAE,qBAAqB,CAAC,aAAa,CAAC;IACjD,MAAM,EAAE,qBAAqB,CAAC,QAAQ,CAAC;CACvC,CAAC;AAEF,SAAS,qBAAqB,CAAC,IAAY;IAC1C,OAAO;QACN,OAAO,EAAE,WAAW,CAAC,MAAM,IAAI,EAAE,EAAE;YAClC,IAAI,EAAE,OAAO;YACb,QAAQ,EAAE,IAAI;SACd,CAAC;QACF,OAAO,EAAE,WAAW,CAAC,MAAM,IAAI,KAAK,EAAE;YACrC,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,MAAM;SAChB,CAAC;KACF,CAAC;AACH,CAAC"}

package/dist/runtime/components/BaseElement.d.ts

@@ -0,0 +1,6 @@
+export declare class ArborElement extends HTMLElement {
+    shadowRoot: ShadowRoot;
+    config: import("../../config.js").ArborConfig<any, import("@arbor-css/colors").CompiledColors<any, any>, import("@arbor-css/typography").CompiledTypography<any>, import("@arbor-css/spacing").CompiledSpacing<any>, import("@arbor-css/shadows").CompiledShadows<any>, import("@arbor-css/tokens").TokenSchema>;
+    constructor();
+}
+//# sourceMappingURL=BaseElement.d.ts.map

package/dist/runtime/components/BaseElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseElement.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/BaseElement.ts"],"names":[],"mappings":"AAEA,qBAAa,YAAa,SAAQ,WAAW;IAC5C,UAAU,EAAG,UAAU,CAAC;IACxB,MAAM,2SAAe;;CAMrB"}

package/dist/runtime/components/BaseElement.js

@@ -0,0 +1,10 @@
+import { getConfig, getStyleSheet } from '../registration.js';
+export class ArborElement extends HTMLElement {
+    constructor() {
+        super();
+        this.config = getConfig();
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.adoptedStyleSheets.push(getStyleSheet());
+    }
+}
+//# sourceMappingURL=BaseElement.js.map

package/dist/runtime/components/BaseElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseElement.js","sourceRoot":"","sources":["../../../src/runtime/components/BaseElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAE9D,MAAM,OAAO,YAAa,SAAQ,WAAW;IAG5C;QACC,KAAK,EAAE,CAAC;QAFT,WAAM,GAAG,SAAS,EAAE,CAAC;QAGpB,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;QACpC,IAAI,CAAC,UAAU,CAAC,kBAAkB,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;IAC1D,CAAC;CACD"}

package/dist/runtime/components/ColorRange.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ColorRange.d.ts.map

package/dist/runtime/components/ColorRange.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorRange.d.ts","sourceRoot":"","sources":["../../../src/runtime/components/ColorRange.ts"],"names":[],"mappings":""}

package/dist/runtime/components/ColorRange.js

@@ -0,0 +1,52 @@
+import { getContrastColor } from '@arbor-css/colors';
+import { isToken } from '@arbor-css/tokens';
+import { getConfig } from '../registration.js';
+class ColorRange extends HTMLElement {
+    constructor() {
+        super();
+        const colorName = this.getAttribute('color');
+        if (!colorName) {
+            throw new Error('ColorRange component requires a "color" attribute.');
+        }
+        const config = getConfig();
+        const colorRange = config.primitives.$tokens.colors[colorName];
+        if (!colorRange) {
+            throw new Error(`Color "${colorName}" not found in configuration.`);
+        }
+        if (isToken(colorRange)) {
+            throw new Error(`Color "${colorName}" is not a valid color range (it's an individual token)`);
+        }
+        this.attachShadow({ mode: 'closed' }).innerHTML = `
+			<div class="range-wrapper">
+				<h2>${colorName}</h2>
+				<div class="range">
+					${Object.keys(colorRange)
+            .map((key) => {
+            const color = colorRange[key];
+            if (!isToken(color)) {
+                // ignore
+                return '';
+            }
+            const value = color.var;
+            return `<div class="color" style="background-color: ${value}; color: ${getContrastColor(value)}">
+								<div>${key}</div>
+							</div>`;
+        })
+            .join('\n')}
+				</div>
+			</div>
+			<style>
+				.range {
+					display: flex;
+				}
+				.color {
+					flex: 1;
+					text-align: center;
+					padding: 1rem;
+				}
+			</style>
+		`;
+    }
+}
+customElements.define('arbor-color-range', ColorRange);
+//# sourceMappingURL=ColorRange.js.map