@andrilla/mado-ui 1.1.1 → 1.1.2
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/README.md +23 -1
- package/dist/client/components/index.js +11 -23
- package/dist/client.js +11 -23
- package/dist/components/index.js +11 -23
- package/dist/index.js +11 -23
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -153,6 +153,28 @@ Same setup as Input, but for checkbox built on Headless UI's Checkbox.
|
|
|
153
153
|
<Checkbox name='terms' label='I agree to the terms and conditions' />
|
|
154
154
|
```
|
|
155
155
|
|
|
156
|
+
### Search
|
|
157
|
+
|
|
158
|
+
Same setup as Input, but for select built on Headless UI's Combobox. Uses uncontrolled state by default. Works great with `multiple` prop for multi-select. Includes an `allowCustom` prop to provide users with the option to write in their own options.
|
|
159
|
+
|
|
160
|
+
#### SearchOption
|
|
161
|
+
|
|
162
|
+
Add options to your Search component built on Headless UI's ComboboxOption. Designed to have customizable children, to display unique option values (e.g. icons, descriptions, etc.), while displaying just the option name in the select box.
|
|
163
|
+
|
|
164
|
+
#### Example
|
|
165
|
+
|
|
166
|
+
```tsx
|
|
167
|
+
<Search name='faq' label='Search our FAQ'>
|
|
168
|
+
<SearchOption name='Does it work?' value='does_it_work'>
|
|
169
|
+
Does it work?
|
|
170
|
+
</SearchOption>
|
|
171
|
+
|
|
172
|
+
<SearchOption name='Can I use it?' value='can_i_use_it'>
|
|
173
|
+
Can I use it?
|
|
174
|
+
</SearchOption>
|
|
175
|
+
</Search>
|
|
176
|
+
```
|
|
177
|
+
|
|
156
178
|
### Select
|
|
157
179
|
|
|
158
180
|
Same setup as Input, but for select built on Headless UI's Listbox. Uses uncontrolled state by default. Works great with `multiple` prop for multi-select.
|
|
@@ -164,7 +186,7 @@ Add options to your Select component built on Headless UI's ListboxOption. Desig
|
|
|
164
186
|
#### Example
|
|
165
187
|
|
|
166
188
|
```tsx
|
|
167
|
-
<Select label='Do you like good design?'>
|
|
189
|
+
<Select name='good_design' label='Do you like good design?'>
|
|
168
190
|
<SelectOption name='YES!' value='yes'>
|
|
169
191
|
<ThumbsUp />
|
|
170
192
|
YES!
|
|
@@ -6523,14 +6523,10 @@ function ModalClose({ as, onClick, ...props }) {
|
|
|
6523
6523
|
}
|
|
6524
6524
|
function ModalDisplay({ children, className, onClose, onOpen, place = "bottom" }) {
|
|
6525
6525
|
const [modalControls, setModalControls] = useModalControls((store) => store), isMobileDevice = useMobileDevice();
|
|
6526
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
6527
6526
|
const localDialogPanelRef = useRef(null);
|
|
6528
6527
|
const openModal = () => {
|
|
6529
|
-
|
|
6530
|
-
|
|
6531
|
-
onOpen?.();
|
|
6532
|
-
return true;
|
|
6533
|
-
});
|
|
6528
|
+
setModalControls({ isOpen: true });
|
|
6529
|
+
onOpen?.();
|
|
6534
6530
|
};
|
|
6535
6531
|
const closeFunctions = () => {
|
|
6536
6532
|
onClose?.();
|
|
@@ -6560,29 +6556,21 @@ function ModalDisplay({ children, className, onClose, onOpen, place = "bottom" }
|
|
|
6560
6556
|
});
|
|
6561
6557
|
};
|
|
6562
6558
|
const closeModal = () => {
|
|
6563
|
-
|
|
6564
|
-
|
|
6565
|
-
handleClose();
|
|
6566
|
-
return false;
|
|
6567
|
-
});
|
|
6559
|
+
setModalControls({ isOpen: false });
|
|
6560
|
+
handleClose();
|
|
6568
6561
|
};
|
|
6569
|
-
|
|
6562
|
+
const onVisible = () => {
|
|
6570
6563
|
setModalControls?.({
|
|
6571
|
-
isOpen,
|
|
6572
6564
|
place,
|
|
6573
6565
|
className,
|
|
6574
6566
|
openModal,
|
|
6575
6567
|
closeModal,
|
|
6576
6568
|
dialogPanelRef: localDialogPanelRef
|
|
6577
6569
|
});
|
|
6578
|
-
}
|
|
6579
|
-
|
|
6580
|
-
|
|
6581
|
-
|
|
6582
|
-
openModal,
|
|
6583
|
-
place,
|
|
6584
|
-
setModalControls
|
|
6585
|
-
]);
|
|
6570
|
+
};
|
|
6571
|
+
useEffect(() => {
|
|
6572
|
+
onVisible();
|
|
6573
|
+
}, []);
|
|
6586
6574
|
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
6587
6575
|
}
|
|
6588
6576
|
function Modal(props) {
|
|
@@ -6853,7 +6841,7 @@ const { Provider: SearchContextProvider, useStore: useSearchContext } = createFa
|
|
|
6853
6841
|
*/
|
|
6854
6842
|
function SearchSectionTitle({ className, ...props }) {
|
|
6855
6843
|
return /* @__PURE__ */ jsx("div", {
|
|
6856
|
-
className: twMerge("sticky -top-1 z-10 -mx-1 bg-inherit mask-t-from-transparent mask-t-from-0 mask-t-to-white mask-t-to-1.5
|
|
6844
|
+
className: twMerge("sticky -top-1 z-10 -mx-1 bg-inherit mask-t-from-transparent mask-t-from-0 mask-t-to-white mask-t-to-1.5 ps-2 font-bold text-neutral-500/50 backdrop-blur-[2px] backdrop-brightness-101", className),
|
|
6857
6845
|
...props
|
|
6858
6846
|
});
|
|
6859
6847
|
}
|
|
@@ -7030,7 +7018,7 @@ function SearchField({ allowCustom, buttonProps, children, className, defaultVal
|
|
|
7030
7018
|
/* @__PURE__ */ jsx(ComboboxInput, {
|
|
7031
7019
|
...inputProps,
|
|
7032
7020
|
"aria-label": typeof label === "string" ? label : props.name,
|
|
7033
|
-
className: (bag) => twMerge("inline-block w-full overflow-clip rounded-xl border border-neutral-500/50 bg-neutral-100 py-1
|
|
7021
|
+
className: (bag) => twMerge("inline-block w-full overflow-clip rounded-xl border border-neutral-500/50 bg-neutral-100 py-1 ps-2 pe-8 text-left text-neutral-950 outline-offset-1 outline-blue-400/95 transition-[background-color] duration-300 ease-exponential corner-super-1.5 dark:bg-neutral-700 dark:text-neutral-50", "focus:outline-3 focus-visible:bg-neutral-50 focus-visible:outline-3 active:bg-neutral-200 dark:focus-visible:bg-neutral-600 dark:active:bg-neutral-800 pointer-fine:hover:bg-neutral-50 pointer-fine:active:bg-neutral-200 dark:pointer-fine:hover:bg-neutral-600 dark:pointer-fine:active:bg-neutral-800", "data-invalid:border-red-500 data-invalid:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-100)_5%)] data-invalid:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-100))] data-invalid:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-100))] dark:data-invalid:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-800)_5%)] dark:data-invalid:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-800))] dark:data-invalid:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-800)_5%)] data-invalid:pointer-fine:hover:bg-[color-mix(in_oklch,var(--color-red-500)_10%,var(--color-neutral-500)_5%)] data-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-100))] data-invalid:pointer-fine:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-100))] dark:data-invalid:pointer-fine:hover:bg-[color-mix(in_oklch,var(--color-red-500)_10%,var(--color-neutral-800)_5%)] dark:data-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-800))] dark:data-invalid:pointer-fine:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-800)_5%)]", typeof className === "function" ? className(bag) : className),
|
|
7034
7022
|
displayValue: updateDisplayValue,
|
|
7035
7023
|
name: props.name,
|
|
7036
7024
|
onChange: queryChange,
|
package/dist/client.js
CHANGED
|
@@ -7155,14 +7155,10 @@ function ModalClose({ as, onClick, ...props }) {
|
|
|
7155
7155
|
}
|
|
7156
7156
|
function ModalDisplay({ children, className, onClose, onOpen, place = "bottom" }) {
|
|
7157
7157
|
const [modalControls, setModalControls] = useModalControls((store) => store), isMobileDevice = useMobileDevice();
|
|
7158
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
7159
7158
|
const localDialogPanelRef = useRef(null);
|
|
7160
7159
|
const openModal = () => {
|
|
7161
|
-
|
|
7162
|
-
|
|
7163
|
-
onOpen?.();
|
|
7164
|
-
return true;
|
|
7165
|
-
});
|
|
7160
|
+
setModalControls({ isOpen: true });
|
|
7161
|
+
onOpen?.();
|
|
7166
7162
|
};
|
|
7167
7163
|
const closeFunctions = () => {
|
|
7168
7164
|
onClose?.();
|
|
@@ -7192,29 +7188,21 @@ function ModalDisplay({ children, className, onClose, onOpen, place = "bottom" }
|
|
|
7192
7188
|
});
|
|
7193
7189
|
};
|
|
7194
7190
|
const closeModal = () => {
|
|
7195
|
-
|
|
7196
|
-
|
|
7197
|
-
handleClose();
|
|
7198
|
-
return false;
|
|
7199
|
-
});
|
|
7191
|
+
setModalControls({ isOpen: false });
|
|
7192
|
+
handleClose();
|
|
7200
7193
|
};
|
|
7201
|
-
|
|
7194
|
+
const onVisible = () => {
|
|
7202
7195
|
setModalControls?.({
|
|
7203
|
-
isOpen,
|
|
7204
7196
|
place,
|
|
7205
7197
|
className,
|
|
7206
7198
|
openModal,
|
|
7207
7199
|
closeModal,
|
|
7208
7200
|
dialogPanelRef: localDialogPanelRef
|
|
7209
7201
|
});
|
|
7210
|
-
}
|
|
7211
|
-
|
|
7212
|
-
|
|
7213
|
-
|
|
7214
|
-
openModal,
|
|
7215
|
-
place,
|
|
7216
|
-
setModalControls
|
|
7217
|
-
]);
|
|
7202
|
+
};
|
|
7203
|
+
useEffect(() => {
|
|
7204
|
+
onVisible();
|
|
7205
|
+
}, []);
|
|
7218
7206
|
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
7219
7207
|
}
|
|
7220
7208
|
function Modal(props) {
|
|
@@ -7485,7 +7473,7 @@ const { Provider: SearchContextProvider, useStore: useSearchContext } = createFa
|
|
|
7485
7473
|
*/
|
|
7486
7474
|
function SearchSectionTitle({ className, ...props }) {
|
|
7487
7475
|
return /* @__PURE__ */ jsx("div", {
|
|
7488
|
-
className: twMerge("sticky -top-1 z-10 -mx-1 bg-inherit mask-t-from-transparent mask-t-from-0 mask-t-to-white mask-t-to-1.5
|
|
7476
|
+
className: twMerge("sticky -top-1 z-10 -mx-1 bg-inherit mask-t-from-transparent mask-t-from-0 mask-t-to-white mask-t-to-1.5 ps-2 font-bold text-neutral-500/50 backdrop-blur-[2px] backdrop-brightness-101", className),
|
|
7489
7477
|
...props
|
|
7490
7478
|
});
|
|
7491
7479
|
}
|
|
@@ -7662,7 +7650,7 @@ function SearchField({ allowCustom, buttonProps, children, className, defaultVal
|
|
|
7662
7650
|
/* @__PURE__ */ jsx(ComboboxInput, {
|
|
7663
7651
|
...inputProps,
|
|
7664
7652
|
"aria-label": typeof label === "string" ? label : props.name,
|
|
7665
|
-
className: (bag) => twMerge("inline-block w-full overflow-clip rounded-xl border border-neutral-500/50 bg-neutral-100 py-1
|
|
7653
|
+
className: (bag) => twMerge("inline-block w-full overflow-clip rounded-xl border border-neutral-500/50 bg-neutral-100 py-1 ps-2 pe-8 text-left text-neutral-950 outline-offset-1 outline-blue-400/95 transition-[background-color] duration-300 ease-exponential corner-super-1.5 dark:bg-neutral-700 dark:text-neutral-50", "focus:outline-3 focus-visible:bg-neutral-50 focus-visible:outline-3 active:bg-neutral-200 dark:focus-visible:bg-neutral-600 dark:active:bg-neutral-800 pointer-fine:hover:bg-neutral-50 pointer-fine:active:bg-neutral-200 dark:pointer-fine:hover:bg-neutral-600 dark:pointer-fine:active:bg-neutral-800", "data-invalid:border-red-500 data-invalid:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-100)_5%)] data-invalid:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-100))] data-invalid:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-100))] dark:data-invalid:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-800)_5%)] dark:data-invalid:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-800))] dark:data-invalid:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-800)_5%)] data-invalid:pointer-fine:hover:bg-[color-mix(in_oklch,var(--color-red-500)_10%,var(--color-neutral-500)_5%)] data-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-100))] data-invalid:pointer-fine:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-100))] dark:data-invalid:pointer-fine:hover:bg-[color-mix(in_oklch,var(--color-red-500)_10%,var(--color-neutral-800)_5%)] dark:data-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-800))] dark:data-invalid:pointer-fine:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-800)_5%)]", typeof className === "function" ? className(bag) : className),
|
|
7666
7654
|
displayValue: updateDisplayValue,
|
|
7667
7655
|
name: props.name,
|
|
7668
7656
|
onChange: queryChange,
|
package/dist/components/index.js
CHANGED
|
@@ -6522,14 +6522,10 @@ function ModalClose({ as, onClick, ...props }) {
|
|
|
6522
6522
|
}
|
|
6523
6523
|
function ModalDisplay({ children, className, onClose, onOpen, place = "bottom" }) {
|
|
6524
6524
|
const [modalControls, setModalControls] = useModalControls((store) => store), isMobileDevice = useMobileDevice();
|
|
6525
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
6526
6525
|
const localDialogPanelRef = useRef(null);
|
|
6527
6526
|
const openModal = () => {
|
|
6528
|
-
|
|
6529
|
-
|
|
6530
|
-
onOpen?.();
|
|
6531
|
-
return true;
|
|
6532
|
-
});
|
|
6527
|
+
setModalControls({ isOpen: true });
|
|
6528
|
+
onOpen?.();
|
|
6533
6529
|
};
|
|
6534
6530
|
const closeFunctions = () => {
|
|
6535
6531
|
onClose?.();
|
|
@@ -6559,29 +6555,21 @@ function ModalDisplay({ children, className, onClose, onOpen, place = "bottom" }
|
|
|
6559
6555
|
});
|
|
6560
6556
|
};
|
|
6561
6557
|
const closeModal = () => {
|
|
6562
|
-
|
|
6563
|
-
|
|
6564
|
-
handleClose();
|
|
6565
|
-
return false;
|
|
6566
|
-
});
|
|
6558
|
+
setModalControls({ isOpen: false });
|
|
6559
|
+
handleClose();
|
|
6567
6560
|
};
|
|
6568
|
-
|
|
6561
|
+
const onVisible = () => {
|
|
6569
6562
|
setModalControls?.({
|
|
6570
|
-
isOpen,
|
|
6571
6563
|
place,
|
|
6572
6564
|
className,
|
|
6573
6565
|
openModal,
|
|
6574
6566
|
closeModal,
|
|
6575
6567
|
dialogPanelRef: localDialogPanelRef
|
|
6576
6568
|
});
|
|
6577
|
-
}
|
|
6578
|
-
|
|
6579
|
-
|
|
6580
|
-
|
|
6581
|
-
openModal,
|
|
6582
|
-
place,
|
|
6583
|
-
setModalControls
|
|
6584
|
-
]);
|
|
6569
|
+
};
|
|
6570
|
+
useEffect(() => {
|
|
6571
|
+
onVisible();
|
|
6572
|
+
}, []);
|
|
6585
6573
|
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
6586
6574
|
}
|
|
6587
6575
|
function Modal(props) {
|
|
@@ -6852,7 +6840,7 @@ const { Provider: SearchContextProvider, useStore: useSearchContext } = createFa
|
|
|
6852
6840
|
*/
|
|
6853
6841
|
function SearchSectionTitle({ className, ...props }) {
|
|
6854
6842
|
return /* @__PURE__ */ jsx("div", {
|
|
6855
|
-
className: twMerge("sticky -top-1 z-10 -mx-1 bg-inherit mask-t-from-transparent mask-t-from-0 mask-t-to-white mask-t-to-1.5
|
|
6843
|
+
className: twMerge("sticky -top-1 z-10 -mx-1 bg-inherit mask-t-from-transparent mask-t-from-0 mask-t-to-white mask-t-to-1.5 ps-2 font-bold text-neutral-500/50 backdrop-blur-[2px] backdrop-brightness-101", className),
|
|
6856
6844
|
...props
|
|
6857
6845
|
});
|
|
6858
6846
|
}
|
|
@@ -7029,7 +7017,7 @@ function SearchField({ allowCustom, buttonProps, children, className, defaultVal
|
|
|
7029
7017
|
/* @__PURE__ */ jsx(ComboboxInput, {
|
|
7030
7018
|
...inputProps,
|
|
7031
7019
|
"aria-label": typeof label === "string" ? label : props.name,
|
|
7032
|
-
className: (bag) => twMerge("inline-block w-full overflow-clip rounded-xl border border-neutral-500/50 bg-neutral-100 py-1
|
|
7020
|
+
className: (bag) => twMerge("inline-block w-full overflow-clip rounded-xl border border-neutral-500/50 bg-neutral-100 py-1 ps-2 pe-8 text-left text-neutral-950 outline-offset-1 outline-blue-400/95 transition-[background-color] duration-300 ease-exponential corner-super-1.5 dark:bg-neutral-700 dark:text-neutral-50", "focus:outline-3 focus-visible:bg-neutral-50 focus-visible:outline-3 active:bg-neutral-200 dark:focus-visible:bg-neutral-600 dark:active:bg-neutral-800 pointer-fine:hover:bg-neutral-50 pointer-fine:active:bg-neutral-200 dark:pointer-fine:hover:bg-neutral-600 dark:pointer-fine:active:bg-neutral-800", "data-invalid:border-red-500 data-invalid:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-100)_5%)] data-invalid:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-100))] data-invalid:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-100))] dark:data-invalid:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-800)_5%)] dark:data-invalid:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-800))] dark:data-invalid:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-800)_5%)] data-invalid:pointer-fine:hover:bg-[color-mix(in_oklch,var(--color-red-500)_10%,var(--color-neutral-500)_5%)] data-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-100))] data-invalid:pointer-fine:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-100))] dark:data-invalid:pointer-fine:hover:bg-[color-mix(in_oklch,var(--color-red-500)_10%,var(--color-neutral-800)_5%)] dark:data-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-800))] dark:data-invalid:pointer-fine:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-800)_5%)]", typeof className === "function" ? className(bag) : className),
|
|
7033
7021
|
displayValue: updateDisplayValue,
|
|
7034
7022
|
name: props.name,
|
|
7035
7023
|
onChange: queryChange,
|
package/dist/index.js
CHANGED
|
@@ -7154,14 +7154,10 @@ function ModalClose({ as, onClick, ...props }) {
|
|
|
7154
7154
|
}
|
|
7155
7155
|
function ModalDisplay({ children, className, onClose, onOpen, place = "bottom" }) {
|
|
7156
7156
|
const [modalControls, setModalControls] = useModalControls((store) => store), isMobileDevice = useMobileDevice();
|
|
7157
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
7158
7157
|
const localDialogPanelRef = useRef(null);
|
|
7159
7158
|
const openModal = () => {
|
|
7160
|
-
|
|
7161
|
-
|
|
7162
|
-
onOpen?.();
|
|
7163
|
-
return true;
|
|
7164
|
-
});
|
|
7159
|
+
setModalControls({ isOpen: true });
|
|
7160
|
+
onOpen?.();
|
|
7165
7161
|
};
|
|
7166
7162
|
const closeFunctions = () => {
|
|
7167
7163
|
onClose?.();
|
|
@@ -7191,29 +7187,21 @@ function ModalDisplay({ children, className, onClose, onOpen, place = "bottom" }
|
|
|
7191
7187
|
});
|
|
7192
7188
|
};
|
|
7193
7189
|
const closeModal = () => {
|
|
7194
|
-
|
|
7195
|
-
|
|
7196
|
-
handleClose();
|
|
7197
|
-
return false;
|
|
7198
|
-
});
|
|
7190
|
+
setModalControls({ isOpen: false });
|
|
7191
|
+
handleClose();
|
|
7199
7192
|
};
|
|
7200
|
-
|
|
7193
|
+
const onVisible = () => {
|
|
7201
7194
|
setModalControls?.({
|
|
7202
|
-
isOpen,
|
|
7203
7195
|
place,
|
|
7204
7196
|
className,
|
|
7205
7197
|
openModal,
|
|
7206
7198
|
closeModal,
|
|
7207
7199
|
dialogPanelRef: localDialogPanelRef
|
|
7208
7200
|
});
|
|
7209
|
-
}
|
|
7210
|
-
|
|
7211
|
-
|
|
7212
|
-
|
|
7213
|
-
openModal,
|
|
7214
|
-
place,
|
|
7215
|
-
setModalControls
|
|
7216
|
-
]);
|
|
7201
|
+
};
|
|
7202
|
+
useEffect(() => {
|
|
7203
|
+
onVisible();
|
|
7204
|
+
}, []);
|
|
7217
7205
|
return /* @__PURE__ */ jsx(Fragment, { children });
|
|
7218
7206
|
}
|
|
7219
7207
|
function Modal(props) {
|
|
@@ -7484,7 +7472,7 @@ const { Provider: SearchContextProvider, useStore: useSearchContext } = createFa
|
|
|
7484
7472
|
*/
|
|
7485
7473
|
function SearchSectionTitle({ className, ...props }) {
|
|
7486
7474
|
return /* @__PURE__ */ jsx("div", {
|
|
7487
|
-
className: twMerge("sticky -top-1 z-10 -mx-1 bg-inherit mask-t-from-transparent mask-t-from-0 mask-t-to-white mask-t-to-1.5
|
|
7475
|
+
className: twMerge("sticky -top-1 z-10 -mx-1 bg-inherit mask-t-from-transparent mask-t-from-0 mask-t-to-white mask-t-to-1.5 ps-2 font-bold text-neutral-500/50 backdrop-blur-[2px] backdrop-brightness-101", className),
|
|
7488
7476
|
...props
|
|
7489
7477
|
});
|
|
7490
7478
|
}
|
|
@@ -7661,7 +7649,7 @@ function SearchField({ allowCustom, buttonProps, children, className, defaultVal
|
|
|
7661
7649
|
/* @__PURE__ */ jsx(ComboboxInput, {
|
|
7662
7650
|
...inputProps,
|
|
7663
7651
|
"aria-label": typeof label === "string" ? label : props.name,
|
|
7664
|
-
className: (bag) => twMerge("inline-block w-full overflow-clip rounded-xl border border-neutral-500/50 bg-neutral-100 py-1
|
|
7652
|
+
className: (bag) => twMerge("inline-block w-full overflow-clip rounded-xl border border-neutral-500/50 bg-neutral-100 py-1 ps-2 pe-8 text-left text-neutral-950 outline-offset-1 outline-blue-400/95 transition-[background-color] duration-300 ease-exponential corner-super-1.5 dark:bg-neutral-700 dark:text-neutral-50", "focus:outline-3 focus-visible:bg-neutral-50 focus-visible:outline-3 active:bg-neutral-200 dark:focus-visible:bg-neutral-600 dark:active:bg-neutral-800 pointer-fine:hover:bg-neutral-50 pointer-fine:active:bg-neutral-200 dark:pointer-fine:hover:bg-neutral-600 dark:pointer-fine:active:bg-neutral-800", "data-invalid:border-red-500 data-invalid:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-100)_5%)] data-invalid:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-100))] data-invalid:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-100))] dark:data-invalid:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-800)_5%)] dark:data-invalid:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-800))] dark:data-invalid:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-800)_5%)] data-invalid:pointer-fine:hover:bg-[color-mix(in_oklch,var(--color-red-500)_10%,var(--color-neutral-500)_5%)] data-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-100))] data-invalid:pointer-fine:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-100))] dark:data-invalid:pointer-fine:hover:bg-[color-mix(in_oklch,var(--color-red-500)_10%,var(--color-neutral-800)_5%)] dark:data-invalid:pointer-fine:focus-visible:bg-[color-mix(in_oklch,var(--color-red-500)_1%,var(--color-neutral-800))] dark:data-invalid:pointer-fine:active:bg-[color-mix(in_oklch,var(--color-red-500)_5%,var(--color-neutral-800)_5%)]", typeof className === "function" ? className(bag) : className),
|
|
7665
7653
|
displayValue: updateDisplayValue,
|
|
7666
7654
|
name: props.name,
|
|
7667
7655
|
onChange: queryChange,
|