@neoptocom/neopto-ui 0.5.2 → 0.6.0

package/dist/index.cjs

@@ -3,7 +3,6 @@
 var React2 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
-var tailwindVariants = require('tailwind-variants');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -115,41 +114,40 @@ function Modal({
   const container = document.body;
   return reactDom.createPortal(overlay, container);
 }
-var styles = tailwindVariants.tv({
-  base: "text-current",
-  variants: {
-    variant: {
-      "display-lg": "text-5xl leading-tight",
-      "display-md": "text-4xl leading-tight",
-      "display-sm": "text-4xl leading-tight",
-      "headline-lg": "text-3xl leading-tight",
-      "headline-md": "text-3xl leading-tight",
-      "headline-sm": "text-3xl leading-tight",
-      "title-lg": "text-xl leading-tight",
-      "title-md": "text-lg leading-tight",
-      "title-sm": "text-base leading-tight",
-      "label-lg": "text-sm leading-tight",
-      "label-md": "text-xs leading-tight",
-      "label-sm": "text-xs leading-tight",
-      "body-lg": "text-base leading-relaxed",
-      "body-md": "text-sm leading-relaxed",
-      "body-sm": "text-xs leading-relaxed",
-      "button": "text-base leading-normal"
-    },
-    weight: {
-      normal: "font-normal",
-      medium: "font-medium",
-      semibold: "font-semibold",
-      bold: "font-bold"
-    },
-    muted: {
-      true: "text-[var(--muted-fg)]"
-    }
-  },
-  defaultVariants: {
-    weight: "normal"
-  }
-});
+function getTypoClasses(variant, weight = "normal", muted, className) {
+  const base = "text-current";
+  const variants = {
+    "display-lg": "text-5xl leading-tight",
+    "display-md": "text-4xl leading-tight",
+    "display-sm": "text-4xl leading-tight",
+    "headline-lg": "text-3xl leading-tight",
+    "headline-md": "text-3xl leading-tight",
+    "headline-sm": "text-3xl leading-tight",
+    "title-lg": "text-xl leading-tight",
+    "title-md": "text-lg leading-tight",
+    "title-sm": "text-base leading-tight",
+    "label-lg": "text-sm leading-tight",
+    "label-md": "text-xs leading-tight",
+    "label-sm": "text-xs leading-tight",
+    "body-lg": "text-base leading-relaxed",
+    "body-md": "text-sm leading-relaxed",
+    "body-sm": "text-xs leading-relaxed",
+    "button": "text-base leading-normal"
+  };
+  const weights = {
+    normal: "font-normal",
+    medium: "font-medium",
+    semibold: "font-semibold",
+    bold: "font-bold"
+  };
+  return [
+    base,
+    variants[variant],
+    weights[weight],
+    muted ? "text-[var(--muted-fg)]" : "",
+    className
+  ].filter(Boolean).join(" ");
+}
 function Typo({
   variant,
   bold,
@@ -169,23 +167,21 @@ function Typo({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Component,
     {
-      className: styles({ variant, weight: bold, muted, className }),
+      className: getTypoClasses(variant, bold, muted, className),
       style: { fontFamily: getFontFamily(variant) },
       ...props,
       children
     }
   );
 }
-var avatarStyles = tailwindVariants.tv({
-  base: "relative box-border flex items-center justify-center overflow-hidden rounded-full border border-[var(--border)] bg-[var(--muted)] text-[var(--fg)] select-none",
-  variants: {
-    size: {
-      sm: "w-[28px] h-[28px]",
-      md: "w-[60px] h-[60px]"
-    }
-  },
-  defaultVariants: { size: "sm" }
-});
+function getAvatarClasses(size = "sm", className) {
+  const base = "relative box-border flex items-center justify-center overflow-hidden rounded-full border border-[var(--border)] bg-[var(--muted)] text-[var(--fg)] select-none";
+  const sizes = {
+    sm: "w-[28px] h-[28px]",
+    md: "w-[60px] h-[60px]"
+  };
+  return [base, sizes[size], className].filter(Boolean).join(" ");
+}
 function getInitials(name) {
   if (!name) return "\u2026";
   const words = name.trim().split(/\s+/);
@@ -214,7 +210,7 @@ function Avatar({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: avatarStyles({ size, className }),
+      className: getAvatarClasses(size, className),
       "aria-label": alt ?? name,
       role: "img",
       ...props,
@@ -326,29 +322,20 @@ function Icon({
     }
   );
 }
-var iconButtonStyles = tailwindVariants.tv({
-  base: [
-    "flex items-center justify-center rounded-full flex-shrink-0",
-    "transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-    "focus-visible:ring-cyan-500/40 disabled:cursor-not-allowed disabled:opacity-50"
-  ].join(" "),
-  variants: {
-    variant: {
-      ghost: "bg-transparent hover:bg-[var(--muted)] active:bg-[var(--muted)]",
-      primary: "bg-cyan-500 text-white hover:bg-cyan-400 active:bg-cyan-600",
-      secondary: "border border-[var(--border)] bg-[var(--surface)] hover:bg-[var(--muted)] active:bg-[var(--muted)]"
-    },
-    size: {
-      sm: "w-8 h-8",
-      md: "w-10 h-10",
-      lg: "w-12 h-12"
-    }
-  },
-  defaultVariants: {
-    variant: "ghost",
-    size: "md"
-  }
-});
+function getIconButtonClasses(variant = "ghost", size = "md", className) {
+  const base = "flex items-center justify-center rounded-full flex-shrink-0 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-cyan-500/40 disabled:cursor-not-allowed disabled:opacity-50";
+  const variants = {
+    ghost: "bg-transparent hover:bg-[var(--muted)] active:bg-[var(--muted)]",
+    primary: "bg-cyan-500 text-white hover:bg-cyan-400 active:bg-cyan-600",
+    secondary: "border border-[var(--border)] bg-[var(--surface)] hover:bg-[var(--muted)] active:bg-[var(--muted)]"
+  };
+  const sizes = {
+    sm: "w-8 h-8",
+    md: "w-10 h-10",
+    lg: "w-12 h-12"
+  };
+  return [base, variants[variant], sizes[size], className].filter(Boolean).join(" ");
+}
 var IconButton = React2__namespace.forwardRef(
   ({
     variant,
@@ -368,7 +355,7 @@ var IconButton = React2__namespace.forwardRef(
       "button",
       {
         ref,
-        className: iconButtonStyles({ variant, size, className }),
+        className: getIconButtonClasses(variant, size, className),
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsx(
           Icon,
@@ -782,35 +769,33 @@ function Search({
     }
   );
 }
-var buttonStyles = tailwindVariants.tv({
-  base: "cursor-pointer inline-flex items-center justify-center gap-2 rounded-[var(--radius-2xl)] px-[18px] h-12 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-cyan-500/40 disabled:cursor-not-allowed disabled:opacity-50",
-  variants: {
-    variant: {
-      primary: "bg-cyan-500 text-white hover:bg-cyan-400 active:bg-cyan-600 disabled:bg-neutral-400",
-      secondary: "border border-cyan-500 text-cyan-500 bg-transparent hover:bg-cyan-50 active:bg-cyan-100 disabled:border-neutral-400 disabled:text-neutral-400",
-      ghost: "bg-transparent text-cyan-500 hover:bg-cyan-50 active:bg-cyan-100 disabled:text-neutral-400"
-    },
-    size: {
-      sm: "h-9 px-3",
-      md: "h-12 px-[18px]",
-      lg: "h-14 px-6"
-    },
-    fullWidth: {
-      true: "w-full"
-    }
-  },
-  defaultVariants: {
-    variant: "primary",
-    size: "md"
-  }
-});
+function getButtonClasses(variant = "primary", size = "md", fullWidth, className) {
+  const base = "cursor-pointer inline-flex items-center justify-center gap-2 rounded-[var(--radius-2xl)] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-cyan-500/40 disabled:cursor-not-allowed disabled:opacity-50";
+  const variants = {
+    primary: "bg-cyan-500 text-white hover:bg-cyan-400 active:bg-cyan-600 disabled:bg-neutral-400",
+    secondary: "border border-cyan-500 text-cyan-500 bg-transparent hover:bg-cyan-50 active:bg-cyan-100 disabled:border-neutral-400 disabled:text-neutral-400",
+    ghost: "bg-transparent text-cyan-500 hover:bg-cyan-50 active:bg-cyan-100 disabled:text-neutral-400"
+  };
+  const sizes = {
+    sm: "h-9 px-3",
+    md: "h-12 px-[18px]",
+    lg: "h-14 px-6"
+  };
+  return [
+    base,
+    variants[variant],
+    sizes[size],
+    fullWidth ? "w-full" : "",
+    className
+  ].filter(Boolean).join(" ");
+}
 var Button = React2__namespace.forwardRef(
   ({ variant, size, fullWidth, className, children, icon, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         ref,
-        className: buttonStyles({ variant, size, fullWidth, className }),
+        className: getButtonClasses(variant, size, fullWidth, className),
         ...props,
         children
       }

package/dist/index.d.cts

@@ -1,8 +1,5 @@
 import * as React from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as tailwind_variants from 'tailwind-variants';
-import { VariantProps } from 'tailwind-variants';
-import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
 
 type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
@@ -44,43 +41,9 @@ type AvatarProps = {
     color?: string;
     /** Accessible alt text; defaults to the person's name */
     alt?: string;
-} & VariantProps<typeof avatarStyles> & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
-declare const avatarStyles: tailwind_variants.TVReturnType<{
-    size: {
-        sm: string;
-        md: string;
-    };
-}, undefined, string, tailwind_variants_dist_config_js.TVConfig<{
-    size: {
-        sm: string;
-        md: string;
-    };
-}, {
-    size: {
-        sm: string;
-        md: string;
-    };
-}>, {
-    size: {
-        sm: string;
-        md: string;
-    };
-}, undefined, tailwind_variants.TVReturnType<{
-    size: {
-        sm: string;
-        md: string;
-    };
-}, undefined, string, tailwind_variants_dist_config_js.TVConfig<{
-    size: {
-        sm: string;
-        md: string;
-    };
-}, {
-    size: {
-        sm: string;
-        md: string;
-    };
-}>, unknown, unknown, undefined>>;
+    /** Avatar size */
+    size?: "sm" | "md";
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
 declare function Avatar({ name, src, color, size, alt, className, style, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
 
 type AvatarGroupProps = {
@@ -160,195 +123,32 @@ interface SearchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSele
 }
 declare function Search({ className, options, onSearch, selectedOption, onSelect, searchDelay, disabled, maxHeight, id, children, ...props }: SearchProps): react_jsx_runtime.JSX.Element;
 
-declare const buttonStyles: tailwind_variants.TVReturnType<{
-    variant: {
-        primary: string;
-        secondary: string;
-        ghost: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    fullWidth: {
-        true: string;
-    };
-}, undefined, string, tailwind_variants_dist_config_js.TVConfig<{
-    variant: {
-        primary: string;
-        secondary: string;
-        ghost: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    fullWidth: {
-        true: string;
-    };
-}, {
-    variant: {
-        primary: string;
-        secondary: string;
-        ghost: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    fullWidth: {
-        true: string;
-    };
-}>, {
-    variant: {
-        primary: string;
-        secondary: string;
-        ghost: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    fullWidth: {
-        true: string;
-    };
-}, undefined, tailwind_variants.TVReturnType<{
-    variant: {
-        primary: string;
-        secondary: string;
-        ghost: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    fullWidth: {
-        true: string;
-    };
-}, undefined, string, tailwind_variants_dist_config_js.TVConfig<{
-    variant: {
-        primary: string;
-        secondary: string;
-        ghost: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    fullWidth: {
-        true: string;
-    };
-}, {
-    variant: {
-        primary: string;
-        secondary: string;
-        ghost: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    fullWidth: {
-        true: string;
-    };
-}>, unknown, unknown, undefined>>;
-type ButtonVariants = VariantProps<typeof buttonStyles>;
-type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & ButtonVariants & {
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    /** Button visual variant */
+    variant?: "primary" | "secondary" | "ghost";
+    /** Button size */
+    size?: "sm" | "md" | "lg";
+    /** Make button full width */
+    fullWidth?: boolean;
     /** Icon component to display instead of text */
     icon?: React.ReactNode;
 };
-declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & ButtonVariants & {
+declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    /** Button visual variant */
+    variant?: "primary" | "secondary" | "ghost";
+    /** Button size */
+    size?: "sm" | "md" | "lg";
+    /** Make button full width */
+    fullWidth?: boolean;
     /** Icon component to display instead of text */
     icon?: React.ReactNode;
 } & React.RefAttributes<HTMLButtonElement>>;
 
-declare const iconButtonStyles: tailwind_variants.TVReturnType<{
-    variant: {
-        ghost: string;
-        primary: string;
-        secondary: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, string, tailwind_variants_dist_config_js.TVConfig<{
-    variant: {
-        ghost: string;
-        primary: string;
-        secondary: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, {
-    variant: {
-        ghost: string;
-        primary: string;
-        secondary: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}>, {
-    variant: {
-        ghost: string;
-        primary: string;
-        secondary: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, tailwind_variants.TVReturnType<{
-    variant: {
-        ghost: string;
-        primary: string;
-        secondary: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, undefined, string, tailwind_variants_dist_config_js.TVConfig<{
-    variant: {
-        ghost: string;
-        primary: string;
-        secondary: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, {
-    variant: {
-        ghost: string;
-        primary: string;
-        secondary: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}>, unknown, unknown, undefined>>;
-type IconButtonVariants = VariantProps<typeof iconButtonStyles>;
-type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & IconButtonVariants & {
+type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    /** Button visual variant */
+    variant?: "ghost" | "primary" | "secondary";
+    /** Button size */
+    size?: "sm" | "md" | "lg";
     /** Material Symbols icon name */
     icon: string;
     /** Icon size (defaults to button size) */
@@ -358,7 +158,11 @@ type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & IconButto
     /** Optional custom className for the icon */
     iconClassName?: string;
 };
-declare const IconButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & IconButtonVariants & {
+declare const IconButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    /** Button visual variant */
+    variant?: "ghost" | "primary" | "secondary";
+    /** Button size */
+    size?: "sm" | "md" | "lg";
     /** Material Symbols icon name */
     icon: string;
     /** Icon size (defaults to button size) */