@telegraph/button 0.4.0 → 0.4.1

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.
Files changed (7) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/index.js +1 -1
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/esm/index.mjs +16 -16
  5. package/dist/esm/index.mjs.map +1 -1
  6. package/dist/types/Button/Button.constants.d.ts +16 -16
  7. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @telegraph/button
2
2
 
3
+ ## 0.4.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#701](https://github.com/knocklabs/telegraph/pull/701) [`16e678c`](https://github.com/knocklabs/telegraph/commit/16e678c5e8bc7f13613116954bc15099a8694bb7) Thanks [@ksorathia](https://github.com/ksorathia)! - Add surface-3 background color for interactive outlined variants.
8
+
3
9
  ## 0.4.0
4
10
 
5
11
  ### Minor Changes
package/dist/cjs/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),P=require("@telegraph/helpers"),w=require("@telegraph/icon"),R=require("@telegraph/layout"),B=require("@telegraph/style-engine"),M=require("@telegraph/typography"),m=require("clsx"),b=require("react"),L={default_buttonShadowColor:{cssVar:"--box-shadow",value:"inset 0 0 0 1px var(--tgph-VARIABLE)"},hover_buttonShadowColor:{cssVar:"--tgph-button-hover-shadow",value:"inset 0 0 0 1px var(--tgph-VARIABLE)"},focus_buttonShadowColor:{cssVar:"--tgph-button-focus-shadow",value:"inset 0 0 0 1px var(--tgph-VARIABLE)"},active_buttonShadowColor:{cssVar:"--tgph-button-active-shadow",value:"inset 0 0 0 1px var(--tgph-VARIABLE)"},hover_textColor:{cssVar:"--tgph-button-hover-text-color",value:"var(--tgph-VARIABLE)"}},q={solid:{default:{backgroundColor:"gray-12",hover_backgroundColor:"gray-11",focus_backgroundColor:"gray-10",active_backgroundColor:"gray-10",hover_textColor:"white"},accent:{backgroundColor:"accent-9",hover_backgroundColor:"accent-10",focus_backgroundColor:"accent-11",active_backgroundColor:"accent-11",hover_textColor:"white"},red:{backgroundColor:"red-9",hover_backgroundColor:"red-10",focus_backgroundColor:"red-11",active_backgroundColor:"red-11",hover_textColor:"white"},gray:{backgroundColor:"gray-9",hover_backgroundColor:"gray-10",focus_backgroundColor:"gray-11",active_backgroundColor:"gray-11",hover_textColor:"white"},green:{backgroundColor:"green-9",hover_backgroundColor:"green-10",focus_backgroundColor:"green-11",active_backgroundColor:"green-11",hover_textColor:"white"},blue:{backgroundColor:"blue-9",hover_backgroundColor:"blue-10",focus_backgroundColor:"blue-11",active_backgroundColor:"blue-11",hover_textColor:"white"},yellow:{backgroundColor:"yellow-9",hover_backgroundColor:"yellow-10",focus_backgroundColor:"yellow-11",active_backgroundColor:"yellow-11",hover_textColor:"white"},purple:{backgroundColor:"purple-9",hover_backgroundColor:"purple-10",focus_backgroundColor:"purple-11",active_backgroundColor:"purple-11",hover_textColor:"white"}},soft:{default:{backgroundColor:"gray-3",hover_backgroundColor:"gray-4",focus_backgroundColor:"gray-5",active_backgroundColor:"gray-5",hover_textColor:"gray-12"},gray:{backgroundColor:"gray-3",hover_backgroundColor:"gray-4",focus_backgroundColor:"gray-5",active_backgroundColor:"gray-5",hover_textColor:"gray-12"},red:{backgroundColor:"red-3",hover_backgroundColor:"red-4",focus_backgroundColor:"red-5",active_backgroundColor:"red-5",hover_textColor:"red-11"},accent:{backgroundColor:"accent-3",hover_backgroundColor:"accent-4",focus_backgroundColor:"accent-5",active_backgroundColor:"accent-5",hover_textColor:"accent-11"},green:{backgroundColor:"green-3",hover_backgroundColor:"green-4",focus_backgroundColor:"green-5",active_backgroundColor:"green-5",hover_textColor:"green-11"},blue:{backgroundColor:"blue-3",hover_backgroundColor:"blue-4",focus_backgroundColor:"blue-5",active_backgroundColor:"blue-5",hover_textColor:"blue-11"},yellow:{backgroundColor:"yellow-3",hover_backgroundColor:"yellow-4",focus_backgroundColor:"yellow-5",active_backgroundColor:"yellow-5",hover_textColor:"yellow-11"},purple:{backgroundColor:"purple-3",hover_backgroundColor:"purple-4",focus_backgroundColor:"purple-5",active_backgroundColor:"purple-5",hover_textColor:"purple-11"}},outline:{default:{backgroundColor:"surface-1",focus_backgroundColor:"surface-1",hover_backgroundColor:"gray-2",active_backgroundColor:"gray-3",default_buttonShadowColor:"gray-6",hover_buttonShadowColor:"gray-7",focus_buttonShadowColor:"gray-8",active_buttonShadowColor:"gray-8",hover_textColor:"gray-12"},gray:{backgroundColor:"surface-1",focus_backgroundColor:"surface-1",hover_backgroundColor:"gray-2",active_backgroundColor:"gray-3",default_buttonShadowColor:"gray-6",hover_buttonShadowColor:"gray-7",focus_buttonShadowColor:"gray-8",active_buttonShadowColor:"gray-8",hover_textColor:"gray-12"},red:{backgroundColor:"surface-1",focus_backgroundColor:"surface-1",hover_backgroundColor:"red-2",active_backgroundColor:"red-3",default_buttonShadowColor:"red-6",hover_buttonShadowColor:"red-7",focus_buttonShadowColor:"red-8",active_buttonShadowColor:"red-8",hover_textColor:"red-11"},accent:{backgroundColor:"surface-1",focus_backgroundColor:"surface-1",hover_backgroundColor:"accent-2",active_backgroundColor:"accent-3",default_buttonShadowColor:"accent-6",hover_buttonShadowColor:"accent-7",focus_buttonShadowColor:"accent-8",active_buttonShadowColor:"accent-8",hover_textColor:"accent-11"},green:{backgroundColor:"surface-1",focus_backgroundColor:"surface-1",hover_backgroundColor:"green-2",active_backgroundColor:"green-3",default_buttonShadowColor:"green-6",hover_buttonShadowColor:"green-7",focus_buttonShadowColor:"green-8",active_buttonShadowColor:"green-8",hover_textColor:"green-11"},blue:{backgroundColor:"surface-1",focus_backgroundColor:"surface-1",hover_backgroundColor:"blue-2",active_backgroundColor:"blue-3",default_buttonShadowColor:"blue-6",hover_buttonShadowColor:"blue-7",focus_buttonShadowColor:"blue-8",active_buttonShadowColor:"blue-8",hover_textColor:"blue-11"},yellow:{backgroundColor:"surface-1",focus_backgroundColor:"surface-1",hover_backgroundColor:"yellow-2",active_backgroundColor:"yellow-3",default_buttonShadowColor:"yellow-6",hover_buttonShadowColor:"yellow-7",focus_buttonShadowColor:"yellow-8",active_buttonShadowColor:"yellow-8",hover_textColor:"yellow-11"},purple:{backgroundColor:"surface-1",focus_backgroundColor:"surface-1",hover_backgroundColor:"purple-2",active_backgroundColor:"purple-3",default_buttonShadowColor:"purple-6",hover_buttonShadowColor:"purple-7",focus_buttonShadowColor:"purple-8",active_buttonShadowColor:"purple-8",hover_textColor:"purple-11"}},ghost:{default:{backgroundColor:"transparent",hover_backgroundColor:"gray-3",focus_backgroundColor:"gray-4",active_backgroundColor:"gray-4",hover_textColor:"gray-12"},gray:{backgroundColor:"transparent",hover_backgroundColor:"gray-3",focus_backgroundColor:"gray-4",active_backgroundColor:"gray-4",hover_textColor:"gray-12"},red:{backgroundColor:"transparent",hover_backgroundColor:"red-3",focus_backgroundColor:"red-4",active_backgroundColor:"red-4",hover_textColor:"red-11"},accent:{backgroundColor:"transparent",hover_backgroundColor:"accent-3",focus_backgroundColor:"accent-4",active_backgroundColor:"accent-4",hover_textColor:"accent-11"},green:{backgroundColor:"transparent",hover_backgroundColor:"green-3",focus_backgroundColor:"green-4",active_backgroundColor:"green-4",hover_textColor:"green-11"},blue:{backgroundColor:"transparent",hover_backgroundColor:"blue-3",focus_backgroundColor:"blue-4",active_backgroundColor:"blue-4",hover_textColor:"blue-11"},yellow:{backgroundColor:"transparent",hover_backgroundColor:"yellow-3",focus_backgroundColor:"yellow-4",active_backgroundColor:"yellow-4",hover_textColor:"yellow-11"},purple:{backgroundColor:"transparent",hover_backgroundColor:"purple-3",focus_backgroundColor:"purple-4",active_backgroundColor:"purple-4",hover_textColor:"purple-11"}}},N={default:{0:{w:"auto",h:"5",gap:"0_5",px:"1",rounded:"2"},1:{w:"auto",h:"6",gap:"1",px:"1_5",rounded:"2"},2:{w:"auto",h:"8",gap:"1_5",px:"2",rounded:"2"},3:{w:"auto",h:"10",gap:"2",px:"3",rounded:"3"}},"icon-only":{0:{w:"5",h:"5",gap:"0",px:"0",rounded:"2"},1:{w:"6",h:"6",gap:"0",px:"0",rounded:"2"},2:{w:"8",h:"8",gap:"0",px:"0",rounded:"2"},3:{w:"10",h:"10",gap:"0",px:"0",rounded:"3"}}},z={0:"0",1:"1",2:"2",3:"3"},D={solid:{default:"white",gray:"white",red:"white",accent:"white",green:"white",blue:"white",yellow:"white",purple:"white",disabled:"disabled"},soft:{default:"default",gray:"gray",red:"red",accent:"accent",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"},outline:{default:"default",gray:"gray",red:"red",accent:"accent",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"},ghost:{default:"default",gray:"gray",red:"red",accent:"accent",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"}},f={0:"0",1:"1",2:"2",3:"3"},x={solid:{default:"white",gray:"white",red:"white",accent:"white",green:"white",blue:"white",yellow:"white",purple:"white",disabled:"disabled"},soft:{default:"default",accent:"accent",gray:"gray",red:"red",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"},outline:{default:"default",accent:"accent",gray:"gray",red:"red",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"},ghost:{default:"gray",accent:"accent",gray:"gray",red:"red",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"}},S={default:"secondary","icon-only":"primary"},p=b.createContext({variant:"solid",size:"2",color:"default",state:"default",layout:"default",active:!1}),Z=o=>o.disabled?"disabled":o.state==="loading"?"loading":o.active?"active":o.state,A=({as:o,variant:r="solid",size:t="2",color:e="default",state:u="default",active:a=!1,type:n="button",disabled:d,className:c,children:g,style:i,...V})=>{const j=Z({state:u,disabled:d,active:a}),s=P.useDeterminateState({value:j,determinateValue:"loading",minDurationMs:1200}),{styleProp:E,otherProps:O}=B.useStyleEngine({props:{...q[r][e],style:i},cssVars:L}),k=d||!o?"button":o,_=b.useMemo(()=>{var y;const C=b.Children.toArray(g);if((C==null?void 0:C.length)===1&&b.isValidElement(C[0])){const h=C[0];if((y=h==null?void 0:h.props)!=null&&y.icon)return"icon-only"}return"default"},[g]);return l.jsx(p.Provider,{value:{variant:r,size:t,color:e,state:s,layout:_,active:a},children:l.jsxs(R.Stack,{as:k,className:m("tgph-button",c),display:"inline-flex",align:"center",justify:"center",...N[_][t],style:E,"data-tgph-button":!0,"data-tgph-button-layout":_,"data-tgph-button-state":s,"data-tgph-button-variant":r,"data-tgph-button-color":e,disabled:s==="disabled"||s==="loading",...k==="button"&&{type:n},...O,...V,children:[s==="loading"&&l.jsx(w.Spinner,{size:f[t],color:x[r][e],variant:S[_],"data-tgph-button-loading-icon":!0}),g]})})},v=({size:o,color:r,variant:t,icon:e,alt:u,"aria-hidden":a,internal_iconType:n,...d})=>{const c=b.useContext(p),g={size:o??f[c.size],color:r??x[c.variant][c.state==="disabled"?"disabled":c.color],variant:t??S[c.layout]},i=u?{alt:u}:{"aria-hidden":a};return c.state==="loading"&&n==="leading"?null:l.jsx(w.Icon,{icon:e,"data-button-icon":!0,"data-button-icon-color":g.color,...i,...g,...d})},I=({as:o,color:r,size:t,weight:e="medium",style:u,...a})=>{const n=b.useContext(p),d=r??D[n.variant][n.state==="disabled"?"disabled":n.color];return l.jsx(M.Text,{as:o||"span",color:d,size:t??z[n.size],weight:e,internal_optionalAs:!0,"data-button-text":!0,"data-button-text-color":d,style:{textDecoration:"none",whiteSpace:"nowrap",...u},...a})},T=({leadingIcon:o,trailingIcon:r,icon:t,children:e,...u})=>{const a=o||t;return l.jsxs(A,{...u,children:[a&&l.jsx(v,{...a,internal_iconType:"leading"}),e&&l.jsx(I,{children:e}),r&&l.jsx(v,{...r,internal_iconType:"trailing"})]})};Object.assign(T,{Root:A,Icon:v,Text:I});const U=T;exports.Button=U;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),P=require("@telegraph/helpers"),w=require("@telegraph/icon"),R=require("@telegraph/layout"),B=require("@telegraph/style-engine"),M=require("@telegraph/typography"),m=require("clsx"),b=require("react"),L={default_buttonShadowColor:{cssVar:"--box-shadow",value:"inset 0 0 0 1px var(--tgph-VARIABLE)"},hover_buttonShadowColor:{cssVar:"--tgph-button-hover-shadow",value:"inset 0 0 0 1px var(--tgph-VARIABLE)"},focus_buttonShadowColor:{cssVar:"--tgph-button-focus-shadow",value:"inset 0 0 0 1px var(--tgph-VARIABLE)"},active_buttonShadowColor:{cssVar:"--tgph-button-active-shadow",value:"inset 0 0 0 1px var(--tgph-VARIABLE)"},hover_textColor:{cssVar:"--tgph-button-hover-text-color",value:"var(--tgph-VARIABLE)"}},q={solid:{default:{backgroundColor:"gray-12",hover_backgroundColor:"gray-11",focus_backgroundColor:"gray-10",active_backgroundColor:"gray-10",hover_textColor:"white"},accent:{backgroundColor:"accent-9",hover_backgroundColor:"accent-10",focus_backgroundColor:"accent-11",active_backgroundColor:"accent-11",hover_textColor:"white"},red:{backgroundColor:"red-9",hover_backgroundColor:"red-10",focus_backgroundColor:"red-11",active_backgroundColor:"red-11",hover_textColor:"white"},gray:{backgroundColor:"gray-9",hover_backgroundColor:"gray-10",focus_backgroundColor:"gray-11",active_backgroundColor:"gray-11",hover_textColor:"white"},green:{backgroundColor:"green-9",hover_backgroundColor:"green-10",focus_backgroundColor:"green-11",active_backgroundColor:"green-11",hover_textColor:"white"},blue:{backgroundColor:"blue-9",hover_backgroundColor:"blue-10",focus_backgroundColor:"blue-11",active_backgroundColor:"blue-11",hover_textColor:"white"},yellow:{backgroundColor:"yellow-9",hover_backgroundColor:"yellow-10",focus_backgroundColor:"yellow-11",active_backgroundColor:"yellow-11",hover_textColor:"white"},purple:{backgroundColor:"purple-9",hover_backgroundColor:"purple-10",focus_backgroundColor:"purple-11",active_backgroundColor:"purple-11",hover_textColor:"white"}},soft:{default:{backgroundColor:"gray-3",hover_backgroundColor:"gray-4",focus_backgroundColor:"gray-5",active_backgroundColor:"gray-5",hover_textColor:"gray-12"},gray:{backgroundColor:"gray-3",hover_backgroundColor:"gray-4",focus_backgroundColor:"gray-5",active_backgroundColor:"gray-5",hover_textColor:"gray-12"},red:{backgroundColor:"red-3",hover_backgroundColor:"red-4",focus_backgroundColor:"red-5",active_backgroundColor:"red-5",hover_textColor:"red-11"},accent:{backgroundColor:"accent-3",hover_backgroundColor:"accent-4",focus_backgroundColor:"accent-5",active_backgroundColor:"accent-5",hover_textColor:"accent-11"},green:{backgroundColor:"green-3",hover_backgroundColor:"green-4",focus_backgroundColor:"green-5",active_backgroundColor:"green-5",hover_textColor:"green-11"},blue:{backgroundColor:"blue-3",hover_backgroundColor:"blue-4",focus_backgroundColor:"blue-5",active_backgroundColor:"blue-5",hover_textColor:"blue-11"},yellow:{backgroundColor:"yellow-3",hover_backgroundColor:"yellow-4",focus_backgroundColor:"yellow-5",active_backgroundColor:"yellow-5",hover_textColor:"yellow-11"},purple:{backgroundColor:"purple-3",hover_backgroundColor:"purple-4",focus_backgroundColor:"purple-5",active_backgroundColor:"purple-5",hover_textColor:"purple-11"}},outline:{default:{backgroundColor:"surface-3",focus_backgroundColor:"surface-3",hover_backgroundColor:"gray-2",active_backgroundColor:"gray-3",default_buttonShadowColor:"gray-6",hover_buttonShadowColor:"gray-7",focus_buttonShadowColor:"gray-8",active_buttonShadowColor:"gray-8",hover_textColor:"gray-12"},gray:{backgroundColor:"surface-3",focus_backgroundColor:"surface-3",hover_backgroundColor:"gray-2",active_backgroundColor:"gray-3",default_buttonShadowColor:"gray-6",hover_buttonShadowColor:"gray-7",focus_buttonShadowColor:"gray-8",active_buttonShadowColor:"gray-8",hover_textColor:"gray-12"},red:{backgroundColor:"surface-3",focus_backgroundColor:"surface-3",hover_backgroundColor:"red-2",active_backgroundColor:"red-3",default_buttonShadowColor:"red-6",hover_buttonShadowColor:"red-7",focus_buttonShadowColor:"red-8",active_buttonShadowColor:"red-8",hover_textColor:"red-11"},accent:{backgroundColor:"surface-3",focus_backgroundColor:"surface-3",hover_backgroundColor:"accent-2",active_backgroundColor:"accent-3",default_buttonShadowColor:"accent-6",hover_buttonShadowColor:"accent-7",focus_buttonShadowColor:"accent-8",active_buttonShadowColor:"accent-8",hover_textColor:"accent-11"},green:{backgroundColor:"surface-3",focus_backgroundColor:"surface-3",hover_backgroundColor:"green-2",active_backgroundColor:"green-3",default_buttonShadowColor:"green-6",hover_buttonShadowColor:"green-7",focus_buttonShadowColor:"green-8",active_buttonShadowColor:"green-8",hover_textColor:"green-11"},blue:{backgroundColor:"surface-3",focus_backgroundColor:"surface-3",hover_backgroundColor:"blue-2",active_backgroundColor:"blue-3",default_buttonShadowColor:"blue-6",hover_buttonShadowColor:"blue-7",focus_buttonShadowColor:"blue-8",active_buttonShadowColor:"blue-8",hover_textColor:"blue-11"},yellow:{backgroundColor:"surface-3",focus_backgroundColor:"surface-3",hover_backgroundColor:"yellow-2",active_backgroundColor:"yellow-3",default_buttonShadowColor:"yellow-6",hover_buttonShadowColor:"yellow-7",focus_buttonShadowColor:"yellow-8",active_buttonShadowColor:"yellow-8",hover_textColor:"yellow-11"},purple:{backgroundColor:"surface-3",focus_backgroundColor:"surface-3",hover_backgroundColor:"purple-2",active_backgroundColor:"purple-3",default_buttonShadowColor:"purple-6",hover_buttonShadowColor:"purple-7",focus_buttonShadowColor:"purple-8",active_buttonShadowColor:"purple-8",hover_textColor:"purple-11"}},ghost:{default:{backgroundColor:"transparent",hover_backgroundColor:"gray-3",focus_backgroundColor:"gray-4",active_backgroundColor:"gray-4",hover_textColor:"gray-12"},gray:{backgroundColor:"transparent",hover_backgroundColor:"gray-3",focus_backgroundColor:"gray-4",active_backgroundColor:"gray-4",hover_textColor:"gray-12"},red:{backgroundColor:"transparent",hover_backgroundColor:"red-3",focus_backgroundColor:"red-4",active_backgroundColor:"red-4",hover_textColor:"red-11"},accent:{backgroundColor:"transparent",hover_backgroundColor:"accent-3",focus_backgroundColor:"accent-4",active_backgroundColor:"accent-4",hover_textColor:"accent-11"},green:{backgroundColor:"transparent",hover_backgroundColor:"green-3",focus_backgroundColor:"green-4",active_backgroundColor:"green-4",hover_textColor:"green-11"},blue:{backgroundColor:"transparent",hover_backgroundColor:"blue-3",focus_backgroundColor:"blue-4",active_backgroundColor:"blue-4",hover_textColor:"blue-11"},yellow:{backgroundColor:"transparent",hover_backgroundColor:"yellow-3",focus_backgroundColor:"yellow-4",active_backgroundColor:"yellow-4",hover_textColor:"yellow-11"},purple:{backgroundColor:"transparent",hover_backgroundColor:"purple-3",focus_backgroundColor:"purple-4",active_backgroundColor:"purple-4",hover_textColor:"purple-11"}}},N={default:{0:{w:"auto",h:"5",gap:"0_5",px:"1",rounded:"2"},1:{w:"auto",h:"6",gap:"1",px:"1_5",rounded:"2"},2:{w:"auto",h:"8",gap:"1_5",px:"2",rounded:"2"},3:{w:"auto",h:"10",gap:"2",px:"3",rounded:"3"}},"icon-only":{0:{w:"5",h:"5",gap:"0",px:"0",rounded:"2"},1:{w:"6",h:"6",gap:"0",px:"0",rounded:"2"},2:{w:"8",h:"8",gap:"0",px:"0",rounded:"2"},3:{w:"10",h:"10",gap:"0",px:"0",rounded:"3"}}},z={0:"0",1:"1",2:"2",3:"3"},D={solid:{default:"white",gray:"white",red:"white",accent:"white",green:"white",blue:"white",yellow:"white",purple:"white",disabled:"disabled"},soft:{default:"default",gray:"gray",red:"red",accent:"accent",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"},outline:{default:"default",gray:"gray",red:"red",accent:"accent",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"},ghost:{default:"default",gray:"gray",red:"red",accent:"accent",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"}},f={0:"0",1:"1",2:"2",3:"3"},x={solid:{default:"white",gray:"white",red:"white",accent:"white",green:"white",blue:"white",yellow:"white",purple:"white",disabled:"disabled"},soft:{default:"default",accent:"accent",gray:"gray",red:"red",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"},outline:{default:"default",accent:"accent",gray:"gray",red:"red",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"},ghost:{default:"gray",accent:"accent",gray:"gray",red:"red",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"}},S={default:"secondary","icon-only":"primary"},p=b.createContext({variant:"solid",size:"2",color:"default",state:"default",layout:"default",active:!1}),Z=o=>o.disabled?"disabled":o.state==="loading"?"loading":o.active?"active":o.state,A=({as:o,variant:r="solid",size:t="2",color:e="default",state:u="default",active:a=!1,type:n="button",disabled:d,className:c,children:g,style:i,...V})=>{const j=Z({state:u,disabled:d,active:a}),s=P.useDeterminateState({value:j,determinateValue:"loading",minDurationMs:1200}),{styleProp:E,otherProps:O}=B.useStyleEngine({props:{...q[r][e],style:i},cssVars:L}),k=d||!o?"button":o,_=b.useMemo(()=>{var y;const C=b.Children.toArray(g);if((C==null?void 0:C.length)===1&&b.isValidElement(C[0])){const h=C[0];if((y=h==null?void 0:h.props)!=null&&y.icon)return"icon-only"}return"default"},[g]);return l.jsx(p.Provider,{value:{variant:r,size:t,color:e,state:s,layout:_,active:a},children:l.jsxs(R.Stack,{as:k,className:m("tgph-button",c),display:"inline-flex",align:"center",justify:"center",...N[_][t],style:E,"data-tgph-button":!0,"data-tgph-button-layout":_,"data-tgph-button-state":s,"data-tgph-button-variant":r,"data-tgph-button-color":e,disabled:s==="disabled"||s==="loading",...k==="button"&&{type:n},...O,...V,children:[s==="loading"&&l.jsx(w.Spinner,{size:f[t],color:x[r][e],variant:S[_],"data-tgph-button-loading-icon":!0}),g]})})},v=({size:o,color:r,variant:t,icon:e,alt:u,"aria-hidden":a,internal_iconType:n,...d})=>{const c=b.useContext(p),g={size:o??f[c.size],color:r??x[c.variant][c.state==="disabled"?"disabled":c.color],variant:t??S[c.layout]},i=u?{alt:u}:{"aria-hidden":a};return c.state==="loading"&&n==="leading"?null:l.jsx(w.Icon,{icon:e,"data-button-icon":!0,"data-button-icon-color":g.color,...i,...g,...d})},I=({as:o,color:r,size:t,weight:e="medium",style:u,...a})=>{const n=b.useContext(p),d=r??D[n.variant][n.state==="disabled"?"disabled":n.color];return l.jsx(M.Text,{as:o||"span",color:d,size:t??z[n.size],weight:e,internal_optionalAs:!0,"data-button-text":!0,"data-button-text-color":d,style:{textDecoration:"none",whiteSpace:"nowrap",...u},...a})},T=({leadingIcon:o,trailingIcon:r,icon:t,children:e,...u})=>{const a=o||t;return l.jsxs(A,{...u,children:[a&&l.jsx(v,{...a,internal_iconType:"leading"}),e&&l.jsx(I,{children:e}),r&&l.jsx(v,{...r,internal_iconType:"trailing"})]})};Object.assign(T,{Root:A,Icon:v,Text:I});const U=T;exports.Button=U;
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../src/Button/Button.constants.ts","../../src/Button/Button.tsx"],"sourcesContent":["import type { tokens } from \"@telegraph/style-engine\";\nimport type { CssVarProp } from \"@telegraph/style-engine\";\n\n// Styles for controlling the \"border\" on the outline variant\n// of the button. We use a shadow so we don't need apply a border\n// to all other buttons to make them the same height.\nexport type BaseStyleProps = {\n default_buttonShadowColor: keyof typeof tokens.color;\n hover_buttonShadowColor: keyof typeof tokens.color;\n focus_buttonShadowColor: keyof typeof tokens.color;\n active_buttonShadowColor: keyof typeof tokens.color;\n hover_textColor?: keyof typeof tokens.color;\n};\n\nexport const cssVars: Record<keyof BaseStyleProps, CssVarProp> = {\n default_buttonShadowColor: {\n cssVar: \"--box-shadow\",\n value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n },\n hover_buttonShadowColor: {\n cssVar: \"--tgph-button-hover-shadow\",\n value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n },\n focus_buttonShadowColor: {\n cssVar: \"--tgph-button-focus-shadow\",\n value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n },\n active_buttonShadowColor: {\n cssVar: \"--tgph-button-active-shadow\",\n value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n },\n hover_textColor: {\n cssVar: \"--tgph-button-hover-text-color\",\n value: \"var(--tgph-VARIABLE)\",\n },\n} as const;\n\nexport const BUTTON_COLOR_MAP = {\n solid: {\n default: {\n backgroundColor: \"gray-12\",\n hover_backgroundColor: \"gray-11\",\n focus_backgroundColor: \"gray-10\",\n active_backgroundColor: \"gray-10\",\n hover_textColor: \"white\",\n },\n accent: {\n backgroundColor: \"accent-9\",\n hover_backgroundColor: \"accent-10\",\n focus_backgroundColor: \"accent-11\",\n active_backgroundColor: \"accent-11\",\n hover_textColor: \"white\",\n },\n red: {\n backgroundColor: \"red-9\",\n hover_backgroundColor: \"red-10\",\n focus_backgroundColor: \"red-11\",\n active_backgroundColor: \"red-11\",\n hover_textColor: \"white\",\n },\n gray: {\n backgroundColor: \"gray-9\",\n hover_backgroundColor: \"gray-10\",\n focus_backgroundColor: \"gray-11\",\n active_backgroundColor: \"gray-11\",\n hover_textColor: \"white\",\n },\n green: {\n backgroundColor: \"green-9\",\n hover_backgroundColor: \"green-10\",\n focus_backgroundColor: \"green-11\",\n active_backgroundColor: \"green-11\",\n hover_textColor: \"white\",\n },\n blue: {\n backgroundColor: \"blue-9\",\n hover_backgroundColor: \"blue-10\",\n focus_backgroundColor: \"blue-11\",\n active_backgroundColor: \"blue-11\",\n hover_textColor: \"white\",\n },\n yellow: {\n backgroundColor: \"yellow-9\",\n hover_backgroundColor: \"yellow-10\",\n focus_backgroundColor: \"yellow-11\",\n active_backgroundColor: \"yellow-11\",\n hover_textColor: \"white\",\n },\n purple: {\n backgroundColor: \"purple-9\",\n hover_backgroundColor: \"purple-10\",\n focus_backgroundColor: \"purple-11\",\n active_backgroundColor: \"purple-11\",\n hover_textColor: \"white\",\n },\n },\n soft: {\n default: {\n backgroundColor: \"gray-3\",\n hover_backgroundColor: \"gray-4\",\n focus_backgroundColor: \"gray-5\",\n active_backgroundColor: \"gray-5\",\n hover_textColor: \"gray-12\",\n },\n gray: {\n backgroundColor: \"gray-3\",\n hover_backgroundColor: \"gray-4\",\n focus_backgroundColor: \"gray-5\",\n active_backgroundColor: \"gray-5\",\n hover_textColor: \"gray-12\",\n },\n red: {\n backgroundColor: \"red-3\",\n hover_backgroundColor: \"red-4\",\n focus_backgroundColor: \"red-5\",\n active_backgroundColor: \"red-5\",\n hover_textColor: \"red-11\",\n },\n accent: {\n backgroundColor: \"accent-3\",\n hover_backgroundColor: \"accent-4\",\n focus_backgroundColor: \"accent-5\",\n active_backgroundColor: \"accent-5\",\n hover_textColor: \"accent-11\",\n },\n green: {\n backgroundColor: \"green-3\",\n hover_backgroundColor: \"green-4\",\n focus_backgroundColor: \"green-5\",\n active_backgroundColor: \"green-5\",\n hover_textColor: \"green-11\",\n },\n blue: {\n backgroundColor: \"blue-3\",\n hover_backgroundColor: \"blue-4\",\n focus_backgroundColor: \"blue-5\",\n active_backgroundColor: \"blue-5\",\n hover_textColor: \"blue-11\",\n },\n yellow: {\n backgroundColor: \"yellow-3\",\n hover_backgroundColor: \"yellow-4\",\n focus_backgroundColor: \"yellow-5\",\n active_backgroundColor: \"yellow-5\",\n hover_textColor: \"yellow-11\",\n },\n purple: {\n backgroundColor: \"purple-3\",\n hover_backgroundColor: \"purple-4\",\n focus_backgroundColor: \"purple-5\",\n active_backgroundColor: \"purple-5\",\n hover_textColor: \"purple-11\",\n },\n },\n outline: {\n default: {\n backgroundColor: \"surface-1\",\n focus_backgroundColor: \"surface-1\",\n hover_backgroundColor: \"gray-2\",\n active_backgroundColor: \"gray-3\",\n default_buttonShadowColor: \"gray-6\",\n hover_buttonShadowColor: \"gray-7\",\n focus_buttonShadowColor: \"gray-8\",\n active_buttonShadowColor: \"gray-8\",\n hover_textColor: \"gray-12\",\n },\n gray: {\n backgroundColor: \"surface-1\",\n focus_backgroundColor: \"surface-1\",\n hover_backgroundColor: \"gray-2\",\n active_backgroundColor: \"gray-3\",\n default_buttonShadowColor: \"gray-6\",\n hover_buttonShadowColor: \"gray-7\",\n focus_buttonShadowColor: \"gray-8\",\n active_buttonShadowColor: \"gray-8\",\n hover_textColor: \"gray-12\",\n },\n red: {\n backgroundColor: \"surface-1\",\n focus_backgroundColor: \"surface-1\",\n hover_backgroundColor: \"red-2\",\n active_backgroundColor: \"red-3\",\n default_buttonShadowColor: \"red-6\",\n hover_buttonShadowColor: \"red-7\",\n focus_buttonShadowColor: \"red-8\",\n active_buttonShadowColor: \"red-8\",\n hover_textColor: \"red-11\",\n },\n accent: {\n backgroundColor: \"surface-1\",\n focus_backgroundColor: \"surface-1\",\n hover_backgroundColor: \"accent-2\",\n active_backgroundColor: \"accent-3\",\n default_buttonShadowColor: \"accent-6\",\n hover_buttonShadowColor: \"accent-7\",\n focus_buttonShadowColor: \"accent-8\",\n active_buttonShadowColor: \"accent-8\",\n hover_textColor: \"accent-11\",\n },\n green: {\n backgroundColor: \"surface-1\",\n focus_backgroundColor: \"surface-1\",\n hover_backgroundColor: \"green-2\",\n active_backgroundColor: \"green-3\",\n default_buttonShadowColor: \"green-6\",\n hover_buttonShadowColor: \"green-7\",\n focus_buttonShadowColor: \"green-8\",\n active_buttonShadowColor: \"green-8\",\n hover_textColor: \"green-11\",\n },\n blue: {\n backgroundColor: \"surface-1\",\n focus_backgroundColor: \"surface-1\",\n hover_backgroundColor: \"blue-2\",\n active_backgroundColor: \"blue-3\",\n default_buttonShadowColor: \"blue-6\",\n hover_buttonShadowColor: \"blue-7\",\n focus_buttonShadowColor: \"blue-8\",\n active_buttonShadowColor: \"blue-8\",\n hover_textColor: \"blue-11\",\n },\n yellow: {\n backgroundColor: \"surface-1\",\n focus_backgroundColor: \"surface-1\",\n hover_backgroundColor: \"yellow-2\",\n active_backgroundColor: \"yellow-3\",\n default_buttonShadowColor: \"yellow-6\",\n hover_buttonShadowColor: \"yellow-7\",\n focus_buttonShadowColor: \"yellow-8\",\n active_buttonShadowColor: \"yellow-8\",\n hover_textColor: \"yellow-11\",\n },\n purple: {\n backgroundColor: \"surface-1\",\n focus_backgroundColor: \"surface-1\",\n hover_backgroundColor: \"purple-2\",\n active_backgroundColor: \"purple-3\",\n default_buttonShadowColor: \"purple-6\",\n hover_buttonShadowColor: \"purple-7\",\n focus_buttonShadowColor: \"purple-8\",\n active_buttonShadowColor: \"purple-8\",\n hover_textColor: \"purple-11\",\n },\n },\n ghost: {\n default: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"gray-3\",\n focus_backgroundColor: \"gray-4\",\n active_backgroundColor: \"gray-4\",\n hover_textColor: \"gray-12\",\n },\n gray: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"gray-3\",\n focus_backgroundColor: \"gray-4\",\n active_backgroundColor: \"gray-4\",\n hover_textColor: \"gray-12\",\n },\n red: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"red-3\",\n focus_backgroundColor: \"red-4\",\n active_backgroundColor: \"red-4\",\n hover_textColor: \"red-11\",\n },\n accent: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"accent-3\",\n focus_backgroundColor: \"accent-4\",\n active_backgroundColor: \"accent-4\",\n hover_textColor: \"accent-11\",\n },\n green: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"green-3\",\n focus_backgroundColor: \"green-4\",\n active_backgroundColor: \"green-4\",\n hover_textColor: \"green-11\",\n },\n blue: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"blue-3\",\n focus_backgroundColor: \"blue-4\",\n active_backgroundColor: \"blue-4\",\n hover_textColor: \"blue-11\",\n },\n yellow: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"yellow-3\",\n focus_backgroundColor: \"yellow-4\",\n active_backgroundColor: \"yellow-4\",\n hover_textColor: \"yellow-11\",\n },\n purple: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"purple-3\",\n focus_backgroundColor: \"purple-4\",\n active_backgroundColor: \"purple-4\",\n hover_textColor: \"purple-11\",\n },\n },\n} as const;\n\nexport const BUTTON_SIZE_MAP = {\n default: {\n \"0\": {\n w: \"auto\",\n h: \"5\",\n gap: \"0_5\",\n px: \"1\",\n rounded: \"2\",\n },\n \"1\": {\n w: \"auto\",\n h: \"6\",\n gap: \"1\",\n px: \"1_5\",\n rounded: \"2\",\n },\n \"2\": {\n w: \"auto\",\n h: \"8\",\n gap: \"1_5\",\n px: \"2\",\n rounded: \"2\",\n },\n \"3\": {\n w: \"auto\",\n h: \"10\",\n gap: \"2\",\n px: \"3\",\n rounded: \"3\",\n },\n },\n \"icon-only\": {\n \"0\": {\n w: \"5\",\n h: \"5\",\n gap: \"0\",\n px: \"0\",\n rounded: \"2\",\n },\n \"1\": {\n w: \"6\",\n h: \"6\",\n gap: \"0\",\n px: \"0\",\n rounded: \"2\",\n },\n \"2\": {\n w: \"8\",\n h: \"8\",\n gap: \"0\",\n px: \"0\",\n rounded: \"2\",\n },\n \"3\": {\n w: \"10\",\n h: \"10\",\n gap: \"0\",\n px: \"0\",\n rounded: \"3\",\n },\n },\n} as const;\n\nexport const TEXT_SIZE_MAP = {\n \"0\": \"0\",\n \"1\": \"1\",\n \"2\": \"2\",\n \"3\": \"3\",\n} as const;\n\nexport const TEXT_COLOR_MAP = {\n solid: {\n default: \"white\",\n gray: \"white\",\n red: \"white\",\n accent: \"white\",\n green: \"white\",\n blue: \"white\",\n yellow: \"white\",\n purple: \"white\",\n disabled: \"disabled\",\n },\n soft: {\n default: \"default\",\n gray: \"gray\",\n red: \"red\",\n accent: \"accent\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n purple: \"purple\",\n disabled: \"disabled\",\n },\n outline: {\n default: \"default\",\n gray: \"gray\",\n red: \"red\",\n accent: \"accent\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n purple: \"purple\",\n disabled: \"disabled\",\n },\n ghost: {\n default: \"default\",\n gray: \"gray\",\n red: \"red\",\n accent: \"accent\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n purple: \"purple\",\n disabled: \"disabled\",\n },\n} as const;\n\nexport const ICON_SIZE_MAP = {\n \"0\": \"0\",\n \"1\": \"1\",\n \"2\": \"2\",\n \"3\": \"3\",\n} as const;\n\nexport const ICON_COLOR_MAP = {\n solid: {\n default: \"white\",\n gray: \"white\",\n red: \"white\",\n accent: \"white\",\n green: \"white\",\n blue: \"white\",\n yellow: \"white\",\n purple: \"white\",\n disabled: \"disabled\",\n },\n soft: {\n default: \"default\",\n accent: \"accent\",\n gray: \"gray\",\n red: \"red\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n purple: \"purple\",\n disabled: \"disabled\",\n },\n outline: {\n default: \"default\",\n accent: \"accent\",\n gray: \"gray\",\n red: \"red\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n purple: \"purple\",\n disabled: \"disabled\",\n },\n ghost: {\n default: \"gray\",\n accent: \"accent\",\n gray: \"gray\",\n red: \"red\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n purple: \"purple\",\n disabled: \"disabled\",\n },\n} as const;\n\nexport const ICON_VARIANT_MAP = {\n default: \"secondary\",\n \"icon-only\": \"primary\",\n} as const;\n\nexport type ButtonVariant = keyof typeof BUTTON_COLOR_MAP;\nexport type ButtonColor = keyof (typeof BUTTON_COLOR_MAP)[ButtonVariant];\nexport type ButtonSize = keyof (typeof BUTTON_SIZE_MAP)[\"default\"];\n","import {\n type PolymorphicProps,\n type PolymorphicPropsWithTgphRef,\n RemappedOmit,\n type Required,\n type TgphComponentProps,\n type TgphElement,\n useDeterminateState,\n} from \"@telegraph/helpers\";\nimport { Spinner, Icon as TelegraphIcon } from \"@telegraph/icon\";\nimport { Stack } from \"@telegraph/layout\";\nimport { useStyleEngine } from \"@telegraph/style-engine\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport {\n BUTTON_COLOR_MAP,\n BUTTON_SIZE_MAP,\n type ButtonColor,\n type ButtonSize,\n type ButtonVariant,\n ICON_COLOR_MAP,\n ICON_SIZE_MAP,\n ICON_VARIANT_MAP,\n TEXT_COLOR_MAP,\n TEXT_SIZE_MAP,\n cssVars,\n} from \"./Button.constants\";\n\ntype RootBaseProps = {\n variant?: ButtonVariant;\n color?: ButtonColor;\n size?: ButtonSize;\n state?: \"default\" | \"loading\";\n active?: boolean;\n};\n\ntype InternalProps = {\n layout: \"default\" | \"icon-only\";\n color: Required<RootBaseProps>[\"color\"];\n state: Required<RootBaseProps>[\"state\"] | \"disabled\" | \"active\";\n};\n\nexport type RootProps<T extends TgphElement = \"button\"> = Omit<\n TgphComponentProps<typeof Stack>,\n \"tgphRef\" | \"as\" | \"onClick\"\n> &\n Omit<PolymorphicPropsWithTgphRef<T, HTMLButtonElement>, \"onClick\"> &\n RootBaseProps & {\n onClick?(event: React.SyntheticEvent | Event): void;\n };\n\nconst ButtonContext = React.createContext<\n Required<Omit<RootBaseProps, \"color\" | \"as\" | \"state\"> & InternalProps>\n>({\n variant: \"solid\",\n size: \"2\",\n color: \"default\",\n state: \"default\",\n layout: \"default\",\n active: false,\n});\n\ntype DeriveStateParams = {\n state: Required<RootBaseProps>[\"state\"];\n disabled?: boolean;\n active?: boolean;\n};\n\n// Derive the state of the button based on the html button props in\nconst deriveState = (params: DeriveStateParams): InternalProps[\"state\"] => {\n if (params.disabled) return \"disabled\";\n if (params.state === \"loading\") return \"loading\";\n if (params.active) return \"active\";\n return params.state;\n};\n\nconst Root = <T extends TgphElement = \"button\">({\n as,\n variant = \"solid\",\n size = \"2\",\n color = \"default\",\n state: stateProp = \"default\",\n active = false,\n type = \"button\",\n disabled,\n className,\n children,\n style,\n ...props\n}: RootProps<T>) => {\n const derivedState = deriveState({ state: stateProp, disabled, active });\n const state = useDeterminateState<DefaultProps<T>[\"state\"]>({\n value: derivedState,\n determinateValue: \"loading\",\n minDurationMs: 1200,\n });\n\n const { styleProp, otherProps } = useStyleEngine({\n props: {\n ...BUTTON_COLOR_MAP[variant][color],\n style,\n },\n cssVars,\n });\n\n // If the button is in a disabled state, we don't want any clicks to fire.\n // To do this reliably, we convert the element back to a button if it is\n // disabled. We do this so we can use the native button element's disabled\n // state to prevent clicks.\n // We also want to trivially pass in \"button\" if no \"as\" prop is provided\n const derivedAs = disabled || !as ? \"button\" : as;\n\n const layout = React.useMemo<InternalProps[\"layout\"]>(() => {\n const childrenArray = React.Children.toArray(children);\n if (childrenArray?.length === 1 && React.isValidElement(childrenArray[0])) {\n const child = childrenArray[0] as\n | React.ReactComponentElement<typeof Icon>\n | {\n props: {\n icon: undefined;\n };\n };\n if (child?.props?.icon) {\n return \"icon-only\";\n }\n }\n return \"default\";\n }, [children]);\n\n return (\n <ButtonContext.Provider\n value={{ variant, size, color, state, layout, active }}\n >\n <Stack\n as={derivedAs}\n className={clsx(\"tgph-button\", className)}\n display=\"inline-flex\"\n align=\"center\"\n justify=\"center\"\n {...BUTTON_SIZE_MAP[layout][size]}\n style={styleProp}\n data-tgph-button\n data-tgph-button-layout={layout}\n data-tgph-button-state={state}\n data-tgph-button-variant={variant}\n data-tgph-button-color={color}\n disabled={state === \"disabled\" || state === \"loading\"}\n {...(derivedAs === \"button\" && { type })} // Only pass in type if we are a button\n {...otherProps}\n {...props}\n >\n {state === \"loading\" && (\n <Spinner\n size={ICON_SIZE_MAP[size]}\n color={ICON_COLOR_MAP[variant][color]}\n variant={ICON_VARIANT_MAP[layout]}\n data-tgph-button-loading-icon\n />\n )}\n {children}\n </Stack>\n </ButtonContext.Provider>\n );\n};\n\nexport type IconProps<T extends TgphElement = \"span\"> = TgphComponentProps<\n typeof TelegraphIcon<T>\n> & {\n internal_iconType?: \"leading\" | \"trailing\";\n};\n\nconst Icon = <T extends TgphElement = \"span\">({\n size,\n color,\n variant,\n icon,\n alt,\n \"aria-hidden\": ariaHidden,\n internal_iconType,\n ...props\n}: IconProps<T>) => {\n const context = React.useContext(ButtonContext);\n\n const iconProps = {\n size: size ?? ICON_SIZE_MAP[context.size],\n color:\n color ??\n ICON_COLOR_MAP[context.variant][\n context.state === \"disabled\" ? \"disabled\" : context.color\n ],\n variant: variant ?? ICON_VARIANT_MAP[context.layout],\n };\n\n const a11yProps = !alt ? { \"aria-hidden\": ariaHidden } : { alt };\n\n // If the button is set to loading and this icon is identified as leading,\n // we don't want to render this icon and instead the loading icon which\n // is managed in the root component. We choose to render the loading icon\n // in the root component so that it displays when there is no icon already\n // inside of the button.\n if (context.state === \"loading\" && internal_iconType === \"leading\") {\n return null;\n }\n\n return (\n <TelegraphIcon\n icon={icon}\n data-button-icon\n data-button-icon-color={iconProps.color}\n {...a11yProps}\n {...iconProps}\n {...props}\n />\n );\n};\n\nexport type TextProps<T extends TgphElement = \"span\"> = RemappedOmit<\n TgphComponentProps<typeof TelegraphText<T>>,\n \"as\"\n> & {\n as?: T;\n};\n\nconst Text = <T extends TgphElement = \"span\">({\n as,\n color,\n size,\n weight = \"medium\",\n style,\n ...props\n}: TextProps<T>) => {\n const context = React.useContext(ButtonContext);\n const derivedColor =\n color ??\n TEXT_COLOR_MAP[context.variant][\n context.state === \"disabled\" ? \"disabled\" : context.color\n ];\n return (\n <TelegraphText\n as={(as || \"span\") as T}\n color={derivedColor}\n size={size ?? TEXT_SIZE_MAP[context.size]}\n weight={weight}\n internal_optionalAs={true}\n data-button-text\n data-button-text-color={derivedColor}\n style={{\n textDecoration: \"none\",\n whiteSpace: \"nowrap\",\n ...style,\n }}\n {...props}\n />\n );\n};\n\ntype DefaultIconProps = React.ComponentProps<typeof Icon>;\n\ntype BaseDefaultProps =\n | {\n leadingIcon?: DefaultIconProps;\n trailingIcon?: DefaultIconProps;\n icon?: never;\n }\n | {\n icon?: DefaultIconProps;\n leadingIcon?: never;\n trailingIcon?: never;\n };\nexport type DefaultProps<T extends TgphElement = \"button\"> = Omit<\n PolymorphicProps<T>,\n \"onClick\"\n> &\n TgphComponentProps<typeof Root> &\n BaseDefaultProps & {\n onClick?(event: React.SyntheticEvent | Event): void;\n };\n\nconst Default = <T extends TgphElement = \"button\">({\n leadingIcon,\n trailingIcon,\n icon,\n children,\n ...props\n}: DefaultProps<T>) => {\n const combinedLeadingIcon = leadingIcon || icon;\n return (\n <Root {...props}>\n {combinedLeadingIcon && (\n <Icon {...combinedLeadingIcon} internal_iconType=\"leading\" />\n )}\n {children && <Text>{children}</Text>}\n {trailingIcon && <Icon {...trailingIcon} internal_iconType=\"trailing\" />}\n </Root>\n );\n};\n\nObject.assign(Default, {\n Root,\n Icon,\n Text,\n});\n\nconst Button = Default as typeof Default & {\n Root: typeof Root;\n Icon: typeof Icon;\n Text: typeof Text;\n};\n\nexport { Button };\n"],"names":["cssVars","BUTTON_COLOR_MAP","BUTTON_SIZE_MAP","TEXT_SIZE_MAP","TEXT_COLOR_MAP","ICON_SIZE_MAP","ICON_COLOR_MAP","ICON_VARIANT_MAP","ButtonContext","React","deriveState","params","Root","as","variant","size","color","stateProp","active","type","disabled","className","children","style","props","derivedState","state","useDeterminateState","styleProp","otherProps","useStyleEngine","derivedAs","layout","childrenArray","child","_a","jsx","jsxs","Stack","clsx","Spinner","Icon","icon","alt","ariaHidden","internal_iconType","context","iconProps","a11yProps","TelegraphIcon","Text","weight","derivedColor","TelegraphText","Default","leadingIcon","trailingIcon","combinedLeadingIcon","Button"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../src/Button/Button.constants.ts","../../src/Button/Button.tsx"],"sourcesContent":["import type { tokens } from \"@telegraph/style-engine\";\nimport type { CssVarProp } from \"@telegraph/style-engine\";\n\n// Styles for controlling the \"border\" on the outline variant\n// of the button. We use a shadow so we don't need apply a border\n// to all other buttons to make them the same height.\nexport type BaseStyleProps = {\n default_buttonShadowColor: keyof typeof tokens.color;\n hover_buttonShadowColor: keyof typeof tokens.color;\n focus_buttonShadowColor: keyof typeof tokens.color;\n active_buttonShadowColor: keyof typeof tokens.color;\n hover_textColor?: keyof typeof tokens.color;\n};\n\nexport const cssVars: Record<keyof BaseStyleProps, CssVarProp> = {\n default_buttonShadowColor: {\n cssVar: \"--box-shadow\",\n value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n },\n hover_buttonShadowColor: {\n cssVar: \"--tgph-button-hover-shadow\",\n value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n },\n focus_buttonShadowColor: {\n cssVar: \"--tgph-button-focus-shadow\",\n value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n },\n active_buttonShadowColor: {\n cssVar: \"--tgph-button-active-shadow\",\n value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n },\n hover_textColor: {\n cssVar: \"--tgph-button-hover-text-color\",\n value: \"var(--tgph-VARIABLE)\",\n },\n} as const;\n\nexport const BUTTON_COLOR_MAP = {\n solid: {\n default: {\n backgroundColor: \"gray-12\",\n hover_backgroundColor: \"gray-11\",\n focus_backgroundColor: \"gray-10\",\n active_backgroundColor: \"gray-10\",\n hover_textColor: \"white\",\n },\n accent: {\n backgroundColor: \"accent-9\",\n hover_backgroundColor: \"accent-10\",\n focus_backgroundColor: \"accent-11\",\n active_backgroundColor: \"accent-11\",\n hover_textColor: \"white\",\n },\n red: {\n backgroundColor: \"red-9\",\n hover_backgroundColor: \"red-10\",\n focus_backgroundColor: \"red-11\",\n active_backgroundColor: \"red-11\",\n hover_textColor: \"white\",\n },\n gray: {\n backgroundColor: \"gray-9\",\n hover_backgroundColor: \"gray-10\",\n focus_backgroundColor: \"gray-11\",\n active_backgroundColor: \"gray-11\",\n hover_textColor: \"white\",\n },\n green: {\n backgroundColor: \"green-9\",\n hover_backgroundColor: \"green-10\",\n focus_backgroundColor: \"green-11\",\n active_backgroundColor: \"green-11\",\n hover_textColor: \"white\",\n },\n blue: {\n backgroundColor: \"blue-9\",\n hover_backgroundColor: \"blue-10\",\n focus_backgroundColor: \"blue-11\",\n active_backgroundColor: \"blue-11\",\n hover_textColor: \"white\",\n },\n yellow: {\n backgroundColor: \"yellow-9\",\n hover_backgroundColor: \"yellow-10\",\n focus_backgroundColor: \"yellow-11\",\n active_backgroundColor: \"yellow-11\",\n hover_textColor: \"white\",\n },\n purple: {\n backgroundColor: \"purple-9\",\n hover_backgroundColor: \"purple-10\",\n focus_backgroundColor: \"purple-11\",\n active_backgroundColor: \"purple-11\",\n hover_textColor: \"white\",\n },\n },\n soft: {\n default: {\n backgroundColor: \"gray-3\",\n hover_backgroundColor: \"gray-4\",\n focus_backgroundColor: \"gray-5\",\n active_backgroundColor: \"gray-5\",\n hover_textColor: \"gray-12\",\n },\n gray: {\n backgroundColor: \"gray-3\",\n hover_backgroundColor: \"gray-4\",\n focus_backgroundColor: \"gray-5\",\n active_backgroundColor: \"gray-5\",\n hover_textColor: \"gray-12\",\n },\n red: {\n backgroundColor: \"red-3\",\n hover_backgroundColor: \"red-4\",\n focus_backgroundColor: \"red-5\",\n active_backgroundColor: \"red-5\",\n hover_textColor: \"red-11\",\n },\n accent: {\n backgroundColor: \"accent-3\",\n hover_backgroundColor: \"accent-4\",\n focus_backgroundColor: \"accent-5\",\n active_backgroundColor: \"accent-5\",\n hover_textColor: \"accent-11\",\n },\n green: {\n backgroundColor: \"green-3\",\n hover_backgroundColor: \"green-4\",\n focus_backgroundColor: \"green-5\",\n active_backgroundColor: \"green-5\",\n hover_textColor: \"green-11\",\n },\n blue: {\n backgroundColor: \"blue-3\",\n hover_backgroundColor: \"blue-4\",\n focus_backgroundColor: \"blue-5\",\n active_backgroundColor: \"blue-5\",\n hover_textColor: \"blue-11\",\n },\n yellow: {\n backgroundColor: \"yellow-3\",\n hover_backgroundColor: \"yellow-4\",\n focus_backgroundColor: \"yellow-5\",\n active_backgroundColor: \"yellow-5\",\n hover_textColor: \"yellow-11\",\n },\n purple: {\n backgroundColor: \"purple-3\",\n hover_backgroundColor: \"purple-4\",\n focus_backgroundColor: \"purple-5\",\n active_backgroundColor: \"purple-5\",\n hover_textColor: \"purple-11\",\n },\n },\n outline: {\n default: {\n backgroundColor: \"surface-3\",\n focus_backgroundColor: \"surface-3\",\n hover_backgroundColor: \"gray-2\",\n active_backgroundColor: \"gray-3\",\n default_buttonShadowColor: \"gray-6\",\n hover_buttonShadowColor: \"gray-7\",\n focus_buttonShadowColor: \"gray-8\",\n active_buttonShadowColor: \"gray-8\",\n hover_textColor: \"gray-12\",\n },\n gray: {\n backgroundColor: \"surface-3\",\n focus_backgroundColor: \"surface-3\",\n hover_backgroundColor: \"gray-2\",\n active_backgroundColor: \"gray-3\",\n default_buttonShadowColor: \"gray-6\",\n hover_buttonShadowColor: \"gray-7\",\n focus_buttonShadowColor: \"gray-8\",\n active_buttonShadowColor: \"gray-8\",\n hover_textColor: \"gray-12\",\n },\n red: {\n backgroundColor: \"surface-3\",\n focus_backgroundColor: \"surface-3\",\n hover_backgroundColor: \"red-2\",\n active_backgroundColor: \"red-3\",\n default_buttonShadowColor: \"red-6\",\n hover_buttonShadowColor: \"red-7\",\n focus_buttonShadowColor: \"red-8\",\n active_buttonShadowColor: \"red-8\",\n hover_textColor: \"red-11\",\n },\n accent: {\n backgroundColor: \"surface-3\",\n focus_backgroundColor: \"surface-3\",\n hover_backgroundColor: \"accent-2\",\n active_backgroundColor: \"accent-3\",\n default_buttonShadowColor: \"accent-6\",\n hover_buttonShadowColor: \"accent-7\",\n focus_buttonShadowColor: \"accent-8\",\n active_buttonShadowColor: \"accent-8\",\n hover_textColor: \"accent-11\",\n },\n green: {\n backgroundColor: \"surface-3\",\n focus_backgroundColor: \"surface-3\",\n hover_backgroundColor: \"green-2\",\n active_backgroundColor: \"green-3\",\n default_buttonShadowColor: \"green-6\",\n hover_buttonShadowColor: \"green-7\",\n focus_buttonShadowColor: \"green-8\",\n active_buttonShadowColor: \"green-8\",\n hover_textColor: \"green-11\",\n },\n blue: {\n backgroundColor: \"surface-3\",\n focus_backgroundColor: \"surface-3\",\n hover_backgroundColor: \"blue-2\",\n active_backgroundColor: \"blue-3\",\n default_buttonShadowColor: \"blue-6\",\n hover_buttonShadowColor: \"blue-7\",\n focus_buttonShadowColor: \"blue-8\",\n active_buttonShadowColor: \"blue-8\",\n hover_textColor: \"blue-11\",\n },\n yellow: {\n backgroundColor: \"surface-3\",\n focus_backgroundColor: \"surface-3\",\n hover_backgroundColor: \"yellow-2\",\n active_backgroundColor: \"yellow-3\",\n default_buttonShadowColor: \"yellow-6\",\n hover_buttonShadowColor: \"yellow-7\",\n focus_buttonShadowColor: \"yellow-8\",\n active_buttonShadowColor: \"yellow-8\",\n hover_textColor: \"yellow-11\",\n },\n purple: {\n backgroundColor: \"surface-3\",\n focus_backgroundColor: \"surface-3\",\n hover_backgroundColor: \"purple-2\",\n active_backgroundColor: \"purple-3\",\n default_buttonShadowColor: \"purple-6\",\n hover_buttonShadowColor: \"purple-7\",\n focus_buttonShadowColor: \"purple-8\",\n active_buttonShadowColor: \"purple-8\",\n hover_textColor: \"purple-11\",\n },\n },\n ghost: {\n default: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"gray-3\",\n focus_backgroundColor: \"gray-4\",\n active_backgroundColor: \"gray-4\",\n hover_textColor: \"gray-12\",\n },\n gray: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"gray-3\",\n focus_backgroundColor: \"gray-4\",\n active_backgroundColor: \"gray-4\",\n hover_textColor: \"gray-12\",\n },\n red: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"red-3\",\n focus_backgroundColor: \"red-4\",\n active_backgroundColor: \"red-4\",\n hover_textColor: \"red-11\",\n },\n accent: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"accent-3\",\n focus_backgroundColor: \"accent-4\",\n active_backgroundColor: \"accent-4\",\n hover_textColor: \"accent-11\",\n },\n green: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"green-3\",\n focus_backgroundColor: \"green-4\",\n active_backgroundColor: \"green-4\",\n hover_textColor: \"green-11\",\n },\n blue: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"blue-3\",\n focus_backgroundColor: \"blue-4\",\n active_backgroundColor: \"blue-4\",\n hover_textColor: \"blue-11\",\n },\n yellow: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"yellow-3\",\n focus_backgroundColor: \"yellow-4\",\n active_backgroundColor: \"yellow-4\",\n hover_textColor: \"yellow-11\",\n },\n purple: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"purple-3\",\n focus_backgroundColor: \"purple-4\",\n active_backgroundColor: \"purple-4\",\n hover_textColor: \"purple-11\",\n },\n },\n} as const;\n\nexport const BUTTON_SIZE_MAP = {\n default: {\n \"0\": {\n w: \"auto\",\n h: \"5\",\n gap: \"0_5\",\n px: \"1\",\n rounded: \"2\",\n },\n \"1\": {\n w: \"auto\",\n h: \"6\",\n gap: \"1\",\n px: \"1_5\",\n rounded: \"2\",\n },\n \"2\": {\n w: \"auto\",\n h: \"8\",\n gap: \"1_5\",\n px: \"2\",\n rounded: \"2\",\n },\n \"3\": {\n w: \"auto\",\n h: \"10\",\n gap: \"2\",\n px: \"3\",\n rounded: \"3\",\n },\n },\n \"icon-only\": {\n \"0\": {\n w: \"5\",\n h: \"5\",\n gap: \"0\",\n px: \"0\",\n rounded: \"2\",\n },\n \"1\": {\n w: \"6\",\n h: \"6\",\n gap: \"0\",\n px: \"0\",\n rounded: \"2\",\n },\n \"2\": {\n w: \"8\",\n h: \"8\",\n gap: \"0\",\n px: \"0\",\n rounded: \"2\",\n },\n \"3\": {\n w: \"10\",\n h: \"10\",\n gap: \"0\",\n px: \"0\",\n rounded: \"3\",\n },\n },\n} as const;\n\nexport const TEXT_SIZE_MAP = {\n \"0\": \"0\",\n \"1\": \"1\",\n \"2\": \"2\",\n \"3\": \"3\",\n} as const;\n\nexport const TEXT_COLOR_MAP = {\n solid: {\n default: \"white\",\n gray: \"white\",\n red: \"white\",\n accent: \"white\",\n green: \"white\",\n blue: \"white\",\n yellow: \"white\",\n purple: \"white\",\n disabled: \"disabled\",\n },\n soft: {\n default: \"default\",\n gray: \"gray\",\n red: \"red\",\n accent: \"accent\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n purple: \"purple\",\n disabled: \"disabled\",\n },\n outline: {\n default: \"default\",\n gray: \"gray\",\n red: \"red\",\n accent: \"accent\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n purple: \"purple\",\n disabled: \"disabled\",\n },\n ghost: {\n default: \"default\",\n gray: \"gray\",\n red: \"red\",\n accent: \"accent\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n purple: \"purple\",\n disabled: \"disabled\",\n },\n} as const;\n\nexport const ICON_SIZE_MAP = {\n \"0\": \"0\",\n \"1\": \"1\",\n \"2\": \"2\",\n \"3\": \"3\",\n} as const;\n\nexport const ICON_COLOR_MAP = {\n solid: {\n default: \"white\",\n gray: \"white\",\n red: \"white\",\n accent: \"white\",\n green: \"white\",\n blue: \"white\",\n yellow: \"white\",\n purple: \"white\",\n disabled: \"disabled\",\n },\n soft: {\n default: \"default\",\n accent: \"accent\",\n gray: \"gray\",\n red: \"red\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n purple: \"purple\",\n disabled: \"disabled\",\n },\n outline: {\n default: \"default\",\n accent: \"accent\",\n gray: \"gray\",\n red: \"red\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n purple: \"purple\",\n disabled: \"disabled\",\n },\n ghost: {\n default: \"gray\",\n accent: \"accent\",\n gray: \"gray\",\n red: \"red\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n purple: \"purple\",\n disabled: \"disabled\",\n },\n} as const;\n\nexport const ICON_VARIANT_MAP = {\n default: \"secondary\",\n \"icon-only\": \"primary\",\n} as const;\n\nexport type ButtonVariant = keyof typeof BUTTON_COLOR_MAP;\nexport type ButtonColor = keyof (typeof BUTTON_COLOR_MAP)[ButtonVariant];\nexport type ButtonSize = keyof (typeof BUTTON_SIZE_MAP)[\"default\"];\n","import {\n type PolymorphicProps,\n type PolymorphicPropsWithTgphRef,\n RemappedOmit,\n type Required,\n type TgphComponentProps,\n type TgphElement,\n useDeterminateState,\n} from \"@telegraph/helpers\";\nimport { Spinner, Icon as TelegraphIcon } from \"@telegraph/icon\";\nimport { Stack } from \"@telegraph/layout\";\nimport { useStyleEngine } from \"@telegraph/style-engine\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport {\n BUTTON_COLOR_MAP,\n BUTTON_SIZE_MAP,\n type ButtonColor,\n type ButtonSize,\n type ButtonVariant,\n ICON_COLOR_MAP,\n ICON_SIZE_MAP,\n ICON_VARIANT_MAP,\n TEXT_COLOR_MAP,\n TEXT_SIZE_MAP,\n cssVars,\n} from \"./Button.constants\";\n\ntype RootBaseProps = {\n variant?: ButtonVariant;\n color?: ButtonColor;\n size?: ButtonSize;\n state?: \"default\" | \"loading\";\n active?: boolean;\n};\n\ntype InternalProps = {\n layout: \"default\" | \"icon-only\";\n color: Required<RootBaseProps>[\"color\"];\n state: Required<RootBaseProps>[\"state\"] | \"disabled\" | \"active\";\n};\n\nexport type RootProps<T extends TgphElement = \"button\"> = Omit<\n TgphComponentProps<typeof Stack>,\n \"tgphRef\" | \"as\" | \"onClick\"\n> &\n Omit<PolymorphicPropsWithTgphRef<T, HTMLButtonElement>, \"onClick\"> &\n RootBaseProps & {\n onClick?(event: React.SyntheticEvent | Event): void;\n };\n\nconst ButtonContext = React.createContext<\n Required<Omit<RootBaseProps, \"color\" | \"as\" | \"state\"> & InternalProps>\n>({\n variant: \"solid\",\n size: \"2\",\n color: \"default\",\n state: \"default\",\n layout: \"default\",\n active: false,\n});\n\ntype DeriveStateParams = {\n state: Required<RootBaseProps>[\"state\"];\n disabled?: boolean;\n active?: boolean;\n};\n\n// Derive the state of the button based on the html button props in\nconst deriveState = (params: DeriveStateParams): InternalProps[\"state\"] => {\n if (params.disabled) return \"disabled\";\n if (params.state === \"loading\") return \"loading\";\n if (params.active) return \"active\";\n return params.state;\n};\n\nconst Root = <T extends TgphElement = \"button\">({\n as,\n variant = \"solid\",\n size = \"2\",\n color = \"default\",\n state: stateProp = \"default\",\n active = false,\n type = \"button\",\n disabled,\n className,\n children,\n style,\n ...props\n}: RootProps<T>) => {\n const derivedState = deriveState({ state: stateProp, disabled, active });\n const state = useDeterminateState<DefaultProps<T>[\"state\"]>({\n value: derivedState,\n determinateValue: \"loading\",\n minDurationMs: 1200,\n });\n\n const { styleProp, otherProps } = useStyleEngine({\n props: {\n ...BUTTON_COLOR_MAP[variant][color],\n style,\n },\n cssVars,\n });\n\n // If the button is in a disabled state, we don't want any clicks to fire.\n // To do this reliably, we convert the element back to a button if it is\n // disabled. We do this so we can use the native button element's disabled\n // state to prevent clicks.\n // We also want to trivially pass in \"button\" if no \"as\" prop is provided\n const derivedAs = disabled || !as ? \"button\" : as;\n\n const layout = React.useMemo<InternalProps[\"layout\"]>(() => {\n const childrenArray = React.Children.toArray(children);\n if (childrenArray?.length === 1 && React.isValidElement(childrenArray[0])) {\n const child = childrenArray[0] as\n | React.ReactComponentElement<typeof Icon>\n | {\n props: {\n icon: undefined;\n };\n };\n if (child?.props?.icon) {\n return \"icon-only\";\n }\n }\n return \"default\";\n }, [children]);\n\n return (\n <ButtonContext.Provider\n value={{ variant, size, color, state, layout, active }}\n >\n <Stack\n as={derivedAs}\n className={clsx(\"tgph-button\", className)}\n display=\"inline-flex\"\n align=\"center\"\n justify=\"center\"\n {...BUTTON_SIZE_MAP[layout][size]}\n style={styleProp}\n data-tgph-button\n data-tgph-button-layout={layout}\n data-tgph-button-state={state}\n data-tgph-button-variant={variant}\n data-tgph-button-color={color}\n disabled={state === \"disabled\" || state === \"loading\"}\n {...(derivedAs === \"button\" && { type })} // Only pass in type if we are a button\n {...otherProps}\n {...props}\n >\n {state === \"loading\" && (\n <Spinner\n size={ICON_SIZE_MAP[size]}\n color={ICON_COLOR_MAP[variant][color]}\n variant={ICON_VARIANT_MAP[layout]}\n data-tgph-button-loading-icon\n />\n )}\n {children}\n </Stack>\n </ButtonContext.Provider>\n );\n};\n\nexport type IconProps<T extends TgphElement = \"span\"> = TgphComponentProps<\n typeof TelegraphIcon<T>\n> & {\n internal_iconType?: \"leading\" | \"trailing\";\n};\n\nconst Icon = <T extends TgphElement = \"span\">({\n size,\n color,\n variant,\n icon,\n alt,\n \"aria-hidden\": ariaHidden,\n internal_iconType,\n ...props\n}: IconProps<T>) => {\n const context = React.useContext(ButtonContext);\n\n const iconProps = {\n size: size ?? ICON_SIZE_MAP[context.size],\n color:\n color ??\n ICON_COLOR_MAP[context.variant][\n context.state === \"disabled\" ? \"disabled\" : context.color\n ],\n variant: variant ?? ICON_VARIANT_MAP[context.layout],\n };\n\n const a11yProps = !alt ? { \"aria-hidden\": ariaHidden } : { alt };\n\n // If the button is set to loading and this icon is identified as leading,\n // we don't want to render this icon and instead the loading icon which\n // is managed in the root component. We choose to render the loading icon\n // in the root component so that it displays when there is no icon already\n // inside of the button.\n if (context.state === \"loading\" && internal_iconType === \"leading\") {\n return null;\n }\n\n return (\n <TelegraphIcon\n icon={icon}\n data-button-icon\n data-button-icon-color={iconProps.color}\n {...a11yProps}\n {...iconProps}\n {...props}\n />\n );\n};\n\nexport type TextProps<T extends TgphElement = \"span\"> = RemappedOmit<\n TgphComponentProps<typeof TelegraphText<T>>,\n \"as\"\n> & {\n as?: T;\n};\n\nconst Text = <T extends TgphElement = \"span\">({\n as,\n color,\n size,\n weight = \"medium\",\n style,\n ...props\n}: TextProps<T>) => {\n const context = React.useContext(ButtonContext);\n const derivedColor =\n color ??\n TEXT_COLOR_MAP[context.variant][\n context.state === \"disabled\" ? \"disabled\" : context.color\n ];\n return (\n <TelegraphText\n as={(as || \"span\") as T}\n color={derivedColor}\n size={size ?? TEXT_SIZE_MAP[context.size]}\n weight={weight}\n internal_optionalAs={true}\n data-button-text\n data-button-text-color={derivedColor}\n style={{\n textDecoration: \"none\",\n whiteSpace: \"nowrap\",\n ...style,\n }}\n {...props}\n />\n );\n};\n\ntype DefaultIconProps = React.ComponentProps<typeof Icon>;\n\ntype BaseDefaultProps =\n | {\n leadingIcon?: DefaultIconProps;\n trailingIcon?: DefaultIconProps;\n icon?: never;\n }\n | {\n icon?: DefaultIconProps;\n leadingIcon?: never;\n trailingIcon?: never;\n };\nexport type DefaultProps<T extends TgphElement = \"button\"> = Omit<\n PolymorphicProps<T>,\n \"onClick\"\n> &\n TgphComponentProps<typeof Root> &\n BaseDefaultProps & {\n onClick?(event: React.SyntheticEvent | Event): void;\n };\n\nconst Default = <T extends TgphElement = \"button\">({\n leadingIcon,\n trailingIcon,\n icon,\n children,\n ...props\n}: DefaultProps<T>) => {\n const combinedLeadingIcon = leadingIcon || icon;\n return (\n <Root {...props}>\n {combinedLeadingIcon && (\n <Icon {...combinedLeadingIcon} internal_iconType=\"leading\" />\n )}\n {children && <Text>{children}</Text>}\n {trailingIcon && <Icon {...trailingIcon} internal_iconType=\"trailing\" />}\n </Root>\n );\n};\n\nObject.assign(Default, {\n Root,\n Icon,\n Text,\n});\n\nconst Button = Default as typeof Default & {\n Root: typeof Root;\n Icon: typeof Icon;\n Text: typeof Text;\n};\n\nexport { Button };\n"],"names":["cssVars","BUTTON_COLOR_MAP","BUTTON_SIZE_MAP","TEXT_SIZE_MAP","TEXT_COLOR_MAP","ICON_SIZE_MAP","ICON_COLOR_MAP","ICON_VARIANT_MAP","ButtonContext","React","deriveState","params","Root","as","variant","size","color","stateProp","active","type","disabled","className","children","style","props","derivedState","state","useDeterminateState","styleProp","otherProps","useStyleEngine","derivedAs","layout","childrenArray","child","_a","jsx","jsxs","Stack","clsx","Spinner","Icon","icon","alt","ariaHidden","internal_iconType","context","iconProps","a11yProps","TelegraphIcon","Text","weight","derivedColor","TelegraphText","Default","leadingIcon","trailingIcon","combinedLeadingIcon","Button"],"mappings":"8TAcaA,EAAoD,CAC/D,0BAA2B,CACzB,OAAQ,eACR,MAAO,sCAAA,EAET,wBAAyB,CACvB,OAAQ,6BACR,MAAO,sCAAA,EAET,wBAAyB,CACvB,OAAQ,6BACR,MAAO,sCAAA,EAET,yBAA0B,CACxB,OAAQ,8BACR,MAAO,sCAAA,EAET,gBAAiB,CACf,OAAQ,iCACR,MAAO,sBAAA,CAEX,EAEaC,EAAmB,CAC9B,MAAO,CACL,QAAS,CACP,gBAAiB,UACjB,sBAAuB,UACvB,sBAAuB,UACvB,uBAAwB,UACxB,gBAAiB,OAAA,EAEnB,OAAQ,CACN,gBAAiB,WACjB,sBAAuB,YACvB,sBAAuB,YACvB,uBAAwB,YACxB,gBAAiB,OAAA,EAEnB,IAAK,CACH,gBAAiB,QACjB,sBAAuB,SACvB,sBAAuB,SACvB,uBAAwB,SACxB,gBAAiB,OAAA,EAEnB,KAAM,CACJ,gBAAiB,SACjB,sBAAuB,UACvB,sBAAuB,UACvB,uBAAwB,UACxB,gBAAiB,OAAA,EAEnB,MAAO,CACL,gBAAiB,UACjB,sBAAuB,WACvB,sBAAuB,WACvB,uBAAwB,WACxB,gBAAiB,OAAA,EAEnB,KAAM,CACJ,gBAAiB,SACjB,sBAAuB,UACvB,sBAAuB,UACvB,uBAAwB,UACxB,gBAAiB,OAAA,EAEnB,OAAQ,CACN,gBAAiB,WACjB,sBAAuB,YACvB,sBAAuB,YACvB,uBAAwB,YACxB,gBAAiB,OAAA,EAEnB,OAAQ,CACN,gBAAiB,WACjB,sBAAuB,YACvB,sBAAuB,YACvB,uBAAwB,YACxB,gBAAiB,OAAA,CACnB,EAEF,KAAM,CACJ,QAAS,CACP,gBAAiB,SACjB,sBAAuB,SACvB,sBAAuB,SACvB,uBAAwB,SACxB,gBAAiB,SAAA,EAEnB,KAAM,CACJ,gBAAiB,SACjB,sBAAuB,SACvB,sBAAuB,SACvB,uBAAwB,SACxB,gBAAiB,SAAA,EAEnB,IAAK,CACH,gBAAiB,QACjB,sBAAuB,QACvB,sBAAuB,QACvB,uBAAwB,QACxB,gBAAiB,QAAA,EAEnB,OAAQ,CACN,gBAAiB,WACjB,sBAAuB,WACvB,sBAAuB,WACvB,uBAAwB,WACxB,gBAAiB,WAAA,EAEnB,MAAO,CACL,gBAAiB,UACjB,sBAAuB,UACvB,sBAAuB,UACvB,uBAAwB,UACxB,gBAAiB,UAAA,EAEnB,KAAM,CACJ,gBAAiB,SACjB,sBAAuB,SACvB,sBAAuB,SACvB,uBAAwB,SACxB,gBAAiB,SAAA,EAEnB,OAAQ,CACN,gBAAiB,WACjB,sBAAuB,WACvB,sBAAuB,WACvB,uBAAwB,WACxB,gBAAiB,WAAA,EAEnB,OAAQ,CACN,gBAAiB,WACjB,sBAAuB,WACvB,sBAAuB,WACvB,uBAAwB,WACxB,gBAAiB,WAAA,CACnB,EAEF,QAAS,CACP,QAAS,CACP,gBAAiB,YACjB,sBAAuB,YACvB,sBAAuB,SACvB,uBAAwB,SACxB,0BAA2B,SAC3B,wBAAyB,SACzB,wBAAyB,SACzB,yBAA0B,SAC1B,gBAAiB,SAAA,EAEnB,KAAM,CACJ,gBAAiB,YACjB,sBAAuB,YACvB,sBAAuB,SACvB,uBAAwB,SACxB,0BAA2B,SAC3B,wBAAyB,SACzB,wBAAyB,SACzB,yBAA0B,SAC1B,gBAAiB,SAAA,EAEnB,IAAK,CACH,gBAAiB,YACjB,sBAAuB,YACvB,sBAAuB,QACvB,uBAAwB,QACxB,0BAA2B,QAC3B,wBAAyB,QACzB,wBAAyB,QACzB,yBAA0B,QAC1B,gBAAiB,QAAA,EAEnB,OAAQ,CACN,gBAAiB,YACjB,sBAAuB,YACvB,sBAAuB,WACvB,uBAAwB,WACxB,0BAA2B,WAC3B,wBAAyB,WACzB,wBAAyB,WACzB,yBAA0B,WAC1B,gBAAiB,WAAA,EAEnB,MAAO,CACL,gBAAiB,YACjB,sBAAuB,YACvB,sBAAuB,UACvB,uBAAwB,UACxB,0BAA2B,UAC3B,wBAAyB,UACzB,wBAAyB,UACzB,yBAA0B,UAC1B,gBAAiB,UAAA,EAEnB,KAAM,CACJ,gBAAiB,YACjB,sBAAuB,YACvB,sBAAuB,SACvB,uBAAwB,SACxB,0BAA2B,SAC3B,wBAAyB,SACzB,wBAAyB,SACzB,yBAA0B,SAC1B,gBAAiB,SAAA,EAEnB,OAAQ,CACN,gBAAiB,YACjB,sBAAuB,YACvB,sBAAuB,WACvB,uBAAwB,WACxB,0BAA2B,WAC3B,wBAAyB,WACzB,wBAAyB,WACzB,yBAA0B,WAC1B,gBAAiB,WAAA,EAEnB,OAAQ,CACN,gBAAiB,YACjB,sBAAuB,YACvB,sBAAuB,WACvB,uBAAwB,WACxB,0BAA2B,WAC3B,wBAAyB,WACzB,wBAAyB,WACzB,yBAA0B,WAC1B,gBAAiB,WAAA,CACnB,EAEF,MAAO,CACL,QAAS,CACP,gBAAiB,cACjB,sBAAuB,SACvB,sBAAuB,SACvB,uBAAwB,SACxB,gBAAiB,SAAA,EAEnB,KAAM,CACJ,gBAAiB,cACjB,sBAAuB,SACvB,sBAAuB,SACvB,uBAAwB,SACxB,gBAAiB,SAAA,EAEnB,IAAK,CACH,gBAAiB,cACjB,sBAAuB,QACvB,sBAAuB,QACvB,uBAAwB,QACxB,gBAAiB,QAAA,EAEnB,OAAQ,CACN,gBAAiB,cACjB,sBAAuB,WACvB,sBAAuB,WACvB,uBAAwB,WACxB,gBAAiB,WAAA,EAEnB,MAAO,CACL,gBAAiB,cACjB,sBAAuB,UACvB,sBAAuB,UACvB,uBAAwB,UACxB,gBAAiB,UAAA,EAEnB,KAAM,CACJ,gBAAiB,cACjB,sBAAuB,SACvB,sBAAuB,SACvB,uBAAwB,SACxB,gBAAiB,SAAA,EAEnB,OAAQ,CACN,gBAAiB,cACjB,sBAAuB,WACvB,sBAAuB,WACvB,uBAAwB,WACxB,gBAAiB,WAAA,EAEnB,OAAQ,CACN,gBAAiB,cACjB,sBAAuB,WACvB,sBAAuB,WACvB,uBAAwB,WACxB,gBAAiB,WAAA,CACnB,CAEJ,EAEaC,EAAkB,CAC7B,QAAS,CACP,EAAK,CACH,EAAG,OACH,EAAG,IACH,IAAK,MACL,GAAI,IACJ,QAAS,GAAA,EAEX,EAAK,CACH,EAAG,OACH,EAAG,IACH,IAAK,IACL,GAAI,MACJ,QAAS,GAAA,EAEX,EAAK,CACH,EAAG,OACH,EAAG,IACH,IAAK,MACL,GAAI,IACJ,QAAS,GAAA,EAEX,EAAK,CACH,EAAG,OACH,EAAG,KACH,IAAK,IACL,GAAI,IACJ,QAAS,GAAA,CACX,EAEF,YAAa,CACX,EAAK,CACH,EAAG,IACH,EAAG,IACH,IAAK,IACL,GAAI,IACJ,QAAS,GAAA,EAEX,EAAK,CACH,EAAG,IACH,EAAG,IACH,IAAK,IACL,GAAI,IACJ,QAAS,GAAA,EAEX,EAAK,CACH,EAAG,IACH,EAAG,IACH,IAAK,IACL,GAAI,IACJ,QAAS,GAAA,EAEX,EAAK,CACH,EAAG,KACH,EAAG,KACH,IAAK,IACL,GAAI,IACJ,QAAS,GAAA,CACX,CAEJ,EAEaC,EAAgB,CAC3B,EAAK,IACL,EAAK,IACL,EAAK,IACL,EAAK,GACP,EAEaC,EAAiB,CAC5B,MAAO,CACL,QAAS,QACT,KAAM,QACN,IAAK,QACL,OAAQ,QACR,MAAO,QACP,KAAM,QACN,OAAQ,QACR,OAAQ,QACR,SAAU,UAAA,EAEZ,KAAM,CACJ,QAAS,UACT,KAAM,OACN,IAAK,MACL,OAAQ,SACR,MAAO,QACP,KAAM,OACN,OAAQ,SACR,OAAQ,SACR,SAAU,UAAA,EAEZ,QAAS,CACP,QAAS,UACT,KAAM,OACN,IAAK,MACL,OAAQ,SACR,MAAO,QACP,KAAM,OACN,OAAQ,SACR,OAAQ,SACR,SAAU,UAAA,EAEZ,MAAO,CACL,QAAS,UACT,KAAM,OACN,IAAK,MACL,OAAQ,SACR,MAAO,QACP,KAAM,OACN,OAAQ,SACR,OAAQ,SACR,SAAU,UAAA,CAEd,EAEaC,EAAgB,CAC3B,EAAK,IACL,EAAK,IACL,EAAK,IACL,EAAK,GACP,EAEaC,EAAiB,CAC5B,MAAO,CACL,QAAS,QACT,KAAM,QACN,IAAK,QACL,OAAQ,QACR,MAAO,QACP,KAAM,QACN,OAAQ,QACR,OAAQ,QACR,SAAU,UAAA,EAEZ,KAAM,CACJ,QAAS,UACT,OAAQ,SACR,KAAM,OACN,IAAK,MACL,MAAO,QACP,KAAM,OACN,OAAQ,SACR,OAAQ,SACR,SAAU,UAAA,EAEZ,QAAS,CACP,QAAS,UACT,OAAQ,SACR,KAAM,OACN,IAAK,MACL,MAAO,QACP,KAAM,OACN,OAAQ,SACR,OAAQ,SACR,SAAU,UAAA,EAEZ,MAAO,CACL,QAAS,OACT,OAAQ,SACR,KAAM,OACN,IAAK,MACL,MAAO,QACP,KAAM,OACN,OAAQ,SACR,OAAQ,SACR,SAAU,UAAA,CAEd,EAEaC,EAAmB,CAC9B,QAAS,YACT,YAAa,SACf,ECzaMC,EAAgBC,EAAM,cAE1B,CACA,QAAS,QACT,KAAM,IACN,MAAO,UACP,MAAO,UACP,OAAQ,UACR,OAAQ,EACV,CAAC,EASKC,EAAeC,GACfA,EAAO,SAAiB,WACxBA,EAAO,QAAU,UAAkB,UACnCA,EAAO,OAAe,SACnBA,EAAO,MAGVC,EAAO,CAAmC,CAC9C,GAAAC,EACA,QAAAC,EAAU,QACV,KAAAC,EAAO,IACP,MAAAC,EAAQ,UACR,MAAOC,EAAY,UACnB,OAAAC,EAAS,GACT,KAAAC,EAAO,SACP,SAAAC,EACA,UAAAC,EACA,SAAAC,EACA,MAAAC,EACA,GAAGC,CACL,IAAoB,CAClB,MAAMC,EAAef,EAAY,CAAE,MAAOO,EAAW,SAAAG,EAAU,OAAAF,EAAQ,EACjEQ,EAAQC,EAAAA,oBAA8C,CAC1D,MAAOF,EACP,iBAAkB,UAClB,cAAe,IAAA,CAChB,EAEK,CAAE,UAAAG,EAAW,WAAAC,CAAA,EAAeC,iBAAe,CAC/C,MAAO,CACL,GAAG7B,EAAiBa,CAAO,EAAEE,CAAK,EAClC,MAAAO,CAAA,EAEF,QAAAvB,CAAA,CACD,EAOK+B,EAAYX,GAAY,CAACP,EAAK,SAAWA,EAEzCmB,EAASvB,EAAM,QAAiC,IAAM,OAC1D,MAAMwB,EAAgBxB,EAAM,SAAS,QAAQa,CAAQ,EACrD,IAAIW,GAAA,YAAAA,EAAe,UAAW,GAAKxB,EAAM,eAAewB,EAAc,CAAC,CAAC,EAAG,CACzE,MAAMC,EAAQD,EAAc,CAAC,EAO7B,IAAIE,EAAAD,GAAA,YAAAA,EAAO,QAAP,MAAAC,EAAc,KAChB,MAAO,WAEX,CACA,MAAO,SACT,EAAG,CAACb,CAAQ,CAAC,EAEb,OACEc,EAAAA,IAAC5B,EAAc,SAAd,CACC,MAAO,CAAE,QAAAM,EAAS,KAAAC,EAAM,MAAAC,EAAO,MAAAU,EAAA,OAAOM,EAAQ,OAAAd,CAAA,EAE9C,SAAAmB,EAAAA,KAACC,EAAAA,MAAA,CACC,GAAIP,EACJ,UAAWQ,EAAK,cAAelB,CAAS,EACxC,QAAQ,cACR,MAAM,SACN,QAAQ,SACP,GAAGnB,EAAgB8B,CAAM,EAAEjB,CAAI,EAChC,MAAOa,EACP,mBAAgB,GAChB,0BAAyBI,EACzB,yBAAwBN,EACxB,2BAA0BZ,EAC1B,yBAAwBE,EACxB,SAAUU,IAAU,YAAcA,IAAU,UAC3C,GAAIK,IAAc,UAAY,CAAE,KAAAZ,CAAA,EAChC,GAAGU,EACH,GAAGL,EAEH,SAAA,CAAAE,IAAU,WACTU,EAAAA,IAACI,EAAAA,QAAA,CACC,KAAMnC,EAAcU,CAAI,EACxB,MAAOT,EAAeQ,CAAO,EAAEE,CAAK,EACpC,QAAST,EAAiByB,CAAM,EAChC,gCAA6B,EAAA,CAAA,EAGhCV,CAAA,CAAA,CAAA,CACH,CAAA,CAGN,EAQMmB,EAAO,CAAiC,CAC5C,KAAA1B,EACA,MAAAC,EACA,QAAAF,EAAA,KACA4B,EACA,IAAAC,EACA,cAAeC,EACf,kBAAAC,EACA,GAAGrB,CACL,IAAoB,CAClB,MAAMsB,EAAUrC,EAAM,WAAWD,CAAa,EAExCuC,EAAY,CAChB,KAAMhC,GAAQV,EAAcyC,EAAQ,IAAI,EACxC,MACE9B,GACAV,EAAewC,EAAQ,OAAO,EAC5BA,EAAQ,QAAU,WAAa,WAAaA,EAAQ,KACtD,EACF,QAAShC,GAAWP,EAAiBuC,EAAQ,MAAM,CAAA,EAG/CE,EAAaL,EAAsC,CAAE,IAAAA,CAAA,EAAlC,CAAE,cAAeC,CAAA,EAO1C,OAAIE,EAAQ,QAAU,WAAaD,IAAsB,UAChD,KAIPT,EAAAA,IAACa,EAAAA,KAAA,CAAA,KACCP,EACA,mBAAgB,GAChB,yBAAwBK,EAAU,MACjC,GAAGC,EACH,GAAGD,EACH,GAAGvB,CAAA,CAAA,CAGV,EASM0B,EAAO,CAAiC,CAC5C,GAAArC,EACA,MAAAG,EACA,KAAAD,EACA,OAAAoC,EAAS,SACT,MAAA5B,EACA,GAAGC,CACL,IAAoB,CAClB,MAAMsB,EAAUrC,EAAM,WAAWD,CAAa,EACxC4C,EACJpC,GACAZ,EAAe0C,EAAQ,OAAO,EAC5BA,EAAQ,QAAU,WAAa,WAAaA,EAAQ,KACtD,EACF,OACEV,EAAAA,IAACiB,EAAAA,KAAA,CACC,GAAKxC,GAAM,OACX,MAAOuC,EACP,KAAMrC,GAAQZ,EAAc2C,EAAQ,IAAI,EACxC,OAAAK,EACA,oBAAqB,GACrB,mBAAgB,GAChB,yBAAwBC,EACxB,MAAO,CACL,eAAgB,OAChB,WAAY,SACZ,GAAG7B,CAAA,EAEJ,GAAGC,CAAA,CAAA,CAGV,EAwBM8B,EAAU,CAAmC,CACjD,YAAAC,EACA,aAAAC,EACA,KAAAd,EACA,SAAApB,EACA,GAAGE,CACL,IAAuB,CACrB,MAAMiC,EAAsBF,GAAeb,EAC3C,OACEL,EAAAA,KAACzB,EAAA,CAAM,GAAGY,EACP,SAAA,CAAAiC,GACCrB,EAAAA,IAACK,EAAA,CAAM,GAAGgB,EAAqB,kBAAkB,UAAU,EAE5DnC,GAAYc,EAAAA,IAACc,EAAA,CAAM,SAAA5B,CAAA,CAAS,EAC5BkC,GAAgBpB,EAAAA,IAACK,EAAA,CAAM,GAAGe,EAAc,kBAAkB,UAAA,CAAW,CAAA,EACxE,CAEJ,EAEA,OAAO,OAAOF,EAAS,CACrB,KAAA1C,EACA,KAAA6B,EACA,KAAAS,CACF,CAAC,EAED,MAAMQ,EAASJ"}
package/dist/esm/index.mjs CHANGED
@@ -146,8 +146,8 @@ const z = {
146
146
  },
147
147
  outline: {
148
148
  default: {
149
- backgroundColor: "surface-1",
150
- focus_backgroundColor: "surface-1",
149
+ backgroundColor: "surface-3",
150
+ focus_backgroundColor: "surface-3",
151
151
  hover_backgroundColor: "gray-2",
152
152
  active_backgroundColor: "gray-3",
153
153
  default_buttonShadowColor: "gray-6",
@@ -157,8 +157,8 @@ const z = {
157
157
  hover_textColor: "gray-12"
158
158
  },
159
159
  gray: {
160
- backgroundColor: "surface-1",
161
- focus_backgroundColor: "surface-1",
160
+ backgroundColor: "surface-3",
161
+ focus_backgroundColor: "surface-3",
162
162
  hover_backgroundColor: "gray-2",
163
163
  active_backgroundColor: "gray-3",
164
164
  default_buttonShadowColor: "gray-6",
@@ -168,8 +168,8 @@ const z = {
168
168
  hover_textColor: "gray-12"
169
169
  },
170
170
  red: {
171
- backgroundColor: "surface-1",
172
- focus_backgroundColor: "surface-1",
171
+ backgroundColor: "surface-3",
172
+ focus_backgroundColor: "surface-3",
173
173
  hover_backgroundColor: "red-2",
174
174
  active_backgroundColor: "red-3",
175
175
  default_buttonShadowColor: "red-6",
@@ -179,8 +179,8 @@ const z = {
179
179
  hover_textColor: "red-11"
180
180
  },
181
181
  accent: {
182
- backgroundColor: "surface-1",
183
- focus_backgroundColor: "surface-1",
182
+ backgroundColor: "surface-3",
183
+ focus_backgroundColor: "surface-3",
184
184
  hover_backgroundColor: "accent-2",
185
185
  active_backgroundColor: "accent-3",
186
186
  default_buttonShadowColor: "accent-6",
@@ -190,8 +190,8 @@ const z = {
190
190
  hover_textColor: "accent-11"
191
191
  },
192
192
  green: {
193
- backgroundColor: "surface-1",
194
- focus_backgroundColor: "surface-1",
193
+ backgroundColor: "surface-3",
194
+ focus_backgroundColor: "surface-3",
195
195
  hover_backgroundColor: "green-2",
196
196
  active_backgroundColor: "green-3",
197
197
  default_buttonShadowColor: "green-6",
@@ -201,8 +201,8 @@ const z = {
201
201
  hover_textColor: "green-11"
202
202
  },
203
203
  blue: {
204
- backgroundColor: "surface-1",
205
- focus_backgroundColor: "surface-1",
204
+ backgroundColor: "surface-3",
205
+ focus_backgroundColor: "surface-3",
206
206
  hover_backgroundColor: "blue-2",
207
207
  active_backgroundColor: "blue-3",
208
208
  default_buttonShadowColor: "blue-6",
@@ -212,8 +212,8 @@ const z = {
212
212
  hover_textColor: "blue-11"
213
213
  },
214
214
  yellow: {
215
- backgroundColor: "surface-1",
216
- focus_backgroundColor: "surface-1",
215
+ backgroundColor: "surface-3",
216
+ focus_backgroundColor: "surface-3",
217
217
  hover_backgroundColor: "yellow-2",
218
218
  active_backgroundColor: "yellow-3",
219
219
  default_buttonShadowColor: "yellow-6",
@@ -223,8 +223,8 @@ const z = {
223
223
  hover_textColor: "yellow-11"
224
224
  },
225
225
  purple: {
226
- backgroundColor: "surface-1",
227
- focus_backgroundColor: "surface-1",
226
+ backgroundColor: "surface-3",
227
+ focus_backgroundColor: "surface-3",
228
228
  hover_backgroundColor: "purple-2",
229
229
  active_backgroundColor: "purple-3",
230
230
  default_buttonShadowColor: "purple-6",
package/dist/esm/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sources":["../../src/Button/Button.constants.ts","../../src/Button/Button.tsx"],"sourcesContent":["import type { tokens } from \"@telegraph/style-engine\";\nimport type { CssVarProp } from \"@telegraph/style-engine\";\n\n// Styles for controlling the \"border\" on the outline variant\n// of the button. We use a shadow so we don't need apply a border\n// to all other buttons to make them the same height.\nexport type BaseStyleProps = {\n default_buttonShadowColor: keyof typeof tokens.color;\n hover_buttonShadowColor: keyof typeof tokens.color;\n focus_buttonShadowColor: keyof typeof tokens.color;\n active_buttonShadowColor: keyof typeof tokens.color;\n hover_textColor?: keyof typeof tokens.color;\n};\n\nexport const cssVars: Record<keyof BaseStyleProps, CssVarProp> = {\n default_buttonShadowColor: {\n cssVar: \"--box-shadow\",\n value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n },\n hover_buttonShadowColor: {\n cssVar: \"--tgph-button-hover-shadow\",\n value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n },\n focus_buttonShadowColor: {\n cssVar: \"--tgph-button-focus-shadow\",\n value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n },\n active_buttonShadowColor: {\n cssVar: \"--tgph-button-active-shadow\",\n value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n },\n hover_textColor: {\n cssVar: \"--tgph-button-hover-text-color\",\n value: \"var(--tgph-VARIABLE)\",\n },\n} as const;\n\nexport const BUTTON_COLOR_MAP = {\n solid: {\n default: {\n backgroundColor: \"gray-12\",\n hover_backgroundColor: \"gray-11\",\n focus_backgroundColor: \"gray-10\",\n active_backgroundColor: \"gray-10\",\n hover_textColor: \"white\",\n },\n accent: {\n backgroundColor: \"accent-9\",\n hover_backgroundColor: \"accent-10\",\n focus_backgroundColor: \"accent-11\",\n active_backgroundColor: \"accent-11\",\n hover_textColor: \"white\",\n },\n red: {\n backgroundColor: \"red-9\",\n hover_backgroundColor: \"red-10\",\n focus_backgroundColor: \"red-11\",\n active_backgroundColor: \"red-11\",\n hover_textColor: \"white\",\n },\n gray: {\n backgroundColor: \"gray-9\",\n hover_backgroundColor: \"gray-10\",\n focus_backgroundColor: \"gray-11\",\n active_backgroundColor: \"gray-11\",\n hover_textColor: \"white\",\n },\n green: {\n backgroundColor: \"green-9\",\n hover_backgroundColor: \"green-10\",\n focus_backgroundColor: \"green-11\",\n active_backgroundColor: \"green-11\",\n hover_textColor: \"white\",\n },\n blue: {\n backgroundColor: \"blue-9\",\n hover_backgroundColor: \"blue-10\",\n focus_backgroundColor: \"blue-11\",\n active_backgroundColor: \"blue-11\",\n hover_textColor: \"white\",\n },\n yellow: {\n backgroundColor: \"yellow-9\",\n hover_backgroundColor: \"yellow-10\",\n focus_backgroundColor: \"yellow-11\",\n active_backgroundColor: \"yellow-11\",\n hover_textColor: \"white\",\n },\n purple: {\n backgroundColor: \"purple-9\",\n hover_backgroundColor: \"purple-10\",\n focus_backgroundColor: \"purple-11\",\n active_backgroundColor: \"purple-11\",\n hover_textColor: \"white\",\n },\n },\n soft: {\n default: {\n backgroundColor: \"gray-3\",\n hover_backgroundColor: \"gray-4\",\n focus_backgroundColor: \"gray-5\",\n active_backgroundColor: \"gray-5\",\n hover_textColor: \"gray-12\",\n },\n gray: {\n backgroundColor: \"gray-3\",\n hover_backgroundColor: \"gray-4\",\n focus_backgroundColor: \"gray-5\",\n active_backgroundColor: \"gray-5\",\n hover_textColor: \"gray-12\",\n },\n red: {\n backgroundColor: \"red-3\",\n hover_backgroundColor: \"red-4\",\n focus_backgroundColor: \"red-5\",\n active_backgroundColor: \"red-5\",\n hover_textColor: \"red-11\",\n },\n accent: {\n backgroundColor: \"accent-3\",\n hover_backgroundColor: \"accent-4\",\n focus_backgroundColor: \"accent-5\",\n active_backgroundColor: \"accent-5\",\n hover_textColor: \"accent-11\",\n },\n green: {\n backgroundColor: \"green-3\",\n hover_backgroundColor: \"green-4\",\n focus_backgroundColor: \"green-5\",\n active_backgroundColor: \"green-5\",\n hover_textColor: \"green-11\",\n },\n blue: {\n backgroundColor: \"blue-3\",\n hover_backgroundColor: \"blue-4\",\n focus_backgroundColor: \"blue-5\",\n active_backgroundColor: \"blue-5\",\n hover_textColor: \"blue-11\",\n },\n yellow: {\n backgroundColor: \"yellow-3\",\n hover_backgroundColor: \"yellow-4\",\n focus_backgroundColor: \"yellow-5\",\n active_backgroundColor: \"yellow-5\",\n hover_textColor: \"yellow-11\",\n },\n purple: {\n backgroundColor: \"purple-3\",\n hover_backgroundColor: \"purple-4\",\n focus_backgroundColor: \"purple-5\",\n active_backgroundColor: \"purple-5\",\n hover_textColor: \"purple-11\",\n },\n },\n outline: {\n default: {\n backgroundColor: \"surface-1\",\n focus_backgroundColor: \"surface-1\",\n hover_backgroundColor: \"gray-2\",\n active_backgroundColor: \"gray-3\",\n default_buttonShadowColor: \"gray-6\",\n hover_buttonShadowColor: \"gray-7\",\n focus_buttonShadowColor: \"gray-8\",\n active_buttonShadowColor: \"gray-8\",\n hover_textColor: \"gray-12\",\n },\n gray: {\n backgroundColor: \"surface-1\",\n focus_backgroundColor: \"surface-1\",\n hover_backgroundColor: \"gray-2\",\n active_backgroundColor: \"gray-3\",\n default_buttonShadowColor: \"gray-6\",\n hover_buttonShadowColor: \"gray-7\",\n focus_buttonShadowColor: \"gray-8\",\n active_buttonShadowColor: \"gray-8\",\n hover_textColor: \"gray-12\",\n },\n red: {\n backgroundColor: \"surface-1\",\n focus_backgroundColor: \"surface-1\",\n hover_backgroundColor: \"red-2\",\n active_backgroundColor: \"red-3\",\n default_buttonShadowColor: \"red-6\",\n hover_buttonShadowColor: \"red-7\",\n focus_buttonShadowColor: \"red-8\",\n active_buttonShadowColor: \"red-8\",\n hover_textColor: \"red-11\",\n },\n accent: {\n backgroundColor: \"surface-1\",\n focus_backgroundColor: \"surface-1\",\n hover_backgroundColor: \"accent-2\",\n active_backgroundColor: \"accent-3\",\n default_buttonShadowColor: \"accent-6\",\n hover_buttonShadowColor: \"accent-7\",\n focus_buttonShadowColor: \"accent-8\",\n active_buttonShadowColor: \"accent-8\",\n hover_textColor: \"accent-11\",\n },\n green: {\n backgroundColor: \"surface-1\",\n focus_backgroundColor: \"surface-1\",\n hover_backgroundColor: \"green-2\",\n active_backgroundColor: \"green-3\",\n default_buttonShadowColor: \"green-6\",\n hover_buttonShadowColor: \"green-7\",\n focus_buttonShadowColor: \"green-8\",\n active_buttonShadowColor: \"green-8\",\n hover_textColor: \"green-11\",\n },\n blue: {\n backgroundColor: \"surface-1\",\n focus_backgroundColor: \"surface-1\",\n hover_backgroundColor: \"blue-2\",\n active_backgroundColor: \"blue-3\",\n default_buttonShadowColor: \"blue-6\",\n hover_buttonShadowColor: \"blue-7\",\n focus_buttonShadowColor: \"blue-8\",\n active_buttonShadowColor: \"blue-8\",\n hover_textColor: \"blue-11\",\n },\n yellow: {\n backgroundColor: \"surface-1\",\n focus_backgroundColor: \"surface-1\",\n hover_backgroundColor: \"yellow-2\",\n active_backgroundColor: \"yellow-3\",\n default_buttonShadowColor: \"yellow-6\",\n hover_buttonShadowColor: \"yellow-7\",\n focus_buttonShadowColor: \"yellow-8\",\n active_buttonShadowColor: \"yellow-8\",\n hover_textColor: \"yellow-11\",\n },\n purple: {\n backgroundColor: \"surface-1\",\n focus_backgroundColor: \"surface-1\",\n hover_backgroundColor: \"purple-2\",\n active_backgroundColor: \"purple-3\",\n default_buttonShadowColor: \"purple-6\",\n hover_buttonShadowColor: \"purple-7\",\n focus_buttonShadowColor: \"purple-8\",\n active_buttonShadowColor: \"purple-8\",\n hover_textColor: \"purple-11\",\n },\n },\n ghost: {\n default: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"gray-3\",\n focus_backgroundColor: \"gray-4\",\n active_backgroundColor: \"gray-4\",\n hover_textColor: \"gray-12\",\n },\n gray: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"gray-3\",\n focus_backgroundColor: \"gray-4\",\n active_backgroundColor: \"gray-4\",\n hover_textColor: \"gray-12\",\n },\n red: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"red-3\",\n focus_backgroundColor: \"red-4\",\n active_backgroundColor: \"red-4\",\n hover_textColor: \"red-11\",\n },\n accent: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"accent-3\",\n focus_backgroundColor: \"accent-4\",\n active_backgroundColor: \"accent-4\",\n hover_textColor: \"accent-11\",\n },\n green: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"green-3\",\n focus_backgroundColor: \"green-4\",\n active_backgroundColor: \"green-4\",\n hover_textColor: \"green-11\",\n },\n blue: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"blue-3\",\n focus_backgroundColor: \"blue-4\",\n active_backgroundColor: \"blue-4\",\n hover_textColor: \"blue-11\",\n },\n yellow: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"yellow-3\",\n focus_backgroundColor: \"yellow-4\",\n active_backgroundColor: \"yellow-4\",\n hover_textColor: \"yellow-11\",\n },\n purple: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"purple-3\",\n focus_backgroundColor: \"purple-4\",\n active_backgroundColor: \"purple-4\",\n hover_textColor: \"purple-11\",\n },\n },\n} as const;\n\nexport const BUTTON_SIZE_MAP = {\n default: {\n \"0\": {\n w: \"auto\",\n h: \"5\",\n gap: \"0_5\",\n px: \"1\",\n rounded: \"2\",\n },\n \"1\": {\n w: \"auto\",\n h: \"6\",\n gap: \"1\",\n px: \"1_5\",\n rounded: \"2\",\n },\n \"2\": {\n w: \"auto\",\n h: \"8\",\n gap: \"1_5\",\n px: \"2\",\n rounded: \"2\",\n },\n \"3\": {\n w: \"auto\",\n h: \"10\",\n gap: \"2\",\n px: \"3\",\n rounded: \"3\",\n },\n },\n \"icon-only\": {\n \"0\": {\n w: \"5\",\n h: \"5\",\n gap: \"0\",\n px: \"0\",\n rounded: \"2\",\n },\n \"1\": {\n w: \"6\",\n h: \"6\",\n gap: \"0\",\n px: \"0\",\n rounded: \"2\",\n },\n \"2\": {\n w: \"8\",\n h: \"8\",\n gap: \"0\",\n px: \"0\",\n rounded: \"2\",\n },\n \"3\": {\n w: \"10\",\n h: \"10\",\n gap: \"0\",\n px: \"0\",\n rounded: \"3\",\n },\n },\n} as const;\n\nexport const TEXT_SIZE_MAP = {\n \"0\": \"0\",\n \"1\": \"1\",\n \"2\": \"2\",\n \"3\": \"3\",\n} as const;\n\nexport const TEXT_COLOR_MAP = {\n solid: {\n default: \"white\",\n gray: \"white\",\n red: \"white\",\n accent: \"white\",\n green: \"white\",\n blue: \"white\",\n yellow: \"white\",\n purple: \"white\",\n disabled: \"disabled\",\n },\n soft: {\n default: \"default\",\n gray: \"gray\",\n red: \"red\",\n accent: \"accent\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n purple: \"purple\",\n disabled: \"disabled\",\n },\n outline: {\n default: \"default\",\n gray: \"gray\",\n red: \"red\",\n accent: \"accent\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n purple: \"purple\",\n disabled: \"disabled\",\n },\n ghost: {\n default: \"default\",\n gray: \"gray\",\n red: \"red\",\n accent: \"accent\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n purple: \"purple\",\n disabled: \"disabled\",\n },\n} as const;\n\nexport const ICON_SIZE_MAP = {\n \"0\": \"0\",\n \"1\": \"1\",\n \"2\": \"2\",\n \"3\": \"3\",\n} as const;\n\nexport const ICON_COLOR_MAP = {\n solid: {\n default: \"white\",\n gray: \"white\",\n red: \"white\",\n accent: \"white\",\n green: \"white\",\n blue: \"white\",\n yellow: \"white\",\n purple: \"white\",\n disabled: \"disabled\",\n },\n soft: {\n default: \"default\",\n accent: \"accent\",\n gray: \"gray\",\n red: \"red\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n purple: \"purple\",\n disabled: \"disabled\",\n },\n outline: {\n default: \"default\",\n accent: \"accent\",\n gray: \"gray\",\n red: \"red\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n purple: \"purple\",\n disabled: \"disabled\",\n },\n ghost: {\n default: \"gray\",\n accent: \"accent\",\n gray: \"gray\",\n red: \"red\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n purple: \"purple\",\n disabled: \"disabled\",\n },\n} as const;\n\nexport const ICON_VARIANT_MAP = {\n default: \"secondary\",\n \"icon-only\": \"primary\",\n} as const;\n\nexport type ButtonVariant = keyof typeof BUTTON_COLOR_MAP;\nexport type ButtonColor = keyof (typeof BUTTON_COLOR_MAP)[ButtonVariant];\nexport type ButtonSize = keyof (typeof BUTTON_SIZE_MAP)[\"default\"];\n","import {\n type PolymorphicProps,\n type PolymorphicPropsWithTgphRef,\n RemappedOmit,\n type Required,\n type TgphComponentProps,\n type TgphElement,\n useDeterminateState,\n} from \"@telegraph/helpers\";\nimport { Spinner, Icon as TelegraphIcon } from \"@telegraph/icon\";\nimport { Stack } from \"@telegraph/layout\";\nimport { useStyleEngine } from \"@telegraph/style-engine\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport {\n BUTTON_COLOR_MAP,\n BUTTON_SIZE_MAP,\n type ButtonColor,\n type ButtonSize,\n type ButtonVariant,\n ICON_COLOR_MAP,\n ICON_SIZE_MAP,\n ICON_VARIANT_MAP,\n TEXT_COLOR_MAP,\n TEXT_SIZE_MAP,\n cssVars,\n} from \"./Button.constants\";\n\ntype RootBaseProps = {\n variant?: ButtonVariant;\n color?: ButtonColor;\n size?: ButtonSize;\n state?: \"default\" | \"loading\";\n active?: boolean;\n};\n\ntype InternalProps = {\n layout: \"default\" | \"icon-only\";\n color: Required<RootBaseProps>[\"color\"];\n state: Required<RootBaseProps>[\"state\"] | \"disabled\" | \"active\";\n};\n\nexport type RootProps<T extends TgphElement = \"button\"> = Omit<\n TgphComponentProps<typeof Stack>,\n \"tgphRef\" | \"as\" | \"onClick\"\n> &\n Omit<PolymorphicPropsWithTgphRef<T, HTMLButtonElement>, \"onClick\"> &\n RootBaseProps & {\n onClick?(event: React.SyntheticEvent | Event): void;\n };\n\nconst ButtonContext = React.createContext<\n Required<Omit<RootBaseProps, \"color\" | \"as\" | \"state\"> & InternalProps>\n>({\n variant: \"solid\",\n size: \"2\",\n color: \"default\",\n state: \"default\",\n layout: \"default\",\n active: false,\n});\n\ntype DeriveStateParams = {\n state: Required<RootBaseProps>[\"state\"];\n disabled?: boolean;\n active?: boolean;\n};\n\n// Derive the state of the button based on the html button props in\nconst deriveState = (params: DeriveStateParams): InternalProps[\"state\"] => {\n if (params.disabled) return \"disabled\";\n if (params.state === \"loading\") return \"loading\";\n if (params.active) return \"active\";\n return params.state;\n};\n\nconst Root = <T extends TgphElement = \"button\">({\n as,\n variant = \"solid\",\n size = \"2\",\n color = \"default\",\n state: stateProp = \"default\",\n active = false,\n type = \"button\",\n disabled,\n className,\n children,\n style,\n ...props\n}: RootProps<T>) => {\n const derivedState = deriveState({ state: stateProp, disabled, active });\n const state = useDeterminateState<DefaultProps<T>[\"state\"]>({\n value: derivedState,\n determinateValue: \"loading\",\n minDurationMs: 1200,\n });\n\n const { styleProp, otherProps } = useStyleEngine({\n props: {\n ...BUTTON_COLOR_MAP[variant][color],\n style,\n },\n cssVars,\n });\n\n // If the button is in a disabled state, we don't want any clicks to fire.\n // To do this reliably, we convert the element back to a button if it is\n // disabled. We do this so we can use the native button element's disabled\n // state to prevent clicks.\n // We also want to trivially pass in \"button\" if no \"as\" prop is provided\n const derivedAs = disabled || !as ? \"button\" : as;\n\n const layout = React.useMemo<InternalProps[\"layout\"]>(() => {\n const childrenArray = React.Children.toArray(children);\n if (childrenArray?.length === 1 && React.isValidElement(childrenArray[0])) {\n const child = childrenArray[0] as\n | React.ReactComponentElement<typeof Icon>\n | {\n props: {\n icon: undefined;\n };\n };\n if (child?.props?.icon) {\n return \"icon-only\";\n }\n }\n return \"default\";\n }, [children]);\n\n return (\n <ButtonContext.Provider\n value={{ variant, size, color, state, layout, active }}\n >\n <Stack\n as={derivedAs}\n className={clsx(\"tgph-button\", className)}\n display=\"inline-flex\"\n align=\"center\"\n justify=\"center\"\n {...BUTTON_SIZE_MAP[layout][size]}\n style={styleProp}\n data-tgph-button\n data-tgph-button-layout={layout}\n data-tgph-button-state={state}\n data-tgph-button-variant={variant}\n data-tgph-button-color={color}\n disabled={state === \"disabled\" || state === \"loading\"}\n {...(derivedAs === \"button\" && { type })} // Only pass in type if we are a button\n {...otherProps}\n {...props}\n >\n {state === \"loading\" && (\n <Spinner\n size={ICON_SIZE_MAP[size]}\n color={ICON_COLOR_MAP[variant][color]}\n variant={ICON_VARIANT_MAP[layout]}\n data-tgph-button-loading-icon\n />\n )}\n {children}\n </Stack>\n </ButtonContext.Provider>\n );\n};\n\nexport type IconProps<T extends TgphElement = \"span\"> = TgphComponentProps<\n typeof TelegraphIcon<T>\n> & {\n internal_iconType?: \"leading\" | \"trailing\";\n};\n\nconst Icon = <T extends TgphElement = \"span\">({\n size,\n color,\n variant,\n icon,\n alt,\n \"aria-hidden\": ariaHidden,\n internal_iconType,\n ...props\n}: IconProps<T>) => {\n const context = React.useContext(ButtonContext);\n\n const iconProps = {\n size: size ?? ICON_SIZE_MAP[context.size],\n color:\n color ??\n ICON_COLOR_MAP[context.variant][\n context.state === \"disabled\" ? \"disabled\" : context.color\n ],\n variant: variant ?? ICON_VARIANT_MAP[context.layout],\n };\n\n const a11yProps = !alt ? { \"aria-hidden\": ariaHidden } : { alt };\n\n // If the button is set to loading and this icon is identified as leading,\n // we don't want to render this icon and instead the loading icon which\n // is managed in the root component. We choose to render the loading icon\n // in the root component so that it displays when there is no icon already\n // inside of the button.\n if (context.state === \"loading\" && internal_iconType === \"leading\") {\n return null;\n }\n\n return (\n <TelegraphIcon\n icon={icon}\n data-button-icon\n data-button-icon-color={iconProps.color}\n {...a11yProps}\n {...iconProps}\n {...props}\n />\n );\n};\n\nexport type TextProps<T extends TgphElement = \"span\"> = RemappedOmit<\n TgphComponentProps<typeof TelegraphText<T>>,\n \"as\"\n> & {\n as?: T;\n};\n\nconst Text = <T extends TgphElement = \"span\">({\n as,\n color,\n size,\n weight = \"medium\",\n style,\n ...props\n}: TextProps<T>) => {\n const context = React.useContext(ButtonContext);\n const derivedColor =\n color ??\n TEXT_COLOR_MAP[context.variant][\n context.state === \"disabled\" ? \"disabled\" : context.color\n ];\n return (\n <TelegraphText\n as={(as || \"span\") as T}\n color={derivedColor}\n size={size ?? TEXT_SIZE_MAP[context.size]}\n weight={weight}\n internal_optionalAs={true}\n data-button-text\n data-button-text-color={derivedColor}\n style={{\n textDecoration: \"none\",\n whiteSpace: \"nowrap\",\n ...style,\n }}\n {...props}\n />\n );\n};\n\ntype DefaultIconProps = React.ComponentProps<typeof Icon>;\n\ntype BaseDefaultProps =\n | {\n leadingIcon?: DefaultIconProps;\n trailingIcon?: DefaultIconProps;\n icon?: never;\n }\n | {\n icon?: DefaultIconProps;\n leadingIcon?: never;\n trailingIcon?: never;\n };\nexport type DefaultProps<T extends TgphElement = \"button\"> = Omit<\n PolymorphicProps<T>,\n \"onClick\"\n> &\n TgphComponentProps<typeof Root> &\n BaseDefaultProps & {\n onClick?(event: React.SyntheticEvent | Event): void;\n };\n\nconst Default = <T extends TgphElement = \"button\">({\n leadingIcon,\n trailingIcon,\n icon,\n children,\n ...props\n}: DefaultProps<T>) => {\n const combinedLeadingIcon = leadingIcon || icon;\n return (\n <Root {...props}>\n {combinedLeadingIcon && (\n <Icon {...combinedLeadingIcon} internal_iconType=\"leading\" />\n )}\n {children && <Text>{children}</Text>}\n {trailingIcon && <Icon {...trailingIcon} internal_iconType=\"trailing\" />}\n </Root>\n );\n};\n\nObject.assign(Default, {\n Root,\n Icon,\n Text,\n});\n\nconst Button = Default as typeof Default & {\n Root: typeof Root;\n Icon: typeof Icon;\n Text: typeof Text;\n};\n\nexport { Button };\n"],"names":["cssVars","BUTTON_COLOR_MAP","BUTTON_SIZE_MAP","TEXT_SIZE_MAP","TEXT_COLOR_MAP","ICON_SIZE_MAP","ICON_COLOR_MAP","ICON_VARIANT_MAP","ButtonContext","React","deriveState","params","Root","as","variant","size","color","stateProp","active","type","disabled","className","children","style","props","derivedState","state","useDeterminateState","styleProp","otherProps","useStyleEngine","derivedAs","layout","childrenArray","child","_a","jsx","jsxs","Stack","clsx","Spinner","Icon","icon","alt","ariaHidden","internal_iconType","context","iconProps","a11yProps","TelegraphIcon","Text","weight","derivedColor","TelegraphText","Default","leadingIcon","trailingIcon","combinedLeadingIcon","Button"],"mappings":"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"}
1
+ {"version":3,"file":"index.mjs","sources":["../../src/Button/Button.constants.ts","../../src/Button/Button.tsx"],"sourcesContent":["import type { tokens } from \"@telegraph/style-engine\";\nimport type { CssVarProp } from \"@telegraph/style-engine\";\n\n// Styles for controlling the \"border\" on the outline variant\n// of the button. We use a shadow so we don't need apply a border\n// to all other buttons to make them the same height.\nexport type BaseStyleProps = {\n default_buttonShadowColor: keyof typeof tokens.color;\n hover_buttonShadowColor: keyof typeof tokens.color;\n focus_buttonShadowColor: keyof typeof tokens.color;\n active_buttonShadowColor: keyof typeof tokens.color;\n hover_textColor?: keyof typeof tokens.color;\n};\n\nexport const cssVars: Record<keyof BaseStyleProps, CssVarProp> = {\n default_buttonShadowColor: {\n cssVar: \"--box-shadow\",\n value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n },\n hover_buttonShadowColor: {\n cssVar: \"--tgph-button-hover-shadow\",\n value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n },\n focus_buttonShadowColor: {\n cssVar: \"--tgph-button-focus-shadow\",\n value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n },\n active_buttonShadowColor: {\n cssVar: \"--tgph-button-active-shadow\",\n value: \"inset 0 0 0 1px var(--tgph-VARIABLE)\",\n },\n hover_textColor: {\n cssVar: \"--tgph-button-hover-text-color\",\n value: \"var(--tgph-VARIABLE)\",\n },\n} as const;\n\nexport const BUTTON_COLOR_MAP = {\n solid: {\n default: {\n backgroundColor: \"gray-12\",\n hover_backgroundColor: \"gray-11\",\n focus_backgroundColor: \"gray-10\",\n active_backgroundColor: \"gray-10\",\n hover_textColor: \"white\",\n },\n accent: {\n backgroundColor: \"accent-9\",\n hover_backgroundColor: \"accent-10\",\n focus_backgroundColor: \"accent-11\",\n active_backgroundColor: \"accent-11\",\n hover_textColor: \"white\",\n },\n red: {\n backgroundColor: \"red-9\",\n hover_backgroundColor: \"red-10\",\n focus_backgroundColor: \"red-11\",\n active_backgroundColor: \"red-11\",\n hover_textColor: \"white\",\n },\n gray: {\n backgroundColor: \"gray-9\",\n hover_backgroundColor: \"gray-10\",\n focus_backgroundColor: \"gray-11\",\n active_backgroundColor: \"gray-11\",\n hover_textColor: \"white\",\n },\n green: {\n backgroundColor: \"green-9\",\n hover_backgroundColor: \"green-10\",\n focus_backgroundColor: \"green-11\",\n active_backgroundColor: \"green-11\",\n hover_textColor: \"white\",\n },\n blue: {\n backgroundColor: \"blue-9\",\n hover_backgroundColor: \"blue-10\",\n focus_backgroundColor: \"blue-11\",\n active_backgroundColor: \"blue-11\",\n hover_textColor: \"white\",\n },\n yellow: {\n backgroundColor: \"yellow-9\",\n hover_backgroundColor: \"yellow-10\",\n focus_backgroundColor: \"yellow-11\",\n active_backgroundColor: \"yellow-11\",\n hover_textColor: \"white\",\n },\n purple: {\n backgroundColor: \"purple-9\",\n hover_backgroundColor: \"purple-10\",\n focus_backgroundColor: \"purple-11\",\n active_backgroundColor: \"purple-11\",\n hover_textColor: \"white\",\n },\n },\n soft: {\n default: {\n backgroundColor: \"gray-3\",\n hover_backgroundColor: \"gray-4\",\n focus_backgroundColor: \"gray-5\",\n active_backgroundColor: \"gray-5\",\n hover_textColor: \"gray-12\",\n },\n gray: {\n backgroundColor: \"gray-3\",\n hover_backgroundColor: \"gray-4\",\n focus_backgroundColor: \"gray-5\",\n active_backgroundColor: \"gray-5\",\n hover_textColor: \"gray-12\",\n },\n red: {\n backgroundColor: \"red-3\",\n hover_backgroundColor: \"red-4\",\n focus_backgroundColor: \"red-5\",\n active_backgroundColor: \"red-5\",\n hover_textColor: \"red-11\",\n },\n accent: {\n backgroundColor: \"accent-3\",\n hover_backgroundColor: \"accent-4\",\n focus_backgroundColor: \"accent-5\",\n active_backgroundColor: \"accent-5\",\n hover_textColor: \"accent-11\",\n },\n green: {\n backgroundColor: \"green-3\",\n hover_backgroundColor: \"green-4\",\n focus_backgroundColor: \"green-5\",\n active_backgroundColor: \"green-5\",\n hover_textColor: \"green-11\",\n },\n blue: {\n backgroundColor: \"blue-3\",\n hover_backgroundColor: \"blue-4\",\n focus_backgroundColor: \"blue-5\",\n active_backgroundColor: \"blue-5\",\n hover_textColor: \"blue-11\",\n },\n yellow: {\n backgroundColor: \"yellow-3\",\n hover_backgroundColor: \"yellow-4\",\n focus_backgroundColor: \"yellow-5\",\n active_backgroundColor: \"yellow-5\",\n hover_textColor: \"yellow-11\",\n },\n purple: {\n backgroundColor: \"purple-3\",\n hover_backgroundColor: \"purple-4\",\n focus_backgroundColor: \"purple-5\",\n active_backgroundColor: \"purple-5\",\n hover_textColor: \"purple-11\",\n },\n },\n outline: {\n default: {\n backgroundColor: \"surface-3\",\n focus_backgroundColor: \"surface-3\",\n hover_backgroundColor: \"gray-2\",\n active_backgroundColor: \"gray-3\",\n default_buttonShadowColor: \"gray-6\",\n hover_buttonShadowColor: \"gray-7\",\n focus_buttonShadowColor: \"gray-8\",\n active_buttonShadowColor: \"gray-8\",\n hover_textColor: \"gray-12\",\n },\n gray: {\n backgroundColor: \"surface-3\",\n focus_backgroundColor: \"surface-3\",\n hover_backgroundColor: \"gray-2\",\n active_backgroundColor: \"gray-3\",\n default_buttonShadowColor: \"gray-6\",\n hover_buttonShadowColor: \"gray-7\",\n focus_buttonShadowColor: \"gray-8\",\n active_buttonShadowColor: \"gray-8\",\n hover_textColor: \"gray-12\",\n },\n red: {\n backgroundColor: \"surface-3\",\n focus_backgroundColor: \"surface-3\",\n hover_backgroundColor: \"red-2\",\n active_backgroundColor: \"red-3\",\n default_buttonShadowColor: \"red-6\",\n hover_buttonShadowColor: \"red-7\",\n focus_buttonShadowColor: \"red-8\",\n active_buttonShadowColor: \"red-8\",\n hover_textColor: \"red-11\",\n },\n accent: {\n backgroundColor: \"surface-3\",\n focus_backgroundColor: \"surface-3\",\n hover_backgroundColor: \"accent-2\",\n active_backgroundColor: \"accent-3\",\n default_buttonShadowColor: \"accent-6\",\n hover_buttonShadowColor: \"accent-7\",\n focus_buttonShadowColor: \"accent-8\",\n active_buttonShadowColor: \"accent-8\",\n hover_textColor: \"accent-11\",\n },\n green: {\n backgroundColor: \"surface-3\",\n focus_backgroundColor: \"surface-3\",\n hover_backgroundColor: \"green-2\",\n active_backgroundColor: \"green-3\",\n default_buttonShadowColor: \"green-6\",\n hover_buttonShadowColor: \"green-7\",\n focus_buttonShadowColor: \"green-8\",\n active_buttonShadowColor: \"green-8\",\n hover_textColor: \"green-11\",\n },\n blue: {\n backgroundColor: \"surface-3\",\n focus_backgroundColor: \"surface-3\",\n hover_backgroundColor: \"blue-2\",\n active_backgroundColor: \"blue-3\",\n default_buttonShadowColor: \"blue-6\",\n hover_buttonShadowColor: \"blue-7\",\n focus_buttonShadowColor: \"blue-8\",\n active_buttonShadowColor: \"blue-8\",\n hover_textColor: \"blue-11\",\n },\n yellow: {\n backgroundColor: \"surface-3\",\n focus_backgroundColor: \"surface-3\",\n hover_backgroundColor: \"yellow-2\",\n active_backgroundColor: \"yellow-3\",\n default_buttonShadowColor: \"yellow-6\",\n hover_buttonShadowColor: \"yellow-7\",\n focus_buttonShadowColor: \"yellow-8\",\n active_buttonShadowColor: \"yellow-8\",\n hover_textColor: \"yellow-11\",\n },\n purple: {\n backgroundColor: \"surface-3\",\n focus_backgroundColor: \"surface-3\",\n hover_backgroundColor: \"purple-2\",\n active_backgroundColor: \"purple-3\",\n default_buttonShadowColor: \"purple-6\",\n hover_buttonShadowColor: \"purple-7\",\n focus_buttonShadowColor: \"purple-8\",\n active_buttonShadowColor: \"purple-8\",\n hover_textColor: \"purple-11\",\n },\n },\n ghost: {\n default: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"gray-3\",\n focus_backgroundColor: \"gray-4\",\n active_backgroundColor: \"gray-4\",\n hover_textColor: \"gray-12\",\n },\n gray: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"gray-3\",\n focus_backgroundColor: \"gray-4\",\n active_backgroundColor: \"gray-4\",\n hover_textColor: \"gray-12\",\n },\n red: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"red-3\",\n focus_backgroundColor: \"red-4\",\n active_backgroundColor: \"red-4\",\n hover_textColor: \"red-11\",\n },\n accent: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"accent-3\",\n focus_backgroundColor: \"accent-4\",\n active_backgroundColor: \"accent-4\",\n hover_textColor: \"accent-11\",\n },\n green: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"green-3\",\n focus_backgroundColor: \"green-4\",\n active_backgroundColor: \"green-4\",\n hover_textColor: \"green-11\",\n },\n blue: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"blue-3\",\n focus_backgroundColor: \"blue-4\",\n active_backgroundColor: \"blue-4\",\n hover_textColor: \"blue-11\",\n },\n yellow: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"yellow-3\",\n focus_backgroundColor: \"yellow-4\",\n active_backgroundColor: \"yellow-4\",\n hover_textColor: \"yellow-11\",\n },\n purple: {\n backgroundColor: \"transparent\",\n hover_backgroundColor: \"purple-3\",\n focus_backgroundColor: \"purple-4\",\n active_backgroundColor: \"purple-4\",\n hover_textColor: \"purple-11\",\n },\n },\n} as const;\n\nexport const BUTTON_SIZE_MAP = {\n default: {\n \"0\": {\n w: \"auto\",\n h: \"5\",\n gap: \"0_5\",\n px: \"1\",\n rounded: \"2\",\n },\n \"1\": {\n w: \"auto\",\n h: \"6\",\n gap: \"1\",\n px: \"1_5\",\n rounded: \"2\",\n },\n \"2\": {\n w: \"auto\",\n h: \"8\",\n gap: \"1_5\",\n px: \"2\",\n rounded: \"2\",\n },\n \"3\": {\n w: \"auto\",\n h: \"10\",\n gap: \"2\",\n px: \"3\",\n rounded: \"3\",\n },\n },\n \"icon-only\": {\n \"0\": {\n w: \"5\",\n h: \"5\",\n gap: \"0\",\n px: \"0\",\n rounded: \"2\",\n },\n \"1\": {\n w: \"6\",\n h: \"6\",\n gap: \"0\",\n px: \"0\",\n rounded: \"2\",\n },\n \"2\": {\n w: \"8\",\n h: \"8\",\n gap: \"0\",\n px: \"0\",\n rounded: \"2\",\n },\n \"3\": {\n w: \"10\",\n h: \"10\",\n gap: \"0\",\n px: \"0\",\n rounded: \"3\",\n },\n },\n} as const;\n\nexport const TEXT_SIZE_MAP = {\n \"0\": \"0\",\n \"1\": \"1\",\n \"2\": \"2\",\n \"3\": \"3\",\n} as const;\n\nexport const TEXT_COLOR_MAP = {\n solid: {\n default: \"white\",\n gray: \"white\",\n red: \"white\",\n accent: \"white\",\n green: \"white\",\n blue: \"white\",\n yellow: \"white\",\n purple: \"white\",\n disabled: \"disabled\",\n },\n soft: {\n default: \"default\",\n gray: \"gray\",\n red: \"red\",\n accent: \"accent\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n purple: \"purple\",\n disabled: \"disabled\",\n },\n outline: {\n default: \"default\",\n gray: \"gray\",\n red: \"red\",\n accent: \"accent\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n purple: \"purple\",\n disabled: \"disabled\",\n },\n ghost: {\n default: \"default\",\n gray: \"gray\",\n red: \"red\",\n accent: \"accent\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n purple: \"purple\",\n disabled: \"disabled\",\n },\n} as const;\n\nexport const ICON_SIZE_MAP = {\n \"0\": \"0\",\n \"1\": \"1\",\n \"2\": \"2\",\n \"3\": \"3\",\n} as const;\n\nexport const ICON_COLOR_MAP = {\n solid: {\n default: \"white\",\n gray: \"white\",\n red: \"white\",\n accent: \"white\",\n green: \"white\",\n blue: \"white\",\n yellow: \"white\",\n purple: \"white\",\n disabled: \"disabled\",\n },\n soft: {\n default: \"default\",\n accent: \"accent\",\n gray: \"gray\",\n red: \"red\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n purple: \"purple\",\n disabled: \"disabled\",\n },\n outline: {\n default: \"default\",\n accent: \"accent\",\n gray: \"gray\",\n red: \"red\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n purple: \"purple\",\n disabled: \"disabled\",\n },\n ghost: {\n default: \"gray\",\n accent: \"accent\",\n gray: \"gray\",\n red: \"red\",\n green: \"green\",\n blue: \"blue\",\n yellow: \"yellow\",\n purple: \"purple\",\n disabled: \"disabled\",\n },\n} as const;\n\nexport const ICON_VARIANT_MAP = {\n default: \"secondary\",\n \"icon-only\": \"primary\",\n} as const;\n\nexport type ButtonVariant = keyof typeof BUTTON_COLOR_MAP;\nexport type ButtonColor = keyof (typeof BUTTON_COLOR_MAP)[ButtonVariant];\nexport type ButtonSize = keyof (typeof BUTTON_SIZE_MAP)[\"default\"];\n","import {\n type PolymorphicProps,\n type PolymorphicPropsWithTgphRef,\n RemappedOmit,\n type Required,\n type TgphComponentProps,\n type TgphElement,\n useDeterminateState,\n} from \"@telegraph/helpers\";\nimport { Spinner, Icon as TelegraphIcon } from \"@telegraph/icon\";\nimport { Stack } from \"@telegraph/layout\";\nimport { useStyleEngine } from \"@telegraph/style-engine\";\nimport { Text as TelegraphText } from \"@telegraph/typography\";\nimport clsx from \"clsx\";\nimport React from \"react\";\n\nimport {\n BUTTON_COLOR_MAP,\n BUTTON_SIZE_MAP,\n type ButtonColor,\n type ButtonSize,\n type ButtonVariant,\n ICON_COLOR_MAP,\n ICON_SIZE_MAP,\n ICON_VARIANT_MAP,\n TEXT_COLOR_MAP,\n TEXT_SIZE_MAP,\n cssVars,\n} from \"./Button.constants\";\n\ntype RootBaseProps = {\n variant?: ButtonVariant;\n color?: ButtonColor;\n size?: ButtonSize;\n state?: \"default\" | \"loading\";\n active?: boolean;\n};\n\ntype InternalProps = {\n layout: \"default\" | \"icon-only\";\n color: Required<RootBaseProps>[\"color\"];\n state: Required<RootBaseProps>[\"state\"] | \"disabled\" | \"active\";\n};\n\nexport type RootProps<T extends TgphElement = \"button\"> = Omit<\n TgphComponentProps<typeof Stack>,\n \"tgphRef\" | \"as\" | \"onClick\"\n> &\n Omit<PolymorphicPropsWithTgphRef<T, HTMLButtonElement>, \"onClick\"> &\n RootBaseProps & {\n onClick?(event: React.SyntheticEvent | Event): void;\n };\n\nconst ButtonContext = React.createContext<\n Required<Omit<RootBaseProps, \"color\" | \"as\" | \"state\"> & InternalProps>\n>({\n variant: \"solid\",\n size: \"2\",\n color: \"default\",\n state: \"default\",\n layout: \"default\",\n active: false,\n});\n\ntype DeriveStateParams = {\n state: Required<RootBaseProps>[\"state\"];\n disabled?: boolean;\n active?: boolean;\n};\n\n// Derive the state of the button based on the html button props in\nconst deriveState = (params: DeriveStateParams): InternalProps[\"state\"] => {\n if (params.disabled) return \"disabled\";\n if (params.state === \"loading\") return \"loading\";\n if (params.active) return \"active\";\n return params.state;\n};\n\nconst Root = <T extends TgphElement = \"button\">({\n as,\n variant = \"solid\",\n size = \"2\",\n color = \"default\",\n state: stateProp = \"default\",\n active = false,\n type = \"button\",\n disabled,\n className,\n children,\n style,\n ...props\n}: RootProps<T>) => {\n const derivedState = deriveState({ state: stateProp, disabled, active });\n const state = useDeterminateState<DefaultProps<T>[\"state\"]>({\n value: derivedState,\n determinateValue: \"loading\",\n minDurationMs: 1200,\n });\n\n const { styleProp, otherProps } = useStyleEngine({\n props: {\n ...BUTTON_COLOR_MAP[variant][color],\n style,\n },\n cssVars,\n });\n\n // If the button is in a disabled state, we don't want any clicks to fire.\n // To do this reliably, we convert the element back to a button if it is\n // disabled. We do this so we can use the native button element's disabled\n // state to prevent clicks.\n // We also want to trivially pass in \"button\" if no \"as\" prop is provided\n const derivedAs = disabled || !as ? \"button\" : as;\n\n const layout = React.useMemo<InternalProps[\"layout\"]>(() => {\n const childrenArray = React.Children.toArray(children);\n if (childrenArray?.length === 1 && React.isValidElement(childrenArray[0])) {\n const child = childrenArray[0] as\n | React.ReactComponentElement<typeof Icon>\n | {\n props: {\n icon: undefined;\n };\n };\n if (child?.props?.icon) {\n return \"icon-only\";\n }\n }\n return \"default\";\n }, [children]);\n\n return (\n <ButtonContext.Provider\n value={{ variant, size, color, state, layout, active }}\n >\n <Stack\n as={derivedAs}\n className={clsx(\"tgph-button\", className)}\n display=\"inline-flex\"\n align=\"center\"\n justify=\"center\"\n {...BUTTON_SIZE_MAP[layout][size]}\n style={styleProp}\n data-tgph-button\n data-tgph-button-layout={layout}\n data-tgph-button-state={state}\n data-tgph-button-variant={variant}\n data-tgph-button-color={color}\n disabled={state === \"disabled\" || state === \"loading\"}\n {...(derivedAs === \"button\" && { type })} // Only pass in type if we are a button\n {...otherProps}\n {...props}\n >\n {state === \"loading\" && (\n <Spinner\n size={ICON_SIZE_MAP[size]}\n color={ICON_COLOR_MAP[variant][color]}\n variant={ICON_VARIANT_MAP[layout]}\n data-tgph-button-loading-icon\n />\n )}\n {children}\n </Stack>\n </ButtonContext.Provider>\n );\n};\n\nexport type IconProps<T extends TgphElement = \"span\"> = TgphComponentProps<\n typeof TelegraphIcon<T>\n> & {\n internal_iconType?: \"leading\" | \"trailing\";\n};\n\nconst Icon = <T extends TgphElement = \"span\">({\n size,\n color,\n variant,\n icon,\n alt,\n \"aria-hidden\": ariaHidden,\n internal_iconType,\n ...props\n}: IconProps<T>) => {\n const context = React.useContext(ButtonContext);\n\n const iconProps = {\n size: size ?? ICON_SIZE_MAP[context.size],\n color:\n color ??\n ICON_COLOR_MAP[context.variant][\n context.state === \"disabled\" ? \"disabled\" : context.color\n ],\n variant: variant ?? ICON_VARIANT_MAP[context.layout],\n };\n\n const a11yProps = !alt ? { \"aria-hidden\": ariaHidden } : { alt };\n\n // If the button is set to loading and this icon is identified as leading,\n // we don't want to render this icon and instead the loading icon which\n // is managed in the root component. We choose to render the loading icon\n // in the root component so that it displays when there is no icon already\n // inside of the button.\n if (context.state === \"loading\" && internal_iconType === \"leading\") {\n return null;\n }\n\n return (\n <TelegraphIcon\n icon={icon}\n data-button-icon\n data-button-icon-color={iconProps.color}\n {...a11yProps}\n {...iconProps}\n {...props}\n />\n );\n};\n\nexport type TextProps<T extends TgphElement = \"span\"> = RemappedOmit<\n TgphComponentProps<typeof TelegraphText<T>>,\n \"as\"\n> & {\n as?: T;\n};\n\nconst Text = <T extends TgphElement = \"span\">({\n as,\n color,\n size,\n weight = \"medium\",\n style,\n ...props\n}: TextProps<T>) => {\n const context = React.useContext(ButtonContext);\n const derivedColor =\n color ??\n TEXT_COLOR_MAP[context.variant][\n context.state === \"disabled\" ? \"disabled\" : context.color\n ];\n return (\n <TelegraphText\n as={(as || \"span\") as T}\n color={derivedColor}\n size={size ?? TEXT_SIZE_MAP[context.size]}\n weight={weight}\n internal_optionalAs={true}\n data-button-text\n data-button-text-color={derivedColor}\n style={{\n textDecoration: \"none\",\n whiteSpace: \"nowrap\",\n ...style,\n }}\n {...props}\n />\n );\n};\n\ntype DefaultIconProps = React.ComponentProps<typeof Icon>;\n\ntype BaseDefaultProps =\n | {\n leadingIcon?: DefaultIconProps;\n trailingIcon?: DefaultIconProps;\n icon?: never;\n }\n | {\n icon?: DefaultIconProps;\n leadingIcon?: never;\n trailingIcon?: never;\n };\nexport type DefaultProps<T extends TgphElement = \"button\"> = Omit<\n PolymorphicProps<T>,\n \"onClick\"\n> &\n TgphComponentProps<typeof Root> &\n BaseDefaultProps & {\n onClick?(event: React.SyntheticEvent | Event): void;\n };\n\nconst Default = <T extends TgphElement = \"button\">({\n leadingIcon,\n trailingIcon,\n icon,\n children,\n ...props\n}: DefaultProps<T>) => {\n const combinedLeadingIcon = leadingIcon || icon;\n return (\n <Root {...props}>\n {combinedLeadingIcon && (\n <Icon {...combinedLeadingIcon} internal_iconType=\"leading\" />\n )}\n {children && <Text>{children}</Text>}\n {trailingIcon && <Icon {...trailingIcon} internal_iconType=\"trailing\" />}\n </Root>\n );\n};\n\nObject.assign(Default, {\n Root,\n Icon,\n Text,\n});\n\nconst Button = Default as typeof Default & {\n Root: typeof Root;\n Icon: typeof Icon;\n Text: typeof Text;\n};\n\nexport { Button };\n"],"names":["cssVars","BUTTON_COLOR_MAP","BUTTON_SIZE_MAP","TEXT_SIZE_MAP","TEXT_COLOR_MAP","ICON_SIZE_MAP","ICON_COLOR_MAP","ICON_VARIANT_MAP","ButtonContext","React","deriveState","params","Root","as","variant","size","color","stateProp","active","type","disabled","className","children","style","props","derivedState","state","useDeterminateState","styleProp","otherProps","useStyleEngine","derivedAs","layout","childrenArray","child","_a","jsx","jsxs","Stack","clsx","Spinner","Icon","icon","alt","ariaHidden","internal_iconType","context","iconProps","a11yProps","TelegraphIcon","Text","weight","derivedColor","TelegraphText","Default","leadingIcon","trailingIcon","combinedLeadingIcon","Button"],"mappings":"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"}
package/dist/types/Button/Button.constants.d.ts CHANGED
@@ -126,8 +126,8 @@ export declare const BUTTON_COLOR_MAP: {
126
126
  };
127
127
  readonly outline: {
128
128
  readonly default: {
129
- readonly backgroundColor: "surface-1";
130
- readonly focus_backgroundColor: "surface-1";
129
+ readonly backgroundColor: "surface-3";
130
+ readonly focus_backgroundColor: "surface-3";
131
131
  readonly hover_backgroundColor: "gray-2";
132
132
  readonly active_backgroundColor: "gray-3";
133
133
  readonly default_buttonShadowColor: "gray-6";
@@ -137,8 +137,8 @@ export declare const BUTTON_COLOR_MAP: {
137
137
  readonly hover_textColor: "gray-12";
138
138
  };
139
139
  readonly gray: {
140
- readonly backgroundColor: "surface-1";
141
- readonly focus_backgroundColor: "surface-1";
140
+ readonly backgroundColor: "surface-3";
141
+ readonly focus_backgroundColor: "surface-3";
142
142
  readonly hover_backgroundColor: "gray-2";
143
143
  readonly active_backgroundColor: "gray-3";
144
144
  readonly default_buttonShadowColor: "gray-6";
@@ -148,8 +148,8 @@ export declare const BUTTON_COLOR_MAP: {
148
148
  readonly hover_textColor: "gray-12";
149
149
  };
150
150
  readonly red: {
151
- readonly backgroundColor: "surface-1";
152
- readonly focus_backgroundColor: "surface-1";
151
+ readonly backgroundColor: "surface-3";
152
+ readonly focus_backgroundColor: "surface-3";
153
153
  readonly hover_backgroundColor: "red-2";
154
154
  readonly active_backgroundColor: "red-3";
155
155
  readonly default_buttonShadowColor: "red-6";
@@ -159,8 +159,8 @@ export declare const BUTTON_COLOR_MAP: {
159
159
  readonly hover_textColor: "red-11";
160
160
  };
161
161
  readonly accent: {
162
- readonly backgroundColor: "surface-1";
163
- readonly focus_backgroundColor: "surface-1";
162
+ readonly backgroundColor: "surface-3";
163
+ readonly focus_backgroundColor: "surface-3";
164
164
  readonly hover_backgroundColor: "accent-2";
165
165
  readonly active_backgroundColor: "accent-3";
166
166
  readonly default_buttonShadowColor: "accent-6";
@@ -170,8 +170,8 @@ export declare const BUTTON_COLOR_MAP: {
170
170
  readonly hover_textColor: "accent-11";
171
171
  };
172
172
  readonly green: {
173
- readonly backgroundColor: "surface-1";
174
- readonly focus_backgroundColor: "surface-1";
173
+ readonly backgroundColor: "surface-3";
174
+ readonly focus_backgroundColor: "surface-3";
175
175
  readonly hover_backgroundColor: "green-2";
176
176
  readonly active_backgroundColor: "green-3";
177
177
  readonly default_buttonShadowColor: "green-6";
@@ -181,8 +181,8 @@ export declare const BUTTON_COLOR_MAP: {
181
181
  readonly hover_textColor: "green-11";
182
182
  };
183
183
  readonly blue: {
184
- readonly backgroundColor: "surface-1";
185
- readonly focus_backgroundColor: "surface-1";
184
+ readonly backgroundColor: "surface-3";
185
+ readonly focus_backgroundColor: "surface-3";
186
186
  readonly hover_backgroundColor: "blue-2";
187
187
  readonly active_backgroundColor: "blue-3";
188
188
  readonly default_buttonShadowColor: "blue-6";
@@ -192,8 +192,8 @@ export declare const BUTTON_COLOR_MAP: {
192
192
  readonly hover_textColor: "blue-11";
193
193
  };
194
194
  readonly yellow: {
195
- readonly backgroundColor: "surface-1";
196
- readonly focus_backgroundColor: "surface-1";
195
+ readonly backgroundColor: "surface-3";
196
+ readonly focus_backgroundColor: "surface-3";
197
197
  readonly hover_backgroundColor: "yellow-2";
198
198
  readonly active_backgroundColor: "yellow-3";
199
199
  readonly default_buttonShadowColor: "yellow-6";
@@ -203,8 +203,8 @@ export declare const BUTTON_COLOR_MAP: {
203
203
  readonly hover_textColor: "yellow-11";
204
204
  };
205
205
  readonly purple: {
206
- readonly backgroundColor: "surface-1";
207
- readonly focus_backgroundColor: "surface-1";
206
+ readonly backgroundColor: "surface-3";
207
+ readonly focus_backgroundColor: "surface-3";
208
208
  readonly hover_backgroundColor: "purple-2";
209
209
  readonly active_backgroundColor: "purple-3";
210
210
  readonly default_buttonShadowColor: "purple-6";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@telegraph/button",
3
- "version": "0.4.0",
3
+ "version": "0.4.1",
4
4
  "description": "Button component in Telegraph",
5
5
  "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/button",
6
6
  "author": "@knocklabs",
@@ -47,7 +47,7 @@
47
47
  "@telegraph/prettier-config": "^0.0.7",
48
48
  "@telegraph/vite-config": "^0.0.15",
49
49
  "@types/react": "^19.2.9",
50
- "eslint": "^8.56.0",
50
+ "eslint": "^10.0.2",
51
51
  "react": "^19.2.4",
52
52
  "react-dom": "^19.2.4",
53
53
  "typescript": "^5.9.3",