@planningcenter/tapestry-react 4.8.0 → 4.9.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EAKf,MAAM,OAAO,CAAA;AAOd,OAAO,SAAS,MAAM,cAAc,CAAA;AAapC,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAI7D,OAAO,CAAC,EAAE,OAAO,CAAA;IAKjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAKlB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAKpB,aAAa,CAAC,EAAE,OAAO,CAAA;IAOvB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAKrB,IAAI,CAAC,EAAE,MAAM,CAAA;IAKb,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAK7D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAK/D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAK9D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAKvC,KAAK,CAAC,EAAE,GAAG,CAAA;CACZ,CAAA;AAED,QAAA,MAAM,QAAQ,gHAaX,aAAa,KAAG,WA4JlB,CAAA;AAED,eAAe,QAAQ,CAAA"}
1
+ {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,cAAc,EAKf,MAAM,OAAO,CAAA;AAQd,OAAO,SAAS,MAAM,cAAc,CAAA;AAapC,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAI7D,OAAO,CAAC,EAAE,OAAO,CAAA;IAKjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAKlB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAKpB,aAAa,CAAC,EAAE,OAAO,CAAA;IAOvB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAKrB,IAAI,CAAC,EAAE,MAAM,CAAA;IAKb,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAK7D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAK/D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAK9D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAKvC,KAAK,CAAC,EAAE,GAAG,CAAA;CACZ,CAAA;AAED,QAAA,MAAM,QAAQ,gHAaX,aAAa,KAAG,WAqKlB,CAAA;AAED,eAAe,QAAQ,CAAA"}
@@ -1,2 +1,2 @@
1
- import{__rest as e,__assign as t}from'./../ext/tslib/tslib.es6.js';import r,{useContext as o,useState as i,useRef as a,useLayoutEffect as n}from"react";import{Box as s}from"../Box/Box.js";import l from"../CheckboxGroup/CheckboxGroupContext.js";import{useAccessibilityViolation as c}from"../hooks/use-accessibility-violation.js";import m from"../Icon/Icon.js";import{Link as p}from"../Link/Link.js";import{StackView as f}from"../StackView/StackView.js";import{useThemeValue as d}from"../system/utils.js";import{Text as u}from"../Text/Text.js";import h from"../Tooltip/Tooltip.js";import{mergeProps as b}from"../utils.js";import{VariantProvider as k}from"../VariantProvider/VariantProvider.js";var v="tapestry.checkbox2",x="tapestry.checkbox0",g="tapestry.checkbox1",y=function(y){var E=y.checked,j=y.disabled,C=y.id,z=y.indeterminate,P=y.label,O=y.name,S=y.onBlur,V=y.onChange,w=y.onFocus,B=y.size,F=void 0===B?"sm":B,T=y.value,I=e(y,["checked","disabled","id","indeterminate","label","name","onBlur","onChange","onFocus","size","value"]),N=d("checkbox"),_=o(l),D=i(!1),G=D[0],L=D[1],R=i(!1),H=R[0],q=R[1],A=_?_.value.indexOf(T)>-1:void 0===E?G:E,J=null,K=a(null),M=i(!1),Q=M[0],U=M[1],W=c(r.createElement(r.Fragment,null,"Checkbox must define a"," ",r.createElement(p,{external:!0,to:"https://planningcenter.github.io/tapestry-react/checkbox#label",weight:700},"label")," ","through props or a parent element that is a label."),'Tapestry-React: <Checkbox/> must define a "label" prop or have a parent that renders a label for proper accessibility.'),X=W.tooltipProps,Y=W.wrapperProps;return n((function(){if("production"!==process.env.NODE_ENV&&void 0===P){var e=null!==K.current.closest("label");U(!e)}}),[P]),"production"!==process.env.NODE_ENV&&(I=b(I,{innerRef:K}),Q&&(J=X,I=b(I,Y))),r.createElement(k,{checked:A,indeterminate:z,focus:H,disabled:j},r.createElement(h,t({},J),r.createElement(f,t({as:P?"label":"span",inline:!0,axis:"horizontal",alignment:"center",shrink:0,position:"relative",spacing:.5,variants:{disabled:{cursor:"not-allowed",opacity:.5}}},I),r.createElement(s,{as:"input",type:"checkbox",id:void 0!==C?String(C):void 0,name:_?_.name:O,checked:A,value:T,disabled:j,onChange:_?_.onChange:function(e){L(e.target.checked),V&&V(e)},onFocus:function(e){q(!0),w&&w(e)},onBlur:function(e){q(!1),S&&S(e)},position:"absolute",top:0,left:0,zIndex:0,opacity:0}),r.createElement(m,{size:F,zIndex:1},r.createElement(m.Path,{name:x,fill:N.fill,stroke:N.stroke,transform:"scale(1)",transformOrigin:"center center",transition:"all 180ms ease-out",variants:{active:{transform:"scale(1)"},checked:{fill:N.checkedFill,stroke:N.checkedStroke},focus:{stroke:N.focusStroke},indeterminate:{fill:"primary-light",stroke:"primary"}}}),r.createElement(m.Path,{name:g,fill:"#fff",transform:"scale(0)",transformOrigin:"center center",transition:"all 180ms ease-out",variants:{indeterminate:{transform:"scale(1)",transition:"all 120ms ease-out",visibility:"visible"}}}),r.createElement(m.Path,{name:v,fill:"#fff",transform:"scale(0)",transformOrigin:"center center",transition:"all 180ms ease-out",variants:{checked:{transform:"scale(1)",transition:"all 120ms ease-out",visibility:"visible"}}})),P&&r.createElement(u,{fontSize:4,lineHeight:2.5},P))))};export{y as default};
1
+ import{__rest as e,__assign as t}from'./../ext/tslib/tslib.es6.js';import o,{useContext as r,useState as i,useRef as a,useLayoutEffect as n}from"react";import{Box as l}from"../Box/Box.js";import s from"../CheckboxGroup/CheckboxGroupContext.js";import{designTokens as c}from"../designTokens/index.js";import{useAccessibilityViolation as m}from"../hooks/use-accessibility-violation.js";import d from"../Icon/Icon.js";import{Link as p}from"../Link/Link.js";import{StackView as f}from"../StackView/StackView.js";import{useThemeValue as h}from"../system/utils.js";import{Text as u}from"../Text/Text.js";import k from"../Tooltip/Tooltip.js";import{mergeProps as b}from"../utils.js";import{VariantProvider as v}from"../VariantProvider/VariantProvider.js";var x="tapestry.checkbox2",g="tapestry.checkbox0",y="tapestry.checkbox1",E=function(c){var E=c.checked,C=c.disabled,S=c.id,T=c.indeterminate,F=c.label,z=c.name,P=c.onBlur,O=c.onChange,V=c.onFocus,w=c.size,B=void 0===w?"sm":w,I=c.value,N=e(c,["checked","disabled","id","indeterminate","label","name","onBlur","onChange","onFocus","size","value"]),L=h("checkbox"),_=r(s),D=i(!1),G=D[0],R=D[1],H=i(!1),q=H[0],A=H[1],J=_?_.value.indexOf(I)>-1:void 0===E?G:E,K=null,M=a(null),Q=i(!1),U=Q[0],W=Q[1],X=m(o.createElement(o.Fragment,null,"Checkbox must define a"," ",o.createElement(p,{external:!0,to:"https://planningcenter.github.io/tapestry-react/checkbox#label",weight:700},"label")," ","through props or a parent element that is a label."),'Tapestry-React: <Checkbox/> must define a "label" prop or have a parent that renders a label for proper accessibility.'),Y=X.tooltipProps,Z=X.wrapperProps;n((function(){if("production"!==process.env.NODE_ENV&&void 0===F){var e=null!==M.current.closest("label");W(!e)}}),[F]),"production"!==process.env.NODE_ENV&&(N=b(N,{innerRef:M}),U&&(K=Y,N=b(N,Z)));var $=function(e){var o=e.checkboxTheme,r=e.disabled,i={checkedFill:o.checkedFill,checkedStroke:o.checkedStroke,fill:o.fill,focusStroke:o.focusStroke,opacity:.5,stroke:o.stroke},a=o.disabled,n=t(t({},i),a);return r?n:o}({checkboxTheme:L,disabled:C});return o.createElement(v,{checked:J,indeterminate:T,focus:q,disabled:C},o.createElement(k,t({},K),o.createElement(f,t({as:F?"label":"span",inline:!0,axis:"horizontal",alignment:"center",shrink:0,position:"relative",spacing:.5,variants:{disabled:{cursor:"not-allowed",opacity:$.opacity}}},N),o.createElement(l,{as:"input",type:"checkbox",id:void 0!==S?String(S):void 0,name:_?_.name:z,checked:J,value:I,disabled:C,onChange:_?_.onChange:function(e){R(e.target.checked),O&&O(e)},onFocus:function(e){A(!0),V&&V(e)},onBlur:function(e){A(!1),P&&P(e)},position:"absolute",top:0,left:0,zIndex:0,opacity:0}),o.createElement(d,{size:B,zIndex:1},o.createElement(d.Path,{name:g,fill:$.fill,stroke:$.stroke,transform:"scale(1)",transformOrigin:"center center",transition:"all 180ms ease-out",variants:{active:{transform:"scale(1)"},checked:{fill:$.checkedFill,stroke:$.checkedStroke},focus:{stroke:L.focusStroke},indeterminate:{fill:L.checkedFill,stroke:L.checkedStroke}}}),o.createElement(d.Path,{name:y,fill:"#fff",transform:"scale(0)",transformOrigin:"center center",transition:"all 180ms ease-out",variants:{indeterminate:{transform:"scale(1)",transition:"all 120ms ease-out",visibility:"visible"}}}),o.createElement(d.Path,{name:x,fill:"#fff",transform:"scale(0)",transformOrigin:"center center",transition:"all 180ms ease-out",variants:{checked:{transform:"scale(1)",transition:"all 120ms ease-out",visibility:"visible"}}})),F&&o.createElement(u,{fontSize:4,lineHeight:2.5,color:j({appliedTheme:$,disabled:C})},F))))};function j(e){var t=e.appliedTheme;return e.disabled&&1===t.opacity?c.checkbox.disabledLabelColor:c.checkbox.labelColor}export{E as default};
2
2
  //# sourceMappingURL=Checkbox.js.map
@@ -4,6 +4,8 @@ export declare const designTokens: {
4
4
  };
5
5
  checkbox: {
6
6
  borderColor: string;
7
+ disabledLabelColor: string;
8
+ labelColor: string;
7
9
  };
8
10
  input: {
9
11
  borderRadius: number;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/designTokens/index.ts"],"names":[],"mappings":"AAkCA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiExB,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/designTokens/index.ts"],"names":[],"mappings":"AAkCA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmExB,CAAA"}
@@ -1,2 +1,2 @@
1
- import l from"../packages/tokens-shim/dist/index.js";var o={black:"hsl(0, 0%, 0%)",black10:l.fillColorTransparencyDark010,black40:l.fillColorTransparencyDark040,black60:l.fillColorTransparencyDark060,black80:l.fillColorTransparencyDark080,delete47:l.fillColorButtonDeleteSolidDefault,interaction66:l.iconColorStatusInfoSecondary,lightNeutral07:"hsl(0, 0%, 7%)",lightNeutral12:l.fillColorNeutral000,lightNeutral15:"hsl(0, 0%, 15%)",lightNeutral17:"hsl(0, 0%, 17%)",lightNeutral19:"hsl(0, 0%, 19%)",lightNeutral24:l.fillColorNeutral010,lightNeutral32:"hsl(0, 0%, 32%)",lightNeutral40:"hsl(0, 0%, 40%)",lightNeutral45:l.fillColorNeutral020,lightNeutral50:"hsl(0, 0%, 50%)",lightNeutral62:l.fillColorNeutral030,lightNeutral68:"hsl(0, 0%, 68%)",lightNeutral81:l.fillColorNeutral040,lightNeutral88:l.fillColorNeutral050,lightNeutral93:l.fillColorNeutral060,lightNeutral95:l.fillColorNeutral070,lightNeutral97:l.fillColorNeutral080,lightNeutral98:l.fillColorNeutral090,lightNeutral100:l.fillColorNeutral100,white:l.fillColorNeutral100,white45:l.fillColorTransparencyLight050},r={button:{borderRadius:l.borderRadiusMd},checkbox:{borderColor:o.lightNeutral68},input:{borderRadius:4,readOnlyBackgroundColor:o.lightNeutral97},radio:{borderColor:o.lightNeutral68,checkedColor:o.interaction66,disabled:{borderColor:o.lightNeutral88,checkedColor:o.lightNeutral81,checkedFillColor:o.white,fillColor:o.lightNeutral95,labelColor:o.lightNeutral45},errorColor:o.delete47,fillColor:o.white,labelColor:o.black},tabNav:{desktop:{paddingX:24,selectedTabBackgroundColor:o.white,spacing:8},mobile:{backgroundColor:o.white,borderBottomColor:o.lightNeutral88,borderBottomStyle:"solid",borderBottomWidth:1,paddingX:16,spacing:20},tab:{badgeBackgroundColor:o.black10,badgeFontSize:12,badgeTextColor:o.black80,desktop:{activeTextColor:o.black80,borderRadiusTop:4,defaultBackgroundColor:o.white45,fontSize:14,height:40,hoverTextColor:o.black80,paddingX:16},disabledTextColor:o.black40,iconColor:o.lightNeutral40,mobile:{borderBottomWidth:3,fontSize:16,height:44,paddingBottom:10,paddingTop:7},selectedTextColor:o.black80,textColor:o.black60}}};export{r as designTokens};
1
+ import l from"../packages/tokens-shim/dist/index.js";var o={black:"hsl(0, 0%, 0%)",black10:l.fillColorTransparencyDark010,black40:l.fillColorTransparencyDark040,black60:l.fillColorTransparencyDark060,black80:l.fillColorTransparencyDark080,delete47:l.fillColorButtonDeleteSolidDefault,interaction66:l.iconColorStatusInfoPrimary,lightNeutral07:"hsl(0, 0%, 7%)",lightNeutral12:l.fillColorNeutral000,lightNeutral15:"hsl(0, 0%, 15%)",lightNeutral17:"hsl(0, 0%, 17%)",lightNeutral19:"hsl(0, 0%, 19%)",lightNeutral24:l.fillColorNeutral010,lightNeutral32:"hsl(0, 0%, 32%)",lightNeutral40:"hsl(0, 0%, 40%)",lightNeutral45:l.fillColorNeutral020,lightNeutral50:"hsl(0, 0%, 50%)",lightNeutral62:l.fillColorNeutral030,lightNeutral68:"hsl(0, 0%, 68%)",lightNeutral81:l.fillColorNeutral040,lightNeutral88:l.fillColorNeutral050,lightNeutral93:l.fillColorNeutral060,lightNeutral95:l.fillColorNeutral070,lightNeutral97:l.fillColorNeutral080,lightNeutral98:l.fillColorNeutral090,lightNeutral100:l.fillColorNeutral100,white:l.fillColorNeutral100,white45:l.fillColorTransparencyLight050},r={button:{borderRadius:l.borderRadiusMd},checkbox:{borderColor:o.lightNeutral68,disabledLabelColor:l.textColorDefaultDisabled,labelColor:l.textColorDefaultPrimary},input:{borderRadius:4,readOnlyBackgroundColor:o.lightNeutral97},radio:{borderColor:o.lightNeutral68,checkedColor:o.interaction66,disabled:{borderColor:o.lightNeutral88,checkedColor:o.lightNeutral81,checkedFillColor:o.white,fillColor:o.lightNeutral95,labelColor:o.lightNeutral45},errorColor:o.delete47,fillColor:o.white,labelColor:o.black},tabNav:{desktop:{paddingX:24,selectedTabBackgroundColor:o.white,spacing:8},mobile:{backgroundColor:o.white,borderBottomColor:o.lightNeutral88,borderBottomStyle:"solid",borderBottomWidth:1,paddingX:16,spacing:20},tab:{badgeBackgroundColor:o.black10,badgeFontSize:12,badgeTextColor:o.black80,desktop:{activeTextColor:o.black80,borderRadiusTop:4,defaultBackgroundColor:o.white45,fontSize:14,height:40,hoverTextColor:o.black80,paddingX:16},disabledTextColor:o.black40,iconColor:o.lightNeutral40,mobile:{borderBottomWidth:3,fontSize:16,height:44,paddingBottom:10,paddingTop:7},selectedTextColor:o.black80,textColor:o.black60}}};export{r as designTokens};
2
2
  //# sourceMappingURL=index.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@planningcenter/tapestry-react",
3
- "version": "4.8.0",
3
+ "version": "4.9.0-rc.1",
4
4
  "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
5
5
  "author": "Front End Systems Engineering <frontend@pco.bz>",
6
6
  "main": "./dist/index.js",
@@ -85,7 +85,7 @@
85
85
  "dependencies": {
86
86
  "@planningcenter/icons": "^15.18.0",
87
87
  "@planningcenter/react-beautiful-dnd": "^13.4.0",
88
- "@planningcenter/tapestry-design-tokens": "^1.1.1",
88
+ "@planningcenter/tapestry": "^0.3.0",
89
89
  "@popmotion/popcorn": "^0.4.4",
90
90
  "@popperjs/core": "^2.11.6",
91
91
  "@react-hook/window-size": "^3.1.1",