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

package/build/esm/Snackbar/useSnackbarAnimation.js

@@ -1,211 +1,182 @@
-import _extends from "@babel/runtime/helpers/extends";
 import { useEffect } from 'react';
 import { EASING_STANDARD } from '../motion';
 import { useStackItem } from './Stack';
-var TRANSITION_TIME = 150;
-var slideFromBottom = {
-  entering: function entering(x, y) {
-    return {
-      opacity: 0.6,
-      transform: "translate(".concat(x, ", calc(").concat(y, " + 100%))")
-    };
-  },
-  entered: function entered(x, y) {
-    return {
-      opacity: 1,
-      transform: "translate(".concat(x, ", ").concat(y, ")")
-    };
-  },
-  exiting: function exiting(x, y) {
-    return {
-      opacity: 1,
-      transform: "translate(".concat(x, ", calc(").concat(y, " - 100%))")
-    };
-  }
+const TRANSITION_TIME = 150;
+const slideFromBottom = {
+  entering: (x, y) => ({
+    opacity: 0.6,
+    transform: `translate(${x}, calc(${y} + 100%))`
+  }),
+  entered: (x, y) => ({
+    opacity: 1,
+    transform: `translate(${x}, ${y})`
+  }),
+  exiting: (x, y) => ({
+    opacity: 1,
+    transform: `translate(${x}, calc(${y} - 100%))`
+  })
 };
-var slideFromTop = {
-  entering: function entering(x, y) {
-    return {
-      opacity: 0.6,
-      transform: "translate(".concat(x, ", calc(").concat(y, " - 100%))")
-    };
-  },
-  entered: function entered(x, y) {
-    return {
-      opacity: 1,
-      transform: "translate(".concat(x, ", ").concat(y, ")")
-    };
-  },
-  exiting: function exiting(x, y) {
-    return {
-      opacity: 1,
-      transform: "translate(".concat(x, ", calc(").concat(y, " + 100%))")
-    };
-  }
+const slideFromTop = {
+  entering: (x, y) => ({
+    opacity: 0.6,
+    transform: `translate(${x}, calc(${y} - 100%))`
+  }),
+  entered: (x, y) => ({
+    opacity: 1,
+    transform: `translate(${x}, ${y})`
+  }),
+  exiting: (x, y) => ({
+    opacity: 1,
+    transform: `translate(${x}, calc(${y} + 100%))`
+  })
 };
-var slideFromRight = {
-  entering: function entering(x, y) {
-    return {
-      opacity: 0.6,
-      transform: "translate(calc(".concat(x, " + 100%), ").concat(y, ")")
-    };
-  },
-  entered: function entered(x, y) {
-    return {
-      opacity: 1,
-      transform: "translate(".concat(x, ", ").concat(y, ")")
-    };
-  },
-  exiting: function exiting(x, y) {
-    return {
-      opacity: 0.6,
-      transform: "translate(calc(".concat(x, " + 100%), ").concat(y, ")")
-    };
-  }
+const slideFromRight = {
+  entering: (x, y) => ({
+    opacity: 0.6,
+    transform: `translate(calc(${x} + 100%), ${y})`
+  }),
+  entered: (x, y) => ({
+    opacity: 1,
+    transform: `translate(${x}, ${y})`
+  }),
+  exiting: (x, y) => ({
+    opacity: 0.6,
+    transform: `translate(calc(${x} + 100%), ${y})`
+  })
 };
-var slideFromLeft = {
-  entering: function entering(x, y) {
-    return {
-      opacity: 0.6,
-      transform: "translate(calc(".concat(x, " - 100%), ").concat(y, ")")
-    };
-  },
-  entered: function entered(x, y) {
-    return {
-      opacity: 1,
-      transform: "translate(".concat(x, ", ").concat(y, ")")
-    };
-  },
-  exiting: function exiting(x, y) {
-    return {
-      opacity: 0.6,
-      transform: "translate(calc(".concat(x, " - 100%), ").concat(y, ")")
-    };
-  }
+const slideFromLeft = {
+  entering: (x, y) => ({
+    opacity: 0.6,
+    transform: `translate(calc(${x} - 100%), ${y})`
+  }),
+  entered: (x, y) => ({
+    opacity: 1,
+    transform: `translate(${x}, ${y})`
+  }),
+  exiting: (x, y) => ({
+    opacity: 0.6,
+    transform: `translate(calc(${x} - 100%), ${y})`
+  })
 };
-var placements = {
+const placements = {
   'top-right': {
     style: {
       top: 3,
       right: 3
     },
-    animate: function animate(state, translateY) {
-      return slideFromRight[state]('0px', "".concat(translateY, "px"));
-    }
+    animate: (state, translateY) => slideFromRight[state]('0px', `${translateY}px`)
   },
   'top-center': {
     style: {
       top: 3,
       left: '50%'
     },
-    animate: function animate(state, translateY) {
-      return slideFromBottom[state]('-50%', "".concat(translateY, "px"));
-    }
+    animate: (state, translateY) => slideFromBottom[state]('-50%', `${translateY}px`)
   },
   'top-left': {
     style: {
       top: 3,
       left: 3
     },
-    animate: function animate(state, translateY) {
-      return slideFromLeft[state]('0px', "".concat(translateY, "px"));
-    }
+    animate: (state, translateY) => slideFromLeft[state]('0px', `${translateY}px`)
   },
   'bottom-right': {
     style: {
       bottom: 3,
       right: 3
     },
-    animate: function animate(state, translateY) {
-      return slideFromRight[state]('0px', "".concat(-translateY, "px"));
-    }
+    animate: (state, translateY) => slideFromRight[state]('0px', `${-translateY}px`)
   },
   'bottom-center': {
     style: {
       bottom: 3,
       left: '50%'
     },
-    animate: function animate(state, translateY) {
-      return slideFromTop[state]('-50%', "".concat(-translateY, "px"));
-    }
+    animate: (state, translateY) => slideFromTop[state]('-50%', `${-translateY}px`)
   },
   'bottom-left': {
     style: {
       bottom: 3,
       left: 3
     },
-    animate: function animate(state, translateY) {
-      return slideFromLeft[state]('0px', "".concat(-translateY, "px"));
-    }
+    animate: (state, translateY) => slideFromLeft[state]('0px', `${-translateY}px`)
   }
 };
-var commonStyle = {
+const commonStyle = {
   position: 'fixed',
   zIndex: 'snackbar'
 };
-
 function getTransition(timems) {
-  return "opacity ".concat(timems, "ms ").concat(EASING_STANDARD, ",transform ").concat(timems, "ms ").concat(EASING_STANDARD);
+  return `opacity ${timems}ms ${EASING_STANDARD},transform ${timems}ms ${EASING_STANDARD}`;
 }
-
-var defaultAnimation = {
+const defaultAnimation = {
   style: {},
   placementStyle: {},
   onClose: undefined
 };
 export function useSnackbarAnimation(ref, timeout) {
-  var stackItem = useStackItem({
-    ref: ref,
+  const stackItem = useStackItem({
+    ref,
     closeTimeoutInMilliseconds: TRANSITION_TIME
   });
-
   if (!stackItem) {
     return defaultAnimation;
   }
+  const {
+    onClose,
+    state,
+    translateY = 0,
+    placement
+  } = stackItem;
+  const placementStyle = placements[placement].style;
+  const animateFn = placements[placement].animate;
 
-  var onClose = stackItem.onClose,
-      state = stackItem.state,
-      _stackItem$translateY = stackItem.translateY,
-      translateY = _stackItem$translateY === void 0 ? 0 : _stackItem$translateY,
-      placement = stackItem.placement;
-  var placementStyle = placements[placement].style;
-  var animateFn = placements[placement].animate; // eslint-disable-next-line react-hooks/rules-of-hooks
-
-  useEffect(function () {
-    var handler = setTimeout(function () {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    const handler = setTimeout(() => {
       onClose();
     }, timeout);
-    return function () {
+    return () => {
       clearTimeout(handler);
-    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [timeout]);
-
   switch (state) {
     case 'entering':
       return {
-        style: _extends(_extends({}, animateFn('entering', translateY)), {}, {
+        style: {
+          ...animateFn('entering', translateY),
           visibility: 'hidden'
-        }),
-        placementStyle: _extends(_extends({}, placementStyle), commonStyle),
-        onClose: onClose
+        },
+        placementStyle: {
+          ...placementStyle,
+          ...commonStyle
+        },
+        onClose
       };
-
     case 'entered':
       return {
-        style: _extends(_extends({}, animateFn('entered', translateY)), {}, {
+        style: {
+          ...animateFn('entered', translateY),
           transition: getTransition(TRANSITION_TIME)
-        }),
-        placementStyle: _extends(_extends({}, placementStyle), commonStyle),
-        onClose: onClose
+        },
+        placementStyle: {
+          ...placementStyle,
+          ...commonStyle
+        },
+        onClose
       };
-
     case 'exiting':
       return {
-        style: _extends(_extends({}, animateFn('exiting', translateY)), {}, {
+        style: {
+          ...animateFn('exiting', translateY),
           transition: getTransition(TRANSITION_TIME)
-        }),
-        placementStyle: _extends(_extends({}, placementStyle), commonStyle),
-        onClose: onClose
+        },
+        placementStyle: {
+          ...placementStyle,
+          ...commonStyle
+        },
+        onClose
       };
   }
 }

package/build/esm/Snackbar/useSnackbarAnimation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSnackbarAnimation.js","names":["useEffect","EASING_STANDARD","useStackItem","TRANSITION_TIME","slideFromBottom","entering","x","y","opacity","transform","entered","exiting","slideFromTop","slideFromRight","slideFromLeft","placements","style","top","right","animate","state","translateY","left","bottom","commonStyle","position","zIndex","getTransition","timems","defaultAnimation","placementStyle","onClose","undefined","useSnackbarAnimation","ref","timeout","stackItem","closeTimeoutInMilliseconds","placement","animateFn","handler","setTimeout","clearTimeout","visibility","transition"],"sources":["../../../src/Snackbar/useSnackbarAnimation.ts"],"sourcesContent":["import type { CSSProperties, MutableRefObject } from 'react';\nimport { useEffect } from 'react';\n\nimport { EASING_STANDARD } from '../motion';\nimport { useStackItem } from './Stack';\n\nconst TRANSITION_TIME = 150;\nconst slideFromBottom = {\n  entering: (x: string, y: string) => ({\n    opacity: 0.6,\n    transform: `translate(${x}, calc(${y} + 100%))`,\n  }),\n  entered: (x: string, y: string) => ({\n    opacity: 1,\n    transform: `translate(${x}, ${y})`,\n  }),\n  exiting: (x: string, y: string) => ({\n    opacity: 1,\n    transform: `translate(${x}, calc(${y} - 100%))`,\n  }),\n};\n\nconst slideFromTop = {\n  entering: (x: string, y: string) => ({\n    opacity: 0.6,\n    transform: `translate(${x}, calc(${y} - 100%))`,\n  }),\n  entered: (x: string, y: string) => ({\n    opacity: 1,\n    transform: `translate(${x}, ${y})`,\n  }),\n  exiting: (x: string, y: string) => ({\n    opacity: 1,\n    transform: `translate(${x}, calc(${y} + 100%))`,\n  }),\n};\n\nconst slideFromRight = {\n  entering: (x: string, y: string) => ({\n    opacity: 0.6,\n    transform: `translate(calc(${x} + 100%), ${y})`,\n  }),\n  entered: (x: string, y: string) => ({\n    opacity: 1,\n    transform: `translate(${x}, ${y})`,\n  }),\n  exiting: (x: string, y: string) => ({\n    opacity: 0.6,\n    transform: `translate(calc(${x} + 100%), ${y})`,\n  }),\n};\n\nconst slideFromLeft = {\n  entering: (x: string, y: string) => ({\n    opacity: 0.6,\n    transform: `translate(calc(${x} - 100%), ${y})`,\n  }),\n  entered: (x: string, y: string) => ({\n    opacity: 1,\n    transform: `translate(${x}, ${y})`,\n  }),\n  exiting: (x: string, y: string) => ({\n    opacity: 0.6,\n    transform: `translate(calc(${x} - 100%), ${y})`,\n  }),\n};\n\ntype AnimationState = 'entering' | 'entered' | 'exiting';\nconst placements = {\n  'top-right': {\n    style: { top: 3, right: 3 },\n    animate: (state: AnimationState, translateY: number) =>\n      slideFromRight[state]('0px', `${translateY}px`),\n  },\n  'top-center': {\n    style: { top: 3, left: '50%' },\n    animate: (state: AnimationState, translateY: number) =>\n      slideFromBottom[state]('-50%', `${translateY}px`),\n  },\n  'top-left': {\n    style: { top: 3, left: 3 },\n    animate: (state: AnimationState, translateY: number) =>\n      slideFromLeft[state]('0px', `${translateY}px`),\n  },\n  'bottom-right': {\n    style: { bottom: 3, right: 3 },\n    animate: (state: AnimationState, translateY: number) =>\n      slideFromRight[state]('0px', `${-translateY}px`),\n  },\n  'bottom-center': {\n    style: { bottom: 3, left: '50%' },\n    animate: (state: AnimationState, translateY: number) =>\n      slideFromTop[state]('-50%', `${-translateY}px`),\n  },\n  'bottom-left': {\n    style: { bottom: 3, left: 3 },\n    animate: (state: AnimationState, translateY: number) =>\n      slideFromLeft[state]('0px', `${-translateY}px`),\n  },\n};\nconst commonStyle = { position: 'fixed', zIndex: 'snackbar' };\n\nfunction getTransition(timems: number) {\n  return `opacity ${timems}ms ${EASING_STANDARD},transform ${timems}ms ${EASING_STANDARD}`;\n}\n\nconst defaultAnimation = {\n  style: {},\n  placementStyle: {},\n  onClose: undefined,\n};\n\nexport function useSnackbarAnimation(\n  ref: MutableRefObject<HTMLDivElement | null>,\n  timeout: number\n): {\n  style: CSSProperties;\n  placementStyle: CSSProperties;\n  onClose?: () => void;\n} {\n  const stackItem = useStackItem({\n    ref,\n    closeTimeoutInMilliseconds: TRANSITION_TIME,\n  });\n  if (!stackItem) {\n    return defaultAnimation;\n  }\n\n  const { onClose, state, translateY = 0, placement } = stackItem;\n  const placementStyle = placements[placement].style;\n  const animateFn = placements[placement].animate;\n\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  useEffect(() => {\n    const handler = setTimeout(() => {\n      onClose();\n    }, timeout);\n    return () => {\n      clearTimeout(handler);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [timeout]);\n\n  switch (state) {\n    case 'entering':\n      return {\n        style: { ...animateFn('entering', translateY), visibility: 'hidden' },\n        placementStyle: { ...(placementStyle as any), ...commonStyle },\n        onClose,\n      };\n    case 'entered':\n      return {\n        style: {\n          ...animateFn('entered', translateY),\n          transition: getTransition(TRANSITION_TIME),\n        },\n        placementStyle: { ...(placementStyle as any), ...commonStyle },\n        onClose,\n      };\n    case 'exiting':\n      return {\n        style: {\n          ...animateFn('exiting', translateY),\n          transition: getTransition(TRANSITION_TIME),\n        },\n        placementStyle: { ...(placementStyle as any), ...commonStyle },\n        onClose,\n      };\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"useSnackbarAnimation.js","names":["useEffect","EASING_STANDARD","useStackItem","TRANSITION_TIME","slideFromBottom","entering","x","y","opacity","transform","entered","exiting","slideFromTop","slideFromRight","slideFromLeft","placements","style","top","right","animate","state","translateY","left","bottom","commonStyle","position","zIndex","getTransition","timems","defaultAnimation","placementStyle","onClose","undefined","useSnackbarAnimation","ref","timeout","stackItem","closeTimeoutInMilliseconds","placement","animateFn","handler","setTimeout","clearTimeout","visibility","transition"],"sources":["../../../src/Snackbar/useSnackbarAnimation.ts"],"sourcesContent":["import type { CSSProperties, MutableRefObject } from 'react';\nimport { useEffect } from 'react';\n\nimport { EASING_STANDARD } from '../motion';\nimport { useStackItem } from './Stack';\n\nconst TRANSITION_TIME = 150;\nconst slideFromBottom = {\n  entering: (x: string, y: string) => ({\n    opacity: 0.6,\n    transform: `translate(${x}, calc(${y} + 100%))`,\n  }),\n  entered: (x: string, y: string) => ({\n    opacity: 1,\n    transform: `translate(${x}, ${y})`,\n  }),\n  exiting: (x: string, y: string) => ({\n    opacity: 1,\n    transform: `translate(${x}, calc(${y} - 100%))`,\n  }),\n};\n\nconst slideFromTop = {\n  entering: (x: string, y: string) => ({\n    opacity: 0.6,\n    transform: `translate(${x}, calc(${y} - 100%))`,\n  }),\n  entered: (x: string, y: string) => ({\n    opacity: 1,\n    transform: `translate(${x}, ${y})`,\n  }),\n  exiting: (x: string, y: string) => ({\n    opacity: 1,\n    transform: `translate(${x}, calc(${y} + 100%))`,\n  }),\n};\n\nconst slideFromRight = {\n  entering: (x: string, y: string) => ({\n    opacity: 0.6,\n    transform: `translate(calc(${x} + 100%), ${y})`,\n  }),\n  entered: (x: string, y: string) => ({\n    opacity: 1,\n    transform: `translate(${x}, ${y})`,\n  }),\n  exiting: (x: string, y: string) => ({\n    opacity: 0.6,\n    transform: `translate(calc(${x} + 100%), ${y})`,\n  }),\n};\n\nconst slideFromLeft = {\n  entering: (x: string, y: string) => ({\n    opacity: 0.6,\n    transform: `translate(calc(${x} - 100%), ${y})`,\n  }),\n  entered: (x: string, y: string) => ({\n    opacity: 1,\n    transform: `translate(${x}, ${y})`,\n  }),\n  exiting: (x: string, y: string) => ({\n    opacity: 0.6,\n    transform: `translate(calc(${x} - 100%), ${y})`,\n  }),\n};\n\ntype AnimationState = 'entering' | 'entered' | 'exiting';\nconst placements = {\n  'top-right': {\n    style: { top: 3, right: 3 },\n    animate: (state: AnimationState, translateY: number) =>\n      slideFromRight[state]('0px', `${translateY}px`),\n  },\n  'top-center': {\n    style: { top: 3, left: '50%' },\n    animate: (state: AnimationState, translateY: number) =>\n      slideFromBottom[state]('-50%', `${translateY}px`),\n  },\n  'top-left': {\n    style: { top: 3, left: 3 },\n    animate: (state: AnimationState, translateY: number) =>\n      slideFromLeft[state]('0px', `${translateY}px`),\n  },\n  'bottom-right': {\n    style: { bottom: 3, right: 3 },\n    animate: (state: AnimationState, translateY: number) =>\n      slideFromRight[state]('0px', `${-translateY}px`),\n  },\n  'bottom-center': {\n    style: { bottom: 3, left: '50%' },\n    animate: (state: AnimationState, translateY: number) =>\n      slideFromTop[state]('-50%', `${-translateY}px`),\n  },\n  'bottom-left': {\n    style: { bottom: 3, left: 3 },\n    animate: (state: AnimationState, translateY: number) =>\n      slideFromLeft[state]('0px', `${-translateY}px`),\n  },\n};\nconst commonStyle = { position: 'fixed', zIndex: 'snackbar' };\n\nfunction getTransition(timems: number) {\n  return `opacity ${timems}ms ${EASING_STANDARD},transform ${timems}ms ${EASING_STANDARD}`;\n}\n\nconst defaultAnimation = {\n  style: {},\n  placementStyle: {},\n  onClose: undefined,\n};\n\nexport function useSnackbarAnimation(\n  ref: MutableRefObject<HTMLDivElement | null>,\n  timeout: number\n): {\n  style: CSSProperties;\n  placementStyle: CSSProperties;\n  onClose?: () => void;\n} {\n  const stackItem = useStackItem({\n    ref,\n    closeTimeoutInMilliseconds: TRANSITION_TIME,\n  });\n  if (!stackItem) {\n    return defaultAnimation;\n  }\n\n  const { onClose, state, translateY = 0, placement } = stackItem;\n  const placementStyle = placements[placement].style;\n  const animateFn = placements[placement].animate;\n\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  useEffect(() => {\n    const handler = setTimeout(() => {\n      onClose();\n    }, timeout);\n    return () => {\n      clearTimeout(handler);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [timeout]);\n\n  switch (state) {\n    case 'entering':\n      return {\n        style: { ...animateFn('entering', translateY), visibility: 'hidden' },\n        placementStyle: { ...(placementStyle as any), ...commonStyle },\n        onClose,\n      };\n    case 'entered':\n      return {\n        style: {\n          ...animateFn('entered', translateY),\n          transition: getTransition(TRANSITION_TIME),\n        },\n        placementStyle: { ...(placementStyle as any), ...commonStyle },\n        onClose,\n      };\n    case 'exiting':\n      return {\n        style: {\n          ...animateFn('exiting', translateY),\n          transition: getTransition(TRANSITION_TIME),\n        },\n        placementStyle: { ...(placementStyle as any), ...commonStyle },\n        onClose,\n      };\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,13 +1,13 @@
-import type { ElementType, InputHTMLAttributes, ReactElement } from 'react';
-import type { BoxProps } from '../Box';
-export interface SwitchProps extends BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>> {
-    as?: ElementType<any>;
-    checked?: boolean;
-    disabled?: boolean;
-    size?: 'small' | 'default';
-    icon?: ReactElement<{
-        checked?: boolean;
-        disabled?: boolean;
-    }>;
-}
-export declare const Switch: import("react").ForwardRefExoticComponent<Pick<SwitchProps, "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" | "form" | "slot" | "style" | "title" | "pattern" | "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" | "icon" | "multiple" | "list" | "alt" | "autoComplete" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "src" | "step" | "crossOrigin" | "enterKeyHint" | "max" | "min" | "readOnly" | "required"> & import("react").RefAttributes<HTMLInputElement>>;
+import type { ElementType, InputHTMLAttributes, ReactElement } from 'react';
+import type { BoxProps } from '../Box';
+export interface SwitchProps extends BoxProps<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>> {
+    as?: ElementType<any>;
+    checked?: boolean;
+    disabled?: boolean;
+    size?: 'small' | 'default';
+    icon?: ReactElement<{
+        checked?: boolean;
+        disabled?: boolean;
+    }>;
+}
+export declare const Switch: import("react").ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/build/esm/Switch/Switch.js

@@ -1,8 +1,3 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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';
@@ -11,36 +6,42 @@ import { Box } from '../Box';
 import { useTheme } from '../theme';
 import { SelectionControlLabel, SelectionControlText } from '../SelectionControl';
 import { SwitchTrail, SwitchThumb, SwitchCircle } from './styledComponents';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var CheckBoxCore = _CheckBoxCore;
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const 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));
+  const multiplier = size === 'small' ? 0.75 : 1;
+  const BORDER_WIDTH = 2;
+  const TRAIL_WIDTH = 52 * multiplier;
+  const TRAIL_HEIGHT = 32 * multiplier;
+  return {
+    ['--switch-border-width']: rem(BORDER_WIDTH),
+    ['--switch-trail-width']: rem(TRAIL_WIDTH),
+    ['--switch-trail-height']: rem(TRAIL_HEIGHT),
+    ['--switch-icon-size']: rem(TRAIL_HEIGHT / 2),
+    ['--switch-state-layer-size']: rem(40 * multiplier),
+    ['--switch-thumb-size-checked-inactive']: rem(TRAIL_HEIGHT - BORDER_WIDTH * 4),
+    ['--switch-thumb-size-checked-active']: rem(TRAIL_HEIGHT - BORDER_WIDTH * 2),
+    ['--switch-thumb-size-unchecked-inactive']: rem(TRAIL_HEIGHT / 2),
+    ['--switch-thumb-size-unchecked-active']: rem(TRAIL_HEIGHT - BORDER_WIDTH * 2),
+    ...(hasIcon && {
+      ['--switch-thumb-size-unchecked-inactive']: 'var(--switch-thumb-size-checked-inactive)',
+      ['--switch-thumb-size-unchecked-active']: 'var(--switch-thumb-size-checked-active)'
+    })
+  };
 }
-
-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,
-      icon = props.icon,
-      otherProps = _objectWithoutProperties(props, _excluded);
-
-  var color = checked ? 'primary' : 'on.surface';
-  var theme = useTheme();
+const SwitchInner = /*#__PURE__*/forwardRef(function SwitchInner(props, forwardedRef) {
+  const {
+    as: Comp = 'input',
+    disabled,
+    checked,
+    onChange,
+    size = 'default',
+    __css,
+    icon,
+    ...otherProps
+  } = props;
+  const color = checked ? 'primary' : 'on.surface';
+  const theme = useTheme();
   return /*#__PURE__*/_jsxs(Box, {
     display: "inline-block",
     position: "relative",
@@ -51,7 +52,7 @@ var SwitchInner = /*#__PURE__*/forwardRef(function SwitchInner(props, forwardedR
       disabled: disabled
     }), /*#__PURE__*/_jsxs(SwitchThumb, {
       checked: checked,
-      children: [/*#__PURE__*/_jsx(RippleBox, _extends(_extends({
+      children: [/*#__PURE__*/_jsx(RippleBox, {
         as: Comp,
         role: "switch",
         type: "checkbox",
@@ -66,9 +67,9 @@ var SwitchInner = /*#__PURE__*/forwardRef(function SwitchInner(props, forwardedR
         focusOpacity: 0.12,
         center: true,
         disabled: disabled,
-        "data-switch-thumb": ""
-      }, otherProps), {}, {
-        __css: _extends({
+        "data-switch-thumb": "",
+        ...otherProps,
+        __css: {
           top: '50%',
           left: '50%',
           backgroundColor: 'transparent',
@@ -82,37 +83,39 @@ var SwitchInner = /*#__PURE__*/forwardRef(function SwitchInner(props, forwardedR
           border: 'none',
           borderRadius: 'full',
           zIndex: 1,
-          position: 'absolute'
-        }, __css)
-      })), /*#__PURE__*/_jsx(SwitchCircle, {
+          position: 'absolute',
+          ...__css
+        }
+      }), /*#__PURE__*/_jsx(SwitchCircle, {
         checked: checked,
-        children: icon ? /*#__PURE__*/cloneElement(icon, (_cloneElement = {
-          checked: checked
-        }, _defineProperty(_cloneElement, 'data-checkbox-icon', ''), _defineProperty(_cloneElement, "disabled", disabled), _cloneElement)) : null
+        children: icon ? /*#__PURE__*/cloneElement(icon, {
+          checked,
+          ['data-checkbox-icon']: '',
+          disabled
+        }) : 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, _excluded2);
-
-  var inner = /*#__PURE__*/_jsx(CheckBoxCore, _extends({
+export const Switch = /*#__PURE__*/forwardRef(function Switch(props, forwardedRef) {
+  const {
+    as = 'input',
+    icon,
+    disabled,
+    children,
+    ...otherProps
+  } = props;
+  const inner = /*#__PURE__*/_jsx(CheckBoxCore, {
     as: SwitchInner,
     innerAs: as,
     ref: forwardedRef,
     icon: icon,
-    disabled: disabled
-  }, otherProps));
-
+    disabled: disabled,
+    ...otherProps
+  });
   if (!children) {
     return inner;
   }
-
   return /*#__PURE__*/_jsxs(SelectionControlLabel, {
     children: [inner, /*#__PURE__*/_jsx(SelectionControlText, {
       disabled: disabled,