From 1d5e3db57392adcc2a90fda69f499c0ef9e51d34 Mon Sep 17 00:00:00 2001
From: Vineeth Asok Kumar <me@vineethasok.com>
Date: Wed, 18 Oct 2023 10:50:01 +0200
Subject: [PATCH] Fix common issues (#178)

* Fix TabProps

* Add htmlattributes for text based elements

* Add Table Import
---
 src/components/Tabs/Tabs.tsx              | 13 ++-----------
 src/components/Typography/Text/Text.tsx   |  4 ++--
 src/components/Typography/Title/Title.tsx |  5 ++---
 src/components/index.ts                   |  1 +
 4 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
index 0df364fe..3ea5aeb8 100644
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/Tabs/Tabs.tsx
@@ -1,18 +1,9 @@
 import * as RadixTabs from "@radix-ui/react-tabs";
 import styled from "styled-components";
 
-export type TabProps = {
-  label: React.ReactNode;
-  value: string;
-  children?: React.ReactNode;
-};
-
-export type TabsProps = {
-  defaultValue?: string;
+export interface TabsProps extends RadixTabs.TabsProps {
   ariaLabel?: string;
-  onValueChange?: (s: string) => unknown;
-  children: React.ReactElement<TabProps>[] | React.ReactElement<TabProps>;
-};
+}
 
 const Trigger = styled(RadixTabs.Trigger)`
   border: none;
diff --git a/src/components/Typography/Text/Text.tsx b/src/components/Typography/Text/Text.tsx
index 91bb63ef..7a77b45a 100644
--- a/src/components/Typography/Text/Text.tsx
+++ b/src/components/Typography/Text/Text.tsx
@@ -1,15 +1,15 @@
+import { HTMLAttributes } from "react";
 import styled from "styled-components";
 
 export type TextColor = "default" | "muted";
 export type TextSize = "xs" | "sm" | "md" | "lg";
 export type TextWeight = "normal" | "medium" | "semibold" | "bold" | "mono";
 
-export interface TextProps {
+export interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
   color?: TextColor;
   size?: TextSize;
   weight?: TextWeight;
   className?: string;
-  children?: React.ReactNode;
 }
 
 /** Component for writing blocks of body copy */
diff --git a/src/components/Typography/Title/Title.tsx b/src/components/Typography/Title/Title.tsx
index 4c5a087f..a77d86c2 100644
--- a/src/components/Typography/Title/Title.tsx
+++ b/src/components/Typography/Title/Title.tsx
@@ -1,16 +1,15 @@
-import React from "react";
+import { HTMLAttributes } from "react";
 import styled from "styled-components";
 export type TitleColor = "default" | "muted";
 export type TitleSize = "xs" | "sm" | "md" | "lg" | "xl";
 export type TitleFamily = "product" | "brand";
 export type TitleType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 
-export interface TitleProps {
+export interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {
   color?: TitleColor;
   size?: TitleSize;
   family?: TitleFamily;
   type: TitleType;
-  children?: React.ReactNode;
 }
 
 /** The `title` component allows you to easily add headings to your pages. They do not include built in margins. */
diff --git a/src/components/index.ts b/src/components/index.ts
index dfb7afbd..82713560 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -40,6 +40,7 @@ export { SplitButton } from "./SplitButton/SplitButton";
 export { Switch } from "./Switch/Switch";
 export { Tabs } from "./Tabs/Tabs";
 export { FileTabs } from "./FileTabs/FileTabs";
+export { Table } from "./Table/Table";
 export { Text } from "./Typography/Text/Text";
 export { TextField } from "./Input/TextField";
 export { Title } from "./Typography/Title/Title";