@tonyarbor/components 0.6.0 → 0.7.1

package/dist/Modal.d.mts

@@ -0,0 +1,73 @@
+import * as React from 'react';
+
+interface ModalProps {
+    /**
+     * The content of the modal (typically ModalHeader, content, and ModalFooter)
+     */
+    children: React.ReactNode;
+    /**
+     * Width of the modal
+     * @default 584
+     */
+    width?: number | string;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Additional inline styles
+     */
+    style?: React.CSSProperties;
+}
+interface ModalContentProps {
+    /**
+     * The content to display in the modal body
+     */
+    children: React.ReactNode;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Additional inline styles
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * Modal component - Arbor Design System
+ *
+ * A modal dialog container that wraps ModalHeader, content, and ModalFooter.
+ *
+ * @example
+ * ```tsx
+ * <Modal width={584}>
+ *   <ModalHeader
+ *     title="Delete postal address?"
+ *     onClose={() => setIsOpen(false)}
+ *   />
+ *   <ModalContent>
+ *     <p>This will delete the postal address. Are you sure?</p>
+ *   </ModalContent>
+ *   <ModalFooter>
+ *     <Button variant="tertiary">Cancel</Button>
+ *     <Button variant="destructive-secondary">Confirm</Button>
+ *   </ModalFooter>
+ * </Modal>
+ * ```
+ */
+declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ModalContent component - Arbor Design System
+ *
+ * The content/body area of a modal dialog.
+ *
+ * @example
+ * ```tsx
+ * <ModalContent>
+ *   <p>Your content here</p>
+ * </ModalContent>
+ * ```
+ */
+declare const ModalContent: React.ForwardRefExoticComponent<ModalContentProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Modal, ModalContent, type ModalContentProps, type ModalProps };

package/dist/Modal.d.ts

@@ -0,0 +1,73 @@
+import * as React from 'react';
+
+interface ModalProps {
+    /**
+     * The content of the modal (typically ModalHeader, content, and ModalFooter)
+     */
+    children: React.ReactNode;
+    /**
+     * Width of the modal
+     * @default 584
+     */
+    width?: number | string;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Additional inline styles
+     */
+    style?: React.CSSProperties;
+}
+interface ModalContentProps {
+    /**
+     * The content to display in the modal body
+     */
+    children: React.ReactNode;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Additional inline styles
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * Modal component - Arbor Design System
+ *
+ * A modal dialog container that wraps ModalHeader, content, and ModalFooter.
+ *
+ * @example
+ * ```tsx
+ * <Modal width={584}>
+ *   <ModalHeader
+ *     title="Delete postal address?"
+ *     onClose={() => setIsOpen(false)}
+ *   />
+ *   <ModalContent>
+ *     <p>This will delete the postal address. Are you sure?</p>
+ *   </ModalContent>
+ *   <ModalFooter>
+ *     <Button variant="tertiary">Cancel</Button>
+ *     <Button variant="destructive-secondary">Confirm</Button>
+ *   </ModalFooter>
+ * </Modal>
+ * ```
+ */
+declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ModalContent component - Arbor Design System
+ *
+ * The content/body area of a modal dialog.
+ *
+ * @example
+ * ```tsx
+ * <ModalContent>
+ *   <p>Your content here</p>
+ * </ModalContent>
+ * ```
+ */
+declare const ModalContent: React.ForwardRefExoticComponent<ModalContentProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Modal, ModalContent, type ModalContentProps, type ModalProps };

package/dist/Modal.js

@@ -0,0 +1,114 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Modal/index.ts
+var Modal_exports = {};
+__export(Modal_exports, {
+  Modal: () => Modal,
+  ModalContent: () => ModalContent
+});
+module.exports = __toCommonJS(Modal_exports);
+
+// src/Modal/Modal.tsx
+var React = __toESM(require("react"));
+var import_clsx = require("clsx");
+var import_jsx_runtime = require("react/jsx-runtime");
+var modalStyles = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    backgroundColor: "#f8f8f8",
+    // grey-050
+    borderRadius: "8px",
+    boxShadow: "0px 8px 24px 0px rgba(32, 32, 32, 0.12)",
+    overflow: "hidden",
+    boxSizing: "border-box",
+    fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+  },
+  content: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    padding: "32px 16px",
+    backgroundColor: "#f8f8f8",
+    // grey-050
+    boxSizing: "border-box"
+  },
+  contentText: {
+    flex: 1,
+    fontSize: "13px",
+    fontWeight: "400",
+    color: "#2f2f2f",
+    lineHeight: "1.5"
+  }
+};
+var Modal = React.forwardRef(
+  ({ children, width = 584, className, style, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx.clsx)("arbor-modal", className),
+        style: {
+          ...modalStyles.container,
+          width: typeof width === "number" ? `${width}px` : width,
+          ...style
+        },
+        role: "dialog",
+        "aria-modal": "true",
+        ...props,
+        children
+      }
+    );
+  }
+);
+Modal.displayName = "Modal";
+var ModalContent = React.forwardRef(
+  ({ children, className, style, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx.clsx)("arbor-modal-content", className),
+        style: { ...modalStyles.content, ...style },
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: modalStyles.contentText, children })
+      }
+    );
+  }
+);
+ModalContent.displayName = "ModalContent";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Modal,
+  ModalContent
+});
+//# sourceMappingURL=Modal.js.map

package/dist/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Modal/index.ts","../src/Modal/Modal.tsx"],"sourcesContent":["export { Modal, ModalContent } from './Modal';\nexport type { ModalProps, ModalContentProps } from './Modal';\n","import * as React from 'react';\nimport { clsx } from 'clsx';\n\nexport interface ModalProps {\n  /**\n   * The content of the modal (typically ModalHeader, content, and ModalFooter)\n   */\n  children: React.ReactNode;\n  /**\n   * Width of the modal\n   * @default 584\n   */\n  width?: number | string;\n  /**\n   * Additional CSS class name\n   */\n  className?: string;\n  /**\n   * Additional inline styles\n   */\n  style?: React.CSSProperties;\n}\n\nexport interface ModalContentProps {\n  /**\n   * The content to display in the modal body\n   */\n  children: React.ReactNode;\n  /**\n   * Additional CSS class name\n   */\n  className?: string;\n  /**\n   * Additional inline styles\n   */\n  style?: React.CSSProperties;\n}\n\n// Arbor Design System modal styles\nconst modalStyles = {\n  container: {\n    display: 'flex',\n    flexDirection: 'column' as const,\n    alignItems: 'flex-start',\n    backgroundColor: '#f8f8f8', // grey-050\n    borderRadius: '8px',\n    boxShadow: '0px 8px 24px 0px rgba(32, 32, 32, 0.12)',\n    overflow: 'hidden',\n    boxSizing: 'border-box' as const,\n    fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n  },\n  content: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '100%',\n    padding: '32px 16px',\n    backgroundColor: '#f8f8f8', // grey-050\n    boxSizing: 'border-box' as const,\n  },\n  contentText: {\n    flex: 1,\n    fontSize: '13px',\n    fontWeight: '400',\n    color: '#2f2f2f',\n    lineHeight: '1.5',\n  },\n};\n\n/**\n * Modal component - Arbor Design System\n *\n * A modal dialog container that wraps ModalHeader, content, and ModalFooter.\n *\n * @example\n * ```tsx\n * <Modal width={584}>\n *   <ModalHeader\n *     title=\"Delete postal address?\"\n *     onClose={() => setIsOpen(false)}\n *   />\n *   <ModalContent>\n *     <p>This will delete the postal address. Are you sure?</p>\n *   </ModalContent>\n *   <ModalFooter>\n *     <Button variant=\"tertiary\">Cancel</Button>\n *     <Button variant=\"destructive-secondary\">Confirm</Button>\n *   </ModalFooter>\n * </Modal>\n * ```\n */\nexport const Modal = React.forwardRef<HTMLDivElement, ModalProps>(\n  ({ children, width = 584, className, style, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={clsx('arbor-modal', className)}\n        style={{\n          ...modalStyles.container,\n          width: typeof width === 'number' ? `${width}px` : width,\n          ...style,\n        }}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nModal.displayName = 'Modal';\n\n/**\n * ModalContent component - Arbor Design System\n *\n * The content/body area of a modal dialog.\n *\n * @example\n * ```tsx\n * <ModalContent>\n *   <p>Your content here</p>\n * </ModalContent>\n * ```\n */\nexport const ModalContent = React.forwardRef<HTMLDivElement, ModalContentProps>(\n  ({ children, className, style, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={clsx('arbor-modal-content', className)}\n        style={{ ...modalStyles.content, ...style }}\n        {...props}\n      >\n        <div style={modalStyles.contentText}>{children}</div>\n      </div>\n    );\n  }\n);\n\nModalContent.displayName = 'ModalContent';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,kBAAqB;AA6Ff;AAvDN,IAAM,cAAc;AAAA,EAClB,WAAW;AAAA,IACT,SAAS;AAAA,IACT,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,iBAAiB;AAAA;AAAA,IACjB,cAAc;AAAA,IACd,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,IACX,YAAY;AAAA,EACd;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,iBAAiB;AAAA;AAAA,IACjB,WAAW;AAAA,EACb;AAAA,EACA,aAAa;AAAA,IACX,MAAM;AAAA,IACN,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,YAAY;AAAA,EACd;AACF;AAwBO,IAAM,QAAc;AAAA,EACzB,CAAC,EAAE,UAAU,QAAQ,KAAK,WAAW,OAAO,GAAG,MAAM,GAAG,QAAQ;AAC9D,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,kBAAK,eAAe,SAAS;AAAA,QACxC,OAAO;AAAA,UACL,GAAG,YAAY;AAAA,UACf,OAAO,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO;AAAA,UAClD,GAAG;AAAA,QACL;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACV,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc;AAcb,IAAM,eAAqB;AAAA,EAChC,CAAC,EAAE,UAAU,WAAW,OAAO,GAAG,MAAM,GAAG,QAAQ;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,kBAAK,uBAAuB,SAAS;AAAA,QAChD,OAAO,EAAE,GAAG,YAAY,SAAS,GAAG,MAAM;AAAA,QACzC,GAAG;AAAA,QAEJ,sDAAC,SAAI,OAAO,YAAY,aAAc,UAAS;AAAA;AAAA,IACjD;AAAA,EAEJ;AACF;AAEA,aAAa,cAAc;","names":[]}

package/dist/Modal.mjs

@@ -0,0 +1,9 @@
+import {
+  Modal,
+  ModalContent
+} from "./chunk-7JWINM2N.mjs";
+export {
+  Modal,
+  ModalContent
+};
+//# sourceMappingURL=Modal.mjs.map

package/dist/Modal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/ModalFooter.d.mts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+interface ModalFooterProps {
+    /**
+     * The content of the footer, typically buttons
+     */
+    children: React.ReactNode;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Additional inline styles
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * ModalFooter component - Arbor Design System
+ *
+ * The footer part of a modal dialog, typically containing action buttons.
+ * Buttons are right-aligned by default.
+ *
+ * @example
+ * ```tsx
+ * // Footer with two buttons
+ * <ModalFooter>
+ *   <Button variant="tertiary">Cancel</Button>
+ *   <Button variant="primary">Save</Button>
+ * </ModalFooter>
+ *
+ * // Footer with destructive action
+ * <ModalFooter>
+ *   <Button variant="tertiary">Cancel</Button>
+ *   <Button variant="destructive-secondary">Delete</Button>
+ * </ModalFooter>
+ * ```
+ */
+declare const ModalFooter: React.ForwardRefExoticComponent<ModalFooterProps & React.RefAttributes<HTMLDivElement>>;
+
+export { ModalFooter, type ModalFooterProps };

package/dist/ModalFooter.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+interface ModalFooterProps {
+    /**
+     * The content of the footer, typically buttons
+     */
+    children: React.ReactNode;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Additional inline styles
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * ModalFooter component - Arbor Design System
+ *
+ * The footer part of a modal dialog, typically containing action buttons.
+ * Buttons are right-aligned by default.
+ *
+ * @example
+ * ```tsx
+ * // Footer with two buttons
+ * <ModalFooter>
+ *   <Button variant="tertiary">Cancel</Button>
+ *   <Button variant="primary">Save</Button>
+ * </ModalFooter>
+ *
+ * // Footer with destructive action
+ * <ModalFooter>
+ *   <Button variant="tertiary">Cancel</Button>
+ *   <Button variant="destructive-secondary">Delete</Button>
+ * </ModalFooter>
+ * ```
+ */
+declare const ModalFooter: React.ForwardRefExoticComponent<ModalFooterProps & React.RefAttributes<HTMLDivElement>>;
+
+export { ModalFooter, type ModalFooterProps };

package/dist/ModalFooter.js

@@ -0,0 +1,73 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ModalFooter/index.ts
+var ModalFooter_exports = {};
+__export(ModalFooter_exports, {
+  ModalFooter: () => ModalFooter
+});
+module.exports = __toCommonJS(ModalFooter_exports);
+
+// src/ModalFooter/ModalFooter.tsx
+var React = __toESM(require("react"));
+var import_clsx = require("clsx");
+var import_jsx_runtime = require("react/jsx-runtime");
+var modalFooterStyles = {
+  container: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: "16px",
+    width: "100%",
+    padding: "16px",
+    backgroundColor: "#ffffff",
+    boxSizing: "border-box",
+    maxHeight: "56px"
+  }
+};
+var ModalFooter = React.forwardRef(
+  ({ children, className, style, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx.clsx)("arbor-modal-footer", className),
+        style: { ...modalFooterStyles.container, ...style },
+        ...props,
+        children
+      }
+    );
+  }
+);
+ModalFooter.displayName = "ModalFooter";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ModalFooter
+});
+//# sourceMappingURL=ModalFooter.js.map

package/dist/ModalFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ModalFooter/index.ts","../src/ModalFooter/ModalFooter.tsx"],"sourcesContent":["export { ModalFooter } from './ModalFooter';\nexport type { ModalFooterProps } from './ModalFooter';\n","import * as React from 'react';\nimport { clsx } from 'clsx';\n\nexport interface ModalFooterProps {\n  /**\n   * The content of the footer, typically buttons\n   */\n  children: React.ReactNode;\n  /**\n   * Additional CSS class name\n   */\n  className?: string;\n  /**\n   * Additional inline styles\n   */\n  style?: React.CSSProperties;\n}\n\n// Arbor Design System modal footer styles\nconst modalFooterStyles = {\n  container: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-end',\n    gap: '16px',\n    width: '100%',\n    padding: '16px',\n    backgroundColor: '#ffffff',\n    boxSizing: 'border-box' as const,\n    maxHeight: '56px',\n  },\n};\n\n/**\n * ModalFooter component - Arbor Design System\n *\n * The footer part of a modal dialog, typically containing action buttons.\n * Buttons are right-aligned by default.\n *\n * @example\n * ```tsx\n * // Footer with two buttons\n * <ModalFooter>\n *   <Button variant=\"tertiary\">Cancel</Button>\n *   <Button variant=\"primary\">Save</Button>\n * </ModalFooter>\n *\n * // Footer with destructive action\n * <ModalFooter>\n *   <Button variant=\"tertiary\">Cancel</Button>\n *   <Button variant=\"destructive-secondary\">Delete</Button>\n * </ModalFooter>\n * ```\n */\nexport const ModalFooter = React.forwardRef<HTMLDivElement, ModalFooterProps>(\n  ({ children, className, style, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={clsx('arbor-modal-footer', className)}\n        style={{ ...modalFooterStyles.container, ...style }}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nModalFooter.displayName = 'ModalFooter';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,kBAAqB;AAwDf;AAtCN,IAAM,oBAAoB;AAAA,EACxB,WAAW;AAAA,IACT,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,KAAK;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,WAAW;AAAA,EACb;AACF;AAuBO,IAAM,cAAoB;AAAA,EAC/B,CAAC,EAAE,UAAU,WAAW,OAAO,GAAG,MAAM,GAAG,QAAQ;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,kBAAK,sBAAsB,SAAS;AAAA,QAC/C,OAAO,EAAE,GAAG,kBAAkB,WAAW,GAAG,MAAM;AAAA,QACjD,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,YAAY,cAAc;","names":[]}

package/dist/ModalFooter.mjs

@@ -0,0 +1,7 @@
+import {
+  ModalFooter
+} from "./chunk-P7RKUESQ.mjs";
+export {
+  ModalFooter
+};
+//# sourceMappingURL=ModalFooter.mjs.map

package/dist/ModalFooter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/ModalHeader.d.mts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { SectionIconVariant } from './SectionIcon.mjs';
+
+interface ModalHeaderProps {
+    /**
+     * The title text for the modal header
+     */
+    title: string;
+    /**
+     * Optional icon variant to display before the title
+     * Uses the SectionIcon component variants: 'warning', 'danger', 'info', 'success'
+     */
+    icon?: SectionIconVariant;
+    /**
+     * Callback when close button is clicked
+     * If not provided, close button will not be shown
+     */
+    onClose?: () => void;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Additional inline styles
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * ModalHeader component - Arbor Design System
+ *
+ * The header part of a modal dialog with title, optional icon, and close button.
+ * The icon uses SectionIcon variants (warning, danger, info, success).
+ *
+ * @example
+ * ```tsx
+ * // Basic modal header with close button
+ * <ModalHeader
+ *   title="What would you like to do?"
+ *   onClose={() => setIsOpen(false)}
+ * />
+ *
+ * // Modal header with warning icon
+ * <ModalHeader
+ *   title="Are you sure?"
+ *   icon="warning"
+ *   onClose={() => setIsOpen(false)}
+ * />
+ *
+ * // Modal header with danger icon (error state)
+ * <ModalHeader
+ *   title="Sorry, we can't find this page"
+ *   icon="danger"
+ *   onClose={() => setIsOpen(false)}
+ * />
+ *
+ * // Modal header without close button
+ * <ModalHeader
+ *   title="Processing..."
+ *   icon="info"
+ * />
+ * ```
+ */
+declare const ModalHeader: React.ForwardRefExoticComponent<ModalHeaderProps & React.RefAttributes<HTMLDivElement>>;
+
+export { ModalHeader, type ModalHeaderProps };

package/dist/ModalHeader.d.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { SectionIconVariant } from './SectionIcon.js';
+
+interface ModalHeaderProps {
+    /**
+     * The title text for the modal header
+     */
+    title: string;
+    /**
+     * Optional icon variant to display before the title
+     * Uses the SectionIcon component variants: 'warning', 'danger', 'info', 'success'
+     */
+    icon?: SectionIconVariant;
+    /**
+     * Callback when close button is clicked
+     * If not provided, close button will not be shown
+     */
+    onClose?: () => void;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+    /**
+     * Additional inline styles
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * ModalHeader component - Arbor Design System
+ *
+ * The header part of a modal dialog with title, optional icon, and close button.
+ * The icon uses SectionIcon variants (warning, danger, info, success).
+ *
+ * @example
+ * ```tsx
+ * // Basic modal header with close button
+ * <ModalHeader
+ *   title="What would you like to do?"
+ *   onClose={() => setIsOpen(false)}
+ * />
+ *
+ * // Modal header with warning icon
+ * <ModalHeader
+ *   title="Are you sure?"
+ *   icon="warning"
+ *   onClose={() => setIsOpen(false)}
+ * />
+ *
+ * // Modal header with danger icon (error state)
+ * <ModalHeader
+ *   title="Sorry, we can't find this page"
+ *   icon="danger"
+ *   onClose={() => setIsOpen(false)}
+ * />
+ *
+ * // Modal header without close button
+ * <ModalHeader
+ *   title="Processing..."
+ *   icon="info"
+ * />
+ * ```
+ */
+declare const ModalHeader: React.ForwardRefExoticComponent<ModalHeaderProps & React.RefAttributes<HTMLDivElement>>;
+
+export { ModalHeader, type ModalHeaderProps };