amateras 0.7.4 → 0.10.0

package/packages/css/src/ext/colors/orange.ts

@@ -1,25 +0,0 @@
-import { colorAssign } from "../../lib/colorAssign";
-
-const _orange = {
-    50: '#fff7ed',
-    100: '#ffedd5',
-    200: '#fed7aa',
-    300: '#fdba74',
-    400: '#fb923c',
-    500: '#f97316',
-    600: '#ea580c',
-    700: '#c2410c',
-    800: '#9a3412',
-    900: '#7c2d12',
-    950: '#431407',
-} as const;
-
-colorAssign('orange', _orange);
-
-declare module '@amateras/core' {
-    export namespace $ {
-        export namespace color {
-            export const orange: typeof _orange;
-        }
-    }
-}

package/packages/css/src/ext/colors/pink.ts

@@ -1,25 +0,0 @@
-import { colorAssign } from "../../lib/colorAssign";
-
-const _pink = {
-    50: '#fdf2f8',
-    100: '#fce7f3',
-    200: '#fbcfe8',
-    300: '#f9a8d4',
-    400: '#f472b6',
-    500: '#ec4899',
-    600: '#db2777',
-    700: '#be185d',
-    800: '#9d174d',
-    900: '#831843',
-    950: '#500724',
-} as const;
-
-colorAssign('pink', _pink);
-
-declare module '@amateras/core' {
-    export namespace $ {
-        export namespace color {
-            export const pink: typeof _pink;
-        }
-    }
-}

package/packages/css/src/ext/colors/purple.ts

@@ -1,25 +0,0 @@
-import { colorAssign } from "../../lib/colorAssign";
-
-const _purple = {
-    50: '#faf5ff',
-    100: '#f3e8ff',
-    200: '#e9d5ff',
-    300: '#d8b4fe',
-    400: '#c084fc',
-    500: '#a855f7',
-    600: '#9333ea',
-    700: '#7e22ce',
-    800: '#6b21a8',
-    900: '#581c87',
-    950: '#3b0764',
-} as const;
-
-colorAssign('purple', _purple);
-
-declare module '@amateras/core' {
-    export namespace $ {
-        export namespace color {
-            export const purple: typeof _purple;
-        }
-    }
-}

package/packages/css/src/ext/colors/red.ts

@@ -1,25 +0,0 @@
-import { colorAssign } from "../../lib/colorAssign";
-
-const _red = {
-    50: '#fef2f2',
-    100: '#fee2e2',
-    200: '#fecaca',
-    300: '#fca5a5',
-    400: '#f87171',
-    500: '#ef4444',
-    600: '#dc2626',
-    700: '#b91c1c',
-    800: '#991b1b',
-    900: '#7f1d1d',
-    950: '#450a0a',
-} as const;
-
-colorAssign('red', _red);
-
-declare module '@amateras/core' {
-    export namespace $ {
-        export namespace color {
-            export const red: typeof _red;
-        }
-    }
-}

package/packages/css/src/ext/colors/rose.ts

@@ -1,25 +0,0 @@
-import { colorAssign } from "../../lib/colorAssign";
-
-const _rose = {
-    50: '#fff1f2',
-    100: '#ffe4e6',
-    200: '#fecdd3',
-    300: '#fda4af',
-    400: '#fb7185',
-    500: '#f43f5e',
-    600: '#e11d48',
-    700: '#be123c',
-    800: '#9f1239',
-    900: '#881337',
-    950: '#4c0519',
-} as const;
-
-colorAssign('rose', _rose);
-
-declare module '@amateras/core' {
-    export namespace $ {
-        export namespace color {
-            export const rose: typeof _rose;
-        }
-    }
-}

package/packages/css/src/ext/colors/sky.ts

@@ -1,25 +0,0 @@
-import { colorAssign } from "../../lib/colorAssign";
-
-const _sky = {
-    50: '#f0f9ff',
-    100: '#e0f2fe',
-    200: '#bae6fd',
-    300: '#7dd3fc',
-    400: '#38bdf8',
-    500: '#0ea5e9',
-    600: '#0284c7',
-    700: '#0369a1',
-    800: '#075985',
-    900: '#0c4a6e',
-    950: '#082f49',
-} as const;
-
-colorAssign('sky', _sky);
-
-declare module '@amateras/core' {
-    export namespace $ {
-        export namespace color {
-            export const sky: typeof _sky;
-        }
-    }
-}

package/packages/css/src/ext/colors/slate.ts

@@ -1,25 +0,0 @@
-import { colorAssign } from "../../lib/colorAssign";
-
-const _slate = {
-    50: '#f8fafc',
-    100: '#f1f5f9',
-    200: '#e2e8f0',
-    300: '#cbd5e1',
-    400: '#94a3b8',
-    500: '#64748b',
-    600: '#475569',
-    700: '#334155',
-    800: '#1e293b',
-    900: '#0f172a',
-    950: '#020617',
-} as const
-
-colorAssign('slate', _slate);
-
-declare module '@amateras/core' {
-    export namespace $ {
-        export namespace color {
-            export const slate: typeof _slate;
-        }
-    }
-}

package/packages/css/src/ext/colors/stone.ts

@@ -1,25 +0,0 @@
-import { colorAssign } from "../../lib/colorAssign";
-
-const _stone = {
-    50: '#fafaf9',
-    100: '#f5f5f4',
-    200: '#e7e5e4',
-    300: '#d6d3d1',
-    400: '#a8a29e',
-    500: '#78716c',
-    600: '#57534e',
-    700: '#44403c',
-    800: '#292524',
-    900: '#1c1917',
-    950: '#0c0a09',
-} as const;
-
-colorAssign('stone', _stone);
-
-declare module '@amateras/core' {
-    export namespace $ {
-        export namespace color {
-            export const stone: typeof _stone;
-        }
-    }
-}

package/packages/css/src/ext/colors/teal.ts

@@ -1,25 +0,0 @@
-import { colorAssign } from "../../lib/colorAssign";
-
-const _teal = {
-    50: '#f0fdfa',
-    100: '#ccfbf1',
-    200: '#99f6e4',
-    300: '#5eead4',
-    400: '#2dd4bf',
-    500: '#14b8a6',
-    600: '#0d9488',
-    700: '#0f766e',
-    800: '#115e59',
-    900: '#134e4a',
-    950: '#042f2e',
-} as const;
-
-colorAssign('teal', _teal);
-
-declare module '@amateras/core' {
-    export namespace $ {
-        export namespace color {
-            export const teal: typeof _teal;
-        }
-    }
-}

package/packages/css/src/ext/colors/violet.ts

@@ -1,25 +0,0 @@
-import { colorAssign } from "../../lib/colorAssign";
-
-const _violet = {
-    50: '#f5f3ff',
-    100: '#ede9fe',
-    200: '#ddd6fe',
-    300: '#c4b5fd',
-    400: '#a78bfa',
-    500: '#8b5cf6',
-    600: '#7c3aed',
-    700: '#6d28d9',
-    800: '#5b21b6',
-    900: '#4c1d95',
-    950: '#2e1065',
-} as const;
-
-colorAssign('violet', _violet);
-
-declare module '@amateras/core' {
-    export namespace $ {
-        export namespace color {
-            export const violet: typeof _violet;
-        }
-    }
-}

package/packages/css/src/ext/colors/yellow.ts

@@ -1,25 +0,0 @@
-import { colorAssign } from "../../lib/colorAssign";
-
-const _yellow = {
-    50: '#fefce8',
-    100: '#fef9c3',
-    200: '#fef08a',
-    300: '#fde047',
-    400: '#facc15',
-    500: '#eab308',
-    600: '#ca8a04',
-    700: '#a16207',
-    800: '#854d0e',
-    900: '#713f12',
-    950: '#422006',
-} as const;
-
-colorAssign('yellow', _yellow);
-
-declare module '@amateras/core' {
-    export namespace $ {
-        export namespace color {
-            export const yellow: typeof _yellow;
-        }
-    }
-}

package/packages/css/src/ext/colors/zinc.ts

@@ -1,25 +0,0 @@
-import { colorAssign } from "../../lib/colorAssign";
-
-const _zinc = {
-    50: '#fafafa',
-    100: '#f4f4f5',
-    200: '#e4e4e7',
-    300: '#d4d4d8',
-    400: '#a1a1aa',
-    500: '#71717a',
-    600: '#52525b',
-    700: '#3f3f46',
-    800: '#27272a',
-    900: '#18181b',
-    950: '#09090b',
-} as const;
-
-colorAssign('zinc', _zinc);
-
-declare module '@amateras/core' {
-    export namespace $ {
-        export namespace color {
-            export const zinc: typeof _zinc;
-        }
-    }
-}

package/packages/css/src/ext/colors.ts

@@ -1,23 +0,0 @@
-import './colors/amber';
-import './colors/blackwhite';
-import './colors/blue';
-import './colors/cyan';
-import './colors/emerald';
-import './colors/fuchsia';
-import './colors/gray';
-import './colors/green';
-import './colors/indigo';
-import './colors/lime';
-import './colors/neutral';
-import './colors/orange';
-import './colors/pink';
-import './colors/purple';
-import './colors/red';
-import './colors/rose';
-import './colors/sky';
-import './colors/slate';
-import './colors/stone';
-import './colors/teal';
-import './colors/violet';
-import './colors/yellow';
-import './colors/zinc';

package/packages/css/src/ext/container.ts

@@ -1,32 +0,0 @@
-import { _Array_from, _instanceof, _Object_entries, forEach, startsWith } from "@amateras/utils";
-import { $CSS, $CSSStyleRule } from "..";
-import { $CSSContainerRule } from "#structure/$CSSContainerRule";
-
-const CONTAINER = '@container'
-
-$CSS.cssTextProcessors.add((rule, _, options) => {
-    if (_instanceof(rule, $CSSContainerRule)) {
-        const containerContext = [...options?.containerContext ?? [], rule.condition];
-        const container: string[] = [], style: string[] = [];
-        forEach(
-            _Array_from(rule.rules)
-                .map(childRule => $CSS.cssText(childRule, '', {...options, containerContext}))
-                .flat(),
-            (childText => startsWith(childText, CONTAINER) ? container.push(childText) : style.push(childText))
-        );
-        return [`${CONTAINER} ${rule.name} ${containerContext.join(' and ')} { ${style.join('\n')} }`, ...container]
-    }
-})
-
-$CSS.createRuleProcessors.add((selector, options, context) => {
-    if (startsWith(selector, CONTAINER)) {
-        const rule = new $CSSContainerRule(selector);
-        // create media rule from $.CSS
-        if (!context) forEach(_Object_entries(options), ([key, value]) => rule.rules.add( $CSS.createRule(key, value) ))
-        // create from $.css
-        else rule.rules.add( $CSS.CSSOptions(new $CSSStyleRule(context), options) );
-        return rule;
-    }
-})
-
-export * from '#structure/$CSSContainerRule';

package/packages/css/src/ext/keyframes.ts

@@ -1,54 +0,0 @@
-import { _Object_assign, _Object_fromEntries, _Object_entries, forEach, _Array_from, _instanceof, startsWith } from "@amateras/utils";
-import { $CSS, $CSSStyleRule, type $CSSDeclarations } from ".."
-import { generateId } from "../lib/utils";
-import { $CSSKeyframesRule } from "#structure/$CSSKeyframesRule";
-
-declare module '@amateras/core' {
-    export namespace $ {
-        export namespace css {
-            export function keyframes<T extends { [key: string]: $CSSKeyframesType }>(options: T): { [key in keyof T]: $CSSKeyframesRule };
-        }
-
-        export interface $CSSGlobalDeclarationExtendsMap {
-            keyframes: $CSSKeyframesSelectorType;
-        }
-
-        export interface $CSSValueTypeExtendsMap {
-            keyframes: $CSSKeyframesRule
-        }
-    }
-}
-
-export type $CSSKeyframesSelectorType = { [key: `@keyframes ${string}`]: $CSSKeyframesType }
-export type $CSSKeyframesType = { [key: `${number}%`]: $CSSDeclarations } | { from?: $CSSDeclarations, to?: $CSSDeclarations }
-
-const KEYFRAMES = '@keyframes'
-
-$CSS.valueInstances.add($CSSKeyframesRule)
-
-$CSS.cssTextProcessors.add((rule, context, options) => {
-    if (_instanceof(rule, $CSSKeyframesRule)) 
-        return [`${KEYFRAMES} ${rule.name} { ${_Array_from(rule.rules).map(childRule => $CSS.cssText(childRule, context, options)).join('\n')} }`]
-})
-
-$CSS.createRuleProcessors.add((selector, options) => {
-    if (startsWith(selector, KEYFRAMES)) return createKeyframesRule(selector.replace('@keyframes ', ''), options as $CSSKeyframesType)
-})
-
-_Object_assign($.css, {
-    keyframes(options: $CSSKeyframesType) {
-        return _Object_fromEntries( _Object_entries(options).map(([name, value]) => {
-            return [name, $CSS.insertRule( createKeyframesRule(`${name}_${generateId()}`, value) )];
-        }) )
-    }
-})
-
-const createKeyframesRule = (name: string, options: $CSSKeyframesType) => {
-    const rule = new $CSSKeyframesRule(name);
-    forEach(_Object_entries(options), ([key, value]) => {
-        rule.rules.add( $CSS.CSSOptions(new $CSSStyleRule(key), value) );
-    })
-    return rule;
-}
-
-export * from '#structure/$CSSKeyframesRule'

package/packages/css/src/ext/media.ts

@@ -1,32 +0,0 @@
-import { _Array_from, _instanceof, _Object_entries, forEach, startsWith } from "@amateras/utils";
-import { $CSS, $CSSStyleRule } from "..";
-import { $CSSMediaRule } from "#structure/$CSSMediaRule";
-
-const MEDIA = '@media'
-
-$CSS.cssTextProcessors.add((rule, _, options) => {
-    if (_instanceof(rule, $CSSMediaRule)) {
-        const mediaContext = [...options?.mediaContext ?? [], rule.condition];
-        const media: string[] = [], style: string[] = []
-        forEach(
-            _Array_from(rule.rules)
-                .map(childRule => $CSS.cssText(childRule, '', {...options, mediaContext}))
-                .flat(),
-            (childText => startsWith(childText, MEDIA) ? media.push(childText) : style.push(childText))
-        );
-        return [`${MEDIA} ${mediaContext.join(' and ')} { ${style.join('\n')} }`, ...media]
-    }
-})
-
-$CSS.createRuleProcessors.add((selector, options, context) => {
-    if (startsWith(selector, MEDIA)) {
-        const rule = new $CSSMediaRule(selector);
-        // create media rule from $.CSS
-        if (!context) forEach(_Object_entries(options), ([key, value]) => rule.rules.add( $CSS.createRule(key, value) ))
-        // create from $.css
-        else rule.rules.add( $CSS.CSSOptions(new $CSSStyleRule(context), options) );
-        return rule;
-    }
-})
-
-export * from '#structure/$CSSMediaRule';

package/packages/css/src/ext/property.ts

@@ -1,48 +0,0 @@
-import { camelCaseToDash, generateId } from "#lib/utils";
-import { $CSSProperty } from "#structure/$CSSProperty";
-import { $CSS } from "..";
-import { _instanceof, _Object_assign, _Object_entries, forEach, isString, isUndefined } from "@amateras/utils";
-
-declare module '@amateras/core' {
-    export namespace $ {
-        export namespace css {
-            export function property<T extends $CSSPropertyMap>(resolver: T): { [key in keyof T]: $CSSProperty }
-            export function property(syntax: $CSSPropertySyntax, initialValue: string | number, inherits: boolean): $CSSProperty
-        }
-
-        export interface $CSSValueTypeExtendsMap {
-            property: $CSSProperty
-        }
-    }
-}
-
-export type $CSSPropertySyntax = 
-'<angle>' | '<color>' | '<custom-ident>' | 
-'<image>' | '<integer>' | '<length>' | 
-'<length-percentage>' | '<number>' | '<percentage>' | 
-'<resolution>' | '<string>' | '<time>' | 
-'<transform-function>' | '<transform-list>' | '<url>' |
-'auto' | '*' | string & {}
-
-export type $CSSPropertyMap = { [key: string]: [$CSSPropertySyntax, string | number, boolean] }
-
-_Object_assign($.css, {
-    property(resolver: $CSSPropertyMap | string, initialValue?: string | number, inherits?: boolean) {
-        if (isString(resolver)) {
-            if (isUndefined(initialValue) || isUndefined(inherits)) throw 'Register CSS Property Error';
-            const property = new $CSSProperty({ name: `--${generateId('lower')}`, syntax: resolver, initialValue: `${initialValue}`, inherits });
-            CSS.registerProperty(property)
-            return property;
-        } else {
-            const obj = {};
-            forEach(_Object_entries(resolver), ([key, [syntax, initialValue, inherits]]) => {
-                const property = new $CSSProperty({ name: `--${camelCaseToDash(key)}-${generateId('lower')}`, syntax, initialValue: `${initialValue}`, inherits });
-                _Object_assign(obj, { [key]: property });
-                CSS.registerProperty(property)
-            })
-            return obj;
-        }
-    }
-})
-
-$CSS.valueInstances.add($CSSProperty);

package/packages/css/src/ext/variable.ts

@@ -1,51 +0,0 @@
-import { _Object_assign, _Object_entries, _Object_fromEntries, isObject } from "@amateras/utils";
-import { $CSS, type $CSSValueType } from "..";
-import { camelCaseToDash, generateId } from "../lib/utils";
-import { $CSSVariable } from "#structure/$CSSVariable";
-
-declare module '@amateras/core' {
-    export namespace $ {
-        export namespace css {
-            export function variable<V extends string>(value: V): $CSSVariable<V>;
-            export function variable<T extends $CSSVariableType>(options: T, conditions?: $CSSVariableConditionType<T>): { [key in keyof T]: $CSSVariable<T[key]> }
-        }
-        
-        export interface $CSSValueTypeExtendsMap {
-            variable: $CSSVariable
-        }
-    }
-}
-
-export type $CSSVariableType<T = any> = { [key in keyof T]: $CSSValueType }
-export type $CSSVariableConditionType<T extends $CSSVariableType | string> = T extends string ? { [key: string]: $CSSValueType } : { [key: string]: Partial<$CSSVariableType<T>> }
-
-$CSS.valueInstances.add($CSSVariable)
-
-_Object_assign($.css, {
-    variable<T extends $CSSVariableType | string>(options: T, conditions?: $CSSVariableConditionType<T>) {
-        if (isObject(options)) {
-            const variables = _Object_fromEntries(_Object_entries(options).map(([key, value]) => [
-                key, 
-                new $CSSVariable(`--${camelCaseToDash(key)}_${generateId('lower')}`, `${value}`)
-            ]))
-
-            const conditionObj = conditions ? _Object_entries(conditions).map(([condition, _options]) => [
-                condition,
-                _Object_fromEntries(_Object_entries(_options).map(([key, value]) => [`${variables[key]?.name}`, `${value}`] as const))
-            ] as const) : [];
-
-            $.CSS({':root': {
-                ..._Object_fromEntries(_Object_entries(variables).map(([_, {name, value}]) => [name, value])),
-                ..._Object_fromEntries(conditionObj)
-            }})
-
-            return variables;
-        } else {
-            const variable = new $CSSVariable(`--${generateId('lower')}`, options);
-            $.CSS({':root': {[variable.name]: variable.value}});
-            return variable;
-        }
-    }
-})
-
-export * from '#structure/$CSSVariable'