koval-ui/dist/src/lib/Layout/Col.js

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";
import { jsx as b } from "react/jsx-runtime";
import { forwardRef as h, useMemo as v } from "react";
import { useLocalTheme as C } from "css-vars-hook";
import O from "classnames";
import { useLinkRefs as g } from "../../internal/hooks/useLinkRefs.js";
import { Sizes as o } from "./SizeTypes.js";
import e from "./Layout.module.css.js";
const k = (s) => Object.fromEntries(Object.entries(s).filter(([d, t]) => t !== void 0)), w = h(
  ({
    as: s = "div",
    children: d,
    className: t,
    xs: i,
    sm: r,
    md: f,
    lg: l,
    xl: m,
    shiftXS: u,
    shiftSM: n,
    shiftMD: c,
    shiftLG: a,
    shiftXL: p,
    ...$
  }, x) => {
    const { LocalRoot: R, ref: j } = C();
    g(x, j);
    const N = v(
      () => k({
        [o.xs]: i ?? "",
        [o.sm]: r ?? "",
        [o.md]: f ?? "",
        [o.lg]: l ?? "",
        [o.xl]: m ?? "",
        [`shift-${o.xs}`]: u ?? "",
        [`shift-${o.sm}`]: n ?? "",
        [`shift-${o.md}`]: c ?? "",
        [`shift-${o.lg}`]: a ?? "",
        [`shift-${o.xl}`]: p ?? ""
      }),
      [i, r, f, l, m, u, n, c, a, p]
    );
    return /* @__PURE__ */ b(
      R,
      {
        ...$,
        theme: N,
        as: s,
        className: O(
          e.column,
          {
            [e.xs]: !!i,
            [e.sm]: !!r,
            [e.md]: !!f,
            [e.lg]: !!l,
            [e.xl]: !!m,
            [e["fluid-xs"]]: i === "fluid",
            [e["fluid-sm"]]: r === "fluid",
            [e["fluid-md"]]: f === "fluid",
            [e["fluid-lg"]]: l === "fluid",
            [e["fluid-xl"]]: m === "fluid"
          },
          t
        ),
        children: d
      }
    );
  }
);
w.displayName = "Col";
export {
  w as Col
};
//# sourceMappingURL=Col.js.map