@recursica/mantine-adapter 0.14.0 → 0.15.0

package/dist/src/components/Panel/Panel.d.ts

@@ -1,9 +1,17 @@
 import { Drawer as MantineDrawer, DrawerProps as MantineDrawerProps } from '@mantine/core';
 import { RecursicaOverStyled } from '../../utils/filterStylingProps';
+export interface RecursicaPanelProps extends MantineDrawerProps {
+    /**
+     * If true, forces the header text to a single line and truncates with an ellipsis.
+     * Note: While the prop is named `wrapHeaderText` for backward compatibility,
+     * setting it to `true` actually PREVENTS wrapping (it forces truncation).
+     */
+    wrapHeaderText?: boolean;
+}
 /**
  * Recursica Panel root props. Extends Mantine Drawer.
  */
-export type PanelProps = RecursicaOverStyled<MantineDrawerProps>;
+export type PanelProps = RecursicaOverStyled<RecursicaPanelProps>;
 /**
  * Recursica Panel component wrapping Mantine's Drawer.
  *
@@ -31,7 +39,7 @@ export type PanelProps = RecursicaOverStyled<MantineDrawerProps>;
  * - `Panel.Stack` — Stacked drawer context
  */
 declare const PanelBase: {
-    ({ overStyled, position, keepMounted, ...rest }: PanelProps): import("react/jsx-runtime").JSX.Element;
+    ({ overStyled, position, keepMounted, wrapHeaderText, ...rest }: PanelProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export type PanelFooterProps = RecursicaOverStyled<React.HTMLAttributes<HTMLDivElement>>;

package/package.json

@@ -11,7 +11,7 @@
     "type": "git",
     "url": "git+https://github.com/borderux/recursica.git"
   },
-  "version": "0.14.0",
+  "version": "0.15.0",
   "type": "module",
   "main": "./dist/mantine-adapter.cjs",
   "module": "./dist/mantine-adapter.js",

package/src/components/Card/Card.module.css

@@ -33,6 +33,7 @@
   border-bottom: var(--recursica_ui-kit_components_card_properties_divider-size)
     solid
     var(--recursica_ui-kit_components_card_properties_colors_divider-color);
+  composes: recursica_brand_typography_h3 from global;
 }
 
 .footer {

package/src/components/Card/Card.stories.tsx

@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Card } from "./Card";
 import { Layer } from "@recursica/adapter-common";
 import { Button } from "../Button/Button";
+import { Group } from "../Group/Group";
+import { Text } from "../Text/Text";
 
 const meta: Meta<typeof Card> = {
   title: "UI-Kit/Card",
@@ -32,46 +34,33 @@ export const Default: Story = {
   args: {},
   render: ({ ...args }) => {
     return (
-      <Layer
-        layer={0}
+      <div
         style={{
           padding: "48px",
           backgroundColor: "var(--recursica_brand_palettes_neutral_050)",
         }}
       >
-        <Card {...args}>
-          <Card.Header>
-            <span style={{ fontWeight: 500, fontSize: "1.125rem" }}>
-              Customer Activity Report
-            </span>
-          </Card.Header>
-          <Card.Content>
-            <p>
-              Card inner section content body. Notice how this acts as padded
-              content natively based on the overarching properties. Recursica's
-              vertical gutter governs vertical spacing between siblings in the
-              flex container.
-            </p>
-            <p>Another section showing the vertical gutter spacing.</p>
-          </Card.Content>
-          <Card.Footer>
-            <div
-              style={{
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-                marginTop: "16px",
-                marginBottom: "8px",
-              }}
-            >
-              <span style={{ color: "#868e96", fontSize: "0.75rem" }}>
-                Generated today
-              </span>
-              <Button variant="solid">View Details</Button>
-            </div>
-          </Card.Footer>
-        </Card>
-      </Layer>
+        <Layer layer={0}>
+          <Card {...args}>
+            <Card.Header>Customer Activity Report</Card.Header>
+            <Card.Content>
+              <Text>
+                Card inner section content body. Notice how this acts as padded
+                content natively based on the overarching properties.
+                Recursica's vertical gutter governs vertical spacing between
+                siblings in the flex container.
+              </Text>
+              <Text>Another section showing the vertical gutter spacing.</Text>
+            </Card.Content>
+            <Card.Footer>
+              <Group justify="space-between" align="center">
+                <Text variant="caption">Generated today</Text>
+                <Button variant="solid">View Details</Button>
+              </Group>
+            </Card.Footer>
+          </Card>
+        </Layer>
+      </div>
     );
   },
 };
@@ -80,29 +69,26 @@ export const HeaderlessAndFooterless: Story = {
   args: {},
   render: ({ ...args }) => {
     return (
-      <Layer
-        layer={0}
+      <div
         style={{
           padding: "48px",
           backgroundColor: "var(--recursica_brand_palettes_neutral_050)",
         }}
       >
-        <Card {...args}>
-          <Card.Content>
-            <span style={{ fontWeight: 500, fontSize: "1.125rem" }}>
-              Notice
-            </span>
-            <p>
-              This is a completely generic card payload dropping the Header and
-              Footer specific elements, simply acting as a padded elevation
-              boundary box directly mirroring native composability!
-            </p>
-            <Button variant="solid" mt="rec-md">
-              Acknowledge
-            </Button>
-          </Card.Content>
-        </Card>
-      </Layer>
+        <Layer layer={0}>
+          <Card {...args}>
+            <Card.Content>
+              <Text variant="subtitle">Notice</Text>
+              <Text>
+                This is a completely generic card payload dropping the Header
+                and Footer specific elements, simply acting as a padded
+                elevation boundary box directly mirroring native composability!
+              </Text>
+              <Button variant="solid">Acknowledge</Button>
+            </Card.Content>
+          </Card>
+        </Layer>
+      </div>
     );
   },
 };
@@ -122,17 +108,21 @@ export const LayerDemonstration: Story = {
         <Layer layer={1}>
           <Card {...args}>
             <Card.Header>Layer 1 Wrapper</Card.Header>
-            <p>Content inside layer 1 card.</p>
+            <Card.Content>
+              <Text>Content inside layer 1 card.</Text>
+            </Card.Content>
           </Card>
         </Layer>
 
         <Layer layer={2}>
           <Card {...args}>
             <Card.Header>Layer 2 Wrapper</Card.Header>
-            <p>
-              Content inside layer 2 card exposing a higher elevation drop
-              shadow inherently cascaded.
-            </p>
+            <Card.Content>
+              <Text>
+                Content inside layer 2 card exposing a higher elevation drop
+                shadow inherently cascaded.
+              </Text>
+            </Card.Content>
           </Card>
         </Layer>
       </div>

package/src/components/Panel/PANEL_IMPLEMENTATION_NOTES.md

@@ -86,11 +86,11 @@ Mantine's Drawer content does not set `border-style` natively. Without this, the
 
 ---
 
-## 7. header-style Token Reference Bug
+## 7. `header-style` Typography Utility Class
 
-**Decision:** The `header-style: "h3"` token currently outputs as a raw string in the UI kit JSON, breaking our PostCSS compiler when mapped as CSS variable fallbacks. We have explicitly removed these fallbacks.
+**Decision:** The `header-style` token exports as the string `"h3"`, so we use the generated global utility class `.recursica_brand_typography_h3`.
 
-**Implementation:** The design system intended for the `header-style` token to act as a proper typography reference, which would compile into fully expanded properties like `--recursica_ui-kit_components_panel_properties_header-style_fontFamily`. Because the JSON export currently passes it as the raw string `"h3"`, attempting to bind to the non-existent variables breaks the build plugin. Until the JSON export is fixed to compile proper reference nodes, we are stripping typography bindings from the `.title` class and relying purely on `color` and Mantine's defaults.
+**Implementation:** The PostCSS compiler generates `.recursica_brand_typography_<typeName>` classes at the bottom of the scoped variables file to apply full typography definitions without assigning variables inline. We apply this to the `.title` class via `composes: recursica_brand_typography_h3 from global;`.
 
 ---
 

package/src/components/Panel/Panel.module.css

@@ -64,6 +64,17 @@
 
 .title {
   color: var(--recursica_ui-kit_components_panel_properties_colors_title);
+  composes: recursica_brand_typography_h3 from global;
+}
+
+.titleTruncate {
+  composes: title;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  flex: 1;
+  min-width: 0;
 }
 
 /* ======================================

package/src/components/Panel/Panel.stories.tsx

@@ -29,6 +29,11 @@ const meta: Meta = {
       control: "boolean",
       description: "Whether to display the close button in the header.",
     },
+    wrapHeaderText: {
+      control: "boolean",
+      description:
+        "If true, forces the header text to a single line and truncates with an ellipsis.",
+    },
     // Hide auto-detected HTML attributes
     defaultChecked: { table: { disable: true } },
     defaultValue: { table: { disable: true } },
@@ -77,8 +82,9 @@ export const Default: Story = {
     title: "Panel Title",
     withOverlay: true,
     withCloseButton: true,
+    wrapHeaderText: false,
   },
-  render: () => {
+  render: ({ wrapHeaderText, ...args }: PanelStoryArgs) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const [opened, setOpened] = useState(false);
 
@@ -92,6 +98,8 @@ export const Default: Story = {
           onClose={() => setOpened(false)}
           title="Panel Title"
           position="right"
+          wrapHeaderText={wrapHeaderText}
+          {...(args as PanelProps)}
         >
           <Text>
             This is the panel body content area. Panels slide in from the edge
@@ -116,6 +124,7 @@ export const LeftPosition: Story = {
     title: "Navigation",
     withOverlay: true,
     withCloseButton: true,
+    wrapHeaderText: false,
   },
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: ({ withLayer, layer, ...args }: PanelStoryArgs) => {
@@ -148,6 +157,7 @@ export const ScrollableContent: Story = {
     title: "Scrollable Panel",
     withOverlay: true,
     withCloseButton: true,
+    wrapHeaderText: false,
   },
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: ({ withLayer, layer, ...args }: PanelStoryArgs) => {
@@ -190,6 +200,7 @@ export const LongTitle: Story = {
       "This is a ridiculously long panel title designed to test how the header CSS handles text overflow and whether it truncates correctly or breaks the layout",
     withOverlay: true,
     withCloseButton: true,
+    wrapHeaderText: true,
   },
   render: ({ ...args }: PanelStoryArgs) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks

package/src/components/Panel/Panel.tsx

@@ -13,10 +13,19 @@ import styles from "./Panel.module.css";
 // PANEL (Drawer)
 // ============================================================
 
+export interface RecursicaPanelProps extends MantineDrawerProps {
+  /**
+   * If true, forces the header text to a single line and truncates with an ellipsis.
+   * Note: While the prop is named `wrapHeaderText` for backward compatibility,
+   * setting it to `true` actually PREVENTS wrapping (it forces truncation).
+   */
+  wrapHeaderText?: boolean;
+}
+
 /**
  * Recursica Panel root props. Extends Mantine Drawer.
  */
-export type PanelProps = RecursicaOverStyled<MantineDrawerProps>;
+export type PanelProps = RecursicaOverStyled<RecursicaPanelProps>;
 
 /**
  * Recursica Panel component wrapping Mantine's Drawer.
@@ -48,6 +57,7 @@ const PanelBase = function Panel({
   overStyled = false,
   position = "right",
   keepMounted = true,
+  wrapHeaderText = false,
   ...rest
 }: PanelProps) {
   const sanitizedProps = filterStylingProps(rest, overStyled);
@@ -56,7 +66,7 @@ const PanelBase = function Panel({
   const mergedClassNames: Partial<Record<string, string>> = {
     content: styles.content,
     header: styles.header,
-    title: styles.title,
+    title: wrapHeaderText ? styles.titleTruncate : styles.title,
     body: styles.body,
     inner: styles.inner,
   };