@iris-ui-kit/react 0.1.0

package/dist/skeletons.cjs

@@ -0,0 +1,1304 @@
+'use client'
+'use strict';
+
+var React9 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@iris-ui-kit/core');
+
+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 React9__namespace = /*#__PURE__*/_interopNamespace(React9);
+
+// src/skeletons/LoginTemplate.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 = React9__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 = React9__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
+      }
+    );
+  }
+);
+var SIZE_MAP = {
+  sm: { padding: "4px 8px", fontSize: "12px", minHeight: "28px" },
+  md: { padding: "6px 12px", fontSize: "14px", minHeight: "34px" },
+  lg: { padding: "8px 12px", fontSize: "16px", minHeight: "40px" }
+};
+var IrisInput = React9__namespace.forwardRef(function IrisInput2({
+  size = "md",
+  type = "text",
+  invalid = false,
+  ariaDescribedby,
+  prefix,
+  suffix,
+  style,
+  onFocus,
+  onBlur,
+  ...rest
+}, ref) {
+  const [focused, setFocused] = React9__namespace.useState(false);
+  const sizeStyles = SIZE_MAP[size];
+  const borderColor = invalid ? "var(--iris-danger)" : focused ? "var(--iris-primary)" : "var(--iris-border)";
+  const boxShadow = focused ? `0 0 0 3px ${invalid ? "rgba(239, 68, 68, 0.18)" : "rgba(99, 102, 241, 0.18)"}` : "none";
+  const wrapperStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "6px",
+    background: "var(--iris-background)",
+    color: "var(--iris-foreground)",
+    border: `1px solid ${borderColor}`,
+    borderRadius: "var(--iris-radius-md, 6px)",
+    cursor: rest.disabled ? "not-allowed" : "text",
+    opacity: rest.disabled ? 0.6 : 1,
+    transition: "border-color 120ms ease, box-shadow 120ms ease",
+    boxShadow,
+    padding: sizeStyles.padding,
+    minHeight: sizeStyles.minHeight,
+    fontSize: sizeStyles.fontSize,
+    ...style
+  };
+  const inputStyle = {
+    flex: 1,
+    minWidth: 0,
+    border: "none",
+    outline: "none",
+    background: "transparent",
+    color: "inherit",
+    fontFamily: "inherit",
+    fontSize: "inherit",
+    padding: 0
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      "data-iris-input": "",
+      "data-iris-input-size": size,
+      "data-state": invalid ? "invalid" : focused ? "focused" : "idle",
+      style: wrapperStyle,
+      children: [
+        prefix ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-iris-input-prefix": "",
+            style: { display: "inline-flex", alignItems: "center", color: "var(--iris-muted)" },
+            children: prefix
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ...rest,
+            ref,
+            type,
+            "aria-invalid": invalid ? "true" : void 0,
+            "aria-describedby": ariaDescribedby,
+            style: inputStyle,
+            onFocus: (e) => {
+              setFocused(true);
+              onFocus?.(e);
+            },
+            onBlur: (e) => {
+              setFocused(false);
+              onBlur?.(e);
+            }
+          }
+        ),
+        suffix ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-iris-input-suffix": "",
+            style: { display: "inline-flex", alignItems: "center", color: "var(--iris-muted)" },
+            children: suffix
+          }
+        ) : null
+      ]
+    }
+  );
+});
+var I18nContext = React9__namespace.createContext(null);
+function useStore(store) {
+  return React9.useSyncExternalStore(
+    store.subscribe,
+    store.getState,
+    store.getState
+    // SSR fallback — same as client snapshot in our case.
+  );
+}
+
+// src/i18n/useI18n.ts
+var fallbackI18n = null;
+function getFallback() {
+  if (fallbackI18n === null) fallbackI18n = core.createI18n();
+  return fallbackI18n;
+}
+function useI18n() {
+  const ctx = React9__namespace.useContext(I18nContext);
+  const i18n = ctx ?? getFallback();
+  const state = useStore(i18n.store);
+  return {
+    locale: state.locale,
+    t: i18n.t,
+    formatDate: i18n.formatDate,
+    formatNumber: i18n.formatNumber,
+    formatRelativeTime: i18n.formatRelativeTime,
+    setLocale: i18n.setLocale,
+    setMessages: i18n.setMessages
+  };
+}
+var IrisPasswordInput = React9__namespace.forwardRef(
+  function IrisPasswordInput2({ showToggle = true, suffix, prefix, disabled, readOnly, ...rest }, ref) {
+    const { t } = useI18n();
+    const [visible, setVisible] = React9__namespace.useState(false);
+    const toggle = () => {
+      if (disabled || readOnly) return;
+      setVisible((v) => !v);
+    };
+    const toggleBtn = showToggle ? /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "data-iris-password-input-toggle": "",
+        "aria-label": visible ? t("passwordInput.hide") : t("passwordInput.show"),
+        "aria-pressed": visible ? "true" : "false",
+        onClick: toggle,
+        style: {
+          background: "transparent",
+          border: "none",
+          cursor: disabled ? "not-allowed" : "pointer",
+          color: "var(--iris-muted)",
+          padding: "0 2px",
+          fontSize: 13,
+          lineHeight: 1
+        },
+        children: visible ? "\u{1F648}" : "\u{1F441}"
+      }
+    ) : null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      IrisInput,
+      {
+        ...rest,
+        ref,
+        type: visible ? "text" : "password",
+        disabled,
+        readOnly,
+        prefix,
+        suffix: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          suffix,
+          toggleBtn
+        ] }),
+        "data-iris-password-input": ""
+      }
+    );
+  }
+);
+var DIM_MAP = {
+  sm: "14px",
+  md: "18px",
+  lg: "22px"
+};
+var IrisCheckbox = React9__namespace.forwardRef(
+  function IrisCheckbox2({
+    checked,
+    defaultChecked = false,
+    onChange,
+    size = "md",
+    disabled = false,
+    invalid = false,
+    ariaDescribedby,
+    children,
+    style,
+    ...rest
+  }, ref) {
+    const [internalChecked, setInternalChecked] = React9__namespace.useState(defaultChecked);
+    const isControlled = checked !== void 0;
+    const value = isControlled ? checked : internalChecked;
+    const innerRef = React9__namespace.useRef(null);
+    React9__namespace.useImperativeHandle(ref, () => innerRef.current, []);
+    React9__namespace.useEffect(() => {
+      const el = innerRef.current;
+      if (el) el.indeterminate = value === "indeterminate";
+    }, [value]);
+    const handleChange = (e) => {
+      if (disabled) return;
+      const next = e.target.checked;
+      if (!isControlled) setInternalChecked(next);
+      onChange?.(next, e);
+    };
+    const state = value === "indeterminate" ? "indeterminate" : value ? "checked" : "unchecked";
+    const dim = DIM_MAP[size];
+    const boxStyle = {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: dim,
+      height: dim,
+      borderRadius: "var(--iris-radius-sm, 4px)",
+      border: `1px solid ${state === "unchecked" ? "var(--iris-border)" : "var(--iris-primary)"}`,
+      background: state === "unchecked" ? "var(--iris-background)" : "var(--iris-primary)",
+      color: "var(--iris-primary-foreground, #fff)",
+      cursor: disabled ? "not-allowed" : "pointer",
+      opacity: disabled ? 0.6 : 1,
+      transition: "background-color 120ms ease, border-color 120ms ease",
+      flexShrink: 0
+    };
+    const indicator = state === "checked" ? "\u2713" : state === "indeterminate" ? "\u2014" : null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        "data-iris-checkbox": "",
+        "data-iris-checkbox-size": size,
+        "data-state": state,
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 8,
+          cursor: disabled ? "not-allowed" : "pointer",
+          userSelect: "none",
+          ...style
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ...rest,
+              ref: innerRef,
+              type: "checkbox",
+              checked: value === true,
+              disabled,
+              "aria-checked": state === "indeterminate" ? "mixed" : state === "checked" ? "true" : "false",
+              "aria-describedby": ariaDescribedby,
+              "aria-invalid": invalid ? "true" : void 0,
+              onChange: handleChange,
+              style: {
+                position: "absolute",
+                opacity: 0,
+                width: 0,
+                height: 0,
+                pointerEvents: "none"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", style: boxStyle, children: indicator }),
+          children
+        ]
+      }
+    );
+  }
+);
+
+// src/primitives/button/styles.ts
+var STYLE_ID = "iris-button-styles";
+var CSS = `
+.iris-button {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--iris-gap-sm, 4px);
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1.2;
+  border-radius: var(--iris-radius-md, 6px);
+  white-space: nowrap;
+  user-select: none;
+  position: relative;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    color 120ms ease,
+    filter 120ms ease;
+}
+.iris-button:focus-visible {
+  outline: 2px solid var(--iris-primary);
+  outline-offset: 2px;
+}
+.iris-button[disabled],
+.iris-button[aria-busy="true"] {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.iris-button[data-iris-button-variant="solid"]:not([disabled]):not([aria-busy="true"]):hover {
+  filter: brightness(1.08);
+}
+.iris-button[data-iris-button-variant="outline"]:not([disabled]):not([aria-busy="true"]):hover,
+.iris-button[data-iris-button-variant="ghost"]:not([disabled]):not([aria-busy="true"]):hover {
+  background-color: var(--iris-surface-hover);
+}
+.iris-button[data-iris-button-variant="link"]:not([disabled]):not([aria-busy="true"]):hover {
+  text-decoration: underline;
+}
+.iris-button-leading {
+  display: inline-flex;
+  align-items: center;
+}
+.iris-button-spinner {
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  animation: iris-button-spin 0.7s linear infinite;
+}
+@keyframes iris-button-spin {
+  to { transform: rotate(360deg); }
+}
+`;
+var installed = false;
+function installButtonStyles() {
+  if (installed) return;
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) {
+    installed = true;
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = CSS;
+  document.head.appendChild(style);
+  installed = true;
+}
+var SIZE_STYLES = {
+  sm: { padding: "var(--iris-padding-sm) var(--iris-padding-md)", fontSize: "12px" },
+  md: { padding: "var(--iris-padding-sm) var(--iris-padding-lg)", fontSize: "14px" },
+  lg: { padding: "var(--iris-padding-md) var(--iris-padding-lg)", fontSize: "16px" }
+};
+var VARIANT_STYLES = {
+  solid: {
+    background: "var(--iris-primary)",
+    color: "var(--iris-primary-foreground)",
+    border: "1px solid var(--iris-primary)"
+  },
+  outline: {
+    background: "transparent",
+    color: "var(--iris-primary)",
+    border: "1px solid var(--iris-border)"
+  },
+  ghost: {
+    background: "transparent",
+    color: "var(--iris-foreground)",
+    border: "1px solid transparent"
+  },
+  link: {
+    background: "transparent",
+    color: "var(--iris-primary)",
+    border: "1px solid transparent",
+    textDecoration: "none"
+  }
+};
+function buildInlineStyle(variant, size) {
+  const base = { ...SIZE_STYLES[size], ...VARIANT_STYLES[variant] };
+  if (variant === "link") base.padding = "0";
+  return base;
+}
+function Spinner() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "iris-button-spinner", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "3" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M22 12a10 10 0 0 1-10 10",
+        stroke: "currentColor",
+        strokeWidth: "3",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
+function IrisButton({
+  variant = "solid",
+  size = "md",
+  disabled = false,
+  loading = false,
+  type = "button",
+  asChild = false,
+  leading,
+  children,
+  className,
+  style,
+  onClick,
+  ...rest
+}) {
+  React9.useEffect(() => {
+    installButtonStyles();
+  }, []);
+  const isInteractive = !disabled && !loading;
+  const handleClick = (event) => {
+    if (!isInteractive) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    onClick?.(event);
+  };
+  const baseProps = {
+    className: ["iris-button", className].filter(Boolean).join(" "),
+    "data-iris-button-variant": variant,
+    "data-iris-button-size": size,
+    "aria-disabled": disabled ? "true" : void 0,
+    "aria-busy": loading ? "true" : void 0,
+    style: { ...buildInlineStyle(variant, size), ...style ?? {} }
+  };
+  if (asChild) {
+    const only = React9.Children.only(children);
+    if (!only || !React9.isValidElement(only)) {
+      if (typeof process === "undefined" || process.env?.NODE_ENV !== "production") {
+        console.warn("[iris-ui] IrisButton: as-child requires a single React element child");
+      }
+      return null;
+    }
+    const childProps = only.props;
+    return React9.cloneElement(only, {
+      ...rest,
+      ...baseProps,
+      className: [baseProps.className, childProps.className].filter(Boolean).join(" "),
+      style: { ...baseProps.style, ...childProps.style ?? {} },
+      onClick: core.composeEventHandlers(
+        handleClick,
+        childProps.onClick ?? (() => {
+        })
+      ),
+      ...isInteractive ? {} : { disabled: true }
+    });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("button", { ...rest, type, disabled: !isInteractive, onClick: handleClick, ...baseProps, children: [
+    (loading || leading) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "iris-button-leading", children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) : leading }),
+    children
+  ] });
+}
+var IrisFormField = React9__namespace.forwardRef(
+  function IrisFormField2({ label, hint, error, required = false, labelFor, size = "md", style, children, ...rest }, ref) {
+    const generated = React9__namespace.useId();
+    const controlId = labelFor || `${generated}-control`;
+    const hintId = `${generated}-hint`;
+    const errorId = `${generated}-error`;
+    const describedBy = React9__namespace.useMemo(() => {
+      const ids = [];
+      if (hint && !error) ids.push(hintId);
+      if (error) ids.push(errorId);
+      return ids.length > 0 ? ids.join(" ") : void 0;
+    }, [hint, error, hintId, errorId]);
+    let injected = false;
+    const decorated = React9__namespace.Children.map(children, (child) => {
+      if (!injected && React9__namespace.isValidElement(child)) {
+        injected = true;
+        const injectedProps = {
+          id: controlId,
+          invalid: error ? true : void 0,
+          ariaDescribedby: describedBy
+        };
+        return React9__namespace.cloneElement(child, injectedProps);
+      }
+      return child;
+    });
+    const labelStyle = {
+      fontSize: size === "sm" ? "12px" : "14px",
+      fontWeight: 500,
+      color: error ? "var(--iris-danger)" : "var(--iris-foreground)",
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "4px"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ...rest,
+        ref,
+        "data-iris-form-field": "",
+        "data-iris-form-field-state": error ? "invalid" : "valid",
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "4px",
+          ...style
+        },
+        children: [
+          label ? /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: controlId, "data-iris-form-field-label": "", style: labelStyle, children: [
+            label,
+            required ? /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                "data-iris-form-field-required": "",
+                style: { color: "var(--iris-danger)" },
+                children: "*"
+              }
+            ) : null
+          ] }) : null,
+          decorated,
+          hint && !error ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: hintId,
+              "data-iris-form-field-hint": "",
+              style: { fontSize: 12, color: "var(--iris-muted)" },
+              children: hint
+            }
+          ) : null,
+          error ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: errorId,
+              "data-iris-form-field-error": "",
+              role: "alert",
+              style: { fontSize: 12, color: "var(--iris-danger)" },
+              children: error
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+var TONE_TO_VAR = {
+  info: "--iris-primary",
+  success: "--iris-success",
+  warning: "--iris-warning",
+  danger: "--iris-danger"
+};
+function IrisAlert({
+  tone = "info",
+  title,
+  closable = false,
+  open,
+  onClose,
+  icon,
+  children,
+  style,
+  ...rest
+}) {
+  const { t } = useI18n();
+  const [internalOpen, setInternalOpen] = React9__namespace.useState(true);
+  React9__namespace.useEffect(() => {
+    if (open !== void 0) setInternalOpen(open);
+  }, [open]);
+  const isOpen = open !== void 0 ? open : internalOpen;
+  if (!isOpen) return null;
+  const tonalVar = `var(${TONE_TO_VAR[tone]})`;
+  const handleClose = () => {
+    if (open === void 0) setInternalOpen(false);
+    onClose?.();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...rest,
+      role: tone === "danger" || tone === "warning" ? "alert" : "status",
+      "data-iris-alert": "",
+      "data-iris-alert-tone": tone,
+      style: {
+        display: "flex",
+        gap: "var(--iris-gap-md, 12px)",
+        padding: "var(--iris-padding-md, 12px)",
+        borderRadius: "var(--iris-radius-md, 6px)",
+        border: `1px solid ${tonalVar}`,
+        // `backgroundColor` is the precomputed fallback under color-mix (engines
+        // without it); the `background` shorthand overrides with the exact mix.
+        backgroundColor: `var(${TONE_TO_VAR[tone]}-subtle)`,
+        background: `color-mix(in srgb, ${tonalVar} 10%, var(--iris-background))`,
+        color: "var(--iris-foreground)",
+        alignItems: "flex-start",
+        ...style
+      },
+      children: [
+        icon ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-iris-alert-icon": "",
+            style: { color: tonalVar, flexShrink: 0, display: "inline-flex" },
+            children: icon
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-iris-alert-body": "", style: { flex: 1, minWidth: 0 }, children: [
+          title ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-iris-alert-title": "",
+              style: { fontWeight: 600, marginBottom: 4, color: tonalVar },
+              children: title
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("div", { "data-iris-alert-content": "", children })
+        ] }),
+        closable ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "data-iris-alert-close": "",
+            "aria-label": t("alert.close"),
+            onClick: handleClose,
+            style: {
+              background: "transparent",
+              border: "none",
+              cursor: "pointer",
+              color: "var(--iris-muted)",
+              fontSize: 16,
+              padding: 0,
+              lineHeight: 1,
+              flexShrink: 0
+            },
+            children: "\u2715"
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var SPACING_MAP = {
+  sm: "8px",
+  md: "16px",
+  lg: "24px"
+};
+function IrisDivider({
+  orientation = "horizontal",
+  label,
+  spacing = "md",
+  children,
+  style,
+  ...rest
+}) {
+  const isHorizontal = orientation === "horizontal";
+  const hasLabel = Boolean(label || children);
+  if (isHorizontal && !hasLabel) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "hr",
+      {
+        ...rest,
+        "data-iris-divider": "",
+        "data-iris-divider-orientation": "horizontal",
+        style: {
+          border: "none",
+          borderTop: "1px solid var(--iris-border)",
+          margin: `${SPACING_MAP[spacing]} 0`,
+          width: "100%",
+          ...style
+        }
+      }
+    );
+  }
+  if (!isHorizontal) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ...rest,
+        role: "separator",
+        "aria-orientation": "vertical",
+        "data-iris-divider": "",
+        "data-iris-divider-orientation": "vertical",
+        style: {
+          display: "inline-block",
+          width: 1,
+          alignSelf: "stretch",
+          background: "var(--iris-border)",
+          margin: `0 ${SPACING_MAP[spacing]}`,
+          ...style
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...rest,
+      role: "separator",
+      "aria-orientation": "horizontal",
+      "data-iris-divider": "",
+      "data-iris-divider-orientation": "horizontal",
+      "data-iris-divider-has-label": "true",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        margin: `${SPACING_MAP[spacing]} 0`,
+        color: "var(--iris-muted)",
+        fontSize: 12,
+        textTransform: "uppercase",
+        letterSpacing: "0.04em",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "data-iris-divider-line": "before", style: lineStyle }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "data-iris-divider-label": "", children: children ?? label }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "data-iris-divider-line": "after", style: lineStyle })
+      ]
+    }
+  );
+}
+var lineStyle = {
+  flex: 1,
+  height: 1,
+  background: "var(--iris-border)"
+};
+function IrisLoginTemplate({
+  title = "Sign in",
+  description = "",
+  showRemember = true,
+  error = "",
+  submitLabel = "Sign in",
+  loading = false,
+  header,
+  forgot,
+  footer,
+  onSubmit,
+  style,
+  className
+}) {
+  const [email, setEmail] = React9__namespace.useState("");
+  const [password, setPassword] = React9__namespace.useState("");
+  const [remember, setRemember] = React9__namespace.useState(false);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSubmit?.({ email, password, remember });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-iris-login-template": "",
+      className,
+      style: {
+        minHeight: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: "var(--iris-background)",
+        color: "var(--iris-foreground)",
+        padding: 24,
+        ...style
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(IrisContainer, { maxWidth: "420px", padding: 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "form",
+        {
+          onSubmit: handleSubmit,
+          "data-iris-login-form": "",
+          style: {
+            background: "var(--iris-surface)",
+            border: "1px solid var(--iris-border)",
+            borderRadius: "var(--iris-radius-lg, 8px)",
+            padding: 32,
+            boxShadow: "0 6px 20px -8px rgba(0, 0, 0, 0.16)"
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsxs(IrisStack, { spacing: "lg", children: [
+            header ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h1", { style: { margin: "0 0 4px 0", fontSize: 22, fontWeight: 700 }, children: title }),
+              description ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  style: {
+                    margin: 0,
+                    color: "var(--iris-muted)",
+                    fontSize: 14
+                  },
+                  children: description
+                }
+              ) : null
+            ] }),
+            error ? /* @__PURE__ */ jsxRuntime.jsx(IrisAlert, { tone: "danger", title: error }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx(IrisFormField, { label: "Email", required: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              IrisInput,
+              {
+                type: "email",
+                value: email,
+                onChange: (e) => setEmail(e.target.value),
+                placeholder: "you@example.com",
+                disabled: loading,
+                autoComplete: "email"
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(IrisFormField, { label: "Password", required: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              IrisPasswordInput,
+              {
+                value: password,
+                onChange: (e) => setPassword(e.target.value),
+                placeholder: "Enter your password",
+                disabled: loading,
+                autoComplete: "current-password"
+              }
+            ) }),
+            showRemember ? /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between"
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    IrisCheckbox,
+                    {
+                      checked: remember,
+                      onChange: (next) => setRemember(next),
+                      disabled: loading,
+                      children: "Remember me"
+                    }
+                  ),
+                  forgot ?? null
+                ]
+              }
+            ) : null,
+            /* @__PURE__ */ jsxRuntime.jsx(IrisButton, { type: "submit", variant: "solid", loading, style: { width: "100%" }, children: submitLabel }),
+            footer ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(IrisDivider, { spacing: "md", label: "or" }),
+              footer
+            ] }) : null
+          ] })
+        }
+      ) })
+    }
+  );
+}
+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] = React9__namespace.useState(defaultCollapsed);
+  const collapsed = isControlled ? Boolean(collapsedProp) : internal;
+  const setCollapsed = React9__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
+    }
+  );
+}
+function IrisDashboardTemplate({
+  title = "Dashboard",
+  sidebarTitle = "",
+  nav = [],
+  activeId = "",
+  onActiveIdChange,
+  cards = [],
+  defaultCollapsed = false,
+  onCollapsedChange,
+  header,
+  sidebarHeader,
+  children,
+  cardSlots,
+  style,
+  className
+}) {
+  const [collapsed, setCollapsed] = React9__namespace.useState(defaultCollapsed);
+  const handleCollapsed = (next) => {
+    setCollapsed(next);
+    onCollapsedChange?.(next);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-iris-dashboard-template": "",
+      className,
+      style: {
+        width: "100%",
+        height: "100vh",
+        background: "var(--iris-background)",
+        color: "var(--iris-foreground)",
+        ...style
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        IrisSidebarLayout,
+        {
+          collapsed,
+          onCollapsedChange: handleCollapsed,
+          width: 240,
+          collapsedWidth: 64,
+          sidebar: (state) => /* @__PURE__ */ jsxRuntime.jsxs(IrisStack, { spacing: "sm", style: { padding: 12 }, children: [
+            sidebarHeader ? sidebarHeader(state) : sidebarTitle ? /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  padding: "8px 12px",
+                  fontSize: 14,
+                  fontWeight: 600,
+                  color: "var(--iris-foreground)",
+                  opacity: state.collapsed ? 0 : 1,
+                  transition: "opacity 120ms ease",
+                  whiteSpace: "nowrap",
+                  overflow: "hidden"
+                },
+                children: sidebarTitle
+              }
+            ) : null,
+            /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Primary", style: { display: "flex", flexDirection: "column", gap: 2 }, children: nav.map((item) => {
+              const isActive = item.id === activeId;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  "data-iris-dashboard-nav-item": item.id,
+                  "data-iris-dashboard-nav-active": isActive ? "true" : void 0,
+                  onClick: () => onActiveIdChange?.(item.id),
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 10,
+                    padding: "8px 12px",
+                    background: isActive ? "var(--iris-primary)" : "transparent",
+                    color: isActive ? "var(--iris-primary-foreground, #fff)" : "var(--iris-foreground)",
+                    border: "none",
+                    borderRadius: "var(--iris-radius-sm, 4px)",
+                    cursor: "pointer",
+                    fontSize: 14,
+                    fontFamily: "inherit",
+                    textAlign: "start",
+                    outline: "none"
+                  },
+                  children: [
+                    item.icon ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        style: { width: 16, display: "inline-flex", justifyContent: "center" },
+                        children: item.icon
+                      }
+                    ) : null,
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        style: {
+                          opacity: state.collapsed ? 0 : 1,
+                          transition: "opacity 120ms ease",
+                          whiteSpace: "nowrap"
+                        },
+                        children: item.label
+                      }
+                    )
+                  ]
+                },
+                item.id
+              );
+            }) })
+          ] }),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            IrisHeaderLayout,
+            {
+              header: header ?? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "12px 20px", fontSize: 16, fontWeight: 600 }, children: title }),
+              children: children ?? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: 20 }, children: /* @__PURE__ */ jsxRuntime.jsx(IrisDashboardGrid, { columns: 12, gap: 16, children: cards.map((card) => /* @__PURE__ */ jsxRuntime.jsxs(
+                IrisDashboardCard,
+                {
+                  colSpan: card.colSpan ?? 4,
+                  rowSpan: card.rowSpan ?? 1,
+                  "data-iris-dashboard-card-id": card.id,
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "h3",
+                      {
+                        style: {
+                          margin: "0 0 8px 0",
+                          fontSize: 14,
+                          fontWeight: 600,
+                          color: "var(--iris-foreground)"
+                        },
+                        children: card.title
+                      }
+                    ),
+                    cardSlots?.[card.id] !== void 0 ? cardSlots[card.id] : card.body ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 13, color: "var(--iris-muted)" }, children: card.body }) : null
+                  ]
+                },
+                card.id
+              )) }) })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+
+exports.IrisDashboardTemplate = IrisDashboardTemplate;
+exports.IrisLoginTemplate = IrisLoginTemplate;
+//# sourceMappingURL=skeletons.cjs.map
+//# sourceMappingURL=skeletons.cjs.map