@arobo/react 1.0.1 → 1.1.1

package/dist/components/slider/slider.js

@@ -0,0 +1,176 @@
+import React__default, { createContext, useContext } from 'react';
+import { Slider, SliderThumb as SliderThumb$1, SliderTrack as SliderTrack$1, SliderOutput as SliderOutput$1 } from 'react-aria-components';
+import { dataAttr } from '../../utils/assertion.js';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { sliderVariants } from '../../packages/styles/src/components/slider/slider.styles.js';
+
+const SliderContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Slider Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const SliderRoot = ({
+  children,
+  className,
+  orientation = "horizontal",
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => sliderVariants({}), []);
+  return /*#__PURE__*/jsx(Slider, {
+    "data-slot": "slider",
+    orientation: orientation,
+    ...props,
+    className: composeTwRenderProps(className, slots.base()),
+    children: values => /*#__PURE__*/jsx(SliderContext, {
+      value: {
+        slots,
+        state: values
+      },
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Slider Output
+ * -----------------------------------------------------------------------------------------------*/
+
+const SliderOutput = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(SliderContext);
+  return /*#__PURE__*/jsx(SliderOutput$1, {
+    className: composeTwRenderProps(className, slots?.output()),
+    "data-slot": "slider-output",
+    ...props,
+    children: children ? values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof children === "function" ? children(values) : children
+    }) : ({
+      state
+    }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" – ")
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Slider Track
+ * -----------------------------------------------------------------------------------------------*/
+
+const SliderTrack = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots,
+    state
+  } = useContext(SliderContext);
+  const {
+    getThumbPercent,
+    values
+  } = state?.state || {};
+  const singleThumb = values?.length && values.length === 1;
+  const [startOffset, endOffset] = [values?.length && values.length > 1 ? getThumbPercent?.(0) : 0, getThumbPercent?.(values?.length ? values.length - 1 : 0)].sort();
+  const fillWidth = (endOffset - startOffset) * 100;
+  return /*#__PURE__*/jsx(SliderTrack$1, {
+    className: composeTwRenderProps(className, slots?.track()),
+    "data-disabled": dataAttr(state?.isDisabled),
+    "data-slot": "slider-track",
+    ...(singleThumb ? {
+      "data-fill-start": dataAttr(fillWidth > 0),
+      "data-fill-end": dataAttr(fillWidth == 100)
+    } : {
+      "data-fill-start": dataAttr(startOffset == 0),
+      "data-fill-end": dataAttr(startOffset * 100 + fillWidth == 100)
+    }),
+    ...props,
+    children: values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Slider Fill
+ * -----------------------------------------------------------------------------------------------*/
+
+const SliderFill = ({
+  className,
+  style,
+  ...props
+}) => {
+  const {
+    slots,
+    state
+  } = useContext(SliderContext);
+  const {
+    getThumbPercent,
+    orientation,
+    values
+  } = state?.state || {};
+  const [startOffset, endOffset] = [values?.length && values.length > 1 ? getThumbPercent?.(0) : 0, getThumbPercent?.(values?.length ? values.length - 1 : 0)].sort();
+  const isVertical = orientation === "vertical";
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.fill, className),
+    "data-disabled": dataAttr(state?.isDisabled),
+    "data-slot": "slider-fill",
+    style: {
+      ...style,
+      // TODO: rtl support
+      [isVertical ? "bottom" : "left"]: `${startOffset * 100}%`,
+      ...(isVertical ? {
+        height: `${(endOffset - startOffset) * 100}%`
+      } : {
+        width: `${(endOffset - startOffset) * 100}%`
+      })
+    },
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Slider Thumb
+ * -----------------------------------------------------------------------------------------------*/
+
+const SliderThumb = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(SliderContext);
+  return /*#__PURE__*/jsx(SliderThumb$1, {
+    className: composeTwRenderProps(className, slots?.thumb()),
+    "data-slot": "slider-thumb",
+    ...props,
+    children: values => /*#__PURE__*/jsx(Fragment, {
+      children: typeof children === "function" ? children(values) : children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * TODO: Slider Marks
+ * -----------------------------------------------------------------------------------------------*/
+
+const SliderMarks = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(SliderContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.marks, className),
+    "data-slot": "slider-marks",
+    ...props
+  });
+};
+
+export { SliderFill, SliderMarks, SliderOutput, SliderRoot, SliderThumb, SliderTrack };

package/dist/components/spinner/index.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentProps } from "react";
+import { SpinnerRoot } from "./spinner";
+export declare const Spinner: (({ className, color, size, ...props }: import("./spinner").SpinnerRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ className, color, size, ...props }: import("./spinner").SpinnerRootProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Spinner = {
+    Props: ComponentProps<typeof SpinnerRoot>;
+    RootProps: ComponentProps<typeof SpinnerRoot>;
+};
+export { SpinnerRoot };
+export type { SpinnerRootProps, SpinnerRootProps as SpinnerProps } from "./spinner";

package/dist/components/spinner/index.js

@@ -0,0 +1,10 @@
+import { SpinnerRoot } from './spinner.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Spinner = Object.assign(SpinnerRoot, {
+  Root: SpinnerRoot
+});
+
+export { Spinner, SpinnerRoot };

package/dist/components/spinner/spinner.d.ts

@@ -0,0 +1,7 @@
+import type { SpinnerVariants } from "@arobo/styles";
+import type { ComponentPropsWithRef } from "react";
+interface SpinnerRootProps extends Omit<ComponentPropsWithRef<"svg">, "display" | "opacity" | "color">, SpinnerVariants {
+}
+declare const SpinnerRoot: ({ className, color, size, ...props }: SpinnerRootProps) => import("react/jsx-runtime").JSX.Element;
+export { SpinnerRoot };
+export type { SpinnerRootProps };

package/dist/components/spinner/spinner.js

@@ -0,0 +1,87 @@
+import { useId } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { spinnerVariants } from '../../packages/styles/src/components/spinner/spinner.styles.js';
+
+const SpinnerPrimitive = ({
+  ...props
+}) => {
+  const id = useId();
+  return /*#__PURE__*/jsxs("svg", {
+    "data-slot": "spinner-icon",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: [/*#__PURE__*/jsxs("defs", {
+      children: [/*#__PURE__*/jsxs("linearGradient", {
+        id: `«data-slot-icon-def-1»-${id}`,
+        x1: "50%",
+        x2: "50%",
+        y1: "5.271%",
+        y2: "91.793%",
+        children: [/*#__PURE__*/jsx("stop", {
+          offset: "0%",
+          stopColor: "currentColor"
+        }), /*#__PURE__*/jsx("stop", {
+          offset: "100%",
+          stopColor: "currentColor",
+          stopOpacity: 0.55
+        })]
+      }), /*#__PURE__*/jsxs("linearGradient", {
+        id: `«data-slot-icon-def-2»-${id}`,
+        x1: "50%",
+        x2: "50%",
+        y1: "15.24%",
+        y2: "87.15%",
+        children: [/*#__PURE__*/jsx("stop", {
+          offset: "0%",
+          stopColor: "currentColor",
+          stopOpacity: 0
+        }), /*#__PURE__*/jsx("stop", {
+          offset: "100%",
+          stopColor: "currentColor",
+          stopOpacity: 0.55
+        })]
+      })]
+    }), /*#__PURE__*/jsxs("g", {
+      fill: "none",
+      children: [/*#__PURE__*/jsx("path", {
+        d: "m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"
+      }), /*#__PURE__*/jsx("path", {
+        d: "M8.749.021a1.5 1.5 0 0 1 .497 2.958A7.5 7.5 0 0 0 3 10.375a7.5 7.5 0 0 0 7.5 7.5v3c-5.799 0-10.5-4.7-10.5-10.5C0 5.23 3.726.865 8.749.021",
+        fill: `url(#«data-slot-icon-def-1»-${id})`,
+        transform: "translate(1.5 1.625)"
+      }), /*#__PURE__*/jsx("path", {
+        d: "M15.392 2.673a1.5 1.5 0 0 1 2.119-.115A10.48 10.48 0 0 1 21 10.375c0 5.8-4.701 10.5-10.5 10.5v-3a7.5 7.5 0 0 0 5.007-13.084a1.5 1.5 0 0 1-.115-2.118",
+        fill: `url(#«data-slot-icon-def-2»-${id})`,
+        transform: "translate(1.5 1.625)"
+      })]
+    })]
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Spinner Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const SpinnerRoot = ({
+  className,
+  color,
+  size,
+  ...props
+}) => {
+  return /*#__PURE__*/jsx("span", {
+    "data-slot": "spinner",
+    className: spinnerVariants({
+      className,
+      color,
+      size
+    }),
+    children: /*#__PURE__*/jsx(SpinnerPrimitive, {
+      "aria-hidden": true,
+      "aria-label": "Loading",
+      role: "presentation",
+      ...props
+    })
+  });
+};
+
+export { SpinnerRoot };

package/dist/components/surface/index.js

@@ -1,6 +1,6 @@
 import { SurfaceRoot } from './surface.js';
 export { SurfaceContext } from './surface.js';
-export { surfaceVariants } from '../../styles/src/components/surface/surface.styles.js';
+export { surfaceVariants } from '../../packages/styles/src/components/surface/surface.styles.js';
 
 /* -------------------------------------------------------------------------------------------------
  * Compound Component

package/dist/components/surface/surface.js

@@ -1,6 +1,6 @@
 import { createContext } from 'react';
 import { jsx } from 'react/jsx-runtime';
-import { surfaceVariants } from '../../styles/src/components/surface/surface.styles.js';
+import { surfaceVariants } from '../../packages/styles/src/components/surface/surface.styles.js';
 
 const SurfaceContext = /*#__PURE__*/createContext({});
 

package/dist/components/switch/index.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps } from "react";
+import { SwitchControl, SwitchIcon, SwitchRoot, SwitchThumb } from "./switch";
+export declare const Switch: (({ children, className, size, ...props }: import("./switch").SwitchRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, size, ...props }: import("./switch").SwitchRootProps) => import("react/jsx-runtime").JSX.Element;
+    Control: ({ children, className, ...props }: import("./switch").SwitchControlProps) => import("react/jsx-runtime").JSX.Element;
+    Thumb: ({ children, className, ...props }: import("./switch").SwitchThumbProps) => import("react/jsx-runtime").JSX.Element;
+    Icon: ({ children, className, ...props }: import("./switch").SwitchIconProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Switch = {
+    Props: ComponentProps<typeof SwitchRoot>;
+    RootProps: ComponentProps<typeof SwitchRoot>;
+    ControlProps: ComponentProps<typeof SwitchControl>;
+    ThumbProps: ComponentProps<typeof SwitchThumb>;
+    IconProps: ComponentProps<typeof SwitchIcon>;
+};
+export { SwitchRoot, SwitchControl, SwitchIcon, SwitchThumb };
+export type { SwitchRootProps, SwitchRootProps as SwitchProps, SwitchControlProps, SwitchThumbProps, SwitchIconProps, } from "./switch";

package/dist/components/switch/index.js

@@ -0,0 +1,13 @@
+import { SwitchRoot, SwitchIcon, SwitchThumb, SwitchControl } from './switch.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Switch = Object.assign(SwitchRoot, {
+  Root: SwitchRoot,
+  Control: SwitchControl,
+  Thumb: SwitchThumb,
+  Icon: SwitchIcon
+});
+
+export { Switch, SwitchControl, SwitchIcon, SwitchRoot, SwitchThumb };

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentPropsWithRef } from "react";
+import { Switch as SwitchPrimitive } from "react-aria-components";
+import { type SwitchVariants } from "@arobo/styles";
+interface SwitchRootProps extends ComponentPropsWithRef<typeof SwitchPrimitive>, SwitchVariants {
+}
+declare const SwitchRoot: ({ children, className, size, ...props }: SwitchRootProps) => import("react/jsx-runtime").JSX.Element;
+interface SwitchControlProps extends ComponentPropsWithRef<"span"> {
+}
+declare const SwitchControl: ({ children, className, ...props }: SwitchControlProps) => import("react/jsx-runtime").JSX.Element;
+interface SwitchThumbProps extends ComponentPropsWithRef<"span"> {
+}
+declare const SwitchThumb: ({ children, className, ...props }: SwitchThumbProps) => import("react/jsx-runtime").JSX.Element;
+interface SwitchIconProps extends ComponentPropsWithRef<"span"> {
+}
+declare const SwitchIcon: ({ children, className, ...props }: SwitchIconProps) => import("react/jsx-runtime").JSX.Element;
+export { SwitchRoot, SwitchControl, SwitchThumb, SwitchIcon };
+export type { SwitchRootProps, SwitchControlProps, SwitchThumbProps, SwitchIconProps };

package/dist/components/switch/switch.js

@@ -0,0 +1,97 @@
+import React__default, { createContext, useContext } from 'react';
+import { Switch } from 'react-aria-components';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { switchVariants } from '../../packages/styles/src/components/switch/switch.styles.js';
+
+const SwitchContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Switch Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const SwitchRoot = ({
+  children,
+  className,
+  size,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => switchVariants({
+    size
+  }), [size]);
+  return /*#__PURE__*/jsx(SwitchContext, {
+    value: {
+      slots
+    },
+    children: /*#__PURE__*/jsx(Switch, {
+      "data-slot": "switch",
+      ...props,
+      className: composeTwRenderProps(className, slots.base()),
+      children: values => /*#__PURE__*/jsx(Fragment, {
+        children: typeof children === "function" ? children(values) : children
+      })
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Switch Control
+ * -----------------------------------------------------------------------------------------------*/
+
+const SwitchControl = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(SwitchContext);
+  return /*#__PURE__*/jsx("span", {
+    className: composeSlotClassName(slots?.control, className),
+    "data-slot": "switch-control",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Switch Thumb
+ * -----------------------------------------------------------------------------------------------*/
+
+const SwitchThumb = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(SwitchContext);
+  return /*#__PURE__*/jsx("span", {
+    className: composeSlotClassName(slots?.thumb, className),
+    "data-slot": "switch-thumb",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Switch Icon
+ * -----------------------------------------------------------------------------------------------*/
+
+const SwitchIcon = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(SwitchContext);
+  return /*#__PURE__*/jsx("span", {
+    className: composeSlotClassName(slots?.icon, className),
+    "data-slot": "switch-icon",
+    ...props,
+    children: children
+  });
+};
+
+export { SwitchControl, SwitchIcon, SwitchRoot, SwitchThumb };

package/dist/components/tabs/index.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react";
+import { Tab, TabIndicator, TabList, TabListContainer, TabPanel, TabsRoot } from "./tabs";
+export declare const Tabs: (({ children, className, hideSeparator, orientation, variant, ...props }: import("./tabs").TabsRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: ({ children, className, hideSeparator, orientation, variant, ...props }: import("./tabs").TabsRootProps) => import("react/jsx-runtime").JSX.Element;
+    ListContainer: ({ children, className, ...props }: import("./tabs").TabListContainerProps) => import("react/jsx-runtime").JSX.Element;
+    List: ({ children, className, ...props }: import("./tabs").TabListProps) => import("react/jsx-runtime").JSX.Element;
+    Tab: ({ children, className, ...props }: import("./tabs").TabProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: ({ className, ...props }: import("./tabs").TabIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    Panel: ({ children, className, ...props }: import("./tabs").TabPanelProps) => import("react/jsx-runtime").JSX.Element;
+};
+export type Tabs = {
+    Props: ComponentProps<typeof TabsRoot>;
+    RootProps: ComponentProps<typeof TabsRoot>;
+    ListContainer: ComponentProps<typeof TabListContainer>;
+    ListProps: ComponentProps<typeof TabList>;
+    TabProps: ComponentProps<typeof Tab>;
+    IndicatorProps: ComponentProps<typeof TabIndicator>;
+    PanelProps: ComponentProps<typeof TabPanel>;
+};
+export { TabsRoot, TabListContainer, TabList, Tab, TabIndicator, TabPanel };
+export type { TabsRootProps, TabsRootProps as TabsProps, TabListContainerProps, TabListProps, TabProps, TabIndicatorProps, TabPanelProps, } from "./tabs";

package/dist/components/tabs/index.js

@@ -0,0 +1,15 @@
+import { TabsRoot, TabPanel, TabIndicator, Tab, TabList, TabListContainer } from './tabs.js';
+
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+const Tabs = Object.assign(TabsRoot, {
+  Root: TabsRoot,
+  ListContainer: TabListContainer,
+  List: TabList,
+  Tab,
+  Indicator: TabIndicator,
+  Panel: TabPanel
+});
+
+export { Tab, TabIndicator, TabList, TabListContainer, TabPanel, Tabs, TabsRoot };

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,34 @@
+import type { ComponentPropsWithRef } from "react";
+import React from "react";
+import { SelectionIndicator as SelectionIndicatorPrimitive, TabList as TabListPrimitive, TabPanel as TabPanelPrimitive, Tab as TabPrimitive, Tabs as TabsPrimitive } from "react-aria-components";
+import { type TabsVariants } from "@arobo/styles";
+interface TabsRootProps extends ComponentPropsWithRef<typeof TabsPrimitive>, TabsVariants {
+    children: React.ReactNode;
+    className?: string;
+    hideSeparator?: boolean;
+}
+declare const TabsRoot: ({ children, className, hideSeparator, orientation, variant, ...props }: TabsRootProps) => import("react/jsx-runtime").JSX.Element;
+interface TabListContainerProps extends ComponentPropsWithRef<"div"> {
+    className?: string;
+}
+declare const TabListContainer: ({ children, className, ...props }: TabListContainerProps) => import("react/jsx-runtime").JSX.Element;
+interface TabListProps extends ComponentPropsWithRef<typeof TabListPrimitive<object>> {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const TabList: ({ children, className, ...props }: TabListProps) => import("react/jsx-runtime").JSX.Element;
+interface TabProps extends ComponentPropsWithRef<typeof TabPrimitive> {
+    className?: string;
+}
+declare const Tab: ({ children, className, ...props }: TabProps) => import("react/jsx-runtime").JSX.Element;
+interface TabIndicatorProps extends ComponentPropsWithRef<typeof SelectionIndicatorPrimitive> {
+    className?: string;
+}
+declare const TabIndicator: ({ className, ...props }: TabIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+interface TabPanelProps extends Omit<ComponentPropsWithRef<typeof TabPanelPrimitive>, "children"> {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const TabPanel: ({ children, className, ...props }: TabPanelProps) => import("react/jsx-runtime").JSX.Element;
+export { TabsRoot, TabListContainer, TabList, Tab, TabIndicator, TabPanel };
+export type { TabsRootProps, TabListContainerProps, TabListProps, TabProps, TabIndicatorProps, TabPanelProps, };

package/dist/components/tabs/tabs.js

@@ -0,0 +1,140 @@
+import React__default, { createContext, useContext } from 'react';
+import { Tabs, TabPanel as TabPanel$1, SelectionIndicator, Tab as Tab$1, TabList as TabList$1 } from 'react-aria-components';
+import { composeTwRenderProps, composeSlotClassName } from '../../utils/compose.js';
+import { jsx } from 'react/jsx-runtime';
+import { tabsVariants } from '../../packages/styles/src/components/tabs/tabs.styles.js';
+
+const TabsContext = /*#__PURE__*/createContext({});
+
+/* -------------------------------------------------------------------------------------------------
+ * Tabs Root
+ * -----------------------------------------------------------------------------------------------*/
+
+const TabsRoot = ({
+  children,
+  className,
+  hideSeparator = false,
+  orientation = "horizontal",
+  variant,
+  ...props
+}) => {
+  const slots = React__default.useMemo(() => tabsVariants({
+    variant
+  }), [variant]);
+  return /*#__PURE__*/jsx(TabsContext, {
+    value: {
+      hideSeparator,
+      orientation,
+      slots
+    },
+    children: /*#__PURE__*/jsx(Tabs, {
+      ...props,
+      className: composeTwRenderProps(className, slots.base()),
+      "data-slot": "tabs",
+      orientation: orientation,
+      children: children
+    })
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Tabs List Container
+ * -----------------------------------------------------------------------------------------------*/
+
+const TabListContainer = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(TabsContext);
+  return /*#__PURE__*/jsx("div", {
+    className: composeSlotClassName(slots?.tabListContainer, className),
+    "data-slot": "tabs-list-container",
+    ...props,
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Tabs List
+ * -----------------------------------------------------------------------------------------------*/
+
+const TabList = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    hideSeparator,
+    slots
+  } = useContext(TabsContext);
+  return /*#__PURE__*/jsx(TabList$1, {
+    ...props,
+    className: composeTwRenderProps(className, slots?.tabList()),
+    "data-hide-separator": hideSeparator ? "true" : undefined,
+    "data-slot": "tabs-list",
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Tab
+ * -----------------------------------------------------------------------------------------------*/
+
+const Tab = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(TabsContext);
+  return /*#__PURE__*/jsx(Tab$1, {
+    ...props,
+    className: composeTwRenderProps(className, slots?.tab()),
+    "data-slot": "tabs-tab",
+    children: children
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Tab Indicator
+ * -----------------------------------------------------------------------------------------------*/
+
+const TabIndicator = ({
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(TabsContext);
+  return /*#__PURE__*/jsx(SelectionIndicator, {
+    className: composeSlotClassName(slots?.tabIndicator, className),
+    "data-slot": "tabs-indicator",
+    ...props
+  });
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * Tab Panel
+ * -----------------------------------------------------------------------------------------------*/
+
+const TabPanel = ({
+  children,
+  className,
+  ...props
+}) => {
+  const {
+    slots
+  } = useContext(TabsContext);
+  return /*#__PURE__*/jsx(TabPanel$1, {
+    ...props,
+    className: composeTwRenderProps(className, slots?.tabPanel()),
+    "data-slot": "tabs-panel",
+    children: children
+  });
+};
+
+export { Tab, TabIndicator, TabList, TabListContainer, TabPanel, TabsRoot };