@adamjanicki/ui 1.5.9 → 1.6.1

package/utils/types.d.ts

@@ -16,47 +16,64 @@ export type ContentType = "success" | "warning" | "error" | "info" | "static";
  */
 export type Style = React.CSSProperties;
 /**
- * Size variants used for CSS.
+ * Used for width and height
  */
-type SizeToken = "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
+export type SizeDimension = "full" | "fit" | "min" | "max";
 /**
- * Size prop used to transform into a CSS class or style value if a number.
+ * Size variants used for CSS.
  */
-type Size = SizeToken | number;
+type SizeToken = "none" | "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
 /**
- * Layout props for a box component.
+ * Used for margin
  */
+type AutoSize = SizeToken | "auto";
+/** Layout props for a component */
 export type Layout = {
-    /**
-     * Direction the box spans; along the x-axis or y-axis
-     * (Equivalent to flex-direction)
-     */
-    axis: "x" | "y";
-    /**
-     * Spacing between children of the box
-     */
-    gap?: Size;
-    /**
-     * Alignment orthogonal to the selected axis
-     * (Equivalent to align-items)
-     */
+    /** Direction the layout spans; along the x-axis or y-axis (Equivalent to flex-direction) */
+    axis?: "x" | "y" | "-x" | "-y";
+    /** Spacing between children of the layout */
+    gap?: SizeToken;
+    /** Alignment orthogonal to the selected axis (Equivalent to align-items) */
     align?: "start" | "center" | "end";
-    /**
-     * How to layout the children
-     * (Equivalent to justify-content)
-     */
-    justify?: "start" | "center" | "between" | "end";
-    /**
-     * Padding on the inside of the box
-     */
-    padding?: Size;
-    /**
-     * Margin on the outside of the box
-     */
-    margin?: Size;
-    /**
-     * Whether to allow wrapping of box children
-     */
+    /** How to layout the children (Equivalent to justify-content) */
+    justify?: "start" | "center" | "between" | "around" | "end";
+    /** Whether to allow wrapping of layout children */
     wrap?: boolean;
+    /** Padding inside the layout */
+    padding?: SizeToken;
+    /** Horizontal padding inside the layout */
+    paddingX?: SizeToken;
+    /** Vertical padding inside the layout */
+    paddingY?: SizeToken;
+    /** Top padding inside the layout */
+    paddingTop?: SizeToken;
+    /** Bottom padding inside the layout */
+    paddingBottom?: SizeToken;
+    /** Left padding inside the layout */
+    paddingLeft?: SizeToken;
+    /** Right padding inside the layout */
+    paddingRight?: SizeToken;
+    /** Margin outside the layout */
+    margin?: AutoSize;
+    /** Horizontal margin outside the layout */
+    marginX?: AutoSize;
+    /** Vertical margin outside the layout */
+    marginY?: AutoSize;
+    /** Top margin outside the layout */
+    marginTop?: AutoSize;
+    /** Bottom margin outside the layout */
+    marginBottom?: AutoSize;
+    /** Left margin outside the layout */
+    marginLeft?: AutoSize;
+    /** Right margin outside the layout */
+    marginRight?: AutoSize;
+    /** Width of the layout */
+    width?: SizeDimension;
+    /** Maximum width of the layout */
+    maxWidth?: SizeDimension;
+    /** Height of the laout */
+    height?: SizeDimension;
+    /** Maximum of the layout */
+    maxHeight?: SizeDimension;
 };
 export {};