@mbao01/common 0.7.1 → 0.7.2

package/dist/types/components/Combobox/Combobox.d.ts

@@ -1,2 +1,2 @@
 import { ComboboxProps, Item } from './types';
-export declare const Combobox: <T extends Item>({ label, items, classes, emptyText, placeholder, getItemValue, getItemLabel, onSelectItem, }: ComboboxProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Combobox: <T extends Item>({ label, items, classes, emptyText, placeholder, outline, variant, disabled, readOnly, getItemValue, getItemLabel, onSelectItem, }: ComboboxProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Combobox/types.d.ts

@@ -1,3 +1,5 @@
+import { ButtonProps } from '../Button/types';
+import { InputProps } from '../Form/Input/types';
 export type Item = Record<string, any>;
 export type ComboboxProps<T extends Item> = {
     label: string;
@@ -17,4 +19,4 @@ export type ComboboxProps<T extends Item> = {
         item: string;
         popoverContent: string;
     }>;
-};
+} & Pick<ButtonProps, "variant" | "disabled" | "outline"> & Pick<InputProps, "readOnly">;

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

@@ -9,6 +9,7 @@ declare const Select: {
         outline?: boolean | undefined;
         size?: "xs" | "sm" | "md" | "lg" | undefined;
         wide?: boolean | undefined;
+        readOnly?: boolean | undefined;
     } & {
         label?: React.ReactNode;
         labelPosition?: "start" | "end" | "floating";
@@ -22,6 +23,7 @@ declare const Select: {
         outline?: boolean | undefined;
         size?: "xs" | "sm" | "md" | "lg" | undefined;
         wide?: boolean | undefined;
+        readOnly?: boolean | undefined;
     } & React.RefAttributes<HTMLDivElement>>;
     Icon: React.ForwardRefExoticComponent<SelectPrimitive.SelectIconProps & React.RefAttributes<HTMLSpanElement>>;
     ItemText: React.ForwardRefExoticComponent<SelectPrimitive.SelectItemTextProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/types/components/Form/Select/constants.d.ts

@@ -3,6 +3,7 @@ export declare const getSelectTriggerClasses: (props?: ({
     wide?: boolean | null | undefined;
     outline?: boolean | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+    readOnly?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const getSelectItemClasses: (props?: ({
     variant?: "accent" | "default" | "error" | "ghost" | "info" | "primary" | "secondary" | "success" | "warning" | null | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.7.1",
+  "version": "0.7.2",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -168,5 +168,5 @@
     "recharts": "2",
     "typescript": "5"
   },
-  "gitHead": "5ccbce52df9f8411ec194b45909b47a0bc7d5b51"
+  "gitHead": "605c1bb5b1367d8755951d5c5425ca86bcd5dd96"
 }

package/src/components/Combobox/Combobox.tsx

@@ -14,6 +14,10 @@ export const Combobox = <T extends Item>({
   classes,
   emptyText,
   placeholder,
+  outline,
+  variant,
+  disabled,
+  readOnly,
   getItemValue = (item: T) => item.value as string,
   getItemLabel = (item: T) => item.label as string,
   onSelectItem,
@@ -27,9 +31,11 @@ export const Combobox = <T extends Item>({
     <Popover open={open} onOpenChange={setOpen}>
       <Popover.Trigger asChild>
         <Button
-          outline
+          outline={outline}
           role="combobox"
+          variant={variant}
           aria-expanded={open}
+          disabled={disabled}
           className={cn("justify-between", classes?.trigger)}
         >
           {value && currentItem ? getItemLabel(currentItem) : label}
@@ -38,12 +44,18 @@ export const Combobox = <T extends Item>({
       </Popover.Trigger>
       <Popover.Content className={cn("w-[200px] p-0", classes?.popoverContent)}>
         <Command className={cn(classes?.content)}>
-          <Command.Input placeholder={placeholder} className={cn(classes?.input)} />
+          <Command.Input
+            placeholder={placeholder}
+            disabled={disabled}
+            readOnly={readOnly}
+            className={cn(classes?.input)}
+          />
           <Command.Empty className={cn(classes?.empty)}>{emptyText}</Command.Empty>
           <Command.List>
             <Command.Group className={cn(classes?.group)}>
               {items?.map((item) => (
                 <Command.Item
+                  disabled={disabled}
                   key={getItemValue(item)}
                   value={getItemValue(item)}
                   onSelect={(currentValue) => {

package/src/components/Combobox/types.ts

@@ -1,3 +1,6 @@
+import { ButtonProps } from "../Button/types";
+import { InputProps } from "../Form/Input/types";
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type Item = Record<string, any>;
 
@@ -19,4 +22,5 @@ export type ComboboxProps<T extends Item> = {
     item: string;
     popoverContent: string;
   }>;
-};
+} & Pick<ButtonProps, "variant" | "disabled" | "outline"> &
+  Pick<InputProps, "readOnly">;

package/src/components/Form/Select/Select.tsx

@@ -55,6 +55,7 @@ const SelectTrigger = React.forwardRef<
       wide,
       variant,
       outline,
+      readOnly,
       ...props
     },
     ref
@@ -67,7 +68,11 @@ const SelectTrigger = React.forwardRef<
             <SelectPrimitive.Trigger
               id={id}
               ref={ref}
-              className={cn(getSelectTriggerClasses({ size, wide, variant, outline }), className)}
+              aria-readonly={readOnly}
+              className={cn(
+                getSelectTriggerClasses({ size, wide, variant, outline, readOnly }),
+                className
+              )}
               {...props}
             >
               {children}
@@ -79,10 +84,13 @@ const SelectTrigger = React.forwardRef<
       return (
         <label
           htmlFor={id}
-          className={cn(getSelectTriggerClasses({ size, wide, variant, outline }), className)}
+          className={cn(
+            getSelectTriggerClasses({ size, wide, variant, outline, readOnly }),
+            className
+          )}
         >
           {labelPosition === "start" && <LabelForSelect>{label}</LabelForSelect>}
-          <SelectPrimitive.Trigger id={id} ref={ref} {...props}>
+          <SelectPrimitive.Trigger id={id} ref={ref} aria-readonly={readOnly} {...props}>
             {children}
           </SelectPrimitive.Trigger>
           {labelPosition === "end" && <LabelForSelect className="me-0!">{label}</LabelForSelect>}
@@ -94,7 +102,11 @@ const SelectTrigger = React.forwardRef<
       <SelectPrimitive.Trigger
         id={id}
         ref={ref}
-        className={cn(getSelectTriggerClasses({ size, wide, variant, outline }), className)}
+        aria-readonly={readOnly}
+        className={cn(
+          getSelectTriggerClasses({ size, wide, variant, outline, readOnly }),
+          className
+        )}
         {...props}
       >
         {children}

package/src/components/Form/Select/constants.ts

@@ -29,6 +29,9 @@ export const getSelectTriggerClasses = cva(
         md: "select-md",
         lg: "select-lg",
       },
+      readOnly: {
+        true: "cursor-not-allowed pointer-events-none",
+      },
     }),
     compoundVariants: [
       {