@recursica/mantine-adapter 0.27.0 → 0.29.0

package/src/components/Table/Table.module.css

@@ -1,7 +1,392 @@
 /* HARDCODED VALUES:
- * None. This is a generic layout wrapper.
+ * - border-collapse: separate; border-spacing: 0; (To support custom border-radius on table elements)
+ * - overflow: hidden; (To prevent content from bleeding outside the rounded table border)
  */
 
 .root {
-  /* Mantine Table handles table layout natively. */
+  border-collapse: separate;
+  border-spacing: 0;
+  border-radius: var(
+    --recursica_ui-kit_components_table_properties_border-radius
+  );
+  border: var(--recursica_ui-kit_components_table_properties_border-size) solid
+    var(--recursica_ui-kit_components_table_properties_colors_border-color);
+  overflow: hidden;
+}
+
+/* ==========================================
+   1. General Cell Dividers & Padding Defaults
+   ========================================== */
+
+.root th,
+.root td {
+  padding: var(--recursica_ui-kit_components_table_properties_row-padding)
+    var(--recursica_ui-kit_components_table_properties_padding);
+  border-bottom: var(
+      --recursica_ui-kit_components_table_properties_row-divider-size
+    )
+    solid
+    var(--recursica_ui-kit_components_table_properties_colors_row-divider-color);
+}
+
+.root th + th,
+.root td + td {
+  border-left: var(
+      --recursica_ui-kit_components_table_properties_column-divider-size
+    )
+    solid
+    var(
+      --recursica_ui-kit_components_table_properties_colors_column-divider-color
+    );
+}
+
+/* ==========================================
+   2. Row Highlighting & Selection Styles
+   ========================================== */
+
+/* Striped rows */
+.root tbody tr:nth-of-type(even) td {
+  background-color: color-mix(
+    in srgb,
+    var(--recursica_ui-kit_components_table_properties_colors_striped-color)
+      calc(
+        var(
+            --recursica_ui-kit_components_table_properties_opacities_striped-opacity
+          ) *
+          100%
+      ),
+    transparent
+  );
+}
+
+/* Selected rows */
+.root tbody tr[data-selected] td {
+  background-color: color-mix(
+    in srgb,
+    var(--recursica_ui-kit_components_table_properties_colors_selected-color)
+      calc(
+        var(
+            --recursica_ui-kit_components_table_properties_opacities_selected-opacity
+          ) *
+          100%
+      ),
+    transparent
+  );
+}
+
+/* Hover rows */
+.root tbody tr:hover td {
+  background-color: color-mix(
+    in srgb,
+    var(
+        --recursica_ui-kit_components_table_properties_colors_highlight-on-hover-color
+      )
+      calc(
+        var(
+            --recursica_ui-kit_components_table_properties_opacities_highlight-on-hover-opacity
+          ) *
+          100%
+      ),
+    transparent
+  );
+}
+
+/* ==========================================
+   3. Table Headers (th)
+   ========================================== */
+
+.root thead th {
+  background-color: var(
+    --recursica_ui-kit_components_table-header_properties_colors_cell-color-enabled
+  );
+  color: var(
+    --recursica_ui-kit_components_table-header_properties_colors_text-color-enabled
+  );
+  padding: var(
+      --recursica_ui-kit_components_table-header_properties_padding-vertical
+    )
+    var(
+      --recursica_ui-kit_components_table-header_properties_padding-horizontal
+    );
+  margin-top: var(
+    --recursica_ui-kit_components_table-header_properties_vertical-margin
+  );
+  margin-bottom: var(
+    --recursica_ui-kit_components_table-header_properties_vertical-margin
+  );
+  border-bottom: var(
+      --recursica_ui-kit_components_table-header_properties_horizontal-divider-size
+    )
+    solid
+    var(
+      --recursica_ui-kit_components_table-header_properties_colors_horizontal-divider-color
+    );
+
+  /* Unsorted text style by default */
+  font-family: var(
+    --recursica_ui-kit_components_table-header_properties_unsorted-text-style_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_table-header_properties_unsorted-text-style_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_table-header_properties_unsorted-text-style_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_table-header_properties_unsorted-text-style_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_table-header_properties_unsorted-text-style_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_table-header_properties_unsorted-text-style_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_table-header_properties_unsorted-text-style_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_table-header_properties_unsorted-text-style_text-transform
+  );
+}
+
+.root thead th + th {
+  border-left: var(
+      --recursica_ui-kit_components_table-header_properties_vertical-divider-size
+    )
+    solid
+    var(
+      --recursica_ui-kit_components_table-header_properties_colors_vertical-divider-color
+    );
+}
+
+/* Unsorted specific state overrides */
+.root thead th:not([data-sorted="true"]) {
+  background-color: var(
+    --recursica_ui-kit_components_table-header_properties_colors_unsorted-cell-color
+  );
+  color: var(
+    --recursica_ui-kit_components_table-header_properties_colors_unsorted-text-color
+  );
+}
+
+/* Sorted specific state overrides */
+.root thead th[data-sorted="true"] {
+  background-color: var(
+    --recursica_ui-kit_components_table-header_properties_colors_sorted-cell-color
+  );
+  color: var(
+    --recursica_ui-kit_components_table-header_properties_colors_sorted-text-color
+  );
+
+  font-family: var(
+    --recursica_ui-kit_components_table-header_properties_sorted-text-style_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_table-header_properties_sorted-text-style_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_table-header_properties_sorted-text-style_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_table-header_properties_sorted-text-style_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_table-header_properties_sorted-text-style_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_table-header_properties_sorted-text-style_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_table-header_properties_sorted-text-style_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_table-header_properties_sorted-text-style_text-transform
+  );
+}
+
+/* Disabled Header */
+.root thead th[data-disabled="true"] {
+  background-color: var(
+    --recursica_ui-kit_components_table-header_properties_colors_cell-color-disabled
+  );
+  color: var(
+    --recursica_ui-kit_components_table-header_properties_colors_text-color-disabled
+  );
+}
+
+/* Header sort icon & gap spacing helper */
+.root thead th .sortIcon {
+  width: var(--recursica_ui-kit_components_table-header_properties_icon-size);
+  height: var(--recursica_ui-kit_components_table-header_properties_icon-size);
+  margin-left: var(
+    --recursica_ui-kit_components_table-header_properties_label-sort-gap
+  );
+}
+
+/* ==========================================
+   4. Table Cells (td)
+   ========================================== */
+
+.root tbody td {
+  background-color: var(
+    --recursica_ui-kit_components_table-cell_properties_colors_cell-color-enabled
+  );
+  color: var(
+    --recursica_ui-kit_components_table-cell_properties_colors_text-color-enabled
+  );
+  padding: var(
+      --recursica_ui-kit_components_table-cell_properties_padding-vertical
+    )
+    var(--recursica_ui-kit_components_table-cell_properties_padding-horizontal);
+  max-width: var(--recursica_ui-kit_components_table-cell_properties_max-width);
+
+  /* Standard text style */
+  font-family: var(
+    --recursica_ui-kit_components_table-cell_properties_text-style_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_table-cell_properties_text-style_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_table-cell_properties_text-style_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_table-cell_properties_text-style_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_table-cell_properties_text-style_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_table-cell_properties_text-style_line-height
+  );
+  text-align: var(
+    --recursica_ui-kit_components_table-cell_properties_text-style_text-align
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_table-cell_properties_text-style_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_table-cell_properties_text-style_text-transform
+  );
+}
+
+/* Currency formatted cell layout override */
+.root tbody td[data-currency="true"] {
+  font-family: var(
+    --recursica_ui-kit_components_table-cell_properties_currency-style_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_table-cell_properties_currency-style_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_table-cell_properties_currency-style_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_table-cell_properties_currency-style_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_table-cell_properties_currency-style_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_table-cell_properties_currency-style_line-height
+  );
+  text-align: var(
+    --recursica_ui-kit_components_table-cell_properties_currency-style_text-align
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_table-cell_properties_currency-style_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_table-cell_properties_currency-style_text-transform
+  );
+}
+
+/* Disabled Cells */
+.root tbody tr[data-disabled="true"] td,
+.root tbody td[data-disabled="true"] {
+  background-color: var(
+    --recursica_ui-kit_components_table-cell_properties_colors_cell-color-disabled
+  );
+  color: var(
+    --recursica_ui-kit_components_table-cell_properties_colors_text-color-disabled
+  );
+}
+
+/* ==========================================
+   5. Table Footers (tfoot td)
+   ========================================== */
+
+.root tfoot td {
+  background-color: var(
+    --recursica_ui-kit_components_table-footer_properties_colors_cell-color-enabled
+  );
+  color: var(
+    --recursica_ui-kit_components_table-footer_properties_colors_text-color-enabled
+  );
+  padding: var(
+      --recursica_ui-kit_components_table-footer_properties_padding-vertical
+    )
+    var(
+      --recursica_ui-kit_components_table-footer_properties_padding-horizontal
+    );
+  margin-top: var(
+    --recursica_ui-kit_components_table-footer_properties_vertical-margin
+  );
+  margin-bottom: var(
+    --recursica_ui-kit_components_table-footer_properties_vertical-margin
+  );
+  border-top: var(
+      --recursica_ui-kit_components_table-footer_properties_horizontal-divider-size
+    )
+    solid
+    var(
+      --recursica_ui-kit_components_table-footer_properties_colors_horizontal-divider-color
+    );
+
+  /* Footer typography style */
+  font-family: var(
+    --recursica_ui-kit_components_table-footer_properties_text-style_font-family
+  );
+  font-size: var(
+    --recursica_ui-kit_components_table-footer_properties_text-style_font-size
+  );
+  font-style: var(
+    --recursica_ui-kit_components_table-footer_properties_text-style_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_table-footer_properties_text-style_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_table-footer_properties_text-style_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_table-footer_properties_text-style_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_table-footer_properties_text-style_text-decoration
+  );
+  text-transform: var(
+    --recursica_ui-kit_components_table-footer_properties_text-style_text-transform
+  );
+}
+
+.root tfoot td + td {
+  border-left: var(
+      --recursica_ui-kit_components_table-footer_properties_vertical-divider-size
+    )
+    solid
+    var(
+      --recursica_ui-kit_components_table-footer_properties_colors_vertical-divider-color
+    );
+}
+
+/* Disabled Footer Row/Cells */
+.root tfoot tr[data-disabled="true"] td,
+.root tfoot td[data-disabled="true"] {
+  background-color: var(
+    --recursica_ui-kit_components_table-footer_properties_colors_cell-color-disabled
+  );
+  color: var(
+    --recursica_ui-kit_components_table-footer_properties_colors_text-color-disabled
+  );
 }

package/src/components/Table/Table.tsx

@@ -15,7 +15,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.module.css

@@ -1,6 +1,8 @@
 /* 
   Recursica Tabs CSS module natively binding to Figma variables.
 */
+/* recursica-ignore: --recursica_ui-kit_components_tabs_properties_hover-color */
+/* recursica-ignore: --recursica_ui-kit_components_tabs_properties_hover-opacity */
 
 .root {
   width: 100%;

package/src/components/Toast/Toast.module.css

@@ -14,7 +14,12 @@
    ====================================== */
 
 .root {
-  border-style: none; /* HARDCODE: Reset to ensure clean shadow boundaries */
+  border-radius: var(
+    --recursica_ui-kit_components_toast_properties_border-radius
+  );
+  border-width: var(--recursica_ui-kit_components_toast_properties_border-size);
+  border-style: solid;
+  border-color: transparent;
   box-shadow: var(
     --recursica_ui-kit_components_toast_properties_elevation_layer-0
   );

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

@@ -42,7 +42,9 @@ export * from "./TextArea/TextArea";
 export * from "./TextField/TextField";
 export * from "./TimePicker/TimePicker";
 export * from "./Timeline/Timeline";
+export * from "./Timeline/TimelineItem";
 export * from "./Title/Title";
 export * from "./Toast";
 export * from "./Tooltip/Tooltip";
 export * from "./TransferList/TransferList";
+export * from "./Tree";

package/src/index.ts

@@ -1,7 +1,163 @@
 import "@recursica/adapter-common/style.css";
-export * from "./components";
+import * as rawComponents from "./components";
+import { wrapComponent } from "@recursica/adapter-common";
+
 export * from "@recursica/adapter-common";
 
+// Expose unwrapped structural layout primitives to preserve their polymorphic types
+export const Flex = rawComponents.Flex;
+export const Group = rawComponents.Group;
+export const Stack = rawComponents.Stack;
+export const Container = rawComponents.Container;
+export const Link = rawComponents.Link;
+export const Text = rawComponents.Text;
+
+// Statically wrap and export components to inject overStyled visual highlight in dev mode
+export const Accordion = wrapComponent(
+  rawComponents.Accordion,
+) as typeof rawComponents.Accordion;
+export const AccordionItem = wrapComponent(
+  rawComponents.AccordionItem,
+) as typeof rawComponents.AccordionItem;
+export const AccordionControl = wrapComponent(
+  rawComponents.AccordionControl,
+) as typeof rawComponents.AccordionControl;
+export const AccordionPanel = wrapComponent(
+  rawComponents.AccordionPanel,
+) as typeof rawComponents.AccordionPanel;
+export const AutoComplete = wrapComponent(
+  rawComponents.AutoComplete,
+) as typeof rawComponents.AutoComplete;
+export const Avatar = wrapComponent(
+  rawComponents.Avatar,
+) as typeof rawComponents.Avatar;
+export const Badge = wrapComponent(
+  rawComponents.Badge,
+) as typeof rawComponents.Badge;
+export const Breadcrumb = wrapComponent(
+  rawComponents.Breadcrumb,
+) as typeof rawComponents.Breadcrumb;
+export const Button = wrapComponent(
+  rawComponents.Button,
+) as typeof rawComponents.Button;
+export const Card = wrapComponent(
+  rawComponents.Card,
+) as typeof rawComponents.Card;
+export const Checkbox = wrapComponent(
+  rawComponents.Checkbox,
+) as typeof rawComponents.Checkbox;
+export const CheckboxGroup = wrapComponent(
+  rawComponents.CheckboxGroup,
+) as typeof rawComponents.CheckboxGroup;
+export const Chip = wrapComponent(
+  rawComponents.Chip,
+) as typeof rawComponents.Chip;
+export const DatePicker = wrapComponent(
+  rawComponents.DatePicker,
+) as typeof rawComponents.DatePicker;
+export const Dropdown = wrapComponent(
+  rawComponents.Dropdown,
+) as typeof rawComponents.Dropdown;
+export const FileInput = wrapComponent(
+  rawComponents.FileInput,
+) as typeof rawComponents.FileInput;
+export const FileUpload = wrapComponent(
+  rawComponents.FileUpload,
+) as typeof rawComponents.FileUpload;
+export const FormControlLayout = wrapComponent(
+  rawComponents.FormControlLayout,
+) as typeof rawComponents.FormControlLayout;
+export const HoverCard = wrapComponent(
+  rawComponents.HoverCard,
+) as typeof rawComponents.HoverCard;
+export const Loader = wrapComponent(
+  rawComponents.Loader,
+) as typeof rawComponents.Loader;
+export const Label = wrapComponent(
+  rawComponents.Label,
+) as typeof rawComponents.Label;
+export const Menu = wrapComponent(
+  rawComponents.Menu,
+) as typeof rawComponents.Menu;
+export const Modal = wrapComponent(
+  rawComponents.Modal,
+) as typeof rawComponents.Modal;
+export const NumberInput = wrapComponent(
+  rawComponents.NumberInput,
+) as typeof rawComponents.NumberInput;
+export const Pagination = wrapComponent(
+  rawComponents.Pagination,
+) as typeof rawComponents.Pagination;
+export const Panel = wrapComponent(
+  rawComponents.Panel,
+) as typeof rawComponents.Panel;
+export const PanelFooter = wrapComponent(
+  rawComponents.PanelFooter,
+) as typeof rawComponents.PanelFooter;
+export const Popover = wrapComponent(
+  rawComponents.Popover,
+) as typeof rawComponents.Popover;
+export const Radio = wrapComponent(
+  rawComponents.Radio,
+) as typeof rawComponents.Radio;
+export const RadioGroup = wrapComponent(
+  rawComponents.RadioGroup,
+) as typeof rawComponents.RadioGroup;
+export const ReadOnlyField = wrapComponent(
+  rawComponents.ReadOnlyField,
+) as typeof rawComponents.ReadOnlyField;
+export const SegmentedControl = wrapComponent(
+  rawComponents.SegmentedControl,
+) as typeof rawComponents.SegmentedControl;
+export const Slider = wrapComponent(
+  rawComponents.Slider,
+) as typeof rawComponents.Slider;
+export const Stepper = wrapComponent(
+  rawComponents.Stepper,
+) as typeof rawComponents.Stepper;
+export const Switch = wrapComponent(
+  rawComponents.Switch,
+) as typeof rawComponents.Switch;
+export const SwitchGroup = wrapComponent(
+  rawComponents.SwitchGroup,
+) as typeof rawComponents.SwitchGroup;
+export const Table = wrapComponent(
+  rawComponents.Table,
+) as typeof rawComponents.Table;
+export const Tabs = wrapComponent(
+  rawComponents.Tabs,
+) as typeof rawComponents.Tabs;
+export const TextArea = wrapComponent(
+  rawComponents.TextArea,
+) as typeof rawComponents.TextArea;
+export const TextField = wrapComponent(
+  rawComponents.TextField,
+) as typeof rawComponents.TextField;
+export const TimePicker = wrapComponent(
+  rawComponents.TimePicker,
+) as typeof rawComponents.TimePicker;
+export const Timeline = wrapComponent(
+  rawComponents.Timeline,
+) as typeof rawComponents.Timeline;
+export const TimelineItem = wrapComponent(
+  rawComponents.TimelineItem,
+) as typeof rawComponents.TimelineItem;
+export const Title = wrapComponent(
+  rawComponents.Title,
+) as typeof rawComponents.Title;
+export const Toast = wrapComponent(
+  rawComponents.Toast,
+) as typeof rawComponents.Toast;
+export const Tooltip = wrapComponent(
+  rawComponents.Tooltip,
+) as typeof rawComponents.Tooltip;
+export const TransferList = wrapComponent(
+  rawComponents.TransferList,
+) as typeof rawComponents.TransferList;
+export const Tree = wrapComponent(
+  rawComponents.Tree,
+) as typeof rawComponents.Tree;
+
 export type {
   RecursicaCheckboxGroupProps,
   RecursicaDatePickerProps,