@basic-ui/material 1.0.0-alpha.24 → 1.0.0-alpha.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/index.js +32 -10
- package/build/cjs/index.js.map +1 -1
- package/build/esm/Badge/Badge.js +2 -1
- package/build/esm/Badge/Badge.js.map +1 -1
- package/build/esm/Chip/ButtonChip.d.ts +1 -1
- package/build/esm/Snackbar/Snackbar.d.ts +1 -1
- package/build/esm/Snackbar/index.d.ts +1 -0
- package/build/esm/Snackbar/index.js +1 -0
- package/build/esm/Snackbar/index.js.map +1 -1
- package/build/esm/Snackbar/useSnackbarAnimation.d.ts +0 -64
- package/build/esm/Snackbar/useSnackbarAnimation.js +1 -1
- package/build/esm/Snackbar/useSnackbarAnimation.js.map +1 -1
- package/build/esm/Tab/Tab.d.ts +1 -1
- package/build/esm/Tab/Tab.js +34 -9
- package/build/esm/Tab/Tab.js.map +1 -1
- package/build/esm/TabIndicator/TabIndicator.js +1 -1
- package/build/esm/TabIndicator/TabIndicator.js.map +1 -1
- package/build/esm/Table/TableHead.d.ts +1 -1
- package/build/esm/theme/theme.js +1 -1
- package/build/esm/theme/theme.js.map +1 -1
- package/build/tsconfig-build.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/src/Badge/Badge.tsx +1 -0
- package/src/Snackbar/index.ts +1 -0
- package/src/Snackbar/useSnackbarAnimation.ts +1 -1
- package/src/Tab/Tab.tsx +32 -9
- package/src/TabIndicator/TabIndicator.tsx +1 -1
- package/src/theme/theme.ts +1 -1
package/build/esm/Badge/Badge.js
CHANGED
|
@@ -30,7 +30,8 @@ export var Badge = /*#__PURE__*/forwardRef(function Badge(props, forwardedRef) {
|
|
|
30
30
|
}), {}, {
|
|
31
31
|
display: 'inline-flex',
|
|
32
32
|
alignItems: 'center',
|
|
33
|
-
justifyContent: 'center'
|
|
33
|
+
justifyContent: 'center',
|
|
34
|
+
fontVariantNumeric: 'tabular-nums'
|
|
34
35
|
}, __css)
|
|
35
36
|
}, otherProps));
|
|
36
37
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.js","names":["forwardRef","Box","Badge","props","forwardedRef","size","__css","otherProps","variant","bg","color","borderRadius","maxWidth","maxHeight","minWidth","minHeight","px","display","alignItems","justifyContent"],"sources":["../../../src/Badge/Badge.tsx"],"sourcesContent":["import { rem } from 'polished';\nimport { forwardRef } from 'react';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\n\nexport interface BadgeProps extends BoxProps {\n size?: 'small' | 'large';\n}\n\nexport const Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(\n props,\n forwardedRef\n) {\n const { size = 'large', __css, ...otherProps } = props;\n\n return (\n <Box\n ref={forwardedRef}\n __css={{\n variant: 'text.label-small',\n bg: 'error',\n color: 'on.error',\n borderRadius: 'full',\n ...(size === 'small'\n ? {\n maxWidth: rem(6),\n maxHeight: rem(6),\n minWidth: rem(6),\n minHeight: rem(6),\n }\n : {\n px: 1,\n maxHeight: rem(16),\n minWidth: rem(16),\n minHeight: rem(16),\n }),\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...__css,\n }}\n {...otherProps}\n />\n );\n});\n"],"mappings":";;;AACA,SAASA,UAAT,QAA2B,OAA3B;AAGA,SAASC,GAAT,QAAoB,QAApB;;AAMA,OAAO,IAAMC,KAAK,gBAAGF,UAAU,CAA6B,SAASE,KAAT,CAC1DC,KAD0D,EAE1DC,YAF0D,EAG1D;EACA,kBAAiDD,KAAjD,CAAQE,IAAR;EAAA,IAAQA,IAAR,4BAAe,OAAf;EAAA,IAAwBC,KAAxB,GAAiDH,KAAjD,CAAwBG,KAAxB;EAAA,IAAkCC,UAAlC,4BAAiDJ,KAAjD;;EAEA,oBACE,KAAC,GAAD;IACE,GAAG,EAAEC,YADP;IAEE,KAAK;MACHI,OAAO,EAAE,kBADN;MAEHC,EAAE,EAAE,OAFD;MAGHC,KAAK,EAAE,UAHJ;MAIHC,YAAY,EAAE;IAJX,GAKCN,IAAI,KAAK,OAAT,GACA;MACEO,QAAQ,YADV;MAEEC,SAAS,YAFX;MAGEC,QAAQ,YAHV;MAIEC,SAAS;IAJX,CADA,GAOA;MACEC,EAAE,EAAE,CADN;MAEEH,SAAS,QAFX;MAGEC,QAAQ,QAHV;MAIEC,SAAS;IAJX,CAZD;MAkBHE,OAAO,EAAE,aAlBN;MAmBHC,UAAU,EAAE,QAnBT;MAoBHC,cAAc,EAAE;
|
|
1
|
+
{"version":3,"file":"Badge.js","names":["forwardRef","Box","Badge","props","forwardedRef","size","__css","otherProps","variant","bg","color","borderRadius","maxWidth","maxHeight","minWidth","minHeight","px","display","alignItems","justifyContent","fontVariantNumeric"],"sources":["../../../src/Badge/Badge.tsx"],"sourcesContent":["import { rem } from 'polished';\nimport { forwardRef } from 'react';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\n\nexport interface BadgeProps extends BoxProps {\n size?: 'small' | 'large';\n}\n\nexport const Badge = forwardRef<HTMLDivElement, BadgeProps>(function Badge(\n props,\n forwardedRef\n) {\n const { size = 'large', __css, ...otherProps } = props;\n\n return (\n <Box\n ref={forwardedRef}\n __css={{\n variant: 'text.label-small',\n bg: 'error',\n color: 'on.error',\n borderRadius: 'full',\n ...(size === 'small'\n ? {\n maxWidth: rem(6),\n maxHeight: rem(6),\n minWidth: rem(6),\n minHeight: rem(6),\n }\n : {\n px: 1,\n maxHeight: rem(16),\n minWidth: rem(16),\n minHeight: rem(16),\n }),\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n fontVariantNumeric: 'tabular-nums',\n ...__css,\n }}\n {...otherProps}\n />\n );\n});\n"],"mappings":";;;AACA,SAASA,UAAT,QAA2B,OAA3B;AAGA,SAASC,GAAT,QAAoB,QAApB;;AAMA,OAAO,IAAMC,KAAK,gBAAGF,UAAU,CAA6B,SAASE,KAAT,CAC1DC,KAD0D,EAE1DC,YAF0D,EAG1D;EACA,kBAAiDD,KAAjD,CAAQE,IAAR;EAAA,IAAQA,IAAR,4BAAe,OAAf;EAAA,IAAwBC,KAAxB,GAAiDH,KAAjD,CAAwBG,KAAxB;EAAA,IAAkCC,UAAlC,4BAAiDJ,KAAjD;;EAEA,oBACE,KAAC,GAAD;IACE,GAAG,EAAEC,YADP;IAEE,KAAK;MACHI,OAAO,EAAE,kBADN;MAEHC,EAAE,EAAE,OAFD;MAGHC,KAAK,EAAE,UAHJ;MAIHC,YAAY,EAAE;IAJX,GAKCN,IAAI,KAAK,OAAT,GACA;MACEO,QAAQ,YADV;MAEEC,SAAS,YAFX;MAGEC,QAAQ,YAHV;MAIEC,SAAS;IAJX,CADA,GAOA;MACEC,EAAE,EAAE,CADN;MAEEH,SAAS,QAFX;MAGEC,QAAQ,QAHV;MAIEC,SAAS;IAJX,CAZD;MAkBHE,OAAO,EAAE,aAlBN;MAmBHC,UAAU,EAAE,QAnBT;MAoBHC,cAAc,EAAE,QApBb;MAqBHC,kBAAkB,EAAE;IArBjB,GAsBAd,KAtBA;EAFP,GA0BMC,UA1BN,EADF;AA8BD,CApC8B,CAAxB"}
|
|
@@ -6,4 +6,4 @@ export declare type ButtonChipProps = ChipBaseProps & {
|
|
|
6
6
|
leadingIcon?: ReactNode;
|
|
7
7
|
trailingIcon?: ReactNode;
|
|
8
8
|
};
|
|
9
|
-
export declare const ButtonChip: import("react").ForwardRefExoticComponent<Pick<ButtonChipProps, "hidden" | keyof import("..").BaseProps | keyof import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | "
|
|
9
|
+
export declare const ButtonChip: import("react").ForwardRefExoticComponent<Pick<ButtonChipProps, "children" | "hidden" | keyof import("..").BaseProps | keyof import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "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" | "borderOpacity" | "checked" | "leadingIcon" | "trailingIcon"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -5,4 +5,4 @@ export interface SnackbarProps extends PaperProps {
|
|
|
5
5
|
timeout?: number;
|
|
6
6
|
dismissible?: boolean;
|
|
7
7
|
}
|
|
8
|
-
export declare const Snackbar: import("react").ForwardRefExoticComponent<Pick<SnackbarProps, "
|
|
8
|
+
export declare const Snackbar: import("react").ForwardRefExoticComponent<Pick<SnackbarProps, "children" | "hidden" | "bottom" | "top" | "left" | "right" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "p" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "size" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "color" | "bg" | "backgroundColor" | "opacity" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "order" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "gridGap" | "gridColumnGap" | "gridRowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "background" | "backgroundImage" | "backgroundSize" | "backgroundPosition" | "backgroundRepeat" | "position" | "zIndex" | "boxShadow" | "textShadow" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "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" | "action" | "timeout" | "dismissible" | "elevation" | "outlined" | "backgroundOverlay" | "darkThemeBackgroundOverlay" | "key"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/Snackbar/index.ts"],"sourcesContent":["export * from './Snackbar';\nexport * from './Stack';\n"],"mappings":"AAAA,cAAc,YAAd;AACA,cAAc,SAAd"}
|
|
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"}
|
|
@@ -1,70 +1,6 @@
|
|
|
1
1
|
import type { CSSProperties, MutableRefObject } from 'react';
|
|
2
|
-
declare type AnimationState = 'entering' | 'entered' | 'exiting';
|
|
3
|
-
export declare const placements: {
|
|
4
|
-
'top-right': {
|
|
5
|
-
style: {
|
|
6
|
-
top: number;
|
|
7
|
-
right: number;
|
|
8
|
-
};
|
|
9
|
-
animate: (state: AnimationState, translateY: number) => {
|
|
10
|
-
opacity: number;
|
|
11
|
-
transform: string;
|
|
12
|
-
};
|
|
13
|
-
};
|
|
14
|
-
'top-center': {
|
|
15
|
-
style: {
|
|
16
|
-
top: number;
|
|
17
|
-
left: string;
|
|
18
|
-
};
|
|
19
|
-
animate: (state: AnimationState, translateY: number) => {
|
|
20
|
-
opacity: number;
|
|
21
|
-
transform: string;
|
|
22
|
-
};
|
|
23
|
-
};
|
|
24
|
-
'top-left': {
|
|
25
|
-
style: {
|
|
26
|
-
top: number;
|
|
27
|
-
left: number;
|
|
28
|
-
};
|
|
29
|
-
animate: (state: AnimationState, translateY: number) => {
|
|
30
|
-
opacity: number;
|
|
31
|
-
transform: string;
|
|
32
|
-
};
|
|
33
|
-
};
|
|
34
|
-
'bottom-right': {
|
|
35
|
-
style: {
|
|
36
|
-
bottom: number;
|
|
37
|
-
right: number;
|
|
38
|
-
};
|
|
39
|
-
animate: (state: AnimationState, translateY: number) => {
|
|
40
|
-
opacity: number;
|
|
41
|
-
transform: string;
|
|
42
|
-
};
|
|
43
|
-
};
|
|
44
|
-
'bottom-center': {
|
|
45
|
-
style: {
|
|
46
|
-
bottom: number;
|
|
47
|
-
left: string;
|
|
48
|
-
};
|
|
49
|
-
animate: (state: AnimationState, translateY: number) => {
|
|
50
|
-
opacity: number;
|
|
51
|
-
transform: string;
|
|
52
|
-
};
|
|
53
|
-
};
|
|
54
|
-
'bottom-left': {
|
|
55
|
-
style: {
|
|
56
|
-
bottom: number;
|
|
57
|
-
left: number;
|
|
58
|
-
};
|
|
59
|
-
animate: (state: AnimationState, translateY: number) => {
|
|
60
|
-
opacity: number;
|
|
61
|
-
transform: string;
|
|
62
|
-
};
|
|
63
|
-
};
|
|
64
|
-
};
|
|
65
2
|
export declare function useSnackbarAnimation(ref: MutableRefObject<HTMLDivElement | null>, timeout: number): {
|
|
66
3
|
style: CSSProperties;
|
|
67
4
|
placementStyle: CSSProperties;
|
|
68
5
|
onClose?: () => void;
|
|
69
6
|
};
|
|
70
|
-
export {};
|
|
@@ -1 +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';\nexport const placements = {\n 'top-right': {\n style: { top: 3, right: 3 },\n animate: (state: AnimationState, translateY: number) =>\n slideFromRight[state]('0px', `${translateY}px`),\n },\n 'top-center': {\n style: { top: 3, left: '50%' },\n animate: (state: AnimationState, translateY: number) =>\n slideFromBottom[state]('-50%', `${translateY}px`),\n },\n 'top-left': {\n style: { top: 3, left: 3 },\n animate: (state: AnimationState, translateY: number) =>\n slideFromLeft[state]('0px', `${translateY}px`),\n },\n 'bottom-right': {\n style: { bottom: 3, right: 3 },\n animate: (state: AnimationState, translateY: number) =>\n slideFromRight[state]('0px', `${-translateY}px`),\n },\n 'bottom-center': {\n style: { bottom: 3, left: '50%' },\n animate: (state: AnimationState, translateY: number) =>\n slideFromTop[state]('-50%', `${-translateY}px`),\n },\n 'bottom-left': {\n style: { bottom: 3, left: 3 },\n animate: (state: AnimationState, translateY: number) =>\n slideFromLeft[state]('0px', `${-translateY}px`),\n },\n};\nconst commonStyle = { position: 'fixed', zIndex: 'snackbar' };\n\nfunction getTransition(timems: number) {\n return `opacity ${timems}ms ${EASING_STANDARD},transform ${timems}ms ${EASING_STANDARD}`;\n}\n\nconst defaultAnimation = {\n style: {},\n placementStyle: {},\n onClose: undefined,\n};\n\nexport function useSnackbarAnimation(\n ref: MutableRefObject<HTMLDivElement | null>,\n timeout: number\n): {\n style: CSSProperties;\n placementStyle: CSSProperties;\n onClose?: () => void;\n} {\n const stackItem = useStackItem({\n ref,\n closeTimeoutInMilliseconds: TRANSITION_TIME,\n });\n if (!stackItem) {\n return defaultAnimation;\n }\n\n const { onClose, state, translateY = 0, placement } = stackItem;\n const placementStyle = placements[placement].style;\n const animateFn = placements[placement].animate;\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useEffect(() => {\n const handler = setTimeout(() => {\n onClose();\n }, timeout);\n return () => {\n clearTimeout(handler);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [timeout]);\n\n switch (state) {\n case 'entering':\n return {\n style: { ...animateFn('entering', translateY), visibility: 'hidden' },\n placementStyle: { ...(placementStyle as any), ...commonStyle },\n onClose,\n };\n case 'entered':\n return {\n style: {\n ...animateFn('entered', translateY),\n transition: getTransition(TRANSITION_TIME),\n },\n placementStyle: { ...(placementStyle as any), ...commonStyle },\n onClose,\n };\n case 'exiting':\n return {\n style: {\n ...animateFn('exiting', translateY),\n transition: getTransition(TRANSITION_TIME),\n },\n placementStyle: { ...(placementStyle as any), ...commonStyle },\n onClose,\n };\n }\n}\n"],"mappings":"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"}
|
|
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"}
|
package/build/esm/Tab/Tab.d.ts
CHANGED
|
@@ -2,4 +2,4 @@ import type { ButtonHTMLAttributes } from 'react';
|
|
|
2
2
|
import type { TabProps as TabPropsCore } from '@basic-ui/core';
|
|
3
3
|
import type { RippleBoxProps } from '../Ripple';
|
|
4
4
|
export declare type TabProps = TabPropsCore & RippleBoxProps<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>;
|
|
5
|
-
export declare const Tab: import("react").ForwardRefExoticComponent<Pick<TabProps, "bottom" | "top" | "hidden" | "center" | "left" | "right" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "p" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "size" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "color" | "bg" | "backgroundColor" | "opacity" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "order" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "gridGap" | "gridColumnGap" | "gridRowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "background" | "backgroundImage" | "backgroundSize" | "backgroundPosition" | "backgroundRepeat" | "position" | "zIndex" | "boxShadow" | "textShadow" | "
|
|
5
|
+
export declare const Tab: import("react").ForwardRefExoticComponent<Pick<TabProps, "bottom" | "top" | "hidden" | "center" | "left" | "right" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "p" | "padding" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "size" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "color" | "bg" | "backgroundColor" | "opacity" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flex" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "order" | "border" | "borderX" | "borderY" | "borderWidth" | "borderTopWidth" | "borderBottomWidth" | "borderLeftWidth" | "borderRightWidth" | "borderStyle" | "borderTopStyle" | "borderBottomStyle" | "borderLeftStyle" | "borderRightStyle" | "borderColor" | "borderTopColor" | "borderBottomColor" | "borderLeftColor" | "borderRightColor" | "borderRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "gridGap" | "gridColumnGap" | "gridRowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "background" | "backgroundImage" | "backgroundSize" | "backgroundPosition" | "backgroundRepeat" | "position" | "zIndex" | "boxShadow" | "textShadow" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "form" | "value" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "innerAs" | "baseOpacity" | "hoverOpacity" | "focusOpacity" | "pressedOpacity" | "rippleColor" | "rippleEnabled" | "mouseFocus"> & import("react").RefAttributes<HTMLButtonElement>>;
|
package/build/esm/Tab/Tab.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
4
|
var _excluded = ["innerAs", "selected", "children", "disabled"],
|
|
4
5
|
_excluded2 = ["as"];
|
|
5
|
-
import { useRef, forwardRef } from 'react';
|
|
6
|
+
import { useState, useEffect, useRef, forwardRef } from 'react';
|
|
6
7
|
import { Tab as TabCore } from '@basic-ui/core';
|
|
7
8
|
import { RippleBox } from '../Ripple';
|
|
8
9
|
import { alpha } from '../color';
|
|
@@ -26,6 +27,15 @@ var TabInner = /*#__PURE__*/forwardRef(function Tab(props, forwardedRef) {
|
|
|
26
27
|
variant = _useTabListContext.variant;
|
|
27
28
|
|
|
28
29
|
var labelRef = useRef(null);
|
|
30
|
+
|
|
31
|
+
var _useState = useState(false),
|
|
32
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
33
|
+
mounted = _useState2[0],
|
|
34
|
+
setMounted = _useState2[1];
|
|
35
|
+
|
|
36
|
+
useEffect(function () {
|
|
37
|
+
setMounted(true);
|
|
38
|
+
}, []);
|
|
29
39
|
return /*#__PURE__*/_jsxs(Box, {
|
|
30
40
|
position: "relative",
|
|
31
41
|
display: "flex",
|
|
@@ -39,6 +49,7 @@ var TabInner = /*#__PURE__*/forwardRef(function Tab(props, forwardedRef) {
|
|
|
39
49
|
disabled: disabled,
|
|
40
50
|
__css: {
|
|
41
51
|
px: 3,
|
|
52
|
+
py: 0,
|
|
42
53
|
color: selected ? selectedTextColor || indicatorColor : alpha(textColor, disabled ? 0.37 : 0.7),
|
|
43
54
|
minHeight: "3rem",
|
|
44
55
|
height: '100%',
|
|
@@ -53,16 +64,30 @@ var TabInner = /*#__PURE__*/forwardRef(function Tab(props, forwardedRef) {
|
|
|
53
64
|
}, otherProps), {}, {
|
|
54
65
|
children: /*#__PURE__*/_jsx(Text, {
|
|
55
66
|
as: "span",
|
|
56
|
-
display: "inline-flex",
|
|
57
|
-
justifyContent: "center",
|
|
58
|
-
alignItems: "center",
|
|
59
67
|
variant: "title-small",
|
|
60
|
-
color: "inherit",
|
|
61
|
-
height: "100%",
|
|
62
|
-
textAlign: "center",
|
|
63
|
-
position: "relative",
|
|
64
|
-
flexDirection: "column",
|
|
65
68
|
ref: labelRef,
|
|
69
|
+
__css: _extends({
|
|
70
|
+
display: 'inline-flex',
|
|
71
|
+
justifyContent: 'center',
|
|
72
|
+
alignItems: 'center',
|
|
73
|
+
color: 'inherit',
|
|
74
|
+
height: '100%',
|
|
75
|
+
textAlign: 'center',
|
|
76
|
+
position: 'relative',
|
|
77
|
+
flexDirection: 'column'
|
|
78
|
+
}, variant === 'primary' && selected && !mounted && {
|
|
79
|
+
'&::before': {
|
|
80
|
+
content: '""',
|
|
81
|
+
bg: indicatorColor,
|
|
82
|
+
position: 'absolute',
|
|
83
|
+
bottom: 0,
|
|
84
|
+
zIndex: 1,
|
|
85
|
+
width: '100%',
|
|
86
|
+
height: "0.1875rem",
|
|
87
|
+
borderTopLeftRadius: "0.1875rem",
|
|
88
|
+
borderTopRightRadius: "0.1875rem"
|
|
89
|
+
}
|
|
90
|
+
}),
|
|
66
91
|
children: children
|
|
67
92
|
})
|
|
68
93
|
})), /*#__PURE__*/_jsx(TabIndicator, {
|
package/build/esm/Tab/Tab.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.js","names":["useRef","forwardRef","Tab","TabCore","RippleBox","alpha","Text","Box","TabIndicator","useTabListContext","TabInner","props","forwardedRef","innerAs","selected","children","disabled","otherProps","textColor","indicatorColor","selectedTextColor","variant","labelRef","px","color","minHeight","height","backgroundColor","border","outline","width","alignItems","as"],"sources":["../../../src/Tab/Tab.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react';\nimport { 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 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 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
|
|
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":"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"}
|
|
@@ -64,7 +64,7 @@ export var TabIndicator = /*#__PURE__*/forwardRef(function TabIndicator(props, f
|
|
|
64
64
|
currentIndicator.current = ref.current;
|
|
65
65
|
}
|
|
66
66
|
}, [selected, variant]);
|
|
67
|
-
|
|
67
|
+
useEnhancedEffect(function () {
|
|
68
68
|
if (variant === 'secondary') {
|
|
69
69
|
return;
|
|
70
70
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabIndicator.js","names":["forwardRef","useEffect","useRef","useLayoutEffect","assignMultipleRefs","Box","useTabIndicatorContext","EASING_STANDARD","WIDTH_PROPERTY_NAME","SCALE_PROPERTY_NAME","useEnhancedEffect","window","TabIndicator","props","forwardedRef","as","selected","color","variant","labelRef","otherProps","ref","currentIndicator","resizeObserverRef","current","previousClientRect","getBoundingClientRect","currentClientRect","xPosition","left","prevTransition","style","transition","prevTransform","transform","prevWidth","getPropertyValue","currentWidth","widthDelta","String","parseFloat","setProperty","width","ResizeObserver","entry","contentRect","observe","disconnect","bg","position","bottom","opacity","zIndex","height","content","borderTopLeftRadius","borderTopRightRadius","transformOrigin"],"sources":["../../../src/TabIndicator/TabIndicator.tsx"],"sourcesContent":["import type { RefObject } from 'react';\nimport { forwardRef, useEffect, useRef, useLayoutEffect } from 'react';\nimport { rem } from 'polished';\nimport { assignMultipleRefs } from '@basic-ui/core';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { useTabIndicatorContext } from './context';\nimport { EASING_STANDARD } from '../motion';\n\nexport interface TabIndicatorProps extends BoxProps {\n selected?: boolean;\n color?: string;\n variant: 'primary' | 'secondary';\n labelRef: RefObject<HTMLParagraphElement | null>;\n}\n\nconst WIDTH_PROPERTY_NAME = '--indicator-width';\nconst SCALE_PROPERTY_NAME = '--indicator-scale';\n\nconst useEnhancedEffect =\n typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nexport const TabIndicator = forwardRef<HTMLDivElement, TabIndicatorProps>(\n function TabIndicator(props, forwardedRef) {\n const {\n as = 'span',\n selected,\n color = 'primary',\n variant,\n labelRef,\n ...otherProps\n } = props;\n const ref = useRef<HTMLSpanElement>(null);\n const { currentIndicator } = useTabIndicatorContext();\n const resizeObserverRef = useRef<ResizeObserver>();\n\n useEnhancedEffect(() => {\n if (selected && ref.current) {\n if (currentIndicator.current !== null) {\n // We are switching indicator, let's slide!\n const previousClientRect =\n currentIndicator.current.getBoundingClientRect();\n const currentClientRect = ref.current.getBoundingClientRect();\n const xPosition = previousClientRect.left - currentClientRect.left;\n\n const prevTransition = ref.current.style.transition;\n const prevTransform = ref.current.style.transform;\n ref.current.style.transition = 'none';\n if (variant === 'primary') {\n const prevWidth =\n currentIndicator.current.style.getPropertyValue(\n WIDTH_PROPERTY_NAME\n );\n const currentWidth =\n ref.current.style.getPropertyValue(WIDTH_PROPERTY_NAME);\n const widthDelta = String(\n parseFloat(prevWidth) / parseFloat(currentWidth)\n );\n ref.current.style.setProperty(SCALE_PROPERTY_NAME, widthDelta);\n ref.current.style.transform = `translateX(${xPosition}px)`;\n } else {\n const widthDelta =\n previousClientRect.width / currentClientRect.width;\n ref.current.style.transform = `translateX(${xPosition}px) scaleX(${widthDelta})`;\n }\n\n // Force repaint before updating classes and transform to ensure the transform properly takes effect\n ref.current.getBoundingClientRect();\n\n // Restore and let transition do it's magic\n ref.current.style.transition = prevTransition;\n ref.current.style.transform = prevTransform;\n if (variant === 'primary') {\n ref.current.style.setProperty(SCALE_PROPERTY_NAME, '1');\n }\n }\n currentIndicator.current = ref.current;\n }\n }, [selected, variant]);\n\n
|
|
1
|
+
{"version":3,"file":"TabIndicator.js","names":["forwardRef","useEffect","useRef","useLayoutEffect","assignMultipleRefs","Box","useTabIndicatorContext","EASING_STANDARD","WIDTH_PROPERTY_NAME","SCALE_PROPERTY_NAME","useEnhancedEffect","window","TabIndicator","props","forwardedRef","as","selected","color","variant","labelRef","otherProps","ref","currentIndicator","resizeObserverRef","current","previousClientRect","getBoundingClientRect","currentClientRect","xPosition","left","prevTransition","style","transition","prevTransform","transform","prevWidth","getPropertyValue","currentWidth","widthDelta","String","parseFloat","setProperty","width","ResizeObserver","entry","contentRect","observe","disconnect","bg","position","bottom","opacity","zIndex","height","content","borderTopLeftRadius","borderTopRightRadius","transformOrigin"],"sources":["../../../src/TabIndicator/TabIndicator.tsx"],"sourcesContent":["import type { RefObject } from 'react';\nimport { forwardRef, useEffect, useRef, useLayoutEffect } from 'react';\nimport { rem } from 'polished';\nimport { assignMultipleRefs } from '@basic-ui/core';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { useTabIndicatorContext } from './context';\nimport { EASING_STANDARD } from '../motion';\n\nexport interface TabIndicatorProps extends BoxProps {\n selected?: boolean;\n color?: string;\n variant: 'primary' | 'secondary';\n labelRef: RefObject<HTMLParagraphElement | null>;\n}\n\nconst WIDTH_PROPERTY_NAME = '--indicator-width';\nconst SCALE_PROPERTY_NAME = '--indicator-scale';\n\nconst useEnhancedEffect =\n typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nexport const TabIndicator = forwardRef<HTMLDivElement, TabIndicatorProps>(\n function TabIndicator(props, forwardedRef) {\n const {\n as = 'span',\n selected,\n color = 'primary',\n variant,\n labelRef,\n ...otherProps\n } = props;\n const ref = useRef<HTMLSpanElement>(null);\n const { currentIndicator } = useTabIndicatorContext();\n const resizeObserverRef = useRef<ResizeObserver>();\n\n useEnhancedEffect(() => {\n if (selected && ref.current) {\n if (currentIndicator.current !== null) {\n // We are switching indicator, let's slide!\n const previousClientRect =\n currentIndicator.current.getBoundingClientRect();\n const currentClientRect = ref.current.getBoundingClientRect();\n const xPosition = previousClientRect.left - currentClientRect.left;\n\n const prevTransition = ref.current.style.transition;\n const prevTransform = ref.current.style.transform;\n ref.current.style.transition = 'none';\n if (variant === 'primary') {\n const prevWidth =\n currentIndicator.current.style.getPropertyValue(\n WIDTH_PROPERTY_NAME\n );\n const currentWidth =\n ref.current.style.getPropertyValue(WIDTH_PROPERTY_NAME);\n const widthDelta = String(\n parseFloat(prevWidth) / parseFloat(currentWidth)\n );\n ref.current.style.setProperty(SCALE_PROPERTY_NAME, widthDelta);\n ref.current.style.transform = `translateX(${xPosition}px)`;\n } else {\n const widthDelta =\n previousClientRect.width / currentClientRect.width;\n ref.current.style.transform = `translateX(${xPosition}px) scaleX(${widthDelta})`;\n }\n\n // Force repaint before updating classes and transform to ensure the transform properly takes effect\n ref.current.getBoundingClientRect();\n\n // Restore and let transition do it's magic\n ref.current.style.transition = prevTransition;\n ref.current.style.transform = prevTransform;\n if (variant === 'primary') {\n ref.current.style.setProperty(SCALE_PROPERTY_NAME, '1');\n }\n }\n currentIndicator.current = ref.current;\n }\n }, [selected, variant]);\n\n useEnhancedEffect(() => {\n if (variant === 'secondary') {\n return;\n }\n\n if (labelRef.current && ref.current) {\n const width = labelRef.current.getBoundingClientRect().width;\n ref.current.style.setProperty(WIDTH_PROPERTY_NAME, `${width}px`);\n\n if (typeof ResizeObserver === 'function') {\n resizeObserverRef.current ??= new ResizeObserver(([entry]) => {\n if (ref.current) {\n ref.current.style.setProperty(\n WIDTH_PROPERTY_NAME,\n `${entry.contentRect.width}px`\n );\n }\n });\n\n resizeObserverRef.current?.observe(labelRef.current);\n return () => resizeObserverRef.current?.disconnect();\n }\n }\n }, [labelRef, variant]);\n\n return (\n <Box\n as={as}\n ref={assignMultipleRefs(ref, forwardedRef)}\n __css={{\n bg: color,\n position: 'absolute',\n bottom: 0,\n transform: `scale(1)`,\n opacity: selected ? 1 : 0,\n transition: `transform .25s ${EASING_STANDARD}`,\n zIndex: 1,\n ...(variant === 'secondary'\n ? {\n width: '100%',\n height: rem(2),\n }\n : {\n width: '100%',\n '&::before': {\n content: '\"\"',\n width: `var(${WIDTH_PROPERTY_NAME}, 0px)`,\n height: rem(3),\n borderTopLeftRadius: rem(3),\n borderTopRightRadius: rem(3),\n bg: color,\n position: 'absolute',\n transformOrigin: 'center',\n bottom: 0,\n left: '50%',\n transition: `inherit`,\n transform: `translateX(-50%) scaleX(var(${SCALE_PROPERTY_NAME}, 1))}`,\n },\n }),\n }}\n {...otherProps}\n />\n );\n }\n);\n"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { TableBodyProps } from './TableBody';
|
|
3
3
|
export declare type TableHeadProps = TableBodyProps;
|
|
4
|
-
export declare const TableHead: import("react").ForwardRefExoticComponent<Pick<TableBodyProps, "hidden" | keyof import("..").BaseProps | keyof import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "
|
|
4
|
+
export declare const TableHead: import("react").ForwardRefExoticComponent<Pick<TableBodyProps, "children" | "hidden" | keyof import("..").BaseProps | keyof import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "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"> & import("react").RefAttributes<HTMLDivElement>>;
|
package/build/esm/theme/theme.js
CHANGED
|
@@ -167,7 +167,7 @@ export var theme = {
|
|
|
167
167
|
'title-small': font('plain', 20, 14, 0.1, 500),
|
|
168
168
|
'label-large': font('plain', 20, 14, 0.1, 500),
|
|
169
169
|
'label-medium': font('plain', 16, 12, 0.5, 500),
|
|
170
|
-
'label-small': font('plain',
|
|
170
|
+
'label-small': font('plain', 15, 11, 0.5, 500),
|
|
171
171
|
'body-large': font('plain', 24, 16, 0.5, 400),
|
|
172
172
|
'body-medium': font('plain', 20, 14, 0.25, 400),
|
|
173
173
|
'body-small': font('plain', 16, 12, 0.4, 400),
|