@iris-ui-kit/react 0.1.0

package/dist/layouts.cjs

@@ -0,0 +1,386 @@
+'use client'
+'use strict';
+
+var React4 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
+
+// src/layouts/Stack.tsx
+var ALIGN_MAP = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch"
+};
+var JUSTIFY_MAP = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around"
+};
+function toCssSpacing(spacing) {
+  if (typeof spacing === "number") return `${spacing}px`;
+  if (spacing === "sm" || spacing === "md" || spacing === "lg") {
+    return `var(--iris-gap-${spacing})`;
+  }
+  return spacing;
+}
+var IrisStack = React4__namespace.forwardRef(function IrisStack2({
+  direction = "column",
+  spacing = "md",
+  align = "stretch",
+  justify = "start",
+  wrap = false,
+  inline = false,
+  style,
+  children,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...rest,
+      ref,
+      "data-iris-stack": "",
+      "data-iris-stack-direction": direction,
+      style: {
+        display: inline ? "inline-flex" : "flex",
+        flexDirection: direction,
+        gap: toCssSpacing(spacing),
+        alignItems: ALIGN_MAP[align],
+        justifyContent: JUSTIFY_MAP[justify],
+        flexWrap: wrap ? "wrap" : "nowrap",
+        ...style
+      },
+      children
+    }
+  );
+});
+var WIDTH_MAP = {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  full: "100%"
+};
+function resolveMaxWidth(input) {
+  if (input === "sm" || input === "md" || input === "lg" || input === "xl" || input === "full") {
+    return WIDTH_MAP[input];
+  }
+  return input;
+}
+function resolvePadding(input) {
+  if (typeof input === "number") return `${input}px`;
+  if (input === "sm" || input === "md" || input === "lg") {
+    return `var(--iris-padding-${input})`;
+  }
+  return input;
+}
+var IrisContainer = React4__namespace.forwardRef(
+  function IrisContainer2({ maxWidth = "lg", padding = "md", center = true, style, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ...rest,
+        ref,
+        "data-iris-container": "",
+        "data-iris-container-max-width": maxWidth,
+        style: {
+          width: "100%",
+          maxWidth: resolveMaxWidth(maxWidth),
+          padding: `0 ${resolvePadding(padding)}`,
+          ...center ? { marginInlineStart: "auto", marginInlineEnd: "auto" } : {},
+          ...style
+        },
+        children
+      }
+    );
+  }
+);
+function resolveColumns(columns, minColWidth) {
+  if (typeof columns === "number") return `repeat(${columns}, minmax(0, 1fr))`;
+  if (columns === "auto-fit") return `repeat(auto-fit, minmax(${minColWidth}, 1fr))`;
+  if (columns === "auto-fill") return `repeat(auto-fill, minmax(${minColWidth}, 1fr))`;
+  return columns;
+}
+function toCssSpacing2(spacing) {
+  if (typeof spacing === "number") return `${spacing}px`;
+  if (spacing === "sm" || spacing === "md" || spacing === "lg") {
+    return `var(--iris-gap-${spacing})`;
+  }
+  return spacing;
+}
+var IrisGrid = React4__namespace.forwardRef(function IrisGrid2({
+  columns = "auto-fit",
+  minColWidth = "200px",
+  rowGap,
+  columnGap,
+  gap = "md",
+  inline = false,
+  style,
+  children,
+  ...rest
+}, ref) {
+  const colTemplate = resolveColumns(columns, minColWidth);
+  const resolvedRowGap = rowGap !== void 0 ? toCssSpacing2(rowGap) : toCssSpacing2(gap);
+  const resolvedColGap = columnGap !== void 0 ? toCssSpacing2(columnGap) : toCssSpacing2(gap);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...rest,
+      ref,
+      "data-iris-grid": "",
+      "data-iris-grid-columns": String(columns),
+      style: {
+        display: inline ? "inline-grid" : "grid",
+        gridTemplateColumns: colTemplate,
+        rowGap: resolvedRowGap,
+        columnGap: resolvedColGap,
+        ...style
+      },
+      children
+    }
+  );
+});
+function asLen(v) {
+  return typeof v === "number" ? `${v}px` : v;
+}
+function IrisSidebarLayout({
+  collapsed: collapsedProp,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  width = 240,
+  collapsedWidth = 60,
+  side = "left",
+  sidebar,
+  style,
+  children,
+  ...rest
+}) {
+  const isControlled = collapsedProp !== void 0;
+  const [internal, setInternal] = React4__namespace.useState(defaultCollapsed);
+  const collapsed = isControlled ? Boolean(collapsedProp) : internal;
+  const setCollapsed = React4__namespace.useCallback(
+    (next) => {
+      if (!isControlled) setInternal(next);
+      onCollapsedChange?.(next);
+    },
+    [isControlled, onCollapsedChange]
+  );
+  const sidebarContent = typeof sidebar === "function" ? sidebar({
+    collapsed,
+    setCollapsed
+  }) : sidebar;
+  const sidebarStyle = {
+    width: collapsed ? asLen(collapsedWidth) : asLen(width),
+    flexShrink: 0,
+    background: "var(--iris-surface)",
+    borderRight: side === "left" ? "1px solid var(--iris-border)" : "none",
+    borderLeft: side === "right" ? "1px solid var(--iris-border)" : "none",
+    transition: "width 180ms ease",
+    overflow: "hidden",
+    display: "flex",
+    flexDirection: "column"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...rest,
+      "data-iris-sidebar-layout": "",
+      "data-collapsed": collapsed ? "" : void 0,
+      "data-side": side,
+      style: {
+        display: "flex",
+        flexDirection: side === "right" ? "row-reverse" : "row",
+        width: "100%",
+        height: "100%",
+        minHeight: 0,
+        color: "var(--iris-foreground)",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "aside",
+          {
+            role: "complementary",
+            "data-iris-sidebar": "",
+            "data-collapsed": collapsed ? "" : void 0,
+            style: sidebarStyle,
+            children: sidebarContent
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-iris-sidebar-main": "",
+            style: {
+              flex: 1,
+              minWidth: 0,
+              overflow: "auto",
+              background: "var(--iris-background)"
+            },
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+function asLen2(v) {
+  return typeof v === "number" ? `${v}px` : v;
+}
+function IrisHeaderLayout({
+  headerHeight = "auto",
+  footerHeight = "auto",
+  sticky = true,
+  header,
+  footer,
+  style,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...rest,
+      "data-iris-header-layout": "",
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        height: "100%",
+        minHeight: 0,
+        background: "var(--iris-background)",
+        color: "var(--iris-foreground)",
+        ...style
+      },
+      children: [
+        header ? /* @__PURE__ */ jsxRuntime.jsx(
+          "header",
+          {
+            role: "banner",
+            "data-iris-header": "",
+            style: {
+              flexShrink: 0,
+              height: asLen2(headerHeight),
+              borderBottom: "1px solid var(--iris-border)",
+              background: "var(--iris-surface)",
+              position: sticky ? "sticky" : "static",
+              top: 0,
+              zIndex: 50
+            },
+            children: header
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "main",
+          {
+            role: "main",
+            "data-iris-header-main": "",
+            style: { flex: 1, minHeight: 0, overflow: "auto" },
+            children
+          }
+        ),
+        footer ? /* @__PURE__ */ jsxRuntime.jsx(
+          "footer",
+          {
+            role: "contentinfo",
+            "data-iris-footer": "",
+            style: {
+              flexShrink: 0,
+              height: asLen2(footerHeight),
+              borderTop: "1px solid var(--iris-border)",
+              background: "var(--iris-surface)"
+            },
+            children: footer
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function IrisDashboardGrid({
+  columns = 12,
+  gap = 16,
+  minColWidth,
+  style,
+  children,
+  ...rest
+}) {
+  const gapCss = typeof gap === "number" ? `${gap}px` : gap;
+  const gridTemplateColumns = minColWidth ? `repeat(auto-fill, minmax(${typeof minColWidth === "number" ? `${minColWidth}px` : minColWidth}, 1fr))` : `repeat(${columns}, 1fr)`;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...rest,
+      "data-iris-dashboard-grid": "",
+      style: {
+        display: "grid",
+        gap: gapCss,
+        gridTemplateColumns,
+        width: "100%",
+        ...style
+      },
+      children
+    }
+  );
+}
+function IrisDashboardCard({
+  colSpan = 1,
+  rowSpan = 1,
+  surface = true,
+  style,
+  children,
+  ...rest
+}) {
+  const gridColumn = colSpan === "full" ? "1 / -1" : `span ${colSpan}`;
+  const gridRow = rowSpan > 1 ? `span ${rowSpan}` : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...rest,
+      "data-iris-dashboard-card": "",
+      style: {
+        gridColumn,
+        gridRow,
+        background: surface ? "var(--iris-surface)" : "transparent",
+        border: surface ? "1px solid var(--iris-border)" : "none",
+        borderRadius: "var(--iris-radius-md, 6px)",
+        padding: surface ? "var(--iris-padding-lg, 20px)" : 0,
+        minWidth: 0,
+        ...style
+      },
+      children
+    }
+  );
+}
+
+exports.IrisContainer = IrisContainer;
+exports.IrisDashboardCard = IrisDashboardCard;
+exports.IrisDashboardGrid = IrisDashboardGrid;
+exports.IrisGrid = IrisGrid;
+exports.IrisHeaderLayout = IrisHeaderLayout;
+exports.IrisSidebarLayout = IrisSidebarLayout;
+exports.IrisStack = IrisStack;
+//# sourceMappingURL=layouts.cjs.map
+//# sourceMappingURL=layouts.cjs.map

package/dist/layouts.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/layouts/Stack.tsx","../src/layouts/Container.tsx","../src/layouts/Grid.tsx","../src/layouts/SidebarLayout.tsx","../src/layouts/HeaderLayout.tsx","../src/layouts/DashboardGrid.tsx"],"names":["React","IrisStack","jsx","React2","IrisContainer","toCssSpacing","React3","IrisGrid","React4","jsxs","asLen"],"mappings":"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","file":"layouts.cjs","sourcesContent":["import * as React from 'react'\n\nexport type IrisStackDirection = 'row' | 'column'\nexport type IrisStackAlign = 'start' | 'center' | 'end' | 'stretch'\nexport type IrisStackJustify = 'start' | 'center' | 'end' | 'between' | 'around'\n\nconst ALIGN_MAP: Record<IrisStackAlign, string> = {\n  start: 'flex-start',\n  center: 'center',\n  end: 'flex-end',\n  stretch: 'stretch',\n}\n\nconst JUSTIFY_MAP: Record<IrisStackJustify, string> = {\n  start: 'flex-start',\n  center: 'center',\n  end: 'flex-end',\n  between: 'space-between',\n  around: 'space-around',\n}\n\nfunction toCssSpacing(spacing: string | number): string {\n  if (typeof spacing === 'number') return `${spacing}px`\n  if (spacing === 'sm' || spacing === 'md' || spacing === 'lg') {\n    return `var(--iris-gap-${spacing})`\n  }\n  return spacing\n}\n\nexport interface IrisStackProps extends React.HTMLAttributes<HTMLDivElement> {\n  direction?: IrisStackDirection\n  spacing?: string | number\n  align?: IrisStackAlign\n  justify?: IrisStackJustify\n  wrap?: boolean\n  /** When true, renders as `inline-flex`. */\n  inline?: boolean\n}\n\n/**\n * Flex container with token-driven spacing. The lightest possible layout\n * primitive — saves hand-writing `display: flex` everywhere.\n */\nexport const IrisStack = React.forwardRef<HTMLDivElement, IrisStackProps>(function IrisStack(\n  {\n    direction = 'column',\n    spacing = 'md',\n    align = 'stretch',\n    justify = 'start',\n    wrap = false,\n    inline = false,\n    style,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      data-iris-stack=\"\"\n      data-iris-stack-direction={direction}\n      style={{\n        display: inline ? 'inline-flex' : 'flex',\n        flexDirection: direction,\n        gap: toCssSpacing(spacing),\n        alignItems: ALIGN_MAP[align],\n        justifyContent: JUSTIFY_MAP[justify],\n        flexWrap: wrap ? 'wrap' : 'nowrap',\n        ...style,\n      }}\n    >\n      {children}\n    </div>\n  )\n})\n","import * as React from 'react'\n\nexport type IrisContainerMaxWidth = 'sm' | 'md' | 'lg' | 'xl' | 'full' | string\n\nconst WIDTH_MAP: Record<'sm' | 'md' | 'lg' | 'xl' | 'full', string> = {\n  sm: '640px',\n  md: '768px',\n  lg: '1024px',\n  xl: '1280px',\n  full: '100%',\n}\n\nfunction resolveMaxWidth(input: IrisContainerMaxWidth): string {\n  if (input === 'sm' || input === 'md' || input === 'lg' || input === 'xl' || input === 'full') {\n    return WIDTH_MAP[input]\n  }\n  return input\n}\n\nfunction resolvePadding(input: string | number): string {\n  if (typeof input === 'number') return `${input}px`\n  if (input === 'sm' || input === 'md' || input === 'lg') {\n    return `var(--iris-padding-${input})`\n  }\n  return input\n}\n\nexport interface IrisContainerProps extends React.HTMLAttributes<HTMLDivElement> {\n  maxWidth?: IrisContainerMaxWidth\n  padding?: string | number\n  center?: boolean\n}\n\n/**\n * Centered max-width wrapper. Use to bound content width on large screens\n * without rewriting flex/grid plumbing.\n */\nexport const IrisContainer = React.forwardRef<HTMLDivElement, IrisContainerProps>(\n  function IrisContainer(\n    { maxWidth = 'lg', padding = 'md', center = true, style, children, ...rest },\n    ref,\n  ) {\n    return (\n      <div\n        {...rest}\n        ref={ref}\n        data-iris-container=\"\"\n        data-iris-container-max-width={maxWidth}\n        style={{\n          width: '100%',\n          maxWidth: resolveMaxWidth(maxWidth),\n          padding: `0 ${resolvePadding(padding)}`,\n          ...(center ? { marginInlineStart: 'auto', marginInlineEnd: 'auto' } : {}),\n          ...style,\n        }}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n","import * as React from 'react'\n\nexport type IrisGridColumns =\n  | number\n  | 'auto-fit'\n  | 'auto-fill'\n  | string /* raw grid-template-columns value */\n\nfunction resolveColumns(columns: IrisGridColumns, minColWidth: string): string {\n  if (typeof columns === 'number') return `repeat(${columns}, minmax(0, 1fr))`\n  if (columns === 'auto-fit') return `repeat(auto-fit, minmax(${minColWidth}, 1fr))`\n  if (columns === 'auto-fill') return `repeat(auto-fill, minmax(${minColWidth}, 1fr))`\n  return columns\n}\n\nfunction toCssSpacing(spacing: string | number): string {\n  if (typeof spacing === 'number') return `${spacing}px`\n  if (spacing === 'sm' || spacing === 'md' || spacing === 'lg') {\n    return `var(--iris-gap-${spacing})`\n  }\n  return spacing\n}\n\nexport interface IrisGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  columns?: IrisGridColumns\n  /** Min width per column for `auto-fit` / `auto-fill`. */\n  minColWidth?: string\n  rowGap?: string | number\n  columnGap?: string | number\n  /** Shorthand for both row + column gap. Overridden if rowGap/columnGap given. */\n  gap?: string | number\n  inline?: boolean\n}\n\n/**\n * Two-dimensional grid layout primitive. Three column modes:\n *   - Fixed integer (`columns={3}`)\n *   - Responsive auto-fit (`columns=\"auto-fit\"` + `minColWidth`)\n *   - Raw CSS (`columns=\"100px 1fr 100px\"`)\n */\nexport const IrisGrid = React.forwardRef<HTMLDivElement, IrisGridProps>(function IrisGrid(\n  {\n    columns = 'auto-fit',\n    minColWidth = '200px',\n    rowGap,\n    columnGap,\n    gap = 'md',\n    inline = false,\n    style,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const colTemplate = resolveColumns(columns, minColWidth)\n  const resolvedRowGap = rowGap !== undefined ? toCssSpacing(rowGap) : toCssSpacing(gap)\n  const resolvedColGap = columnGap !== undefined ? toCssSpacing(columnGap) : toCssSpacing(gap)\n\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      data-iris-grid=\"\"\n      data-iris-grid-columns={String(columns)}\n      style={{\n        display: inline ? 'inline-grid' : 'grid',\n        gridTemplateColumns: colTemplate,\n        rowGap: resolvedRowGap,\n        columnGap: resolvedColGap,\n        ...style,\n      }}\n    >\n      {children}\n    </div>\n  )\n})\n","import * as React from 'react'\n\nexport interface IrisSidebarLayoutSidebarState {\n  collapsed: boolean\n  setCollapsed: (next: boolean) => void\n}\n\nexport interface IrisSidebarLayoutProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'children'\n> {\n  collapsed?: boolean\n  defaultCollapsed?: boolean\n  onCollapsedChange?: (next: boolean) => void\n  /** Sidebar width when expanded (px or CSS length). */\n  width?: number | string\n  /** Sidebar width when collapsed. */\n  collapsedWidth?: number | string\n  side?: 'left' | 'right'\n  /** Sidebar content. May be a render function that receives `{ collapsed, setCollapsed }`. */\n  sidebar?: React.ReactNode | ((state: IrisSidebarLayoutSidebarState) => React.ReactNode)\n  children?: React.ReactNode\n}\n\nfunction asLen(v: number | string): string {\n  return typeof v === 'number' ? `${v}px` : v\n}\n\n/**\n * Two-column layout with a collapsible sidebar. The sidebar is kept mounted\n * across collapses (only its width animates) so component state survives.\n */\nexport function IrisSidebarLayout({\n  collapsed: collapsedProp,\n  defaultCollapsed = false,\n  onCollapsedChange,\n  width = 240,\n  collapsedWidth = 60,\n  side = 'left',\n  sidebar,\n  style,\n  children,\n  ...rest\n}: IrisSidebarLayoutProps): React.ReactElement {\n  const isControlled = collapsedProp !== undefined\n  const [internal, setInternal] = React.useState(defaultCollapsed)\n  const collapsed = isControlled ? Boolean(collapsedProp) : internal\n\n  const setCollapsed = React.useCallback(\n    (next: boolean) => {\n      if (!isControlled) setInternal(next)\n      onCollapsedChange?.(next)\n    },\n    [isControlled, onCollapsedChange],\n  )\n\n  const sidebarContent =\n    typeof sidebar === 'function'\n      ? (sidebar as (s: IrisSidebarLayoutSidebarState) => React.ReactNode)({\n          collapsed,\n          setCollapsed,\n        })\n      : sidebar\n\n  const sidebarStyle: React.CSSProperties = {\n    width: collapsed ? asLen(collapsedWidth) : asLen(width),\n    flexShrink: 0,\n    background: 'var(--iris-surface)',\n    borderRight: side === 'left' ? '1px solid var(--iris-border)' : 'none',\n    borderLeft: side === 'right' ? '1px solid var(--iris-border)' : 'none',\n    transition: 'width 180ms ease',\n    overflow: 'hidden',\n    display: 'flex',\n    flexDirection: 'column',\n  }\n\n  return (\n    <div\n      {...rest}\n      data-iris-sidebar-layout=\"\"\n      data-collapsed={collapsed ? '' : undefined}\n      data-side={side}\n      style={{\n        display: 'flex',\n        flexDirection: side === 'right' ? 'row-reverse' : 'row',\n        width: '100%',\n        height: '100%',\n        minHeight: 0,\n        color: 'var(--iris-foreground)',\n        ...style,\n      }}\n    >\n      <aside\n        role=\"complementary\"\n        data-iris-sidebar=\"\"\n        data-collapsed={collapsed ? '' : undefined}\n        style={sidebarStyle}\n      >\n        {sidebarContent}\n      </aside>\n      <div\n        data-iris-sidebar-main=\"\"\n        style={{\n          flex: 1,\n          minWidth: 0,\n          overflow: 'auto',\n          background: 'var(--iris-background)',\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n","import * as React from 'react'\n\nexport interface IrisHeaderLayoutProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'children'\n> {\n  /** Header height (px or CSS length). Default `'auto'`. */\n  headerHeight?: number | string\n  /** Footer height (px or CSS length). Default `'auto'`. */\n  footerHeight?: number | string\n  /** Header sticks via `position: sticky` instead of static. Default true. */\n  sticky?: boolean\n  header?: React.ReactNode\n  footer?: React.ReactNode\n  children?: React.ReactNode\n}\n\nfunction asLen(v: number | string): string {\n  return typeof v === 'number' ? `${v}px` : v\n}\n\n/**\n * Two- (or three-) region vertical layout: a sticky header on top, a\n * scrollable main region, and an optional footer.\n */\nexport function IrisHeaderLayout({\n  headerHeight = 'auto',\n  footerHeight = 'auto',\n  sticky = true,\n  header,\n  footer,\n  style,\n  children,\n  ...rest\n}: IrisHeaderLayoutProps): React.ReactElement {\n  return (\n    <div\n      {...rest}\n      data-iris-header-layout=\"\"\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        width: '100%',\n        height: '100%',\n        minHeight: 0,\n        background: 'var(--iris-background)',\n        color: 'var(--iris-foreground)',\n        ...style,\n      }}\n    >\n      {header ? (\n        <header\n          role=\"banner\"\n          data-iris-header=\"\"\n          style={{\n            flexShrink: 0,\n            height: asLen(headerHeight),\n            borderBottom: '1px solid var(--iris-border)',\n            background: 'var(--iris-surface)',\n            position: sticky ? 'sticky' : 'static',\n            top: 0,\n            zIndex: 50,\n          }}\n        >\n          {header}\n        </header>\n      ) : null}\n      <main\n        role=\"main\"\n        data-iris-header-main=\"\"\n        style={{ flex: 1, minHeight: 0, overflow: 'auto' }}\n      >\n        {children}\n      </main>\n      {footer ? (\n        <footer\n          role=\"contentinfo\"\n          data-iris-footer=\"\"\n          style={{\n            flexShrink: 0,\n            height: asLen(footerHeight),\n            borderTop: '1px solid var(--iris-border)',\n            background: 'var(--iris-surface)',\n          }}\n        >\n          {footer}\n        </footer>\n      ) : null}\n    </div>\n  )\n}\n","import * as React from 'react'\n\nexport interface IrisDashboardGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  columns?: number\n  gap?: number | string\n  /** Use `repeat(auto-fill, minmax(<minColWidth>, 1fr))` instead of fixed `columns`. */\n  minColWidth?: number | string\n}\n\n/**\n * 12-column responsive grid for dashboard composition. Each child controls\n * its span via `gridColumn` style or by wrapping with `IrisDashboardCard`.\n */\nexport function IrisDashboardGrid({\n  columns = 12,\n  gap = 16,\n  minColWidth,\n  style,\n  children,\n  ...rest\n}: IrisDashboardGridProps): React.ReactElement {\n  const gapCss = typeof gap === 'number' ? `${gap}px` : gap\n  const gridTemplateColumns = minColWidth\n    ? `repeat(auto-fill, minmax(${\n        typeof minColWidth === 'number' ? `${minColWidth}px` : minColWidth\n      }, 1fr))`\n    : `repeat(${columns}, 1fr)`\n\n  return (\n    <div\n      {...rest}\n      data-iris-dashboard-grid=\"\"\n      style={{\n        display: 'grid',\n        gap: gapCss,\n        gridTemplateColumns,\n        width: '100%',\n        ...style,\n      }}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport interface IrisDashboardCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  colSpan?: number | 'full'\n  rowSpan?: number\n  /** Show the styled card surface (background + border). Default true. */\n  surface?: boolean\n}\n\n/**\n * A single dashboard grid cell. `colSpan='full'` makes it fill the row.\n */\nexport function IrisDashboardCard({\n  colSpan = 1,\n  rowSpan = 1,\n  surface = true,\n  style,\n  children,\n  ...rest\n}: IrisDashboardCardProps): React.ReactElement {\n  const gridColumn = colSpan === 'full' ? '1 / -1' : `span ${colSpan}`\n  const gridRow = rowSpan > 1 ? `span ${rowSpan}` : undefined\n\n  return (\n    <div\n      {...rest}\n      data-iris-dashboard-card=\"\"\n      style={{\n        gridColumn,\n        gridRow,\n        background: surface ? 'var(--iris-surface)' : 'transparent',\n        border: surface ? '1px solid var(--iris-border)' : 'none',\n        borderRadius: 'var(--iris-radius-md, 6px)',\n        padding: surface ? 'var(--iris-padding-lg, 20px)' : 0,\n        minWidth: 0,\n        ...style,\n      }}\n    >\n      {children}\n    </div>\n  )\n}\n"]}

package/dist/layouts.d.cts

@@ -0,0 +1,92 @@
+import * as React from 'react';
+export { I as IrisSidebarLayout, a as IrisSidebarLayoutProps, b as IrisSidebarLayoutSidebarState } from './SidebarLayout-fWQRvK0a.cjs';
+
+type IrisStackDirection = 'row' | 'column';
+type IrisStackAlign = 'start' | 'center' | 'end' | 'stretch';
+type IrisStackJustify = 'start' | 'center' | 'end' | 'between' | 'around';
+interface IrisStackProps extends React.HTMLAttributes<HTMLDivElement> {
+    direction?: IrisStackDirection;
+    spacing?: string | number;
+    align?: IrisStackAlign;
+    justify?: IrisStackJustify;
+    wrap?: boolean;
+    /** When true, renders as `inline-flex`. */
+    inline?: boolean;
+}
+/**
+ * Flex container with token-driven spacing. The lightest possible layout
+ * primitive — saves hand-writing `display: flex` everywhere.
+ */
+declare const IrisStack: React.ForwardRefExoticComponent<IrisStackProps & React.RefAttributes<HTMLDivElement>>;
+
+type IrisContainerMaxWidth = 'sm' | 'md' | 'lg' | 'xl' | 'full' | string;
+interface IrisContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    maxWidth?: IrisContainerMaxWidth;
+    padding?: string | number;
+    center?: boolean;
+}
+/**
+ * Centered max-width wrapper. Use to bound content width on large screens
+ * without rewriting flex/grid plumbing.
+ */
+declare const IrisContainer: React.ForwardRefExoticComponent<IrisContainerProps & React.RefAttributes<HTMLDivElement>>;
+
+type IrisGridColumns = number | 'auto-fit' | 'auto-fill' | string;
+interface IrisGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    columns?: IrisGridColumns;
+    /** Min width per column for `auto-fit` / `auto-fill`. */
+    minColWidth?: string;
+    rowGap?: string | number;
+    columnGap?: string | number;
+    /** Shorthand for both row + column gap. Overridden if rowGap/columnGap given. */
+    gap?: string | number;
+    inline?: boolean;
+}
+/**
+ * Two-dimensional grid layout primitive. Three column modes:
+ *   - Fixed integer (`columns={3}`)
+ *   - Responsive auto-fit (`columns="auto-fit"` + `minColWidth`)
+ *   - Raw CSS (`columns="100px 1fr 100px"`)
+ */
+declare const IrisGrid: React.ForwardRefExoticComponent<IrisGridProps & React.RefAttributes<HTMLDivElement>>;
+
+interface IrisHeaderLayoutProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Header height (px or CSS length). Default `'auto'`. */
+    headerHeight?: number | string;
+    /** Footer height (px or CSS length). Default `'auto'`. */
+    footerHeight?: number | string;
+    /** Header sticks via `position: sticky` instead of static. Default true. */
+    sticky?: boolean;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    children?: React.ReactNode;
+}
+/**
+ * Two- (or three-) region vertical layout: a sticky header on top, a
+ * scrollable main region, and an optional footer.
+ */
+declare function IrisHeaderLayout({ headerHeight, footerHeight, sticky, header, footer, style, children, ...rest }: IrisHeaderLayoutProps): React.ReactElement;
+
+interface IrisDashboardGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    columns?: number;
+    gap?: number | string;
+    /** Use `repeat(auto-fill, minmax(<minColWidth>, 1fr))` instead of fixed `columns`. */
+    minColWidth?: number | string;
+}
+/**
+ * 12-column responsive grid for dashboard composition. Each child controls
+ * its span via `gridColumn` style or by wrapping with `IrisDashboardCard`.
+ */
+declare function IrisDashboardGrid({ columns, gap, minColWidth, style, children, ...rest }: IrisDashboardGridProps): React.ReactElement;
+interface IrisDashboardCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    colSpan?: number | 'full';
+    rowSpan?: number;
+    /** Show the styled card surface (background + border). Default true. */
+    surface?: boolean;
+}
+/**
+ * A single dashboard grid cell. `colSpan='full'` makes it fill the row.
+ */
+declare function IrisDashboardCard({ colSpan, rowSpan, surface, style, children, ...rest }: IrisDashboardCardProps): React.ReactElement;
+
+export { IrisContainer, type IrisContainerMaxWidth, type IrisContainerProps, IrisDashboardCard, type IrisDashboardCardProps, IrisDashboardGrid, type IrisDashboardGridProps, IrisGrid, type IrisGridColumns, type IrisGridProps, IrisHeaderLayout, type IrisHeaderLayoutProps, IrisStack, type IrisStackAlign, type IrisStackDirection, type IrisStackJustify, type IrisStackProps };

package/dist/layouts.d.ts

@@ -0,0 +1,92 @@
+import * as React from 'react';
+export { I as IrisSidebarLayout, a as IrisSidebarLayoutProps, b as IrisSidebarLayoutSidebarState } from './SidebarLayout-fWQRvK0a.js';
+
+type IrisStackDirection = 'row' | 'column';
+type IrisStackAlign = 'start' | 'center' | 'end' | 'stretch';
+type IrisStackJustify = 'start' | 'center' | 'end' | 'between' | 'around';
+interface IrisStackProps extends React.HTMLAttributes<HTMLDivElement> {
+    direction?: IrisStackDirection;
+    spacing?: string | number;
+    align?: IrisStackAlign;
+    justify?: IrisStackJustify;
+    wrap?: boolean;
+    /** When true, renders as `inline-flex`. */
+    inline?: boolean;
+}
+/**
+ * Flex container with token-driven spacing. The lightest possible layout
+ * primitive — saves hand-writing `display: flex` everywhere.
+ */
+declare const IrisStack: React.ForwardRefExoticComponent<IrisStackProps & React.RefAttributes<HTMLDivElement>>;
+
+type IrisContainerMaxWidth = 'sm' | 'md' | 'lg' | 'xl' | 'full' | string;
+interface IrisContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    maxWidth?: IrisContainerMaxWidth;
+    padding?: string | number;
+    center?: boolean;
+}
+/**
+ * Centered max-width wrapper. Use to bound content width on large screens
+ * without rewriting flex/grid plumbing.
+ */
+declare const IrisContainer: React.ForwardRefExoticComponent<IrisContainerProps & React.RefAttributes<HTMLDivElement>>;
+
+type IrisGridColumns = number | 'auto-fit' | 'auto-fill' | string;
+interface IrisGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    columns?: IrisGridColumns;
+    /** Min width per column for `auto-fit` / `auto-fill`. */
+    minColWidth?: string;
+    rowGap?: string | number;
+    columnGap?: string | number;
+    /** Shorthand for both row + column gap. Overridden if rowGap/columnGap given. */
+    gap?: string | number;
+    inline?: boolean;
+}
+/**
+ * Two-dimensional grid layout primitive. Three column modes:
+ *   - Fixed integer (`columns={3}`)
+ *   - Responsive auto-fit (`columns="auto-fit"` + `minColWidth`)
+ *   - Raw CSS (`columns="100px 1fr 100px"`)
+ */
+declare const IrisGrid: React.ForwardRefExoticComponent<IrisGridProps & React.RefAttributes<HTMLDivElement>>;
+
+interface IrisHeaderLayoutProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Header height (px or CSS length). Default `'auto'`. */
+    headerHeight?: number | string;
+    /** Footer height (px or CSS length). Default `'auto'`. */
+    footerHeight?: number | string;
+    /** Header sticks via `position: sticky` instead of static. Default true. */
+    sticky?: boolean;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    children?: React.ReactNode;
+}
+/**
+ * Two- (or three-) region vertical layout: a sticky header on top, a
+ * scrollable main region, and an optional footer.
+ */
+declare function IrisHeaderLayout({ headerHeight, footerHeight, sticky, header, footer, style, children, ...rest }: IrisHeaderLayoutProps): React.ReactElement;
+
+interface IrisDashboardGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    columns?: number;
+    gap?: number | string;
+    /** Use `repeat(auto-fill, minmax(<minColWidth>, 1fr))` instead of fixed `columns`. */
+    minColWidth?: number | string;
+}
+/**
+ * 12-column responsive grid for dashboard composition. Each child controls
+ * its span via `gridColumn` style or by wrapping with `IrisDashboardCard`.
+ */
+declare function IrisDashboardGrid({ columns, gap, minColWidth, style, children, ...rest }: IrisDashboardGridProps): React.ReactElement;
+interface IrisDashboardCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    colSpan?: number | 'full';
+    rowSpan?: number;
+    /** Show the styled card surface (background + border). Default true. */
+    surface?: boolean;
+}
+/**
+ * A single dashboard grid cell. `colSpan='full'` makes it fill the row.
+ */
+declare function IrisDashboardCard({ colSpan, rowSpan, surface, style, children, ...rest }: IrisDashboardCardProps): React.ReactElement;
+
+export { IrisContainer, type IrisContainerMaxWidth, type IrisContainerProps, IrisDashboardCard, type IrisDashboardCardProps, IrisDashboardGrid, type IrisDashboardGridProps, IrisGrid, type IrisGridColumns, type IrisGridProps, IrisHeaderLayout, type IrisHeaderLayoutProps, IrisStack, type IrisStackAlign, type IrisStackDirection, type IrisStackJustify, type IrisStackProps };

package/dist/layouts.js

@@ -0,0 +1,6 @@
+'use client'
+export { IrisGrid } from './chunk-SJO74IB3.js';
+export { IrisContainer, IrisDashboardCard, IrisDashboardGrid, IrisStack } from './chunk-ZKBDUWUD.js';
+export { IrisHeaderLayout, IrisSidebarLayout } from './chunk-J5FB2UB2.js';
+//# sourceMappingURL=layouts.js.map
+//# sourceMappingURL=layouts.js.map

package/dist/layouts.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":";","file":"layouts.js"}