@recursica/mantine-adapter 0.22.0 → 0.23.0

package/src/components/DatePicker/DatePicker.tsx

@@ -1,7 +1,168 @@
-import React from "react";
+import React, { forwardRef } from "react";
+import { DatePickerInput, type DatePickerInputProps } from "@mantine/dates";
+import { type ReadOnlyControlProps } from "@recursica/adapter-common";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+import { type RecursicaFormControlWrapperProps } from "../FormControlWrapper/FormControlWrapper";
+import { WithReadOnlyWrapper } from "../ReadOnlyField/WithReadOnlyWrapper";
+import styles from "./DatePicker.module.css";
 
-export type DatePickerProps = React.HTMLAttributes<HTMLDivElement>;
+export interface RecursicaDatePickerProps
+  extends Omit<
+      DatePickerInputProps,
+      | "size"
+      | "variant"
+      | "radius"
+      | "wrapperProps"
+      | "label"
+      | "error"
+      | "required"
+      | "withAsterisk"
+      | "id"
+      | "description"
+    >,
+    Pick<
+      DatePickerInputProps,
+      "label" | "error" | "required" | "withAsterisk" | "id"
+    >,
+    Omit<
+      RecursicaFormControlWrapperProps,
+      "controlMaxWidth" | "controlMinWidth"
+    >,
+    ReadOnlyControlProps {}
 
-export const DatePicker: React.FC<DatePickerProps> = (props) => {
-  return <div {...props}>DatePicker</div>;
-};
+export type DatePickerProps = RecursicaOverStyled<RecursicaDatePickerProps>;
+
+export const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
+  function DatePicker(props, ref) {
+    const {
+      overStyled = false,
+      formLayout = "stacked",
+
+      // Label & Wrapper Maps
+      labelSize,
+      labelAlignment,
+      labelOptionalText,
+      labelWithEditIcon,
+      onLabelEditClick,
+
+      label,
+      assistiveText,
+      assistiveWithIcon,
+      error,
+      required,
+      withAsterisk,
+      id,
+      className,
+      style,
+      disabled,
+      readOnly,
+      readOnlyComponent,
+      emptyValueComponent,
+      value,
+      defaultValue,
+      ...rest
+    } = props;
+
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    const restRecord = sanitizedProps as Record<string, unknown>;
+
+    // Delete prohibited sizing hooks from bypassing variables natively
+    delete restRecord["size"];
+    delete restRecord["variant"];
+    delete restRecord["radius"];
+    delete restRecord["description"]; // Managed by FormControlWrapper via assistiveText
+
+    // Securely map core native blocks down ensuring nested CSS modules map precisely
+    const mergedClassNames: Partial<Record<string, string>> = {
+      wrapper: styles.root, // The nested Input internal relative wrapper bounding box
+      input: styles.input,
+      section: styles.section,
+      dropdown: styles.dropdown,
+      day: styles.day,
+      calendarHeader: styles.calendarHeader,
+    };
+
+    const classNamesProp = restRecord.classNames;
+    if (
+      classNamesProp &&
+      typeof classNamesProp === "object" &&
+      !Array.isArray(classNamesProp)
+    ) {
+      const o = classNamesProp as Partial<Record<string, string>>;
+      mergedClassNames.wrapper = o.wrapper
+        ? `${styles.root} ${o.wrapper}`
+        : styles.root;
+      mergedClassNames.input = o.input
+        ? `${styles.input} ${o.input}`
+        : styles.input;
+      mergedClassNames.section = o.section
+        ? `${styles.section} ${o.section}`
+        : styles.section;
+    }
+
+    const wrapperClass = className
+      ? `${styles.layoutOverride} ${className}`
+      : styles.layoutOverride;
+
+    return (
+      <WithReadOnlyWrapper
+        className={wrapperClass}
+        style={style as React.CSSProperties}
+        controlMaxWidth={undefined}
+        controlMinWidth={undefined}
+        overStyled={overStyled as true}
+        formLayout={formLayout}
+        labelSize={labelSize}
+        labelAlignment={labelAlignment}
+        labelOptionalText={labelOptionalText}
+        labelWithEditIcon={labelWithEditIcon}
+        onLabelEditClick={onLabelEditClick}
+        label={label}
+        assistiveText={assistiveText}
+        assistiveWithIcon={assistiveWithIcon}
+        error={error}
+        required={required}
+        withAsterisk={withAsterisk}
+        id={id}
+        readOnly={readOnly}
+        readOnlyComponent={readOnlyComponent}
+        emptyValueComponent={emptyValueComponent}
+        readOnlyType="text"
+        readOnlyValue={
+          value !== undefined
+            ? String(value)
+            : defaultValue
+              ? String(defaultValue)
+              : undefined
+        }
+        readOnlyNativeProps={props}
+        activeComponent={
+          /* Naked Input execution safely decoupled from Mantine's macro Input.Wrapper DOM hooks */
+          <DatePickerInput
+            ref={ref}
+            classNames={mergedClassNames}
+            disabled={disabled}
+            // @ts-expect-error Mantine 8 DatePickerInput types are overly complex for unified wrappers
+            value={value}
+            // @ts-expect-error Mantine 8 DatePickerInput types are overly complex for unified wrappers
+            defaultValue={defaultValue}
+            label={undefined} // Disable Mantine's native label
+            description={undefined} // Disable Mantine's native description
+            error={undefined} // Disable Mantine's native error text (handled by wrapper)
+            withAsterisk={false} // Handled by wrapper
+            wrapperProps={{
+              "data-disabled": disabled ? "true" : undefined,
+              "data-error": error ? "true" : undefined,
+            }}
+            {...(sanitizedProps as unknown as DatePickerInputProps)}
+          />
+        }
+      />
+    );
+  },
+);
+
+DatePicker.displayName = "DatePicker";

package/src/components/FormControlWrapper/FormControlWrapper.module.css

@@ -64,6 +64,7 @@
   --form-field-vertical-padding: var(
     --recursica_ui-kit_globals_form_field_size_vertical-padding
   );
+  color: var(--form-field-text-valued);
 }
 
 .inputSection {

package/src/components/Loader/LOADER_IMPLEMENTATION_NOTES.md

@@ -17,8 +17,7 @@ Mantine natively sets sizing dynamically at the component root and parses thickn
 
 #### Specific CSS Targeting Hacks Used
 
-- `border-width` structurally styles the `thickness` configuration of the `oval` variant by resolving `--recursica_ui-kit_components_loader_variants_sizes_..._properties_thickness`.
-- For non-oval variants, `border-radius` natively maps downwards to targeting component `span` children within the wrapper to capture `<span className="mantine-Loader-dot" />` geometries safely without polluting the flex wrapper natively.
+- `border-width` and `border-radius` structurally style the `thickness` and `border-radius` configuration of the `oval` variant on the `::after` pseudo-element by resolving `--recursica_ui-kit_components_loader_variants_sizes_..._properties_thickness` and `_border-radius`.
 
 ### Unsupported Properties
 

package/src/components/Loader/Loader.module.css

@@ -14,12 +14,10 @@
     --recursica_ui-kit_components_loader_variants_sizes_small_properties_size
   );
 }
-.root[data-size="small"][data-variant="oval"] {
+.root[data-size="small"][data-variant="oval"]::after {
   border-width: var(
     --recursica_ui-kit_components_loader_variants_sizes_small_properties_thickness
   );
-}
-.root[data-size="small"]:not([data-variant="oval"]) span {
   border-radius: var(
     --recursica_ui-kit_components_loader_variants_sizes_small_properties_border-radius
   );
@@ -31,12 +29,10 @@
     --recursica_ui-kit_components_loader_variants_sizes_default_properties_size
   );
 }
-.root[data-size="default"][data-variant="oval"] {
+.root[data-size="default"][data-variant="oval"]::after {
   border-width: var(
     --recursica_ui-kit_components_loader_variants_sizes_default_properties_thickness
   );
-}
-.root[data-size="default"]:not([data-variant="oval"]) span {
   border-radius: var(
     --recursica_ui-kit_components_loader_variants_sizes_default_properties_border-radius
   );
@@ -48,12 +44,10 @@
     --recursica_ui-kit_components_loader_variants_sizes_large_properties_size
   );
 }
-.root[data-size="large"][data-variant="oval"] {
+.root[data-size="large"][data-variant="oval"]::after {
   border-width: var(
     --recursica_ui-kit_components_loader_variants_sizes_large_properties_thickness
   );
-}
-.root[data-size="large"]:not([data-variant="oval"]) span {
   border-radius: var(
     --recursica_ui-kit_components_loader_variants_sizes_large_properties_border-radius
   );

package/src/components/Slider/IMPLEMENTATION_NOTES.md

@@ -0,0 +1,49 @@
+# Slider Implementation Notes
+
+This document contains specific design decisions, architectural constraints, and hacks required to bridge the Recursica design system with Mantine's underlying `Slider` primitive.
+
+## 1. Bidirectional State Synchronization
+
+**Decision:** Maintain a highly responsive, bidirectional connection between the sliding track value and the adjacent numeric text input.
+**Implementation:**
+
+- The slider track requires a clean `number` state, whereas the text box requires a `string` state (`inputValue`) to allow typing intermediate characters like decimals (`2.`), negative signs (`-`), or empty text without breaking standard React input binding.
+- A `useEffect` hook continuously feeds the outer numeric state changes back into the text input value as a string representation.
+- Input changes instantly parsed as float clamp bounds securely. On blur (`onBlur`), the input state is automatically sanitized and reset to the clean, clamped string representation of the final track value.
+
+## 2. Outer Form Control Wrapper Integration
+
+**Decision:** Bypass Mantine's native `Input.Wrapper` and `label` properties.
+**Implementation:**
+
+- Universal form wrappers like `<FormControlWrapper>` and `<WithReadOnlyWrapper>` handle the outer layout architecture, including labels, assistive text, error states, and optional edit-triggering fields.
+- Therefore, we map the outer form label directly to the `label` property of the `Slider` (delegated to the wrapper), and rename Mantine's internal dragging tooltip label property to `tooltipLabel`.
+
+## 3. Custom Min-Max Labels and Step Indicators
+
+**Decision:** Enforce rigid typography tokens on lower bounds and custom mark indicators.
+**Implementation:**
+
+- Mantine's native mark and step structures are fully styles-mapped back to our scoped variables in `Slider.module.css`.
+- Min and Max numeric guides are rendered directly to the left and right of the slider track, centered vertically and spaced automatically using standard input gaps, while dynamically fetching custom typography tokens for min-max labels to avoid hardcoded formatting constraints.
+
+## 4. Visual Overrides for Stacked and Side-by-Side Spacing
+
+**Decision:** Enforce layout margins dynamically based on container orientation parameters.
+**Implementation:**
+
+- Using custom layouts (e.g. `stacked` and `side-by-side`), we override the margins by assigning the component-specific Figma spacing variables to the unified `--form-control-margin-bottom` property.
+
+## 5. Right-Aligned Floating Current Value
+
+**Decision:** Position the current active value of the slider directly above the max guide (or right-side element) on the right side of the track.
+**Implementation:**
+
+- Wrap the max guide element in a relative layout container (`.rightGuideContainer`) to provide a positioning anchor.
+- Place the active value element (`.currentValue`) inside `.rightGuideContainer` and position it absolutely (`bottom: calc(100% + var(--recursica_ui-kit_globals_form_properties_label-field-gap-vertical, 8px))`, `right: 0`).
+- This absolute positioning strategy guarantees that the active value floats cleanly above the track's right side, while aligning it vertically on the Y-axis to sit in perfect baseline alignment with the component's left-aligned form label.
+- Set typography using the Figma-aligned component-specific read-only value variables (`--recursica_ui-kit_components_slider_properties_read-only-value_...`).
+- Allow the text color of both the floating current value (`.currentValue`) and the component's read-only value (`.readOnlyValue`) to naturally inherit from their parent states/form globals, automatically supporting default (`--form-field-text-valued`), disabled (`--form-field-disabled-text`), and error colors without explicit color overrides, matching the min/max guides.
+- If `showInput` is enabled, the floating `.currentValue` is hidden since the active value is already displayed and editable within the adjacent numeric text input, avoiding visual redundancy.
+- In `side-by-side` form layouts, the `.currentValue` is positioned inline (static positioning) to the right of the max label rather than floating above it, centered vertically with the max label and aligned right to the container. This uses CSS flexbox ordering (`order: 2` for `.currentValue` and `order: 1` for `.minMaxGuide`) to visually swap their positions while preserving clean, semantic DOM ordering.
+- To ensure perfect, pixel-perfect vertical track alignment between sliders that show numeric text inputs (`showInput={true}`) and sliders that display the active inline value (`showInput={false}`), the `.currentValue` element is globally given a width equal to the input width (`var(--recursica_ui-kit_components_slider_properties_input-width)`) and right-aligned (`text-align: right`). In `side-by-side` layouts, `.rightGuideContainer`'s flex gap is also matched to the horizontal input-to-track gap (`var(--recursica_ui-kit_components_slider_properties_input-gap)`), making the horizontal space occupied by the rightmost elements exactly identical in both component modes.