From d3af066bea256ac155fc717e0c93baa97aa98737 Mon Sep 17 00:00:00 2001 From: dkireev Date: Tue, 31 Oct 2023 16:01:58 +0200 Subject: [PATCH 1/4] fix: add Pagination to Docs, align colours [MDS-724] --- .../server/pagination/description.md | 3 +++ .../server/pagination/examples/Default.tsx | 9 ++++++++ .../app/components/server/pagination/page.tsx | 22 +++++++++++++++++++ docs/app/components/types.ts | 6 +++++ workspaces/base/src/pagination/Pagination.tsx | 2 +- 5 files changed, 41 insertions(+), 1 deletion(-) create mode 100644 docs/app/components/server/pagination/description.md create mode 100644 docs/app/components/server/pagination/examples/Default.tsx create mode 100644 docs/app/components/server/pagination/page.tsx diff --git a/docs/app/components/server/pagination/description.md b/docs/app/components/server/pagination/description.md new file mode 100644 index 0000000000..b6705517b5 --- /dev/null +++ b/docs/app/components/server/pagination/description.md @@ -0,0 +1,3 @@ +A form input used for selecting a value: when collapsed it shows the currently selected option and when expanded, it shows a scrollable list of predefined options for the user to choose from. + +When collapsed it shows the currently selected option and when expanded, it shows a scrollable list of predefined options for the user to choose from. Moon.io supports two types of selects, one whichs opens browser's native styling option list and Dropdown. diff --git a/docs/app/components/server/pagination/examples/Default.tsx b/docs/app/components/server/pagination/examples/Default.tsx new file mode 100644 index 0000000000..2c70e163be --- /dev/null +++ b/docs/app/components/server/pagination/examples/Default.tsx @@ -0,0 +1,9 @@ +import Pagination from '@heathmont/moon-base-tw/lib/pagination/Pagination'; + +export const Default = () => ( + + Previous + + Next + +); diff --git a/docs/app/components/server/pagination/page.tsx b/docs/app/components/server/pagination/page.tsx new file mode 100644 index 0000000000..fc2ad6cbff --- /dev/null +++ b/docs/app/components/server/pagination/page.tsx @@ -0,0 +1,22 @@ +import { Default } from '@/app/components/server/pagination/examples/Default'; +import ExampleSection from '@/app/components/shared/ExampleSection'; +import QuickNav from '@/app/components/shared/QuickNav'; +import { getExamples } from '@/app/utils/getExamples'; +import { MDX } from '@/components/MDX'; + +export default async function Pagination() { + const { server } = await getExamples(); + const examplesList = Object.keys(server.pagination.examples); + return ( +
+

Pagination

+ + + } + code={server.pagination.examples.Default} + /> +
+ ); +} diff --git a/docs/app/components/types.ts b/docs/app/components/types.ts index 2ea595bf64..ec466cf036 100644 --- a/docs/app/components/types.ts +++ b/docs/app/components/types.ts @@ -66,6 +66,12 @@ export interface Examples { Default: 'string'; }; }; + pagination: { + description: 'string'; + examples: { + Default: 'string'; + }; + }; tag: { description: 'string'; examples: { diff --git a/workspaces/base/src/pagination/Pagination.tsx b/workspaces/base/src/pagination/Pagination.tsx index 5fc5f51a87..40d77536c5 100644 --- a/workspaces/base/src/pagination/Pagination.tsx +++ b/workspaces/base/src/pagination/Pagination.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import mergeClassnames from '../mergeClassnames/mergeClassnames'; import getPageInfo from './getPageInfo'; import type PolymorphicNextPrevButtonProps from './private/type/NextPrevButton'; import type PolymorphicPagesProps from './private/type/PageProps'; import type PagesProps from './private/type/PagesProps'; import type WithStyledChildren from './private/type/WithStyledChildren'; +import mergeClassnames from '../mergeClassnames/mergeClassnames'; const PaginationRoot = ({ className, From f3383ff80dc7e9c55883fc3fd286bbaa18edfa9b Mon Sep 17 00:00:00 2001 From: dkireev Date: Tue, 31 Oct 2023 16:03:29 +0200 Subject: [PATCH 2/4] fix: add Pagination to Docs, align colours [MDS-724] --- docs/app/components/server/pagination/description.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/app/components/server/pagination/description.md b/docs/app/components/server/pagination/description.md index b6705517b5..475afd612b 100644 --- a/docs/app/components/server/pagination/description.md +++ b/docs/app/components/server/pagination/description.md @@ -1,3 +1,3 @@ -A form input used for selecting a value: when collapsed it shows the currently selected option and when expanded, it shows a scrollable list of predefined options for the user to choose from. +Pagination is the process of splitting information over multiple pages instead of showing it all on a single page. -When collapsed it shows the currently selected option and when expanded, it shows a scrollable list of predefined options for the user to choose from. Moon.io supports two types of selects, one whichs opens browser's native styling option list and Dropdown. +Also the name for the interface component used for navigating between these pages. From c82a9484ea64e1aad4aa02a55348740eb969e518 Mon Sep 17 00:00:00 2001 From: dkireev Date: Tue, 31 Oct 2023 16:31:44 +0200 Subject: [PATCH 3/4] fix: add Table to Docs, align colours [MDS-725] --- .../components/server/table/description.md | 1 + .../server/table/examples/Default.tsx | 25 +++++++ docs/app/components/server/table/page.tsx | 22 +++++++ docs/app/components/shared/CodePreview.tsx | 2 +- docs/app/components/types.ts | 6 ++ workspaces/base/src/table/Table.tsx | 65 +++---------------- .../base/src/table/private/types/Props.ts | 6 ++ .../base/src/table/private/types/Size.ts | 3 + .../src/table/private/types/TableProps.ts | 8 +++ .../base/src/table/private/utils/getSize.ts | 21 ++++++ 10 files changed, 102 insertions(+), 57 deletions(-) create mode 100644 docs/app/components/server/table/description.md create mode 100644 docs/app/components/server/table/examples/Default.tsx create mode 100644 docs/app/components/server/table/page.tsx create mode 100644 workspaces/base/src/table/private/types/Props.ts create mode 100644 workspaces/base/src/table/private/types/Size.ts create mode 100644 workspaces/base/src/table/private/types/TableProps.ts create mode 100644 workspaces/base/src/table/private/utils/getSize.ts diff --git a/docs/app/components/server/table/description.md b/docs/app/components/server/table/description.md new file mode 100644 index 0000000000..6354b455bf --- /dev/null +++ b/docs/app/components/server/table/description.md @@ -0,0 +1 @@ +A component for displaying large amounts of data in rows and columns. diff --git a/docs/app/components/server/table/examples/Default.tsx b/docs/app/components/server/table/examples/Default.tsx new file mode 100644 index 0000000000..e83fd6225e --- /dev/null +++ b/docs/app/components/server/table/examples/Default.tsx @@ -0,0 +1,25 @@ +import Table from '@heathmont/moon-base-tw/lib/table/Table'; + +export const Default = () => ( + + + + Header 1 + Header 2 + Header 3 + + + + + Cell 1 + Cell 2 + Cell 3 + + + Cell 1 + Cell 2 + Cell 3 + + +
+); diff --git a/docs/app/components/server/table/page.tsx b/docs/app/components/server/table/page.tsx new file mode 100644 index 0000000000..a53d5609ed --- /dev/null +++ b/docs/app/components/server/table/page.tsx @@ -0,0 +1,22 @@ +import { Default } from '@/app/components/server/table/examples/Default'; +import ExampleSection from '@/app/components/shared/ExampleSection'; +import QuickNav from '@/app/components/shared/QuickNav'; +import { getExamples } from '@/app/utils/getExamples'; +import { MDX } from '@/components/MDX'; + +export default async function Table() { + const { server } = await getExamples(); + const examplesList = Object.keys(server.table.examples); + return ( +
+

Table

+ + + } + code={server.table.examples.Default} + /> +
+ ); +} diff --git a/docs/app/components/shared/CodePreview.tsx b/docs/app/components/shared/CodePreview.tsx index 2e5d83169f..93ada9ecff 100644 --- a/docs/app/components/shared/CodePreview.tsx +++ b/docs/app/components/shared/CodePreview.tsx @@ -1,5 +1,5 @@ const CodePreview = ({ code }: { code: string }) => ( - 
+  
     {code}
   

 );
diff --git a/docs/app/components/types.ts b/docs/app/components/types.ts
index ec466cf036..2e26dc47ab 100644
--- a/docs/app/components/types.ts
+++ b/docs/app/components/types.ts
@@ -72,6 +72,12 @@ export interface Examples {
         Default: 'string';
       };
     };
+    table: {
+      description: 'string';
+      examples: {
+        Default: 'string';
+      };
+    };
     tag: {
       description: 'string';
       examples: {
diff --git a/workspaces/base/src/table/Table.tsx b/workspaces/base/src/table/Table.tsx
index cf87fd0ff8..17cecad638 100644
--- a/workspaces/base/src/table/Table.tsx
+++ b/workspaces/base/src/table/Table.tsx
@@ -1,31 +1,9 @@
 import React from 'react';
+import type Props from './private/types/Props';
+import type TableProps from './private/types/TableProps';
+import getSize from './private/utils/getSize';
 import mergeClassnames from '../mergeClassnames/mergeClassnames';
 
-type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-type TableProps = {
-  className?: string;
-  children?: React.ReactNode;
-  size?: Size;
-};
-
-const getSize = (size?: Size) => {
-  switch (size) {
-    case 'xs':
-      return '[&_td]:px-2 [&_td]:py-1 [&_td]:text-moon-12 [&_th]:px-2 [&_th]:py-1 [&_th]:text-moon-12';
-    case 'sm':
-      return '[&_td]:px-3 [&_td]:py-1 [&_td]:text-moon-14 [&_th]:px-3 [&_th]:py-1 [&_th]:text-moon-14';
-    case 'lg':
-      return '[&_td]:px-3 [&_td]:py-3 [&_td]:text-moon-14 [&_th]:px-3 [&_th]:py-3 [&_th]:text-moon-14';
-    case 'xl':
-      return '[&_td]:px-3 [&_td]:py-4 [&_td]:text-moon-14 [&_th]:px-3 [&_th]:py-4 [&_th]:text-moon-14';
-    case '2xl':
-      return '[&_td]:px-3 [&_td]:py-5 [&_td]:text-moon-14 [&_th]:px-3 [&_th]:py-5 [&_th]:text-moon-14';
-    case 'md':
-    default:
-      return '[&_td]:px-3 [&_td]:py-2 [&_td]:text-moon-14 [&_th]:px-3 [&_th]:py-2 [&_th]:text-moon-14';
-  }
-};
-
 const TableRoot = ({ children, className, size, ...props }: TableProps) => (
    (
   

 );
 
-type BodyProps = {
-  className?: string;
-  children?: React.ReactNode;
-};
-
-const Body = ({ children, className, ...props }: BodyProps) => (
+const Body = ({ children, className, ...props }: Props) => (
   
     {children}
   
 );
 
-type HeadProps = {
-  className?: string;
-  children?: React.ReactNode;
-};
-
-const Head = ({ children, className, ...props }: HeadProps) => (
+const Head = ({ children, className, ...props }: Props) => (
   
     {children}
   
 );
 
-type RowProps = {
-  className?: string;
-  children?: React.ReactNode;
-};
-
-const Row = ({ children, className, ...props }: RowProps) => (
+const Row = ({ children, className, ...props }: Props) => (
   
     {children}
   
 );
 
-type HeaderProps = {
-  className?: string;
-  children?: React.ReactNode;
-};
-
-const Header = ({ children, className, ...props }: HeaderProps) => (
+const Header = ({ children, className, ...props }: Props) => (
    (
   
 );
 
-type CellProps = {
-  className?: string;
-  children?: React.ReactNode;
-};
-
-const Cell = ({ children, className, ...props }: CellProps) => (
+const Cell = ({ children, className, ...props }: Props) => (
   
diff --git a/workspaces/base/src/table/private/types/Props.ts b/workspaces/base/src/table/private/types/Props.ts
new file mode 100644
index 0000000000..d916a547cb
--- /dev/null
+++ b/workspaces/base/src/table/private/types/Props.ts
@@ -0,0 +1,6 @@
+type Props = {
+  className?: string;
+  children?: React.ReactNode;
+};
+
+export default Props;
diff --git a/workspaces/base/src/table/private/types/Size.ts b/workspaces/base/src/table/private/types/Size.ts
new file mode 100644
index 0000000000..484d7c3b3b
--- /dev/null
+++ b/workspaces/base/src/table/private/types/Size.ts
@@ -0,0 +1,3 @@
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+export default Size;
diff --git a/workspaces/base/src/table/private/types/TableProps.ts b/workspaces/base/src/table/private/types/TableProps.ts
new file mode 100644
index 0000000000..557aab10a4
--- /dev/null
+++ b/workspaces/base/src/table/private/types/TableProps.ts
@@ -0,0 +1,8 @@
+import type Props from './Props';
+import type Size from './Size';
+
+type TableProps = Props & {
+  size?: Size;
+};
+
+export default TableProps;
diff --git a/workspaces/base/src/table/private/utils/getSize.ts b/workspaces/base/src/table/private/utils/getSize.ts
new file mode 100644
index 0000000000..769c3aea67
--- /dev/null
+++ b/workspaces/base/src/table/private/utils/getSize.ts
@@ -0,0 +1,21 @@
+import type Size from '../types/Size';
+
+const getSize = (size?: Size) => {
+  switch (size) {
+    case 'xs':
+      return '[&_td]:px-2 [&_td]:py-1 [&_td]:text-moon-12 [&_th]:px-2 [&_th]:py-1 [&_th]:text-moon-12';
+    case 'sm':
+      return '[&_td]:px-3 [&_td]:py-1 [&_td]:text-moon-14 [&_th]:px-3 [&_th]:py-1 [&_th]:text-moon-14';
+    case 'lg':
+      return '[&_td]:px-3 [&_td]:py-3 [&_td]:text-moon-14 [&_th]:px-3 [&_th]:py-3 [&_th]:text-moon-14';
+    case 'xl':
+      return '[&_td]:px-3 [&_td]:py-4 [&_td]:text-moon-14 [&_th]:px-3 [&_th]:py-4 [&_th]:text-moon-14';
+    case '2xl':
+      return '[&_td]:px-3 [&_td]:py-5 [&_td]:text-moon-14 [&_th]:px-3 [&_th]:py-5 [&_th]:text-moon-14';
+    case 'md':
+    default:
+      return '[&_td]:px-3 [&_td]:py-2 [&_td]:text-moon-14 [&_th]:px-3 [&_th]:py-2 [&_th]:text-moon-14';
+  }
+};
+
+export default getSize;

From d1810af2272e92ccc36d54c52f212c1929b4084f Mon Sep 17 00:00:00 2001
From: dkireev 
Date: Thu, 2 Nov 2023 16:10:00 +0200
Subject: [PATCH 4/4] fix: add Tabs to Docs, align colours [MDS-726]

---
 .../app/components/server/tabs/description.md |  3 +
 .../server/tabs/examples/Default.tsx          | 16 +++++
 docs/app/components/server/tabs/page.tsx      | 22 ++++++
 docs/app/components/types.ts                  |  6 ++
 workspaces/base/src/tabs/Tabs.tsx             | 71 ++++++-------------
 .../base/src/tabs/private/types/ListProps.ts  |  9 ---
 .../base/src/tabs/private/types/PanelProps.ts |  7 +-
 .../base/src/tabs/private/types/Props.ts      |  6 ++
 .../tabs/private/types/TabComponentProps.ts   |  7 ++
 .../tabs/private/types/TabPolymorphicProps.ts |  6 ++
 .../base/src/tabs/private/types/TabProps.ts   | 12 ++--
 .../base/src/tabs/private/types/TabsProps.ts  |  7 --
 .../base/src/tabs/private/types/TabsState.ts  |  7 --
 13 files changed, 98 insertions(+), 81 deletions(-)
 create mode 100644 docs/app/components/server/tabs/description.md
 create mode 100644 docs/app/components/server/tabs/examples/Default.tsx
 create mode 100644 docs/app/components/server/tabs/page.tsx
 delete mode 100644 workspaces/base/src/tabs/private/types/ListProps.ts
 create mode 100644 workspaces/base/src/tabs/private/types/Props.ts
 create mode 100644 workspaces/base/src/tabs/private/types/TabComponentProps.ts
 create mode 100644 workspaces/base/src/tabs/private/types/TabPolymorphicProps.ts
 delete mode 100644 workspaces/base/src/tabs/private/types/TabsProps.ts
 delete mode 100644 workspaces/base/src/tabs/private/types/TabsState.ts

diff --git a/docs/app/components/server/tabs/description.md b/docs/app/components/server/tabs/description.md
new file mode 100644
index 0000000000..1493199621
--- /dev/null
+++ b/docs/app/components/server/tabs/description.md
@@ -0,0 +1,3 @@
+Tabs to allow users to navigate easily between views within the same context.
+
+Each tab should contain content that is distinct from other tabs in a set for example, tabs can present different sections of news, different genres of music, or different themes of documents.
diff --git a/docs/app/components/server/tabs/examples/Default.tsx b/docs/app/components/server/tabs/examples/Default.tsx
new file mode 100644
index 0000000000..25851ca6b5
--- /dev/null
+++ b/docs/app/components/server/tabs/examples/Default.tsx
@@ -0,0 +1,16 @@
+import Tabs from '@heathmont/moon-base-tw/lib/tabs/Tabs';
+
+export const Default = () => (
+  
+    
+      Tab 1
+      Tab 2
+      Tab 3
+    
+    
+      1
+      2
+      3
+    
+  
+);
diff --git a/docs/app/components/server/tabs/page.tsx b/docs/app/components/server/tabs/page.tsx
new file mode 100644
index 0000000000..e397a6dd4a
--- /dev/null
+++ b/docs/app/components/server/tabs/page.tsx
@@ -0,0 +1,22 @@
+import { Default } from '@/app/components/server/tabs/examples/Default';
+import ExampleSection from '@/app/components/shared/ExampleSection';
+import QuickNav from '@/app/components/shared/QuickNav';
+import { getExamples } from '@/app/utils/getExamples';
+import { MDX } from '@/components/MDX';
+
+export default async function Tabs() {
+  const { server } = await getExamples();
+  const examplesList = Object.keys(server.tabs.examples);
+  return (
+    

+      
Tabs

+      
+      
+      }
+        code={server.tabs.examples.Default}
+      />
+    

+  );
+}
diff --git a/docs/app/components/types.ts b/docs/app/components/types.ts
index 2e26dc47ab..39094a042e 100644
--- a/docs/app/components/types.ts
+++ b/docs/app/components/types.ts
@@ -78,6 +78,12 @@ export interface Examples {
         Default: 'string';
       };
     };
+    tabs: {
+      description: 'string';
+      examples: {
+        Default: 'string';
+      };
+    };
     tag: {
       description: 'string';
       examples: {
diff --git a/workspaces/base/src/tabs/Tabs.tsx b/workspaces/base/src/tabs/Tabs.tsx
index 5dc3195c9a..f7cc8f997d 100644
--- a/workspaces/base/src/tabs/Tabs.tsx
+++ b/workspaces/base/src/tabs/Tabs.tsx
@@ -1,46 +1,25 @@
 import React from 'react';
-import type Size from './private/types/Size';
+import type PanelProps from './private/types/PanelProps';
+import type Props from './private/types/Props';
+import type TabPolymorphicProps from './private/types/TabPolymorphicProps';
 import getTabSize from './private/utils/getTabSize';
 import mergeClassnames from '../mergeClassnames/mergeClassnames';
 
-type TabsRootProps = {
-  className?: string;
-  children?: React.ReactNode;
-};
-const TabsRoot = ({ className, children }: TabsRootProps) => (
-  
{children}

+const TabsRoot = ({ className, children }: Props) => (
+  
{children}

 );
 
-type ListProps = {
-  className?: string;
-  children?: React.ReactNode;
-};
-const List = ({ className, children }: ListProps) => (
+const List = ({ className, children }: Props) => (
   

     {children}
   

 );
 
-type TabProps = {
-  className?: string;
-  children?: React.ReactNode;
-  isDisabled?: boolean;
-  selected?: boolean;
-  size?: Size;
-};
-
-type TabPolymorphicProps =
-  PolymorphicComponentPropWithRef;
-
-type TabComponentProps = (
-  props: TabPolymorphicProps
-) => React.ReactElement | null;
-
 const Tab = React.forwardRef(
   (
     {
@@ -67,9 +46,10 @@ const Tab = React.forwardRef(
           'after:duration-300 ltr:after:origin-top-left rtl:after:origin-top-right',
           'after:scale-x-0 after:scale-y-100 ltr:hover:after:origin-top-left',
           'rtl:hover:after:origin-top-right hover:after:scale-100 hover:text-piccolo',
-          'focus:outline-none',
+          'focus:outline-none ltr:[&:local-link]:after:origin-top-left',
+          'rtl:[&:local-link]:after:origin-top-right [&:local-link]:after:scale-x-100',
+          '[&:local-link]:text-piccolo',
           isDisabled && 'opacity-30 hover:after:scale-0 cursor-not-allowed',
-          'ltr:[&:local-link]:after:origin-top-left rtl:[&:local-link]:after:origin-top-right [&:local-link]:after:scale-x-100 [&:local-link]:text-piccolo',
           selected &&
             'ltr:after:origin-top-left rtl:after:origin-top-right after:scale-x-100 text-piccolo',
           className
@@ -109,8 +89,9 @@ const Pill = React.forwardRef(
           'after:duration-300 ltr:after:origin-top-left rtl:after:origin-top-right after:scale-x-0',
           'after:scale-y-100 ltr:hover:after:origin-top-left rtl:hover:after:origin-top-right',
           'hover:after:scale-100 hover:text-piccolo focus:outline-none',
+          'ltr:[&:local-link]:after:origin-top-left rtl:[&:local-link]:after:origin-top-right',
+          '[&:local-link]:after:scale-x-100 [&:local-link]:text-piccolo',
           isDisabled && 'opacity-30 hover:after:scale-0 cursor-not-allowed',
-          'ltr:[&:local-link]:after:origin-top-left rtl:[&:local-link]:after:origin-top-right [&:local-link]:after:scale-x-100 [&:local-link]:text-piccolo',
           selected &&
             'ltr:after:origin-top-left rtl:after:origin-top-right after:scale-x-100 text-piccolo',
           className
@@ -144,9 +125,9 @@ const Pill = React.forwardRef(
 //         className={mergeClassnames(
 //           getTabSize(size),
 //           'flex items-center justify-center w-full whitespace-nowrap text-moon-14 text-bulma',
-//           'font-medium rounded-moon-i-sm transition-colors cursor-pointer hover:bg-gohan',
+//           'font-medium rounded-moon-i-sm transition-colors cursor-pointer hover:bg-goku',
 //           'focus:outline-none',
-//           selected && 'bg-gohan',
+//           selected && 'bg-goku',
 //           isDisabled && 'opacity-30 hover:bg-transparent cursor-not-allowed'
 //         )}
 //         ref={ref}
@@ -159,25 +140,17 @@ const Pill = React.forwardRef(
 //   }
 // );
 
-type PanelsProps = {
-  className?: string;
-  children?: React.ReactNode;
-};
-
-const Panels = ({ children }: PanelsProps) => (
-  
{children}

+const Panels = ({ children, className }: Props) => (
+  
{children}

 );
 
-type PanelProps = {
-  id: string;
-  className?: string;
-  children?: React.ReactNode;
-};
-
-const Panel = ({ children, id }: PanelProps) => (
+const Panel = ({ children, id, className }: PanelProps) => (
   

     {children}
   

diff --git a/workspaces/base/src/tabs/private/types/ListProps.ts b/workspaces/base/src/tabs/private/types/ListProps.ts
deleted file mode 100644
index 1c10efc8d8..0000000000
--- a/workspaces/base/src/tabs/private/types/ListProps.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type Size from './Size';
-
-type ListProps = {
-  size?: Size;
-  className?: string;
-  children?: React.ReactNode;
-};
-
-export default ListProps;
diff --git a/workspaces/base/src/tabs/private/types/PanelProps.ts b/workspaces/base/src/tabs/private/types/PanelProps.ts
index 63962e5d32..74189d628f 100644
--- a/workspaces/base/src/tabs/private/types/PanelProps.ts
+++ b/workspaces/base/src/tabs/private/types/PanelProps.ts
@@ -1,6 +1,7 @@
-type PanelProps = {
-  className?: string;
-  children?: React.ReactNode;
+import type Props from './Props';
+
+type PanelProps = Props & {
+  id: string;
 };
 
 export default PanelProps;
diff --git a/workspaces/base/src/tabs/private/types/Props.ts b/workspaces/base/src/tabs/private/types/Props.ts
new file mode 100644
index 0000000000..d916a547cb
--- /dev/null
+++ b/workspaces/base/src/tabs/private/types/Props.ts
@@ -0,0 +1,6 @@
+type Props = {
+  className?: string;
+  children?: React.ReactNode;
+};
+
+export default Props;
diff --git a/workspaces/base/src/tabs/private/types/TabComponentProps.ts b/workspaces/base/src/tabs/private/types/TabComponentProps.ts
new file mode 100644
index 0000000000..648b8f1595
--- /dev/null
+++ b/workspaces/base/src/tabs/private/types/TabComponentProps.ts
@@ -0,0 +1,7 @@
+import type TabPolymorphicProps from './TabPolymorphicProps';
+
+type TabComponentProps = (
+  props: TabPolymorphicProps
+) => React.ReactElement | null;
+
+export default TabComponentProps;
diff --git a/workspaces/base/src/tabs/private/types/TabPolymorphicProps.ts b/workspaces/base/src/tabs/private/types/TabPolymorphicProps.ts
new file mode 100644
index 0000000000..1c007692fa
--- /dev/null
+++ b/workspaces/base/src/tabs/private/types/TabPolymorphicProps.ts
@@ -0,0 +1,6 @@
+import type TabProps from './TabProps';
+
+type TabPolymorphicProps =
+  PolymorphicComponentPropWithRef;
+
+export default TabPolymorphicProps;
diff --git a/workspaces/base/src/tabs/private/types/TabProps.ts b/workspaces/base/src/tabs/private/types/TabProps.ts
index 2f42aea3de..cb77496b49 100644
--- a/workspaces/base/src/tabs/private/types/TabProps.ts
+++ b/workspaces/base/src/tabs/private/types/TabProps.ts
@@ -1,10 +1,10 @@
-import { ElementType } from 'react';
+import type Props from './Props';
+import type Size from './Size';
 
-type TabProps = {
-  disabled?: boolean;
-  as?: ElementType;
-  className?: string | (({ selected }: { selected: boolean }) => string);
-  children?: React.ReactNode;
+type TabProps = Props & {
+  isDisabled?: boolean;
+  selected?: boolean;
+  size?: Size;
 };
 
 export default TabProps;
diff --git a/workspaces/base/src/tabs/private/types/TabsProps.ts b/workspaces/base/src/tabs/private/types/TabsProps.ts
deleted file mode 100644
index ef96a757bc..0000000000
--- a/workspaces/base/src/tabs/private/types/TabsProps.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-type TabsProps = {
-  selectedIndex?: number;
-  onChange?: (index: number) => void;
-  children?: React.ReactNode;
-};
-
-export default TabsProps;
diff --git a/workspaces/base/src/tabs/private/types/TabsState.ts b/workspaces/base/src/tabs/private/types/TabsState.ts
deleted file mode 100644
index 54f1fbedad..0000000000
--- a/workspaces/base/src/tabs/private/types/TabsState.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type Size from './Size';
-
-type TabsState = {
-  size?: Size;
-};
-
-export default TabsState;