@gridui/grid 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,732 @@
+// src/primitives/responsive.ts
+var resolveResponsive = (value) => {
+  if (typeof value !== "object" || !("base" in value)) {
+    return {
+      base: value,
+      md: value,
+      lg: value
+    };
+  }
+  return {
+    base: value.base,
+    md: value.md ?? value.base,
+    lg: value.lg ?? value.md ?? value.base
+  };
+};
+var spaceValue = (value) => {
+  return `var(--gridui-space-${value})`;
+};
+var spanValue = (value) => {
+  return value === "full" ? "1 / -1" : `span ${value} / span ${value}`;
+};
+var spacingStyle = (name, value) => {
+  const sizes = resolveResponsive(value);
+  return {
+    [`--gridui-${name}`]: spaceValue(sizes.base),
+    [`--gridui-${name}-md`]: spaceValue(sizes.md),
+    [`--gridui-${name}-lg`]: spaceValue(sizes.lg)
+  };
+};
+
+// src/frame/boundary/boundary.tsx
+import { cn } from "@gridui/style-utils";
+import { jsx } from "react/jsx-runtime";
+var FrameBoundary = (props) => {
+  const { boundary } = props;
+  return boundary === "none" ? null : /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "gridui-frame-boundary",
+        (boundary === "band" || boundary === "stripe") && "gridui-frame-divider",
+        boundary === "stripe" && "gridui-frame-stripe",
+        boundary === "space" && "gridui-frame-space"
+      ),
+      "aria-hidden": "true"
+    }
+  );
+};
+
+// src/frame/decoration/decoration.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var resolveFrameDecoration = (boundary, decoration) => {
+  return decoration ?? (boundary === "band" ? "nodes" : "none");
+};
+var FrameDecoration = (props) => {
+  const { decoration } = props;
+  return decoration === "none" ? null : /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: "gridui-frame-decoration",
+      "data-decoration": decoration,
+      "aria-hidden": "true",
+      inert: true
+    }
+  );
+};
+
+// src/frame/style.ts
+import { cn as cn2 } from "@gridui/style-utils";
+import { cva } from "class-variance-authority";
+var frameToneStyles = cva("", {
+  variants: {
+    tone: {
+      neutral: "",
+      brand: "gridui-frame-brand",
+      warning: "gridui-frame-warning",
+      danger: "gridui-frame-danger"
+    }
+  }
+});
+var frameContentStyles = cva(cn2(
+  "gridui-frame-content",
+  "border-x border-solid border-border wrap-anywhere"
+));
+
+// src/frame/chrome/style.ts
+import { cn as cn3 } from "@gridui/style-utils";
+import { cva as cva2 } from "class-variance-authority";
+var frameChromeStyles = cva2(cn3(
+  "gridui-frame-chrome",
+  "flex flex-wrap items-center justify-between gap-gridui-16"
+));
+var frameSignatureStyles = cva2(cn3(
+  "gridui-frame-signature flex min-w-0 items-center justify-center gap-gridui-24 py-gridui-32 px-gridui-24 overflow-hidden border-t border-solid border-border bg-transparent",
+  "[&>svg]:h-auto [&>svg]:opacity-30 [&>span]:font-display [&>span]:leading-none [&>span]:text-transparent"
+));
+var frameSignatureCroppedStyles = cva2("gridui-frame-signature-cropped block pb-0 @container [&>span]:block [&>span]:text-center [&>span]:whitespace-nowrap");
+
+// src/frame/chrome/chrome.tsx
+import { cn as cn4 } from "@gridui/style-utils";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var chromeStyle = (padding) => {
+  const values = resolveResponsive(padding);
+  return {
+    "--gridui-chrome-padding": spaceValue(values.base),
+    "--gridui-chrome-padding-md": spaceValue(values.md),
+    "--gridui-chrome-padding-lg": spaceValue(values.lg)
+  };
+};
+var FrameHeader = (props) => {
+  const { padding = {
+    base: 16,
+    md: 24
+  }, wrap = true, gap = 16, className, children, ...restProps } = props;
+  return /* @__PURE__ */ jsx3(
+    "header",
+    {
+      ...restProps,
+      className: cn4("gridui-container gridui-frame-header", className),
+      children: /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: cn4(frameContentStyles(), frameChromeStyles()),
+          style: {
+            ...chromeStyle(padding),
+            flexWrap: wrap ? "wrap" : "nowrap",
+            gap: spaceValue(gap)
+          },
+          children
+        }
+      )
+    }
+  );
+};
+var FrameFooter = (props) => {
+  const { padding = {
+    base: 16,
+    md: 24
+  }, tone = "neutral", boundary = "line", decoration, signature, signatureAppearance = "standard", className, children, ...restProps } = props;
+  return /* @__PURE__ */ jsxs(
+    "footer",
+    {
+      ...restProps,
+      className: cn4("gridui-container gridui-frame-footer", frameToneStyles({
+        tone
+      }), className),
+      children: [
+        /* @__PURE__ */ jsx3(
+          FrameBoundary,
+          {
+            boundary
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn4(frameContentStyles(), frameChromeStyles(), "gridui-frame-surface"),
+            style: chromeStyle(padding),
+            children: [
+              children,
+              /* @__PURE__ */ jsx3(
+                FrameDecoration,
+                {
+                  decoration: resolveFrameDecoration(boundary, decoration)
+                }
+              )
+            ]
+          }
+        ),
+        signature ? /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: cn4(frameContentStyles(), frameSignatureStyles(), signatureAppearance === "cropped" && frameSignatureCroppedStyles()),
+            "aria-hidden": "true",
+            inert: true,
+            children: signature
+          }
+        ) : null
+      ]
+    }
+  );
+};
+
+// src/frame/rail/style.ts
+import { cva as cva3 } from "class-variance-authority";
+var frameRailStyles = cva3("gridui-frame-rail flex h-full box-border flex-col py-gridui-24 text-muted");
+var frameRailContentStyles = cva3("gridui-frame-rail-content relative z-[var(--gridui-z-interaction)] min-w-0 type-eyebrow bg-inherit");
+var frameRailStickyBottomStyles = cva3("gridui-frame-rail-sticky-bottom justify-end [&>.gridui-frame-rail-content]:sticky");
+
+// src/frame/rail/rail.tsx
+import { cn as cn5 } from "@gridui/style-utils";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var FrameRail = (props) => {
+  const {
+    placement = "start",
+    children,
+    className,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      ...restProps,
+      className: cn5(frameRailStyles(), placement === "sticky-bottom" && frameRailStickyBottomStyles(), className),
+      children: /* @__PURE__ */ jsx4(
+        "div",
+        {
+          className: frameRailContentStyles(),
+          children
+        }
+      )
+    }
+  );
+};
+var FrameRailGroup = (props) => {
+  const { rail, railWidth = {
+    base: 0,
+    md: 32
+  }, children, className, style, ...restProps } = props;
+  const hasRail = rail !== void 0 && rail !== null && rail !== false;
+  const width = resolveResponsive(hasRail ? railWidth : 0);
+  const layoutStyle = {
+    "--gridui-rail-width-base": spaceValue(width.base),
+    "--gridui-rail-width-md": spaceValue(width.md),
+    "--gridui-rail-width-lg": spaceValue(width.lg),
+    "--gridui-rail-display-base": width.base === 0 ? "none" : "block",
+    "--gridui-rail-display-md": width.md === 0 ? "none" : "block",
+    "--gridui-rail-display-lg": width.lg === 0 ? "none" : "block",
+    ...style
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ...restProps,
+      className: cn5("gridui-frame-rail-group", className),
+      style: layoutStyle,
+      children: [
+        hasRail ? /* @__PURE__ */ jsx4(
+          "div",
+          {
+            className: "gridui-frame-rail-track",
+            children: rail
+          }
+        ) : null,
+        /* @__PURE__ */ jsx4(
+          "div",
+          {
+            className: "gridui-frame-rail-body",
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/frame/page/style.ts
+import { cva as cva4 } from "class-variance-authority";
+var pageFrameVariants = cva4("gridui-page-frame min-h-svh", {
+  variants: {
+    width: {
+      narrow: "gridui-container-narrow",
+      standard: "gridui-container-standard",
+      wide: "gridui-container-wide"
+    }
+  },
+  defaultVariants: { width: "standard" }
+});
+
+// src/frame/page/page.tsx
+import { cn as cn6 } from "@gridui/style-utils";
+import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var FrameSections = (props) => {
+  const { className, ...restProps } = props;
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      ...restProps,
+      className: cn6("gridui-frame-sections", className)
+    }
+  );
+};
+var PageFrame = (props) => {
+  const {
+    width = "standard",
+    header,
+    footer,
+    rail,
+    railWidth,
+    railScope = "page",
+    mainGutterStart,
+    children,
+    className,
+    ...restProps
+  } = props;
+  const railOptions = railWidth === void 0 ? {} : { railWidth };
+  const content = /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5(FrameSections, { children }),
+    /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: "gridui-container gridui-frame-fill",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx5(
+          "div",
+          {
+            className: cn6(frameContentStyles())
+          }
+        )
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs3(
+    FrameRailGroup,
+    {
+      ...restProps,
+      rail: railScope === "page" ? rail : void 0,
+      ...railOptions,
+      className: cn6(pageFrameVariants({ width }), className),
+      children: [
+        header ? /* @__PURE__ */ jsx5(
+          "div",
+          {
+            className: "gridui-frame-page-header",
+            children: header
+          }
+        ) : null,
+        /* @__PURE__ */ jsx5(
+          "main",
+          {
+            className: "gridui-frame-main",
+            style: mainGutterStart === void 0 ? void 0 : spacingStyle("main-gutter-start", mainGutterStart),
+            children: railScope === "main" && rail !== void 0 && rail !== null && rail !== false ? /* @__PURE__ */ jsx5(
+              FrameRailGroup,
+              {
+                rail,
+                ...railOptions,
+                className: "gridui-frame-main-rail-group",
+                children: content
+              }
+            ) : content
+          }
+        ),
+        footer ? /* @__PURE__ */ jsx5(
+          "div",
+          {
+            className: "gridui-frame-page-footer",
+            children: footer
+          }
+        ) : null
+      ]
+    }
+  );
+};
+
+// src/frame/texture/texture.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var FrameTexture = (props) => {
+  const { texture } = props;
+  return texture === "none" ? null : /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: "gridui-frame-texture",
+      "data-texture": texture,
+      "aria-hidden": "true",
+      inert: true
+    }
+  );
+};
+
+// src/frame/section.tsx
+import { cn as cn7 } from "@gridui/style-utils";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var FrameSection = (props) => {
+  const {
+    tone = "neutral",
+    boundary = "line",
+    decoration,
+    texture = "none",
+    edges = "frame",
+    className,
+    children,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsxs4(
+    "section",
+    {
+      ...restProps,
+      className: cn7("gridui-container gridui-frame-section", frameToneStyles({ tone }), className),
+      "data-edges": edges,
+      children: [
+        /* @__PURE__ */ jsx7(
+          FrameBoundary,
+          {
+            boundary
+          }
+        ),
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            className: cn7(frameContentStyles(), "gridui-frame-surface", edges === "none" && "border-x-0"),
+            children: [
+              /* @__PURE__ */ jsx7(
+                FrameTexture,
+                {
+                  texture
+                }
+              ),
+              children,
+              /* @__PURE__ */ jsx7(
+                FrameDecoration,
+                {
+                  decoration: resolveFrameDecoration(boundary, decoration)
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/primitives/container/style.ts
+import { cva as cva5 } from "class-variance-authority";
+var containerVariants = cva5("gridui-container", {
+  variants: {
+    width: {
+      narrow: "gridui-container-narrow",
+      standard: "gridui-container-standard",
+      wide: "gridui-container-wide"
+    }
+  },
+  defaultVariants: { width: "standard" }
+});
+
+// src/primitives/container/container.tsx
+import { cn as cn8 } from "@gridui/style-utils";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Container = (props) => {
+  const { width = "standard", className, ...restProps } = props;
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      ...restProps,
+      className: cn8(containerVariants({ width }), className)
+    }
+  );
+};
+
+// src/primitives/grid/style.ts
+import { cn as cn9 } from "@gridui/style-utils";
+import { cva as cva6 } from "class-variance-authority";
+var gridStyles = cva6(cn9(
+  "gridui-grid",
+  "grid min-w-0"
+));
+var gridCellsStyles = cva6(cn9(
+  "gridui-grid-cells",
+  "border-t border-solid border-border border-l border-solid border-border"
+));
+var gridItemStyles = cva6(cn9(
+  "gridui-grid-item",
+  "min-w-0 wrap-anywhere"
+));
+var gridInternalStyles = cva6(cn9(
+  "gridui-grid-internal",
+  "bg-border"
+));
+var gridVariants = cva6(gridStyles(), {
+  variants: {
+    frame: {
+      none: "",
+      cells: gridCellsStyles(),
+      internal: gridInternalStyles()
+    }
+  },
+  defaultVariants: { frame: "none" }
+});
+
+// src/primitives/grid/grid-item.tsx
+import { cn as cn10 } from "@gridui/style-utils";
+import { Slot } from "@radix-ui/react-slot";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var GridItem = (props) => {
+  const {
+    asChild = false,
+    span = 1,
+    padding = 0,
+    align,
+    className,
+    style,
+    ...restProps
+  } = props;
+  const size = resolveResponsive(span);
+  const inset = resolveResponsive(padding);
+  const layoutStyle = {
+    "--gridui-span": spanValue(size.base),
+    "--gridui-span-md": spanValue(size.md),
+    "--gridui-span-lg": spanValue(size.lg),
+    "--gridui-padding": spaceValue(inset.base),
+    "--gridui-padding-md": spaceValue(inset.md),
+    "--gridui-padding-lg": spaceValue(inset.lg),
+    ...align ? {
+      display: "flex",
+      alignItems: align
+    } : {},
+    ...style
+  };
+  const Component = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx9(
+    Component,
+    {
+      ...restProps,
+      className: cn10(gridItemStyles(), className),
+      style: layoutStyle
+    }
+  );
+};
+
+// src/primitives/grid/tracks.ts
+var gridColumnCount = (columns) => {
+  return typeof columns === "number" ? columns : columns.length;
+};
+var gridTemplate = (columns) => {
+  if (typeof columns === "number") {
+    return `repeat(${columns}, minmax(0, 1fr))`;
+  }
+  return columns.map((track) => {
+    return track === "1fr" ? "minmax(0, 1fr)" : track;
+  }).join(" ");
+};
+var fillGridRowSpans = (columns, spans) => {
+  let occupied = 0;
+  return spans.map((span, index) => {
+    if (span < 1 || span > columns) {
+      throw new RangeError("Grid item spans must fit within the grid columns.");
+    }
+    if (occupied + span > columns) {
+      occupied = 0;
+    }
+    occupied += span;
+    const next = spans[index + 1];
+    if (next === void 0 || occupied + next > columns) {
+      const filled = span + columns - occupied;
+      occupied = 0;
+      return filled;
+    }
+    if (occupied === columns) {
+      occupied = 0;
+    }
+    return span;
+  });
+};
+
+// src/primitives/grid/grid.tsx
+import { cn as cn11 } from "@gridui/style-utils";
+import { Children, cloneElement, isValidElement } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Grid = (props) => {
+  const {
+    columns = 1,
+    frame = "none",
+    gap = 16,
+    fillLastRow = false,
+    className,
+    style,
+    children,
+    ...restProps
+  } = props;
+  const tracks = resolveResponsive(columns);
+  const count = {
+    base: gridColumnCount(tracks.base),
+    md: gridColumnCount(tracks.md),
+    lg: gridColumnCount(tracks.lg)
+  };
+  const spacing = resolveResponsive(frame === "none" ? gap : 0);
+  const layoutStyle = {
+    "--gridui-columns": count.base,
+    "--gridui-columns-md": count.md,
+    "--gridui-columns-lg": count.lg,
+    "--gridui-grid-template": gridTemplate(tracks.base),
+    "--gridui-grid-template-md": gridTemplate(tracks.md),
+    "--gridui-grid-template-lg": gridTemplate(tracks.lg),
+    "--gridui-gap": frame === "internal" ? "1px" : spaceValue(spacing.base),
+    "--gridui-gap-md": frame === "internal" ? "1px" : spaceValue(spacing.md),
+    "--gridui-gap-lg": frame === "internal" ? "1px" : spaceValue(spacing.lg),
+    ...style
+  };
+  let content = children;
+  if (fillLastRow) {
+    const items = Children.toArray(children).map((child) => {
+      if (!isValidElement(child) || child.type !== GridItem) {
+        throw new TypeError("Grid fillLastRow requires direct GridItem children.");
+      }
+      return child;
+    });
+    const spans = items.map((item) => {
+      return resolveResponsive(item.props.span ?? 1);
+    });
+    const filled = {
+      base: fillGridRowSpans(count.base, spans.map((span) => {
+        return span.base === "full" ? count.base : span.base;
+      })),
+      md: fillGridRowSpans(count.md, spans.map((span) => {
+        return span.md === "full" ? count.md : span.md;
+      })),
+      lg: fillGridRowSpans(count.lg, spans.map((span) => {
+        return span.lg === "full" ? count.lg : span.lg;
+      }))
+    };
+    content = items.map((item, index) => {
+      const itemStyle = {
+        "--gridui-span": `span ${filled.base[index]} / span ${filled.base[index]}`,
+        "--gridui-span-md": `span ${filled.md[index]} / span ${filled.md[index]}`,
+        "--gridui-span-lg": `span ${filled.lg[index]} / span ${filled.lg[index]}`,
+        ...item.props.style
+      };
+      return cloneElement(item, {
+        style: itemStyle
+      });
+    });
+  }
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      ...restProps,
+      className: cn11(gridVariants({ frame }), className),
+      style: layoutStyle,
+      children: content
+    }
+  );
+};
+
+// src/primitives/row/style.ts
+import { cn as cn12 } from "@gridui/style-utils";
+import { cva as cva7 } from "class-variance-authority";
+var rowStyles = cva7(cn12(
+  "gridui-row",
+  "min-w-0"
+));
+
+// src/primitives/row/row.tsx
+import { cn as cn13 } from "@gridui/style-utils";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Row = (props) => {
+  const {
+    gap = 16,
+    rowGap = gap,
+    align = "stretch",
+    justify = "start",
+    wrap = true,
+    inline = false,
+    className,
+    style,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsx11(
+    "div",
+    {
+      ...restProps,
+      className: cn13(rowStyles(), className),
+      "data-inline": inline,
+      style: {
+        display: inline ? "inline-flex" : "flex",
+        alignItems: align,
+        justifyContent: justify === "between" ? "space-between" : "flex-start",
+        flexWrap: wrap ? "wrap" : "nowrap",
+        gap: `${spaceValue(rowGap)} ${spaceValue(gap)}`,
+        ...style
+      }
+    }
+  );
+};
+
+// src/primitives/stack/style.ts
+import { cn as cn14 } from "@gridui/style-utils";
+import { cva as cva8 } from "class-variance-authority";
+var stackStyles = cva8(cn14(
+  "gridui-stack",
+  "flex min-w-0 flex-col"
+));
+
+// src/primitives/stack/stack.tsx
+import { cn as cn15 } from "@gridui/style-utils";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Stack = (props) => {
+  const {
+    gap = 16,
+    width,
+    maxWidth,
+    paddingStart,
+    className,
+    style,
+    ...restProps
+  } = props;
+  const spacing = resolveResponsive(gap);
+  const layoutStyle = {
+    "--gridui-gap": spaceValue(spacing.base),
+    "--gridui-gap-md": spaceValue(spacing.md),
+    "--gridui-gap-lg": spaceValue(spacing.lg),
+    width: width === "full" ? "100%" : void 0,
+    maxWidth,
+    paddingTop: paddingStart === void 0 ? void 0 : spaceValue(paddingStart),
+    ...style
+  };
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      ...restProps,
+      className: cn15(stackStyles(), className),
+      style: layoutStyle
+    }
+  );
+};
+export {
+  Container,
+  FrameFooter,
+  FrameHeader,
+  FrameRail,
+  FrameRailGroup,
+  FrameSection,
+  FrameSections,
+  FrameTexture,
+  Grid,
+  GridItem,
+  PageFrame,
+  Row,
+  Stack,
+  spacingStyle
+};
+//# sourceMappingURL=index.js.map