@clicktap/ui 0.14.13 → 0.14.15

package/components/Link/Link.js

@@ -1 +1 @@
-import{jsx as s}from"react/jsx-runtime";import{forwardRef as i}from"react";import{Link as d}from"react-aria-components";import{cn as l}from"../../utils/cn.js";const c=i(({children:t,isDisabled:e,className:r,...a},o)=>s(d,{...a,isDisabled:e,className:l("flex items-center cursor-pointer","text-slate-500","no-underline","transition-colors duration-300","hover:text-slate-800",['data-[disabled="true"]:cursor-default','data-[disabled="true"]:text-slate-300','data-[disabled="true"]:hover:text-slate-300'],r),ref:o,children:t}));export{c as Link,c as default};
+import{jsx as n}from"react/jsx-runtime";import{forwardRef as d}from"react";import{Link as l}from"react-aria-components";import{cn as u}from"../../utils/cn.js";const x=d(({children:e,isDisabled:r,className:t,...o},a)=>n(l,{...o,isDisabled:r,className:s=>{const i=typeof t=="function"?t(s):t;return u("flex items-center cursor-pointer","text-slate-500","no-underline","transition-colors duration-300","hover:text-slate-800",['data-[disabled="true"]:cursor-default','data-[disabled="true"]:text-slate-300','data-[disabled="true"]:hover:text-slate-300'],i)},ref:a,children:e}));export{x as Link,x as default};

package/components/Link/Link.tsx

@@ -11,19 +11,24 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...props}
       isDisabled={isDisabled}
-      className={cn(
-        'flex items-center cursor-pointer',
-        'text-slate-500',
-        'no-underline',
-        'transition-colors duration-300',
-        'hover:text-slate-800',
-        [
-          'data-[disabled="true"]:cursor-default',
-          'data-[disabled="true"]:text-slate-300',
-          'data-[disabled="true"]:hover:text-slate-300',
-        ],
-        className
-      )}
+      className={(renderProps) => {
+        const userClasses =
+          typeof className === 'function' ? className(renderProps) : className;
+
+        return cn(
+          'flex items-center cursor-pointer',
+          'text-slate-500',
+          'no-underline',
+          'transition-colors duration-300',
+          'hover:text-slate-800',
+          [
+            'data-[disabled="true"]:cursor-default',
+            'data-[disabled="true"]:text-slate-300',
+            'data-[disabled="true"]:hover:text-slate-300',
+          ],
+          userClasses
+        );
+      }}
       ref={ref}
     >
       {children}

package/components/Select/Select.d.ts

@@ -1,3 +1,9 @@
+import { ForwardedRef } from 'react';
 import { SelectProps } from './Select.types';
-export declare function Select<T extends object>({ label, description, errorMessage, children, placeholder, key, isLoading, slots, popoverPortalContainer, popoverOffset, selectedKey, className, classNames, ...props }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;
+interface SelectComponent {
+    <T extends object>(props: SelectProps<T> & {
+        ref?: ForwardedRef<HTMLInputElement>;
+    }): JSX.Element;
+}
+export declare const Select: SelectComponent;
 export default Select;

package/components/Select/Select.js

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

package/components/Select/Select.tsx

@@ -12,7 +12,7 @@ import {
 } from 'react-aria-components';
 import type { ComboBoxRenderProps, ListBoxProps } from 'react-aria-components';
 import { forwardRef, useState } from 'react';
-import type { PropsWithChildren, Ref } from 'react';
+import type { ForwardedRef, Ref } from 'react';
 import { motion } from 'framer-motion';
 import { cn } from '../../utils/cn';
 import { Pulse } from '../Loader';
@@ -85,22 +85,28 @@ function ListBoxSlot<T extends object>({
   );
 }
 
-export function Select<T extends object>({
-  label,
-  description,
-  errorMessage,
-  children,
-  placeholder,
-  key,
-  isLoading,
-  slots,
-  popoverPortalContainer,
-  popoverOffset,
-  selectedKey,
-  className,
-  classNames,
-  ...props
-}: SelectProps<T>) {
+// Internal component - necessary to preserve generics in children
+// i.e. <Select items={[{id: 'test', value: 'test'}]}.../> won't reference "any"
+function SelectInner<T extends object>(
+  {
+    label,
+    description,
+    errorMessage,
+    children,
+    placeholder,
+    key,
+    isLoading,
+    slots,
+    popoverPortalContainer,
+    popoverOffset,
+    selectedKey,
+    className,
+    classNames,
+    autoComplete,
+    ...props
+  }: SelectProps<T>,
+  ref: ForwardedRef<HTMLInputElement>
+) {
   const [animation, setAnimation] =
     useState<ComboBoxPopoverAnimationState>('unmounted');
   const [isComboOpen, setIsComboOpen] = useState<boolean>(false);
@@ -156,6 +162,8 @@ export function Select<T extends object>({
                 'data-[invalid]:placeholder:text-slate-400',
                 classNames?.input
               )}
+              ref={ref}
+              autoComplete={autoComplete}
             />
             {isLoading ? (
               <div
@@ -250,4 +258,14 @@ export function Select<T extends object>({
   );
 }
 
+// Type for the exported component that preserves generics
+interface SelectComponent {
+  <T extends object>(
+    props: SelectProps<T> & { ref?: ForwardedRef<HTMLInputElement> }
+  ): JSX.Element;
+}
+
+// Create the forwarded component with proper typing
+export const Select = forwardRef(SelectInner) as SelectComponent;
+
 export default Select;

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

@@ -1,5 +1,5 @@
 import { ComboBoxRenderProps, ComboBoxProps as AriaComboBoxProps, ValidationResult, ListBoxProps } from 'react-aria-components';
-import { ComponentType, Key, ReactNode } from 'react';
+import { ComponentType, HTMLInputAutoCompleteAttribute, Key, ReactNode } from 'react';
 import { SlotsToClasses } from '../../types/SlotsToClasses';
 export type ComboBoxPopoverAnimationState = 'unmounted' | 'hidden' | 'visible';
 export type SelectSlots<T extends object> = {
@@ -19,4 +19,5 @@ export interface SelectProps<T extends object> extends Omit<AriaComboBoxProps<T>
     popoverOffset?: number;
     popoverPortalContainer?: Element;
     classNames?: SlotsToClasses<'label' | 'name' | 'comboBoxContainer' | 'input' | 'loader' | 'arrowButton' | 'description' | 'errorMessage' | 'listContainer' | 'list'>;
+    autoComplete?: HTMLInputAutoCompleteAttribute;
 }

package/components/Select/Select.types.ts

@@ -4,7 +4,12 @@ import type {
   ValidationResult,
   ListBoxProps,
 } from 'react-aria-components';
-import type { ComponentType, Key, ReactNode } from 'react';
+import type {
+  ComponentType,
+  HTMLInputAutoCompleteAttribute,
+  Key,
+  ReactNode,
+} from 'react';
 import type { SlotsToClasses } from '../../types/SlotsToClasses';
 
 export type ComboBoxPopoverAnimationState = 'unmounted' | 'hidden' | 'visible';
@@ -39,4 +44,5 @@ export interface SelectProps<T extends object>
     | 'listContainer'
     | 'list'
   >;
+  autoComplete?: HTMLInputAutoCompleteAttribute;
 }

package/package.json

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