@goncharovv/layout 0.0.3 → 0.1.0

package/dist/components/Form/Fieldset.d.ts

@@ -0,0 +1,7 @@
+import { ComponentProps, FunctionComponent } from 'react';
+import { StackProps } from '../Stacks';
+type StackFieldsetProps = Omit<StackProps<'fieldset'>, 'as'>;
+export interface FieldsetProps extends StackFieldsetProps, Omit<ComponentProps<'fieldset'>, keyof StackFieldsetProps> {
+}
+export declare const Fieldset: FunctionComponent<FieldsetProps>;
+export {};

package/dist/components/Form/Fieldset.js

@@ -0,0 +1,16 @@
+import cn from 'classnames';
+import { createStack } from '../Stacks/factory';
+import { getStackClassesAndStyles } from '../Stacks/Stack';
+import styles from './Form.module.css';
+export const Fieldset = createStack('Fieldset', {
+    overrideProps: (props) => {
+        const { direction, horizontal, vertical: _, className, style, ...rest } = props;
+        const stackClassesAndStyles = getStackClassesAndStyles({ direction, horizontal, vertical: true, className, style });
+        return {
+            ...rest,
+            as: 'fieldset',
+            className: cn(styles.fieldset, stackClassesAndStyles.className),
+            style: stackClassesAndStyles.style,
+        };
+    },
+});

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,7 @@
+import { ComponentProps, FunctionComponent } from 'react';
+import { StackProps } from '../Stacks';
+type StackFormProps = Omit<StackProps<'form'>, 'as'>;
+export interface FormProps extends StackFormProps, Omit<ComponentProps<'form'>, keyof StackFormProps> {
+}
+export declare const Form: FunctionComponent<FormProps>;
+export {};

package/dist/components/Form/Form.js

@@ -0,0 +1,16 @@
+import cn from 'classnames';
+import { createStack } from '../Stacks/factory';
+import { getStackClassesAndStyles } from '../Stacks/Stack';
+import styles from './Form.module.css';
+export const Form = createStack('Form', {
+    overrideProps: (props) => {
+        const { direction, horizontal, vertical: _, className, style, ...rest } = props;
+        const stackClassesAndStyles = getStackClassesAndStyles({ direction, horizontal, vertical: true, className, style });
+        return {
+            ...rest,
+            as: 'form',
+            className: cn(styles.form, stackClassesAndStyles.className),
+            style: stackClassesAndStyles.style,
+        };
+    },
+});

package/dist/components/Form/Form.module.css

@@ -0,0 +1,6 @@
+.form,
+.fieldset {
+    margin: 0;
+    padding: 0;
+    border: 0;
+}

package/dist/components/Form/FormActions.d.ts

@@ -0,0 +1,7 @@
+import { ComponentProps, FunctionComponent } from 'react';
+import { StackProps } from '../Stacks';
+type StackFormProps = Omit<StackProps<'div'>, 'as'>;
+export interface FormActionsProps extends StackFormProps, Omit<ComponentProps<'div'>, keyof StackFormProps> {
+}
+export declare const FormActions: FunctionComponent<FormActionsProps>;
+export {};

package/dist/components/Form/FormActions.js

@@ -0,0 +1,13 @@
+import { createStack } from '../Stacks/factory';
+import { getStackClassesAndStyles } from '../Stacks/Stack';
+export const FormActions = createStack('FormActions', {
+    overrideProps: (props) => {
+        const { direction, horizontal, vertical, className, style, ...rest } = props;
+        const stackClassesAndStyles = getStackClassesAndStyles({ direction, horizontal, vertical, className, style });
+        return {
+            as: 'div',
+            ...rest,
+            ...stackClassesAndStyles,
+        };
+    },
+});

package/dist/components/Form/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Fieldset';
+export * from './Form';
+export * from './FormActions';

package/dist/components/Form/index.js

@@ -0,0 +1,3 @@
+export * from './Fieldset';
+export * from './Form';
+export * from './FormActions';

package/dist/components/Stacks/HStack.d.ts

@@ -1,9 +1,9 @@
 import { BaseStackProps } from './factory';
 export interface HStackProps extends BaseStackProps {
-    reverse?: boolean;
+    reversed?: boolean;
 }
 export declare const HStack: <TElementType extends import("react").ElementType = "div">(props: import("./factory").StackPropsBuilder<TElementType, HStackProps, {
-    reverse?: boolean | undefined;
+    reversed?: boolean | undefined;
     as?: "div" | undefined;
     alignItems?: import("csstype").Property.AlignItems | undefined;
     align?: import("csstype").Property.AlignItems | undefined;

package/dist/components/Stacks/HStack.js

@@ -3,13 +3,12 @@ import { createStack } from './factory';
 import styles from './Stack.module.css';
 export const HStack = createStack('HStack', {
     overrideProps: (props) => {
-        const { reverse, className, ...rest } = props;
+        const { reversed, className, ...rest } = props;
         return {
             ...rest,
             className: cn(styles.horizontal, {
-                [styles.reversed]: reverse,
+                [styles.reversed]: reversed,
             }, className),
         };
     },
 });
-//# sourceMappingURL=HStack.js.map

package/dist/components/Stacks/Stack.d.ts

@@ -1,12 +1,12 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, ElementType } from 'react';
 import { BaseStackProps } from './factory';
 export type StackDirection = 'vertical' | 'horizontal';
-export interface StackProps extends BaseStackProps {
+export interface StackProps<TElementType extends ElementType = 'div'> extends BaseStackProps<TElementType> {
     vertical?: boolean;
     horizontal?: boolean;
     direction?: CSSProperties['flexDirection'];
 }
-export declare const Stack: <TElementType extends import("react").ElementType = "div">(props: import("./factory").StackPropsBuilder<TElementType, StackProps, {
+export declare const Stack: <TElementType extends ElementType = "div">(props: import("./factory").StackPropsBuilder<TElementType, StackProps<"div">, {
     vertical?: boolean | undefined;
     horizontal?: boolean | undefined;
     direction?: import("csstype").Property.FlexDirection | undefined;
@@ -23,3 +23,7 @@ export declare const Stack: <TElementType extends import("react").ElementType =
     children?: import("react").ReactNode;
     spacing?: import("../../shared/spacings").Spacing | undefined;
 }>) => import("react").ReactNode;
+export declare function getStackClassesAndStyles(props: Pick<StackProps, 'direction' | 'horizontal' | 'vertical' | 'className' | 'style'>): {
+    className: string;
+    style: CSSProperties;
+};

package/dist/components/Stacks/Stack.js

@@ -3,17 +3,23 @@ import { createStack } from './factory';
 import styles from './Stack.module.css';
 export const Stack = createStack('Stack', {
     overrideProps: (props) => {
-        const { direction, horizontal, vertical, className, ...rest } = props;
+        const { direction, horizontal, vertical, className, style, ...rest } = props;
         return {
             ...rest,
-            className: cn({
-                [styles.vertical]: vertical,
-                [styles.horizontal]: horizontal,
-            }, className),
-            styles: {
-                flexDirection: direction,
-            },
+            ...getStackClassesAndStyles({ direction, horizontal, vertical, className, style }),
         };
     },
 });
-//# sourceMappingURL=Stack.js.map
+export function getStackClassesAndStyles(props) {
+    const { direction, horizontal, vertical, className, style } = props;
+    return {
+        className: cn({
+            [styles.vertical]: vertical && !horizontal && !direction,
+            [styles.horizontal]: horizontal && !direction,
+        }, className),
+        style: {
+            flexDirection: direction,
+            ...style,
+        },
+    };
+}

package/dist/components/Stacks/Stack.module.css

@@ -0,0 +1,22 @@
+.stack {
+    display: flex;
+}
+
+.vertical {
+    flex-direction: column;
+}
+.vertical.reversed {
+    flex-direction: column-reverse;;
+}
+
+.horizontal {
+    flex-direction: row;
+}
+.horizontal.reversed {
+    flex-direction: row-reverse;
+}
+
+.centered {
+    align-items: center;
+    justify-content: center;
+}

package/dist/components/Stacks/VStack.d.ts

@@ -1,9 +1,9 @@
 import { BaseStackProps } from './factory';
 export interface VStackProps extends BaseStackProps {
-    reverse?: boolean;
+    reversed?: boolean;
 }
 export declare const VStack: <TElementType extends import("react").ElementType = "div">(props: import("./factory").StackPropsBuilder<TElementType, VStackProps, {
-    reverse?: boolean | undefined;
+    reversed?: boolean | undefined;
     as?: "div" | undefined;
     alignItems?: import("csstype").Property.AlignItems | undefined;
     align?: import("csstype").Property.AlignItems | undefined;

package/dist/components/Stacks/VStack.js

@@ -3,13 +3,12 @@ import { createStack } from './factory';
 import styles from './Stack.module.css';
 export const VStack = createStack('VStack', {
     overrideProps: (props) => {
-        const { reverse, className, ...rest } = props;
+        const { reversed, className, ...rest } = props;
         return {
             ...rest,
             className: cn(styles.vertical, {
-                [styles.reversed]: reverse,
+                [styles.reversed]: reversed,
             }, className),
         };
     },
 });
-//# sourceMappingURL=VStack.js.map

package/dist/components/Stacks/factory.d.ts

@@ -1,4 +1,4 @@
-import React, { CSSProperties, ElementType, PropsWithChildren, ReactNode } from 'react';
+import { ComponentProps, CSSProperties, ElementType, PropsWithChildren, ReactNode } from 'react';
 import { PropsWithSpacing } from '../../shared/spacings';
 import { Prettify } from '../../shared/types';
 export interface BaseStackProps<TElementType extends ElementType = 'div'> extends PropsWithChildren, PropsWithSpacing {
@@ -39,7 +39,7 @@ export interface BaseStackProps<TElementType extends ElementType = 'div'> extend
  */
 export type StackPropsBuilder<TElementType extends ElementType, TProps, _TPropsHint = Prettify<TProps>> = {
     as?: TElementType;
-} & Omit<TProps, 'as'> & Omit<React.ComponentPropsWithoutRef<TElementType>, keyof Omit<TProps, 'as'>>;
+} & Omit<TProps, 'as'> & Omit<ComponentProps<TElementType>, keyof Omit<TProps, 'as'>>;
 export declare function createStack<TProps extends BaseStackProps>(name: string, options: {
     overrideProps?: (props: TProps) => BaseStackProps;
 }): <TElementType extends ElementType = "div">(props: StackPropsBuilder<TElementType, TProps>) => ReactNode;

package/dist/components/Stacks/factory.js

@@ -23,4 +23,3 @@ export function createStack(name, options) {
      */
     return Component;
 }
-//# sourceMappingURL=factory.js.map

package/dist/components/Stacks/index.d.ts

@@ -1,3 +1,3 @@
 export * from './HStack';
-export * from './Stack';
+export { Stack, type StackDirection, type StackProps } from './Stack';
 export * from './VStack';

package/dist/components/Stacks/index.js

@@ -1,4 +1,3 @@
 export * from './HStack';
-export * from './Stack';
+export { Stack } from './Stack';
 export * from './VStack';
-//# sourceMappingURL=index.js.map

package/dist/components/index.d.ts

@@ -1 +1,2 @@
+export * from './Form';
 export * from './Stacks';

package/dist/components/index.js

@@ -1,2 +1,2 @@
+export * from './Form';
 export * from './Stacks';
-//# sourceMappingURL=index.js.map

package/dist/index.js

@@ -1,2 +1 @@
 export * from './components';
-//# sourceMappingURL=index.js.map

package/dist/shared/spacings/config.js

@@ -28,4 +28,3 @@ export function getSpacingStyles(spacing) {
         gap: `var(--spacing-${spacing})`,
     };
 }
-//# sourceMappingURL=config.js.map

package/dist/shared/spacings/index.js

@@ -1,2 +1 @@
 export * from './config';
-//# sourceMappingURL=index.js.map

package/dist/shared/types/index.js

@@ -1,2 +1 @@
 export {};
-//# sourceMappingURL=index.js.map

package/dist/styles/index.css

@@ -0,0 +1 @@
+@import './spacings.css';

package/dist/styles/spacings.css

@@ -0,0 +1,20 @@
+/*
+ * MUST keep in sync with the `shared/spacings/config.ts`
+ */
+
+:root {
+    --spacing-small-xxs: 0px;
+    --spacing-small-xs: 2px;
+    --spacing-small-s: 4px;
+    --spacing-small-m: 6px;
+    --spacing-small-l: 8px;
+    --spacing-medium-xs: 12px;
+    --spacing-medium-s: 16px;
+    --spacing-medium-m: 20px;
+    --spacing-medium-l: 24px;
+    --spacing-large-xxs: 32px;
+    --spacing-large-xs: 40px;
+    --spacing-large-s: 48px;
+    --spacing-large-m: 64px;
+    --spacing-large-l: 80px;
+}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@goncharovv/layout",
   "private": false,
-  "version": "0.0.3",
+  "version": "0.1.0",
   "type": "module",
-  "main": "dist/esm/index.js",
-  "types": "dist/esm/index.d.ts",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],

package/dist/components/Stacks/HStack.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HStack.js","sourceRoot":"","sources":["../../../lib/components/Stacks/HStack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAkB,WAAW,EAAE,MAAM,WAAW,CAAC;AAExD,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAOxC,MAAM,CAAC,MAAM,MAAM,GAAG,WAAW,CAAc,QAAQ,EAAE;IACvD,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;QACvB,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;QAE9C,OAAO;YACL,GAAG,IAAI;YACP,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE;gBAC/B,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,OAAO;aAC3B,EAAE,SAAS,CAAC;SACd,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}

package/dist/components/Stacks/Stack.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../../lib/components/Stacks/Stack.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAkB,WAAW,EAAE,MAAM,WAAW,CAAC;AAExD,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAYxC,MAAM,CAAC,MAAM,KAAK,GAAG,WAAW,CAAa,OAAO,EAAE;IACpD,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;QACvB,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;QAEtE,OAAO;YACL,GAAG,IAAI;YACP,SAAS,EAAE,EAAE,CACX;gBACE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;gBAC3B,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,UAAU;aAChC,EACD,SAAS,CACV;YACD,MAAM,EAAE;gBACN,aAAa,EAAE,SAAS;aACzB;SACF,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}

package/dist/components/Stacks/VStack.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"VStack.js","sourceRoot":"","sources":["../../../lib/components/Stacks/VStack.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAkB,WAAW,EAAE,MAAM,WAAW,CAAC;AAExD,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAQxC,MAAM,CAAC,MAAM,MAAM,GAAG,WAAW,CAAc,QAAQ,EAAE;IACvD,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;QACvB,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;QAE9C,OAAO;YACL,GAAG,IAAI;YACP,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE;gBAC7B,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,OAAO;aAC3B,EAAE,SAAS,CAAC;SACd,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}

package/dist/components/Stacks/factory.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"factory.js","sourceRoot":"","sources":["../../../lib/components/Stacks/factory.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,gBAAgB,EAAoB,MAAM,uBAAuB,CAAC;AAG3E,OAAO,MAAM,MAAM,oBAAoB,CAAC;AAoDxC,MAAM,UAAU,WAAW,CACzB,IAAY,EACZ,OAA+D;IAE/D,MAAM,SAAS,GAAG,SAAS,YAAY,CACrC,MAAwC;QAExC,MAAM,KAAK,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,MAAgB,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;QAEvF,wDAAwD;QACxD,MAAM,EACJ,EAAE,EAAE,OAAO,GAAG,KAAK,EACnB,KAAK,EACL,UAAU,EACV,QAAQ,EACR,GAAG,EACH,OAAO,EACP,cAAc,EACd,OAAO,EACP,KAAK,EACL,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;QAEV,OAAO,CACL,KAAC,OAAO,OACF,IAAI,EACR,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,KAAK,EACZ;gBACE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;aAC5B,EACD,SAAS,CACV,EACD,KAAK,EAAE;gBACL,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;gBAClD,QAAQ,EAAE,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;gBACvC,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,UAAU,IAAI,KAAK,CAAC;gBACxD,cAAc,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,cAAc,IAAI,OAAO,CAAC;gBAClE,GAAG,KAAK;aACT,YAEA,QAAQ,GACD,CACX,CAAC;IACJ,CAAC,CAAC;IAEF,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC;IAE7B;;OAEG;IACH,OAAO,SAEO,CAAC;AACjB,CAAC"}

package/dist/components/Stacks/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../lib/components/Stacks/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}

package/dist/components/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/shared/spacings/config.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"config.js","sourceRoot":"","sources":["../../../lib/shared/spacings/config.ts"],"names":[],"mappings":"AAGA,EAAE;AACF,4CAA4C;AAC5C,EAAE;AACF,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,CAAC;IACb,SAAS,EAAE,CAAC;IACZ,SAAS,EAAE,CAAC;IACZ,SAAS,EAAE,CAAC;IACZ,WAAW,EAAE,EAAE;IACf,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,EAAE;IACd,UAAU,EAAE,EAAE;IACd,WAAW,EAAE,EAAE;IACf,UAAU,EAAE,EAAE;IACd,SAAS,EAAE,EAAE;IACb,SAAS,EAAE,EAAE;IACb,SAAS,EAAE,EAAE;CACd,CAAC;AA4BF,MAAM,UAAU,UAAU,CAAC,OAA4B;IACrD,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,OAAO,QAAQ,CAAC,OAAO,CAAC,CAAC;AAC3B,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,OAA4B;IAC3D,OAAO;QACL,GAAG,EAAE,iBAAiB,OAAO,GAAG;KACjC,CAAC;AACJ,CAAC"}

package/dist/shared/spacings/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../lib/shared/spacings/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/dist/shared/types/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../lib/shared/types/index.ts"],"names":[],"mappings":""}