@koine/react 1.2.3 → 2.0.0-alpha.2

package/Tabs/TabsMui.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
-import TabsUnstyled, { type TabsUnstyledProps } from "@mui/base/TabsUnstyled";
-import TabsListUnstyled, { TabsListUnstyledProps } from "@mui/base/TabsListUnstyled";
-import TabUnstyled, { TabUnstyledProps, useTab } from "@mui/base/TabUnstyled";
-import TabPanelUnstyled, { TabPanelUnstyledProps } from "@mui/base/TabPanelUnstyled";
+/// <reference types="react" />
+import TabsUnstyled, { type TabsProps as TabsUnstyledProps } from "@mui/base/Tabs";
+import TabsListUnstyled, { type TabsListProps as TabsListUnstyledProps } from "@mui/base/TabsList";
+import TabUnstyled, { type TabProps as TabUnstyledProps } from "@mui/base/Tab";
+import { type UseTabReturnValue } from "@mui/base/useTab";
+import TabPanelUnstyled, { type TabPanelProps as TabPanelUnstyledProps } from "@mui/base/TabPanel";
 import type { MotionProps } from "framer-motion";
 import type { Simplify } from "@koine/utils";
 import { type WithComponents } from "../helpers";
@@ -28,7 +30,7 @@ export type Components = {
     };
     Indicator: {
         type: "span";
-        props: React.PropsWithChildren<Pick<ReturnType<typeof useTab>, "active" | "disabled" | "selected">>;
+        props: React.PropsWithChildren<Pick<UseTabReturnValue, "active" | /* "disabled" | */ "selected">>;
         motionable: true;
     };
     Panel: {
@@ -42,24 +44,22 @@ export type ComponentsProps = {
 export type Props = Simplify<WithComponents<OwnProps, Components>>;
 export type TabsProps = Props;
 export type KoineTabsProps = Props;
-export declare const Root: import("@mui/types").OverridableComponent<import("@mui/base/TabsUnstyled").TabsUnstyledTypeMap<{}, "div">>;
-export declare const List: import("@mui/types").OverridableComponent<import("@mui/base/TabsListUnstyled").TabsListUnstyledTypeMap<{}, "div">>;
-export declare const Indicator: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/TabUnstyled").UseTabReturnValue, "disabled" | "selected" | "active"> & {
+export declare const Root: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Tabs").TabsTypeMap<{}, "div">>;
+export declare const List: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabsList").TabsListTypeMap<{}, "div">>;
+export declare const Indicator: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<UseTabReturnValue, "selected" | "active"> & {
     children?: import("react").ReactNode;
 }>>;
-export declare const Panel: import("@mui/types").OverridableComponent<import("@mui/base/TabPanelUnstyled").TabPanelUnstyledTypeMap<{}, "div">>;
-export declare const Tab: import("react").ForwardRefExoticComponent<Omit<import("@mui/base/TabUnstyled").TabUnstyledOwnProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+export declare const Panel: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabPanel").TabPanelTypeMap<{}, "div">>;
+export declare const Tab: import("react").ForwardRefExoticComponent<Omit<import("@mui/base/Tab").TabOwnProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@mui/base/TabUnstyled").TabUnstyledOwnProps> & {
-    component?: "button" | undefined;
-} & {
-    Indicator?: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/TabUnstyled").UseTabReturnValue, "disabled" | "selected" | "active"> & {
+}, keyof import("@mui/base/Tab").TabOwnProps> & {
+    Indicator?: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<UseTabReturnValue, "selected" | "active"> & {
         children?: import("react").ReactNode;
     }>> | undefined;
 }, "ref"> & import("react").RefAttributes<unknown>>;
 export declare const KoineTabs: ((props: Omit<{
     key?: import("react").Key | null | undefined;
-    value?: string | number | false | undefined;
+    value?: string | number | null | undefined;
     id?: string | undefined;
     title?: string | undefined;
     color?: string | undefined;
@@ -67,10 +67,11 @@ export declare const KoineTabs: ((props: Omit<{
     style?: import("react").CSSProperties | undefined;
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
     defaultChecked?: boolean | undefined;
-    defaultValue?: string | number | false | undefined;
+    defaultValue?: string | number | null | undefined;
     suppressContentEditableWarning?: boolean | undefined;
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
+    autoFocus?: boolean | undefined;
     className?: string | undefined;
     contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
     contextMenu?: string | undefined;
@@ -86,11 +87,14 @@ export declare const KoineTabs: ((props: Omit<{
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
     about?: string | undefined;
+    content?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
     prefix?: string | undefined;
     property?: string | undefined;
+    rel?: string | undefined;
     resource?: string | undefined;
+    rev?: string | undefined;
     typeof?: string | undefined;
     vocab?: string | undefined;
     autoCapitalize?: string | undefined;
@@ -109,14 +113,18 @@ export declare const KoineTabs: ((props: Omit<{
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
     'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
+    'aria-braillelabel'?: string | undefined;
+    'aria-brailleroledescription'?: string | undefined;
     'aria-busy'?: (boolean | "true" | "false") | undefined;
     'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
     'aria-colcount'?: number | undefined;
     'aria-colindex'?: number | undefined;
+    'aria-colindextext'?: string | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
     'aria-current'?: boolean | "location" | "time" | "true" | "false" | "page" | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined;
+    'aria-description'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
     'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
@@ -146,6 +154,7 @@ export declare const KoineTabs: ((props: Omit<{
     'aria-roledescription'?: string | undefined;
     'aria-rowcount'?: number | undefined;
     'aria-rowindex'?: number | undefined;
+    'aria-rowindextext'?: string | undefined;
     'aria-rowspan'?: number | undefined;
     'aria-selected'?: (boolean | "true" | "false") | undefined;
     'aria-setsize'?: number | undefined;
@@ -156,7 +165,7 @@ export declare const KoineTabs: ((props: Omit<{
     'aria-valuetext'?: string | undefined;
     children?: import("react").ReactNode;
     dangerouslySetInnerHTML?: {
-        __html: string;
+        __html: string | TrustedHTML;
     } | undefined;
     onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
     onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
@@ -174,7 +183,7 @@ export declare const KoineTabs: ((props: Omit<{
     onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
     onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
     onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-    onChange?: ((event: import("react").SyntheticEvent<Element, Event>, value: string | number | boolean) => void) | undefined;
+    onChange?: ((event: import("react").SyntheticEvent<Element, Event> | null, value: string | number | null) => void) | undefined;
     onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
@@ -324,46 +333,42 @@ export declare const KoineTabs: ((props: Omit<{
     orientation?: ("horizontal" | "vertical") | undefined;
     selectionFollowsFocus?: boolean | undefined;
     mTab?: MotionProps | undefined;
-    Root: import("@mui/types").OverridableComponent<import("@mui/base/TabsUnstyled").TabsUnstyledTypeMap<{}, "div">>;
-    List: import("@mui/types").OverridableComponent<import("@mui/base/TabsListUnstyled").TabsListUnstyledTypeMap<{}, "div">>;
-    Tab: import("@mui/types").OverridableComponent<import("@mui/base/TabUnstyled").TabUnstyledTypeMap<{}, "button">>;
-    Indicator: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/TabUnstyled").UseTabReturnValue, "disabled" | "selected" | "active"> & {
+    Root: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Tabs").TabsTypeMap<{}, "div">>;
+    List: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabsList").TabsListTypeMap<{}, "div">>;
+    Tab: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Tab").TabTypeMap<{}, "button">>;
+    Indicator: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<UseTabReturnValue, "selected" | "active"> & {
         children?: import("react").ReactNode;
     }>>;
-    Panel: import("@mui/types").OverridableComponent<import("@mui/base/TabPanelUnstyled").TabPanelUnstyledTypeMap<{}, "div">>;
+    Panel: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabPanel").TabPanelTypeMap<{}, "div">>;
 }, "ref"> & import("react").RefAttributes<HTMLDivElement>) => import("react").FunctionComponentElement<any>) & {
-    Root: import("@mui/types").OverridableComponent<import("@mui/base/TabsUnstyled").TabsUnstyledTypeMap<{}, "div">>;
-    List: import("@mui/types").OverridableComponent<import("@mui/base/TabsListUnstyled").TabsListUnstyledTypeMap<{}, "div">>;
-    Tab: import("react").ForwardRefExoticComponent<Omit<import("@mui/base/TabUnstyled").TabUnstyledOwnProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    Root: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Tabs").TabsTypeMap<{}, "div">>;
+    List: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabsList").TabsListTypeMap<{}, "div">>;
+    Tab: import("react").ForwardRefExoticComponent<Omit<import("@mui/base/Tab").TabOwnProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-    }, keyof import("@mui/base/TabUnstyled").TabUnstyledOwnProps> & {
-        component?: "button" | undefined;
-    } & {
-        Indicator?: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/TabUnstyled").UseTabReturnValue, "disabled" | "selected" | "active"> & {
+    }, keyof import("@mui/base/Tab").TabOwnProps> & {
+        Indicator?: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<UseTabReturnValue, "selected" | "active"> & {
             children?: import("react").ReactNode;
         }>> | undefined;
     }, "ref"> & import("react").RefAttributes<unknown>>;
-    Indicator: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/TabUnstyled").UseTabReturnValue, "disabled" | "selected" | "active"> & {
+    Indicator: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<UseTabReturnValue, "selected" | "active"> & {
         children?: import("react").ReactNode;
     }>>;
-    Panel: import("@mui/types").OverridableComponent<import("@mui/base/TabPanelUnstyled").TabPanelUnstyledTypeMap<{}, "div">>;
+    Panel: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabPanel").TabPanelTypeMap<{}, "div">>;
 } & {
     defaultProps: {
-        Root: import("@mui/types").OverridableComponent<import("@mui/base/TabsUnstyled").TabsUnstyledTypeMap<{}, "div">>;
-        List: import("@mui/types").OverridableComponent<import("@mui/base/TabsListUnstyled").TabsListUnstyledTypeMap<{}, "div">>;
-        Tab: import("react").ForwardRefExoticComponent<Omit<import("@mui/base/TabUnstyled").TabUnstyledOwnProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+        Root: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Tabs").TabsTypeMap<{}, "div">>;
+        List: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabsList").TabsListTypeMap<{}, "div">>;
+        Tab: import("react").ForwardRefExoticComponent<Omit<import("@mui/base/Tab").TabOwnProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-        }, keyof import("@mui/base/TabUnstyled").TabUnstyledOwnProps> & {
-            component?: "button" | undefined;
-        } & {
-            Indicator?: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/TabUnstyled").UseTabReturnValue, "disabled" | "selected" | "active"> & {
+        }, keyof import("@mui/base/Tab").TabOwnProps> & {
+            Indicator?: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<UseTabReturnValue, "selected" | "active"> & {
                 children?: import("react").ReactNode;
             }>> | undefined;
         }, "ref"> & import("react").RefAttributes<unknown>>;
-        Indicator: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/TabUnstyled").UseTabReturnValue, "disabled" | "selected" | "active"> & {
+        Indicator: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<UseTabReturnValue, "selected" | "active"> & {
             children?: import("react").ReactNode;
         }>>;
-        Panel: import("@mui/types").OverridableComponent<import("@mui/base/TabPanelUnstyled").TabPanelUnstyledTypeMap<{}, "div">>;
+        Panel: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabPanel").TabPanelTypeMap<{}, "div">>;
     };
 };
 export {};

package/Tabs/TabsMui.js

@@ -4,21 +4,24 @@ exports.KoineTabs = exports.Tab = exports.Panel = exports.Indicator = exports.Li
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var TabsUnstyled_1 = tslib_1.__importDefault(require("@mui/base/TabsUnstyled"));
-var TabsListUnstyled_1 = tslib_1.__importDefault(require("@mui/base/TabsListUnstyled"));
-var TabUnstyled_1 = tslib_1.__importStar(require("@mui/base/TabUnstyled"));
-var TabPanelUnstyled_1 = tslib_1.__importDefault(require("@mui/base/TabPanelUnstyled"));
+var Tabs_1 = tslib_1.__importDefault(require("@mui/base/Tabs"));
+var TabsList_1 = tslib_1.__importDefault(require("@mui/base/TabsList"));
+var Tab_1 = tslib_1.__importDefault(require("@mui/base/Tab"));
+var useTab_1 = tslib_1.__importDefault(require("@mui/base/useTab"));
+var TabPanel_1 = tslib_1.__importDefault(require("@mui/base/TabPanel"));
 var helpers_1 = require("../helpers");
-exports.Root = TabsUnstyled_1.default;
-exports.List = TabsListUnstyled_1.default;
+exports.Root = Tabs_1.default;
+exports.List = TabsList_1.default;
 // export const Tab = TabUnstyled as unknown as Props["Tab"];
 exports.Indicator = "span";
-exports.Panel = TabPanelUnstyled_1.default;
+exports.Panel = TabPanel_1.default;
 exports.Tab = (0, react_1.forwardRef)(function Tab(_a, ref) {
-    var children = _a.children, component = _a.component, slotProps = _a.slotProps, slots = _a.slots, Indicator = _a.Indicator, props = tslib_1.__rest(_a, ["children", "component", "slotProps", "slots", "Indicator"]);
-    var _b = (0, TabUnstyled_1.useTab)(tslib_1.__assign(tslib_1.__assign({}, props), { ref: ref })), active = _b.active, disabled = _b.disabled, selected = _b.selected;
-    var indicatorProps = { active: active, disabled: disabled, selected: selected };
-    return ((0, jsx_runtime_1.jsxs)(TabUnstyled_1.default /* ref={ref}  */, tslib_1.__assign({}, props, { children: [children, Indicator && (0, jsx_runtime_1.jsx)(Indicator, tslib_1.__assign({}, indicatorProps))] })));
+    var children = _a.children, 
+    // component,
+    slot = _a.slot, slotProps = _a.slotProps, slots = _a.slots, Indicator = _a.Indicator, props = tslib_1.__rest(_a, ["children", "slot", "slotProps", "slots", "Indicator"]);
+    var _b = (0, useTab_1.default)(tslib_1.__assign(tslib_1.__assign({}, props), { rootRef: ref })), active = _b.active, /* disabled, */ selected = _b.selected;
+    var indicatorProps = { active: active, /* disabled, */ selected: selected };
+    return ((0, jsx_runtime_1.jsxs)(Tab_1.default /* ref={ref}  */, tslib_1.__assign({}, props, { children: [children, Indicator && (0, jsx_runtime_1.jsx)(Indicator, tslib_1.__assign({}, indicatorProps))] })));
 });
 /**
  *

package/Tabs/TabsMui.mjs

@@ -1,10 +1,11 @@
 import { __assign, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import TabsUnstyled from "@mui/base/TabsUnstyled";
-import TabsListUnstyled from "@mui/base/TabsListUnstyled";
-import TabUnstyled, { useTab } from "@mui/base/TabUnstyled";
-import TabPanelUnstyled from "@mui/base/TabPanelUnstyled";
+import TabsUnstyled from "@mui/base/Tabs";
+import TabsListUnstyled from "@mui/base/TabsList";
+import TabUnstyled from "@mui/base/Tab";
+import useTab from "@mui/base/useTab";
+import TabPanelUnstyled from "@mui/base/TabPanel";
 import { extendComponent, } from "../helpers";
 export var Root = TabsUnstyled;
 export var List = TabsListUnstyled;
@@ -12,9 +13,11 @@ export var List = TabsListUnstyled;
 export var Indicator = "span";
 export var Panel = TabPanelUnstyled;
 export var Tab = forwardRef(function Tab(_a, ref) {
-    var children = _a.children, component = _a.component, slotProps = _a.slotProps, slots = _a.slots, Indicator = _a.Indicator, props = __rest(_a, ["children", "component", "slotProps", "slots", "Indicator"]);
-    var _b = useTab(__assign(__assign({}, props), { ref: ref })), active = _b.active, disabled = _b.disabled, selected = _b.selected;
-    var indicatorProps = { active: active, disabled: disabled, selected: selected };
+    var children = _a.children, 
+    // component,
+    slot = _a.slot, slotProps = _a.slotProps, slots = _a.slots, Indicator = _a.Indicator, props = __rest(_a, ["children", "slot", "slotProps", "slots", "Indicator"]);
+    var _b = useTab(__assign(__assign({}, props), { rootRef: ref })), active = _b.active, /* disabled, */ selected = _b.selected;
+    var indicatorProps = { active: active, /* disabled, */ selected: selected };
     return (_jsxs(TabUnstyled /* ref={ref}  */, __assign({}, props, { children: [children, Indicator && _jsx(Indicator, __assign({}, indicatorProps))] })));
 });
 /**

package/Tabs/tw/bare.d.ts

@@ -1,38 +1,37 @@
 /// <reference types="react" />
+/// <reference types="react" />
 export type { KoineTabsProps } from "../TabsMui";
 export declare const Root: import("react").ForwardRefExoticComponent<Omit<{
     className?: string | undefined;
     ref?: import("react").Ref<any> | undefined;
-}, "ref"> & import("react").RefAttributes<import("@mui/types").OverridableComponent<import("@mui/base/TabsUnstyled").TabsUnstyledTypeMap<{}, "div">>>>;
+}, "ref"> & import("react").RefAttributes<import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Tabs").TabsTypeMap<{}, "div">>>>;
 export declare const List: import("react").ForwardRefExoticComponent<Omit<{
     className?: string | undefined;
     ref?: import("react").Ref<any> | undefined;
-}, "ref"> & import("react").RefAttributes<import("@mui/types").OverridableComponent<import("@mui/base/TabsListUnstyled").TabsListUnstyledTypeMap<{}, "div">>>>;
+}, "ref"> & import("react").RefAttributes<import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabsList").TabsListTypeMap<{}, "div">>>>;
 export declare const Tab: import("react").ForwardRefExoticComponent<Omit<{
     className?: string | undefined;
     ref?: import("react").Ref<any> | undefined;
-}, "ref"> & import("react").RefAttributes<import("react").ForwardRefExoticComponent<Omit<import("@mui/base/TabUnstyled").TabUnstyledOwnProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+}, "ref"> & import("react").RefAttributes<import("react").ForwardRefExoticComponent<Omit<import("@mui/base/Tab").TabOwnProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@mui/base/TabUnstyled").TabUnstyledOwnProps> & {
-    component?: "button" | undefined;
-} & {
-    Indicator?: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/TabUnstyled").UseTabReturnValue, "disabled" | "selected" | "active"> & {
+}, keyof import("@mui/base/Tab").TabOwnProps> & {
+    Indicator?: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/useTab").UseTabReturnValue, "selected" | "active"> & {
         children?: import("react").ReactNode;
     }>> | undefined;
 }, "ref"> & import("react").RefAttributes<unknown>>>>;
 export declare const Indicator: import("react").ForwardRefExoticComponent<Omit<{
     className?: string | undefined;
     ref?: import("react").Ref<any> | undefined;
-}, "ref"> & import("react").RefAttributes<NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/TabUnstyled").UseTabReturnValue, "disabled" | "selected" | "active"> & {
+}, "ref"> & import("react").RefAttributes<NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/useTab").UseTabReturnValue, "selected" | "active"> & {
     children?: import("react").ReactNode;
 }>>>>;
 export declare const Panel: import("react").ForwardRefExoticComponent<Omit<{
     className?: string | undefined;
     ref?: import("react").Ref<any> | undefined;
-}, "ref"> & import("react").RefAttributes<import("@mui/types").OverridableComponent<import("@mui/base/TabPanelUnstyled").TabPanelUnstyledTypeMap<{}, "div">>>>;
+}, "ref"> & import("react").RefAttributes<import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabPanel").TabPanelTypeMap<{}, "div">>>>;
 export declare const KoineTabs: ((props: Omit<{
     key?: import("react").Key | null | undefined;
-    value?: string | number | false | undefined;
+    value?: string | number | null | undefined;
     id?: string | undefined;
     title?: string | undefined;
     color?: string | undefined;
@@ -40,10 +39,11 @@ export declare const KoineTabs: ((props: Omit<{
     style?: import("react").CSSProperties | undefined;
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
     defaultChecked?: boolean | undefined;
-    defaultValue?: string | number | false | undefined;
+    defaultValue?: string | number | null | undefined;
     suppressContentEditableWarning?: boolean | undefined;
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
+    autoFocus?: boolean | undefined;
     className?: string | undefined;
     contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
     contextMenu?: string | undefined;
@@ -59,11 +59,14 @@ export declare const KoineTabs: ((props: Omit<{
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
     about?: string | undefined;
+    content?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
     prefix?: string | undefined;
     property?: string | undefined;
+    rel?: string | undefined;
     resource?: string | undefined;
+    rev?: string | undefined;
     typeof?: string | undefined;
     vocab?: string | undefined;
     autoCapitalize?: string | undefined;
@@ -82,14 +85,18 @@ export declare const KoineTabs: ((props: Omit<{
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
     'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
+    'aria-braillelabel'?: string | undefined;
+    'aria-brailleroledescription'?: string | undefined;
     'aria-busy'?: (boolean | "true" | "false") | undefined;
     'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
     'aria-colcount'?: number | undefined;
     'aria-colindex'?: number | undefined;
+    'aria-colindextext'?: string | undefined;
     'aria-colspan'?: number | undefined;
     'aria-controls'?: string | undefined;
     'aria-current'?: boolean | "location" | "time" | "true" | "false" | "page" | "step" | "date" | undefined;
     'aria-describedby'?: string | undefined;
+    'aria-description'?: string | undefined;
     'aria-details'?: string | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
     'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
@@ -119,6 +126,7 @@ export declare const KoineTabs: ((props: Omit<{
     'aria-roledescription'?: string | undefined;
     'aria-rowcount'?: number | undefined;
     'aria-rowindex'?: number | undefined;
+    'aria-rowindextext'?: string | undefined;
     'aria-rowspan'?: number | undefined;
     'aria-selected'?: (boolean | "true" | "false") | undefined;
     'aria-setsize'?: number | undefined;
@@ -129,7 +137,7 @@ export declare const KoineTabs: ((props: Omit<{
     'aria-valuetext'?: string | undefined;
     children?: import("react").ReactNode;
     dangerouslySetInnerHTML?: {
-        __html: string;
+        __html: string | TrustedHTML;
     } | undefined;
     onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
     onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
@@ -147,7 +155,7 @@ export declare const KoineTabs: ((props: Omit<{
     onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
     onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
     onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
-    onChange?: ((event: import("react").SyntheticEvent<Element, Event>, value: string | number | boolean) => void) | undefined;
+    onChange?: ((event: import("react").SyntheticEvent<Element, Event> | null, value: string | number | null) => void) | undefined;
     onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onBeforeInput?: import("react").FormEventHandler<HTMLDivElement> | undefined;
     onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
@@ -297,75 +305,71 @@ export declare const KoineTabs: ((props: Omit<{
     orientation?: ("horizontal" | "vertical") | undefined;
     selectionFollowsFocus?: boolean | undefined;
     mTab?: import("framer-motion").MotionProps | undefined;
-    Root: import("@mui/types").OverridableComponent<import("@mui/base/TabsUnstyled").TabsUnstyledTypeMap<{}, "div">>;
-    List: import("@mui/types").OverridableComponent<import("@mui/base/TabsListUnstyled").TabsListUnstyledTypeMap<{}, "div">>;
-    Tab: import("@mui/types").OverridableComponent<import("@mui/base/TabUnstyled").TabUnstyledTypeMap<{}, "button">>;
-    Indicator: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/TabUnstyled").UseTabReturnValue, "disabled" | "selected" | "active"> & {
+    Root: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Tabs").TabsTypeMap<{}, "div">>;
+    List: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabsList").TabsListTypeMap<{}, "div">>;
+    Tab: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Tab").TabTypeMap<{}, "button">>;
+    Indicator: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/useTab").UseTabReturnValue, "selected" | "active"> & {
         children?: import("react").ReactNode;
     }>>;
-    Panel: import("@mui/types").OverridableComponent<import("@mui/base/TabPanelUnstyled").TabPanelUnstyledTypeMap<{}, "div">>;
+    Panel: import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabPanel").TabPanelTypeMap<{}, "div">>;
 }, "ref"> & import("react").RefAttributes<HTMLDivElement>) => import("react").FunctionComponentElement<any>) & {
     Root: import("react").ForwardRefExoticComponent<Omit<{
         className?: string | undefined;
         ref?: import("react").Ref<any> | undefined;
-    }, "ref"> & import("react").RefAttributes<import("@mui/types").OverridableComponent<import("@mui/base/TabsUnstyled").TabsUnstyledTypeMap<{}, "div">>>>;
+    }, "ref"> & import("react").RefAttributes<import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Tabs").TabsTypeMap<{}, "div">>>>;
     List: import("react").ForwardRefExoticComponent<Omit<{
         className?: string | undefined;
         ref?: import("react").Ref<any> | undefined;
-    }, "ref"> & import("react").RefAttributes<import("@mui/types").OverridableComponent<import("@mui/base/TabsListUnstyled").TabsListUnstyledTypeMap<{}, "div">>>>;
+    }, "ref"> & import("react").RefAttributes<import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabsList").TabsListTypeMap<{}, "div">>>>;
     Tab: import("react").ForwardRefExoticComponent<Omit<{
         className?: string | undefined;
         ref?: import("react").Ref<any> | undefined;
-    }, "ref"> & import("react").RefAttributes<import("react").ForwardRefExoticComponent<Omit<import("@mui/base/TabUnstyled").TabUnstyledOwnProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    }, "ref"> & import("react").RefAttributes<import("react").ForwardRefExoticComponent<Omit<import("@mui/base/Tab").TabOwnProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-    }, keyof import("@mui/base/TabUnstyled").TabUnstyledOwnProps> & {
-        component?: "button" | undefined;
-    } & {
-        Indicator?: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/TabUnstyled").UseTabReturnValue, "disabled" | "selected" | "active"> & {
+    }, keyof import("@mui/base/Tab").TabOwnProps> & {
+        Indicator?: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/useTab").UseTabReturnValue, "selected" | "active"> & {
             children?: import("react").ReactNode;
         }>> | undefined;
     }, "ref"> & import("react").RefAttributes<unknown>>>>;
     Indicator: import("react").ForwardRefExoticComponent<Omit<{
         className?: string | undefined;
         ref?: import("react").Ref<any> | undefined;
-    }, "ref"> & import("react").RefAttributes<NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/TabUnstyled").UseTabReturnValue, "disabled" | "selected" | "active"> & {
+    }, "ref"> & import("react").RefAttributes<NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/useTab").UseTabReturnValue, "selected" | "active"> & {
         children?: import("react").ReactNode;
     }>>>>;
     Panel: import("react").ForwardRefExoticComponent<Omit<{
         className?: string | undefined;
         ref?: import("react").Ref<any> | undefined;
-    }, "ref"> & import("react").RefAttributes<import("@mui/types").OverridableComponent<import("@mui/base/TabPanelUnstyled").TabPanelUnstyledTypeMap<{}, "div">>>>;
+    }, "ref"> & import("react").RefAttributes<import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabPanel").TabPanelTypeMap<{}, "div">>>>;
 } & {
     defaultProps: {
         Root: import("react").ForwardRefExoticComponent<Omit<{
             className?: string | undefined;
             ref?: import("react").Ref<any> | undefined;
-        }, "ref"> & import("react").RefAttributes<import("@mui/types").OverridableComponent<import("@mui/base/TabsUnstyled").TabsUnstyledTypeMap<{}, "div">>>>;
+        }, "ref"> & import("react").RefAttributes<import("@mui/base/utils").PolymorphicComponent<import("@mui/base/Tabs").TabsTypeMap<{}, "div">>>>;
         List: import("react").ForwardRefExoticComponent<Omit<{
             className?: string | undefined;
             ref?: import("react").Ref<any> | undefined;
-        }, "ref"> & import("react").RefAttributes<import("@mui/types").OverridableComponent<import("@mui/base/TabsListUnstyled").TabsListUnstyledTypeMap<{}, "div">>>>;
+        }, "ref"> & import("react").RefAttributes<import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabsList").TabsListTypeMap<{}, "div">>>>;
         Tab: import("react").ForwardRefExoticComponent<Omit<{
             className?: string | undefined;
             ref?: import("react").Ref<any> | undefined;
-        }, "ref"> & import("react").RefAttributes<import("react").ForwardRefExoticComponent<Omit<import("@mui/base/TabUnstyled").TabUnstyledOwnProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+        }, "ref"> & import("react").RefAttributes<import("react").ForwardRefExoticComponent<Omit<import("@mui/base/Tab").TabOwnProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
             ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-        }, keyof import("@mui/base/TabUnstyled").TabUnstyledOwnProps> & {
-            component?: "button" | undefined;
-        } & {
-            Indicator?: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/TabUnstyled").UseTabReturnValue, "disabled" | "selected" | "active"> & {
+        }, keyof import("@mui/base/Tab").TabOwnProps> & {
+            Indicator?: NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/useTab").UseTabReturnValue, "selected" | "active"> & {
                 children?: import("react").ReactNode;
             }>> | undefined;
         }, "ref"> & import("react").RefAttributes<unknown>>>>;
         Indicator: import("react").ForwardRefExoticComponent<Omit<{
             className?: string | undefined;
             ref?: import("react").Ref<any> | undefined;
-        }, "ref"> & import("react").RefAttributes<NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/TabUnstyled").UseTabReturnValue, "disabled" | "selected" | "active"> & {
+        }, "ref"> & import("react").RefAttributes<NonNullable<import("react").ElementType<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "style" | "onDrag" | "onDragEnd" | "onDragStart" | "onAnimationStart" | "onAnimationEnd"> & Pick<import("@mui/base/useTab").UseTabReturnValue, "selected" | "active"> & {
             children?: import("react").ReactNode;
         }>>>>;
         Panel: import("react").ForwardRefExoticComponent<Omit<{
             className?: string | undefined;
             ref?: import("react").Ref<any> | undefined;
-        }, "ref"> & import("react").RefAttributes<import("@mui/types").OverridableComponent<import("@mui/base/TabPanelUnstyled").TabPanelUnstyledTypeMap<{}, "div">>>>;
+        }, "ref"> & import("react").RefAttributes<import("@mui/base/utils").PolymorphicComponent<import("@mui/base/TabPanel").TabPanelTypeMap<{}, "div">>>>;
     };
 };