@telegraph/button 0.3.2 → 0.3.3

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 (8) 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 +44 -28
  5. package/dist/esm/index.mjs.map +1 -1
  6. package/dist/types/Button/Button.constants.d.ts +16 -0
  7. package/dist/types/Button/Button.constants.d.ts.map +1 -1
  8. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @telegraph/button
2
2
 
3
+ ## 0.3.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#643](https://github.com/knocklabs/telegraph/pull/643) [`0c44b7c`](https://github.com/knocklabs/telegraph/commit/0c44b7ce809b4d5c37ea13ef31d95197f8ad0777) Thanks [@kylemcd](https://github.com/kylemcd)! - fix: outline button has no bg color when focused
8
+
3
9
  ## 0.3.2
4
10
 
5
11
  ### Patch 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",hover_backgroundColor:"gray-2",default_buttonShadowColor:"gray-6",hover_buttonShadowColor:"gray-7",focus_buttonShadowColor:"gray-8",active_buttonShadowColor:"gray-8",hover_textColor:"gray-12"},gray:{backgroundColor:"surface-1",hover_backgroundColor:"gray-2",default_buttonShadowColor:"gray-6",hover_buttonShadowColor:"gray-7",focus_buttonShadowColor:"gray-8",active_buttonShadowColor:"gray-8",hover_textColor:"gray-12"},red:{backgroundColor:"surface-1",hover_backgroundColor:"red-2",default_buttonShadowColor:"red-6",hover_buttonShadowColor:"red-7",focus_buttonShadowColor:"red-8",active_buttonShadowColor:"red-8",hover_textColor:"red-11"},accent:{backgroundColor:"surface-1",hover_backgroundColor:"accent-2",default_buttonShadowColor:"accent-6",hover_buttonShadowColor:"accent-7",focus_buttonShadowColor:"accent-8",active_buttonShadowColor:"accent-8",hover_textColor:"accent-11"},green:{backgroundColor:"surface-1",hover_backgroundColor:"green-2",default_buttonShadowColor:"green-6",hover_buttonShadowColor:"green-7",focus_buttonShadowColor:"green-8",active_buttonShadowColor:"green-8",hover_textColor:"green-11"},blue:{backgroundColor:"surface-1",hover_backgroundColor:"blue-2",default_buttonShadowColor:"blue-6",hover_buttonShadowColor:"blue-7",focus_buttonShadowColor:"blue-8",active_buttonShadowColor:"blue-8",hover_textColor:"blue-11"},yellow:{backgroundColor:"surface-1",hover_backgroundColor:"yellow-2",default_buttonShadowColor:"yellow-6",hover_buttonShadowColor:"yellow-7",focus_buttonShadowColor:"yellow-8",active_buttonShadowColor:"yellow-8",hover_textColor:"yellow-11"},purple:{backgroundColor:"surface-1",hover_backgroundColor:"purple-2",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"},v=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:n="default",active:a=!1,type:u="button",disabled:d,className:c,children:g,style:h,...V})=>{const j=Z({state:n,disabled:d,active:a}),s=P.useDeterminateState({value:j,determinateValue:"loading",minDurationMs:1200}),{styleProp:E,otherProps:O}=B.useStyleEngine({props:{...q[r][e],style:h},cssVars:L}),y=d||!o?"button":o,i=b.useMemo(()=>{var k;const C=b.Children.toArray(g);if((C==null?void 0:C.length)===1&&b.isValidElement(C[0])){const _=C[0];if((k=_==null?void 0:_.props)!=null&&k.icon)return"icon-only"}return"default"},[g]);return l.jsx(v.Provider,{value:{variant:r,size:t,color:e,state:s,layout:i,active:a},children:l.jsxs(R.Stack,{as:y,className:m("tgph-button",c),display:"inline-flex",align:"center",justify:"center",...N[i][t],style:E,"data-tgph-button":!0,"data-tgph-button-layout":i,"data-tgph-button-state":s,"data-tgph-button-variant":r,"data-tgph-button-color":e,disabled:s==="disabled"||s==="loading",...y==="button"&&{type:u},...O,...V,children:[s==="loading"&&l.jsx(w.Spinner,{size:f[t],color:x[r][e],variant:S[i],"data-tgph-button-loading-icon":!0}),g]})})},p=({size:o,color:r,variant:t,icon:e,alt:n,"aria-hidden":a,internal_iconType:u,...d})=>{const c=b.useContext(v),g={size:o??f[c.size],color:r??x[c.variant][c.state==="disabled"?"disabled":c.color],variant:t??S[c.layout]},h=n?{alt:n}:{"aria-hidden":a};return c.state==="loading"&&u==="leading"?null:l.jsx(w.Icon,{icon:e,"data-button-icon":!0,"data-button-icon-color":g.color,...h,...g,...d})},I=({as:o,color:r,size:t,weight:e="medium",style:n,...a})=>{const u=b.useContext(v),d=r??D[u.variant][u.state==="disabled"?"disabled":u.color];return l.jsx(M.Text,{as:o||"span",color:d,size:t??z[u.size],weight:e,internal_optionalAs:!0,"data-button-text":!0,"data-button-text-color":d,style:{textDecoration:"none",whiteSpace:"nowrap",...n},...a})},T=({leadingIcon:o,trailingIcon:r,icon:t,children:e,...n})=>{const a=o||t;return l.jsxs(A,{...n,children:[a&&l.jsx(p,{...a,internal_iconType:"leading"}),e&&l.jsx(I,{children:e}),r&&l.jsx(p,{...r,internal_iconType:"trailing"})]})};Object.assign(T,{Root:A,Icon:p,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-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;
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 hover_backgroundColor: \"gray-2\",\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 hover_backgroundColor: \"gray-2\",\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 hover_backgroundColor: \"red-2\",\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 hover_backgroundColor: \"accent-2\",\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 hover_backgroundColor: \"green-2\",\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 hover_backgroundColor: \"blue-2\",\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 hover_backgroundColor: \"yellow-2\",\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 hover_backgroundColor: \"purple-2\",\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\ntype RootProps<T extends TgphElement> = Omit<\n TgphComponentProps<typeof Stack>,\n \"tgphRef\"\n> &\n PolymorphicPropsWithTgphRef<T, HTMLButtonElement> &\n RootBaseProps;\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>({\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\ntype IconProps<T extends TgphElement> = TgphComponentProps<\n typeof TelegraphIcon<T>\n> & {\n internal_iconType?: \"leading\" | \"trailing\";\n};\n\nconst Icon = <T extends TgphElement>({\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\ntype TextProps<T extends TgphElement> = RemappedOmit<\n TgphComponentProps<typeof TelegraphText<T>>,\n \"as\"\n> & {\n as?: T;\n};\n\nconst Text = <T extends TgphElement>({\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 };\ntype DefaultProps<T extends TgphElement> = PolymorphicProps<T> &\n TgphComponentProps<typeof Root> &\n BaseDefaultProps;\n\nconst Default = <T extends TgphElement>({\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-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\ntype RootProps<T extends TgphElement> = Omit<\n TgphComponentProps<typeof Stack>,\n \"tgphRef\"\n> &\n PolymorphicPropsWithTgphRef<T, HTMLButtonElement> &\n RootBaseProps;\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>({\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\ntype IconProps<T extends TgphElement> = TgphComponentProps<\n typeof TelegraphIcon<T>\n> & {\n internal_iconType?: \"leading\" | \"trailing\";\n};\n\nconst Icon = <T extends TgphElement>({\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\ntype TextProps<T extends TgphElement> = RemappedOmit<\n TgphComponentProps<typeof TelegraphText<T>>,\n \"as\"\n> & {\n as?: T;\n};\n\nconst Text = <T extends TgphElement>({\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 };\ntype DefaultProps<T extends TgphElement> = PolymorphicProps<T> &\n TgphComponentProps<typeof Root> &\n BaseDefaultProps;\n\nconst Default = <T extends TgphElement>({\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/esm/index.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { jsxs as w, jsx as d } from "react/jsx-runtime";
1
+ import { jsxs as f, jsx as d } from "react/jsx-runtime";
2
2
  import { useDeterminateState as P } from "@telegraph/helpers";
3
3
  import { Icon as R, Spinner as B } from "@telegraph/icon";
4
4
  import { Stack as L } from "@telegraph/layout";
@@ -147,7 +147,9 @@ const z = {
147
147
  outline: {
148
148
  default: {
149
149
  backgroundColor: "surface-1",
150
+ focus_backgroundColor: "surface-1",
150
151
  hover_backgroundColor: "gray-2",
152
+ active_backgroundColor: "gray-3",
151
153
  default_buttonShadowColor: "gray-6",
152
154
  hover_buttonShadowColor: "gray-7",
153
155
  focus_buttonShadowColor: "gray-8",
@@ -156,7 +158,9 @@ const z = {
156
158
  },
157
159
  gray: {
158
160
  backgroundColor: "surface-1",
161
+ focus_backgroundColor: "surface-1",
159
162
  hover_backgroundColor: "gray-2",
163
+ active_backgroundColor: "gray-3",
160
164
  default_buttonShadowColor: "gray-6",
161
165
  hover_buttonShadowColor: "gray-7",
162
166
  focus_buttonShadowColor: "gray-8",
@@ -165,7 +169,9 @@ const z = {
165
169
  },
166
170
  red: {
167
171
  backgroundColor: "surface-1",
172
+ focus_backgroundColor: "surface-1",
168
173
  hover_backgroundColor: "red-2",
174
+ active_backgroundColor: "red-3",
169
175
  default_buttonShadowColor: "red-6",
170
176
  hover_buttonShadowColor: "red-7",
171
177
  focus_buttonShadowColor: "red-8",
@@ -174,7 +180,9 @@ const z = {
174
180
  },
175
181
  accent: {
176
182
  backgroundColor: "surface-1",
183
+ focus_backgroundColor: "surface-1",
177
184
  hover_backgroundColor: "accent-2",
185
+ active_backgroundColor: "accent-3",
178
186
  default_buttonShadowColor: "accent-6",
179
187
  hover_buttonShadowColor: "accent-7",
180
188
  focus_buttonShadowColor: "accent-8",
@@ -183,7 +191,9 @@ const z = {
183
191
  },
184
192
  green: {
185
193
  backgroundColor: "surface-1",
194
+ focus_backgroundColor: "surface-1",
186
195
  hover_backgroundColor: "green-2",
196
+ active_backgroundColor: "green-3",
187
197
  default_buttonShadowColor: "green-6",
188
198
  hover_buttonShadowColor: "green-7",
189
199
  focus_buttonShadowColor: "green-8",
@@ -192,7 +202,9 @@ const z = {
192
202
  },
193
203
  blue: {
194
204
  backgroundColor: "surface-1",
205
+ focus_backgroundColor: "surface-1",
195
206
  hover_backgroundColor: "blue-2",
207
+ active_backgroundColor: "blue-3",
196
208
  default_buttonShadowColor: "blue-6",
197
209
  hover_buttonShadowColor: "blue-7",
198
210
  focus_buttonShadowColor: "blue-8",
@@ -201,7 +213,9 @@ const z = {
201
213
  },
202
214
  yellow: {
203
215
  backgroundColor: "surface-1",
216
+ focus_backgroundColor: "surface-1",
204
217
  hover_backgroundColor: "yellow-2",
218
+ active_backgroundColor: "yellow-3",
205
219
  default_buttonShadowColor: "yellow-6",
206
220
  hover_buttonShadowColor: "yellow-7",
207
221
  focus_buttonShadowColor: "yellow-8",
@@ -210,7 +224,9 @@ const z = {
210
224
  },
211
225
  purple: {
212
226
  backgroundColor: "surface-1",
227
+ focus_backgroundColor: "surface-1",
213
228
  hover_backgroundColor: "purple-2",
229
+ active_backgroundColor: "purple-3",
214
230
  default_buttonShadowColor: "purple-6",
215
231
  hover_buttonShadowColor: "purple-7",
216
232
  focus_buttonShadowColor: "purple-8",
@@ -387,7 +403,7 @@ const z = {
387
403
  purple: "purple",
388
404
  disabled: "disabled"
389
405
  }
390
- }, f = {
406
+ }, w = {
391
407
  0: "0",
392
408
  1: "1",
393
409
  2: "2",
@@ -454,11 +470,11 @@ const z = {
454
470
  color: e = "default",
455
471
  state: l = "default",
456
472
  active: a = !1,
457
- type: n = "button",
473
+ type: u = "button",
458
474
  disabled: c,
459
- className: u,
475
+ className: n,
460
476
  children: g,
461
- style: _,
477
+ style: i,
462
478
  ...T
463
479
  }) => {
464
480
  const V = $({ state: l, disabled: c, active: a }), C = P({
@@ -468,15 +484,15 @@ const z = {
468
484
  }), { styleProp: E, otherProps: O } = M({
469
485
  props: {
470
486
  ...D[r][e],
471
- style: _
487
+ style: i
472
488
  },
473
489
  cssVars: z
474
- }), k = c || !o ? "button" : o, h = b.useMemo(() => {
490
+ }), k = c || !o ? "button" : o, _ = b.useMemo(() => {
475
491
  var y;
476
492
  const s = b.Children.toArray(g);
477
493
  if ((s == null ? void 0 : s.length) === 1 && b.isValidElement(s[0])) {
478
- const i = s[0];
479
- if ((y = i == null ? void 0 : i.props) != null && y.icon)
494
+ const h = s[0];
495
+ if ((y = h == null ? void 0 : h.props) != null && y.icon)
480
496
  return "icon-only";
481
497
  }
482
498
  return "default";
@@ -484,33 +500,33 @@ const z = {
484
500
  return /* @__PURE__ */ d(
485
501
  v.Provider,
486
502
  {
487
- value: { variant: r, size: t, color: e, state: C, layout: h, active: a },
488
- children: /* @__PURE__ */ w(
503
+ value: { variant: r, size: t, color: e, state: C, layout: _, active: a },
504
+ children: /* @__PURE__ */ f(
489
505
  L,
490
506
  {
491
507
  as: k,
492
- className: j("tgph-button", u),
508
+ className: j("tgph-button", n),
493
509
  display: "inline-flex",
494
510
  align: "center",
495
511
  justify: "center",
496
- ...Z[h][t],
512
+ ...Z[_][t],
497
513
  style: E,
498
514
  "data-tgph-button": !0,
499
- "data-tgph-button-layout": h,
515
+ "data-tgph-button-layout": _,
500
516
  "data-tgph-button-state": C,
501
517
  "data-tgph-button-variant": r,
502
518
  "data-tgph-button-color": e,
503
519
  disabled: C === "disabled" || C === "loading",
504
- ...k === "button" && { type: n },
520
+ ...k === "button" && { type: u },
505
521
  ...O,
506
522
  ...T,
507
523
  children: [
508
524
  C === "loading" && /* @__PURE__ */ d(
509
525
  B,
510
526
  {
511
- size: f[t],
527
+ size: w[t],
512
528
  color: x[r][e],
513
- variant: S[h],
529
+ variant: S[_],
514
530
  "data-tgph-button-loading-icon": !0
515
531
  }
516
532
  ),
@@ -527,21 +543,21 @@ const z = {
527
543
  icon: e,
528
544
  alt: l,
529
545
  "aria-hidden": a,
530
- internal_iconType: n,
546
+ internal_iconType: u,
531
547
  ...c
532
548
  }) => {
533
- const u = b.useContext(v), g = {
534
- size: o ?? f[u.size],
535
- color: r ?? x[u.variant][u.state === "disabled" ? "disabled" : u.color],
536
- variant: t ?? S[u.layout]
537
- }, _ = l ? { alt: l } : { "aria-hidden": a };
538
- return u.state === "loading" && n === "leading" ? null : /* @__PURE__ */ d(
549
+ const n = b.useContext(v), g = {
550
+ size: o ?? w[n.size],
551
+ color: r ?? x[n.variant][n.state === "disabled" ? "disabled" : n.color],
552
+ variant: t ?? S[n.layout]
553
+ }, i = l ? { alt: l } : { "aria-hidden": a };
554
+ return n.state === "loading" && u === "leading" ? null : /* @__PURE__ */ d(
539
555
  R,
540
556
  {
541
557
  icon: e,
542
558
  "data-button-icon": !0,
543
559
  "data-button-icon-color": g.color,
544
- ..._,
560
+ ...i,
545
561
  ...g,
546
562
  ...c
547
563
  }
@@ -554,13 +570,13 @@ const z = {
554
570
  style: l,
555
571
  ...a
556
572
  }) => {
557
- const n = b.useContext(v), c = r ?? X[n.variant][n.state === "disabled" ? "disabled" : n.color];
573
+ const u = b.useContext(v), c = r ?? X[u.variant][u.state === "disabled" ? "disabled" : u.color];
558
574
  return /* @__PURE__ */ d(
559
575
  N,
560
576
  {
561
577
  as: o || "span",
562
578
  color: c,
563
- size: t ?? U[n.size],
579
+ size: t ?? U[u.size],
564
580
  weight: e,
565
581
  internal_optionalAs: !0,
566
582
  "data-button-text": !0,
@@ -581,7 +597,7 @@ const z = {
581
597
  ...l
582
598
  }) => {
583
599
  const a = o || t;
584
- return /* @__PURE__ */ w(m, { ...l, children: [
600
+ return /* @__PURE__ */ f(m, { ...l, children: [
585
601
  a && /* @__PURE__ */ d(p, { ...a, internal_iconType: "leading" }),
586
602
  e && /* @__PURE__ */ d(A, { children: e }),
587
603
  r && /* @__PURE__ */ d(p, { ...r, internal_iconType: "trailing" })
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 hover_backgroundColor: \"gray-2\",\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 hover_backgroundColor: \"gray-2\",\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 hover_backgroundColor: \"red-2\",\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 hover_backgroundColor: \"accent-2\",\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 hover_backgroundColor: \"green-2\",\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 hover_backgroundColor: \"blue-2\",\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 hover_backgroundColor: \"yellow-2\",\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 hover_backgroundColor: \"purple-2\",\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\ntype RootProps<T extends TgphElement> = Omit<\n TgphComponentProps<typeof Stack>,\n \"tgphRef\"\n> &\n PolymorphicPropsWithTgphRef<T, HTMLButtonElement> &\n RootBaseProps;\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>({\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\ntype IconProps<T extends TgphElement> = TgphComponentProps<\n typeof TelegraphIcon<T>\n> & {\n internal_iconType?: \"leading\" | \"trailing\";\n};\n\nconst Icon = <T extends TgphElement>({\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\ntype TextProps<T extends TgphElement> = RemappedOmit<\n TgphComponentProps<typeof TelegraphText<T>>,\n \"as\"\n> & {\n as?: T;\n};\n\nconst Text = <T extends TgphElement>({\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 };\ntype DefaultProps<T extends TgphElement> = PolymorphicProps<T> &\n TgphComponentProps<typeof Root> &\n BaseDefaultProps;\n\nconst Default = <T extends TgphElement>({\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-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\ntype RootProps<T extends TgphElement> = Omit<\n TgphComponentProps<typeof Stack>,\n \"tgphRef\"\n> &\n PolymorphicPropsWithTgphRef<T, HTMLButtonElement> &\n RootBaseProps;\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>({\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\ntype IconProps<T extends TgphElement> = TgphComponentProps<\n typeof TelegraphIcon<T>\n> & {\n internal_iconType?: \"leading\" | \"trailing\";\n};\n\nconst Icon = <T extends TgphElement>({\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\ntype TextProps<T extends TgphElement> = RemappedOmit<\n TgphComponentProps<typeof TelegraphText<T>>,\n \"as\"\n> & {\n as?: T;\n};\n\nconst Text = <T extends TgphElement>({\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 };\ntype DefaultProps<T extends TgphElement> = PolymorphicProps<T> &\n TgphComponentProps<typeof Root> &\n BaseDefaultProps;\n\nconst Default = <T extends TgphElement>({\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
@@ -127,7 +127,9 @@ export declare const BUTTON_COLOR_MAP: {
127
127
  readonly outline: {
128
128
  readonly default: {
129
129
  readonly backgroundColor: "surface-1";
130
+ readonly focus_backgroundColor: "surface-1";
130
131
  readonly hover_backgroundColor: "gray-2";
132
+ readonly active_backgroundColor: "gray-3";
131
133
  readonly default_buttonShadowColor: "gray-6";
132
134
  readonly hover_buttonShadowColor: "gray-7";
133
135
  readonly focus_buttonShadowColor: "gray-8";
@@ -136,7 +138,9 @@ export declare const BUTTON_COLOR_MAP: {
136
138
  };
137
139
  readonly gray: {
138
140
  readonly backgroundColor: "surface-1";
141
+ readonly focus_backgroundColor: "surface-1";
139
142
  readonly hover_backgroundColor: "gray-2";
143
+ readonly active_backgroundColor: "gray-3";
140
144
  readonly default_buttonShadowColor: "gray-6";
141
145
  readonly hover_buttonShadowColor: "gray-7";
142
146
  readonly focus_buttonShadowColor: "gray-8";
@@ -145,7 +149,9 @@ export declare const BUTTON_COLOR_MAP: {
145
149
  };
146
150
  readonly red: {
147
151
  readonly backgroundColor: "surface-1";
152
+ readonly focus_backgroundColor: "surface-1";
148
153
  readonly hover_backgroundColor: "red-2";
154
+ readonly active_backgroundColor: "red-3";
149
155
  readonly default_buttonShadowColor: "red-6";
150
156
  readonly hover_buttonShadowColor: "red-7";
151
157
  readonly focus_buttonShadowColor: "red-8";
@@ -154,7 +160,9 @@ export declare const BUTTON_COLOR_MAP: {
154
160
  };
155
161
  readonly accent: {
156
162
  readonly backgroundColor: "surface-1";
163
+ readonly focus_backgroundColor: "surface-1";
157
164
  readonly hover_backgroundColor: "accent-2";
165
+ readonly active_backgroundColor: "accent-3";
158
166
  readonly default_buttonShadowColor: "accent-6";
159
167
  readonly hover_buttonShadowColor: "accent-7";
160
168
  readonly focus_buttonShadowColor: "accent-8";
@@ -163,7 +171,9 @@ export declare const BUTTON_COLOR_MAP: {
163
171
  };
164
172
  readonly green: {
165
173
  readonly backgroundColor: "surface-1";
174
+ readonly focus_backgroundColor: "surface-1";
166
175
  readonly hover_backgroundColor: "green-2";
176
+ readonly active_backgroundColor: "green-3";
167
177
  readonly default_buttonShadowColor: "green-6";
168
178
  readonly hover_buttonShadowColor: "green-7";
169
179
  readonly focus_buttonShadowColor: "green-8";
@@ -172,7 +182,9 @@ export declare const BUTTON_COLOR_MAP: {
172
182
  };
173
183
  readonly blue: {
174
184
  readonly backgroundColor: "surface-1";
185
+ readonly focus_backgroundColor: "surface-1";
175
186
  readonly hover_backgroundColor: "blue-2";
187
+ readonly active_backgroundColor: "blue-3";
176
188
  readonly default_buttonShadowColor: "blue-6";
177
189
  readonly hover_buttonShadowColor: "blue-7";
178
190
  readonly focus_buttonShadowColor: "blue-8";
@@ -181,7 +193,9 @@ export declare const BUTTON_COLOR_MAP: {
181
193
  };
182
194
  readonly yellow: {
183
195
  readonly backgroundColor: "surface-1";
196
+ readonly focus_backgroundColor: "surface-1";
184
197
  readonly hover_backgroundColor: "yellow-2";
198
+ readonly active_backgroundColor: "yellow-3";
185
199
  readonly default_buttonShadowColor: "yellow-6";
186
200
  readonly hover_buttonShadowColor: "yellow-7";
187
201
  readonly focus_buttonShadowColor: "yellow-8";
@@ -190,7 +204,9 @@ export declare const BUTTON_COLOR_MAP: {
190
204
  };
191
205
  readonly purple: {
192
206
  readonly backgroundColor: "surface-1";
207
+ readonly focus_backgroundColor: "surface-1";
193
208
  readonly hover_backgroundColor: "purple-2";
209
+ readonly active_backgroundColor: "purple-3";
194
210
  readonly default_buttonShadowColor: "purple-6";
195
211
  readonly hover_buttonShadowColor: "purple-7";
196
212
  readonly focus_buttonShadowColor: "purple-8";
package/dist/types/Button/Button.constants.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.constants.d.ts","sourceRoot":"","sources":["../../../src/Button/Button.constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAK1D,MAAM,MAAM,cAAc,GAAG;IAC3B,yBAAyB,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IACrD,uBAAuB,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IACnD,uBAAuB,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IACnD,wBAAwB,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IACpD,eAAe,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,cAAc,EAAE,UAAU,CAqBnD,CAAC;AAEX,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyPnB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DlB,CAAC;AAEX,eAAO,MAAM,aAAa;;;;;CAKhB,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CjB,CAAC;AAEX,eAAO,MAAM,aAAa;;;;;CAKhB,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CjB,CAAC;AAEX,eAAO,MAAM,gBAAgB;;;CAGnB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,gBAAgB,CAAC,CAAC,aAAa,CAAC,CAAC;AACzE,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,eAAe,CAAC,CAAC,SAAS,CAAC,CAAC"}
1
+ {"version":3,"file":"Button.constants.d.ts","sourceRoot":"","sources":["../../../src/Button/Button.constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAK1D,MAAM,MAAM,cAAc,GAAG;IAC3B,yBAAyB,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IACrD,uBAAuB,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IACnD,uBAAuB,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IACnD,wBAAwB,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;IACpD,eAAe,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;CAC7C,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,cAAc,EAAE,UAAU,CAqBnD,CAAC;AAEX,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyQnB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DlB,CAAC;AAEX,eAAO,MAAM,aAAa;;;;;CAKhB,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CjB,CAAC;AAEX,eAAO,MAAM,aAAa;;;;;CAKhB,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CjB,CAAC;AAEX,eAAO,MAAM,gBAAgB;;;CAGnB,CAAC;AAEX,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,gBAAgB,CAAC,CAAC,aAAa,CAAC,CAAC;AACzE,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,eAAe,CAAC,CAAC,SAAS,CAAC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@telegraph/button",
3
- "version": "0.3.2",
3
+ "version": "0.3.3",
4
4
  "description": "Button component in Telegraph",
5
5
  "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/button",
6
6
  "author": "@knocklabs",
@@ -51,7 +51,7 @@
51
51
  "react": "^19.1.1",
52
52
  "react-dom": "^19.1.1",
53
53
  "typescript": "^5.9.3",
54
- "vite": "^6.0.11"
54
+ "vite": "^6.4.1"
55
55
  },
56
56
  "peerDependencies": {
57
57
  "react": "^18.0.0 || ^19.0.0",