@heymantle/litho 0.0.14 → 0.0.16

package/dist/esm/components/ButtonGroup.js

@@ -81,7 +81,32 @@ function _object_without_properties_loose(source, excluded) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { createContext } from "react";
 import { tv } from "tailwind-variants";
-var styles = tv({
+/**
+ * @component ButtonGroup
+ *
+ * @description A layout wrapper that groups related Button components with consistent spacing and optional segmented styling.
+ *
+ * @usage
+ * - DO: Group related actions (e.g., Save + Cancel) with consistent spacing.
+ * - DON'T: Use for unrelated actions scattered across the page.
+ *
+ * @accessibility
+ * - ButtonGroup provides visual grouping; ensure button labels clearly describe each action.
+ *
+ * @alternative
+ * - If you need a single action, use `Button` alone.
+ * - If you need a menu of actions, use `ActionList` with a `Popover`.
+ *
+ * @param {object} props - The properties object.
+ * @param {React.ReactNode} [props.children] - The child components to be rendered inside the button group.
+ * @param {boolean} [props.segmented=false] - Determines whether the button group has segmented styling.
+ * @param {string} [props.id] - The unique identifier for the button group.
+ * @param {string} [props.className] - Additional class names to be added to the button group.
+ * @param {boolean} [props.fullWidth=false] - Determines if the button group spans the full width of the container.
+ * @param {boolean} [props.noWrap=false] - Determines if the buttons inside the group do not wrap.
+ * @param {object} [props.restProps] - Additional props to be spread onto the container element.
+ * @returns {JSX.Element} The rendered ButtonGroup component.
+ */ var styles = tv({
     base: "Litho-ButtonGroup flex flex-row",
     variants: {
         segmented: {
@@ -109,19 +134,7 @@ var styles = tv({
     }
 });
 export var ButtonGroupContext = /*#__PURE__*/ createContext(false);
-/**
- * ButtonGroup Component
- *
- * @param {object} props - The properties object.
- * @param {React.ReactNode} [props.children] - The child components to be rendered inside the button group.
- * @param {boolean} [props.segmented=false] - Determines whether the button group has segmented styling.
- * @param {string} [props.id] - The unique identifier for the button group.
- * @param {string} [props.className] - Additional class names to be added to the button group.
- * @param {boolean} [props.fullWidth=false] - Determines if the button group spans the full width of the container.
- * @param {boolean} [props.noWrap=false] - Determines if the buttons inside the group do not wrap.
- * @param {object} [props.restProps] - Additional props to be spread onto the container element.
- * @returns {JSX.Element} The rendered ButtonGroup component.
- */ function ButtonGroup() {
+function ButtonGroup() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var children = props.children, _props_segmented = props.segmented, segmented = _props_segmented === void 0 ? false : _props_segmented, id = props.id, className = props.className, _props_fullWidth = props.fullWidth, fullWidth = _props_fullWidth === void 0 ? false : _props_fullWidth, _props_noWrap = props.noWrap, noWrap = _props_noWrap === void 0 ? false : _props_noWrap, tmp = props.gap, _gap = tmp === void 0 ? "2" : tmp, restProps = _object_without_properties(props, [
         "children",