@heymantle/litho 0.0.15 → 0.0.16

package/dist/cjs/components/Box.js

@@ -38,7 +38,55 @@ function _object_spread(target) {
     }
     return target;
 }
-var styles = (0, _tailwindvariants.tv)({
+/**
+ * @component Box
+ *
+ * @description A flexible container component with configurable padding, background, border radius, shadow, and overflow properties.
+ *
+ * @usage
+ * - DO: Use as a flexible container for padding, spacing, and background styling.
+ * - DON'T: Use for page-level layout (use `Layout` instead).
+ *
+ * @accessibility
+ * - Box renders a generic div by default; use the `as` prop for semantic HTML elements when appropriate.
+ *
+ * @alternative
+ * - If you need a bordered card, use `Card`.
+ * - If you need flex layout, use `Stack`.
+ *
+ * @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.
+ * @param {string} [props.className] - Additional CSS classes to apply to the Box.
+ * @param {Function} [props.onClick] - Click handler for the Box.
+ *
+ * @returns {JSX.Element} A rendered Box component with customized styling.
+*/ var styles = (0, _tailwindvariants.tv)({
     base: "Litho-Box",
     variants: {
         background: {
@@ -165,43 +213,7 @@ var styles = (0, _tailwindvariants.tv)({
         }
     }
 });
-/**
- * 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.
- * @param {string} [props.className] - Additional CSS classes to apply to the Box.
- * @param {Function} [props.onClick] - Click handler for the Box.
- * 
- * @returns {JSX.Element} A rendered Box component with customized styling.
-*/ var Box = function() {
+var Box = function() {
     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({