@recursica/mui-adapter 0.11.0 → 0.12.0

package/dist/src/components/DatePicker/DatePicker.d.ts

@@ -1,4 +1,20 @@
 import { default as React } from 'react';
 import { RecursicaDatePickerProps } from '@recursica/adapter-common';
-export type DatePickerProps = React.HTMLAttributes<HTMLDivElement> & RecursicaDatePickerProps;
+export type DatePickerProps = Omit<React.HTMLAttributes<HTMLDivElement>, "value" | "onChange" | "defaultValue"> & RecursicaDatePickerProps & {
+    disabled?: boolean;
+    label?: React.ReactNode;
+    assistiveText?: string;
+    error?: React.ReactNode;
+    required?: boolean;
+    withAsterisk?: boolean;
+    placeholder?: string;
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onChange?: (value: Date | null) => void;
+    readOnly?: boolean;
+    formLayout?: "stacked" | "side-by-side";
+    leftSection?: React.ReactNode;
+    labelWithEditIcon?: boolean;
+    onLabelEditClick?: () => void;
+};
 export declare const DatePicker: React.FC<DatePickerProps>;

package/dist/src/components/Dropdown/Dropdown.d.ts

@@ -3,7 +3,7 @@ import { SelectProps as MuiSelectProps } from '@mui/material';
 import { ReadOnlyControlProps, RecursicaDropdownProps as BaseRecursicaDropdownProps } from '@recursica/adapter-common';
 import { RecursicaOverStyled } from '../../utils/filterStylingProps';
 import { RecursicaFormControlWrapperProps } from '../FormControlWrapper/FormControlWrapper';
-export interface RecursicaDropdownProps extends Omit<MuiSelectProps, keyof React.HTMLAttributes<HTMLDivElement> | "size" | "variant" | "classes" | "inputProps" | "SelectDisplayProps" | "ref">, Omit<RecursicaFormControlWrapperProps, "controlMaxWidth" | "controlMinWidth">, ReadOnlyControlProps, BaseRecursicaDropdownProps {
+export interface RecursicaDropdownProps extends Omit<MuiSelectProps, keyof React.HTMLAttributes<HTMLDivElement> | "size" | "variant" | "classes" | "inputProps" | "SelectDisplayProps" | "ref" | "error">, Omit<RecursicaFormControlWrapperProps, "controlMaxWidth" | "controlMinWidth">, ReadOnlyControlProps, BaseRecursicaDropdownProps {
 }
 export type DropdownProps = RecursicaOverStyled<RecursicaDropdownProps>;
 export declare const Dropdown: React.ForwardRefExoticComponent<(Omit<Omit<import('@recursica/adapter-common').WithRecursicaSpacing<RecursicaDropdownProps>, import('@recursica/adapter-common').BlockedStylingKeys> & import('@recursica/adapter-common').ForbiddenStyles & {

package/dist/src/components/FormControlWrapper/FormControlWrapper.d.ts

@@ -1,10 +1,11 @@
 import { default as React } from 'react';
 import { FormControlProps } from '@mui/material';
 import { RecursicaFormControlWrapperProps as BaseRecursicaFormControlWrapperProps } from '@recursica/adapter-common';
-export interface RecursicaFormControlWrapperProps extends Omit<FormControlProps, "margin" | "variant" | "size" | "color">, BaseRecursicaFormControlWrapperProps {
+export interface RecursicaFormControlWrapperProps extends Omit<FormControlProps, "margin" | "variant" | "size" | "color" | "error">, BaseRecursicaFormControlWrapperProps {
     overStyled?: boolean;
     label?: React.ReactNode;
     focused?: boolean;
+    error?: React.ReactNode;
 }
 export type FormControlWrapperProps = RecursicaFormControlWrapperProps;
 export declare const FormControlWrapper: React.ForwardRefExoticComponent<Omit<RecursicaFormControlWrapperProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/TextArea/TextArea.d.ts

@@ -3,7 +3,7 @@ import { TextFieldProps as MuiTextareaProps } from '@mui/material';
 import { ReadOnlyControlProps, RecursicaTextAreaProps as BaseRecursicaTextAreaProps } from '@recursica/adapter-common';
 import { RecursicaOverStyled } from '../../utils/filterStylingProps';
 import { RecursicaFormControlWrapperProps } from '../FormControlWrapper/FormControlWrapper';
-export interface RecursicaTextAreaProps extends Omit<MuiTextareaProps, keyof React.HTMLAttributes<HTMLDivElement> | "size" | "variant" | "radius" | "wrapperProps" | "maxRows" | "minRows" | "classes">, Omit<RecursicaFormControlWrapperProps, "controlMaxWidth" | "controlMinWidth">, ReadOnlyControlProps, BaseRecursicaTextAreaProps {
+export interface RecursicaTextAreaProps extends Omit<MuiTextareaProps, keyof React.HTMLAttributes<HTMLDivElement> | "size" | "variant" | "radius" | "wrapperProps" | "maxRows" | "minRows" | "classes" | "error">, Omit<RecursicaFormControlWrapperProps, "controlMaxWidth" | "controlMinWidth">, ReadOnlyControlProps, BaseRecursicaTextAreaProps {
 }
 export type TextAreaProps = RecursicaOverStyled<RecursicaTextAreaProps>;
 export declare const TextArea: React.ForwardRefExoticComponent<(Omit<Omit<import('@recursica/adapter-common').WithRecursicaSpacing<RecursicaTextAreaProps>, import('@recursica/adapter-common').BlockedStylingKeys> & import('@recursica/adapter-common').ForbiddenStyles & {

package/dist/src/components/TextField/TextField.d.ts

@@ -3,7 +3,7 @@ import { InputBaseProps } from '@mui/material';
 import { ReadOnlyControlProps, RecursicaTextFieldProps as BaseRecursicaTextFieldProps } from '@recursica/adapter-common';
 import { RecursicaOverStyled } from '../../utils/filterStylingProps';
 import { RecursicaFormControlWrapperProps } from '../FormControlWrapper/FormControlWrapper';
-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 interface RecursicaTextFieldProps extends Omit<InputBaseProps, "color" | "size" | "startAdornment" | "endAdornment" | "autoComplete" | "error">, 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 declare const TextField: React.ForwardRefExoticComponent<(Omit<Omit<import('@recursica/adapter-common').WithRecursicaSpacing<RecursicaTextFieldProps>, import('@recursica/adapter-common').BlockedStylingKeys> & import('@recursica/adapter-common').ForbiddenStyles & {

package/dist/src/components/Tree/Tree.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { RecursicaOverStyled } from '../../utils/filterStylingProps';
+export interface TreeProps extends React.ComponentPropsWithoutRef<"div"> {
+    overStyled?: boolean;
+}
+/**
+ * Placeholder component for Tree (Coming Soon).
+ */
+export declare const Tree: React.ForwardRefExoticComponent<RecursicaOverStyled<TreeProps> & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/Tree/index.d.ts

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

package/dist/src/components/index.d.ts

@@ -46,3 +46,4 @@ export * from './Toast';
 export * from './Tooltip';
 export * from './TransferList';
 export * from './Typography';
+export * from './Tree';

package/dist/src/index.d.ts

@@ -83,4 +83,5 @@ export declare const Title: typeof rawComponents.Title;
 export declare const Toast: typeof rawComponents.Toast;
 export declare const Tooltip: typeof rawComponents.Tooltip;
 export declare const TransferList: typeof rawComponents.TransferList;
+export declare const Tree: typeof rawComponents.Tree;
 export type { RecursicaAutocompleteProps, RecursicaDropdownProps, RecursicaFormControlWrapperProps, RecursicaNumberInputProps, RecursicaSliderProps, RecursicaTextAreaProps, RecursicaTextFieldProps, RecursicaToastProps, } from './components';

package/package.json

@@ -13,7 +13,7 @@
     "url": "git+https://github.com/borderux/recursica.git",
     "directory": "packages/mui-adapter"
   },
-  "version": "0.11.0",
+  "version": "0.12.0",
   "publishConfig": {
     "access": "public"
   },
@@ -56,7 +56,7 @@
     "build-storybook": "storybook build -o storybook-static",
     "lint": "eslint .",
     "storybook": "storybook dev -p 6012",
-    "analyze-tokens": "analyze-tokens --css recursica_variables_scoped.css --dir src/components --output token-analysis.json",
+    "analyze-tokens": "analyze-tokens --css @recursica/official-release/recursica_variables_scoped.css --dir src/components --output token-analysis.json",
     "prebuild": "npm run analyze-tokens"
   },
   "devDependencies": {

package/src/components/Accordion/Accordion.tsx

@@ -37,6 +37,7 @@ const ChevronIcon = () => (
 const AccordionContext = createContext<{
   value: string | string[] | null;
   onChange: (val: string) => void;
+  chevron?: React.ReactNode;
 } | null>(null);
 
 // ==== ACCORDION CONTAINER ====
@@ -53,6 +54,7 @@ const AccordionBase = forwardRef<HTMLDivElement, AccordionProps>(
       defaultValue,
       onChange,
       multiple = false,
+      chevron,
       children,
       ...rest
     },
@@ -90,7 +92,7 @@ const AccordionBase = forwardRef<HTMLDivElement, AccordionProps>(
 
     return (
       <AccordionContext.Provider
-        value={{ value: activeValue, onChange: handleItemChange }}
+        value={{ value: activeValue, onChange: handleItemChange, chevron }}
       >
         <div
           ref={ref}
@@ -202,15 +204,14 @@ export const AccordionControl = forwardRef<
   const finalClass =
     [styles.control, classNameProp].filter(Boolean).join(" ") || undefined;
 
+  const ctx = useContext(AccordionContext);
+  const resolvedChevron = ctx?.chevron ?? <ChevronIcon />;
+
   return (
     <MuiAccordionSummary
       ref={ref}
       className={finalClass}
-      expandIcon={
-        <span className={styles.chevron}>
-          <ChevronIcon />
-        </span>
-      }
+      expandIcon={<span className={styles.chevron}>{resolvedChevron}</span>}
       {...(sanitizedProps as unknown as MuiAccordionSummaryProps)}
     >
       {leftIcon && (

package/src/components/Checkbox/CheckboxGroup.tsx

@@ -11,6 +11,7 @@ import styles from "./Checkbox.module.css";
 
 import { FormGroup as MuiFormGroup } from "@mui/material";
 
+// eslint-disable-next-line react-refresh/only-export-components
 export const CheckboxGroupContext = React.createContext<{
   value?: any[];
   onChange?: (event: React.SyntheticEvent, value: any) => void;

package/src/components/Container/Container.tsx

@@ -20,7 +20,7 @@ export type ContainerProps = WithRecursicaSpacing<
 >;
 
 export const Container = forwardRef<HTMLDivElement, ContainerProps>(
-  function Container({ children, size, ...rest }, ref) {
+  function Container({ children, size, fluid, ...rest }, ref) {
     const mapSize: Record<string, "xs" | "sm" | "md" | "lg" | "xl"> = {
       "rec-sm": "sm",
       "rec-default": "md",
@@ -30,8 +30,11 @@ export const Container = forwardRef<HTMLDivElement, ContainerProps>(
       "rec-2xl": "xl",
     };
 
-    const resolvedSize =
-      typeof size === "string" && mapSize[size] ? mapSize[size] : size;
+    const resolvedSize = fluid
+      ? false
+      : typeof size === "string" && mapSize[size]
+        ? mapSize[size]
+        : size;
 
     return (
       <MUIContainer

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { DatePicker } from "./DatePicker";
 import { formControlArgTypes } from "../../../.storybook/commonArgTypes";

package/src/components/DatePicker/DatePicker.tsx

@@ -1,10 +1,47 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import React from "react";
 import "./DatePicker.module.css";
 import { type RecursicaDatePickerProps } from "@recursica/adapter-common";
 
-export type DatePickerProps = React.HTMLAttributes<HTMLDivElement> &
-  RecursicaDatePickerProps;
+export type DatePickerProps = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "value" | "onChange" | "defaultValue"
+> &
+  RecursicaDatePickerProps & {
+    disabled?: boolean;
+    label?: React.ReactNode;
+    assistiveText?: string;
+    error?: React.ReactNode;
+    required?: boolean;
+    withAsterisk?: boolean;
+    placeholder?: string;
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onChange?: (value: Date | null) => void;
+    readOnly?: boolean;
+    formLayout?: "stacked" | "side-by-side";
+    leftSection?: React.ReactNode;
+    labelWithEditIcon?: boolean;
+    onLabelEditClick?: () => void;
+  };
 
-export const DatePicker: React.FC<DatePickerProps> = (props) => {
+export const DatePicker: React.FC<DatePickerProps> = ({
+  disabled,
+  label,
+  assistiveText,
+  error,
+  required,
+  withAsterisk,
+  placeholder,
+  value,
+  defaultValue,
+  onChange,
+  readOnly,
+  formLayout,
+  leftSection,
+  labelWithEditIcon,
+  onLabelEditClick,
+  ...props
+}) => {
   return <div {...props}>DatePicker</div>;
 };

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -42,12 +42,6 @@ const meta: Meta<DropdownStoryProps> = {
     clearable: {
       control: "boolean",
     },
-    checked: {
-      table: { disable: true },
-    },
-    defaultChecked: {
-      table: { disable: true },
-    },
     containerWidth: {
       table: { disable: true },
     },

package/src/components/Dropdown/Dropdown.tsx

@@ -25,6 +25,7 @@ export interface RecursicaDropdownProps
       | "inputProps"
       | "SelectDisplayProps"
       | "ref"
+      | "error"
     >,
     Omit<
       RecursicaFormControlWrapperProps,

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/Menu/Menu.stories.tsx

@@ -145,7 +145,7 @@ 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/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/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/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

@@ -26,6 +26,7 @@ export interface RecursicaTextAreaProps
       | "maxRows"
       | "minRows"
       | "classes"
+      | "error"
     >,
     Omit<
       RecursicaFormControlWrapperProps,

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">,

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/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/index.ts

@@ -46,3 +46,4 @@ export * from "./Toast";
 export * from "./Tooltip";
 export * from "./TransferList";
 export * from "./Typography";
+export * from "./Tree";

package/src/index.ts

@@ -169,6 +169,9 @@ export const Tooltip = wrapComponent(
 export const TransferList = wrapComponent(
   rawComponents.TransferList,
 ) as typeof rawComponents.TransferList;
+export const Tree = wrapComponent(
+  rawComponents.Tree,
+) as typeof rawComponents.Tree;
 
 export type {
   RecursicaAutocompleteProps,