@mbao01/common 0.2.2 → 0.2.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.2.2",
+  "version": "0.2.3",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -97,14 +97,14 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "daisyui": "^5.0.9",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.5.2",
-    "lucide-react": "^0.486.0",
+    "lucide-react": "^0.487.0",
     "react-day-picker": "^9.6.4",
     "react-dropzone": "^14.3.8",
     "react-international-phone": "^4.5.0",
     "react-otp-input": "^3.1.1",
+    "react-resizable-panels": "^2.1.7",
     "sonner": "^2.0.3",
     "tailwind-merge": "^3.1.0",
     "timescape": "^0.7.1",
@@ -128,21 +128,22 @@
     "@storybook/react-vite": "^8.6.11",
     "@storybook/test": "^8.6.11",
     "@storybook/test-runner": "^0.22.0",
-    "@tailwindcss/postcss": "^4.0.17",
-    "@tailwindcss/vite": "^4.0.17",
+    "@tailwindcss/postcss": "^4.1.1",
+    "@tailwindcss/vite": "^4.1.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest-image-snapshot": "^6.4.0",
-    "@types/node": "^22.13.16",
-    "@types/react": "^19.0.12",
-    "@types/react-dom": "^19.0.4",
+    "@types/node": "^22.13.17",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.1",
     "@typescript-eslint/eslint-plugin": "^8.29.0",
     "@typescript-eslint/parser": "^8.29.0",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-v8": "^3.1.1",
     "@vitest/ui": "^3.1.1",
     "axe-playwright": "^2.1.0",
+    "daisyui": "^5.0.12",
     "eslint": "^9.23.0",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.2.0",
@@ -159,7 +160,7 @@
     "react-router-dom": "^7.4.1",
     "recharts": "^2.15.1",
     "storybook": "^8.6.11",
-    "tailwindcss": "^4.0.17",
+    "tailwindcss": "^4.1.1",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.29.0",
     "vite": "^6.2.4",
@@ -167,10 +168,11 @@
     "vitest": "^3.1.1"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "recharts": "^2.15.0",
-    "typescript": "^5.7.2"
+    "daisyui": "5",
+    "react": "19",
+    "react-dom": "19",
+    "recharts": "2",
+    "typescript": "5"
   },
-  "gitHead": "aa3d3090fd645ac0a64b1ccb1fe9451037083674"
+  "gitHead": "906e26ed2a5aab0a3cdfc59f94e386d91cfbd0de"
 }

package/src/components/Dock/Dock.tsx

@@ -0,0 +1,41 @@
+import type { DockButtonProps, DockIconProps, DockLabelProps, DockProps } from "./types";
+import { cn } from "../../utilities";
+import {
+  getDockButtonClasses,
+  getDockClasses,
+  getDockIconClasses,
+  getDockLabelClasses,
+} from "./constants";
+
+const Dock = ({ size, variant, outline, children, className, ...props }: DockProps) => (
+  <div className={cn(getDockClasses({ size, variant, outline }), className)} {...props}>
+    {children}
+  </div>
+);
+
+const DockButton = ({ active, children, className, ...props }: DockButtonProps) => (
+  <button className={cn(getDockButtonClasses({ active }), className)} {...props}>
+    {children}
+  </button>
+);
+
+const DockLabel = ({ className, children, ...props }: DockLabelProps) => (
+  <span className={cn(getDockLabelClasses(), className)} {...props}>
+    {children}
+  </span>
+);
+
+const DockIcon = ({ icon, size, className, children, ...props }: DockIconProps) => {
+  const Icon = icon;
+  return (
+    <Icon className={cn(getDockIconClasses({ size }), className)} {...props}>
+      {children}
+    </Icon>
+  );
+};
+
+Dock.Button = DockButton;
+Dock.Label = DockLabel;
+Dock.Icon = DockIcon;
+
+export { Dock };

package/src/components/Dock/constants.ts

@@ -0,0 +1,62 @@
+import { cva } from "../../libs";
+
+export const getDockClasses = cva("dock", {
+  variants: {
+    size: {
+      xs: "dock-xs",
+      sm: "dock-sm",
+      md: "dock-md",
+      lg: "dock-lg",
+      xl: "dock-xl",
+    },
+    variant: {
+      accent: "bg-accent text-accent-content border-accent",
+      default: "bg-default text-default-content border-default",
+      error: "bg-error text-error-content border-error",
+      ghost: "bg-ghost text-ghost-content border-transparent",
+      info: "bg-info text-info-content border-info",
+      neutral: "bg-neutral text-neutral-content border-neutral",
+      primary: "bg-primary text-primary-content border-primary",
+      secondary: "bg-secondary text-secondary-content border-secondary",
+      success: "bg-success text-success-content border-success",
+      warning: "bg-warning text-warning-content border-warning",
+    },
+    outline: {
+      true: "border bg-default",
+    },
+  },
+  compoundVariants: [
+    { outline: true, variant: "accent", className: "text-accent" },
+    { outline: true, variant: "default", className: "text-default" },
+    { outline: true, variant: "error", className: "text-error" },
+    { outline: true, variant: "ghost", className: "text-ghost" },
+    { outline: true, variant: "info", className: "text-info" },
+    { outline: true, variant: "neutral", className: "text-neutral" },
+    { outline: true, variant: "primary", className: "text-primary" },
+    { outline: true, variant: "secondary", className: "text-secondary" },
+    { outline: true, variant: "success", className: "text-success" },
+    { outline: true, variant: "warning", className: "text-warning" },
+  ],
+});
+
+export const getDockButtonClasses = cva("", {
+  variants: {
+    active: {
+      true: "dock-active",
+    },
+  },
+});
+
+export const getDockIconClasses = cva("", {
+  variants: {
+    size: {
+      xs: "size-3",
+      sm: "size-4",
+      md: "size-5",
+      lg: "size-6",
+      xl: "size-6",
+    },
+  },
+});
+
+export const getDockLabelClasses = cva("dock-label");

package/src/components/Dock/index.ts

@@ -0,0 +1 @@
+export { Dock } from "./Dock";

package/src/components/Dock/types.ts

@@ -0,0 +1,23 @@
+import type { LucideProps } from "lucide-react";
+import React from "react";
+import { type VariantProps } from "../../libs";
+import {
+  getDockButtonClasses,
+  getDockClasses,
+  getDockIconClasses,
+  getDockLabelClasses,
+} from "./constants";
+
+export type DockProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof getDockClasses>;
+
+export type DockButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof getDockButtonClasses>;
+
+export type DockLabelProps = React.HTMLAttributes<HTMLSpanElement> &
+  VariantProps<typeof getDockLabelClasses>;
+
+type P = Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>;
+export type DockIconProps = P &
+  VariantProps<typeof getDockIconClasses> & {
+    icon: React.ForwardRefExoticComponent<P>;
+  };

package/src/components/Form/Input/Input.tsx

@@ -1,16 +1,77 @@
 import React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import type { InputLabelProps, InputProps } from "./types";
 import { cn } from "../../../utilities";
-import { getInputClasses } from "./constants";
-import { type InputProps } from "./types";
+import { getFloatingLabelClasses, getInputClasses, getInputLabelClasses } from "./constants";
+
+const InputLabel = ({ floating, children, ...props }: InputLabelProps) => {
+  const SlotChild = ["string", "number", "boolean", "undefined"].includes(typeof children) ? (
+    <span>{children}</span>
+  ) : (
+    children
+  );
+
+  return (
+    <Slot className={cn(getInputLabelClasses({ floating }))} {...props}>
+      {SlotChild}
+    </Slot>
+  );
+};
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ size, variant, wide, outline, className, type, ...props }: InputProps, ref) => (
-    <input
-      ref={ref}
-      type={type}
-      className={cn(getInputClasses({ type, size, wide, variant, outline }), className)}
-      {...props}
-    />
-  )
+  (
+    {
+      id,
+      size,
+      label,
+      labelPosition = "start",
+      variant,
+      wide,
+      outline,
+      className,
+      type,
+      ...props
+    }: InputProps,
+    ref
+  ) => {
+    if (label) {
+      if (labelPosition === "floating") {
+        return (
+          <label htmlFor={id} className={getFloatingLabelClasses()}>
+            <InputLabel floating>{label}</InputLabel>
+            <input
+              id={id}
+              ref={ref}
+              type={type}
+              className={cn(getInputClasses({ type, size, wide, variant, outline }), className)}
+              {...props}
+            />
+          </label>
+        );
+      }
+
+      return (
+        <label
+          htmlFor={id}
+          className={cn(getInputClasses({ type, size, wide, variant, outline }), className)}
+        >
+          {labelPosition === "start" && <InputLabel>{label}</InputLabel>}
+          <input id={id} ref={ref} type={type} {...props} />
+          {labelPosition === "end" && <InputLabel>{label}</InputLabel>}
+        </label>
+      );
+    }
+
+    return (
+      <input
+        id={id}
+        ref={ref}
+        type={type}
+        className={cn(getInputClasses({ type, size, wide, variant, outline }), className)}
+        {...props}
+      />
+    );
+  }
 );
+
 Input.displayName = "Input";

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,20 @@ 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",
+    },
+  ],
+});

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/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

@@ -103,3 +103,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/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

@@ -48,3 +48,5 @@ export const getTextareaClasses = cva("textarea rounded-md transition-all durati
     },
   ],
 });
+
+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;
+};

package/src/components/Form/Validator/Validator.tsx

@@ -0,0 +1,27 @@
+import { Slot } from "@radix-ui/react-slot";
+import type { As, ValidatorHintProps, ValidatorProps } from "./types";
+import { cn } from "../../../utilities";
+import { Text } from "../../Text";
+import { getValidatorClasses, getValidatorHintClasses } from "./constants";
+
+const Validator = <T extends As>({ as, children, className, ...props }: ValidatorProps<T>) => {
+  const SlotChild = as;
+
+  return (
+    <Slot className={cn(getValidatorClasses(), className)} {...props}>
+      <SlotChild>{children}</SlotChild>
+    </Slot>
+  );
+};
+
+const ValidatorHint = ({ className, children, visible, ...props }: ValidatorHintProps) => {
+  return (
+    <Text className={cn(getValidatorHintClasses({ visible }), className)} {...props}>
+      {children}
+    </Text>
+  );
+};
+
+Validator.Hint = ValidatorHint;
+
+export { Validator };

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

@@ -0,0 +1,18 @@
+import { cva } from "../../../libs";
+
+export const getValidatorClasses = cva("border-color-[unset] validator");
+
+export const getValidatorHintClasses = cva("validator-hint", {
+  variants: {
+    visible: {
+      true: "block",
+      false: "hidden",
+    },
+  },
+  compoundVariants: [
+    {
+      visible: undefined,
+      className: "hidden",
+    },
+  ],
+});

package/src/components/Form/Validator/index.ts

@@ -0,0 +1 @@
+export { Validator } from "./Validator";