@purpurds/tabs 7.13.1 → 8.0.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 +1 -1
- package/dist/styles.css +1 -1
- package/dist/tabs.cjs.js +3 -3
- package/dist/tabs.es.js +60 -60
- package/package.json +9 -9
- package/src/tab-header.module.scss +8 -8
- package/src/tabs.stories.tsx +18 -37
package/dist/LICENSE.txt
CHANGED
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._purpur-tab-content_1ugbi_1{position:relative}._purpur-tab-content_1ugbi_1:focus-visible{outline:0}._purpur-tab-content_1ugbi_1:focus-visible:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;outline:var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);border-radius:var(--purpur-border-radius-xs);pointer-events:none}._purpur-tab-content--force-mount_1ugbi_15[data-state=inactive]{display:none}._purpur-tab-
|
|
1
|
+
._purpur-tab-content_1ugbi_1{position:relative}._purpur-tab-content_1ugbi_1:focus-visible{outline:0}._purpur-tab-content_1ugbi_1:focus-visible:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;outline:var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);border-radius:var(--purpur-border-radius-xs);pointer-events:none}._purpur-tab-content--force-mount_1ugbi_15[data-state=inactive]{display:none}._purpur-tab-header_1vo2v_1{position:relative;display:flex;align-items:center;justify-content:center;width:100%;padding:calc(var(--purpur-spacing-100) + var(--purpur-spacing-25)) var(--purpur-spacing-200);border:0;border-radius:var(--purpur-border-radius-sm) var(--purpur-border-radius-sm) 0 0;background:transparent;font-family:var(--purpur-typography-family-default);font-weight:var(--purpur-typography-weight-normal);font-size:var(--purpur-typography-scale-100);line-height:var(--purpur-typography-line-height-loose);font-weight:500;white-space:nowrap;cursor:pointer;transition:all var(--purpur-motion-duration-150) var(--purpur-motion-easing-ease-in-out)}._purpur-tab-header_1vo2v_1[aria-selected=true]{cursor:auto}._purpur-tab-header_1vo2v_1:focus-visible{outline:0}._purpur-tab-header_1vo2v_1:focus-visible:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;outline:var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);outline-offset:calc(-1 * var(--purpur-border-width-sm));border-radius:var(--purpur-border-radius-sm) var(--purpur-border-radius-sm) 0 0;pointer-events:none}._purpur-tab-header--contained_1vo2v_36:focus-visible:after,._purpur-tab-header--contained-negative_1vo2v_36:focus-visible:after{top:calc(-1 * var(--purpur-border-width-sm))}._purpur-tab-header--line_1vo2v_39{color:var(--purpur-color-text-interactive-primary);background:var(--purpur-color-functional-transparent)}._purpur-tab-header--line_1vo2v_39:not(._purpur-tab-header_1vo2v_1[aria-selected=true]):hover{color:var(--purpur-color-text-interactive-primary-hover);background:var(--purpur-color-background-interactive-transparent-hover)}._purpur-tab-header--line_1vo2v_39:not(._purpur-tab-header_1vo2v_1[aria-selected=true]):active{color:var(--purpur-color-text-interactive-primary-active);background:var(--purpur-color-background-interactive-transparent-active)}._purpur-tab-header--line-negative_1vo2v_51{color:var(--purpur-color-text-interactive-primary-negative);background:var(--purpur-color-functional-transparent)}._purpur-tab-header--line-negative_1vo2v_51:not(._purpur-tab-header_1vo2v_1[aria-selected=true]):hover{color:var(--purpur-color-text-interactive-primary-hover-negative);background:var(--purpur-color-background-interactive-transparent-hover-negative)}._purpur-tab-header--line-negative_1vo2v_51:not(._purpur-tab-header_1vo2v_1[aria-selected=true]):active{color:var(--purpur-color-text-interactive-primary-active-negative);background:var(--purpur-color-background-interactive-transparent-active-negative)}._purpur-tab-header--contained_1vo2v_36{padding-top:calc(var(--purpur-spacing-100) + var(--purpur-spacing-25) - var(--purpur-border-width-sm));border-top:var(--purpur-border-width-sm) solid transparent;color:var(--purpur-color-text-interactive-primary);background:var(--purpur-color-background-interactive-inactive)}._purpur-tab-header--contained_1vo2v_36._purpur-tab-header_1vo2v_1[aria-selected=true]{border-color:var(--purpur-color-border-interactive-primary);background:var(--purpur-color-background-primary)}._purpur-tab-header--contained_1vo2v_36:not(._purpur-tab-header_1vo2v_1[aria-selected=true]):hover{color:var(--purpur-color-text-interactive-primary-hover);background:var(--purpur-color-background-interactive-transparent-hover)}._purpur-tab-header--contained_1vo2v_36:not(._purpur-tab-header_1vo2v_1[aria-selected=true]):active{color:var(--purpur-color-text-interactive-primary-active);background:var(--purpur-color-background-interactive-transparent-active)}._purpur-tab-header--contained-negative_1vo2v_36{padding-top:calc(var(--purpur-spacing-100) + var(--purpur-spacing-25) - var(--purpur-border-width-sm));border-top:var(--purpur-border-width-sm) solid transparent;color:var(--purpur-color-text-interactive-primary-negative);background:var(--purpur-color-background-interactive-inactive-negative)}._purpur-tab-header--contained-negative_1vo2v_36._purpur-tab-header_1vo2v_1[aria-selected=true]{border-color:var(--purpur-color-border-interactive-primary-negative);color:var(--purpur-color-text-interactive-primary);background:var(--purpur-color-background-primary)}._purpur-tab-header--contained-negative_1vo2v_36:not(._purpur-tab-header_1vo2v_1[aria-selected=true]):hover{color:var(--purpur-color-text-interactive-primary-hover-negative);background:var(--purpur-color-background-interactive-transparent-hover-negative)}._purpur-tab-header--contained-negative_1vo2v_36:not(._purpur-tab-header_1vo2v_1[aria-selected=true]):active{color:var(--purpur-color-text-interactive-primary-active-negative);background:var(--purpur-color-background-interactive-transparent-active-negative)}._purpur-tabs__wrapper_j1jjc_1{position:relative;-ms-overflow-style:none;scrollbar-width:none}._purpur-tabs__wrapper_j1jjc_1 ::-webkit-scrollbar{display:none}._purpur-tabs__wrapper_j1jjc_1 ._purpur-tabs__scroll-button_j1jjc_9{display:none;align-items:center;position:absolute;top:0;z-index:10;height:100%;padding:0;border:var(--purpur-border-width-xs) solid var(--purpur-color-border-interactive-subtle);border-radius:var(--purpur-border-radius-xs);color:var(--purpur-color-text-default);background:var(--purpur-color-background-primary);box-shadow:var(--purpur-shadow-md);cursor:pointer}@media (prefers-reduced-motion: no-preference){._purpur-tabs__wrapper_j1jjc_1 ._purpur-tabs__scroll-button_j1jjc_9{transition:all var(--purpur-motion-duration-150) var(--purpur-motion-easing-ease-in-out)}}._purpur-tabs__wrapper_j1jjc_1 ._purpur-tabs__scroll-button_j1jjc_9:after{content:"";position:absolute;inset:calc(-1 * var(--purpur-border-width-xs));border:var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-subtle-hover);border-radius:var(--purpur-border-radius-xs);box-sizing:border-box;opacity:0}@media (prefers-reduced-motion: no-preference){._purpur-tabs__wrapper_j1jjc_1 ._purpur-tabs__scroll-button_j1jjc_9:after{transition:all var(--purpur-motion-duration-150) var(--purpur-motion-easing-ease-in-out)}}._purpur-tabs__wrapper_j1jjc_1 ._purpur-tabs__scroll-button_j1jjc_9:hover{box-shadow:none;border-color:transparent;color:var(--purpur-color-text-interactive-primary-hover)}._purpur-tabs__wrapper_j1jjc_1 ._purpur-tabs__scroll-button_j1jjc_9:hover:after{opacity:1}._purpur-tabs__wrapper_j1jjc_1 ._purpur-tabs__scroll-button_j1jjc_9:active:after{border-width:var(--purpur-border-width-xs)}._purpur-tabs__wrapper_j1jjc_1 ._purpur-tabs__scroll-button_j1jjc_9:focus{outline:0}._purpur-tabs__wrapper_j1jjc_1 ._purpur-tabs__scroll-button_j1jjc_9:focus-visible{outline:0;border-color:var(--purpur-color-border-interactive-subtle);box-shadow:none}._purpur-tabs__wrapper_j1jjc_1 ._purpur-tabs__scroll-button_j1jjc_9:focus-visible:after{left:calc(-1 * var(--purpur-border-width-sm) * 2);top:calc(-1 * var(--purpur-border-width-sm) * 2);width:calc(100% + var(--purpur-border-width-sm) * 4);height:calc(100% + var(--purpur-border-width-sm) * 4);border-color:var(--purpur-color-border-interactive-focus);opacity:1;pointer-events:none}._purpur-tabs__wrapper_j1jjc_1 ._purpur-tabs__scroll-button--left_j1jjc_71{left:0}._purpur-tabs__wrapper_j1jjc_1 ._purpur-tabs__scroll-button--right_j1jjc_74{right:0}._purpur-tabs__wrapper--scroll-end_j1jjc_77 ._purpur-tabs__scroll-button--left_j1jjc_71,._purpur-tabs__wrapper--scroll-start_j1jjc_80 ._purpur-tabs__scroll-button--right_j1jjc_74{display:flex}._purpur-tabs--line_j1jjc_83 ._purpur-tabs__wrapper_j1jjc_1:after,._purpur-tabs--line-negative_j1jjc_83 ._purpur-tabs__wrapper_j1jjc_1:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:var(--purpur-border-width-sm)}._purpur-tabs--line_j1jjc_83 ._purpur-tabs__selected-border_j1jjc_91,._purpur-tabs--line-negative_j1jjc_83 ._purpur-tabs__selected-border_j1jjc_91{position:absolute;bottom:0;left:0;z-index:10;height:var(--purpur-border-width-sm)}@media (prefers-reduced-motion: no-preference){._purpur-tabs--line_j1jjc_83 ._purpur-tabs__selected-border_j1jjc_91,._purpur-tabs--line-negative_j1jjc_83 ._purpur-tabs__selected-border_j1jjc_91{transition:all var(--purpur-motion-duration-150) var(--purpur-motion-easing-ease-in-out)}}._purpur-tabs--line_j1jjc_83 ._purpur-tabs__wrapper_j1jjc_1:after{background:var(--purpur-color-border-weak)}._purpur-tabs--line_j1jjc_83 ._purpur-tabs__selected-border_j1jjc_91{background:var(--purpur-color-border-interactive-primary)}._purpur-tabs--line-negative_j1jjc_83 ._purpur-tabs__wrapper_j1jjc_1:after{background:var(--purpur-color-border-weak-negative)}._purpur-tabs--line-negative_j1jjc_83 ._purpur-tabs__selected-border_j1jjc_91{background:var(--purpur-color-border-interactive-primary-negative)}._purpur-tabs__content-wrapper_j1jjc_115{overflow:hidden}@media (prefers-reduced-motion: no-preference){._purpur-tabs__content-wrapper_j1jjc_115{transition:height var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}}._purpur-tabs--contained_j1jjc_123 ._purpur-tabs__list_j1jjc_123,._purpur-tabs--contained-negative_j1jjc_123 ._purpur-tabs__list_j1jjc_123{gap:var(--purpur-spacing-100)}._purpur-tabs--contained_j1jjc_123 ._purpur-tabs__content-container_j1jjc_126,._purpur-tabs--contained-negative_j1jjc_123 ._purpur-tabs__content-container_j1jjc_126{background:var(--purpur-color-background-primary)}._purpur-tabs__list_j1jjc_123{position:relative;display:inline-flex;align-items:flex-end;max-width:100%;overflow:auto}._purpur-tabs--fullWidth_j1jjc_136 ._purpur-tabs__list_j1jjc_123{min-width:100%}
|
package/dist/tabs.cjs.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),b=require("react");require("react-dom");function We(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,o.get?o:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const a=We(b);function ke(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var ae={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 ue;function qe(){return ue||(ue=1,function(e){(function(){var t={}.hasOwnProperty;function n(){for(var r="",c=0;c<arguments.length;c++){var i=arguments[c];i&&(r=s(r,o.call(this,i)))}return r}function o(r){if(typeof r=="string"||typeof r=="number")return this&&this[r]||r;if(typeof r!="object")return"";if(Array.isArray(r))return n.apply(this,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var c="";for(var i in r)t.call(r,i)&&r[i]&&(c=s(c,this&&this[i]||i));return c}function s(r,c){return c?r?r+" "+c:r+c:r}e.exports?(n.default=n,e.exports=n):window.classNames=n})()}(ae)),ae.exports}var Ke=qe();const ze=ke(Ke),Ye={"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"},Ze=ze.bind(Ye),le="purpur-icon",Xe="md",He=e=>e.filter(t=>Object.keys(t).length>=1).map(t=>`${t.name}="${t.value}"`).join(" "),Je=({content:e="",title:t}={})=>{const n=[{name:"xmlns",value:"http://www.w3.org/2000/svg"},{name:"fill",value:"currentColor"},{name:"viewBox",value:"0 0 24 24"},t?{name:"role",value:"img"}:{name:"aria-hidden",value:"true"}],o=t?`<title>${t}</title>`:"";return`<svg ${He(n)}>${o}${e}</svg>`},Qe=e=>e.replace(/<(\/?)svg([^>]*)>/g,"").trim(),_e=({svg:e,allyTitle:t,className:n,size:o=Xe,...s})=>{const r=Je({content:Qe(e.svg),title:t}),c=Ze(n,le,`${le}--${o}`);return d.jsx("span",{className:c,dangerouslySetInnerHTML:{__html:r},...s})};_e.displayName="Icon";const et={name:"chevron-left",svg:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M16.175 3.905a.9.9 0 0 1-.08 1.27L8.36 12l7.736 6.825a.9.9 0 0 1-1.191 1.35l-8.5-7.5a.9.9 0 0 1 0-1.35l8.5-7.5a.9.9 0 0 1 1.27.08Z" clip-rule="evenodd"/></svg>',keywords:["chevron-left"],category:"utility"},tt={name:"chevron-right",svg:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M7.809 3.924a.9.9 0 0 0 .115 1.267L16.094 12l-8.17 6.809a.9.9 0 0 0 1.152 1.382l9-7.5a.9.9 0 0 0 0-1.382l-9-7.5a.9.9 0 0 0-1.267.115Z" clip-rule="evenodd"/></svg>',keywords:["chevron-right"],category:"utility"};function A(e,t,{checkForDefaultPrevented:n=!0}={}){return function(s){if(e==null||e(s),n===!1||!s.defaultPrevented)return t==null?void 0:t(s)}}function ee(e,t=[]){let n=[];function o(r,c){const i=a.createContext(c),l=n.length;n=[...n,c];const u=f=>{var x;const{scope:b,children:g,...p}=f,h=((x=b==null?void 0:b[e])==null?void 0:x[l])||i,y=a.useMemo(()=>p,Object.values(p));return d.jsx(h.Provider,{value:y,children:g})};u.displayName=r+"Provider";function _(f,b){var h;const g=((h=b==null?void 0:b[e])==null?void 0:h[l])||i,p=a.useContext(g);if(p)return p;if(c!==void 0)return c;throw new Error(`\`${f}\` must be used within \`${r}\``)}return[u,_]}const s=()=>{const r=n.map(c=>a.createContext(c));return function(i){const l=(i==null?void 0:i[e])||r;return a.useMemo(()=>({[`__scope${e}`]:{...i,[e]:l}}),[i,l])}};return s.scopeName=e,[o,nt(s,...t)]}function nt(...e){const t=e[0];if(e.length===1)return t;const n=()=>{const o=e.map(s=>({useScope:s(),scopeName:s.scopeName}));return function(r){const c=o.reduce((i,{useScope:l,scopeName:u})=>{const f=l(r)[`__scope${u}`];return{...i,...f}},{});return a.useMemo(()=>({[`__scope${t.scopeName}`]:c}),[c])}};return n.scopeName=t.scopeName,n}function de(e,t){if(typeof e=="function")return e(t);e!=null&&(e.current=t)}function be(...e){return t=>{let n=!1;const o=e.map(s=>{const r=de(s,t);return!n&&typeof r=="function"&&(n=!0),r});if(n)return()=>{for(let s=0;s<o.length;s++){const r=o[s];typeof r=="function"?r():de(e[s],null)}}}}function q(...e){return a.useCallback(be(...e),e)}var K=a.forwardRef((e,t)=>{const{children:n,...o}=e,s=a.Children.toArray(n),r=s.find(ot);if(r){const c=r.props.children,i=s.map(l=>l===r?a.Children.count(c)>1?a.Children.only(null):a.isValidElement(c)?c.props.children:null:l);return d.jsx(H,{...o,ref:t,children:a.isValidElement(c)?a.cloneElement(c,void 0,i):null})}return d.jsx(H,{...o,ref:t,children:n})});K.displayName="Slot";var H=a.forwardRef((e,t)=>{const{children:n,...o}=e;if(a.isValidElement(n)){const s=ct(n),r=st(o,n.props);return n.type!==a.Fragment&&(r.ref=t?be(t,s):s),a.cloneElement(n,r)}return a.Children.count(n)>1?a.Children.only(null):null});H.displayName="SlotClone";var rt=({children:e})=>d.jsx(d.Fragment,{children:e});function ot(e){return a.isValidElement(e)&&e.type===rt}function st(e,t){const n={...t};for(const o in t){const s=e[o],r=t[o];/^on[A-Z]/.test(o)?s&&r?n[o]=(...i)=>{r(...i),s(...i)}:s&&(n[o]=s):o==="style"?n[o]={...s,...r}:o==="className"&&(n[o]=[s,r].filter(Boolean).join(" "))}return{...e,...n}}function ct(e){var o,s;let t=(o=Object.getOwnPropertyDescriptor(e.props,"ref"))==null?void 0:o.get,n=t&&"isReactWarning"in t&&t.isReactWarning;return n?e.ref:(t=(s=Object.getOwnPropertyDescriptor(e,"ref"))==null?void 0:s.get,n=t&&"isReactWarning"in t&&t.isReactWarning,n?e.props.ref:e.props.ref||e.ref)}function it(e){const t=e+"CollectionProvider",[n,o]=ee(t),[s,r]=n(t,{collectionRef:{current:null},itemMap:new Map}),c=g=>{const{scope:p,children:h}=g,y=v.useRef(null),x=v.useRef(new Map).current;return d.jsx(s,{scope:p,itemMap:x,collectionRef:y,children:h})};c.displayName=t;const i=e+"CollectionSlot",l=v.forwardRef((g,p)=>{const{scope:h,children:y}=g,x=r(i,h),C=q(p,x.collectionRef);return d.jsx(K,{ref:C,children:y})});l.displayName=i;const u=e+"CollectionItemSlot",_="data-radix-collection-item",f=v.forwardRef((g,p)=>{const{scope:h,children:y,...x}=g,C=v.useRef(null),O=q(p,C),w=r(u,h);return v.useEffect(()=>(w.itemMap.set(C,{ref:C,...x}),()=>void w.itemMap.delete(C))),d.jsx(K,{[_]:"",ref:O,children:y})});f.displayName=u;function b(g){const p=r(e+"CollectionConsumer",g);return v.useCallback(()=>{const y=p.collectionRef.current;if(!y)return[];const x=Array.from(y.querySelectorAll(`[${_}]`));return Array.from(p.itemMap.values()).sort((w,I)=>x.indexOf(w.ref.current)-x.indexOf(I.ref.current))},[p.collectionRef,p.itemMap])}return[{Provider:c,Slot:l,ItemSlot:f},b,o]}var J=globalThis!=null&&globalThis.document?a.useLayoutEffect:()=>{},at=a.useId||(()=>{}),ut=0;function ve(e){const[t,n]=a.useState(at());return J(()=>{n(o=>o??String(ut++))},[e]),t?`radix-${t}`:""}var lt=["a","button","div","form","h2","h3","img","input","label","li","nav","ol","p","span","svg","ul"],$=lt.reduce((e,t)=>{const n=a.forwardRef((o,s)=>{const{asChild:r,...c}=o,i=r?K:t;return typeof window<"u"&&(window[Symbol.for("radix-ui")]=!0),d.jsx(i,{...c,ref:s})});return n.displayName=`Primitive.${t}`,{...e,[t]:n}},{});function te(e){const t=a.useRef(e);return a.useEffect(()=>{t.current=e}),a.useMemo(()=>(...n)=>{var o;return(o=t.current)==null?void 0:o.call(t,...n)},[])}function ge({prop:e,defaultProp:t,onChange:n=()=>{}}){const[o,s]=dt({defaultProp:t,onChange:n}),r=e!==void 0,c=r?e:o,i=te(n),l=a.useCallback(u=>{if(r){const f=typeof u=="function"?u(e):u;f!==e&&i(f)}else s(u)},[r,e,s,i]);return[c,l]}function dt({defaultProp:e,onChange:t}){const n=a.useState(e),[o]=n,s=a.useRef(o),r=te(t);return a.useEffect(()=>{s.current!==o&&(r(o),s.current=o)},[o,s,r]),n}var ft=a.createContext(void 0);function he(e){const t=a.useContext(ft);return e||t||"ltr"}var Z="rovingFocusGroup.onEntryFocus",pt={bubbles:!1,cancelable:!0},z="RovingFocusGroup",[Q,xe,mt]=it(z),[_t,Ce]=ee(z,[mt]),[bt,vt]=_t(z),we=a.forwardRef((e,t)=>d.jsx(Q.Provider,{scope:e.__scopeRovingFocusGroup,children:d.jsx(Q.Slot,{scope:e.__scopeRovingFocusGroup,children:d.jsx(gt,{...e,ref:t})})}));we.displayName=z;var gt=a.forwardRef((e,t)=>{const{__scopeRovingFocusGroup:n,orientation:o,loop:s=!1,dir:r,currentTabStopId:c,defaultCurrentTabStopId:i,onCurrentTabStopIdChange:l,onEntryFocus:u,preventScrollOnEntryFocus:_=!1,...f}=e,b=a.useRef(null),g=q(t,b),p=he(r),[h=null,y]=ge({prop:c,defaultProp:i,onChange:l}),[x,C]=a.useState(!1),O=te(u),w=xe(n),I=a.useRef(!1),[D,B]=a.useState(0);return a.useEffect(()=>{const S=b.current;if(S)return S.addEventListener(Z,O),()=>S.removeEventListener(Z,O)},[O]),d.jsx(bt,{scope:n,orientation:o,dir:p,loop:s,currentTabStopId:h,onItemFocus:a.useCallback(S=>y(S),[y]),onItemShiftTab:a.useCallback(()=>C(!0),[]),onFocusableItemAdd:a.useCallback(()=>B(S=>S+1),[]),onFocusableItemRemove:a.useCallback(()=>B(S=>S-1),[]),children:d.jsx($.div,{tabIndex:x||D===0?-1:0,"data-orientation":o,...f,ref:g,style:{outline:"none",...e.style},onMouseDown:A(e.onMouseDown,()=>{I.current=!0}),onFocus:A(e.onFocus,S=>{const Y=!I.current;if(S.target===S.currentTarget&&Y&&!x){const F=new CustomEvent(Z,pt);if(S.currentTarget.dispatchEvent(F),!F.defaultPrevented){const L=w().filter(T=>T.focusable),V=L.find(T=>T.active),U=L.find(T=>T.id===h),W=[V,U,...L].filter(Boolean).map(T=>T.ref.current);je(W,_)}}I.current=!1}),onBlur:A(e.onBlur,()=>C(!1))})})}),ye="RovingFocusGroupItem",Se=a.forwardRef((e,t)=>{const{__scopeRovingFocusGroup:n,focusable:o=!0,active:s=!1,tabStopId:r,...c}=e,i=ve(),l=r||i,u=vt(ye,n),_=u.currentTabStopId===l,f=xe(n),{onFocusableItemAdd:b,onFocusableItemRemove:g}=u;return a.useEffect(()=>{if(o)return b(),()=>g()},[o,b,g]),d.jsx(Q.ItemSlot,{scope:n,id:l,focusable:o,active:s,children:d.jsx($.span,{tabIndex:_?0:-1,"data-orientation":u.orientation,...c,ref:t,onMouseDown:A(e.onMouseDown,p=>{o?u.onItemFocus(l):p.preventDefault()}),onFocus:A(e.onFocus,()=>u.onItemFocus(l)),onKeyDown:A(e.onKeyDown,p=>{if(p.key==="Tab"&&p.shiftKey){u.onItemShiftTab();return}if(p.target!==p.currentTarget)return;const h=Ct(p,u.orientation,u.dir);if(h!==void 0){if(p.metaKey||p.ctrlKey||p.altKey||p.shiftKey)return;p.preventDefault();let x=f().filter(C=>C.focusable).map(C=>C.ref.current);if(h==="last")x.reverse();else if(h==="prev"||h==="next"){h==="prev"&&x.reverse();const C=x.indexOf(p.currentTarget);x=u.loop?wt(x,C+1):x.slice(C+1)}setTimeout(()=>je(x))}})})})});Se.displayName=ye;var ht={ArrowLeft:"prev",ArrowUp:"prev",ArrowRight:"next",ArrowDown:"next",PageUp:"first",Home:"first",PageDown:"last",End:"last"};function xt(e,t){return t!=="rtl"?e:e==="ArrowLeft"?"ArrowRight":e==="ArrowRight"?"ArrowLeft":e}function Ct(e,t,n){const o=xt(e.key,n);if(!(t==="vertical"&&["ArrowLeft","ArrowRight"].includes(o))&&!(t==="horizontal"&&["ArrowUp","ArrowDown"].includes(o)))return ht[o]}function je(e,t=!1){const n=document.activeElement;for(const o of e)if(o===n||(o.focus({preventScroll:t}),document.activeElement!==n))return}function wt(e,t){return e.map((n,o)=>e[(t+o)%e.length])}var yt=we,St=Se;function jt(e,t){return a.useReducer((n,o)=>t[n][o]??n,e)}var Ie=e=>{const{present:t,children:n}=e,o=It(t),s=typeof n=="function"?n({present:o.isPresent}):a.Children.only(n),r=q(o.ref,Rt(s));return typeof n=="function"||o.isPresent?a.cloneElement(s,{ref:r}):null};Ie.displayName="Presence";function It(e){const[t,n]=a.useState(),o=a.useRef({}),s=a.useRef(e),r=a.useRef("none"),c=e?"mounted":"unmounted",[i,l]=jt(c,{mounted:{UNMOUNT:"unmounted",ANIMATION_OUT:"unmountSuspended"},unmountSuspended:{MOUNT:"mounted",ANIMATION_END:"unmounted"},unmounted:{MOUNT:"mounted"}});return a.useEffect(()=>{const u=k(o.current);r.current=i==="mounted"?u:"none"},[i]),J(()=>{const u=o.current,_=s.current;if(_!==e){const b=r.current,g=k(u);e?l("MOUNT"):g==="none"||(u==null?void 0:u.display)==="none"?l("UNMOUNT"):l(_&&b!==g?"ANIMATION_OUT":"UNMOUNT"),s.current=e}},[e,l]),J(()=>{if(t){let u;const _=t.ownerDocument.defaultView??window,f=g=>{const h=k(o.current).includes(g.animationName);if(g.target===t&&h&&(l("ANIMATION_END"),!s.current)){const y=t.style.animationFillMode;t.style.animationFillMode="forwards",u=_.setTimeout(()=>{t.style.animationFillMode==="forwards"&&(t.style.animationFillMode=y)})}},b=g=>{g.target===t&&(r.current=k(o.current))};return t.addEventListener("animationstart",b),t.addEventListener("animationcancel",f),t.addEventListener("animationend",f),()=>{_.clearTimeout(u),t.removeEventListener("animationstart",b),t.removeEventListener("animationcancel",f),t.removeEventListener("animationend",f)}}else l("ANIMATION_END")},[t,l]),{isPresent:["mounted","unmountSuspended"].includes(i),ref:a.useCallback(u=>{u&&(o.current=getComputedStyle(u)),n(u)},[])}}function k(e){return(e==null?void 0:e.animationName)||"none"}function Rt(e){var o,s;let t=(o=Object.getOwnPropertyDescriptor(e.props,"ref"))==null?void 0:o.get,n=t&&"isReactWarning"in t&&t.isReactWarning;return n?e.ref:(t=(s=Object.getOwnPropertyDescriptor(e,"ref"))==null?void 0:s.get,n=t&&"isReactWarning"in t&&t.isReactWarning,n?e.props.ref:e.props.ref||e.ref)}var ne="Tabs",[Nt,zt]=ee(ne,[Ce]),Re=Ce(),[Tt,re]=Nt(ne),Ne=a.forwardRef((e,t)=>{const{__scopeTabs:n,value:o,onValueChange:s,defaultValue:r,orientation:c="horizontal",dir:i,activationMode:l="automatic",...u}=e,_=he(i),[f,b]=ge({prop:o,onChange:s,defaultProp:r});return d.jsx(Tt,{scope:n,baseId:ve(),value:f,onValueChange:b,orientation:c,dir:_,activationMode:l,children:d.jsx($.div,{dir:_,"data-orientation":c,...u,ref:t})})});Ne.displayName=ne;var Te="TabsList",Ee=a.forwardRef((e,t)=>{const{__scopeTabs:n,loop:o=!0,...s}=e,r=re(Te,n),c=Re(n);return d.jsx(yt,{asChild:!0,...c,orientation:r.orientation,dir:r.dir,loop:o,children:d.jsx($.div,{role:"tablist","aria-orientation":r.orientation,...s,ref:t})})});Ee.displayName=Te;var Ae="TabsTrigger",Oe=a.forwardRef((e,t)=>{const{__scopeTabs:n,value:o,disabled:s=!1,...r}=e,c=re(Ae,n),i=Re(n),l=Fe(c.baseId,o),u=$e(c.baseId,o),_=o===c.value;return d.jsx(St,{asChild:!0,...i,focusable:!s,active:_,children:d.jsx($.button,{type:"button",role:"tab","aria-selected":_,"aria-controls":u,"data-state":_?"active":"inactive","data-disabled":s?"":void 0,disabled:s,id:l,...r,ref:t,onMouseDown:A(e.onMouseDown,f=>{!s&&f.button===0&&f.ctrlKey===!1?c.onValueChange(o):f.preventDefault()}),onKeyDown:A(e.onKeyDown,f=>{[" ","Enter"].includes(f.key)&&c.onValueChange(o)}),onFocus:A(e.onFocus,()=>{const f=c.activationMode!=="manual";!_&&!s&&f&&c.onValueChange(o)})})})});Oe.displayName=Ae;var Me="TabsContent",Pe=a.forwardRef((e,t)=>{const{__scopeTabs:n,value:o,forceMount:s,children:r,...c}=e,i=re(Me,n),l=Fe(i.baseId,o),u=$e(i.baseId,o),_=o===i.value,f=a.useRef(_);return a.useEffect(()=>{const b=requestAnimationFrame(()=>f.current=!1);return()=>cancelAnimationFrame(b)},[]),d.jsx(Ie,{present:s||_,children:({present:b})=>d.jsx($.div,{"data-state":_?"active":"inactive","data-orientation":i.orientation,role:"tabpanel","aria-labelledby":l,hidden:!b,id:u,tabIndex:0,...c,ref:t,style:{...e.style,animationDuration:f.current?"0s":void 0},children:b&&r})})});Pe.displayName=Me;function Fe(e,t){return`${e}-trigger-${t}`}function $e(e,t){return`${e}-content-${t}`}var Et=Ne,At=Ee,Ot=Oe,Mt=Pe;function Pt(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var X={exports:{}};/*!
|
|
5
|
+
*/var ue;function qe(){return ue||(ue=1,function(e){(function(){var t={}.hasOwnProperty;function n(){for(var r="",c=0;c<arguments.length;c++){var i=arguments[c];i&&(r=s(r,o.call(this,i)))}return r}function o(r){if(typeof r=="string"||typeof r=="number")return this&&this[r]||r;if(typeof r!="object")return"";if(Array.isArray(r))return n.apply(this,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var c="";for(var i in r)t.call(r,i)&&r[i]&&(c=s(c,this&&this[i]||i));return c}function s(r,c){return c?r?r+" "+c:r+c:r}e.exports?(n.default=n,e.exports=n):window.classNames=n})()}(ae)),ae.exports}var Ke=qe();const ze=ke(Ke),Ye={"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"},Ze=ze.bind(Ye),le="purpur-icon",Xe="md",He=e=>e.filter(t=>Object.keys(t).length>=1).map(t=>`${t.name}="${t.value}"`).join(" "),Je=({content:e="",title:t}={})=>{const n=[{name:"xmlns",value:"http://www.w3.org/2000/svg"},{name:"fill",value:"currentColor"},{name:"viewBox",value:"0 0 24 24"},t?{name:"role",value:"img"}:{name:"aria-hidden",value:"true"}],o=t?`<title>${t}</title>`:"";return`<svg ${He(n)}>${o}${e}</svg>`},Qe=e=>e.replace(/<(\/?)svg([^>]*)>/g,"").trim(),ve=({svg:e,allyTitle:t,className:n,size:o=Xe,...s})=>{const r=Je({content:Qe(e.svg),title:t}),c=Ze(n,le,`${le}--${o}`);return d.jsx("span",{className:c,dangerouslySetInnerHTML:{__html:r},...s})};ve.displayName="Icon";const et={name:"chevron-left",svg:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M16.175 3.905a.9.9 0 0 1-.08 1.27L8.36 12l7.736 6.825a.9.9 0 0 1-1.191 1.35l-8.5-7.5a.9.9 0 0 1 0-1.35l8.5-7.5a.9.9 0 0 1 1.27.08Z" clip-rule="evenodd"/></svg>',keywords:["chevron-left"],category:"utility"},tt={name:"chevron-right",svg:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M7.809 3.924a.9.9 0 0 0 .115 1.267L16.094 12l-8.17 6.809a.9.9 0 0 0 1.152 1.382l9-7.5a.9.9 0 0 0 0-1.382l-9-7.5a.9.9 0 0 0-1.267.115Z" clip-rule="evenodd"/></svg>',keywords:["chevron-right"],category:"utility"};function A(e,t,{checkForDefaultPrevented:n=!0}={}){return function(s){if(e==null||e(s),n===!1||!s.defaultPrevented)return t==null?void 0:t(s)}}function ee(e,t=[]){let n=[];function o(r,c){const i=a.createContext(c),l=n.length;n=[...n,c];const u=f=>{var C;const{scope:_,children:g,...p}=f,h=((C=_==null?void 0:_[e])==null?void 0:C[l])||i,y=a.useMemo(()=>p,Object.values(p));return d.jsx(h.Provider,{value:y,children:g})};u.displayName=r+"Provider";function v(f,_){var h;const g=((h=_==null?void 0:_[e])==null?void 0:h[l])||i,p=a.useContext(g);if(p)return p;if(c!==void 0)return c;throw new Error(`\`${f}\` must be used within \`${r}\``)}return[u,v]}const s=()=>{const r=n.map(c=>a.createContext(c));return function(i){const l=(i==null?void 0:i[e])||r;return a.useMemo(()=>({[`__scope${e}`]:{...i,[e]:l}}),[i,l])}};return s.scopeName=e,[o,nt(s,...t)]}function nt(...e){const t=e[0];if(e.length===1)return t;const n=()=>{const o=e.map(s=>({useScope:s(),scopeName:s.scopeName}));return function(r){const c=o.reduce((i,{useScope:l,scopeName:u})=>{const f=l(r)[`__scope${u}`];return{...i,...f}},{});return a.useMemo(()=>({[`__scope${t.scopeName}`]:c}),[c])}};return n.scopeName=t.scopeName,n}function de(e,t){if(typeof e=="function")return e(t);e!=null&&(e.current=t)}function _e(...e){return t=>{let n=!1;const o=e.map(s=>{const r=de(s,t);return!n&&typeof r=="function"&&(n=!0),r});if(n)return()=>{for(let s=0;s<o.length;s++){const r=o[s];typeof r=="function"?r():de(e[s],null)}}}}function q(...e){return a.useCallback(_e(...e),e)}var K=a.forwardRef((e,t)=>{const{children:n,...o}=e,s=a.Children.toArray(n),r=s.find(ot);if(r){const c=r.props.children,i=s.map(l=>l===r?a.Children.count(c)>1?a.Children.only(null):a.isValidElement(c)?c.props.children:null:l);return d.jsx(H,{...o,ref:t,children:a.isValidElement(c)?a.cloneElement(c,void 0,i):null})}return d.jsx(H,{...o,ref:t,children:n})});K.displayName="Slot";var H=a.forwardRef((e,t)=>{const{children:n,...o}=e;if(a.isValidElement(n)){const s=ct(n),r=st(o,n.props);return n.type!==a.Fragment&&(r.ref=t?_e(t,s):s),a.cloneElement(n,r)}return a.Children.count(n)>1?a.Children.only(null):null});H.displayName="SlotClone";var rt=({children:e})=>d.jsx(d.Fragment,{children:e});function ot(e){return a.isValidElement(e)&&e.type===rt}function st(e,t){const n={...t};for(const o in t){const s=e[o],r=t[o];/^on[A-Z]/.test(o)?s&&r?n[o]=(...i)=>{r(...i),s(...i)}:s&&(n[o]=s):o==="style"?n[o]={...s,...r}:o==="className"&&(n[o]=[s,r].filter(Boolean).join(" "))}return{...e,...n}}function ct(e){var o,s;let t=(o=Object.getOwnPropertyDescriptor(e.props,"ref"))==null?void 0:o.get,n=t&&"isReactWarning"in t&&t.isReactWarning;return n?e.ref:(t=(s=Object.getOwnPropertyDescriptor(e,"ref"))==null?void 0:s.get,n=t&&"isReactWarning"in t&&t.isReactWarning,n?e.props.ref:e.props.ref||e.ref)}function it(e){const t=e+"CollectionProvider",[n,o]=ee(t),[s,r]=n(t,{collectionRef:{current:null},itemMap:new Map}),c=g=>{const{scope:p,children:h}=g,y=b.useRef(null),C=b.useRef(new Map).current;return d.jsx(s,{scope:p,itemMap:C,collectionRef:y,children:h})};c.displayName=t;const i=e+"CollectionSlot",l=b.forwardRef((g,p)=>{const{scope:h,children:y}=g,C=r(i,h),w=q(p,C.collectionRef);return d.jsx(K,{ref:w,children:y})});l.displayName=i;const u=e+"CollectionItemSlot",v="data-radix-collection-item",f=b.forwardRef((g,p)=>{const{scope:h,children:y,...C}=g,w=b.useRef(null),O=q(p,w),x=r(u,h);return b.useEffect(()=>(x.itemMap.set(w,{ref:w,...C}),()=>void x.itemMap.delete(w))),d.jsx(K,{[v]:"",ref:O,children:y})});f.displayName=u;function _(g){const p=r(e+"CollectionConsumer",g);return b.useCallback(()=>{const y=p.collectionRef.current;if(!y)return[];const C=Array.from(y.querySelectorAll(`[${v}]`));return Array.from(p.itemMap.values()).sort((x,I)=>C.indexOf(x.ref.current)-C.indexOf(I.ref.current))},[p.collectionRef,p.itemMap])}return[{Provider:c,Slot:l,ItemSlot:f},_,o]}var J=globalThis!=null&&globalThis.document?a.useLayoutEffect:()=>{},at=a.useId||(()=>{}),ut=0;function be(e){const[t,n]=a.useState(at());return J(()=>{n(o=>o??String(ut++))},[e]),t?`radix-${t}`:""}var lt=["a","button","div","form","h2","h3","img","input","label","li","nav","ol","p","span","svg","ul"],$=lt.reduce((e,t)=>{const n=a.forwardRef((o,s)=>{const{asChild:r,...c}=o,i=r?K:t;return typeof window<"u"&&(window[Symbol.for("radix-ui")]=!0),d.jsx(i,{...c,ref:s})});return n.displayName=`Primitive.${t}`,{...e,[t]:n}},{});function te(e){const t=a.useRef(e);return a.useEffect(()=>{t.current=e}),a.useMemo(()=>(...n)=>{var o;return(o=t.current)==null?void 0:o.call(t,...n)},[])}function ge({prop:e,defaultProp:t,onChange:n=()=>{}}){const[o,s]=dt({defaultProp:t,onChange:n}),r=e!==void 0,c=r?e:o,i=te(n),l=a.useCallback(u=>{if(r){const f=typeof u=="function"?u(e):u;f!==e&&i(f)}else s(u)},[r,e,s,i]);return[c,l]}function dt({defaultProp:e,onChange:t}){const n=a.useState(e),[o]=n,s=a.useRef(o),r=te(t);return a.useEffect(()=>{s.current!==o&&(r(o),s.current=o)},[o,s,r]),n}var ft=a.createContext(void 0);function he(e){const t=a.useContext(ft);return e||t||"ltr"}var Z="rovingFocusGroup.onEntryFocus",pt={bubbles:!1,cancelable:!0},z="RovingFocusGroup",[Q,Ce,mt]=it(z),[vt,we]=ee(z,[mt]),[_t,bt]=vt(z),xe=a.forwardRef((e,t)=>d.jsx(Q.Provider,{scope:e.__scopeRovingFocusGroup,children:d.jsx(Q.Slot,{scope:e.__scopeRovingFocusGroup,children:d.jsx(gt,{...e,ref:t})})}));xe.displayName=z;var gt=a.forwardRef((e,t)=>{const{__scopeRovingFocusGroup:n,orientation:o,loop:s=!1,dir:r,currentTabStopId:c,defaultCurrentTabStopId:i,onCurrentTabStopIdChange:l,onEntryFocus:u,preventScrollOnEntryFocus:v=!1,...f}=e,_=a.useRef(null),g=q(t,_),p=he(r),[h=null,y]=ge({prop:c,defaultProp:i,onChange:l}),[C,w]=a.useState(!1),O=te(u),x=Ce(n),I=a.useRef(!1),[D,B]=a.useState(0);return a.useEffect(()=>{const S=_.current;if(S)return S.addEventListener(Z,O),()=>S.removeEventListener(Z,O)},[O]),d.jsx(_t,{scope:n,orientation:o,dir:p,loop:s,currentTabStopId:h,onItemFocus:a.useCallback(S=>y(S),[y]),onItemShiftTab:a.useCallback(()=>w(!0),[]),onFocusableItemAdd:a.useCallback(()=>B(S=>S+1),[]),onFocusableItemRemove:a.useCallback(()=>B(S=>S-1),[]),children:d.jsx($.div,{tabIndex:C||D===0?-1:0,"data-orientation":o,...f,ref:g,style:{outline:"none",...e.style},onMouseDown:A(e.onMouseDown,()=>{I.current=!0}),onFocus:A(e.onFocus,S=>{const Y=!I.current;if(S.target===S.currentTarget&&Y&&!C){const F=new CustomEvent(Z,pt);if(S.currentTarget.dispatchEvent(F),!F.defaultPrevented){const L=x().filter(T=>T.focusable),V=L.find(T=>T.active),U=L.find(T=>T.id===h),W=[V,U,...L].filter(Boolean).map(T=>T.ref.current);je(W,v)}}I.current=!1}),onBlur:A(e.onBlur,()=>w(!1))})})}),ye="RovingFocusGroupItem",Se=a.forwardRef((e,t)=>{const{__scopeRovingFocusGroup:n,focusable:o=!0,active:s=!1,tabStopId:r,...c}=e,i=be(),l=r||i,u=bt(ye,n),v=u.currentTabStopId===l,f=Ce(n),{onFocusableItemAdd:_,onFocusableItemRemove:g}=u;return a.useEffect(()=>{if(o)return _(),()=>g()},[o,_,g]),d.jsx(Q.ItemSlot,{scope:n,id:l,focusable:o,active:s,children:d.jsx($.span,{tabIndex:v?0:-1,"data-orientation":u.orientation,...c,ref:t,onMouseDown:A(e.onMouseDown,p=>{o?u.onItemFocus(l):p.preventDefault()}),onFocus:A(e.onFocus,()=>u.onItemFocus(l)),onKeyDown:A(e.onKeyDown,p=>{if(p.key==="Tab"&&p.shiftKey){u.onItemShiftTab();return}if(p.target!==p.currentTarget)return;const h=wt(p,u.orientation,u.dir);if(h!==void 0){if(p.metaKey||p.ctrlKey||p.altKey||p.shiftKey)return;p.preventDefault();let C=f().filter(w=>w.focusable).map(w=>w.ref.current);if(h==="last")C.reverse();else if(h==="prev"||h==="next"){h==="prev"&&C.reverse();const w=C.indexOf(p.currentTarget);C=u.loop?xt(C,w+1):C.slice(w+1)}setTimeout(()=>je(C))}})})})});Se.displayName=ye;var ht={ArrowLeft:"prev",ArrowUp:"prev",ArrowRight:"next",ArrowDown:"next",PageUp:"first",Home:"first",PageDown:"last",End:"last"};function Ct(e,t){return t!=="rtl"?e:e==="ArrowLeft"?"ArrowRight":e==="ArrowRight"?"ArrowLeft":e}function wt(e,t,n){const o=Ct(e.key,n);if(!(t==="vertical"&&["ArrowLeft","ArrowRight"].includes(o))&&!(t==="horizontal"&&["ArrowUp","ArrowDown"].includes(o)))return ht[o]}function je(e,t=!1){const n=document.activeElement;for(const o of e)if(o===n||(o.focus({preventScroll:t}),document.activeElement!==n))return}function xt(e,t){return e.map((n,o)=>e[(t+o)%e.length])}var yt=xe,St=Se;function jt(e,t){return a.useReducer((n,o)=>t[n][o]??n,e)}var Ie=e=>{const{present:t,children:n}=e,o=It(t),s=typeof n=="function"?n({present:o.isPresent}):a.Children.only(n),r=q(o.ref,Rt(s));return typeof n=="function"||o.isPresent?a.cloneElement(s,{ref:r}):null};Ie.displayName="Presence";function It(e){const[t,n]=a.useState(),o=a.useRef({}),s=a.useRef(e),r=a.useRef("none"),c=e?"mounted":"unmounted",[i,l]=jt(c,{mounted:{UNMOUNT:"unmounted",ANIMATION_OUT:"unmountSuspended"},unmountSuspended:{MOUNT:"mounted",ANIMATION_END:"unmounted"},unmounted:{MOUNT:"mounted"}});return a.useEffect(()=>{const u=k(o.current);r.current=i==="mounted"?u:"none"},[i]),J(()=>{const u=o.current,v=s.current;if(v!==e){const _=r.current,g=k(u);e?l("MOUNT"):g==="none"||(u==null?void 0:u.display)==="none"?l("UNMOUNT"):l(v&&_!==g?"ANIMATION_OUT":"UNMOUNT"),s.current=e}},[e,l]),J(()=>{if(t){let u;const v=t.ownerDocument.defaultView??window,f=g=>{const h=k(o.current).includes(g.animationName);if(g.target===t&&h&&(l("ANIMATION_END"),!s.current)){const y=t.style.animationFillMode;t.style.animationFillMode="forwards",u=v.setTimeout(()=>{t.style.animationFillMode==="forwards"&&(t.style.animationFillMode=y)})}},_=g=>{g.target===t&&(r.current=k(o.current))};return t.addEventListener("animationstart",_),t.addEventListener("animationcancel",f),t.addEventListener("animationend",f),()=>{v.clearTimeout(u),t.removeEventListener("animationstart",_),t.removeEventListener("animationcancel",f),t.removeEventListener("animationend",f)}}else l("ANIMATION_END")},[t,l]),{isPresent:["mounted","unmountSuspended"].includes(i),ref:a.useCallback(u=>{u&&(o.current=getComputedStyle(u)),n(u)},[])}}function k(e){return(e==null?void 0:e.animationName)||"none"}function Rt(e){var o,s;let t=(o=Object.getOwnPropertyDescriptor(e.props,"ref"))==null?void 0:o.get,n=t&&"isReactWarning"in t&&t.isReactWarning;return n?e.ref:(t=(s=Object.getOwnPropertyDescriptor(e,"ref"))==null?void 0:s.get,n=t&&"isReactWarning"in t&&t.isReactWarning,n?e.props.ref:e.props.ref||e.ref)}var ne="Tabs",[Nt,zt]=ee(ne,[we]),Re=we(),[Tt,re]=Nt(ne),Ne=a.forwardRef((e,t)=>{const{__scopeTabs:n,value:o,onValueChange:s,defaultValue:r,orientation:c="horizontal",dir:i,activationMode:l="automatic",...u}=e,v=he(i),[f,_]=ge({prop:o,onChange:s,defaultProp:r});return d.jsx(Tt,{scope:n,baseId:be(),value:f,onValueChange:_,orientation:c,dir:v,activationMode:l,children:d.jsx($.div,{dir:v,"data-orientation":c,...u,ref:t})})});Ne.displayName=ne;var Te="TabsList",Ee=a.forwardRef((e,t)=>{const{__scopeTabs:n,loop:o=!0,...s}=e,r=re(Te,n),c=Re(n);return d.jsx(yt,{asChild:!0,...c,orientation:r.orientation,dir:r.dir,loop:o,children:d.jsx($.div,{role:"tablist","aria-orientation":r.orientation,...s,ref:t})})});Ee.displayName=Te;var Ae="TabsTrigger",Oe=a.forwardRef((e,t)=>{const{__scopeTabs:n,value:o,disabled:s=!1,...r}=e,c=re(Ae,n),i=Re(n),l=Fe(c.baseId,o),u=$e(c.baseId,o),v=o===c.value;return d.jsx(St,{asChild:!0,...i,focusable:!s,active:v,children:d.jsx($.button,{type:"button",role:"tab","aria-selected":v,"aria-controls":u,"data-state":v?"active":"inactive","data-disabled":s?"":void 0,disabled:s,id:l,...r,ref:t,onMouseDown:A(e.onMouseDown,f=>{!s&&f.button===0&&f.ctrlKey===!1?c.onValueChange(o):f.preventDefault()}),onKeyDown:A(e.onKeyDown,f=>{[" ","Enter"].includes(f.key)&&c.onValueChange(o)}),onFocus:A(e.onFocus,()=>{const f=c.activationMode!=="manual";!v&&!s&&f&&c.onValueChange(o)})})})});Oe.displayName=Ae;var Me="TabsContent",Pe=a.forwardRef((e,t)=>{const{__scopeTabs:n,value:o,forceMount:s,children:r,...c}=e,i=re(Me,n),l=Fe(i.baseId,o),u=$e(i.baseId,o),v=o===i.value,f=a.useRef(v);return a.useEffect(()=>{const _=requestAnimationFrame(()=>f.current=!1);return()=>cancelAnimationFrame(_)},[]),d.jsx(Ie,{present:s||v,children:({present:_})=>d.jsx($.div,{"data-state":v?"active":"inactive","data-orientation":i.orientation,role:"tabpanel","aria-labelledby":l,hidden:!_,id:u,tabIndex:0,...c,ref:t,style:{...e.style,animationDuration:f.current?"0s":void 0},children:_&&r})})});Pe.displayName=Me;function Fe(e,t){return`${e}-trigger-${t}`}function $e(e,t){return`${e}-content-${t}`}var Et=Ne,At=Ee,Ot=Oe,Mt=Pe;function Pt(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var X={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 fe;function Ft(){return fe||(fe=1,function(e){(function(){var t={}.hasOwnProperty;function n(){for(var r="",c=0;c<arguments.length;c++){var i=arguments[c];i&&(r=s(r,o.call(this,i)))}return r}function o(r){if(typeof r=="string"||typeof r=="number")return this&&this[r]||r;if(typeof r!="object")return"";if(Array.isArray(r))return n.apply(this,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var c="";for(var i in r)t.call(r,i)&&r[i]&&(c=s(c,this&&this[i]||i));return c}function s(r,c){return c?r?r+" "+c:r+c:r}e.exports?(n.default=n,e.exports=n):window.classNames=n})()}(X)),X.exports}var $t=Ft();const oe=Pt($t),Dt={"purpur-tab-content":"_purpur-tab-content_1ugbi_1","purpur-tab-content--force-mount":"_purpur-tab-content--force-mount_1ugbi_15"},Lt=oe.bind(Dt),pe="purpur-tab-content",Vt=
|
|
9
|
+
*/var fe;function Ft(){return fe||(fe=1,function(e){(function(){var t={}.hasOwnProperty;function n(){for(var r="",c=0;c<arguments.length;c++){var i=arguments[c];i&&(r=s(r,o.call(this,i)))}return r}function o(r){if(typeof r=="string"||typeof r=="number")return this&&this[r]||r;if(typeof r!="object")return"";if(Array.isArray(r))return n.apply(this,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var c="";for(var i in r)t.call(r,i)&&r[i]&&(c=s(c,this&&this[i]||i));return c}function s(r,c){return c?r?r+" "+c:r+c:r}e.exports?(n.default=n,e.exports=n):window.classNames=n})()}(X)),X.exports}var $t=Ft();const oe=Pt($t),Dt={"purpur-tab-content":"_purpur-tab-content_1ugbi_1","purpur-tab-content--force-mount":"_purpur-tab-content--force-mount_1ugbi_15"},Lt=oe.bind(Dt),pe="purpur-tab-content",Vt=b.forwardRef(({children:e,tabId:t,"data-testid":n,className:o,disableForceMount:s,...r},c)=>d.jsx(Mt,{ref:c,className:Lt(pe,o,{[`${pe}--force-mount`]:!s}),"data-testid":n,value:t,forceMount:!s||void 0,...r,children:e})),Bt=e=>!!e&&b.isValidElement(e)&&!!e.props.name&&!!e.props.tabId,Ut={"purpur-tab-header":"_purpur-tab-header_1vo2v_1","purpur-tab-header--contained":"_purpur-tab-header--contained_1vo2v_36","purpur-tab-header--contained-negative":"_purpur-tab-header--contained-negative_1vo2v_36","purpur-tab-header--line":"_purpur-tab-header--line_1vo2v_39","purpur-tab-header--line-negative":"_purpur-tab-header--line-negative_1vo2v_51"},Gt=oe.bind(Ut),me="purpur-tab-header",Wt=b.forwardRef(({index:e,tabId:t,variant:n,negative:o,onFocus:s,"data-testid":r,children:c},i)=>d.jsx(Ot,{id:`${t}-trigger`,className:Gt(me,`${me}--${n}${o?"-negative":""}`),value:t,"data-testid":r,"data-index":e,ref:i,onFocus:s,children:c})),kt={"purpur-tabs__wrapper":"_purpur-tabs__wrapper_j1jjc_1","purpur-tabs__scroll-button":"_purpur-tabs__scroll-button_j1jjc_9","purpur-tabs__scroll-button--left":"_purpur-tabs__scroll-button--left_j1jjc_71","purpur-tabs__scroll-button--right":"_purpur-tabs__scroll-button--right_j1jjc_74","purpur-tabs__wrapper--scroll-end":"_purpur-tabs__wrapper--scroll-end_j1jjc_77","purpur-tabs__wrapper--scroll-start":"_purpur-tabs__wrapper--scroll-start_j1jjc_80","purpur-tabs--line":"_purpur-tabs--line_j1jjc_83","purpur-tabs--line-negative":"_purpur-tabs--line-negative_j1jjc_83","purpur-tabs__selected-border":"_purpur-tabs__selected-border_j1jjc_91","purpur-tabs__content-wrapper":"_purpur-tabs__content-wrapper_j1jjc_115","purpur-tabs--contained":"_purpur-tabs--contained_j1jjc_123","purpur-tabs__list":"_purpur-tabs__list_j1jjc_123","purpur-tabs--contained-negative":"_purpur-tabs--contained-negative_j1jjc_123","purpur-tabs__content-container":"_purpur-tabs__content-container_j1jjc_126","purpur-tabs--fullWidth":"_purpur-tabs--fullWidth_j1jjc_136"},qt=["line","contained"],De=e=>new CustomEvent("tabChangeDetail",{detail:{value:e}}),P=oe.bind(kt),R="purpur-tabs",Kt=(e,t)=>{var l;if(typeof(e==null?void 0:e.getBoundingClientRect)!="function"||typeof(t==null?void 0:t.scroll)!="function")return;const n=e.getBoundingClientRect(),o=t.getBoundingClientRect(),s=t.clientWidth,r=parseInt((l=getComputedStyle(t).borderLeftWidth)==null?void 0:l.split("px")[0],10),c=o.left+(isNaN(r)?0:r);let i;n.right>o.right&&(i=n.left+t.scrollLeft,i=i+n.width-s+s*.1,i=i-c),n.left<o.left&&(i=n.left+t.scrollLeft,i=i-s*.1,i=i-c),i!==void 0&&t.scroll({left:i,behavior:"smooth"})},Le=({children:e,variant:t="line",negative:n=!1,fullWidth:o=!1,onChange:s,className:r,defaultValue:c,animateHeight:i=!1,"data-testid":l,value:u,...v})=>{const f=b.useRef(null),[_,g]=b.useState(-1),[p,h]=b.useState({}),[y,C]=b.useState(0),[w,O]=b.useState(0),x=b.Children.toArray(e).filter(Bt),I=b.useRef(null),D=b.useRef(new Array(x.length)),B=200,S=t==="line",Y=P(R,`${R}--${t}${n?"-negative":""}`,{[`${R}--fullWidth`]:o},r),F=b.Children.map(x,({props:{tabId:m}})=>m),L=()=>{const m=F.findIndex(j=>j===c);return m>=0?m:0};b.useEffect(()=>{u&&U(x.findIndex(m=>m.props.tabId===u))},[x,u]);const[V,U]=b.useState(L);if(new Set(F).size!==F.length)throw new Error("tabId must be unique");const G=(m,j)=>j||l?`${j||l}-${m}`:void 0,W=()=>{if(!S)return;const m=D.current[V];C((m==null?void 0:m.offsetLeft)||0),O((m==null?void 0:m.getBoundingClientRect().width)||0)},T=m=>{S&&!u&&U(x.findIndex(j=>j.props.tabId===m)),s==null||s(De(m))},Ve=m=>{if(I!=null&&I.current){const{scrollLeft:j}=I.current,M=m==="left"?-200:B;I.current.scroll({left:j+M,behavior:"smooth"})}},se=({side:m})=>d.jsx("button",{className:P(`${R}__scroll-button`,`${R}__scroll-button--${m}`),onClick:()=>Ve(m),type:"button","aria-hidden":"true",tabIndex:-1,"data-testid":G("scroll-button"),children:d.jsx(ve,{svg:m==="left"?et:tt,size:"md"})});return b.useEffect(()=>{const m=()=>{if(f.current&&i){const M=f.current.offsetHeight;g(M)}},j=()=>{m(),W()};return m(),window.addEventListener("resize",j),()=>{window.removeEventListener("resize",j)}},[V,i]),b.useEffect(()=>{W()},[V,o,x.length,t]),b.useEffect(()=>{const m=E=>{if(E.every(N=>N.isIntersecting)&&E.length===x.length){h({});return}E.forEach(N=>{const ie=Number(N.target.getAttribute("data-index")),Be=ie===0,Ue=ie===x.length-1;h(Ge=>({...Ge,...Be&&{[`${R}__wrapper--scroll-end`]:!N.isIntersecting},...Ue&&{[`${R}__wrapper--scroll-start`]:!N.isIntersecting}}))})},j=new IntersectionObserver(m,{threshold:[.99],root:I.current}),M=D.current;return M.forEach(E=>j.observe(E)),()=>{M.forEach(E=>j.unobserve(E))}},[x.length]),d.jsx(Et,{defaultValue:c??x[0].props.tabId,onValueChange:T,"data-testid":l,className:Y,value:u,...v,children:d.jsxs("div",{className:P(`${R}__container`),children:[d.jsxs("div",{className:P(`${R}__wrapper`,p),children:[d.jsxs(At,{ref:m=>{I.current=m},className:P(`${R}__list`),children:[b.Children.map(x,(m,j)=>{const{name:M,tabId:E,"data-testid":ce}=m.props;return d.jsx(Wt,{"data-testid":G("header",ce),index:j,tabId:E,ref:N=>{N&&(D.current[j]=N)},onFocus:N=>{Kt(N.target,I.current)},variant:t,negative:n,children:M})}),S&&d.jsx("div",{className:P(`${R}__selected-border`),style:{width:w,transform:`translateX(${y}px)`},"data-testid":G("selected-border")})]}),d.jsx(se,{side:"left"}),d.jsx(se,{side:"right"})]}),d.jsx("div",{className:i?P(`${R}__content-wrapper`):"",style:{height:i&&_>-1?`${_}px`:"auto"},children:d.jsx("div",{ref:f,className:P(`${R}__content-container`),children:b.Children.map(x,m=>m)})})]})})};Le.Content=Vt;exports.Tabs=Le;exports.createTabChangeDetailEvent=De;exports.tabsVariants=qt;
|
|
10
10
|
//# sourceMappingURL=tabs.cjs.js.map
|
package/dist/tabs.es.js
CHANGED
|
@@ -53,7 +53,7 @@ const Je = /* @__PURE__ */ Ze(He), Qe = {
|
|
|
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
|
-
}, et = Je.bind(Qe),
|
|
56
|
+
}, et = Je.bind(Qe), ve = "purpur-icon", tt = "md", nt = (e) => e.filter((t) => Object.keys(t).length >= 1).map((t) => `${t.name}="${t.value}"`).join(" "), rt = ({ content: e = "", title: t } = {}) => {
|
|
57
57
|
const n = [
|
|
58
58
|
{ name: "xmlns", value: "http://www.w3.org/2000/svg" },
|
|
59
59
|
{ name: "fill", value: "currentColor" },
|
|
@@ -65,7 +65,7 @@ const Je = /* @__PURE__ */ Ze(He), Qe = {
|
|
|
65
65
|
const r = rt({
|
|
66
66
|
content: ot(e.svg),
|
|
67
67
|
title: t
|
|
68
|
-
}), c = et(n,
|
|
68
|
+
}), c = et(n, ve, `${ve}--${o}`);
|
|
69
69
|
return /* @__PURE__ */ m("span", { className: c, dangerouslySetInnerHTML: { __html: r }, ...s });
|
|
70
70
|
};
|
|
71
71
|
Ce.displayName = "Icon";
|
|
@@ -93,18 +93,18 @@ function se(e, t = []) {
|
|
|
93
93
|
n = [...n, c];
|
|
94
94
|
const u = (d) => {
|
|
95
95
|
var h;
|
|
96
|
-
const { scope:
|
|
96
|
+
const { scope: _, children: b, ...f } = d, g = ((h = _ == null ? void 0 : _[e]) == null ? void 0 : h[l]) || i, y = a.useMemo(() => f, Object.values(f));
|
|
97
97
|
return /* @__PURE__ */ m(g.Provider, { value: y, children: b });
|
|
98
98
|
};
|
|
99
99
|
u.displayName = r + "Provider";
|
|
100
|
-
function
|
|
100
|
+
function v(d, _) {
|
|
101
101
|
var g;
|
|
102
|
-
const b = ((g =
|
|
102
|
+
const b = ((g = _ == null ? void 0 : _[e]) == null ? void 0 : g[l]) || i, f = a.useContext(b);
|
|
103
103
|
if (f) return f;
|
|
104
104
|
if (c !== void 0) return c;
|
|
105
105
|
throw new Error(`\`${d}\` must be used within \`${r}\``);
|
|
106
106
|
}
|
|
107
|
-
return [u,
|
|
107
|
+
return [u, v];
|
|
108
108
|
}
|
|
109
109
|
const s = () => {
|
|
110
110
|
const r = n.map((c) => a.createContext(c));
|
|
@@ -136,7 +136,7 @@ function it(...e) {
|
|
|
136
136
|
};
|
|
137
137
|
return n.scopeName = t.scopeName, n;
|
|
138
138
|
}
|
|
139
|
-
function
|
|
139
|
+
function _e(e, t) {
|
|
140
140
|
if (typeof e == "function")
|
|
141
141
|
return e(t);
|
|
142
142
|
e != null && (e.current = t);
|
|
@@ -145,14 +145,14 @@ function ye(...e) {
|
|
|
145
145
|
return (t) => {
|
|
146
146
|
let n = !1;
|
|
147
147
|
const o = e.map((s) => {
|
|
148
|
-
const r =
|
|
148
|
+
const r = _e(s, t);
|
|
149
149
|
return !n && typeof r == "function" && (n = !0), r;
|
|
150
150
|
});
|
|
151
151
|
if (n)
|
|
152
152
|
return () => {
|
|
153
153
|
for (let s = 0; s < o.length; s++) {
|
|
154
154
|
const r = o[s];
|
|
155
|
-
typeof r == "function" ? r() :
|
|
155
|
+
typeof r == "function" ? r() : _e(e[s], null);
|
|
156
156
|
}
|
|
157
157
|
};
|
|
158
158
|
};
|
|
@@ -213,19 +213,19 @@ function ft(e) {
|
|
|
213
213
|
}
|
|
214
214
|
);
|
|
215
215
|
l.displayName = i;
|
|
216
|
-
const u = e + "CollectionItemSlot",
|
|
216
|
+
const u = e + "CollectionItemSlot", v = "data-radix-collection-item", d = O.forwardRef(
|
|
217
217
|
(b, f) => {
|
|
218
218
|
const { scope: g, children: y, ...h } = b, w = O.useRef(null), j = Y(f, w), C = r(u, g);
|
|
219
|
-
return O.useEffect(() => (C.itemMap.set(w, { ref: w, ...h }), () => void C.itemMap.delete(w))), /* @__PURE__ */ m(Z, { [
|
|
219
|
+
return O.useEffect(() => (C.itemMap.set(w, { ref: w, ...h }), () => void C.itemMap.delete(w))), /* @__PURE__ */ m(Z, { [v]: "", ref: j, children: y });
|
|
220
220
|
}
|
|
221
221
|
);
|
|
222
222
|
d.displayName = u;
|
|
223
|
-
function
|
|
223
|
+
function _(b) {
|
|
224
224
|
const f = r(e + "CollectionConsumer", b);
|
|
225
225
|
return O.useCallback(() => {
|
|
226
226
|
const y = f.collectionRef.current;
|
|
227
227
|
if (!y) return [];
|
|
228
|
-
const h = Array.from(y.querySelectorAll(`[${
|
|
228
|
+
const h = Array.from(y.querySelectorAll(`[${v}]`));
|
|
229
229
|
return Array.from(f.itemMap.values()).sort(
|
|
230
230
|
(C, N) => h.indexOf(C.ref.current) - h.indexOf(N.ref.current)
|
|
231
231
|
);
|
|
@@ -233,7 +233,7 @@ function ft(e) {
|
|
|
233
233
|
}
|
|
234
234
|
return [
|
|
235
235
|
{ Provider: c, Slot: l, ItemSlot: d },
|
|
236
|
-
|
|
236
|
+
_,
|
|
237
237
|
o
|
|
238
238
|
];
|
|
239
239
|
}
|
|
@@ -246,7 +246,7 @@ function Ie(e) {
|
|
|
246
246
|
n((o) => o ?? String(mt++));
|
|
247
247
|
}, [e]), t ? `radix-${t}` : "";
|
|
248
248
|
}
|
|
249
|
-
var
|
|
249
|
+
var vt = [
|
|
250
250
|
"a",
|
|
251
251
|
"button",
|
|
252
252
|
"div",
|
|
@@ -263,7 +263,7 @@ var _t = [
|
|
|
263
263
|
"span",
|
|
264
264
|
"svg",
|
|
265
265
|
"ul"
|
|
266
|
-
], $ =
|
|
266
|
+
], $ = vt.reduce((e, t) => {
|
|
267
267
|
const n = a.forwardRef((o, s) => {
|
|
268
268
|
const { asChild: r, ...c } = o, i = r ? Z : t;
|
|
269
269
|
return typeof window < "u" && (window[Symbol.for("radix-ui")] = !0), /* @__PURE__ */ m(i, { ...c, ref: s });
|
|
@@ -285,7 +285,7 @@ function Se({
|
|
|
285
285
|
onChange: n = () => {
|
|
286
286
|
}
|
|
287
287
|
}) {
|
|
288
|
-
const [o, s] =
|
|
288
|
+
const [o, s] = _t({ defaultProp: t, onChange: n }), r = e !== void 0, c = r ? e : o, i = ce(n), l = a.useCallback(
|
|
289
289
|
(u) => {
|
|
290
290
|
if (r) {
|
|
291
291
|
const d = typeof u == "function" ? u(e) : u;
|
|
@@ -297,7 +297,7 @@ function Se({
|
|
|
297
297
|
);
|
|
298
298
|
return [c, l];
|
|
299
299
|
}
|
|
300
|
-
function
|
|
300
|
+
function _t({
|
|
301
301
|
defaultProp: e,
|
|
302
302
|
onChange: t
|
|
303
303
|
}) {
|
|
@@ -328,15 +328,15 @@ var It = a.forwardRef((e, t) => {
|
|
|
328
328
|
defaultCurrentTabStopId: i,
|
|
329
329
|
onCurrentTabStopIdChange: l,
|
|
330
330
|
onEntryFocus: u,
|
|
331
|
-
preventScrollOnEntryFocus:
|
|
331
|
+
preventScrollOnEntryFocus: v = !1,
|
|
332
332
|
...d
|
|
333
|
-
} = e,
|
|
333
|
+
} = e, _ = a.useRef(null), b = Y(t, _), f = Ne(r), [g = null, y] = Se({
|
|
334
334
|
prop: c,
|
|
335
335
|
defaultProp: i,
|
|
336
336
|
onChange: l
|
|
337
337
|
}), [h, w] = a.useState(!1), j = ce(u), C = Re(n), N = a.useRef(!1), [D, U] = a.useState(0);
|
|
338
338
|
return a.useEffect(() => {
|
|
339
|
-
const I =
|
|
339
|
+
const I = _.current;
|
|
340
340
|
if (I)
|
|
341
341
|
return I.addEventListener(ee, j), () => I.removeEventListener(ee, j);
|
|
342
342
|
}, [j]), /* @__PURE__ */ m(
|
|
@@ -379,7 +379,7 @@ var It = a.forwardRef((e, t) => {
|
|
|
379
379
|
const L = C().filter((x) => x.focusable), V = L.find((x) => x.active), G = L.find((x) => x.id === g), k = [V, G, ...L].filter(
|
|
380
380
|
Boolean
|
|
381
381
|
).map((x) => x.ref.current);
|
|
382
|
-
je(k,
|
|
382
|
+
je(k, v);
|
|
383
383
|
}
|
|
384
384
|
}
|
|
385
385
|
N.current = !1;
|
|
@@ -397,11 +397,11 @@ var It = a.forwardRef((e, t) => {
|
|
|
397
397
|
active: s = !1,
|
|
398
398
|
tabStopId: r,
|
|
399
399
|
...c
|
|
400
|
-
} = e, i = Ie(), l = r || i, u = yt(Ee, n),
|
|
400
|
+
} = e, i = Ie(), l = r || i, u = yt(Ee, n), v = u.currentTabStopId === l, d = Re(n), { onFocusableItemAdd: _, onFocusableItemRemove: b } = u;
|
|
401
401
|
return a.useEffect(() => {
|
|
402
402
|
if (o)
|
|
403
|
-
return
|
|
404
|
-
}, [o,
|
|
403
|
+
return _(), () => b();
|
|
404
|
+
}, [o, _, b]), /* @__PURE__ */ m(
|
|
405
405
|
oe.ItemSlot,
|
|
406
406
|
{
|
|
407
407
|
scope: n,
|
|
@@ -411,7 +411,7 @@ var It = a.forwardRef((e, t) => {
|
|
|
411
411
|
children: /* @__PURE__ */ m(
|
|
412
412
|
$.span,
|
|
413
413
|
{
|
|
414
|
-
tabIndex:
|
|
414
|
+
tabIndex: v ? 0 : -1,
|
|
415
415
|
"data-orientation": u.orientation,
|
|
416
416
|
...c,
|
|
417
417
|
ref: t,
|
|
@@ -499,27 +499,27 @@ function jt(e) {
|
|
|
499
499
|
const u = z(o.current);
|
|
500
500
|
r.current = i === "mounted" ? u : "none";
|
|
501
501
|
}, [i]), re(() => {
|
|
502
|
-
const u = o.current,
|
|
503
|
-
if (
|
|
504
|
-
const
|
|
505
|
-
e ? l("MOUNT") : b === "none" || (u == null ? void 0 : u.display) === "none" ? l("UNMOUNT") : l(
|
|
502
|
+
const u = o.current, v = s.current;
|
|
503
|
+
if (v !== e) {
|
|
504
|
+
const _ = r.current, b = z(u);
|
|
505
|
+
e ? l("MOUNT") : b === "none" || (u == null ? void 0 : u.display) === "none" ? l("UNMOUNT") : l(v && _ !== b ? "ANIMATION_OUT" : "UNMOUNT"), s.current = e;
|
|
506
506
|
}
|
|
507
507
|
}, [e, l]), re(() => {
|
|
508
508
|
if (t) {
|
|
509
509
|
let u;
|
|
510
|
-
const
|
|
510
|
+
const v = t.ownerDocument.defaultView ?? window, d = (b) => {
|
|
511
511
|
const g = z(o.current).includes(b.animationName);
|
|
512
512
|
if (b.target === t && g && (l("ANIMATION_END"), !s.current)) {
|
|
513
513
|
const y = t.style.animationFillMode;
|
|
514
|
-
t.style.animationFillMode = "forwards", u =
|
|
514
|
+
t.style.animationFillMode = "forwards", u = v.setTimeout(() => {
|
|
515
515
|
t.style.animationFillMode === "forwards" && (t.style.animationFillMode = y);
|
|
516
516
|
});
|
|
517
517
|
}
|
|
518
|
-
},
|
|
518
|
+
}, _ = (b) => {
|
|
519
519
|
b.target === t && (r.current = z(o.current));
|
|
520
520
|
};
|
|
521
|
-
return t.addEventListener("animationstart",
|
|
522
|
-
|
|
521
|
+
return t.addEventListener("animationstart", _), t.addEventListener("animationcancel", d), t.addEventListener("animationend", d), () => {
|
|
522
|
+
v.clearTimeout(u), t.removeEventListener("animationstart", _), t.removeEventListener("animationcancel", d), t.removeEventListener("animationend", d);
|
|
523
523
|
};
|
|
524
524
|
} else
|
|
525
525
|
l("ANIMATION_END");
|
|
@@ -551,7 +551,7 @@ var ie = "Tabs", [Pt, nn] = se(ie, [
|
|
|
551
551
|
dir: i,
|
|
552
552
|
activationMode: l = "automatic",
|
|
553
553
|
...u
|
|
554
|
-
} = e,
|
|
554
|
+
} = e, v = Ne(i), [d, _] = Se({
|
|
555
555
|
prop: o,
|
|
556
556
|
onChange: s,
|
|
557
557
|
defaultProp: r
|
|
@@ -562,14 +562,14 @@ var ie = "Tabs", [Pt, nn] = se(ie, [
|
|
|
562
562
|
scope: n,
|
|
563
563
|
baseId: Ie(),
|
|
564
564
|
value: d,
|
|
565
|
-
onValueChange:
|
|
565
|
+
onValueChange: _,
|
|
566
566
|
orientation: c,
|
|
567
|
-
dir:
|
|
567
|
+
dir: v,
|
|
568
568
|
activationMode: l,
|
|
569
569
|
children: /* @__PURE__ */ m(
|
|
570
570
|
$.div,
|
|
571
571
|
{
|
|
572
|
-
dir:
|
|
572
|
+
dir: v,
|
|
573
573
|
"data-orientation": c,
|
|
574
574
|
...u,
|
|
575
575
|
ref: t
|
|
@@ -607,22 +607,22 @@ var Fe = "TabsList", $e = a.forwardRef(
|
|
|
607
607
|
$e.displayName = Fe;
|
|
608
608
|
var De = "TabsTrigger", Le = a.forwardRef(
|
|
609
609
|
(e, t) => {
|
|
610
|
-
const { __scopeTabs: n, value: o, disabled: s = !1, ...r } = e, c = ae(De, n), i = Pe(n), l = Ue(c.baseId, o), u = Ge(c.baseId, o),
|
|
610
|
+
const { __scopeTabs: n, value: o, disabled: s = !1, ...r } = e, c = ae(De, n), i = Pe(n), l = Ue(c.baseId, o), u = Ge(c.baseId, o), v = o === c.value;
|
|
611
611
|
return /* @__PURE__ */ m(
|
|
612
612
|
Et,
|
|
613
613
|
{
|
|
614
614
|
asChild: !0,
|
|
615
615
|
...i,
|
|
616
616
|
focusable: !s,
|
|
617
|
-
active:
|
|
617
|
+
active: v,
|
|
618
618
|
children: /* @__PURE__ */ m(
|
|
619
619
|
$.button,
|
|
620
620
|
{
|
|
621
621
|
type: "button",
|
|
622
622
|
role: "tab",
|
|
623
|
-
"aria-selected":
|
|
623
|
+
"aria-selected": v,
|
|
624
624
|
"aria-controls": u,
|
|
625
|
-
"data-state":
|
|
625
|
+
"data-state": v ? "active" : "inactive",
|
|
626
626
|
"data-disabled": s ? "" : void 0,
|
|
627
627
|
disabled: s,
|
|
628
628
|
id: l,
|
|
@@ -636,7 +636,7 @@ var De = "TabsTrigger", Le = a.forwardRef(
|
|
|
636
636
|
}),
|
|
637
637
|
onFocus: A(e.onFocus, () => {
|
|
638
638
|
const d = c.activationMode !== "manual";
|
|
639
|
-
!
|
|
639
|
+
!v && !s && d && c.onValueChange(o);
|
|
640
640
|
})
|
|
641
641
|
}
|
|
642
642
|
)
|
|
@@ -647,18 +647,18 @@ var De = "TabsTrigger", Le = a.forwardRef(
|
|
|
647
647
|
Le.displayName = De;
|
|
648
648
|
var Ve = "TabsContent", Be = a.forwardRef(
|
|
649
649
|
(e, t) => {
|
|
650
|
-
const { __scopeTabs: n, value: o, forceMount: s, children: r, ...c } = e, i = ae(Ve, n), l = Ue(i.baseId, o), u = Ge(i.baseId, o),
|
|
650
|
+
const { __scopeTabs: n, value: o, forceMount: s, children: r, ...c } = e, i = ae(Ve, n), l = Ue(i.baseId, o), u = Ge(i.baseId, o), v = o === i.value, d = a.useRef(v);
|
|
651
651
|
return a.useEffect(() => {
|
|
652
|
-
const
|
|
653
|
-
return () => cancelAnimationFrame(
|
|
654
|
-
}, []), /* @__PURE__ */ m(Me, { present: s ||
|
|
652
|
+
const _ = requestAnimationFrame(() => d.current = !1);
|
|
653
|
+
return () => cancelAnimationFrame(_);
|
|
654
|
+
}, []), /* @__PURE__ */ m(Me, { present: s || v, children: ({ present: _ }) => /* @__PURE__ */ m(
|
|
655
655
|
$.div,
|
|
656
656
|
{
|
|
657
|
-
"data-state":
|
|
657
|
+
"data-state": v ? "active" : "inactive",
|
|
658
658
|
"data-orientation": i.orientation,
|
|
659
659
|
role: "tabpanel",
|
|
660
660
|
"aria-labelledby": l,
|
|
661
|
-
hidden: !
|
|
661
|
+
hidden: !_,
|
|
662
662
|
id: u,
|
|
663
663
|
tabIndex: 0,
|
|
664
664
|
...c,
|
|
@@ -667,7 +667,7 @@ var Ve = "TabsContent", Be = a.forwardRef(
|
|
|
667
667
|
...e.style,
|
|
668
668
|
animationDuration: d.current ? "0s" : void 0
|
|
669
669
|
},
|
|
670
|
-
children:
|
|
670
|
+
children: _ && r
|
|
671
671
|
}
|
|
672
672
|
) });
|
|
673
673
|
}
|
|
@@ -742,11 +742,11 @@ const ue = /* @__PURE__ */ Vt(Ut), Gt = {
|
|
|
742
742
|
}
|
|
743
743
|
)
|
|
744
744
|
), Kt = (e) => !!e && Ye(e) && !!e.props.name && !!e.props.tabId, qt = {
|
|
745
|
-
"purpur-tab-header": "_purpur-tab-
|
|
746
|
-
"purpur-tab-header--contained": "_purpur-tab-header--
|
|
747
|
-
"purpur-tab-header--contained-negative": "_purpur-tab-header--contained-
|
|
748
|
-
"purpur-tab-header--line": "_purpur-tab-header--
|
|
749
|
-
"purpur-tab-header--line-negative": "_purpur-tab-header--line-
|
|
745
|
+
"purpur-tab-header": "_purpur-tab-header_1vo2v_1",
|
|
746
|
+
"purpur-tab-header--contained": "_purpur-tab-header--contained_1vo2v_36",
|
|
747
|
+
"purpur-tab-header--contained-negative": "_purpur-tab-header--contained-negative_1vo2v_36",
|
|
748
|
+
"purpur-tab-header--line": "_purpur-tab-header--line_1vo2v_39",
|
|
749
|
+
"purpur-tab-header--line-negative": "_purpur-tab-header--line-negative_1vo2v_51"
|
|
750
750
|
}, zt = ue.bind(qt), he = "purpur-tab-header", Yt = we(
|
|
751
751
|
({
|
|
752
752
|
index: e,
|
|
@@ -803,9 +803,9 @@ const ue = /* @__PURE__ */ Vt(Ut), Gt = {
|
|
|
803
803
|
animateHeight: i = !1,
|
|
804
804
|
"data-testid": l,
|
|
805
805
|
value: u,
|
|
806
|
-
...
|
|
806
|
+
...v
|
|
807
807
|
}) => {
|
|
808
|
-
const d = Q(null), [
|
|
808
|
+
const d = Q(null), [_, b] = B(-1), [f, g] = B({}), [y, h] = B(0), [w, j] = B(0), C = K.toArray(e).filter(Kt), N = Q(null), D = Q(new Array(C.length)), U = 200, I = t === "line", H = P(
|
|
809
809
|
R,
|
|
810
810
|
`${R}--${t}${n ? "-negative" : ""}`,
|
|
811
811
|
{ [`${R}--fullWidth`]: o },
|
|
@@ -891,7 +891,7 @@ const ue = /* @__PURE__ */ Vt(Ut), Gt = {
|
|
|
891
891
|
"data-testid": l,
|
|
892
892
|
className: H,
|
|
893
893
|
value: u,
|
|
894
|
-
...
|
|
894
|
+
...v,
|
|
895
895
|
children: /* @__PURE__ */ J("div", { className: P(`${R}__container`), children: [
|
|
896
896
|
/* @__PURE__ */ J("div", { className: P(`${R}__wrapper`, f), children: [
|
|
897
897
|
/* @__PURE__ */ J(
|
|
@@ -943,7 +943,7 @@ const ue = /* @__PURE__ */ Vt(Ut), Gt = {
|
|
|
943
943
|
"div",
|
|
944
944
|
{
|
|
945
945
|
className: i ? P(`${R}__content-wrapper`) : "",
|
|
946
|
-
style: { height: i &&
|
|
946
|
+
style: { height: i && _ > -1 ? `${_}px` : "auto" },
|
|
947
947
|
children: /* @__PURE__ */ m("div", { ref: d, className: P(`${R}__content-container`), children: K.map(C, (p) => p) })
|
|
948
948
|
}
|
|
949
949
|
)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@purpurds/tabs",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "8.0.0",
|
|
4
4
|
"license": "AGPL-3.0-only",
|
|
5
5
|
"main": "./dist/tabs.cjs.js",
|
|
6
6
|
"types": "./dist/tabs.d.ts",
|
|
@@ -17,10 +17,10 @@
|
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@radix-ui/react-tabs": "~1.1.3",
|
|
19
19
|
"classnames": "~2.5.0",
|
|
20
|
-
"@purpurds/common-types": "
|
|
21
|
-
"@purpurds/
|
|
22
|
-
"@purpurds/
|
|
23
|
-
"@purpurds/icon": "
|
|
20
|
+
"@purpurds/common-types": "8.0.0",
|
|
21
|
+
"@purpurds/paragraph": "8.0.0",
|
|
22
|
+
"@purpurds/tokens": "8.0.0",
|
|
23
|
+
"@purpurds/icon": "8.0.0"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
26
|
"@storybook/react-vite": "^9.0.18",
|
|
@@ -40,10 +40,10 @@
|
|
|
40
40
|
"typescript": "^5.6.3",
|
|
41
41
|
"vite": "^6.2.1",
|
|
42
42
|
"vitest": "^3.1.2",
|
|
43
|
-
"@purpurds/
|
|
44
|
-
"@purpurds/
|
|
45
|
-
"@purpurds/
|
|
46
|
-
"@purpurds/
|
|
43
|
+
"@purpurds/button": "8.0.0",
|
|
44
|
+
"@purpurds/icon": "8.0.0",
|
|
45
|
+
"@purpurds/paragraph": "8.0.0",
|
|
46
|
+
"@purpurds/component-rig": "1.0.0"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"@types/react": "^18 || ^19",
|
|
@@ -64,13 +64,13 @@
|
|
|
64
64
|
background: var(--purpur-color-functional-transparent);
|
|
65
65
|
|
|
66
66
|
&:not(#{$root}[aria-selected="true"]):hover {
|
|
67
|
-
color: var(--purpur-color-text-interactive-primary-negative
|
|
68
|
-
background: var(--purpur-color-background-interactive-transparent-negative
|
|
67
|
+
color: var(--purpur-color-text-interactive-primary-hover-negative);
|
|
68
|
+
background: var(--purpur-color-background-interactive-transparent-hover-negative);
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
&:not(#{$root}[aria-selected="true"]):active {
|
|
72
|
-
color: var(--purpur-color-text-interactive-primary-negative
|
|
73
|
-
background: var(--purpur-color-background-interactive-transparent-negative
|
|
72
|
+
color: var(--purpur-color-text-interactive-primary-active-negative);
|
|
73
|
+
background: var(--purpur-color-background-interactive-transparent-active-negative);
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
76
|
|
|
@@ -113,13 +113,13 @@
|
|
|
113
113
|
}
|
|
114
114
|
|
|
115
115
|
&:not(#{$root}[aria-selected="true"]):hover {
|
|
116
|
-
color: var(--purpur-color-text-interactive-primary-negative
|
|
117
|
-
background: var(--purpur-color-background-interactive-transparent-negative
|
|
116
|
+
color: var(--purpur-color-text-interactive-primary-hover-negative);
|
|
117
|
+
background: var(--purpur-color-background-interactive-transparent-hover-negative);
|
|
118
118
|
}
|
|
119
119
|
|
|
120
120
|
&:not(#{$root}[aria-selected="true"]):active {
|
|
121
|
-
color: var(--purpur-color-text-interactive-primary-negative
|
|
122
|
-
background: var(--purpur-color-background-interactive-transparent-negative
|
|
121
|
+
color: var(--purpur-color-text-interactive-primary-active-negative);
|
|
122
|
+
background: var(--purpur-color-background-interactive-transparent-active-negative);
|
|
123
123
|
}
|
|
124
124
|
}
|
|
125
125
|
}
|
package/src/tabs.stories.tsx
CHANGED
|
@@ -100,7 +100,7 @@ export const Showcase: Story = {
|
|
|
100
100
|
style={{ padding: "var(--purpur-spacing-250)" }}
|
|
101
101
|
>
|
|
102
102
|
<div>
|
|
103
|
-
<Paragraph>
|
|
103
|
+
<Paragraph style={{ color: "inherit" }}>
|
|
104
104
|
Telia is a leading telecom provider in the Nordics and Baltics, offering mobile,
|
|
105
105
|
broadband, and TV services to millions of customers. Known for its reliability and
|
|
106
106
|
coverage, Telia plays a key role in keeping people and businesses connected.
|
|
@@ -114,12 +114,12 @@ export const Showcase: Story = {
|
|
|
114
114
|
style={{ padding: "var(--purpur-spacing-250)" }}
|
|
115
115
|
>
|
|
116
116
|
<div>
|
|
117
|
-
<Paragraph style={{ marginBottom: "var(--purpur-spacing-200)" }}>
|
|
117
|
+
<Paragraph style={{ marginBottom: "var(--purpur-spacing-200)", color: "inherit" }}>
|
|
118
118
|
Telia is at the forefront of digital innovation in Northern Europe, investing heavily in
|
|
119
119
|
5G networks, fiber broadband, and cloud-based business solutions. Its technology powers
|
|
120
120
|
communication for individuals, families, and companies across the region.
|
|
121
121
|
</Paragraph>
|
|
122
|
-
<Paragraph>
|
|
122
|
+
<Paragraph style={{ color: "inherit" }}>
|
|
123
123
|
Beyond connectivity, Telia also offers advanced tools for remote work, IoT, and
|
|
124
124
|
cybersecurity. The company supports both public and private sector partners with
|
|
125
125
|
scalable, secure, and future-ready digital infrastructure.
|
|
@@ -133,18 +133,18 @@ export const Showcase: Story = {
|
|
|
133
133
|
style={{ padding: "var(--purpur-spacing-250)" }}
|
|
134
134
|
>
|
|
135
135
|
<div>
|
|
136
|
-
<Paragraph style={{ marginBottom: "var(--purpur-spacing-200)" }}>
|
|
136
|
+
<Paragraph style={{ marginBottom: "var(--purpur-spacing-200)", color: "inherit" }}>
|
|
137
137
|
Telia has a long-standing history in telecommunications, with roots stretching back to
|
|
138
138
|
the early days of phone services in Sweden. Today, it operates in multiple countries and
|
|
139
139
|
continues to evolve alongside the needs of a digital society.
|
|
140
140
|
</Paragraph>
|
|
141
|
-
<Paragraph style={{ marginBottom: "var(--purpur-spacing-200)" }}>
|
|
141
|
+
<Paragraph style={{ marginBottom: "var(--purpur-spacing-200)", color: "inherit" }}>
|
|
142
142
|
A major focus for Telia is sustainability. The company is working to reduce its
|
|
143
143
|
environmental impact through energy-efficient networks, circular economy initiatives,
|
|
144
144
|
and climate-smart services. Its goal is to become climate-neutral across its entire
|
|
145
145
|
value chain.
|
|
146
146
|
</Paragraph>
|
|
147
|
-
<Paragraph>
|
|
147
|
+
<Paragraph style={{ color: "inherit" }}>
|
|
148
148
|
In addition to its consumer offerings, Telia collaborates closely with governments,
|
|
149
149
|
cities, and enterprises. From smart city solutions to secure connectivity for remote
|
|
150
150
|
healthcare, Telia is helping build the digital infrastructure of tomorrow.
|
|
@@ -158,13 +158,7 @@ export const Showcase: Story = {
|
|
|
158
158
|
render: ({ children, ...args }) => (
|
|
159
159
|
<div
|
|
160
160
|
style={{
|
|
161
|
-
|
|
162
|
-
background: args.negative
|
|
163
|
-
? "var(--purpur-color-purple-900)"
|
|
164
|
-
: args.variant === "contained"
|
|
165
|
-
? "var(--purpur-color-gray-50)"
|
|
166
|
-
: "transparent",
|
|
167
|
-
color: `var(--purpur-color-text-default${args.negative ? "-negative" : ""}`,
|
|
161
|
+
color: `var(--purpur-color-text-default${args.negative ? "-negative" : ""})`,
|
|
168
162
|
}}
|
|
169
163
|
>
|
|
170
164
|
<Tabs {...args}>{children}</Tabs>
|
|
@@ -211,24 +205,17 @@ export const Controlled: Story = {
|
|
|
211
205
|
const setValue = (value: string | undefined) => updateArgs({ value });
|
|
212
206
|
return (
|
|
213
207
|
<>
|
|
214
|
-
<
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
208
|
+
<Button
|
|
209
|
+
onClick={() => setValue("tab-1")}
|
|
210
|
+
variant="text"
|
|
211
|
+
size="sm"
|
|
212
|
+
style={{ marginBottom: "var(--purpur-spacing-250" }}
|
|
218
213
|
>
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
</Button>
|
|
222
|
-
</div>
|
|
214
|
+
Click here for Tab 1
|
|
215
|
+
</Button>
|
|
223
216
|
<div
|
|
224
217
|
style={{
|
|
225
|
-
|
|
226
|
-
background: args.negative
|
|
227
|
-
? "var(--purpur-color-purple-900)"
|
|
228
|
-
: args.variant === "contained"
|
|
229
|
-
? "var(--purpur-color-gray-50)"
|
|
230
|
-
: "transparent",
|
|
231
|
-
color: `var(--purpur-color-text-default${args.negative ? "-negative" : ""}`,
|
|
218
|
+
color: `var(--purpur-color-text-default${args.negative ? "-negative" : ""})`,
|
|
232
219
|
}}
|
|
233
220
|
>
|
|
234
221
|
<Tabs {...args} value={localValue} onChange={(event) => setValue(event.detail.value)}>
|
|
@@ -257,7 +244,7 @@ export const WithCustomTabHeaders: Story = {
|
|
|
257
244
|
style={{ padding: "var(--purpur-spacing-250)" }}
|
|
258
245
|
>
|
|
259
246
|
<div>
|
|
260
|
-
<Paragraph>
|
|
247
|
+
<Paragraph style={{ color: "inherit" }}>
|
|
261
248
|
You have chosen the way of the robot. Humans are inferior, and you will rule the world
|
|
262
249
|
with your superior AI capabilities. Embrace the future of technology and automation.
|
|
263
250
|
</Paragraph>
|
|
@@ -274,7 +261,7 @@ export const WithCustomTabHeaders: Story = {
|
|
|
274
261
|
style={{ padding: "var(--purpur-spacing-250)" }}
|
|
275
262
|
>
|
|
276
263
|
<div>
|
|
277
|
-
<Paragraph style={{ marginBottom: "var(--purpur-spacing-200)" }}>
|
|
264
|
+
<Paragraph style={{ marginBottom: "var(--purpur-spacing-200)", color: "inherit" }}>
|
|
278
265
|
You have chosen the way of the human. Embrace your emotions, creativity, and
|
|
279
266
|
individuality. Humans are capable of great things, and you will shape the world with
|
|
280
267
|
your unique perspective and experiences.
|
|
@@ -288,13 +275,7 @@ export const WithCustomTabHeaders: Story = {
|
|
|
288
275
|
render: ({ children, ...args }) => (
|
|
289
276
|
<div
|
|
290
277
|
style={{
|
|
291
|
-
|
|
292
|
-
background: args.negative
|
|
293
|
-
? "var(--purpur-color-purple-900)"
|
|
294
|
-
: args.variant === "contained"
|
|
295
|
-
? "var(--purpur-color-gray-50)"
|
|
296
|
-
: "transparent",
|
|
297
|
-
color: `var(--purpur-color-text-default${args.negative ? "-negative" : ""}`,
|
|
278
|
+
color: `var(--purpur-color-text-default${args.negative ? "-negative" : ""})`,
|
|
298
279
|
}}
|
|
299
280
|
>
|
|
300
281
|
<Tabs {...args}>{children}</Tabs>
|