@basic-ui/material 1.0.0-alpha.0 → 1.0.0-alpha.1

package/build/esm/Switch/Switch.d.ts

@@ -1,9 +1,9 @@
-import type * as React from 'react';
-import { BoxProps } from '../Box';
+import * as React from 'react';
+import type { BoxProps } from '../Box';
 interface SwitchProps extends BoxProps<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>> {
     as?: React.ElementType<any>;
     checked?: boolean;
     disabled?: boolean;
 }
-export declare const Switch: React.ForwardRefExoticComponent<Pick<SwitchProps, "form" | "p" | "slot" | "style" | "title" | "pattern" | "bottom" | "top" | "hidden" | "left" | "right" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "size" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "color" | "bg" | "backgroundColor" | "opacity" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "order" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "gridGap" | "gridColumnGap" | "gridRowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "background" | "backgroundImage" | "backgroundSize" | "backgroundPosition" | "backgroundRepeat" | "position" | "zIndex" | "boxShadow" | "textShadow" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "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" | "multiple" | "list" | "step" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "enterKeyHint" | "max" | "maxLength" | "min" | "minLength" | "readOnly" | "required" | "src"> & React.RefAttributes<HTMLInputElement>>;
+export declare const Switch: React.ForwardRefExoticComponent<Pick<SwitchProps, "children" | "form" | "p" | "slot" | "style" | "title" | "pattern" | "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" | "boxShadow" | "color" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "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" | "zIndex" | "background" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "gridColumnGap" | "gridGap" | "gridRowGap" | "value" | "hidden" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "size" | "bg" | "borderX" | "borderY" | "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" | "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" | "list" | "step" | "max" | "min" | "name" | "type" | "crossOrigin" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "multiple" | "alt" | "autoComplete" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "src" | "required" | "enterKeyHint" | "readOnly"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/build/esm/Switch/Switch.js

@@ -1,27 +1,27 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import { forwardRef } from 'react';
+import * as React from 'react';
+import { CheckBox as _CheckBoxCore } from '@basic-ui/core';
 import { RippleBox } from '../Ripple';
 import { Box } from '../Box';
 import { useTheme } from '../theme';
-import { CheckBox as _CheckBoxCore } from '@basic-ui/core';
 import { SelectionControlLabel, SelectionControlText } from '../SelectionControl';
 import { SwitchTrail, SwitchThumb, SwitchCircle } from './styledComponents';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const CheckBoxCore = _CheckBoxCore;
-const SwitchInner = /*#__PURE__*/forwardRef(function SwitchInner(props, forwardedRef) {
-  const {
-    as: Comp = 'input',
-    disabled,
-    checked,
-    onChange,
-    __css
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose(props, ["as", "disabled", "checked", "onChange", "__css"]);
+var CheckBoxCore = _CheckBoxCore;
+var SwitchInner = /*#__PURE__*/forwardRef(function SwitchInner(props, forwardedRef) {
+  var _props$as = props.as,
+      Comp = _props$as === void 0 ? 'input' : _props$as,
+      disabled = props.disabled,
+      checked = props.checked,
+      onChange = props.onChange,
+      __css = props.__css,
+      otherProps = _objectWithoutProperties(props, ["as", "disabled", "checked", "onChange", "__css"]);
 
-  const color = checked ? 'primary' : 'on.surface';
-  const theme = useTheme();
+  var color = checked ? 'primary' : 'on.surface';
+  var theme = useTheme();
   return /*#__PURE__*/_jsx(Box, {
     p: 2,
     display: "inline-block",
@@ -73,15 +73,14 @@ const SwitchInner = /*#__PURE__*/forwardRef(function SwitchInner(props, forwarde
     })
   });
 });
-export const Switch = /*#__PURE__*/forwardRef(function Switch(props, forwardedRef) {
-  const {
-    as = 'input',
-    disabled,
-    children
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose(props, ["as", "disabled", "children"]);
+export var Switch = /*#__PURE__*/forwardRef(function Switch(props, forwardedRef) {
+  var _props$as2 = props.as,
+      as = _props$as2 === void 0 ? 'input' : _props$as2,
+      disabled = props.disabled,
+      children = props.children,
+      otherProps = _objectWithoutProperties(props, ["as", "disabled", "children"]);
 
-  const inner = /*#__PURE__*/_jsx(CheckBoxCore, _extends({
+  var inner = /*#__PURE__*/_jsx(CheckBoxCore, _extends({
     as: SwitchInner,
     innerAs: as,
     ref: forwardedRef,

package/build/esm/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Switch/Switch.tsx"],"names":["forwardRef","RippleBox","Box","useTheme","CheckBox","_CheckBoxCore","SelectionControlLabel","SelectionControlText","SwitchTrail","SwitchThumb","SwitchCircle","CheckBoxCore","SwitchInner","props","forwardedRef","as","Comp","disabled","checked","onChange","__css","otherProps","color","theme","top","left","backgroundColor","transform","width","height","appearance","outline","border","borderRadius","zIndex","position","Switch","children","inner"],"mappings":"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","sourcesContent":["import { forwardRef, InputHTMLAttributes } from 'react';\nimport type * as React from 'react';\nimport { RippleBox, RippleBoxProps } from '../Ripple';\nimport { Box, BoxProps } from '../Box';\nimport { useTheme } from '../theme';\nimport { CheckBox as _CheckBoxCore } from '@basic-ui/core';\nimport {\n  SelectionControlLabel,\n  SelectionControlText,\n} from '../SelectionControl';\nimport { SwitchTrail, SwitchThumb, SwitchCircle } from './styledComponents';\n\nconst CheckBoxCore: React.FC<\n  SwitchProps & {\n    innerAs?: React.ElementType<any>;\n  }\n> = _CheckBoxCore as any;\n\ninterface SwitchProps\n  extends BoxProps<\n    HTMLInputElement,\n    React.InputHTMLAttributes<HTMLInputElement>\n  > {\n  as?: React.ElementType<any>;\n  checked?: boolean;\n  disabled?: boolean;\n}\n\nconst SwitchInner = forwardRef<HTMLInputElement, SwitchProps>(\n  function SwitchInner(props, forwardedRef) {\n    const {\n      as: Comp = 'input',\n      disabled,\n      checked,\n      onChange,\n      __css,\n      ...otherProps\n    } = props;\n    const color = checked ? 'primary' : 'on.surface';\n    const theme = useTheme();\n\n    return (\n      <Box p={2} display=\"inline-block\" minWidth=\"auto\">\n        <Box position=\"relative\">\n          <SwitchTrail checked={checked} disabled={disabled} />\n          <SwitchThumb checked={checked}>\n            <RippleBox<\n              RippleBoxProps<\n                HTMLInputElement,\n                InputHTMLAttributes<HTMLInputElement>\n              >\n            >\n              as={Comp}\n              role=\"switch\"\n              type=\"checkbox\"\n              checked={checked}\n              onChange={onChange}\n              theme={theme}\n              ref={forwardedRef}\n              aria-checked={checked ? 'true' : 'false'}\n              rippleColor={color}\n              baseOpacity={0}\n              hoverOpacity={0.04}\n              focusOpacity={0.12}\n              center={true}\n              disabled={disabled}\n              data-switch-thumb=\"\"\n              {...otherProps}\n              __css={{\n                top: '50%',\n                left: '50%',\n                backgroundColor: 'transparent',\n                transform: 'translate(-50%, -50%)',\n                width: '100%',\n                height: '100%',\n                appearance: 'none',\n                ':focus': {\n                  outline: 'none',\n                },\n                border: 'none',\n                borderRadius: 'full',\n                zIndex: 1,\n                position: 'absolute',\n                ...__css,\n              }}\n            />\n            <SwitchCircle checked={checked} />\n          </SwitchThumb>\n        </Box>\n      </Box>\n    );\n  }\n);\n\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  props,\n  forwardedRef\n) {\n  const { as = 'input', disabled, children, ...otherProps } = props;\n\n  const inner = (\n    <CheckBoxCore\n      as={SwitchInner}\n      innerAs={as}\n      ref={forwardedRef}\n      disabled={disabled}\n      {...otherProps}\n    />\n  );\n\n  if (!children) {\n    return inner;\n  }\n\n  return (\n    <SelectionControlLabel>\n      {inner}\n      <SelectionControlText disabled={disabled}>\n        {children}\n      </SelectionControlText>\n    </SelectionControlLabel>\n  );\n});\n"],"file":"Switch.js"}
+{"version":3,"sources":["../../../src/Switch/Switch.tsx"],"names":["forwardRef","React","CheckBox","_CheckBoxCore","RippleBox","Box","useTheme","SelectionControlLabel","SelectionControlText","SwitchTrail","SwitchThumb","SwitchCircle","CheckBoxCore","SwitchInner","props","forwardedRef","as","Comp","disabled","checked","onChange","__css","otherProps","color","theme","top","left","backgroundColor","transform","width","height","appearance","outline","border","borderRadius","zIndex","position","Switch","children","inner"],"mappings":"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","sourcesContent":["import type { InputHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport * as React from 'react';\nimport { CheckBox as _CheckBoxCore } from '@basic-ui/core';\n\nimport type { RippleBoxProps } from '../Ripple';\nimport { RippleBox } from '../Ripple';\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { useTheme } from '../theme';\nimport {\n  SelectionControlLabel,\n  SelectionControlText,\n} from '../SelectionControl';\nimport { SwitchTrail, SwitchThumb, SwitchCircle } from './styledComponents';\n\nconst CheckBoxCore: React.FC<\n  SwitchProps & {\n    innerAs?: React.ElementType<any>;\n  }\n> = _CheckBoxCore as any;\n\ninterface SwitchProps\n  extends BoxProps<\n    HTMLInputElement,\n    React.InputHTMLAttributes<HTMLInputElement>\n  > {\n  as?: React.ElementType<any>;\n  checked?: boolean;\n  disabled?: boolean;\n}\n\nconst SwitchInner = forwardRef<HTMLInputElement, SwitchProps>(\n  function SwitchInner(props, forwardedRef) {\n    const {\n      as: Comp = 'input',\n      disabled,\n      checked,\n      onChange,\n      __css,\n      ...otherProps\n    } = props;\n    const color = checked ? 'primary' : 'on.surface';\n    const theme = useTheme();\n\n    return (\n      <Box p={2} display=\"inline-block\" minWidth=\"auto\">\n        <Box position=\"relative\">\n          <SwitchTrail checked={checked} disabled={disabled} />\n          <SwitchThumb checked={checked}>\n            <RippleBox<\n              RippleBoxProps<\n                HTMLInputElement,\n                InputHTMLAttributes<HTMLInputElement>\n              >\n            >\n              as={Comp}\n              role=\"switch\"\n              type=\"checkbox\"\n              checked={checked}\n              onChange={onChange}\n              theme={theme}\n              ref={forwardedRef}\n              aria-checked={checked ? 'true' : 'false'}\n              rippleColor={color}\n              baseOpacity={0}\n              hoverOpacity={0.04}\n              focusOpacity={0.12}\n              center={true}\n              disabled={disabled}\n              data-switch-thumb=\"\"\n              {...otherProps}\n              __css={{\n                top: '50%',\n                left: '50%',\n                backgroundColor: 'transparent',\n                transform: 'translate(-50%, -50%)',\n                width: '100%',\n                height: '100%',\n                appearance: 'none',\n                ':focus': {\n                  outline: 'none',\n                },\n                border: 'none',\n                borderRadius: 'full',\n                zIndex: 1,\n                position: 'absolute',\n                ...__css,\n              }}\n            />\n            <SwitchCircle checked={checked} />\n          </SwitchThumb>\n        </Box>\n      </Box>\n    );\n  }\n);\n\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\n  props,\n  forwardedRef\n) {\n  const { as = 'input', disabled, children, ...otherProps } = props;\n\n  const inner = (\n    <CheckBoxCore\n      as={SwitchInner}\n      innerAs={as}\n      ref={forwardedRef}\n      disabled={disabled}\n      {...otherProps}\n    />\n  );\n\n  if (!children) {\n    return inner;\n  }\n\n  return (\n    <SelectionControlLabel>\n      {inner}\n      <SelectionControlText disabled={disabled}>\n        {children}\n      </SelectionControlText>\n    </SelectionControlLabel>\n  );\n});\n"],"file":"Switch.js"}

package/build/esm/Switch/styledComponents.js

@@ -1,21 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import { rem } from 'polished';
 import { Box } from '../Box';
 import { jsx as _jsx } from "react/jsx-runtime";
-const BORDER_WIDTH = 2;
-const TRAIL_WIDTH = 52;
-const TRAIL_HEIGHT = 32;
-const CIRCLE_SIZE_INACTIVE_CHECKED = 24;
-const CIRCLE_SIZE_ACTIVE_CHECKED = 28;
-const CIRCLE_SIZE_INACTIVE_UNCHECKED = 16;
-const CIRCLE_SIZE_ACTIVE_UNCHECKED = 28;
-export const SwitchTrail = (_ref) => {
-  let {
-    checked = false,
-    disabled = false
-  } = _ref,
-      otherProps = _objectWithoutPropertiesLoose(_ref, ["checked", "disabled"]);
+var BORDER_WIDTH = 2;
+var TRAIL_WIDTH = 52;
+var TRAIL_HEIGHT = 32;
+var CIRCLE_SIZE_INACTIVE_CHECKED = 24;
+var CIRCLE_SIZE_ACTIVE_CHECKED = 28;
+var CIRCLE_SIZE_INACTIVE_UNCHECKED = 16;
+var CIRCLE_SIZE_ACTIVE_UNCHECKED = 28;
+export var SwitchTrail = function SwitchTrail(_ref) {
+  var _ref$checked = _ref.checked,
+      checked = _ref$checked === void 0 ? false : _ref$checked,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      otherProps = _objectWithoutProperties(_ref, ["checked", "disabled"]);
 
   return /*#__PURE__*/_jsx(Box, _extends({
     __css: _extends({
@@ -33,12 +33,11 @@ export const SwitchTrail = (_ref) => {
     })
   }, otherProps));
 };
-const THUMB_SIZE = 40;
-export const SwitchThumb = (_ref2) => {
-  let {
-    checked = false
-  } = _ref2,
-      otherProps = _objectWithoutPropertiesLoose(_ref2, ["checked"]);
+var THUMB_SIZE = 40;
+export var SwitchThumb = function SwitchThumb(_ref2) {
+  var _ref2$checked = _ref2.checked,
+      checked = _ref2$checked === void 0 ? false : _ref2$checked,
+      otherProps = _objectWithoutProperties(_ref2, ["checked"]);
 
   return /*#__PURE__*/_jsx(Box, _extends({
     position: "absolute",
@@ -58,11 +57,10 @@ export const SwitchThumb = (_ref2) => {
     }
   }, otherProps));
 };
-export const SwitchCircle = (_ref3) => {
-  let {
-    checked = false
-  } = _ref3,
-      otherProps = _objectWithoutPropertiesLoose(_ref3, ["checked"]);
+export var SwitchCircle = function SwitchCircle(_ref3) {
+  var _ref3$checked = _ref3.checked,
+      checked = _ref3$checked === void 0 ? false : _ref3$checked,
+      otherProps = _objectWithoutProperties(_ref3, ["checked"]);
 
   return /*#__PURE__*/_jsx(Box, _extends({
     __css: {

package/build/esm/Switch/styledComponents.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Switch/styledComponents.tsx"],"names":["rem","Box","BORDER_WIDTH","TRAIL_WIDTH","TRAIL_HEIGHT","CIRCLE_SIZE_INACTIVE_CHECKED","CIRCLE_SIZE_ACTIVE_CHECKED","CIRCLE_SIZE_INACTIVE_UNCHECKED","CIRCLE_SIZE_ACTIVE_UNCHECKED","SwitchTrail","checked","disabled","otherProps","width","height","borderRadius","borderWidth","borderStyle","backgroundColor","borderColor","opacity","THUMB_SIZE","SwitchThumb","transform","WebkitTapHighlightColor","transition","SwitchCircle","position","boxSizing","pointerEvents","zIndex","top","left"],"mappings":"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","sourcesContent":["import { rem } from 'polished';\nimport { Box } from '../Box';\n\nconst BORDER_WIDTH = 2;\nconst TRAIL_WIDTH = 52;\nconst TRAIL_HEIGHT = 32;\nconst CIRCLE_SIZE_INACTIVE_CHECKED = 24;\nconst CIRCLE_SIZE_ACTIVE_CHECKED = 28;\nconst CIRCLE_SIZE_INACTIVE_UNCHECKED = 16;\nconst CIRCLE_SIZE_ACTIVE_UNCHECKED = 28;\n\nexport const SwitchTrail = ({\n  checked = false,\n  disabled = false,\n  ...otherProps\n}) => (\n  <Box\n    __css={{\n      width: rem(TRAIL_WIDTH),\n      height: rem(TRAIL_HEIGHT),\n      borderRadius: rem(TRAIL_HEIGHT / 2),\n      borderWidth: rem(BORDER_WIDTH),\n      borderStyle: 'solid',\n      backgroundColor: checked ? 'primary' : 'surface-variant',\n      borderColor: checked ? 'primary' : 'outline',\n      ...(disabled && {\n        opacity: 0.12,\n        backgroundColor: checked ? 'on.surface' : 'surface-variant',\n        borderColor: 'on.surface',\n      }),\n    }}\n    {...otherProps}\n  />\n);\n\nconst THUMB_SIZE = 40;\nexport const SwitchThumb = ({ checked = false, ...otherProps }) => (\n  <Box\n    position=\"absolute\"\n    width={rem(THUMB_SIZE)}\n    height={rem(THUMB_SIZE)}\n    borderRadius=\"full\"\n    left={'50%'}\n    top={'50%'}\n    __css={{\n      transform: `translateX(calc(-50% ${checked ? '+' : '-'} ${rem(\n        (TRAIL_WIDTH - CIRCLE_SIZE_INACTIVE_CHECKED - BORDER_WIDTH * 4) / 2\n      )})) translateY(-50%)`,\n      WebkitTapHighlightColor: 'transparent',\n      transition:\n        'background-color 90ms cubic-bezier(.4,0,.2,1),border-color 90ms cubic-bezier(.4,0,.2,1),transform 90ms cubic-bezier(.4,0,.2,1),height 90ms cubic-bezier(.4,0,.2,1),width 90ms cubic-bezier(.4,0,.2,1)',\n      '& > input': {\n        width: THUMB_SIZE,\n        height: THUMB_SIZE,\n      },\n    }}\n    {...otherProps}\n  />\n);\n\nexport const SwitchCircle = ({ checked = false, ...otherProps }) => (\n  <Box\n    __css={{\n      position: 'absolute',\n      width: checked\n        ? rem(CIRCLE_SIZE_INACTIVE_CHECKED)\n        : rem(CIRCLE_SIZE_INACTIVE_UNCHECKED),\n      height: checked\n        ? rem(CIRCLE_SIZE_INACTIVE_CHECKED)\n        : rem(CIRCLE_SIZE_INACTIVE_UNCHECKED),\n      boxSizing: 'border-box',\n      borderRadius: 'full',\n      pointerEvents: 'none',\n      zIndex: 1,\n      backgroundColor: checked ? 'on.primary' : 'outline',\n      top: '50%',\n      left: '50%',\n      transform: 'translate(-50%, -50%)',\n      transition: 'inherit',\n      '[data-switch-thumb=\"\"]:active ~ &, [data-switch-thumb=\"\"]:focus-visible ~ &, [data-switch-thumb=\"\"]:hover ~ &': {\n        backgroundColor: checked ? 'primary-container' : 'on.surface-variant',\n      },\n      '[data-switch-thumb=\"\"]:active ~ &, [data-switch-thumb=\"\"]:focus-visible ~ &': {\n        height: checked\n          ? CIRCLE_SIZE_ACTIVE_CHECKED\n          : CIRCLE_SIZE_ACTIVE_UNCHECKED,\n        width: checked\n          ? CIRCLE_SIZE_ACTIVE_CHECKED\n          : CIRCLE_SIZE_ACTIVE_UNCHECKED,\n      },\n      '[data-switch-thumb=\"\"]:disabled ~ &': {\n        opacity: checked ? 1 : 0.38,\n        backgroundColor: checked ? 'surface' : 'on.surface',\n        height: checked\n          ? CIRCLE_SIZE_INACTIVE_CHECKED\n          : CIRCLE_SIZE_INACTIVE_UNCHECKED,\n        width: checked\n          ? CIRCLE_SIZE_INACTIVE_CHECKED\n          : CIRCLE_SIZE_INACTIVE_UNCHECKED,\n      },\n    }}\n    data-switch-circle=\"\"\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    {...otherProps}\n  />\n);\n"],"file":"styledComponents.js"}
+{"version":3,"sources":["../../../src/Switch/styledComponents.tsx"],"names":["rem","Box","BORDER_WIDTH","TRAIL_WIDTH","TRAIL_HEIGHT","CIRCLE_SIZE_INACTIVE_CHECKED","CIRCLE_SIZE_ACTIVE_CHECKED","CIRCLE_SIZE_INACTIVE_UNCHECKED","CIRCLE_SIZE_ACTIVE_UNCHECKED","SwitchTrail","checked","disabled","otherProps","width","height","borderRadius","borderWidth","borderStyle","backgroundColor","borderColor","opacity","THUMB_SIZE","SwitchThumb","transform","WebkitTapHighlightColor","transition","SwitchCircle","position","boxSizing","pointerEvents","zIndex","top","left"],"mappings":"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","sourcesContent":["import { rem } from 'polished';\n\nimport { Box } from '../Box';\n\nconst BORDER_WIDTH = 2;\nconst TRAIL_WIDTH = 52;\nconst TRAIL_HEIGHT = 32;\nconst CIRCLE_SIZE_INACTIVE_CHECKED = 24;\nconst CIRCLE_SIZE_ACTIVE_CHECKED = 28;\nconst CIRCLE_SIZE_INACTIVE_UNCHECKED = 16;\nconst CIRCLE_SIZE_ACTIVE_UNCHECKED = 28;\n\nexport const SwitchTrail = ({\n  checked = false,\n  disabled = false,\n  ...otherProps\n}) => (\n  <Box\n    __css={{\n      width: rem(TRAIL_WIDTH),\n      height: rem(TRAIL_HEIGHT),\n      borderRadius: rem(TRAIL_HEIGHT / 2),\n      borderWidth: rem(BORDER_WIDTH),\n      borderStyle: 'solid',\n      backgroundColor: checked ? 'primary' : 'surface-variant',\n      borderColor: checked ? 'primary' : 'outline',\n      ...(disabled && {\n        opacity: 0.12,\n        backgroundColor: checked ? 'on.surface' : 'surface-variant',\n        borderColor: 'on.surface',\n      }),\n    }}\n    {...otherProps}\n  />\n);\n\nconst THUMB_SIZE = 40;\nexport const SwitchThumb = ({ checked = false, ...otherProps }) => (\n  <Box\n    position=\"absolute\"\n    width={rem(THUMB_SIZE)}\n    height={rem(THUMB_SIZE)}\n    borderRadius=\"full\"\n    left={'50%'}\n    top={'50%'}\n    __css={{\n      transform: `translateX(calc(-50% ${checked ? '+' : '-'} ${rem(\n        (TRAIL_WIDTH - CIRCLE_SIZE_INACTIVE_CHECKED - BORDER_WIDTH * 4) / 2\n      )})) translateY(-50%)`,\n      WebkitTapHighlightColor: 'transparent',\n      transition:\n        'background-color 90ms cubic-bezier(.4,0,.2,1),border-color 90ms cubic-bezier(.4,0,.2,1),transform 90ms cubic-bezier(.4,0,.2,1),height 90ms cubic-bezier(.4,0,.2,1),width 90ms cubic-bezier(.4,0,.2,1)',\n      '& > input': {\n        width: THUMB_SIZE,\n        height: THUMB_SIZE,\n      },\n    }}\n    {...otherProps}\n  />\n);\n\nexport const SwitchCircle = ({ checked = false, ...otherProps }) => (\n  <Box\n    __css={{\n      position: 'absolute',\n      width: checked\n        ? rem(CIRCLE_SIZE_INACTIVE_CHECKED)\n        : rem(CIRCLE_SIZE_INACTIVE_UNCHECKED),\n      height: checked\n        ? rem(CIRCLE_SIZE_INACTIVE_CHECKED)\n        : rem(CIRCLE_SIZE_INACTIVE_UNCHECKED),\n      boxSizing: 'border-box',\n      borderRadius: 'full',\n      pointerEvents: 'none',\n      zIndex: 1,\n      backgroundColor: checked ? 'on.primary' : 'outline',\n      top: '50%',\n      left: '50%',\n      transform: 'translate(-50%, -50%)',\n      transition: 'inherit',\n      '[data-switch-thumb=\"\"]:active ~ &, [data-switch-thumb=\"\"]:focus-visible ~ &, [data-switch-thumb=\"\"]:hover ~ &':\n        {\n          backgroundColor: checked ? 'primary-container' : 'on.surface-variant',\n        },\n      '[data-switch-thumb=\"\"]:active ~ &, [data-switch-thumb=\"\"]:focus-visible ~ &':\n        {\n          height: checked\n            ? CIRCLE_SIZE_ACTIVE_CHECKED\n            : CIRCLE_SIZE_ACTIVE_UNCHECKED,\n          width: checked\n            ? CIRCLE_SIZE_ACTIVE_CHECKED\n            : CIRCLE_SIZE_ACTIVE_UNCHECKED,\n        },\n      '[data-switch-thumb=\"\"]:disabled ~ &': {\n        opacity: checked ? 1 : 0.38,\n        backgroundColor: checked ? 'surface' : 'on.surface',\n        height: checked\n          ? CIRCLE_SIZE_INACTIVE_CHECKED\n          : CIRCLE_SIZE_INACTIVE_UNCHECKED,\n        width: checked\n          ? CIRCLE_SIZE_INACTIVE_CHECKED\n          : CIRCLE_SIZE_INACTIVE_UNCHECKED,\n      },\n    }}\n    data-switch-circle=\"\"\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    {...otherProps}\n  />\n);\n"],"file":"styledComponents.js"}

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

@@ -1,5 +1,5 @@
-import type * as React from 'react';
-import { TabProps as TabPropsCore } from '@basic-ui/core';
-import { RippleBoxProps } from '../Ripple';
+import * as React from 'react';
+import type { TabProps as TabPropsCore } from '@basic-ui/core';
+import type { RippleBoxProps } from '../Ripple';
 export declare type TabProps = TabPropsCore & RippleBoxProps<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>;
-export declare const Tab: React.ForwardRefExoticComponent<Pick<TabProps, "form" | "p" | "slot" | "style" | "title" | "bottom" | "top" | "hidden" | "center" | "left" | "right" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "size" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "color" | "bg" | "backgroundColor" | "opacity" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "order" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "gridGap" | "gridColumnGap" | "gridRowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "background" | "backgroundImage" | "backgroundSize" | "backgroundPosition" | "backgroundRepeat" | "position" | "zIndex" | "boxShadow" | "textShadow" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "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" | "pressedOpacity" | "rippleColor" | "rippleEnabled" | "baseOpacity" | "hoverOpacity" | "focusOpacity" | "innerAs"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const Tab: React.ForwardRefExoticComponent<Pick<TabProps, "children" | "form" | "p" | "slot" | "style" | "title" | "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" | "boxShadow" | "color" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "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" | "zIndex" | "background" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "gridColumnGap" | "gridGap" | "gridRowGap" | "value" | "hidden" | "center" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "size" | "bg" | "borderX" | "borderY" | "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" | "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" | "name" | "type" | "disabled" | "rippleColor" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "baseOpacity" | "hoverOpacity" | "focusOpacity" | "pressedOpacity" | "rippleEnabled"> & React.RefAttributes<HTMLButtonElement>>;

package/build/esm/Tab/Tab.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import { forwardRef } from 'react';
+import * as React from 'react';
 import { Tab as TabCore } from '@basic-ui/core';
 import { RippleBox } from '../Ripple';
 import { alpha } from '../color';
@@ -10,20 +11,18 @@ import { TabIndicator } from '../TabIndicator';
 import { useTabListContext } from './context';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const TabInner = /*#__PURE__*/forwardRef(function Tab(props, forwardedRef) {
-  const {
-    innerAs,
-    selected,
-    children,
-    disabled
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose(props, ["innerAs", "selected", "children", "disabled"]);
+var TabInner = /*#__PURE__*/forwardRef(function Tab(props, forwardedRef) {
+  var innerAs = props.innerAs,
+      selected = props.selected,
+      children = props.children,
+      disabled = props.disabled,
+      otherProps = _objectWithoutProperties(props, ["innerAs", "selected", "children", "disabled"]);
+
+  var _useTabListContext = useTabListContext(),
+      textColor = _useTabListContext.textColor,
+      indicatorColor = _useTabListContext.indicatorColor,
+      selectedTextColor = _useTabListContext.selectedTextColor;
 
-  const {
-    textColor,
-    indicatorColor,
-    selectedTextColor
-  } = useTabListContext();
   return /*#__PURE__*/_jsxs(Box, {
     position: "relative",
     display: "flex",
@@ -62,11 +61,10 @@ const TabInner = /*#__PURE__*/forwardRef(function Tab(props, forwardedRef) {
     })]
   });
 });
-export const Tab = /*#__PURE__*/forwardRef(function Tab(props, forwardedRef) {
-  const {
-    as = 'button'
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose(props, ["as"]);
+export var Tab = /*#__PURE__*/forwardRef(function Tab(props, forwardedRef) {
+  var _props$as = props.as,
+      as = _props$as === void 0 ? 'button' : _props$as,
+      otherProps = _objectWithoutProperties(props, ["as"]);
 
   return /*#__PURE__*/_jsx(TabCore, _extends({
     as: TabInner,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tab/Tab.tsx"],"names":["forwardRef","Tab","TabCore","RippleBox","alpha","Text","Box","TabIndicator","useTabListContext","TabInner","props","forwardedRef","innerAs","selected","children","disabled","otherProps","textColor","indicatorColor","selectedTextColor","px","position","color","height","backgroundColor","border","outline","width","alignItems","as"],"mappings":";;AAAA,SAA+BA,UAA/B,QAAiD,OAAjD;AAEA,SAASC,GAAG,IAAIC,OAAhB,QAAyD,gBAAzD;AACA,SAASC,SAAT,QAA0C,WAA1C;AAEA,SAASC,KAAT,QAAsB,UAAtB;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SAASC,GAAT,QAAoB,QAApB;AACA,SAASC,YAAT,QAA6B,iBAA7B;AACA,SAASC,iBAAT,QAAkC,WAAlC;;;AAQA,MAAMC,QAAQ,gBAAGT,UAAU,CAGzB,SAASC,GAAT,CAAaS,KAAb,EAAoBC,YAApB,EAAkC;AAClC,QAAM;AAAEC,IAAAA,OAAF;AAAWC,IAAAA,QAAX;AAAqBC,IAAAA,QAArB;AAA+BC,IAAAA;AAA/B,MAA2DL,KAAjE;AAAA,QAAkDM,UAAlD,iCAAiEN,KAAjE;;AACA,QAAM;AAAEO,IAAAA,SAAF;AAAaC,IAAAA,cAAb;AAA6BC,IAAAA;AAA7B,MAAmDX,iBAAiB,EAA1E;AAEA,sBACE,MAAC,GAAD;AAAK,IAAA,QAAQ,EAAC,UAAd;AAAyB,IAAA,OAAO,EAAC,MAAjC;AAAwC,IAAA,QAAQ,EAAE,CAAlD;AAAqD,IAAA,aAAa,EAAC,QAAnE;AAAA,4BACE,KAAC,SAAD;AAME,MAAA,EAAE,EAAEI,OANN;AAOE,MAAA,GAAG,EAAED,YAPP;AAQE,MAAA,WAAW,EAAEO,cARf;AASE,MAAA,QAAQ,EAAEH,QATZ;AAUE,MAAA,KAAK,EAAE;AACLK,QAAAA,EAAE,EAAE,CADC;AAELC,QAAAA,QAAQ,EAAE,UAFL;AAGLC,QAAAA,KAAK,EAAET,QAAQ,GACXM,iBAAiB,IAAID,cADV,GAEXd,KAAK,CAACa,SAAD,EAAYF,QAAQ,GAAG,IAAH,GAAU,GAA9B,CALJ;AAMLQ,QAAAA,MAAM,QAND;AAOLC,QAAAA,eAAe,EAAE,aAPZ;AAQLC,QAAAA,MAAM,EAAE,MARH;AASL,kBAAU;AACRC,UAAAA,OAAO,EAAE;AADD,SATL;AAYLC,QAAAA,KAAK,EAAE,MAZF;AAaLC,QAAAA,UAAU,EAAE;AAbP;AAVT,OAyBMZ,UAzBN;AAAA,6BA2BE,KAAC,IAAD;AACE,QAAA,EAAE,EAAC,MADL;AAEE,QAAA,OAAO,EAAC,QAFV;AAGE,QAAA,KAAK,EAAC,SAHR;AAIE,QAAA,MAAM,EAAC,MAJT;AAKE,QAAA,SAAS,EAAC,QALZ;AAAA,kBAOGF;AAPH;AA3BF,OADF,eAsCE,KAAC,YAAD;AAAc,MAAA,QAAQ,EAAED,QAAxB;AAAkC,MAAA,KAAK,EAAEK;AAAzC,MAtCF;AAAA,IADF;AA0CD,CAjD0B,CAA3B;AAmDA,OAAO,MAAMjB,GAAG,gBAAGD,UAAU,CAA8B,SAASC,GAAT,CACzDS,KADyD,EAEzDC,YAFyD,EAGzD;AACA,QAAM;AAAEkB,IAAAA,EAAE,GAAG;AAAP,MAAmCnB,KAAzC;AAAA,QAA0BM,UAA1B,iCAAyCN,KAAzC;;AAEA,sBACE,KAAC,OAAD;AAAS,IAAA,EAAE,EAAED,QAAb;AAAuB,IAAA,OAAO,EAAEoB,EAAhC;AAAoC,IAAA,GAAG,EAAElB;AAAzC,KAA2DK,UAA3D,EADF;AAGD,CAT4B,CAAtB","sourcesContent":["import { ButtonHTMLAttributes, forwardRef } from 'react';\nimport type * as React from 'react';\nimport { Tab as TabCore, TabProps as TabPropsCore } from '@basic-ui/core';\nimport { RippleBox, RippleBoxProps } from '../Ripple';\nimport { rem } from 'polished';\nimport { alpha } from '../color';\nimport { Text } from '../Text';\nimport { Box } from '../Box';\nimport { TabIndicator } from '../TabIndicator';\nimport { useTabListContext } from './context';\n\nexport type TabProps = TabPropsCore &\n  RippleBoxProps<\n    HTMLButtonElement,\n    React.ButtonHTMLAttributes<HTMLButtonElement>\n  >;\n\nconst TabInner = forwardRef<\n  HTMLButtonElement,\n  TabProps & { selected?: boolean }\n>(function Tab(props, forwardedRef) {\n  const { innerAs, selected, children, disabled, ...otherProps } = props;\n  const { textColor, indicatorColor, selectedTextColor } = useTabListContext();\n\n  return (\n    <Box position=\"relative\" display=\"flex\" flexGrow={1} flexDirection=\"column\">\n      <RippleBox<\n        RippleBoxProps<\n          HTMLButtonElement,\n          ButtonHTMLAttributes<HTMLButtonElement>\n        >\n      >\n        as={innerAs}\n        ref={forwardedRef}\n        rippleColor={indicatorColor}\n        disabled={disabled}\n        __css={{\n          px: 3,\n          position: 'relative',\n          color: selected\n            ? selectedTextColor || indicatorColor\n            : alpha(textColor, disabled ? 0.37 : 0.7),\n          height: rem(48),\n          backgroundColor: 'transparent',\n          border: 'none',\n          ':focus': {\n            outline: 'none',\n          },\n          width: '100%',\n          alignItems: 'center',\n        }}\n        {...otherProps}\n      >\n        <Text\n          as=\"span\"\n          variant=\"button\"\n          color=\"inherit\"\n          height=\"100%\"\n          textAlign=\"center\"\n        >\n          {children}\n        </Text>\n      </RippleBox>\n      <TabIndicator selected={selected} color={indicatorColor} />\n    </Box>\n  );\n});\n\nexport const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(\n  props,\n  forwardedRef\n) {\n  const { as = 'button', ...otherProps } = props;\n\n  return (\n    <TabCore as={TabInner} innerAs={as} ref={forwardedRef} {...otherProps} />\n  );\n});\n"],"file":"Tab.js"}
+{"version":3,"sources":["../../../src/Tab/Tab.tsx"],"names":["forwardRef","React","Tab","TabCore","RippleBox","alpha","Text","Box","TabIndicator","useTabListContext","TabInner","props","forwardedRef","innerAs","selected","children","disabled","otherProps","textColor","indicatorColor","selectedTextColor","px","position","color","height","backgroundColor","border","outline","width","alignItems","as"],"mappings":";;AACA,SAASA,UAAT,QAA2B,OAA3B;AACA,OAAO,KAAKC,KAAZ,MAAuB,OAAvB;AAEA,SAASC,GAAG,IAAIC,OAAhB,QAA+B,gBAA/B;AAIA,SAASC,SAAT,QAA0B,WAA1B;AACA,SAASC,KAAT,QAAsB,UAAtB;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SAASC,GAAT,QAAoB,QAApB;AACA,SAASC,YAAT,QAA6B,iBAA7B;AACA,SAASC,iBAAT,QAAkC,WAAlC;;;AAQA,IAAMC,QAAQ,gBAAGV,UAAU,CAGzB,SAASE,GAAT,CAAaS,KAAb,EAAoBC,YAApB,EAAkC;AAAA,MAC1BC,OAD0B,GAC+BF,KAD/B,CAC1BE,OAD0B;AAAA,MACjBC,QADiB,GAC+BH,KAD/B,CACjBG,QADiB;AAAA,MACPC,QADO,GAC+BJ,KAD/B,CACPI,QADO;AAAA,MACGC,QADH,GAC+BL,KAD/B,CACGK,QADH;AAAA,MACgBC,UADhB,4BAC+BN,KAD/B;;AAAA,2BAEuBF,iBAAiB,EAFxC;AAAA,MAE1BS,SAF0B,sBAE1BA,SAF0B;AAAA,MAEfC,cAFe,sBAEfA,cAFe;AAAA,MAECC,iBAFD,sBAECA,iBAFD;;AAIlC,sBACE,MAAC,GAAD;AAAK,IAAA,QAAQ,EAAC,UAAd;AAAyB,IAAA,OAAO,EAAC,MAAjC;AAAwC,IAAA,QAAQ,EAAE,CAAlD;AAAqD,IAAA,aAAa,EAAC,QAAnE;AAAA,4BACE,KAAC,SAAD;AAME,MAAA,EAAE,EAAEP,OANN;AAOE,MAAA,GAAG,EAAED,YAPP;AAQE,MAAA,WAAW,EAAEO,cARf;AASE,MAAA,QAAQ,EAAEH,QATZ;AAUE,MAAA,KAAK,EAAE;AACLK,QAAAA,EAAE,EAAE,CADC;AAELC,QAAAA,QAAQ,EAAE,UAFL;AAGLC,QAAAA,KAAK,EAAET,QAAQ,GACXM,iBAAiB,IAAID,cADV,GAEXd,KAAK,CAACa,SAAD,EAAYF,QAAQ,GAAG,IAAH,GAAU,GAA9B,CALJ;AAMLQ,QAAAA,MAAM,QAND;AAOLC,QAAAA,eAAe,EAAE,aAPZ;AAQLC,QAAAA,MAAM,EAAE,MARH;AASL,kBAAU;AACRC,UAAAA,OAAO,EAAE;AADD,SATL;AAYLC,QAAAA,KAAK,EAAE,MAZF;AAaLC,QAAAA,UAAU,EAAE;AAbP;AAVT,OAyBMZ,UAzBN;AAAA,6BA2BE,KAAC,IAAD;AACE,QAAA,EAAE,EAAC,MADL;AAEE,QAAA,OAAO,EAAC,QAFV;AAGE,QAAA,KAAK,EAAC,SAHR;AAIE,QAAA,MAAM,EAAC,MAJT;AAKE,QAAA,SAAS,EAAC,QALZ;AAAA,kBAOGF;AAPH;AA3BF,OADF,eAsCE,KAAC,YAAD;AAAc,MAAA,QAAQ,EAAED,QAAxB;AAAkC,MAAA,KAAK,EAAEK;AAAzC,MAtCF;AAAA,IADF;AA0CD,CAjD0B,CAA3B;AAmDA,OAAO,IAAMjB,GAAG,gBAAGF,UAAU,CAA8B,SAASE,GAAT,CACzDS,KADyD,EAEzDC,YAFyD,EAGzD;AAAA,kBACyCD,KADzC,CACQmB,EADR;AAAA,MACQA,EADR,0BACa,QADb;AAAA,MAC0Bb,UAD1B,4BACyCN,KADzC;;AAGA,sBACE,KAAC,OAAD;AAAS,IAAA,EAAE,EAAED,QAAb;AAAuB,IAAA,OAAO,EAAEoB,EAAhC;AAAoC,IAAA,GAAG,EAAElB;AAAzC,KAA2DK,UAA3D,EADF;AAGD,CAT4B,CAAtB","sourcesContent":["import type { ButtonHTMLAttributes } from 'react';\nimport { forwardRef } from 'react';\nimport * as React from 'react';\nimport type { TabProps as TabPropsCore } from '@basic-ui/core';\nimport { Tab as TabCore } from '@basic-ui/core';\nimport { rem } from 'polished';\n\nimport type { RippleBoxProps } from '../Ripple';\nimport { RippleBox } from '../Ripple';\nimport { alpha } from '../color';\nimport { Text } from '../Text';\nimport { Box } from '../Box';\nimport { TabIndicator } from '../TabIndicator';\nimport { useTabListContext } from './context';\n\nexport type TabProps = TabPropsCore &\n  RippleBoxProps<\n    HTMLButtonElement,\n    React.ButtonHTMLAttributes<HTMLButtonElement>\n  >;\n\nconst TabInner = forwardRef<\n  HTMLButtonElement,\n  TabProps & { selected?: boolean }\n>(function Tab(props, forwardedRef) {\n  const { innerAs, selected, children, disabled, ...otherProps } = props;\n  const { textColor, indicatorColor, selectedTextColor } = useTabListContext();\n\n  return (\n    <Box position=\"relative\" display=\"flex\" flexGrow={1} flexDirection=\"column\">\n      <RippleBox<\n        RippleBoxProps<\n          HTMLButtonElement,\n          ButtonHTMLAttributes<HTMLButtonElement>\n        >\n      >\n        as={innerAs}\n        ref={forwardedRef}\n        rippleColor={indicatorColor}\n        disabled={disabled}\n        __css={{\n          px: 3,\n          position: 'relative',\n          color: selected\n            ? selectedTextColor || indicatorColor\n            : alpha(textColor, disabled ? 0.37 : 0.7),\n          height: rem(48),\n          backgroundColor: 'transparent',\n          border: 'none',\n          ':focus': {\n            outline: 'none',\n          },\n          width: '100%',\n          alignItems: 'center',\n        }}\n        {...otherProps}\n      >\n        <Text\n          as=\"span\"\n          variant=\"button\"\n          color=\"inherit\"\n          height=\"100%\"\n          textAlign=\"center\"\n        >\n          {children}\n        </Text>\n      </RippleBox>\n      <TabIndicator selected={selected} color={indicatorColor} />\n    </Box>\n  );\n});\n\nexport const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(\n  props,\n  forwardedRef\n) {\n  const { as = 'button', ...otherProps } = props;\n\n  return (\n    <TabCore as={TabInner} innerAs={as} ref={forwardedRef} {...otherProps} />\n  );\n});\n"],"file":"Tab.js"}

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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import { TabListProps as TabListPropsCore } from '@basic-ui/core';
-import { BoxProps } from '../Box';
+import type { TabListProps as TabListPropsCore } from '@basic-ui/core';
+import type { BoxProps } from '../Box';
 export declare type TabListProps = TabListPropsCore & BoxProps & {
     indicatorColor?: string;
     textColor?: string;
     selectedTextColor?: string;
 };
-export declare const TabList: import("react").ForwardRefExoticComponent<Pick<TabListProps, "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" | "boxShadow" | "color" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "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" | "zIndex" | "background" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "gridColumnGap" | "gridGap" | "gridRowGap" | "hidden" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "size" | "bg" | "borderX" | "borderY" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "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" | "vertical" | "innerAs" | "textColor" | "indicatorColor" | "selectedTextColor" | "manualActivation"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TabList: import("react").ForwardRefExoticComponent<Pick<TabListProps, "children" | "p" | "slot" | "style" | "title" | "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" | "boxShadow" | "color" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "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" | "zIndex" | "background" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "gridColumnGap" | "gridGap" | "gridRowGap" | "hidden" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "size" | "bg" | "borderX" | "borderY" | "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" | "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" | "vertical" | "innerAs" | "textColor" | "indicatorColor" | "selectedTextColor" | "manualActivation"> & import("react").RefAttributes<HTMLDivElement>>;

package/build/esm/Tab/TabList.js

@@ -1,16 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 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";
-const TabListInner = /*#__PURE__*/forwardRef(function TabListInner(props, forwardedRef) {
-  const {
-    innerAs
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose(props, ["innerAs"]);
+var TabListInner = /*#__PURE__*/forwardRef(function TabListInner(props, forwardedRef) {
+  var innerAs = props.innerAs,
+      otherProps = _objectWithoutProperties(props, ["innerAs"]);
 
   return /*#__PURE__*/_jsx(Box, _extends({
     as: innerAs,
@@ -22,25 +20,26 @@ const TabListInner = /*#__PURE__*/forwardRef(function TabListInner(props, forwar
     }
   }, otherProps));
 });
-export const TabList = /*#__PURE__*/forwardRef(function TabList(props, forwardedRef) {
-  const {
-    as = 'div',
-    indicatorColor = 'primary',
-    textColor = 'on.surface',
-    selectedTextColor
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose(props, ["as", "indicatorColor", "textColor", "selectedTextColor"]);
+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,
+      otherProps = _objectWithoutProperties(props, ["as", "indicatorColor", "textColor", "selectedTextColor"]);
 
-  const currentIndicator = useRef(null);
+  var currentIndicator = useRef(null);
   return /*#__PURE__*/_jsx(TabListProvider, {
     value: {
-      indicatorColor,
-      textColor,
-      selectedTextColor
+      indicatorColor: indicatorColor,
+      textColor: textColor,
+      selectedTextColor: selectedTextColor
     },
     children: /*#__PURE__*/_jsx(TabIndicatorProvider, {
       value: {
-        currentIndicator
+        currentIndicator: currentIndicator
       },
       children: /*#__PURE__*/_jsx(TabListCore, _extends({
         as: TabListInner,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tab/TabList.tsx"],"names":["forwardRef","useRef","TabList","TabListCore","Box","TabIndicatorProvider","TabListProvider","TabListInner","props","forwardedRef","innerAs","otherProps","minWidth","display","alignItems","as","indicatorColor","textColor","selectedTextColor","currentIndicator"],"mappings":";;AAAA,SAASA,UAAT,EAAqBC,MAArB,QAAmC,OAAnC;AACA,SACEC,OAAO,IAAIC,WADb,QAGO,gBAHP;AAIA,SAASC,GAAT,QAA8B,QAA9B;AAEA,SAASC,oBAAT,QAAqC,iBAArC;AACA,SAASC,eAAT,QAAgC,WAAhC;;AASA,MAAMC,YAAY,gBAAGP,UAAU,CAC7B,SAASO,YAAT,CAAsBC,KAAtB,EAA6BC,YAA7B,EAA2C;AACzC,QAAM;AAAEC,IAAAA;AAAF,MAA6BF,KAAnC;AAAA,QAAoBG,UAApB,iCAAmCH,KAAnC;;AAEA,sBACE,KAAC,GAAD;AACE,IAAA,EAAE,EAAEE,OADN;AAEE,IAAA,GAAG,EAAED,YAFP;AAGE,IAAA,KAAK,EAAE;AAAEG,MAAAA,QAAQ,WAAV;AAAsBC,MAAAA,OAAO,EAAE,MAA/B;AAAuCC,MAAAA,UAAU,EAAE;AAAnD;AAHT,KAIMH,UAJN,EADF;AAQD,CAZ4B,CAA/B;AAeA,OAAO,MAAMT,OAAO,gBAAGF,UAAU,CAC/B,SAASE,OAAT,CAAiBM,KAAjB,EAAwBC,YAAxB,EAAsC;AACpC,QAAM;AACJM,IAAAA,EAAE,GAAG,KADD;AAEJC,IAAAA,cAAc,GAAG,SAFb;AAGJC,IAAAA,SAAS,GAAG,YAHR;AAIJC,IAAAA;AAJI,MAMFV,KANJ;AAAA,QAKKG,UALL,iCAMIH,KANJ;;AAOA,QAAMW,gBAAgB,GAAGlB,MAAM,CAAkB,IAAlB,CAA/B;AAEA,sBACE,KAAC,eAAD;AAAiB,IAAA,KAAK,EAAE;AAAEe,MAAAA,cAAF;AAAkBC,MAAAA,SAAlB;AAA6BC,MAAAA;AAA7B,KAAxB;AAAA,2BACE,KAAC,oBAAD;AAAsB,MAAA,KAAK,EAAE;AAAEC,QAAAA;AAAF,OAA7B;AAAA,6BACE,KAAC,WAAD;AACE,QAAA,EAAE,EAAEZ,YADN;AAEE,QAAA,OAAO,EAAEQ,EAFX;AAGE,QAAA,GAAG,EAAEN;AAHP,SAIME,UAJN;AADF;AADF,IADF;AAYD,CAvB8B,CAA1B","sourcesContent":["import { forwardRef, useRef } from 'react';\nimport {\n  TabList as TabListCore,\n  TabListProps as TabListPropsCore,\n} from '@basic-ui/core';\nimport { Box, BoxProps } from '../Box';\nimport { rem } from 'polished';\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  };\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      ...otherProps\n    } = props;\n    const currentIndicator = useRef<HTMLSpanElement>(null);\n\n    return (\n      <TabListProvider value={{ indicatorColor, textColor, selectedTextColor }}>\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"],"file":"TabList.js"}
+{"version":3,"sources":["../../../src/Tab/TabList.tsx"],"names":["forwardRef","useRef","TabList","TabListCore","Box","TabIndicatorProvider","TabListProvider","TabListInner","props","forwardedRef","innerAs","otherProps","minWidth","display","alignItems","as","indicatorColor","textColor","selectedTextColor","currentIndicator"],"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;;AASA,IAAMC,YAAY,gBAAGP,UAAU,CAC7B,SAASO,YAAT,CAAsBC,KAAtB,EAA6BC,YAA7B,EAA2C;AAAA,MACjCC,OADiC,GACNF,KADM,CACjCE,OADiC;AAAA,MACrBC,UADqB,4BACNH,KADM;;AAGzC,sBACE,KAAC,GAAD;AACE,IAAA,EAAE,EAAEE,OADN;AAEE,IAAA,GAAG,EAAED,YAFP;AAGE,IAAA,KAAK,EAAE;AAAEG,MAAAA,QAAQ,WAAV;AAAsBC,MAAAA,OAAO,EAAE,MAA/B;AAAuCC,MAAAA,UAAU,EAAE;AAAnD;AAHT,KAIMH,UAJN,EADF;AAQD,CAZ4B,CAA/B;AAeA,OAAO,IAAMT,OAAO,gBAAGF,UAAU,CAC/B,SAASE,OAAT,CAAiBM,KAAjB,EAAwBC,YAAxB,EAAsC;AAAA,kBAOhCD,KAPgC,CAElCO,EAFkC;AAAA,MAElCA,EAFkC,0BAE7B,KAF6B;AAAA,8BAOhCP,KAPgC,CAGlCQ,cAHkC;AAAA,MAGlCA,cAHkC,sCAGjB,SAHiB;AAAA,yBAOhCR,KAPgC,CAIlCS,SAJkC;AAAA,MAIlCA,SAJkC,iCAItB,YAJsB;AAAA,MAKlCC,iBALkC,GAOhCV,KAPgC,CAKlCU,iBALkC;AAAA,MAM/BP,UAN+B,4BAOhCH,KAPgC;;AAQpC,MAAMW,gBAAgB,GAAGlB,MAAM,CAAkB,IAAlB,CAA/B;AAEA,sBACE,KAAC,eAAD;AAAiB,IAAA,KAAK,EAAE;AAAEe,MAAAA,cAAc,EAAdA,cAAF;AAAkBC,MAAAA,SAAS,EAATA,SAAlB;AAA6BC,MAAAA,iBAAiB,EAAjBA;AAA7B,KAAxB;AAAA,2BACE,KAAC,oBAAD;AAAsB,MAAA,KAAK,EAAE;AAAEC,QAAAA,gBAAgB,EAAhBA;AAAF,OAA7B;AAAA,6BACE,KAAC,WAAD;AACE,QAAA,EAAE,EAAEZ,YADN;AAEE,QAAA,OAAO,EAAEQ,EAFX;AAGE,QAAA,GAAG,EAAEN;AAHP,SAIME,UAJN;AADF;AADF,IADF;AAYD,CAvB8B,CAA1B","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  };\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      ...otherProps\n    } = props;\n    const currentIndicator = useRef<HTMLSpanElement>(null);\n\n    return (\n      <TabListProvider value={{ indicatorColor, textColor, selectedTextColor }}>\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"],"file":"TabList.js"}