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

package/build/esm/Switch/Switch.js

@@ -1,8 +1,11 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import { forwardRef } from 'react';
-import * as React from 'react';
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+var _excluded = ["as", "disabled", "checked", "onChange", "size", "__css", "icon"],
+    _excluded2 = ["as", "icon", "disabled", "children"];
+import { cloneElement, forwardRef } from 'react';
 import { CheckBox as _CheckBoxCore } from '@basic-ui/core';
+import { rem } from 'polished';
 import { RippleBox } from '../Ripple';
 import { Box } from '../Box';
 import { useTheme } from '../theme';
@@ -11,79 +14,98 @@ import { SwitchTrail, SwitchThumb, SwitchCircle } from './styledComponents';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var CheckBoxCore = _CheckBoxCore;
+
+function getSizeCssVariables(size, hasIcon) {
+  var _extends2, _ref;
+
+  var multiplier = size === 'small' ? 0.75 : 1;
+  var BORDER_WIDTH = 2;
+  var TRAIL_WIDTH = 52 * multiplier;
+  var TRAIL_HEIGHT = 32 * multiplier;
+  return _extends((_extends2 = {}, _defineProperty(_extends2, '--switch-border-width', rem(BORDER_WIDTH)), _defineProperty(_extends2, '--switch-trail-width', rem(TRAIL_WIDTH)), _defineProperty(_extends2, '--switch-trail-height', rem(TRAIL_HEIGHT)), _defineProperty(_extends2, '--switch-icon-size', rem(TRAIL_HEIGHT / 2)), _defineProperty(_extends2, '--switch-state-layer-size', rem(40 * multiplier)), _defineProperty(_extends2, '--switch-thumb-size-checked-inactive', rem(TRAIL_HEIGHT - BORDER_WIDTH * 4)), _defineProperty(_extends2, '--switch-thumb-size-checked-active', rem(TRAIL_HEIGHT - BORDER_WIDTH * 2)), _defineProperty(_extends2, '--switch-thumb-size-unchecked-inactive', rem(TRAIL_HEIGHT / 2)), _defineProperty(_extends2, '--switch-thumb-size-unchecked-active', rem(TRAIL_HEIGHT - BORDER_WIDTH * 2)), _extends2), hasIcon && (_ref = {}, _defineProperty(_ref, '--switch-thumb-size-unchecked-inactive', 'var(--switch-thumb-size-checked-inactive)'), _defineProperty(_ref, '--switch-thumb-size-unchecked-active', 'var(--switch-thumb-size-checked-active)'), _ref));
+}
+
 var SwitchInner = /*#__PURE__*/forwardRef(function SwitchInner(props, forwardedRef) {
+  var _cloneElement;
+
   var _props$as = props.as,
       Comp = _props$as === void 0 ? 'input' : _props$as,
       disabled = props.disabled,
       checked = props.checked,
       onChange = props.onChange,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'default' : _props$size,
       __css = props.__css,
-      otherProps = _objectWithoutProperties(props, ["as", "disabled", "checked", "onChange", "__css"]);
+      icon = props.icon,
+      otherProps = _objectWithoutProperties(props, _excluded);
 
   var color = checked ? 'primary' : 'on.surface';
   var theme = useTheme();
-  return /*#__PURE__*/_jsx(Box, {
-    p: 2,
+  return /*#__PURE__*/_jsxs(Box, {
     display: "inline-block",
+    position: "relative",
     minWidth: "auto",
-    children: /*#__PURE__*/_jsxs(Box, {
-      position: "relative",
-      children: [/*#__PURE__*/_jsx(SwitchTrail, {
+    sx: getSizeCssVariables(size, Boolean(icon)),
+    children: [/*#__PURE__*/_jsx(SwitchTrail, {
+      checked: checked,
+      disabled: disabled
+    }), /*#__PURE__*/_jsxs(SwitchThumb, {
+      checked: checked,
+      children: [/*#__PURE__*/_jsx(RippleBox, _extends(_extends({
+        as: Comp,
+        role: "switch",
+        type: "checkbox",
         checked: checked,
-        disabled: disabled
-      }), /*#__PURE__*/_jsxs(SwitchThumb, {
+        onChange: onChange,
+        theme: theme,
+        ref: forwardedRef,
+        "aria-checked": checked ? 'true' : 'false',
+        rippleColor: color,
+        baseOpacity: 0,
+        hoverOpacity: 0.04,
+        focusOpacity: 0.12,
+        center: true,
+        disabled: disabled,
+        "data-switch-thumb": ""
+      }, otherProps), {}, {
+        __css: _extends({
+          top: '50%',
+          left: '50%',
+          backgroundColor: 'transparent',
+          transform: 'translate(-50%, -50%)',
+          width: '100%',
+          height: '100%',
+          appearance: 'none',
+          ':focus': {
+            outline: 'none'
+          },
+          border: 'none',
+          borderRadius: 'full',
+          zIndex: 1,
+          position: 'absolute'
+        }, __css)
+      })), /*#__PURE__*/_jsx(SwitchCircle, {
         checked: checked,
-        children: [/*#__PURE__*/_jsx(RippleBox, _extends({
-          as: Comp,
-          role: "switch",
-          type: "checkbox",
-          checked: checked,
-          onChange: onChange,
-          theme: theme,
-          ref: forwardedRef,
-          "aria-checked": checked ? 'true' : 'false',
-          rippleColor: color,
-          baseOpacity: 0,
-          hoverOpacity: 0.04,
-          focusOpacity: 0.12,
-          center: true,
-          disabled: disabled,
-          "data-switch-thumb": ""
-        }, otherProps, {
-          __css: _extends({
-            top: '50%',
-            left: '50%',
-            backgroundColor: 'transparent',
-            transform: 'translate(-50%, -50%)',
-            width: '100%',
-            height: '100%',
-            appearance: 'none',
-            ':focus': {
-              outline: 'none'
-            },
-            border: 'none',
-            borderRadius: 'full',
-            zIndex: 1,
-            position: 'absolute'
-          }, __css)
-        })), /*#__PURE__*/_jsx(SwitchCircle, {
+        children: icon ? /*#__PURE__*/cloneElement(icon, (_cloneElement = {
           checked: checked
-        })]
+        }, _defineProperty(_cloneElement, 'data-checkbox-icon', ''), _defineProperty(_cloneElement, "disabled", disabled), _cloneElement)) : null
       })]
-    })
+    })]
   });
 });
 export var Switch = /*#__PURE__*/forwardRef(function Switch(props, forwardedRef) {
   var _props$as2 = props.as,
       as = _props$as2 === void 0 ? 'input' : _props$as2,
+      icon = props.icon,
       disabled = props.disabled,
       children = props.children,
-      otherProps = _objectWithoutProperties(props, ["as", "disabled", "children"]);
+      otherProps = _objectWithoutProperties(props, _excluded2);
 
   var inner = /*#__PURE__*/_jsx(CheckBoxCore, _extends({
     as: SwitchInner,
     innerAs: as,
     ref: forwardedRef,
+    icon: icon,
     disabled: disabled
   }, otherProps));
 

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

@@ -1 +1 @@
-{"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\nexport interface 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,"file":"Switch.js","names":["cloneElement","forwardRef","CheckBox","_CheckBoxCore","rem","RippleBox","Box","useTheme","SelectionControlLabel","SelectionControlText","SwitchTrail","SwitchThumb","SwitchCircle","CheckBoxCore","getSizeCssVariables","size","hasIcon","multiplier","BORDER_WIDTH","TRAIL_WIDTH","TRAIL_HEIGHT","SwitchInner","props","forwardedRef","as","Comp","disabled","checked","onChange","__css","icon","otherProps","color","theme","Boolean","top","left","backgroundColor","transform","width","height","appearance","outline","border","borderRadius","zIndex","position","Switch","children","inner"],"sources":["../../../src/Switch/Switch.tsx"],"sourcesContent":["import type { ElementType, FC, InputHTMLAttributes, ReactElement } from 'react';\r\nimport { cloneElement, forwardRef } from 'react';\r\nimport { CheckBox as _CheckBoxCore } from '@basic-ui/core';\r\nimport { rem } from 'polished';\r\n\r\nimport type { RippleBoxProps } from '../Ripple';\r\nimport { RippleBox } from '../Ripple';\r\nimport type { BoxProps } from '../Box';\r\nimport { Box } from '../Box';\r\nimport { useTheme } from '../theme';\r\nimport {\r\n  SelectionControlLabel,\r\n  SelectionControlText,\r\n} from '../SelectionControl';\r\nimport { SwitchTrail, SwitchThumb, SwitchCircle } from './styledComponents';\r\n\r\nconst CheckBoxCore: FC<\r\n  SwitchProps & {\r\n    innerAs?: ElementType<any>;\r\n  }\r\n> = _CheckBoxCore as any;\r\n\r\nexport interface SwitchProps\r\n  extends BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>> {\r\n  as?: ElementType<any>;\r\n  checked?: boolean;\r\n  disabled?: boolean;\r\n  size?: 'small' | 'default';\r\n  icon?: ReactElement<{ checked?: boolean; disabled?: boolean }>;\r\n}\r\n\r\nfunction getSizeCssVariables(size: 'small' | 'default', hasIcon: boolean) {\r\n  const multiplier = size === 'small' ? 0.75 : 1;\r\n  const BORDER_WIDTH = 2;\r\n  const TRAIL_WIDTH = 52 * multiplier;\r\n  const TRAIL_HEIGHT = 32 * multiplier;\r\n  return {\r\n    ['--switch-border-width']: rem(BORDER_WIDTH),\r\n    ['--switch-trail-width']: rem(TRAIL_WIDTH),\r\n    ['--switch-trail-height']: rem(TRAIL_HEIGHT),\r\n    ['--switch-icon-size']: rem(TRAIL_HEIGHT / 2),\r\n    ['--switch-state-layer-size']: rem(40 * multiplier),\r\n    ['--switch-thumb-size-checked-inactive']: rem(\r\n      TRAIL_HEIGHT - BORDER_WIDTH * 4\r\n    ),\r\n    ['--switch-thumb-size-checked-active']: rem(\r\n      TRAIL_HEIGHT - BORDER_WIDTH * 2\r\n    ),\r\n    ['--switch-thumb-size-unchecked-inactive']: rem(TRAIL_HEIGHT / 2),\r\n    ['--switch-thumb-size-unchecked-active']: rem(\r\n      TRAIL_HEIGHT - BORDER_WIDTH * 2\r\n    ),\r\n    ...(hasIcon && {\r\n      ['--switch-thumb-size-unchecked-inactive']:\r\n        'var(--switch-thumb-size-checked-inactive)',\r\n      ['--switch-thumb-size-unchecked-active']:\r\n        'var(--switch-thumb-size-checked-active)',\r\n    }),\r\n  };\r\n}\r\n\r\nconst SwitchInner = forwardRef<HTMLInputElement, SwitchProps>(\r\n  function SwitchInner(props, forwardedRef) {\r\n    const {\r\n      as: Comp = 'input',\r\n      disabled,\r\n      checked,\r\n      onChange,\r\n      size = 'default',\r\n      __css,\r\n      icon,\r\n      ...otherProps\r\n    } = props;\r\n    const color = checked ? 'primary' : 'on.surface';\r\n    const theme = useTheme();\r\n\r\n    return (\r\n      <Box\r\n        display=\"inline-block\"\r\n        position=\"relative\"\r\n        minWidth=\"auto\"\r\n        sx={getSizeCssVariables(size, Boolean(icon))}\r\n      >\r\n        <SwitchTrail checked={checked} disabled={disabled} />\r\n        <SwitchThumb checked={checked}>\r\n          <RippleBox<\r\n            RippleBoxProps<\r\n              HTMLInputElement,\r\n              InputHTMLAttributes<HTMLInputElement>\r\n            >\r\n          >\r\n            as={Comp}\r\n            role=\"switch\"\r\n            type=\"checkbox\"\r\n            checked={checked}\r\n            onChange={onChange}\r\n            theme={theme}\r\n            ref={forwardedRef}\r\n            aria-checked={checked ? 'true' : 'false'}\r\n            rippleColor={color}\r\n            baseOpacity={0}\r\n            hoverOpacity={0.04}\r\n            focusOpacity={0.12}\r\n            center={true}\r\n            disabled={disabled}\r\n            data-switch-thumb=\"\"\r\n            {...otherProps}\r\n            __css={{\r\n              top: '50%',\r\n              left: '50%',\r\n              backgroundColor: 'transparent',\r\n              transform: 'translate(-50%, -50%)',\r\n              width: '100%',\r\n              height: '100%',\r\n              appearance: 'none',\r\n              ':focus': {\r\n                outline: 'none',\r\n              },\r\n              border: 'none',\r\n              borderRadius: 'full',\r\n              zIndex: 1,\r\n              position: 'absolute',\r\n              ...__css,\r\n            }}\r\n          />\r\n          <SwitchCircle checked={checked}>\r\n            {icon\r\n              ? cloneElement(icon, {\r\n                  checked,\r\n                  ['data-checkbox-icon' as any]: '',\r\n                  disabled,\r\n                })\r\n              : null}\r\n          </SwitchCircle>\r\n        </SwitchThumb>\r\n      </Box>\r\n    );\r\n  }\r\n);\r\n\r\nexport const Switch = forwardRef<HTMLInputElement, SwitchProps>(function Switch(\r\n  props,\r\n  forwardedRef\r\n) {\r\n  const { as = 'input', icon, disabled, children, ...otherProps } = props;\r\n\r\n  const inner = (\r\n    <CheckBoxCore\r\n      as={SwitchInner}\r\n      innerAs={as}\r\n      ref={forwardedRef}\r\n      icon={icon}\r\n      disabled={disabled}\r\n      {...otherProps}\r\n    />\r\n  );\r\n\r\n  if (!children) {\r\n    return inner;\r\n  }\r\n\r\n  return (\r\n    <SelectionControlLabel>\r\n      {inner}\r\n      <SelectionControlText disabled={disabled}>\r\n        {children}\r\n      </SelectionControlText>\r\n    </SelectionControlLabel>\r\n  );\r\n});\r\n"],"mappings":"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"}

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

@@ -1 +1 @@
-export * from './Switch';
+export * from './Switch';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Switch/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd","sourcesContent":["export * from './Switch';\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/Switch/index.ts"],"sourcesContent":["export * from './Switch';\r\n"],"mappings":"AAAA,cAAc,UAAd"}

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

@@ -1,13 +1,13 @@
-export declare const SwitchTrail: ({ checked, disabled, ...otherProps }: {
-    [x: string]: any;
-    checked?: boolean | undefined;
-    disabled?: boolean | undefined;
-}) => JSX.Element;
-export declare const SwitchThumb: ({ checked, ...otherProps }: {
-    [x: string]: any;
-    checked?: boolean | undefined;
-}) => JSX.Element;
-export declare const SwitchCircle: ({ checked, ...otherProps }: {
-    [x: string]: any;
-    checked?: boolean | undefined;
-}) => JSX.Element;
+export declare const SwitchTrail: ({ checked, disabled, ...otherProps }: {
+    [x: string]: any;
+    checked?: boolean | undefined;
+    disabled?: boolean | undefined;
+}) => JSX.Element;
+export declare const SwitchThumb: ({ checked, ...otherProps }: {
+    [x: string]: any;
+    checked?: boolean | undefined;
+}) => JSX.Element;
+export declare const SwitchCircle: ({ checked, ...otherProps }: {
+    [x: string]: any;
+    checked?: boolean | undefined;
+}) => JSX.Element;

package/build/esm/Switch/styledComponents.js

@@ -1,28 +1,32 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import { rem } from 'polished';
+var _excluded = ["checked", "disabled"],
+    _excluded2 = ["checked"],
+    _excluded3 = ["checked"];
 import { Box } from '../Box';
+import { EASING_STANDARD } from '../motion';
 import { jsx as _jsx } from "react/jsx-runtime";
-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;
+var BORDER_WIDTH = 'var(--switch-border-width)';
+var TRAIL_WIDTH = 'var(--switch-trail-width)';
+var TRAIL_HEIGHT = 'var(--switch-trail-height)';
+var STATE_LAYER_SIZE = 'var(--switch-state-layer-size)';
+var CIRCLE_SIZE_INACTIVE_CHECKED = 'var(--switch-thumb-size-checked-inactive)';
+var CIRCLE_SIZE_ACTIVE_CHECKED = 'var(--switch-thumb-size-checked-active)';
+var CIRCLE_SIZE_INACTIVE_UNCHECKED = 'var(--switch-thumb-size-unchecked-inactive)';
+var CIRCLE_SIZE_ACTIVE_UNCHECKED = 'var(--switch-thumb-size-unchecked-active)';
 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"]);
+      otherProps = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/_jsx(Box, _extends({
     __css: _extends({
-      width: rem(TRAIL_WIDTH),
-      height: rem(TRAIL_HEIGHT),
-      borderRadius: rem(TRAIL_HEIGHT / 2),
-      borderWidth: rem(BORDER_WIDTH),
+      width: TRAIL_WIDTH,
+      height: TRAIL_HEIGHT,
+      borderRadius: 'full',
+      borderWidth: BORDER_WIDTH,
       borderStyle: 'solid',
       backgroundColor: checked ? 'primary' : 'surface-variant',
       borderColor: checked ? 'primary' : 'outline'
@@ -33,26 +37,25 @@ export var SwitchTrail = function SwitchTrail(_ref) {
     })
   }, otherProps));
 };
-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"]);
+      otherProps = _objectWithoutProperties(_ref2, _excluded2);
 
   return /*#__PURE__*/_jsx(Box, _extends({
     position: "absolute",
-    width: rem(THUMB_SIZE),
-    height: rem(THUMB_SIZE),
+    width: STATE_LAYER_SIZE,
+    height: STATE_LAYER_SIZE,
     borderRadius: "full",
     left: '50%',
     top: '50%',
     __css: {
-      transform: "translateX(calc(-50% ".concat(checked ? '+' : '-', " ").concat(rem((TRAIL_WIDTH - CIRCLE_SIZE_INACTIVE_CHECKED - BORDER_WIDTH * 4) / 2), ")) translateY(-50%)"),
+      transform: "translateX(calc(-50% ".concat(checked ? '+' : '-', "\n        (").concat(TRAIL_WIDTH, " - ").concat(CIRCLE_SIZE_INACTIVE_CHECKED, " - ").concat(BORDER_WIDTH, " * 4) / 2\n      )) translateY(-50%)"),
       WebkitTapHighlightColor: 'transparent',
-      transition: '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)',
+      transition: "background-color 90ms ".concat(EASING_STANDARD, ",border-color 90ms ").concat(EASING_STANDARD, ",transform 90ms ").concat(EASING_STANDARD, ",height 90ms ").concat(EASING_STANDARD, ",width 90ms ").concat(EASING_STANDARD),
       '& > input': {
-        width: THUMB_SIZE,
-        height: THUMB_SIZE
+        width: STATE_LAYER_SIZE,
+        height: STATE_LAYER_SIZE
       }
     }
   }, otherProps));
@@ -60,24 +63,29 @@ export var SwitchThumb = function SwitchThumb(_ref2) {
 export var SwitchCircle = function SwitchCircle(_ref3) {
   var _ref3$checked = _ref3.checked,
       checked = _ref3$checked === void 0 ? false : _ref3$checked,
-      otherProps = _objectWithoutProperties(_ref3, ["checked"]);
+      otherProps = _objectWithoutProperties(_ref3, _excluded3);
 
   return /*#__PURE__*/_jsx(Box, _extends({
     __css: {
       position: 'absolute',
-      width: checked ? rem(CIRCLE_SIZE_INACTIVE_CHECKED) : rem(CIRCLE_SIZE_INACTIVE_UNCHECKED),
-      height: checked ? rem(CIRCLE_SIZE_INACTIVE_CHECKED) : rem(CIRCLE_SIZE_INACTIVE_UNCHECKED),
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: checked ? CIRCLE_SIZE_INACTIVE_CHECKED : CIRCLE_SIZE_INACTIVE_UNCHECKED,
+      height: checked ? CIRCLE_SIZE_INACTIVE_CHECKED : CIRCLE_SIZE_INACTIVE_UNCHECKED,
       boxSizing: 'border-box',
       borderRadius: 'full',
       pointerEvents: 'none',
       zIndex: 1,
       backgroundColor: checked ? 'on.primary' : 'outline',
+      color: checked ? 'primary' : 'on.outline',
       top: '50%',
       left: '50%',
       transform: 'translate(-50%, -50%)',
       transition: 'inherit',
       '[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &, [data-switch-thumb=""]:hover ~ &': {
-        backgroundColor: checked ? 'primary-container' : 'on.surface-variant'
+        backgroundColor: checked ? 'primary-container' : 'on.surface-variant',
+        color: checked ? 'on.primary-container' : 'surface-variant'
       },
       '[data-switch-thumb=""]:active ~ &, [data-switch-thumb=""]:focus-visible ~ &': {
         height: checked ? CIRCLE_SIZE_ACTIVE_CHECKED : CIRCLE_SIZE_ACTIVE_UNCHECKED,
@@ -86,6 +94,7 @@ export var SwitchCircle = function SwitchCircle(_ref3) {
       '[data-switch-thumb=""]:disabled ~ &': {
         opacity: checked ? 1 : 0.38,
         backgroundColor: checked ? 'surface' : 'on.surface',
+        color: checked ? 'on.surface' : 'surface',
         height: checked ? CIRCLE_SIZE_INACTIVE_CHECKED : CIRCLE_SIZE_INACTIVE_UNCHECKED,
         width: checked ? CIRCLE_SIZE_INACTIVE_CHECKED : CIRCLE_SIZE_INACTIVE_UNCHECKED
       }

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

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

@@ -1,5 +1,5 @@
-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, "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" | "p" | "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" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "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" | "innerAs" | "key" | "baseOpacity" | "hoverOpacity" | "focusOpacity" | "pressedOpacity" | "rippleColor" | "rippleEnabled"> & React.RefAttributes<HTMLButtonElement>>;
+import type { ButtonHTMLAttributes } from 'react';
+import type { TabProps as TabPropsCore } from '@basic-ui/core';
+import type { RippleBoxProps } from '../Ripple';
+export declare type TabProps = TabPropsCore & RippleBoxProps<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>;
+export declare const Tab: import("react").ForwardRefExoticComponent<Pick<TabProps, "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" | "center" | "form" | "slot" | "style" | "title" | "hidden" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "size" | "borderX" | "borderY" | "gridGap" | "gridColumnGap" | "gridRowGap" | "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" | "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" | "rippleColor" | "pressedOpacity" | "rippleEnabled" | "baseOpacity" | "hoverOpacity" | "focusOpacity" | "mouseFocus" | "innerAs"> & import("react").RefAttributes<HTMLButtonElement>>;

package/build/esm/Tab/Tab.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import { forwardRef } from 'react';
-import * as React from 'react';
+var _excluded = ["innerAs", "selected", "children", "disabled"],
+    _excluded2 = ["as"];
+import { useState, useEffect, useRef, forwardRef } from 'react';
 import { Tab as TabCore } from '@basic-ui/core';
 import { RippleBox } from '../Ripple';
 import { alpha } from '../color';
@@ -16,28 +18,41 @@ var TabInner = /*#__PURE__*/forwardRef(function Tab(props, forwardedRef) {
       selected = props.selected,
       children = props.children,
       disabled = props.disabled,
-      otherProps = _objectWithoutProperties(props, ["innerAs", "selected", "children", "disabled"]);
+      otherProps = _objectWithoutProperties(props, _excluded);
 
   var _useTabListContext = useTabListContext(),
       textColor = _useTabListContext.textColor,
       indicatorColor = _useTabListContext.indicatorColor,
-      selectedTextColor = _useTabListContext.selectedTextColor;
+      selectedTextColor = _useTabListContext.selectedTextColor,
+      variant = _useTabListContext.variant;
 
+  var labelRef = useRef(null);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      mounted = _useState2[0],
+      setMounted = _useState2[1];
+
+  useEffect(function () {
+    setMounted(true);
+  }, []);
   return /*#__PURE__*/_jsxs(Box, {
     position: "relative",
     display: "flex",
     flex: 1,
     flexDirection: "column",
-    children: [/*#__PURE__*/_jsx(RippleBox, _extends({
+    height: "100%",
+    children: [/*#__PURE__*/_jsx(RippleBox, _extends(_extends({
       as: innerAs,
       ref: forwardedRef,
       rippleColor: indicatorColor,
       disabled: disabled,
       __css: {
         px: 3,
-        position: 'relative',
+        py: 0,
         color: selected ? selectedTextColor || indicatorColor : alpha(textColor, disabled ? 0.37 : 0.7),
-        height: "3rem",
+        minHeight: "3rem",
+        height: '100%',
         backgroundColor: 'transparent',
         border: 'none',
         ':focus': {
@@ -46,25 +61,47 @@ var TabInner = /*#__PURE__*/forwardRef(function Tab(props, forwardedRef) {
         width: '100%',
         alignItems: 'center'
       }
-    }, otherProps, {
+    }, otherProps), {}, {
       children: /*#__PURE__*/_jsx(Text, {
         as: "span",
-        variant: "button",
-        color: "inherit",
-        height: "100%",
-        textAlign: "center",
+        variant: "title-small",
+        ref: labelRef,
+        __css: _extends({
+          display: 'inline-flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          color: 'inherit',
+          height: '100%',
+          textAlign: 'center',
+          position: 'relative',
+          flexDirection: 'column'
+        }, variant === 'primary' && selected && !mounted && {
+          '&::before': {
+            content: '""',
+            bg: indicatorColor,
+            position: 'absolute',
+            bottom: 0,
+            zIndex: 1,
+            width: '100%',
+            height: "0.1875rem",
+            borderTopLeftRadius: "0.1875rem",
+            borderTopRightRadius: "0.1875rem"
+          }
+        }),
         children: children
       })
     })), /*#__PURE__*/_jsx(TabIndicator, {
       selected: selected,
-      color: indicatorColor
+      color: indicatorColor,
+      variant: variant,
+      labelRef: labelRef
     })]
   });
 });
 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"]);
+      otherProps = _objectWithoutProperties(props, _excluded2);
 
   return /*#__PURE__*/_jsx(TabCore, _extends({
     as: TabInner,