@recursica/adapter-mantine-v8 1.3.1 → 1.3.2

package/package.json

@@ -12,7 +12,7 @@
     "type": "git",
     "url": "git+https://github.com/borderux/recursica-adapter-mantine-v8.git"
   },
-  "version": "1.3.1",
+  "version": "1.3.2",
   "publishConfig": {
     "access": "public"
   },
@@ -78,7 +78,7 @@
     "release": "changeset publish"
   },
   "dependencies": {
-    "@recursica/adapter-common": "^1.1.1"
+    "@recursica/adapter-common": "^1.2.0"
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.7",

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

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Card } from "./Card";
 import { Button } from "../Button/Button";
 import { Group } from "../Group/Group";
+import { Heading } from "../Heading/Heading";
 import { Text } from "../Text/Text";
 
 const meta: Meta<typeof Card> = {
@@ -61,7 +62,7 @@ export const HeaderlessAndFooterless: Story = {
     return (
       <Card {...args}>
         <Card.Content>
-          <Text variant="subtitle">Notice</Text>
+          <Heading order={6}>Notice</Heading>
           <Text>
             This is a completely generic card payload dropping the Header and
             Footer specific elements, simply acting as a padded elevation

package/src/components/Text/Text.module.css

@@ -50,3 +50,9 @@
 .root[data-emphasis="low"] {
   opacity: var(--recursica_brand_text-emphasis_low);
 }
+
+/* Dev only (the attribute is never set in production): hides text whose typography variant has no
+   exported style, so a typo is obvious instead of rendering with the UI kit's defaults. */
+.root[data-typography-missing] {
+  visibility: hidden;
+}

package/src/components/Text/Text.stories.tsx

@@ -1,5 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Text } from "./Text";
+import brand from "../../../recursica_brand.json";
+
+const BUILT_IN_VARIANTS = ["body", "caption", "overline"];
+
+// Custom styles defined under `brand.typography` (beyond h1-h6 and the built-ins above); each has
+// an exported `recursica_brand_typography_<name>` class, so `Text` renders it by name.
+// Sorted so the render order is stable across exports (the visual diff depends on it).
+const customVariants = Object.keys(brand.brand.typography)
+  .filter((name) => !/^h[1-6]$/.test(name) && !BUILT_IN_VARIANTS.includes(name))
+  .sort();
 
 const meta: Meta<typeof Text> = {
   title: "UI-Kit/Text",
@@ -16,14 +26,7 @@ const meta: Meta<typeof Text> = {
   argTypes: {
     variant: {
       control: "select",
-      options: [
-        "body",
-        "body-small",
-        "caption",
-        "overline",
-        "subtitle",
-        "subtitle-small",
-      ],
+      options: [...BUILT_IN_VARIANTS, ...customVariants],
       description:
         "Controls the standard logical boundary definitions natively extracted from Figma.",
     },
@@ -62,21 +65,17 @@ export const StaticVariations: Story = {
       <Text variant="body">
         Body (Base paragraph and generic information flow)
       </Text>
-      <Text variant="body-small">
-        Body Small (Compacted list items and helper blocks)
-      </Text>
       <Text variant="caption">
         Caption (Data table descriptions or micro-labels)
       </Text>
       <Text variant="overline">
         Overline (Card contextual pre-headers and categorical tags)
       </Text>
-      <Text variant="subtitle">
-        Subtitle (Minor sub-headers avoiding heavy display weights)
-      </Text>
-      <Text variant="subtitle-small">
-        Subtitle Small (Section anchors deep in hierarchy)
-      </Text>
+      {customVariants.map((name) => (
+        <Text key={name} variant={name}>
+          {name} (Custom style from brand.typography)
+        </Text>
+      ))}
     </div>
   ),
 };

package/src/components/Text/Text.tsx

@@ -10,6 +10,7 @@ import {
 } from "../../utils/filterStylingProps";
 
 import { type RecursicaTextProps } from "@recursica/adapter-common";
+import { isTypographyStyleDefined } from "../../utils/typographyClass";
 import styles from "./Text.module.css";
 
 export type TextProps = RecursicaOverStyled<
@@ -31,6 +32,13 @@ const _Text = forwardRef<HTMLDivElement, TextProps>(function Text(
   const classNameProp = (sanitizedProps as Record<string, unknown>)
     .className as string | undefined;
 
+  // Dev only: an unknown variant hides the text (and logs) instead of silently rendering with the
+  // UI kit's default styling.
+  const typographyMissing =
+    process.env.NODE_ENV !== "production" &&
+    typeof document !== "undefined" &&
+    !isTypographyStyleDefined(variant);
+
   const typographyClass = `recursica_brand_typography_${variant}`;
   const mergedClassName = [typographyClass, styles.root, classNameProp]
     .filter(Boolean)
@@ -45,6 +53,7 @@ const _Text = forwardRef<HTMLDivElement, TextProps>(function Text(
       {...(sanitizedProps as unknown as MantineTextProps)}
       data-color={color}
       data-emphasis={emphasis}
+      data-typography-missing={typographyMissing || undefined}
       className={mergedClassName}
     />
   );

package/src/components/TimePicker/TimePicker.module.css

@@ -58,10 +58,7 @@
   gap: var(--recursica_ui-kit_components_time-picker_properties_icon-text-gap);
   position: relative;
   box-sizing: border-box;
-  /* min-width, not width: the `width` token was authored for a single plain input (confirmed against
-     text-field's identical token shape); this is now only the time-entry half of the composite. */
-  min-width: var(--recursica_ui-kit_components_time-picker_properties_width);
-  width: fit-content;
+  width: var(--recursica_ui-kit_components_time-picker_properties_width);
   /* time-picker has no dedicated min-height token (unlike text-field/date-picker); this global is
      the one text-field's own min-height token resolves to, so both controls land on the same 48px
      height without binding to another component's own namespace. See
@@ -209,27 +206,14 @@
    this only controls its size/alignment within the flex row. */
 .amPmSelect {
   flex: 0 0 auto;
-  width: auto;
-  min-width: 5.5rem;
+  width: var(--recursica_ui-kit_components_time-picker_properties_width);
 }
 
-/* Dropdown.module.css's own .input sets width: 100% (correct for a standalone Dropdown filling
-   its own column) — resetting that to `auto` still isn't enough here: a native <input>'s intrinsic
-   ("auto"/"fit-content") width is a fixed UA default (~20 characters wide), not based on its actual
-   value text, so it doesn't naturally shrink to "AM"/"PM" either way. Give it an explicit small
-   width sized for a couple of characters instead — the wrapper (.amPmSelect, whose own rendered
-   width just follows this input, since Dropdown.module.css's .section icon is positioned
-   absolutely and doesn't add to flex flow) ends up hugging the content as a result. Target
-   Mantine's own stable global class (not the Dropdown.module.css hash, which this module can't
-   reference directly). See TIMEPICKER_IMPLEMENTATION_NOTES.md.
-   Width math (box-sizing: border-box, so padding eats into this number): Dropdown's own
-   horizontal-padding (16px) on the left + the chevron's reserved right-section padding
-   (horizontal-padding + icon-size + icon-text-gap = 16+24+8 = 48px) on the right leaves very
-   little room for the "AM"/"PM" text itself — 2.5rem (40px) put the padding in a negative content
-   box, which is why the value was invisible and the chevron looked jammed against the border. 6rem
-   leaves a real ~32px content area. */
+/* Fill .amPmSelect, which carries the time-picker width token (Dropdown's own .input is
+   otherwise a native input with a fixed UA-default intrinsic width). Target Mantine's stable
+   global class; this module can't reference Dropdown.module.css's hashed class. */
 .amPmSelect :global(.mantine-Select-input) {
-  width: 6rem;
+  width: 100%;
 }
 
 /* -------------------------------------

package/src/utils/typographyClass.ts

@@ -0,0 +1,38 @@
+const found = new Set<string>();
+const reported = new Set<string>();
+
+function ruleListDefines(rules: CSSRuleList, selector: string): boolean {
+  return Array.from(rules).some((rule) => {
+    if (rule instanceof CSSStyleRule) {
+      return rule.selectorText.split(",").some((s) => s.trim() === selector);
+    }
+    const nested = (rule as CSSGroupingRule).cssRules;
+    return nested ? ruleListDefines(nested, selector) : false;
+  });
+}
+
+/**
+ * Dev-only: whether a `.recursica_brand_typography_<name>` rule exists in any readable stylesheet.
+ * Logs a console error once per missing name. Cross-origin stylesheets can't be read and are
+ * skipped, so they never count as defining the class.
+ */
+export function isTypographyStyleDefined(name: string): boolean {
+  const selector = `.recursica_brand_typography_${name}`;
+  if (found.has(selector)) return true;
+  const defined = Array.from(document.styleSheets).some((sheet) => {
+    try {
+      return ruleListDefines(sheet.cssRules, selector);
+    } catch {
+      return false;
+    }
+  });
+  if (defined) {
+    found.add(selector);
+  } else if (!reported.has(selector)) {
+    reported.add(selector);
+    console.error(
+      `Text: no "${selector}" rule found. "${name}" is not defined under brand.typography in the exported Recursica CSS, so the text is hidden.`,
+    );
+  }
+  return defined;
+}