@recursica/adapter-mantine-v8 1.0.0

package/src/components/Switch/SwitchGroup.stories.tsx

@@ -0,0 +1,132 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Switch } from "./Switch";
+import { SwitchGroup } from "./SwitchGroup";
+import { useState } from "react";
+import { formControlArgTypes } from "../../../.storybook/commonArgTypes";
+
+const meta: Meta<typeof SwitchGroup> = {
+  title: "UI-Kit/SwitchGroup",
+  component: SwitchGroup,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+The \`SwitchGroup\` component is the mandatory organizational wrapper for orchestrating \`Switch\` primitives into macro form layouts. It inherently leverages the \`FormControlWrapper\`, granting native access to structural alignments, assistive descriptions, and strict flex arrays.
+
+### Supported Layout Vectors
+- **\`formLayout="stacked"\`**: Top-to-bottom layout cascading the Label bounding box down vertically into a standard stacked switch array.
+- **\`formLayout="side-by-side"\`**: Flow architecture pulling the grouping Label dynamically to the left while structurally organizing the internal switches cleanly alongside it horizontally.
+
+> [!IMPORTANT]  
+> If you require a solitary \`Switch\` field to natively accept an overarching form label, assistive text, or align with other side-by-side components in a form column, you must wrap it inside a \`Switch.Group\` to trigger the \`FormControlWrapper\` mapping.
+`,
+      },
+    },
+  },
+  argTypes: {
+    ...formControlArgTypes,
+    readOnly: {
+      control: "boolean",
+      description:
+        "Passes read-only lock natively down mapping inner switches into explicitly disabled states.",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SwitchGroup>;
+
+export const Default: Story = {
+  args: {
+    formLayout: "stacked",
+    label: "Standard Group",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: function StoryRender({ withLayer, layer, ...args }: any) {
+    const [value, setValue] = useState<string[]>([]);
+    return (
+      <SwitchGroup {...args} value={value} onChange={setValue}>
+        <Switch value="1" label="Option 1" />
+        <Switch value="2" label="Option 2" />
+      </SwitchGroup>
+    );
+  },
+};
+
+export const StackedLayout: Story = {
+  args: {
+    formLayout: "stacked",
+    label: "Notification Settings",
+    description: "Manage your preferences.",
+    assistiveText: "We recommend turning these on.",
+    error: "",
+    required: true,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: function StoryRender({ withLayer, layer, ...args }: any) {
+    const [value, setValue] = useState<string[]>(["email"]);
+    return (
+      <SwitchGroup {...args} value={value} onChange={setValue}>
+        <Switch value="email" label="Email Alerts" />
+        <Switch value="push" label="Push Notifications" />
+        <Switch value="sms" label="SMS Messages" />
+      </SwitchGroup>
+    );
+  },
+};
+
+export const SideBySideLayout: Story = {
+  args: {
+    ...StackedLayout.args,
+    formLayout: "side-by-side",
+    labelSize: "default",
+    labelAlignment: "left",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: function StoryRender({ withLayer, layer, ...args }: any) {
+    const [value, setValue] = useState<string[]>([]);
+    return (
+      <SwitchGroup {...args} value={value} onChange={setValue}>
+        <Switch value="weekly" label="Weekly Digest" />
+        <Switch value="marketing" label="Marketing Emails" />
+      </SwitchGroup>
+    );
+  },
+};
+
+export const SolitaryFormControl: Story = {
+  args: {
+    formLayout: "side-by-side",
+    label: "Enable Backups",
+    description: "Automatically back up your data nightly.",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: function StoryRender({ withLayer, layer, ...args }: any) {
+    const [value, setValue] = useState<string[]>(["auto"]);
+    return (
+      <SwitchGroup {...args} value={value} onChange={setValue}>
+        <Switch value="auto" label="Auto-backup" />
+      </SwitchGroup>
+    );
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    ...StackedLayout.args,
+    readOnly: true,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: function StoryRender({ withLayer, layer, ...args }: any) {
+    const [value, setValue] = useState<string[]>(["email", "sms"]);
+    return (
+      <SwitchGroup {...args} value={value} onChange={setValue}>
+        <Switch value="email" label="Email Alerts" />
+        <Switch value="push" label="Push Notifications" />
+        <Switch value="sms" label="SMS Messages" />
+      </SwitchGroup>
+    );
+  },
+};

package/src/components/Switch/SwitchGroup.tsx

@@ -0,0 +1,127 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { forwardRef } from "react";
+import {
+  Switch as MantineSwitch,
+  type SwitchGroupProps as MantineSwitchGroupProps,
+} from "@mantine/core";
+import { type ReadOnlyControlProps } from "@recursica/adapter-common";
+import {
+  filterStylingProps,
+  omitUnsupportedProps,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/FormControlWrapper";
+import { WithReadOnlyWrapper } from "../ReadOnlyField/WithReadOnlyWrapper";
+import styles from "./Switch.module.css";
+
+import { type RecursicaSwitchGroupProps as BaseRecursicaSwitchGroupProps } from "@recursica/adapter-common";
+
+export interface RecursicaSwitchGroupProps
+  extends Omit<
+      MantineSwitchGroupProps,
+      "size" | "labelProps" | "defaultValue" | "value"
+    >,
+    Omit<
+      RecursicaFormControlWrapperProps,
+      "controlMaxWidth" | "controlMinWidth"
+    >,
+    ReadOnlyControlProps,
+    BaseRecursicaSwitchGroupProps {}
+
+export type SwitchGroupProps = RecursicaOverStyled<RecursicaSwitchGroupProps>;
+
+export const SwitchGroup = forwardRef<HTMLDivElement, SwitchGroupProps>(
+  function SwitchGroup(props, ref) {
+    const {
+      overStyled = false,
+      formLayout = "stacked",
+
+      // Label Wrappers
+      labelSize,
+      labelAlignment,
+      labelOptionalText,
+      labelWithEditIcon,
+      onLabelEditClick,
+
+      // Base Mantine Extracted Attributes
+      label,
+      description,
+      assistiveText,
+      assistiveWithIcon,
+      error,
+      required,
+      withAsterisk,
+      id,
+      className,
+      style,
+      children,
+      readOnly,
+      readOnlyComponent,
+      emptyValueComponent,
+      value,
+      defaultValue,
+      ...rest
+    } = props;
+    // Props this component intentionally doesn't support — deleted at runtime so they can't leak
+    // through even if a caller forces them via plain JavaScript, bypassing the `Omit<>` above.
+    const UNSUPPORTED_PROPS = [
+      "size", // Recursica controls sizing via Switch.module.css variables, not Mantine's native size scale.
+    ] as const satisfies readonly (keyof MantineSwitchGroupProps)[];
+
+    const sanitizedProps = omitUnsupportedProps(
+      filterStylingProps(rest, overStyled) as Record<string, unknown>,
+      UNSUPPORTED_PROPS,
+    ) as Partial<typeof rest>;
+    const restRecord = sanitizedProps as Record<string, unknown>;
+
+    return (
+      <WithReadOnlyWrapper
+        className={className}
+        style={style as React.CSSProperties}
+        // No group-level max-width: switch-item label-max-width (200px) caps a single switch's
+        // own label text, not the whole group — reusing it here made the side-by-side label
+        // column (fixed 224px) wider than its container, so it always wrapped onto its own line.
+        controlMaxWidth={undefined}
+        controlMinWidth={undefined}
+        overStyled={overStyled as true}
+        labelElement="div" // Strictly override. ARIA grouping prohibits interactive switches nested natively inside <label>.
+        formLayout={formLayout}
+        labelSize={labelSize}
+        labelAlignment={labelAlignment}
+        labelOptionalText={labelOptionalText}
+        labelWithEditIcon={labelWithEditIcon}
+        onLabelEditClick={onLabelEditClick}
+        label={label}
+        description={description}
+        assistiveText={assistiveText}
+        assistiveWithIcon={assistiveWithIcon}
+        error={error}
+        required={required}
+        withAsterisk={withAsterisk}
+        id={id}
+        readOnly={readOnly && !!readOnlyComponent}
+        readOnlyComponent={readOnlyComponent}
+        emptyValueComponent={emptyValueComponent}
+        readOnlyType="text"
+        readOnlyValue={value !== undefined ? value : defaultValue}
+        readOnlyNativeProps={props}
+        activeComponent={
+          <MantineSwitch.Group
+            ref={ref}
+            /* Natively bind local disabled lock dynamically */
+            {...(sanitizedProps as unknown as MantineSwitchGroupProps)}
+            disabled={readOnly || (restRecord as any).disabled}
+            value={value}
+            defaultValue={defaultValue}
+          >
+            <div className={styles.groupRoot} data-layout={formLayout}>
+              {children}
+            </div>
+          </MantineSwitch.Group>
+        }
+      />
+    );
+  },
+);
+
+SwitchGroup.displayName = "SwitchGroup";

package/src/components/Switch/USAGE.md

@@ -0,0 +1,42 @@
+# Switch - Usage Guide
+
+This document describes how to integrate and use the `Switch` component in your projects using `@recursica/adapter-mantine-v8`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Switch } from "@recursica/adapter-mantine-v8";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { Switch } from "@recursica/adapter-mantine-v8";
+
+export default function Demo() {
+  return <Switch label="Enable notifications" defaultChecked />;
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/adapter-mantine-v8` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **No Direct Layers**: Do not pass a `layer` prop to this component. To place it on a specific visual layer, wrap it in a `<Layer layer={0|1|2|3}>` component natively.
+> - **Variables and Theming**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.
+
+---
+
+## 4. Key Integration Features & Constraints
+
+The `size`, `color`, and `radius` props are not available on this component, since appearance is fully controlled by the design system tokens. When `readOnly` is set, the switch renders as a read-only label instead of an interactive control. There is currently no distinct hover color for the track; it falls back to the standard unselected background.

package/src/components/Table/TABLE_IMPLEMENTATION_NOTES.md

@@ -0,0 +1,78 @@
+# Table — Implementation Notes (Internal)
+
+## Background
+
+Table.module.css already had full CSS for header/cell/footer sorted, disabled, currency, and
+selected states, keyed off `data-sorted`/`data-disabled`/`data-currency`/`data-selected`
+attributes — but nothing in Table.tsx ever set those attributes, so the states were unreachable
+and their tokens showed as "unused" in the token analyzer. This pass adds the props that
+actually set them; it does not add any new CSS selectors for those states.
+
+## Why not the 4-component split from the Forge reference implementation
+
+Forge's Mantine Table reference (reviewed 2026-08-22) splits `Table`/`TableHeader`/`TableCell`/
+`TableFooter` into four separate top-level components, each computing CSS custom properties in
+JS and injecting them via inline `style`. We deliberately did not port that:
+
+- It bypasses `filterStylingProps`/`overStyled` and computes styling values in TSX instead of
+  referencing tokens directly in the CSS module — both are hard "no" per
+  `adapter-common/docs/COMPONENT_DEV_GUIDE.md` (§1 "No custom properties set from TSX for
+  styling", §3.1 `overStyled`/`filterStylingProps`).
+- It uses a `layer`-scoped token naming convention (`properties_colors_layer-0_...`) that
+  doesn't exist in this repo's tokens and isn't the sanctioned way to handle layers here (layer
+  is set only by wrapping in `<Layer>`, never a component prop — see the canonical guide's
+  "Layers" section).
+- Per direction from Matt (2026-08-22): keep the existing dot-notation composition
+  (`Table.Th`/`Table.Td`/`Table.Tr`/`Table.Tfoot`/etc., mirroring Mantine's own API) rather than
+  introducing new component names — "align with the underlying UI-kit's components, but style
+  with Recursica."
+
+Instead, `Table.Th`/`Table.Td`/`Table.Tr` gained real Recursica props (`sorted`, `disabled`,
+`variant`, `selected`) that set `data-*` attributes on themselves, activating the CSS that was
+already there.
+
+## Footer cells reuse `Table.Td`, not a new component
+
+There's no separate "footer cell" component. A `Table.Td` nested inside `Table.Tfoot` picks up
+the footer-specific CSS automatically via the existing `.root tfoot td` structural selector in
+Table.module.css — `variant="currency"` and `disabled` work identically whether the `Table.Td`
+is in `Table.Tbody` or `Table.Tfoot`.
+
+## Sort icon is rendered by `Table.Th` itself, not composed by the consumer
+
+Mantine's `Table` has no sortable-header primitive (unlike MUI's `TableSortLabel`), so
+`Table.Th` renders its own chevron (`Table.icons.tsx`, plain inline SVGs — no icon package
+dependency, same convention as `DatePicker.icons.tsx`) when `sorted` is `"asc"`/`"desc"`, sized
+via the existing `.sortIcon` CSS rule. Also sets `aria-sort` for accessibility (Mantine doesn't
+set this itself). This is intentionally asymmetric with `mui-adapter`, where sorting is composed
+via `Table.SortLabel` instead — see that adapter's own implementation notes.
+
+## Selectable rows (checkboxes)
+
+Neither Mantine's `Table` nor `@mui/material`'s `Table` has a built-in checkbox-driven row
+selection feature (confirmed 2026-08-22 — MUI's own docs treat it as a compose-it-yourself
+recipe with a plain `Checkbox`; the only MUI product with built-in selection is
+`@mui/x-data-grid`, not installed here). `Table.Tr`'s `selected` prop only controls the
+selected-row background/token state; wiring an actual checkbox column is a separate,
+not-yet-scoped ask.
+
+## Currency alignment on header/footer reuses the table-cell token
+
+`--recursica_ui-kit_components_table-cell_properties_currency-style_text-align` (`right`) is the
+only currency-style text-align token the UI Kit exports — there's no
+`table-header_properties_currency-style_*` block at all, and the
+`table-footer_properties_currency-style_*` block skips `text-align` specifically. `Table.module.css`
+reuses the table-cell token for both `thead th[data-currency="true"]` and
+`tfoot td[data-currency="true"]` so header/footer currency cells stay right-aligned in step with
+the body. `Table.Th` gained a `variant` prop (mirroring `Table.Td`) to set `data-currency` since
+header cells had no way to opt into this before.
+
+## Deliberately not changed
+
+- **No wrapper divs** — Forge wraps the table in two divs to get a scrollable bordered
+  container. The canonical guide forbids wrapper divs; `Table.ScrollContainer` (already wraps
+  Mantine's own `Table.ScrollContainer`) is the sanctioned way to get a scrolling table.
+- **Hover compositing, striping direction/row parity, row-padding semantics** — Forge diverges
+  from our current CSS on these (see the 2026-08-22 review), but none of them are confirmed
+  bugs vs. intentional design choices already baked into Figma's tokens. Left as-is; flag to
+  design if a change is wanted.

package/src/components/Table/Table.icons.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+/**
+ * Sort-direction indicators for `Table.Th`. Sized/colored entirely via the `.sortIcon` rule in
+ * Table.module.css (currentColor + the header's own text-color token) — no width/height/color
+ * hardcoded here on purpose, same convention as DatePicker.icons.tsx.
+ */
+export function ChevronUpIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden
+      {...props}
+    >
+      <polyline points="18 15 12 9 6 15" />
+    </svg>
+  );
+}
+
+export function ChevronDownIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden
+      {...props}
+    >
+      <polyline points="6 9 12 15 18 9" />
+    </svg>
+  );
+}