@startdownnotez404/ui 1.0.0 → 1.3.5

package/dist/tab.d.ts

@@ -0,0 +1,182 @@
+import * as _mui_material_Tab from '@mui/material/Tab';
+export { default as Tab, TabProps } from '@mui/material/Tab';
+export { default as Tabs, TabsProps } from '@mui/material/Tabs';
+import * as csstype from 'csstype';
+import * as _mui_material_styles from '@mui/material/styles';
+import { SxProps, Theme } from '@mui/material/styles';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
+import * as _mui_material_ButtonBase from '@mui/material/ButtonBase';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const tabTheme: {
+    readonly defaultProps: {
+        readonly disableRipple: true;
+    };
+    readonly styleOverrides: {
+        readonly root: ({ theme }: _mui_material_Tab.TabOwnProps & Omit<_mui_material_ButtonBase.ButtonBaseOwnProps, "classes"> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "icon" | "iconPosition" | "label" | "value" | "wrapped"> & {
+            component?: React.ElementType | undefined;
+        } & Record<string, unknown> & {
+            ownerState: _mui_material_Tab.TabOwnProps & Omit<_mui_material_ButtonBase.ButtonBaseOwnProps, "classes"> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "icon" | "iconPosition" | "label" | "value" | "wrapped"> & {
+                component?: React.ElementType | undefined;
+            } & Record<string, unknown>;
+        } & {
+            theme: Omit<_mui_material_styles.Theme, "components" | "palette"> & _mui_material_styles.CssVarsTheme;
+        }) => {
+            minHeight: number;
+            minWidth: number;
+            paddingInline: string;
+            paddingBlock: string;
+            borderRadius: string | number;
+            textTransform: "none";
+            fontWeight: csstype.Property.FontWeight | undefined;
+            color: "var(--mui-palette-text-secondary)";
+            transition: string;
+            '&:hover': {
+                color: string;
+                backgroundColor: string;
+            };
+            '&.Mui-selected': {
+                color: string;
+                backgroundColor: string;
+            };
+            '&.Mui-selected:hover': {
+                backgroundColor: string;
+            };
+            '&.Mui-disabled': {
+                color: string;
+            };
+        };
+    };
+};
+declare const tabsTheme: {
+    readonly styleOverrides: {
+        readonly root: {
+            readonly minHeight: 44;
+        };
+        readonly list: {
+            readonly gap: 4;
+        };
+        readonly indicator: {
+            readonly height: 3;
+            readonly borderRadius: 999;
+            readonly backgroundColor: "var(--mui-palette-primary-emphasis)";
+        };
+        readonly scrollButtons: {
+            readonly color: "var(--mui-palette-text-secondary)";
+            readonly '&.Mui-disabled': {
+                readonly opacity: 0.4;
+            };
+        };
+    };
+};
+
+/**
+ * Default TabPanel CSS variables — set on the root wrapper via `sx`.
+ * Override with `sx`, `slotProps.root.sx`, or `slotProps.root.style`.
+ */
+declare const tabPanelRootSx: {
+    readonly '--tabpanel-accent': "var(--mui-palette-primary-emphasis)";
+    readonly '--tabpanel-track-bg': "color-mix(in lab, var(--tabpanel-accent), transparent 92%)";
+    readonly '--tabpanel-tab-color': "var(--mui-palette-text-secondary)";
+    readonly '--tabpanel-tab-color-active': "var(--tabpanel-accent)";
+    readonly '--tabpanel-tab-color-disabled': "var(--mui-palette-text-disabled)";
+    readonly '--tabpanel-badge-color': "var(--mui-palette-error-main)";
+    readonly '--tabpanel-badge-bg': "color-mix(in lab, var(--mui-palette-error-main), transparent 86%)";
+    readonly '--tabpanel-focus-bg': "color-mix(in lab, var(--mui-palette-background-paper), transparent 78%)";
+    readonly '--tabpanel-focus-bg-dark': "color-mix(in lab, var(--mui-palette-background-paper), transparent 55%)";
+    readonly '--tabpanel-focus-shadow': string;
+    readonly '--tabpanel-focus-shadow-dark': string;
+    readonly '--tabpanel-focus-radius': "10px";
+    readonly '--tabpanel-track-radius': "12px";
+    readonly '--tabpanel-track-pad': "3px";
+    readonly '--tabpanel-item-gap': "1px";
+    readonly '--tabpanel-indicator-ease': "cubic-bezier(0.32, 0.72, 0, 1)";
+    readonly '--tabpanel-indicator-ms': "380ms";
+};
+type TabPanelStyleVars = {
+    accent?: string;
+    trackBg?: string;
+    tabColor?: string;
+    tabColorActive?: string;
+    tabColorDisabled?: string;
+    badgeColor?: string;
+    badgeBg?: string;
+    focusBg?: string;
+    focusBgDark?: string;
+    focusShadow?: string;
+    focusShadowDark?: string;
+    focusRadius?: string;
+    trackRadius?: string;
+};
+/** Maps typed style tokens onto CSS custom properties for the root wrapper. */
+declare function tabPanelStyleToCssVars(style?: TabPanelStyleVars): Record<string, string>;
+
+type TabPanelItem = {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    badge?: number | string;
+    disabled?: boolean;
+    content?: ReactNode;
+};
+type TabPanelSlotProps = {
+    root?: {
+        /** Typed color / token overrides → CSS vars on the root wrapper. */
+        style?: TabPanelStyleVars;
+        sx?: SxProps<Theme>;
+    };
+    strip?: {
+        sx?: SxProps<Theme>;
+    };
+    indicator?: {
+        sx?: SxProps<Theme>;
+    };
+    tab?: {
+        sx?: SxProps<Theme>;
+    };
+    menu?: {
+        sx?: SxProps<Theme>;
+    };
+    panel?: {
+        sx?: SxProps<Theme>;
+    };
+};
+type TabPanelProps = {
+    items: TabPanelItem[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (id: string) => void;
+    /**
+     * When false, the fitted strip prefers icons (labels stay for a11y / overflow menu).
+     * Defaults to true.
+     */
+    showLabels?: boolean;
+    /**
+     * Corner radius of the selected focus highlight (and tab hit targets).
+     * Number = px (avoids MUI theme multiplier). Default: `10`.
+     * Sets `--tabpanel-focus-radius` (overridable via `slotProps.root.style` / `sx`).
+     */
+    focusRadius?: number | string;
+    /**
+     * Corner radius of the outer track. Number = px. Default: `12`.
+     * Sets `--tabpanel-track-radius` (overridable via `slotProps.root.style` / `sx`).
+     */
+    trackRadius?: number | string;
+    /** Root wrapper `sx` — merge after default CSS vars. */
+    sx?: SxProps<Theme>;
+    className?: string;
+    slotProps?: TabPanelSlotProps;
+};
+
+/**
+ * Adaptive content tabs: soft liquid track + morphing pill.
+ * Overflow cuts trailing tabs into a More dropdown (selected stays visible).
+ *
+ * Colors / radii are CSS vars on the root (`tabPanelRootSx`). Override via
+ * `sx`, `slotProps.root.style`, or `slotProps.root.sx`.
+ */
+declare function TabPanel({ items, value, defaultValue, onChange, showLabels, focusRadius, trackRadius, sx, className, slotProps, }: TabPanelProps): react_jsx_runtime.JSX.Element;
+
+export { TabPanel, type TabPanelItem, type TabPanelProps, type TabPanelSlotProps, type TabPanelStyleVars, tabPanelRootSx, tabPanelStyleToCssVars, tabTheme, tabsTheme };