@purpurds/toggle 7.0.0 → 7.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/LICENSE.txt +3 -3
- package/dist/styles.css +1 -1
- package/dist/toggle.cjs.js +5 -5
- package/dist/toggle.es.js +56 -56
- package/package.json +5 -5
- package/src/toggle.module.scss +22 -16
package/dist/LICENSE.txt
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
Name: @purpurds/icon
|
|
2
|
-
Version:
|
|
2
|
+
Version: 7.1.0
|
|
3
3
|
License: AGPL-3.0-only
|
|
4
4
|
Private: false
|
|
5
5
|
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
Name: @purpurds/label
|
|
9
|
-
Version:
|
|
9
|
+
Version: 7.1.0
|
|
10
10
|
License: AGPL-3.0-only
|
|
11
11
|
Private: false
|
|
12
12
|
|
|
13
13
|
---
|
|
14
14
|
|
|
15
15
|
Name: @purpurds/paragraph
|
|
16
|
-
Version:
|
|
16
|
+
Version: 7.1.0
|
|
17
17
|
License: AGPL-3.0-only
|
|
18
18
|
Private: false
|
|
19
19
|
|
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._purpur-
|
|
1
|
+
._purpur-toggle_zqs8u_1{all:unset;height:calc(var(--purpur-spacing-400) + var(--purpur-spacing-150));width:calc(var(--purpur-spacing-400) + var(--purpur-spacing-150));cursor:pointer}._purpur-toggle_zqs8u_1:hover:not(:disabled)>._purpur-toggle__track_zqs8u_7{background-color:var(--purpur-color-background-interactive-transparent-hover);border-color:var(--purpur-color-border-interactive-primary)}._purpur-toggle_zqs8u_1:active:not(:disabled)>._purpur-toggle__track_zqs8u_7{background-color:var(--purpur-color-background-interactive-transparent-active)}._purpur-toggle_zqs8u_1:disabled{cursor:default}._purpur-toggle_zqs8u_1:disabled>._purpur-toggle__track_zqs8u_7{border-color:var(--purpur-color-border-weak)}._purpur-toggle_zqs8u_1:focus-visible:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--purpur-border-radius-xs);outline:var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);outline-offset:var(--purpur-spacing-25);pointer-events:none}._purpur-toggle_zqs8u_1[data-state=checked]>._purpur-toggle__track_zqs8u_7{background-color:var(--purpur-color-background-interactive-primary);border-color:var(--purpur-color-functional-transparent)}._purpur-toggle_zqs8u_1[data-state=checked]:hover:not(:disabled)>._purpur-toggle__track_zqs8u_7{background-color:var(--purpur-color-background-interactive-primary-hover);border-color:var(--purpur-color-functional-transparent)}._purpur-toggle_zqs8u_1[data-state=checked]:active:not(:disabled)>._purpur-toggle__track_zqs8u_7{background-color:var(--purpur-color-background-interactive-primary-active);border-color:var(--purpur-color-functional-transparent)}._purpur-toggle_zqs8u_1[data-state=checked]:disabled>._purpur-toggle__track_zqs8u_7{background-color:var(--purpur-color-background-interactive-disabled);border-color:var(--purpur-color-functional-transparent)}._purpur-toggle_zqs8u_1[data-state=checked] ._purpur-toggle__checkmark-container_zqs8u_45{opacity:1}._purpur-toggle__track_zqs8u_7{display:block;width:calc(var(--purpur-spacing-400) + var(--purpur-spacing-150));height:var(--purpur-spacing-300);position:relative;background-color:var(--purpur-color-text-interactive-on-primary);color:var(--purpur-color-text-interactive-on-primary);box-sizing:border-box;border:var(--purpur-border-width-xs) solid var(--purpur-color-border-interactive-primary);border-radius:var(--purpur-border-radius-full);transition:background-color var(--purpur-motion-duration-150) ease,border-color var(--purpur-motion-duration-150) ease}._purpur-toggle__thumb_zqs8u_60{position:absolute;display:block;height:calc(var(--purpur-spacing-200) + var(--purpur-spacing-25));width:calc(var(--purpur-spacing-200) + var(--purpur-spacing-25));border-radius:var(--purpur-border-radius-full);background-color:var(--purpur-color-background-interactive-primary);transition:background-color var(--purpur-motion-duration-150) ease;will-change:transform;top:2px}@media (prefers-reduced-motion: no-preference){._purpur-toggle__thumb_zqs8u_60{transition:transform var(--purpur-motion-duration-150) ease,background-color var(--purpur-motion-duration-150) ease}}._purpur-toggle__thumb_zqs8u_60[data-disabled]{background-color:var(--purpur-color-background-interactive-disabled)}._purpur-toggle__thumb_zqs8u_60[data-state=checked],._purpur-toggle__thumb_zqs8u_60[data-state=checked][data-disabled]{background-color:var(--purpur-color-text-interactive-on-primary)}._purpur-toggle__thumb--dragging_zqs8u_85{cursor:grabbing;transition:background-color var(--purpur-motion-duration-150) ease}@media (prefers-reduced-motion: no-preference){._purpur-toggle__thumb--dragging_zqs8u_85{transition:transform 35ms ease,background-color var(--purpur-motion-duration-150) ease}}._purpur-toggle__checkmark-container_zqs8u_45{position:absolute;display:flex;align-items:center;justify-content:center;top:50%;opacity:0;transform:translateY(-50%);left:var(--purpur-spacing-25);transition:opacity var(--purpur-motion-duration-150) ease;width:calc(var(--purpur-spacing-200) + var(--purpur-spacing-25));height:calc(var(--purpur-spacing-200) + var(--purpur-spacing-25))}._purpur-toggle__checkmark_zqs8u_45{display:flex!important}._purpur-toggle__label--right_zqs8u_110{padding-left:var(--purpur-spacing-150)}._purpur-toggle__label--left_zqs8u_113{padding-right:var(--purpur-spacing-150)}._purpur-toggle__container_zqs8u_116{width:fit-content;position:relative;display:flex;align-items:center}._purpur-toggle__container_zqs8u_116 p{transition:color var(--purpur-motion-duration-150) ease}
|
package/dist/toggle.cjs.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),h=require("react");require("react-dom");function ce(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,o.get?o:{enumerable:!0,get:()=>e[r]})}}return n.default=e,Object.freeze(n)}const i=ce(h);function le(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var A={exports:{}};/*!
|
|
2
2
|
Copyright (c) 2018 Jed Watson.
|
|
3
3
|
Licensed under the MIT License (MIT), see
|
|
4
4
|
http://jedwatson.github.io/classnames
|
|
5
|
-
*/var
|
|
5
|
+
*/var q;function pe(){return q||(q=1,function(e){(function(){var n={}.hasOwnProperty;function r(){for(var t="",s=0;s<arguments.length;s++){var u=arguments[s];u&&(t=a(t,o.call(this,u)))}return t}function o(t){if(typeof t=="string"||typeof t=="number")return this&&this[t]||t;if(typeof t!="object")return"";if(Array.isArray(t))return r.apply(this,t);if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]"))return t.toString();var s="";for(var u in t)n.call(t,u)&&t[u]&&(s=a(s,this&&this[u]||u));return s}function a(t,s){return s?t?t+" "+s:t+s:t}e.exports?(r.default=r,e.exports=r):window.classNames=r})()}(A)),A.exports}var de=pe();const fe=le(de),he={"purpur-icon":"_purpur-icon_8u1lq_1","purpur-icon--xxs":"_purpur-icon--xxs_8u1lq_4","purpur-icon--xs":"_purpur-icon--xs_8u1lq_8","purpur-icon--sm":"_purpur-icon--sm_8u1lq_12","purpur-icon--md":"_purpur-icon--md_8u1lq_16","purpur-icon--lg":"_purpur-icon--lg_8u1lq_20","purpur-icon--xl":"_purpur-icon--xl_8u1lq_24"},ge=fe.bind(he),X="purpur-icon",me="md",ve=e=>e.filter(n=>Object.keys(n).length>=1).map(n=>`${n.name}="${n.value}"`).join(" "),_e=({content:e="",title:n}={})=>{const r=[{name:"xmlns",value:"http://www.w3.org/2000/svg"},{name:"fill",value:"currentColor"},{name:"viewBox",value:"0 0 24 24"},n?{name:"role",value:"img"}:{name:"aria-hidden",value:"true"}],o=n?`<title>${n}</title>`:"";return`<svg ${ve(r)}>${o}${e}</svg>`},be=e=>e.replace(/<(\/?)svg([^>]*)>/g,"").trim(),J=({["data-testid"]:e,svg:n,allyTitle:r,className:o,size:a=me,...t})=>{const s=_e({content:be(n.svg),title:r}),u=ge(o,X,`${X}--${a}`);return l.jsx("span",{className:u,"data-testid":e,dangerouslySetInnerHTML:{__html:s},...t})};J.displayName="Icon";const ye={name:"checkmark-bold",svg:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M21.243 4.176a2 2 0 0 1 .324 2.81l-10.45 13.176a2.092 2.092 0 0 1-3.118.18l-5.413-5.413A2 2 0 1 1 5.414 12.1l3.9 3.9 9.118-11.5a2 2 0 0 1 2.81-.324Z" clip-rule="evenodd"/></svg>',keywords:["checkmark-bold"],category:"utility"};function B(e,n){if(typeof e=="function")return e(n);e!=null&&(e.current=n)}function we(...e){return n=>{let r=!1;const o=e.map(a=>{const t=B(a,n);return!r&&typeof t=="function"&&(r=!0),t});if(r)return()=>{for(let a=0;a<o.length;a++){const t=o[a];typeof t=="function"?t():B(e[a],null)}}}}var K=i.forwardRef((e,n)=>{const{children:r,...o}=e,a=i.Children.toArray(r),t=a.find(Se);if(t){const s=t.props.children,u=a.map(c=>c===t?i.Children.count(s)>1?i.Children.only(null):i.isValidElement(s)?s.props.children:null:c);return l.jsx(z,{...o,ref:n,children:i.isValidElement(s)?i.cloneElement(s,void 0,u):null})}return l.jsx(z,{...o,ref:n,children:r})});K.displayName="Slot";var z=i.forwardRef((e,n)=>{const{children:r,...o}=e;if(i.isValidElement(r)){const a=Ce(r),t=je(o,r.props);return r.type!==i.Fragment&&(t.ref=n?we(n,a):a),i.cloneElement(r,t)}return i.Children.count(r)>1?i.Children.only(null):null});z.displayName="SlotClone";var xe=({children:e})=>l.jsx(l.Fragment,{children:e});function Se(e){return i.isValidElement(e)&&e.type===xe}function je(e,n){const r={...n};for(const o in n){const a=e[o],t=n[o];/^on[A-Z]/.test(o)?a&&t?r[o]=(...s)=>{t(...s),a(...s)}:a&&(r[o]=a):o==="style"?r[o]={...a,...t}:o==="className"&&(r[o]=[a,t].filter(Boolean).join(" "))}return{...e,...r}}function Ce(e){var n,r;let o=(n=Object.getOwnPropertyDescriptor(e.props,"ref"))==null?void 0:n.get,a=o&&"isReactWarning"in o&&o.isReactWarning;return a?e.ref:(o=(r=Object.getOwnPropertyDescriptor(e,"ref"))==null?void 0:r.get,a=o&&"isReactWarning"in o&&o.isReactWarning,a?e.props.ref:e.props.ref||e.ref)}var Re=["a","button","div","form","h2","h3","img","input","label","li","nav","ol","p","span","svg","ul"],$e=Re.reduce((e,n)=>{const r=i.forwardRef((o,a)=>{const{asChild:t,...s}=o,u=t?K:n;return typeof window<"u"&&(window[Symbol.for("radix-ui")]=!0),l.jsx(u,{...s,ref:a})});return r.displayName=`Primitive.${n}`,{...e,[n]:r}},{}),Pe="Label",Q=i.forwardRef((e,n)=>l.jsx($e.label,{...e,ref:n,onMouseDown:r=>{var o;r.target.closest("button, input, select, textarea")||((o=e.onMouseDown)==null||o.call(e,r),!r.defaultPrevented&&r.detail>1&&r.preventDefault())}}));Q.displayName=Pe;var ke=Q;function Ee(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var W={exports:{}};/*!
|
|
6
6
|
Copyright (c) 2018 Jed Watson.
|
|
7
7
|
Licensed under the MIT License (MIT), see
|
|
8
8
|
http://jedwatson.github.io/classnames
|
|
9
|
-
*/var L;function Oe(){return L||(L=1,function(e){(function(){var n={}.hasOwnProperty;function r(){for(var t="",s=0;s<arguments.length;s++){var
|
|
9
|
+
*/var L;function Oe(){return L||(L=1,function(e){(function(){var n={}.hasOwnProperty;function r(){for(var t="",s=0;s<arguments.length;s++){var u=arguments[s];u&&(t=a(t,o(u)))}return t}function o(t){if(typeof t=="string"||typeof t=="number")return t;if(typeof t!="object")return"";if(Array.isArray(t))return r.apply(null,t);if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]"))return t.toString();var s="";for(var u in t)n.call(t,u)&&t[u]&&(s=a(s,u));return s}function a(t,s){return s?t?t+" "+s:t+s:t}e.exports?(r.default=r,e.exports=r):window.classNames=r})()}(W)),W.exports}var Ne=Oe();const ze=Ee(Ne),k={"purpur-label":"_purpur-label_1jndl_1","purpur-label--negative":"_purpur-label--negative_1jndl_8","purpur-label--disabled":"_purpur-label--disabled_1jndl_11"},E="purpur-label",De=({children:e,className:n,disabled:r,negative:o=!1,...a})=>{const t=ze([n,k[E],{[k[`${E}--disabled`]]:r,[k[`${E}--negative`]]:o}]);return l.jsx(ke,{className:t,...a,children:e})};function Me(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var T={exports:{}};/*!
|
|
10
10
|
Copyright (c) 2018 Jed Watson.
|
|
11
11
|
Licensed under the MIT License (MIT), see
|
|
12
12
|
http://jedwatson.github.io/classnames
|
|
13
|
-
*/var V;function Ae(){return V||(V=1,function(e){(function(){var n={}.hasOwnProperty;function r(){for(var t="",s=0;s<arguments.length;s++){var
|
|
13
|
+
*/var V;function Ae(){return V||(V=1,function(e){(function(){var n={}.hasOwnProperty;function r(){for(var t="",s=0;s<arguments.length;s++){var u=arguments[s];u&&(t=a(t,o(u)))}return t}function o(t){if(typeof t=="string"||typeof t=="number")return t;if(typeof t!="object")return"";if(Array.isArray(t))return r.apply(null,t);if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]"))return t.toString();var s="";for(var u in t)n.call(t,u)&&t[u]&&(s=a(s,u));return s}function a(t,s){return s?t?t+" "+s:t+s:t}e.exports?(r.default=r,e.exports=r):window.classNames=r})()}(T)),T.exports}var qe=Ae();const Xe=Me(qe),R={"purpur-paragraph":"_purpur-paragraph_1rh57_1","purpur-paragraph--disabled":"_purpur-paragraph--disabled_1rh57_7","purpur-paragraph--hyphens":"_purpur-paragraph--hyphens_1rh57_10","purpur-paragraph--negative":"_purpur-paragraph--negative_1rh57_13","purpur-paragraph--paragraph-100":"_purpur-paragraph--paragraph-100_1rh57_16","purpur-paragraph--paragraph-100-medium":"_purpur-paragraph--paragraph-100-medium_1rh57_22","purpur-paragraph--paragraph-100-bold":"_purpur-paragraph--paragraph-100-bold_1rh57_29","purpur-paragraph--paragraph-200":"_purpur-paragraph--paragraph-200_1rh57_36","purpur-paragraph--preamble-100":"_purpur-paragraph--preamble-100_1rh57_42","purpur-paragraph--preamble-200":"_purpur-paragraph--preamble-200_1rh57_48","purpur-paragraph--additional-100":"_purpur-paragraph--additional-100_1rh57_54","purpur-paragraph--additional-100-medium":"_purpur-paragraph--additional-100-medium_1rh57_60","purpur-paragraph--overline-100":"_purpur-paragraph--overline-100_1rh57_67","purpur-paragraph--overline-200":"_purpur-paragraph--overline-200_1rh57_75"},Be={PARAGRAPH100:"paragraph-100"},$="purpur-paragraph",Y=({["data-testid"]:e,children:n,className:r,disabled:o,enableHyphenation:a=!1,negative:t=!1,variant:s=Be.PARAGRAPH100,...u})=>{const c=Xe([r,R[$],R[`${$}--${s}`],{[R[`${$}--hyphens`]]:a,[R[`${$}--disabled`]]:o,[R[`${$}--negative`]]:t}]);return l.jsx("p",{...u,className:c,"data-testid":e,children:n})};Y.displayName="Paragraph";function We(e,n,{checkForDefaultPrevented:r=!0}={}){return function(a){if(e==null||e(a),r===!1||!a.defaultPrevented)return n==null?void 0:n(a)}}function H(e,n){if(typeof e=="function")return e(n);e!=null&&(e.current=n)}function ee(...e){return n=>{let r=!1;const o=e.map(a=>{const t=H(a,n);return!r&&typeof t=="function"&&(r=!0),t});if(r)return()=>{for(let a=0;a<o.length;a++){const t=o[a];typeof t=="function"?t():H(e[a],null)}}}}function Le(...e){return i.useCallback(ee(...e),e)}function Te(e,n=[]){let r=[];function o(t,s){const u=i.createContext(s),c=r.length;r=[...r,s];const p=f=>{var b;const{scope:d,children:m,...g}=f,v=((b=d==null?void 0:d[e])==null?void 0:b[c])||u,y=i.useMemo(()=>g,Object.values(g));return l.jsx(v.Provider,{value:y,children:m})};p.displayName=t+"Provider";function _(f,d){var v;const m=((v=d==null?void 0:d[e])==null?void 0:v[c])||u,g=i.useContext(m);if(g)return g;if(s!==void 0)return s;throw new Error(`\`${f}\` must be used within \`${t}\``)}return[p,_]}const a=()=>{const t=r.map(s=>i.createContext(s));return function(u){const c=(u==null?void 0:u[e])||t;return i.useMemo(()=>({[`__scope${e}`]:{...u,[e]:c}}),[u,c])}};return a.scopeName=e,[o,Ve(a,...n)]}function Ve(...e){const n=e[0];if(e.length===1)return n;const r=()=>{const o=e.map(a=>({useScope:a(),scopeName:a.scopeName}));return function(t){const s=o.reduce((u,{useScope:c,scopeName:p})=>{const f=c(t)[`__scope${p}`];return{...u,...f}},{});return i.useMemo(()=>({[`__scope${n.scopeName}`]:s}),[s])}};return r.scopeName=n.scopeName,r}function te(e){const n=i.useRef(e);return i.useEffect(()=>{n.current=e}),i.useMemo(()=>(...r)=>{var o;return(o=n.current)==null?void 0:o.call(n,...r)},[])}function He({prop:e,defaultProp:n,onChange:r=()=>{}}){const[o,a]=Fe({defaultProp:n,onChange:r}),t=e!==void 0,s=t?e:o,u=te(r),c=i.useCallback(p=>{if(t){const f=typeof p=="function"?p(e):p;f!==e&&u(f)}else a(p)},[t,e,a,u]);return[s,c]}function Fe({defaultProp:e,onChange:n}){const r=i.useState(e),[o]=r,a=i.useRef(o),t=te(n);return i.useEffect(()=>{a.current!==o&&(t(o),a.current=o)},[o,a,t]),r}function Ie(e){const n=i.useRef({value:e,previous:e});return i.useMemo(()=>(n.current.value!==e&&(n.current.previous=n.current.value,n.current.value=e),n.current.previous),[e])}var Ue=globalThis!=null&&globalThis.document?i.useLayoutEffect:()=>{};function Ze(e){const[n,r]=i.useState(void 0);return Ue(()=>{if(e){r({width:e.offsetWidth,height:e.offsetHeight});const o=new ResizeObserver(a=>{if(!Array.isArray(a)||!a.length)return;const t=a[0];let s,u;if("borderBoxSize"in t){const c=t.borderBoxSize,p=Array.isArray(c)?c[0]:c;s=p.inlineSize,u=p.blockSize}else s=e.offsetWidth,u=e.offsetHeight;r({width:s,height:u})});return o.observe(e,{box:"border-box"}),()=>o.unobserve(e)}else r(void 0)},[e]),n}var re=i.forwardRef((e,n)=>{const{children:r,...o}=e,a=i.Children.toArray(r),t=a.find(Je);if(t){const s=t.props.children,u=a.map(c=>c===t?i.Children.count(s)>1?i.Children.only(null):i.isValidElement(s)?s.props.children:null:c);return l.jsx(D,{...o,ref:n,children:i.isValidElement(s)?i.cloneElement(s,void 0,u):null})}return l.jsx(D,{...o,ref:n,children:r})});re.displayName="Slot";var D=i.forwardRef((e,n)=>{const{children:r,...o}=e;if(i.isValidElement(r)){const a=Qe(r),t=Ke(o,r.props);return r.type!==i.Fragment&&(t.ref=n?ee(n,a):a),i.cloneElement(r,t)}return i.Children.count(r)>1?i.Children.only(null):null});D.displayName="SlotClone";var Ge=({children:e})=>l.jsx(l.Fragment,{children:e});function Je(e){return i.isValidElement(e)&&e.type===Ge}function Ke(e,n){const r={...n};for(const o in n){const a=e[o],t=n[o];/^on[A-Z]/.test(o)?a&&t?r[o]=(...u)=>{t(...u),a(...u)}:a&&(r[o]=a):o==="style"?r[o]={...a,...t}:o==="className"&&(r[o]=[a,t].filter(Boolean).join(" "))}return{...e,...r}}function Qe(e){var o,a;let n=(o=Object.getOwnPropertyDescriptor(e.props,"ref"))==null?void 0:o.get,r=n&&"isReactWarning"in n&&n.isReactWarning;return r?e.ref:(n=(a=Object.getOwnPropertyDescriptor(e,"ref"))==null?void 0:a.get,r=n&&"isReactWarning"in n&&n.isReactWarning,r?e.props.ref:e.props.ref||e.ref)}var Ye=["a","button","div","form","h2","h3","img","input","label","li","nav","ol","p","span","svg","ul"],ne=Ye.reduce((e,n)=>{const r=i.forwardRef((o,a)=>{const{asChild:t,...s}=o,u=t?re:n;return typeof window<"u"&&(window[Symbol.for("radix-ui")]=!0),l.jsx(u,{...s,ref:a})});return r.displayName=`Primitive.${n}`,{...e,[n]:r}},{}),M="Switch",[et,ft]=Te(M),[tt,rt]=et(M),oe=i.forwardRef((e,n)=>{const{__scopeSwitch:r,name:o,checked:a,defaultChecked:t,required:s,disabled:u,value:c="on",onCheckedChange:p,form:_,...f}=e,[d,m]=i.useState(null),g=Le(n,w=>m(w)),v=i.useRef(!1),y=d?_||!!d.closest("form"):!0,[b=!1,C]=He({prop:a,defaultProp:t,onChange:p});return l.jsxs(tt,{scope:r,checked:b,disabled:u,children:[l.jsx(ne.button,{type:"button",role:"switch","aria-checked":b,"aria-required":s,"data-state":ue(b),"data-disabled":u?"":void 0,disabled:u,value:c,...f,ref:g,onClick:We(e.onClick,w=>{C(x=>!x),y&&(v.current=w.isPropagationStopped(),v.current||w.stopPropagation())})}),y&&l.jsx(nt,{control:d,bubbles:!v.current,name:o,value:c,checked:b,required:s,disabled:u,form:_,style:{transform:"translateX(-100%)"}})]})});oe.displayName=M;var ae="SwitchThumb",se=i.forwardRef((e,n)=>{const{__scopeSwitch:r,...o}=e,a=rt(ae,r);return l.jsx(ne.span,{"data-state":ue(a.checked),"data-disabled":a.disabled?"":void 0,...o,ref:n})});se.displayName=ae;var nt=e=>{const{control:n,checked:r,bubbles:o=!0,...a}=e,t=i.useRef(null),s=Ie(r),u=Ze(n);return i.useEffect(()=>{const c=t.current,p=window.HTMLInputElement.prototype,f=Object.getOwnPropertyDescriptor(p,"checked").set;if(s!==r&&f){const d=new Event("click",{bubbles:o});f.call(c,r),c.dispatchEvent(d)}},[s,r,o]),l.jsx("input",{type:"checkbox","aria-hidden":!0,defaultChecked:r,...a,tabIndex:-1,ref:t,style:{...e.style,...u,position:"absolute",pointerEvents:"none",opacity:0,margin:0}})};function ue(e){return e?"checked":"unchecked"}var ot=oe,at=se;function st(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var O={exports:{}};/*!
|
|
14
14
|
Copyright (c) 2018 Jed Watson.
|
|
15
15
|
Licensed under the MIT License (MIT), see
|
|
16
16
|
http://jedwatson.github.io/classnames
|
|
17
|
-
*/var F;function
|
|
17
|
+
*/var F;function ut(){return F||(F=1,function(e){(function(){var n={}.hasOwnProperty;function r(){for(var t="",s=0;s<arguments.length;s++){var u=arguments[s];u&&(t=a(t,o(u)))}return t}function o(t){if(typeof t=="string"||typeof t=="number")return t;if(typeof t!="object")return"";if(Array.isArray(t))return r.apply(null,t);if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]"))return t.toString();var s="";for(var u in t)n.call(t,u)&&t[u]&&(s=a(s,u));return s}function a(t,s){return s?t?t+" "+s:t+s:t}e.exports?(r.default=r,e.exports=r):window.classNames=r})()}(O)),O.exports}var it=ut();const N=st(it),I=e=>e&&"touches"in e,ct=({children:e,disabled:n,onStart:r,onDrag:o,onStop:a,bounds:t,position:s,style:u})=>{const[c,p]=h.useState(void 0),[_,f]=h.useState(void 0),[d,m]=h.useState(!1),g=b=>{if(!n){b.preventDefault();const C=I(b.nativeEvent)?b.nativeEvent.touches[0].clientX:b.nativeEvent.clientX;f(C),r==null||r()}},v=h.useCallback(b=>{if(typeof _!="number")return;const w=(I(b)?b.touches[0].clientX:b.clientX)-_;if(!w)return;const x=s+w;!d&&Math.abs(x)&&m(!0);const P=x>t.right?t.right:x<t.left?t.left:x;p(P),o==null||o({x:P})},[o,p,d,_]),y=h.useCallback(()=>{f(void 0),p(void 0),m(!1),a==null||a()},[a,f]);return h.useEffect(()=>(window.addEventListener("mousemove",v),window.addEventListener("touchmove",v),()=>{window.removeEventListener("mousemove",v),window.removeEventListener("touchmove",v)}),[v]),h.useEffect(()=>(window.addEventListener("mouseup",y),window.addEventListener("touchend",y),()=>{window.removeEventListener("mouseup",y),window.removeEventListener("touchend",y)}),[y]),h.isValidElement(e)?h.cloneElement(e,{onMouseDown:g,onTouchStart:g,style:{...u,transform:`translateX(${d?c:s}px)`}}):null},U={width:void 0,height:void 0};function Z(e){const{ref:n,box:r="content-box",round:o}=e,[{width:a,height:t},s]=h.useState(U),u=lt(),c=h.useRef({...U}),p=h.useRef(void 0);return p.current=e.onResize,h.useEffect(()=>{if(!n.current||typeof window>"u"||!("ResizeObserver"in window))return;const _=new ResizeObserver(([f])=>{const d=r==="border-box"?"borderBoxSize":r==="device-pixel-content-box"?"devicePixelContentBoxSize":"contentBoxSize",m=G(f,d,"inlineSize"),g=G(f,d,"blockSize");if(c.current.width!==m||c.current.height!==g){const y={width:m&&o?Math.round(m):m,height:g&&o?Math.round(g):g};c.current.width=m,c.current.height=g,p.current?p.current(y):u()&&s(y)}});return _.observe(n.current,{box:r}),()=>{_.disconnect()}},[r,n,u,o]),{width:a,height:t}}function G(e,n,r){return e[n]?Array.isArray(e[n])?e[n][0][r]:e[n][r]:n==="contentBoxSize"?e.contentRect[r==="inlineSize"?"width":"height"]:void 0}function lt(){const e=h.useRef(!1);return h.useEffect(()=>(e.current=!0,()=>{e.current=!1}),[]),h.useCallback(()=>e.current,[])}const pt=({checked:e,onChange:n})=>{const r=h.useRef(null),o=h.useRef(null),[a,t]=h.useState(void 0),[s,u]=h.useState(!1),[c,p]=h.useState(0),{height:_=0}=Z({ref:o,round:!0}),{height:f=0}=Z({ref:r,round:!0}),d=(f||0)-_,m=_+d,g=d/2,v=m/2,y=typeof a=="number"&&(e?a<v:a>v);return{trackRef:r,thumbRef:o,isDragging:s,bounds:{left:g,right:m},position:e?m:g,onDrag:({x})=>{t(x),Math.abs((e?m:g)-x)>2&&u(!0)},onStop:()=>{u(!1),s&&p(Date.now()),y&&(n==null||n(!e))},onChangeWithDrag:()=>{Date.now()-c>50&&(n==null||n(!e)),t(void 0)}}},S={"purpur-toggle":"_purpur-toggle_zqs8u_1","purpur-toggle__track":"_purpur-toggle__track_zqs8u_7","purpur-toggle__checkmark-container":"_purpur-toggle__checkmark-container_zqs8u_45","purpur-toggle__thumb":"_purpur-toggle__thumb_zqs8u_60","purpur-toggle__thumb--dragging":"_purpur-toggle__thumb--dragging_zqs8u_85","purpur-toggle__checkmark":"_purpur-toggle__checkmark_zqs8u_45","purpur-toggle__label--right":"_purpur-toggle__label--right_zqs8u_110","purpur-toggle__label--left":"_purpur-toggle__label--left_zqs8u_113","purpur-toggle__container":"_purpur-toggle__container_zqs8u_116"},j="purpur-toggle",dt=({["data-testid"]:e,className:n,label:r,onChange:o,labelPosition:a="right",checked:t,disableDrag:s,defaultChecked:u,...c},p)=>{const[_,f]=h.useState(typeof t=="boolean"?t:!!u),d=!!(typeof t=="boolean"?t:_),{thumbRef:m,trackRef:g,isDragging:v,onChangeWithDrag:y,...b}=pt({checked:d,onChange:w=>{c.disabled||(o==null||o(w),f(w))}}),C=()=>l.jsx(De,{htmlFor:c.id,"data-testid":e&&`${e}-label`,disabled:c.disabled,className:N(S[`${j}__label`],S[`${j}__label--${a}`]),children:l.jsx(Y,{disabled:c.disabled,children:r})});return l.jsxs("div",{className:N([n,S[`${j}__container`]]),children:[r&&a==="left"&&C(),l.jsx(ot,{...c,ref:p,id:c.id,"data-testid":e,className:S[j],onCheckedChange:y,checked:d,children:l.jsxs("span",{ref:g,className:S[`${j}__track`],children:[l.jsx("span",{className:S[`${j}__checkmark-container`],children:l.jsx(J,{className:S[`${j}__checkmark`],svg:ye,size:"xxs"})}),l.jsx(ct,{disabled:s,...b,children:l.jsx(at,{ref:m,"data-testid":e&&`${e}-thumb`,className:N([S[`${j}__thumb`],{[S[`${j}__thumb--dragging`]]:v}])})})]})}),r&&a==="right"&&C()]})},ie=h.forwardRef(dt);ie.displayName="Toggle";exports.Toggle=ie;
|
|
18
18
|
//# sourceMappingURL=toggle.cjs.js.map
|
package/dist/toggle.es.js
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import { jsx as f, Fragment as ee, jsxs as
|
|
1
|
+
import { jsx as f, Fragment as ee, jsxs as j } from "react/jsx-runtime";
|
|
2
2
|
import * as s from "react";
|
|
3
3
|
import { useState as $, useCallback as A, useEffect as E, cloneElement as fe, isValidElement as he, useRef as k, forwardRef as ge } from "react";
|
|
4
4
|
import "react-dom";
|
|
5
5
|
function me(e) {
|
|
6
6
|
return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
|
|
7
7
|
}
|
|
8
|
-
var
|
|
8
|
+
var W = { exports: {} };
|
|
9
9
|
/*!
|
|
10
10
|
Copyright (c) 2018 Jed Watson.
|
|
11
11
|
Licensed under the MIT License (MIT), see
|
|
12
12
|
http://jedwatson.github.io/classnames
|
|
13
13
|
*/
|
|
14
|
-
var
|
|
14
|
+
var L;
|
|
15
15
|
function ve() {
|
|
16
|
-
return
|
|
16
|
+
return L || (L = 1, function(e) {
|
|
17
17
|
(function() {
|
|
18
18
|
var n = {}.hasOwnProperty;
|
|
19
19
|
function t() {
|
|
@@ -42,7 +42,7 @@ function ve() {
|
|
|
42
42
|
}
|
|
43
43
|
e.exports ? (t.default = t, e.exports = t) : window.classNames = t;
|
|
44
44
|
})();
|
|
45
|
-
}(
|
|
45
|
+
}(W)), W.exports;
|
|
46
46
|
}
|
|
47
47
|
var _e = ve();
|
|
48
48
|
const be = /* @__PURE__ */ me(_e), ye = {
|
|
@@ -53,7 +53,7 @@ const be = /* @__PURE__ */ me(_e), ye = {
|
|
|
53
53
|
"purpur-icon--md": "_purpur-icon--md_8u1lq_16",
|
|
54
54
|
"purpur-icon--lg": "_purpur-icon--lg_8u1lq_20",
|
|
55
55
|
"purpur-icon--xl": "_purpur-icon--xl_8u1lq_24"
|
|
56
|
-
}, we = be.bind(ye),
|
|
56
|
+
}, we = be.bind(ye), V = "purpur-icon", Se = "md", xe = (e) => e.filter((n) => Object.keys(n).length >= 1).map((n) => `${n.name}="${n.value}"`).join(" "), Ce = ({ content: e = "", title: n } = {}) => {
|
|
57
57
|
const t = [
|
|
58
58
|
{ name: "xmlns", value: "http://www.w3.org/2000/svg" },
|
|
59
59
|
{ name: "fill", value: "currentColor" },
|
|
@@ -72,7 +72,7 @@ const be = /* @__PURE__ */ me(_e), ye = {
|
|
|
72
72
|
const i = Ce({
|
|
73
73
|
content: $e(n.svg),
|
|
74
74
|
title: t
|
|
75
|
-
}), u = we(a,
|
|
75
|
+
}), u = we(a, V, `${V}--${o}`);
|
|
76
76
|
return /* @__PURE__ */ f(
|
|
77
77
|
"span",
|
|
78
78
|
{
|
|
@@ -115,20 +115,20 @@ var te = s.forwardRef((e, n) => {
|
|
|
115
115
|
const { children: t, ...a } = e, o = s.Children.toArray(t), r = o.find(Ee);
|
|
116
116
|
if (r) {
|
|
117
117
|
const i = r.props.children, u = o.map((c) => c === r ? s.Children.count(i) > 1 ? s.Children.only(null) : s.isValidElement(i) ? i.props.children : null : c);
|
|
118
|
-
return /* @__PURE__ */ f(
|
|
118
|
+
return /* @__PURE__ */ f(q, { ...a, ref: n, children: s.isValidElement(i) ? s.cloneElement(i, void 0, u) : null });
|
|
119
119
|
}
|
|
120
|
-
return /* @__PURE__ */ f(
|
|
120
|
+
return /* @__PURE__ */ f(q, { ...a, ref: n, children: t });
|
|
121
121
|
});
|
|
122
122
|
te.displayName = "Slot";
|
|
123
|
-
var
|
|
123
|
+
var q = s.forwardRef((e, n) => {
|
|
124
124
|
const { children: t, ...a } = e;
|
|
125
125
|
if (s.isValidElement(t)) {
|
|
126
|
-
const o =
|
|
126
|
+
const o = ze(t), r = Ne(a, t.props);
|
|
127
127
|
return t.type !== s.Fragment && (r.ref = n ? Pe(n, o) : o), s.cloneElement(t, r);
|
|
128
128
|
}
|
|
129
129
|
return s.Children.count(t) > 1 ? s.Children.only(null) : null;
|
|
130
130
|
});
|
|
131
|
-
|
|
131
|
+
q.displayName = "SlotClone";
|
|
132
132
|
var ke = ({ children: e }) => /* @__PURE__ */ f(ee, { children: e });
|
|
133
133
|
function Ee(e) {
|
|
134
134
|
return s.isValidElement(e) && e.type === ke;
|
|
@@ -143,12 +143,12 @@ function Ne(e, n) {
|
|
|
143
143
|
}
|
|
144
144
|
return { ...e, ...t };
|
|
145
145
|
}
|
|
146
|
-
function
|
|
146
|
+
function ze(e) {
|
|
147
147
|
var n, t;
|
|
148
148
|
let a = (n = Object.getOwnPropertyDescriptor(e.props, "ref")) == null ? void 0 : n.get, o = a && "isReactWarning" in a && a.isReactWarning;
|
|
149
149
|
return o ? e.ref : (a = (t = Object.getOwnPropertyDescriptor(e, "ref")) == null ? void 0 : t.get, o = a && "isReactWarning" in a && a.isReactWarning, o ? e.props.ref : e.props.ref || e.ref);
|
|
150
150
|
}
|
|
151
|
-
var
|
|
151
|
+
var De = [
|
|
152
152
|
"a",
|
|
153
153
|
"button",
|
|
154
154
|
"div",
|
|
@@ -165,14 +165,14 @@ var Oe = [
|
|
|
165
165
|
"span",
|
|
166
166
|
"svg",
|
|
167
167
|
"ul"
|
|
168
|
-
],
|
|
168
|
+
], Oe = De.reduce((e, n) => {
|
|
169
169
|
const t = s.forwardRef((a, o) => {
|
|
170
170
|
const { asChild: r, ...i } = a, u = r ? te : n;
|
|
171
171
|
return typeof window < "u" && (window[Symbol.for("radix-ui")] = !0), /* @__PURE__ */ f(u, { ...i, ref: o });
|
|
172
172
|
});
|
|
173
173
|
return t.displayName = `Primitive.${n}`, { ...e, [n]: t };
|
|
174
|
-
}, {}),
|
|
175
|
-
|
|
174
|
+
}, {}), Me = "Label", ne = s.forwardRef((e, n) => /* @__PURE__ */ f(
|
|
175
|
+
Oe.label,
|
|
176
176
|
{
|
|
177
177
|
...e,
|
|
178
178
|
ref: n,
|
|
@@ -182,8 +182,8 @@ var Oe = [
|
|
|
182
182
|
}
|
|
183
183
|
}
|
|
184
184
|
));
|
|
185
|
-
ne.displayName =
|
|
186
|
-
var
|
|
185
|
+
ne.displayName = Me;
|
|
186
|
+
var je = ne;
|
|
187
187
|
function Ae(e) {
|
|
188
188
|
return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
|
|
189
189
|
}
|
|
@@ -194,7 +194,7 @@ var T = { exports: {} };
|
|
|
194
194
|
http://jedwatson.github.io/classnames
|
|
195
195
|
*/
|
|
196
196
|
var F;
|
|
197
|
-
function
|
|
197
|
+
function qe() {
|
|
198
198
|
return F || (F = 1, function(e) {
|
|
199
199
|
(function() {
|
|
200
200
|
var n = {}.hasOwnProperty;
|
|
@@ -226,29 +226,29 @@ function Xe() {
|
|
|
226
226
|
})();
|
|
227
227
|
}(T)), T.exports;
|
|
228
228
|
}
|
|
229
|
-
var
|
|
230
|
-
const
|
|
229
|
+
var Xe = qe();
|
|
230
|
+
const Be = /* @__PURE__ */ Ae(Xe), z = {
|
|
231
231
|
"purpur-label": "_purpur-label_1jndl_1",
|
|
232
232
|
"purpur-label--negative": "_purpur-label--negative_1jndl_8",
|
|
233
233
|
"purpur-label--disabled": "_purpur-label--disabled_1jndl_11"
|
|
234
|
-
},
|
|
234
|
+
}, D = "purpur-label", We = ({
|
|
235
235
|
children: e,
|
|
236
236
|
className: n,
|
|
237
237
|
disabled: t,
|
|
238
238
|
negative: a = !1,
|
|
239
239
|
...o
|
|
240
240
|
}) => {
|
|
241
|
-
const r =
|
|
241
|
+
const r = Be([
|
|
242
242
|
n,
|
|
243
|
-
D
|
|
243
|
+
z[D],
|
|
244
244
|
{
|
|
245
|
-
[
|
|
246
|
-
[
|
|
245
|
+
[z[`${D}--disabled`]]: t,
|
|
246
|
+
[z[`${D}--negative`]]: a
|
|
247
247
|
}
|
|
248
248
|
]);
|
|
249
|
-
return /* @__PURE__ */ f(
|
|
249
|
+
return /* @__PURE__ */ f(je, { className: r, ...o, children: e });
|
|
250
250
|
};
|
|
251
|
-
function
|
|
251
|
+
function Le(e) {
|
|
252
252
|
return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
|
|
253
253
|
}
|
|
254
254
|
var I = { exports: {} };
|
|
@@ -258,7 +258,7 @@ var I = { exports: {} };
|
|
|
258
258
|
http://jedwatson.github.io/classnames
|
|
259
259
|
*/
|
|
260
260
|
var U;
|
|
261
|
-
function
|
|
261
|
+
function Ve() {
|
|
262
262
|
return U || (U = 1, function(e) {
|
|
263
263
|
(function() {
|
|
264
264
|
var n = {}.hasOwnProperty;
|
|
@@ -290,8 +290,8 @@ function qe() {
|
|
|
290
290
|
})();
|
|
291
291
|
}(I)), I.exports;
|
|
292
292
|
}
|
|
293
|
-
var He =
|
|
294
|
-
const Te = /* @__PURE__ */
|
|
293
|
+
var He = Ve();
|
|
294
|
+
const Te = /* @__PURE__ */ Le(He), R = {
|
|
295
295
|
"purpur-paragraph": "_purpur-paragraph_1rh57_1",
|
|
296
296
|
"purpur-paragraph--disabled": "_purpur-paragraph--disabled_1rh57_7",
|
|
297
297
|
"purpur-paragraph--hyphens": "_purpur-paragraph--hyphens_1rh57_10",
|
|
@@ -479,12 +479,12 @@ var ue = s.forwardRef((e, n) => {
|
|
|
479
479
|
const { children: t, ...a } = e, o = s.Children.toArray(t), r = o.find(tr);
|
|
480
480
|
if (r) {
|
|
481
481
|
const i = r.props.children, u = o.map((c) => c === r ? s.Children.count(i) > 1 ? s.Children.only(null) : s.isValidElement(i) ? i.props.children : null : c);
|
|
482
|
-
return /* @__PURE__ */ f(
|
|
482
|
+
return /* @__PURE__ */ f(X, { ...a, ref: n, children: s.isValidElement(i) ? s.cloneElement(i, void 0, u) : null });
|
|
483
483
|
}
|
|
484
|
-
return /* @__PURE__ */ f(
|
|
484
|
+
return /* @__PURE__ */ f(X, { ...a, ref: n, children: t });
|
|
485
485
|
});
|
|
486
486
|
ue.displayName = "Slot";
|
|
487
|
-
var
|
|
487
|
+
var X = s.forwardRef((e, n) => {
|
|
488
488
|
const { children: t, ...a } = e;
|
|
489
489
|
if (s.isValidElement(t)) {
|
|
490
490
|
const o = or(t), r = nr(a, t.props);
|
|
@@ -492,7 +492,7 @@ var B = s.forwardRef((e, n) => {
|
|
|
492
492
|
}
|
|
493
493
|
return s.Children.count(t) > 1 ? s.Children.only(null) : null;
|
|
494
494
|
});
|
|
495
|
-
|
|
495
|
+
X.displayName = "SlotClone";
|
|
496
496
|
var rr = ({ children: e }) => /* @__PURE__ */ f(ee, { children: e });
|
|
497
497
|
function tr(e) {
|
|
498
498
|
return s.isValidElement(e) && e.type === rr;
|
|
@@ -535,7 +535,7 @@ var ar = [
|
|
|
535
535
|
return typeof window < "u" && (window[Symbol.for("radix-ui")] = !0), /* @__PURE__ */ f(u, { ...i, ref: o });
|
|
536
536
|
});
|
|
537
537
|
return t.displayName = `Primitive.${n}`, { ...e, [n]: t };
|
|
538
|
-
}, {}),
|
|
538
|
+
}, {}), B = "Switch", [ir, xr] = Ze(B), [ur, sr] = ir(B), ce = s.forwardRef(
|
|
539
539
|
(e, n) => {
|
|
540
540
|
const {
|
|
541
541
|
__scopeSwitch: t,
|
|
@@ -553,7 +553,7 @@ var ar = [
|
|
|
553
553
|
defaultProp: r,
|
|
554
554
|
onChange: l
|
|
555
555
|
});
|
|
556
|
-
return /* @__PURE__ */
|
|
556
|
+
return /* @__PURE__ */ j(ur, { scope: t, checked: _, disabled: u, children: [
|
|
557
557
|
/* @__PURE__ */ f(
|
|
558
558
|
se.button,
|
|
559
559
|
{
|
|
@@ -589,7 +589,7 @@ var ar = [
|
|
|
589
589
|
] });
|
|
590
590
|
}
|
|
591
591
|
);
|
|
592
|
-
ce.displayName =
|
|
592
|
+
ce.displayName = B;
|
|
593
593
|
var le = "SwitchThumb", pe = s.forwardRef(
|
|
594
594
|
(e, n) => {
|
|
595
595
|
const { __scopeSwitch: t, ...a } = e, o = sr(le, t);
|
|
@@ -640,7 +640,7 @@ var lr = ce, pr = pe;
|
|
|
640
640
|
function dr(e) {
|
|
641
641
|
return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
|
|
642
642
|
}
|
|
643
|
-
var
|
|
643
|
+
var O = { exports: {} };
|
|
644
644
|
/*!
|
|
645
645
|
Copyright (c) 2018 Jed Watson.
|
|
646
646
|
Licensed under the MIT License (MIT), see
|
|
@@ -677,10 +677,10 @@ function fr() {
|
|
|
677
677
|
}
|
|
678
678
|
e.exports ? (t.default = t, e.exports = t) : window.classNames = t;
|
|
679
679
|
})();
|
|
680
|
-
}(
|
|
680
|
+
}(O)), O.exports;
|
|
681
681
|
}
|
|
682
682
|
var hr = fr();
|
|
683
|
-
const
|
|
683
|
+
const M = /* @__PURE__ */ dr(hr), J = (e) => e && "touches" in e, gr = ({
|
|
684
684
|
children: e,
|
|
685
685
|
disabled: n,
|
|
686
686
|
onStart: t,
|
|
@@ -778,15 +778,15 @@ const vr = ({ checked: e, onChange: n }) => {
|
|
|
778
778
|
}
|
|
779
779
|
};
|
|
780
780
|
}, S = {
|
|
781
|
-
"purpur-toggle": "_purpur-
|
|
782
|
-
"purpur-toggle__track": "_purpur-
|
|
783
|
-
"purpur-toggle__checkmark-container": "_purpur-toggle__checkmark-
|
|
784
|
-
"purpur-toggle__thumb": "_purpur-
|
|
785
|
-
"purpur-toggle__thumb--dragging": "_purpur-toggle__thumb--
|
|
786
|
-
"purpur-toggle__checkmark": "_purpur-
|
|
787
|
-
"purpur-toggle__label--right": "_purpur-toggle__label--
|
|
788
|
-
"purpur-toggle__label--left": "_purpur-toggle__label--
|
|
789
|
-
"purpur-toggle__container": "_purpur-
|
|
781
|
+
"purpur-toggle": "_purpur-toggle_zqs8u_1",
|
|
782
|
+
"purpur-toggle__track": "_purpur-toggle__track_zqs8u_7",
|
|
783
|
+
"purpur-toggle__checkmark-container": "_purpur-toggle__checkmark-container_zqs8u_45",
|
|
784
|
+
"purpur-toggle__thumb": "_purpur-toggle__thumb_zqs8u_60",
|
|
785
|
+
"purpur-toggle__thumb--dragging": "_purpur-toggle__thumb--dragging_zqs8u_85",
|
|
786
|
+
"purpur-toggle__checkmark": "_purpur-toggle__checkmark_zqs8u_45",
|
|
787
|
+
"purpur-toggle__label--right": "_purpur-toggle__label--right_zqs8u_110",
|
|
788
|
+
"purpur-toggle__label--left": "_purpur-toggle__label--left_zqs8u_113",
|
|
789
|
+
"purpur-toggle__container": "_purpur-toggle__container_zqs8u_116"
|
|
790
790
|
}, x = "purpur-toggle", _r = ({
|
|
791
791
|
["data-testid"]: e,
|
|
792
792
|
className: n,
|
|
@@ -806,19 +806,19 @@ const vr = ({ checked: e, onChange: n }) => {
|
|
|
806
806
|
c.disabled || (a == null || a(y), d(y));
|
|
807
807
|
}
|
|
808
808
|
}), C = () => /* @__PURE__ */ f(
|
|
809
|
-
|
|
809
|
+
We,
|
|
810
810
|
{
|
|
811
811
|
htmlFor: c.id,
|
|
812
812
|
"data-testid": e && `${e}-label`,
|
|
813
813
|
disabled: c.disabled,
|
|
814
|
-
className:
|
|
814
|
+
className: M(
|
|
815
815
|
S[`${x}__label`],
|
|
816
816
|
S[`${x}__label--${o}`]
|
|
817
817
|
),
|
|
818
818
|
children: /* @__PURE__ */ f(oe, { disabled: c.disabled, children: t })
|
|
819
819
|
}
|
|
820
820
|
);
|
|
821
|
-
return /* @__PURE__ */
|
|
821
|
+
return /* @__PURE__ */ j("div", { className: M([n, S[`${x}__container`]]), children: [
|
|
822
822
|
t && o === "left" && C(),
|
|
823
823
|
/* @__PURE__ */ f(
|
|
824
824
|
lr,
|
|
@@ -830,7 +830,7 @@ const vr = ({ checked: e, onChange: n }) => {
|
|
|
830
830
|
className: S[x],
|
|
831
831
|
onCheckedChange: b,
|
|
832
832
|
checked: p,
|
|
833
|
-
children: /* @__PURE__ */
|
|
833
|
+
children: /* @__PURE__ */ j("span", { ref: h, className: S[`${x}__track`], children: [
|
|
834
834
|
/* @__PURE__ */ f("span", { className: S[`${x}__checkmark-container`], children: /* @__PURE__ */ f(
|
|
835
835
|
re,
|
|
836
836
|
{
|
|
@@ -844,7 +844,7 @@ const vr = ({ checked: e, onChange: n }) => {
|
|
|
844
844
|
{
|
|
845
845
|
ref: g,
|
|
846
846
|
"data-testid": e && `${e}-thumb`,
|
|
847
|
-
className:
|
|
847
|
+
className: M([
|
|
848
848
|
S[`${x}__thumb`],
|
|
849
849
|
{
|
|
850
850
|
[S[`${x}__thumb--dragging`]]: m
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/toggle",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.2.0",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"main": "./dist/toggle.cjs.js",
|
|
6
6
|
"types": "./dist/toggle.d.ts",
|
|
@@ -17,10 +17,10 @@
|
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@radix-ui/react-switch": "~1.1.3",
|
|
19
19
|
"classnames": "~2.5.0",
|
|
20
|
-
"@purpurds/
|
|
21
|
-
"@purpurds/
|
|
22
|
-
"@purpurds/paragraph": "7.
|
|
23
|
-
"@purpurds/
|
|
20
|
+
"@purpurds/icon": "7.2.0",
|
|
21
|
+
"@purpurds/label": "7.2.0",
|
|
22
|
+
"@purpurds/paragraph": "7.2.0",
|
|
23
|
+
"@purpurds/tokens": "7.2.0"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
26
|
"@storybook/preview-api": "^8.6.4",
|
package/src/toggle.module.scss
CHANGED
|
@@ -26,16 +26,14 @@ $thumb-size: calc(var(--purpur-spacing-200) + var(--purpur-spacing-25));
|
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
-
&:focus-visible {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
pointer-events: none;
|
|
38
|
-
}
|
|
29
|
+
&:focus-visible::after {
|
|
30
|
+
content: "";
|
|
31
|
+
position: absolute;
|
|
32
|
+
inset: 0;
|
|
33
|
+
border-radius: var(--purpur-border-radius-xs);
|
|
34
|
+
outline: var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);
|
|
35
|
+
outline-offset: var(--purpur-spacing-25);
|
|
36
|
+
pointer-events: none;
|
|
39
37
|
}
|
|
40
38
|
|
|
41
39
|
&[data-state="checked"] {
|
|
@@ -86,12 +84,16 @@ $thumb-size: calc(var(--purpur-spacing-200) + var(--purpur-spacing-25));
|
|
|
86
84
|
width: $thumb-size;
|
|
87
85
|
border-radius: var(--purpur-border-radius-full);
|
|
88
86
|
background-color: var(--purpur-color-background-interactive-primary);
|
|
89
|
-
transition:
|
|
90
|
-
transform var(--purpur-motion-duration-150) ease,
|
|
91
|
-
background-color var(--purpur-motion-duration-150) ease;
|
|
87
|
+
transition: background-color var(--purpur-motion-duration-150) ease;
|
|
92
88
|
will-change: transform;
|
|
93
89
|
top: 2px;
|
|
94
90
|
|
|
91
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
92
|
+
transition:
|
|
93
|
+
transform var(--purpur-motion-duration-150) ease,
|
|
94
|
+
background-color var(--purpur-motion-duration-150) ease;
|
|
95
|
+
}
|
|
96
|
+
|
|
95
97
|
&[data-disabled] {
|
|
96
98
|
background-color: var(--purpur-color-background-interactive-disabled);
|
|
97
99
|
}
|
|
@@ -106,9 +108,13 @@ $thumb-size: calc(var(--purpur-spacing-200) + var(--purpur-spacing-25));
|
|
|
106
108
|
|
|
107
109
|
&--dragging {
|
|
108
110
|
cursor: grabbing;
|
|
109
|
-
transition:
|
|
110
|
-
|
|
111
|
-
|
|
111
|
+
transition: background-color var(--purpur-motion-duration-150) ease;
|
|
112
|
+
|
|
113
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
114
|
+
transition:
|
|
115
|
+
transform 35ms ease,
|
|
116
|
+
background-color var(--purpur-motion-duration-150) ease;
|
|
117
|
+
}
|
|
112
118
|
}
|
|
113
119
|
}
|
|
114
120
|
|