@heymantle/litho 0.0.14 → 0.0.16

package/dist/cjs/components/Banner.js

@@ -21,7 +21,43 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-var styles = (0, _tailwindvariants.tv)({
+/**
+ * @component Banner
+ *
+ * @description A contextual message bar that displays informational, success, warning, or critical notices with optional actions and dismiss functionality.
+ *
+ * @usage
+ * - DO: Display important contextual messages at the top of a page or section (info, success, warning, critical).
+ * - DON'T: Use for transient notifications (use ToastNotification).
+ *
+ * @accessibility
+ * - Banner uses `role="status"` or appropriate ARIA role based on status; ensure the message text is descriptive.
+ *
+ * @alternative
+ * - If you need a brief, auto-dismissing notification, use `ToastNotification`.
+ * - If you need a contextual hint, use `Tip`.
+ *
+ * @param {Object} props - The properties for configuring the Banner component.
+ * @param {string} [props.title] - The title text for the banner. If not provided, no title will be displayed.
+ * @param {BannerStatus} [props.status='neutral'] - The status of the banner, which determines its color and icon.
+ * @param {Function} [props.onDismiss] - Callback function to handle the banner's dismiss action.
+ * @param {React.ReactNode} [props.children] - Additional content to display within the banner.
+ * @param {BannerAction} [props.action] - Primary action configuration object
+ * @param {BannerAction} [props.secondaryAction] - Secondary action configuration object
+ * @param {FunctionComponent} [props.icon] - Custom icon to display on the banner. If not provided, a default icon is used based on the status.
+ * @param {boolean} [props.spinner] - Shows a spinner icon instead of a status icon when set to true.
+ *
+ * @returns {JSX.Element} The rendered Banner component.
+ *
+ * @example
+ * <Banner
+ *   title="Warning"
+ *   status="warning"
+ *   onDismiss={() => console.log('Dismissed')}
+ *   action={{ content: "Action", primary: true, onAction: () => console.log('Action clicked') }}
+ *   secondaryAction={{ content: "Learn more", link: true, monochrome: true, url: "https://example.com" }}
+ * />
+ */ var styles = (0, _tailwindvariants.tv)({
     base: "Litho-Banner relative rounded-md shadow-card bg-surface-highest outline outline-tint-3"
 });
 var headerStyles = (0, _tailwindvariants.tv)({
@@ -112,32 +148,6 @@ var STATUS_STYLES = {
  * @property {boolean} [loading=false] - Whether to show a loading state
  * @property {Function} [onAction] - Click handler for the action
  * @property {string} [url] - URL to navigate to when clicked (opens in new tab)
- */ /**
- * A Banner component that displays a styled banner with customizable title, status, icon, actions, and dismiss functionality.
- * The banner style and content change based on the provided props, allowing for various statuses and themes.
- *
- * @component
- *
- * @param {Object} props - The properties for configuring the Banner component.
- * @param {string} [props.title] - The title text for the banner. If not provided, no title will be displayed.
- * @param {BannerStatus} [props.status='neutral'] - The status of the banner, which determines its color and icon.
- * @param {Function} [props.onDismiss] - Callback function to handle the banner's dismiss action.
- * @param {React.ReactNode} [props.children] - Additional content to display within the banner.
- * @param {BannerAction} [props.action] - Primary action configuration object
- * @param {BannerAction} [props.secondaryAction] - Secondary action configuration object
- * @param {FunctionComponent} [props.icon] - Custom icon to display on the banner. If not provided, a default icon is used based on the status.
- * @param {boolean} [props.spinner] - Shows a spinner icon instead of a status icon when set to true.
- *
- * @returns {JSX.Element} The rendered Banner component.
- *
- * @example
- * <Banner
- *   title="Warning"
- *   status="warning"
- *   onDismiss={() => console.log('Dismissed')}
- *   action={{ content: "Action", primary: true, onAction: () => console.log('Action clicked') }}
- *   secondaryAction={{ content: "Learn more", link: true, monochrome: true, url: "https://example.com" }}
- * />
  */ function Banner() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var _props_title = props.title, title = _props_title === void 0 ? null : _props_title, _props_status = props.status, status = _props_status === void 0 ? "neutral" : _props_status, _props_onDismiss = props.onDismiss, onDismiss = _props_onDismiss === void 0 ? null : _props_onDismiss, _props_children = props.children, children = _props_children === void 0 ? null : _props_children, _props_action = props.action, action = _props_action === void 0 ? null : _props_action, _props_secondaryAction = props.secondaryAction, secondaryAction = _props_secondaryAction === void 0 ? null : _props_secondaryAction, _props_icon = props.icon, icon = _props_icon === void 0 ? null : _props_icon, _props_spinner = props.spinner, spinner = _props_spinner === void 0 ? false : _props_spinner;

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({