@mbao01/common 0.0.55 → 0.0.57

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

@@ -6,7 +6,7 @@ declare const MultiSelect: {
         displayName: string;
     };
     Input: {
-        ({ className, ...props }: MultiSelectInputProps): import("react/jsx-runtime").JSX.Element;
+        ({ className, size, ...props }: MultiSelectInputProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     Content: import('react').ForwardRefExoticComponent<MultiSelectContentProps & import('react').RefAttributes<HTMLDivElement>>;
@@ -34,6 +34,7 @@ declare const MultiSelect: {
         keywords?: string[];
         forceMount?: boolean;
     } & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+        variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | undefined;
         size?: "xs" | "sm" | "md" | "lg" | undefined;
         disabled?: boolean | undefined;
         included?: boolean | undefined;

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

@@ -1,6 +1,6 @@
 export declare const getMultiSelectClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export declare const getMultiSelectTriggerClasses: (props?: ({
-    variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | "ghost" | null | undefined;
+    variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | null | undefined;
     outline?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
     wide?: boolean | null | undefined;
@@ -10,6 +10,7 @@ export declare const getMultiSelectItemClasses: (props?: ({
     included?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+    variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const getMultiSelectListClasses: (props?: ({
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;
@@ -17,3 +18,6 @@ export declare const getMultiSelectListClasses: (props?: ({
 export declare const getMultiSelectTagClasses: (props?: ({
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getMultiSelectInputClasses: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, HTMLAttributes } from 'react';
 import { VariantProps } from '../../../libs';
 import { Command } from '../../Command';
-import { getMultiSelectItemClasses, getMultiSelectListClasses, getMultiSelectTriggerClasses } from './constants';
+import { getMultiSelectInputClasses, getMultiSelectItemClasses, getMultiSelectListClasses, getMultiSelectTriggerClasses } from './constants';
 export type Item = {
     value: string;
     label?: string;
@@ -25,7 +25,7 @@ export type MultiSelectContextProps = {
     handleSelect: (e: React.SyntheticEvent<HTMLInputElement>) => void;
 };
 export type MultiSelectTriggerProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof getMultiSelectTriggerClasses>;
-export type MultiSelectInputProps = ComponentPropsWithoutRef<typeof Command.Input>;
+export type MultiSelectInputProps = Omit<ComponentPropsWithoutRef<typeof Command.Input>, "size"> & VariantProps<typeof getMultiSelectInputClasses>;
 export type MultiSelectContentProps = HTMLAttributes<HTMLDivElement>;
 export type MultiSelectListProps = ComponentPropsWithoutRef<typeof Command.List> & VariantProps<typeof getMultiSelectListClasses>;
 export type MultiSelectItemProps = Item & ComponentPropsWithoutRef<typeof Command.Item> & VariantProps<typeof getMultiSelectItemClasses>;

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

@@ -8,6 +8,9 @@ export declare const getSelectItemClasses: (props?: ({
     variant?: "accent" | "default" | "error" | "info" | "primary" | "secondary" | "success" | "warning" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const getSelectLabelClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getSelectValueClasses: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const getSelectSeparatorClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export declare const getSelectContentClasses: (props?: ({
     position?: "popper" | "item-aligned" | null | undefined;

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

@@ -1,6 +1,7 @@
 import { VariantProps } from '../../../libs';
-import { getSelectContentClasses, getSelectTriggerClasses } from './constants';
+import { getSelectContentClasses, getSelectTriggerClasses, getSelectValueClasses } from './constants';
 import * as SelectPrimitive from "@radix-ui/react-select";
 export type SelectTriggerProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & VariantProps<typeof getSelectTriggerClasses>;
 export type SelectItemProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & VariantProps<typeof getSelectTriggerClasses>;
 export type SelectContentProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & VariantProps<typeof getSelectContentClasses>;
+export type SelectValueProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value> & VariantProps<typeof getSelectValueClasses>;

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

@@ -1,5 +1,6 @@
 export { DatetimeInput } from './DatetimeInput';
 export { Input } from './Input';
+export { MultiSelect } from './MultiSelect';
 export { OtpInput } from './OtpInput';
 export { Phone } from './Phone';
 export { Radio } from './Radio';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.55",
+  "version": "0.0.57",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -172,5 +172,5 @@
     "recharts": "^2.13.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "a1cade5cde1e079c2746a9c703f7bd5def5063f4"
+  "gitHead": "da184d4f814a6be9bdab346555fad9809f0eb427"
 }

package/src/components/Form/MultiSelect/MultiSelect.tsx

@@ -18,6 +18,7 @@ import { Badge } from "../../Badge";
 import { Command } from "../../Command";
 import {
   getMultiSelectClasses,
+  getMultiSelectInputClasses,
   getMultiSelectItemClasses,
   getMultiSelectListClasses,
   getMultiSelectTagClasses,
@@ -247,7 +248,7 @@ export const MultiSelectTrigger = ({
 
 MultiSelectTrigger.displayName = "MultiSelectTrigger";
 
-const MultiSelectInput = ({ className, ...props }: MultiSelectInputProps) => {
+const MultiSelectInput = ({ className, size, ...props }: MultiSelectInputProps) => {
   const {
     setOpen,
     inputValue,
@@ -270,9 +271,9 @@ const MultiSelectInput = ({ className, ...props }: MultiSelectInputProps) => {
       onFocus={() => setOpen(true)}
       onClick={() => setActiveIndex(-1)}
       className={cn(
-        "bg-transparent outline-none flex-1",
-        className,
-        activeIndex !== -1 && "caret-transparent"
+        getMultiSelectInputClasses({ size }),
+        { "caret-transparent": activeIndex !== -1 },
+        className
       )}
     />
   );
@@ -309,7 +310,7 @@ const MultiSelectList = forwardRef<ComponentRef<typeof Command.List>, MultiSelec
 MultiSelectList.displayName = "MultiSelectList";
 
 const MultiSelectItem = forwardRef<ComponentRef<typeof Command.Item>, MultiSelectItemProps>(
-  ({ className, value, label, children, size, disabled, ...props }, ref) => {
+  ({ className, value, label, children, size, disabled, variant, ...props }, ref) => {
     const { values: options, onValueChange, setInputValue } = useMultiSelect();
 
     const mousePreventDefault = useCallback((e: MouseEvent) => {
@@ -327,7 +328,7 @@ const MultiSelectItem = forwardRef<ComponentRef<typeof Command.Item>, MultiSelec
           onValueChange(value, label);
           setInputValue("");
         }}
-        className={cn(getMultiSelectItemClasses({ included, disabled, size }), className)}
+        className={cn(getMultiSelectItemClasses({ included, disabled, variant, size }), className)}
         onMouseDown={mousePreventDefault}
       >
         {children}

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

@@ -1,18 +1,15 @@
 import { cva } from "../../../libs";
 
-export const getMultiSelectClasses = cva(
-  "overflow-visible bg-transparent flex flex-col h-fit w-fit"
-);
+export const getMultiSelectClasses = cva("overflow-visible bg-transparent flex flex-col h-fit");
 
 export const getMultiSelectTriggerClasses = cva(
-  "flex items-center flex-wrap gap-1 h-fit px-1 py-2 rounded-md transition-all overflow-hidden",
+  "flex items-center flex-wrap gap-1 h-fit w-fit px-1 py-2 rounded-md transition-all overflow-hidden",
   {
     variants: {
       variant: {
         default: "border-0",
         accent: "border border-accent",
         error: "border border-error",
-        ghost: "border border-ghost",
         info: "border border-info",
         primary: "border border-primary",
         secondary: "border border-secondary",
@@ -55,7 +52,7 @@ export const getMultiSelectTriggerClasses = cva(
 );
 
 export const getMultiSelectItemClasses = cva(
-  "rounded-md cursor-pointer px-2 py-1 transition-colors flex justify-between",
+  "cursor-pointer transition-colors flex justify-between aria-selected:bg-base-300 aria-selected:text-base-content rounded-sm py-1.5 px-2 text-sm outline-none",
   {
     variants: {
       included: {
@@ -70,12 +67,22 @@ export const getMultiSelectItemClasses = cva(
         md: "px-2 text-sm",
         lg: "px-3 text-lg",
       },
+      variant: {
+        default: "aria-selected:bg-transparent aria-selected:text-base-content",
+        primary: "aria-selected:bg-primary aria-selected:text-primary-content",
+        secondary: "aria-selected:bg-secondary aria-selected:text-secondary-content",
+        accent: "aria-selected:bg-accent aria-selected:text-accent-content",
+        success: "aria-selected:bg-success aria-selected:text-success-content",
+        warning: "aria-selected:bg-warning aria-selected:text-warning-content",
+        info: "aria-selected:bg-info aria-selected:text-info-content",
+        error: "aria-selected:bg-error aria-selected:text-error-content",
+      },
     },
   }
 );
 
 export const getMultiSelectListClasses = cva(
-  "p-2 flex flex-col gap-2 rounded-md scrollbar-thin scrollbar-track-transparent transition-colors scrollbar-thumb-muted-foreground dark:scrollbar-thumb-muted scrollbar-thumb-rounded-lg w-full absolute bg-background shadow-md z-10 border border-muted top-0",
+  "p-1 bg-base-100 flex flex-col gap-2 rounded-md scrollbar-thin scrollbar-track-transparent transition-colors scrollbar-thumb-muted-foreground dark:scrollbar-thumb-muted scrollbar-thumb-rounded-lg w-full absolute bg-background shadow-md z-10 border border-muted top-1",
   {
     variants: {
       size: {
@@ -101,3 +108,14 @@ export const getMultiSelectTagClasses = cva(
     },
   }
 );
+
+export const getMultiSelectInputClasses = cva("bg-transparent outline-none flex-1", {
+  variants: {
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-md",
+      lg: "text-lg",
+    },
+  },
+});

package/src/components/Form/MultiSelect/types.ts

@@ -2,6 +2,7 @@ import { ComponentPropsWithoutRef, HTMLAttributes } from "react";
 import { VariantProps } from "../../../libs";
 import { Command } from "../../Command";
 import {
+  getMultiSelectInputClasses,
   getMultiSelectItemClasses,
   getMultiSelectListClasses,
   getMultiSelectTriggerClasses,
@@ -35,7 +36,8 @@ export type MultiSelectContextProps = {
 export type MultiSelectTriggerProps = HTMLAttributes<HTMLDivElement> &
   VariantProps<typeof getMultiSelectTriggerClasses>;
 
-export type MultiSelectInputProps = ComponentPropsWithoutRef<typeof Command.Input>;
+export type MultiSelectInputProps = Omit<ComponentPropsWithoutRef<typeof Command.Input>, "size"> &
+  VariantProps<typeof getMultiSelectInputClasses>;
 
 export type MultiSelectContentProps = HTMLAttributes<HTMLDivElement>;
 

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

@@ -47,7 +47,7 @@ export const getSelectTriggerClasses = cva(
 );
 
 export const getSelectItemClasses = cva(
-  "relative flex w-full cursor-pointer select-none items-center focus:bg-neutral focus:text-neutral-content rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  "relative flex w-full cursor-pointer select-none items-center focus:bg-base-300 focus:text-base-content rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
   {
     variants: {
       variant: {
@@ -66,6 +66,17 @@ export const getSelectItemClasses = cva(
 
 export const getSelectLabelClasses = cva("px-2 py-1.5 text-sm font-semibold");
 
+export const getSelectValueClasses = cva("", {
+  variants: {
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-md",
+      lg: "text-lg",
+    },
+  },
+});
+
 export const getSelectSeparatorClasses = cva("-mx-1 my-1 h-px bg-muted");
 
 export const getSelectContentClasses = cva(

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

@@ -1,6 +1,10 @@
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { type VariantProps } from "../../../libs";
-import { getSelectContentClasses, getSelectTriggerClasses } from "./constants";
+import {
+  getSelectContentClasses,
+  getSelectTriggerClasses,
+  getSelectValueClasses,
+} from "./constants";
 
 export type SelectTriggerProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> &
   VariantProps<typeof getSelectTriggerClasses>;
@@ -10,3 +14,6 @@ export type SelectItemProps = React.ComponentPropsWithoutRef<typeof SelectPrimit
 
 export type SelectContentProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> &
   VariantProps<typeof getSelectContentClasses>;
+
+export type SelectValueProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value> &
+  VariantProps<typeof getSelectValueClasses>;

package/src/components/Form/index.ts

@@ -1,5 +1,6 @@
 export { DatetimeInput } from "./DatetimeInput";
 export { Input } from "./Input";
+export { MultiSelect } from "./MultiSelect";
 export { OtpInput } from "./OtpInput";
 export { Phone } from "./Phone";
 export { Radio } from "./Radio";