@mantine/core 4.2.9 → 5.0.0-alpha.10

package/cjs/components/Tabs/Tabs.js

@@ -3,18 +3,21 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var hooks = require('@mantine/hooks');
 var styles = require('@mantine/styles');
-var TabControl = require('./TabControl/TabControl.js');
+var TabsList = require('./TabsList/TabsList.js');
+var TabsPanel = require('./TabsPanel/TabsPanel.js');
+var Tab = require('./Tab/Tab.js');
+var TabsProvider = require('./TabsProvider.js');
 var Tabs_styles = require('./Tabs.styles.js');
 var Box = require('../Box/Box.js');
-var Group = require('../Group/Group.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -30,6 +33,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -42,134 +46,81 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-function getPreviousTab(active, tabs) {
-  for (let i = active - 1; i >= 0; i -= 1) {
-    if (!tabs[i].props.disabled) {
-      return i;
-    }
-  }
-  return active;
-}
-function getNextTab(active, tabs) {
-  for (let i = active + 1; i < tabs.length; i += 1) {
-    if (!tabs[i].props.disabled) {
-      return i;
-    }
-  }
-  return active;
-}
-function findInitialTab(tabs) {
-  for (let i = 0; i < tabs.length; i += 1) {
-    if (!tabs[i].props.disabled) {
-      return i;
-    }
-  }
-  return -1;
-}
 const defaultProps = {
-  position: "left",
-  grow: false,
-  variant: "default",
-  tabPadding: "xs",
-  orientation: "horizontal"
+  orientation: "horizontal",
+  loop: true,
+  activateTabWithKeyboard: true,
+  allowTabDeactivation: false,
+  unstyled: false,
+  inverted: false,
+  variant: "default"
 };
 const Tabs = React.forwardRef((props, ref) => {
-  const _a = styles.useMantineDefaultProps("Tabs", defaultProps, props), {
-    className,
+  const _a = styles.useComponentDefaultProps("Tabs", defaultProps, props), {
+    defaultValue,
+    value,
+    orientation,
+    loop,
+    activateTabWithKeyboard,
+    allowTabDeactivation,
     children,
-    initialTab,
-    active,
-    position,
-    grow,
+    id,
     onTabChange,
-    color,
     variant,
+    color,
+    className,
+    unstyled,
     classNames,
     styles: styles$1,
-    tabPadding,
-    orientation
+    radius,
+    inverted
   } = _a, others = __objRest(_a, [
-    "className",
+    "defaultValue",
+    "value",
+    "orientation",
+    "loop",
+    "activateTabWithKeyboard",
+    "allowTabDeactivation",
     "children",
-    "initialTab",
-    "active",
-    "position",
-    "grow",
+    "id",
     "onTabChange",
-    "color",
     "variant",
+    "color",
+    "className",
+    "unstyled",
     "classNames",
     "styles",
-    "tabPadding",
-    "orientation"
+    "radius",
+    "inverted"
   ]);
-  const { classes, cx, theme } = Tabs_styles['default']({ tabPadding, orientation }, { classNames, styles: styles$1, name: "Tabs" });
-  const controlRefs = React.useRef({});
-  const tabs = React.Children.toArray(children);
-  const [_activeTab, handleActiveTabChange] = hooks.useUncontrolled({
-    value: active,
-    defaultValue: initialTab,
-    finalValue: findInitialTab(tabs),
-    rule: (value) => typeof value === "number",
-    onChange: (value) => {
-      if (onTabChange) {
-        tabs.some((tab) => tab.props.tabKey) ? onTabChange(value, tabs[value].props.tabKey) : onTabChange(value);
-      }
-    }
-  });
-  const activeTab = hooks.clamp({ value: _activeTab, min: 0, max: tabs.length - 1 });
-  const nextTabCode = orientation === "horizontal" ? theme.dir === "ltr" ? "ArrowRight" : "ArrowLeft" : "ArrowDown";
-  const previousTabCode = orientation === "horizontal" ? theme.dir === "ltr" ? "ArrowLeft" : "ArrowRight" : "ArrowUp";
-  const handleKeyDown = (event) => {
-    if (event.nativeEvent.code === nextTabCode) {
-      event.preventDefault();
-      const nextTab = getNextTab(activeTab, tabs);
-      handleActiveTabChange(nextTab);
-      controlRefs.current[nextTab].focus();
-    }
-    if (event.nativeEvent.code === previousTabCode) {
-      event.preventDefault();
-      const previousTab = getPreviousTab(activeTab, tabs);
-      handleActiveTabChange(previousTab);
-      controlRefs.current[previousTab].focus();
-    }
-  };
-  const panes = tabs.map((tab, index) => React__default.cloneElement(tab, {
-    key: index,
-    active: activeTab === index,
-    onKeyDown: handleKeyDown,
-    color: tab.props.color || color,
-    variant,
-    orientation,
-    elementRef: (node) => {
-      controlRefs.current[index] = node;
-    },
-    onClick: () => activeTab !== index && handleActiveTabChange(index),
+  const { classes, cx } = Tabs_styles['default']({ orientation, color, variant, radius, inverted }, { unstyled, name: "Tabs", classNames, styles: styles$1 });
+  return /* @__PURE__ */ React__default.createElement(styles.StylesApiProvider, {
     classNames,
-    styles: styles$1
-  }));
-  const content = tabs[activeTab].props.children;
-  return /* @__PURE__ */ React__default.createElement(Box.Box, __spreadValues({
-    ref,
-    className: cx(classes.root, className)
-  }, others), /* @__PURE__ */ React__default.createElement("div", {
-    className: cx(classes.tabsListWrapper, classes[variant])
-  }, /* @__PURE__ */ React__default.createElement(Group.Group, {
-    className: classes.tabsList,
-    role: "tablist",
-    direction: orientation === "horizontal" ? "row" : "column",
-    "aria-orientation": orientation,
-    spacing: variant === "pills" ? 5 : 0,
-    position,
-    grow
-  }, panes)), content && /* @__PURE__ */ React__default.createElement("div", {
-    role: "tabpanel",
-    className: classes.body,
-    key: activeTab
-  }, content));
+    styles: styles$1,
+    unstyled
+  }, /* @__PURE__ */ React__default.createElement(TabsProvider.TabsProvider, {
+    activateTabWithKeyboard,
+    defaultValue,
+    orientation,
+    onTabChange,
+    value,
+    id,
+    loop,
+    allowTabDeactivation,
+    color,
+    variant,
+    radius,
+    inverted
+  }, /* @__PURE__ */ React__default.createElement(Box.Box, __spreadProps(__spreadValues({}, others), {
+    className: cx(classes.root, className),
+    id,
+    ref
+  }), children)));
 });
+Tabs.List = TabsList.TabsList;
+Tabs.Tab = Tab.Tab;
+Tabs.Panel = TabsPanel.TabsPanel;
 Tabs.displayName = "@mantine/core/Tabs";
-Tabs.Tab = TabControl.TabControl;
 
 exports.Tabs = Tabs;
 //# sourceMappingURL=Tabs.js.map

package/cjs/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useRef, forwardRef, Children } from 'react';\nimport { useUncontrolled, clamp } from '@mantine/hooks';\nimport {\n  DefaultProps,\n  MantineNumberSize,\n  MantineColor,\n  Selectors,\n  ForwardRefWithStaticComponents,\n  useMantineDefaultProps,\n} from '@mantine/styles';\nimport { Box } from '../Box';\nimport { Group, GroupPosition } from '../Group';\nimport { TabControl, TabControlStylesNames } from './TabControl/TabControl';\nimport useStyles from './Tabs.styles';\n\nexport type TabsVariant = 'default' | 'outline' | 'pills' | 'unstyled';\nexport type TabsStylesNames =\n  | Exclude<Selectors<typeof useStyles>, TabsVariant>\n  | TabControlStylesNames;\n\nexport interface TabsProps\n  extends DefaultProps<TabsStylesNames>,\n    React.ComponentPropsWithRef<'div'> {\n  /** <Tab /> components only */\n  children: React.ReactNode;\n\n  /** Index of initial tab */\n  initialTab?: number;\n\n  /** Index of active tab, overrides internal state */\n  active?: number;\n\n  /** Active tab color from theme.colors */\n  color?: MantineColor;\n\n  /** True if tabs should take all available space */\n  grow?: boolean;\n\n  /** Tab controls position */\n  position?: GroupPosition;\n\n  /** Called when tab control is clicked with tab index */\n  onTabChange?(tabIndex: number, tabKey?: string): void;\n\n  /** Controls appearance */\n  variant?: TabsVariant;\n\n  /** Controls tab content padding-top */\n  tabPadding?: MantineNumberSize;\n\n  /** Controls tab orientation */\n  orientation?: 'horizontal' | 'vertical';\n}\n\nfunction getPreviousTab(active: number, tabs: React.ReactElement[]) {\n  for (let i = active - 1; i >= 0; i -= 1) {\n    if (!tabs[i].props.disabled) {\n      return i;\n    }\n  }\n\n  return active;\n}\n\nfunction getNextTab(active: number, tabs: React.ReactElement[]) {\n  for (let i = active + 1; i < tabs.length; i += 1) {\n    if (!tabs[i].props.disabled) {\n      return i;\n    }\n  }\n\n  return active;\n}\n\nfunction findInitialTab(tabs: React.ReactElement[]) {\n  for (let i = 0; i < tabs.length; i += 1) {\n    if (!tabs[i].props.disabled) {\n      return i;\n    }\n  }\n\n  return -1;\n}\n\ntype TabsComponent = ForwardRefWithStaticComponents<TabsProps, { Tab: typeof TabControl }>;\n\nconst defaultProps: Partial<TabsProps> = {\n  position: 'left',\n  grow: false,\n  variant: 'default',\n  tabPadding: 'xs',\n  orientation: 'horizontal',\n};\n\nexport const Tabs: TabsComponent = forwardRef<HTMLDivElement, TabsProps>(\n  (props: TabsProps, ref) => {\n    const {\n      className,\n      children,\n      initialTab,\n      active,\n      position,\n      grow,\n      onTabChange,\n      color,\n      variant,\n      classNames,\n      styles,\n      tabPadding,\n      orientation,\n      ...others\n    } = useMantineDefaultProps('Tabs', defaultProps, props);\n\n    const { classes, cx, theme } = useStyles(\n      { tabPadding, orientation },\n      { classNames, styles, name: 'Tabs' }\n    );\n\n    const controlRefs = useRef<Record<string, HTMLButtonElement>>({});\n    const tabs = Children.toArray(children) as React.ReactElement[];\n\n    const [_activeTab, handleActiveTabChange] = useUncontrolled({\n      value: active,\n      defaultValue: initialTab,\n      finalValue: findInitialTab(tabs),\n      rule: (value) => typeof value === 'number',\n      onChange: (value) => {\n        if (onTabChange) {\n          tabs.some((tab) => tab.props.tabKey)\n            ? onTabChange(value, tabs[value].props.tabKey)\n            : onTabChange(value);\n        }\n      },\n    });\n\n    const activeTab = clamp({ value: _activeTab, min: 0, max: tabs.length - 1 });\n\n    const nextTabCode =\n      orientation === 'horizontal'\n        ? theme.dir === 'ltr'\n          ? 'ArrowRight'\n          : 'ArrowLeft'\n        : 'ArrowDown';\n    const previousTabCode =\n      orientation === 'horizontal' ? (theme.dir === 'ltr' ? 'ArrowLeft' : 'ArrowRight') : 'ArrowUp';\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      if (event.nativeEvent.code === nextTabCode) {\n        event.preventDefault();\n        const nextTab = getNextTab(activeTab, tabs);\n        handleActiveTabChange(nextTab);\n        controlRefs.current[nextTab].focus();\n      }\n\n      if (event.nativeEvent.code === previousTabCode) {\n        event.preventDefault();\n        const previousTab = getPreviousTab(activeTab, tabs);\n        handleActiveTabChange(previousTab);\n        controlRefs.current[previousTab].focus();\n      }\n    };\n\n    const panes = tabs.map((tab, index) =>\n      React.cloneElement(tab, {\n        key: index,\n        active: activeTab === index,\n        onKeyDown: handleKeyDown,\n        color: tab.props.color || color,\n        variant,\n        orientation,\n        elementRef: (node: HTMLButtonElement) => {\n          controlRefs.current[index] = node;\n        },\n        onClick: () => activeTab !== index && handleActiveTabChange(index),\n        classNames,\n        styles,\n      })\n    );\n\n    const content = tabs[activeTab].props.children;\n\n    return (\n      <Box ref={ref} className={cx(classes.root, className)} {...others}>\n        <div className={cx(classes.tabsListWrapper, classes[variant])}>\n          <Group\n            className={classes.tabsList}\n            role=\"tablist\"\n            direction={orientation === 'horizontal' ? 'row' : 'column'}\n            aria-orientation={orientation}\n            spacing={variant === 'pills' ? 5 : 0}\n            position={position}\n            grow={grow}\n          >\n            {panes}\n          </Group>\n        </div>\n\n        {content && (\n          <div role=\"tabpanel\" className={classes.body} key={activeTab}>\n            {content}\n          </div>\n        )}\n      </Box>\n    );\n  }\n) as any;\n\nTabs.displayName = '@mantine/core/Tabs';\nTabs.Tab = TabControl;\n"],"names":["forwardRef","useMantineDefaultProps","styles","useStyles","useRef","Children","useUncontrolled","clamp","React","Box","Group","TabControl"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  DefaultProps,\n  useComponentDefaultProps,\n  StylesApiProvider,\n  Selectors,\n} from '@mantine/styles';\nimport { ForwardRefWithStaticComponents } from '@mantine/utils';\nimport { Box } from '../Box';\nimport { TabsList, TabsListStylesNames } from './TabsList/TabsList';\nimport { TabsPanel, TabsPanelStylesNames } from './TabsPanel/TabsPanel';\nimport { Tab, TabStylesNames } from './Tab/Tab';\nimport { TabsProvider, TabsProviderProps } from './TabsProvider';\nimport { TabsStylesParams } from './Tabs.types';\nimport useStyles from './Tabs.styles';\n\nexport type TabsStylesNames =\n  | Selectors<typeof useStyles>\n  | TabsListStylesNames\n  | TabsPanelStylesNames\n  | TabStylesNames;\n\nexport interface TabsProps\n  extends TabsProviderProps,\n    DefaultProps<TabsStylesNames, TabsStylesParams>,\n    Omit<React.ComponentPropsWithoutRef<'div'>, keyof TabsProviderProps> {}\n\ntype TabsComponent = ForwardRefWithStaticComponents<\n  TabsProps,\n  {\n    List: typeof TabsList;\n    Tab: typeof Tab;\n    Panel: typeof TabsPanel;\n  }\n>;\n\nconst defaultProps: Partial<TabsProps> = {\n  orientation: 'horizontal',\n  loop: true,\n  activateTabWithKeyboard: true,\n  allowTabDeactivation: false,\n  unstyled: false,\n  inverted: false,\n  variant: 'default',\n};\n\nexport const Tabs: TabsComponent = forwardRef<HTMLDivElement, TabsProps>((props, ref) => {\n  const {\n    defaultValue,\n    value,\n    orientation,\n    loop,\n    activateTabWithKeyboard,\n    allowTabDeactivation,\n    children,\n    id,\n    onTabChange,\n    variant,\n    color,\n    className,\n    unstyled,\n    classNames,\n    styles,\n    radius,\n    inverted,\n    ...others\n  } = useComponentDefaultProps('Tabs', defaultProps, props);\n\n  const { classes, cx } = useStyles(\n    { orientation, color, variant, radius, inverted },\n    { unstyled, name: 'Tabs', classNames, styles }\n  );\n\n  return (\n    <StylesApiProvider classNames={classNames} styles={styles} unstyled={unstyled}>\n      <TabsProvider\n        activateTabWithKeyboard={activateTabWithKeyboard}\n        defaultValue={defaultValue}\n        orientation={orientation}\n        onTabChange={onTabChange}\n        value={value}\n        id={id}\n        loop={loop}\n        allowTabDeactivation={allowTabDeactivation}\n        color={color}\n        variant={variant}\n        radius={radius}\n        inverted={inverted}\n      >\n        <Box {...others} className={cx(classes.root, className)} id={id} ref={ref}>\n          {children}\n        </Box>\n      </TabsProvider>\n    </StylesApiProvider>\n  );\n}) as any;\n\nTabs.List = TabsList;\nTabs.Tab = Tab;\nTabs.Panel = TabsPanel;\n\nTabs.displayName = '@mantine/core/Tabs';\n"],"names":["forwardRef","useComponentDefaultProps","styles","useStyles","React","StylesApiProvider","TabsProvider","Box","TabsList","Tab","TabsPanel"],"mappings":"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"}

package/cjs/components/Tabs/Tabs.styles.js

@@ -4,37 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var styles = require('@mantine/styles');
 
-var useStyles = styles.createStyles((theme, { tabPadding, orientation }, getRef) => {
-  const tabsList = { ref: getRef("tabsList") };
-  return {
-    tabsListWrapper: {},
-    tabsList,
-    root: {
-      display: orientation === "vertical" ? "flex" : "block"
-    },
-    pills: {
-      marginRight: orientation === "vertical" ? 20 : 0
-    },
-    body: {
-      [orientation === "horizontal" ? "paddingTop" : "paddingLeft"]: theme.fn.size({
-        size: tabPadding,
-        sizes: theme.spacing
-      })
-    },
-    default: {
-      [orientation === "horizontal" ? "borderBottom" : "borderRight"]: `2px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2]}`,
-      [`& .${tabsList.ref}`]: {
-        [orientation === "horizontal" ? "marginBottom" : "marginRight"]: -2
-      }
-    },
-    outline: {
-      [orientation === "horizontal" ? "borderBottom" : "borderRight"]: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2]}`,
-      [`& .${tabsList.ref}`]: {
-        [orientation === "horizontal" ? "marginBottom" : "marginRight"]: -1
-      }
-    }
-  };
-});
+var useStyles = styles.createStyles((theme, { orientation }) => ({
+  root: {
+    display: orientation === "vertical" ? "flex" : void 0
+  }
+}));
 
 exports.default = useStyles;
 //# sourceMappingURL=Tabs.styles.js.map

package/cjs/components/Tabs/Tabs.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.styles.js","sources":["../../../src/components/Tabs/Tabs.styles.ts"],"sourcesContent":["import { createStyles, MantineNumberSize } from '@mantine/styles';\n\nexport interface TabsStylesParams {\n  tabPadding: MantineNumberSize;\n  orientation: 'horizontal' | 'vertical';\n}\n\nexport default createStyles((theme, { tabPadding, orientation }: TabsStylesParams, getRef) => {\n  const tabsList = { ref: getRef('tabsList') } as const;\n\n  return {\n    tabsListWrapper: {},\n    tabsList,\n\n    root: {\n      display: orientation === 'vertical' ? 'flex' : 'block',\n    },\n\n    pills: {\n      marginRight: orientation === 'vertical' ? 20 : 0,\n    },\n\n    body: {\n      [orientation === 'horizontal' ? 'paddingTop' : 'paddingLeft']: theme.fn.size({\n        size: tabPadding,\n        sizes: theme.spacing,\n      }),\n    },\n\n    default: {\n      [orientation === 'horizontal' ? 'borderBottom' : 'borderRight']: `2px solid ${\n        theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2]\n      }`,\n\n      [`& .${tabsList.ref}`]: {\n        [orientation === 'horizontal' ? 'marginBottom' : 'marginRight']: -2,\n      },\n    },\n\n    outline: {\n      [orientation === 'horizontal' ? 'borderBottom' : 'borderRight']: `1px solid ${\n        theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2]\n      }`,\n\n      [`& .${tabsList.ref}`]: {\n        [orientation === 'horizontal' ? 'marginBottom' : 'marginRight']: -1,\n      },\n    },\n  };\n});\n"],"names":["createStyles"],"mappings":";;;;;;AACA,gBAAeA,mBAAY,CAAC,CAAC,KAAK,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE,MAAM,KAAK;AAC5E,EAAE,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC;AAC/C,EAAE,OAAO;AACT,IAAI,eAAe,EAAE,EAAE;AACvB,IAAI,QAAQ;AACZ,IAAI,IAAI,EAAE;AACV,MAAM,OAAO,EAAE,WAAW,KAAK,UAAU,GAAG,MAAM,GAAG,OAAO;AAC5D,KAAK;AACL,IAAI,KAAK,EAAE;AACX,MAAM,WAAW,EAAE,WAAW,KAAK,UAAU,GAAG,EAAE,GAAG,CAAC;AACtD,KAAK;AACL,IAAI,IAAI,EAAE;AACV,MAAM,CAAC,WAAW,KAAK,YAAY,GAAG,YAAY,GAAG,aAAa,GAAG,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC;AACnF,QAAQ,IAAI,EAAE,UAAU;AACxB,QAAQ,KAAK,EAAE,KAAK,CAAC,OAAO;AAC5B,OAAO,CAAC;AACR,KAAK;AACL,IAAI,OAAO,EAAE;AACb,MAAM,CAAC,WAAW,KAAK,YAAY,GAAG,cAAc,GAAG,aAAa,GAAG,CAAC,UAAU,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;AAChK,MAAM,CAAC,CAAC,GAAG,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG;AAC9B,QAAQ,CAAC,WAAW,KAAK,YAAY,GAAG,cAAc,GAAG,aAAa,GAAG,CAAC,CAAC;AAC3E,OAAO;AACP,KAAK;AACL,IAAI,OAAO,EAAE;AACb,MAAM,CAAC,WAAW,KAAK,YAAY,GAAG,cAAc,GAAG,aAAa,GAAG,CAAC,UAAU,EAAE,KAAK,CAAC,WAAW,KAAK,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;AAChK,MAAM,CAAC,CAAC,GAAG,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG;AAC9B,QAAQ,CAAC,WAAW,KAAK,YAAY,GAAG,cAAc,GAAG,aAAa,GAAG,CAAC,CAAC;AAC3E,OAAO;AACP,KAAK;AACL,GAAG,CAAC;AACJ,CAAC,CAAC;;;;"}
+{"version":3,"file":"Tabs.styles.js","sources":["../../../src/components/Tabs/Tabs.styles.ts"],"sourcesContent":["import { createStyles } from '@mantine/styles';\nimport { TabsStylesParams } from './Tabs.types';\n\nexport default createStyles((theme, { orientation }: TabsStylesParams) => ({\n  root: {\n    display: orientation === 'vertical' ? 'flex' : undefined,\n  },\n}));\n"],"names":["createStyles"],"mappings":";;;;;;AACA,gBAAeA,mBAAY,CAAC,CAAC,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM;AACzD,EAAE,IAAI,EAAE;AACR,IAAI,OAAO,EAAE,WAAW,KAAK,UAAU,GAAG,MAAM,GAAG,KAAK,CAAC;AACzD,GAAG;AACH,CAAC,CAAC,CAAC;;;;"}

package/cjs/components/Tabs/{TabControl/TabControl.js → TabsList/TabsList.js}

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var hooks = require('@mantine/hooks');
-var TabControl_styles = require('./TabControl.styles.js');
+var styles = require('@mantine/styles');
+var Tabs_context = require('../Tabs.context.js');
+var TabsList_styles = require('./TabsList.styles.js');
 var Box = require('../../Box/Box.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
@@ -42,54 +43,19 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-const TabControl = React.forwardRef((_a, ref) => {
-  var _b = _a, {
-    className,
-    active,
-    color,
-    variant = "default",
-    classNames,
-    styles,
-    orientation = "horizontal",
-    icon: __,
-    label,
-    icon,
-    tabKey,
-    color: overrideColor,
-    elementRef
-  } = _b, others = __objRest(_b, [
-    "className",
-    "active",
-    "color",
-    "variant",
-    "classNames",
-    "styles",
-    "orientation",
-    "icon",
-    "label",
-    "icon",
-    "tabKey",
-    "color",
-    "elementRef"
-  ]);
-  const { classes, cx } = TabControl_styles['default']({ color: overrideColor || color, orientation }, { classNames, styles, name: "Tabs" });
+const TabsList = React.forwardRef((_a, ref) => {
+  var _b = _a, { children, className, grow = false, position = "left" } = _b, others = __objRest(_b, ["children", "className", "grow", "position"]);
+  const { orientation, variant, color, radius, inverted } = Tabs_context.useTabsContext();
+  const { classNames, styles: styles$1, unstyled } = styles.useContextStylesApi();
+  const { classes, cx } = TabsList_styles['default']({ orientation, grow, variant, color, position, radius, inverted }, { name: "Tabs", unstyled, classNames, styles: styles$1 });
   return /* @__PURE__ */ React__default.createElement(Box.Box, __spreadProps(__spreadValues({}, others), {
-    component: "button",
-    tabIndex: active ? 0 : -1,
-    className: cx(classes.tabControl, classes[variant], { [classes.tabActive]: active }, className),
-    type: "button",
-    role: "tab",
-    "aria-selected": active,
-    ref: hooks.mergeRefs(ref, elementRef)
-  }), /* @__PURE__ */ React__default.createElement("div", {
-    className: classes.tabInner
-  }, icon && /* @__PURE__ */ React__default.createElement("div", {
-    className: classes.tabIcon
-  }, icon), label && /* @__PURE__ */ React__default.createElement("div", {
-    className: classes.tabLabel
-  }, label)));
+    className: cx(classes.tabsList, className),
+    ref,
+    role: "tablist",
+    "aria-orientation": orientation
+  }), children);
 });
-TabControl.displayName = "@mantine/core/TabControl";
+TabsList.displayName = "@mantine/core/TabsList";
 
-exports.TabControl = TabControl;
-//# sourceMappingURL=TabControl.js.map
+exports.TabsList = TabsList;
+//# sourceMappingURL=TabsList.js.map

package/cjs/components/Tabs/TabsList/TabsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsList.js","sources":["../../../../src/components/Tabs/TabsList/TabsList.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { DefaultProps, Selectors, useContextStylesApi } from '@mantine/styles';\nimport { Box } from '../../Box';\nimport { TabsPosition } from '../Tabs.types';\nimport { useTabsContext } from '../Tabs.context';\nimport useStyles from './TabsList.styles';\n\nexport type TabsListStylesNames = Selectors<typeof useStyles>;\n\nexport interface TabsListProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {\n  /** <Tabs.Tab /> components */\n  children: React.ReactNode;\n\n  /** Determines whether tabs should take the whole space */\n  grow?: boolean;\n\n  /** Tabs alignment */\n  position?: TabsPosition;\n}\n\nexport const TabsList = forwardRef<HTMLDivElement, TabsListProps>(\n  ({ children, className, grow = false, position = 'left', ...others }, ref) => {\n    const { orientation, variant, color, radius, inverted } = useTabsContext();\n    const { classNames, styles, unstyled } = useContextStylesApi();\n    const { classes, cx } = useStyles(\n      { orientation, grow, variant, color, position, radius, inverted },\n      { name: 'Tabs', unstyled, classNames, styles }\n    );\n\n    return (\n      <Box\n        {...others}\n        className={cx(classes.tabsList, className)}\n        ref={ref}\n        role=\"tablist\"\n        aria-orientation={orientation}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n\nTabsList.displayName = '@mantine/core/TabsList';\n"],"names":["forwardRef","useTabsContext","styles","useContextStylesApi","useStyles","React","Box"],"mappings":"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"}

package/cjs/components/Tabs/TabsList/TabsList.styles.js

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = require('@mantine/styles');
+var Group_styles = require('../../Group/Group.styles.js');
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+function getVariantStyles({ variant, orientation, inverted }, theme) {
+  const vertical = orientation === "vertical";
+  if (variant === "default") {
+    return {
+      [vertical ? "borderRight" : inverted ? "borderTop" : "borderBottom"]: `2px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]}`
+    };
+  }
+  if (variant === "outline") {
+    return {
+      [vertical ? "borderRight" : inverted ? "borderTop" : "borderBottom"]: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]}`
+    };
+  }
+  if (variant === "pills") {
+    return {
+      gap: theme.spacing.sm / 2
+    };
+  }
+  return {};
+}
+var useStyles = styles.createStyles((theme, params) => {
+  const vertical = params.orientation === "vertical";
+  return {
+    tabsList: __spreadValues({
+      display: "flex",
+      flexDirection: vertical ? "column" : "row",
+      justifyContent: Group_styles.GROUP_POSITIONS[params.position],
+      '& [role="tab"]': {
+        flex: params.grow ? 1 : void 0
+      }
+    }, getVariantStyles(params, theme))
+  };
+});
+
+exports.default = useStyles;
+//# sourceMappingURL=TabsList.styles.js.map

package/cjs/components/Tabs/TabsList/TabsList.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsList.styles.js","sources":["../../../../src/components/Tabs/TabsList/TabsList.styles.ts"],"sourcesContent":["import { createStyles, CSSObject, MantineTheme } from '@mantine/styles';\nimport { GROUP_POSITIONS } from '../../Group/Group.styles';\nimport { TabsStylesParams, TabsPosition } from '../Tabs.types';\n\ninterface TabsListStylesParams extends TabsStylesParams {\n  grow: boolean;\n  position: TabsPosition;\n}\n\nfunction getVariantStyles(\n  { variant, orientation, inverted }: TabsListStylesParams,\n  theme: MantineTheme\n): CSSObject {\n  const vertical = orientation === 'vertical';\n\n  if (variant === 'default') {\n    return {\n      [vertical ? 'borderRight' : inverted ? 'borderTop' : 'borderBottom']: `2px solid ${\n        theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]\n      }`,\n    };\n  }\n\n  if (variant === 'outline') {\n    return {\n      [vertical ? 'borderRight' : inverted ? 'borderTop' : 'borderBottom']: `1px solid ${\n        theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]\n      }`,\n    };\n  }\n\n  if (variant === 'pills') {\n    return {\n      gap: theme.spacing.sm / 2,\n    };\n  }\n\n  return {};\n}\n\nexport default createStyles((theme, params: TabsListStylesParams) => {\n  const vertical = params.orientation === 'vertical';\n\n  return {\n    tabsList: {\n      display: 'flex',\n      flexDirection: vertical ? 'column' : 'row',\n      justifyContent: GROUP_POSITIONS[params.position],\n\n      '& [role=\"tab\"]': {\n        flex: params.grow ? 1 : undefined,\n      },\n\n      ...getVariantStyles(params, theme),\n    },\n  };\n});\n"],"names":["createStyles","GROUP_POSITIONS"],"mappings":"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"}

package/cjs/components/Tabs/TabsPanel/TabsPanel.js

@@ -0,0 +1,70 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var styles = require('@mantine/styles');
+var utils = require('@mantine/utils');
+var Tabs_context = require('../Tabs.context.js');
+var TabsPanel_styles = require('./TabsPanel.styles.js');
+var Box = require('../../Box/Box.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const TabsPanel = React.forwardRef((_a, ref) => {
+  var _b = _a, { value, children, sx, className } = _b, others = __objRest(_b, ["value", "children", "sx", "className"]);
+  const ctx = Tabs_context.useTabsContext();
+  const { classNames, styles: styles$1, unstyled } = styles.useContextStylesApi();
+  const { classes, cx } = TabsPanel_styles['default']({
+    orientation: ctx.orientation,
+    variant: ctx.variant,
+    color: ctx.color,
+    radius: ctx.radius,
+    inverted: ctx.inverted
+  }, { name: "Tabs", unstyled, classNames, styles: styles$1 });
+  return /* @__PURE__ */ React__default.createElement(Box.Box, __spreadProps(__spreadValues({}, others), {
+    ref,
+    sx: [{ display: ctx.value !== value ? "none" : void 0 }, ...utils.packSx(sx)],
+    className: cx(classes.panel, className),
+    role: "tabpanel",
+    id: ctx.getPanelId(value),
+    "aria-labelledby": ctx.getTabId(value)
+  }), children);
+});
+TabsPanel.displayName = "@mantine/core/TabsPanel";
+
+exports.TabsPanel = TabsPanel;
+//# sourceMappingURL=TabsPanel.js.map

package/cjs/components/Tabs/TabsPanel/TabsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsPanel.js","sources":["../../../../src/components/Tabs/TabsPanel/TabsPanel.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport { Selectors, DefaultProps, useContextStylesApi } from '@mantine/styles';\nimport { packSx } from '@mantine/utils';\nimport { Box } from '../../Box';\nimport { useTabsContext } from '../Tabs.context';\nimport useStyles from './TabsPanel.styles';\n\nexport type TabsPanelStylesNames = Selectors<typeof useStyles>;\n\nexport interface TabsPanelProps extends DefaultProps, React.ComponentPropsWithoutRef<'div'> {\n  /** Panel content */\n  children: React.ReactNode;\n\n  /** Value of associated control */\n  value: string;\n}\n\nexport const TabsPanel = forwardRef<HTMLDivElement, TabsPanelProps>(\n  ({ value, children, sx, className, ...others }, ref) => {\n    const ctx = useTabsContext();\n    const { classNames, styles, unstyled } = useContextStylesApi();\n    const { classes, cx } = useStyles(\n      {\n        orientation: ctx.orientation,\n        variant: ctx.variant,\n        color: ctx.color,\n        radius: ctx.radius,\n        inverted: ctx.inverted,\n      },\n      { name: 'Tabs', unstyled, classNames, styles }\n    );\n\n    return (\n      <Box\n        {...others}\n        ref={ref}\n        sx={[{ display: ctx.value !== value ? 'none' : undefined }, ...packSx(sx)]}\n        className={cx(classes.panel, className)}\n        role=\"tabpanel\"\n        id={ctx.getPanelId(value)}\n        aria-labelledby={ctx.getTabId(value)}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n\nTabsPanel.displayName = '@mantine/core/TabsPanel';\n"],"names":["forwardRef","useTabsContext","styles","useContextStylesApi","useStyles","React","Box","packSx"],"mappings":"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"}

package/cjs/components/Tabs/TabsPanel/TabsPanel.styles.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styles = require('@mantine/styles');
+
+var useStyles = styles.createStyles((_theme, { orientation }) => ({
+  panel: {
+    flex: orientation === "vertical" ? 1 : void 0
+  }
+}));
+
+exports.default = useStyles;
+//# sourceMappingURL=TabsPanel.styles.js.map

package/cjs/components/Tabs/TabsPanel/TabsPanel.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsPanel.styles.js","sources":["../../../../src/components/Tabs/TabsPanel/TabsPanel.styles.ts"],"sourcesContent":["import { createStyles } from '@mantine/styles';\nimport { TabsStylesParams } from '../Tabs.types';\n\nexport default createStyles((_theme, { orientation }: TabsStylesParams) => ({\n  panel: {\n    flex: orientation === 'vertical' ? 1 : undefined,\n  },\n}));\n"],"names":["createStyles"],"mappings":";;;;;;AACA,gBAAeA,mBAAY,CAAC,CAAC,MAAM,EAAE,EAAE,WAAW,EAAE,MAAM;AAC1D,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,WAAW,KAAK,UAAU,GAAG,CAAC,GAAG,KAAK,CAAC;AACjD,GAAG;AACH,CAAC,CAAC,CAAC;;;;"}

package/cjs/components/Tabs/TabsProvider.js

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var utils = require('@mantine/utils');
+var hooks = require('@mantine/hooks');
+var Tabs_context = require('./Tabs.context.js');
+var Tabs_errors = require('./Tabs.errors.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function TabsProvider({
+  defaultValue,
+  value,
+  onTabChange,
+  orientation,
+  children,
+  loop,
+  id,
+  activateTabWithKeyboard,
+  allowTabDeactivation,
+  variant,
+  color,
+  radius,
+  inverted
+}) {
+  const uid = hooks.useId(id);
+  const [_value, onChange] = hooks.useUncontrolled({
+    value,
+    defaultValue,
+    finalValue: null,
+    onChange: onTabChange
+  });
+  return /* @__PURE__ */ React__default.createElement(Tabs_context.TabsContextProvider, {
+    value: {
+      value: _value,
+      orientation,
+      id: uid,
+      loop,
+      activateTabWithKeyboard,
+      getTabId: utils.getSafeId(`${uid}-tab`, Tabs_errors.TABS_ERRORS.value),
+      getPanelId: utils.getSafeId(`${uid}-panel`, Tabs_errors.TABS_ERRORS.value),
+      onTabChange: onChange,
+      allowTabDeactivation,
+      variant,
+      color,
+      radius,
+      inverted
+    }
+  }, children);
+}
+TabsProvider.displayName = "@mantine/core/TabsProvider";
+
+exports.TabsProvider = TabsProvider;
+//# sourceMappingURL=TabsProvider.js.map