@telegraph/combobox 0.0.76 → 0.0.78

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @telegraph/combobox
 
+## 0.0.78
+
+### Patch Changes
+
+- [#439](https://github.com/knocklabs/telegraph/pull/439) [`0dcbd65`](https://github.com/knocklabs/telegraph/commit/0dcbd65ba294edd97cdc4159533a8516433cd3c9) Thanks [@kylemcd](https://github.com/kylemcd)! - add combobox primitive trigger components
+
+- Updated dependencies [[`0dcbd65`](https://github.com/knocklabs/telegraph/commit/0dcbd65ba294edd97cdc4159533a8516433cd3c9)]:
+  - @telegraph/button@0.0.77
+  - @telegraph/tag@0.0.82
+  - @telegraph/menu@0.0.62
+
+## 0.0.77
+
+### Patch Changes
+
+- [#434](https://github.com/knocklabs/telegraph/pull/434) [`955c255`](https://github.com/knocklabs/telegraph/commit/955c25512468a67717de9e56a6b49f72ff53279e) Thanks [@kylemcd](https://github.com/kylemcd)! - adds support for custom triggers in the combobox
+
+- Updated dependencies [[`955c255`](https://github.com/knocklabs/telegraph/commit/955c25512468a67717de9e56a6b49f72ff53279e)]:
+  - @telegraph/helpers@0.0.12
+  - @telegraph/button@0.0.76
+  - @telegraph/icon@0.0.50
+  - @telegraph/input@0.0.42
+  - @telegraph/layout@0.1.16
+  - @telegraph/menu@0.0.61
+  - @telegraph/tag@0.0.81
+  - @telegraph/tooltip@0.0.44
+  - @telegraph/typography@0.1.16
+
 ## 0.0.76
 
 ### Patch Changes

package/README.md

@@ -3,6 +3,7 @@
 [![npm version](https://img.shields.io/npm/v/@telegraph/button.svg)](https://www.npmjs.com/package/@telegraph/combobox)
 
 # @telegraph/combobox
+
 > A styled menu, triggered by a Select, that combines an Input and Single- or Multi-select.
 
 ## Installation Instructions
@@ -12,6 +13,479 @@ npm install @telegraph/combobox
 ```
 
 ### Add stylesheet
+
 ```
 @import "@telegraph/combobox"
 ```
+
+### Basic Usage
+
+A combobox component that combines input and select functionality with a searchable dropdown menu.
+
+#### `<Combobox/>`
+
+```tsx
+import { Combobox } from "@telegraph/combobox";
+import { useState } from "react";
+
+// Single select example
+const SingleSelectExample = () => {
+  const [value, setValue] = useState<string>("");
+
+  return (
+    <Combobox.Root value={value} onValueChange={setValue}>
+      <Combobox.Trigger placeholder="Select an option..." />
+      <Combobox.Content>
+        <Combobox.Search />
+        <Combobox.Options>
+          <Combobox.Option value="option1">Option 1</Combobox.Option>
+          <Combobox.Option value="option2">Option 2</Combobox.Option>
+        </Combobox.Options>
+      </Combobox.Content>
+    </Combobox.Root>
+  );
+};
+
+// Multi select example
+const MultiSelectExample = () => {
+  const [values, setValues] = useState<string[]>([]);
+
+  return (
+    <Combobox.Root value={values} onValueChange={setValues}>
+      <Combobox.Trigger placeholder="Select options..." />
+      <Combobox.Content>
+        <Combobox.Search />
+        <Combobox.Options>
+          <Combobox.Option value="option1">Option 1</Combobox.Option>
+          <Combobox.Option value="option2">Option 2</Combobox.Option>
+        </Combobox.Options>
+      </Combobox.Content>
+    </Combobox.Root>
+  );
+};
+```
+
+### Type Examples
+
+#### Single Select Types
+
+```tsx
+// String values (recommended)
+const [value, setValue] = useState<string>("");
+```
+
+#### Multi Select Types
+
+```tsx
+// String array values (recommended)
+const [values, setValues] = useState<string[]>([]);
+```
+
+### Accessibility
+
+The combobox implements the [ARIA Combobox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/), providing:
+
+- Proper ARIA roles and attributes
+- Keyboard navigation:
+  - `↓` / `↑`: Navigate options
+  - `Enter` / `Space`: Select option
+  - `Escape`: Close dropdown
+  - `Tab`: Move focus
+- Screen reader announcements for selection changes
+- Focus management
+
+### Common Patterns
+
+#### Form Integration
+
+```tsx
+import { useForm } from "react-hook-form";
+
+const MyForm = () => {
+  const { register, setValue } = useForm();
+
+  return (
+    <form>
+      <Combobox.Root onValueChange={(value) => setValue("field", value)}>
+        {/* ... */}
+      </Combobox.Root>
+    </form>
+  );
+};
+```
+
+#### Custom Filtering
+
+```tsx
+const MyCombobox = () => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const options = useMemo(
+    () =>
+      allOptions.filter((opt) =>
+        opt.toLowerCase().includes(searchQuery.toLowerCase()),
+      ),
+    [searchQuery],
+  );
+
+  return (
+    <Combobox.Root>
+      <Combobox.Content>
+        <Combobox.Search value={searchQuery} onValueChange={setSearchQuery} />
+        <Combobox.Options>
+          {options.map((opt) => (
+            <Combobox.Option key={opt} value={opt}>
+              {opt}
+            </Combobox.Option>
+          ))}
+        </Combobox.Options>
+      </Combobox.Content>
+    </Combobox.Root>
+  );
+};
+```
+
+#### Async Loading
+
+```tsx
+const AsyncCombobox = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [options, setOptions] = useState([]);
+
+  const loadOptions = async (query) => {
+    setIsLoading(true);
+    const results = await fetchOptions(query);
+    setOptions(results);
+    setIsLoading(false);
+  };
+
+  return (
+    <Combobox.Root>
+      <Combobox.Content>
+        <Combobox.Search onValueChange={loadOptions} />
+        <Combobox.Options>
+          {isLoading ? (
+            <Box p="4" textAlign="center">
+              Loading...
+            </Box>
+          ) : (
+            options.map((opt) => (
+              <Combobox.Option key={opt} value={opt}>
+                {opt}
+              </Combobox.Option>
+            ))
+          )}
+        </Combobox.Options>
+      </Combobox.Content>
+    </Combobox.Root>
+  );
+};
+```
+
+#### Error States
+
+```tsx
+const ErrorCombobox = () => {
+  const [error, setError] = useState("");
+
+  return (
+    <Stack gap="1">
+      <Combobox.Root errored={!!error}>{/* ... */}</Combobox.Root>
+      {error && (
+        <Text color="red" size="1">
+          {error}
+        </Text>
+      )}
+    </Stack>
+  );
+};
+```
+
+### Component Parts
+
+#### `<Combobox.Root/>`
+
+The root component that manages the state and context for the combobox.
+
+##### Props
+
+| Name           | Type                                                      | Default    | Description                        |
+| -------------- | --------------------------------------------------------- | ---------- | ---------------------------------- |
+| value          | string \| string[] \| Option \| Option[]                  | undefined  | The selected value(s)              |
+| onValueChange  | (value: string \| string[] \| Option \| Option[]) => void | undefined  | Callback when selection changes    |
+| layout         | "truncate" \| "wrap"                                      | "truncate" | How to display multiple selections |
+| open           | boolean                                                   | undefined  | Controlled open state              |
+| defaultOpen    | boolean                                                   | false      | Initial open state                 |
+| errored        | boolean                                                   | false      | Shows error styling                |
+| placeholder    | string                                                    | undefined  | Placeholder text                   |
+| onOpenChange   | (open: boolean) => void                                   | undefined  | Callback when open state changes   |
+| modal          | boolean                                                   | true       | Whether to render in a modal       |
+| closeOnSelect  | boolean                                                   | true       | Close menu after selection         |
+| clearable      | boolean                                                   | false      | Show clear button                  |
+| disabled       | boolean                                                   | false      | Disable the combobox               |
+| legacyBehavior | boolean                                                   | false      | Use legacy object format           |
+
+#### `<Combobox.Trigger/>`
+
+The button that triggers the combobox dropdown.
+
+For advanced customization of the trigger's internal components (indicator, clear button, text display, etc.), see the [Trigger Primitives](#trigger-primitives) section below.
+
+##### Props
+
+| Name        | Type              | Default   | Description            |
+| ----------- | ----------------- | --------- | ---------------------- |
+| size        | "1" \| "2" \| "3" | "2"       | Size of the trigger    |
+| placeholder | string            | undefined | Placeholder text       |
+| children    | ReactNode         | undefined | Custom trigger content |
+
+#### `<Combobox.Content/>`
+
+The dropdown menu content container.
+
+##### Props
+
+Accepts all props from `TelegraphMenu.Content`
+
+#### `<Combobox.Options/>`
+
+Container for the option items.
+
+##### Props
+
+Accepts all props from `Stack` component
+
+#### `<Combobox.Option/>`
+
+Individual selectable option item.
+
+##### Props
+
+| Name     | Type    | Default   | Description          |
+| -------- | ------- | --------- | -------------------- |
+| value    | string  | required  | Option value         |
+| label    | string  | undefined | Display label        |
+| selected | boolean | undefined | Force selected state |
+
+#### `<Combobox.Search/>`
+
+Search input field for filtering options.
+
+##### Props
+
+| Name        | Type   | Default  | Description         |
+| ----------- | ------ | -------- | ------------------- |
+| label       | string | "Search" | Accessibility label |
+| placeholder | string | "Search" | Input placeholder   |
+
+#### `<Combobox.Empty/>`
+
+Empty state component shown when no options match search.
+
+##### Props
+
+| Name    | Type              | Default            | Description         |
+| ------- | ----------------- | ------------------ | ------------------- |
+| icon    | IconProps \| null | SearchIcon         | Empty state icon    |
+| message | string \| null    | "No results found" | Empty state message |
+
+#### `<Combobox.Create/>`
+
+Option to create new values when none match search.
+
+##### Props
+
+| Name        | Type                              | Default   | Description              |
+| ----------- | --------------------------------- | --------- | ------------------------ |
+| leadingText | string                            | "Create"  | Text before search value |
+| values      | string[] \| Option[]              | undefined | Existing values          |
+| onCreate    | (value: string \| Option) => void | undefined | Creation callback        |
+
+### Primitives
+
+The combobox includes several primitive components for advanced customization. These primitives allow you to build custom trigger layouts and behaviors while maintaining the combobox's core functionality.
+
+#### Trigger Primitives
+
+##### `<Combobox.Primitives.TriggerIndicator/>`
+
+The dropdown chevron icon that rotates based on the combobox's open state.
+
+###### Props
+
+| Name        | Type      | Default     | Description                         |
+| ----------- | --------- | ----------- | ----------------------------------- |
+| icon        | IconProps | ChevronDown | The icon to display                 |
+| aria-hidden | boolean   | true        | Whether to hide from screen readers |
+
+```tsx
+<Combobox.Primitives.TriggerIndicator icon={CustomIcon} aria-hidden={false} />
+```
+
+##### `<Combobox.Primitives.TriggerClear/>`
+
+A button to clear the current selection(s). Only shown when `clearable` is true and there are selections.
+
+###### Props
+
+| Name         | Type                               | Default   | Description           |
+| ------------ | ---------------------------------- | --------- | --------------------- |
+| tooltipProps | TgphComponentProps<typeof Tooltip> | undefined | Props for the tooltip |
+
+Accepts all props from `Button`
+
+```tsx
+<Combobox.Primitives.TriggerClear tooltipProps={{ delay: 300 }} />
+```
+
+##### `<Combobox.Primitives.TriggerText/>`
+
+Displays the selected value's text or label. Used in single-select mode.
+
+###### Props
+
+Accepts all props from `Button.Text`
+
+```tsx
+<Combobox.Primitives.TriggerText color="blue" weight="medium" />
+```
+
+##### `<Combobox.Primitives.TriggerPlaceholder/>`
+
+Shows placeholder text when no value is selected.
+
+###### Props
+
+Accepts all props from `Button.Text`
+
+```tsx
+<Combobox.Primitives.TriggerPlaceholder color="gray-8" />
+```
+
+##### `<Combobox.Primitives.TriggerTagsContainer/>`
+
+Container for selected value tags in multi-select mode. Handles tag layout and truncation.
+
+###### Props
+
+Accepts all props from `Stack`
+
+```tsx
+<Combobox.Primitives.TriggerTagsContainer gap="2" wrap="wrap" />
+```
+
+##### `<Combobox.Primitives.TriggerTag/>`
+
+A collection of components for building custom tags in multi-select mode:
+
+###### `<Combobox.Primitives.TriggerTag.Root/>`
+
+The base container for a tag.
+
+Props:
+| Name | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| value | string | required | The value this tag represents |
+
+###### `<Combobox.Primitives.TriggerTag.Text/>`
+
+The text content of a tag.
+
+Props: Accepts all props from `Text`
+
+###### `<Combobox.Primitives.TriggerTag.Button/>`
+
+The remove button for a tag.
+
+Props: Accepts all props from `Button`
+
+###### `<Combobox.Primitives.TriggerTag.Default/>`
+
+A pre-composed tag with text and remove button.
+
+Props:
+| Name | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| value | string | required | The value this tag represents |
+
+Example of a custom tag layout:
+
+```tsx
+<Combobox.Primitives.TriggerTag.Root value="example">
+  <Icon icon={CustomIcon} />
+  <Combobox.Primitives.TriggerTag.Text>
+    Custom Tag
+  </Combobox.Primitives.TriggerTag.Text>
+  <Combobox.Primitives.TriggerTag.Button
+    icon={{ icon: XIcon, alt: "Remove" }}
+  />
+</Combobox.Primitives.TriggerTag.Root>
+```
+
+Example of using the default tag:
+
+```tsx
+<Combobox.Primitives.TriggerTag.Default value="example" />
+```
+
+Complete example using primitives for a custom trigger layout:
+
+```tsx
+<Combobox.Root>
+  <Combobox.Trigger>
+    <Stack direction="row" justify="space-between" align="center" w="full">
+      {/* Left side: Text or Tags */}
+      <Box flex="1" overflow="hidden">
+        <Combobox.Primitives.TriggerTagsContainer>
+          <Combobox.Primitives.TriggerTag.Default value="tag1" />
+          <Combobox.Primitives.TriggerTag.Default value="tag2" />
+        </Combobox.Primitives.TriggerTagsContainer>
+      </Box>
+
+      {/* Right side: Clear and Indicator */}
+      <Stack direction="row" gap="1" align="center">
+        <Combobox.Primitives.TriggerClear />
+        <Box borderLeft="1" h="4" />
+        <Combobox.Primitives.TriggerIndicator />
+      </Stack>
+    </Stack>
+  </Combobox.Trigger>
+  <Combobox.Content>{/* ... */}</Combobox.Content>
+</Combobox.Root>
+```
+
+### Legacy Behavior (⚠️ Deprecated)
+
+> **Warning**: Legacy behavior is deprecated and will be removed in a future version. New implementations should use string values instead of objects.
+
+The `legacyBehavior` prop changes how values are handled:
+
+- When `false` (default, recommended): Values are simple strings
+- When `true` (deprecated): Values are objects with `{ value: string; label?: string }`
+
+#### Legacy Single Select Types
+
+```tsx
+// ⚠️ Deprecated - Don't use in new code
+const [value, setValue] = useState<{ value: string; label?: string }>()
+
+<Combobox.Root
+  value={value}
+  onValueChange={setValue}
+  legacyBehavior={true}
+>
+```
+
+#### Legacy Multi Select Types
+
+```tsx
+// ⚠️ Deprecated - Don't use in new code
+const [values, setValues] = useState<Array<{ value: string; label?: string }>>([])
+
+<Combobox.Root
+  value={values}
+  onValueChange={setValues}
+  legacyBehavior={true}
+>
+```
+
+This object-based value pattern is only maintained for backwards compatibility and should not be used in new code. It will be removed in a future major version.

package/dist/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),G=require("@radix-ui/react-dismissable-layer"),Y=require("@radix-ui/react-portal"),U=require("@radix-ui/react-use-controllable-state"),X=require("@radix-ui/react-visually-hidden"),k=require("@telegraph/button"),q=require("@telegraph/compose-refs"),W=require("@telegraph/helpers"),C=require("@telegraph/icon"),J=require("@telegraph/input"),j=require("@telegraph/layout"),I=require("@telegraph/menu"),w=require("@telegraph/motion"),P=require("@telegraph/tag"),Z=require("@telegraph/tooltip"),Q=require("@telegraph/typography"),i=require("react");function M(t){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const l=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(r,e,l.get?l:{enumerable:!0,get:()=>t[e]})}}return r.default=t,Object.freeze(r)}const ee=M(Y),te=M(X),ne={0:"5",1:"6",2:"8",3:"10"},E=t=>Array.isArray(t),T=t=>typeof t=="object"&&!Array.isArray(t)||typeof t=="string"||!t,oe=t=>{const r=(a,c=[])=>(i.Children.toArray(a).forEach(o=>{i.isValidElement(o)&&(o.props.value?c.push(o):o.props.children&&r(o.props.children,c))}),c);return r(t).map(a=>{var n;const c=a;return{value:c.props.value,label:((n=c.props)==null?void 0:n.label)||c.props.children||c.props.value}})},S=(t,r)=>{if(t)return r===!0?t==null?void 0:t.value:t},D=(t,r,e)=>{if(!t||!r||r.length===0)return;const l=r.find(a=>a.value===S(t,e));if(l)return l},re=({children:t,value:r,searchQuery:e})=>{const l=F(t);return(r==null?void 0:r.toLowerCase().includes(e.toLowerCase()))||l.some(a=>a.toLowerCase().includes(e.toLowerCase()))},F=t=>{const r=i.Children.toArray(t),e=[];return r.forEach(l=>{typeof l=="string"&&e.push(l),i.isValidElement(l)&&l.props.children&&e.push(...F(l.props.children))}),e},ae=["ArrowDown","PageUp","Home"],se=["ArrowUp","PageDown","End"],H=["Enter"," "],v=i.createContext({value:void 0,onValueChange:()=>{},contentId:"",triggerId:"",open:!1,setOpen:()=>{},onOpenToggle:()=>{},clearable:!1,disabled:!1,options:[],legacyBehavior:!1}),ie=({modal:t=!0,closeOnSelect:r=!0,clearable:e=!1,disabled:l=!1,legacyBehavior:a=!1,open:c,onOpenChange:n,defaultOpen:o,value:u,onValueChange:g,errored:b,placeholder:x,layout:h,children:p,...d})=>{const y=i.useId(),m=i.useId(),f=i.useRef(null),R=i.useRef(null),A=i.useRef(null),L=i.useMemo(()=>oe(p),[p]),[N,V]=i.useState(""),[O=!1,B]=U.useControllableState({prop:c,defaultProp:o,onChange:n}),z=i.useCallback(()=>{B($=>!$)},[B]);return i.useEffect(()=>{O||V("")},[O]),s.jsx(v.Provider,{value:{contentId:y,triggerId:m,value:u,onValueChange:g,placeholder:x,open:O,setOpen:B,onOpenToggle:z,closeOnSelect:r,clearable:e,disabled:l,searchQuery:N,setSearchQuery:V,triggerRef:f,searchRef:R,contentRef:A,errored:b,layout:h,options:L,legacyBehavior:a},children:s.jsx(I.Menu.Root,{open:O,onOpenChange:B,modal:t,...d,children:p})})},ce=({value:t,...r})=>{const e=i.useContext(v),l=i.useMemo(()=>{const a=e.options.find(o=>o.value===t);if(a)return a.label||a.value;if(!e.value)return;const n=e.value.find(o=>S(o,e.legacyBehavior)===t);if(n)return n},[e.options,e.value,t,e.legacyBehavior]);return s.jsxs(P.Tag.Root,{as:w.motion.span,initializeWithAnimation:!1,initial:{opacity:0,scale:.5},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.5},transition:{duration:100,type:"spring"},"tgph-motion-key":t,size:"1",layout:"position",...r,children:[s.jsx(P.Tag.Text,{children:l}),s.jsx(P.Tag.Button,{icon:{icon:C.Lucide.X,alt:`Remove ${t}`},onClick:a=>{if(!e.onValueChange)return;const c=e.onValueChange,o=e.value.filter(u=>S(u,e.legacyBehavior)!==t);c==null||c(o),a.stopPropagation(),a.preventDefault()}})]})},le=()=>{var r;const t=i.useContext(v);if(t.value&&E(t.value)){const e=t.layout||"truncate",l=t.value.length-2,a=l.toString().split("");return t.value.length===0?s.jsx(k.Button.Text,{color:"gray",children:t.placeholder}):s.jsxs(j.Stack,{gap:"1",w:"full",wrap:e==="wrap"?"wrap":"nowrap",align:"center",style:{position:"relative",flexGrow:1},children:[s.jsx(w.AnimatePresence,{presenceMap:t.value.map(c=>({"tgph-motion-key":S(c,t.legacyBehavior)||"",value:!0})),children:t.value.map((c,n)=>{const o=S(c,t.legacyBehavior);if(o&&(e==="truncate"&&n<=1||e==="wrap"))return s.jsx(W.RefToTgphRef,{children:s.jsx(ce,{value:o})},o)})}),s.jsx(w.AnimatePresence,{presenceMap:[{"tgph-motion-key":"combobox-more",value:!0}],children:e==="truncate"&&t.value.length>2&&s.jsx(j.Stack,{as:w.motion.div,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:100,type:"spring"},h:"full",pr:"1",pl:"8",align:"center","aria-label":`${l} more selected`,position:"absolute",right:"0",style:{backgroundImage:"linear-gradient(to left, var(--tgph-surface-1) 0 60%, transparent 90% 100%)"},children:s.jsxs(Q.Text,{as:"span",size:"1",style:{whiteSpace:"nowrap"},children:["+",s.jsxs(w.AnimatePresence,{presenceMap:a.map(c=>({"tgph-motion-key":c,value:!0})),children:[a.map(c=>s.jsx(j.Box,{as:w.motion.span,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:100,type:"spring"},w:"2",display:"inline-block","tgph-motion-key":c,children:c},c))," "]}),"more"]})})})]})}if(t&&T(t.value)){const e=D(t.value,t.options,t.legacyBehavior),l=(e==null?void 0:e.label)||(e==null?void 0:e.value)||t.placeholder,a=t.legacyBehavior&&((r=t==null?void 0:t.value)==null?void 0:r.label);return s.jsx(k.Button.Text,{color:t.value?"default":"gray",textOverflow:"ellipsis",overflow:"hidden",children:a||l})}},ue=({size:t="2",...r})=>{const e=i.useContext(v),l=i.useCallback(()=>{var n;if(!e.value)return e.placeholder;if(T(e.value)){const o=D(e.value,e.options,e.legacyBehavior);return(o==null?void 0:o.label)||e.placeholder}if(E(e.value))return((n=e.value)==null?void 0:n.map(o=>{const u=D(o,e.options,e.legacyBehavior);return u==null?void 0:u.label}).join(", "))||e.placeholder},[e.value,e.placeholder,e.options,e.legacyBehavior]),a=i.useMemo(()=>{var n;if(T(e.value))return e.clearable&&e.value;if(E(e.value))return e.clearable&&((n=e.value)==null?void 0:n.length)>0},[e.clearable,e.value]),c=()=>{var n,o;if(E(e.value)){const u=e.onValueChange;u==null||u([])}if(T(e.value)){const u=e.onValueChange;u==null||u(void 0)}(o=(n=e.triggerRef)==null?void 0:n.current)==null||o.focus()};return s.jsx(I.Menu.Trigger,{...r,asChild:!0,onClick:n=>{var o,u;n.preventDefault(),e.onOpenToggle(),(u=(o=e.triggerRef)==null?void 0:o.current)==null||u.focus()},onKeyDown:n=>{if(n.key==="Tab"){n.stopPropagation();return}if(H.includes(n.key)){n.preventDefault();return}if(n.key==="ArrowDown"){n.stopPropagation(),n.preventDefault(),e.onOpenToggle();return}},tgphRef:e.triggerRef,children:s.jsxs(k.Button.Root,{id:e.triggerId,type:"button",bg:"surface-1",variant:"outline",align:"center",minH:ne[t],h:"full",w:"full",py:"1",size:t,color:e.errored?"red":"gray",justify:"space-between",role:"combobox","aria-label":l(),"aria-controls":e.contentId,"aria-expanded":e.open,"aria-haspopup":"listbox","data-tgph-combobox-trigger":!0,"data-tgph-combobox-trigger-open":e.open,disabled:e.disabled,children:[s.jsx(le,{}),s.jsxs(j.Stack,{align:"center",gap:"1",children:[a&&s.jsx(Z.Tooltip,{label:"Clear field",children:s.jsx(k.Button,{type:"button",icon:{icon:C.Lucide.X,alt:"Clear field"},size:"1",variant:"ghost",onClick:n=>{e.value&&(n.stopPropagation(),c())},onKeyDown:n=>{(n.key==="Enter"||n.key===" ")&&(n.stopPropagation(),c())},"data-tgph-combobox-clear":!0,style:{marginTop:"calc(-1 * var(--tgph-spacing-1)",marginBottom:"calc(-1 * var(--tgph-spacing-1)"}})}),s.jsx(k.Button.Icon,{as:w.motion.span,animate:{rotate:e.open?180:0},transition:{duration:150,type:"spring"},icon:C.Lucide.ChevronDown,"aria-hidden":!0})]})]})})},pe=({style:t,children:r,tgphRef:e,...l})=>{const a=i.useContext(v),c=i.useRef(!1),n=q.useComposedRefs(e,a.contentRef),o=i.useRef(null),[u,g]=i.useState(0),[b,x]=i.useState(!1),h=i.useCallback(p=>{const d=p==null?void 0:p.getBoundingClientRect();d&&g(d.height),b||x(!0)},[b]);return i.useEffect(()=>{const p=new ResizeObserver(d=>{for(const y of d){const m=y.target;h(m)}});return o.current&&b&&p.observe(o.current),()=>p.disconnect()},[b,h]),i.useEffect(()=>{b===!0&&a.open===!1&&x(!1)},[a.open,b]),i.useEffect(()=>{let p;return a.open&&(p=setTimeout(()=>{h(o.current)},10)),()=>p&&clearTimeout(p)},[a.open,h]),s.jsx(ee.Root,{asChild:!0,children:s.jsx(G.DismissableLayer,{onEscapeKeyDown:p=>{a.open&&(p.stopPropagation(),p.preventDefault(),a.setOpen(!1))},children:s.jsx(I.Menu.Content,{className:"tgph",mt:"1",onCloseAutoFocus:p=>{var d,y;c.current||(y=(d=a.triggerRef)==null?void 0:d.current)==null||y.focus(),c.current=!1,p.preventDefault()},bg:"surface-1",style:{width:"var(--tgph-combobox-trigger-width)",transition:"min-height 200ms ease-in-out",minHeight:u?`${u}px`:"0",...t,"--tgph-combobox-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-combobox-trigger-width":"var(--radix-popper-anchor-width)","--tgph-combobox-trigger-height":"var(--radix-popper-anchor-height)"},...l,tgphRef:n,"data-tgph-combobox-content":!0,"data-tgph-combobox-content-open":a.open,role:void 0,"aria-orientation":void 0,onKeyDown:p=>{var y,m,f,R;p.stopPropagation();const d=(m=(y=a.contentRef)==null?void 0:y.current)==null?void 0:m.querySelectorAll("[data-tgph-combobox-option]");document.activeElement===(d==null?void 0:d[0])&&se.includes(p.key)&&((R=(f=a.searchRef)==null?void 0:f.current)==null||R.focus())},children:s.jsx(j.Stack,{direction:"column",gap:"1",tgphRef:o,children:r})})})})},ge=({...t})=>{const r=i.useContext(v);return s.jsx(j.Stack,{id:r.contentId,direction:"column",gap:"1",style:{overflowY:"auto","--max-height":t.maxHeight?void 0:"calc(var(--tgph-combobox-content-available-height) - var(--tgph-spacing-12))"},role:"listbox",...t})},_=({value:t,label:r,selected:e,onSelect:l,children:a,...c})=>{const n=i.useContext(v),[o,u]=i.useState(!1),g=n.value,b=!n.searchQuery||re({children:r||a,value:t,searchQuery:n.searchQuery}),x=E(g)?g.some(p=>S(p,n.legacyBehavior)===t):S(g,n.legacyBehavior)===t,h=p=>{var y,m;p.stopPropagation();const d=p;if(!(d.key&&!H.includes(d.key))){if(p.preventDefault(),n.closeOnSelect===!0&&n.setOpen(!1),l)return l(p);if(T(g)){const f=n.onValueChange;n.legacyBehavior===!0?f==null||f({value:t,label:r}):f==null||f(t)}else if(E(g)){const f=n.onValueChange,R=n.value,A=x?R.filter(L=>S(L,n.legacyBehavior)!==t):[...R,n.legacyBehavior===!0?{value:t,label:r}:t];f==null||f(A)}(m=(y=n.triggerRef)==null?void 0:y.current)==null||m.focus()}};if(b)return s.jsx(I.Menu.Button,{type:"button",onSelect:h,onKeyDown:h,selected:e===null?null:e??x,onFocus:()=>u(!0),onBlur:()=>u(!1),role:"option","aria-selected":x?"true":"false","data-tgph-combobox-option":!0,"data-tgph-combobox-option-focused":o,"data-tgph-combobox-option-value":t,"data-tgph-combobox-option-label":r,...c,children:r||a||t})},de=({label:t="Search",placeholder:r="Search",tgphRef:e,value:l,onValueChange:a,...c})=>{var x;const n=i.useId(),o=i.useContext(v),u=q.useComposedRefs(e,o.searchRef),g=l??o.searchQuery,b=a??o.setSearchQuery;return i.useEffect(()=>{var d;const h=y=>{var m,f;ae.includes(y.key)&&((f=(m=o.contentRef)==null?void 0:m.current)==null||f.focus({preventScroll:!0})),y.key==="Escape"&&o.setOpen(!1),y.stopPropagation()},p=(d=o.searchRef)==null?void 0:d.current;if(p)return p.addEventListener("keydown",h),()=>{p.removeEventListener("keydown",h)}},[o]),s.jsxs(j.Box,{borderBottom:"px",px:"1",pb:"1",children:[s.jsx(te.Root,{children:s.jsx(Q.Text,{as:"label",htmlFor:n,children:t})}),s.jsx(J.Input,{id:n,variant:"ghost",placeholder:r,value:g,onChange:h=>{b(h.target.value)},LeadingComponent:s.jsx(C.Icon,{icon:C.Lucide.Search,alt:"Search Icon"}),TrailingComponent:o!=null&&o.searchQuery&&((x=o==null?void 0:o.searchQuery)==null?void 0:x.length)>0?s.jsx(k.Button,{variant:"ghost",color:"gray",icon:{icon:C.Lucide.X,alt:"Clear Search Query"},onClick:()=>{var h;return(h=o.setSearchQuery)==null?void 0:h.call(o,"")}}):null,autoFocus:!0,"data-tgph-combobox-search":!0,"aria-controls":o.contentId,...c,tgphRef:u})]})},fe=({icon:t={icon:C.Lucide.Search,alt:"Search Icon"},message:r="No results found",children:e,...l})=>{const a=i.useContext(v),[c,n]=i.useState(!1);if(i.useEffect(()=>{var u,g;const o=(g=(u=a.contentRef)==null?void 0:u.current)==null?void 0:g.querySelectorAll("[data-tgph-combobox-option]");(o==null?void 0:o.length)===0?n(!0):n(!1)},[a.searchQuery,a.contentRef,e]),c)return s.jsxs(j.Stack,{gap:"1",align:"center",justify:"center",w:"full",my:"8","data-tgph-combobox-empty":!0,...l,children:[t===null?s.jsx(s.Fragment,{}):s.jsx(C.Icon,{...t}),r===null?s.jsx(s.Fragment,{}):s.jsx(Q.Text,{as:"span",children:r})]})},he=({leadingText:t="Create",values:r,onCreate:e,selected:l=null,legacyBehavior:a=!1,...c})=>{const n=i.useContext(v),o=i.useCallback(u=>!r||(r==null?void 0:r.length)===0?!1:r.some(g=>S(g,a)===u),[r,a]);if(n.searchQuery&&!o(n.searchQuery))return s.jsx(_,{leadingIcon:{icon:C.Lucide.Plus,"aria-hidden":!0},mx:"1",value:n.searchQuery,label:`${t} "${n.searchQuery}"`,selected:l,onSelect:()=>{var u;if(e&&n.value&&n.searchQuery){const g=a===!0?{value:n.searchQuery}:n.searchQuery;e(g),(u=n.setSearchQuery)==null||u.call(n,"")}},...c})},K={};Object.assign(K,{Root:ie,Trigger:ue,Content:pe,Options:ge,Option:_,Search:de,Empty:fe,Create:he});exports.Combobox=K;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),X=require("@radix-ui/react-dismissable-layer"),W=require("@radix-ui/react-portal"),J=require("@radix-ui/react-use-controllable-state"),Z=require("@radix-ui/react-visually-hidden"),B=require("@telegraph/button"),H=require("@telegraph/compose-refs"),ee=require("@telegraph/helpers"),C=require("@telegraph/icon"),te=require("@telegraph/input"),S=require("@telegraph/layout"),A=require("@telegraph/menu"),q=require("@telegraph/typography"),l=require("react"),k=require("@telegraph/motion"),M=require("@telegraph/tag"),ne=require("@telegraph/tooltip");function _(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const o=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(n,e,o.get?o:{enumerable:!0,get:()=>t[e]})}}return n.default=t,Object.freeze(n)}const oe=_(W),re=_(Z),ae={0:"5",1:"6",2:"8",3:"10"},R=t=>Array.isArray(t),E=t=>typeof t=="object"&&!Array.isArray(t)||typeof t=="string"||!t,se=t=>{const n=(a,i=[])=>(l.Children.toArray(a).forEach(s=>{l.isValidElement(s)&&(s.props.value?i.push(s):s.props.children&&n(s.props.children,i))}),i);return n(t).map(a=>{var r;const i=a;return{value:i.props.value,label:((r=i.props)==null?void 0:r.label)||i.props.children||i.props.value}})},T=(t,n)=>{if(t)return n===!0?t==null?void 0:t.value:t},Q=(t,n,e)=>{if(!t||!n||n.length===0)return;const o=n.find(a=>a.value===T(t,e));if(o)return o},ie=({children:t,value:n,searchQuery:e})=>{const o=K(t);return(n==null?void 0:n.toLowerCase().includes(e.toLowerCase()))||o.some(a=>a.toLowerCase().includes(e.toLowerCase()))},K=t=>{const n=l.Children.toArray(t),e=[];return n.forEach(o=>{typeof o=="string"&&e.push(o),l.isValidElement(o)&&o.props.children&&e.push(...K(o.props.children))}),e},ce=({icon:t=C.Lucide.ChevronDown,"aria-hidden":n=!0,...e})=>{const o=l.useContext(y);return c.jsx(B.Button.Icon,{as:k.motion.span,animate:{rotate:o.open?180:0},transition:{duration:150,type:"spring"},icon:t,"aria-hidden":n,...e})},le=({tooltipProps:t,...n})=>{const e=l.useContext(y),o=()=>{var i,r;if(R(e.value)){const s=e.onValueChange;s==null||s([])}if(E(e.value)){const s=e.onValueChange;s==null||s(void 0)}(r=(i=e.triggerRef)==null?void 0:i.current)==null||r.focus()};return l.useMemo(()=>{var i;if(E(e.value))return e.clearable&&e.value;if(R(e.value))return e.clearable&&((i=e.value)==null?void 0:i.length)>0},[e.clearable,e.value])?c.jsx(ne.Tooltip,{label:"Clear field",...t,children:c.jsx(B.Button,{type:"button",icon:{icon:C.Lucide.X,alt:"Clear field"},size:"1",variant:"ghost",onClick:i=>{e.value&&(i.stopPropagation(),o())},onKeyDown:i=>{(i.key==="Enter"||i.key===" ")&&(i.stopPropagation(),o())},"data-tgph-combobox-clear":!0,style:{marginTop:"calc(-1 * var(--tgph-spacing-1)",marginBottom:"calc(-1 * var(--tgph-spacing-1)"},...n})}):null},ue=({children:t,...n})=>{const e=l.useContext(y),o=l.useMemo(()=>{var s;if(!E(e.value))return;const a=Q(e.value,e.options,e.legacyBehavior),i=(a==null?void 0:a.label)||(a==null?void 0:a.value)||e.placeholder,r=e.legacyBehavior&&((s=e==null?void 0:e.value)==null?void 0:s.label);return r||i},[e.value,e.options,e.legacyBehavior,e.placeholder]);return c.jsx(B.Button.Text,{color:e.value?"default":"gray",textOverflow:"ellipsis",overflow:"hidden",...n,children:t||o})},pe=({children:t,...n})=>{const e=l.useContext(y);return c.jsx(B.Button.Text,{color:"gray",...n,children:t||e.placeholder})},ge=({children:t})=>{const n=l.useContext(y);if(!R(n.value))return null;const e=n.layout||"truncate",a=(n.value.length-2).toString().split("");return c.jsxs(S.Stack,{gap:"1",w:"full",wrap:e==="wrap"?"wrap":"nowrap",align:"center",style:{position:"relative",flexGrow:1},children:[c.jsx(k.AnimatePresence,{presenceMap:n.value.map(i=>({"tgph-motion-key":T(i,n.legacyBehavior)||"",value:!0})),children:t}),c.jsx(k.AnimatePresence,{presenceMap:[{"tgph-motion-key":"combobox-more",value:!0}],children:e==="truncate"&&n.value.length>2&&c.jsx(S.Stack,{as:k.motion.div,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:100,type:"spring"},h:"full",pr:"1",pl:"8",align:"center","aria-label":`${n.value.length-2} more selected`,position:"absolute",right:"0",style:{backgroundImage:"linear-gradient(to left, var(--tgph-surface-1) 0 60%, transparent 90% 100%)"},children:c.jsxs(q.Text,{as:"span",size:"1",style:{whiteSpace:"nowrap"},children:["+",c.jsxs(k.AnimatePresence,{presenceMap:a.map(i=>({"tgph-motion-key":i,value:!0})),children:[a.map(i=>c.jsx(S.Box,{as:k.motion.span,initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:100,type:"spring"},w:"2",display:"inline-block","tgph-motion-key":i,children:i},i))," "]}),"more"]})})})]})},V=l.createContext({value:""}),de=({value:t,children:n,...e})=>c.jsx(V.Provider,{value:{value:t},children:c.jsx(M.Tag.Root,{as:k.motion.span,initializeWithAnimation:!1,initial:{opacity:0,scale:.5},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.5},transition:{duration:100,type:"spring"},"tgph-motion-key":t,size:"1",layout:"position",...e,children:n})}),fe=({children:t,...n})=>{const e=l.useContext(y),o=l.useContext(V),a=l.useMemo(()=>{const i=e.options.find(p=>p.value===o.value);if(i)return i.label||i.value;if(!e.value)return;const s=e.value.find(p=>T(p,e.legacyBehavior)===o.value);if(s)return s},[e.options,e.value,o.value,e.legacyBehavior]);return c.jsx(M.Tag.Text,{...n,children:t||a})},he=({children:t,...n})=>{const e=l.useContext(y),o=l.useContext(V);return c.jsx(M.Tag.Button,{icon:{icon:C.Lucide.X,alt:`Remove ${o.value}`},onClick:a=>{if(!e.onValueChange)return;const i=e.onValueChange,s=e.value.filter(p=>T(p,e.legacyBehavior)!==o.value);i==null||i(s),a.stopPropagation(),a.preventDefault()},...n,children:t})},xe=({value:t,children:n,...e})=>c.jsxs(P.Root,{value:t,...e,children:[c.jsx(P.Text,{children:n}),c.jsx(P.Button,{})]}),P={Root:de,Text:fe,Button:he,Default:xe},j={TriggerIndicator:ce,TriggerClear:le,TriggerText:ue,TriggerPlaceholder:pe,TriggerTagsContainer:ge,TriggerTag:P},ye=["ArrowDown","PageUp","Home"],me=["ArrowUp","PageDown","End"],N=["Enter"," "],y=l.createContext({value:void 0,onValueChange:()=>{},contentId:"",triggerId:"",open:!1,setOpen:()=>{},onOpenToggle:()=>{},clearable:!1,disabled:!1,options:[],legacyBehavior:!1}),be=({modal:t=!0,closeOnSelect:n=!0,clearable:e=!1,disabled:o=!1,legacyBehavior:a=!1,open:i,onOpenChange:r,defaultOpen:s,value:p,onValueChange:g,errored:m,placeholder:v,layout:h,children:u,...d})=>{const x=l.useId(),b=l.useId(),f=l.useRef(null),w=l.useRef(null),D=l.useRef(null),L=l.useMemo(()=>se(u),[u]),[G,F]=l.useState(""),[O=!1,I]=J.useControllableState({prop:i,defaultProp:s,onChange:r}),Y=l.useCallback(()=>{I(U=>!U)},[I]);return l.useEffect(()=>{O||F("")},[O]),c.jsx(y.Provider,{value:{contentId:x,triggerId:b,value:p,onValueChange:g,placeholder:v,open:O,setOpen:I,onOpenToggle:Y,closeOnSelect:n,clearable:e,disabled:o,searchQuery:G,setSearchQuery:F,triggerRef:f,searchRef:w,contentRef:D,errored:m,layout:h,options:L,legacyBehavior:a},children:c.jsx(A.Menu.Root,{open:O,onOpenChange:I,modal:t,...d,children:u})})},ve=()=>{const t=l.useContext(y);if(t.value&&R(t.value)){const n=t.layout||"truncate";return t.value.length===0?c.jsx(j.TriggerPlaceholder,{}):c.jsx(j.TriggerTagsContainer,{children:t.value.map((e,o)=>{const a=T(e,t.legacyBehavior);if(a&&(n==="truncate"&&o<=1||n==="wrap"))return c.jsx(ee.RefToTgphRef,{children:c.jsx(j.TriggerTag.Default,{value:a})},a)})})}if(t&&E(t.value))return t.value?c.jsx(j.TriggerText,{}):c.jsx(j.TriggerPlaceholder,{})},Ce=({size:t="2",children:n,...e})=>{const o=l.useContext(y),a=l.useMemo(()=>{if(o.value){if(E(o.value))return Q(o.value,o.options,o.legacyBehavior);if(R(o.value))return o.value.map(r=>Q(r,o.options,o.legacyBehavior))}},[o.value,o.options,o.legacyBehavior]),i=l.useCallback(()=>a?E(a)?(a==null?void 0:a.label)||(a==null?void 0:a.value)||o.placeholder:R(a)&&a.map(r=>(r==null?void 0:r.label)||(r==null?void 0:r.value)).join(", ")||o.placeholder:o.placeholder,[a,o.placeholder]);return c.jsx(A.Menu.Trigger,{...e,asChild:!0,onClick:r=>{var s,p;r.preventDefault(),o.onOpenToggle(),(p=(s=o.triggerRef)==null?void 0:s.current)==null||p.focus()},onKeyDown:r=>{if(r.key==="Tab"){r.stopPropagation();return}if(N.includes(r.key)){r.preventDefault();return}if(r.key==="ArrowDown"){r.stopPropagation(),r.preventDefault(),o.onOpenToggle();return}},tgphRef:o.triggerRef,children:c.jsxs(B.Button.Root,{id:o.triggerId,type:"button",bg:"surface-1",variant:"outline",align:"center",minH:ae[t],h:"full",w:"full",py:"1",size:t,color:o.errored?"red":"gray",justify:"space-between",role:"combobox","aria-label":i(),"aria-controls":o.contentId,"aria-expanded":o.open,"aria-haspopup":"listbox","data-tgph-combobox-trigger":!0,"data-tgph-combobox-trigger-open":o.open,disabled:o.disabled,...e,children:[n?typeof n=="function"?n({value:a}):n:c.jsx(ve,{}),c.jsxs(S.Stack,{align:"center",gap:"1",children:[c.jsx(j.TriggerClear,{}),c.jsx(j.TriggerIndicator,{})]})]})})},Te=({style:t,children:n,tgphRef:e,...o})=>{const a=l.useContext(y),i=l.useRef(!1),r=H.useComposedRefs(e,a.contentRef),s=l.useRef(null),[p,g]=l.useState(0),[m,v]=l.useState(!1),h=l.useCallback(u=>{const d=u==null?void 0:u.getBoundingClientRect();d&&g(d.height),m||v(!0)},[m]);return l.useEffect(()=>{const u=new ResizeObserver(d=>{for(const x of d){const b=x.target;h(b)}});return s.current&&m&&u.observe(s.current),()=>u.disconnect()},[m,h]),l.useEffect(()=>{m===!0&&a.open===!1&&v(!1)},[a.open,m]),l.useEffect(()=>{let u;return a.open&&(u=setTimeout(()=>{h(s.current)},10)),()=>u&&clearTimeout(u)},[a.open,h]),c.jsx(oe.Root,{asChild:!0,children:c.jsx(X.DismissableLayer,{onEscapeKeyDown:u=>{a.open&&(u.stopPropagation(),u.preventDefault(),a.setOpen(!1))},children:c.jsx(A.Menu.Content,{className:"tgph",mt:"1",onCloseAutoFocus:u=>{var d,x;i.current||(x=(d=a.triggerRef)==null?void 0:d.current)==null||x.focus(),i.current=!1,u.preventDefault()},bg:"surface-1",style:{width:"var(--tgph-combobox-trigger-width)",transition:"min-height 200ms ease-in-out",minHeight:p?`${p}px`:"0",...t,"--tgph-combobox-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-combobox-trigger-width":"var(--radix-popper-anchor-width)","--tgph-combobox-trigger-height":"var(--radix-popper-anchor-height)"},...o,tgphRef:r,"data-tgph-combobox-content":!0,"data-tgph-combobox-content-open":a.open,role:void 0,"aria-orientation":void 0,onKeyDown:u=>{var x,b,f,w;u.stopPropagation();const d=(b=(x=a.contentRef)==null?void 0:x.current)==null?void 0:b.querySelectorAll("[data-tgph-combobox-option]");document.activeElement===(d==null?void 0:d[0])&&me.includes(u.key)&&((w=(f=a.searchRef)==null?void 0:f.current)==null||w.focus())},children:c.jsx(S.Stack,{direction:"column",gap:"1",tgphRef:s,children:n})})})})},je=({...t})=>{const n=l.useContext(y);return c.jsx(S.Stack,{id:n.contentId,direction:"column",gap:"1",style:{overflowY:"auto","--max-height":t.maxHeight?void 0:"calc(var(--tgph-combobox-content-available-height) - var(--tgph-spacing-12))"},role:"listbox",...t})},z=({value:t,label:n,selected:e,onSelect:o,children:a,...i})=>{const r=l.useContext(y),[s,p]=l.useState(!1),g=r.value,m=!r.searchQuery||ie({children:n||a,value:t,searchQuery:r.searchQuery}),v=R(g)?g.some(u=>T(u,r.legacyBehavior)===t):T(g,r.legacyBehavior)===t,h=u=>{var x,b;u.stopPropagation();const d=u;if(!(d.key&&!N.includes(d.key))){if(u.preventDefault(),r.closeOnSelect===!0&&r.setOpen(!1),o)return o(u);if(E(g)){const f=r.onValueChange;r.legacyBehavior===!0?f==null||f({value:t,label:n}):f==null||f(t)}else if(R(g)){const f=r.onValueChange,w=r.value,D=v?w.filter(L=>T(L,r.legacyBehavior)!==t):[...w,r.legacyBehavior===!0?{value:t,label:n}:t];f==null||f(D)}(b=(x=r.triggerRef)==null?void 0:x.current)==null||b.focus()}};if(m)return c.jsx(A.Menu.Button,{type:"button",onSelect:h,onKeyDown:h,selected:e===null?null:e??v,onFocus:()=>p(!0),onBlur:()=>p(!1),role:"option","aria-selected":v?"true":"false","data-tgph-combobox-option":!0,"data-tgph-combobox-option-focused":s,"data-tgph-combobox-option-value":t,"data-tgph-combobox-option-label":n,...i,children:n||a||t})},Se=({label:t="Search",placeholder:n="Search",tgphRef:e,value:o,onValueChange:a,...i})=>{var v;const r=l.useId(),s=l.useContext(y),p=H.useComposedRefs(e,s.searchRef),g=o??s.searchQuery,m=a??s.setSearchQuery;return l.useEffect(()=>{var d;const h=x=>{var b,f;ye.includes(x.key)&&((f=(b=s.contentRef)==null?void 0:b.current)==null||f.focus({preventScroll:!0})),x.key==="Escape"&&s.setOpen(!1),x.stopPropagation()},u=(d=s.searchRef)==null?void 0:d.current;if(u)return u.addEventListener("keydown",h),()=>{u.removeEventListener("keydown",h)}},[s]),c.jsxs(S.Box,{borderBottom:"px",px:"1",pb:"1",children:[c.jsx(re.Root,{children:c.jsx(q.Text,{as:"label",htmlFor:r,children:t})}),c.jsx(te.Input,{id:r,variant:"ghost",placeholder:n,value:g,onChange:h=>{m(h.target.value)},LeadingComponent:c.jsx(C.Icon,{icon:C.Lucide.Search,alt:"Search Icon"}),TrailingComponent:s!=null&&s.searchQuery&&((v=s==null?void 0:s.searchQuery)==null?void 0:v.length)>0?c.jsx(B.Button,{variant:"ghost",color:"gray",icon:{icon:C.Lucide.X,alt:"Clear Search Query"},onClick:()=>{var h;return(h=s.setSearchQuery)==null?void 0:h.call(s,"")}}):null,autoFocus:!0,"data-tgph-combobox-search":!0,"aria-controls":s.contentId,...i,tgphRef:p})]})},Re=({icon:t={icon:C.Lucide.Search,alt:"Search Icon"},message:n="No results found",children:e,...o})=>{const a=l.useContext(y),[i,r]=l.useState(!1);if(l.useEffect(()=>{var p,g;const s=(g=(p=a.contentRef)==null?void 0:p.current)==null?void 0:g.querySelectorAll("[data-tgph-combobox-option]");(s==null?void 0:s.length)===0?r(!0):r(!1)},[a.searchQuery,a.contentRef,e]),i)return c.jsxs(S.Stack,{gap:"1",align:"center",justify:"center",w:"full",my:"8","data-tgph-combobox-empty":!0,...o,children:[t===null?c.jsx(c.Fragment,{}):c.jsx(C.Icon,{...t}),n===null?c.jsx(c.Fragment,{}):c.jsx(q.Text,{as:"span",children:n})]})},we=({leadingText:t="Create",values:n,onCreate:e,selected:o=null,legacyBehavior:a=!1,...i})=>{const r=l.useContext(y),s=l.useCallback(p=>!n||(n==null?void 0:n.length)===0?!1:n.some(g=>T(g,a)===p),[n,a]);if(r.searchQuery&&!s(r.searchQuery))return c.jsx(z,{leadingIcon:{icon:C.Lucide.Plus,"aria-hidden":!0},mx:"1",value:r.searchQuery,label:`${t} "${r.searchQuery}"`,selected:o,onSelect:()=>{var p;if(e&&r.value&&r.searchQuery){const g=a===!0?{value:r.searchQuery}:r.searchQuery;e(g),(p=r.setSearchQuery)==null||p.call(r,"")}},...i})},$={};Object.assign($,{Root:be,Trigger:Ce,Content:Te,Options:je,Option:z,Search:Se,Empty:Re,Create:we,Primitives:j});exports.Combobox=$;
 //# sourceMappingURL=index.js.map