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

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

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

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,"file":"index.js","names":[],"sources":["../../../src/Switch/index.ts"],"sourcesContent":["export * from './Switch';\r\n"],"mappings":"AAAA,cAAc,UAAd"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/Switch/index.ts"],"sourcesContent":["export * from './Switch';\n"],"mappings":"AAAA,cAAc,UAAU","ignoreList":[]}

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;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const SwitchThumb: ({ checked, ...otherProps }: {
+    [x: string]: any;
+    checked?: boolean | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const SwitchCircle: ({ checked, ...otherProps }: {
+    [x: string]: any;
+    checked?: boolean | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/build/esm/Switch/styledComponents.js

@@ -1,48 +1,44 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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 = '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, _excluded);
-
-  return /*#__PURE__*/_jsx(Box, _extends({
-    __css: _extends({
+const BORDER_WIDTH = 'var(--switch-border-width)';
+const TRAIL_WIDTH = 'var(--switch-trail-width)';
+const TRAIL_HEIGHT = 'var(--switch-trail-height)';
+const STATE_LAYER_SIZE = 'var(--switch-state-layer-size)';
+const CIRCLE_SIZE_INACTIVE_CHECKED = 'var(--switch-thumb-size-checked-inactive)';
+const CIRCLE_SIZE_ACTIVE_CHECKED = 'var(--switch-thumb-size-checked-active)';
+const CIRCLE_SIZE_INACTIVE_UNCHECKED = 'var(--switch-thumb-size-unchecked-inactive)';
+const CIRCLE_SIZE_ACTIVE_UNCHECKED = 'var(--switch-thumb-size-unchecked-active)';
+export const SwitchTrail = _ref => {
+  let {
+    checked = false,
+    disabled = false,
+    ...otherProps
+  } = _ref;
+  return /*#__PURE__*/_jsx(Box, {
+    __css: {
       width: TRAIL_WIDTH,
       height: TRAIL_HEIGHT,
       borderRadius: 'full',
       borderWidth: BORDER_WIDTH,
       borderStyle: 'solid',
       backgroundColor: checked ? 'primary' : 'surface-variant',
-      borderColor: checked ? 'primary' : 'outline'
-    }, disabled && {
-      opacity: 0.12,
-      backgroundColor: checked ? 'on.surface' : 'surface-variant',
-      borderColor: 'on.surface'
-    })
-  }, otherProps));
+      borderColor: checked ? 'primary' : 'outline',
+      ...(disabled && {
+        opacity: 0.12,
+        backgroundColor: checked ? 'on.surface' : 'surface-variant',
+        borderColor: 'on.surface'
+      })
+    },
+    ...otherProps
+  });
 };
-export var SwitchThumb = function SwitchThumb(_ref2) {
-  var _ref2$checked = _ref2.checked,
-      checked = _ref2$checked === void 0 ? false : _ref2$checked,
-      otherProps = _objectWithoutProperties(_ref2, _excluded2);
-
-  return /*#__PURE__*/_jsx(Box, _extends({
+export const SwitchThumb = _ref2 => {
+  let {
+    checked = false,
+    ...otherProps
+  } = _ref2;
+  return /*#__PURE__*/_jsx(Box, {
     position: "absolute",
     width: STATE_LAYER_SIZE,
     height: STATE_LAYER_SIZE,
@@ -50,22 +46,25 @@ export var SwitchThumb = function SwitchThumb(_ref2) {
     left: '50%',
     top: '50%',
     __css: {
-      transform: "translateX(calc(-50% ".concat(checked ? '+' : '-', "\n        (").concat(TRAIL_WIDTH, " - ").concat(CIRCLE_SIZE_INACTIVE_CHECKED, " - ").concat(BORDER_WIDTH, " * 4) / 2\n      )) translateY(-50%)"),
+      transform: `translateX(calc(-50% ${checked ? '+' : '-'}
+        (${TRAIL_WIDTH} - ${CIRCLE_SIZE_INACTIVE_CHECKED} - ${BORDER_WIDTH} * 4) / 2
+      )) translateY(-50%)`,
       WebkitTapHighlightColor: 'transparent',
-      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),
+      transition: `background-color 90ms ${EASING_STANDARD},border-color 90ms ${EASING_STANDARD},transform 90ms ${EASING_STANDARD},height 90ms ${EASING_STANDARD},width 90ms ${EASING_STANDARD}`,
       '& > input': {
         width: STATE_LAYER_SIZE,
         height: STATE_LAYER_SIZE
       }
-    }
-  }, otherProps));
+    },
+    ...otherProps
+  });
 };
-export var SwitchCircle = function SwitchCircle(_ref3) {
-  var _ref3$checked = _ref3.checked,
-      checked = _ref3$checked === void 0 ? false : _ref3$checked,
-      otherProps = _objectWithoutProperties(_ref3, _excluded3);
-
-  return /*#__PURE__*/_jsx(Box, _extends({
+export const SwitchCircle = _ref3 => {
+  let {
+    checked = false,
+    ...otherProps
+  } = _ref3;
+  return /*#__PURE__*/_jsx(Box, {
     __css: {
       position: 'absolute',
       display: 'inline-flex',
@@ -101,7 +100,8 @@ export var SwitchCircle = function SwitchCircle(_ref3) {
     },
     "data-switch-circle": "",
     role: "presentation",
-    "aria-hidden": "true"
-  }, otherProps));
+    "aria-hidden": "true",
+    ...otherProps
+  });
 };
 //# sourceMappingURL=styledComponents.js.map

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

@@ -1 +1 @@
-{"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":";;;;;AAAA,SAASA,GAAT,QAAoB,QAApB;AACA,SAASC,eAAT,QAAgC,WAAhC;;AAEA,IAAMC,YAAY,GAAG,4BAArB;AACA,IAAMC,WAAW,GAAG,2BAApB;AACA,IAAMC,YAAY,GAAG,4BAArB;AACA,IAAMC,gBAAgB,GAAG,gCAAzB;AACA,IAAMC,4BAA4B,GAChC,2CADF;AAEA,IAAMC,0BAA0B,GAAG,yCAAnC;AACA,IAAMC,8BAA8B,GAClC,6CADF;AAEA,IAAMC,4BAA4B,GAChC,2CADF;AAGA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc;EAAA,wBACzBC,OADyB;EAAA,IACzBA,OADyB,6BACf,KADe;EAAA,yBAEzBC,QAFyB;EAAA,IAEzBA,QAFyB,8BAEd,KAFc;EAAA,IAGtBC,UAHsB;;EAAA,oBAKzB,KAAC,GAAD;IACE,KAAK;MACHC,KAAK,EAAEX,WADJ;MAEHY,MAAM,EAAEX,YAFL;MAGHY,YAAY,EAAE,MAHX;MAIHC,WAAW,EAAEf,YAJV;MAKHgB,WAAW,EAAE,OALV;MAMHC,eAAe,EAAER,OAAO,GAAG,SAAH,GAAe,iBANpC;MAOHS,WAAW,EAAET,OAAO,GAAG,SAAH,GAAe;IAPhC,GAQCC,QAAQ,IAAI;MACdS,OAAO,EAAE,IADK;MAEdF,eAAe,EAAER,OAAO,GAAG,YAAH,GAAkB,iBAF5B;MAGdS,WAAW,EAAE;IAHC,CARb;EADP,GAeMP,UAfN,EALyB;AAAA,CAApB;AAwBP,OAAO,IAAMS,WAAW,GAAG,SAAdA,WAAc;EAAA,0BAAGX,OAAH;EAAA,IAAGA,OAAH,8BAAa,KAAb;EAAA,IAAuBE,UAAvB;;EAAA,oBACzB,KAAC,GAAD;IACE,QAAQ,EAAC,UADX;IAEE,KAAK,EAAER,gBAFT;IAGE,MAAM,EAAEA,gBAHV;IAIE,YAAY,EAAC,MAJf;IAKE,IAAI,EAAE,KALR;IAME,GAAG,EAAE,KANP;IAOE,KAAK,EAAE;MACLkB,SAAS,iCAA0BZ,OAAO,GAAG,GAAH,GAAS,GAA1C,wBACJR,WADI,gBACaG,4BADb,gBAC+CJ,YAD/C,yCADJ;MAILsB,uBAAuB,EAAE,aAJpB;MAKLC,UAAU,kCAA2BxB,eAA3B,gCAAgEA,eAAhE,6BAAkGA,eAAlG,0BAAiIA,eAAjI,yBAA+JA,eAA/J,CALL;MAML,aAAa;QACXa,KAAK,EAAET,gBADI;QAEXU,MAAM,EAAEV;MAFG;IANR;EAPT,GAkBMQ,UAlBN,EADyB;AAAA,CAApB;AAuBP,OAAO,IAAMa,YAAY,GAAG,SAAfA,YAAe;EAAA,0BAAGf,OAAH;EAAA,IAAGA,OAAH,8BAAa,KAAb;EAAA,IAAuBE,UAAvB;;EAAA,oBAC1B,KAAC,GAAD;IACE,KAAK,EAAE;MACLc,QAAQ,EAAE,UADL;MAELC,OAAO,EAAE,aAFJ;MAGLC,UAAU,EAAE,QAHP;MAILC,cAAc,EAAE,QAJX;MAKLhB,KAAK,EAAEH,OAAO,GACVL,4BADU,GAEVE,8BAPC;MAQLO,MAAM,EAAEJ,OAAO,GACXL,4BADW,GAEXE,8BAVC;MAWLuB,SAAS,EAAE,YAXN;MAYLf,YAAY,EAAE,MAZT;MAaLgB,aAAa,EAAE,MAbV;MAcLC,MAAM,EAAE,CAdH;MAeLd,eAAe,EAAER,OAAO,GAAG,YAAH,GAAkB,SAfrC;MAgBLuB,KAAK,EAAEvB,OAAO,GAAG,SAAH,GAAe,YAhBxB;MAiBLwB,GAAG,EAAE,KAjBA;MAkBLC,IAAI,EAAE,KAlBD;MAmBLb,SAAS,EAAE,uBAnBN;MAoBLE,UAAU,EAAE,SApBP;MAqBL,iHACE;QACEN,eAAe,EAAER,OAAO,GAAG,mBAAH,GAAyB,oBADnD;QAEEuB,KAAK,EAAEvB,OAAO,GAAG,sBAAH,GAA4B;MAF5C,CAtBG;MA0BL,+EACE;QACEI,MAAM,EAAEJ,OAAO,GACXJ,0BADW,GAEXE,4BAHN;QAIEK,KAAK,EAAEH,OAAO,GACVJ,0BADU,GAEVE;MANN,CA3BG;MAmCL,uCAAuC;QACrCY,OAAO,EAAEV,OAAO,GAAG,CAAH,GAAO,IADc;QAErCQ,eAAe,EAAER,OAAO,GAAG,SAAH,GAAe,YAFF;QAGrCuB,KAAK,EAAEvB,OAAO,GAAG,YAAH,GAAkB,SAHK;QAIrCI,MAAM,EAAEJ,OAAO,GACXL,4BADW,GAEXE,8BANiC;QAOrCM,KAAK,EAAEH,OAAO,GACVL,4BADU,GAEVE;MATiC;IAnClC,CADT;IAgDE,sBAAmB,EAhDrB;IAiDE,IAAI,EAAC,cAjDP;IAkDE,eAAY;EAlDd,GAmDMK,UAnDN,EAD0B;AAAA,CAArB"}
+{"version":3,"file":"styledComponents.js","names":["Box","EASING_STANDARD","jsx","_jsx","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","_ref","checked","disabled","otherProps","__css","width","height","borderRadius","borderWidth","borderStyle","backgroundColor","borderColor","opacity","SwitchThumb","_ref2","position","left","top","transform","WebkitTapHighlightColor","transition","SwitchCircle","_ref3","display","alignItems","justifyContent","boxSizing","pointerEvents","zIndex","color","role"],"sources":["../../../src/Switch/styledComponents.tsx"],"sourcesContent":["import { Box } from '../Box';\nimport { EASING_STANDARD } from '../motion';\n\nconst BORDER_WIDTH = 'var(--switch-border-width)';\nconst TRAIL_WIDTH = 'var(--switch-trail-width)';\nconst TRAIL_HEIGHT = 'var(--switch-trail-height)';\nconst STATE_LAYER_SIZE = 'var(--switch-state-layer-size)';\nconst CIRCLE_SIZE_INACTIVE_CHECKED =\n  'var(--switch-thumb-size-checked-inactive)';\nconst CIRCLE_SIZE_ACTIVE_CHECKED = 'var(--switch-thumb-size-checked-active)';\nconst CIRCLE_SIZE_INACTIVE_UNCHECKED =\n  'var(--switch-thumb-size-unchecked-inactive)';\nconst CIRCLE_SIZE_ACTIVE_UNCHECKED =\n  'var(--switch-thumb-size-unchecked-active)';\n\nexport const SwitchTrail = ({\n  checked = false,\n  disabled = false,\n  ...otherProps\n}) => (\n  <Box\n    __css={{\n      width: TRAIL_WIDTH,\n      height: TRAIL_HEIGHT,\n      borderRadius: 'full',\n      borderWidth: 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\nexport const SwitchThumb = ({ checked = false, ...otherProps }) => (\n  <Box\n    position=\"absolute\"\n    width={STATE_LAYER_SIZE}\n    height={STATE_LAYER_SIZE}\n    borderRadius=\"full\"\n    left={'50%'}\n    top={'50%'}\n    __css={{\n      transform: `translateX(calc(-50% ${checked ? '+' : '-'}\n        (${TRAIL_WIDTH} - ${CIRCLE_SIZE_INACTIVE_CHECKED} - ${BORDER_WIDTH} * 4) / 2\n      )) translateY(-50%)`,\n      WebkitTapHighlightColor: 'transparent',\n      transition: `background-color 90ms ${EASING_STANDARD},border-color 90ms ${EASING_STANDARD},transform 90ms ${EASING_STANDARD},height 90ms ${EASING_STANDARD},width 90ms ${EASING_STANDARD}`,\n      '& > input': {\n        width: STATE_LAYER_SIZE,\n        height: STATE_LAYER_SIZE,\n      },\n    }}\n    {...otherProps}\n  />\n);\n\nexport const SwitchCircle = ({ checked = false, ...otherProps }) => (\n  <Box\n    __css={{\n      position: 'absolute',\n      display: 'inline-flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: checked\n        ? CIRCLE_SIZE_INACTIVE_CHECKED\n        : CIRCLE_SIZE_INACTIVE_UNCHECKED,\n      height: checked\n        ? CIRCLE_SIZE_INACTIVE_CHECKED\n        : CIRCLE_SIZE_INACTIVE_UNCHECKED,\n      boxSizing: 'border-box',\n      borderRadius: 'full',\n      pointerEvents: 'none',\n      zIndex: 1,\n      backgroundColor: checked ? 'on.primary' : 'outline',\n      color: checked ? 'primary' : 'on.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          color: checked ? 'on.primary-container' : '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        color: checked ? 'on.surface' : '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"],"mappings":"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","ignoreList":[]}

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

@@ -1,5 +1,5 @@
-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>>;
+import type { ButtonHTMLAttributes } from 'react';
+import type { TabProps as TabPropsCore } from '@basic-ui/core';
+import type { RippleBoxProps } from '../Ripple';
+export type TabProps = TabPropsCore & RippleBoxProps<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>;
+export declare const Tab: import("react").ForwardRefExoticComponent<Omit<TabProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/build/esm/Tab/Tab.js

@@ -1,8 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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';
@@ -11,29 +6,24 @@ import { Text } from '../Text';
 import { Box } from '../Box';
 import { TabIndicator } from '../TabIndicator';
 import { useTabListContext } from './context';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var TabInner = /*#__PURE__*/forwardRef(function Tab(props, forwardedRef) {
-  var innerAs = props.innerAs,
-      selected = props.selected,
-      children = props.children,
-      disabled = props.disabled,
-      otherProps = _objectWithoutProperties(props, _excluded);
-
-  var _useTabListContext = useTabListContext(),
-      textColor = _useTabListContext.textColor,
-      indicatorColor = _useTabListContext.indicatorColor,
-      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 () {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TabInner = /*#__PURE__*/forwardRef(function Tab(props, forwardedRef) {
+  const {
+    innerAs,
+    selected,
+    children,
+    disabled,
+    ...otherProps
+  } = props;
+  const {
+    textColor,
+    indicatorColor,
+    selectedTextColor,
+    variant
+  } = useTabListContext();
+  const labelRef = useRef(null);
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
     setMounted(true);
   }, []);
   return /*#__PURE__*/_jsxs(Box, {
@@ -42,7 +32,7 @@ var TabInner = /*#__PURE__*/forwardRef(function Tab(props, forwardedRef) {
     flex: 1,
     flexDirection: "column",
     height: "100%",
-    children: [/*#__PURE__*/_jsx(RippleBox, _extends(_extends({
+    children: [/*#__PURE__*/_jsx(RippleBox, {
       as: innerAs,
       ref: forwardedRef,
       rippleColor: indicatorColor,
@@ -60,13 +50,13 @@ var TabInner = /*#__PURE__*/forwardRef(function Tab(props, forwardedRef) {
         },
         width: '100%',
         alignItems: 'center'
-      }
-    }, otherProps), {}, {
+      },
+      ...otherProps,
       children: /*#__PURE__*/_jsx(Text, {
         as: "span",
         variant: "title-small",
         ref: labelRef,
-        __css: _extends({
+        __css: {
           display: 'inline-flex',
           justifyContent: 'center',
           alignItems: 'center',
@@ -74,23 +64,24 @@ var TabInner = /*#__PURE__*/forwardRef(function Tab(props, forwardedRef) {
           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"
-          }
-        }),
+          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, {
+    }), /*#__PURE__*/_jsx(TabIndicator, {
       selected: selected,
       color: indicatorColor,
       variant: variant,
@@ -98,15 +89,16 @@ var TabInner = /*#__PURE__*/forwardRef(function Tab(props, forwardedRef) {
     })]
   });
 });
-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, _excluded2);
-
-  return /*#__PURE__*/_jsx(TabCore, _extends({
+export const Tab = /*#__PURE__*/forwardRef(function Tab(props, forwardedRef) {
+  const {
+    as = 'button',
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/_jsx(TabCore, {
     as: TabInner,
     innerAs: as,
-    ref: forwardedRef
-  }, otherProps));
+    ref: forwardedRef,
+    ...otherProps
+  });
 });
 //# sourceMappingURL=Tab.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","names":["useState","useEffect","useRef","forwardRef","Tab","TabCore","RippleBox","alpha","Text","Box","TabIndicator","useTabListContext","TabInner","props","forwardedRef","innerAs","selected","children","disabled","otherProps","textColor","indicatorColor","selectedTextColor","variant","labelRef","mounted","setMounted","px","py","color","minHeight","height","backgroundColor","border","outline","width","alignItems","display","justifyContent","textAlign","position","flexDirection","content","bg","bottom","zIndex","borderTopLeftRadius","borderTopRightRadius","as"],"sources":["../../../src/Tab/Tab.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react';\r\nimport { useState, useEffect, useRef, forwardRef } from 'react';\r\nimport type { TabProps as TabPropsCore } from '@basic-ui/core';\r\nimport { Tab as TabCore } from '@basic-ui/core';\r\nimport { rem } from 'polished';\r\n\r\nimport type { RippleBoxProps } from '../Ripple';\r\nimport { RippleBox } from '../Ripple';\r\nimport { alpha } from '../color';\r\nimport { Text } from '../Text';\r\nimport { Box } from '../Box';\r\nimport { TabIndicator } from '../TabIndicator';\r\nimport { useTabListContext } from './context';\r\n\r\nexport type TabProps = TabPropsCore &\r\n  RippleBoxProps<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>;\r\n\r\nconst TabInner = forwardRef<\r\n  HTMLButtonElement,\r\n  TabProps & { selected?: boolean }\r\n>(function Tab(props, forwardedRef) {\r\n  const { innerAs, selected, children, disabled, ...otherProps } = props;\r\n  const { textColor, indicatorColor, selectedTextColor, variant } =\r\n    useTabListContext();\r\n  const labelRef = useRef<HTMLParagraphElement>(null);\r\n\r\n  const [mounted, setMounted] = useState(false);\r\n  useEffect(() => {\r\n    setMounted(true);\r\n  }, []);\r\n\r\n  return (\r\n    <Box\r\n      position=\"relative\"\r\n      display=\"flex\"\r\n      flex={1}\r\n      flexDirection=\"column\"\r\n      height=\"100%\"\r\n    >\r\n      <RippleBox<\r\n        RippleBoxProps<\r\n          HTMLButtonElement,\r\n          ButtonHTMLAttributes<HTMLButtonElement>\r\n        >\r\n      >\r\n        as={innerAs}\r\n        ref={forwardedRef}\r\n        rippleColor={indicatorColor}\r\n        disabled={disabled}\r\n        __css={{\r\n          px: 3,\r\n          py: 0,\r\n          color: selected\r\n            ? selectedTextColor || indicatorColor\r\n            : alpha(textColor, disabled ? 0.37 : 0.7),\r\n          minHeight: rem(48),\r\n          height: '100%',\r\n          backgroundColor: 'transparent',\r\n          border: 'none',\r\n          ':focus': {\r\n            outline: 'none',\r\n          },\r\n          width: '100%',\r\n          alignItems: 'center',\r\n        }}\r\n        {...otherProps}\r\n      >\r\n        <Text\r\n          as=\"span\"\r\n          variant=\"title-small\"\r\n          ref={labelRef}\r\n          __css={{\r\n            display: 'inline-flex',\r\n            justifyContent: 'center',\r\n            alignItems: 'center',\r\n            color: 'inherit',\r\n            height: '100%',\r\n            textAlign: 'center',\r\n            position: 'relative',\r\n            flexDirection: 'column',\r\n            ...(variant === 'primary' &&\r\n              selected &&\r\n              !mounted && {\r\n                '&::before': {\r\n                  content: '\"\"',\r\n                  bg: indicatorColor,\r\n                  position: 'absolute',\r\n                  bottom: 0,\r\n                  zIndex: 1,\r\n                  width: '100%',\r\n                  height: rem(3),\r\n                  borderTopLeftRadius: rem(3),\r\n                  borderTopRightRadius: rem(3),\r\n                },\r\n              }),\r\n          }}\r\n        >\r\n          {children}\r\n        </Text>\r\n      </RippleBox>\r\n      <TabIndicator\r\n        selected={selected}\r\n        color={indicatorColor}\r\n        variant={variant}\r\n        labelRef={labelRef}\r\n      />\r\n    </Box>\r\n  );\r\n});\r\n\r\nexport const Tab = forwardRef<HTMLButtonElement, TabProps>(function Tab(\r\n  props,\r\n  forwardedRef\r\n) {\r\n  const { as = 'button', ...otherProps } = props;\r\n\r\n  return (\r\n    <TabCore as={TabInner} innerAs={as} ref={forwardedRef} {...otherProps} />\r\n  );\r\n});\r\n"],"mappings":"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"}
+{"version":3,"file":"Tab.js","names":["useState","useEffect","useRef","forwardRef","Tab","TabCore","RippleBox","alpha","Text","Box","TabIndicator","useTabListContext","jsx","_jsx","jsxs","_jsxs","TabInner","props","forwardedRef","innerAs","selected","children","disabled","otherProps","textColor","indicatorColor","selectedTextColor","variant","labelRef","mounted","setMounted","position","display","flex","flexDirection","height","as","ref","rippleColor","__css","px","py","color","minHeight","backgroundColor","border","outline","width","alignItems","justifyContent","textAlign","content","bg","bottom","zIndex","borderTopLeftRadius","borderTopRightRadius"],"sources":["../../../src/Tab/Tab.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react';\nimport { useState, useEffect, useRef, forwardRef } 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<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>;\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, variant } =\n    useTabListContext();\n  const labelRef = useRef<HTMLParagraphElement>(null);\n\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  return (\n    <Box\n      position=\"relative\"\n      display=\"flex\"\n      flex={1}\n      flexDirection=\"column\"\n      height=\"100%\"\n    >\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          py: 0,\n          color: selected\n            ? selectedTextColor || indicatorColor\n            : alpha(textColor, disabled ? 0.37 : 0.7),\n          minHeight: rem(48),\n          height: '100%',\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=\"title-small\"\n          ref={labelRef}\n          __css={{\n            display: 'inline-flex',\n            justifyContent: 'center',\n            alignItems: 'center',\n            color: 'inherit',\n            height: '100%',\n            textAlign: 'center',\n            position: 'relative',\n            flexDirection: 'column',\n            ...(variant === 'primary' &&\n              selected &&\n              !mounted && {\n                '&::before': {\n                  content: '\"\"',\n                  bg: indicatorColor,\n                  position: 'absolute',\n                  bottom: 0,\n                  zIndex: 1,\n                  width: '100%',\n                  height: rem(3),\n                  borderTopLeftRadius: rem(3),\n                  borderTopRightRadius: rem(3),\n                },\n              }),\n          }}\n        >\n          {children}\n        </Text>\n      </RippleBox>\n      <TabIndicator\n        selected={selected}\n        color={indicatorColor}\n        variant={variant}\n        labelRef={labelRef}\n      />\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"],"mappings":"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","ignoreList":[]}

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

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