@recursica/mui-adapter 0.4.0 → 0.6.0

package/src/components/NumberInput/NumberInput.module.css

@@ -0,0 +1,281 @@
+/* EXEMPTIONS:
+   - state-specific border-size variables are ignored because the input box uses a uniform static boundary to prevent 
+     unexpected layout shifts or flickering when switching between active, focused, or error states. */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_default_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_disabled_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_error_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_number-input_variants_states_focus_properties_border-size */
+
+/* LAYOUT SPACING OVERRIDES:
+   - Sets the --form-control-margin-bottom spacing hook to map component-specific layout tokens. */
+.layoutOverride {
+  --form-control-margin-bottom: var(
+    --recursica_ui-kit_components_number-input_variants_layouts_stacked_properties_top-bottom-margin
+  );
+}
+
+.layoutOverride[data-form-layout="side-by-side"] {
+  --form-control-margin-bottom: var(
+    --recursica_ui-kit_components_number-input_variants_layouts_side-by-side_properties_top-bottom-margin
+  );
+}
+
+/* HARDCODED VALUES:
+   - border-width: 1px. Native geometric boundary for the input box.
+   - border-style: solid. Native structural rendering rule.
+   - outline: none. Bypassing browser focus rings to rely strictly on Recursica focus states natively.
+   - flex/layout: display: flex on the root wrapper safely encapsulating internal section rendering.
+   - Controls: Hardcoded to bypass Mantine's default borders and backgrounds on the increment/decrement arrows.
+*/
+
+.root {
+  display: flex;
+  position: relative;
+  width: 100%;
+  min-height: var(
+    --recursica_ui-kit_components_number-input_properties_min-height
+  );
+
+  /* Override Mantine native Input variables governing section spacing padding mathematics safely */
+  --input-left-section-size: calc(
+    var(
+        --recursica_ui-kit_components_number-input_properties_horizontal-padding
+      ) +
+      var(--recursica_ui-kit_components_number-input_properties_icon-size) +
+      var(--recursica_ui-kit_components_number-input_properties_icon-text-gap)
+  );
+  --input-right-section-size: calc(
+    var(
+        --recursica_ui-kit_components_number-input_properties_horizontal-padding
+      ) +
+      var(--recursica_ui-kit_components_number-input_properties_icon-size) +
+      var(--recursica_ui-kit_components_number-input_properties_icon-text-gap)
+  );
+}
+
+.input {
+  /* Structural Overrides */
+  width: 100%;
+  box-sizing: border-box;
+  margin: 0;
+
+  /* Box Geometry */
+  min-height: var(
+    --recursica_ui-kit_components_number-input_properties_min-height
+  );
+  padding-top: var(
+    --recursica_ui-kit_components_number-input_properties_vertical-padding
+  );
+  padding-bottom: var(
+    --recursica_ui-kit_components_number-input_properties_vertical-padding
+  );
+  padding-left: var(
+    --recursica_ui-kit_components_number-input_properties_horizontal-padding
+  );
+  padding-right: var(
+    --recursica_ui-kit_components_number-input_properties_horizontal-padding
+  );
+  border-radius: var(
+    --recursica_ui-kit_components_number-input_properties_border-radius
+  );
+  border-width: 1px;
+  border-style: solid;
+
+  /* Strict Typography Unification */
+  font-family: var(
+    --recursica_ui-kit_components_number-input_properties_text_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_number-input_properties_text_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_number-input_properties_text_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_number-input_properties_text_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_number-input_properties_text_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_number-input_properties_text_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_number-input_properties_text_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_number-input_properties_text_text-transform
+  );
+
+  /* Base State Default Execution */
+  background-color: var(
+    --recursica_ui-kit_components_number-input_variants_states_default_properties_colors_background
+  );
+  border-color: var(
+    --recursica_ui-kit_components_number-input_variants_states_default_properties_colors_border-color
+  );
+  color: var(
+    --recursica_ui-kit_components_number-input_variants_states_default_properties_colors_text
+  );
+
+  outline: none;
+}
+
+.input::placeholder {
+  opacity: var(
+    --recursica_ui-kit_components_number-input_properties_placeholder-opacity
+  );
+  color: inherit;
+}
+
+/* Dynamic Padding Overrides */
+.root[data-with-left-section] .input {
+  padding-left: var(--input-left-section-size);
+}
+
+.root[data-with-right-section] .input {
+  padding-right: var(--input-right-section-size);
+}
+
+/* Flexible End-Caps (Icons, actions) */
+.section {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.section[data-position="left"] {
+  justify-content: flex-start;
+  padding-left: var(
+    --recursica_ui-kit_components_number-input_properties_horizontal-padding
+  );
+}
+
+.section[data-position="right"] {
+  justify-content: flex-end;
+  padding-right: var(
+    --recursica_ui-kit_components_number-input_properties_horizontal-padding
+  );
+}
+
+.section :global(svg) {
+  width: var(--recursica_ui-kit_components_number-input_properties_icon-size);
+  height: var(--recursica_ui-kit_components_number-input_properties_icon-size);
+  color: var(
+    --recursica_ui-kit_components_number-input_variants_states_default_properties_colors_leading-icon
+  );
+}
+
+.section[data-position="right"] :global(svg) {
+  color: var(
+    --recursica_ui-kit_components_number-input_variants_states_default_properties_colors_trailing-icon
+  );
+}
+
+/* -------------------------------------
+   CONTROLS (Mantine Specific Up/Down Arrows)
+-------------------------------------- */
+
+.controls {
+  /* Adjust right padding so controls do not overlap borders */
+  padding-right: var(
+    --recursica_ui-kit_components_number-input_properties_horizontal-padding
+  );
+}
+
+.control {
+  /* Override Mantine borders for the inner controls */
+  border: none;
+  background: transparent;
+  color: var(
+    --recursica_ui-kit_components_number-input_variants_states_default_properties_colors_trailing-icon
+  );
+}
+
+.control:hover {
+  background: transparent;
+}
+
+/* -------------------------------------
+   STATE CASCADE ARCHITECTURE
+-------------------------------------- */
+
+/* Focus State Mapping (Triggered internally via browser pseudo-pseudo-class) */
+.input:focus-within,
+.input:focus {
+  border-color: var(
+    --recursica_ui-kit_components_number-input_variants_states_focus_properties_colors_border-color
+  );
+  background-color: var(
+    --recursica_ui-kit_components_number-input_variants_states_focus_properties_colors_background
+  );
+  color: var(
+    --recursica_ui-kit_components_number-input_variants_states_focus_properties_colors_text
+  );
+}
+
+.root:focus-within .section[data-position="left"] :global(svg) {
+  color: var(
+    --recursica_ui-kit_components_number-input_variants_states_focus_properties_colors_leading-icon
+  );
+}
+
+.root:focus-within .section[data-position="right"] :global(svg),
+.root:focus-within .control {
+  color: var(
+    --recursica_ui-kit_components_number-input_variants_states_focus_properties_colors_trailing-icon
+  );
+}
+
+/* Error State Mapping (Propagated strictly down from the wrapper DOM context) */
+.root[data-error] .input {
+  border-color: var(
+    --recursica_ui-kit_components_number-input_variants_states_error_properties_colors_border-color
+  ) !important;
+  background-color: var(
+    --recursica_ui-kit_components_number-input_variants_states_error_properties_colors_background
+  ) !important;
+  color: var(
+    --recursica_ui-kit_components_number-input_variants_states_error_properties_colors_text
+  ) !important;
+}
+
+.root[data-error] .section[data-position="left"] :global(svg) {
+  color: var(
+    --recursica_ui-kit_components_number-input_variants_states_error_properties_colors_leading-icon
+  ) !important;
+}
+
+.root[data-error] .section[data-position="right"] :global(svg),
+.root[data-error] .control {
+  color: var(
+    --recursica_ui-kit_components_number-input_variants_states_error_properties_colors_trailing-icon
+  ) !important;
+}
+
+/* Disabled State Mapping (Propagated strictly down from the wrapper DOM context) */
+.root[data-disabled] .input {
+  border-color: var(
+    --recursica_ui-kit_components_number-input_variants_states_disabled_properties_colors_border-color
+  ) !important;
+  background-color: var(
+    --recursica_ui-kit_components_number-input_variants_states_disabled_properties_colors_background
+  ) !important;
+  color: var(
+    --recursica_ui-kit_components_number-input_variants_states_disabled_properties_colors_text
+  ) !important;
+  cursor: not-allowed;
+}
+
+.root[data-disabled] .section[data-position="left"] :global(svg) {
+  color: var(
+    --recursica_ui-kit_components_number-input_variants_states_disabled_properties_colors_leading-icon
+  ) !important;
+}
+
+.root[data-disabled] .section[data-position="right"] :global(svg),
+.root[data-disabled] .control {
+  color: var(
+    --recursica_ui-kit_components_number-input_variants_states_disabled_properties_colors_trailing-icon
+  ) !important;
+}

package/src/components/NumberInput/NumberInput.stories.tsx

@@ -1,35 +1,98 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { NumberInput } from "./NumberInput";
-import { ComingSoon } from "@recursica/storybook-template";
 
 const meta: Meta<typeof NumberInput> = {
-  title: "UI-Kit/🚧 NumberInput",
+  title: "UI-Kit/NumberInput",
   component: NumberInput,
   tags: ["autodocs"],
-  parameters: {
-    controls: {
-      include: [
-        "layer",
-        "withLayer",
-        "children",
-        "component",
-        "variant",
-        "size",
-        "icon",
-        "disabled",
-        "href",
-        "onClick",
-        "onChange",
-        "value",
-        "checked",
-      ],
+  argTypes: {
+    label: { control: "text" },
+    assistiveText: { control: "text" },
+    disabled: { control: "boolean" },
+    error: { control: "boolean" },
+    readOnly: { control: "boolean" },
+    required: { control: "boolean" },
+    hideControls: { control: "boolean" },
+    formLayout: {
+      control: "select",
+      options: ["stacked", "side-by-side"],
     },
+    labelSize: {
+      control: "select",
+      options: ["small", "default", "large"],
+    },
+    checked: { table: { disable: true } },
+    defaultChecked: { table: { disable: true } },
+    assistiveWithIcon: { table: { disable: true } },
+    labelOptionalText: { table: { disable: true } },
+    labelWithEditIcon: { table: { disable: true } },
+    onLabelEditClick: { table: { disable: true } },
+    emptyValueComponent: { table: { disable: true } },
   },
 };
 
 export default meta;
+
 type Story = StoryObj<typeof NumberInput>;
 
 export const Default: Story = {
-  render: () => <ComingSoon componentName="NumberInput" />,
+  args: {
+    label: "Amount",
+    placeholder: "Enter an amount",
+    assistiveText: "Must be greater than 0",
+    defaultValue: 10,
+    min: 0,
+    max: 100,
+  },
+};
+
+export const SideBySideLayout: Story = {
+  args: {
+    ...Default.args,
+    formLayout: "side-by-side",
+  },
+};
+
+export const States: Story = {
+  render: () => (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "1rem",
+        maxWidth: 400,
+      }}
+    >
+      <NumberInput label="Default" placeholder="Enter a number" />
+      <NumberInput label="Disabled" placeholder="Disabled input" disabled />
+      <NumberInput label="Error" placeholder="Error state" error />
+      <NumberInput label="Read Only" value={42} readOnly />
+      <NumberInput label="Required" required />
+    </div>
+  ),
+};
+
+export const WithLeftIcon: Story = {
+  args: {
+    label: "Price",
+    placeholder: "0.00",
+    leftSection: <span>$</span>,
+  },
+};
+
+export const WithRightIcon: Story = {
+  args: {
+    label: "Percentage",
+    placeholder: "0",
+    rightSection: <span>%</span>,
+    hideControls: true, // Typically hiding controls if rightSection is occupied
+  },
+};
+
+export const HiddenControls: Story = {
+  args: {
+    label: "Zip Code",
+    placeholder: "Enter zip code",
+    hideControls: true,
+  },
 };

package/src/components/NumberInput/NumberInput.tsx

@@ -1,7 +1,150 @@
-import React from "react";
+import React, { forwardRef } from "react";
+import {
+  TextField as MuiNumberInput,
+  type TextFieldProps as MuiNumberInputProps,
+} from "@mui/material";
+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 "./NumberInput.module.css";
 
-export type NumberInputProps = React.HTMLAttributes<HTMLDivElement>;
+export interface RecursicaNumberInputProps
+  extends Omit<
+      MuiNumberInputProps,
+      "size" | "variant" | "radius" | "wrapperProps" | "classNames" | "styles"
+    >,
+    Pick<
+      RecursicaFormControlWrapperProps,
+      | "assistiveText"
+      | "assistiveWithIcon"
+      | "formLayout"
+      | "labelSize"
+      | "labelAlignment"
+      | "labelOptionalText"
+      | "labelWithEditIcon"
+      | "onLabelEditClick"
+    >,
+    ReadOnlyControlProps {
+  /** Enables/disables the controls to increment and decrement the value */
+  hideControls?: boolean;
+}
 
-export const NumberInput: React.FC<NumberInputProps> = (props) => {
-  return <div {...props}>NumberInput</div>;
-};
+export type NumberInputProps = RecursicaOverStyled<RecursicaNumberInputProps>;
+
+export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
+  function NumberInput(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,
+      hideControls = false,
+      ...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"];
+
+    // 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,
+      controls: styles.controls,
+      control: styles.control,
+    };
+
+    const wrapperClass = className
+      ? `${styles.layoutOverride} ${className}`
+      : styles.layoutOverride;
+
+    return (
+      <WithReadOnlyWrapper
+        className={wrapperClass}
+        style={style as React.CSSProperties}
+        controlMaxWidth="var(--recursica_ui-kit_components_number-input_properties_max-width)"
+        controlMinWidth="var(--recursica_ui-kit_components_number-input_properties_min-width)"
+        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 ? value?.toString() : defaultValue?.toString()
+        }
+        readOnlyNativeProps={props}
+        activeComponent={
+          /* Naked Input execution safely decoupled from Mui's macro Input.Wrapper DOM hooks */
+          <MuiNumberInput
+            ref={ref}
+            classes={mergedClassNames}
+            disabled={disabled}
+            value={value}
+            defaultValue={defaultValue}
+            hideControls={hideControls}
+            label={undefined}
+            description={undefined}
+            error={undefined}
+            required={undefined}
+            withAsterisk={undefined}
+            wrapperProps={{
+              "data-disabled": disabled ? "true" : undefined,
+              "data-error": error ? "true" : undefined,
+              "data-with-left-section": restRecord.leftSection
+                ? "true"
+                : undefined,
+              "data-with-right-section":
+                restRecord.rightSection || !hideControls ? "true" : undefined,
+            }}
+            {...(sanitizedProps as unknown as MuiNumberInputProps)}
+          />
+        }
+      />
+    );
+  },
+);
+
+NumberInput.displayName = "NumberInput";

package/src/components/Pagination/Pagination.icons.tsx

@@ -0,0 +1,66 @@
+import styles from "./Pagination.module.css";
+
+const NextPath =
+  "M8.781 8l-3.3-3.3.943-.943L10.667 8l-4.243 4.243-.943-.943 3.3-3.3z";
+const PrevPath =
+  "M7.219 8l3.3 3.3-.943.943L5.333 8l4.243-4.243.943.943-3.3 3.3z";
+const FirstPath =
+  "M6.85355 3.85355C7.04882 3.65829 7.04882 3.34171 6.85355 3.14645C6.65829 2.95118 6.34171 2.95118 6.14645 3.14645L2.14645 7.14645C1.95118 7.34171 1.95118 7.65829 2.14645 7.85355L6.14645 11.8536C6.34171 12.0488 6.65829 12.0488 6.85355 11.8536C7.04882 11.6583 7.04882 11.3417 6.85355 11.1464L3.20711 7.5L6.85355 3.85355ZM12.8536 3.85355C13.0488 3.65829 13.0488 3.34171 12.8536 3.14645C12.6583 2.95118 12.3417 2.95118 12.1464 3.14645L8.14645 7.14645C7.95118 7.34171 7.95118 7.65829 8.14645 7.85355L12.1464 11.8536C12.3417 12.0488 12.6583 12.0488 12.8536 11.8536C13.0488 11.6583 13.0488 11.3417 12.8536 11.1464L9.20711 7.5L12.8536 3.85355Z";
+const LastPath =
+  "M2.14645 11.1464C1.95118 11.3417 1.95118 11.6583 2.14645 11.8536C2.34171 12.0488 2.65829 12.0488 2.85355 11.8536L6.85355 7.85355C7.04882 7.65829 7.04882 7.34171 6.85355 7.14645L2.85355 3.14645C2.65829 2.95118 2.34171 2.95118 2.14645 3.14645C1.95118 3.34171 1.95118 3.65829 2.14645 3.85355L5.79289 7.5L2.14645 11.1464ZM8.14645 11.1464C7.95118 11.3417 7.95118 11.6583 8.14645 11.8536C8.34171 12.0488 8.65829 12.0488 8.85355 11.8536L12.8536 7.85355C13.0488 7.65829 13.0488 7.34171 12.8536 7.14645L8.85355 3.14645C8.65829 2.95118 8.34171 2.95118 8.14645 3.14645C7.95118 3.34171 7.95118 3.65829 8.14645 3.85355L11.7929 7.5L8.14645 11.1464Z";
+
+export type PaginationIconType = "next" | "prev" | "first" | "last";
+
+const paths: Record<PaginationIconType, string> = {
+  next: NextPath,
+  prev: PrevPath,
+  first: FirstPath,
+  last: LastPath,
+};
+
+export const PaginationIcon = ({
+  type,
+  className,
+  ...props
+}: React.ComponentProps<"svg"> & { type: PaginationIconType }) => (
+  <svg
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+    className={`${styles.baseIcon} ${className || ""}`.trim()}
+    {...props}
+  >
+    <path d={paths[type as PaginationIconType]} fill="currentColor" />
+  </svg>
+);
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const NextWithLabel = (props: any) => (
+  <div className={styles.iconWithLabel}>
+    <span>Next</span>
+    <PaginationIcon type="next" {...props} />
+  </div>
+);
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const PrevWithLabel = (props: any) => (
+  <div className={styles.iconWithLabel}>
+    <PaginationIcon type="prev" {...props} />
+    <span>Prev</span>
+  </div>
+);
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const FirstWithLabel = (props: any) => (
+  <div className={styles.iconWithLabel}>
+    <PaginationIcon type="first" {...props} />
+    <span>First</span>
+  </div>
+);
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const LastWithLabel = (props: any) => (
+  <div className={styles.iconWithLabel}>
+    <span>Last</span>
+    <PaginationIcon type="last" {...props} />
+  </div>
+);