@connectycube/react-ui-kit 0.0.16 → 0.0.17

package/dist/types/components/alert-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/alert-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAGpD,UAAU,gBAAiB,SAAQ,oBAAoB,CAAC,gBAAgB;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,CAAC,EAAE,oBAAoB,CAAC,gBAAgB,CAAC;IAClD,cAAc,EAAE,KAAK,CAAC,YAAY,CAAC;IACnC,YAAY,CAAC,EAAE,oBAAoB,CAAC,uBAAuB,CAAC;IAC5D,WAAW,CAAC,EAAE,oBAAoB,CAAC,sBAAsB,CAAC;IAC1D,YAAY,CAAC,EAAE,oBAAoB,CAAC,uBAAuB,CAAC;IAC5D,YAAY,CAAC,EAAE,oBAAoB,CAAC,uBAAuB,CAAC;IAC5D,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAC1C,UAAU,CAAC,EAAE,oBAAoB,CAAC,qBAAqB,CAAC;IACxD,gBAAgB,CAAC,EAAE,oBAAoB,CAAC,2BAA2B,CAAC;IACpE,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAC1C,WAAW,CAAC,EAAE,oBAAoB,CAAC,sBAAsB,CAAC;IAC1D,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,WAAW,CAAC,EAAE,oBAAoB,CAAC,sBAAsB,CAAC;IAC1D,iBAAiB,CAAC,EAAE,WAAW,CAAC;CACjC;AAoFD,QAAA,MAAM,WAAW,yFAAgE,CAAC;AAIlF,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/alert-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAGpD,UAAU,gBAAiB,SAAQ,oBAAoB,CAAC,gBAAgB;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,CAAC,EAAE,oBAAoB,CAAC,gBAAgB,CAAC;IAClD,cAAc,EAAE,KAAK,CAAC,YAAY,CAAC;IACnC,YAAY,CAAC,EAAE,oBAAoB,CAAC,uBAAuB,CAAC;IAC5D,WAAW,CAAC,EAAE,oBAAoB,CAAC,sBAAsB,CAAC;IAC1D,YAAY,CAAC,EAAE,oBAAoB,CAAC,uBAAuB,CAAC;IAC5D,YAAY,CAAC,EAAE,oBAAoB,CAAC,uBAAuB,CAAC;IAC5D,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAC1C,UAAU,CAAC,EAAE,oBAAoB,CAAC,qBAAqB,CAAC;IACxD,gBAAgB,CAAC,EAAE,oBAAoB,CAAC,2BAA2B,CAAC;IACpE,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAC1C,WAAW,CAAC,EAAE,oBAAoB,CAAC,sBAAsB,CAAC;IAC1D,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,WAAW,CAAC,EAAE,oBAAoB,CAAC,sBAAsB,CAAC;IAC1D,iBAAiB,CAAC,EAAE,WAAW,CAAC;CACjC;AAsFD,QAAA,MAAM,WAAW,yFAAgE,CAAC;AAIlF,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,CAAC"}

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

@@ -0,0 +1,11 @@
+import type React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+    asChild?: boolean;
+}
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export { Badge, type BadgeProps };
+//# sourceMappingURL=badge.d.ts.map

package/dist/types/components/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,UAAU,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,YAAY,CAAC,OAAO,aAAa,CAAC;IACnG,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,aAAa;;mFAgBlB,CAAC;AAWF,QAAA,MAAM,KAAK,oFAAqD,CAAC;AAIjE,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,CAAC"}

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

@@ -1,14 +1,12 @@
 import type React from 'react';
 import { type VariantProps } from 'class-variance-authority';
+interface ButtonProps extends React.ComponentProps<'button'>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-interface ButtonProps extends React.ComponentProps<'button'>, VariantProps<typeof buttonVariants> {
-    asChild?: boolean;
-    leftElement?: React.ReactElement;
-    rightElement?: React.ReactElement;
-}
 declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { Button, type ButtonProps };
 //# sourceMappingURL=button.d.ts.map

package/dist/types/components/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,QAAA,MAAM,cAAc;;;mFA0BnB,CAAC;AAEF,UAAU,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,YAAY,CAAC,OAAO,cAAc,CAAC;IAC/F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IACjC,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CACnC;AAiBD,QAAA,MAAM,MAAM,oGAAyD,CAAC;AAItE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,UAAU,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,YAAY,CAAC,OAAO,cAAc,CAAC;IAC/F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,cAAc;;;mFA0BnB,CAAC;AAiBF,QAAA,MAAM,MAAM,oGAAyD,CAAC;AAItE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,CAAC"}

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

@@ -0,0 +1,5 @@
+import type React from 'react';
+type InputProps = React.ComponentProps<'input'>;
+declare const Input: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { Input, type InputProps };
+//# sourceMappingURL=input.d.ts.map

package/dist/types/components/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AAiBhD,QAAA,MAAM,KAAK,8KAAwB,CAAC;AAIpC,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,CAAC"}

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

@@ -0,0 +1,15 @@
+import type React from 'react';
+import { type InputProps } from './input';
+import { type LucideProps } from 'lucide-react';
+interface SearchProps extends InputProps {
+    onSearch?: (value: string) => void;
+    onCancel?: () => void;
+    hasSearchIcon?: boolean;
+    hasCancelIcon?: boolean;
+    searchIconProps?: LucideProps;
+    cancelIconProps?: LucideProps;
+    containerProps?: React.ComponentProps<'div'>;
+}
+declare const Search: React.ForwardRefExoticComponent<Omit<SearchProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { Search, type SearchProps };
+//# sourceMappingURL=search.d.ts.map

package/dist/types/components/search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../src/components/search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAwC,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAEtF,UAAU,WAAY,SAAQ,UAAU;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;CAC9C;AAmED,QAAA,MAAM,MAAM,mGAAwD,CAAC;AAIrE,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,CAAC"}

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

@@ -0,0 +1,10 @@
+import { type LucideProps } from 'lucide-react';
+interface SpinnerProps extends LucideProps {
+    loading?: boolean;
+}
+declare function Spinner({ loading, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace Spinner {
+    var displayName: string;
+}
+export { Spinner, type SpinnerProps };
+//# sourceMappingURL=spinner.d.ts.map

package/dist/types/components/spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAG9D,UAAU,YAAa,SAAQ,WAAW;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,iBAAS,OAAO,CAAC,EAAE,OAAc,EAAE,GAAG,KAAK,EAAE,EAAE,YAAY,kDAI1D;kBAJQ,OAAO;;;AAQhB,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,CAAC"}

package/gen/components/alert-dialog.jsx

@@ -72,7 +72,9 @@ function AlertDialogBase(
               className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', footerProps?.className)}
             >
               <AlertDialogPrimitive.Cancel {...cancelProps} onClick={onCancel}>
-                <Button {...cancelButtonProps}>{cancelTitle}</Button>
+                <Button variant="outline" {...cancelButtonProps}>
+                  {cancelTitle}
+                </Button>
               </AlertDialogPrimitive.Cancel>
               <AlertDialogPrimitive.Action {...actionProps} onClick={onConfirm}>
                 <Button {...actionButtonProps}>{actionTitle}</Button>

package/gen/components/badge.jsx

@@ -0,0 +1,45 @@
+import { forwardRef } from 'react';
+import * as SlotPrimitive from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { cn } from './utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        destructive:
+          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+function BadgeBase({ className, variant, asChild = false, ...props }, ref) {
+  const Comp = asChild ? SlotPrimitive.Root : 'span';
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn(
+        badgeVariants({
+          variant,
+        }),
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+const Badge = forwardRef(BadgeBase);
+
+Badge.displayName = 'Badge';
+
+export { Badge };

package/gen/components/button.jsx

@@ -31,7 +31,7 @@ const buttonVariants = cva(
   }
 );
 
-function ButtonBase({ asChild = false, variant, size, className, leftElement, rightElement, children, ...props }, ref) {
+function ButtonBase({ asChild = false, variant, size, className, ...props }, ref) {
   const Comp = asChild ? SlotPrimitive.Root : 'button';
 
   return (
@@ -43,13 +43,10 @@ function ButtonBase({ asChild = false, variant, size, className, leftElement, ri
           variant,
           size,
           className,
-        })
+        }),
+        'transition-all ease-in-out duration-300'
       )}
-    >
-      {leftElement}
-      <SlotPrimitive.Slottable>{children}</SlotPrimitive.Slottable>
-      {rightElement}
-    </Comp>
+    />
   );
 }
 

package/gen/components/input.jsx

@@ -0,0 +1,23 @@
+import { forwardRef } from 'react';
+import { cn } from './utils';
+
+function InputBase(props, ref) {
+  return (
+    <input
+      ref={ref}
+      {...props}
+      className={cn(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-10 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        props?.className
+      )}
+    />
+  );
+}
+
+const Input = forwardRef(InputBase);
+
+Input.displayName = 'Input';
+
+export { Input };

package/gen/components/search.jsx

@@ -0,0 +1,75 @@
+import { forwardRef, useState } from 'react';
+import { cn } from './utils';
+import { Input } from './input';
+import { Search as SearchIcon, X as CloseIcon } from 'lucide-react';
+
+function SearchBase(
+  {
+    onSearch = () => {},
+    onCancel = () => {},
+    hasSearchIcon = true,
+    hasCancelIcon = true,
+    searchIconProps,
+    cancelIconProps,
+    containerProps,
+    ...props
+  },
+  ref
+) {
+  const [value, setValue] = useState('');
+  const handleOnSearch = (e) => {
+    const keyword = e.target.value;
+
+    setValue(keyword);
+    onSearch(keyword.toLowerCase());
+  };
+  const handleOnCancel = () => {
+    setValue('');
+    onCancel();
+  };
+
+  return (
+    <div {...containerProps} className={cn('group relative', containerProps?.className)}>
+      {hasSearchIcon && (
+        <SearchIcon
+          {...searchIconProps}
+          className={cn(
+            'absolute top-1/2 left-2 transform -translate-y-1/2 size-5 text-muted-foreground group-focus-within:text-ring',
+            searchIconProps?.className
+          )}
+        />
+      )}
+      <Input
+        ref={ref}
+        name="search"
+        placeholder={props?.placeholder || 'Search...'}
+        value={value}
+        onChange={handleOnSearch}
+        {...props}
+        className={cn(
+          'placeholder:text-muted-foreground focus-visible:ring-ring/50 focus-visible:ring flex',
+          hasSearchIcon ? 'pl-10' : 'pl-3',
+          hasCancelIcon ? 'pr-10' : 'pr-3',
+          props?.className
+        )}
+      />
+      {hasCancelIcon && (
+        <CloseIcon
+          onClick={handleOnCancel}
+          {...cancelIconProps}
+          className={cn(
+            'absolute top-1/2 right-2 transform -translate-y-1/2 size-5 text-muted-foreground cursor-pointer hover:text-ring transition-all duration-300 ease-in-out',
+            value.length > 0 ? 'opacity-100 scale-100' : 'opacity-0 scale-75 pointer-events-none',
+            cancelIconProps?.className
+          )}
+        />
+      )}
+    </div>
+  );
+}
+
+const Search = forwardRef(SearchBase);
+
+Search.displayName = 'Search';
+
+export { Search };

package/gen/components/spinner.jsx

@@ -0,0 +1,12 @@
+import { LoaderCircle } from 'lucide-react';
+import { cn } from './utils';
+
+function Spinner({ loading = true, ...props }) {
+  return loading ? (
+    <LoaderCircle strokeWidth={2.5} {...props} className={cn('animate-spin mx-auto text-ring', props?.className)} />
+  ) : null;
+}
+
+Spinner.displayName = 'Spinner';
+
+export { Spinner };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@connectycube/react-ui-kit",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "Simple React UI Kit generator with TSX/JSX",
   "homepage": "https://github.com/ConnectyCube/react-ui-kit#readme",
   "bugs": {
@@ -70,7 +70,7 @@
     "clsx": "^2.1.1",
     "execa": "^9.6.0",
     "fs-extra": "^11.3.2",
-    "lucide-react": "^0.554.0",
+    "lucide-react": "^0.555.0",
     "prompts": "^2.4.2",
     "tailwind-merge": "^3.4.0"
   },

package/src/components/alert-dialog.tsx

@@ -96,7 +96,9 @@ function AlertDialogBase(
               className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', footerProps?.className)}
             >
               <AlertDialogPrimitive.Cancel {...cancelProps} onClick={onCancel}>
-                <Button {...cancelButtonProps}>{cancelTitle}</Button>
+                <Button variant="outline" {...cancelButtonProps}>
+                  {cancelTitle}
+                </Button>
               </AlertDialogPrimitive.Cancel>
               <AlertDialogPrimitive.Action {...actionProps} onClick={onConfirm}>
                 <Button {...actionButtonProps}>{actionTitle}</Button>

package/src/components/avatar.tsx

@@ -28,7 +28,7 @@ function AvatarBase(
     fallbackProps,
     ...props
   }: AvatarProps,
-  ref: React.Ref<HTMLDivElement>
+  ref: React.ForwardedRef<HTMLDivElement>
 ) {
   const initials = getInitialsFromName(name);
 

package/src/components/badge.tsx

@@ -0,0 +1,42 @@
+import type React from 'react';
+import { forwardRef } from 'react';
+import * as SlotPrimitive from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from './utils';
+
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+  asChild?: boolean;
+}
+
+const badgeVariants = cva(
+  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        destructive:
+          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+function BadgeBase(
+  { className, variant, asChild = false, ...props }: BadgeProps,
+  ref?: React.ForwardedRef<HTMLSpanElement>
+) {
+  const Comp = asChild ? SlotPrimitive.Root : 'span';
+
+  return <Comp ref={ref} className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+const Badge = forwardRef<HTMLSpanElement, BadgeProps>(BadgeBase);
+
+Badge.displayName = 'Badge';
+
+export { Badge, type BadgeProps };

package/src/components/button.tsx

@@ -4,6 +4,10 @@ import * as SlotPrimitive from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from './utils';
 
+interface ButtonProps extends React.ComponentProps<'button'>, VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
 const buttonVariants = cva(
   'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
   {
@@ -32,24 +36,18 @@ const buttonVariants = cva(
   }
 );
 
-interface ButtonProps extends React.ComponentProps<'button'>, VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-  leftElement?: React.ReactElement;
-  rightElement?: React.ReactElement;
-}
-
 function ButtonBase(
-  { asChild = false, variant, size, className, leftElement, rightElement, children, ...props }: ButtonProps,
+  { asChild = false, variant, size, className, ...props }: ButtonProps,
   ref?: React.ForwardedRef<HTMLButtonElement>
 ) {
   const Comp = asChild ? SlotPrimitive.Root : 'button';
 
   return (
-    <Comp ref={ref} {...props} className={cn(buttonVariants({ variant, size, className }))}>
-      {leftElement}
-      <SlotPrimitive.Slottable>{children}</SlotPrimitive.Slottable>
-      {rightElement}
-    </Comp>
+    <Comp
+      ref={ref}
+      {...props}
+      className={cn(buttonVariants({ variant, size, className }), 'transition-all ease-in-out duration-300')}
+    />
   );
 }
 

package/src/components/input.tsx

@@ -0,0 +1,26 @@
+import type React from 'react';
+import { forwardRef } from 'react';
+import { cn } from './utils';
+
+type InputProps = React.ComponentProps<'input'>;
+
+function InputBase(props: InputProps, ref?: React.ForwardedRef<HTMLInputElement>) {
+  return (
+    <input
+      ref={ref}
+      {...props}
+      className={cn(
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-10 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        props?.className
+      )}
+    />
+  );
+}
+
+const Input = forwardRef(InputBase);
+
+Input.displayName = 'Input';
+
+export { Input, type InputProps };

package/src/components/placeholder-text.tsx

@@ -10,7 +10,7 @@ interface PlaceholderTextProps extends React.ComponentProps<'div'> {
 
 function PlaceholderTextBase(
   { title, titles = [], rowProps, ...props }: PlaceholderTextProps,
-  ref: React.Ref<HTMLDivElement>
+  ref: React.ForwardedRef<HTMLDivElement>
 ) {
   const rows = typeof title === 'string' ? [title, ...titles] : titles;
 

package/src/components/search.tsx

@@ -0,0 +1,86 @@
+import type React from 'react';
+import { forwardRef, useState } from 'react';
+import { cn } from './utils';
+import { Input, type InputProps } from './input';
+import { Search as SearchIcon, X as CloseIcon, type LucideProps } from 'lucide-react';
+
+interface SearchProps extends InputProps {
+  onSearch?: (value: string) => void;
+  onCancel?: () => void;
+  hasSearchIcon?: boolean;
+  hasCancelIcon?: boolean;
+  searchIconProps?: LucideProps;
+  cancelIconProps?: LucideProps;
+  containerProps?: React.ComponentProps<'div'>;
+}
+
+function SearchBase(
+  {
+    onSearch = () => {},
+    onCancel = () => {},
+    hasSearchIcon = true,
+    hasCancelIcon = true,
+    searchIconProps,
+    cancelIconProps,
+    containerProps,
+    ...props
+  }: SearchProps,
+  ref?: React.ForwardedRef<HTMLInputElement>
+) {
+  const [value, setValue] = useState<string>('');
+  const handleOnSearch = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    const keyword = e.target.value;
+
+    setValue(keyword);
+    onSearch(keyword.toLowerCase());
+  };
+  const handleOnCancel = (): void => {
+    setValue('');
+    onCancel();
+  };
+
+  return (
+    <div {...containerProps} className={cn('group relative', containerProps?.className)}>
+      {hasSearchIcon && (
+        <SearchIcon
+          {...searchIconProps}
+          className={cn(
+            'absolute top-1/2 left-2 transform -translate-y-1/2 size-5 text-muted-foreground group-focus-within:text-ring',
+            searchIconProps?.className
+          )}
+        />
+      )}
+      <Input
+        ref={ref}
+        name="search"
+        placeholder={props?.placeholder || 'Search...'}
+        value={value}
+        onChange={handleOnSearch}
+        {...props}
+        className={cn(
+          'placeholder:text-muted-foreground focus-visible:ring-ring/50 focus-visible:ring flex',
+          hasSearchIcon ? 'pl-10' : 'pl-3',
+          hasCancelIcon ? 'pr-10' : 'pr-3',
+          props?.className
+        )}
+      />
+      {hasCancelIcon && (
+        <CloseIcon
+          onClick={handleOnCancel}
+          {...cancelIconProps}
+          className={cn(
+            'absolute top-1/2 right-2 transform -translate-y-1/2 size-5 text-muted-foreground cursor-pointer hover:text-ring transition-all duration-300 ease-in-out',
+            value.length > 0 ? 'opacity-100 scale-100' : 'opacity-0 scale-75 pointer-events-none',
+            cancelIconProps?.className
+          )}
+        />
+      )}
+    </div>
+  );
+}
+
+const Search = forwardRef<HTMLInputElement, SearchProps>(SearchBase);
+
+Search.displayName = 'Search';
+
+export { Search, type SearchProps };

package/src/components/spinner.tsx

@@ -0,0 +1,16 @@
+import { LoaderCircle, type LucideProps } from 'lucide-react';
+import { cn } from './utils';
+
+interface SpinnerProps extends LucideProps {
+  loading?: boolean;
+}
+
+function Spinner({ loading = true, ...props }: SpinnerProps) {
+  return loading ? (
+    <LoaderCircle strokeWidth={2.5} {...props} className={cn('animate-spin mx-auto text-ring', props?.className)} />
+  ) : null;
+}
+
+Spinner.displayName = 'Spinner';
+
+export { Spinner, type SpinnerProps };

package/src/components/stream-view.tsx

@@ -10,7 +10,7 @@ interface StreamViewProps extends React.ComponentProps<'video'> {
 
 function StreamViewBase(
   { id, stream, mirror, className, muted, ...props }: StreamViewProps,
-  ref: React.Ref<HTMLVideoElement>
+  ref: React.ForwardedRef<HTMLVideoElement>
 ) {
   const innerRef = useRef<HTMLVideoElement>(null);
   const elementId = useMemo(() => id ?? `stream-${getRandomString()}`, [id]);
@@ -57,7 +57,7 @@ const StreamView = forwardRef<HTMLVideoElement, StreamViewProps>(StreamViewBase)
 
 StreamView.displayName = 'StreamView';
 
-function LocalStreamViewBase({ muted, mirror, ...props }: StreamViewProps, ref: React.Ref<HTMLVideoElement>) {
+function LocalStreamViewBase({ muted, mirror, ...props }: StreamViewProps, ref: React.ForwardedRef<HTMLVideoElement>) {
   const isMuted = typeof muted === 'boolean' ? muted : true;
   const isMirror = typeof mirror === 'boolean' ? mirror : true;
 
@@ -68,7 +68,7 @@ const LocalStreamView = forwardRef<HTMLVideoElement, StreamViewProps>(LocalStrea
 
 LocalStreamView.displayName = 'LocalStreamView';
 
-function RemoteStreamViewBase({ muted, mirror, ...props }: StreamViewProps, ref: React.Ref<HTMLVideoElement>) {
+function RemoteStreamViewBase({ muted, mirror, ...props }: StreamViewProps, ref: React.ForwardedRef<HTMLVideoElement>) {
   const isMuted = typeof muted === 'boolean' ? muted : false;
   const isMirror = typeof mirror === 'boolean' ? mirror : false;
 
@@ -114,7 +114,7 @@ function FullscreenStreamViewBase(
     pipButtonIconProps,
     ...props
   }: FullscreenStreamViewProps,
-  ref: React.Ref<FullscreenStreamViewRef>
+  ref: React.ForwardedRef<FullscreenStreamViewRef>
 ) {
   const innerRef = useRef<HTMLDivElement>(null);
   const [isFullscreen, setIsFullscreen] = useState<boolean>(false);