@telegraph/combobox 0.0.5 → 0.0.7
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/CHANGELOG.md +19 -0
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.mjs +137 -122
- package/dist/esm/index.mjs.map +1 -1
- package/dist/types/Combobox/Combobox.d.ts +1 -1
- package/dist/types/Combobox/Combobox.d.ts.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# @telegraph/combobox
|
|
2
2
|
|
|
3
|
+
## 0.0.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [[`387998b`](https://github.com/knocklabs/telegraph/commit/387998b7b6acc57d93d9c296d107c46ac27774ed)]:
|
|
8
|
+
- @telegraph/icon@0.0.17
|
|
9
|
+
- @telegraph/tag@0.0.28
|
|
10
|
+
- @telegraph/menu@0.0.7
|
|
11
|
+
|
|
12
|
+
## 0.0.6
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [#151](https://github.com/knocklabs/telegraph/pull/151) [`65ec224`](https://github.com/knocklabs/telegraph/commit/65ec2240453e263acdd80a278de66c5f980ca1dc) Thanks [@kylemcd](https://github.com/kylemcd)! - update menu anchor to menu trigger, enabled prop on tooltip, combobox updated to support new menu
|
|
17
|
+
|
|
18
|
+
- Updated dependencies [[`65ec224`](https://github.com/knocklabs/telegraph/commit/65ec2240453e263acdd80a278de66c5f980ca1dc)]:
|
|
19
|
+
- @telegraph/menu@0.0.6
|
|
20
|
+
- @telegraph/tag@0.0.27
|
|
21
|
+
|
|
3
22
|
## 0.0.5
|
|
4
23
|
|
|
5
24
|
### Patch Changes
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),de=require("@radix-ui/react-use-controllable-state"),ge=require("@radix-ui/react-visually-hidden"),k=require("@telegraph/icon"),u=require("react"),P=require("@telegraph/typography"),D=require("@telegraph/compose-refs"),J=require("@telegraph/helpers"),be=require("@telegraph/input"),q=require("@telegraph/menu"),N=require("@telegraph/tag"),x=require("framer-motion");function Z(r){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const e in r)if(e!=="default"){const a=Object.getOwnPropertyDescriptor(r,e);Object.defineProperty(t,e,a.get?a:{enumerable:!0,get:()=>r[e]})}}return t.default=r,Object.freeze(t)}const he=Z(ge),ye=Z(u);function ee(r){var t,e,a="";if(typeof r=="string"||typeof r=="number")a+=r;else if(typeof r=="object")if(Array.isArray(r)){var i=r.length;for(t=0;t<i;t++)r[t]&&(e=ee(r[t]))&&(a&&(a+=" "),a+=e)}else for(e in r)r[e]&&(a&&(a+=" "),a+=e);return a}function E(){for(var r,t,e=0,a="",i=arguments.length;e<i;e++)(r=arguments[e])&&(t=ee(r))&&(a&&(a+=" "),a+=t);return a}function fe(r,t){typeof r=="function"?r(t):r!=null&&(r.current=t)}function me(...r){return t=>r.forEach(e=>fe(e,t))}function te(...r){return ye.useCallback(me(...r),r)}const O=["sm","md","lg","xl","2xl"],ve=r=>{const t=[];let e=null;for(let a=0;a<O.length;a++){const i=O[a];if(r[i])e=r[i],t.push(e);else if(e!==null)t.push(e);else{let o=null;for(let n=a+1;n<O.length;n++)if(r[O[n]]){o=r[O[n]];break}if(o!==null){for(let n=0;n<=a;n++)t.push(o);e=o}}}return t},xe=r=>typeof r=="object"&&(r.sm||r.md||r.lg||r.xl||r["2xl"]),f=({value:r,prop:t})=>{if(!r)return"";if(t.valueType==="static")return r.toString();const e=t.type==="color"?"":`-${t.type}`;return r===!0?`var(--tgph${e}-${t.default})`:`var(--tgph${e}-${r})`},I={top:0,right:1,bottom:2,left:3},j={topLeft:0,topRight:1,bottomRight:2,bottomLeft:3},we=({cssVariables:r,value:t,prop:e,direction:a="all"})=>{const i=r[`--tgph-${e.rule}`]||"",o=i?i.split(" "):[],n=[(o==null?void 0:o[0])||0,(o==null?void 0:o[1])||0,(o==null?void 0:o[2])||0,(o==null?void 0:o[3])||0];return a==="all"?f({value:t,prop:e}):(e.ordering==="clockwise"?(a==="top"&&(n[j.topLeft]=f({value:t,prop:e}),n[j.topRight]=f({value:t,prop:e})),a==="right"&&(n[j.topRight]=f({value:t,prop:e}),n[j.bottomRight]=f({value:t,prop:e})),a==="bottom"&&(n[j.bottomRight]=f({value:t,prop:e}),n[j.bottomLeft]=f({value:t,prop:e})),a==="left"&&(n[j.bottomLeft]=f({value:t,prop:e}),n[j.topLeft]=f({value:t,prop:e})),(a==="topLeft"||a==="topRight"||a==="bottomRight"||a==="bottomLeft")&&(n[j[a]]=f({value:t,prop:e}))):(a==="x"&&(n[I.left]=f({value:t,prop:e}),n[I.right]=f({value:t,prop:e})),a==="y"&&(n[I.top]=f({value:t,prop:e}),n[I.bottom]=f({value:t,prop:e})),(a==="top"||a==="bottom"||a==="left"||a==="right")&&(n[I[a]]=f({value:t,prop:e}))),n.join(" "))},K=({prop:r,value:t,cssVariables:e})=>r.direction?we({cssVariables:e,prop:r,value:t,direction:r.direction,type:r.type}):f({value:t,prop:r}),re=({props:r,ref:t,propsMap:e})=>{if(!t.current)return;const a={};Object.entries(r).forEach(([i,o])=>{const n=e[i];n&&(typeof o=="string"||typeof o=="boolean"?a[`--tgph-${n.rule}`]=K({prop:n,key:i,value:o,cssVariables:a}):xe(o)&&ve(o).forEach((l,s)=>{l&&(a[`--tgph-${n.rule}-${O[s]}`]=K({prop:n,key:i,value:l,cssVariables:a}))})),Object.entries(a).forEach(([l,s])=>{t.current&&t.current.style.setProperty(l,s)})})},Y={display:{rule:"display",type:"block-display",valueType:"static"},h:{rule:"height",type:"spacing"},w:{rule:"width",type:"spacing"},maxH:{rule:"max-height",type:"spacing"},maxW:{rule:"max-width",type:"spacing"},p:{rule:"padding",type:"spacing",direction:"all"},m:{rule:"margin",type:"spacing",direction:"all"},pt:{rule:"padding",type:"spacing",direction:"top"},pl:{rule:"padding",type:"spacing",direction:"left"},pb:{rule:"padding",type:"spacing",direction:"bottom"},pr:{rule:"padding",type:"spacing",direction:"right"},px:{rule:"padding",type:"spacing",direction:"x"},py:{rule:"padding",type:"spacing",direction:"y"},mt:{rule:"margin",type:"spacing",direction:"top"},ml:{rule:"margin",type:"spacing",direction:"left"},mb:{rule:"margin",type:"spacing",direction:"bottom"},mr:{rule:"margin",type:"spacing",direction:"right"},mx:{rule:"margin",type:"spacing",direction:"x"},my:{rule:"margin",type:"spacing",direction:"y"},bg:{rule:"background-color",type:"color"},rounded:{rule:"border-radius",type:"rounded",direction:"all"},roundedTopLeft:{rule:"border-radius",type:"rounded",direction:"topLeft",ordering:"clockwise"},roundedBottomLeft:{rule:"border-radius",type:"rounded",direction:"bottomLeft",ordering:"clockwise"},roundedBottomRight:{rule:"border-radius",type:"rounded",direction:"bottomRight",ordering:"clockwise"},roundedTopRight:{rule:"border-radius",type:"rounded",direction:"topRight",ordering:"clockwise"},roundedTop:{rule:"border-radius",type:"rounded",direction:"top",ordering:"clockwise"},roundedBottom:{rule:"border-radius",type:"rounded",direction:"bottom",ordering:"clockwise"},roundedLeft:{rule:"border-radius",type:"rounded",direction:"left",ordering:"clockwise"},roundedRight:{rule:"border-radius",type:"rounded",direction:"right",ordering:"clockwise"},border:{rule:"border-width",type:"spacing",direction:"all",default:"px"},borderTop:{rule:"border-width",type:"spacing",direction:"top",default:"px"},borderLeft:{rule:"border-width",type:"spacing",direction:"left",default:"px"},borderBottom:{rule:"border-width",type:"spacing",direction:"bottom",default:"px"},borderRight:{rule:"border-width",type:"spacing",direction:"right",default:"px"},borderX:{rule:"border-width",type:"spacing",direction:"x",default:"px"},borderY:{rule:"border-width",type:"spacing",direction:"y",default:"px"},borderColor:{rule:"border-color",type:"color",default:"gray-4"},borderStyle:{rule:"border-style",type:"border-style",default:"solid"},shadow:{rule:"box-shadow",type:"shadow"}},je=({as:r,className:t,tgphRef:e,...a})=>{const i=r||"div",o=u.useRef(null),n=te(e,o),l=u.useMemo(()=>{const s={borderColor:!0,...a};return Object.keys(s).reduce((d,p)=>(Object.keys(Y).some(b=>b===p)?d.box[p]=s[p]:d.rest[p]=s[p],d),{box:{},rest:{}})},[a]);return u.useLayoutEffect(()=>{re({props:l.box,ref:o,propsMap:Y})},[l.box]),c.jsx(i,{className:E("tgph-box",t),ref:n,...l.rest})},X={display:{rule:"display",type:"flex-display",valueType:"static"},direction:{rule:"flex-direction",type:"flex-direction",valueType:"static"},align:{rule:"align-items",type:"align-items",valueType:"static"},justify:{rule:"justify-content",type:"justify-content",valueType:"static"},wrap:{rule:"flex-wrap",type:"flex-wrap",valueType:"static"},gap:{rule:"gap",type:"spacing",valueType:"variable"}},Re=({className:r,tgphRef:t,...e})=>{const a=u.useRef(null),i=te(t,a),o=u.useMemo(()=>Object.keys(e).reduce((n,l)=>(Object.keys(X).some(s=>s===l)?n.stack[l]=e[l]:n.rest[l]=e[l],n),{stack:{},rest:{}}),[e]);return u.useLayoutEffect(()=>{re({props:o.stack,ref:a,propsMap:X})},[o.stack,i]),c.jsx(je,{className:E("tgph-stack",r),tgphRef:i,...o.rest})},ke={solid:{gray:"bg-gray-9 hover:bg-gray-10 focus:bg-gray-11 data-[tgph-button-active=true]:!bg-gray-11",red:"bg-red-9 hover:bg-red-10 focus:bg-red-11 data-[tgph-button-active=true]:!bg-red-11",accent:"bg-accent-9 hover:bg-accent-10 focus:bg-accent-11 data-[tgph-button-active=true]:!bg-accent-11",green:"bg-green-9 hover:bg-green-10 focus:bg-green-11 data-[tgph-button-active=true]:!bg-green-11",blue:"bg-blue-9 hover:bg-blue-10 focus:bg-blue-11 data-[tgph-button-active=true]:!bg-blue-11",yellow:"bg-yellow-9 hover:bg-yellow-10 focus:bg-yellow-11 data-[tgph-button-active=true]:!bg-yellow-11",purple:"bg-purple-9 hover:bg-purple-10 focus:bg-purple-11 data-[tgph-button-active=true]:!bg-purple-11",disabled:"bg-gray-2"},soft:{gray:"bg-gray-3 hover:bg-gray-4 focus:bg-gray-5 data-[tgph-button-active=true]:!bg-gray-5",red:"bg-red-3 hover:bg-red-4 focus:bg-red-5 data-[tgph-button-active=true]:!bg-red-5",accent:"bg-accent-3 hover:bg-accent-4 focus:bg-accent-6 data-[tgph-button-active=true]:!bg-accent-6",green:"bg-green-3 hover:bg-green-4 focus:bg-green-5 data-[tgph-button-active=true]:!bg-green-5",blue:"bg-blue-3 hover:bg-blue-4 focus:bg-blue-5 data-[tgph-button-active=true]:!bg-blue-5",yellow:"bg-yellow-3 hover:bg-yellow-4 focus:bg-yellow-5 data-[tgph-button-active=true]:!bg-yellow-5",purple:"bg-purple-3 hover:bg-purple-4 focus:bg-purple-5 data-[tgph-button-active=true]:!bg-purple-5",disabled:"bg-gray-2"},outline:{gray:"bg-surface-1 shadow-[inset_0_0_0_1px] shadow-gray-6 hover:shadow-gray-7 focus:shadow-gray-8 data-[tgph-button-active=true]:!shadow-gray-8",red:"bg-surface-1 shadow-[inset_0_0_0_1px] shadow-red-6 hover:shadow-red-7 focus:shadow-red-8 data-[tgph-button-active=true]:!shadow-red-8",accent:"bg-surface-1 shadow-[inset_0_0_0_1px] shadow-accent-6 hover:shadow-accent-7 focus:shadow-accent-8 data-[tgph-button-active=true]:!shadow-accent-8",green:"bg-surface-1 shadow-[inset_0_0_0_1px] shadow-green-6 hover:shadow-green-7 focus:shadow-green-8 data-[tgph-button-active=true]:!shadow-green-8",blue:"bg-surface-1 shadow-[inset_0_0_0_1px] shadow-blue-6 hover:shadow-blue-7 focus:shadow-blue-8 data-[tgph-button-active=true]:!shadow-blue-8",yellow:"bg-surface-1 shadow-[inset_0_0_0_1px] shadow-yellow-6 hover:shadow-yellow-7 focus:shadow-yellow-8 data-[tgph-button-active=true]:!shadow-yellow-8",purple:"bg-surface-1 shadow-[inset_0_0_0_1px] shadow-purple-6 hover:shadow-purple-7 focus:shadow-purple-8 data-[tgph-button-active=true]:!shadow-purple-8",disabled:"bg-gray-2"},ghost:{gray:"bg-transparent hover:bg-gray-3 focus:bg-gray-4 data-[tgph-button-active=true]:!bg-gray-4 [&data-[tgph-button-active=true]>span]:!text-gray-12",red:"bg-transparent hover:bg-red-3 focus:bg-red-4 data-[tgph-button-active=true]:!bg-red-4",accent:"bg-transparent hover:bg-accent-3 focus:bg-accent-4 data-[tgph-button-active=true]:!bg-accent-4",green:"bg-transparent hover:bg-green-3 focus:bg-green-4 data-[tgph-button-active=true]:!bg-green-4",blue:"bg-transparent hover:bg-blue-3 focus:bg-blue-4 data-[tgph-button-active=true]:!bg-blue-4",yellow:"bg-transparent hover:bg-yellow-3 focus:bg-yellow-4 data-[tgph-button-active=true]:!bg-yellow-4",purple:"bg-transparent hover:bg-purple-3 focus:bg-purple-4 data-[tgph-button-active=true]:!bg-purple-4",disabled:"bg-transparent"}},$={default:{1:{w:"auto",h:"6",gap:"1",px:"2"},2:{w:"auto",h:"8",gap:"2",px:"3"},3:{w:"auto",h:"10",gap:"3",px:"4"}},"icon-only":{1:{w:"6",h:"6",gap:"0",px:"0"},2:{w:"8",h:"8",gap:"0",px:"0"},3:{w:"10",h:"10",gap:"0",px:"0"}}},Ce={1:"1",2:"2",3:"3"},Te={solid:{gray:"white",red:"white",accent:"white",green:"white",blue:"white",yellow:"white",purple:"white",disabled:"disabled"},soft:{gray:"default",red:"red",accent:"accent",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"},outline:{gray:"default",red:"red",accent:"accent",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"},ghost:{gray:"gray",red:"red",accent:"accent",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"}},Le={1:"1",2:"2",3:"3"},Se={solid:{gray:"white",red:"white",accent:"white",green:"white",blue:"white",yellow:"white",purple:"white",disabled:"disabled"},soft:{accent:"accent",gray:"gray",red:"red",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"},outline:{accent:"accent",gray:"gray",red:"red",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"},ghost:{accent:"accent",gray:"default",red:"red",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"}},Oe={default:"secondary","icon-only":"primary"},B=u.createContext({variant:"solid",size:"2",color:"gray",state:"default",layout:"default",active:!1}),oe=({as:r,variant:t="solid",size:e="2",color:a="gray",state:i="default",active:o=!1,disabled:n,className:l,...s})=>{const d=n?"disabled":i,p=d==="disabled"?"disabled":a,b=u.useMemo(()=>{var h;const g=u.Children.toArray(s==null?void 0:s.children);if((g==null?void 0:g.length)===1&&u.isValidElement(g[0])){const y=g[0];if((h=y==null?void 0:y.props)!=null&&h.icon)return"icon-only"}return"default"},[s==null?void 0:s.children]);return c.jsx(B.Provider,{value:{variant:t,size:e,color:p,state:d,layout:b,active:o},children:c.jsx(Re,{as:r||"button",className:E("appearance-none border-0 cursor-pointer bg-none box-border [font-family:inherit]","transition-colors no-underline",d==="disabled"&&"cursor-not-allowed",ke[t][p],$[b][e],l),h:$[b][e].h,w:$[b][e].w,gap:$[b][e].gap,px:$[b][e].px,display:"inline-flex",align:"center",justify:"center",rounded:"3","data-tgph-button":!0,"data-tgph-button-layout":b,"data-tgph-button-active":o,disabled:n,...s})})},z=({size:r,color:t,variant:e,icon:a,alt:i,"aria-hidden":o,...n})=>{const l=u.useContext(B),s={size:r??Le[l.size],color:t??Se[l.variant][l.color],variant:e??Oe[l.layout]};return c.jsx(k.Icon,{icon:a,"data-button-icon":!0,...i?{alt:i}:{"aria-hidden":o},...s,...n})},ae=({as:r,color:t,size:e,weight:a="medium",className:i,...o})=>{const n=u.useContext(B);return c.jsx(P.Text,{as:r||"span",color:t??Te[n.variant][n.color],size:e??Ce[n.size],weight:a,className:E("no-underline whitespace-nowrap",i),internal_optionalAs:!0,"data-button-text":!0,...o})},ne=({leadingIcon:r,trailingIcon:t,icon:e,children:a,...i})=>{const o=r||e;return c.jsxs(oe,{...i,children:[o&&c.jsx(z,{...o}),a&&c.jsx(ae,{children:a}),t&&c.jsx(z,{...t})]})};Object.assign(ne,{Root:oe,Icon:z,Text:ae});const Q=ne,_=["sm","md","lg","xl","2xl"],_e=r=>{const t=[];let e=null;for(let a=0;a<_.length;a++){const i=_[a];if(r[i])e=r[i],t.push(e);else if(e!==null)t.push(e);else{let o=null;for(let n=a+1;n<_.length;n++)if(r[_[n]]){o=r[_[n]];break}if(o!==null){for(let n=0;n<=a;n++)t.push(o);e=o}}}return t},Ee=r=>typeof r=="object"&&(r.sm||r.md||r.lg||r.xl||r["2xl"]),m=({value:r,prop:t})=>{if(!r)return"";if(t.valueType==="static")return r.toString();const e=t.type==="color"?"":`-${t.type}`;return r===!0?`var(--tgph${e}-${t.default})`:`var(--tgph${e}-${r})`},V={top:0,right:1,bottom:2,left:3},R={topLeft:0,topRight:1,bottomRight:2,bottomLeft:3},Ie=({cssVariables:r,value:t,prop:e,direction:a="all"})=>{const i=r[`--tgph-${e.rule}`]||"",o=i?i.split(" "):[],n=[(o==null?void 0:o[0])||0,(o==null?void 0:o[1])||0,(o==null?void 0:o[2])||0,(o==null?void 0:o[3])||0];return a==="all"?m({value:t,prop:e}):(e.ordering==="clockwise"?(a==="top"&&(n[R.topLeft]=m({value:t,prop:e}),n[R.topRight]=m({value:t,prop:e})),a==="right"&&(n[R.topRight]=m({value:t,prop:e}),n[R.bottomRight]=m({value:t,prop:e})),a==="bottom"&&(n[R.bottomRight]=m({value:t,prop:e}),n[R.bottomLeft]=m({value:t,prop:e})),a==="left"&&(n[R.bottomLeft]=m({value:t,prop:e}),n[R.topLeft]=m({value:t,prop:e})),(a==="topLeft"||a==="topRight"||a==="bottomRight"||a==="bottomLeft")&&(n[R[a]]=m({value:t,prop:e}))):(a==="x"&&(n[V.left]=m({value:t,prop:e}),n[V.right]=m({value:t,prop:e})),a==="y"&&(n[V.top]=m({value:t,prop:e}),n[V.bottom]=m({value:t,prop:e})),(a==="top"||a==="bottom"||a==="left"||a==="right")&&(n[V[a]]=m({value:t,prop:e}))),n.join(" "))},U=({prop:r,value:t,cssVariables:e})=>r.direction?Ie({cssVariables:e,prop:r,value:t,direction:r.direction,type:r.type}):m({value:t,prop:r}),ie=({props:r,ref:t,propsMap:e})=>{if(!t.current)return;const a={};Object.entries(r).forEach(([i,o])=>{const n=e[i];n&&(typeof o=="string"||typeof o=="boolean"?a[`--tgph-${n.rule}`]=U({prop:n,key:i,value:o,cssVariables:a}):Ee(o)&&_e(o).forEach((l,s)=>{l&&(a[`--tgph-${n.rule}-${_[s]}`]=U({prop:n,key:i,value:l,cssVariables:a}))})),Object.entries(a).forEach(([l,s])=>{t.current&&t.current.style.setProperty(l,s)})})},W={display:{rule:"display",type:"block-display",valueType:"static"},h:{rule:"height",type:"spacing"},w:{rule:"width",type:"spacing"},maxH:{rule:"max-height",type:"spacing"},maxW:{rule:"max-width",type:"spacing"},p:{rule:"padding",type:"spacing",direction:"all"},m:{rule:"margin",type:"spacing",direction:"all"},pt:{rule:"padding",type:"spacing",direction:"top"},pl:{rule:"padding",type:"spacing",direction:"left"},pb:{rule:"padding",type:"spacing",direction:"bottom"},pr:{rule:"padding",type:"spacing",direction:"right"},px:{rule:"padding",type:"spacing",direction:"x"},py:{rule:"padding",type:"spacing",direction:"y"},mt:{rule:"margin",type:"spacing",direction:"top"},ml:{rule:"margin",type:"spacing",direction:"left"},mb:{rule:"margin",type:"spacing",direction:"bottom"},mr:{rule:"margin",type:"spacing",direction:"right"},mx:{rule:"margin",type:"spacing",direction:"x"},my:{rule:"margin",type:"spacing",direction:"y"},bg:{rule:"background-color",type:"color"},rounded:{rule:"border-radius",type:"rounded",direction:"all"},roundedTopLeft:{rule:"border-radius",type:"rounded",direction:"topLeft",ordering:"clockwise"},roundedBottomLeft:{rule:"border-radius",type:"rounded",direction:"bottomLeft",ordering:"clockwise"},roundedBottomRight:{rule:"border-radius",type:"rounded",direction:"bottomRight",ordering:"clockwise"},roundedTopRight:{rule:"border-radius",type:"rounded",direction:"topRight",ordering:"clockwise"},roundedTop:{rule:"border-radius",type:"rounded",direction:"top",ordering:"clockwise"},roundedBottom:{rule:"border-radius",type:"rounded",direction:"bottom",ordering:"clockwise"},roundedLeft:{rule:"border-radius",type:"rounded",direction:"left",ordering:"clockwise"},roundedRight:{rule:"border-radius",type:"rounded",direction:"right",ordering:"clockwise"},border:{rule:"border-width",type:"spacing",direction:"all",default:"px"},borderTop:{rule:"border-width",type:"spacing",direction:"top",default:"px"},borderLeft:{rule:"border-width",type:"spacing",direction:"left",default:"px"},borderBottom:{rule:"border-width",type:"spacing",direction:"bottom",default:"px"},borderRight:{rule:"border-width",type:"spacing",direction:"right",default:"px"},borderX:{rule:"border-width",type:"spacing",direction:"x",default:"px"},borderY:{rule:"border-width",type:"spacing",direction:"y",default:"px"},borderColor:{rule:"border-color",type:"color",default:"gray-4"},borderStyle:{rule:"border-style",type:"border-style",default:"solid"},shadow:{rule:"box-shadow",type:"shadow"}},F=({as:r,className:t,tgphRef:e,...a})=>{const i=r||"div",o=u.useRef(null),n=D.useComposedRefs(e,o),l=u.useMemo(()=>{const s={borderColor:!0,...a};return Object.keys(s).reduce((d,p)=>(Object.keys(W).some(b=>b===p)?d.box[p]=s[p]:d.rest[p]=s[p],d),{box:{},rest:{}})},[a]);return u.useLayoutEffect(()=>{ie({props:l.box,ref:o,propsMap:W})},[l.box]),c.jsx(i,{className:E("tgph-box",t),ref:n,...l.rest})},G={display:{rule:"display",type:"flex-display",valueType:"static"},direction:{rule:"flex-direction",type:"flex-direction",valueType:"static"},align:{rule:"align-items",type:"align-items",valueType:"static"},justify:{rule:"justify-content",type:"justify-content",valueType:"static"},wrap:{rule:"flex-wrap",type:"flex-wrap",valueType:"static"},gap:{rule:"gap",type:"spacing",valueType:"variable"}},S=({className:r,tgphRef:t,...e})=>{const a=u.useRef(null),i=D.useComposedRefs(t,a),o=u.useMemo(()=>Object.keys(e).reduce((n,l)=>(Object.keys(G).some(s=>s===l)?n.stack[l]=e[l]:n.rest[l]=e[l],n),{stack:{},rest:{}}),[e]);return u.useLayoutEffect(()=>{ie({props:o.stack,ref:a,propsMap:G})},[o.stack,i]),c.jsx(F,{className:E("tgph-stack",r),tgphRef:i,...o.rest})},A=r=>Array.isArray(r),H=r=>typeof r=="object"&&!Array.isArray(r),$e=["ArrowDown","PageUp","Home"],Ve=["ArrowUp","PageDown","End"],le=["Enter"," "],w=u.createContext({onValueChange:()=>{},contentId:"",triggerId:"",open:!1,setOpen:()=>{},onOpenToggle:()=>{}}),Ae=({modal:r=!0,closeOnSelect:t=!0,open:e,onOpenChange:a,defaultOpen:i,value:o,onValueChange:n,errored:l,placeholder:s,layout:d,...p})=>{const b=u.useId(),h=u.useId(),g=u.useRef(null),y=u.useRef(null),v=u.useRef(null),[C,T]=u.useState(""),[L=!1,M]=de.useControllableState({prop:e,defaultProp:i,onChange:a}),ue=u.useCallback(()=>{M(pe=>!pe)},[M]);return u.useEffect(()=>{L||T("")},[L]),c.jsx(w.Provider,{value:{contentId:b,triggerId:h,value:o,onValueChange:n,placeholder:s,open:L,setOpen:M,onOpenToggle:ue,closeOnSelect:t,searchQuery:C,setSearchQuery:T,triggerRef:g,searchRef:y,contentRef:v,errored:l,layout:d},children:c.jsx(q.Menu.Root,{open:L,onOpenChange:M,modal:r,...p})})},Qe=({label:r,value:t,...e})=>{const a=u.useContext(w);return c.jsxs(N.Tag.Root,{size:"1",as:x.motion.span,initial:{opacity:0,transform:"scale(0.8)"},animate:{opacity:1,transform:"scale(1)"},exit:{opacity:0,transform:"scale(0.5)"},layout:"position",transition:{duration:.2,type:"spring",bounce:0,layout:{duration:.05,type:"spring",bounce:0}},...e,children:[c.jsx(N.Tag.Text,{children:r||t}),c.jsx(N.Tag.Button,{icon:{icon:k.Lucide.X,alt:`Remove ${t}`},onClick:i=>{const o=a.onValueChange,l=a.value.filter(s=>s.value!==t);o(l),i.stopPropagation(),i.preventDefault()}})]})},Me=({size:r="1"})=>{var a,i;const t=u.useContext(w),e=r==="1"?"6":r==="2"?"8":"10";if(t.value&&A(t.value)){const o=t.value,n=t.layout||"truncate",l=o.length-2,s=l.toString().split("");return o.length===0?c.jsx(S,{h:e,align:"center",my:"1",children:c.jsx(Q.Text,{color:"gray",children:t.placeholder})}):c.jsxs(S,{gap:"1",w:"full",my:"1",wrap:n==="wrap"?"wrap":"nowrap",align:"center",style:{position:"relative",flexGrow:1},children:[c.jsx(x.AnimatePresence,{initial:!1,mode:"popLayout",children:o.map((d,p)=>{if(n==="truncate"&&p<=1||n==="wrap")return c.jsx(J.RefToTgphRef,{children:c.jsx(Qe,{...d})},d.value)})}),c.jsx(x.AnimatePresence,{children:n==="truncate"&&o.length>2&&c.jsx(S,{as:x.motion.div,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.2,type:"spring",bounce:0},h:"full",pr:"1",pl:"8",align:"center","aria-label":`${l} more selected`,style:{position:"absolute",right:0,backgroundImage:"linear-gradient(to left, var(--tgph-surface-1) 0 60%, transparent 90% 100%)"},children:c.jsxs(P.Text,{as:"span",size:"1",style:{whiteSpace:"nowrap"},children:["+",c.jsx(x.AnimatePresence,{mode:"wait",initial:!1,children:s.map(d=>c.jsx(F,{as:x.motion.span,w:"2",display:"inline-block",initial:{opacity:.5},animate:{opacity:1},exit:{opacity:.5},transition:{duration:.1,type:"spring",bounce:0},children:d},d))})," ","more"]})},"truncated text")})]})}return c.jsx(S,{h:e,align:"center",my:"1",children:c.jsx(Q.Text,{color:t.value?"default":"gray",children:((a=t==null?void 0:t.value)==null?void 0:a.label)||((i=t==null?void 0:t.value)==null?void 0:i.value)||t.placeholder})})},Pe=({size:r="1",...t})=>{const e=u.useContext(w),a=u.useCallback(()=>{var i,o,n;return e.value?H(e.value)?((i=e.value)==null?void 0:i.label)||((o=e.value)==null?void 0:o.value)||e.placeholder:((n=e.value)==null?void 0:n.map(l=>l.label).join(", "))||e.placeholder:e.placeholder},[e.value,e.placeholder]);return c.jsx(q.Menu.Anchor,{...t,asChild:!0,onClick:i=>{var o,n;i.preventDefault(),e.onOpenToggle(),(n=(o=e.triggerRef)==null?void 0:o.current)==null||n.focus()},onKeyDown:i=>{if(i.key==="Tab"){i.stopPropagation();return}if(le.includes(i.key)){i.preventDefault();return}if(i.key==="ArrowDown"){e.onOpenToggle();return}},tgphRef:e.triggerRef,children:c.jsx(J.RefToTgphRef,{children:c.jsxs(Q.Root,{id:e.triggerId,bg:"surface-1",variant:"outline",w:"full",h:"full",color:e.errored?"red":"gray",justify:"space-between",role:"combobox","aria-label":a(),"aria-controls":e.contentId,"aria-expanded":e.open,"aria-haspopup":"listbox","data-tgph-combobox-trigger":!0,"data-tgph-comobox-trigger-open":e.open,children:[c.jsx(Me,{size:r}),c.jsx(Q.Icon,{as:x.motion.div,icon:k.Lucide.ChevronDown,animate:{rotate:e.open?"180deg":"0deg"},transition:{duration:.2,type:"spring",bounce:0},"aria-hidden":!0})]})})})},De=({tgphRef:r,style:t,children:e,...a})=>{const i=u.useContext(w),o=u.useRef(!1),n=D.useComposedRefs(r,i.contentRef),l=u.useRef(null),[s,d]=u.useState(0),[p,b]=u.useState(!1),h=u.useCallback(g=>{const y=g.getBoundingClientRect();y&&d(y.height),p||b(!0)},[p]);return u.useEffect(()=>{const g=new ResizeObserver(y=>{for(const v of y){const C=v.target;h(C)}});return l.current&&p&&g.observe(l.current),()=>g.disconnect()},[p,h]),u.useEffect(()=>{p===!0&&i.open===!1&&b(!1)},[i.open,p]),c.jsx(q.Menu.Content,{as:x.motion.div,mt:"1",initial:{opacity:0,scale:.8,height:"auto"},animate:{opacity:1,scale:1,minHeight:s?`${s}px`:"0"},exit:{opacity:0,scale:0},transition:{duration:.2,type:"spring",bounce:0},onInteractOutside:()=>{i.setOpen(!1),o.current=!0},onAnimationComplete:()=>{if(!p&&l){const g=l.current;h(g)}},onCloseAutoFocus:g=>{var y,v;o.current||(v=(y=i.triggerRef)==null?void 0:y.current)==null||v.focus(),o.current=!1,g.preventDefault()},onKeyDown:g=>{var v,C,T,L;const y=(C=(v=i.contentRef)==null?void 0:v.current)==null?void 0:C.querySelectorAll("[data-tgph-combobox-option]");document.activeElement===(y==null?void 0:y[0])&&Ve.includes(g.key)&&((L=(T=i.searchRef)==null?void 0:T.current)==null||L.focus()),g.key==="Escape"&&i.setOpen(!1),g.stopPropagation()},bg:"surface-1",style:{width:"var(--tgph-comobobox-trigger-width)",...t,"--tgph-comobobox-content-transform-origin":"var(--radix-popper-transform-origin)","--tgph-combobox-content-available-width":"var(--radix-popper-available-width)","--tgph-combobox-content-available-height":"calc(var(--radix-popper-available-height) - var(--tgph-spacing-8))","--tgph-comobobox-trigger-width":"var(--radix-popper-anchor-width)","--tgph-combobox-trigger-height":"var(--radix-popper-anchor-height)"},...a,tgphRef:n,"data-tgph-combobox-content":!0,"data-tgph-combobox-content-open":p,role:void 0,"aria-orientation":void 0,children:c.jsx(S,{direction:"column",gap:"1",tgphRef:l,children:e})})},qe=({...r})=>{const t=u.useContext(w);return c.jsx(S,{id:t.contentId,direction:"column",gap:"1",style:{overflowY:"auto",maxHeight:"calc(var(--tgph-combobox-content-available-height) - var(--tgph-spacing-12))"},role:"listbox",...r})},se=({value:r,label:t,selected:e,onSelect:a,...i})=>{const o=u.useContext(w),[n,l]=u.useState(!1),s=o.value??[],d=(A(s),!o.searchQuery||r.toLowerCase().includes(o.searchQuery.toLowerCase())),p=A(s)?s.some(h=>h.value===r):s.value===r,b=h=>{var g,y;if(!(h.key&&!le.includes(h.key))){if(h.stopPropagation(),h.preventDefault(),o.closeOnSelect===!0&&o.setOpen(!1),a)return a(h);if(A(s)){const v=o.onValueChange,C=p?s.filter(T=>T.value!==r):[...s,{value:r,label:t}];v(C)}else if(H(s)){const v=o.onValueChange;v({value:r,label:t})}(y=(g=o.triggerRef)==null?void 0:g.current)==null||y.focus()}};if(d)return c.jsx(q.Menu.Button,{type:"button",onSelect:b,onKeyDown:b,selected:e===null?null:e??p,onFocus:()=>l(!0),onBlur:()=>l(!1),role:"option","aria-selected":p?"true":"false","data-tgph-combobox-option":!0,"data-tgph-combobox-option-focused":n,"data-tgph-combobox-option-value":r,"data-tgph-combobox-option-label":t,...i,children:t||r})},Ne=({label:r="Search",placeholder:t="Search",tgphRef:e,...a})=>{var l;const i=u.useId(),o=u.useContext(w),n=D.useComposedRefs(e,o.searchRef);return u.useEffect(()=>{var p;const s=b=>{var h,g;$e.includes(b.key)&&((g=(h=o.contentRef)==null?void 0:h.current)==null||g.focus({preventScroll:!0})),b.key==="Escape"&&o.setOpen(!1),b.stopPropagation()},d=(p=o.searchRef)==null?void 0:p.current;if(d)return d.addEventListener("keydown",s),()=>{d.removeEventListener("keydown",s)}},[o]),c.jsxs(F,{borderBottom:!0,px:"1",pb:"1",children:[c.jsx(he.Root,{children:c.jsx(P.Text,{as:"label",htmlFor:i,children:r})}),c.jsx(be.Input,{id:i,variant:"ghost",placeholder:t,value:o.searchQuery,onChange:s=>{var d;(d=o==null?void 0:o.setSearchQuery)==null||d.call(o,s.target.value)},LeadingComponent:c.jsx(k.Icon,{icon:k.Lucide.Search,alt:"Search Icon"}),TrailingComponent:o!=null&&o.searchQuery&&((l=o==null?void 0:o.searchQuery)==null?void 0:l.length)>0?c.jsx(Q,{as:x.motion.button,initial:{opacity:0},animate:{opacity:1},transition:{duration:.2,type:"spring",bounce:0},variant:"ghost",color:"gray",icon:{icon:k.Lucide.X,alt:"Clear Search Query"},onClick:()=>{var s;return(s=o.setSearchQuery)==null?void 0:s.call(o,"")}}):null,autoFocus:!0,"data-tgph-combobox-search":!0,"aria-controls":o.contentId,...a,tgphRef:n})]})},ze=({icon:r={icon:k.Lucide.Search,alt:"Search Icon"},message:t="No results found",children:e,...a})=>{const i=u.useContext(w),[o,n]=u.useState(!1);if(u.useEffect(()=>{var s,d;const l=(d=(s=i.contentRef)==null?void 0:s.current)==null?void 0:d.querySelectorAll("[data-tgph-combobox-option]");(l==null?void 0:l.length)===0?n(!0):n(!1)},[i.searchQuery,i.contentRef,e]),o)return c.jsxs(S,{as:x.motion.div,initial:{opacity:0,scale:.8},animate:{opacity:1,scale:1},transition:{duration:.2,type:"spring",bounce:0},gap:"1",align:"center",justify:"center",w:"full",my:"8","data-tgph-combobox-empty":!0,...a,children:[r===null?c.jsx(c.Fragment,{}):c.jsx(k.Icon,{...r}),t===null?c.jsx(c.Fragment,{}):c.jsx(P.Text,{as:"span",children:t})]})},Be=({leadingText:r="Create",values:t,onCreate:e,selected:a=null,...i})=>{const o=u.useContext(w),n=u.useCallback(l=>!t||(t==null?void 0:t.length)===0?!1:t.some(s=>s.value===l),[t]);if(o.searchQuery&&!n(o.searchQuery))return c.jsx(se,{leadingIcon:{icon:k.Lucide.Plus,"aria-hidden":!0},mx:"1",value:o.searchQuery,label:`${r} "${o.searchQuery}"`,selected:a,onSelect:()=>{var l;e&&o.value&&o.searchQuery&&(H(o.value)&&e({value:o.searchQuery}),A(o.value)&&e({value:o.searchQuery}),(l=o.setSearchQuery)==null||l.call(o,""))},...i})},ce={};Object.assign(ce,{Root:Ae,Trigger:Pe,Content:De,Options:qe,Option:se,Search:Ne,Empty:ze,Create:Be});exports.Combobox=ce;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),pe=require("@radix-ui/react-use-controllable-state"),de=require("@radix-ui/react-visually-hidden"),T=require("@telegraph/icon"),u=require("react"),P=require("@telegraph/typography"),D=require("@telegraph/compose-refs"),ge=require("@telegraph/helpers"),be=require("@telegraph/input"),q=require("@telegraph/menu"),N=require("@telegraph/tag"),w=require("framer-motion");function J(r){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const e in r)if(e!=="default"){const a=Object.getOwnPropertyDescriptor(r,e);Object.defineProperty(t,e,a.get?a:{enumerable:!0,get:()=>r[e]})}}return t.default=r,Object.freeze(t)}const he=J(de),ye=J(u);function Z(r){var t,e,a="";if(typeof r=="string"||typeof r=="number")a+=r;else if(typeof r=="object")if(Array.isArray(r)){var i=r.length;for(t=0;t<i;t++)r[t]&&(e=Z(r[t]))&&(a&&(a+=" "),a+=e)}else for(e in r)r[e]&&(a&&(a+=" "),a+=e);return a}function E(){for(var r,t,e=0,a="",i=arguments.length;e<i;e++)(r=arguments[e])&&(t=Z(r))&&(a&&(a+=" "),a+=t);return a}function fe(r,t){typeof r=="function"?r(t):r!=null&&(r.current=t)}function me(...r){return t=>r.forEach(e=>fe(e,t))}function ee(...r){return ye.useCallback(me(...r),r)}const O=["sm","md","lg","xl","2xl"],ve=r=>{const t=[];let e=null;for(let a=0;a<O.length;a++){const i=O[a];if(r[i])e=r[i],t.push(e);else if(e!==null)t.push(e);else{let o=null;for(let n=a+1;n<O.length;n++)if(r[O[n]]){o=r[O[n]];break}if(o!==null){for(let n=0;n<=a;n++)t.push(o);e=o}}}return t},xe=r=>typeof r=="object"&&(r.sm||r.md||r.lg||r.xl||r["2xl"]),f=({value:r,prop:t})=>{if(!r)return"";if(t.valueType==="static")return r.toString();const e=t.type==="color"?"":`-${t.type}`;return r===!0?`var(--tgph${e}-${t.default})`:`var(--tgph${e}-${r})`},I={top:0,right:1,bottom:2,left:3},k={topLeft:0,topRight:1,bottomRight:2,bottomLeft:3},we=({cssVariables:r,value:t,prop:e,direction:a="all"})=>{const i=r[`--tgph-${e.rule}`]||"",o=i?i.split(" "):[],n=[(o==null?void 0:o[0])||0,(o==null?void 0:o[1])||0,(o==null?void 0:o[2])||0,(o==null?void 0:o[3])||0];return a==="all"?f({value:t,prop:e}):(e.ordering==="clockwise"?(a==="top"&&(n[k.topLeft]=f({value:t,prop:e}),n[k.topRight]=f({value:t,prop:e})),a==="right"&&(n[k.topRight]=f({value:t,prop:e}),n[k.bottomRight]=f({value:t,prop:e})),a==="bottom"&&(n[k.bottomRight]=f({value:t,prop:e}),n[k.bottomLeft]=f({value:t,prop:e})),a==="left"&&(n[k.bottomLeft]=f({value:t,prop:e}),n[k.topLeft]=f({value:t,prop:e})),(a==="topLeft"||a==="topRight"||a==="bottomRight"||a==="bottomLeft")&&(n[k[a]]=f({value:t,prop:e}))):(a==="x"&&(n[I.left]=f({value:t,prop:e}),n[I.right]=f({value:t,prop:e})),a==="y"&&(n[I.top]=f({value:t,prop:e}),n[I.bottom]=f({value:t,prop:e})),(a==="top"||a==="bottom"||a==="left"||a==="right")&&(n[I[a]]=f({value:t,prop:e}))),n.join(" "))},K=({prop:r,value:t,cssVariables:e})=>r.direction?we({cssVariables:e,prop:r,value:t,direction:r.direction,type:r.type}):f({value:t,prop:r}),te=({props:r,ref:t,propsMap:e})=>{if(!t.current)return;const a={};Object.entries(r).forEach(([i,o])=>{const n=e[i];n&&(typeof o=="string"||typeof o=="boolean"?a[`--tgph-${n.rule}`]=K({prop:n,key:i,value:o,cssVariables:a}):xe(o)&&ve(o).forEach((l,s)=>{l&&(a[`--tgph-${n.rule}-${O[s]}`]=K({prop:n,key:i,value:l,cssVariables:a}))})),Object.entries(a).forEach(([l,s])=>{t.current&&t.current.style.setProperty(l,s)})})},Y={display:{rule:"display",type:"block-display",valueType:"static"},h:{rule:"height",type:"spacing"},w:{rule:"width",type:"spacing"},maxH:{rule:"max-height",type:"spacing"},maxW:{rule:"max-width",type:"spacing"},p:{rule:"padding",type:"spacing",direction:"all"},m:{rule:"margin",type:"spacing",direction:"all"},pt:{rule:"padding",type:"spacing",direction:"top"},pl:{rule:"padding",type:"spacing",direction:"left"},pb:{rule:"padding",type:"spacing",direction:"bottom"},pr:{rule:"padding",type:"spacing",direction:"right"},px:{rule:"padding",type:"spacing",direction:"x"},py:{rule:"padding",type:"spacing",direction:"y"},mt:{rule:"margin",type:"spacing",direction:"top"},ml:{rule:"margin",type:"spacing",direction:"left"},mb:{rule:"margin",type:"spacing",direction:"bottom"},mr:{rule:"margin",type:"spacing",direction:"right"},mx:{rule:"margin",type:"spacing",direction:"x"},my:{rule:"margin",type:"spacing",direction:"y"},bg:{rule:"background-color",type:"color"},rounded:{rule:"border-radius",type:"rounded",direction:"all"},roundedTopLeft:{rule:"border-radius",type:"rounded",direction:"topLeft",ordering:"clockwise"},roundedBottomLeft:{rule:"border-radius",type:"rounded",direction:"bottomLeft",ordering:"clockwise"},roundedBottomRight:{rule:"border-radius",type:"rounded",direction:"bottomRight",ordering:"clockwise"},roundedTopRight:{rule:"border-radius",type:"rounded",direction:"topRight",ordering:"clockwise"},roundedTop:{rule:"border-radius",type:"rounded",direction:"top",ordering:"clockwise"},roundedBottom:{rule:"border-radius",type:"rounded",direction:"bottom",ordering:"clockwise"},roundedLeft:{rule:"border-radius",type:"rounded",direction:"left",ordering:"clockwise"},roundedRight:{rule:"border-radius",type:"rounded",direction:"right",ordering:"clockwise"},border:{rule:"border-width",type:"spacing",direction:"all",default:"px"},borderTop:{rule:"border-width",type:"spacing",direction:"top",default:"px"},borderLeft:{rule:"border-width",type:"spacing",direction:"left",default:"px"},borderBottom:{rule:"border-width",type:"spacing",direction:"bottom",default:"px"},borderRight:{rule:"border-width",type:"spacing",direction:"right",default:"px"},borderX:{rule:"border-width",type:"spacing",direction:"x",default:"px"},borderY:{rule:"border-width",type:"spacing",direction:"y",default:"px"},borderColor:{rule:"border-color",type:"color",default:"gray-4"},borderStyle:{rule:"border-style",type:"border-style",default:"solid"},shadow:{rule:"box-shadow",type:"shadow"}},je=({as:r,className:t,tgphRef:e,...a})=>{const i=r||"div",o=u.useRef(null),n=ee(e,o),l=u.useMemo(()=>{const s={borderColor:!0,...a};return Object.keys(s).reduce((d,p)=>(Object.keys(Y).some(b=>b===p)?d.box[p]=s[p]:d.rest[p]=s[p],d),{box:{},rest:{}})},[a]);return u.useLayoutEffect(()=>{te({props:l.box,ref:o,propsMap:Y})},[l.box]),c.jsx(i,{className:E("tgph-box",t),ref:n,...l.rest})},X={display:{rule:"display",type:"flex-display",valueType:"static"},direction:{rule:"flex-direction",type:"flex-direction",valueType:"static"},align:{rule:"align-items",type:"align-items",valueType:"static"},justify:{rule:"justify-content",type:"justify-content",valueType:"static"},wrap:{rule:"flex-wrap",type:"flex-wrap",valueType:"static"},gap:{rule:"gap",type:"spacing",valueType:"variable"}},Re=({className:r,tgphRef:t,...e})=>{const a=u.useRef(null),i=ee(t,a),o=u.useMemo(()=>Object.keys(e).reduce((n,l)=>(Object.keys(X).some(s=>s===l)?n.stack[l]=e[l]:n.rest[l]=e[l],n),{stack:{},rest:{}}),[e]);return u.useLayoutEffect(()=>{te({props:o.stack,ref:a,propsMap:X})},[o.stack,i]),c.jsx(je,{className:E("tgph-stack",r),tgphRef:i,...o.rest})},ke={solid:{gray:"bg-gray-9 hover:bg-gray-10 focus:bg-gray-11 data-[tgph-button-active=true]:!bg-gray-11",red:"bg-red-9 hover:bg-red-10 focus:bg-red-11 data-[tgph-button-active=true]:!bg-red-11",accent:"bg-accent-9 hover:bg-accent-10 focus:bg-accent-11 data-[tgph-button-active=true]:!bg-accent-11",green:"bg-green-9 hover:bg-green-10 focus:bg-green-11 data-[tgph-button-active=true]:!bg-green-11",blue:"bg-blue-9 hover:bg-blue-10 focus:bg-blue-11 data-[tgph-button-active=true]:!bg-blue-11",yellow:"bg-yellow-9 hover:bg-yellow-10 focus:bg-yellow-11 data-[tgph-button-active=true]:!bg-yellow-11",purple:"bg-purple-9 hover:bg-purple-10 focus:bg-purple-11 data-[tgph-button-active=true]:!bg-purple-11",disabled:"bg-gray-2"},soft:{gray:"bg-gray-3 hover:bg-gray-4 focus:bg-gray-5 data-[tgph-button-active=true]:!bg-gray-5",red:"bg-red-3 hover:bg-red-4 focus:bg-red-5 data-[tgph-button-active=true]:!bg-red-5",accent:"bg-accent-3 hover:bg-accent-4 focus:bg-accent-6 data-[tgph-button-active=true]:!bg-accent-6",green:"bg-green-3 hover:bg-green-4 focus:bg-green-5 data-[tgph-button-active=true]:!bg-green-5",blue:"bg-blue-3 hover:bg-blue-4 focus:bg-blue-5 data-[tgph-button-active=true]:!bg-blue-5",yellow:"bg-yellow-3 hover:bg-yellow-4 focus:bg-yellow-5 data-[tgph-button-active=true]:!bg-yellow-5",purple:"bg-purple-3 hover:bg-purple-4 focus:bg-purple-5 data-[tgph-button-active=true]:!bg-purple-5",disabled:"bg-gray-2"},outline:{gray:"bg-surface-1 shadow-[inset_0_0_0_1px] shadow-gray-6 hover:shadow-gray-7 focus:shadow-gray-8 data-[tgph-button-active=true]:!shadow-gray-8",red:"bg-surface-1 shadow-[inset_0_0_0_1px] shadow-red-6 hover:shadow-red-7 focus:shadow-red-8 data-[tgph-button-active=true]:!shadow-red-8",accent:"bg-surface-1 shadow-[inset_0_0_0_1px] shadow-accent-6 hover:shadow-accent-7 focus:shadow-accent-8 data-[tgph-button-active=true]:!shadow-accent-8",green:"bg-surface-1 shadow-[inset_0_0_0_1px] shadow-green-6 hover:shadow-green-7 focus:shadow-green-8 data-[tgph-button-active=true]:!shadow-green-8",blue:"bg-surface-1 shadow-[inset_0_0_0_1px] shadow-blue-6 hover:shadow-blue-7 focus:shadow-blue-8 data-[tgph-button-active=true]:!shadow-blue-8",yellow:"bg-surface-1 shadow-[inset_0_0_0_1px] shadow-yellow-6 hover:shadow-yellow-7 focus:shadow-yellow-8 data-[tgph-button-active=true]:!shadow-yellow-8",purple:"bg-surface-1 shadow-[inset_0_0_0_1px] shadow-purple-6 hover:shadow-purple-7 focus:shadow-purple-8 data-[tgph-button-active=true]:!shadow-purple-8",disabled:"bg-gray-2"},ghost:{gray:"bg-transparent hover:bg-gray-3 focus:bg-gray-4 data-[tgph-button-active=true]:!bg-gray-4 [&data-[tgph-button-active=true]>span]:!text-gray-12",red:"bg-transparent hover:bg-red-3 focus:bg-red-4 data-[tgph-button-active=true]:!bg-red-4",accent:"bg-transparent hover:bg-accent-3 focus:bg-accent-4 data-[tgph-button-active=true]:!bg-accent-4",green:"bg-transparent hover:bg-green-3 focus:bg-green-4 data-[tgph-button-active=true]:!bg-green-4",blue:"bg-transparent hover:bg-blue-3 focus:bg-blue-4 data-[tgph-button-active=true]:!bg-blue-4",yellow:"bg-transparent hover:bg-yellow-3 focus:bg-yellow-4 data-[tgph-button-active=true]:!bg-yellow-4",purple:"bg-transparent hover:bg-purple-3 focus:bg-purple-4 data-[tgph-button-active=true]:!bg-purple-4",disabled:"bg-transparent"}},$={default:{0:{w:"auto",h:"5",gap:"1",px:"1"},1:{w:"auto",h:"6",gap:"1",px:"2"},2:{w:"auto",h:"8",gap:"2",px:"3"},3:{w:"auto",h:"10",gap:"3",px:"4"}},"icon-only":{0:{w:"5",h:"5",gap:"0",px:"0"},1:{w:"6",h:"6",gap:"0",px:"0"},2:{w:"8",h:"8",gap:"0",px:"0"},3:{w:"10",h:"10",gap:"0",px:"0"}}},Ce={0:"0",1:"1",2:"2",3:"3"},Te={solid:{gray:"white",red:"white",accent:"white",green:"white",blue:"white",yellow:"white",purple:"white",disabled:"disabled"},soft:{gray:"default",red:"red",accent:"accent",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"},outline:{gray:"default",red:"red",accent:"accent",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"},ghost:{gray:"gray",red:"red",accent:"accent",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"}},Le={0:"0",1:"1",2:"2",3:"3"},Se={solid:{gray:"white",red:"white",accent:"white",green:"white",blue:"white",yellow:"white",purple:"white",disabled:"disabled"},soft:{accent:"accent",gray:"gray",red:"red",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"},outline:{accent:"accent",gray:"gray",red:"red",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"},ghost:{accent:"accent",gray:"default",red:"red",green:"green",blue:"blue",yellow:"yellow",purple:"purple",disabled:"disabled"}},Oe={default:"secondary","icon-only":"primary"},B=u.createContext({variant:"solid",size:"2",color:"gray",state:"default",layout:"default",active:!1}),re=({as:r,variant:t="solid",size:e="2",color:a="gray",state:i="default",active:o=!1,disabled:n,className:l,...s})=>{const d=n?"disabled":i,p=d==="disabled"?"disabled":a,b=u.useMemo(()=>{var y;const g=u.Children.toArray(s==null?void 0:s.children);if((g==null?void 0:g.length)===1&&u.isValidElement(g[0])){const h=g[0];if((y=h==null?void 0:h.props)!=null&&y.icon)return"icon-only"}return"default"},[s==null?void 0:s.children]);return c.jsx(B.Provider,{value:{variant:t,size:e,color:p,state:d,layout:b,active:o},children:c.jsx(Re,{as:r||"button",className:E("appearance-none border-0 cursor-pointer bg-none box-border [font-family:inherit]","transition-colors no-underline",d==="disabled"&&"cursor-not-allowed",ke[t][p],$[b][e],l),h:$[b][e].h,w:$[b][e].w,gap:$[b][e].gap,px:$[b][e].px,display:"inline-flex",align:"center",justify:"center",rounded:"3","data-tgph-button":!0,"data-tgph-button-layout":b,"data-tgph-button-active":o,disabled:n,...s})})},z=({size:r,color:t,variant:e,icon:a,alt:i,"aria-hidden":o,...n})=>{const l=u.useContext(B),s={size:r??Le[l.size],color:t??Se[l.variant][l.color],variant:e??Oe[l.layout]};return c.jsx(T.Icon,{icon:a,"data-button-icon":!0,...i?{alt:i}:{"aria-hidden":o},...s,...n})},oe=({as:r,color:t,size:e,weight:a="medium",className:i,...o})=>{const n=u.useContext(B);return c.jsx(P.Text,{as:r||"span",color:t??Te[n.variant][n.color],size:e??Ce[n.size],weight:a,className:E("no-underline whitespace-nowrap",i),internal_optionalAs:!0,"data-button-text":!0,...o})},ae=({leadingIcon:r,trailingIcon:t,icon:e,children:a,...i})=>{const o=r||e;return c.jsxs(re,{...i,children:[o&&c.jsx(z,{...o}),a&&c.jsx(oe,{children:a}),t&&c.jsx(z,{...t})]})};Object.assign(ae,{Root:re,Icon:z,Text:oe});const Q=ae,_=["sm","md","lg","xl","2xl"],_e=r=>{const t=[];let e=null;for(let a=0;a<_.length;a++){const i=_[a];if(r[i])e=r[i],t.push(e);else if(e!==null)t.push(e);else{let o=null;for(let n=a+1;n<_.length;n++)if(r[_[n]]){o=r[_[n]];break}if(o!==null){for(let n=0;n<=a;n++)t.push(o);e=o}}}return t},Ee=r=>typeof r=="object"&&(r.sm||r.md||r.lg||r.xl||r["2xl"]),m=({value:r,prop:t})=>{if(!r)return"";if(t.valueType==="static")return r.toString();const e=t.type==="color"?"":`-${t.type}`;return r===!0?`var(--tgph${e}-${t.default})`:`var(--tgph${e}-${r})`},V={top:0,right:1,bottom:2,left:3},C={topLeft:0,topRight:1,bottomRight:2,bottomLeft:3},Ie=({cssVariables:r,value:t,prop:e,direction:a="all"})=>{const i=r[`--tgph-${e.rule}`]||"",o=i?i.split(" "):[],n=[(o==null?void 0:o[0])||0,(o==null?void 0:o[1])||0,(o==null?void 0:o[2])||0,(o==null?void 0:o[3])||0];return a==="all"?m({value:t,prop:e}):(e.ordering==="clockwise"?(a==="top"&&(n[C.topLeft]=m({value:t,prop:e}),n[C.topRight]=m({value:t,prop:e})),a==="right"&&(n[C.topRight]=m({value:t,prop:e}),n[C.bottomRight]=m({value:t,prop:e})),a==="bottom"&&(n[C.bottomRight]=m({value:t,prop:e}),n[C.bottomLeft]=m({value:t,prop:e})),a==="left"&&(n[C.bottomLeft]=m({value:t,prop:e}),n[C.topLeft]=m({value:t,prop:e})),(a==="topLeft"||a==="topRight"||a==="bottomRight"||a==="bottomLeft")&&(n[C[a]]=m({value:t,prop:e}))):(a==="x"&&(n[V.left]=m({value:t,prop:e}),n[V.right]=m({value:t,prop:e})),a==="y"&&(n[V.top]=m({value:t,prop:e}),n[V.bottom]=m({value:t,prop:e})),(a==="top"||a==="bottom"||a==="left"||a==="right")&&(n[V[a]]=m({value:t,prop:e}))),n.join(" "))},U=({prop:r,value:t,cssVariables:e})=>r.direction?Ie({cssVariables:e,prop:r,value:t,direction:r.direction,type:r.type}):m({value:t,prop:r}),ne=({props:r,ref:t,propsMap:e})=>{if(!t.current)return;const a={};Object.entries(r).forEach(([i,o])=>{const n=e[i];n&&(typeof o=="string"||typeof o=="boolean"?a[`--tgph-${n.rule}`]=U({prop:n,key:i,value:o,cssVariables:a}):Ee(o)&&_e(o).forEach((l,s)=>{l&&(a[`--tgph-${n.rule}-${_[s]}`]=U({prop:n,key:i,value:l,cssVariables:a}))})),Object.entries(a).forEach(([l,s])=>{t.current&&t.current.style.setProperty(l,s)})})},W={display:{rule:"display",type:"block-display",valueType:"static"},h:{rule:"height",type:"spacing"},w:{rule:"width",type:"spacing"},maxH:{rule:"max-height",type:"spacing"},maxW:{rule:"max-width",type:"spacing"},p:{rule:"padding",type:"spacing",direction:"all"},m:{rule:"margin",type:"spacing",direction:"all"},pt:{rule:"padding",type:"spacing",direction:"top"},pl:{rule:"padding",type:"spacing",direction:"left"},pb:{rule:"padding",type:"spacing",direction:"bottom"},pr:{rule:"padding",type:"spacing",direction:"right"},px:{rule:"padding",type:"spacing",direction:"x"},py:{rule:"padding",type:"spacing",direction:"y"},mt:{rule:"margin",type:"spacing",direction:"top"},ml:{rule:"margin",type:"spacing",direction:"left"},mb:{rule:"margin",type:"spacing",direction:"bottom"},mr:{rule:"margin",type:"spacing",direction:"right"},mx:{rule:"margin",type:"spacing",direction:"x"},my:{rule:"margin",type:"spacing",direction:"y"},bg:{rule:"background-color",type:"color"},rounded:{rule:"border-radius",type:"rounded",direction:"all"},roundedTopLeft:{rule:"border-radius",type:"rounded",direction:"topLeft",ordering:"clockwise"},roundedBottomLeft:{rule:"border-radius",type:"rounded",direction:"bottomLeft",ordering:"clockwise"},roundedBottomRight:{rule:"border-radius",type:"rounded",direction:"bottomRight",ordering:"clockwise"},roundedTopRight:{rule:"border-radius",type:"rounded",direction:"topRight",ordering:"clockwise"},roundedTop:{rule:"border-radius",type:"rounded",direction:"top",ordering:"clockwise"},roundedBottom:{rule:"border-radius",type:"rounded",direction:"bottom",ordering:"clockwise"},roundedLeft:{rule:"border-radius",type:"rounded",direction:"left",ordering:"clockwise"},roundedRight:{rule:"border-radius",type:"rounded",direction:"right",ordering:"clockwise"},border:{rule:"border-width",type:"spacing",direction:"all",default:"px"},borderTop:{rule:"border-width",type:"spacing",direction:"top",default:"px"},borderLeft:{rule:"border-width",type:"spacing",direction:"left",default:"px"},borderBottom:{rule:"border-width",type:"spacing",direction:"bottom",default:"px"},borderRight:{rule:"border-width",type:"spacing",direction:"right",default:"px"},borderX:{rule:"border-width",type:"spacing",direction:"x",default:"px"},borderY:{rule:"border-width",type:"spacing",direction:"y",default:"px"},borderColor:{rule:"border-color",type:"color",default:"gray-4"},borderStyle:{rule:"border-style",type:"border-style",default:"solid"},shadow:{rule:"box-shadow",type:"shadow"}},F=({as:r,className:t,tgphRef:e,...a})=>{const i=r||"div",o=u.useRef(null),n=D.useComposedRefs(e,o),l=u.useMemo(()=>{const s={borderColor:!0,...a};return Object.keys(s).reduce((d,p)=>(Object.keys(W).some(b=>b===p)?d.box[p]=s[p]:d.rest[p]=s[p],d),{box:{},rest:{}})},[a]);return u.useLayoutEffect(()=>{ne({props:l.box,ref:o,propsMap:W})},[l.box]),c.jsx(i,{className:E("tgph-box",t),ref:n,...l.rest})},G={display:{rule:"display",type:"flex-display",valueType:"static"},direction:{rule:"flex-direction",type:"flex-direction",valueType:"static"},align:{rule:"align-items",type:"align-items",valueType:"static"},justify:{rule:"justify-content",type:"justify-content",valueType:"static"},wrap:{rule:"flex-wrap",type:"flex-wrap",valueType:"static"},gap:{rule:"gap",type:"spacing",valueType:"variable"}},S=({className:r,tgphRef:t,...e})=>{const a=u.useRef(null),i=D.useComposedRefs(t,a),o=u.useMemo(()=>Object.keys(e).reduce((n,l)=>(Object.keys(G).some(s=>s===l)?n.stack[l]=e[l]:n.rest[l]=e[l],n),{stack:{},rest:{}}),[e]);return u.useLayoutEffect(()=>{ne({props:o.stack,ref:a,propsMap:G})},[o.stack,i]),c.jsx(F,{className:E("tgph-stack",r),tgphRef:i,...o.rest})},A=r=>Array.isArray(r),H=r=>typeof r=="object"&&!Array.isArray(r),$e=["ArrowDown","PageUp","Home"],Ve=["ArrowUp","PageDown","End"],ie=["Enter"," "],j=u.createContext({onValueChange:()=>{},contentId:"",triggerId:"",open:!1,setOpen:()=>{},onOpenToggle:()=>{}}),Ae=({modal:r=!0,closeOnSelect:t=!0,open:e,onOpenChange:a,defaultOpen:i,value:o,onValueChange:n,errored:l,placeholder:s,layout:d,...p})=>{const b=u.useId(),y=u.useId(),g=u.useRef(null),h=u.useRef(null),v=u.useRef(null),[x,L]=u.useState(""),[R=!1,M]=pe.useControllableState({prop:e,defaultProp:i,onChange:a}),ce=u.useCallback(()=>{M(ue=>!ue)},[M]);return u.useEffect(()=>{R||L("")},[R]),c.jsx(j.Provider,{value:{contentId:b,triggerId:y,value:o,onValueChange:n,placeholder:s,open:R,setOpen:M,onOpenToggle:ce,closeOnSelect:t,searchQuery:x,setSearchQuery:L,triggerRef:g,searchRef:h,contentRef:v,errored:l,layout:d},children:c.jsx(q.Menu.Root,{open:R,onOpenChange:M,modal:r,...p})})},Qe=({label:r,value:t,...e})=>{const a=u.useContext(j);return c.jsxs(N.Tag.Root,{size:"1",as:w.motion.span,initial:{opacity:0,transform:"scale(0.8)"},animate:{opacity:1,transform:"scale(1)"},exit:{opacity:0,transform:"scale(0.5)"},layout:"position",transition:{duration:.2,type:"spring",bounce:0,layout:{duration:.05,type:"spring",bounce:0}},...e,children:[c.jsx(N.Tag.Text,{children:r||t}),c.jsx(N.Tag.Button,{icon:{icon:T.Lucide.X,alt:`Remove ${t}`},onClick:i=>{const o=a.onValueChange,l=a.value.filter(s=>s.value!==t);o(l),i.stopPropagation(),i.preventDefault()}})]})},Me=({size:r="1"})=>{var a,i;const t=u.useContext(j),e=r==="1"?"6":r==="2"?"8":"10";if(t.value&&A(t.value)){const o=t.value,n=t.layout||"truncate",l=o.length-2,s=l.toString().split("");return o.length===0?c.jsx(S,{h:e,align:"center",my:"1",children:c.jsx(Q.Text,{color:"gray",children:t.placeholder})}):c.jsxs(S,{gap:"1",w:"full",my:"1",wrap:n==="wrap"?"wrap":"nowrap",align:"center",style:{position:"relative",flexGrow:1},children:[c.jsx(w.AnimatePresence,{initial:!1,mode:"popLayout",children:o.map((d,p)=>{if(n==="truncate"&&p<=1||n==="wrap")return c.jsx(ge.RefToTgphRef,{children:c.jsx(Qe,{...d})},d.value)})}),c.jsx(w.AnimatePresence,{children:n==="truncate"&&o.length>2&&c.jsx(S,{as:w.motion.div,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.2,type:"spring",bounce:0},h:"full",pr:"1",pl:"8",align:"center","aria-label":`${l} more selected`,style:{position:"absolute",right:0,backgroundImage:"linear-gradient(to left, var(--tgph-surface-1) 0 60%, transparent 90% 100%)"},children:c.jsxs(P.Text,{as:"span",size:"1",style:{whiteSpace:"nowrap"},children:["+",c.jsx(w.AnimatePresence,{mode:"wait",initial:!1,children:s.map(d=>c.jsx(F,{as:w.motion.span,w:"2",display:"inline-block",initial:{opacity:.5},animate:{opacity:1},exit:{opacity:.5},transition:{duration:.1,type:"spring",bounce:0},children:d},d))})," ","more"]})},"truncated text")})]})}return c.jsx(S,{h:e,align:"center",my:"1",children:c.jsx(Q.Text,{color:t.value?"default":"gray",children:((a=t==null?void 0:t.value)==null?void 0:a.label)||((i=t==null?void 0:t.value)==null?void 0:i.value)||t.placeholder})})},Pe=({size:r="1",...t})=>{const e=u.useContext(j),a=u.useCallback(()=>{var i,o,n;return e.value?H(e.value)?((i=e.value)==null?void 0:i.label)||((o=e.value)==null?void 0:o.value)||e.placeholder:((n=e.value)==null?void 0:n.map(l=>l.label).join(", "))||e.placeholder:e.placeholder},[e.value,e.placeholder]);return c.jsx(q.Menu.Trigger,{...t,asChild:!0,onClick:i=>{var o,n;i.preventDefault(),e.onOpenToggle(),(n=(o=e.triggerRef)==null?void 0:o.current)==null||n.focus()},onKeyDown:i=>{if(i.key==="Tab"){i.stopPropagation();return}if(ie.includes(i.key)){i.preventDefault();return}if(i.key==="ArrowDown"){e.onOpenToggle();return}},tgphRef:e.triggerRef,children:c.jsxs(Q.Root,{id:e.triggerId,bg:"surface-1",variant:"outline",w:"full",h:"full",color:e.errored?"red":"gray",justify:"space-between",role:"combobox","aria-label":a(),"aria-controls":e.contentId,"aria-expanded":e.open,"aria-haspopup":"listbox","data-tgph-combobox-trigger":!0,"data-tgph-comobox-trigger-open":e.open,children:[c.jsx(Me,{size:r}),c.jsx(Q.Icon,{as:w.motion.div,icon:T.Lucide.ChevronDown,animate:{rotate:e.open?"180deg":"0deg"},transition:{duration:.2,type:"spring",bounce:0},"aria-hidden":!0})]})})},De=({tgphRef:r,style:t,children:e,...a})=>{const i=u.useContext(j),o=u.useRef(!1),n=D.useComposedRefs(r,i.contentRef),l=u.useRef(null),[s,d]=u.useState(0),[p,b]=u.useState(!1),y=u.useCallback(g=>{const h=g.getBoundingClientRect();h&&d(h.height),p||b(!0)},[p]);return u.useEffect(()=>{const g=new ResizeObserver(h=>{for(const v of h){const x=v.target;y(x)}});return l.current&&p&&g.observe(l.current),()=>g.disconnect()},[p,y]),u.useEffect(()=>{p===!0&&i.open===!1&&b(!1)},[i.open,p]),c.jsx(q.Menu.Content,{as:w.motion.div,mt:"1",initial:{opacity:0,scale:.8,height:"auto"},animate:{opacity:1,scale:1,minHeight:s?`${s}px`:"0"},exit:{opacity:0,scale:0},transition:{duration:.2,type:"spring",bounce:0},onInteractOutside:()=>{i.setOpen(!1),o.current=!0},onAnimationComplete:()=>{if(!p&&l){const g=l.current;y(g)}},onCloseAutoFocus:g=>{var h,v;o.current||(v=(h=i.triggerRef)==null?void 0:h.current)==null||v.focus(),o.current=!1,g.preventDefault()},onKeyDown:g=>{var v,x,L,R;const h=(x=(v=i.contentRef)==null?void 0:v.current)==null?void 0:x.querySelectorAll("[data-tgph-combobox-option]");document.activeElement===(h==null?void 0:h[0])&&Ve.includes(g.key)&&((R=(L=i.searchRef)==null?void 0:L.current)==null||R.focus()),g.key==="Escape"&&i.setOpen(!1),g.stopPropagation()},bg:"surface-1",style:{width:"var(--tgph-comobobox-trigger-width)",...t,"--tgph-comobobox-content-transform-origin":"var(--radix-popper-transform-origin)","--tgph-combobox-content-available-width":"var(--radix-popper-available-width)","--tgph-combobox-content-available-height":"calc(var(--radix-popper-available-height) - var(--tgph-spacing-8))","--tgph-comobobox-trigger-width":"var(--radix-popper-anchor-width)","--tgph-combobox-trigger-height":"var(--radix-popper-anchor-height)"},...a,tgphRef:n,"data-tgph-combobox-content":!0,"data-tgph-combobox-content-open":p,role:void 0,"aria-orientation":void 0,children:c.jsx(S,{direction:"column",gap:"1",tgphRef:l,children:e})})},qe=({...r})=>{const t=u.useContext(j);return c.jsx(S,{id:t.contentId,direction:"column",gap:"1",style:{overflowY:"auto",maxHeight:"calc(var(--tgph-combobox-content-available-height) - var(--tgph-spacing-12))"},role:"listbox",...r})},le=({value:r,label:t,selected:e,onSelect:a,...i})=>{const o=u.useContext(j),[n,l]=u.useState(!1),s=o.value??[],d=(A(s),!o.searchQuery||r.toLowerCase().includes(o.searchQuery.toLowerCase())),p=A(s)?s.some(y=>y.value===r):s.value===r,b=y=>{var h,v;const g=y;if(!(g.key&&!ie.includes(g.key))){if(y.stopPropagation(),y.preventDefault(),o.closeOnSelect===!0&&o.setOpen(!1),a)return a(y);if(A(s)){const x=o.onValueChange,L=p?s.filter(R=>R.value!==r):[...s,{value:r,label:t}];x(L)}else if(H(s)){const x=o.onValueChange;x({value:r,label:t})}(v=(h=o.triggerRef)==null?void 0:h.current)==null||v.focus()}};if(d)return c.jsx(q.Menu.Button,{type:"button",onSelect:b,onKeyDown:b,selected:e===null?null:e??p,onFocus:()=>l(!0),onBlur:()=>l(!1),role:"option","aria-selected":p?"true":"false","data-tgph-combobox-option":!0,"data-tgph-combobox-option-focused":n,"data-tgph-combobox-option-value":r,"data-tgph-combobox-option-label":t,...i,children:t||r})},Ne=({label:r="Search",placeholder:t="Search",tgphRef:e,...a})=>{var l;const i=u.useId(),o=u.useContext(j),n=D.useComposedRefs(e,o.searchRef);return u.useEffect(()=>{var p;const s=b=>{var y,g;$e.includes(b.key)&&((g=(y=o.contentRef)==null?void 0:y.current)==null||g.focus({preventScroll:!0})),b.key==="Escape"&&o.setOpen(!1),b.stopPropagation()},d=(p=o.searchRef)==null?void 0:p.current;if(d)return d.addEventListener("keydown",s),()=>{d.removeEventListener("keydown",s)}},[o]),c.jsxs(F,{borderBottom:!0,px:"1",pb:"1",children:[c.jsx(he.Root,{children:c.jsx(P.Text,{as:"label",htmlFor:i,children:r})}),c.jsx(be.Input,{id:i,variant:"ghost",placeholder:t,value:o.searchQuery,onChange:s=>{var d;(d=o==null?void 0:o.setSearchQuery)==null||d.call(o,s.target.value)},LeadingComponent:c.jsx(T.Icon,{icon:T.Lucide.Search,alt:"Search Icon"}),TrailingComponent:o!=null&&o.searchQuery&&((l=o==null?void 0:o.searchQuery)==null?void 0:l.length)>0?c.jsx(Q,{as:w.motion.button,initial:{opacity:0},animate:{opacity:1},transition:{duration:.2,type:"spring",bounce:0},variant:"ghost",color:"gray",icon:{icon:T.Lucide.X,alt:"Clear Search Query"},onClick:()=>{var s;return(s=o.setSearchQuery)==null?void 0:s.call(o,"")}}):null,autoFocus:!0,"data-tgph-combobox-search":!0,"aria-controls":o.contentId,...a,tgphRef:n})]})},ze=({icon:r={icon:T.Lucide.Search,alt:"Search Icon"},message:t="No results found",children:e,...a})=>{const i=u.useContext(j),[o,n]=u.useState(!1);if(u.useEffect(()=>{var s,d;const l=(d=(s=i.contentRef)==null?void 0:s.current)==null?void 0:d.querySelectorAll("[data-tgph-combobox-option]");(l==null?void 0:l.length)===0?n(!0):n(!1)},[i.searchQuery,i.contentRef,e]),o)return c.jsxs(S,{as:w.motion.div,initial:{opacity:0,scale:.8},animate:{opacity:1,scale:1},transition:{duration:.2,type:"spring",bounce:0},gap:"1",align:"center",justify:"center",w:"full",my:"8","data-tgph-combobox-empty":!0,...a,children:[r===null?c.jsx(c.Fragment,{}):c.jsx(T.Icon,{...r}),t===null?c.jsx(c.Fragment,{}):c.jsx(P.Text,{as:"span",children:t})]})},Be=({leadingText:r="Create",values:t,onCreate:e,selected:a=null,...i})=>{const o=u.useContext(j),n=u.useCallback(l=>!t||(t==null?void 0:t.length)===0?!1:t.some(s=>s.value===l),[t]);if(o.searchQuery&&!n(o.searchQuery))return c.jsx(le,{leadingIcon:{icon:T.Lucide.Plus,"aria-hidden":!0},mx:"1",value:o.searchQuery,label:`${r} "${o.searchQuery}"`,selected:a,onSelect:()=>{var l;e&&o.value&&o.searchQuery&&(H(o.value)&&e({value:o.searchQuery}),A(o.value)&&e({value:o.searchQuery}),(l=o.setSearchQuery)==null||l.call(o,""))},...i})},se={};Object.assign(se,{Root:Ae,Trigger:Pe,Content:De,Options:qe,Option:le,Search:Ne,Empty:ze,Create:Be});exports.Combobox=se;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|