@iris-ui-kit/vue 0.1.0

package/dist/chunk-QLUIKEMJ.js

@@ -0,0 +1,1197 @@
+import { IrisContainer, IrisStack, IrisDashboardGrid, IrisDashboardCard } from './chunk-3R3QDLJC.js';
+import { findFirstElement, mergeSlotProps } from './chunk-F77KIPOH.js';
+import { IrisSidebarLayout, IrisHeaderLayout } from './chunk-I6D5VXQK.js';
+import { useI18n } from './chunk-TCAXRWT6.js';
+import { defineComponent, ref, computed, h, useId, cloneVNode, Fragment, watch } from 'vue';
+
+var IrisInput = defineComponent({
+  name: "IrisInput",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: [String, Number], default: "" },
+    type: { type: String, default: "text" },
+    size: { type: String, default: "md" },
+    placeholder: { type: String, default: "" },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    /** Visual error state — does NOT enforce validation. */
+    invalid: { type: Boolean, default: false },
+    id: { type: String, default: void 0 },
+    /** Forwarded as `aria-describedby` on the inner <input>. Set by IrisFormField. */
+    ariaDescribedby: { type: String, default: void 0 }
+  },
+  emits: {
+    "update:modelValue": (_value) => true,
+    focus: (_event) => true,
+    blur: (_event) => true
+  },
+  setup(props, { slots, attrs, emit }) {
+    const focused = ref(false);
+    const sizeStyles = computed(() => {
+      const map = {
+        sm: {
+          padding: "4px var(--iris-padding-sm)",
+          fontSize: "12px",
+          minHeight: "28px"
+        },
+        md: {
+          padding: "6px var(--iris-padding-md)",
+          fontSize: "14px",
+          minHeight: "34px"
+        },
+        lg: {
+          padding: "8px var(--iris-padding-md)",
+          fontSize: "16px",
+          minHeight: "40px"
+        }
+      };
+      return map[props.size];
+    });
+    const wrapperStyle = computed(() => {
+      const borderColor = props.invalid ? "var(--iris-danger)" : focused.value ? "var(--iris-primary)" : "var(--iris-border)";
+      const boxShadow = focused.value ? `0 0 0 3px ${props.invalid ? "rgba(239, 68, 68, 0.18)" : "rgba(99, 102, 241, 0.18)"}` : "none";
+      return {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "var(--iris-gap-sm)",
+        background: "var(--iris-background)",
+        color: "var(--iris-foreground)",
+        border: `1px solid ${borderColor}`,
+        borderRadius: "var(--iris-radius-md)",
+        cursor: props.disabled ? "not-allowed" : "text",
+        opacity: props.disabled ? "0.6" : "1",
+        transition: "border-color 120ms ease, box-shadow 120ms ease",
+        boxShadow,
+        ...sizeStyles.value,
+        padding: sizeStyles.value.padding,
+        minHeight: sizeStyles.value.minHeight
+      };
+    });
+    const inputStyle = {
+      flex: "1",
+      minWidth: "0",
+      border: "none",
+      outline: "none",
+      background: "transparent",
+      color: "inherit",
+      fontFamily: "inherit",
+      fontSize: "inherit",
+      padding: "0"
+    };
+    const onInput = (event) => {
+      emit("update:modelValue", event.target.value);
+    };
+    const onFocus = (event) => {
+      focused.value = true;
+      emit("focus", event);
+    };
+    const onBlur = (event) => {
+      focused.value = false;
+      emit("blur", event);
+    };
+    return () => {
+      const prefix = slots.prefix?.();
+      const suffix = slots.suffix?.();
+      return h(
+        "label",
+        {
+          ...attrs,
+          "data-iris-input": "",
+          "data-iris-input-size": props.size,
+          "data-state": props.invalid ? "invalid" : focused.value ? "focused" : "idle",
+          style: {
+            ...wrapperStyle.value,
+            ...attrs.style ?? {}
+          }
+        },
+        [
+          prefix && h(
+            "span",
+            {
+              "data-iris-input-prefix": "",
+              style: { display: "inline-flex", alignItems: "center", color: "var(--iris-muted)" }
+            },
+            prefix
+          ),
+          h("input", {
+            id: props.id,
+            type: props.type,
+            value: props.modelValue,
+            placeholder: props.placeholder,
+            disabled: props.disabled || void 0,
+            readonly: props.readonly || void 0,
+            "aria-invalid": props.invalid ? "true" : void 0,
+            "aria-describedby": props.ariaDescribedby,
+            style: inputStyle,
+            onInput,
+            onFocus,
+            onBlur
+          }),
+          suffix && h(
+            "span",
+            {
+              "data-iris-input-suffix": "",
+              style: { display: "inline-flex", alignItems: "center", color: "var(--iris-muted)" }
+            },
+            suffix
+          )
+        ]
+      );
+    };
+  }
+});
+var IrisPasswordInput = defineComponent({
+  name: "IrisPasswordInput",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: String, default: "" },
+    size: { type: String, default: "md" },
+    placeholder: { type: String, default: "" },
+    disabled: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
+    invalid: { type: Boolean, default: false },
+    id: { type: String, default: void 0 },
+    /** Allow the user to toggle visibility. Default `true`. */
+    showToggle: { type: Boolean, default: true }
+  },
+  emits: {
+    "update:modelValue": (_value) => true,
+    focus: (_event) => true,
+    blur: (_event) => true
+  },
+  setup(props, { attrs, emit, slots }) {
+    const { t } = useI18n();
+    const visible = ref(false);
+    const onUpdate = (value) => emit("update:modelValue", value);
+    const onFocus = (e) => emit("focus", e);
+    const onBlur = (e) => emit("blur", e);
+    const toggle = () => {
+      if (props.disabled || props.readonly) return;
+      visible.value = !visible.value;
+    };
+    return () => h(
+      IrisInput,
+      {
+        ...attrs,
+        modelValue: props.modelValue,
+        type: visible.value ? "text" : "password",
+        size: props.size,
+        placeholder: props.placeholder,
+        disabled: props.disabled,
+        readonly: props.readonly,
+        invalid: props.invalid,
+        id: props.id,
+        "data-iris-password-input": "",
+        "onUpdate:modelValue": onUpdate,
+        onFocus,
+        onBlur
+      },
+      {
+        prefix: slots.prefix,
+        suffix: () => [
+          slots.suffix?.(),
+          props.showToggle ? h(
+            "button",
+            {
+              type: "button",
+              "data-iris-password-input-toggle": "",
+              "aria-label": visible.value ? t("passwordInput.hide") : t("passwordInput.show"),
+              "aria-pressed": visible.value ? "true" : "false",
+              onClick: toggle,
+              style: {
+                background: "transparent",
+                border: "none",
+                cursor: props.disabled ? "not-allowed" : "pointer",
+                color: "var(--iris-muted)",
+                padding: "0 2px",
+                fontSize: "13px",
+                lineHeight: "1"
+              }
+            },
+            visible.value ? "\u{1F648}" : "\u{1F441}"
+          ) : null
+        ]
+      }
+    );
+  }
+});
+var IrisCheckbox = defineComponent({
+  name: "IrisCheckbox",
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: [Boolean, String],
+      default: false
+    },
+    size: { type: String, default: "md" },
+    disabled: { type: Boolean, default: false },
+    id: { type: String, default: void 0 },
+    name: { type: String, default: void 0 },
+    value: { type: [String, Number], default: void 0 },
+    /** Forwarded as `aria-describedby` on the native checkbox input. Set by IrisFormField. */
+    ariaDescribedby: { type: String, default: void 0 },
+    /**
+     * Accessible name for the native checkbox input. Bound as `aria-label` on
+     * the `<input>` itself (the element with the checkbox role), NOT the label
+     * wrapper. Use when there is no visible label text.
+     */
+    ariaLabel: { type: String, default: void 0 },
+    /** Invalid state — sets aria-invalid. Set by IrisFormField. */
+    invalid: { type: Boolean, default: false }
+  },
+  emits: {
+    "update:modelValue": (_value) => true,
+    change: (_value) => true
+  },
+  setup(props, { slots, attrs, emit }) {
+    const state = computed(() => {
+      if (props.modelValue === "indeterminate") return "indeterminate";
+      return props.modelValue ? "checked" : "unchecked";
+    });
+    const dim = computed(() => {
+      const map = { sm: "14px", md: "18px", lg: "22px" };
+      return map[props.size];
+    });
+    const boxStyle = computed(() => ({
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: dim.value,
+      height: dim.value,
+      borderRadius: "var(--iris-radius-sm)",
+      border: "1px solid var(--iris-border)",
+      background: state.value === "unchecked" ? "var(--iris-background)" : "var(--iris-primary)",
+      borderColor: state.value === "unchecked" ? "var(--iris-border)" : "var(--iris-primary)",
+      color: "var(--iris-primary-foreground)",
+      cursor: props.disabled ? "not-allowed" : "pointer",
+      opacity: props.disabled ? "0.6" : "1",
+      transition: "background-color 120ms ease, border-color 120ms ease",
+      verticalAlign: "middle"
+    }));
+    const onChange = (event) => {
+      const next = event.target.checked;
+      emit("update:modelValue", next);
+      emit("change", next);
+    };
+    const renderIndicator = () => {
+      if (state.value === "unchecked") return null;
+      if (state.value === "indeterminate") {
+        return h("span", {
+          "aria-hidden": "true",
+          style: { width: "60%", height: "2px", background: "currentColor", borderRadius: "1px" }
+        });
+      }
+      return h(
+        "svg",
+        {
+          "aria-hidden": "true",
+          viewBox: "0 0 16 16",
+          width: "80%",
+          height: "80%",
+          fill: "none"
+        },
+        [
+          h("path", {
+            d: "M3 8.5 L6.5 12 L13 4.5",
+            stroke: "currentColor",
+            "stroke-width": "2.4",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
+          })
+        ]
+      );
+    };
+    return () => h(
+      "label",
+      {
+        ...attrs,
+        "data-iris-checkbox": "",
+        "data-iris-checkbox-size": props.size,
+        "data-state": state.value,
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "var(--iris-gap-sm)",
+          cursor: props.disabled ? "not-allowed" : "pointer",
+          userSelect: "none",
+          ...attrs.style ?? {}
+        }
+      },
+      [
+        h("input", {
+          type: "checkbox",
+          id: props.id,
+          name: props.name,
+          value: props.value,
+          checked: props.modelValue === true,
+          indeterminate: props.modelValue === "indeterminate",
+          disabled: props.disabled || void 0,
+          "aria-checked": state.value === "indeterminate" ? "mixed" : state.value === "checked" ? "true" : "false",
+          "aria-describedby": props.ariaDescribedby,
+          "aria-label": props.ariaLabel,
+          "aria-invalid": props.invalid ? "true" : void 0,
+          style: {
+            position: "absolute",
+            opacity: "0",
+            width: "0",
+            height: "0",
+            pointerEvents: "none"
+          },
+          onChange
+        }),
+        h("span", { "aria-hidden": "true", style: boxStyle.value }, [renderIndicator()]),
+        slots.default && h("span", null, slots.default())
+      ]
+    );
+  }
+});
+
+// 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;
+}
+
+// src/primitives/button/Button.ts
+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 renderSpinner() {
+  return h(
+    "svg",
+    {
+      class: "iris-button-spinner",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": "true"
+    },
+    [
+      h("circle", {
+        cx: "12",
+        cy: "12",
+        r: "10",
+        stroke: "currentColor",
+        "stroke-opacity": "0.25",
+        "stroke-width": "3"
+      }),
+      h("path", {
+        d: "M22 12a10 10 0 0 1-10 10",
+        stroke: "currentColor",
+        "stroke-width": "3",
+        "stroke-linecap": "round"
+      })
+    ]
+  );
+}
+var IrisButton = defineComponent({
+  name: "IrisButton",
+  props: {
+    variant: { type: String, default: "solid" },
+    size: { type: String, default: "md" },
+    disabled: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    type: { type: String, default: "button" },
+    asChild: { type: Boolean, default: false }
+  },
+  emits: {
+    click: (_event) => true
+  },
+  setup(props, { slots, emit }) {
+    installButtonStyles();
+    const isInteractive = computed(() => !props.disabled && !props.loading);
+    const inlineStyle = computed(() => buildInlineStyle(props.variant, props.size));
+    const onClick = (event) => {
+      if (!isInteractive.value) {
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+      emit("click", event);
+    };
+    return () => {
+      const baseProps = {
+        class: "iris-button",
+        "data-iris-button-variant": props.variant,
+        "data-iris-button-size": props.size,
+        "aria-disabled": props.disabled ? "true" : void 0,
+        "aria-busy": props.loading ? "true" : void 0,
+        style: inlineStyle.value,
+        onClick
+      };
+      if (props.asChild) {
+        const root = findFirstElement(slots.default?.());
+        if (!root) {
+          if (typeof process === "undefined" || process.env?.NODE_ENV !== "production") {
+            console.warn("[iris-ui] IrisButton: as-child requires a single child element");
+          }
+          return null;
+        }
+        const parentProps = {
+          ...baseProps,
+          disabled: isInteractive.value ? void 0 : true
+        };
+        const merged = mergeSlotProps(parentProps, root.props ?? {});
+        return h(root.type, merged, root.children);
+      }
+      const leadingContent = props.loading ? renderSpinner() : slots.leading?.();
+      const children = [];
+      if (leadingContent) {
+        children.push(h("span", { class: "iris-button-leading" }, leadingContent));
+      }
+      const defaultSlot = slots.default?.();
+      if (defaultSlot) children.push(defaultSlot);
+      return h(
+        "button",
+        {
+          ...baseProps,
+          type: props.type,
+          disabled: isInteractive.value ? void 0 : true
+        },
+        children
+      );
+    };
+  }
+});
+var IrisFormField = defineComponent({
+  name: "IrisFormField",
+  inheritAttrs: false,
+  props: {
+    label: { type: String, default: "" },
+    hint: { type: String, default: "" },
+    error: { type: String, default: "" },
+    required: { type: Boolean, default: false },
+    /** Override the auto-generated control id. */
+    labelFor: { type: String, default: "" },
+    /** Visual size of the label. */
+    size: { type: String, default: "md" }
+  },
+  setup(props, { slots, attrs }) {
+    const baseId = useId();
+    const controlId = computed(() => props.labelFor || `${baseId}-control`);
+    const hintId = `${baseId}-hint`;
+    const errorId = `${baseId}-error`;
+    const describedBy = computed(() => {
+      const ids = [];
+      if (props.hint) ids.push(hintId);
+      if (props.error) ids.push(errorId);
+      return ids.length > 0 ? ids.join(" ") : void 0;
+    });
+    const labelStyle = computed(() => ({
+      fontSize: props.size === "sm" ? "12px" : "14px",
+      fontWeight: "500",
+      color: props.error ? "var(--iris-danger)" : "var(--iris-foreground)",
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "4px"
+    }));
+    return () => {
+      const children = slots.default?.() ?? [];
+      let injected = null;
+      const restChildren = [];
+      let foundFirst = false;
+      children.forEach((child) => {
+        if (!foundFirst && typeof child.type !== "symbol" && typeof child.type !== "string") {
+          injected = cloneVNode(child, {
+            id: controlId.value,
+            invalid: props.error ? true : void 0,
+            ariaDescribedby: describedBy.value
+          });
+          foundFirst = true;
+        } else {
+          restChildren.push(child);
+        }
+      });
+      return h(
+        "div",
+        {
+          ...attrs,
+          "data-iris-form-field": "",
+          "data-iris-form-field-state": props.error ? "invalid" : "valid",
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "4px",
+            ...attrs.style ?? {}
+          }
+        },
+        [
+          props.label ? h(
+            "label",
+            {
+              for: controlId.value,
+              "data-iris-form-field-label": "",
+              style: labelStyle.value
+            },
+            [
+              props.label,
+              props.required ? h(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  "data-iris-form-field-required": "",
+                  style: { color: "var(--iris-danger)" }
+                },
+                "*"
+              ) : null
+            ]
+          ) : null,
+          // The wrapped control + any trailing siblings.
+          h(Fragment, null, [injected, ...restChildren]),
+          props.hint && !props.error ? h(
+            "div",
+            {
+              id: hintId,
+              "data-iris-form-field-hint": "",
+              style: { fontSize: "12px", color: "var(--iris-muted)" }
+            },
+            props.hint
+          ) : null,
+          props.error ? h(
+            "div",
+            {
+              id: errorId,
+              "data-iris-form-field-error": "",
+              role: "alert",
+              style: { fontSize: "12px", color: "var(--iris-danger)" }
+            },
+            props.error
+          ) : null
+        ]
+      );
+    };
+  }
+});
+var TONE_TO_VAR = {
+  info: "--iris-primary",
+  success: "--iris-success",
+  warning: "--iris-warning",
+  danger: "--iris-danger"
+};
+var IrisAlert = defineComponent({
+  name: "IrisAlert",
+  inheritAttrs: false,
+  props: {
+    tone: { type: String, default: "info" },
+    title: { type: String, default: "" },
+    /** When true, a close button is rendered. */
+    closable: { type: Boolean, default: false },
+    /** Controlled visibility. Omit for uncontrolled (defaults to visible). */
+    open: { type: Boolean, default: void 0 }
+  },
+  emits: {
+    "update:open": (_value) => true,
+    close: () => true
+  },
+  setup(props, { slots, attrs, emit }) {
+    const { t } = useI18n();
+    const internalOpen = ref(true);
+    watch(
+      () => props.open,
+      (value) => {
+        if (value !== void 0) internalOpen.value = value;
+      }
+    );
+    const isOpen = computed(() => props.open !== void 0 ? props.open : internalOpen.value);
+    const onClose = () => {
+      if (props.open === void 0) internalOpen.value = false;
+      emit("update:open", false);
+      emit("close");
+    };
+    const tonalVar = computed(() => `var(${TONE_TO_VAR[props.tone]})`);
+    const containerStyle = computed(() => ({
+      display: "flex",
+      gap: "var(--iris-gap-md, 12px)",
+      padding: "var(--iris-padding-md, 12px)",
+      borderRadius: "var(--iris-radius-md, 6px)",
+      border: `1px solid ${tonalVar.value}`,
+      // `backgroundColor` is the precomputed fallback under color-mix (engines
+      // without it); the `background` shorthand overrides with the exact mix.
+      backgroundColor: `var(${TONE_TO_VAR[props.tone]}-subtle)`,
+      background: `color-mix(in srgb, ${tonalVar.value} 10%, var(--iris-background))`,
+      color: "var(--iris-foreground)",
+      alignItems: "flex-start"
+    }));
+    return () => {
+      if (!isOpen.value) return null;
+      return h(
+        "div",
+        {
+          ...attrs,
+          role: props.tone === "danger" || props.tone === "warning" ? "alert" : "status",
+          "data-iris-alert": "",
+          "data-iris-alert-tone": props.tone,
+          style: { ...containerStyle.value, ...attrs.style ?? {} }
+        },
+        [
+          slots.icon ? h(
+            "span",
+            {
+              "data-iris-alert-icon": "",
+              style: { color: tonalVar.value, flexShrink: "0", display: "inline-flex" }
+            },
+            slots.icon()
+          ) : null,
+          h("div", { "data-iris-alert-body": "", style: { flex: "1", minWidth: "0" } }, [
+            props.title || slots.title ? h(
+              "div",
+              {
+                "data-iris-alert-title": "",
+                style: { fontWeight: "600", marginBottom: "4px", color: tonalVar.value }
+              },
+              slots.title?.() ?? props.title
+            ) : null,
+            h("div", { "data-iris-alert-content": "" }, slots.default?.())
+          ]),
+          props.closable ? h(
+            "button",
+            {
+              type: "button",
+              "data-iris-alert-close": "",
+              "aria-label": t("alert.close"),
+              onClick: onClose,
+              style: {
+                background: "transparent",
+                border: "none",
+                cursor: "pointer",
+                color: "var(--iris-muted)",
+                fontSize: "16px",
+                padding: "0",
+                lineHeight: "1",
+                flexShrink: "0"
+              }
+            },
+            "\u2715"
+          ) : null
+        ]
+      );
+    };
+  }
+});
+var SPACING_MAP = {
+  sm: "8px",
+  md: "16px",
+  lg: "24px"
+};
+var IrisDivider = defineComponent({
+  name: "IrisDivider",
+  inheritAttrs: false,
+  props: {
+    orientation: { type: String, default: "horizontal" },
+    label: { type: String, default: "" },
+    spacing: { type: String, default: "md" }
+  },
+  setup(props, { slots, attrs }) {
+    const isHorizontal = computed(() => props.orientation === "horizontal");
+    const hasLabel = computed(() => Boolean(props.label || slots.default));
+    return () => {
+      if (isHorizontal.value && !hasLabel.value) {
+        return h("hr", {
+          ...attrs,
+          "data-iris-divider": "",
+          "data-iris-divider-orientation": "horizontal",
+          style: {
+            border: "none",
+            borderTop: "1px solid var(--iris-border)",
+            margin: `${SPACING_MAP[props.spacing]} 0`,
+            width: "100%",
+            ...attrs.style ?? {}
+          }
+        });
+      }
+      if (!isHorizontal.value) {
+        return h("div", {
+          ...attrs,
+          role: "separator",
+          "aria-orientation": "vertical",
+          "data-iris-divider": "",
+          "data-iris-divider-orientation": "vertical",
+          style: {
+            display: "inline-block",
+            width: "1px",
+            alignSelf: "stretch",
+            background: "var(--iris-border)",
+            margin: `0 ${SPACING_MAP[props.spacing]}`,
+            ...attrs.style ?? {}
+          }
+        });
+      }
+      return h(
+        "div",
+        {
+          ...attrs,
+          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: "8px",
+            margin: `${SPACING_MAP[props.spacing]} 0`,
+            color: "var(--iris-muted)",
+            fontSize: "12px",
+            textTransform: "uppercase",
+            letterSpacing: "0.04em",
+            ...attrs.style ?? {}
+          }
+        },
+        [
+          h("span", { "data-iris-divider-line": "before", style: lineStyle() }),
+          h("span", { "data-iris-divider-label": "" }, slots.default?.() ?? props.label),
+          h("span", { "data-iris-divider-line": "after", style: lineStyle() })
+        ]
+      );
+    };
+  }
+});
+function lineStyle() {
+  return {
+    flex: "1",
+    height: "1px",
+    background: "var(--iris-border)"
+  };
+}
+
+// src/skeletons/LoginTemplate.ts
+var IrisLoginTemplate = defineComponent({
+  name: "IrisLoginTemplate",
+  inheritAttrs: false,
+  props: {
+    title: { type: String, default: "Sign in" },
+    description: { type: String, default: "" },
+    /** Show "Remember me" checkbox. */
+    showRemember: { type: Boolean, default: true },
+    /** Error message shown above the form. */
+    error: { type: String, default: "" },
+    submitLabel: { type: String, default: "Sign in" },
+    /** Disable the entire form (e.g. while a request is pending). */
+    loading: { type: Boolean, default: false }
+  },
+  emits: {
+    submit: (_payload) => true
+  },
+  setup(props, { attrs, slots, emit }) {
+    const email = ref("");
+    const password = ref("");
+    const remember = ref(false);
+    const onSubmit = (event) => {
+      event.preventDefault();
+      emit("submit", {
+        email: email.value,
+        password: password.value,
+        remember: remember.value
+      });
+    };
+    return () => h(
+      "div",
+      {
+        ...attrs,
+        "data-iris-login-template": "",
+        style: {
+          minHeight: "100vh",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "var(--iris-background)",
+          color: "var(--iris-foreground)",
+          padding: "24px",
+          ...attrs.style ?? {}
+        }
+      },
+      h(IrisContainer, { maxWidth: "420px", padding: 0 }, () => [
+        h(
+          "form",
+          {
+            onSubmit,
+            "data-iris-login-form": "",
+            style: {
+              background: "var(--iris-surface)",
+              border: "1px solid var(--iris-border)",
+              borderRadius: "var(--iris-radius-lg, 8px)",
+              padding: "32px",
+              boxShadow: "0 6px 20px -8px rgba(0, 0, 0, 0.16)"
+            }
+          },
+          [
+            h(IrisStack, { spacing: "lg" }, () => [
+              slots.header ? slots.header() : h("div", { style: { textAlign: "center" } }, [
+                h(
+                  "h1",
+                  {
+                    style: {
+                      margin: "0 0 4px 0",
+                      fontSize: "22px",
+                      fontWeight: "700"
+                    }
+                  },
+                  props.title
+                ),
+                props.description ? h(
+                  "p",
+                  {
+                    style: {
+                      margin: "0",
+                      color: "var(--iris-muted)",
+                      fontSize: "14px"
+                    }
+                  },
+                  props.description
+                ) : null
+              ]),
+              props.error ? h(IrisAlert, { tone: "danger", title: props.error }) : null,
+              h(
+                IrisFormField,
+                { label: "Email", required: true },
+                () => h(IrisInput, {
+                  type: "email",
+                  modelValue: email.value,
+                  "onUpdate:modelValue": (v) => email.value = v,
+                  placeholder: "you@example.com",
+                  disabled: props.loading,
+                  autocomplete: "email"
+                })
+              ),
+              h(
+                IrisFormField,
+                { label: "Password", required: true },
+                () => h(IrisPasswordInput, {
+                  modelValue: password.value,
+                  "onUpdate:modelValue": (v) => password.value = v,
+                  placeholder: "Enter your password",
+                  disabled: props.loading,
+                  autocomplete: "current-password"
+                })
+              ),
+              props.showRemember ? h(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between"
+                  }
+                },
+                [
+                  h(
+                    IrisCheckbox,
+                    {
+                      modelValue: remember.value,
+                      "onUpdate:modelValue": (v) => {
+                        remember.value = v === true;
+                      },
+                      disabled: props.loading
+                    },
+                    () => "Remember me"
+                  ),
+                  slots.forgot ? slots.forgot() : null
+                ]
+              ) : null,
+              h(
+                IrisButton,
+                {
+                  type: "submit",
+                  variant: "solid",
+                  loading: props.loading,
+                  style: { width: "100%" }
+                },
+                () => props.submitLabel
+              ),
+              slots.footer ? h("div", null, [h(IrisDivider, { spacing: "md", label: "or" }), slots.footer()]) : null
+            ])
+          ]
+        )
+      ])
+    );
+  }
+});
+var IrisDashboardTemplate = defineComponent({
+  name: "IrisDashboardTemplate",
+  inheritAttrs: false,
+  props: {
+    title: { type: String, default: "Dashboard" },
+    sidebarTitle: { type: String, default: "" },
+    nav: { type: Array, default: () => [] },
+    /** Currently active nav item id. */
+    activeId: { type: String, default: "" },
+    /** Cards to render in the main grid. Skip to use the `default` slot only. */
+    cards: { type: Array, default: () => [] },
+    defaultCollapsed: { type: Boolean, default: false }
+  },
+  emits: {
+    "update:activeId": (_id) => true,
+    "update:collapsed": (_value) => true
+  },
+  setup(props, { attrs, slots, emit }) {
+    const collapsed = ref(props.defaultCollapsed);
+    const onSelectNav = (id) => {
+      emit("update:activeId", id);
+    };
+    return () => h(
+      "div",
+      {
+        ...attrs,
+        "data-iris-dashboard-template": "",
+        style: {
+          width: "100%",
+          height: "100vh",
+          background: "var(--iris-background)",
+          color: "var(--iris-foreground)",
+          ...attrs.style ?? {}
+        }
+      },
+      h(
+        IrisSidebarLayout,
+        {
+          collapsed: collapsed.value,
+          "onUpdate:collapsed": (v) => {
+            collapsed.value = v;
+            emit("update:collapsed", v);
+          },
+          width: 240,
+          collapsedWidth: 64
+        },
+        {
+          sidebar: (state) => h(IrisStack, { spacing: "sm", style: { padding: "12px" } }, () => [
+            slots["sidebar-header"] ? slots["sidebar-header"](state) : props.sidebarTitle ? h(
+              "div",
+              {
+                style: {
+                  padding: "8px 12px",
+                  fontSize: "14px",
+                  fontWeight: "600",
+                  color: "var(--iris-foreground)",
+                  opacity: state.collapsed ? 0 : 1,
+                  transition: "opacity 120ms ease",
+                  whiteSpace: "nowrap",
+                  overflow: "hidden"
+                }
+              },
+              props.sidebarTitle
+            ) : null,
+            h(
+              "nav",
+              {
+                "aria-label": "Primary",
+                style: { display: "flex", flexDirection: "column", gap: "2px" }
+              },
+              props.nav.map((item) => {
+                const isActive = item.id === props.activeId;
+                return h(
+                  "button",
+                  {
+                    key: item.id,
+                    type: "button",
+                    "data-iris-dashboard-nav-item": item.id,
+                    "data-iris-dashboard-nav-active": isActive ? "true" : void 0,
+                    onClick: () => onSelectNav(item.id),
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "10px",
+                      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: "14px",
+                      fontFamily: "inherit",
+                      textAlign: "start",
+                      outline: "none"
+                    }
+                  },
+                  [
+                    item.icon ? h(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        style: {
+                          width: "16px",
+                          display: "inline-flex",
+                          justifyContent: "center"
+                        }
+                      },
+                      item.icon
+                    ) : null,
+                    h(
+                      "span",
+                      {
+                        style: {
+                          opacity: state.collapsed ? 0 : 1,
+                          transition: "opacity 120ms ease",
+                          whiteSpace: "nowrap"
+                        }
+                      },
+                      item.label
+                    )
+                  ]
+                );
+              })
+            )
+          ]),
+          default: () => h(IrisHeaderLayout, {}, {
+            header: () => slots.header ? slots.header() : h(
+              "div",
+              {
+                style: {
+                  padding: "12px 20px",
+                  fontSize: "16px",
+                  fontWeight: "600"
+                }
+              },
+              props.title
+            ),
+            default: () => slots.default ? slots.default() : h(
+              "div",
+              { style: { padding: "20px" } },
+              h(
+                IrisDashboardGrid,
+                { columns: 12, gap: 16 },
+                () => props.cards.map(
+                  (card) => h(
+                    IrisDashboardCard,
+                    {
+                      key: card.id,
+                      colSpan: card.colSpan ?? 4,
+                      rowSpan: card.rowSpan ?? 1,
+                      "data-iris-dashboard-card-id": card.id
+                    },
+                    () => [
+                      h(
+                        "h3",
+                        {
+                          style: {
+                            margin: "0 0 8px 0",
+                            fontSize: "14px",
+                            fontWeight: "600",
+                            color: "var(--iris-foreground)"
+                          }
+                        },
+                        card.title
+                      ),
+                      slots[`card.${card.id}`] ? slots[`card.${card.id}`]() : card.body ? h(
+                        "div",
+                        { style: { fontSize: "13px", color: "var(--iris-muted)" } },
+                        card.body
+                      ) : null
+                    ]
+                  )
+                )
+              )
+            )
+          })
+        }
+      )
+    );
+  }
+});
+
+export { IrisAlert, IrisButton, IrisCheckbox, IrisDashboardTemplate, IrisDivider, IrisFormField, IrisInput, IrisLoginTemplate, IrisPasswordInput };
+//# sourceMappingURL=chunk-QLUIKEMJ.js.map
+//# sourceMappingURL=chunk-QLUIKEMJ.js.map