@heymantle/litho 0.0.1

package/dist/cjs/components/Box.js

@@ -0,0 +1,247 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _tailwindvariants = require("tailwind-variants");
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+var styles = (0, _tailwindvariants.tv)({
+    base: "Litho-Box",
+    variants: {
+        background: {
+            default: "bg-surface-highest",
+            subdued: "bg-surface-higher"
+        },
+        borderColor: {
+            default: "border-edge-default",
+            subdued: "border-edge-subdued"
+        },
+        borderRadius: {
+            default: "rounded-md",
+            sm: "rounded-sm",
+            lg: "rounded-lg",
+            full: "rounded-full"
+        },
+        borderBlockStartWidth: {
+            none: "border-t-0",
+            "0": "border-t-0",
+            "1": "border-t-1"
+        },
+        borderBlockEndWidth: {
+            none: "border-b-0",
+            "0": "border-b-0",
+            "1": "border-b-1"
+        },
+        borderInlineStartWidth: {
+            none: "border-l-0",
+            "0": "border-l-0",
+            "1": "border-l-1"
+        },
+        borderInlineEndWidth: {
+            none: "border-r-0",
+            "0": "border-r-0",
+            "1": "border-r-1"
+        },
+        padding: {
+            none: "p-0",
+            "0": "p-0",
+            "1": "p-1",
+            "2": "p-2",
+            "3": "p-3",
+            "4": "p-4",
+            "5": "p-5",
+            "6": "p-6",
+            "7": "p-7",
+            "8": "p-8",
+            "9": "p-9",
+            "10": "p-10"
+        },
+        paddingBlockStart: {
+            none: "pt-0",
+            "0": "pt-0",
+            "1": "pt-1",
+            "2": "pt-2",
+            "3": "pt-3",
+            "4": "pt-4",
+            "5": "pt-5",
+            "6": "pt-6",
+            "7": "pt-7",
+            "8": "pt-8",
+            "9": "pt-9",
+            "10": "pt-10"
+        },
+        paddingBlockEnd: {
+            none: "pb-0",
+            "0": "pb-0",
+            "1": "pb-1",
+            "2": "pb-2",
+            "3": "pb-3",
+            "4": "pb-4",
+            "5": "pb-5",
+            "6": "pb-6",
+            "7": "pb-7",
+            "8": "pb-8",
+            "9": "pb-9",
+            "10": "pb-10"
+        },
+        paddingInlineStart: {
+            none: "pl-0",
+            "0": "pl-0",
+            "1": "pl-1",
+            "2": "pl-2",
+            "3": "pl-3",
+            "4": "pl-4",
+            "5": "pl-5",
+            "6": "pl-6",
+            "7": "pl-7",
+            "8": "pl-8",
+            "9": "pl-9",
+            "10": "pl-10"
+        },
+        paddingInlineEnd: {
+            none: "pr-0",
+            "0": "pr-0",
+            "1": "pr-1",
+            "2": "pr-2",
+            "3": "pr-3",
+            "4": "pr-4",
+            "5": "pr-5",
+            "6": "pr-6",
+            "7": "pr-7",
+            "8": "pr-8",
+            "9": "pr-9",
+            "10": "pr-10"
+        },
+        overflow: {
+            hidden: "overflow-hidden",
+            scroll: "overflow-scroll"
+        },
+        overflowX: {
+            hidden: "overflow-x-hidden",
+            scroll: "overflow-x-scroll"
+        },
+        overflowY: {
+            hidden: "overflow-y-hidden",
+            scroll: "overflow-y-scroll"
+        },
+        position: {
+            relative: "relative",
+            absolute: "absolute",
+            fixed: "fixed",
+            sticky: "sticky"
+        }
+    }
+});
+/**
+ * Renders a customizable Box component with various styling options.
+ *
+ * @component
+ * @param {Object} props - Properties to configure the Box component.
+ * @param {string} [props.as='div'] - The HTML element to render as. Defaults to `div`.
+ * @param {'default' | 'subdued'} [props.background] - Background color variant.
+ * @param {'default' | 'subdued'} [props.borderColor] - Border color variant.
+ * @param {'default' | 'sm' | 'lg' | 'full'} [props.borderRadius] - Border radius variant.
+ * @param {'none' | '0' | '1'} [props.borderBlockStartWidth] - Top border width variant.
+ * @param {'none' | '0' | '1'} [props.borderBlockEndWidth] - Bottom border width variant.
+ * @param {'none' | '0' | '1'} [props.borderInlineStartWidth] - Left border width variant.
+ * @param {'none' | '0' | '1'} [props.borderInlineEndWidth] - Right border width variant.
+ * @param {'none' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10'} [props.padding] - Padding for all sides.
+ * @param {'none' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10'} [props.paddingBlockStart] - Top padding.
+ * @param {'none' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10'} [props.paddingBlockEnd] - Bottom padding.
+ * @param {'none' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10'} [props.paddingInlineStart] - Left padding.
+ * @param {'none' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10'} [props.paddingInlineEnd] - Right padding.
+ * @param {'hidden' | 'scroll'} [props.overflow] - Overflow setting for all sides.
+ * @param {'hidden' | 'scroll'} [props.overflowX] - Overflow setting for x-axis.
+ * @param {'hidden' | 'scroll'} [props.overflowY] - Overflow setting for y-axis.
+ * @param {'relative' | 'absolute' | 'fixed' | 'sticky'} [props.position] - CSS positioning of the box.
+ * @param {React.ReactNode} [props.children] - Child elements to render inside the Box.
+ * @param {string} [props.id] - ID for the Box element.
+ * @param {number | string} [props.height] - CSS height of the Box.
+ * @param {number | string} [props.width] - CSS width of the Box.
+ * @param {number | string} [props.minHeight] - Minimum CSS height.
+ * @param {number | string} [props.maxHeight] - Maximum CSS height.
+ * @param {number | string} [props.minWidth] - Minimum CSS width.
+ * @param {number | string} [props.maxWidth] - Maximum CSS width.
+ * @param {number | string} [props.zIndex] - CSS z-index.
+ * @param {Object} [props.style] - Additional inline styles for the Box.
+ * 
+ * @returns {JSX.Element} A rendered Box component with customized styling.
+*/ function Box() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var _props_as = props.as, as = _props_as === void 0 ? 'div' : _props_as, background = props.background, borderColor = props.borderColor, borderBlockStartWidth = props.borderBlockStartWidth, borderBlockEndWidth = props.borderBlockEndWidth, borderInlineStartWidth = props.borderInlineStartWidth, borderInlineEndWidth = props.borderInlineEndWidth, borderRadius = props.borderRadius, children = props.children, id = props.id, height = props.height, width = props.width, minHeight = props.minHeight, maxHeight = props.maxHeight, minWidth = props.minWidth, maxWidth = props.maxWidth, overflow = props.overflow, overflowX = props.overflowX, overflowY = props.overflowY, padding = props.padding, paddingBlockStart = props.paddingBlockStart, paddingBlockEnd = props.paddingBlockEnd, paddingInlineStart = props.paddingInlineStart, paddingInlineEnd = props.paddingInlineEnd, position = props.position, zIndex = props.zIndex, onClick = props.onClick, style = props.style, className = props.className;
+    var classes = styles({
+        background: background,
+        borderColor: borderColor,
+        borderBlockStartWidth: borderBlockStartWidth,
+        borderBlockEndWidth: borderBlockEndWidth,
+        borderInlineStartWidth: borderInlineStartWidth,
+        borderInlineEndWidth: borderInlineEndWidth,
+        borderRadius: borderRadius,
+        position: position,
+        overflow: overflow,
+        overflowX: overflowX,
+        overflowY: overflowY,
+        padding: padding,
+        paddingBlockStart: paddingBlockStart,
+        paddingBlockEnd: paddingBlockEnd,
+        paddingInlineStart: paddingInlineStart,
+        paddingInlineEnd: paddingInlineEnd
+    });
+    var inlineStyles = _object_spread({}, style && _object_spread({}, style), zIndex && {
+        zIndex: zIndex
+    }, height && {
+        height: height
+    }, width && {
+        width: width
+    }, minHeight && {
+        minHeight: minHeight
+    }, maxHeight && {
+        maxHeight: maxHeight
+    }, minWidth && {
+        minWidth: minWidth
+    }, maxWidth && {
+        maxWidth: maxWidth
+    });
+    var Element = as;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(Element, {
+        id: id,
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+        style: inlineStyles,
+        onClick: onClick,
+        children: children
+    });
+}
+var _default = Box;