@mbao01/common 0.2.2 → 0.2.4

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

@@ -35,11 +35,6 @@ export const getInputClasses = cva("input rounded-md transition-all duration-100
       size: undefined,
       className: "min-h-fit h-10",
     },
-    {
-      variant: undefined,
-      outline: true,
-      className: "border-neutral-content",
-    },
     {
       variant: "default",
       outline: true,
@@ -47,3 +42,81 @@ export const getInputClasses = cva("input rounded-md transition-all duration-100
     },
   ],
 });
+
+export const getFloatingLabelClasses = cva("floating-label");
+
+export const getInputLabelClasses = cva("", {
+  variants: {
+    floating: {
+      true: "",
+      false: "label",
+    },
+  },
+  compoundVariants: [
+    {
+      floating: undefined,
+      className: "label",
+    },
+  ],
+});
+
+export const getInputCommonClasses = cva(
+  `border border-base-content/20 shadow-2xs shadow-base-content/20 h-10 flex items-center justify-between w-fit px-2 rounded-md transition-all gap-1
+  [&:has(input:focus)]:duration-100 [&:has(input:focus)]:outline [&:has(input:focus)]:outline-2 [&:has(input:focus)]:outline-offset-2
+  [&:has(input:focus-within)]:duration-100 [&:has(input:focus-within)]:outline [&:has(input:focus-within)]:outline-2 [&:has(input:focus-within)]:outline-offset-2
+   `,
+  {
+    variants: {
+      variant: {
+        default:
+          "[&:has(input:focus)]:border-[currentColor] [&:has(input:focus-within)]:border-[currentColor] [&:has(input:focus)]:outline-ghost [&:has(input:focus-within)]:outline-ghost",
+        accent:
+          "border border-accent shadow-accent [&:has(input:focus)]:outline-accent [&:has(input:focus-within)]:outline-accent",
+        error:
+          "border border-error shadow-error [&:has(input:focus)]:outline-error [&:has(input:focus-within)]:outline-error",
+        ghost:
+          "border-0 shadow-none [&:has(input:focus)]:outline-ghost [&:has(input:focus-within)]:outline-ghost",
+        info: "border border-info shadow-info [&:has(input:focus)]:outline-info [&:has(input:focus-within)]:outline-info",
+        primary:
+          "border border-primary shadow-primary [&:has(input:focus)]:outline-primary [&:has(input:focus-within)]:outline-primary",
+        secondary:
+          "border border-secondary shadow-secondary [&:has(input:focus)]:outline-secondary [&:has(input:focus-within)]:outline-secondary",
+        success:
+          "border border-success shadow-success [&:has(input:focus)]:outline-success [&:has(input:focus-within)]:outline-success",
+        warning:
+          "border border-warning shadow-warning [&:has(input:focus)]:outline-warning [&:has(input:focus-within)]:outline-warning",
+      },
+      outline: {
+        true: "border",
+      },
+      disabled: {
+        true: "border border-base-200 shadow-none bg-base-200",
+      },
+      wide: {
+        true: "w-full",
+      },
+      size: {
+        xs: "h-6 leading-relaxed text-xs px-2",
+        sm: "h-8 leading-8 text-sm px-2",
+        md: "h-12 leading-loose text-sm px-2",
+        lg: "h-16 leading-loose text-lg px-3",
+      },
+    },
+    compoundVariants: [
+      {
+        size: undefined,
+        className: "min-h-fit h-10 text-sm",
+      },
+      {
+        variant: undefined,
+        outline: true,
+        className: "border-base-content/20",
+      },
+      {
+        variant: undefined,
+        className:
+          "[&:has(input:focus)]:border-base-content [&:has(input:focus-within)]:border-base-content",
+      },
+    ],
+  }
+);

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

@@ -1,5 +1,13 @@
-import { type VariantProps } from "../../../libs";
-import { getInputClasses } from "./constants";
+import type { ReactNode } from "react";
+import type { VariantProps } from "../../../libs";
+import { getInputClasses, getInputLabelClasses } from "./constants";
 
-export type InputProps = Omit<React.HTMLProps<HTMLInputElement>, "size" | "ref"> &
-  Omit<VariantProps<typeof getInputClasses>, "type">;
+export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "ref"> &
+  Omit<VariantProps<typeof getInputClasses>, "type"> & {
+    label?: ReactNode;
+    labelPosition?: "start" | "end" | "floating";
+  };
+
+export type InputLabelProps = VariantProps<typeof getInputLabelClasses> & {
+  children: ReactNode;
+};

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

@@ -16,6 +16,7 @@ import type {
 import { cn } from "../../../utilities";
 import { Badge } from "../../Badge";
 import { Command } from "../../Command";
+import { getInputCommonClasses } from "../Input/constants";
 import {
   getMultiSelectClasses,
   getMultiSelectInputClasses,
@@ -207,7 +208,8 @@ export const MultiSelectTrigger = ({
   return (
     <div
       className={cn(
-        getMultiSelectTriggerClasses({ size, wide, outline, variant, disabled }),
+        getInputCommonClasses({ outline, disabled, size, variant, wide }),
+        getMultiSelectTriggerClasses(),
         className
       )}
       {...props}

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

@@ -2,54 +2,7 @@ import { cva } from "../../../libs";
 
 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 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",
-        info: "border border-info",
-        primary: "border border-primary",
-        secondary: "border border-secondary",
-        success: "border border-success",
-        warning: "border border-warning",
-      },
-      outline: {
-        true: "border",
-      },
-      disabled: {
-        true: "border-base-300",
-      },
-      wide: {
-        true: "w-full",
-      },
-      size: {
-        xs: "min-h-6 leading-relaxed px-2 py-1 text-xs",
-        sm: "min-h-8 leading-8 px-3 py-1.5 text-sm",
-        md: "min-h-12 leading-loose px-4 text-sm",
-        lg: "min-h-16 leading-loose px-6 text-lg",
-      },
-    },
-    compoundVariants: [
-      {
-        size: undefined,
-        className: "min-h-10 px-4",
-      },
-      {
-        variant: undefined,
-        outline: true,
-        className: "border-neutral-content",
-      },
-      {
-        variant: "default",
-        outline: true,
-        className: "border-base-content",
-      },
-    ],
-  }
-);
+export const getMultiSelectTriggerClasses = cva("flex-wrap h-fit w-fit py-2 overflow-hidden");
 
 export const getMultiSelectItemClasses = cva(
   "cursor-pointer transition-colors flex justify-between aria-selected:bg-base-300 aria-selected:text-base-content rounded-xs py-1.5 px-2 text-sm outline-hidden",
@@ -106,10 +59,16 @@ export const getMultiSelectTagClasses = cva(
         lg: "px-2 [&>span]:max-w-32",
       },
     },
+    compoundVariants: [
+      {
+        size: undefined,
+        className: "max-h-5",
+      },
+    ],
   }
 );
 
-export const getMultiSelectInputClasses = cva("bg-transparent outline-hidden flex-1", {
+export const getMultiSelectInputClasses = cva("bg-transparent outline-hidden flex-1 my-px", {
   variants: {
     size: {
       xs: "text-xs",

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

@@ -1,11 +1,11 @@
 import { ComponentPropsWithoutRef, HTMLAttributes } from "react";
 import { VariantProps } from "../../../libs";
 import { Command } from "../../Command";
+import { getInputCommonClasses } from "../Input/constants";
 import {
   getMultiSelectInputClasses,
   getMultiSelectItemClasses,
   getMultiSelectListClasses,
-  getMultiSelectTriggerClasses,
 } from "./constants";
 
 export type Item = {
@@ -34,7 +34,7 @@ export type MultiSelectContextProps = {
 };
 
 export type MultiSelectTriggerProps = HTMLAttributes<HTMLDivElement> &
-  VariantProps<typeof getMultiSelectTriggerClasses>;
+  VariantProps<typeof getInputCommonClasses>;
 
 export type MultiSelectInputProps = Omit<ComponentPropsWithoutRef<typeof Command.Input>, "size"> &
   VariantProps<typeof getMultiSelectInputClasses>;

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

@@ -1,5 +1,8 @@
 import { type VariantProps } from "../../../libs";
 import { getRadioClasses } from "./constants";
 
-export type RadioProps = Omit<React.HTMLProps<HTMLInputElement>, "size" | "ref" | "type"> &
+export type RadioProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "size" | "ref" | "type"
+> &
   VariantProps<typeof getRadioClasses>;

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

@@ -1,5 +1,8 @@
 import { type VariantProps } from "../../../libs";
 import { getRangeClasses } from "./constants";
 
-export type RangeProps = Omit<React.HTMLProps<HTMLInputElement>, "size" | "ref" | "type"> &
+export type RangeProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "size" | "ref" | "type"
+> &
   VariantProps<typeof getRangeClasses>;

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

@@ -2,10 +2,18 @@
 
 import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
+import { Slot } from "@radix-ui/react-slot";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-import type { SelectContentProps, SelectItemProps, SelectTriggerProps } from "./types";
+import type {
+  LabelForSelectProps,
+  SelectContentProps,
+  SelectItemProps,
+  SelectTriggerProps,
+} from "./types";
 import { cn } from "../../../utilities";
 import {
+  getFloatingLabelClasses,
+  getLabelForSelectClasses,
   getSelectContentClasses,
   getSelectItemClasses,
   getSelectLabelClasses,
@@ -18,18 +26,71 @@ const Select = (props: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Roo
   <SelectPrimitive.Root {...props} />
 );
 
+const LabelForSelect = ({ children, className, floating, ...props }: LabelForSelectProps) => {
+  const SlotChild = ["string", "number", "boolean", "undefined"].includes(typeof children) ? (
+    <span>{children}</span>
+  ) : (
+    children
+  );
+
+  return (
+    <Slot className={cn(getLabelForSelectClasses({ floating }), className)} {...props}>
+      {SlotChild}
+    </Slot>
+  );
+};
+
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   SelectTriggerProps
->(({ className, children, size, variant, outline, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(getSelectTriggerClasses({ size, variant, outline }), className)}
-    {...props}
-  >
-    {children}
-  </SelectPrimitive.Trigger>
-));
+>(
+  (
+    { id, label, labelPosition = "start", className, children, size, variant, outline, ...props },
+    ref
+  ) => {
+    if (label) {
+      if (labelPosition === "floating") {
+        return (
+          <label htmlFor={id} className={getFloatingLabelClasses()}>
+            <LabelForSelect floating>{label}</LabelForSelect>
+            <SelectPrimitive.Trigger
+              id={id}
+              ref={ref}
+              className={cn(getSelectTriggerClasses({ size, variant, outline }), className)}
+              {...props}
+            >
+              {children}
+            </SelectPrimitive.Trigger>
+          </label>
+        );
+      }
+
+      return (
+        <label
+          htmlFor={id}
+          className={cn(getSelectTriggerClasses({ size, variant, outline }), className)}
+        >
+          {labelPosition === "start" && <LabelForSelect>{label}</LabelForSelect>}
+          <SelectPrimitive.Trigger id={id} ref={ref} {...props}>
+            {children}
+          </SelectPrimitive.Trigger>
+          {labelPosition === "end" && <LabelForSelect className="me-0!">{label}</LabelForSelect>}
+        </label>
+      );
+    }
+
+    return (
+      <SelectPrimitive.Trigger
+        id={id}
+        ref={ref}
+        className={cn(getSelectTriggerClasses({ size, variant, outline }), className)}
+        {...props}
+      >
+        {children}
+      </SelectPrimitive.Trigger>
+    );
+  }
+);
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectScrollUpButton = React.forwardRef<

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

@@ -5,7 +5,8 @@ export const getSelectTriggerClasses = cva(
   {
     variants: {
       variant: {
-        default: "bg-transparent",
+        default:
+          "border border-base-content/20 [&:has(input:focus)]:border-[currentColor] [&:has(input:focus-within)]:border-[currentColor] [&:has(input:focus)]:outline-ghost [&:has(input:focus-within)]:outline-ghost",
         primary: "select-primary",
         secondary: "select-secondary",
         accent: "select-accent",
@@ -13,10 +14,10 @@ export const getSelectTriggerClasses = cva(
         warning: "select-warning",
         info: "select-info",
         error: "select-error",
+        ghost: "select-ghost bg-transparent",
       },
       outline: {
         true: "border border-input",
-        false: "select-ghost",
       },
       size: {
         xs: "select-xs",
@@ -30,19 +31,10 @@ export const getSelectTriggerClasses = cva(
         size: undefined,
         className: "min-h-fit h-10",
       },
-      {
-        outline: undefined,
-        className: "select-ghost",
-      },
       {
         variant: undefined,
         outline: true,
-        className: "border-neutral-content",
-      },
-      {
-        variant: "default",
-        outline: true,
-        className: "border-base-content",
+        className: "border-base-content/20",
       },
     ],
   }
@@ -61,6 +53,7 @@ export const getSelectItemClasses = cva(
         warning: "focus:bg-warning focus:text-warning-content",
         info: "focus:bg-info focus:text-info-content",
         error: "focus:bg-error focus:text-error-content",
+        ghost: "",
       },
     },
   }
@@ -103,3 +96,20 @@ export const getSelectViewportClasses = cva("p-1", {
     },
   },
 });
+
+export const getFloatingLabelClasses = cva("floating-label");
+
+export const getLabelForSelectClasses = cva("", {
+  variants: {
+    floating: {
+      true: "",
+      false: "label",
+    },
+  },
+  compoundVariants: [
+    {
+      floating: undefined,
+      className: "label",
+    },
+  ],
+});

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

@@ -1,13 +1,18 @@
+import { ReactNode } from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { type VariantProps } from "../../../libs";
 import {
+  getLabelForSelectClasses,
   getSelectContentClasses,
   getSelectTriggerClasses,
   getSelectValueClasses,
 } from "./constants";
 
 export type SelectTriggerProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> &
-  VariantProps<typeof getSelectTriggerClasses>;
+  VariantProps<typeof getSelectTriggerClasses> & {
+    label?: ReactNode;
+    labelPosition?: "start" | "end" | "floating";
+  };
 
 export type SelectItemProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> &
   VariantProps<typeof getSelectTriggerClasses>;
@@ -17,3 +22,8 @@ export type SelectContentProps = React.ComponentPropsWithoutRef<typeof SelectPri
 
 export type SelectValueProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value> &
   VariantProps<typeof getSelectValueClasses>;
+
+export type LabelForSelectProps = VariantProps<typeof getLabelForSelectClasses> & {
+  children: ReactNode;
+  className?: string;
+};

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

@@ -1,5 +1,8 @@
 import { type VariantProps } from "../../../libs";
 import { getSwitchClasses } from "./constants";
 
-export type SwitchProps = Omit<React.HTMLProps<HTMLInputElement>, "size" | "ref" | "type"> &
+export type SwitchProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "size" | "ref" | "type"
+> &
   VariantProps<typeof getSwitchClasses>;

package/src/components/Form/TagsInput/TagsInput.tsx

@@ -7,6 +7,7 @@ import type { TagsInputProps } from "./types";
 import { cn } from "../../../utilities";
 import { Badge } from "../../Badge";
 import { Input } from "../Input";
+import { getInputCommonClasses } from "../Input/constants";
 import {
   FORMATTING_REGEX,
   getTagClasses,
@@ -225,7 +226,11 @@ export const TagsInput = forwardRef<HTMLDivElement, TagsInputProps>(
         {...props}
         ref={ref}
         dir={dir}
-        className={cn(getTagsClasses({ size, wide, outline, variant, disabled }), className)}
+        className={cn(
+          getInputCommonClasses({ outline, disabled, variant, wide }),
+          getTagsClasses({ size }),
+          className
+        )}
       >
         {tags.map((tag, index) => (
           <Badge
@@ -259,7 +264,7 @@ export const TagsInput = forwardRef<HTMLDivElement, TagsInputProps>(
           tabIndex={0}
           onSelect={handleSelect}
           aria-label={ariaLabel}
-          disabled={disableInput}
+          disabled={disabled || disableInput}
           onKeyDown={handleKeyDown}
           onPaste={handlePaste}
           value={inputValue}

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

@@ -4,55 +4,22 @@ export const SPLITTER_REGEX = /[\n#?=&\t,./-]+/; // used for identifying the spl
 
 export const FORMATTING_REGEX = /^[^a-zA-Z0-9]*|[^a-zA-Z0-9]*$/g; // used for formatting the pasted element for the correct value format to be added
 
-export const getTagsClasses = cva(
-  "flex items-center flex-wrap gap-1 h-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",
-        success: "border border-success",
-        warning: "border border-warning",
-      },
-      outline: {
-        true: "border",
-      },
-      disabled: {
-        true: "border-base-300",
-      },
-      wide: {
-        true: "w-full",
-      },
-      size: {
-        xs: "min-h-6 leading-relaxed px-2 py-1 text-xs",
-        sm: "min-h-8 leading-8 px-3 py-1.5 text-sm",
-        md: "min-h-12 leading-loose px-4 text-sm",
-        lg: "min-h-16 leading-loose px-5 text-lg",
-      },
+export const getTagsClasses = cva("flex-wrap h-fit py-2 overflow-hidden", {
+  variants: {
+    size: {
+      xs: "min-h-6 leading-relaxed px-2 py-1 text-xs",
+      sm: "min-h-8 leading-8 px-3 py-1.5 text-sm",
+      md: "min-h-12 leading-loose px-4 text-sm",
+      lg: "min-h-16 leading-loose px-5 text-lg",
     },
-    compoundVariants: [
-      {
-        size: undefined,
-        className: "min-h-10 px-4",
-      },
-      {
-        variant: undefined,
-        outline: true,
-        className: "border-neutral-content",
-      },
-      {
-        variant: "default",
-        outline: true,
-        className: "border-base-content",
-      },
-    ],
-  }
-);
+  },
+  compoundVariants: [
+    {
+      size: undefined,
+      className: "min-h-10 px-4",
+    },
+  ],
+});
 
 export const getTagClasses = cva(
   "relative flex items-center gap-1 [&>span]:truncate [&>span]:max-w-24 aria-disabled:opacity-50 aria-disabled:cursor-not-allowed focus-visible:outline-hidden",

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

@@ -1,4 +1,5 @@
 import { type VariantProps } from "../../../libs";
+import { getInputCommonClasses } from "../Input/constants";
 import { getTagsClasses } from "./constants";
 
 export type TagsInputProps = React.HTMLAttributes<HTMLDivElement> & {
@@ -7,4 +8,5 @@ export type TagsInputProps = React.HTMLAttributes<HTMLDivElement> & {
   placeholder?: string;
   maxItems?: number;
   minItems?: number;
-} & VariantProps<typeof getTagsClasses>;
+} & VariantProps<typeof getTagsClasses> &
+  VariantProps<typeof getInputCommonClasses>;

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

@@ -3,5 +3,6 @@ import { type InputProps } from "../Input/types";
 
 export type TextFieldProps = InputProps & {
   info?: ReactNode;
+  label?: ReactNode;
   error?: string | string[] | null;
 };

package/src/components/Form/Textarea/Textarea.tsx

@@ -1,12 +1,38 @@
 import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import type { TextareaLabelProps, TextareaProps } from "./types";
 import { cn } from "../../../utilities";
-import { getTextareaClasses } from "./constants";
-import { type TextareaProps } from "./types";
+import { getFloatingLabelClasses, getTextareaClasses } from "./constants";
+
+const TextareaLabel = ({ children, ...props }: TextareaLabelProps) => {
+  const SlotChild = ["string", "number", "boolean", "undefined"].includes(typeof children) ? (
+    <span>{children}</span>
+  ) : (
+    children
+  );
+
+  return <Slot {...props}>{SlotChild}</Slot>;
+};
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ size, variant, wide, outline, className, ...props }, ref) => {
+  ({ id, label, size, variant, wide, outline, className, ...props }, ref) => {
+    if (label) {
+      return (
+        <label htmlFor={id} className={getFloatingLabelClasses()}>
+          <TextareaLabel>{label}</TextareaLabel>
+          <textarea
+            id={id}
+            ref={ref}
+            className={cn(getTextareaClasses({ size, wide, variant, outline }), className)}
+            {...props}
+          />
+        </label>
+      );
+    }
+
     return (
       <textarea
+        id={id}
         ref={ref}
         className={cn(getTextareaClasses({ size, wide, variant, outline }), className)}
         {...props}

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

@@ -31,20 +31,7 @@ export const getTextareaClasses = cva("textarea rounded-md transition-all durati
       size: undefined,
       className: "min-h-fit h-10",
     },
-    {
-      variant: undefined,
-      outline: undefined,
-      className: "textarea-ghost",
-    },
-    {
-      variant: undefined,
-      outline: true,
-      className: "border-neutral-content",
-    },
-    {
-      variant: "default",
-      outline: true,
-      className: "border-base-content",
-    },
   ],
 });
+
+export const getFloatingLabelClasses = cva("floating-label");

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

@@ -1,8 +1,15 @@
-import { type VariantProps } from "../../../libs";
+import type { ReactNode } from "react";
+import type { VariantProps } from "../../../libs";
 import { getTextareaClasses } from "./constants";
 
 export type TextareaProps = Omit<
   React.TextareaHTMLAttributes<HTMLTextAreaElement>,
   "size" | "ref"
 > &
-  VariantProps<typeof getTextareaClasses>;
+  VariantProps<typeof getTextareaClasses> & {
+    label?: ReactNode;
+  };
+
+export type TextareaLabelProps = {
+  children: ReactNode;
+};