@recursica/mui-adapter 0.2.0 → 0.4.0

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

@@ -0,0 +1,166 @@
+.root {
+  /* Default inheritance mapped from component variables if not explicitly overridden by variants */
+  --loader-color: var(
+    --recursica_ui-kit_components_loader_properties_indicator-color,
+    currentColor
+  );
+  box-sizing: border-box;
+}
+.root * {
+  box-sizing: border-box;
+}
+
+/* data-size mapping */
+
+/* SMALL */
+.root[data-size="small"] {
+  --loader-size: var(
+    --recursica_ui-kit_components_loader_variants_sizes_small_properties_size
+  );
+}
+.root[data-size="small"][data-variant="oval"] {
+  --loader-thickness: 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
+  );
+}
+
+/* DEFAULT */
+.root[data-size="default"] {
+  --loader-size: var(
+    --recursica_ui-kit_components_loader_variants_sizes_default_properties_size
+  );
+}
+.root[data-size="default"][data-variant="oval"] {
+  --loader-thickness: 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
+  );
+}
+
+/* LARGE */
+.root[data-size="large"] {
+  --loader-size: var(
+    --recursica_ui-kit_components_loader_variants_sizes_large_properties_size
+  );
+}
+.root[data-size="large"][data-variant="oval"] {
+  --loader-thickness: 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
+  );
+}
+
+/* ----- Oval loader ----- */
+@keyframes oval-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.root[data-variant="oval"] {
+  display: inline-block;
+  width: var(--loader-size);
+  height: var(--loader-size);
+}
+.root[data-variant="oval"]::after {
+  content: "";
+  display: block;
+  width: var(--loader-size);
+  height: var(--loader-size);
+  border-radius: 10000px;
+  border-width: var(--loader-thickness);
+  border-style: solid;
+  border-color: var(--loader-color) var(--loader-color) var(--loader-color)
+    transparent;
+  animation: oval-spin 1.2s linear infinite;
+}
+
+/* ----- Bars loader ----- */
+@keyframes bars-bounce {
+  0% {
+    transform: scale(0.6);
+    opacity: 0;
+  }
+  50%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.root[data-variant="bars"] {
+  position: relative;
+  width: var(--loader-size);
+  height: var(--loader-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--loader-size) / 5);
+}
+
+.root[data-variant="bars"] span {
+  flex: 1;
+  height: 100%;
+  background: var(--loader-color);
+  animation: bars-bounce 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
+}
+
+.root[data-variant="bars"] span:nth-of-type(1) {
+  animation-delay: -240ms;
+}
+.root[data-variant="bars"] span:nth-of-type(2) {
+  animation-delay: -120ms;
+}
+.root[data-variant="bars"] span:nth-of-type(3) {
+  animation-delay: 0;
+}
+
+/* ----- Dots loader ----- */
+@keyframes dots-pulse {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(0.6);
+    opacity: 0.5;
+  }
+}
+
+.root[data-variant="dots"] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: calc(var(--loader-size) / 10);
+  position: relative;
+  width: var(--loader-size);
+  height: var(--loader-size);
+}
+
+.root[data-variant="dots"] span {
+  width: calc(var(--loader-size) / 3 - var(--loader-size) / 15);
+  height: calc(var(--loader-size) / 3 - var(--loader-size) / 15);
+  background: var(--loader-color);
+  animation: dots-pulse 0.8s infinite linear;
+}
+
+.root[data-variant="dots"] span:nth-child(2) {
+  animation-delay: 0.4s;
+}

package/src/components/Loader/Loader.stories.tsx

@@ -1,16 +1,103 @@
+import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Loader } from "./Loader";
-import { ComingSoon } from "@recursica/storybook-template";
+import { Layer } from "@recursica/adapter-common";
 
-const meta: Meta<typeof Loader> = {
-  title: "UI-Kit/🚧 Loader",
-  component: Loader,
+type LoaderStoryArgs = React.ComponentProps<typeof Loader> & {
+  layer?: 0 | 1 | 2 | 3;
+};
+
+const meta: Meta<LoaderStoryArgs> = {
+  title: "UI-Kit/Loader",
+  component: Loader as React.ComponentType<LoaderStoryArgs>,
   tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The Loader bridges the Recursica UI-Kit `loader` variables to the generic primitive, rendering deterministic sizes and variants visually mapped strictly from the explicit design boundary tokens.",
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["oval", "bars", "dots"],
+      description: "The structural layout variant of the loading indicator",
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg", "small", "default", "large"],
+      description:
+        "Scales the dimensional and thickness layout constrained to the explicit UI variables",
+    },
+    color: {
+      control: "color",
+      description:
+        "Optional inline dynamic color override spanning the token defaults",
+    },
+    layer: {
+      control: { type: "range", min: 0, max: 3, step: 1 },
+      description:
+        "Applies a wrapping context to observe rendering logic externally",
+    },
+  },
 };
 
 export default meta;
-type Story = StoryObj<typeof Loader>;
+
+type Story = StoryObj<LoaderStoryArgs>;
 
 export const Default: Story = {
-  render: () => <ComingSoon componentName="Loader" />,
+  args: {
+    variant: "oval",
+    size: "default",
+    layer: 0,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => (
+    <Layer layer={layer ?? 0} style={{ padding: "24px" }}>
+      <Loader {...args} />
+    </Layer>
+  ),
+};
+
+export const StaticOvalDefault: Story = {
+  args: {
+    variant: "oval",
+    size: "default",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => <Loader {...args} />,
+};
+
+export const StaticBarsLarge: Story = {
+  args: {
+    variant: "bars",
+    size: "large",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => <Loader {...args} />,
+};
+
+export const StaticDotsSmall: Story = {
+  args: {
+    variant: "dots",
+    size: "sm",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => <Loader {...args} />,
+};
+
+export const LayerTwoOval: Story = {
+  args: {
+    variant: "oval",
+    size: "default",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  render: ({ withLayer, layer, ...args }: any) => (
+    <Layer layer={2} style={{ padding: "24px" }}>
+      <Loader {...args} />
+    </Layer>
+  ),
 };

package/src/components/Loader/Loader.tsx

@@ -1,7 +1,71 @@
-import React from "react";
+import React, { forwardRef } from "react";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+  type RecursicaSize,
+} from "../../utils/filterStylingProps";
+import styles from "./Loader.module.css";
 
-export type LoaderProps = React.HTMLAttributes<HTMLDivElement>;
+export interface RecursicaLoaderProps {
+  /** Map to the component styles defined in variables */
+  variant?: "oval" | "bars" | "dots";
+  /** Map to Recursica sizes */
+  size?: "sm" | "md" | "lg" | RecursicaSize;
+}
 
-export const Loader: React.FC<LoaderProps> = (props) => {
-  return <div {...props}>Loader</div>;
-};
+export type LoaderProps = RecursicaOverStyled<
+  React.HTMLAttributes<HTMLSpanElement> & RecursicaLoaderProps
+>;
+
+export const Loader = forwardRef<HTMLSpanElement, LoaderProps>(function Loader(
+  { variant = "oval", size = "default", overStyled = false, ...rest },
+  ref,
+) {
+  const mapSize = {
+    sm: "small",
+    md: "default",
+    lg: "large",
+    small: "small",
+    default: "default",
+    large: "large",
+  } as const;
+
+  const resolvedSize = mapSize[size] || "default";
+
+  // Strip all visual override injections unless developer has specifically opted into overStyling.
+  // External layout props like margins are safely preserved.
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+
+  const classNameProp = (sanitizedProps as Record<string, unknown>)
+    .className as string | undefined;
+  const finalClass = classNameProp
+    ? `${styles.root} ${classNameProp}`
+    : styles.root;
+
+  const renderChildren = () => {
+    if (variant === "bars" || variant === "dots") {
+      return (
+        <>
+          <span />
+          <span />
+          <span />
+        </>
+      );
+    }
+    return null; // Oval is handled purely via CSS ::after
+  };
+
+  return (
+    <span
+      ref={ref}
+      data-variant={variant}
+      data-size={resolvedSize}
+      {...sanitizedProps}
+      className={finalClass}
+    >
+      {renderChildren()}
+    </span>
+  );
+});
+
+Loader.displayName = "Loader";

package/src/components/Menu/Menu.stories.tsx

@@ -6,6 +6,25 @@ const meta: Meta<typeof Menu> = {
   title: "UI-Kit/🚧 Menu",
   component: Menu,
   tags: ["autodocs"],
+  parameters: {
+    controls: {
+      include: [
+        "layer",
+        "withLayer",
+        "children",
+        "component",
+        "variant",
+        "size",
+        "icon",
+        "disabled",
+        "href",
+        "onClick",
+        "onChange",
+        "value",
+        "checked",
+      ],
+    },
+  },
 };
 
 export default meta;

package/src/components/Modal/Modal.stories.tsx

@@ -6,6 +6,25 @@ const meta: Meta<typeof Modal> = {
   title: "UI-Kit/🚧 Modal",
   component: Modal,
   tags: ["autodocs"],
+  parameters: {
+    controls: {
+      include: [
+        "layer",
+        "withLayer",
+        "children",
+        "component",
+        "variant",
+        "size",
+        "icon",
+        "disabled",
+        "href",
+        "onClick",
+        "onChange",
+        "value",
+        "checked",
+      ],
+    },
+  },
 };
 
 export default meta;

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

@@ -6,6 +6,25 @@ const meta: Meta<typeof 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",
+      ],
+    },
+  },
 };
 
 export default meta;

package/src/components/Pagination/Pagination.stories.tsx

@@ -6,6 +6,25 @@ const meta: Meta<typeof Pagination> = {
   title: "UI-Kit/🚧 Pagination",
   component: Pagination,
   tags: ["autodocs"],
+  parameters: {
+    controls: {
+      include: [
+        "layer",
+        "withLayer",
+        "children",
+        "component",
+        "variant",
+        "size",
+        "icon",
+        "disabled",
+        "href",
+        "onClick",
+        "onChange",
+        "value",
+        "checked",
+      ],
+    },
+  },
 };
 
 export default meta;

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

@@ -6,6 +6,25 @@ const meta: Meta<typeof Panel> = {
   title: "UI-Kit/🚧 Panel",
   component: Panel,
   tags: ["autodocs"],
+  parameters: {
+    controls: {
+      include: [
+        "layer",
+        "withLayer",
+        "children",
+        "component",
+        "variant",
+        "size",
+        "icon",
+        "disabled",
+        "href",
+        "onClick",
+        "onChange",
+        "value",
+        "checked",
+      ],
+    },
+  },
 };
 
 export default meta;

package/src/components/Radio/Radio.stories.tsx

@@ -6,6 +6,25 @@ const meta: Meta<typeof Radio> = {
   title: "UI-Kit/🚧 Radio",
   component: Radio,
   tags: ["autodocs"],
+  parameters: {
+    controls: {
+      include: [
+        "layer",
+        "withLayer",
+        "children",
+        "component",
+        "variant",
+        "size",
+        "icon",
+        "disabled",
+        "href",
+        "onClick",
+        "onChange",
+        "value",
+        "checked",
+      ],
+    },
+  },
 };
 
 export default meta;

package/src/components/ReadOnlyField/ReadOnlyField.stories.tsx

@@ -6,6 +6,25 @@ const meta: Meta<typeof ReadOnlyField> = {
   title: "UI-Kit/🚧 ReadOnlyField",
   component: ReadOnlyField,
   tags: ["autodocs"],
+  parameters: {
+    controls: {
+      include: [
+        "layer",
+        "withLayer",
+        "children",
+        "component",
+        "variant",
+        "size",
+        "icon",
+        "disabled",
+        "href",
+        "onClick",
+        "onChange",
+        "value",
+        "checked",
+      ],
+    },
+  },
 };
 
 export default meta;

package/src/components/SegmentedControl/SegmentedControl.stories.tsx

@@ -6,6 +6,25 @@ const meta: Meta<typeof SegmentedControl> = {
   title: "UI-Kit/🚧 SegmentedControl",
   component: SegmentedControl,
   tags: ["autodocs"],
+  parameters: {
+    controls: {
+      include: [
+        "layer",
+        "withLayer",
+        "children",
+        "component",
+        "variant",
+        "size",
+        "icon",
+        "disabled",
+        "href",
+        "onClick",
+        "onChange",
+        "value",
+        "checked",
+      ],
+    },
+  },
 };
 
 export default meta;

package/src/components/Slider/Slider.stories.tsx

@@ -6,6 +6,25 @@ const meta: Meta<typeof Slider> = {
   title: "UI-Kit/🚧 Slider",
   component: Slider,
   tags: ["autodocs"],
+  parameters: {
+    controls: {
+      include: [
+        "layer",
+        "withLayer",
+        "children",
+        "component",
+        "variant",
+        "size",
+        "icon",
+        "disabled",
+        "href",
+        "onClick",
+        "onChange",
+        "value",
+        "checked",
+      ],
+    },
+  },
 };
 
 export default meta;