@recursica/mantine-adapter 0.15.0 → 0.17.0

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

@@ -1,17 +1,56 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Pagination } from "./Pagination";
-import { ComingSoon } from "@recursica/storybook-template";
 
 const meta: Meta<typeof Pagination> = {
-  title: "UI-Kit/🚧 Pagination",
+  title: "UI-Kit/Pagination",
   component: Pagination,
   tags: ["autodocs"],
+  argTypes: {
+    total: { control: "number" },
+    withEdges: { control: "boolean" },
+    withControls: { control: "boolean" },
+    disabled: { control: "boolean" },
+    withLabels: {
+      control: "boolean",
+      description: "Toggle text labels alongside icons",
+    },
+    defaultChecked: { table: { disable: true } },
+  },
+  args: {
+    total: 10,
+    withEdges: false,
+    withControls: true,
+    withLabels: false,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+  render: ({ withLayer, layer, ...args }: any) => {
+    return <Pagination {...args} />;
+  },
 };
 
 export default meta;
 
 type Story = StoryObj<typeof Pagination>;
 
-export const Default: Story = {
-  render: () => <ComingSoon componentName="Pagination" />,
+export const Default: Story = {};
+
+export const WithEdges: Story = {
+  args: {
+    withEdges: true,
+  },
+};
+
+export const Compositional: Story = {
+  render: () => (
+    <Pagination.Root total={10}>
+      <Pagination.Items />
+    </Pagination.Root>
+  ),
+};
+
+export const WithTextLabels: Story = {
+  args: {
+    withEdges: true,
+    withLabels: true,
+  },
 };

package/src/components/Pagination/Pagination.tsx

@@ -1,7 +1,217 @@
-import React from "react";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { forwardRef } from "react";
+import {
+  Pagination as MantinePagination,
+  type PaginationProps as MantinePaginationProps,
+  type PaginationRootProps as MantinePaginationRootProps,
+} from "@mantine/core";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+import styles from "./Pagination.module.css";
+import {
+  NextWithLabel,
+  PrevWithLabel,
+  FirstWithLabel,
+  LastWithLabel,
+  PaginationIcon,
+} from "./Pagination.icons";
 
-export type PaginationProps = React.HTMLAttributes<HTMLDivElement>;
+export type PaginationProps = RecursicaOverStyled<MantinePaginationProps> & {
+  /** If set to true, displays text labels alongside the icons for next/previous/first/last edges. */
+  withLabels?: boolean;
+};
+
+export type PaginationRootProps =
+  RecursicaOverStyled<MantinePaginationRootProps>;
+
+export type PaginationEdgeProps<T extends React.ElementType> =
+  React.ComponentProps<T> & {
+    /** If set to true, displays text labels alongside the icon. */
+    withLabel?: boolean;
+    icon?: any;
+  };
+
+function usePaginationClassNames(restRecord: Record<string, unknown>): {
+  className: string;
+  classNames: Partial<Record<string, string>>;
+} {
+  const mergedClassNames: Partial<Record<string, string>> = {
+    root: styles.root,
+    control: styles.control,
+    dots: styles.dots,
+  };
+
+  const classNamesProp = restRecord.classNames;
+  if (
+    classNamesProp &&
+    typeof classNamesProp === "object" &&
+    !Array.isArray(classNamesProp)
+  ) {
+    const o = classNamesProp as Partial<Record<string, string>>;
+    mergedClassNames.root = o.root ? `${styles.root} ${o.root}` : styles.root;
+    mergedClassNames.control = o.control
+      ? `${styles.control} ${o.control}`
+      : styles.control;
+    mergedClassNames.dots = o.dots ? `${styles.dots} ${o.dots}` : styles.dots;
+  }
+
+  const classNameProp = restRecord.className as string | undefined;
+  const finalClass = classNameProp
+    ? `${styles.root} ${classNameProp}`
+    : styles.root;
+
+  return { className: finalClass, classNames: mergedClassNames };
+}
+
+const _PaginationRoot = forwardRef<HTMLDivElement, PaginationRootProps>(
+  function PaginationRoot({ overStyled = false, ...rest }, ref) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    const stylingParams = usePaginationClassNames(
+      sanitizedProps as Record<string, unknown>,
+    );
+
+    return (
+      <MantinePagination.Root
+        ref={ref}
+        className={stylingParams.className}
+        classNames={stylingParams.classNames}
+        {...(sanitizedProps as MantinePaginationRootProps)}
+      />
+    );
+  },
+);
+_PaginationRoot.displayName = "Pagination.Root";
 
-export const Pagination: React.FC<PaginationProps> = (props) => {
-  return <div {...props}>Pagination</div>;
+const _PaginationNext = forwardRef<
+  HTMLButtonElement,
+  PaginationEdgeProps<typeof MantinePagination.Next>
+>(function PaginationNext({ withLabel, icon, ...props }, ref) {
+  const renderIcon = icon || (withLabel ? NextWithLabel : undefined);
+  return (
+    <MantinePagination.Next
+      ref={ref}
+      data-variant="text"
+      icon={renderIcon as any}
+      {...props}
+    />
+  );
+});
+_PaginationNext.displayName = "Pagination.Next";
+
+const _PaginationPrevious = forwardRef<
+  HTMLButtonElement,
+  PaginationEdgeProps<typeof MantinePagination.Previous>
+>(function PaginationPrevious({ withLabel, icon, ...props }, ref) {
+  const renderIcon = icon || (withLabel ? PrevWithLabel : undefined);
+  return (
+    <MantinePagination.Previous
+      ref={ref}
+      data-variant="text"
+      icon={renderIcon as any}
+      {...props}
+    />
+  );
+});
+_PaginationPrevious.displayName = "Pagination.Previous";
+
+const _PaginationFirst = forwardRef<
+  HTMLButtonElement,
+  PaginationEdgeProps<typeof MantinePagination.First>
+>(function PaginationFirst({ withLabel, icon, ...props }, ref) {
+  const renderIcon = icon || (withLabel ? FirstWithLabel : undefined);
+  return (
+    <MantinePagination.First
+      ref={ref}
+      data-variant="text"
+      icon={renderIcon as any}
+      {...props}
+    />
+  );
+});
+_PaginationFirst.displayName = "Pagination.First";
+
+const _PaginationLast = forwardRef<
+  HTMLButtonElement,
+  PaginationEdgeProps<typeof MantinePagination.Last>
+>(function PaginationLast({ withLabel, icon, ...props }, ref) {
+  const renderIcon = icon || (withLabel ? LastWithLabel : undefined);
+  return (
+    <MantinePagination.Last
+      ref={ref}
+      data-variant="text"
+      icon={renderIcon as any}
+      {...props}
+    />
+  );
+});
+_PaginationLast.displayName = "Pagination.Last";
+
+const _Pagination = forwardRef<HTMLDivElement, PaginationProps>(
+  function Pagination(
+    { overStyled = false, getControlProps, withLabels, ...rest },
+    ref,
+  ) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    const stylingParams = usePaginationClassNames(
+      sanitizedProps as Record<string, unknown>,
+    );
+
+    const mergedGetControlProps = (
+      control: "first" | "previous" | "last" | "next",
+    ) => {
+      const baseProps = { "data-variant": "text" };
+      if (getControlProps) {
+        return { ...baseProps, ...getControlProps(control) };
+      }
+      return baseProps;
+    };
+
+    const labelsIcons = withLabels
+      ? {
+          nextIcon: NextWithLabel,
+          previousIcon: PrevWithLabel,
+          firstIcon: FirstWithLabel,
+          lastIcon: LastWithLabel,
+        }
+      : {};
+
+    return (
+      <MantinePagination
+        ref={ref}
+        className={stylingParams.className}
+        classNames={stylingParams.classNames}
+        getControlProps={mergedGetControlProps}
+        {...labelsIcons}
+        {...(sanitizedProps as MantinePaginationProps)}
+      />
+    );
+  },
+);
+_Pagination.displayName = "Pagination";
+
+/**
+ * Recursica Pagination component wrapping Mantine's Pagination.
+ */
+export const Pagination = _Pagination as typeof _Pagination & {
+  Root: typeof _PaginationRoot;
+  Items: typeof MantinePagination.Items;
+  Control: typeof MantinePagination.Control;
+  Dots: typeof MantinePagination.Dots;
+  Next: typeof _PaginationNext;
+  Previous: typeof _PaginationPrevious;
+  First: typeof _PaginationFirst;
+  Last: typeof _PaginationLast;
+  Icon: typeof PaginationIcon;
 };
+
+Pagination.Root = _PaginationRoot;
+Pagination.Items = MantinePagination.Items;
+Pagination.Control = MantinePagination.Control;
+Pagination.Dots = MantinePagination.Dots;
+Pagination.Next = _PaginationNext;
+Pagination.Previous = _PaginationPrevious;
+Pagination.First = _PaginationFirst;
+Pagination.Last = _PaginationLast;
+Pagination.Icon = PaginationIcon;

package/src/components/Pagination/index.ts

@@ -0,0 +1,5 @@
+export {
+  Pagination,
+  type PaginationProps,
+  type PaginationRootProps,
+} from "./Pagination";

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

@@ -94,12 +94,12 @@ export const Default: Story = {
           Open Panel
         </Button>
         <Panel
+          {...(args as PanelProps)}
           opened={opened}
           onClose={() => setOpened(false)}
           title="Panel Title"
           position="right"
           wrapHeaderText={wrapHeaderText}
-          {...(args as PanelProps)}
         >
           <Text>
             This is the panel body content area. Panels slide in from the edge

package/src/components/SegmentedControl/IMPLEMENTATION_NOTES.md

@@ -0,0 +1,17 @@
+# SegmentedControl Implementation Notes
+
+## 1. Stripping Mantine's Native Variants and Sizes
+
+The Figma design tokens for the SegmentedControl component do not define nested layers of variants (such as `solid`, `outline`) or specific sizing steps (`xs`, `sm`, etc.). They are defined globally. Therefore, we explicitly `Omit` the standard `variant`, `size`, `radius`, and `color` props from the generic Mantine `SegmentedControlProps` interface.
+
+## 2. Hardcoded Overrides for Figma Strictness
+
+Mantine injects inline hover styles on `.label` (specifically, adding a subtle gray background when hovering). Since Recursica defines explicit transparent or specifically-driven hover states, we use `!important` tags within `SegmentedControl.module.css` for background and typography overriding.
+
+## 3. Divider Separators
+
+Mantine uses an `::before` pseudo-element on the `.control` block to draw standard visual separators between adjacent elements. Instead of stripping this functionality out, we hook directly into the pseudo-element and override its `background-color` with `--recursica_ui-kit_components_segmented-control_properties_colors_divider-color`.
+
+## 4. Indicator Mapping
+
+The moving active background element (`.indicator`) is decoupled from the actual text label. It is styled natively with its own background color, border size, and elevation shadow variables to match the exact visual parity of a "floating active chip" as defined in the Recursica properties map.

package/src/components/SegmentedControl/SegmentedControl.module.css

@@ -0,0 +1,138 @@
+/* HARDCODED VALUES:
+   - border-style: solid; on container and indicator
+   - background-color: transparent; on label hover (overriding Mantine)
+   - !important usage to strictly enforce Figma tokens over Mantine's inline calculation
+*/
+
+.root {
+  background-color: var(
+    --recursica_ui-kit_components_segmented-control_properties_container_colors_background
+  ) !important;
+  border: var(
+      --recursica_ui-kit_components_segmented-control_properties_container_border-size
+    )
+    solid
+    var(
+      --recursica_ui-kit_components_segmented-control_properties_container_colors_border-color
+    );
+  border-radius: var(
+    --recursica_ui-kit_components_segmented-control_properties_container_border-radius
+  ) !important;
+  padding: var(
+      --recursica_ui-kit_components_segmented-control_properties_container_padding-vertical
+    )
+    var(
+      --recursica_ui-kit_components_segmented-control_properties_container_padding-horizontal
+    ) !important;
+  box-shadow: var(
+    --recursica_ui-kit_components_segmented-control_properties_container_elevation
+  );
+  gap: var(--recursica_ui-kit_components_segmented-control_properties_item-gap);
+}
+
+.label {
+  padding-left: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_item_padding-horizontal
+  ) !important;
+  padding-right: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_item_padding-horizontal
+  ) !important;
+  height: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_item_height
+  ) !important;
+  border-radius: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_item_border-radius
+  ) !important;
+
+  font-family: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_text_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_text_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_text_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_text_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_text_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_text_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_text_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_text_text-transform
+  );
+
+  color: var(
+    --recursica_ui-kit_components_segmented-control_properties_colors_text
+  ) !important;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Mantine natively wraps label contents in an innerLabel span */
+.label :global(.mantine-SegmentedControl-innerLabel) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_item_icon-text-gap
+  );
+}
+
+.label svg {
+  width: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_item_icon-size
+  );
+  height: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_item_icon-size
+  );
+  flex-shrink: 0;
+}
+
+/* Mantine adds a background on hover, we must strictly strip it */
+.label:hover {
+  background-color: transparent !important;
+}
+
+/* Mantine adds separators via ::before on the .control */
+.control::before {
+  background-color: var(
+    --recursica_ui-kit_components_segmented-control_properties_colors_divider-color
+  ) !important;
+}
+
+/* Indicator (the moving selected block) */
+.indicator {
+  background-color: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected_colors_background
+  ) !important;
+  border: var(
+      --recursica_ui-kit_components_segmented-control-item_properties_selected_border-size
+    )
+    solid
+    var(
+      --recursica_ui-kit_components_segmented-control-item_properties_selected_colors_border-color
+    ) !important;
+  box-shadow: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected_elevation
+  ) !important;
+  border-radius: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_item_border-radius
+  ) !important;
+}
+
+/* Selected label text color override */
+.control[data-active] .label {
+  color: var(
+    --recursica_ui-kit_components_segmented-control-item_properties_selected_colors_text-color
+  ) !important;
+}

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

@@ -1,18 +1,120 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { SegmentedControl } from "./SegmentedControl";
-import { ComingSoon } from "@recursica/storybook-template";
 
 const meta: Meta<typeof SegmentedControl> = {
-  title: "UI-Kit/🚧 SegmentedControl",
+  title: "UI-Kit/SegmentedControl",
   component: SegmentedControl,
   tags: ["autodocs"],
-  argTypes: {},
-};
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "SegmentedControl provides a linear set of two or more segments, each of which functions as a mutually exclusive button.",
+      },
+    },
+  },
+  argTypes: {
+    orientation: {
+      control: "radio",
+      options: ["horizontal", "vertical"],
+    },
+    fullWidth: {
+      control: "boolean",
+    },
+    disabled: {
+      control: "boolean",
+    },
+    data: { table: { disable: true } },
+    defaultChecked: { table: { disable: true } },
+  },
+} satisfies Meta<typeof SegmentedControl>;
 
 export default meta;
-
 type Story = StoryObj<typeof SegmentedControl>;
 
 export const Default: Story = {
-  render: () => <ComingSoon componentName="SegmentedControl" />,
+  args: {
+    data: ["React", "Angular", "Vue", "Svelte"],
+    orientation: "horizontal",
+    fullWidth: false,
+    disabled: false,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+  render: ({ withLayer, layer, ...args }: any) => {
+    return <SegmentedControl {...args} />;
+  },
+};
+
+export const FullWidth: Story = {
+  args: {
+    data: ["Daily", "Weekly", "Monthly"],
+    fullWidth: true,
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+  render: ({ withLayer, layer, ...args }: any) => {
+    return <SegmentedControl {...args} />;
+  },
+};
+
+export const Vertical: Story = {
+  args: {
+    data: ["Option 1", "Option 2", "Option 3"],
+    orientation: "vertical",
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+  render: ({ withLayer, layer, ...args }: any) => {
+    return <SegmentedControl {...args} />;
+  },
+};
+
+const CheckIcon = () => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polyline points="20 6 9 17 4 12" />
+  </svg>
+);
+
+export const WithIcons: Story = {
+  args: {
+    data: [
+      {
+        value: "daily",
+        label: (
+          <>
+            <CheckIcon />
+            <span>Daily</span>
+          </>
+        ),
+      },
+      {
+        value: "weekly",
+        label: (
+          <>
+            <CheckIcon />
+            <span>Weekly</span>
+          </>
+        ),
+      },
+      {
+        value: "monthly",
+        label: (
+          <>
+            <CheckIcon />
+            <span>Monthly</span>
+          </>
+        ),
+      },
+    ],
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
+  render: ({ withLayer, layer, ...args }: any) => {
+    return <SegmentedControl {...args} />;
+  },
 };

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -1,7 +1,98 @@
-import React from "react";
+import { forwardRef } from "react";
+import {
+  SegmentedControl as MantineSegmentedControl,
+  type SegmentedControlProps as MantineSegmentedControlProps,
+} from "@mantine/core";
+import {
+  filterStylingProps,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+import styles from "./SegmentedControl.module.css";
 
-export type SegmentedControlProps = React.HTMLAttributes<HTMLDivElement>;
+export interface RecursicaSegmentedControlProps {
+  /** The orientation of the control */
+  orientation?: "horizontal" | "vertical";
+  /** If true, the control will take up the full width of its container */
+  fullWidth?: boolean;
+}
 
-export const SegmentedControl: React.FC<SegmentedControlProps> = (props) => {
-  return <div {...props}>SegmentedControl</div>;
-};
+export type SegmentedControlProps = RecursicaOverStyled<
+  Omit<
+    MantineSegmentedControlProps,
+    "variant" | "size" | "radius" | "color" | "classNames" | "className"
+  > & {
+    className?: string;
+    classNames?: Partial<Record<string, string>>;
+  } & RecursicaSegmentedControlProps
+>;
+
+function useSegmentedControlClassNames(restRecord: Record<string, unknown>): {
+  className: string;
+  classNames: Partial<Record<string, string>>;
+} {
+  const mergedClassNames: Partial<Record<string, string>> = {
+    root: styles.root,
+    control: styles.control,
+    label: styles.label,
+    indicator: styles.indicator,
+  };
+
+  const classNamesProp = restRecord.classNames;
+  if (
+    classNamesProp &&
+    typeof classNamesProp === "object" &&
+    !Array.isArray(classNamesProp)
+  ) {
+    const o = classNamesProp as Partial<Record<string, string>>;
+    mergedClassNames.root = o.root ? `${styles.root} ${o.root}` : styles.root;
+    mergedClassNames.control = o.control
+      ? `${styles.control} ${o.control}`
+      : styles.control;
+    mergedClassNames.label = o.label
+      ? `${styles.label} ${o.label}`
+      : styles.label;
+    mergedClassNames.indicator = o.indicator
+      ? `${styles.indicator} ${o.indicator}`
+      : styles.indicator;
+  }
+
+  const classNameProp = restRecord.className as string | undefined;
+  const finalClass = classNameProp
+    ? `${styles.root} ${classNameProp}`
+    : styles.root;
+
+  return { className: finalClass, classNames: mergedClassNames };
+}
+
+const _SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
+  function SegmentedControl(
+    { overStyled = false, orientation = "horizontal", fullWidth, ...rest },
+    ref,
+  ) {
+    const sanitizedProps = filterStylingProps(rest, overStyled);
+    const stylingParams = useSegmentedControlClassNames(
+      sanitizedProps as Record<string, unknown>,
+    );
+
+    return (
+      <MantineSegmentedControl
+        ref={ref}
+        className={stylingParams.className}
+        classNames={stylingParams.classNames}
+        orientation={orientation}
+        fullWidth={fullWidth}
+        data-orientation={orientation}
+        {...(sanitizedProps as Omit<
+          MantineSegmentedControlProps,
+          "variant" | "size"
+        >)}
+      />
+    );
+  },
+);
+_SegmentedControl.displayName = "SegmentedControl";
+
+/**
+ * Recursica SegmentedControl component wrapping Mantine's SegmentedControl.
+ */
+export const SegmentedControl = _SegmentedControl;