@khanacademy/wonder-blocks-icon-button 10.3.18 → 10.4.0
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @khanacademy/wonder-blocks-icon-button@10.
|
|
2
|
+
> @khanacademy/wonder-blocks-icon-button@10.4.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-icon-button
|
|
3
3
|
> pnpm exec wonder-blocks-tokens .
|
|
4
4
|
|
|
5
5
|
CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-icon-button/dist/css
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Link } from "react-router-dom-v5-compat";
|
|
3
|
+
import { PhosphorIconAsset } from "@khanacademy/wonder-blocks-icon";
|
|
3
4
|
import type { ActivityIconButtonActionType, BaseIconButtonProps } from "../util/icon-button.types";
|
|
4
5
|
type AriaLabelOnly = {
|
|
5
6
|
/**
|
|
@@ -19,7 +20,7 @@ type LabelOnly = {
|
|
|
19
20
|
*/
|
|
20
21
|
label: string;
|
|
21
22
|
};
|
|
22
|
-
type Props = BaseIconButtonProps & (AriaLabelOnly | LabelOnly) & {
|
|
23
|
+
type Props = Omit<BaseIconButtonProps, "icon"> & (AriaLabelOnly | LabelOnly) & {
|
|
23
24
|
/**
|
|
24
25
|
* The action type of the button. This determines the visual style of the
|
|
25
26
|
* button.
|
|
@@ -28,6 +29,10 @@ type Props = BaseIconButtonProps & (AriaLabelOnly | LabelOnly) & {
|
|
|
28
29
|
* - `neutral` is used for buttons that indicate a neutral action.
|
|
29
30
|
*/
|
|
30
31
|
actionType?: ActivityIconButtonActionType;
|
|
32
|
+
/**
|
|
33
|
+
* A Phosphor icon asset (imported as a static SVG file), or an element.
|
|
34
|
+
*/
|
|
35
|
+
icon: PhosphorIconAsset | React.ReactElement;
|
|
31
36
|
};
|
|
32
37
|
/**
|
|
33
38
|
* `ActivityIconButton` is an icon button that is used for actions in the
|
package/dist/es/index.js
CHANGED
|
@@ -17,7 +17,7 @@ const StyledA=addStyle("a");const StyledButton=addStyle("button");const StyledLi
|
|
|
17
17
|
|
|
18
18
|
const theme$2=iconButtonTheme.iconButton;function IconChooser({icon,size}){const iconStyle={width:theme$2.icon.sizing[size],height:theme$2.icon.sizing[size]};switch(size){case"small":return jsx(PhosphorIcon,{size:"small",color:"currentColor",icon:icon,style:iconStyle});case"medium":default:return jsx(PhosphorIcon,{size:"medium",color:"currentColor",icon:icon,style:iconStyle})}}const IconButton=React.forwardRef(function IconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",size="medium",style,type="button",...restProps}=props;const[pressed,setPressed]=React.useState(false);const buttonStyles=_generateStyles$2(actionType,!!disabled,kind,size);const styles=[buttonStyles.default,disabled&&buttonStyles.disabled,pressed&&buttonStyles.pressed,style];const handlePress=React.useCallback(isPressing=>{setPressed(isPressing);},[]);return jsx(IconButtonUnstyled,{...restProps,disabled:disabled,onPress:handlePress,ref:ref,style:styles,type:type,children:jsx(IconChooser,{size:size,icon:icon})})});const styles$2={};const _generateStyles$2=(actionType="progressive",disabled,kind,size)=>{const buttonType=`${actionType}-d_${disabled}-${kind}-${size}`;if(styles$2[buttonType]){return styles$2[buttonType]}const borderWidthKind=theme$2.root.border.width[kind];const outlineOffsetKind=theme$2.root.border.offset[kind];const themeVariant=semanticColor.action[kind][actionType];const disabledState=semanticColor.action[kind].disabled;const disabledStatesStyles={borderColor:disabledState.border,borderWidth:borderWidthKind.default,background:disabledState.background,color:disabledState.foreground};const pressStyles={outline:kind==="primary"?`${borderWidthKind.press} solid ${themeVariant.press.border}`:"none",outlineOffset:kind==="primary"?outlineOffsetKind:undefined,border:kind!=="primary"?`${borderWidthKind.press} solid ${themeVariant.press.border}`:"none",background:themeVariant.press.background,borderRadius:theme$2.root.border.radius.press,color:themeVariant.press.foreground,transition:"border-radius 0.1s ease-in-out"};const newStyles={default:{height:theme$2.root.sizing[size],width:theme$2.root.sizing[size],borderRadius:theme$2.root.border.radius.default,borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,":hover":{background:themeVariant.hover.background,borderRadius:theme$2.root.border.radius.hover,color:themeVariant.hover.foreground,outline:kind==="primary"?`${borderWidthKind.hover} solid ${themeVariant.hover.border}`:undefined,outlineOffset:kind==="primary"?outlineOffsetKind:undefined,border:kind!=="primary"?`${borderWidthKind.hover} solid ${themeVariant.hover.border}`:undefined},["@media not (hover: hover)"]:{":hover":{backgroundColor:"transparent"}},":active":pressStyles,...focusStyles.focus},disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":{...disabledStatesStyles,outline:"none",borderRadius:theme$2.root.border.radius.default},":active":{...disabledStatesStyles,outline:"none",borderRadius:theme$2.root.border.radius.default},":focus-visible":disabledStatesStyles},pressed:pressStyles};styles$2[buttonType]=StyleSheet.create(newStyles);return styles$2[buttonType]};
|
|
19
19
|
|
|
20
|
-
const ActivityIconButton=React.forwardRef(function ActivityIconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",style,type="button","aria-label":ariaLabel,label,...restProps}=props;const[pressed,setPressed]=React.useState(false);const buttonStyles=_generateStyles$1(actionType,!!disabled,kind);const styles=[buttonStyles.button,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,style];const chonkyStyles=[buttonStyles.chonky,disabled&&buttonStyles.chonkyDisabled,!disabled&&pressed&&buttonStyles.chonkyPressed];const handlePress=React.useCallback(isPressing=>{setPressed(isPressing);},[]);const hasVisibleLabel=label!==undefined&&label!=="";return jsx(IconButtonUnstyled,{...restProps,disabled:disabled,onPress:handlePress,ref:ref,style:styles,type:type,...!hasVisibleLabel?{"aria-label":ariaLabel}:{},children:jsxs(Fragment,{children:[jsx(View,{style:chonkyStyles,className:"chonky",children:
|
|
20
|
+
const ActivityIconButton=React.forwardRef(function ActivityIconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",style,type="button","aria-label":ariaLabel,label,...restProps}=props;const[pressed,setPressed]=React.useState(false);const buttonStyles=_generateStyles$1(actionType,!!disabled,kind);const styles=[buttonStyles.button,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,style];const chonkyStyles=[buttonStyles.chonky,disabled&&buttonStyles.chonkyDisabled,!disabled&&pressed&&buttonStyles.chonkyPressed];const handlePress=React.useCallback(isPressing=>{setPressed(isPressing);},[]);const hasVisibleLabel=label!==undefined&&label!=="";const iconElement=React.useMemo(()=>{if(typeof icon==="string"){return jsx(PhosphorIcon,{size:"medium",color:"currentColor",icon:icon})}return icon},[icon]);return jsx(IconButtonUnstyled,{...restProps,disabled:disabled,onPress:handlePress,ref:ref,style:styles,type:type,...!hasVisibleLabel?{"aria-label":ariaLabel}:{},children:jsxs(Fragment,{children:[jsx(View,{style:chonkyStyles,className:"chonky",children:iconElement}),hasVisibleLabel&&jsx(BodyText,{tag:"span",size:"medium",weight:"semi",style:buttonStyles.label,children:label})]})})});const theme$1={root:{border:{width:{primary:{rest:border.width.thin,hover:border.width.thin,press:border.width.thin},secondary:{rest:border.width.thin,hover:border.width.thin,press:border.width.thin},tertiary:{rest:border.width.thin,hover:border.width.thin,press:border.width.thin}},radius:border.radius.radius_120},layout:{padding:{block:sizing.size_140,inline:sizing.size_200}},shadow:{y:{rest:"6px",hover:"8px",press:sizing.size_0}}},label:{color:{progressive:semanticColor.core.foreground.instructive.default,neutral:semanticColor.core.foreground.neutral.default,disabled:semanticColor.core.foreground.disabled.default},layout:{width:sizing.size_640}}};const styles$1={};const _generateStyles$1=(actionType="progressive",disabled,kind)=>{const buttonType=`${actionType}-d_${disabled}-${kind}`;if(styles$1[buttonType]){return styles$1[buttonType]}const borderWidthKind=theme$1.root.border.width[kind];const themeVariant=semanticColor.chonky[actionType];const disabledState=semanticColor.chonky.disabled;const disabledStatesStyles={outline:"none",transform:"none"};const chonkyDisabled={background:disabledState.background[kind],borderWidth:borderWidthKind.rest,borderColor:disabledState.border[kind],color:disabledState.foreground[kind],boxShadow:`0 ${theme$1.root.shadow.y.rest} 0 0 ${disabledState.shadow[kind]}`,transform:"none"};const chonkyPressed={background:themeVariant.background[kind].press,border:`${borderWidthKind.press} solid ${themeVariant.border[kind].press}`,boxShadow:`0 ${theme$1.root.shadow.y.press} 0 0 ${themeVariant.shadow[kind].press}`,color:themeVariant.foreground[kind].press,transform:`translateY(${theme$1.root.shadow.y.rest})`};const newStyles={button:{borderRadius:theme$1.root.border.radius,color:theme$1.label.color[actionType],flexDirection:"column",gap:sizing.size_020,maxWidth:theme$1.label.layout.width,alignSelf:"flex-start",justifySelf:"center",[":is(:hover) .chonky"]:{background:themeVariant.background[kind].hover,border:`${borderWidthKind.hover} solid ${themeVariant.border[kind].hover}`,boxShadow:`0 ${theme$1.root.shadow.y.hover} 0 0 ${themeVariant.shadow[kind].hover}`,color:themeVariant.foreground[kind].hover,transform:`translateY(calc((${theme$1.root.shadow.y.hover} - ${theme$1.root.shadow.y.rest}) * -1))`},[":is(:active) .chonky"]:chonkyPressed,...focusStyles.focus},disabled:{cursor:"not-allowed",color:theme$1.label.color.disabled,...disabledStatesStyles,":hover":disabledStatesStyles,":active":disabledStatesStyles,":focus-visible":{transform:"none"},[":is(:hover) .chonky"]:disabledStatesStyles,[":is(:hover) .chonky"]:chonkyDisabled,[":is(:active) .chonky"]:chonkyDisabled},pressed:{[".chonky"]:chonkyPressed},chonky:{borderRadius:theme$1.root.border.radius,marginBlockEnd:theme$1.root.shadow.y.rest,paddingBlock:theme$1.root.layout.padding.block,paddingInline:theme$1.root.layout.padding.inline,background:themeVariant.background[kind].rest,border:`${borderWidthKind.rest} solid ${themeVariant.border[kind].rest}`,color:themeVariant.foreground[kind].rest,boxShadow:`0 ${theme$1.root.shadow.y.rest} 0 0 ${themeVariant.shadow[kind].rest}`,transition:"all 0.12s ease-out",["@media not (hover: hover)"]:{transition:"none"}},chonkyPressed,chonkyDisabled,label:{margin:0,textAlign:"center",display:"-webkit-box",WebkitBoxOrient:"vertical",WebkitLineClamp:"2",overflow:"hidden",wordBreak:"break-word"}};styles$1[buttonType]=StyleSheet.create(newStyles);return styles$1[buttonType]};
|
|
21
21
|
|
|
22
22
|
const ConversationIconButton=React.forwardRef(function ConversationIconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",style,type="button",...restProps}=props;const[pressed,setPressed]=React.useState(false);const buttonStyles=_generateStyles(actionType,!!disabled,kind);const styles=[buttonStyles.default,disabled&&buttonStyles.disabled,pressed&&buttonStyles.pressed,style];const handlePress=React.useCallback(isPressing=>{setPressed(isPressing);},[]);return jsx(IconButtonUnstyled,{...restProps,disabled:disabled,onPress:handlePress,ref:ref,style:styles,type:type,children:jsx(PhosphorIcon,{size:"small",color:"currentColor",icon:icon})})});const styles={};const theme={root:{border:{radius:border.radius.radius_full,width:{primary:{default:border.width.thin,hover:border.width.thin,press:border.width.medium},secondary:{default:border.width.thin,hover:border.width.thin,press:border.width.medium},tertiary:{default:border.width.thin,hover:border.width.thin,press:border.width.medium}}},layout:{padding:sizing.size_100},sizing:{default:sizing.size_360}}};const _generateStyles=(actionType="progressive",disabled,kind)=>{const buttonType=`${actionType}-d_${disabled}-${kind}`;if(styles[buttonType]){return styles[buttonType]}const borderWidthKind=theme.root.border.width[kind];const themeVariant=semanticColor.action[kind][actionType];const disabledState=semanticColor.action[kind].disabled;const disabledStatesStyles={padding:theme.root.layout.padding,borderColor:disabledState.border,borderWidth:borderWidthKind.default,background:disabledState.background,color:disabledState.foreground};const pressStyles={border:`${borderWidthKind.press} solid ${themeVariant.press.border}`,background:themeVariant.press.background,color:themeVariant.press.foreground,padding:`calc(${theme.root.layout.padding} - 1px)`};const newStyles={default:{borderRadius:theme.root.border.radius,padding:theme.root.layout.padding,alignSelf:"center",justifySelf:"center",borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,":hover":{padding:theme.root.layout.padding,background:themeVariant.hover.background,color:themeVariant.hover.foreground,border:`${borderWidthKind.hover} solid ${themeVariant.hover.border}`},["@media not (hover: hover)"]:{":hover":{backgroundColor:"transparent"}},":active":pressStyles,...focusStyles.focus},disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":{...disabledStatesStyles,outline:"none"},":active":{...disabledStatesStyles,outline:"none"},":focus-visible":disabledStatesStyles},pressed:pressStyles};styles[buttonType]=StyleSheet.create(newStyles);return styles[buttonType]};
|
|
23
23
|
|
package/dist/index.js
CHANGED
|
@@ -41,7 +41,7 @@ const StyledA=wonderBlocksCore.addStyle("a");const StyledButton=wonderBlocksCore
|
|
|
41
41
|
|
|
42
42
|
const theme$2=iconButtonTheme.iconButton;function IconChooser({icon,size}){const iconStyle={width:theme$2.icon.sizing[size],height:theme$2.icon.sizing[size]};switch(size){case"small":return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"small",color:"currentColor",icon:icon,style:iconStyle});case"medium":default:return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"medium",color:"currentColor",icon:icon,style:iconStyle})}}const IconButton=React__namespace.forwardRef(function IconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",size="medium",style,type="button",...restProps}=props;const[pressed,setPressed]=React__namespace.useState(false);const buttonStyles=_generateStyles$2(actionType,!!disabled,kind,size);const styles=[buttonStyles.default,disabled&&buttonStyles.disabled,pressed&&buttonStyles.pressed,style];const handlePress=React__namespace.useCallback(isPressing=>{setPressed(isPressing);},[]);return jsxRuntime.jsx(IconButtonUnstyled,{...restProps,disabled:disabled,onPress:handlePress,ref:ref,style:styles,type:type,children:jsxRuntime.jsx(IconChooser,{size:size,icon:icon})})});const styles$2={};const _generateStyles$2=(actionType="progressive",disabled,kind,size)=>{const buttonType=`${actionType}-d_${disabled}-${kind}-${size}`;if(styles$2[buttonType]){return styles$2[buttonType]}const borderWidthKind=theme$2.root.border.width[kind];const outlineOffsetKind=theme$2.root.border.offset[kind];const themeVariant=wonderBlocksTokens.semanticColor.action[kind][actionType];const disabledState=wonderBlocksTokens.semanticColor.action[kind].disabled;const disabledStatesStyles={borderColor:disabledState.border,borderWidth:borderWidthKind.default,background:disabledState.background,color:disabledState.foreground};const pressStyles={outline:kind==="primary"?`${borderWidthKind.press} solid ${themeVariant.press.border}`:"none",outlineOffset:kind==="primary"?outlineOffsetKind:undefined,border:kind!=="primary"?`${borderWidthKind.press} solid ${themeVariant.press.border}`:"none",background:themeVariant.press.background,borderRadius:theme$2.root.border.radius.press,color:themeVariant.press.foreground,transition:"border-radius 0.1s ease-in-out"};const newStyles={default:{height:theme$2.root.sizing[size],width:theme$2.root.sizing[size],borderRadius:theme$2.root.border.radius.default,borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,":hover":{background:themeVariant.hover.background,borderRadius:theme$2.root.border.radius.hover,color:themeVariant.hover.foreground,outline:kind==="primary"?`${borderWidthKind.hover} solid ${themeVariant.hover.border}`:undefined,outlineOffset:kind==="primary"?outlineOffsetKind:undefined,border:kind!=="primary"?`${borderWidthKind.hover} solid ${themeVariant.hover.border}`:undefined},["@media not (hover: hover)"]:{":hover":{backgroundColor:"transparent"}},":active":pressStyles,...wonderBlocksStyles.focusStyles.focus},disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":{...disabledStatesStyles,outline:"none",borderRadius:theme$2.root.border.radius.default},":active":{...disabledStatesStyles,outline:"none",borderRadius:theme$2.root.border.radius.default},":focus-visible":disabledStatesStyles},pressed:pressStyles};styles$2[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles$2[buttonType]};
|
|
43
43
|
|
|
44
|
-
const ActivityIconButton=React__namespace.forwardRef(function ActivityIconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",style,type="button","aria-label":ariaLabel,label,...restProps}=props;const[pressed,setPressed]=React__namespace.useState(false);const buttonStyles=_generateStyles$1(actionType,!!disabled,kind);const styles=[buttonStyles.button,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,style];const chonkyStyles=[buttonStyles.chonky,disabled&&buttonStyles.chonkyDisabled,!disabled&&pressed&&buttonStyles.chonkyPressed];const handlePress=React__namespace.useCallback(isPressing=>{setPressed(isPressing);},[]);const hasVisibleLabel=label!==undefined&&label!=="";return jsxRuntime.jsx(IconButtonUnstyled,{...restProps,disabled:disabled,onPress:handlePress,ref:ref,style:styles,type:type,...!hasVisibleLabel?{"aria-label":ariaLabel}:{},children:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(wonderBlocksCore.View,{style:chonkyStyles,className:"chonky",children:
|
|
44
|
+
const ActivityIconButton=React__namespace.forwardRef(function ActivityIconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",style,type="button","aria-label":ariaLabel,label,...restProps}=props;const[pressed,setPressed]=React__namespace.useState(false);const buttonStyles=_generateStyles$1(actionType,!!disabled,kind);const styles=[buttonStyles.button,disabled&&buttonStyles.disabled,!disabled&&pressed&&buttonStyles.pressed,style];const chonkyStyles=[buttonStyles.chonky,disabled&&buttonStyles.chonkyDisabled,!disabled&&pressed&&buttonStyles.chonkyPressed];const handlePress=React__namespace.useCallback(isPressing=>{setPressed(isPressing);},[]);const hasVisibleLabel=label!==undefined&&label!=="";const iconElement=React__namespace.useMemo(()=>{if(typeof icon==="string"){return jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"medium",color:"currentColor",icon:icon})}return icon},[icon]);return jsxRuntime.jsx(IconButtonUnstyled,{...restProps,disabled:disabled,onPress:handlePress,ref:ref,style:styles,type:type,...!hasVisibleLabel?{"aria-label":ariaLabel}:{},children:jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(wonderBlocksCore.View,{style:chonkyStyles,className:"chonky",children:iconElement}),hasVisibleLabel&&jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",size:"medium",weight:"semi",style:buttonStyles.label,children:label})]})})});const theme$1={root:{border:{width:{primary:{rest:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.thin},secondary:{rest:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.thin},tertiary:{rest:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.thin}},radius:wonderBlocksTokens.border.radius.radius_120},layout:{padding:{block:wonderBlocksTokens.sizing.size_140,inline:wonderBlocksTokens.sizing.size_200}},shadow:{y:{rest:"6px",hover:"8px",press:wonderBlocksTokens.sizing.size_0}}},label:{color:{progressive:wonderBlocksTokens.semanticColor.core.foreground.instructive.default,neutral:wonderBlocksTokens.semanticColor.core.foreground.neutral.default,disabled:wonderBlocksTokens.semanticColor.core.foreground.disabled.default},layout:{width:wonderBlocksTokens.sizing.size_640}}};const styles$1={};const _generateStyles$1=(actionType="progressive",disabled,kind)=>{const buttonType=`${actionType}-d_${disabled}-${kind}`;if(styles$1[buttonType]){return styles$1[buttonType]}const borderWidthKind=theme$1.root.border.width[kind];const themeVariant=wonderBlocksTokens.semanticColor.chonky[actionType];const disabledState=wonderBlocksTokens.semanticColor.chonky.disabled;const disabledStatesStyles={outline:"none",transform:"none"};const chonkyDisabled={background:disabledState.background[kind],borderWidth:borderWidthKind.rest,borderColor:disabledState.border[kind],color:disabledState.foreground[kind],boxShadow:`0 ${theme$1.root.shadow.y.rest} 0 0 ${disabledState.shadow[kind]}`,transform:"none"};const chonkyPressed={background:themeVariant.background[kind].press,border:`${borderWidthKind.press} solid ${themeVariant.border[kind].press}`,boxShadow:`0 ${theme$1.root.shadow.y.press} 0 0 ${themeVariant.shadow[kind].press}`,color:themeVariant.foreground[kind].press,transform:`translateY(${theme$1.root.shadow.y.rest})`};const newStyles={button:{borderRadius:theme$1.root.border.radius,color:theme$1.label.color[actionType],flexDirection:"column",gap:wonderBlocksTokens.sizing.size_020,maxWidth:theme$1.label.layout.width,alignSelf:"flex-start",justifySelf:"center",[":is(:hover) .chonky"]:{background:themeVariant.background[kind].hover,border:`${borderWidthKind.hover} solid ${themeVariant.border[kind].hover}`,boxShadow:`0 ${theme$1.root.shadow.y.hover} 0 0 ${themeVariant.shadow[kind].hover}`,color:themeVariant.foreground[kind].hover,transform:`translateY(calc((${theme$1.root.shadow.y.hover} - ${theme$1.root.shadow.y.rest}) * -1))`},[":is(:active) .chonky"]:chonkyPressed,...wonderBlocksStyles.focusStyles.focus},disabled:{cursor:"not-allowed",color:theme$1.label.color.disabled,...disabledStatesStyles,":hover":disabledStatesStyles,":active":disabledStatesStyles,":focus-visible":{transform:"none"},[":is(:hover) .chonky"]:disabledStatesStyles,[":is(:hover) .chonky"]:chonkyDisabled,[":is(:active) .chonky"]:chonkyDisabled},pressed:{[".chonky"]:chonkyPressed},chonky:{borderRadius:theme$1.root.border.radius,marginBlockEnd:theme$1.root.shadow.y.rest,paddingBlock:theme$1.root.layout.padding.block,paddingInline:theme$1.root.layout.padding.inline,background:themeVariant.background[kind].rest,border:`${borderWidthKind.rest} solid ${themeVariant.border[kind].rest}`,color:themeVariant.foreground[kind].rest,boxShadow:`0 ${theme$1.root.shadow.y.rest} 0 0 ${themeVariant.shadow[kind].rest}`,transition:"all 0.12s ease-out",["@media not (hover: hover)"]:{transition:"none"}},chonkyPressed,chonkyDisabled,label:{margin:0,textAlign:"center",display:"-webkit-box",WebkitBoxOrient:"vertical",WebkitLineClamp:"2",overflow:"hidden",wordBreak:"break-word"}};styles$1[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles$1[buttonType]};
|
|
45
45
|
|
|
46
46
|
const ConversationIconButton=React__namespace.forwardRef(function ConversationIconButton(props,ref){const{actionType="progressive",disabled=false,icon,kind="primary",style,type="button",...restProps}=props;const[pressed,setPressed]=React__namespace.useState(false);const buttonStyles=_generateStyles(actionType,!!disabled,kind);const styles=[buttonStyles.default,disabled&&buttonStyles.disabled,pressed&&buttonStyles.pressed,style];const handlePress=React__namespace.useCallback(isPressing=>{setPressed(isPressing);},[]);return jsxRuntime.jsx(IconButtonUnstyled,{...restProps,disabled:disabled,onPress:handlePress,ref:ref,style:styles,type:type,children:jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{size:"small",color:"currentColor",icon:icon})})});const styles={};const theme={root:{border:{radius:wonderBlocksTokens.border.radius.radius_full,width:{primary:{default:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.medium},secondary:{default:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.medium},tertiary:{default:wonderBlocksTokens.border.width.thin,hover:wonderBlocksTokens.border.width.thin,press:wonderBlocksTokens.border.width.medium}}},layout:{padding:wonderBlocksTokens.sizing.size_100},sizing:{default:wonderBlocksTokens.sizing.size_360}}};const _generateStyles=(actionType="progressive",disabled,kind)=>{const buttonType=`${actionType}-d_${disabled}-${kind}`;if(styles[buttonType]){return styles[buttonType]}const borderWidthKind=theme.root.border.width[kind];const themeVariant=wonderBlocksTokens.semanticColor.action[kind][actionType];const disabledState=wonderBlocksTokens.semanticColor.action[kind].disabled;const disabledStatesStyles={padding:theme.root.layout.padding,borderColor:disabledState.border,borderWidth:borderWidthKind.default,background:disabledState.background,color:disabledState.foreground};const pressStyles={border:`${borderWidthKind.press} solid ${themeVariant.press.border}`,background:themeVariant.press.background,color:themeVariant.press.foreground,padding:`calc(${theme.root.layout.padding} - 1px)`};const newStyles={default:{borderRadius:theme.root.border.radius,padding:theme.root.layout.padding,alignSelf:"center",justifySelf:"center",borderStyle:"solid",borderWidth:borderWidthKind.default,borderColor:themeVariant.default.border,background:themeVariant.default.background,color:themeVariant.default.foreground,":hover":{padding:theme.root.layout.padding,background:themeVariant.hover.background,color:themeVariant.hover.foreground,border:`${borderWidthKind.hover} solid ${themeVariant.hover.border}`},["@media not (hover: hover)"]:{":hover":{backgroundColor:"transparent"}},":active":pressStyles,...wonderBlocksStyles.focusStyles.focus},disabled:{cursor:"not-allowed",...disabledStatesStyles,":hover":{...disabledStatesStyles,outline:"none"},":active":{...disabledStatesStyles,outline:"none"},":focus-visible":disabledStatesStyles},pressed:pressStyles};styles[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles[buttonType]};
|
|
47
47
|
|