@basic-ui/material 1.0.0-alpha.42 → 1.0.0-alpha.43

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

@@ -1 +1 @@
-{"version":3,"file":"Stack.js","names":["useMemo","useLayoutEffect","createContext","useContext","useEffect","useRef","useState","StackItemContext","displayName","useStackItem","ref","closeTimeoutInMilliseconds","context","onSetHeight","onRemoveItem","posY","placement","isExiting","state","setState","onClose","height","current","getBoundingClientRect","undefined","handle","setTimeout","clearTimeout","translateY","StackContent","gap","maxSize","onAddItemRef","id","items","setCounter","rerender","v","element","itemId","String","push","length","i","setHeightById","item","find","removeItemById","previousLength","filter","y","Array","from","map","StackContext","StackProvider","children","value","addItem","useStack","ctx","Error"],"sources":["../../../src/Snackbar/Stack.tsx"],"sourcesContent":["import {\n  useMemo,\n  useLayoutEffect,\n  createContext,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport type { MutableRefObject, ReactElement, FC, ReactNode } from 'react';\n\nexport type StackPlacement =\n  | 'top-right'\n  | 'top-center'\n  | 'top-left'\n  | 'bottom-right'\n  | 'bottom-center'\n  | 'bottom-left';\n\n// StackItemContext Component\nexport interface StackItemContextProps {\n  posY: number | undefined;\n  isExiting: boolean;\n  onSetHeight(height: number): void;\n  onRemoveItem(): void;\n  placement: StackPlacement;\n}\n\nconst StackItemContext = createContext<StackItemContextProps | null>(null);\nStackItemContext.displayName = 'StackItemContext';\n\ninterface StackItemProps {\n  ref: MutableRefObject<HTMLElement | null>;\n  openTimeoutInMilliseconds?: number;\n  closeTimeoutInMilliseconds?: number;\n}\n\nexport function useStackItem({\n  ref,\n  closeTimeoutInMilliseconds = 110,\n}: StackItemProps) {\n  const context = useContext(StackItemContext);\n  if (!context) {\n    return null;\n  }\n  const { onSetHeight, onRemoveItem, posY, placement, isExiting } = context;\n  /* eslint-disable react-hooks/rules-of-hooks */\n  const [state, setState] = useState<'entering' | 'entered' | 'exiting'>(\n    'entering'\n  );\n\n  function onClose() {\n    setState('exiting');\n  }\n\n  useLayoutEffect(() => {\n    const height = ref.current?.getBoundingClientRect().height ?? 0;\n    onSetHeight(height);\n\n    if (isExiting) {\n      onClose();\n    }\n  });\n\n  useEffect(() => {\n    if (posY !== undefined && state === 'entering') {\n      setState('entered');\n    }\n  }, [state, posY]);\n\n  useLayoutEffect(() => {\n    if (state === 'exiting') {\n      const handle = setTimeout(() => {\n        onRemoveItem();\n      }, closeTimeoutInMilliseconds);\n\n      return () => {\n        clearTimeout(handle);\n      };\n    }\n  }, [state]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return {\n    translateY: posY,\n    state,\n    onClose,\n    placement,\n  };\n  /* eslint-enable react-hooks/rules-of-hooks */\n}\n\nfunction StackContent({\n  gap = 0,\n  placement,\n  maxSize,\n  onAddItemRef,\n}: {\n  gap: number;\n  placement: StackPlacement;\n  maxSize: number;\n  onAddItemRef: MutableRefObject<((element: ReactElement) => void) | null>;\n}) {\n  const id = useRef(0);\n  const items = useRef<StackItem[]>([]);\n  const [, setCounter] = useState(false);\n  function rerender() {\n    setCounter((v) => !v);\n  }\n\n  useEffect(() => {\n    onAddItemRef.current = (element: ReactElement) => {\n      const itemId = String(++id.current);\n\n      items.current.push({\n        id: itemId,\n        height: undefined,\n        element,\n        isExiting: false,\n      });\n      // Stack > maxSize? Close items\n      if (items.current.length > maxSize) {\n        for (let i = 0; i < items.current.length; i++) {\n          if (!items.current[i].isExiting) {\n            items.current[i].isExiting = true;\n            break;\n          }\n        }\n      }\n      rerender();\n    };\n    return () => {\n      onAddItemRef.current = null;\n    };\n  }, [maxSize]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  function setHeightById(id: string, height: number) {\n    const item = items.current.find(({ id: itemId }) => itemId === id);\n    if (item && item.height !== height) {\n      item.height = height;\n      rerender();\n    }\n  }\n\n  function removeItemById(id: string) {\n    const previousLength = items.current.length;\n    items.current = items.current.filter(({ id: itemId }) => itemId !== id);\n    if (items.current.length !== previousLength) {\n      rerender();\n    }\n  }\n\n  let y = 0;\n  return (\n    <div data-stack-root=\"\">\n      {Array.from(items.current).map((item) => {\n        let posY: number | undefined = undefined;\n        const height = item.height;\n        if (height) {\n          posY = y;\n          y += height + gap;\n        }\n\n        return (\n          <StackItemContext.Provider\n            key={item.id}\n            value={{\n              isExiting: item.isExiting,\n              posY,\n              onSetHeight: (height: number) => {\n                if (height === item.height) {\n                  return;\n                }\n                setHeightById(item.id, height);\n              },\n              onRemoveItem: () => removeItemById(item.id),\n              placement,\n            }}\n          >\n            {item.element}\n          </StackItemContext.Provider>\n        );\n      })}\n    </div>\n  );\n}\n\nexport interface StackContextProps {\n  addItem: (element: ReactElement) => void;\n}\n\nconst StackContext = createContext<StackContextProps | null>(null);\n\ninterface StackItem {\n  id: string;\n  element: ReactElement;\n  height: number | undefined;\n  isExiting: boolean;\n}\n\nexport const StackProvider: FC<{\n  children?: ReactNode | ReactNode[];\n  gap?: number;\n  placement?:\n    | 'top-right'\n    | 'top-center'\n    | 'top-left'\n    | 'bottom-right'\n    | 'bottom-center'\n    | 'bottom-left';\n  maxSize?: number;\n}> = ({ children, gap = 8, placement = 'top-right', maxSize = 3 }) => {\n  const onAddItemRef = useRef<(element: ReactElement) => void>(null);\n  const value = useMemo(\n    () => ({\n      addItem: (element: ReactElement) => onAddItemRef.current?.(element),\n    }),\n    []\n  );\n\n  return (\n    <StackContext.Provider value={value}>\n      {children}\n      <StackContent\n        gap={gap}\n        placement={placement}\n        maxSize={maxSize}\n        onAddItemRef={onAddItemRef}\n      />\n    </StackContext.Provider>\n  );\n};\n\nexport function useStack(): StackContextProps {\n  const ctx = useContext(StackContext);\n  if (!ctx) {\n    throw new Error('useStack must be used within a StackContext.Provider');\n  }\n  return ctx;\n}\n"],"mappings":"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"}
+{"version":3,"file":"Stack.js","names":["useMemo","useLayoutEffect","createContext","useContext","useEffect","useRef","useState","StackItemContext","displayName","useStackItem","ref","closeTimeoutInMilliseconds","context","onSetHeight","onRemoveItem","posY","placement","isExiting","state","setState","onClose","height","current","getBoundingClientRect","undefined","handle","setTimeout","clearTimeout","translateY","StackContent","gap","maxSize","onAddItemRef","id","items","setCounter","rerender","v","element","itemId","String","push","length","i","setHeightById","item","find","removeItemById","previousLength","filter","y","Array","from","map","StackContext","StackProvider","children","value","addItem","useStack","ctx","Error"],"sources":["../../../src/Snackbar/Stack.tsx"],"sourcesContent":["import {\r\n  useMemo,\r\n  useLayoutEffect,\r\n  createContext,\r\n  useContext,\r\n  useEffect,\r\n  useRef,\r\n  useState,\r\n} from 'react';\r\nimport type { MutableRefObject, ReactElement, FC, ReactNode } from 'react';\r\n\r\nexport type StackPlacement =\r\n  | 'top-right'\r\n  | 'top-center'\r\n  | 'top-left'\r\n  | 'bottom-right'\r\n  | 'bottom-center'\r\n  | 'bottom-left';\r\n\r\n// StackItemContext Component\r\nexport interface StackItemContextProps {\r\n  posY: number | undefined;\r\n  isExiting: boolean;\r\n  onSetHeight(height: number): void;\r\n  onRemoveItem(): void;\r\n  placement: StackPlacement;\r\n}\r\n\r\nconst StackItemContext = createContext<StackItemContextProps | null>(null);\r\nStackItemContext.displayName = 'StackItemContext';\r\n\r\ninterface StackItemProps {\r\n  ref: MutableRefObject<HTMLElement | null>;\r\n  openTimeoutInMilliseconds?: number;\r\n  closeTimeoutInMilliseconds?: number;\r\n}\r\n\r\nexport function useStackItem({\r\n  ref,\r\n  closeTimeoutInMilliseconds = 110,\r\n}: StackItemProps) {\r\n  const context = useContext(StackItemContext);\r\n  if (!context) {\r\n    return null;\r\n  }\r\n  const { onSetHeight, onRemoveItem, posY, placement, isExiting } = context;\r\n  /* eslint-disable react-hooks/rules-of-hooks */\r\n  const [state, setState] = useState<'entering' | 'entered' | 'exiting'>(\r\n    'entering'\r\n  );\r\n\r\n  function onClose() {\r\n    setState('exiting');\r\n  }\r\n\r\n  useLayoutEffect(() => {\r\n    const height = ref.current?.getBoundingClientRect().height ?? 0;\r\n    onSetHeight(height);\r\n\r\n    if (isExiting) {\r\n      onClose();\r\n    }\r\n  });\r\n\r\n  useEffect(() => {\r\n    if (posY !== undefined && state === 'entering') {\r\n      setState('entered');\r\n    }\r\n  }, [state, posY]);\r\n\r\n  useLayoutEffect(() => {\r\n    if (state === 'exiting') {\r\n      const handle = setTimeout(() => {\r\n        onRemoveItem();\r\n      }, closeTimeoutInMilliseconds);\r\n\r\n      return () => {\r\n        clearTimeout(handle);\r\n      };\r\n    }\r\n  }, [state]); // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n  return {\r\n    translateY: posY,\r\n    state,\r\n    onClose,\r\n    placement,\r\n  };\r\n  /* eslint-enable react-hooks/rules-of-hooks */\r\n}\r\n\r\nfunction StackContent({\r\n  gap = 0,\r\n  placement,\r\n  maxSize,\r\n  onAddItemRef,\r\n}: {\r\n  gap: number;\r\n  placement: StackPlacement;\r\n  maxSize: number;\r\n  onAddItemRef: MutableRefObject<((element: ReactElement) => void) | null>;\r\n}) {\r\n  const id = useRef(0);\r\n  const items = useRef<StackItem[]>([]);\r\n  const [, setCounter] = useState(false);\r\n  function rerender() {\r\n    setCounter((v) => !v);\r\n  }\r\n\r\n  useEffect(() => {\r\n    onAddItemRef.current = (element: ReactElement) => {\r\n      const itemId = String(++id.current);\r\n\r\n      items.current.push({\r\n        id: itemId,\r\n        height: undefined,\r\n        element,\r\n        isExiting: false,\r\n      });\r\n      // Stack > maxSize? Close items\r\n      if (items.current.length > maxSize) {\r\n        for (let i = 0; i < items.current.length; i++) {\r\n          if (!items.current[i].isExiting) {\r\n            items.current[i].isExiting = true;\r\n            break;\r\n          }\r\n        }\r\n      }\r\n      rerender();\r\n    };\r\n    return () => {\r\n      onAddItemRef.current = null;\r\n    };\r\n  }, [maxSize]); // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n  function setHeightById(id: string, height: number) {\r\n    const item = items.current.find(({ id: itemId }) => itemId === id);\r\n    if (item && item.height !== height) {\r\n      item.height = height;\r\n      rerender();\r\n    }\r\n  }\r\n\r\n  function removeItemById(id: string) {\r\n    const previousLength = items.current.length;\r\n    items.current = items.current.filter(({ id: itemId }) => itemId !== id);\r\n    if (items.current.length !== previousLength) {\r\n      rerender();\r\n    }\r\n  }\r\n\r\n  let y = 0;\r\n  return (\r\n    <div data-stack-root=\"\">\r\n      {Array.from(items.current).map((item) => {\r\n        let posY: number | undefined = undefined;\r\n        const height = item.height;\r\n        if (height) {\r\n          posY = y;\r\n          y += height + gap;\r\n        }\r\n\r\n        return (\r\n          <StackItemContext.Provider\r\n            key={item.id}\r\n            value={{\r\n              isExiting: item.isExiting,\r\n              posY,\r\n              onSetHeight: (height: number) => {\r\n                if (height === item.height) {\r\n                  return;\r\n                }\r\n                setHeightById(item.id, height);\r\n              },\r\n              onRemoveItem: () => removeItemById(item.id),\r\n              placement,\r\n            }}\r\n          >\r\n            {item.element}\r\n          </StackItemContext.Provider>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport interface StackContextProps {\r\n  addItem: (element: ReactElement) => void;\r\n}\r\n\r\nconst StackContext = createContext<StackContextProps | null>(null);\r\n\r\ninterface StackItem {\r\n  id: string;\r\n  element: ReactElement;\r\n  height: number | undefined;\r\n  isExiting: boolean;\r\n}\r\n\r\nexport const StackProvider: FC<{\r\n  children?: ReactNode | ReactNode[];\r\n  gap?: number;\r\n  placement?:\r\n    | 'top-right'\r\n    | 'top-center'\r\n    | 'top-left'\r\n    | 'bottom-right'\r\n    | 'bottom-center'\r\n    | 'bottom-left';\r\n  maxSize?: number;\r\n}> = ({ children, gap = 8, placement = 'top-right', maxSize = 3 }) => {\r\n  const onAddItemRef = useRef<(element: ReactElement) => void>(null);\r\n  const value = useMemo(\r\n    () => ({\r\n      addItem: (element: ReactElement) => onAddItemRef.current?.(element),\r\n    }),\r\n    []\r\n  );\r\n\r\n  return (\r\n    <StackContext.Provider value={value}>\r\n      {children}\r\n      <StackContent\r\n        gap={gap}\r\n        placement={placement}\r\n        maxSize={maxSize}\r\n        onAddItemRef={onAddItemRef}\r\n      />\r\n    </StackContext.Provider>\r\n  );\r\n};\r\n\r\nexport function useStack(): StackContextProps {\r\n  const ctx = useContext(StackContext);\r\n  if (!ctx) {\r\n    throw new Error('useStack must be used within a StackContext.Provider');\r\n  }\r\n  return ctx;\r\n}\r\n"],"mappings":"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"}

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

@@ -1,3 +1,3 @@
-export * from './Snackbar';
-export * from './Stack';
-export * from './useSnackbarAnimation';
+export * from './Snackbar';
+export * from './Stack';
+export * from './useSnackbarAnimation';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/Snackbar/index.ts"],"sourcesContent":["export * from './Snackbar';\nexport * from './Stack';\nexport * from './useSnackbarAnimation';\n"],"mappings":"AAAA,cAAc,YAAd;AACA,cAAc,SAAd;AACA,cAAc,wBAAd"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/Snackbar/index.ts"],"sourcesContent":["export * from './Snackbar';\r\nexport * from './Stack';\r\nexport * from './useSnackbarAnimation';\r\n"],"mappings":"AAAA,cAAc,YAAd;AACA,cAAc,SAAd;AACA,cAAc,wBAAd"}

package/build/esm/Snackbar/useSnackbarAnimation.d.ts

@@ -1,6 +1,6 @@
-import type { CSSProperties, MutableRefObject } from 'react';
-export declare function useSnackbarAnimation(ref: MutableRefObject<HTMLDivElement | null>, timeout: number): {
-    style: CSSProperties;
-    placementStyle: CSSProperties;
-    onClose?: () => void;
-};
+import type { CSSProperties, MutableRefObject } from 'react';
+export declare function useSnackbarAnimation(ref: MutableRefObject<HTMLDivElement | null>, timeout: number): {
+    style: CSSProperties;
+    placementStyle: CSSProperties;
+    onClose?: () => void;
+};

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":";AACA,SAASA,SAAT,QAA0B,OAA1B;AAEA,SAASC,eAAT,QAAgC,WAAhC;AACA,SAASC,YAAT,QAA6B,SAA7B;AAEA,IAAMC,eAAe,GAAG,GAAxB;AACA,IAAMC,eAAe,GAAG;EACtBC,QAAQ,EAAE,kBAACC,CAAD,EAAYC,CAAZ;IAAA,OAA2B;MACnCC,OAAO,EAAE,GAD0B;MAEnCC,SAAS,sBAAeH,CAAf,oBAA0BC,CAA1B;IAF0B,CAA3B;EAAA,CADY;EAKtBG,OAAO,EAAE,iBAACJ,CAAD,EAAYC,CAAZ;IAAA,OAA2B;MAClCC,OAAO,EAAE,CADyB;MAElCC,SAAS,sBAAeH,CAAf,eAAqBC,CAArB;IAFyB,CAA3B;EAAA,CALa;EAStBI,OAAO,EAAE,iBAACL,CAAD,EAAYC,CAAZ;IAAA,OAA2B;MAClCC,OAAO,EAAE,CADyB;MAElCC,SAAS,sBAAeH,CAAf,oBAA0BC,CAA1B;IAFyB,CAA3B;EAAA;AATa,CAAxB;AAeA,IAAMK,YAAY,GAAG;EACnBP,QAAQ,EAAE,kBAACC,CAAD,EAAYC,CAAZ;IAAA,OAA2B;MACnCC,OAAO,EAAE,GAD0B;MAEnCC,SAAS,sBAAeH,CAAf,oBAA0BC,CAA1B;IAF0B,CAA3B;EAAA,CADS;EAKnBG,OAAO,EAAE,iBAACJ,CAAD,EAAYC,CAAZ;IAAA,OAA2B;MAClCC,OAAO,EAAE,CADyB;MAElCC,SAAS,sBAAeH,CAAf,eAAqBC,CAArB;IAFyB,CAA3B;EAAA,CALU;EASnBI,OAAO,EAAE,iBAACL,CAAD,EAAYC,CAAZ;IAAA,OAA2B;MAClCC,OAAO,EAAE,CADyB;MAElCC,SAAS,sBAAeH,CAAf,oBAA0BC,CAA1B;IAFyB,CAA3B;EAAA;AATU,CAArB;AAeA,IAAMM,cAAc,GAAG;EACrBR,QAAQ,EAAE,kBAACC,CAAD,EAAYC,CAAZ;IAAA,OAA2B;MACnCC,OAAO,EAAE,GAD0B;MAEnCC,SAAS,2BAAoBH,CAApB,uBAAkCC,CAAlC;IAF0B,CAA3B;EAAA,CADW;EAKrBG,OAAO,EAAE,iBAACJ,CAAD,EAAYC,CAAZ;IAAA,OAA2B;MAClCC,OAAO,EAAE,CADyB;MAElCC,SAAS,sBAAeH,CAAf,eAAqBC,CAArB;IAFyB,CAA3B;EAAA,CALY;EASrBI,OAAO,EAAE,iBAACL,CAAD,EAAYC,CAAZ;IAAA,OAA2B;MAClCC,OAAO,EAAE,GADyB;MAElCC,SAAS,2BAAoBH,CAApB,uBAAkCC,CAAlC;IAFyB,CAA3B;EAAA;AATY,CAAvB;AAeA,IAAMO,aAAa,GAAG;EACpBT,QAAQ,EAAE,kBAACC,CAAD,EAAYC,CAAZ;IAAA,OAA2B;MACnCC,OAAO,EAAE,GAD0B;MAEnCC,SAAS,2BAAoBH,CAApB,uBAAkCC,CAAlC;IAF0B,CAA3B;EAAA,CADU;EAKpBG,OAAO,EAAE,iBAACJ,CAAD,EAAYC,CAAZ;IAAA,OAA2B;MAClCC,OAAO,EAAE,CADyB;MAElCC,SAAS,sBAAeH,CAAf,eAAqBC,CAArB;IAFyB,CAA3B;EAAA,CALW;EASpBI,OAAO,EAAE,iBAACL,CAAD,EAAYC,CAAZ;IAAA,OAA2B;MAClCC,OAAO,EAAE,GADyB;MAElCC,SAAS,2BAAoBH,CAApB,uBAAkCC,CAAlC;IAFyB,CAA3B;EAAA;AATW,CAAtB;AAgBA,IAAMQ,UAAU,GAAG;EACjB,aAAa;IACXC,KAAK,EAAE;MAAEC,GAAG,EAAE,CAAP;MAAUC,KAAK,EAAE;IAAjB,CADI;IAEXC,OAAO,EAAE,iBAACC,KAAD,EAAwBC,UAAxB;MAAA,OACPR,cAAc,CAACO,KAAD,CAAd,CAAsB,KAAtB,YAAgCC,UAAhC,QADO;IAAA;EAFE,CADI;EAMjB,cAAc;IACZL,KAAK,EAAE;MAAEC,GAAG,EAAE,CAAP;MAAUK,IAAI,EAAE;IAAhB,CADK;IAEZH,OAAO,EAAE,iBAACC,KAAD,EAAwBC,UAAxB;MAAA,OACPjB,eAAe,CAACgB,KAAD,CAAf,CAAuB,MAAvB,YAAkCC,UAAlC,QADO;IAAA;EAFG,CANG;EAWjB,YAAY;IACVL,KAAK,EAAE;MAAEC,GAAG,EAAE,CAAP;MAAUK,IAAI,EAAE;IAAhB,CADG;IAEVH,OAAO,EAAE,iBAACC,KAAD,EAAwBC,UAAxB;MAAA,OACPP,aAAa,CAACM,KAAD,CAAb,CAAqB,KAArB,YAA+BC,UAA/B,QADO;IAAA;EAFC,CAXK;EAgBjB,gBAAgB;IACdL,KAAK,EAAE;MAAEO,MAAM,EAAE,CAAV;MAAaL,KAAK,EAAE;IAApB,CADO;IAEdC,OAAO,EAAE,iBAACC,KAAD,EAAwBC,UAAxB;MAAA,OACPR,cAAc,CAACO,KAAD,CAAd,CAAsB,KAAtB,YAAgC,CAACC,UAAjC,QADO;IAAA;EAFK,CAhBC;EAqBjB,iBAAiB;IACfL,KAAK,EAAE;MAAEO,MAAM,EAAE,CAAV;MAAaD,IAAI,EAAE;IAAnB,CADQ;IAEfH,OAAO,EAAE,iBAACC,KAAD,EAAwBC,UAAxB;MAAA,OACPT,YAAY,CAACQ,KAAD,CAAZ,CAAoB,MAApB,YAA+B,CAACC,UAAhC,QADO;IAAA;EAFM,CArBA;EA0BjB,eAAe;IACbL,KAAK,EAAE;MAAEO,MAAM,EAAE,CAAV;MAAaD,IAAI,EAAE;IAAnB,CADM;IAEbH,OAAO,EAAE,iBAACC,KAAD,EAAwBC,UAAxB;MAAA,OACPP,aAAa,CAACM,KAAD,CAAb,CAAqB,KAArB,YAA+B,CAACC,UAAhC,QADO;IAAA;EAFI;AA1BE,CAAnB;AAgCA,IAAMG,WAAW,GAAG;EAAEC,QAAQ,EAAE,OAAZ;EAAqBC,MAAM,EAAE;AAA7B,CAApB;;AAEA,SAASC,aAAT,CAAuBC,MAAvB,EAAuC;EACrC,yBAAkBA,MAAlB,gBAA8B3B,eAA9B,wBAA2D2B,MAA3D,gBAAuE3B,eAAvE;AACD;;AAED,IAAM4B,gBAAgB,GAAG;EACvBb,KAAK,EAAE,EADgB;EAEvBc,cAAc,EAAE,EAFO;EAGvBC,OAAO,EAAEC;AAHc,CAAzB;AAMA,OAAO,SAASC,oBAAT,CACLC,GADK,EAELC,OAFK,EAOL;EACA,IAAMC,SAAS,GAAGlC,YAAY,CAAC;IAC7BgC,GAAG,EAAHA,GAD6B;IAE7BG,0BAA0B,EAAElC;EAFC,CAAD,CAA9B;;EAIA,IAAI,CAACiC,SAAL,EAAgB;IACd,OAAOP,gBAAP;EACD;;EAED,IAAQE,OAAR,GAAsDK,SAAtD,CAAQL,OAAR;EAAA,IAAiBX,KAAjB,GAAsDgB,SAAtD,CAAiBhB,KAAjB;EAAA,4BAAsDgB,SAAtD,CAAwBf,UAAxB;EAAA,IAAwBA,UAAxB,sCAAqC,CAArC;EAAA,IAAwCiB,SAAxC,GAAsDF,SAAtD,CAAwCE,SAAxC;EACA,IAAMR,cAAc,GAAGf,UAAU,CAACuB,SAAD,CAAV,CAAsBtB,KAA7C;EACA,IAAMuB,SAAS,GAAGxB,UAAU,CAACuB,SAAD,CAAV,CAAsBnB,OAAxC,CAXA,CAaA;;EACAnB,SAAS,CAAC,YAAM;IACd,IAAMwC,OAAO,GAAGC,UAAU,CAAC,YAAM;MAC/BV,OAAO;IACR,CAFyB,EAEvBI,OAFuB,CAA1B;IAGA,OAAO,YAAM;MACXO,YAAY,CAACF,OAAD,CAAZ;IACD,CAFD,CAJc,CAOd;EACD,CARQ,EAQN,CAACL,OAAD,CARM,CAAT;;EAUA,QAAQf,KAAR;IACE,KAAK,UAAL;MACE,OAAO;QACLJ,KAAK,wBAAOuB,SAAS,CAAC,UAAD,EAAalB,UAAb,CAAhB;UAA0CsB,UAAU,EAAE;QAAtD,EADA;QAELb,cAAc,wBAAQA,cAAR,GAAmCN,WAAnC,CAFT;QAGLO,OAAO,EAAPA;MAHK,CAAP;;IAKF,KAAK,SAAL;MACE,OAAO;QACLf,KAAK,wBACAuB,SAAS,CAAC,SAAD,EAAYlB,UAAZ,CADT;UAEHuB,UAAU,EAAEjB,aAAa,CAACxB,eAAD;QAFtB,EADA;QAKL2B,cAAc,wBAAQA,cAAR,GAAmCN,WAAnC,CALT;QAMLO,OAAO,EAAPA;MANK,CAAP;;IAQF,KAAK,SAAL;MACE,OAAO;QACLf,KAAK,wBACAuB,SAAS,CAAC,SAAD,EAAYlB,UAAZ,CADT;UAEHuB,UAAU,EAAEjB,aAAa,CAACxB,eAAD;QAFtB,EADA;QAKL2B,cAAc,wBAAQA,cAAR,GAAmCN,WAAnC,CALT;QAMLO,OAAO,EAAPA;MANK,CAAP;EAjBJ;AA0BD"}
+{"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';\r\nimport { useEffect } from 'react';\r\n\r\nimport { EASING_STANDARD } from '../motion';\r\nimport { useStackItem } from './Stack';\r\n\r\nconst TRANSITION_TIME = 150;\r\nconst slideFromBottom = {\r\n  entering: (x: string, y: string) => ({\r\n    opacity: 0.6,\r\n    transform: `translate(${x}, calc(${y} + 100%))`,\r\n  }),\r\n  entered: (x: string, y: string) => ({\r\n    opacity: 1,\r\n    transform: `translate(${x}, ${y})`,\r\n  }),\r\n  exiting: (x: string, y: string) => ({\r\n    opacity: 1,\r\n    transform: `translate(${x}, calc(${y} - 100%))`,\r\n  }),\r\n};\r\n\r\nconst slideFromTop = {\r\n  entering: (x: string, y: string) => ({\r\n    opacity: 0.6,\r\n    transform: `translate(${x}, calc(${y} - 100%))`,\r\n  }),\r\n  entered: (x: string, y: string) => ({\r\n    opacity: 1,\r\n    transform: `translate(${x}, ${y})`,\r\n  }),\r\n  exiting: (x: string, y: string) => ({\r\n    opacity: 1,\r\n    transform: `translate(${x}, calc(${y} + 100%))`,\r\n  }),\r\n};\r\n\r\nconst slideFromRight = {\r\n  entering: (x: string, y: string) => ({\r\n    opacity: 0.6,\r\n    transform: `translate(calc(${x} + 100%), ${y})`,\r\n  }),\r\n  entered: (x: string, y: string) => ({\r\n    opacity: 1,\r\n    transform: `translate(${x}, ${y})`,\r\n  }),\r\n  exiting: (x: string, y: string) => ({\r\n    opacity: 0.6,\r\n    transform: `translate(calc(${x} + 100%), ${y})`,\r\n  }),\r\n};\r\n\r\nconst slideFromLeft = {\r\n  entering: (x: string, y: string) => ({\r\n    opacity: 0.6,\r\n    transform: `translate(calc(${x} - 100%), ${y})`,\r\n  }),\r\n  entered: (x: string, y: string) => ({\r\n    opacity: 1,\r\n    transform: `translate(${x}, ${y})`,\r\n  }),\r\n  exiting: (x: string, y: string) => ({\r\n    opacity: 0.6,\r\n    transform: `translate(calc(${x} - 100%), ${y})`,\r\n  }),\r\n};\r\n\r\ntype AnimationState = 'entering' | 'entered' | 'exiting';\r\nconst placements = {\r\n  'top-right': {\r\n    style: { top: 3, right: 3 },\r\n    animate: (state: AnimationState, translateY: number) =>\r\n      slideFromRight[state]('0px', `${translateY}px`),\r\n  },\r\n  'top-center': {\r\n    style: { top: 3, left: '50%' },\r\n    animate: (state: AnimationState, translateY: number) =>\r\n      slideFromBottom[state]('-50%', `${translateY}px`),\r\n  },\r\n  'top-left': {\r\n    style: { top: 3, left: 3 },\r\n    animate: (state: AnimationState, translateY: number) =>\r\n      slideFromLeft[state]('0px', `${translateY}px`),\r\n  },\r\n  'bottom-right': {\r\n    style: { bottom: 3, right: 3 },\r\n    animate: (state: AnimationState, translateY: number) =>\r\n      slideFromRight[state]('0px', `${-translateY}px`),\r\n  },\r\n  'bottom-center': {\r\n    style: { bottom: 3, left: '50%' },\r\n    animate: (state: AnimationState, translateY: number) =>\r\n      slideFromTop[state]('-50%', `${-translateY}px`),\r\n  },\r\n  'bottom-left': {\r\n    style: { bottom: 3, left: 3 },\r\n    animate: (state: AnimationState, translateY: number) =>\r\n      slideFromLeft[state]('0px', `${-translateY}px`),\r\n  },\r\n};\r\nconst commonStyle = { position: 'fixed', zIndex: 'snackbar' };\r\n\r\nfunction getTransition(timems: number) {\r\n  return `opacity ${timems}ms ${EASING_STANDARD},transform ${timems}ms ${EASING_STANDARD}`;\r\n}\r\n\r\nconst defaultAnimation = {\r\n  style: {},\r\n  placementStyle: {},\r\n  onClose: undefined,\r\n};\r\n\r\nexport function useSnackbarAnimation(\r\n  ref: MutableRefObject<HTMLDivElement | null>,\r\n  timeout: number\r\n): {\r\n  style: CSSProperties;\r\n  placementStyle: CSSProperties;\r\n  onClose?: () => void;\r\n} {\r\n  const stackItem = useStackItem({\r\n    ref,\r\n    closeTimeoutInMilliseconds: TRANSITION_TIME,\r\n  });\r\n  if (!stackItem) {\r\n    return defaultAnimation;\r\n  }\r\n\r\n  const { onClose, state, translateY = 0, placement } = stackItem;\r\n  const placementStyle = placements[placement].style;\r\n  const animateFn = placements[placement].animate;\r\n\r\n  // eslint-disable-next-line react-hooks/rules-of-hooks\r\n  useEffect(() => {\r\n    const handler = setTimeout(() => {\r\n      onClose();\r\n    }, timeout);\r\n    return () => {\r\n      clearTimeout(handler);\r\n    };\r\n    // eslint-disable-next-line react-hooks/exhaustive-deps\r\n  }, [timeout]);\r\n\r\n  switch (state) {\r\n    case 'entering':\r\n      return {\r\n        style: { ...animateFn('entering', translateY), visibility: 'hidden' },\r\n        placementStyle: { ...(placementStyle as any), ...commonStyle },\r\n        onClose,\r\n      };\r\n    case 'entered':\r\n      return {\r\n        style: {\r\n          ...animateFn('entered', translateY),\r\n          transition: getTransition(TRANSITION_TIME),\r\n        },\r\n        placementStyle: { ...(placementStyle as any), ...commonStyle },\r\n        onClose,\r\n      };\r\n    case 'exiting':\r\n      return {\r\n        style: {\r\n          ...animateFn('exiting', translateY),\r\n          transition: getTransition(TRANSITION_TIME),\r\n        },\r\n        placementStyle: { ...(placementStyle as any), ...commonStyle },\r\n        onClose,\r\n      };\r\n  }\r\n}\r\n"],"mappings":"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"}

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" | "variant" | "size" | "hidden" | "as" | "sx" | "__css" | "tx" | "theme" | "borderX" | "borderY" | "gridGap" | "gridColumnGap" | "gridRowGap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "value" | "form" | "pattern" | "list" | "icon" | "step" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "multiple" | "alt" | "autoComplete" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "src" | "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<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" | "variant" | "size" | "hidden" | "as" | "sx" | "__css" | "tx" | "theme" | "borderX" | "borderY" | "gridGap" | "gridColumnGap" | "gridRowGap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "value" | "form" | "pattern" | "list" | "icon" | "step" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "multiple" | "alt" | "autoComplete" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "src" | "crossOrigin" | "enterKeyHint" | "max" | "min" | "readOnly" | "required"> & import("react").RefAttributes<HTMLInputElement>>;

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';\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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"}
+{"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":";;;;;AACA,SAASA,YAAT,EAAuBC,UAAvB,QAAyC,OAAzC;AACA,SAASC,QAAQ,IAAIC,aAArB,QAA0C,gBAA1C;AACA,SAASC,GAAT,QAAoB,UAApB;AAGA,SAASC,SAAT,QAA0B,WAA1B;AAEA,SAASC,GAAT,QAAoB,QAApB;AACA,SAASC,QAAT,QAAyB,UAAzB;AACA,SACEC,qBADF,EAEEC,oBAFF,QAGO,qBAHP;AAIA,SAASC,WAAT,EAAsBC,WAAtB,EAAmCC,YAAnC,QAAuD,oBAAvD;;;AAEA,IAAMC,YAIL,GAAGV,aAJJ;;AAeA,SAASW,mBAAT,CAA6BC,IAA7B,EAAwDC,OAAxD,EAA0E;EAAA;;EACxE,IAAMC,UAAU,GAAGF,IAAI,KAAK,OAAT,GAAmB,IAAnB,GAA0B,CAA7C;EACA,IAAMG,YAAY,GAAG,CAArB;EACA,IAAMC,WAAW,GAAG,KAAKF,UAAzB;EACA,IAAMG,YAAY,GAAG,KAAKH,UAA1B;EACA,4DACG,uBADH,EAC6Bb,GAAG,CAACc,YAAD,CADhC,8BAEG,sBAFH,EAE4Bd,GAAG,CAACe,WAAD,CAF/B,8BAGG,uBAHH,EAG6Bf,GAAG,CAACgB,YAAD,CAHhC,8BAIG,oBAJH,EAI0BhB,GAAG,CAACgB,YAAY,GAAG,CAAhB,CAJ7B,8BAKG,2BALH,EAKiChB,GAAG,CAAC,KAAKa,UAAN,CALpC,8BAMG,sCANH,EAM4Cb,GAAG,CAC3CgB,YAAY,GAAGF,YAAY,GAAG,CADa,CAN/C,8BASG,oCATH,EAS0Cd,GAAG,CACzCgB,YAAY,GAAGF,YAAY,GAAG,CADW,CAT7C,8BAYG,wCAZH,EAY8Cd,GAAG,CAACgB,YAAY,GAAG,CAAhB,CAZjD,8BAaG,sCAbH,EAa4ChB,GAAG,CAC3CgB,YAAY,GAAGF,YAAY,GAAG,CADa,CAb/C,eAgBMF,OAAO,sCACR,wCADQ,EAEP,2CAFO,yBAGR,sCAHQ,EAIP,yCAJO,QAhBb;AAuBD;;AAED,IAAMK,WAAW,gBAAGpB,UAAU,CAC5B,SAASoB,WAAT,CAAqBC,KAArB,EAA4BC,YAA5B,EAA0C;EAAA;;EACxC,gBASID,KATJ,CACEE,EADF;EAAA,IACMC,IADN,0BACa,OADb;EAAA,IAEEC,QAFF,GASIJ,KATJ,CAEEI,QAFF;EAAA,IAGEC,OAHF,GASIL,KATJ,CAGEK,OAHF;EAAA,IAIEC,QAJF,GASIN,KATJ,CAIEM,QAJF;EAAA,kBASIN,KATJ,CAKEP,IALF;EAAA,IAKEA,IALF,4BAKS,SALT;EAAA,IAMEc,KANF,GASIP,KATJ,CAMEO,KANF;EAAA,IAOEC,IAPF,GASIR,KATJ,CAOEQ,IAPF;EAAA,IAQKC,UARL,4BASIT,KATJ;;EAUA,IAAMU,KAAK,GAAGL,OAAO,GAAG,SAAH,GAAe,YAApC;EACA,IAAMM,KAAK,GAAG1B,QAAQ,EAAtB;EAEA,oBACE,MAAC,GAAD;IACE,OAAO,EAAC,cADV;IAEE,QAAQ,EAAC,UAFX;IAGE,QAAQ,EAAC,MAHX;IAIE,EAAE,EAAEO,mBAAmB,CAACC,IAAD,EAAOmB,OAAO,CAACJ,IAAD,CAAd,CAJzB;IAAA,wBAME,KAAC,WAAD;MAAa,OAAO,EAAEH,OAAtB;MAA+B,QAAQ,EAAED;IAAzC,EANF,eAOE,MAAC,WAAD;MAAa,OAAO,EAAEC,OAAtB;MAAA,wBACE,KAAC,SAAD;QAME,EAAE,EAAEF,IANN;QAOE,IAAI,EAAC,QAPP;QAQE,IAAI,EAAC,UARP;QASE,OAAO,EAAEE,OATX;QAUE,QAAQ,EAAEC,QAVZ;QAWE,KAAK,EAAEK,KAXT;QAYE,GAAG,EAAEV,YAZP;QAaE,gBAAcI,OAAO,GAAG,MAAH,GAAY,OAbnC;QAcE,WAAW,EAAEK,KAdf;QAeE,WAAW,EAAE,CAff;QAgBE,YAAY,EAAE,IAhBhB;QAiBE,YAAY,EAAE,IAjBhB;QAkBE,MAAM,EAAE,IAlBV;QAmBE,QAAQ,EAAEN,QAnBZ;QAoBE,qBAAkB;MApBpB,GAqBMK,UArBN;QAsBE,KAAK;UACHI,GAAG,EAAE,KADF;UAEHC,IAAI,EAAE,KAFH;UAGHC,eAAe,EAAE,aAHd;UAIHC,SAAS,EAAE,uBAJR;UAKHC,KAAK,EAAE,MALJ;UAMHC,MAAM,EAAE,MANL;UAOHC,UAAU,EAAE,MAPT;UAQH,UAAU;YACRC,OAAO,EAAE;UADD,CARP;UAWHC,MAAM,EAAE,MAXL;UAYHC,YAAY,EAAE,MAZX;UAaHC,MAAM,EAAE,CAbL;UAcHC,QAAQ,EAAE;QAdP,GAeAjB,KAfA;MAtBP,GADF,eAyCE,KAAC,YAAD;QAAc,OAAO,EAAEF,OAAvB;QAAA,UACGG,IAAI,gBACD9B,YAAY,CAAC8B,IAAD;UACVH,OAAO,EAAPA;QADU,kCAET,oBAFS,EAEqB,EAFrB,8CAGVD,QAHU,kBADX,GAMD;MAPN,EAzCF;IAAA,EAPF;EAAA,EADF;AA6DD,CA5E2B,CAA9B;AA+EA,OAAO,IAAMqB,MAAM,gBAAG9C,UAAU,CAAgC,SAAS8C,MAAT,CAC9DzB,KAD8D,EAE9DC,YAF8D,EAG9D;EACA,iBAAkED,KAAlE,CAAQE,EAAR;EAAA,IAAQA,EAAR,2BAAa,OAAb;EAAA,IAAsBM,IAAtB,GAAkER,KAAlE,CAAsBQ,IAAtB;EAAA,IAA4BJ,QAA5B,GAAkEJ,KAAlE,CAA4BI,QAA5B;EAAA,IAAsCsB,QAAtC,GAAkE1B,KAAlE,CAAsC0B,QAAtC;EAAA,IAAmDjB,UAAnD,4BAAkET,KAAlE;;EAEA,IAAM2B,KAAK,gBACT,KAAC,YAAD;IACE,EAAE,EAAE5B,WADN;IAEE,OAAO,EAAEG,EAFX;IAGE,GAAG,EAAED,YAHP;IAIE,IAAI,EAAEO,IAJR;IAKE,QAAQ,EAAEJ;EALZ,GAMMK,UANN,EADF;;EAWA,IAAI,CAACiB,QAAL,EAAe;IACb,OAAOC,KAAP;EACD;;EAED,oBACE,MAAC,qBAAD;IAAA,WACGA,KADH,eAEE,KAAC,oBAAD;MAAsB,QAAQ,EAAEvB,QAAhC;MAAA,UACGsB;IADH,EAFF;EAAA,EADF;AAQD,CA7B+B,CAAzB"}

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

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

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

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

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

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

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';\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":";;;;;AACA,SAASA,QAAT,EAAmBC,SAAnB,EAA8BC,MAA9B,EAAsCC,UAAtC,QAAwD,OAAxD;AAEA,SAASC,GAAG,IAAIC,OAAhB,QAA+B,gBAA/B;AAIA,SAASC,SAAT,QAA0B,WAA1B;AACA,SAASC,KAAT,QAAsB,UAAtB;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SAASC,GAAT,QAAoB,QAApB;AACA,SAASC,YAAT,QAA6B,iBAA7B;AACA,SAASC,iBAAT,QAAkC,WAAlC;;;AAKA,IAAMC,QAAQ,gBAAGT,UAAU,CAGzB,SAASC,GAAT,CAAaS,KAAb,EAAoBC,YAApB,EAAkC;EAClC,IAAQC,OAAR,GAAiEF,KAAjE,CAAQE,OAAR;EAAA,IAAiBC,QAAjB,GAAiEH,KAAjE,CAAiBG,QAAjB;EAAA,IAA2BC,QAA3B,GAAiEJ,KAAjE,CAA2BI,QAA3B;EAAA,IAAqCC,QAArC,GAAiEL,KAAjE,CAAqCK,QAArC;EAAA,IAAkDC,UAAlD,4BAAiEN,KAAjE;;EACA,yBACEF,iBAAiB,EADnB;EAAA,IAAQS,SAAR,sBAAQA,SAAR;EAAA,IAAmBC,cAAnB,sBAAmBA,cAAnB;EAAA,IAAmCC,iBAAnC,sBAAmCA,iBAAnC;EAAA,IAAsDC,OAAtD,sBAAsDA,OAAtD;;EAEA,IAAMC,QAAQ,GAAGtB,MAAM,CAAuB,IAAvB,CAAvB;;EAEA,gBAA8BF,QAAQ,CAAC,KAAD,CAAtC;EAAA;EAAA,IAAOyB,OAAP;EAAA,IAAgBC,UAAhB;;EACAzB,SAAS,CAAC,YAAM;IACdyB,UAAU,CAAC,IAAD,CAAV;EACD,CAFQ,EAEN,EAFM,CAAT;EAIA,oBACE,MAAC,GAAD;IACE,QAAQ,EAAC,UADX;IAEE,OAAO,EAAC,MAFV;IAGE,IAAI,EAAE,CAHR;IAIE,aAAa,EAAC,QAJhB;IAKE,MAAM,EAAC,MALT;IAAA,wBAOE,KAAC,SAAD;MAME,EAAE,EAAEX,OANN;MAOE,GAAG,EAAED,YAPP;MAQE,WAAW,EAAEO,cARf;MASE,QAAQ,EAAEH,QATZ;MAUE,KAAK,EAAE;QACLS,EAAE,EAAE,CADC;QAELC,EAAE,EAAE,CAFC;QAGLC,KAAK,EAAEb,QAAQ,GACXM,iBAAiB,IAAID,cADV,GAEXd,KAAK,CAACa,SAAD,EAAYF,QAAQ,GAAG,IAAH,GAAU,GAA9B,CALJ;QAMLY,SAAS,QANJ;QAOLC,MAAM,EAAE,MAPH;QAQLC,eAAe,EAAE,aARZ;QASLC,MAAM,EAAE,MATH;QAUL,UAAU;UACRC,OAAO,EAAE;QADD,CAVL;QAaLC,KAAK,EAAE,MAbF;QAcLC,UAAU,EAAE;MAdP;IAVT,GA0BMjB,UA1BN;MAAA,uBA4BE,KAAC,IAAD;QACE,EAAE,EAAC,MADL;QAEE,OAAO,EAAC,aAFV;QAGE,GAAG,EAAEK,QAHP;QAIE,KAAK;UACHa,OAAO,EAAE,aADN;UAEHC,cAAc,EAAE,QAFb;UAGHF,UAAU,EAAE,QAHT;UAIHP,KAAK,EAAE,SAJJ;UAKHE,MAAM,EAAE,MALL;UAMHQ,SAAS,EAAE,QANR;UAOHC,QAAQ,EAAE,UAPP;UAQHC,aAAa,EAAE;QARZ,GASClB,OAAO,KAAK,SAAZ,IACFP,QADE,IAEF,CAACS,OAFC,IAEU;UACV,aAAa;YACXiB,OAAO,EAAE,IADE;YAEXC,EAAE,EAAEtB,cAFO;YAGXmB,QAAQ,EAAE,UAHC;YAIXI,MAAM,EAAE,CAJG;YAKXC,MAAM,EAAE,CALG;YAMXV,KAAK,EAAE,MANI;YAOXJ,MAAM,aAPK;YAQXe,mBAAmB,aARR;YASXC,oBAAoB;UATT;QADH,CAXX,CAJP;QAAA,UA8BG9B;MA9BH;IA5BF,GAPF,eAoEE,KAAC,YAAD;MACE,QAAQ,EAAED,QADZ;MAEE,KAAK,EAAEK,cAFT;MAGE,OAAO,EAAEE,OAHX;MAIE,QAAQ,EAAEC;IAJZ,EApEF;EAAA,EADF;AA6ED,CA3F0B,CAA3B;AA6FA,OAAO,IAAMpB,GAAG,gBAAGD,UAAU,CAA8B,SAASC,GAAT,CACzDS,KADyD,EAEzDC,YAFyD,EAGzD;EACA,gBAAyCD,KAAzC,CAAQmC,EAAR;EAAA,IAAQA,EAAR,0BAAa,QAAb;EAAA,IAA0B7B,UAA1B,4BAAyCN,KAAzC;;EAEA,oBACE,KAAC,OAAD;IAAS,EAAE,EAAED,QAAb;IAAuB,OAAO,EAAEoC,EAAhC;IAAoC,GAAG,EAAElC;EAAzC,GAA2DK,UAA3D,EADF;AAGD,CAT4B,CAAtB"}
+{"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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"}

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

@@ -1,10 +1,10 @@
-/// <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" | "variant" | "size" | "hidden" | "as" | "sx" | "__css" | "tx" | "theme" | "borderX" | "borderY" | "gridGap" | "gridColumnGap" | "gridRowGap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "vertical" | "innerAs" | "manualActivation" | "indicatorColor" | "textColor" | "selectedTextColor"> & import("react").RefAttributes<HTMLDivElement>>;
+/// <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" | "variant" | "size" | "hidden" | "as" | "sx" | "__css" | "tx" | "theme" | "borderX" | "borderY" | "gridGap" | "gridColumnGap" | "gridRowGap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "vertical" | "innerAs" | "manualActivation" | "indicatorColor" | "textColor" | "selectedTextColor"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","names":["forwardRef","useRef","TabList","TabListCore","Box","TabIndicatorProvider","TabListProvider","TabListInner","props","forwardedRef","innerAs","otherProps","minWidth","display","alignItems","as","indicatorColor","textColor","selectedTextColor","variant","currentIndicator"],"sources":["../../../src/Tab/TabList.tsx"],"sourcesContent":["import { forwardRef, useRef } from 'react';\nimport type { TabListProps as TabListPropsCore } from '@basic-ui/core';\nimport { TabList as TabListCore } from '@basic-ui/core';\nimport { rem } from 'polished';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { TabIndicatorProvider } from '../TabIndicator';\nimport { TabListProvider } from './context';\n\nexport type TabListProps = TabListPropsCore &\n  BoxProps & {\n    indicatorColor?: string;\n    textColor?: string;\n    selectedTextColor?: string;\n    variant?: 'primary' | 'secondary';\n  };\n\nconst TabListInner = forwardRef<HTMLDivElement, TabListProps>(\n  function TabListInner(props, forwardedRef) {\n    const { innerAs, ...otherProps } = props;\n\n    return (\n      <Box\n        as={innerAs}\n        ref={forwardedRef}\n        __css={{ minWidth: rem(360), display: 'flex', alignItems: 'center' }}\n        {...otherProps}\n      />\n    );\n  }\n);\n\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(\n  function TabList(props, forwardedRef) {\n    const {\n      as = 'div',\n      indicatorColor = 'primary',\n      textColor = 'on.surface',\n      selectedTextColor,\n      variant = 'secondary',\n      ...otherProps\n    } = props;\n    const currentIndicator = useRef<HTMLSpanElement>(null);\n\n    return (\n      <TabListProvider\n        value={{ indicatorColor, textColor, selectedTextColor, variant }}\n      >\n        <TabIndicatorProvider value={{ currentIndicator }}>\n          <TabListCore\n            as={TabListInner}\n            innerAs={as}\n            ref={forwardedRef}\n            {...otherProps}\n          />\n        </TabIndicatorProvider>\n      </TabListProvider>\n    );\n  }\n);\n"],"mappings":";;;;AAAA,SAASA,UAAT,EAAqBC,MAArB,QAAmC,OAAnC;AAEA,SAASC,OAAO,IAAIC,WAApB,QAAuC,gBAAvC;AAIA,SAASC,GAAT,QAAoB,QAApB;AACA,SAASC,oBAAT,QAAqC,iBAArC;AACA,SAASC,eAAT,QAAgC,WAAhC;;AAUA,IAAMC,YAAY,gBAAGP,UAAU,CAC7B,SAASO,YAAT,CAAsBC,KAAtB,EAA6BC,YAA7B,EAA2C;EACzC,IAAQC,OAAR,GAAmCF,KAAnC,CAAQE,OAAR;EAAA,IAAoBC,UAApB,4BAAmCH,KAAnC;;EAEA,oBACE,KAAC,GAAD;IACE,EAAE,EAAEE,OADN;IAEE,GAAG,EAAED,YAFP;IAGE,KAAK,EAAE;MAAEG,QAAQ,WAAV;MAAsBC,OAAO,EAAE,MAA/B;MAAuCC,UAAU,EAAE;IAAnD;EAHT,GAIMH,UAJN,EADF;AAQD,CAZ4B,CAA/B;AAeA,OAAO,IAAMT,OAAO,gBAAGF,UAAU,CAC/B,SAASE,OAAT,CAAiBM,KAAjB,EAAwBC,YAAxB,EAAsC;EACpC,gBAOID,KAPJ,CACEO,EADF;EAAA,IACEA,EADF,0BACO,KADP;EAAA,4BAOIP,KAPJ,CAEEQ,cAFF;EAAA,IAEEA,cAFF,sCAEmB,SAFnB;EAAA,uBAOIR,KAPJ,CAGES,SAHF;EAAA,IAGEA,SAHF,iCAGc,YAHd;EAAA,IAIEC,iBAJF,GAOIV,KAPJ,CAIEU,iBAJF;EAAA,qBAOIV,KAPJ,CAKEW,OALF;EAAA,IAKEA,OALF,+BAKY,WALZ;EAAA,IAMKR,UANL,4BAOIH,KAPJ;;EAQA,IAAMY,gBAAgB,GAAGnB,MAAM,CAAkB,IAAlB,CAA/B;EAEA,oBACE,KAAC,eAAD;IACE,KAAK,EAAE;MAAEe,cAAc,EAAdA,cAAF;MAAkBC,SAAS,EAATA,SAAlB;MAA6BC,iBAAiB,EAAjBA,iBAA7B;MAAgDC,OAAO,EAAPA;IAAhD,CADT;IAAA,uBAGE,KAAC,oBAAD;MAAsB,KAAK,EAAE;QAAEC,gBAAgB,EAAhBA;MAAF,CAA7B;MAAA,uBACE,KAAC,WAAD;QACE,EAAE,EAAEb,YADN;QAEE,OAAO,EAAEQ,EAFX;QAGE,GAAG,EAAEN;MAHP,GAIME,UAJN;IADF;EAHF,EADF;AAcD,CA1B8B,CAA1B"}
+{"version":3,"file":"TabList.js","names":["forwardRef","useRef","TabList","TabListCore","Box","TabIndicatorProvider","TabListProvider","TabListInner","props","forwardedRef","innerAs","otherProps","minWidth","display","alignItems","as","indicatorColor","textColor","selectedTextColor","variant","currentIndicator"],"sources":["../../../src/Tab/TabList.tsx"],"sourcesContent":["import { forwardRef, useRef } from 'react';\r\nimport type { TabListProps as TabListPropsCore } from '@basic-ui/core';\r\nimport { TabList as TabListCore } from '@basic-ui/core';\r\nimport { rem } from 'polished';\r\n\r\nimport type { BoxProps } from '../Box';\r\nimport { Box } from '../Box';\r\nimport { TabIndicatorProvider } from '../TabIndicator';\r\nimport { TabListProvider } from './context';\r\n\r\nexport type TabListProps = TabListPropsCore &\r\n  BoxProps & {\r\n    indicatorColor?: string;\r\n    textColor?: string;\r\n    selectedTextColor?: string;\r\n    variant?: 'primary' | 'secondary';\r\n  };\r\n\r\nconst TabListInner = forwardRef<HTMLDivElement, TabListProps>(\r\n  function TabListInner(props, forwardedRef) {\r\n    const { innerAs, ...otherProps } = props;\r\n\r\n    return (\r\n      <Box\r\n        as={innerAs}\r\n        ref={forwardedRef}\r\n        __css={{ minWidth: rem(360), display: 'flex', alignItems: 'center' }}\r\n        {...otherProps}\r\n      />\r\n    );\r\n  }\r\n);\r\n\r\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(\r\n  function TabList(props, forwardedRef) {\r\n    const {\r\n      as = 'div',\r\n      indicatorColor = 'primary',\r\n      textColor = 'on.surface',\r\n      selectedTextColor,\r\n      variant = 'secondary',\r\n      ...otherProps\r\n    } = props;\r\n    const currentIndicator = useRef<HTMLSpanElement>(null);\r\n\r\n    return (\r\n      <TabListProvider\r\n        value={{ indicatorColor, textColor, selectedTextColor, variant }}\r\n      >\r\n        <TabIndicatorProvider value={{ currentIndicator }}>\r\n          <TabListCore\r\n            as={TabListInner}\r\n            innerAs={as}\r\n            ref={forwardedRef}\r\n            {...otherProps}\r\n          />\r\n        </TabIndicatorProvider>\r\n      </TabListProvider>\r\n    );\r\n  }\r\n);\r\n"],"mappings":";;;;AAAA,SAASA,UAAT,EAAqBC,MAArB,QAAmC,OAAnC;AAEA,SAASC,OAAO,IAAIC,WAApB,QAAuC,gBAAvC;AAIA,SAASC,GAAT,QAAoB,QAApB;AACA,SAASC,oBAAT,QAAqC,iBAArC;AACA,SAASC,eAAT,QAAgC,WAAhC;;AAUA,IAAMC,YAAY,gBAAGP,UAAU,CAC7B,SAASO,YAAT,CAAsBC,KAAtB,EAA6BC,YAA7B,EAA2C;EACzC,IAAQC,OAAR,GAAmCF,KAAnC,CAAQE,OAAR;EAAA,IAAoBC,UAApB,4BAAmCH,KAAnC;;EAEA,oBACE,KAAC,GAAD;IACE,EAAE,EAAEE,OADN;IAEE,GAAG,EAAED,YAFP;IAGE,KAAK,EAAE;MAAEG,QAAQ,WAAV;MAAsBC,OAAO,EAAE,MAA/B;MAAuCC,UAAU,EAAE;IAAnD;EAHT,GAIMH,UAJN,EADF;AAQD,CAZ4B,CAA/B;AAeA,OAAO,IAAMT,OAAO,gBAAGF,UAAU,CAC/B,SAASE,OAAT,CAAiBM,KAAjB,EAAwBC,YAAxB,EAAsC;EACpC,gBAOID,KAPJ,CACEO,EADF;EAAA,IACEA,EADF,0BACO,KADP;EAAA,4BAOIP,KAPJ,CAEEQ,cAFF;EAAA,IAEEA,cAFF,sCAEmB,SAFnB;EAAA,uBAOIR,KAPJ,CAGES,SAHF;EAAA,IAGEA,SAHF,iCAGc,YAHd;EAAA,IAIEC,iBAJF,GAOIV,KAPJ,CAIEU,iBAJF;EAAA,qBAOIV,KAPJ,CAKEW,OALF;EAAA,IAKEA,OALF,+BAKY,WALZ;EAAA,IAMKR,UANL,4BAOIH,KAPJ;;EAQA,IAAMY,gBAAgB,GAAGnB,MAAM,CAAkB,IAAlB,CAA/B;EAEA,oBACE,KAAC,eAAD;IACE,KAAK,EAAE;MAAEe,cAAc,EAAdA,cAAF;MAAkBC,SAAS,EAATA,SAAlB;MAA6BC,iBAAiB,EAAjBA,iBAA7B;MAAgDC,OAAO,EAAPA;IAAhD,CADT;IAAA,uBAGE,KAAC,oBAAD;MAAsB,KAAK,EAAE;QAAEC,gBAAgB,EAAhBA;MAAF,CAA7B;MAAA,uBACE,KAAC,WAAD;QACE,EAAE,EAAEb,YADN;QAEE,OAAO,EAAEQ,EAFX;QAGE,GAAG,EAAEN;MAHP,GAIME,UAJN;IADF;EAHF,EADF;AAcD,CA1B8B,CAA1B"}