@clicktap/ui 0.20.1 → 0.21.1

package/components/ModalOverlay/ModalOverlay.js

@@ -1 +1 @@
-import{jsx as i}from"react/jsx-runtime";import{forwardRef as A,useId as w,useEffect as x,useCallback as C}from"react";import{ModalOverlay as p}from"react-aria-components";import{motion as I,AnimatePresence as N}from"framer-motion";import{useDialogTrigger as P}from"../DialogTrigger/DialogTrigger.js";import{cn as k}from"../../utils/cn.js";const R="body > [inert]:not(#__next):not([data-overlay-container])";function S(t){return Object.keys(t).some(e=>e.startsWith("__react"))}function v(){document.querySelectorAll(R).forEach(t=>t.removeAttribute("inert"))}function F(t){return!!(t.closest("[data-overlay-container]")||t.closest("#__next"))}const T=A(({style:t,children:e,...n},r)=>{const s=typeof t=="function"?t(n):t;return i(p,{...n,ref:r,style:s,children:e})});let d=null;function j(){return typeof window>"u"?null:(d||(d=I.create(T)),d)}const b=j();function y({animate:t,animation:e,setAnimation:n,className:r,animationVariants:s,isDismissable:O=!0,children:m,...h}){const M=w();x(()=>{v();const o=new MutationObserver(a=>{for(const l of a)if(l.type==="attributes"&&l.attributeName==="inert"){const c=l.target;c.parentElement===document.body?v():S(c)||c.removeAttribute("inert")}});return o.observe(document.body,{attributes:!0,attributeFilter:["inert"],subtree:!0}),()=>o.disconnect()},[]);const{key:E,shouldCloseOnInteractOutside:u,...g}=h,_=C(o=>u?u(o):F(o),[u]),f={isDismissable:O,shouldCloseOnInteractOutside:_,className:k("bg-black/30 backdrop-blur-sm","fixed top-0 left-0","z-[1000]","w-screen h-[var(--visual-viewport-height)]",r),...g};return b?i(b,{isExiting:e==="hidden",onAnimationComplete:o=>{n(a=>o==="hidden"&&a==="hidden"?"unmounted":a)},variants:s||{hidden:{opacity:0,transition:{delay:.08}},visible:{opacity:1}},initial:"hidden",animate:t,exit:"hidden",...f,children:m},E||M):i(p,{...f,children:m})}function B(t){const{isOpen:e}=t,{animation:n,setAnimation:r}=P();return e!==void 0?i(N,{children:e&&i(y,{...t,animate:"visible",animation:n,setAnimation:r})}):i(y,{...t,animate:n,animation:n,setAnimation:r})}export{B as ModalOverlay,B as default};
+import{jsx as i}from"react/jsx-runtime";import{forwardRef as x,useId as C,useEffect as I,useCallback as b}from"react";import{ModalOverlay as g}from"react-aria-components";import{motion as N,AnimatePresence as k}from"framer-motion";import{useDialogTrigger as R}from"../DialogTrigger/DialogTrigger.js";import{cn as S}from"../../utils/cn.js";const T="body > [inert]:not(#__next):not([data-overlay-container])";function F(t){return Object.keys(t).some(n=>n.startsWith("__react"))}function p(){document.querySelectorAll(T).forEach(t=>t.removeAttribute("inert"))}function j(t){return!!(t.closest("[data-overlay-container]")||t.closest("#__next"))}const q=x(({style:t,children:n,...o},r)=>{const s=typeof t=="function"?t(o):t;return i(g,{...o,ref:r,style:s,children:n})});let m=null;function z(){return typeof window>"u"?null:(m||(m=N.create(q)),m)}const O=z();function h({animate:t,animation:n,setAnimation:o,className:r,animationVariants:s,isDismissable:l=!0,children:v,...M}){const E=C();I(()=>{p();const e=new MutationObserver(u=>{for(const d of u)if(d.type==="attributes"&&d.attributeName==="inert"){const f=d.target;f.parentElement===document.body?p():F(f)||f.removeAttribute("inert")}});return e.observe(document.body,{attributes:!0,attributeFilter:["inert"],subtree:!0}),()=>e.disconnect()},[]);const{key:w,shouldCloseOnInteractOutside:c,onOpenChange:a,..._}=M,A=b(e=>c?c(e):j(e),[c]),P=b(e=>{l&&e.target===e.currentTarget&&a&&a(!1)},[l,a]),y={isDismissable:l,shouldCloseOnInteractOutside:A,onOpenChange:a,onPointerDown:P,className:S("bg-black/30 backdrop-blur-sm","fixed top-0 left-0","z-[1000]","w-screen h-[var(--visual-viewport-height)]",r),..._};return O?i(O,{isExiting:n==="hidden",onAnimationComplete:e=>{o(u=>e==="hidden"&&u==="hidden"?"unmounted":u)},variants:s||{hidden:{opacity:0,transition:{delay:.08}},visible:{opacity:1}},initial:"hidden",animate:t,exit:"hidden",...y,children:v},w||E):i(g,{...y,children:v})}function H(t){const{isOpen:n}=t,{animation:o,setAnimation:r}=R();return n!==void 0?i(k,{children:n&&i(h,{...t,animate:"visible",animation:o,setAnimation:r})}):i(h,{...t,animate:o,animation:o,setAnimation:r})}export{H as ModalOverlay,H as default};

package/components/Select/DropdownSelect.d.ts

@@ -0,0 +1,16 @@
+import { SelectProps as AriaSelectProps } from 'react-aria-components';
+import { ReactNode } from 'react';
+export type DropdownSelectProps<T extends object> = Omit<AriaSelectProps<T>, 'children'> & {
+    label?: string;
+    placeholder?: string;
+    children: ReactNode;
+    className?: string;
+    classNames?: {
+        trigger?: string;
+        label?: string;
+        value?: string;
+        listContainer?: string;
+        list?: string;
+    };
+};
+export declare function DropdownSelect<T extends object>({ label, placeholder, children, className, classNames, ...props }: DropdownSelectProps<T>): import("react/jsx-runtime").JSX.Element;

package/components/Select/DropdownSelect.js

@@ -0,0 +1 @@
+import{jsxs as s,jsx as e}from"react/jsx-runtime";import{Select as x,Label as u,Button as p,SelectValue as h,Popover as m,ListBox as b}from"react-aria-components";import{cn as t}from"../../utils/cn.js";function v({label:o,placeholder:l,children:i,className:n,classNames:r,...d}){return s(x,{...d,className:t("flex items-center gap-2",n),children:[o&&e(u,{className:t("text-xs text-slate-500",r?.label),children:o}),s(p,{className:t("flex items-center justify-between","border border-solid border-slate-300","text-sm text-slate-900","py-0 px-3","h-10","rounded-md","bg-white","cursor-pointer","transition-all ease-in-out duration-200","data-[hovered]:border-slate-400","data-[focused]:border-slate-400 data-[focused]:outline data-[focused]:outline-2 data-[focused]:outline-slate-200",r?.trigger),children:[e(h,{className:t("text-sm truncate",r?.value),children:({isPlaceholder:a,selectedText:c})=>e("span",{className:a?"text-slate-400":"",children:a?l??"Select...":c})}),e("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"shrink-0 ml-2",children:e("path",{d:"M6 9L12 15L18 9",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"stroke-slate-900"})})]}),e(m,{className:t("px-0 py-1.5","shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]","rounded-md","w-[var(--trigger-width)]","bg-white","border border-solid border-slate-300",r?.listContainer),children:e(b,{className:t("max-h-80 overflow-y-auto outline-none",r?.list),children:i})})]})}export{v as DropdownSelect};

package/components/Select/index.d.ts

@@ -1,3 +1,5 @@
+export { DropdownSelect } from './DropdownSelect';
+export type { DropdownSelectProps } from './DropdownSelect';
 export { Option } from './Option';
 export { Select } from './Select';
 export type { OptionProps } from './Option.types';

package/components/Select/index.js

@@ -1 +1 @@
-import{Option as x}from"./Option.js";import{Select as l}from"./Select.js";import"react/jsx-runtime";import"react-aria-components";import"../../utils/cn.js";import"react";import"framer-motion";import"../Loader/Pulse.js";export{x as Option,l as Select};
+import{DropdownSelect as x}from"./DropdownSelect.js";import{Option as l}from"./Option.js";import{Select as S}from"./Select.js";import"react/jsx-runtime";import"react-aria-components";import"../../utils/cn.js";import"react";import"framer-motion";import"../Loader/Pulse.js";export{x as DropdownSelect,l as Option,S as Select};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicktap/ui",
-  "version": "0.20.1",
+  "version": "0.21.1",
   "private": false,
   "author": "Clicktap",
   "description": "A library of React UI components and low-level hooks.",