@recursica/adapter-mantine-v8 1.0.0

package/src/components/Modal/Modal.module.css

@@ -0,0 +1,302 @@
+/* Brand-layer exemptions (recursica-allow-brand) — see recursica-token-analyzer README.md.
+ * Close button is styled to match the Button component's text/icon-only variant, so it reuses
+ * the same global hover/focus state tokens Button.module.css exempts.
+ *   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
+ */
+
+.root {
+}
+
+.inner {
+  /* Mantine applies padding to inner to keep modal away from edges. We rely on content constraints. */
+}
+
+.content {
+  /* HARDCODE: Mantine pins content to a fixed flex-basis from its own size scale
+     (`flex: 0 0 var(--modal-size)`, defaulting to 440px). Overriding to `0 1 auto` makes width
+     content-driven (shrink-to-fit) instead of fixed, so min-width/max-width below actually bound
+     it rather than being unreachable dead code. */
+  flex: 0 1 auto;
+
+  /* Geometric Bounds */
+  min-width: var(--recursica_ui-kit_components_modal_properties_min-width);
+  max-width: var(--recursica_ui-kit_components_modal_properties_max-width);
+  min-height: var(--recursica_ui-kit_components_modal_properties_min-height);
+
+  /* Restrict max-height to either the UI Kit max or the viewport bounds to force internal scrolling */
+  max-height: min(
+    var(--recursica_ui-kit_components_modal_properties_max-height),
+    calc(100vh - 4rem)
+  );
+  overflow: hidden;
+
+  /* Box model */
+  border-radius: var(
+    --recursica_ui-kit_components_modal_properties_border-radius
+  );
+  border-width: var(--recursica_ui-kit_components_modal_properties_border-size);
+  border-color: var(
+    --recursica_ui-kit_components_modal_properties_colors_border-color
+  );
+  border-style: solid;
+
+  /* Appearance */
+  background-color: var(
+    --recursica_ui-kit_components_modal_properties_colors_content-background-color
+  );
+  box-shadow: var(--recursica_ui-kit_components_modal_properties_elevation);
+
+  /* Internal Flex container to trap header and let body scroll */
+  display: flex;
+  flex-direction: column;
+}
+
+.content[data-full-screen] {
+  /* HARDCODE: preserve Mantine's native full-screen sizing — the shrink-to-fit override above
+     would otherwise apply here too and stop `fullScreen` from filling the viewport. */
+  flex: 0 0 100%;
+}
+
+.header {
+  display: flex; /* HARDCODE: puts the title and close button side-by-side so the title has a bounded width to truncate against */
+  align-items: center;
+  justify-content: space-between;
+  padding: var(
+      --recursica_ui-kit_components_modal_properties_header-footer-vertical-padding
+    )
+    var(
+      --recursica_ui-kit_components_modal_properties_header-footer-horizontal-padding
+    );
+  background-color: var(
+    --recursica_ui-kit_components_modal_properties_colors_header-background-color
+  );
+}
+
+.title {
+  flex: 1 1 auto; /* HARDCODE: let the title claim the space between the header edge and the close button */
+  min-width: 0; /* HARDCODE: required for text-overflow ellipsis to take effect on a flex child */
+  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;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  color: var(--recursica_ui-kit_components_modal_properties_colors_title);
+
+  /* Direct Figma Typography Mapping */
+  font-family: var(
+    --recursica_ui-kit_components_modal_properties_header-style_fontFamily
+  );
+  font-size: var(
+    --recursica_ui-kit_components_modal_properties_header-style_fontSize
+  );
+  font-style: var(
+    --recursica_ui-kit_components_modal_properties_header-style_fontStyle
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_modal_properties_header-style_fontWeight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_modal_properties_header-style_letterSpacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_modal_properties_header-style_lineHeight
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_modal_properties_header-style_textCase
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_modal_properties_header-style_textDecoration
+  );
+}
+
+.bodyWrapper {
+  /* This is the container that overrides Mantine's native Body. It strips padding and acts as a flex column. */
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  overflow: hidden;
+  min-height: 0; /* Critical for flex child scrolling constraint */
+}
+
+.scrollArea {
+  padding: var(
+      --recursica_ui-kit_components_modal_properties_content-vertical-padding
+    )
+    var(
+      --recursica_ui-kit_components_modal_properties_content-horizontal-padding
+    );
+
+  /* Internal scrolling */
+  flex: 1 1 auto;
+  overflow-y: auto;
+  min-height: 0; /* Critical for flex child scrolling constraint */
+
+  color: var(--recursica_ui-kit_components_modal_properties_colors_content);
+
+  /* Direct Figma Typography Mapping */
+  font-family: var(
+    --recursica_ui-kit_components_modal_properties_content-style_fontFamily
+  );
+  font-size: var(
+    --recursica_ui-kit_components_modal_properties_content-style_fontSize
+  );
+  font-style: var(
+    --recursica_ui-kit_components_modal_properties_content-style_fontStyle
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_modal_properties_content-style_fontWeight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_modal_properties_content-style_letterSpacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_modal_properties_content-style_lineHeight
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_modal_properties_content-style_textCase
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_modal_properties_content-style_textDecoration
+  );
+
+  /* Ensure button gap token is easily usable if developers use standard spacing */
+  --modal-button-gap: var(
+    --recursica_ui-kit_components_modal_properties_button-gap
+  );
+
+  /* Smooth divider transitions */
+  transition: border-color 0.15s ease;
+  border-top: var(
+      --recursica_ui-kit_components_modal_properties_scroll-divider-size
+    )
+    solid transparent;
+  border-bottom: var(
+      --recursica_ui-kit_components_modal_properties_scroll-divider-size
+    )
+    solid transparent;
+}
+
+.scrollArea[data-scrolled-top] {
+  border-top-color: var(
+    --recursica_ui-kit_components_modal_properties_colors_scroll-divider
+  );
+}
+
+.scrollArea[data-scrolled-bottom] {
+  border-bottom-color: var(
+    --recursica_ui-kit_components_modal_properties_colors_scroll-divider
+  );
+}
+
+.footer {
+  padding: var(
+      --recursica_ui-kit_components_modal_properties_header-footer-vertical-padding
+    )
+    var(
+      --recursica_ui-kit_components_modal_properties_header-footer-horizontal-padding
+    );
+  background-color: var(
+    --recursica_ui-kit_components_modal_properties_colors_footer-background-color
+  );
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--recursica_ui-kit_components_modal_properties_button-gap);
+}
+
+.close {
+  /* Matches the Button component's text-variant, icon-only, small-size visual treatment
+     (see Button.module.css) so the modal close control looks like a Recursica Button
+     rather than Mantine's native CloseButton. */
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.2s ease;
+
+  height: var(
+    --recursica_ui-kit_components_button_variants_sizes_small_properties_height
+  );
+  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
+    );
+  border-radius: var(
+    --recursica_ui-kit_components_button_variants_content_icon-only_variants_sizes_small_properties_border-radius
+  );
+
+  border-style: solid;
+  border-width: var(
+    --recursica_ui-kit_components_button_variants_styles_text_properties_border-size
+  );
+  border-color: var(
+    --recursica_ui-kit_components_button_variants_styles_text_properties_colors_border-color
+  );
+  background-color: var(
+    --recursica_ui-kit_components_button_variants_styles_text_properties_colors_background-color
+  );
+  color: var(
+    --recursica_ui-kit_components_button_variants_styles_text_properties_colors_icon-color
+  );
+}
+
+/* Mantine's CloseIcon sets width/height via an inline `style` attribute
+   (`--cb-icon-size`, default 70%), which beats any plain class rule regardless of specificity —
+   same category of override as Tree's `--level-offset` (see Tree/IMPLEMENTATION_NOTES.md).
+   `!important` is required here to land the Button's small icon-size token instead. */
+.close svg {
+  position: relative;
+  z-index: 1;
+  width: var(
+    --recursica_ui-kit_components_button_variants_sizes_small_properties_icon
+  ) !important;
+  height: var(
+    --recursica_ui-kit_components_button_variants_sizes_small_properties_icon
+  ) !important;
+}
+
+.close::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);
+}
+.close:hover:not(:disabled)::after {
+  opacity: var(--recursica_brand_states_hover_opacity);
+}
+
+/* Mantine's own subtle-variant hover background (CloseButton.css) would otherwise show through
+   underneath the overlay above — pin it back to the Button's own background token so only the
+   `::after` overlay renders the hover feedback, matching Button's single-overlay treatment. */
+.close:hover {
+  background-color: var(
+    --recursica_ui-kit_components_button_variants_styles_text_properties_colors_background-color
+  );
+}
+
+.close: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/Modal/Modal.stories.tsx

@@ -0,0 +1,105 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Modal, type ModalProps } from "./Modal";
+import { Button } from "../Button";
+
+const meta: Meta<typeof Modal> = {
+  title: "UI-Kit/Modal",
+  component: Modal,
+  tags: ["autodocs"],
+  argTypes: {
+    opened: { table: { disable: true } },
+    onClose: { table: { disable: true } },
+    defaultChecked: { table: { disable: true } },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Modal>;
+
+const DefaultWrapper = (args: ModalProps) => {
+  // Starts opened so the modal is visible without pressing a button first.
+  const [opened, setOpened] = useState(true);
+  return (
+    <>
+      <Modal {...args} opened={opened} onClose={() => setOpened(false)}>
+        Please log in to continue accessing this feature.
+        <Modal.Footer>
+          <Button variant="outline" onClick={() => setOpened(false)}>
+            Cancel
+          </Button>
+          <Button onClick={() => setOpened(false)}>Confirm</Button>
+        </Modal.Footer>
+      </Modal>
+      <Button onClick={() => setOpened(true)}>Open Modal</Button>
+    </>
+  );
+};
+
+export const Default: Story = {
+  args: {
+    title: "Authentication Required",
+  },
+  render: (args) => <DefaultWrapper {...args} />,
+};
+
+const LongTitleWrapper = (args: ModalProps) => {
+  const [opened, setOpened] = useState(true);
+  return (
+    <>
+      <Modal {...args} opened={opened} onClose={() => setOpened(false)}>
+        The title above is longer than the header can display, so it truncates
+        with an ellipsis instead of wrapping onto a second line.
+        <Modal.Footer>
+          <Button onClick={() => setOpened(false)}>Got it</Button>
+        </Modal.Footer>
+      </Modal>
+      <Button onClick={() => setOpened(true)}>Open Modal</Button>
+    </>
+  );
+};
+
+export const LongTitle: Story = {
+  args: {
+    title:
+      "This Modal Title Is Deliberately Long Enough To Exceed The Available Header Width",
+  },
+  render: (args) => <LongTitleWrapper {...args} />,
+};
+
+const ScrollingWrapper = (args: ModalProps) => {
+  // Starts opened so the modal is visible without pressing a button first.
+  const [opened, setOpened] = useState(true);
+  return (
+    <>
+      <Modal {...args} opened={opened} onClose={() => setOpened(false)}>
+        <p>
+          This modal demonstrates the dynamically injected scroll dividers. When
+          this body content overflows, the borders between the Header and Footer
+          automatically appear to define the scrolling boundary.
+        </p>
+        {Array(20)
+          .fill(0)
+          .map((_, i) => (
+            <p key={i}>Scrolling content block {i + 1}...</p>
+          ))}
+        {/* The new Footer abstraction */}
+        <Modal.Footer>
+          <Button variant="outline" onClick={() => setOpened(false)}>
+            Decline
+          </Button>
+          <Button onClick={() => setOpened(false)}>Accept Terms</Button>
+        </Modal.Footer>
+      </Modal>
+      <Button onClick={() => setOpened(true)}>Open Scrolling Modal</Button>
+    </>
+  );
+};
+
+export const ScrollingContent: Story = {
+  args: {
+    title: "Terms and Conditions",
+  },
+  render: (args) => <ScrollingWrapper {...args} />,
+};

package/src/components/Modal/Modal.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future Modal component tests. Add tests here if/when needed.