@goncharovv/layout 0.1.3 → 0.1.4

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

@@ -11,9 +11,14 @@ export declare const HStack: <TElementType extends import("react").ElementType =
     justify?: import("csstype").Property.JustifyContent | undefined;
     wrap?: true | import("csstype").Property.FlexWrap | undefined;
     gap?: number | undefined;
+    flex?: import("csstype").Property.Flex<string | number> | undefined;
     centered?: boolean | undefined;
+    width?: import("csstype").Property.Width<string | number> | undefined;
     style?: import("react").CSSProperties | undefined;
     className?: string | undefined;
     children?: import("react").ReactNode;
     spacing?: import("../../shared/spacings").Spacing | undefined;
+    p?: import("../../shared/spacings").Spacing | undefined;
+    ph?: import("../../shared/spacings").Spacing | undefined;
+    pv?: import("../../shared/spacings").Spacing | undefined;
 }>) => import("react").ReactNode;

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

@@ -17,11 +17,16 @@ export declare const Stack: <TElementType extends ElementType = "div">(props: im
     justify?: import("csstype").Property.JustifyContent | undefined;
     wrap?: true | import("csstype").Property.FlexWrap | undefined;
     gap?: number | undefined;
+    flex?: import("csstype").Property.Flex<string | number> | undefined;
     centered?: boolean | undefined;
+    width?: import("csstype").Property.Width<string | number> | undefined;
     style?: CSSProperties | undefined;
     className?: string | undefined;
     children?: import("react").ReactNode;
     spacing?: import("../../shared/spacings").Spacing | undefined;
+    p?: import("../../shared/spacings").Spacing | undefined;
+    ph?: import("../../shared/spacings").Spacing | undefined;
+    pv?: import("../../shared/spacings").Spacing | undefined;
 }>) => import("react").ReactNode;
 export declare function getStackClassesAndStyles(props: Pick<StackProps, 'direction' | 'horizontal' | 'vertical' | 'className' | 'style'>): {
     className: string;

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

@@ -11,9 +11,14 @@ export declare const VStack: <TElementType extends import("react").ElementType =
     justify?: import("csstype").Property.JustifyContent | undefined;
     wrap?: true | import("csstype").Property.FlexWrap | undefined;
     gap?: number | undefined;
+    flex?: import("csstype").Property.Flex<string | number> | undefined;
     centered?: boolean | undefined;
+    width?: import("csstype").Property.Width<string | number> | undefined;
     style?: import("react").CSSProperties | undefined;
     className?: string | undefined;
     children?: import("react").ReactNode;
     spacing?: import("../../shared/spacings").Spacing | undefined;
+    p?: import("../../shared/spacings").Spacing | undefined;
+    ph?: import("../../shared/spacings").Spacing | undefined;
+    pv?: import("../../shared/spacings").Spacing | undefined;
 }>) => import("react").ReactNode;

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

@@ -1,28 +1,30 @@
 import { ComponentProps, CSSProperties, ElementType, PropsWithChildren, ReactNode } from 'react';
+import { PropsWithPaddings } from '../../shared/paddings';
 import { PropsWithSpacing } from '../../shared/spacings';
 import { Prettify } from '../../shared/types';
-export interface BaseStackProps<TElementType extends ElementType = 'div'> extends PropsWithChildren, PropsWithSpacing {
+export interface BaseStackProps<TElementType extends ElementType = 'div'> extends PropsWithChildren, PropsWithSpacing, PropsWithPaddings {
     as?: TElementType;
     alignItems?: CSSProperties['alignItems'];
     /**
-       * shortcut for `alignItems`
-       */
+     * shortcut for `alignItems`
+     */
     align?: CSSProperties['alignItems'];
     justifyContent?: CSSProperties['justifyContent'];
     /**
-       * shortcut for `justifyContent`
-       */
+     * shortcut for `justifyContent`
+     */
     justify?: CSSProperties['justifyContent'];
     /**
-       * `flex-wrap` property
-       *
-       * If value equals `true`, add css property `flex-wrap: wrap`;
-       */
+     * `flex-wrap` property
+     *
+     * If value equals `true`, add css property `flex-wrap: wrap`;
+     */
     wrap?: true | CSSProperties['flexWrap'];
     /**
      * Custom gap. This is uncommon prop. Consider using `spacing` instead.
      */
     gap?: number;
+    flex?: CSSProperties['flex'];
     /**
      * Alias for:
      * ```css
@@ -31,6 +33,7 @@ export interface BaseStackProps<TElementType extends ElementType = 'div'> extend
      * ```
      */
     centered?: boolean;
+    width?: CSSProperties['width'];
     style?: CSSProperties;
     className?: string;
 }

package/dist/components/Stacks/factory.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import cn from 'classnames';
+import { getPaddingStyles } from '../../shared/paddings';
 import { getSpacingStyles } from '../../shared/spacings';
 import styles from './Stack.module.css';
 export function createStack(name, options) {
     const Component = function GenericStack(_props) {
         const props = options.overrideProps ? options.overrideProps(_props) : _props;
         // WARNING: Avoid proxying *component props* to real DOM
-        const { as: Element = 'div', align, alignItems, centered, gap, justify, justifyContent, spacing, style, wrap, className, children, ...rest } = props;
+        const { as: Element = 'div', align, alignItems, centered, gap, justify, justifyContent, spacing, style, wrap, className, children, p, pv, ph, width, flex, ...rest } = props;
         return (_jsx(Element, { ...rest, className: cn(styles.stack, {
                 [styles.centered]: centered,
             }, className), style: {
@@ -14,6 +15,9 @@ export function createStack(name, options) {
                 flexWrap: wrap === true ? 'wrap' : wrap,
                 alignItems: centered ? undefined : (alignItems ?? align),
                 justifyContent: centered ? undefined : (justifyContent ?? justify),
+                width,
+                flex,
+                ...getPaddingStyles({ p, pv, ph }),
                 ...style,
             }, children: children }));
     };

package/dist/shared/paddings/index.d.ts

@@ -0,0 +1 @@
+export * from './paddings';

package/dist/shared/paddings/index.js

@@ -0,0 +1 @@
+export * from './paddings';

package/dist/shared/paddings/paddings.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties } from 'react';
+import { Spacing } from '../spacings';
+export interface PropsWithPaddings {
+    /**
+     * padding
+     */
+    p?: Spacing;
+    /**
+     * padding-horizontal. applies to `padding-left` and `padding-right`
+     */
+    ph?: Spacing;
+    /**
+     * padding-vertical. applies to `padding-top` and `padding-bottom`
+     */
+    pv?: Spacing;
+}
+export declare function getPaddingStyles(props: PropsWithPaddings): CSSProperties;

package/dist/shared/paddings/paddings.js

@@ -0,0 +1,17 @@
+import { getSpacingStyleVariable } from '../spacings';
+export function getPaddingStyles(props) {
+    const { p, ph, pv } = props;
+    if (p) {
+        return {
+            padding: getSpacingStyleVariable(p),
+        };
+    }
+    if (!ph && !pv) {
+        return {};
+    }
+    const horizontal = getSpacingStyleVariable(ph) ?? 0;
+    const vertical = getSpacingStyleVariable(pv) ?? 0;
+    return {
+        padding: `${vertical} ${horizontal}`,
+    };
+}

package/dist/shared/spacings/config.d.ts

@@ -5,10 +5,12 @@ export declare const spacings: {
     'small-s': number;
     'small-m': number;
     'small-l': number;
+    'small-xl': number;
     'medium-xs': number;
     'medium-s': number;
     'medium-m': number;
     'medium-l': number;
+    'medium-xl': number;
     'large-xxs': number;
     'large-xs': number;
     'large-s': number;
@@ -24,11 +26,13 @@ export interface PropsWithSpacing {
      *      - 'small-s': 4px
      *      - 'small-m': 6px
      *      - 'small-l': 8px
+     *      - 'small-xl': 10px
      * - medium:
      *      - 'medium-xs': 12px
      *      - 'medium-s': 16px
      *      - 'medium-m': 20px
      *      - 'medium-l': 24px
+     *      - 'medium-xl': 28px
      * - large:
      *      - 'large-xxs': 32px
      *      - 'large-xs': 40px
@@ -39,4 +43,5 @@ export interface PropsWithSpacing {
     spacing?: Spacing;
 }
 export declare function getSpacing(spacing: Spacing | undefined): number | undefined;
+export declare function getSpacingStyleVariable(spacing: Spacing | undefined): string | undefined;
 export declare function getSpacingStyles(spacing: Spacing | undefined): CSSProperties;

package/dist/shared/spacings/config.js

@@ -7,10 +7,12 @@ export const spacings = {
     'small-s': 4,
     'small-m': 6,
     'small-l': 8,
+    'small-xl': 10,
     'medium-xs': 12,
     'medium-s': 16,
     'medium-m': 20,
     'medium-l': 24,
+    'medium-xl': 28,
     'large-xxs': 32,
     'large-xs': 40,
     'large-s': 48,
@@ -23,8 +25,14 @@ export function getSpacing(spacing) {
     }
     return spacings[spacing];
 }
+export function getSpacingStyleVariable(spacing) {
+    if (!spacing) {
+        return undefined;
+    }
+    return `var(--spacing-${spacing})`;
+}
 export function getSpacingStyles(spacing) {
     return {
-        gap: `var(--spacing-${spacing})`,
+        gap: getSpacingStyleVariable(spacing),
     };
 }

package/dist/styles/spacings.css

@@ -8,10 +8,12 @@
     --spacing-small-s: 4px;
     --spacing-small-m: 6px;
     --spacing-small-l: 8px;
+    --spacing-small-xl: 10px;
     --spacing-medium-xs: 12px;
     --spacing-medium-s: 16px;
     --spacing-medium-m: 20px;
     --spacing-medium-l: 24px;
+    --spacing-medium-xl: 28px;
     --spacing-large-xxs: 32px;
     --spacing-large-xs: 40px;
     --spacing-large-s: 48px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@goncharovv/layout",
   "private": false,
-  "version": "0.1.3",
+  "version": "0.1.4",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",