@mbao01/common 0.2.2 → 0.2.4

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

@@ -0,0 +1,2 @@
+import { StackProps } from './types';
+export declare const Stack: ({ className, children, direction, ...props }: StackProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Stack/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const getStackClasses: (props?: ({
+    direction?: "end" | "top" | "bottom" | "start" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -0,0 +1 @@
+export { Stack } from './Stack';

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

@@ -0,0 +1,3 @@
+import { VariantProps } from '../../libs';
+import { getStackClasses } from './constants';
+export type StackProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof getStackClasses>;

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

@@ -0,0 +1,11 @@
+import { StatActionsProps, StatDescriptionProps, StatFigureProps, StatProps, StatsProps, StatTitleProps, StatValueProps } from './types';
+declare const Stats: ({ direction, className, ...props }: StatsProps) => import("react/jsx-runtime").JSX.Element;
+declare const Stat: {
+    ({ className, position, ...props }: StatProps): import("react/jsx-runtime").JSX.Element;
+    Actions: ({ className, ...props }: StatActionsProps) => import("react/jsx-runtime").JSX.Element;
+    Description: ({ className, ...props }: StatDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+    Figure: ({ className, ...props }: StatFigureProps) => import("react/jsx-runtime").JSX.Element;
+    Title: ({ className, ...props }: StatTitleProps) => import("react/jsx-runtime").JSX.Element;
+    Value: ({ className, ...props }: StatValueProps) => import("react/jsx-runtime").JSX.Element;
+};
+export { Stats, Stat };

package/dist/types/components/Stat/constants.d.ts

@@ -0,0 +1,11 @@
+export declare const getStatsClasses: (props?: ({
+    direction?: "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getStatClasses: (props?: ({
+    position?: "end" | "center" | "start" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const getStatTitleClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getStatValueClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getStatDescriptionClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getStatFigureClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const getStatActionsClasses: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

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

@@ -0,0 +1 @@
+export { Stat, Stats } from './Stat';

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

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { VariantProps } from '../../libs';
+import { getStatActionsClasses, getStatClasses, getStatDescriptionClasses, getStatFigureClasses, getStatsClasses, getStatTitleClasses, getStatValueClasses } from './constants';
+export type StatsProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof getStatsClasses>;
+export type StatProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof getStatClasses>;
+export type StatActionsProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof getStatActionsClasses>;
+export type StatDescriptionProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof getStatDescriptionClasses>;
+export type StatFigureProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof getStatFigureClasses>;
+export type StatTitleProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof getStatTitleClasses>;
+export type StatValueProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof getStatValueClasses>;

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

@@ -0,0 +1,2 @@
+import { StatusProps } from './types';
+export declare const Status: ({ animate, variant, size, className, ...props }: StatusProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Status/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const getStatusClasses: (props?: ({
+    variant?: "accent" | "default" | "error" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | "ghost" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    animate?: "ping" | "bounce" | "pulse" | "spin" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -0,0 +1 @@
+export { Status } from './Status';

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

@@ -0,0 +1,3 @@
+import { VariantProps } from '../../libs';
+import { getStatusClasses } from './constants';
+export type StatusProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & VariantProps<typeof getStatusClasses>;

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

@@ -2,7 +2,7 @@ import { VariantProps } from '../../libs';
 import { getTextClasses } from './constants';
 export type As = "h1" | "h2" | "h3" | "h4" | "h5" | "p" | "span";
 type AllowedElements = Pick<React.JSX.IntrinsicElements, As>;
-export type TextProps<T extends As> = React.HTMLAttributes<HTMLElement & AllowedElements[T]> & VariantProps<typeof getTextClasses> & {
+export type TextProps<T extends As> = AllowedElements[T] & VariantProps<typeof getTextClasses> & {
     as?: As;
 };
 export {};

package/dist/types/index.d.ts

@@ -16,10 +16,19 @@ export * from './components/Card';
 export * from './components/Calendar';
 export * from './components/Collapsible';
 export * from './components/Description';
+export * from './components/Dock';
+export * from './components/Indicator';
+export * from './components/Join';
+export * from './components/Kbd';
+export * from './components/List';
 export * from './components/Progress';
+export * from './components/Resizable';
 export * from './components/ScrollArea';
 export * from './components/Separator';
 export * from './components/Sonner';
+export * from './components/Stack';
+export * from './components/Stat';
+export * from './components/Status';
 export * from './components/Table';
 export * from './components/Tabs';
 export * from './components/Text';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.2.2",
+  "version": "0.2.4",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -93,58 +93,59 @@
     "@radix-ui/react-toggle-group": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.1.8",
     "@tailwindcss/typography": "^0.5.16",
-    "chrono-node": "^2.7.9",
+    "chrono-node": "^2.8.0",
     "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",
-    "react-day-picker": "^9.6.4",
+    "embla-carousel-react": "^8.6.0",
+    "lucide-react": "^0.487.0",
+    "react-day-picker": "^9.6.5",
     "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",
+    "tailwind-merge": "^3.2.0",
     "timescape": "^0.7.1",
     "universal-cookie": "^8.0.1",
     "vaul": "^1.1.2"
   },
   "devDependencies": {
-    "@eslint/js": "^9.23.0",
+    "@eslint/js": "^9.24.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
-    "@storybook/addon-a11y": "^8.6.11",
+    "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-coverage": "^1.0.5",
-    "@storybook/addon-essentials": "^8.6.11",
-    "@storybook/addon-interactions": "^8.6.11",
-    "@storybook/addon-links": "^8.6.11",
-    "@storybook/addon-onboarding": "^8.6.11",
-    "@storybook/addon-storysource": "^8.6.11",
-    "@storybook/addon-themes": "^8.6.11",
-    "@storybook/addon-viewport": "^8.6.11",
-    "@storybook/blocks": "^8.6.11",
-    "@storybook/react": "^8.6.11",
-    "@storybook/react-vite": "^8.6.11",
-    "@storybook/test": "^8.6.11",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/addon-onboarding": "^8.6.12",
+    "@storybook/addon-storysource": "^8.6.12",
+    "@storybook/addon-themes": "^8.6.12",
+    "@storybook/addon-viewport": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
+    "@storybook/test": "^8.6.12",
     "@storybook/test-runner": "^0.22.0",
-    "@tailwindcss/postcss": "^4.0.17",
-    "@tailwindcss/vite": "^4.0.17",
+    "@tailwindcss/postcss": "^4.1.3",
+    "@tailwindcss/vite": "^4.1.3",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/react": "^16.3.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",
-    "@typescript-eslint/eslint-plugin": "^8.29.0",
-    "@typescript-eslint/parser": "^8.29.0",
+    "@types/node": "^22.14.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.1",
+    "@typescript-eslint/eslint-plugin": "^8.29.1",
+    "@typescript-eslint/parser": "^8.29.1",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-v8": "^3.1.1",
     "@vitest/ui": "^3.1.1",
     "axe-playwright": "^2.1.0",
-    "eslint": "^9.23.0",
-    "eslint-plugin-react": "^7.37.4",
+    "daisyui": "^5.0.16",
+    "eslint": "^9.24.0",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "eslint-plugin-storybook": "^0.12.0",
@@ -156,21 +157,22 @@
     "prettier": "^3.5.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-router-dom": "^7.4.1",
-    "recharts": "^2.15.1",
-    "storybook": "^8.6.11",
-    "tailwindcss": "^4.0.17",
-    "typescript": "^5.8.2",
-    "typescript-eslint": "^8.29.0",
-    "vite": "^6.2.4",
+    "react-router-dom": "^7.5.0",
+    "recharts": "^2.15.2",
+    "storybook": "^8.6.12",
+    "tailwindcss": "^4.1.3",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.29.1",
+    "vite": "^6.2.5",
     "vite-plugin-dts": "^4.5.3",
     "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": "4e8242f09ad1b2aef4f84ee05573df8b875ab015"
 }

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/Checkbox/constants.ts

@@ -1,22 +1,23 @@
 import { cva } from "../../../libs";
 
 export const getCheckboxClasses = cva(
-  "peer flex items-center justify-center h-4 w-4 shrink-0 rounded-xs border focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-base-content disabled:cursor-not-allowed disabled:opacity-50",
+  "peer flex items-center justify-center h-4 w-4 shrink-0 rounded-xs border focus-visible:border-base-content focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-base-content disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       variant: {
         primary:
-          "border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-content",
+          "border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-content focus-visible:ring-primary",
         secondary:
-          "border-secondary data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-content",
+          "border-secondary data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-content focus-visible:ring-secondary",
         accent:
-          "border-accent data-[state=checked]:bg-accent data-[state=checked]:text-accent-content",
+          "border-accent data-[state=checked]:bg-accent data-[state=checked]:text-accent-content focus-visible:ring-accent",
         success:
-          "border-success data-[state=checked]:bg-success data-[state=checked]:text-success-content",
+          "border-success data-[state=checked]:bg-success data-[state=checked]:text-success-content focus-visible:ring-success",
         warning:
-          "border-warning data-[state=checked]:bg-warning data-[state=checked]:text-warning-content",
-        info: "border-info data-[state=checked]:bg-info data-[state=checked]:text-info-content",
-        error: "border-error data-[state=checked]:bg-error data-[state=checked]:text-error-content",
+          "border-warning data-[state=checked]:bg-warning data-[state=checked]:text-warning-content focus-visible:ring-warning",
+        info: "border-info data-[state=checked]:bg-info data-[state=checked]:text-info-content focus-visible:ring-info",
+        error:
+          "border-error data-[state=checked]:bg-error data-[state=checked]:text-error-content focus-visible:ring-error",
       },
       size: {
         xs: "h-3 w-3",

package/src/components/Form/DatetimeInput/DatetimeInput.tsx

@@ -3,7 +3,7 @@
 import { forwardRef, useCallback, useEffect, useState } from "react";
 import type { DatetimeInputProps, TimeString } from "./types";
 import { cn } from "../../../utilities";
-import { getDatetimeInputContainerClasses } from "./constants";
+import { getInputCommonClasses } from "../Input/constants";
 import { DatetimeCalendar } from "./DatetimeCalendar";
 import { DatetimeInputContext } from "./DatetimeInputContext";
 import { getParsedTime, parseDateTime } from "./helpers";
@@ -67,7 +67,7 @@ export const DatetimeInput = forwardRef<HTMLInputElement, DatetimeInputProps>(
         <div className="flex items-center justify-center flex-nowrap">
           <div
             className={cn(
-              getDatetimeInputContainerClasses({ outline, disabled, size, variant, wide }),
+              getInputCommonClasses({ outline, disabled, size, variant, wide }),
               className
             )}
           >

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

@@ -2,59 +2,6 @@ import { cva } from "../../../libs";
 
 export const DEFAULT_SIZE = 96;
 
-export const getDatetimeInputContainerClasses = cva(
-  `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)]:outline-base-content/20
-  [&:has(input:focus-within)]:duration-100 [&:has(input:focus-within)]:outline [&:has(input:focus-within)]:outline-2 [&:has(input:focus-within)]:outline-offset-2 [&:has(input:focus-within)]:outline-base-content/20
-   `,
-  {
-    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: "h-6 leading-relaxed text-xs px-1",
-        sm: "h-8 leading-8 text-sm px-1",
-        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",
-      },
-      {
-        variant: undefined,
-        outline: true,
-        className: "border-neutral-content",
-      },
-      {
-        variant: "default",
-        outline: true,
-        className: "border-base-content",
-      },
-    ],
-  }
-);
-
 export const getDatetimeCalendarTriggerClasses = cva(
   `size-8 rounded-md p-1 flex items-center justify-center font-normal
   outline-hidden focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-base-content focus-visible:ring-inset

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

@@ -1,10 +1,10 @@
 import { type VariantProps } from "../../../libs";
 import { type CalendarProps } from "../../Calendar/types";
+import { getInputCommonClasses } from "../Input/constants";
 import { type InputProps } from "../Input/types";
-import { getDatetimeInputContainerClasses } from "./constants";
 
 type DisabledType = { disabled?: boolean };
-type VariantType = VariantProps<typeof getDatetimeInputContainerClasses>;
+type VariantType = VariantProps<typeof getInputCommonClasses>;
 type NaturalLanguageInputType = DisabledType & {
   locale?: Intl.LocalesArgument;
 } & Omit<InputProps, "type" | "ref" | "value" | "defaultValue" | "onBlur" | "disabled">;

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";