diff --git a/.changeset/chatty-bikes-clap.md b/.changeset/chatty-bikes-clap.md new file mode 100644 index 0000000..69c5143 --- /dev/null +++ b/.changeset/chatty-bikes-clap.md @@ -0,0 +1,5 @@ +--- +"@zenml-io/react-component-library": minor +--- + +add tabs diff --git a/package.json b/package.json index 39aec69..e1443e4 100644 --- a/package.json +++ b/package.json @@ -88,6 +88,7 @@ "@radix-ui/react-collapsible": "^1.0.3", "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-slot": "^1.0.2", + "@radix-ui/react-tabs": "^1.0.4", "@tanstack/react-table": "^8.15.3", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f1a9b3f..595dd41 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,9 @@ dependencies: '@radix-ui/react-slot': specifier: ^1.0.2 version: 1.0.2(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-tabs': + specifier: ^1.0.4 + version: 1.0.4(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0) '@tanstack/react-table': specifier: ^8.15.3 version: 8.15.3(react-dom@18.2.0)(react@18.2.0) @@ -2588,6 +2591,33 @@ packages: '@types/react': 18.2.28 react: 18.2.0 + /@radix-ui/react-tabs@1.0.4(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.24.0 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-context': 1.0.1(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-direction': 1.0.1(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-id': 1.0.1(@types/react@18.2.28)(react@18.2.0) + '@radix-ui/react-presence': 1.0.1(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-roving-focus': 1.0.4(@types/react@18.2.28)(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.28)(react@18.2.0) + '@types/react': 18.2.28 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.28)(react@18.2.0): resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==} peerDependencies: diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx new file mode 100644 index 0000000..2228e19 --- /dev/null +++ b/src/components/Tabs/Tabs.stories.tsx @@ -0,0 +1,48 @@ +import { Meta } from "@storybook/react"; +import React from "react"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "./index"; +import { StoryObj } from "@storybook/react"; + +const meta = { + title: "Elements/Tabs", + component: Tabs, + argTypes: {}, + parameters: { + layout: "centered" + }, + + tags: ["autodocs"] +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const DefaultVariant: Story = { + name: "Tabs", + render: () => ( + + + + Tab 1 + + + Tab 2 + + + Tab 3 + + + + +
Tab Content 1
+ + +
Tab Content 2
+ + +
Tab Content 3
+ + + ) +}; diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx new file mode 100644 index 0000000..b8f9508 --- /dev/null +++ b/src/components/Tabs/Tabs.tsx @@ -0,0 +1,49 @@ +import * as React from "react"; +import * as TabsPrimitive from "@radix-ui/react-tabs"; +import { cn } from "../../utilities"; + +const Tabs = TabsPrimitive.Root; + +const TabsList = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +TabsList.displayName = TabsPrimitive.List.displayName; + +const TabsTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +TabsTrigger.displayName = TabsPrimitive.Trigger.displayName; + +const TabsContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +TabsContent.displayName = TabsPrimitive.Content.displayName; + +export { Tabs, TabsList, TabsTrigger, TabsContent }; diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx new file mode 100644 index 0000000..5de2df6 --- /dev/null +++ b/src/components/Tabs/index.tsx @@ -0,0 +1 @@ +export * from "./Tabs"; diff --git a/src/components/index.ts b/src/components/index.ts index 7a90d7a..940bbc1 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -9,4 +9,5 @@ export * from "./Table"; export * from "./Tag"; export * from "./Badge"; export * from "./Spinner"; +export * from "./Tabs"; export * from "./Collapsible"; diff --git a/src/tailwind/index.ts b/src/tailwind/index.ts index 4bc24c0..e0ce108 100644 --- a/src/tailwind/index.ts +++ b/src/tailwind/index.ts @@ -359,7 +359,8 @@ export const zenmlPlugin = plugin( } }, boxShadow: { - sm: "0px 0px 4px 0px rgba(0, 0, 0, 0.10)" + sm: "0px 0px 4px 0px rgba(0, 0, 0, 0.10)", + inner: "inset 0 -2px 0 0,0 2px 0 0" }, backgroundImage: { "gradient-dark":