@fairmint/ui 0.3.0 → 0.3.1

package/dist/_virtual/index3.cjs

@@ -1,5 +1,7 @@
 "use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-var propTypes = { exports: {} };
-exports.__module = propTypes;
+const _commonjsHelpers = require("./_commonjsHelpers.cjs");
+const index = require("../node_modules/fast-deep-equal/index.cjs");
+var fastDeepEqualExports = index.__require();
+const isEqual = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(fastDeepEqualExports);
+module.exports = isEqual;
 //# sourceMappingURL=index3.cjs.map

package/dist/_virtual/index3.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index3.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index3.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/_virtual/index3.js

@@ -1,5 +1,8 @@
-var propTypes = { exports: {} };
+import { getDefaultExportFromCjs } from "./_commonjsHelpers.js";
+import { __require as requireFastDeepEqual } from "../node_modules/fast-deep-equal/index.js";
+var fastDeepEqualExports = requireFastDeepEqual();
+const isEqual = /* @__PURE__ */ getDefaultExportFromCjs(fastDeepEqualExports);
 export {
-  propTypes as __module
+  isEqual as default
 };
 //# sourceMappingURL=index3.js.map

package/dist/_virtual/index3.js.map

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

package/dist/_virtual/index4.cjs

@@ -1,7 +1,5 @@
 "use strict";
-const _commonjsHelpers = require("./_commonjsHelpers.cjs");
-const index = require("../node_modules/fast-deep-equal/index.cjs");
-var fastDeepEqualExports = index.__require();
-const isEqual = /* @__PURE__ */ _commonjsHelpers.getDefaultExportFromCjs(fastDeepEqualExports);
-module.exports = isEqual;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+var propTypes = { exports: {} };
+exports.__module = propTypes;
 //# sourceMappingURL=index4.cjs.map

package/dist/_virtual/index4.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index4.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"index4.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/_virtual/index4.js

@@ -1,8 +1,5 @@
-import { getDefaultExportFromCjs } from "./_commonjsHelpers.js";
-import { __require as requireFastDeepEqual } from "../node_modules/fast-deep-equal/index.js";
-var fastDeepEqualExports = requireFastDeepEqual();
-const isEqual = /* @__PURE__ */ getDefaultExportFromCjs(fastDeepEqualExports);
+var propTypes = { exports: {} };
 export {
-  isEqual as default
+  propTypes as __module
 };
 //# sourceMappingURL=index4.js.map

package/dist/_virtual/index4.js.map

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

package/dist/components/generic/Banner/Banner.cjs

@@ -0,0 +1,200 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const index = require("../../../theme/index.cjs");
+const colors = require("../../../theme/colors.cjs");
+const Badge = require("../../primitives/Badge/Badge.cjs");
+const Button = require("../../primitives/Button/Button.cjs");
+const layout = require("../../primitives/layout.cjs");
+const Group = require("../../../node_modules/@mantine/core/esm/components/Group/Group.cjs");
+const ThemeIcon = require("../../../node_modules/@mantine/core/esm/components/ThemeIcon/ThemeIcon.cjs");
+const Text = require("../../../node_modules/@mantine/core/esm/components/Text/Text.cjs");
+const fontSizes = require("../../../theme/fontSizes.cjs");
+const TONE_COLORS = {
+  brand: colors.colors.primary,
+  neutral: colors.colors.neutral,
+  info: colors.colors.info,
+  success: colors.colors.success,
+  warning: colors.colors.warning,
+  error: colors.colors.error
+};
+const DefaultStatusIcon = ({ tone }) => {
+  const commonProps = {
+    width: 20,
+    height: 20,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.75,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true
+  };
+  if (tone === "success") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...commonProps, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Success" }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m8.5 12 2.25 2.25L15.75 9" })
+    ] });
+  }
+  if (tone === "warning") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...commonProps, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Warning" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.3 4.2 2.6 18a2 2 0 0 0 1.75 3h15.3a2 2 0 0 0 1.75-3L13.7 4.2a2 2 0 0 0-3.4 0Z" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 9v4" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 17h.01" })
+    ] });
+  }
+  if (tone === "error") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...commonProps, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Error" }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 9 6 6" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m15 9-6 6" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...commonProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Information" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 11v5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 8h.01" })
+  ] });
+};
+const surfaceProps = (tone, presentation) => {
+  const color = TONE_COLORS[tone];
+  if (presentation === "page-level") {
+    return {
+      bg: `${color}.1`,
+      style: {
+        borderRadius: 0
+      }
+    };
+  }
+  const borderShade = tone === "brand" ? 1 : tone === "neutral" ? 3 : 2;
+  return {
+    bg: `${color}.0`,
+    bd: `1px solid ${color}.${borderShade}`,
+    style: {
+      borderRadius: index.radii.lg
+    }
+  };
+};
+const titleColor = (tone, presentation) => {
+  if (presentation === "page-level") {
+    const color = TONE_COLORS[tone];
+    return `${color}.${tone === "neutral" ? 9 : 8}`;
+  }
+  return index.neutralColors[900];
+};
+const actionVariant = (tone) => {
+  if (tone === "brand") return "light";
+  if (tone === "neutral") return "outline";
+  return "filled";
+};
+const descriptionTextProps = {
+  size: "sm",
+  c: index.neutralColors[500],
+  style: { lineHeight: 1.4 }
+};
+function BannerDescription({ children }) {
+  if (typeof children === "string" || typeof children === "number") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { ...descriptionTextProps, children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    layout.Box,
+    {
+      c: index.neutralColors[500],
+      style: {
+        fontSize: fontSizes.fontSizes.sm,
+        lineHeight: 1.4
+      },
+      children
+    }
+  );
+}
+function Banner({
+  action,
+  ariaLabel,
+  badgeLabel,
+  className,
+  description,
+  icon,
+  presentation = "inline",
+  role,
+  style,
+  title,
+  tone = "brand"
+}) {
+  const color = TONE_COLORS[tone];
+  const iconNode = icon === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(DefaultStatusIcon, { tone }) : icon;
+  const resolvedRole = role ?? (tone === "error" ? "alert" : "status");
+  const resolvedAriaLabel = ariaLabel ?? (typeof title === "string" ? title : void 0);
+  const surface = surfaceProps(tone, presentation);
+  let actionNode = null;
+  if (action !== void 0) {
+    const { label, ...buttonProps } = action;
+    actionNode = /* @__PURE__ */ jsxRuntime.jsx(
+      Button.Button,
+      {
+        ...buttonProps,
+        color,
+        variant: actionVariant(tone),
+        style: { flex: "0 0 auto", ...buttonProps.style },
+        children: label
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    layout.Box,
+    {
+      "aria-label": resolvedAriaLabel,
+      className,
+      "data-presentation": presentation,
+      "data-tone": tone,
+      role: resolvedRole,
+      px: "md",
+      py: "md",
+      bg: surface.bg,
+      bd: "bd" in surface ? surface.bd : void 0,
+      style: {
+        boxSizing: "border-box",
+        width: "100%",
+        ...surface.style,
+        ...style
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { align: "center", gap: "sm", wrap: "wrap", children: [
+        iconNode !== null && /* @__PURE__ */ jsxRuntime.jsx(
+          ThemeIcon.ThemeIcon,
+          {
+            "aria-hidden": true,
+            color,
+            radius: "sm",
+            size: 40,
+            variant: "light",
+            style: { flex: "0 0 auto" },
+            children: iconNode
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(layout.Stack, { gap: 4, style: { flex: "1 1 240px", minWidth: 0 }, children: [
+          title !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { align: "center", gap: "xs", wrap: "wrap", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Text.Text,
+              {
+                fw: 600,
+                size: "md",
+                c: titleColor(tone, presentation),
+                style: { lineHeight: 1.35 },
+                children: title
+              }
+            ),
+            badgeLabel !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { color, size: "sm", variant: "light", children: badgeLabel })
+          ] }),
+          description !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(BannerDescription, { children: description })
+        ] }),
+        actionNode
+      ] })
+    }
+  );
+}
+exports.Banner = Banner;
+//# sourceMappingURL=Banner.cjs.map

package/dist/components/generic/Banner/Banner.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.cjs","sources":["../../../../src/components/generic/Banner/Banner.tsx"],"sourcesContent":["import type { AriaRole, CSSProperties, ReactNode } from \"react\";\nimport { fontSizes, neutralColors, radii } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { Badge } from \"../../primitives/Badge/Badge\";\nimport { Button, type ButtonProps } from \"../../primitives/Button/Button\";\nimport { Box, Group, Stack, Text, ThemeIcon } from \"../../primitives/layout\";\n\nexport type BannerTone = \"brand\" | \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\nexport type BannerPresentation = \"inline\" | \"page-level\";\n\nexport interface BannerActionProps extends Omit<ButtonProps, \"children\" | \"color\" | \"variant\"> {\n  /** Visible action label. */\n  label: ReactNode;\n}\n\nexport interface BannerProps {\n  /** Primary message. Omit when the banner is description-only; set `ariaLabel` for accessibility. */\n  title?: ReactNode;\n  /** Supporting context. Omit for a title-only banner. */\n  description?: ReactNode;\n  /** Semantic meaning and visual treatment. @default \"brand\" */\n  tone?: BannerTone;\n  /** Inline content callout or full-width page-edge treatment. @default \"inline\" */\n  presentation?: BannerPresentation;\n  /** Icon shown in the 40px semantic tile. Pass `null` to hide the tile. */\n  icon?: ReactNode | null;\n  /** Optional badge label displayed beside the title. */\n  badgeLabel?: ReactNode;\n  /** Optional standardized CTA. */\n  action?: BannerActionProps;\n  /** Override the default accessible role. Error defaults to alert; other tones use status. */\n  role?: AriaRole;\n  /** Accessible label for the banner region. Defaults to the string title when possible. */\n  ariaLabel?: string;\n  className?: string;\n  style?: CSSProperties;\n}\n\nconst TONE_COLORS = {\n  brand: colors.primary,\n  neutral: colors.neutral,\n  info: colors.info,\n  success: colors.success,\n  warning: colors.warning,\n  error: colors.error,\n} as const;\n\nconst DefaultStatusIcon = ({ tone }: { tone: BannerTone }) => {\n  const commonProps = {\n    width: 20,\n    height: 20,\n    viewBox: \"0 0 24 24\",\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: 1.75,\n    strokeLinecap: \"round\" as const,\n    strokeLinejoin: \"round\" as const,\n    \"aria-hidden\": true,\n  };\n\n  if (tone === \"success\") {\n    return (\n      <svg {...commonProps}>\n        <title>Success</title>\n        <circle cx=\"12\" cy=\"12\" r=\"9\" />\n        <path d=\"m8.5 12 2.25 2.25L15.75 9\" />\n      </svg>\n    );\n  }\n\n  if (tone === \"warning\") {\n    return (\n      <svg {...commonProps}>\n        <title>Warning</title>\n        <path d=\"M10.3 4.2 2.6 18a2 2 0 0 0 1.75 3h15.3a2 2 0 0 0 1.75-3L13.7 4.2a2 2 0 0 0-3.4 0Z\" />\n        <path d=\"M12 9v4\" />\n        <path d=\"M12 17h.01\" />\n      </svg>\n    );\n  }\n\n  if (tone === \"error\") {\n    return (\n      <svg {...commonProps}>\n        <title>Error</title>\n        <circle cx=\"12\" cy=\"12\" r=\"9\" />\n        <path d=\"m9 9 6 6\" />\n        <path d=\"m15 9-6 6\" />\n      </svg>\n    );\n  }\n\n  return (\n    <svg {...commonProps}>\n      <title>Information</title>\n      <circle cx=\"12\" cy=\"12\" r=\"9\" />\n      <path d=\"M12 11v5\" />\n      <path d=\"M12 8h.01\" />\n    </svg>\n  );\n};\n\nconst surfaceProps = (tone: BannerTone, presentation: BannerPresentation) => {\n  const color = TONE_COLORS[tone];\n\n  if (presentation === \"page-level\") {\n    return {\n      bg: `${color}.1`,\n      style: {\n        borderRadius: 0,\n      } satisfies CSSProperties,\n    };\n  }\n\n  // Chip Banner: tinted surface + semantic border (error border = error.2)\n  const borderShade = tone === \"brand\" ? 1 : tone === \"neutral\" ? 3 : 2;\n\n  return {\n    bg: `${color}.0`,\n    bd: `1px solid ${color}.${borderShade}`,\n    style: {\n      borderRadius: radii.lg,\n    } satisfies CSSProperties,\n  };\n};\n\n/**\n * Inline Chip banners keep light semantic fills across color schemes, so titles\n * stay dark primary text for WCAG AA. Page-level uses a deeper semantic shade.\n */\nconst titleColor = (tone: BannerTone, presentation: BannerPresentation) => {\n  if (presentation === \"page-level\") {\n    const color = TONE_COLORS[tone];\n    return `${color}.${tone === \"neutral\" ? 9 : 8}`;\n  }\n  return neutralColors[900];\n};\n\nconst actionVariant = (tone: BannerTone): ButtonProps[\"variant\"] => {\n  if (tone === \"brand\") return \"light\";\n  if (tone === \"neutral\") return \"outline\";\n  return \"filled\";\n};\n\nconst descriptionTextProps = {\n  size: \"sm\" as const,\n  c: neutralColors[500],\n  style: { lineHeight: 1.4 },\n};\n\nfunction BannerDescription({ children }: { children: ReactNode }) {\n  if (typeof children === \"string\" || typeof children === \"number\") {\n    return <Text {...descriptionTextProps}>{children}</Text>;\n  }\n\n  return (\n    <Box\n      c={neutralColors[500]}\n      style={{\n        fontSize: fontSizes.sm,\n        lineHeight: 1.4,\n      }}\n    >\n      {children}\n    </Box>\n  );\n}\n\n/**\n * Persistent contextual guidance with semantic inline and page-level presentations.\n * Position page-level banners in the consuming layout; the component does not use fixed positioning.\n */\nexport function Banner({\n  action,\n  ariaLabel,\n  badgeLabel,\n  className,\n  description,\n  icon,\n  presentation = \"inline\",\n  role,\n  style,\n  title,\n  tone = \"brand\",\n}: BannerProps) {\n  const color = TONE_COLORS[tone];\n  const iconNode = icon === undefined ? <DefaultStatusIcon tone={tone} /> : icon;\n  const resolvedRole = role ?? (tone === \"error\" ? \"alert\" : \"status\");\n  const resolvedAriaLabel = ariaLabel ?? (typeof title === \"string\" ? title : undefined);\n  const surface = surfaceProps(tone, presentation);\n  let actionNode: ReactNode = null;\n\n  if (action !== undefined) {\n    const { label, ...buttonProps } = action;\n    actionNode = (\n      <Button\n        {...buttonProps}\n        color={color}\n        variant={actionVariant(tone)}\n        style={{ flex: \"0 0 auto\", ...buttonProps.style }}\n      >\n        {label}\n      </Button>\n    );\n  }\n\n  return (\n    <Box\n      aria-label={resolvedAriaLabel}\n      className={className}\n      data-presentation={presentation}\n      data-tone={tone}\n      role={resolvedRole}\n      px=\"md\"\n      py=\"md\"\n      bg={surface.bg}\n      bd={\"bd\" in surface ? surface.bd : undefined}\n      style={{\n        boxSizing: \"border-box\",\n        width: \"100%\",\n        ...surface.style,\n        ...style,\n      }}\n    >\n      <Group align=\"center\" gap=\"sm\" wrap=\"wrap\">\n        {iconNode !== null && (\n          <ThemeIcon\n            aria-hidden\n            color={color}\n            radius=\"sm\"\n            size={40}\n            variant=\"light\"\n            style={{ flex: \"0 0 auto\" }}\n          >\n            {iconNode}\n          </ThemeIcon>\n        )}\n\n        <Stack gap={4} style={{ flex: \"1 1 240px\", minWidth: 0 }}>\n          {title !== undefined && (\n            <Group align=\"center\" gap=\"xs\" wrap=\"wrap\">\n              <Text\n                fw={600}\n                size=\"md\"\n                c={titleColor(tone, presentation)}\n                style={{ lineHeight: 1.35 }}\n              >\n                {title}\n              </Text>\n              {badgeLabel !== undefined && (\n                <Badge color={color} size=\"sm\" variant=\"light\">\n                  {badgeLabel}\n                </Badge>\n              )}\n            </Group>\n          )}\n          {description !== undefined && <BannerDescription>{description}</BannerDescription>}\n        </Stack>\n\n        {actionNode}\n      </Group>\n    </Box>\n  );\n}\n"],"names":["colors","jsxs","jsx","radii","neutralColors","Text","Box","fontSizes","Button","Group","ThemeIcon","Stack","Badge"],"mappings":"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"}

package/dist/components/generic/Banner/Banner.d.ts

@@ -0,0 +1,36 @@
+import { AriaRole, CSSProperties, ReactNode } from 'react';
+import { ButtonProps } from '../../primitives/Button/Button';
+export type BannerTone = "brand" | "neutral" | "info" | "success" | "warning" | "error";
+export type BannerPresentation = "inline" | "page-level";
+export interface BannerActionProps extends Omit<ButtonProps, "children" | "color" | "variant"> {
+    /** Visible action label. */
+    label: ReactNode;
+}
+export interface BannerProps {
+    /** Primary message. Omit when the banner is description-only; set `ariaLabel` for accessibility. */
+    title?: ReactNode;
+    /** Supporting context. Omit for a title-only banner. */
+    description?: ReactNode;
+    /** Semantic meaning and visual treatment. @default "brand" */
+    tone?: BannerTone;
+    /** Inline content callout or full-width page-edge treatment. @default "inline" */
+    presentation?: BannerPresentation;
+    /** Icon shown in the 40px semantic tile. Pass `null` to hide the tile. */
+    icon?: ReactNode | null;
+    /** Optional badge label displayed beside the title. */
+    badgeLabel?: ReactNode;
+    /** Optional standardized CTA. */
+    action?: BannerActionProps;
+    /** Override the default accessible role. Error defaults to alert; other tones use status. */
+    role?: AriaRole;
+    /** Accessible label for the banner region. Defaults to the string title when possible. */
+    ariaLabel?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Persistent contextual guidance with semantic inline and page-level presentations.
+ * Position page-level banners in the consuming layout; the component does not use fixed positioning.
+ */
+export declare function Banner({ action, ariaLabel, badgeLabel, className, description, icon, presentation, role, style, title, tone, }: BannerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Banner.d.ts.map

package/dist/components/generic/Banner/Banner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/Banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAG1E,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AACxF,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,YAAY,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,OAAO,GAAG,SAAS,CAAC;IAC5F,4BAA4B;IAC5B,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,WAAW;IAC1B,oGAAoG;IACpG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wDAAwD;IACxD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,kFAAkF;IAClF,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,0EAA0E;IAC1E,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,uDAAuD;IACvD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iCAAiC;IACjC,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,6FAA6F;IAC7F,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAoID;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,SAAS,EACT,UAAU,EACV,SAAS,EACT,WAAW,EACX,IAAI,EACJ,YAAuB,EACvB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,IAAc,GACf,EAAE,WAAW,2CA+Eb"}

package/dist/components/generic/Banner/Banner.js

@@ -0,0 +1,200 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { radii, neutralColors } from "../../../theme/index.js";
+import { colors } from "../../../theme/colors.js";
+import { Badge } from "../../primitives/Badge/Badge.js";
+import { Button } from "../../primitives/Button/Button.js";
+import { Box, Stack } from "../../primitives/layout.js";
+import { Group } from "../../../node_modules/@mantine/core/esm/components/Group/Group.js";
+import { ThemeIcon } from "../../../node_modules/@mantine/core/esm/components/ThemeIcon/ThemeIcon.js";
+import { Text } from "../../../node_modules/@mantine/core/esm/components/Text/Text.js";
+import { fontSizes } from "../../../theme/fontSizes.js";
+const TONE_COLORS = {
+  brand: colors.primary,
+  neutral: colors.neutral,
+  info: colors.info,
+  success: colors.success,
+  warning: colors.warning,
+  error: colors.error
+};
+const DefaultStatusIcon = ({ tone }) => {
+  const commonProps = {
+    width: 20,
+    height: 20,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.75,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true
+  };
+  if (tone === "success") {
+    return /* @__PURE__ */ jsxs("svg", { ...commonProps, children: [
+      /* @__PURE__ */ jsx("title", { children: "Success" }),
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ jsx("path", { d: "m8.5 12 2.25 2.25L15.75 9" })
+    ] });
+  }
+  if (tone === "warning") {
+    return /* @__PURE__ */ jsxs("svg", { ...commonProps, children: [
+      /* @__PURE__ */ jsx("title", { children: "Warning" }),
+      /* @__PURE__ */ jsx("path", { d: "M10.3 4.2 2.6 18a2 2 0 0 0 1.75 3h15.3a2 2 0 0 0 1.75-3L13.7 4.2a2 2 0 0 0-3.4 0Z" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+    ] });
+  }
+  if (tone === "error") {
+    return /* @__PURE__ */ jsxs("svg", { ...commonProps, children: [
+      /* @__PURE__ */ jsx("title", { children: "Error" }),
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ jsx("path", { d: "m9 9 6 6" }),
+      /* @__PURE__ */ jsx("path", { d: "m15 9-6 6" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("svg", { ...commonProps, children: [
+    /* @__PURE__ */ jsx("title", { children: "Information" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 11v5" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
+  ] });
+};
+const surfaceProps = (tone, presentation) => {
+  const color = TONE_COLORS[tone];
+  if (presentation === "page-level") {
+    return {
+      bg: `${color}.1`,
+      style: {
+        borderRadius: 0
+      }
+    };
+  }
+  const borderShade = tone === "brand" ? 1 : tone === "neutral" ? 3 : 2;
+  return {
+    bg: `${color}.0`,
+    bd: `1px solid ${color}.${borderShade}`,
+    style: {
+      borderRadius: radii.lg
+    }
+  };
+};
+const titleColor = (tone, presentation) => {
+  if (presentation === "page-level") {
+    const color = TONE_COLORS[tone];
+    return `${color}.${tone === "neutral" ? 9 : 8}`;
+  }
+  return neutralColors[900];
+};
+const actionVariant = (tone) => {
+  if (tone === "brand") return "light";
+  if (tone === "neutral") return "outline";
+  return "filled";
+};
+const descriptionTextProps = {
+  size: "sm",
+  c: neutralColors[500],
+  style: { lineHeight: 1.4 }
+};
+function BannerDescription({ children }) {
+  if (typeof children === "string" || typeof children === "number") {
+    return /* @__PURE__ */ jsx(Text, { ...descriptionTextProps, children });
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      c: neutralColors[500],
+      style: {
+        fontSize: fontSizes.sm,
+        lineHeight: 1.4
+      },
+      children
+    }
+  );
+}
+function Banner({
+  action,
+  ariaLabel,
+  badgeLabel,
+  className,
+  description,
+  icon,
+  presentation = "inline",
+  role,
+  style,
+  title,
+  tone = "brand"
+}) {
+  const color = TONE_COLORS[tone];
+  const iconNode = icon === void 0 ? /* @__PURE__ */ jsx(DefaultStatusIcon, { tone }) : icon;
+  const resolvedRole = role ?? (tone === "error" ? "alert" : "status");
+  const resolvedAriaLabel = ariaLabel ?? (typeof title === "string" ? title : void 0);
+  const surface = surfaceProps(tone, presentation);
+  let actionNode = null;
+  if (action !== void 0) {
+    const { label, ...buttonProps } = action;
+    actionNode = /* @__PURE__ */ jsx(
+      Button,
+      {
+        ...buttonProps,
+        color,
+        variant: actionVariant(tone),
+        style: { flex: "0 0 auto", ...buttonProps.style },
+        children: label
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "aria-label": resolvedAriaLabel,
+      className,
+      "data-presentation": presentation,
+      "data-tone": tone,
+      role: resolvedRole,
+      px: "md",
+      py: "md",
+      bg: surface.bg,
+      bd: "bd" in surface ? surface.bd : void 0,
+      style: {
+        boxSizing: "border-box",
+        width: "100%",
+        ...surface.style,
+        ...style
+      },
+      children: /* @__PURE__ */ jsxs(Group, { align: "center", gap: "sm", wrap: "wrap", children: [
+        iconNode !== null && /* @__PURE__ */ jsx(
+          ThemeIcon,
+          {
+            "aria-hidden": true,
+            color,
+            radius: "sm",
+            size: 40,
+            variant: "light",
+            style: { flex: "0 0 auto" },
+            children: iconNode
+          }
+        ),
+        /* @__PURE__ */ jsxs(Stack, { gap: 4, style: { flex: "1 1 240px", minWidth: 0 }, children: [
+          title !== void 0 && /* @__PURE__ */ jsxs(Group, { align: "center", gap: "xs", wrap: "wrap", children: [
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                fw: 600,
+                size: "md",
+                c: titleColor(tone, presentation),
+                style: { lineHeight: 1.35 },
+                children: title
+              }
+            ),
+            badgeLabel !== void 0 && /* @__PURE__ */ jsx(Badge, { color, size: "sm", variant: "light", children: badgeLabel })
+          ] }),
+          description !== void 0 && /* @__PURE__ */ jsx(BannerDescription, { children: description })
+        ] }),
+        actionNode
+      ] })
+    }
+  );
+}
+export {
+  Banner
+};
+//# sourceMappingURL=Banner.js.map

package/dist/components/generic/Banner/Banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.js","sources":["../../../../src/components/generic/Banner/Banner.tsx"],"sourcesContent":["import type { AriaRole, CSSProperties, ReactNode } from \"react\";\nimport { fontSizes, neutralColors, radii } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { Badge } from \"../../primitives/Badge/Badge\";\nimport { Button, type ButtonProps } from \"../../primitives/Button/Button\";\nimport { Box, Group, Stack, Text, ThemeIcon } from \"../../primitives/layout\";\n\nexport type BannerTone = \"brand\" | \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\nexport type BannerPresentation = \"inline\" | \"page-level\";\n\nexport interface BannerActionProps extends Omit<ButtonProps, \"children\" | \"color\" | \"variant\"> {\n  /** Visible action label. */\n  label: ReactNode;\n}\n\nexport interface BannerProps {\n  /** Primary message. Omit when the banner is description-only; set `ariaLabel` for accessibility. */\n  title?: ReactNode;\n  /** Supporting context. Omit for a title-only banner. */\n  description?: ReactNode;\n  /** Semantic meaning and visual treatment. @default \"brand\" */\n  tone?: BannerTone;\n  /** Inline content callout or full-width page-edge treatment. @default \"inline\" */\n  presentation?: BannerPresentation;\n  /** Icon shown in the 40px semantic tile. Pass `null` to hide the tile. */\n  icon?: ReactNode | null;\n  /** Optional badge label displayed beside the title. */\n  badgeLabel?: ReactNode;\n  /** Optional standardized CTA. */\n  action?: BannerActionProps;\n  /** Override the default accessible role. Error defaults to alert; other tones use status. */\n  role?: AriaRole;\n  /** Accessible label for the banner region. Defaults to the string title when possible. */\n  ariaLabel?: string;\n  className?: string;\n  style?: CSSProperties;\n}\n\nconst TONE_COLORS = {\n  brand: colors.primary,\n  neutral: colors.neutral,\n  info: colors.info,\n  success: colors.success,\n  warning: colors.warning,\n  error: colors.error,\n} as const;\n\nconst DefaultStatusIcon = ({ tone }: { tone: BannerTone }) => {\n  const commonProps = {\n    width: 20,\n    height: 20,\n    viewBox: \"0 0 24 24\",\n    fill: \"none\",\n    stroke: \"currentColor\",\n    strokeWidth: 1.75,\n    strokeLinecap: \"round\" as const,\n    strokeLinejoin: \"round\" as const,\n    \"aria-hidden\": true,\n  };\n\n  if (tone === \"success\") {\n    return (\n      <svg {...commonProps}>\n        <title>Success</title>\n        <circle cx=\"12\" cy=\"12\" r=\"9\" />\n        <path d=\"m8.5 12 2.25 2.25L15.75 9\" />\n      </svg>\n    );\n  }\n\n  if (tone === \"warning\") {\n    return (\n      <svg {...commonProps}>\n        <title>Warning</title>\n        <path d=\"M10.3 4.2 2.6 18a2 2 0 0 0 1.75 3h15.3a2 2 0 0 0 1.75-3L13.7 4.2a2 2 0 0 0-3.4 0Z\" />\n        <path d=\"M12 9v4\" />\n        <path d=\"M12 17h.01\" />\n      </svg>\n    );\n  }\n\n  if (tone === \"error\") {\n    return (\n      <svg {...commonProps}>\n        <title>Error</title>\n        <circle cx=\"12\" cy=\"12\" r=\"9\" />\n        <path d=\"m9 9 6 6\" />\n        <path d=\"m15 9-6 6\" />\n      </svg>\n    );\n  }\n\n  return (\n    <svg {...commonProps}>\n      <title>Information</title>\n      <circle cx=\"12\" cy=\"12\" r=\"9\" />\n      <path d=\"M12 11v5\" />\n      <path d=\"M12 8h.01\" />\n    </svg>\n  );\n};\n\nconst surfaceProps = (tone: BannerTone, presentation: BannerPresentation) => {\n  const color = TONE_COLORS[tone];\n\n  if (presentation === \"page-level\") {\n    return {\n      bg: `${color}.1`,\n      style: {\n        borderRadius: 0,\n      } satisfies CSSProperties,\n    };\n  }\n\n  // Chip Banner: tinted surface + semantic border (error border = error.2)\n  const borderShade = tone === \"brand\" ? 1 : tone === \"neutral\" ? 3 : 2;\n\n  return {\n    bg: `${color}.0`,\n    bd: `1px solid ${color}.${borderShade}`,\n    style: {\n      borderRadius: radii.lg,\n    } satisfies CSSProperties,\n  };\n};\n\n/**\n * Inline Chip banners keep light semantic fills across color schemes, so titles\n * stay dark primary text for WCAG AA. Page-level uses a deeper semantic shade.\n */\nconst titleColor = (tone: BannerTone, presentation: BannerPresentation) => {\n  if (presentation === \"page-level\") {\n    const color = TONE_COLORS[tone];\n    return `${color}.${tone === \"neutral\" ? 9 : 8}`;\n  }\n  return neutralColors[900];\n};\n\nconst actionVariant = (tone: BannerTone): ButtonProps[\"variant\"] => {\n  if (tone === \"brand\") return \"light\";\n  if (tone === \"neutral\") return \"outline\";\n  return \"filled\";\n};\n\nconst descriptionTextProps = {\n  size: \"sm\" as const,\n  c: neutralColors[500],\n  style: { lineHeight: 1.4 },\n};\n\nfunction BannerDescription({ children }: { children: ReactNode }) {\n  if (typeof children === \"string\" || typeof children === \"number\") {\n    return <Text {...descriptionTextProps}>{children}</Text>;\n  }\n\n  return (\n    <Box\n      c={neutralColors[500]}\n      style={{\n        fontSize: fontSizes.sm,\n        lineHeight: 1.4,\n      }}\n    >\n      {children}\n    </Box>\n  );\n}\n\n/**\n * Persistent contextual guidance with semantic inline and page-level presentations.\n * Position page-level banners in the consuming layout; the component does not use fixed positioning.\n */\nexport function Banner({\n  action,\n  ariaLabel,\n  badgeLabel,\n  className,\n  description,\n  icon,\n  presentation = \"inline\",\n  role,\n  style,\n  title,\n  tone = \"brand\",\n}: BannerProps) {\n  const color = TONE_COLORS[tone];\n  const iconNode = icon === undefined ? <DefaultStatusIcon tone={tone} /> : icon;\n  const resolvedRole = role ?? (tone === \"error\" ? \"alert\" : \"status\");\n  const resolvedAriaLabel = ariaLabel ?? (typeof title === \"string\" ? title : undefined);\n  const surface = surfaceProps(tone, presentation);\n  let actionNode: ReactNode = null;\n\n  if (action !== undefined) {\n    const { label, ...buttonProps } = action;\n    actionNode = (\n      <Button\n        {...buttonProps}\n        color={color}\n        variant={actionVariant(tone)}\n        style={{ flex: \"0 0 auto\", ...buttonProps.style }}\n      >\n        {label}\n      </Button>\n    );\n  }\n\n  return (\n    <Box\n      aria-label={resolvedAriaLabel}\n      className={className}\n      data-presentation={presentation}\n      data-tone={tone}\n      role={resolvedRole}\n      px=\"md\"\n      py=\"md\"\n      bg={surface.bg}\n      bd={\"bd\" in surface ? surface.bd : undefined}\n      style={{\n        boxSizing: \"border-box\",\n        width: \"100%\",\n        ...surface.style,\n        ...style,\n      }}\n    >\n      <Group align=\"center\" gap=\"sm\" wrap=\"wrap\">\n        {iconNode !== null && (\n          <ThemeIcon\n            aria-hidden\n            color={color}\n            radius=\"sm\"\n            size={40}\n            variant=\"light\"\n            style={{ flex: \"0 0 auto\" }}\n          >\n            {iconNode}\n          </ThemeIcon>\n        )}\n\n        <Stack gap={4} style={{ flex: \"1 1 240px\", minWidth: 0 }}>\n          {title !== undefined && (\n            <Group align=\"center\" gap=\"xs\" wrap=\"wrap\">\n              <Text\n                fw={600}\n                size=\"md\"\n                c={titleColor(tone, presentation)}\n                style={{ lineHeight: 1.35 }}\n              >\n                {title}\n              </Text>\n              {badgeLabel !== undefined && (\n                <Badge color={color} size=\"sm\" variant=\"light\">\n                  {badgeLabel}\n                </Badge>\n              )}\n            </Group>\n          )}\n          {description !== undefined && <BannerDescription>{description}</BannerDescription>}\n        </Stack>\n\n        {actionNode}\n      </Group>\n    </Box>\n  );\n}\n"],"names":[],"mappings":"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"}