@recursica/mui-adapter 0.5.0 → 0.7.0

package/src/components/TextField/TextField.tsx

@@ -1,8 +1,171 @@
-import React from "react";
-import "./TextField.module.css";
+import React, { forwardRef } from "react";
+import { InputBase, type InputBaseProps } 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 "./TextField.module.css";
 
-export type TextFieldProps = React.HTMLAttributes<HTMLDivElement>;
+import { type RecursicaTextFieldProps as BaseRecursicaTextFieldProps } from "@recursica/adapter-common";
 
-export const TextField: React.FC<TextFieldProps> = (props) => {
-  return <div {...props}>TextField</div>;
-};
+export interface RecursicaTextFieldProps
+  extends Omit<
+      InputBaseProps,
+      "color" | "size" | "startAdornment" | "endAdornment" | "autoComplete"
+    >,
+    Omit<
+      React.ComponentPropsWithoutRef<"input">,
+      keyof InputBaseProps | "size" | "color" | "style" | "className" | "id"
+    >,
+    Pick<
+      RecursicaFormControlWrapperProps,
+      | "label"
+      | "error"
+      | "required"
+      | "id"
+      | "assistiveText"
+      | "assistiveWithIcon"
+      | "formLayout"
+      | "labelSize"
+      | "labelAlignment"
+      | "labelOptionalText"
+      | "labelWithEditIcon"
+      | "onLabelEditClick"
+    >,
+    ReadOnlyControlProps,
+    BaseRecursicaTextFieldProps {}
+
+export type TextFieldProps = RecursicaOverStyled<RecursicaTextFieldProps>;
+
+export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
+  function TextField(props, ref) {
+    const {
+      overStyled = false,
+      formLayout = "stacked",
+
+      // Label & Wrapper Maps
+      labelSize,
+      labelAlignment,
+      labelOptionalText,
+      labelWithEditIcon,
+      onLabelEditClick,
+
+      label,
+      assistiveText,
+      assistiveWithIcon,
+      error,
+      required,
+      id,
+      className,
+      style,
+      disabled,
+      readOnly,
+      readOnlyComponent,
+      emptyValueComponent,
+      value,
+      defaultValue,
+      leftSection,
+      rightSection,
+      ...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["color"];
+
+    // 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,
+    };
+
+    const classesProp = restRecord.classes;
+    if (
+      classesProp &&
+      typeof classesProp === "object" &&
+      !Array.isArray(classesProp)
+    ) {
+      const o = classesProp as Partial<Record<string, string>>;
+      mergedClassNames.wrapper = o.root
+        ? `${styles.root} ${o.root}`
+        : styles.root;
+      mergedClassNames.input = o.input
+        ? `${styles.input} ${o.input}`
+        : styles.input;
+    }
+
+    const wrapperClass = className
+      ? `${styles.layoutOverride} ${className}`
+      : styles.layoutOverride;
+
+    const startAdornment = leftSection ? (
+      <div className={mergedClassNames.section} data-position="left">
+        {leftSection}
+      </div>
+    ) : undefined;
+
+    const endAdornment = rightSection ? (
+      <div className={mergedClassNames.section} data-position="right">
+        {rightSection}
+      </div>
+    ) : undefined;
+
+    return (
+      <WithReadOnlyWrapper
+        className={wrapperClass}
+        style={style as React.CSSProperties}
+        controlMaxWidth="var(--recursica_ui-kit_components_text-field_properties_max-width)"
+        controlMinWidth="var(--recursica_ui-kit_components_text-field_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}
+        id={id}
+        readOnly={readOnly}
+        readOnlyComponent={readOnlyComponent as any}
+        emptyValueComponent={(emptyValueComponent as any) || undefined}
+        readOnlyType="text"
+        readOnlyValue={value !== undefined ? value : defaultValue}
+        readOnlyNativeProps={props}
+        activeComponent={
+          /* Naked Input execution safely decoupled from MUI's macro FormControl DOM hooks */
+          <InputBase
+            inputRef={ref} // MUI specific forward ref mapping
+            classes={{
+              root: mergedClassNames.wrapper,
+              input: mergedClassNames.input,
+            }}
+            disabled={disabled}
+            value={value}
+            defaultValue={defaultValue}
+            startAdornment={startAdornment}
+            endAdornment={endAdornment}
+            // Bind native CSS selectors for errors / adornments explicitly to the root boundary
+            data-disabled={disabled ? "true" : undefined}
+            data-error={error ? "true" : undefined}
+            data-with-left-section={leftSection ? "true" : undefined}
+            data-with-right-section={rightSection ? "true" : undefined}
+            {...(sanitizedProps as unknown as InputBaseProps)}
+          />
+        }
+      />
+    );
+  },
+);
+
+TextField.displayName = "TextField";

package/src/components/TimePicker/TimePicker.stories.tsx

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

package/src/components/TimePicker/TimePicker.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import "./TimePicker.module.css";
+import { type RecursicaTimePickerProps } from "@recursica/adapter-common";
 
-export type TimePickerProps = React.HTMLAttributes<HTMLDivElement>;
+export type TimePickerProps = React.HTMLAttributes<HTMLDivElement> &
+  RecursicaTimePickerProps;
 
 export const TimePicker: React.FC<TimePickerProps> = (props) => {
   return <div {...props}>TimePicker</div>;

package/src/components/Timeline/Timeline.module.css

@@ -1,78 +1,367 @@
 /* EXEMPTIONS:
-   This component is a placeholder stub. Once fully implemented, its specific
-   tokens will be fully wired up to direct styles. */
-
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_properties_active-avatar-opacity */
+   - timeline-bullet_variants_types_avatar_properties_avatar-size is ignored because under the avatar timeline variant,
+     the bullet container size uses fallback bullet-size configurations to maintain vertical alignment with the 
+     inactive/active connector line, while the nested Avatar subcomponent handles its own sizing natively. */
 /* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_properties_avatar-size */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_properties_border-radius */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_properties_colors_active-background */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_properties_colors_active-border-color */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_properties_colors_inactive-background */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_properties_colors_inactive-border-color */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_properties_inactive-avatar-opacity */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_default_properties_border-radius */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_default_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_default_properties_bullet-size */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_default_properties_colors_active-background */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_default_properties_colors_active-border-color */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_default_properties_colors_inactive-background */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_default_properties_colors_inactive-border-color */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_border-radius */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_bullet-size */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_colors_active-background */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_colors_active-border-color */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_colors_active-icon-color */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_colors_inactive-background */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_colors_inactive-border-color */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_colors_inactive-icon-color */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_icon-size */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_border-radius */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_border-size */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_bullet-size */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_colors_active-background */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_colors_active-border-color */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_colors_active-icon-color */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_colors_inactive-background */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_colors_inactive-border-color */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_colors_inactive-icon-color */
-/* recursica-ignore: --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_icon-size */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_active-connector-size */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_bullet-content-gap */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_colors_active-connector-color */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_colors_active-description-color */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_colors_active-timestamp-color */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_colors_active-title-color */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_colors_inactive-connector-color */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_colors_inactive-description-color */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_colors_inactive-timestamp-color */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_colors_inactive-title-color */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_description-text_font-family */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_description-text_font-size */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_description-text_font-style */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_description-text_font-weight */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_description-text_letter-spacing */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_description-text_line-height */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_description-text_text-decoration */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_description-text_text-transform */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_description-timestamp-gap */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_inactive-connector-size */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_max-text-width */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_timestamp-text_font-family */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_timestamp-text_font-size */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_timestamp-text_font-style */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_timestamp-text_font-weight */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_timestamp-text_letter-spacing */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_timestamp-text_line-height */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_timestamp-text_text-decoration */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_timestamp-text_text-transform */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_title-description-gap */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_title-text_font-family */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_title-text_font-size */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_title-text_font-style */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_title-text_font-weight */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_title-text_letter-spacing */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_title-text_line-height */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_title-text_text-decoration */
-/* recursica-ignore: --recursica_ui-kit_components_timeline_properties_title-text_text-transform */
+
+.root {
+  display: flex;
+  flex-direction: column;
+}
+
+.item {
+  /* Mantine uses these vars to calculate the exact left: position of the connector line */
+  --tl-line-width: var(
+    --recursica_ui-kit_components_timeline_properties_inactive-connector-size
+  ) !important;
+
+  &[data-active] {
+    --tl-line-width: var(
+      --recursica_ui-kit_components_timeline_properties_active-connector-size
+    ) !important;
+  }
+
+  &[data-variant="default"] {
+    --tl-bullet-size: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_default_properties_bullet-size
+    ) !important;
+  }
+  &[data-variant="icon"] {
+    --tl-bullet-size: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_bullet-size
+    ) !important;
+  }
+  &[data-variant="icon-alternative"] {
+    --tl-bullet-size: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_bullet-size
+    ) !important;
+  }
+  &[data-variant="avatar"] {
+    /* Avatar sizing fallback to default to maintain connector alignment */
+    --tl-bullet-size: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_default_properties_bullet-size
+    ) !important;
+  }
+
+  /* Control connector lines via the item ::before pseudo-element */
+  /* Inactive connector */
+  &::before {
+    border-left-width: var(
+      --recursica_ui-kit_components_timeline_properties_inactive-connector-size
+    ) !important;
+    border-left-color: var(
+      --recursica_ui-kit_components_timeline_properties_colors_inactive-connector-color
+    ) !important;
+  }
+
+  /* Active connector */
+  &[data-active]::before {
+    border-left-width: var(
+      --recursica_ui-kit_components_timeline_properties_active-connector-size
+    ) !important;
+    border-left-color: var(
+      --recursica_ui-kit_components_timeline_properties_colors_active-connector-color
+    ) !important;
+  }
+}
+
+.itemBody {
+  /* Space between the bullet and the content */
+  padding-left: var(
+    --recursica_ui-kit_components_timeline_properties_bullet-content-gap
+  ) !important;
+}
+
+.itemBullet {
+  /* Default Variant */
+  :global(.mantine-Timeline-item)[data-variant="default"] & {
+    width: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_default_properties_bullet-size
+    ) !important;
+    height: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_default_properties_bullet-size
+    ) !important;
+    border-radius: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_default_properties_border-radius
+    ) !important;
+    border-width: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_default_properties_border-size
+    ) !important;
+
+    background-color: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_default_properties_colors_inactive-background
+    ) !important;
+    border-color: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_default_properties_colors_inactive-border-color
+    ) !important;
+  }
+  :global(.mantine-Timeline-item)[data-variant="default"][data-active] & {
+    background-color: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_default_properties_colors_active-background
+    ) !important;
+    border-color: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_default_properties_colors_active-border-color
+    ) !important;
+  }
+
+  /* Icon Variant */
+  :global(.mantine-Timeline-item)[data-variant="icon"] & {
+    width: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_bullet-size
+    ) !important;
+    height: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_bullet-size
+    ) !important;
+    border-radius: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_border-radius
+    ) !important;
+    border-width: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_border-size
+    ) !important;
+
+    background-color: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_colors_inactive-background
+    ) !important;
+    border-color: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_colors_inactive-border-color
+    ) !important;
+    color: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_colors_inactive-icon-color
+    ) !important;
+
+    /* Propagate icon size */
+    font-size: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_icon-size
+    );
+    & svg {
+      width: var(
+        --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_icon-size
+      );
+      height: var(
+        --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_icon-size
+      );
+    }
+  }
+  :global(.mantine-Timeline-item)[data-variant="icon"][data-active] & {
+    background-color: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_colors_active-background
+    ) !important;
+    border-color: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_colors_active-border-color
+    ) !important;
+    color: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon_properties_colors_active-icon-color
+    ) !important;
+  }
+
+  /* Icon Alternative Variant */
+  :global(.mantine-Timeline-item)[data-variant="icon-alternative"] & {
+    width: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_bullet-size
+    ) !important;
+    height: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_bullet-size
+    ) !important;
+    border-radius: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_border-radius
+    ) !important;
+    border-width: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_border-size
+    ) !important;
+
+    background-color: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_colors_inactive-background
+    ) !important;
+    border-color: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_colors_inactive-border-color
+    ) !important;
+    color: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_colors_inactive-icon-color
+    ) !important;
+
+    font-size: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_icon-size
+    );
+    & svg {
+      width: var(
+        --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_icon-size
+      );
+      height: var(
+        --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_icon-size
+      );
+    }
+  }
+  :global(.mantine-Timeline-item)[data-variant="icon-alternative"][data-active]
+    & {
+    background-color: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_colors_active-background
+    ) !important;
+    border-color: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_colors_active-border-color
+    ) !important;
+    color: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_icon-alternative_properties_colors_active-icon-color
+    ) !important;
+  }
+
+  /* Avatar Variant */
+  :global(.mantine-Timeline-item)[data-variant="avatar"] & {
+    /* Avatar sizing is often governed by the avatar itself, but we'll apply the radius and opacity */
+    border-radius: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_properties_border-radius
+    ) !important;
+    border-width: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_properties_border-size
+    ) !important;
+    opacity: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_properties_inactive-avatar-opacity
+    ) !important;
+
+    background-color: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_properties_colors_inactive-background
+    ) !important;
+    border-color: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_properties_colors_inactive-border-color
+    ) !important;
+  }
+  :global(.mantine-Timeline-item)[data-variant="avatar"][data-active] & {
+    opacity: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_properties_active-avatar-opacity
+    ) !important;
+    background-color: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_properties_colors_active-background
+    ) !important;
+    border-color: var(
+      --recursica_ui-kit_components_timeline-bullet_variants_types_avatar_properties_colors_active-border-color
+    ) !important;
+  }
+}
+
+.itemTitle {
+  font-family: var(
+    --recursica_ui-kit_components_timeline_properties_title-text_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_timeline_properties_title-text_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_timeline_properties_title-text_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_timeline_properties_title-text_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_timeline_properties_title-text_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_timeline_properties_title-text_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_timeline_properties_title-text_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_timeline_properties_title-text_text-transform
+  );
+
+  /* Title Description Gap */
+  margin-bottom: var(
+    --recursica_ui-kit_components_timeline_properties_title-description-gap
+  ) !important;
+
+  /* Inactive Title Color */
+  color: var(
+    --recursica_ui-kit_components_timeline_properties_colors_inactive-title-color
+  ) !important;
+
+  /* Active Title Color */
+  :global(.mantine-Timeline-item)[data-active] & {
+    color: var(
+      --recursica_ui-kit_components_timeline_properties_colors_active-title-color
+    ) !important;
+  }
+}
+
+.itemContent {
+  display: flex;
+  flex-direction: column;
+  gap: var(
+    --recursica_ui-kit_components_timeline_properties_description-timestamp-gap
+  );
+  max-width: var(
+    --recursica_ui-kit_components_timeline_properties_max-text-width
+  );
+}
+
+.description {
+  font-family: var(
+    --recursica_ui-kit_components_timeline_properties_description-text_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_timeline_properties_description-text_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_timeline_properties_description-text_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_timeline_properties_description-text_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_timeline_properties_description-text_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_timeline_properties_description-text_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_timeline_properties_description-text_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_timeline_properties_description-text_text-transform
+  );
+
+  color: var(
+    --recursica_ui-kit_components_timeline_properties_colors_inactive-description-color
+  );
+
+  :global(.mantine-Timeline-item)[data-active] & {
+    color: var(
+      --recursica_ui-kit_components_timeline_properties_colors_active-description-color
+    );
+  }
+}
+
+.timestamp {
+  font-family: var(
+    --recursica_ui-kit_components_timeline_properties_timestamp-text_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_timeline_properties_timestamp-text_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_timeline_properties_timestamp-text_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_timeline_properties_timestamp-text_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_timeline_properties_timestamp-text_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_timeline_properties_timestamp-text_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_timeline_properties_timestamp-text_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_timeline_properties_timestamp-text_text-transform
+  );
+
+  color: var(
+    --recursica_ui-kit_components_timeline_properties_colors_inactive-timestamp-color
+  );
+
+  :global(.mantine-Timeline-item)[data-active] & {
+    color: var(
+      --recursica_ui-kit_components_timeline_properties_colors_active-timestamp-color
+    );
+  }
+}