@fidely-ui/react/dist/components/stack/index.cjs

Fidely UI is a modern, beautifully crafted React design system powered by Ark UI and Panda CSS, delivering accessible and themeable components for building exceptional web apps

'use client'
"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/stack/index.ts
var stack_exports = {};
__export(stack_exports, {
  HStack: () => HStack,
  Stack: () => Stack,
  VStack: () => VStack
});
module.exports = __toCommonJS(stack_exports);

// src/components/stack/stack.tsx
var import_react = require("react");
var import_jsx = require("@fidely-ui/styled-system/jsx");
var import_patterns = require("@fidely-ui/styled-system/patterns");

// src/utils/split-props.ts
function splitProps(props, patternKeys) {
  const patternProps = {};
  const restProps = {};
  for (const key in props) {
    if (patternKeys.includes(key)) {
      patternProps[key] = props[key];
    } else {
      restProps[key] = props[key];
    }
  }
  return [patternProps, restProps];
}

// src/components/stack/stack.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var Stack = (0, import_react.forwardRef)(
  function Stack2(props, ref) {
    const [patternProps, restProps] = splitProps(props, [
      "align",
      "justify",
      "direction",
      "gap"
    ]);
    const styles = import_patterns.stack.raw(patternProps);
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx.styled.div, { ref, ...styles, ...restProps });
  }
);
Stack.displayName = "Stack";

// src/components/stack/hstack.tsx
var import_react2 = require("react");
var import_jsx2 = require("@fidely-ui/styled-system/jsx");
var import_patterns2 = require("@fidely-ui/styled-system/patterns");
var import_jsx_runtime2 = require("react/jsx-runtime");
var HStack = (0, import_react2.forwardRef)(
  function HStack2(props, ref) {
    const [patternProps, restProps] = splitProps(props, ["direction"]);
    const styles = import_patterns2.hstack.raw(patternProps);
    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx2.styled.div, { ref, ...styles, ...restProps });
  }
);
HStack.displayName = "HStack";

// src/components/stack/vstack.tsx
var import_react3 = require("react");
var import_jsx3 = require("@fidely-ui/styled-system/jsx");
var import_patterns3 = require("@fidely-ui/styled-system/patterns");
var import_jsx_runtime3 = require("react/jsx-runtime");
var VStack = (0, import_react3.forwardRef)(
  function Stack3(props, ref) {
    const [patternProps, restProps] = splitProps(props, ["direction"]);
    const styles = import_patterns3.vstack.raw(patternProps);
    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx3.styled.div, { ref, ...styles, ...restProps });
  }
);
VStack.displayName = "VStack";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  HStack,
  Stack,
  VStack
});