@sableui/react 0.6.1 → 0.7.0

package/dist/ios/preview-theme.js

@@ -0,0 +1,83 @@
+// src/ios/preview-theme.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+function isIosPreviewTheme(value) {
+  if (!value || typeof value !== "object") return false;
+  const data = value;
+  return data.type === "sable:ios-theme" && (data.mode === "light" || data.mode === "dark") && (data.icons === "reicon" || data.icons === "fallback") && typeof data.reducedMotion === "boolean" && !!data.tokens && !Array.isArray(data.tokens) && typeof data.tokens === "object" && Object.entries(data.tokens).every(([name, token]) => /^--[\w-]+$/.test(name) && typeof token === "string") && Array.isArray(data.fonts) && data.fonts.every((url) => typeof url === "string" && url.startsWith("https://fonts.googleapis.com/"));
+}
+function loadIosPreviewFonts(fonts) {
+  for (const url of fonts) {
+    if (!url.startsWith("https://fonts.googleapis.com/")) continue;
+    if (Array.from(document.querySelectorAll('link[rel="stylesheet"]')).some((link2) => link2.href === url)) continue;
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = url;
+    document.head.appendChild(link);
+  }
+}
+function useIosPreviewBridge(frame, {
+  mode,
+  icons = "fallback",
+  reducedMotion = false,
+  revision
+}) {
+  const sync = useCallback(() => {
+    const computed = getComputedStyle(document.documentElement);
+    const message = {
+      type: "sable:ios-theme",
+      mode,
+      icons,
+      reducedMotion,
+      tokens: Object.fromEntries(Array.from(computed).filter((name) => name.startsWith("--")).map((name) => [name, computed.getPropertyValue(name).trim()])),
+      fonts: Array.from(document.querySelectorAll('link[rel="stylesheet"]')).map((link) => link.href).filter((url) => url.startsWith("https://fonts.googleapis.com/"))
+    };
+    frame.current?.contentWindow?.postMessage(message, location.origin);
+  }, [frame, mode, icons, reducedMotion]);
+  useEffect(() => {
+    let pending = 0;
+    const schedule = () => {
+      cancelAnimationFrame(pending);
+      pending = requestAnimationFrame(sync);
+    };
+    const receive = (event) => {
+      if (event.origin === location.origin && event.source === frame.current?.contentWindow && event.data?.type === "sable:ios-ready") schedule();
+    };
+    schedule();
+    window.addEventListener("message", receive);
+    const observer = new MutationObserver(schedule);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-sable-theme", "style"] });
+    observer.observe(document.head, { childList: true, subtree: true, characterData: true });
+    return () => {
+      cancelAnimationFrame(pending);
+      observer.disconnect();
+      window.removeEventListener("message", receive);
+    };
+  }, [frame, sync, revision]);
+  return sync;
+}
+function useIosPreviewTheme() {
+  const [look, setLook] = useState(null);
+  const applied = useRef([]);
+  useEffect(() => {
+    const receive = (event) => {
+      if (event.origin !== location.origin || event.source !== window.parent || !isIosPreviewTheme(event.data)) return;
+      const root = document.documentElement;
+      const { tokens } = event.data;
+      for (const name of applied.current) if (!(name in tokens)) root.style.removeProperty(name);
+      for (const [name, value] of Object.entries(tokens)) root.style.setProperty(name, value);
+      applied.current = Object.keys(tokens);
+      loadIosPreviewFonts(event.data.fonts);
+      setLook(event.data);
+    };
+    window.addEventListener("message", receive);
+    if (window.parent !== window) window.parent.postMessage({ type: "sable:ios-ready" }, location.origin);
+    return () => window.removeEventListener("message", receive);
+  }, []);
+  return look;
+}
+export {
+  isIosPreviewTheme,
+  loadIosPreviewFonts,
+  useIosPreviewBridge,
+  useIosPreviewTheme
+};

package/dist/ios/preview.js

@@ -1,138 +1,11 @@
-import { Phone } from '../chunk-KFZ43RKU.js';
-import '../chunk-NEQNXI2G.js';
-import { cn } from '../chunk-SRQWQUTW.js';
-import { useRef, useState, useEffect, useCallback } from 'react';
-import { jsx } from 'react/jsx-runtime';
-
-var phoneSizes = {
-  compact: { width: 375, height: 812 },
-  /** A current 6.3" iPhone Pro. */
-  standard: { width: 402, height: 874 },
-  /** A current 6.9" iPhone Pro Max. */
-  large: { width: 440, height: 956 }
+// src/ios/preview.ts
+import { PhoneFrame, phoneSizes } from "./phone-frame.js";
+import { useIosPreviewBridge, useIosPreviewTheme, isIosPreviewTheme, loadIosPreviewFonts } from "./preview-theme.js";
+export {
+  PhoneFrame,
+  isIosPreviewTheme,
+  loadIosPreviewFonts,
+  phoneSizes,
+  useIosPreviewBridge,
+  useIosPreviewTheme
 };
-function PhoneFrame({
-  src,
-  title = "iPhone prototype",
-  size = "standard",
-  fit = "width",
-  className,
-  frameRef,
-  onLoad
-}) {
-  const host = useRef(null);
-  const device = useRef(null);
-  const [box, setBox] = useState({ scale: 1, width: 0, height: 0, offset: 0 });
-  const { width, height } = phoneSizes[size];
-  useEffect(() => {
-    const hostEl = host.current;
-    const deviceEl = device.current;
-    if (!hostEl || !deviceEl) return;
-    const measure = () => {
-      const natural = { width: deviceEl.offsetWidth, height: deviceEl.offsetHeight };
-      if (!natural.width) return setBox({ scale: 1, ...natural, offset: 0 });
-      const byHeight = fit === "contain" && hostEl.clientHeight ? hostEl.clientHeight / natural.height : 1;
-      const scale = Math.min(1, hostEl.clientWidth / natural.width, byHeight);
-      const offset = fit === "contain" ? Math.max(0, (hostEl.clientWidth - natural.width * scale) / 2) : 0;
-      setBox({ scale, ...natural, offset });
-    };
-    const observer = new ResizeObserver(measure);
-    observer.observe(hostEl);
-    observer.observe(deviceEl);
-    return () => observer.disconnect();
-  }, [fit]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: host,
-      className: cn("ios-preview-host", className),
-      style: fit === "contain" ? void 0 : { maxWidth: box.width || void 0, height: box.height ? box.height * box.scale : height },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: device,
-          className: "ios-phone-frame",
-          style: { width: width / 0.926, insetInlineStart: box.offset, transform: `scale(${box.scale})` },
-          children: /* @__PURE__ */ jsx(Phone, { statusBar: false, systemChrome: false, className: "w-full", children: /* @__PURE__ */ jsx("iframe", { ref: frameRef, onLoad, src, title, className: "ios-phone-screen" }) })
-        }
-      )
-    }
-  );
-}
-function isIosPreviewTheme(value) {
-  if (!value || typeof value !== "object") return false;
-  const data = value;
-  return data.type === "sable:ios-theme" && (data.mode === "light" || data.mode === "dark") && (data.icons === "reicon" || data.icons === "fallback") && typeof data.reducedMotion === "boolean" && !!data.tokens && !Array.isArray(data.tokens) && typeof data.tokens === "object" && Object.entries(data.tokens).every(([name, token]) => /^--[\w-]+$/.test(name) && typeof token === "string") && Array.isArray(data.fonts) && data.fonts.every((url) => typeof url === "string" && url.startsWith("https://fonts.googleapis.com/"));
-}
-function loadIosPreviewFonts(fonts) {
-  for (const url of fonts) {
-    if (!url.startsWith("https://fonts.googleapis.com/")) continue;
-    if (Array.from(document.querySelectorAll('link[rel="stylesheet"]')).some((link2) => link2.href === url)) continue;
-    const link = document.createElement("link");
-    link.rel = "stylesheet";
-    link.href = url;
-    document.head.appendChild(link);
-  }
-}
-function useIosPreviewBridge(frame, {
-  mode,
-  icons = "fallback",
-  reducedMotion = false,
-  revision
-}) {
-  const sync = useCallback(() => {
-    const computed = getComputedStyle(document.documentElement);
-    const message = {
-      type: "sable:ios-theme",
-      mode,
-      icons,
-      reducedMotion,
-      tokens: Object.fromEntries(Array.from(computed).filter((name) => name.startsWith("--")).map((name) => [name, computed.getPropertyValue(name).trim()])),
-      fonts: Array.from(document.querySelectorAll('link[rel="stylesheet"]')).map((link) => link.href).filter((url) => url.startsWith("https://fonts.googleapis.com/"))
-    };
-    frame.current?.contentWindow?.postMessage(message, location.origin);
-  }, [frame, mode, icons, reducedMotion]);
-  useEffect(() => {
-    let pending = 0;
-    const schedule = () => {
-      cancelAnimationFrame(pending);
-      pending = requestAnimationFrame(sync);
-    };
-    const receive = (event) => {
-      if (event.origin === location.origin && event.source === frame.current?.contentWindow && event.data?.type === "sable:ios-ready") schedule();
-    };
-    schedule();
-    window.addEventListener("message", receive);
-    const observer = new MutationObserver(schedule);
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-sable-theme", "style"] });
-    observer.observe(document.head, { childList: true, subtree: true, characterData: true });
-    return () => {
-      cancelAnimationFrame(pending);
-      observer.disconnect();
-      window.removeEventListener("message", receive);
-    };
-  }, [frame, sync, revision]);
-  return sync;
-}
-function useIosPreviewTheme() {
-  const [look, setLook] = useState(null);
-  const applied = useRef([]);
-  useEffect(() => {
-    const receive = (event) => {
-      if (event.origin !== location.origin || event.source !== window.parent || !isIosPreviewTheme(event.data)) return;
-      const root = document.documentElement;
-      const { tokens } = event.data;
-      for (const name of applied.current) if (!(name in tokens)) root.style.removeProperty(name);
-      for (const [name, value] of Object.entries(tokens)) root.style.setProperty(name, value);
-      applied.current = Object.keys(tokens);
-      loadIosPreviewFonts(event.data.fonts);
-      setLook(event.data);
-    };
-    window.addEventListener("message", receive);
-    if (window.parent !== window) window.parent.postMessage({ type: "sable:ios-ready" }, location.origin);
-    return () => window.removeEventListener("message", receive);
-  }, []);
-  return look;
-}
-
-export { PhoneFrame, isIosPreviewTheme, loadIosPreviewFonts, phoneSizes, useIosPreviewBridge, useIosPreviewTheme };

package/dist/ios/sheet.js

@@ -0,0 +1,85 @@
+// src/ios/sheet.tsx
+import { Button, Glass, Sheet } from "konsta/react";
+import { useEffect, useId, useRef, useState } from "react";
+import { PresentationProvider } from "../lib/presentation.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function IosSheet({ open, onOpenChange, title, children, detent = "medium", background = "glass" }) {
+  const dialog = useRef(null);
+  const titleId = useId();
+  const [shown, setShown] = useState(false);
+  const [expanded, setExpanded] = useState(detent === "large");
+  const startY = useRef(null);
+  const dragged = useRef(false);
+  useEffect(() => {
+    const el = dialog.current;
+    if (!el) return;
+    if (open) {
+      setExpanded(detent === "large");
+      if (!el.open) {
+        el.showModal();
+        el.querySelector("h2")?.focus();
+      }
+      const frame = requestAnimationFrame(() => setShown(true));
+      return () => cancelAnimationFrame(frame);
+    }
+    setShown(false);
+    const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches || !!el.closest("[data-reduced-motion]");
+    const timer = setTimeout(() => el.close(), reduced ? 0 : 220);
+    return () => clearTimeout(timer);
+  }, [open, detent]);
+  return /* @__PURE__ */ jsx(
+    "dialog",
+    {
+      ref: dialog,
+      className: "ios-sheet-dialog",
+      "aria-labelledby": titleId,
+      onCancel: (event) => {
+        event.preventDefault();
+        onOpenChange(false);
+      },
+      onClick: (event) => {
+        if (event.target === event.currentTarget) onOpenChange(false);
+      },
+      children: /* @__PURE__ */ jsxs(Sheet, { opened: shown, backdrop: false, className: "ios-sheet", "data-detent": expanded ? "large" : "medium", "data-background": background, style: { height: expanded ? "90%" : "56%" }, children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            clear: true,
+            className: "ios-sheet-grabber",
+            "aria-label": expanded ? "Reduce sheet height" : "Expand sheet",
+            onClick: () => {
+              if (dragged.current) {
+                dragged.current = false;
+                return;
+              }
+              ;
+              setExpanded((value) => !value);
+            },
+            onPointerDown: (event) => {
+              startY.current = event.clientY;
+              dragged.current = false;
+              event.currentTarget.setPointerCapture(event.pointerId);
+            },
+            onPointerUp: (event) => {
+              if (startY.current === null) return;
+              const distance = event.clientY - startY.current;
+              dragged.current = Math.abs(distance) > 10;
+              startY.current = null;
+              if (distance > 80) onOpenChange(false);
+              else if (distance < -40) setExpanded(true);
+            },
+            children: /* @__PURE__ */ jsx("span", { className: "ios-grabber-mark" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "ios-sheet-heading", children: [
+          /* @__PURE__ */ jsx(Glass, { className: "ios-sheet-close", children: /* @__PURE__ */ jsx(Button, { inline: true, rounded: true, clear: true, className: "ios-icon-action", "aria-label": "Close", onClick: () => onOpenChange(false), children: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", width: "16", height: "16", children: /* @__PURE__ */ jsx("path", { d: "M3.5 3.5l9 9m0-9l-9 9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", fill: "none" }) }) }) }),
+          /* @__PURE__ */ jsx("h2", { id: titleId, tabIndex: -1, children: title })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "ios-sheet-content", children: /* @__PURE__ */ jsx(PresentationProvider, { value: "sheet", children }) })
+      ] })
+    }
+  );
+}
+export {
+  IosSheet
+};

package/dist/ios/theme.js

@@ -0,0 +1,19 @@
+// src/ios/theme.ts
+var NAMES = [
+  "--background",
+  "--card",
+  "--foreground",
+  "--muted-foreground",
+  "--primary",
+  "--primary-foreground",
+  "--muted",
+  "--font-sans",
+  "--font-display",
+  "--type-title-weight"
+];
+function iosThemeStyle(tokens) {
+  return Object.fromEntries(NAMES.flatMap((name) => tokens[name] === void 0 ? [] : [[name, tokens[name]]]));
+}
+export {
+  iosThemeStyle
+};

package/dist/layout/AspectBox.js

@@ -0,0 +1,27 @@
+// src/layout/AspectBox.tsx
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+function AspectBox({
+  ratio = 16 / 9,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const mergedStyle = {
+    aspectRatio: String(ratio),
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("relative w-full overflow-hidden", className),
+      style: mergedStyle,
+      ...rest,
+      children
+    }
+  );
+}
+export {
+  AspectBox
+};

package/dist/layout/Bleed.js

@@ -0,0 +1,15 @@
+// src/layout/Bleed.tsx
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+function Bleed({ className, style, children, ref, ...rest }) {
+  const mergedStyle = {
+    width: "100cqw",
+    marginInline: "calc(50% - 50cqw)",
+    ...style
+  };
+  return /* @__PURE__ */ jsx("div", { ref, className: cn(className), style: mergedStyle, ...rest, children });
+}
+Bleed.displayName = "Bleed";
+export {
+  Bleed
+};

package/dist/layout/Center.js

@@ -0,0 +1,21 @@
+// src/layout/Center.tsx
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+var NAMED_MAX = {
+  prose: "var(--measure-prose)",
+  feed: "var(--region-feed)",
+  wide: "var(--region-wide)",
+  ultrawide: "var(--region-ultrawide)"
+};
+function Center({ max, className, style, children, ref, ...rest }) {
+  const maxWidth = max ? NAMED_MAX[max] ?? max : void 0;
+  const mergedStyle = {
+    marginInline: "auto",
+    ...maxWidth ? { maxWidth } : null,
+    ...style
+  };
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", className), style: mergedStyle, ...rest, children });
+}
+export {
+  Center
+};

package/dist/layout/Columns.js

@@ -0,0 +1,70 @@
+// src/layout/Columns.tsx
+import { cn } from "../lib/cn.js";
+import { responsiveVars } from "./_responsive.js";
+import { jsx } from "react/jsx-runtime";
+function resolveGap(gap) {
+  if (gap === void 0) return "var(--grid-gutter)";
+  if (typeof gap === "number") return `calc(var(--rhythm-unit) * ${gap})`;
+  return gap;
+}
+function cappedColumnGap(gap) {
+  return `min(${gap}, calc(75% / max(var(--cols, var(--grid-columns)) - 1, 1)))`;
+}
+function Columns({
+  count,
+  gap,
+  className,
+  style,
+  children,
+  ref,
+  ...rest
+}) {
+  const resolvedGap = resolveGap(gap);
+  const mergedStyle = {
+    rowGap: resolvedGap,
+    columnGap: cappedColumnGap(resolvedGap),
+    ...responsiveVars("--cols", count),
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-sable-grid-cols": true,
+      className: cn(className),
+      style: mergedStyle,
+      ...rest,
+      children
+    }
+  );
+}
+function Col({
+  span = 1,
+  start,
+  className,
+  style,
+  children,
+  ref,
+  ...rest
+}) {
+  const mergedStyle = {
+    ...responsiveVars("--col-span", span),
+    ...responsiveVars("--col-start", start),
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-sable-col": true,
+      className: cn(className),
+      style: mergedStyle,
+      ...rest,
+      children
+    }
+  );
+}
+export {
+  Col,
+  Columns
+};

package/dist/layout/Grid.js

@@ -0,0 +1,50 @@
+// src/layout/Grid.tsx
+import { cn } from "../lib/cn.js";
+import { responsiveVars } from "./_responsive.js";
+import { jsx } from "react/jsx-runtime";
+function resolveGap(gap) {
+  if (gap === void 0) return "var(--grid-gutter)";
+  if (typeof gap === "number") return `calc(var(--rhythm-unit) * ${gap})`;
+  if (typeof gap === "string") return gap;
+  return `calc(var(--rhythm-unit) * ${gap[0]}) calc(var(--rhythm-unit) * ${gap[1]})`;
+}
+function Grid({
+  cols = 12,
+  minItemWidth,
+  track = "fill",
+  gap,
+  className,
+  style,
+  children,
+  ref,
+  ...rest
+}) {
+  if (minItemWidth) {
+    const mergedStyle2 = {
+      display: "grid",
+      gridTemplateColumns: `repeat(${track === "fit" ? "auto-fit" : "auto-fill"}, minmax(min(${minItemWidth}, 100%), 1fr))`,
+      gap: resolveGap(gap),
+      ...style
+    };
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(className), style: mergedStyle2, ...rest, children });
+  }
+  const mergedStyle = {
+    gap: resolveGap(gap),
+    ...responsiveVars("--cols", cols),
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-sable-grid-cols": true,
+      className: cn(className),
+      style: mergedStyle,
+      ...rest,
+      children
+    }
+  );
+}
+export {
+  Grid
+};

package/dist/layout/GridOverlay.js

@@ -0,0 +1,41 @@
+// src/layout/GridOverlay.tsx
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+function GridOverlay({
+  columns = 12,
+  gap = "var(--grid-gutter)",
+  inset = true,
+  show = true,
+  className
+}) {
+  if (!show) return null;
+  const style = {
+    position: "absolute",
+    inset: 0,
+    display: "grid",
+    gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+    gap,
+    paddingInline: inset ? "var(--page-inset)" : void 0
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": true,
+      className: cn("pointer-events-none z-(--z-overlay)", className),
+      style,
+      children: Array.from({ length: columns }, (_, i) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            background: "color-mix(in oklab, var(--highlight) 9%, transparent)",
+            borderInline: "1px solid color-mix(in oklab, var(--highlight) 22%, transparent)"
+          }
+        },
+        i
+      ))
+    }
+  );
+}
+export {
+  GridOverlay
+};

package/dist/layout/Page.js

@@ -0,0 +1,11 @@
+// src/layout/Page.tsx
+import { Region } from "./Region.js";
+import { Stack } from "./Stack.js";
+import { jsx } from "react/jsx-runtime";
+function Page({ gap = 4, align, children, ...regionProps }) {
+  return /* @__PURE__ */ jsx(Region, { ...regionProps, children: /* @__PURE__ */ jsx(Stack, { gap, align, children }) });
+}
+Page.displayName = "Page";
+export {
+  Page
+};

package/dist/layout/Region.js

@@ -0,0 +1,39 @@
+// src/layout/Region.tsx
+import { cn } from "../lib/cn.js";
+import { safeAreaInsets } from "./_safeArea.js";
+import { jsx } from "react/jsx-runtime";
+var NAMED_MAX = {
+  prose: "var(--measure-prose)",
+  form: "var(--region-form)",
+  feed: "var(--region-feed)",
+  content: "var(--region-content)",
+  wide: "var(--region-wide)",
+  full: "var(--region-full)",
+  ultrawide: "var(--region-ultrawide)"
+};
+function Region({
+  as,
+  inset = true,
+  max,
+  bleed = false,
+  safeArea = false,
+  className,
+  style,
+  children,
+  ref,
+  ...rest
+}) {
+  const Comp = as ?? "div";
+  const maxWidth = max ? NAMED_MAX[max] ?? max : void 0;
+  const safeEdges = safeArea === true ? ["top", "bottom"] : Array.isArray(safeArea) ? safeArea : [];
+  const mergedStyle = {
+    ...maxWidth ? { maxWidth, marginInline: "auto" } : null,
+    ...!bleed && inset ? { paddingInline: "var(--page-inset)" } : null,
+    ...safeAreaInsets(safeEdges),
+    ...style
+  };
+  return /* @__PURE__ */ jsx(Comp, { ref, className: cn("w-full", className), style: mergedStyle, ...rest, children });
+}
+export {
+  Region
+};

package/dist/layout/Row.js

@@ -0,0 +1,45 @@
+// src/layout/Row.tsx
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+var ALIGN = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch",
+  baseline: "baseline"
+};
+var JUSTIFY = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around"
+};
+function resolveGap(gap) {
+  return typeof gap === "number" ? `calc(var(--rhythm-unit) * ${gap})` : gap;
+}
+function Row({
+  gap = 2,
+  align = "center",
+  justify = "start",
+  wrap = false,
+  className,
+  style,
+  children,
+  ref,
+  ...rest
+}) {
+  const mergedStyle = {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: ALIGN[align],
+    justifyContent: JUSTIFY[justify],
+    flexWrap: wrap ? "wrap" : "nowrap",
+    gap: resolveGap(gap),
+    ...style
+  };
+  return /* @__PURE__ */ jsx("div", { ref, className: cn(className), style: mergedStyle, ...rest, children });
+}
+export {
+  Row
+};