Tabs

1"use client";2
3import { Tabs } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5
6const styles = stylex.create({ root: { width: "100%", maxWidth: 448 }, panel: { paddingTop: 16 } });7export function Basic() {8  return (9    <Tabs defaultValue="overview" xstyle={styles.root}>10      <Tabs.ListContainer>11        <Tabs.List activateOnFocus aria-label="Options">12          <Tabs.Tab value="overview">Overview</Tabs.Tab>13          <Tabs.Tab value="analytics">Analytics</Tabs.Tab>14          <Tabs.Tab value="reports">Reports</Tabs.Tab>15          <Tabs.Indicator />16        </Tabs.List>17      </Tabs.ListContainer>18      <Tabs.Panel xstyle={styles.panel} value="overview">19        <p>View your project overview and recent activity.</p>20      </Tabs.Panel>21      <Tabs.Panel xstyle={styles.panel} value="analytics">22        <p>Track your metrics and analyze performance data.</p>23      </Tabs.Panel>24      <Tabs.Panel xstyle={styles.panel} value="reports">25        <p>Generate and download detailed reports.</p>26      </Tabs.Panel>27    </Tabs>28  );29}

1"use client";2export { Vertical } from "./source";

1"use client";2export { Overflow } from "./source";

1"use client";2export { Disabled } from "./source";

1"use client";2export { WithSeparator } from "./source";

1"use client";2export { Secondary } from "./source";

1"use client";2export { SecondaryVertical } from "./source";

1"use client";2export { VerticalAlignment } from "./source";

1"use client";2// Adapted from HeroUI v3.2.6 (e385ac2), Apache-2.0. Native anchors supply real navigation.3import { Tabs } from "@lenso/ui";4import Link from "next/link";5import { styles } from "./source.stylex";6export function RenderFunction() {7  return (8    <Tabs9      defaultValue="getting-started"10      xstyle={styles.root}11      render={(props) => <div {...props} data-custom="foo" />}12    >13      <Tabs.ListContainer>14        <Tabs.List aria-label="Options">15          <Tabs.Tab16            value="getting-started"17            nativeButton={false}18            render={<Link href="/docs/react/getting-started" />}19          >20            Getting Started21          </Tabs.Tab>22          <Tabs.Tab23            value="components"24            nativeButton={false}25            render={<Link href="/docs/react/components" />}26          >27            Components28          </Tabs.Tab>29          <Tabs.Tab30            value="releases"31            nativeButton={false}32            render={<Link href="/docs/react/releases" />}33          >34            Releases35          </Tabs.Tab>36          <Tabs.Indicator />37        </Tabs.List>38      </Tabs.ListContainer>39      <Tabs.Panel value="overview" xstyle={styles.panel}>40        <p>View your project overview and recent activity.</p>41      </Tabs.Panel>42      <Tabs.Panel value="analytics" xstyle={styles.panel}>43        <p>Track your metrics and analyze performance data.</p>44      </Tabs.Panel>45      <Tabs.Panel value="reports" xstyle={styles.panel}>46        <p>Generate and download detailed reports.</p>47      </Tabs.Panel>48    </Tabs>49  );50}

1"use client";2export { CustomStyles } from "./source";