@recursica/adapter-mantine-v8 1.0.0

package/src/components/Breadcrumb/markCurrentPageItem.test.ts

@@ -0,0 +1,49 @@
+import { createElement, type ReactElement } from "react";
+import { describe, it, expect } from "vitest";
+import { markCurrentPageItem } from "@recursica/adapter-common";
+
+type Props = Record<string, unknown>;
+
+describe("markCurrentPageItem", () => {
+  it("marks the last item aria-current=page and leaves earlier items untouched", () => {
+    const items = markCurrentPageItem([
+      createElement("a", { href: "/one" }, "One"),
+      createElement("a", { href: "/two" }, "Two"),
+      createElement("span", {}, "Three"),
+    ]) as ReactElement<Props>[];
+
+    expect(items[0].props.href).toBe("/one");
+    expect(items[0].props["aria-current"]).toBeUndefined();
+    expect(items[1].props.href).toBe("/two");
+    expect(items[1].props["aria-current"]).toBeUndefined();
+    expect(items[2].props["aria-current"]).toBe("page");
+  });
+
+  it("strips href/onClick and drops tab order on an interactive last item", () => {
+    const onClick = () => {};
+    const [last] = markCurrentPageItem([
+      createElement("a", { href: "/current", onClick }, "Current"),
+    ]) as ReactElement<Props>[];
+
+    expect(last.props.href).toBeUndefined();
+    expect(last.props.onClick).toBeUndefined();
+    expect(last.props.tabIndex).toBe(-1);
+    expect(last.props["aria-current"]).toBe("page");
+  });
+
+  it("leaves a non-interactive last item's other props untouched", () => {
+    const [last] = markCurrentPageItem([
+      createElement("span", { className: "current" }, "Current"),
+    ]) as ReactElement<Props>[];
+
+    expect(last.props.className).toBe("current");
+    expect(last.props.tabIndex).toBeUndefined();
+    expect(last.props["aria-current"]).toBe("page");
+  });
+
+  it("passes through non-element children (e.g. plain text) unchanged", () => {
+    const items = markCurrentPageItem(["First", "Last"]);
+
+    expect(items).toEqual(["First", "Last"]);
+  });
+});

package/src/components/Button/Button.module.css

@@ -0,0 +1,446 @@
+/* Brand-layer exemptions (recursica-allow-brand) — see recursica-token-analyzer README.md.
+ * Global hover/focus/disabled state tokens (recursica_variables_scoped.css header, 'Hover & Focus states' / 'Disabled state' — implicit rule for every interactive element; components must not define their own per-component treatment).
+ *   recursica-allow-brand: --recursica_brand_states_focus_blur
+ *   recursica-allow-brand: --recursica_brand_states_focus_border-size
+ *   recursica-allow-brand: --recursica_brand_states_focus_color
+ *   recursica-allow-brand: --recursica_brand_states_focus_margin
+ *   recursica-allow-brand: --recursica_brand_states_hover_color
+ *   recursica-allow-brand: --recursica_brand_states_hover_opacity
+ */
+
+/**
+ * IMPLEMENTATION NOTES:
+ * 
+ * - Icon-Only Flexbox Hack: Mantine renders a hidden `.label` span even if `children` is empty. 
+ *   Because we apply `flex: 1` to `.label`, this empty span grows and pushes the `leftSection` (the icon) 
+ *   off-center. To fix this, we apply `display: none` to the label when `data-content="icon-only"`.
+ */
+/* Baseline and Reset */
+.root {
+  box-sizing: border-box;
+  margin: 0;
+  border-style: solid;
+  overflow: hidden; /* Truncation bounding box */
+  position: relative;
+  transition: all 0.2s ease;
+  width: fit-content; /* Prevent stretching in flex columns */
+  max-width: 100%; /* Let a constraining parent (e.g. max-width container) actually shrink the button; fit-content alone ignores it */
+
+  /* Shared Defaults */
+  font-family: var(
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_letter-spacing
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_text-transform
+  );
+}
+
+/* Internal Mantine reset & layout logic for Truncation */
+.root > *:not(.loader) {
+  min-width: 0;
+  position: relative;
+  z-index: 1;
+}
+
+.loader {
+  /* Mantine absolutely positions this; we just need a hook to exclude it from the child reset */
+}
+
+.label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  flex: 1 1 0;
+}
+
+.labelText {
+  display: block;
+  min-width: 0;
+  overflow: clip; /* HARDCODE: `hidden` clips descenders (e.g. "g") when text_line-height is
+    tighter than the font's natural ascent+descent; overflow-clip-margin gives ink a small bleed
+    allowance while still clipping genuinely overflowing text (see Chip's IMPLEMENTATION_NOTES.md). */
+  overflow-clip-margin: 0.35em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: inherit;
+  line-height: var(
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_text_line-height
+  );
+}
+
+.root[data-size="small"] .labelText {
+  line-height: var(
+    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_line-height
+  );
+}
+
+/* ==== SIZES ==== */
+.root[data-size="default"] {
+  /* Set baseline paddings and min-width using generic tokens as baseline defaults */
+  padding: 0
+    var(
+      --recursica_ui-kit_components_button_variants_sizes_default_properties_horizontal-padding
+    );
+  min-width: var(
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_min-width
+  );
+
+  height: var(
+    --recursica_ui-kit_components_button_variants_sizes_default_properties_height
+  );
+
+  .labelText {
+    max-width: var(
+      --recursica_ui-kit_components_button_variants_sizes_default_properties_max-label-width
+    );
+  }
+
+  .iconWrapper {
+    width: var(
+      --recursica_ui-kit_components_button_variants_sizes_default_properties_icon
+    );
+    height: var(
+      --recursica_ui-kit_components_button_variants_sizes_default_properties_icon
+    );
+  }
+
+  .section {
+    gap: var(
+      --recursica_ui-kit_components_button_variants_sizes_default_properties_icon-text-gap
+    );
+  }
+
+  &[data-content="label"] {
+    border-radius: var(
+      --recursica_ui-kit_components_button_variants_content_label_variants_sizes_default_properties_border-radius
+    );
+    min-width: var(
+      --recursica_ui-kit_components_button_variants_content_label_variants_sizes_default_properties_min-width
+    );
+    padding: 0
+      var(
+        --recursica_ui-kit_components_button_variants_content_label_variants_sizes_default_properties_horizontal-padding
+      );
+  }
+
+  &[data-content="icon-label"] {
+    border-radius: var(
+      --recursica_ui-kit_components_button_variants_content_icon-label_variants_sizes_default_properties_border-radius
+    );
+    min-width: var(
+      --recursica_ui-kit_components_button_variants_content_icon-label_variants_sizes_default_properties_min-width
+    );
+    padding: 0
+      var(
+        --recursica_ui-kit_components_button_variants_content_icon-label_variants_sizes_default_properties_horizontal-padding
+      );
+  }
+
+  &[data-content="icon-only"] {
+    border-radius: var(
+      --recursica_ui-kit_components_button_variants_content_icon-only_variants_sizes_default_properties_border-radius
+    );
+    min-width: var(
+      --recursica_ui-kit_components_button_variants_content_icon-only_variants_sizes_default_properties_min-width
+    );
+    padding: 0
+      var(
+        --recursica_ui-kit_components_button_variants_content_icon-only_variants_sizes_default_properties_horizontal-padding
+      );
+  }
+}
+
+.root[data-size="small"] {
+  /* Set baseline paddings and min-width using generic tokens as baseline defaults */
+  padding: 0
+    var(
+      --recursica_ui-kit_components_button_variants_sizes_small_properties_horizontal-padding
+    );
+  min-width: var(
+    --recursica_ui-kit_components_button_variants_sizes_small_properties_min-width
+  );
+
+  height: var(
+    --recursica_ui-kit_components_button_variants_sizes_small_properties_height
+  );
+
+  .labelText {
+    max-width: var(
+      --recursica_ui-kit_components_button_variants_sizes_small_properties_max-label-width
+    );
+  }
+
+  .iconWrapper {
+    width: var(
+      --recursica_ui-kit_components_button_variants_sizes_small_properties_icon
+    );
+    height: var(
+      --recursica_ui-kit_components_button_variants_sizes_small_properties_icon
+    );
+  }
+
+  .section {
+    gap: var(
+      --recursica_ui-kit_components_button_variants_sizes_small_properties_icon-text-gap
+    );
+  }
+
+  /* Override specific typography for small */
+  font-family: var(
+    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_font-size
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_font-weight
+  );
+  font-style: var(
+    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_font-style
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_letter-spacing
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_button_variants_sizes_small_properties_text_text-transform
+  );
+
+  &[data-content="label"] {
+    border-radius: var(
+      --recursica_ui-kit_components_button_variants_content_label_variants_sizes_small_properties_border-radius
+    );
+    min-width: var(
+      --recursica_ui-kit_components_button_variants_content_label_variants_sizes_small_properties_min-width
+    );
+    padding: 0
+      var(
+        --recursica_ui-kit_components_button_variants_content_label_variants_sizes_small_properties_horizontal-padding
+      );
+  }
+
+  &[data-content="icon-label"] {
+    border-radius: var(
+      --recursica_ui-kit_components_button_variants_content_icon-label_variants_sizes_small_properties_border-radius
+    );
+    min-width: var(
+      --recursica_ui-kit_components_button_variants_content_icon-label_variants_sizes_small_properties_min-width
+    );
+    padding: 0
+      var(
+        --recursica_ui-kit_components_button_variants_content_icon-label_variants_sizes_small_properties_horizontal-padding
+      );
+  }
+
+  &[data-content="icon-only"] {
+    border-radius: var(
+      --recursica_ui-kit_components_button_variants_content_icon-only_variants_sizes_small_properties_border-radius
+    );
+    min-width: var(
+      --recursica_ui-kit_components_button_variants_content_icon-only_variants_sizes_small_properties_min-width
+    );
+    padding: 0
+      var(
+        --recursica_ui-kit_components_button_variants_content_icon-only_variants_sizes_small_properties_horizontal-padding
+      );
+  }
+}
+
+/* Icon Resets */
+.iconWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.iconWrapper > * {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.section {
+  min-width: 0;
+}
+
+/* Icon-only logic overrides */
+.root[data-content="icon-only"] .label {
+  display: none;
+}
+.root[data-content="icon-only"] .section {
+  gap: 0;
+}
+.root[data-content="icon-only"] .section[data-position="left"] {
+  margin-inline-end: 0;
+}
+.root[data-content="icon-only"] .section[data-position="right"] {
+  margin-inline-start: 0;
+}
+
+/* Disabled */
+.root:disabled {
+  cursor: not-allowed;
+}
+
+/* Global Hover Hack Overlay */
+.root::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  z-index: 0;
+  pointer-events: none;
+  transition: opacity 150ms ease;
+  opacity: 0;
+  background-color: var(--recursica_brand_states_hover_color);
+}
+.root:hover:not(:disabled)::after {
+  opacity: var(--recursica_brand_states_hover_opacity);
+}
+/* ==== VARIANTS ==== */
+
+/* SOLID */
+.root[data-variant="solid"] {
+  border-width: var(
+    --recursica_ui-kit_components_button_variants_styles_solid_properties_border-size
+  );
+  box-shadow: var(
+    --recursica_ui-kit_components_button_variants_styles_solid_properties_elevation
+  );
+  background-color: var(
+    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_background-color
+  );
+  border-color: var(
+    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_border-color
+  );
+  color: var(
+    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_text-color
+  );
+  /* Exposed so the loading-state Loader (color="var(--button-color)" in Button.tsx) matches
+     this exact text-color token instead of Mantine's own unrelated --button-color default.
+     !important: Mantine's own Button sets --button-color via an inline `style` attribute on
+     this same root element, which normal-weight stylesheet rules can never outrank regardless
+     of selector specificity (see IMPLEMENTATION_NOTES.md). */
+  --button-color: var(
+    --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_text-color
+  ) !important;
+
+  .iconWrapper {
+    color: var(
+      --recursica_ui-kit_components_button_variants_styles_solid_properties_colors_icon-color
+    );
+  }
+}
+.root[data-variant="solid"]:disabled {
+  opacity: var(
+    --recursica_ui-kit_components_button_variants_styles_solid_variants_states_disabled_properties_opacity
+  );
+  box-shadow: var(
+    --recursica_ui-kit_components_button_variants_styles_solid_variants_states_disabled_properties_elevation
+  );
+}
+
+/* OUTLINE */
+.root[data-variant="outline"] {
+  border-width: var(
+    --recursica_ui-kit_components_button_variants_styles_outline_properties_border-size
+  );
+  box-shadow: var(
+    --recursica_ui-kit_components_button_variants_styles_outline_properties_elevation
+  );
+  background-color: var(
+    --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_background-color
+  );
+  border-color: var(
+    --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_border-color
+  );
+  color: var(
+    --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_text-color
+  );
+  /* !important: see solid variant's identical comment above. */
+  --button-color: var(
+    --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_text-color
+  ) !important;
+
+  .iconWrapper {
+    color: var(
+      --recursica_ui-kit_components_button_variants_styles_outline_properties_colors_icon-color
+    );
+  }
+}
+.root[data-variant="outline"]:disabled {
+  opacity: var(
+    --recursica_ui-kit_components_button_variants_styles_outline_variants_states_disabled_properties_opacity
+  );
+  box-shadow: var(
+    --recursica_ui-kit_components_button_variants_styles_outline_variants_states_disabled_properties_elevation
+  );
+}
+
+/* TEXT */
+.root[data-variant="text"] {
+  border-width: var(
+    --recursica_ui-kit_components_button_variants_styles_text_properties_border-size
+  );
+  box-shadow: var(
+    --recursica_ui-kit_components_button_variants_styles_text_properties_elevation
+  );
+  background-color: var(
+    --recursica_ui-kit_components_button_variants_styles_text_properties_colors_background-color
+  );
+  border-color: var(
+    --recursica_ui-kit_components_button_variants_styles_text_properties_colors_border-color
+  );
+  color: var(
+    --recursica_ui-kit_components_button_variants_styles_text_properties_colors_text-color
+  );
+  /* !important: see solid variant's identical comment above. */
+  --button-color: var(
+    --recursica_ui-kit_components_button_variants_styles_text_properties_colors_text-color
+  ) !important;
+
+  .iconWrapper {
+    color: var(
+      --recursica_ui-kit_components_button_variants_styles_text_properties_colors_icon-color
+    );
+  }
+}
+.root[data-variant="text"]:disabled {
+  opacity: var(
+    --recursica_ui-kit_components_button_variants_styles_text_variants_states_disabled_properties_opacity
+  );
+  box-shadow: var(
+    --recursica_ui-kit_components_button_variants_styles_text_variants_states_disabled_properties_elevation
+  );
+}
+
+/* Focus State Mapping (native browser focus outline replaced with the recursica focus ring).
+   Placed after every variant's own box-shadow (elevation) rule so it wins the cascade at equal
+   attribute-selector specificity regardless of variant. */
+.root:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 var(--recursica_brand_states_focus_border-size)
+      var(--recursica_brand_states_focus_color),
+    0 0 var(--recursica_brand_states_focus_blur)
+      var(--recursica_brand_states_focus_margin)
+      var(--recursica_brand_states_focus_color);
+}

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,196 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./Button";
+import { Layer } from "@recursica/adapter-common";
+
+type ButtonStoryProps = React.ComponentProps<typeof Button>;
+
+const meta: Meta<ButtonStoryProps> = {
+  title: "UI-Kit/Button",
+  component: Button,
+  tags: ["autodocs"],
+  argTypes: {
+    disabled: {
+      control: "boolean",
+    },
+    variant: {
+      control: "select",
+      options: ["solid", "outline", "text"],
+      description: "The visual variant of the button",
+    },
+    size: {
+      control: "radio",
+      options: ["default", "small"],
+      description: "The size of the button",
+    },
+    loading: {
+      control: "boolean",
+      description: "Sets the button to a loading state",
+    },
+    useRecursicaLoader: {
+      control: "boolean",
+      description:
+        "Use the Recursica Loader component instead of the default Mantine loader",
+    },
+    loaderVariant: {
+      control: "select",
+      options: ["oval", "bars", "dots"],
+      description: "The visual variant of the Recursica Loader",
+    },
+    loaderSize: {
+      control: "select",
+      options: [undefined, "sm", "md", "lg", "small", "default", "large"],
+      description: "The size variant for the loader",
+    },
+  },
+  args: {
+    useRecursicaLoader: true,
+    loaderVariant: "oval",
+    loaderSize: undefined,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ButtonStoryProps>;
+
+export const Default: Story = {
+  args: {
+    children: "Explore Button",
+    variant: "solid",
+    size: "default",
+    disabled: false,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => {
+    return <Button {...args} />;
+  },
+};
+
+export const SolidDefault: Story = {
+  args: {
+    children: "Solid Default",
+    variant: "solid",
+    size: "default",
+  },
+};
+
+export const OutlineSmall: Story = {
+  args: {
+    children: "Outline Small",
+    variant: "outline",
+    size: "small",
+  },
+};
+
+export const TextWithIcon: Story = {
+  args: {
+    children: "Text With Icon",
+    variant: "text",
+    size: "default",
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <circle cx="11" cy="11" r="8"></circle>
+        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+      </svg>
+    ),
+  },
+};
+
+export const IconOnly: Story = {
+  args: {
+    variant: "solid",
+    size: "default",
+    "aria-label": "Search",
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <circle cx="11" cy="11" r="8"></circle>
+        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+      </svg>
+    ),
+  },
+};
+
+export const LayerOneSolid: Story = {
+  args: {
+    children: "Layer 1 Solid",
+    variant: "solid",
+    size: "default",
+  },
+  render: (args: ButtonStoryProps) => (
+    <Layer layer={1} style={{ padding: "24px" }}>
+      <Button {...args} />
+    </Layer>
+  ),
+};
+
+export const DisabledSolid: Story = {
+  args: {
+    children: "Disabled Solid",
+    variant: "solid",
+    size: "default",
+    disabled: true,
+  },
+};
+
+export const PolymorphicAsLink: Story = {
+  args: {
+    children: "Button as Link",
+    variant: "solid",
+    size: "default",
+    component: "a",
+    href: "https://example.com",
+    target: "_blank",
+  },
+};
+
+export const TruncatedLabel: Story = {
+  args: {
+    children:
+      "This is an exceptionally long button label designed to demonstrate how the component handles text overflow by applying an ellipsis rather than breaking the layout or wrapping to multiple lines.",
+    variant: "solid",
+    size: "default",
+  },
+  render: (args: ButtonStoryProps) => (
+    <div style={{ maxWidth: "250px" }}>
+      <Button {...args} />
+    </div>
+  ),
+};
+
+export const Loading: Story = {
+  args: {
+    children: "Saving Changes",
+    variant: "solid",
+    size: "default",
+    loading: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "When `loading={true}` is applied, the Button injects the Recursica `<Loader />` component. Per Recursica design rules, placing a Button in a loading state automatically forces the `disabled={true}` state on the underlying element. This ensures the button immediately receives the brand theme disabled opacities without relying solely on semantic logic.",
+      },
+    },
+  },
+};