@recursica/mui-adapter 0.10.0 → 0.12.0

package/src/components/Dropdown/Dropdown.tsx

@@ -18,7 +18,14 @@ import { type RecursicaDropdownProps as BaseRecursicaDropdownProps } from "@recu
 export interface RecursicaDropdownProps
   extends Omit<
       MuiSelectProps,
-      "size" | "variant" | "classes" | "inputProps" | "SelectDisplayProps"
+      | keyof React.HTMLAttributes<HTMLDivElement>
+      | "size"
+      | "variant"
+      | "classes"
+      | "inputProps"
+      | "SelectDisplayProps"
+      | "ref"
+      | "error"
     >,
     Omit<
       RecursicaFormControlWrapperProps,
@@ -160,7 +167,7 @@ export const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
             inputProps={{
               "data-disabled": disabled ? "true" : undefined,
               "data-error": error ? "true" : undefined,
-              ...(restRecord.inputProps as any),
+              ...(restRecord.inputProps as Record<string, unknown>),
             }}
             {...(sanitizedProps as unknown as MuiSelectProps)}
           >

package/src/components/FormControlWrapper/FormControlWrapper.tsx

@@ -9,11 +9,15 @@ import styles from "./FormControlWrapper.module.css";
 import { type RecursicaFormControlWrapperProps as BaseRecursicaFormControlWrapperProps } from "@recursica/adapter-common";
 
 export interface RecursicaFormControlWrapperProps
-  extends Omit<FormControlProps, "margin" | "variant" | "size" | "color">,
+  extends Omit<
+      FormControlProps,
+      "margin" | "variant" | "size" | "color" | "error"
+    >,
     BaseRecursicaFormControlWrapperProps {
   overStyled?: boolean;
   label?: React.ReactNode;
   focused?: boolean;
+  error?: React.ReactNode;
 }
 
 export type FormControlWrapperProps = RecursicaFormControlWrapperProps;

package/src/components/HoverCard/HoverCard.stories.tsx

@@ -159,7 +159,7 @@ export const RichContent: Story = {
 
         <HoverCard.Dropdown>
           <Group>
-            <Avatar src={null} alt="User avatar" />
+            <Avatar src={undefined} alt="User avatar" />
             <Stack>
               <Text>Jane Doe</Text>
               <Text>Software Engineer at Recursica</Text>

package/src/components/HoverCard/HoverCard.tsx

@@ -63,7 +63,10 @@ const HoverCardBase = function HoverCard({
 
   React.Children.forEach(children, (child) => {
     if (isValidElement(child)) {
-      const childElement = child as any;
+      const childElement = child as unknown as {
+        type?: { displayName?: string };
+        props: { children?: React.ReactNode };
+      };
       if (childElement.type?.displayName === "HoverCardTarget") {
         targetNode = childElement.props.children;
       } else if (childElement.type?.displayName === "HoverCardDropdown") {
@@ -83,7 +86,7 @@ const HoverCardBase = function HoverCard({
   return (
     <MuiTooltip
       title={dropdownNode}
-      placement={position as any}
+      placement={position as unknown as MuiTooltipProps["placement"]}
       arrow={withBeak}
       enterDelay={openDelay}
       leaveDelay={closeDelay}
@@ -100,8 +103,8 @@ const HoverCardBase = function HoverCard({
           ],
         },
       }}
-      classes={mergedClassNames as any}
-      {...(sanitizedProps as any)}
+      classes={mergedClassNames as unknown as MuiTooltipProps["classes"]}
+      {...(sanitizedProps as unknown as Record<string, unknown>)}
     >
       {/* Tooltip requires a single valid React element child that accepts a ref */}
       {isValidElement(targetNode) ? targetNode : <span>{targetNode}</span>}

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

@@ -13,7 +13,7 @@ import { Menu, MenuItem, MenuDivider } from "./Menu";
 import { Button } from "../Button";
 import { ListSubheader } from "@mui/material";
 
-const SettingsIcon = (props: any) => (
+const SettingsIcon = (props: React.ComponentProps<"svg">) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="14"
@@ -31,7 +31,7 @@ const SettingsIcon = (props: any) => (
   </svg>
 );
 
-const SearchIcon = (props: any) => (
+const SearchIcon = (props: React.ComponentProps<"svg">) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="14"
@@ -49,7 +49,7 @@ const SearchIcon = (props: any) => (
   </svg>
 );
 
-const MessageIcon = (props: any) => (
+const MessageIcon = (props: React.ComponentProps<"svg">) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="14"
@@ -66,7 +66,7 @@ const MessageIcon = (props: any) => (
   </svg>
 );
 
-const ImageIcon = (props: any) => (
+const ImageIcon = (props: React.ComponentProps<"svg">) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="14"
@@ -85,7 +85,7 @@ const ImageIcon = (props: any) => (
   </svg>
 );
 
-const TrashIcon = (props: any) => (
+const TrashIcon = (props: React.ComponentProps<"svg">) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="14"
@@ -103,7 +103,7 @@ const TrashIcon = (props: any) => (
   </svg>
 );
 
-const ArrowsIcon = (props: any) => (
+const ArrowsIcon = (props: React.ComponentProps<"svg">) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="14"
@@ -123,7 +123,7 @@ const ArrowsIcon = (props: any) => (
   </svg>
 );
 
-type MenuStoryArgs = Record<string, any>;
+type MenuStoryArgs = Record<string, unknown>;
 
 const meta: Meta = {
   title: "UI-Kit/Menu",
@@ -135,11 +135,17 @@ export default meta;
 
 type Story = StoryObj<MenuStoryArgs>;
 
-const InteractiveMenu = ({ children, openDelay, ...args }: any) => {
+interface InteractiveMenuProps {
+  children?: React.ReactNode;
+  opened?: boolean;
+  [key: string]: unknown;
+}
+
+const InteractiveMenu = ({ children, ...args }: InteractiveMenuProps) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
 
-  const open = Boolean(anchorEl) || args.opened;
+  const open = Boolean(anchorEl) || Boolean(args.opened);
 
   useEffect(() => {
     if (args.opened && buttonRef.current) {

package/src/components/Modal/Modal.tsx

@@ -65,7 +65,8 @@ const ModalRoot = forwardRef<HTMLDivElement, ModalProps>(function ModalRoot(
     if (
       React.isValidElement(child) &&
       (child.type === ModalFooter ||
-        (child.type as any)?.displayName === "Modal.Footer")
+        (child.type as unknown as { displayName?: string })?.displayName ===
+          "Modal.Footer")
     ) {
       footer = child;
     } else {
@@ -81,7 +82,11 @@ const ModalRoot = forwardRef<HTMLDivElement, ModalProps>(function ModalRoot(
         paper: styles.inner,
       }}
       {...(sanitizedProps as MuiDialogProps)}
-      open={opened || (sanitizedProps as any).open}
+      open={
+        opened ||
+        ((sanitizedProps as Record<string, unknown>).open as boolean) ||
+        false
+      }
       onClose={onClose}
     >
       {(title || withCloseButton) && (
@@ -117,6 +122,7 @@ const ModalTitle = forwardRef<HTMLDivElement, ModalTitleProps>(
 
     return (
       <MuiDialogTitle
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ref={ref as any}
         className={`${styles.title} ${className || ""}`}
         {...(sanitizedProps as MuiDialogTitleProps)}
@@ -159,10 +165,10 @@ const ModalBody = forwardRef<HTMLDivElement, ModalBodyProps>(function ModalBody(
   return (
     <MuiDialogContent
       ref={(node) => {
-        if (typeof ref === "function") ref(node as any);
+        if (typeof ref === "function") ref(node as HTMLDivElement);
         else if (ref)
           (ref as React.MutableRefObject<HTMLDivElement | null>).current =
-            node as any;
+            node as HTMLDivElement;
         if (internalRef)
           (
             internalRef as React.MutableRefObject<HTMLDivElement | null>
@@ -193,6 +199,7 @@ const ModalFooter = forwardRef<HTMLDivElement, ModalFooterProps>(
 
     return (
       <MuiDialogActions
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ref={ref as any}
         className={`${styles.footer} ${className || ""}`}
         {...(sanitizedProps as MuiDialogActionsProps)}

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

@@ -21,8 +21,6 @@ const meta: Meta<typeof NumberInput> = {
       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 } },

package/src/components/NumberInput/NumberInput.tsx

@@ -63,6 +63,11 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
       emptyValueComponent,
       value,
       defaultValue,
+      leftSection,
+      rightSection,
+      min,
+      max,
+      step,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       hideControls = false,
       ...rest
@@ -89,6 +94,18 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
       ? `${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}
@@ -127,6 +144,16 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
             label={undefined}
             error={undefined}
             required={undefined}
+            InputProps={{
+              startAdornment,
+              endAdornment,
+            }}
+            inputProps={{
+              min,
+              max,
+              step,
+              ...(restRecord.inputProps as Record<string, unknown>),
+            }}
             {...(sanitizedProps as unknown as MuiNumberInputProps)}
           />
         }

package/src/components/Pagination/Pagination.tsx

@@ -44,15 +44,17 @@ function usePaginationClassNames(restRecord: Record<string, unknown>): {
 }
 
 const _Pagination = forwardRef<HTMLDivElement, PaginationProps>(
-  function Pagination(
-    {
+  function Pagination(props, ref) {
+    const {
       overStyled = false,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       withLabels,
+      total,
+      withEdges,
+      withControls,
       ...rest
-    },
-    ref,
-  ) {
+    } = props;
+
     const sanitizedProps = filterStylingProps(rest, overStyled);
     const stylingParams = usePaginationClassNames(
       sanitizedProps as Record<string, unknown>,
@@ -61,6 +63,11 @@ const _Pagination = forwardRef<HTMLDivElement, PaginationProps>(
     return (
       <div ref={ref} className={stylingParams.className}>
         <MuiPagination
+          count={total}
+          showFirstButton={withEdges}
+          showLastButton={withEdges}
+          hidePrevButton={withControls === false ? true : undefined}
+          hideNextButton={withControls === false ? true : undefined}
           classes={stylingParams.classNames}
           {...(sanitizedProps as MuiPaginationProps)}
         />

package/src/components/Radio/Radio.tsx

@@ -147,6 +147,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
     // We omit Mui's sizing/coloring so we rely strictly on variables from Radio.module.css
     const radioNode = (
       <MuiRadio
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ref={ref as any}
         icon={<RadioIcon />}
         checkedIcon={<RadioIcon className={styles.checked} />}

package/src/components/Radio/index.ts

@@ -1 +1,2 @@
 export * from "./Radio";
+export * from "./RadioGroup";

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -108,7 +108,11 @@ const _SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
         data-orientation={orientation}
         exclusive
         value={value}
-        onChange={handleChange as any}
+        onChange={
+          handleChange as React.ComponentProps<
+            typeof MuiSegmentedControl
+          >["onChange"]
+        }
         {...(sanitizedProps as Omit<
           MuiSegmentedControlProps,
           "variant" | "size" | "value" | "onChange"

package/src/components/Slider/Slider.tsx

@@ -129,7 +129,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
       if (!isNaN(parsed)) {
         // Clamp input value to bounds
         const clamped = Math.max(min, Math.min(max, parsed));
-        handleValueChange(null as any, clamped);
+        handleValueChange(null as unknown as Event, clamped);
       }
     };
 
@@ -211,7 +211,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
         label={label}
         assistiveText={assistiveText}
         assistiveWithIcon={assistiveWithIcon}
-        error={error as any}
+        error={!!error}
         required={required}
         id={id}
         readOnly={readOnly}
@@ -239,14 +239,22 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
                 disabled={disabled}
                 value={resolvedValue}
                 onChange={handleValueChange}
-                onChangeCommitted={onChangeEnd as any}
+                onChangeCommitted={
+                  onChangeEnd as unknown as (
+                    event: Event | React.SyntheticEvent,
+                    value: number | number[],
+                  ) => void
+                }
                 min={min}
                 max={max}
                 step={step}
                 valueLabelDisplay={tooltipLabel === null ? "off" : "auto"}
                 valueLabelFormat={
                   typeof tooltipLabel === "function"
-                    ? (tooltipLabel as any)
+                    ? (tooltipLabel as unknown as (
+                        value: number,
+                        index: number,
+                      ) => React.ReactNode)
                     : undefined
                 }
                 {...(sanitizedProps as unknown as MuiSliderProps)}

package/src/components/Stack/Stack.tsx

@@ -17,7 +17,7 @@ export type StackProps = WithRecursicaSpacing<
 >;
 
 export const Stack = forwardRef<HTMLDivElement, StackProps>(function Stack(
-  { children, gap = "rec-default", ...rest },
+  { children, gap = "rec-default", align, justify, ...rest },
   ref,
 ) {
   const safeProps = filterSxProp(rest as Record<string, unknown>);
@@ -27,7 +27,13 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(function Stack(
       : gap;
 
   return (
-    <MUIStack ref={ref} spacing={resolvedGap} {...safeProps}>
+    <MUIStack
+      ref={ref}
+      spacing={resolvedGap}
+      alignItems={align}
+      justifyContent={justify}
+      {...safeProps}
+    >
       {children}
     </MUIStack>
   );

package/src/components/Stepper/Stepper.stories.tsx

@@ -48,7 +48,7 @@ const InteractiveStepper = (args: React.ComponentProps<typeof Stepper>) => {
   ];
 
   return (
-    <Flex direction="column" w={600}>
+    <Flex direction="column" style={{ width: 600 }}>
       <Stepper {...args} activeStep={active}>
         {steps.map((step, index) => (
           <Step key={index} completed={active > index}>
@@ -125,7 +125,7 @@ const StressTestStepper = (args: React.ComponentProps<typeof Stepper>) => {
   ];
 
   return (
-    <Flex direction="column" w={600}>
+    <Flex direction="column" style={{ width: 600 }}>
       <Stepper {...args} activeStep={active}>
         {steps.map((step, index) => (
           <Step key={index} completed={active > index}>

package/src/components/Stepper/Stepper.tsx

@@ -46,6 +46,7 @@ export const Stepper = forwardRef<HTMLDivElement, StepperProps>(
         data-orientation={orientation}
       >
         <MuiStepper
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           ref={ref as any}
           orientation={orientation}
           connector={

package/src/components/Switch/Switch.tsx

@@ -37,7 +37,7 @@ export type RecursicaSwitchPropsAlias =
 
 export type SwitchProps = RecursicaOverStyled<RecursicaSwitchPropsAlias>;
 
-type SwitchComponent = any;
+type SwitchComponent = React.ComponentType<SwitchProps>;
 
 export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
   function Switch(props, ref) {
@@ -137,6 +137,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
     // We omit Mui's sizing/coloring so we rely strictly on variables from Switch.module.css
     const switchNode = (
       <MuiSwitch
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ref={ref as any}
         className={!label ? `${finalClass} ${styles.inner}` : styles.inner}
         classes={mergedClassNames}

package/src/components/Switch/index.ts

@@ -1 +1,2 @@
 export * from "./Switch";
+export * from "./SwitchGroup";

package/src/components/Table/Table.tsx

@@ -22,7 +22,7 @@ export type TableProps = RecursicaOverStyled<
 >;
 
 const TableBase = forwardRef<HTMLTableElement, TableProps>(function Table(
-  { overStyled = false, className, ...rest },
+  { overStyled = false, ...rest },
   ref,
 ) {
   const sanitizedProps = filterStylingProps(rest, overStyled);

package/src/components/Tabs/Tabs.stories.tsx

@@ -43,12 +43,12 @@ const InteractiveTabs = (
 ) => {
   const [value, setValue] = useState("gallery");
 
-  const handleChange = (event: React.SyntheticEvent, newValue: string) => {
+  const handleChange = (_event: React.SyntheticEvent, newValue: string) => {
     setValue(newValue);
   };
 
   return (
-    <Flex w={600} h={300}>
+    <Flex style={{ width: 600, height: 300 }}>
       <TabContext value={value}>
         <Tabs onChange={handleChange} {...args}>
           <Tab

package/src/components/Tabs/Tabs.tsx

@@ -24,6 +24,7 @@ export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
     const {
       variant = "default",
       orientation = "horizontal",
+      inverted = false,
       overStyled = false,
       className,
       ...rest
@@ -38,6 +39,7 @@ export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
         className={`${styles.root} ${className || ""}`}
         data-variant={variant}
         data-orientation={orientation}
+        data-inverted={inverted || undefined}
         classes={{
           flexContainer: styles.list,
           indicator: styles.indicator,

package/src/components/TextArea/TextArea.tsx

@@ -18,7 +18,15 @@ import { type RecursicaTextAreaProps as BaseRecursicaTextAreaProps } from "@recu
 export interface RecursicaTextAreaProps
   extends Omit<
       MuiTextareaProps,
-      "size" | "variant" | "radius" | "wrapperProps" | "maxRows" | "minRows"
+      | keyof React.HTMLAttributes<HTMLDivElement>
+      | "size"
+      | "variant"
+      | "radius"
+      | "wrapperProps"
+      | "maxRows"
+      | "minRows"
+      | "classes"
+      | "error"
     >,
     Omit<
       RecursicaFormControlWrapperProps,
@@ -122,6 +130,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
           /* Naked Input execution safely decoupled from Mui's macro Input.Wrapper DOM hooks */
           <MuiTextarea
             multiline
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             inputRef={ref as any}
             classes={mergedClassNames}
             disabled={disabled}

package/src/components/TextField/TextField.tsx

@@ -14,7 +14,12 @@ import { type RecursicaTextFieldProps as BaseRecursicaTextFieldProps } from "@re
 export interface RecursicaTextFieldProps
   extends Omit<
       InputBaseProps,
-      "color" | "size" | "startAdornment" | "endAdornment" | "autoComplete"
+      | "color"
+      | "size"
+      | "startAdornment"
+      | "endAdornment"
+      | "autoComplete"
+      | "error"
     >,
     Omit<
       React.ComponentPropsWithoutRef<"input">,
@@ -137,7 +142,9 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         required={required}
         id={id}
         readOnly={readOnly}
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         readOnlyComponent={readOnlyComponent as any}
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         emptyValueComponent={(emptyValueComponent as any) || undefined}
         readOnlyType="text"
         readOnlyValue={value !== undefined ? value : defaultValue}

package/src/components/Timeline/TimelineItem.tsx

@@ -29,11 +29,13 @@ export const TimelineItem = React.forwardRef<HTMLDivElement, TimelineItemProps>(
       overStyled = false,
       timestamp,
       bulletVariant = "default",
+      bullet,
       children,
       ...rest
     },
     ref,
   ) {
+    void bullet;
     const sanitizedProps = filterStylingProps(rest, overStyled);
 
     const mergedClassNames: Partial<Record<string, string>> = {

package/src/components/Timeline/index.ts

@@ -1 +1,2 @@
 export * from "./Timeline";
+export * from "./TimelineItem";

package/src/components/Tree/Tree.module.css

@@ -0,0 +1,43 @@
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_border-radius */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_border-size */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_button-node-gap */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_horizontal-padding */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_indent */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_item-gap */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_max-width */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_selected-text_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_selected-text_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_selected-text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_selected-text_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_selected-text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_selected-text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_selected-text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_selected-text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_unselected-text_font-family */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_unselected-text_font-size */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_unselected-text_font-style */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_unselected-text_font-weight */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_unselected-text_letter-spacing */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_unselected-text_line-height */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_unselected-text_text-decoration */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_unselected-text_text-transform */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_vertical-padding */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_colors_hover-background */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_colors_hover-border-color */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_colors_hover-text */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_colors_selected-background */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_colors_selected-border-color */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_colors_selected-text */
+/* recursica-ignore: --recursica_ui-kit_components_tree_properties_colors_unselected-text */
+
+.root {
+  box-sizing: border-box;
+  font-family: sans-serif;
+  padding: 24px;
+  border: 1px dashed #ccc;
+  border-radius: 8px;
+  color: #666;
+  text-align: center;
+  font-weight: 500;
+  background-color: #fafafa;
+}

package/src/components/Tree/Tree.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tree } from "./Tree";
+
+const meta: Meta<typeof Tree> = {
+  title: "Components/Tree",
+  component: Tree,
+};
+
+export default meta;
+type Story = StoryObj<typeof Tree>;
+
+export const ComingSoon: Story = {
+  args: {},
+};

package/src/components/Tree/Tree.tsx

@@ -0,0 +1,24 @@
+import React, { forwardRef } from "react";
+import { type RecursicaOverStyled } from "../../utils/filterStylingProps";
+import styles from "./Tree.module.css";
+
+export interface TreeProps extends React.ComponentPropsWithoutRef<"div"> {
+  overStyled?: boolean;
+}
+
+/**
+ * Placeholder component for Tree (Coming Soon).
+ */
+export const Tree = forwardRef<HTMLDivElement, RecursicaOverStyled<TreeProps>>(
+  function Tree({ overStyled: _overStyled = false, className, ...rest }, ref) {
+    void _overStyled;
+    const finalClass = className ? `${styles.root} ${className}` : styles.root;
+    return (
+      <div ref={ref} className={finalClass} {...rest}>
+        Tree (Coming Soon)
+      </div>
+    );
+  },
+);
+
+Tree.displayName = "Tree";

package/src/components/Tree/index.ts

@@ -0,0 +1 @@
+export * from "./Tree";

package/src/components/Typography/index.ts

@@ -0,0 +1 @@
+export * from "./Typography";