amateras 0.6.0 → 0.7.0

package/{ext/css/src/lib → packages/css/src/ext}/colors/fuchsia.ts

@@ -1,4 +1,4 @@
-import { colorAssign } from "../colorAssign";
+import { colorAssign } from "../../lib/colorAssign";
 
 const _fuchsia = {
     50: '#fdf4ff',
@@ -16,7 +16,7 @@ const _fuchsia = {
 
 colorAssign('fuchsia', _fuchsia);
 
-declare module 'amateras/core' {
+declare module '@amateras/core' {
     export namespace $ {
         export namespace color {
             export const fuchsia: typeof _fuchsia;

package/{ext/css/src/lib → packages/css/src/ext}/colors/gray.ts

@@ -1,4 +1,4 @@
-import { colorAssign } from "../colorAssign";
+import { colorAssign } from "../../lib/colorAssign";
 
 const _gray = {
     50: '#f9fafb',
@@ -16,7 +16,7 @@ const _gray = {
 
 colorAssign('gray', _gray);
 
-declare module 'amateras/core' {
+declare module '@amateras/core' {
     export namespace $ {
         export namespace color {
             export const gray: typeof _gray;

package/{ext/css/src/lib → packages/css/src/ext}/colors/green.ts

@@ -1,4 +1,4 @@
-import { colorAssign } from "../colorAssign";
+import { colorAssign } from "../../lib/colorAssign";
 
 const _green = {
     50: '#f0fdf4',
@@ -16,7 +16,7 @@ const _green = {
 
 colorAssign('green', _green);
 
-declare module 'amateras/core' {
+declare module '@amateras/core' {
     export namespace $ {
         export namespace color {
             export const green: typeof _green;

package/{ext/css/src/lib → packages/css/src/ext}/colors/indigo.ts

@@ -1,4 +1,4 @@
-import { colorAssign } from "../colorAssign";
+import { colorAssign } from "../../lib/colorAssign";
 
 const _indigo = {
     50: '#eef2ff',
@@ -16,7 +16,7 @@ const _indigo = {
 
 colorAssign('indigo', _indigo);
 
-declare module 'amateras/core' {
+declare module '@amateras/core' {
     export namespace $ {
         export namespace color {
             export const indigo: typeof _indigo;

package/{ext/css/src/lib → packages/css/src/ext}/colors/lime.ts

@@ -1,4 +1,4 @@
-import { colorAssign } from "../colorAssign";
+import { colorAssign } from "../../lib/colorAssign";
 
 const _lime = {
     50: '#f7fee7',
@@ -16,7 +16,7 @@ const _lime = {
 
 colorAssign('lime', _lime);
 
-declare module 'amateras/core' {
+declare module '@amateras/core' {
     export namespace $ {
         export namespace color {
             export const lime: typeof _lime;

package/{ext/css/src/lib → packages/css/src/ext}/colors/neutral.ts

@@ -1,4 +1,4 @@
-import { colorAssign } from "../colorAssign";
+import { colorAssign } from "../../lib/colorAssign";
 
 const _neutral = {
     50: '#fafafa',
@@ -16,7 +16,7 @@ const _neutral = {
 
 colorAssign('neutral', _neutral);
 
-declare module 'amateras/core' {
+declare module '@amateras/core' {
     export namespace $ {
         export namespace color {
             export const neutral: typeof _neutral;

package/{ext/css/src/lib → packages/css/src/ext}/colors/orange.ts

@@ -1,4 +1,4 @@
-import { colorAssign } from "../colorAssign";
+import { colorAssign } from "../../lib/colorAssign";
 
 const _orange = {
     50: '#fff7ed',
@@ -16,7 +16,7 @@ const _orange = {
 
 colorAssign('orange', _orange);
 
-declare module 'amateras/core' {
+declare module '@amateras/core' {
     export namespace $ {
         export namespace color {
             export const orange: typeof _orange;

package/{ext/css/src/lib → packages/css/src/ext}/colors/pink.ts

@@ -1,4 +1,4 @@
-import { colorAssign } from "../colorAssign";
+import { colorAssign } from "../../lib/colorAssign";
 
 const _pink = {
     50: '#fdf2f8',
@@ -16,7 +16,7 @@ const _pink = {
 
 colorAssign('pink', _pink);
 
-declare module 'amateras/core' {
+declare module '@amateras/core' {
     export namespace $ {
         export namespace color {
             export const pink: typeof _pink;

package/{ext/css/src/lib → packages/css/src/ext}/colors/purple.ts

@@ -1,4 +1,4 @@
-import { colorAssign } from "../colorAssign";
+import { colorAssign } from "../../lib/colorAssign";
 
 const _purple = {
     50: '#faf5ff',
@@ -16,7 +16,7 @@ const _purple = {
 
 colorAssign('purple', _purple);
 
-declare module 'amateras/core' {
+declare module '@amateras/core' {
     export namespace $ {
         export namespace color {
             export const purple: typeof _purple;

package/{ext/css/src/lib → packages/css/src/ext}/colors/red.ts

@@ -1,4 +1,4 @@
-import { colorAssign } from "../colorAssign";
+import { colorAssign } from "../../lib/colorAssign";
 
 const _red = {
     50: '#fef2f2',
@@ -16,7 +16,7 @@ const _red = {
 
 colorAssign('red', _red);
 
-declare module 'amateras/core' {
+declare module '@amateras/core' {
     export namespace $ {
         export namespace color {
             export const red: typeof _red;

package/{ext/css/src/lib → packages/css/src/ext}/colors/rose.ts

@@ -1,4 +1,4 @@
-import { colorAssign } from "../colorAssign";
+import { colorAssign } from "../../lib/colorAssign";
 
 const _rose = {
     50: '#fff1f2',
@@ -16,7 +16,7 @@ const _rose = {
 
 colorAssign('rose', _rose);
 
-declare module 'amateras/core' {
+declare module '@amateras/core' {
     export namespace $ {
         export namespace color {
             export const rose: typeof _rose;

package/{ext/css/src/lib → packages/css/src/ext}/colors/sky.ts

@@ -1,4 +1,4 @@
-import { colorAssign } from "../colorAssign";
+import { colorAssign } from "../../lib/colorAssign";
 
 const _sky = {
     50: '#f0f9ff',
@@ -16,7 +16,7 @@ const _sky = {
 
 colorAssign('sky', _sky);
 
-declare module 'amateras/core' {
+declare module '@amateras/core' {
     export namespace $ {
         export namespace color {
             export const sky: typeof _sky;

package/{ext/css/src/lib → packages/css/src/ext}/colors/slate.ts

@@ -1,4 +1,4 @@
-import { colorAssign } from "../colorAssign";
+import { colorAssign } from "../../lib/colorAssign";
 
 const _slate = {
     50: '#f8fafc',
@@ -16,7 +16,7 @@ const _slate = {
 
 colorAssign('slate', _slate);
 
-declare module 'amateras/core' {
+declare module '@amateras/core' {
     export namespace $ {
         export namespace color {
             export const slate: typeof _slate;

package/{ext/css/src/lib → packages/css/src/ext}/colors/stone.ts

@@ -1,4 +1,4 @@
-import { colorAssign } from "../colorAssign";
+import { colorAssign } from "../../lib/colorAssign";
 
 const _stone = {
     50: '#fafaf9',
@@ -16,7 +16,7 @@ const _stone = {
 
 colorAssign('stone', _stone);
 
-declare module 'amateras/core' {
+declare module '@amateras/core' {
     export namespace $ {
         export namespace color {
             export const stone: typeof _stone;

package/{ext/css/src/lib → packages/css/src/ext}/colors/teal.ts

@@ -1,4 +1,4 @@
-import { colorAssign } from "../colorAssign";
+import { colorAssign } from "../../lib/colorAssign";
 
 const _teal = {
     50: '#f0fdfa',
@@ -16,7 +16,7 @@ const _teal = {
 
 colorAssign('teal', _teal);
 
-declare module 'amateras/core' {
+declare module '@amateras/core' {
     export namespace $ {
         export namespace color {
             export const teal: typeof _teal;

package/{ext/css/src/lib → packages/css/src/ext}/colors/violet.ts

@@ -1,4 +1,4 @@
-import { colorAssign } from "../colorAssign";
+import { colorAssign } from "../../lib/colorAssign";
 
 const _violet = {
     50: '#f5f3ff',
@@ -16,7 +16,7 @@ const _violet = {
 
 colorAssign('violet', _violet);
 
-declare module 'amateras/core' {
+declare module '@amateras/core' {
     export namespace $ {
         export namespace color {
             export const violet: typeof _violet;

package/{ext/css/src/lib → packages/css/src/ext}/colors/yellow.ts

@@ -1,4 +1,4 @@
-import { colorAssign } from "../colorAssign";
+import { colorAssign } from "../../lib/colorAssign";
 
 const _yellow = {
     50: '#fefce8',
@@ -16,7 +16,7 @@ const _yellow = {
 
 colorAssign('yellow', _yellow);
 
-declare module 'amateras/core' {
+declare module '@amateras/core' {
     export namespace $ {
         export namespace color {
             export const yellow: typeof _yellow;

package/{ext/css/src/lib → packages/css/src/ext}/colors/zinc.ts

@@ -1,4 +1,4 @@
-import { colorAssign } from "../colorAssign";
+import { colorAssign } from "../../lib/colorAssign";
 
 const _zinc = {
     50: '#fafafa',
@@ -16,7 +16,7 @@ const _zinc = {
 
 colorAssign('zinc', _zinc);
 
-declare module 'amateras/core' {
+declare module '@amateras/core' {
     export namespace $ {
         export namespace color {
             export const zinc: typeof _zinc;

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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,51 @@
+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'