@basic-ui/material 1.0.0-alpha.51 → 1.0.0-alpha.54

package/build/esm/Tab/TabList.js

@@ -1,56 +1,52 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["innerAs"],
-    _excluded2 = ["as", "indicatorColor", "textColor", "selectedTextColor", "variant"];
 import { forwardRef, useRef } from 'react';
 import { TabList as TabListCore } from '@basic-ui/core';
 import { Box } from '../Box';
 import { TabIndicatorProvider } from '../TabIndicator';
 import { TabListProvider } from './context';
 import { jsx as _jsx } from "react/jsx-runtime";
-var TabListInner = /*#__PURE__*/forwardRef(function TabListInner(props, forwardedRef) {
-  var innerAs = props.innerAs,
-      otherProps = _objectWithoutProperties(props, _excluded);
-
-  return /*#__PURE__*/_jsx(Box, _extends({
+const TabListInner = /*#__PURE__*/forwardRef(function TabListInner(props, forwardedRef) {
+  const {
+    innerAs,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/_jsx(Box, {
     as: innerAs,
     ref: forwardedRef,
     __css: {
       minWidth: "22.5rem",
       display: 'flex',
       alignItems: 'center'
-    }
-  }, otherProps));
+    },
+    ...otherProps
+  });
 });
-export var TabList = /*#__PURE__*/forwardRef(function TabList(props, forwardedRef) {
-  var _props$as = props.as,
-      as = _props$as === void 0 ? 'div' : _props$as,
-      _props$indicatorColor = props.indicatorColor,
-      indicatorColor = _props$indicatorColor === void 0 ? 'primary' : _props$indicatorColor,
-      _props$textColor = props.textColor,
-      textColor = _props$textColor === void 0 ? 'on.surface' : _props$textColor,
-      selectedTextColor = props.selectedTextColor,
-      _props$variant = props.variant,
-      variant = _props$variant === void 0 ? 'secondary' : _props$variant,
-      otherProps = _objectWithoutProperties(props, _excluded2);
-
-  var currentIndicator = useRef(null);
+export const TabList = /*#__PURE__*/forwardRef(function TabList(props, forwardedRef) {
+  const {
+    as = 'div',
+    indicatorColor = 'primary',
+    textColor = 'on.surface',
+    selectedTextColor,
+    variant = 'secondary',
+    ...otherProps
+  } = props;
+  const currentIndicator = useRef(null);
   return /*#__PURE__*/_jsx(TabListProvider, {
     value: {
-      indicatorColor: indicatorColor,
-      textColor: textColor,
-      selectedTextColor: selectedTextColor,
-      variant: variant
+      indicatorColor,
+      textColor,
+      selectedTextColor,
+      variant
     },
     children: /*#__PURE__*/_jsx(TabIndicatorProvider, {
       value: {
-        currentIndicator: currentIndicator
+        currentIndicator
       },
-      children: /*#__PURE__*/_jsx(TabListCore, _extends({
+      children: /*#__PURE__*/_jsx(TabListCore, {
         as: TabListInner,
         innerAs: as,
-        ref: forwardedRef
-      }, otherProps))
+        ref: forwardedRef,
+        ...otherProps
+      })
     })
   });
 });

package/build/esm/Tab/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","names":["forwardRef","useRef","TabList","TabListCore","Box","TabIndicatorProvider","TabListProvider","TabListInner","props","forwardedRef","innerAs","otherProps","minWidth","display","alignItems","as","indicatorColor","textColor","selectedTextColor","variant","currentIndicator"],"sources":["../../../src/Tab/TabList.tsx"],"sourcesContent":["import { forwardRef, useRef } from 'react';\r\nimport type { TabListProps as TabListPropsCore } from '@basic-ui/core';\r\nimport { TabList as TabListCore } from '@basic-ui/core';\r\nimport { rem } from 'polished';\r\n\r\nimport type { BoxProps } from '../Box';\r\nimport { Box } from '../Box';\r\nimport { TabIndicatorProvider } from '../TabIndicator';\r\nimport { TabListProvider } from './context';\r\n\r\nexport type TabListProps = TabListPropsCore &\r\n  BoxProps & {\r\n    indicatorColor?: string;\r\n    textColor?: string;\r\n    selectedTextColor?: string;\r\n    variant?: 'primary' | 'secondary';\r\n  };\r\n\r\nconst TabListInner = forwardRef<HTMLDivElement, TabListProps>(\r\n  function TabListInner(props, forwardedRef) {\r\n    const { innerAs, ...otherProps } = props;\r\n\r\n    return (\r\n      <Box\r\n        as={innerAs}\r\n        ref={forwardedRef}\r\n        __css={{ minWidth: rem(360), display: 'flex', alignItems: 'center' }}\r\n        {...otherProps}\r\n      />\r\n    );\r\n  }\r\n);\r\n\r\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(\r\n  function TabList(props, forwardedRef) {\r\n    const {\r\n      as = 'div',\r\n      indicatorColor = 'primary',\r\n      textColor = 'on.surface',\r\n      selectedTextColor,\r\n      variant = 'secondary',\r\n      ...otherProps\r\n    } = props;\r\n    const currentIndicator = useRef<HTMLSpanElement>(null);\r\n\r\n    return (\r\n      <TabListProvider\r\n        value={{ indicatorColor, textColor, selectedTextColor, variant }}\r\n      >\r\n        <TabIndicatorProvider value={{ currentIndicator }}>\r\n          <TabListCore\r\n            as={TabListInner}\r\n            innerAs={as}\r\n            ref={forwardedRef}\r\n            {...otherProps}\r\n          />\r\n        </TabIndicatorProvider>\r\n      </TabListProvider>\r\n    );\r\n  }\r\n);\r\n"],"mappings":";;;;AAAA,SAASA,UAAT,EAAqBC,MAArB,QAAmC,OAAnC;AAEA,SAASC,OAAO,IAAIC,WAApB,QAAuC,gBAAvC;AAIA,SAASC,GAAT,QAAoB,QAApB;AACA,SAASC,oBAAT,QAAqC,iBAArC;AACA,SAASC,eAAT,QAAgC,WAAhC;;AAUA,IAAMC,YAAY,gBAAGP,UAAU,CAC7B,SAASO,YAAT,CAAsBC,KAAtB,EAA6BC,YAA7B,EAA2C;EACzC,IAAQC,OAAR,GAAmCF,KAAnC,CAAQE,OAAR;EAAA,IAAoBC,UAApB,4BAAmCH,KAAnC;;EAEA,oBACE,KAAC,GAAD;IACE,EAAE,EAAEE,OADN;IAEE,GAAG,EAAED,YAFP;IAGE,KAAK,EAAE;MAAEG,QAAQ,WAAV;MAAsBC,OAAO,EAAE,MAA/B;MAAuCC,UAAU,EAAE;IAAnD;EAHT,GAIMH,UAJN,EADF;AAQD,CAZ4B,CAA/B;AAeA,OAAO,IAAMT,OAAO,gBAAGF,UAAU,CAC/B,SAASE,OAAT,CAAiBM,KAAjB,EAAwBC,YAAxB,EAAsC;EACpC,gBAOID,KAPJ,CACEO,EADF;EAAA,IACEA,EADF,0BACO,KADP;EAAA,4BAOIP,KAPJ,CAEEQ,cAFF;EAAA,IAEEA,cAFF,sCAEmB,SAFnB;EAAA,uBAOIR,KAPJ,CAGES,SAHF;EAAA,IAGEA,SAHF,iCAGc,YAHd;EAAA,IAIEC,iBAJF,GAOIV,KAPJ,CAIEU,iBAJF;EAAA,qBAOIV,KAPJ,CAKEW,OALF;EAAA,IAKEA,OALF,+BAKY,WALZ;EAAA,IAMKR,UANL,4BAOIH,KAPJ;;EAQA,IAAMY,gBAAgB,GAAGnB,MAAM,CAAkB,IAAlB,CAA/B;EAEA,oBACE,KAAC,eAAD;IACE,KAAK,EAAE;MAAEe,cAAc,EAAdA,cAAF;MAAkBC,SAAS,EAATA,SAAlB;MAA6BC,iBAAiB,EAAjBA,iBAA7B;MAAgDC,OAAO,EAAPA;IAAhD,CADT;IAAA,uBAGE,KAAC,oBAAD;MAAsB,KAAK,EAAE;QAAEC,gBAAgB,EAAhBA;MAAF,CAA7B;MAAA,uBACE,KAAC,WAAD;QACE,EAAE,EAAEb,YADN;QAEE,OAAO,EAAEQ,EAFX;QAGE,GAAG,EAAEN;MAHP,GAIME,UAJN;IADF;EAHF,EADF;AAcD,CA1B8B,CAA1B"}
+{"version":3,"file":"TabList.js","names":["forwardRef","useRef","TabList","TabListCore","Box","TabIndicatorProvider","TabListProvider","jsx","_jsx","TabListInner","props","forwardedRef","innerAs","otherProps","as","ref","__css","minWidth","display","alignItems","indicatorColor","textColor","selectedTextColor","variant","currentIndicator","value","children"],"sources":["../../../src/Tab/TabList.tsx"],"sourcesContent":["import { forwardRef, useRef } from 'react';\nimport type { TabListProps as TabListPropsCore } from '@basic-ui/core';\nimport { TabList as TabListCore } from '@basic-ui/core';\nimport { rem } from 'polished';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { TabIndicatorProvider } from '../TabIndicator';\nimport { TabListProvider } from './context';\n\nexport type TabListProps = TabListPropsCore &\n  BoxProps & {\n    indicatorColor?: string;\n    textColor?: string;\n    selectedTextColor?: string;\n    variant?: 'primary' | 'secondary';\n  };\n\nconst TabListInner = forwardRef<HTMLDivElement, TabListProps>(\n  function TabListInner(props, forwardedRef) {\n    const { innerAs, ...otherProps } = props;\n\n    return (\n      <Box\n        as={innerAs}\n        ref={forwardedRef}\n        __css={{ minWidth: rem(360), display: 'flex', alignItems: 'center' }}\n        {...otherProps}\n      />\n    );\n  }\n);\n\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(\n  function TabList(props, forwardedRef) {\n    const {\n      as = 'div',\n      indicatorColor = 'primary',\n      textColor = 'on.surface',\n      selectedTextColor,\n      variant = 'secondary',\n      ...otherProps\n    } = props;\n    const currentIndicator = useRef<HTMLSpanElement>(null);\n\n    return (\n      <TabListProvider\n        value={{ indicatorColor, textColor, selectedTextColor, variant }}\n      >\n        <TabIndicatorProvider value={{ currentIndicator }}>\n          <TabListCore\n            as={TabListInner}\n            innerAs={as}\n            ref={forwardedRef}\n            {...otherProps}\n          />\n        </TabIndicatorProvider>\n      </TabListProvider>\n    );\n  }\n);\n"],"mappings":"AAAA,SAASA,UAAU,EAAEC,MAAM,QAAQ,OAAO;AAE1C,SAASC,OAAO,IAAIC,WAAW,QAAQ,gBAAgB;AAIvD,SAASC,GAAG,QAAQ,QAAQ;AAC5B,SAASC,oBAAoB,QAAQ,iBAAiB;AACtD,SAASC,eAAe,QAAQ,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAU5C,MAAMC,YAAY,gBAAGT,UAAU,CAC7B,SAASS,YAAYA,CAACC,KAAK,EAAEC,YAAY,EAAE;EACzC,MAAM;IAAEC,OAAO;IAAE,GAAGC;EAAW,CAAC,GAAGH,KAAK;EAExC,oBACEF,IAAA,CAACJ,GAAG;IACFU,EAAE,EAAEF,OAAQ;IACZG,GAAG,EAAEJ,YAAa;IAClBK,KAAK,EAAE;MAAEC,QAAQ,WAAU;MAAEC,OAAO,EAAE,MAAM;MAAEC,UAAU,EAAE;IAAS,CAAE;IAAA,GACjEN;EAAU,CACf,CAAC;AAEN,CACF,CAAC;AAED,OAAO,MAAMX,OAAO,gBAAGF,UAAU,CAC/B,SAASE,OAAOA,CAACQ,KAAK,EAAEC,YAAY,EAAE;EACpC,MAAM;IACJG,EAAE,GAAG,KAAK;IACVM,cAAc,GAAG,SAAS;IAC1BC,SAAS,GAAG,YAAY;IACxBC,iBAAiB;IACjBC,OAAO,GAAG,WAAW;IACrB,GAAGV;EACL,CAAC,GAAGH,KAAK;EACT,MAAMc,gBAAgB,GAAGvB,MAAM,CAAkB,IAAI,CAAC;EAEtD,oBACEO,IAAA,CAACF,eAAe;IACdmB,KAAK,EAAE;MAAEL,cAAc;MAAEC,SAAS;MAAEC,iBAAiB;MAAEC;IAAQ,CAAE;IAAAG,QAAA,eAEjElB,IAAA,CAACH,oBAAoB;MAACoB,KAAK,EAAE;QAAED;MAAiB,CAAE;MAAAE,QAAA,eAChDlB,IAAA,CAACL,WAAW;QACVW,EAAE,EAAEL,YAAa;QACjBG,OAAO,EAAEE,EAAG;QACZC,GAAG,EAAEJ,YAAa;QAAA,GACdE;MAAU,CACf;IAAC,CACkB;EAAC,CACR,CAAC;AAEtB,CACF,CAAC","ignoreList":[]}

package/build/esm/Tab/TabPanel.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import type { TabPanelProps as TabPanelPropsCore } from '@basic-ui/core';
-import type { BoxProps } from '../Box';
-export declare type TabPanelProps = TabPanelPropsCore & BoxProps;
-export declare const TabPanel: import("react").ForwardRefExoticComponent<Pick<TabPanelProps, "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "color" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "textAlign" | "textShadow" | "top" | "translate" | "verticalAlign" | "width" | "background" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bg" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "slot" | "style" | "title" | "hidden" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "size" | "borderX" | "borderY" | "gridGap" | "gridColumnGap" | "gridRowGap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "innerAs" | "lazy"> & import("react").RefAttributes<HTMLDivElement>>;
+import type { TabPanelProps as TabPanelPropsCore } from '@basic-ui/core';
+import type { BoxProps } from '../Box';
+export type TabPanelProps = TabPanelPropsCore & BoxProps;
+export declare const TabPanel: import("react").ForwardRefExoticComponent<Omit<TabPanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/build/esm/Tab/TabPanel.js

@@ -1,29 +1,28 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["innerAs"],
-    _excluded2 = ["as"];
 import { forwardRef } from 'react';
 import { TabPanel as TabPanelCore } from '@basic-ui/core';
 import { Box } from '../Box';
 import { jsx as _jsx } from "react/jsx-runtime";
-var TabPanelInner = /*#__PURE__*/forwardRef(function TabPanelInner(props, forwardedRef) {
-  var innerAs = props.innerAs,
-      otherProps = _objectWithoutProperties(props, _excluded);
-
-  return /*#__PURE__*/_jsx(Box, _extends({
+const TabPanelInner = /*#__PURE__*/forwardRef(function TabPanelInner(props, forwardedRef) {
+  const {
+    innerAs,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/_jsx(Box, {
     as: innerAs,
-    ref: forwardedRef
-  }, otherProps));
+    ref: forwardedRef,
+    ...otherProps
+  });
 });
-export var TabPanel = /*#__PURE__*/forwardRef(function TabPanel(props, forwardedRef) {
-  var _props$as = props.as,
-      as = _props$as === void 0 ? 'div' : _props$as,
-      otherProps = _objectWithoutProperties(props, _excluded2);
-
-  return /*#__PURE__*/_jsx(TabPanelCore, _extends({
+export const TabPanel = /*#__PURE__*/forwardRef(function TabPanel(props, forwardedRef) {
+  const {
+    as = 'div',
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/_jsx(TabPanelCore, {
     as: TabPanelInner,
     innerAs: as,
-    ref: forwardedRef
-  }, otherProps));
+    ref: forwardedRef,
+    ...otherProps
+  });
 });
 //# sourceMappingURL=TabPanel.js.map

package/build/esm/Tab/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","names":["forwardRef","TabPanel","TabPanelCore","Box","TabPanelInner","props","forwardedRef","innerAs","otherProps","as"],"sources":["../../../src/Tab/TabPanel.tsx"],"sourcesContent":["import { forwardRef } from 'react';\r\nimport type { TabPanelProps as TabPanelPropsCore } from '@basic-ui/core';\r\nimport { TabPanel as TabPanelCore } from '@basic-ui/core';\r\n\r\nimport type { BoxProps } from '../Box';\r\nimport { Box } from '../Box';\r\n\r\nexport type TabPanelProps = TabPanelPropsCore & BoxProps;\r\n\r\nconst TabPanelInner = forwardRef<HTMLDivElement, TabPanelProps>(\r\n  function TabPanelInner(props, forwardedRef) {\r\n    const { innerAs, ...otherProps } = props;\r\n\r\n    return <Box as={innerAs} ref={forwardedRef} {...otherProps} />;\r\n  }\r\n);\r\n\r\nexport const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(\r\n  function TabPanel(props, forwardedRef) {\r\n    const { as = 'div', ...otherProps } = props;\r\n\r\n    return (\r\n      <TabPanelCore\r\n        as={TabPanelInner}\r\n        innerAs={as}\r\n        ref={forwardedRef}\r\n        {...otherProps}\r\n      />\r\n    );\r\n  }\r\n);\r\n"],"mappings":";;;;AAAA,SAASA,UAAT,QAA2B,OAA3B;AAEA,SAASC,QAAQ,IAAIC,YAArB,QAAyC,gBAAzC;AAGA,SAASC,GAAT,QAAoB,QAApB;;AAIA,IAAMC,aAAa,gBAAGJ,UAAU,CAC9B,SAASI,aAAT,CAAuBC,KAAvB,EAA8BC,YAA9B,EAA4C;EAC1C,IAAQC,OAAR,GAAmCF,KAAnC,CAAQE,OAAR;EAAA,IAAoBC,UAApB,4BAAmCH,KAAnC;;EAEA,oBAAO,KAAC,GAAD;IAAK,EAAE,EAAEE,OAAT;IAAkB,GAAG,EAAED;EAAvB,GAAyCE,UAAzC,EAAP;AACD,CAL6B,CAAhC;AAQA,OAAO,IAAMP,QAAQ,gBAAGD,UAAU,CAChC,SAASC,QAAT,CAAkBI,KAAlB,EAAyBC,YAAzB,EAAuC;EACrC,gBAAsCD,KAAtC,CAAQI,EAAR;EAAA,IAAQA,EAAR,0BAAa,KAAb;EAAA,IAAuBD,UAAvB,4BAAsCH,KAAtC;;EAEA,oBACE,KAAC,YAAD;IACE,EAAE,EAAED,aADN;IAEE,OAAO,EAAEK,EAFX;IAGE,GAAG,EAAEH;EAHP,GAIME,UAJN,EADF;AAQD,CAZ+B,CAA3B"}
+{"version":3,"file":"TabPanel.js","names":["forwardRef","TabPanel","TabPanelCore","Box","jsx","_jsx","TabPanelInner","props","forwardedRef","innerAs","otherProps","as","ref"],"sources":["../../../src/Tab/TabPanel.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport type { TabPanelProps as TabPanelPropsCore } from '@basic-ui/core';\nimport { TabPanel as TabPanelCore } from '@basic-ui/core';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\n\nexport type TabPanelProps = TabPanelPropsCore & BoxProps;\n\nconst TabPanelInner = forwardRef<HTMLDivElement, TabPanelProps>(\n  function TabPanelInner(props, forwardedRef) {\n    const { innerAs, ...otherProps } = props;\n\n    return <Box as={innerAs} ref={forwardedRef} {...otherProps} />;\n  }\n);\n\nexport const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(\n  function TabPanel(props, forwardedRef) {\n    const { as = 'div', ...otherProps } = props;\n\n    return (\n      <TabPanelCore\n        as={TabPanelInner}\n        innerAs={as}\n        ref={forwardedRef}\n        {...otherProps}\n      />\n    );\n  }\n);\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ,OAAO;AAElC,SAASC,QAAQ,IAAIC,YAAY,QAAQ,gBAAgB;AAGzD,SAASC,GAAG,QAAQ,QAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAI7B,MAAMC,aAAa,gBAAGN,UAAU,CAC9B,SAASM,aAAaA,CAACC,KAAK,EAAEC,YAAY,EAAE;EAC1C,MAAM;IAAEC,OAAO;IAAE,GAAGC;EAAW,CAAC,GAAGH,KAAK;EAExC,oBAAOF,IAAA,CAACF,GAAG;IAACQ,EAAE,EAAEF,OAAQ;IAACG,GAAG,EAAEJ,YAAa;IAAA,GAAKE;EAAU,CAAG,CAAC;AAChE,CACF,CAAC;AAED,OAAO,MAAMT,QAAQ,gBAAGD,UAAU,CAChC,SAASC,QAAQA,CAACM,KAAK,EAAEC,YAAY,EAAE;EACrC,MAAM;IAAEG,EAAE,GAAG,KAAK;IAAE,GAAGD;EAAW,CAAC,GAAGH,KAAK;EAE3C,oBACEF,IAAA,CAACH,YAAY;IACXS,EAAE,EAAEL,aAAc;IAClBG,OAAO,EAAEE,EAAG;IACZC,GAAG,EAAEJ,YAAa;IAAA,GACdE;EAAU,CACf,CAAC;AAEN,CACF,CAAC","ignoreList":[]}

package/build/esm/Tab/TabPanels.d.ts

@@ -1,4 +1,4 @@
-import { TabPanels } from '@basic-ui/core';
-import type { TabPanelsProps } from '@basic-ui/core';
-export { TabPanels };
-export type { TabPanelsProps };
+import { TabPanels } from '@basic-ui/core';
+import type { TabPanelsProps } from '@basic-ui/core';
+export { TabPanels };
+export type { TabPanelsProps };

package/build/esm/Tab/TabPanels.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanels.js","names":["TabPanels"],"sources":["../../../src/Tab/TabPanels.tsx"],"sourcesContent":["import { TabPanels } from '@basic-ui/core';\r\nimport type { TabPanelsProps } from '@basic-ui/core';\r\n\r\nexport { TabPanels };\r\nexport type { TabPanelsProps };\r\n"],"mappings":"AAAA,SAASA,SAAT,QAA0B,gBAA1B;AAGA,SAASA,SAAT"}
+{"version":3,"file":"TabPanels.js","names":["TabPanels"],"sources":["../../../src/Tab/TabPanels.tsx"],"sourcesContent":["import { TabPanels } from '@basic-ui/core';\nimport type { TabPanelsProps } from '@basic-ui/core';\n\nexport { TabPanels };\nexport type { TabPanelsProps };\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,gBAAgB;AAG1C,SAASA,SAAS","ignoreList":[]}

package/build/esm/Tab/Tabs.d.ts

@@ -1,4 +1,4 @@
-import { Tabs } from '@basic-ui/core';
-import type { TabsProps } from '@basic-ui/core';
-export { Tabs };
-export type { TabsProps };
+import { Tabs } from '@basic-ui/core';
+import type { TabsProps } from '@basic-ui/core';
+export { Tabs };
+export type { TabsProps };

package/build/esm/Tab/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["Tabs"],"sources":["../../../src/Tab/Tabs.tsx"],"sourcesContent":["import { Tabs } from '@basic-ui/core';\r\nimport type { TabsProps } from '@basic-ui/core';\r\n\r\nexport { Tabs };\r\nexport type { TabsProps };\r\n"],"mappings":"AAAA,SAASA,IAAT,QAAqB,gBAArB;AAGA,SAASA,IAAT"}
+{"version":3,"file":"Tabs.js","names":["Tabs"],"sources":["../../../src/Tab/Tabs.tsx"],"sourcesContent":["import { Tabs } from '@basic-ui/core';\nimport type { TabsProps } from '@basic-ui/core';\n\nexport { Tabs };\nexport type { TabsProps };\n"],"mappings":"AAAA,SAASA,IAAI,QAAQ,gBAAgB;AAGrC,SAASA,IAAI","ignoreList":[]}

package/build/esm/Tab/context.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-export interface TabListContextProps {
-    indicatorColor: string;
-    textColor: string;
-    selectedTextColor?: string;
-    variant: 'primary' | 'secondary';
-}
-export declare const TabListProvider: import("react").Provider<TabListContextProps>;
-export declare const useTabListContext: () => TabListContextProps;
+export interface TabListContextProps {
+    indicatorColor: string;
+    textColor: string;
+    selectedTextColor?: string;
+    variant: 'primary' | 'secondary';
+}
+export declare const TabListProvider: import("react").Provider<TabListContextProps>;
+export declare const useTabListContext: () => TabListContextProps;

package/build/esm/Tab/context.js

@@ -1,13 +1,14 @@
-import { createContext, useContext } from 'react'; // TabList Component
+import { createContext, useContext } from 'react';
 
-var TabListContext = /*#__PURE__*/createContext({
+// TabList Component
+
+const TabListContext = /*#__PURE__*/createContext({
   indicatorColor: 'primary',
   textColor: 'on.surface',
   variant: 'secondary'
 });
-var TabListProvider = TabListContext.Provider;
-export { TabListProvider };
-export var useTabListContext = function useTabListContext() {
-  return useContext(TabListContext);
-};
+export const {
+  Provider: TabListProvider
+} = TabListContext;
+export const useTabListContext = () => useContext(TabListContext);
 //# sourceMappingURL=context.js.map

package/build/esm/Tab/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":["createContext","useContext","TabListContext","indicatorColor","textColor","variant","TabListProvider","Provider","useTabListContext"],"sources":["../../../src/Tab/context.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\r\n\r\n// TabList Component\r\nexport interface TabListContextProps {\r\n  indicatorColor: string;\r\n  textColor: string;\r\n  selectedTextColor?: string;\r\n  variant: 'primary' | 'secondary';\r\n}\r\n\r\nconst TabListContext = createContext<TabListContextProps>({\r\n  indicatorColor: 'primary',\r\n  textColor: 'on.surface',\r\n  variant: 'secondary',\r\n});\r\nexport const { Provider: TabListProvider } = TabListContext;\r\nexport const useTabListContext = () => useContext(TabListContext);\r\n"],"mappings":"AAAA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,OAA1C,C,CAEA;;AAQA,IAAMC,cAAc,gBAAGF,aAAa,CAAsB;EACxDG,cAAc,EAAE,SADwC;EAExDC,SAAS,EAAE,YAF6C;EAGxDC,OAAO,EAAE;AAH+C,CAAtB,CAApC;AAKO,IAAkBC,eAAlB,GAAsCJ,cAAtC,CAAQK,QAAR;;AACP,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB;EAAA,OAAMP,UAAU,CAACC,cAAD,CAAhB;AAAA,CAA1B"}
+{"version":3,"file":"context.js","names":["createContext","useContext","TabListContext","indicatorColor","textColor","variant","Provider","TabListProvider","useTabListContext"],"sources":["../../../src/Tab/context.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\n// TabList Component\nexport interface TabListContextProps {\n  indicatorColor: string;\n  textColor: string;\n  selectedTextColor?: string;\n  variant: 'primary' | 'secondary';\n}\n\nconst TabListContext = createContext<TabListContextProps>({\n  indicatorColor: 'primary',\n  textColor: 'on.surface',\n  variant: 'secondary',\n});\nexport const { Provider: TabListProvider } = TabListContext;\nexport const useTabListContext = () => useContext(TabListContext);\n"],"mappings":"AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;;AAEjD;;AAQA,MAAMC,cAAc,gBAAGF,aAAa,CAAsB;EACxDG,cAAc,EAAE,SAAS;EACzBC,SAAS,EAAE,YAAY;EACvBC,OAAO,EAAE;AACX,CAAC,CAAC;AACF,OAAO,MAAM;EAAEC,QAAQ,EAAEC;AAAgB,CAAC,GAAGL,cAAc;AAC3D,OAAO,MAAMM,iBAAiB,GAAGA,CAAA,KAAMP,UAAU,CAACC,cAAc,CAAC","ignoreList":[]}

package/build/esm/Tab/index.d.ts

@@ -1,5 +1,5 @@
-export * from './Tabs';
-export * from './TabList';
-export * from './Tab';
-export * from './TabPanels';
-export * from './TabPanel';
+export * from './Tabs';
+export * from './TabList';
+export * from './Tab';
+export * from './TabPanels';
+export * from './TabPanel';

package/build/esm/Tab/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/Tab/index.ts"],"sourcesContent":["export * from './Tabs';\r\nexport * from './TabList';\r\nexport * from './Tab';\r\nexport * from './TabPanels';\r\nexport * from './TabPanel';\r\n"],"mappings":"AAAA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,OAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/Tab/index.ts"],"sourcesContent":["export * from './Tabs';\nexport * from './TabList';\nexport * from './Tab';\nexport * from './TabPanels';\nexport * from './TabPanel';\n"],"mappings":"AAAA,cAAc,QAAQ;AACtB,cAAc,WAAW;AACzB,cAAc,OAAO;AACrB,cAAc,aAAa;AAC3B,cAAc,YAAY","ignoreList":[]}

package/build/esm/TabIndicator/TabIndicator.d.ts

@@ -1,9 +1,9 @@
-import type { RefObject } from 'react';
-import type { BoxProps } from '../Box';
-export interface TabIndicatorProps extends BoxProps {
-    selected?: boolean;
-    color?: string;
-    variant: 'primary' | 'secondary';
-    labelRef: RefObject<HTMLParagraphElement | null>;
-}
-export declare const TabIndicator: import("react").ForwardRefExoticComponent<Pick<TabIndicatorProps, "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "color" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "textAlign" | "textShadow" | "top" | "translate" | "verticalAlign" | "width" | "background" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bg" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "slot" | "style" | "title" | "hidden" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "size" | "borderX" | "borderY" | "gridGap" | "gridColumnGap" | "gridRowGap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "selected" | "labelRef"> & import("react").RefAttributes<HTMLDivElement>>;
+import type { RefObject } from 'react';
+import type { BoxProps } from '../Box';
+export interface TabIndicatorProps extends BoxProps {
+    selected?: boolean;
+    color?: string;
+    variant: 'primary' | 'secondary';
+    labelRef: RefObject<HTMLParagraphElement | null>;
+}
+export declare const TabIndicator: import("react").ForwardRefExoticComponent<Omit<TabIndicatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/build/esm/TabIndicator/TabIndicator.js

@@ -1,129 +1,112 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["as", "selected", "color", "variant", "labelRef"];
 import { forwardRef, useEffect, useRef, useLayoutEffect } from 'react';
 import { assignMultipleRefs } from '@basic-ui/core';
 import { Box } from '../Box';
 import { useTabIndicatorContext } from './context';
 import { EASING_STANDARD } from '../motion';
 import { jsx as _jsx } from "react/jsx-runtime";
-var WIDTH_PROPERTY_NAME = '--indicator-width';
-var SCALE_PROPERTY_NAME = '--indicator-scale';
-var useEnhancedEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-export var TabIndicator = /*#__PURE__*/forwardRef(function TabIndicator(props, forwardedRef) {
-  var _props$as = props.as,
-      as = _props$as === void 0 ? 'span' : _props$as,
-      selected = props.selected,
-      _props$color = props.color,
-      color = _props$color === void 0 ? 'primary' : _props$color,
-      variant = props.variant,
-      labelRef = props.labelRef,
-      otherProps = _objectWithoutProperties(props, _excluded);
-
-  var ref = useRef(null);
-
-  var _useTabIndicatorConte = useTabIndicatorContext(),
-      currentIndicator = _useTabIndicatorConte.currentIndicator;
-
-  var resizeObserverRef = useRef();
-  useEnhancedEffect(function () {
+const WIDTH_PROPERTY_NAME = '--indicator-width';
+const SCALE_PROPERTY_NAME = '--indicator-scale';
+const useEnhancedEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+export const TabIndicator = /*#__PURE__*/forwardRef(function TabIndicator(props, forwardedRef) {
+  const {
+    as = 'span',
+    selected,
+    color = 'primary',
+    variant,
+    labelRef,
+    ...otherProps
+  } = props;
+  const ref = useRef(null);
+  const {
+    currentIndicator
+  } = useTabIndicatorContext();
+  const resizeObserverRef = useRef(null);
+  useEnhancedEffect(() => {
     if (selected && ref.current) {
       if (currentIndicator.current !== null) {
         // We are switching indicator, let's slide!
-        var previousClientRect = currentIndicator.current.getBoundingClientRect();
-        var currentClientRect = ref.current.getBoundingClientRect();
-        var xPosition = previousClientRect.left - currentClientRect.left;
-        var prevTransition = ref.current.style.transition;
-        var prevTransform = ref.current.style.transform;
+        const previousClientRect = currentIndicator.current.getBoundingClientRect();
+        const currentClientRect = ref.current.getBoundingClientRect();
+        const xPosition = previousClientRect.left - currentClientRect.left;
+        const prevTransition = ref.current.style.transition;
+        const prevTransform = ref.current.style.transform;
         ref.current.style.transition = 'none';
-
         if (variant === 'primary') {
-          var prevWidth = currentIndicator.current.style.getPropertyValue(WIDTH_PROPERTY_NAME);
-          var currentWidth = ref.current.style.getPropertyValue(WIDTH_PROPERTY_NAME);
-          var widthDelta = String(parseFloat(prevWidth) / parseFloat(currentWidth));
+          const prevWidth = currentIndicator.current.style.getPropertyValue(WIDTH_PROPERTY_NAME);
+          const currentWidth = ref.current.style.getPropertyValue(WIDTH_PROPERTY_NAME);
+          const widthDelta = String(parseFloat(prevWidth) / parseFloat(currentWidth));
           ref.current.style.setProperty(SCALE_PROPERTY_NAME, widthDelta);
-          ref.current.style.transform = "translateX(".concat(xPosition, "px)");
+          ref.current.style.transform = `translateX(${xPosition}px)`;
         } else {
-          var _widthDelta = previousClientRect.width / currentClientRect.width;
-
-          ref.current.style.transform = "translateX(".concat(xPosition, "px) scaleX(").concat(_widthDelta, ")");
-        } // Force repaint before updating classes and transform to ensure the transform properly takes effect
-
+          const widthDelta = previousClientRect.width / currentClientRect.width;
+          ref.current.style.transform = `translateX(${xPosition}px) scaleX(${widthDelta})`;
+        }
 
-        ref.current.getBoundingClientRect(); // Restore and let transition do it's magic
+        // Force repaint before updating classes and transform to ensure the transform properly takes effect
+        ref.current.getBoundingClientRect();
 
+        // Restore and let transition do it's magic
         ref.current.style.transition = prevTransition;
         ref.current.style.transform = prevTransform;
-
         if (variant === 'primary') {
           ref.current.style.setProperty(SCALE_PROPERTY_NAME, '1');
         }
       }
-
       currentIndicator.current = ref.current;
     }
   }, [selected, variant]);
-  useEnhancedEffect(function () {
+  useEnhancedEffect(() => {
     if (variant === 'secondary') {
       return;
     }
-
     if (labelRef.current && ref.current) {
-      var width = labelRef.current.getBoundingClientRect().width;
-      ref.current.style.setProperty(WIDTH_PROPERTY_NAME, "".concat(width, "px"));
-
+      const width = labelRef.current.getBoundingClientRect().width;
+      ref.current.style.setProperty(WIDTH_PROPERTY_NAME, `${width}px`);
       if (typeof ResizeObserver === 'function') {
-        var _resizeObserverRef$cu, _resizeObserverRef$cu2;
-
-        (_resizeObserverRef$cu = resizeObserverRef.current) !== null && _resizeObserverRef$cu !== void 0 ? _resizeObserverRef$cu : resizeObserverRef.current = new ResizeObserver(function (_ref) {
-          var _ref2 = _slicedToArray(_ref, 1),
-              entry = _ref2[0];
-
+        resizeObserverRef.current ??= new ResizeObserver(_ref => {
+          let [entry] = _ref;
           if (ref.current) {
-            ref.current.style.setProperty(WIDTH_PROPERTY_NAME, "".concat(entry.contentRect.width, "px"));
+            ref.current.style.setProperty(WIDTH_PROPERTY_NAME, `${entry.contentRect.width}px`);
           }
         });
-        (_resizeObserverRef$cu2 = resizeObserverRef.current) === null || _resizeObserverRef$cu2 === void 0 ? void 0 : _resizeObserverRef$cu2.observe(labelRef.current);
-        return function () {
-          var _resizeObserverRef$cu3;
-
-          return (_resizeObserverRef$cu3 = resizeObserverRef.current) === null || _resizeObserverRef$cu3 === void 0 ? void 0 : _resizeObserverRef$cu3.disconnect();
-        };
+        resizeObserverRef.current?.observe(labelRef.current);
+        return () => resizeObserverRef.current?.disconnect();
       }
     }
   }, [labelRef, variant]);
-  return /*#__PURE__*/_jsx(Box, _extends({
+  return /*#__PURE__*/_jsx(Box, {
     as: as,
     ref: assignMultipleRefs(ref, forwardedRef),
-    __css: _extends({
+    __css: {
       bg: color,
       position: 'absolute',
       bottom: 0,
-      transform: "scale(1)",
+      transform: `scale(1)`,
       opacity: selected ? 1 : 0,
-      transition: "transform .25s ".concat(EASING_STANDARD),
-      zIndex: 1
-    }, variant === 'secondary' ? {
-      width: '100%',
-      height: "0.125rem"
-    } : {
-      width: '100%',
-      '&::before': {
-        content: '""',
-        width: "var(".concat(WIDTH_PROPERTY_NAME, ", 0px)"),
-        height: "0.1875rem",
-        borderTopLeftRadius: "0.1875rem",
-        borderTopRightRadius: "0.1875rem",
-        bg: color,
-        position: 'absolute',
-        transformOrigin: 'center',
-        bottom: 0,
-        left: '50%',
-        transition: "inherit",
-        transform: "translateX(-50%) scaleX(var(".concat(SCALE_PROPERTY_NAME, ", 1))}")
-      }
-    })
-  }, otherProps));
+      transition: `transform .25s ${EASING_STANDARD}`,
+      zIndex: 1,
+      ...(variant === 'secondary' ? {
+        width: '100%',
+        height: "0.125rem"
+      } : {
+        width: '100%',
+        '&::before': {
+          content: '""',
+          width: `var(${WIDTH_PROPERTY_NAME}, 0px)`,
+          height: "0.1875rem",
+          borderTopLeftRadius: "0.1875rem",
+          borderTopRightRadius: "0.1875rem",
+          bg: color,
+          position: 'absolute',
+          transformOrigin: 'center',
+          bottom: 0,
+          left: '50%',
+          transition: `inherit`,
+          transform: `translateX(-50%) scaleX(var(${SCALE_PROPERTY_NAME}, 1))}`
+        }
+      })
+    },
+    ...otherProps
+  });
 });
 //# sourceMappingURL=TabIndicator.js.map

package/build/esm/TabIndicator/TabIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabIndicator.js","names":["forwardRef","useEffect","useRef","useLayoutEffect","assignMultipleRefs","Box","useTabIndicatorContext","EASING_STANDARD","WIDTH_PROPERTY_NAME","SCALE_PROPERTY_NAME","useEnhancedEffect","window","TabIndicator","props","forwardedRef","as","selected","color","variant","labelRef","otherProps","ref","currentIndicator","resizeObserverRef","current","previousClientRect","getBoundingClientRect","currentClientRect","xPosition","left","prevTransition","style","transition","prevTransform","transform","prevWidth","getPropertyValue","currentWidth","widthDelta","String","parseFloat","setProperty","width","ResizeObserver","entry","contentRect","observe","disconnect","bg","position","bottom","opacity","zIndex","height","content","borderTopLeftRadius","borderTopRightRadius","transformOrigin"],"sources":["../../../src/TabIndicator/TabIndicator.tsx"],"sourcesContent":["import type { RefObject } from 'react';\r\nimport { forwardRef, useEffect, useRef, useLayoutEffect } from 'react';\r\nimport { rem } from 'polished';\r\nimport { assignMultipleRefs } from '@basic-ui/core';\r\n\r\nimport type { BoxProps } from '../Box';\r\nimport { Box } from '../Box';\r\nimport { useTabIndicatorContext } from './context';\r\nimport { EASING_STANDARD } from '../motion';\r\n\r\nexport interface TabIndicatorProps extends BoxProps {\r\n  selected?: boolean;\r\n  color?: string;\r\n  variant: 'primary' | 'secondary';\r\n  labelRef: RefObject<HTMLParagraphElement | null>;\r\n}\r\n\r\nconst WIDTH_PROPERTY_NAME = '--indicator-width';\r\nconst SCALE_PROPERTY_NAME = '--indicator-scale';\r\n\r\nconst useEnhancedEffect =\r\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect;\r\n\r\nexport const TabIndicator = forwardRef<HTMLDivElement, TabIndicatorProps>(\r\n  function TabIndicator(props, forwardedRef) {\r\n    const {\r\n      as = 'span',\r\n      selected,\r\n      color = 'primary',\r\n      variant,\r\n      labelRef,\r\n      ...otherProps\r\n    } = props;\r\n    const ref = useRef<HTMLSpanElement>(null);\r\n    const { currentIndicator } = useTabIndicatorContext();\r\n    const resizeObserverRef = useRef<ResizeObserver>();\r\n\r\n    useEnhancedEffect(() => {\r\n      if (selected && ref.current) {\r\n        if (currentIndicator.current !== null) {\r\n          // We are switching indicator, let's slide!\r\n          const previousClientRect =\r\n            currentIndicator.current.getBoundingClientRect();\r\n          const currentClientRect = ref.current.getBoundingClientRect();\r\n          const xPosition = previousClientRect.left - currentClientRect.left;\r\n\r\n          const prevTransition = ref.current.style.transition;\r\n          const prevTransform = ref.current.style.transform;\r\n          ref.current.style.transition = 'none';\r\n          if (variant === 'primary') {\r\n            const prevWidth =\r\n              currentIndicator.current.style.getPropertyValue(\r\n                WIDTH_PROPERTY_NAME\r\n              );\r\n            const currentWidth =\r\n              ref.current.style.getPropertyValue(WIDTH_PROPERTY_NAME);\r\n            const widthDelta = String(\r\n              parseFloat(prevWidth) / parseFloat(currentWidth)\r\n            );\r\n            ref.current.style.setProperty(SCALE_PROPERTY_NAME, widthDelta);\r\n            ref.current.style.transform = `translateX(${xPosition}px)`;\r\n          } else {\r\n            const widthDelta =\r\n              previousClientRect.width / currentClientRect.width;\r\n            ref.current.style.transform = `translateX(${xPosition}px) scaleX(${widthDelta})`;\r\n          }\r\n\r\n          // Force repaint before updating classes and transform to ensure the transform properly takes effect\r\n          ref.current.getBoundingClientRect();\r\n\r\n          // Restore and let transition do it's magic\r\n          ref.current.style.transition = prevTransition;\r\n          ref.current.style.transform = prevTransform;\r\n          if (variant === 'primary') {\r\n            ref.current.style.setProperty(SCALE_PROPERTY_NAME, '1');\r\n          }\r\n        }\r\n        currentIndicator.current = ref.current;\r\n      }\r\n    }, [selected, variant]);\r\n\r\n    useEnhancedEffect(() => {\r\n      if (variant === 'secondary') {\r\n        return;\r\n      }\r\n\r\n      if (labelRef.current && ref.current) {\r\n        const width = labelRef.current.getBoundingClientRect().width;\r\n        ref.current.style.setProperty(WIDTH_PROPERTY_NAME, `${width}px`);\r\n\r\n        if (typeof ResizeObserver === 'function') {\r\n          resizeObserverRef.current ??= new ResizeObserver(([entry]) => {\r\n            if (ref.current) {\r\n              ref.current.style.setProperty(\r\n                WIDTH_PROPERTY_NAME,\r\n                `${entry.contentRect.width}px`\r\n              );\r\n            }\r\n          });\r\n\r\n          resizeObserverRef.current?.observe(labelRef.current);\r\n          return () => resizeObserverRef.current?.disconnect();\r\n        }\r\n      }\r\n    }, [labelRef, variant]);\r\n\r\n    return (\r\n      <Box\r\n        as={as}\r\n        ref={assignMultipleRefs(ref, forwardedRef)}\r\n        __css={{\r\n          bg: color,\r\n          position: 'absolute',\r\n          bottom: 0,\r\n          transform: `scale(1)`,\r\n          opacity: selected ? 1 : 0,\r\n          transition: `transform .25s ${EASING_STANDARD}`,\r\n          zIndex: 1,\r\n          ...(variant === 'secondary'\r\n            ? {\r\n                width: '100%',\r\n                height: rem(2),\r\n              }\r\n            : {\r\n                width: '100%',\r\n                '&::before': {\r\n                  content: '\"\"',\r\n                  width: `var(${WIDTH_PROPERTY_NAME}, 0px)`,\r\n                  height: rem(3),\r\n                  borderTopLeftRadius: rem(3),\r\n                  borderTopRightRadius: rem(3),\r\n                  bg: color,\r\n                  position: 'absolute',\r\n                  transformOrigin: 'center',\r\n                  bottom: 0,\r\n                  left: '50%',\r\n                  transition: `inherit`,\r\n                  transform: `translateX(-50%) scaleX(var(${SCALE_PROPERTY_NAME}, 1))}`,\r\n                },\r\n              }),\r\n        }}\r\n        {...otherProps}\r\n      />\r\n    );\r\n  }\r\n);\r\n"],"mappings":"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"}
+{"version":3,"file":"TabIndicator.js","names":["forwardRef","useEffect","useRef","useLayoutEffect","assignMultipleRefs","Box","useTabIndicatorContext","EASING_STANDARD","jsx","_jsx","WIDTH_PROPERTY_NAME","SCALE_PROPERTY_NAME","useEnhancedEffect","window","TabIndicator","props","forwardedRef","as","selected","color","variant","labelRef","otherProps","ref","currentIndicator","resizeObserverRef","current","previousClientRect","getBoundingClientRect","currentClientRect","xPosition","left","prevTransition","style","transition","prevTransform","transform","prevWidth","getPropertyValue","currentWidth","widthDelta","String","parseFloat","setProperty","width","ResizeObserver","_ref","entry","contentRect","observe","disconnect","__css","bg","position","bottom","opacity","zIndex","height","content","borderTopLeftRadius","borderTopRightRadius","transformOrigin"],"sources":["../../../src/TabIndicator/TabIndicator.tsx"],"sourcesContent":["import type { RefObject } from 'react';\nimport { forwardRef, useEffect, useRef, useLayoutEffect } from 'react';\nimport { rem } from 'polished';\nimport { assignMultipleRefs } from '@basic-ui/core';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { useTabIndicatorContext } from './context';\nimport { EASING_STANDARD } from '../motion';\n\nexport interface TabIndicatorProps extends BoxProps {\n  selected?: boolean;\n  color?: string;\n  variant: 'primary' | 'secondary';\n  labelRef: RefObject<HTMLParagraphElement | null>;\n}\n\nconst WIDTH_PROPERTY_NAME = '--indicator-width';\nconst SCALE_PROPERTY_NAME = '--indicator-scale';\n\nconst useEnhancedEffect =\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nexport const TabIndicator = forwardRef<HTMLDivElement, TabIndicatorProps>(\n  function TabIndicator(props, forwardedRef) {\n    const {\n      as = 'span',\n      selected,\n      color = 'primary',\n      variant,\n      labelRef,\n      ...otherProps\n    } = props;\n    const ref = useRef<HTMLSpanElement>(null);\n    const { currentIndicator } = useTabIndicatorContext();\n    const resizeObserverRef = useRef<ResizeObserver | null>(null);\n\n    useEnhancedEffect(() => {\n      if (selected && ref.current) {\n        if (currentIndicator.current !== null) {\n          // We are switching indicator, let's slide!\n          const previousClientRect =\n            currentIndicator.current.getBoundingClientRect();\n          const currentClientRect = ref.current.getBoundingClientRect();\n          const xPosition = previousClientRect.left - currentClientRect.left;\n\n          const prevTransition = ref.current.style.transition;\n          const prevTransform = ref.current.style.transform;\n          ref.current.style.transition = 'none';\n          if (variant === 'primary') {\n            const prevWidth =\n              currentIndicator.current.style.getPropertyValue(\n                WIDTH_PROPERTY_NAME\n              );\n            const currentWidth =\n              ref.current.style.getPropertyValue(WIDTH_PROPERTY_NAME);\n            const widthDelta = String(\n              parseFloat(prevWidth) / parseFloat(currentWidth)\n            );\n            ref.current.style.setProperty(SCALE_PROPERTY_NAME, widthDelta);\n            ref.current.style.transform = `translateX(${xPosition}px)`;\n          } else {\n            const widthDelta =\n              previousClientRect.width / currentClientRect.width;\n            ref.current.style.transform = `translateX(${xPosition}px) scaleX(${widthDelta})`;\n          }\n\n          // Force repaint before updating classes and transform to ensure the transform properly takes effect\n          ref.current.getBoundingClientRect();\n\n          // Restore and let transition do it's magic\n          ref.current.style.transition = prevTransition;\n          ref.current.style.transform = prevTransform;\n          if (variant === 'primary') {\n            ref.current.style.setProperty(SCALE_PROPERTY_NAME, '1');\n          }\n        }\n        currentIndicator.current = ref.current;\n      }\n    }, [selected, variant]);\n\n    useEnhancedEffect(() => {\n      if (variant === 'secondary') {\n        return;\n      }\n\n      if (labelRef.current && ref.current) {\n        const width = labelRef.current.getBoundingClientRect().width;\n        ref.current.style.setProperty(WIDTH_PROPERTY_NAME, `${width}px`);\n\n        if (typeof ResizeObserver === 'function') {\n          resizeObserverRef.current ??= new ResizeObserver(([entry]) => {\n            if (ref.current) {\n              ref.current.style.setProperty(\n                WIDTH_PROPERTY_NAME,\n                `${entry.contentRect.width}px`\n              );\n            }\n          });\n\n          resizeObserverRef.current?.observe(labelRef.current);\n          return () => resizeObserverRef.current?.disconnect();\n        }\n      }\n    }, [labelRef, variant]);\n\n    return (\n      <Box\n        as={as}\n        ref={assignMultipleRefs(ref, forwardedRef)}\n        __css={{\n          bg: color,\n          position: 'absolute',\n          bottom: 0,\n          transform: `scale(1)`,\n          opacity: selected ? 1 : 0,\n          transition: `transform .25s ${EASING_STANDARD}`,\n          zIndex: 1,\n          ...(variant === 'secondary'\n            ? {\n                width: '100%',\n                height: rem(2),\n              }\n            : {\n                width: '100%',\n                '&::before': {\n                  content: '\"\"',\n                  width: `var(${WIDTH_PROPERTY_NAME}, 0px)`,\n                  height: rem(3),\n                  borderTopLeftRadius: rem(3),\n                  borderTopRightRadius: rem(3),\n                  bg: color,\n                  position: 'absolute',\n                  transformOrigin: 'center',\n                  bottom: 0,\n                  left: '50%',\n                  transition: `inherit`,\n                  transform: `translateX(-50%) scaleX(var(${SCALE_PROPERTY_NAME}, 1))}`,\n                },\n              }),\n        }}\n        {...otherProps}\n      />\n    );\n  }\n);\n"],"mappings":"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","ignoreList":[]}