@animus-ui/core 0.1.1-beta.5 → 0.1.1-beta.9

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.1-beta.9](https://github.com/codecaaron/animus/compare/@animus-ui/core@0.1.1-beta.8...@animus-ui/core@0.1.1-beta.9) (2022-01-18)
+
+**Note:** Version bump only for package @animus-ui/core
+
+
+
+
+
+## [0.1.1-beta.8](https://github.com/codecaaron/animus/compare/@animus-ui/core@0.1.1-beta.7...@animus-ui/core@0.1.1-beta.8) (2022-01-16)
+
+**Note:** Version bump only for package @animus-ui/core
+
+
+
+
+
+## [0.1.1-beta.7](https://github.com/codecaaron/animus/compare/@animus-ui/core@0.1.1-beta.6...@animus-ui/core@0.1.1-beta.7) (2022-01-16)
+
+**Note:** Version bump only for package @animus-ui/core
+
+
+
+
+
+## [0.1.1-beta.6](https://github.com/codecaaron/animus/compare/@animus-ui/core@0.1.1-beta.5...@animus-ui/core@0.1.1-beta.6) (2022-01-11)
+
+**Note:** Version bump only for package @animus-ui/core
+
+
+
+
+
 ## [0.1.1-beta.5](https://github.com/codecaaron/animus/compare/@animus-ui/core@0.1.1-beta.4...@animus-ui/core@0.1.1-beta.5) (2022-01-09)
 
 **Note:** Version bump only for package @animus-ui/core

package/README.md

@@ -1,86 +1 @@
-# Animus
-
-This is an experimental package for creating dynamic and typesafe style props.
-
-## Usage
-
-Configure your props with a simple configuration object. The keys of your object become your prop names and their values describe their responsibilities and valid types.
-
-```tsx
-import styled from '@emotion/styled';
-import { create } from '@animus-ui/core';
-
-const Container = styled.div(
-  create({
-    w: { property: 'width' },
-    p: { property: 'padding', scale: 'spacing' },
-  })
-);
-
-<Container w="100%" p={[16, 24]}>
-  Contained!
-</Container>;
-```
-
-## Composition
-
-You can compose props that you've created seperately to create new prop functions.
-
-```tsx
-import { create } from '@animus-ui/core';
-
-const spacing = create({
-  m: { property: 'padding', scale: 'margin' },
-  p: { property: 'padding', scale: 'spacing' },
-});
-
-const dimensions = create({
-  w: { property: 'width' },
-  h: { property: 'height' },
-});
-
-const combinedProps = compose(spacing, dimensions);
-
-const Box = styled.div(combinedProps);
-```
-
-## Static CSS
-
-```tsx
-import styled from '@emotion/styled';
-import { create } from '@animus-ui/core';
-
-const css = createCss({
-  m: { property: 'padding', scale: 'margin' },
-  p: { property: 'padding', scale: 'spacing' },
-});
-
-const MyCoolThing = styled.div(
-  css({
-    width: '100%',
-    height: '500px',
-    p: [32, , 64],
-  })
-);
-
-const variant = createVariant({
-  m: { property: 'padding', scale: 'margin' },
-  p: { property: 'padding', scale: 'spacing' },
-});
-
-const MyCoolThing = styled.div(
-  variant({
-    base: { width: '100%' },
-    variants: {
-      big: {
-        height: '500px',
-        p: [32, , 64],
-      },
-      small: {
-        height: '250px',
-        p: [16, , 32],
-      },
-    },
-  })
-);
-```
+# `animus-ui/core`

package/dist/Animus.d.ts

@@ -0,0 +1,63 @@
+/// <reference types="react" />
+import { AbstractProps, CSSPropMap, CSSProps, ThemeProps } from './types/props';
+import { CSSObject } from './types/shared';
+import { Parser, Prop, SystemProps, VariantConfig } from './types/config';
+import { Arg } from './types/utils';
+export declare class AnimusWithAll<PropRegistry extends Record<string, Prop>, GroupRegistry extends Record<string, (keyof PropRegistry)[]>, BaseParser extends Parser<PropRegistry>, BaseStyles extends CSSProps<AbstractProps, SystemProps<BaseParser>>, Variants extends Record<string, VariantConfig>, States extends CSSPropMap<AbstractProps, SystemProps<BaseParser>>, ActiveGroups extends Record<string, true>, CustomProps extends Record<string, Prop>> {
+    propRegistry: PropRegistry;
+    groupRegistry: GroupRegistry;
+    parser: BaseParser;
+    baseStyles: BaseStyles;
+    statesConfig: States;
+    variants: Variants;
+    activeGroups: ActiveGroups;
+    custom: CustomProps;
+    constructor(props: PropRegistry, groups: GroupRegistry, parser: BaseParser, base: BaseStyles, variants: Variants, states: States, activeGroups: ActiveGroups, custom: CustomProps);
+    asComponent<T extends keyof JSX.IntrinsicElements>(component: T): import("@emotion/styled").StyledComponent<{
+        theme?: import("@emotion/react").Theme | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & { [K_4 in keyof ThemeProps<{ [K in keyof Arg<BaseParser> as K extends GroupRegistry[Extract<keyof ActiveGroups, keyof GroupRegistry>][number] ? K : never]?: Arg<BaseParser>[K] | undefined; } & { [K_1 in keyof Variants]?: keyof Variants[K_1]["variants"] | undefined; } & { [K_2 in keyof States]?: boolean | undefined; } & { [K_3 in keyof import("./types/config").ParserProps<CustomProps>]: import("./types/config").ParserProps<CustomProps>[K_3]; }>]: ThemeProps<{ [K in keyof Arg<BaseParser> as K extends GroupRegistry[Extract<keyof ActiveGroups, keyof GroupRegistry>][number] ? K : never]?: Arg<BaseParser>[K] | undefined; } & { [K_1 in keyof Variants]?: keyof Variants[K_1]["variants"] | undefined; } & { [K_2 in keyof States]?: boolean | undefined; } & { [K_3 in keyof import("./types/config").ParserProps<CustomProps>]: import("./types/config").ParserProps<CustomProps>[K_3]; }>[K_4]; }, JSX.IntrinsicElements[T], {}>;
+    build(): (props: { [K in keyof ThemeProps<{ [K_1 in keyof Arg<BaseParser> as K_1 extends GroupRegistry[Extract<keyof ActiveGroups, keyof GroupRegistry>][number] ? K_1 : never]?: Arg<BaseParser>[K_1] | undefined; } & { [K_2 in keyof Variants]?: keyof Variants[K_2]["variants"] | undefined; } & { [K_3 in keyof States]?: boolean | undefined; } & { [K_4 in keyof import("./types/config").ParserProps<CustomProps>]: import("./types/config").ParserProps<CustomProps>[K_4]; }>]: ThemeProps<{ [K_1 in keyof Arg<BaseParser> as K_1 extends GroupRegistry[Extract<keyof ActiveGroups, keyof GroupRegistry>][number] ? K_1 : never]?: Arg<BaseParser>[K_1] | undefined; } & { [K_2 in keyof Variants]?: keyof Variants[K_2]["variants"] | undefined; } & { [K_3 in keyof States]?: boolean | undefined; } & { [K_4 in keyof import("./types/config").ParserProps<CustomProps>]: import("./types/config").ParserProps<CustomProps>[K_4]; }>[K]; }) => CSSObject;
+}
+declare class AnimusWithSystem<PropRegistry extends Record<string, Prop>, GroupRegistry extends Record<string, (keyof PropRegistry)[]>, BaseParser extends Parser<PropRegistry>, BaseStyles extends CSSProps<AbstractProps, SystemProps<BaseParser>>, Variants extends Record<string, VariantConfig>, States extends CSSPropMap<AbstractProps, SystemProps<BaseParser>>, ActiveGroups extends Record<string, true>> extends AnimusWithAll<PropRegistry, GroupRegistry, BaseParser, BaseStyles, Variants, States, ActiveGroups, {}> {
+    constructor(props: PropRegistry, groups: GroupRegistry, parser: BaseParser, base: BaseStyles, variants: Variants, states: States, activeGroups: ActiveGroups);
+    props<CustomProps extends Record<string, Prop>>(config: CustomProps): AnimusWithAll<PropRegistry, GroupRegistry, BaseParser, BaseStyles, Variants, States, ActiveGroups, CustomProps>;
+}
+declare class AnimusWithStates<PropRegistry extends Record<string, Prop>, GroupRegistry extends Record<string, (keyof PropRegistry)[]>, BaseParser extends Parser<PropRegistry>, BaseStyles extends CSSProps<AbstractProps, SystemProps<BaseParser>>, Variants extends Record<string, VariantConfig>, States extends CSSPropMap<AbstractProps, SystemProps<BaseParser>>> extends AnimusWithSystem<PropRegistry, GroupRegistry, BaseParser, BaseStyles, Variants, States, {}> {
+    constructor(props: PropRegistry, groups: GroupRegistry, parser: BaseParser, base: BaseStyles, variants: Variants, states: States);
+    groups<PickedGroups extends keyof GroupRegistry>(config: Record<PickedGroups, true>): AnimusWithSystem<PropRegistry, GroupRegistry, BaseParser, BaseStyles, Variants, States, Record<PickedGroups, true>>;
+}
+declare class AnimusWithVariants<PropRegistry extends Record<string, Prop>, GroupRegistry extends Record<string, (keyof PropRegistry)[]>, BaseParser extends Parser<PropRegistry>, BaseStyles extends CSSProps<AbstractProps, SystemProps<BaseParser>>, Variants extends Record<string, VariantConfig>> extends AnimusWithStates<PropRegistry, GroupRegistry, BaseParser, BaseStyles, Variants, {}> {
+    constructor(props: PropRegistry, groups: GroupRegistry, parser: BaseParser, base: BaseStyles, variants: Variants);
+    states<Props extends AbstractProps>(config: CSSPropMap<Props, SystemProps<BaseParser>>): AnimusWithStates<PropRegistry, GroupRegistry, BaseParser, BaseStyles, Variants, CSSPropMap<Props, SystemProps<BaseParser, Omit<Arg<BaseParser>, "theme">>>>;
+    variant<Keys extends keyof Props, Base extends AbstractProps, Props extends Record<Keys, AbstractProps>, PropKey extends Readonly<string> = 'variant'>(options: {
+        prop?: PropKey;
+        defaultVariant?: keyof Props;
+        base?: CSSProps<Base, SystemProps<BaseParser>>;
+        variants: CSSPropMap<Props, SystemProps<BaseParser>>;
+    }): AnimusWithVariants<PropRegistry, GroupRegistry, BaseParser, BaseStyles, Variants & Record<PropKey, {
+        prop?: PropKey | undefined;
+        defaultVariant?: keyof Props | undefined;
+        base?: CSSProps<Base, SystemProps<BaseParser, Omit<Arg<BaseParser>, "theme">>> | undefined;
+        variants: CSSPropMap<Props, SystemProps<BaseParser>>;
+    }>>;
+}
+declare class AnimusWithBase<PropRegistry extends Record<string, Prop>, GroupRegistry extends Record<string, (keyof PropRegistry)[]>, BaseParser extends Parser<PropRegistry>, BaseStyles extends CSSProps<AbstractProps, SystemProps<BaseParser>>> extends AnimusWithVariants<PropRegistry, GroupRegistry, BaseParser, BaseStyles, {}> {
+    constructor(props: PropRegistry, groups: GroupRegistry, parser: BaseParser, base: BaseStyles);
+    variant<Keys extends keyof Props, Base extends AbstractProps, Props extends Record<Keys, AbstractProps>, PropKey extends Readonly<string> = 'variant'>(options: {
+        prop?: PropKey;
+        defaultVariant?: keyof Props;
+        base?: CSSProps<Base, SystemProps<BaseParser>>;
+        variants: CSSPropMap<Props, SystemProps<BaseParser>>;
+    }): AnimusWithVariants<PropRegistry, GroupRegistry, BaseParser, BaseStyles, Record<PropKey, {
+        prop?: PropKey | undefined;
+        defaultVariant?: keyof Props | undefined;
+        base?: CSSProps<Base, SystemProps<BaseParser, Omit<Arg<BaseParser>, "theme">>> | undefined;
+        variants: CSSPropMap<Props, SystemProps<BaseParser>>;
+    }>>;
+}
+export declare class Animus<PropRegistry extends Record<string, Prop>, GroupRegistry extends Record<string, (keyof PropRegistry)[]>, BaseParser extends Parser<PropRegistry>> extends AnimusWithBase<PropRegistry, GroupRegistry, BaseParser, {}> {
+    constructor(props: PropRegistry, groups: GroupRegistry);
+    styles<Props extends AbstractProps>(config: CSSProps<Props, SystemProps<BaseParser>>): AnimusWithBase<PropRegistry, GroupRegistry, BaseParser, CSSProps<Props, SystemProps<BaseParser, Omit<Arg<BaseParser>, "theme">>>>;
+}
+export {};

package/dist/AnimusConfig.d.ts

@@ -0,0 +1,8 @@
+import { Prop } from './types/config';
+import { Animus } from './Animus';
+export declare class AnimusConfig<C extends Record<string, Prop> = {}, G extends Record<string, (keyof C)[]> = {}> {
+    #private;
+    constructor(config?: C, groups?: G);
+    addGroup<Name extends string, Conf extends Record<string, Prop>, PropNames extends keyof Conf>(name: Name, config: Conf): AnimusConfig<C & Conf, G & Record<Name, PropNames[]>>;
+    build(): Animus<{ [K in keyof C]: C[K]; }, { [K_1 in keyof G]: G[K_1]; }, import("./types/config").Parser<{ [K in keyof C]: C[K]; }>>;
+}

package/dist/compatTheme.d.ts

@@ -0,0 +1,20 @@
+export declare const compatTheme: {
+    readonly spacing: readonly [0, 4, 8, 12, 16, 24, 32, 40, 48, 64, 96];
+    readonly fontSize: readonly [64, 44, 34, 26, 22, 20, 18, 16, 14];
+    readonly lineHeight: {
+        readonly body: 1.5;
+        readonly heading: 1;
+    };
+    readonly fontWeight: readonly [400, 600, 700];
+    readonly fontFamily: {
+        readonly body: "Verdana, sans-serif";
+        readonly heading: "Verdana, Lato, sans-serif";
+        readonly monospace: "monospace";
+    };
+    readonly radii: readonly [2, 4, 6, 8];
+    readonly borders: readonly [1, 2, 3];
+    readonly colors: {};
+    readonly modes: {};
+    readonly mode: undefined;
+};
+export declare type CompatTheme = typeof compatTheme;