@clicktap/ui 0.20.0 → 0.21.0

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/Select.js

@@ -1 +1 @@
-import{jsx as e,jsxs as f,Fragment as C}from"react/jsx-runtime";import{UNSAFE_PortalProvider as _}from"react-aria";import{Popover as k,ComboBox as N,Label as S,Input as L,Button as y,Text as I,FieldError as j,ListBox as D}from"react-aria-components";import{forwardRef as F}from"react";import{cn as t}from"../../utils/cn.js";import"framer-motion";import{Pulse as P}from"../Loader/Pulse.js";function E({buttonIcon:d,...o}){return d?typeof d=="function"?d(o):d:e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:t("transition-all ease-in-out duration-200",o.isOpen?"rotate-180":"rotate-0"),children:e("path",{d:"M6 9L12 15L18 9",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t(["stroke-slate-900",o.isDisabled&&"stroke-slate-400",o.isInvalid&&"stroke-red-500"])})})}function M({listBoxComponent:d,children:o,...r}){return e(d||D,{...r,children:o})}function z({label:d,description:o,errorMessage:r,children:s,placeholder:b,isLoading:l,slots:i,popoverPortalContainer:c,popoverOffset:m,selectedKey:n,className:h,classNames:a,autoComplete:p,...u},v){const g=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",a?.listContainer),x=e(k,{offset:m,className:g,children:e(M,{listBoxComponent:i?.listBoxComponent,className:t("max-h-80","overflow-y-scroll",a?.list),children:s})}),w=n===void 0?null:n;return e(N,{isDisabled:u.isDisabled||l,"data-has-value":!!n,selectedKey:w,...u,className:t("flex flex-col","w-full",h),children:B=>f(C,{children:[e(S,{className:t("flex","text-xs text-slate-500",a?.label),children:d}),f("div",{className:t("flex","relative","w-full",a?.comboBoxContainer),children:[e(L,{placeholder:b,className:t("border border-solid border-slate-300","text-sm text-slate-900","py-0 px-2","h-10 w-full","m-0","rounded-md","bg-white","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"," data-[disabled]:bg-slate-100 data-[disabled]:border-slate-300",l?"data-[disabled]:text-slate-900":"data-[disabled]:text-slate-500","data-[invalid]:border-red-500 data-[invalid]:bg-red-100 data-[invalid]:text-red-600","data-[invalid]:data-[hovered]:border-red-600","data-[invalid]:data-[focused]:border-red-600 data-[invalid]:data-[focused]:outline data-[invalid]:data-[focused]:outline-2 data-[invalid]:data-[focused]:outline-red-200","data-[invalid]:placeholder:text-slate-400",a?.input),ref:v,autoComplete:p}),l?e("div",{className:t("absolute top-2 right-2","block",a?.loader),children:i?.loadingIcon||e(P,{})}):e(y,{className:t("absolute top-2 right-0","block","border-none","bg-none",a?.arrowButton),children:e(E,{buttonIcon:i?.buttonIcon,...B})})]}),o&&e(I,{slot:"description",className:t("flex","text-xs","text-slate-500",a?.description),children:o}),e(j,{className:t("flex","text-xs","text-red-500",a?.errorMessage),children:r}),c?e(_,{getContainer:c,children:x}):x]})})}const G=F(z);export{G as Select,G as default};
+import{jsx as e,jsxs as x,Fragment as B}from"react/jsx-runtime";import{ComboBox as C,Label as k,Input as _,Button as y,Text as L,FieldError as N,Popover as S,ListBox as I}from"react-aria-components";import{forwardRef as R,useRef as j}from"react";import{cn as t}from"../../utils/cn.js";import"framer-motion";import{Pulse as D}from"../Loader/Pulse.js";function F({buttonIcon:d,...o}){return d?typeof d=="function"?d(o):d:e("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:t("transition-all ease-in-out duration-200",o.isOpen?"rotate-180":"rotate-0"),children:e("path",{d:"M6 9L12 15L18 9",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t(["stroke-slate-900",o.isDisabled&&"stroke-slate-400",o.isInvalid&&"stroke-red-500"])})})}function M({listBoxComponent:d,children:o,...r}){return e(d||I,{...r,children:o})}function P({label:d,description:o,errorMessage:r,children:s,placeholder:f,isLoading:l,slots:i,popoverOffset:b,selectedKey:n,className:m,classNames:a,autoComplete:h,...u},p){const c=j(null),v=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",a?.listContainer),g=n===void 0?null:n;return e(C,{isDisabled:u.isDisabled||l,"data-has-value":!!n,selectedKey:g,...u,className:t("flex flex-col","w-full",m),ref:c,children:w=>x(B,{children:[e(k,{className:t("flex","text-xs text-slate-500",a?.label),children:d}),x("div",{className:t("flex","relative","w-full",a?.comboBoxContainer),children:[e(_,{placeholder:f,className:t("border border-solid border-slate-300","text-sm text-slate-900","py-0 px-2","h-10 w-full","m-0","rounded-md","bg-white","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"," data-[disabled]:bg-slate-100 data-[disabled]:border-slate-300",l?"data-[disabled]:text-slate-900":"data-[disabled]:text-slate-500","data-[invalid]:border-red-500 data-[invalid]:bg-red-100 data-[invalid]:text-red-600","data-[invalid]:data-[hovered]:border-red-600","data-[invalid]:data-[focused]:border-red-600 data-[invalid]:data-[focused]:outline data-[invalid]:data-[focused]:outline-2 data-[invalid]:data-[focused]:outline-red-200","data-[invalid]:placeholder:text-slate-400",a?.input),ref:p,autoComplete:h}),l?e("div",{className:t("absolute top-2 right-2","block",a?.loader),children:i?.loadingIcon||e(D,{})}):e(y,{className:t("absolute top-2 right-0","block","border-none","bg-none",a?.arrowButton),children:e(F,{buttonIcon:i?.buttonIcon,...w})})]}),o&&e(L,{slot:"description",className:t("flex","text-xs","text-slate-500",a?.description),children:o}),e(N,{className:t("flex","text-xs","text-red-500",a?.errorMessage),children:r}),e(S,{offset:b,className:v,style:{"--trigger-width":`${c?.current?.getBoundingClientRect().width||0}px`},children:e(M,{listBoxComponent:i?.listBoxComponent,className:t("max-h-80","overflow-y-scroll",a?.list),children:s})})]})})}const q=R(P);export{q as Select,q as default};

package/components/Select/Select.types.d.ts

@@ -15,7 +15,6 @@ export interface SelectProps<T extends object> extends Omit<AriaComboBoxProps<T>
     children: ReactNode | ((item: T) => ReactNode);
     slots?: SelectSlots<T>;
     popoverOffset?: number;
-    popoverPortalContainer?: () => HTMLElement | null;
     classNames?: SlotsToClasses<'label' | 'name' | 'comboBoxContainer' | 'input' | 'loader' | 'arrowButton' | 'description' | 'errorMessage' | 'listContainer' | 'list'>;
     autoComplete?: HTMLInputAutoCompleteAttribute;
 }

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 c}from"./Option.js";import{Select as n}from"./Select.js";import"react/jsx-runtime";import"react-aria-components";import"../../utils/cn.js";import"react-aria";import"react";import"framer-motion";import"../Loader/Pulse.js";export{c as Option,n 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.0",
+  "version": "0.21.0",
   "private": false,
   "author": "Clicktap",
   "description": "A library of React UI components and low-level hooks.",