@moontra/moonui 2.0.7 → 2.0.9

package/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,207 @@
+import * as React from "react";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+const breadcrumbVariants = cva(
+  "flex items-center gap-1.5 text-sm",
+  {
+    variants: {
+      variant: {
+        default: "dark:text-gray-100 transition-colors",
+        muted: "text-muted-foreground dark:text-gray-400 transition-colors",
+        ghost: "text-foreground/60 dark:text-gray-300/60 transition-colors",
+      },
+      size: {
+        default: "text-sm",
+        sm: "text-xs",
+        lg: "text-base",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+interface BreadcrumbProps
+  extends React.HTMLAttributes<HTMLElement>,
+    VariantProps<typeof breadcrumbVariants> {
+  separator?: React.ReactNode;
+  showHomeIcon?: boolean;
+}
+
+interface BreadcrumbListProps extends React.HTMLAttributes<HTMLOListElement> {
+  collapsed?: boolean;
+  collapsedWidth?: number;
+}
+
+interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLLIElement> {
+  isCurrent?: boolean;
+  href?: string;
+  asChild?: boolean;
+}
+
+interface BreadcrumbSeparatorProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** Custom separator icon or text */
+  icon?: React.ReactNode;
+}
+
+interface BreadcrumbEllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** Custom ellipsis icon */
+  icon?: React.ReactNode;
+}
+
+const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(
+  ({ className, variant, size, ...props }, ref) => (
+    <nav
+      ref={ref}
+      className={cn(breadcrumbVariants({ variant, size }), className)}
+      aria-label="breadcrumb"
+      {...props}
+    />
+  )
+);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = React.forwardRef<HTMLOListElement, BreadcrumbListProps>(
+  ({ className, collapsed, collapsedWidth = 3, ...props }, ref) => {
+    const childrenArray = React.Children.toArray(props.children).filter(Boolean);
+    const childCount = childrenArray.length;
+
+    if (collapsed && childCount > collapsedWidth) {
+      const firstItem = childrenArray[0];
+      // const middleItems = childrenArray.slice(1, -2); // Uncomment when needed
+      const lastTwoItems = childrenArray.slice(-2);
+
+      return (
+        <ol
+          ref={ref}
+          className={cn(
+            "flex flex-wrap items-center gap-1.5 sm:gap-2.5",
+            className
+          )}
+          {...props}
+        >
+          {firstItem}
+          <BreadcrumbEllipsis />
+          {lastTwoItems}
+        </ol>
+      );
+    }
+
+    return (
+      <ol
+        ref={ref}
+        className={cn(
+          "flex flex-wrap items-center gap-1.5 sm:gap-2.5",
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = React.forwardRef<HTMLLIElement, BreadcrumbItemProps>(
+  ({ className, isCurrent, href, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? React.Fragment : href ? "a" : "span";
+    const itemProps = asChild ? {} : href ? { href } : {};
+
+    return (
+      <li
+        ref={ref}
+        className={cn("inline-flex items-center gap-1.5", className)}
+        aria-current={isCurrent ? "page" : undefined}
+        {...props}
+      >
+        <Comp 
+          className={cn(
+            "transition-colors duration-200 hover:text-foreground",
+            isCurrent 
+              ? "font-medium text-foreground dark:text-white dark:text-opacity-95" 
+              : "text-muted-foreground hover:text-foreground dark:text-gray-400 dark:hover:text-gray-200 dark:hover:text-opacity-95 hover:underline hover:underline-offset-4 hover:decoration-gray-300/30"
+          )}
+          {...itemProps}
+        >
+          {props.children}
+        </Comp>
+      </li>
+    );
+  }
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: BreadcrumbSeparatorProps) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("text-muted-foreground dark:text-gray-500 opacity-70", className)}
+    {...props}
+  >
+    {children || <ChevronRight className="h-3.5 w-3.5" />}
+  </span>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: BreadcrumbEllipsisProps) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex items-center text-muted-foreground dark:text-gray-500 dark:hover:text-gray-400 transition-colors duration-200", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+
+const BreadcrumbLink = React.forwardRef<HTMLAnchorElement, React.AnchorHTMLAttributes<HTMLAnchorElement>>(
+  ({ className, href, ...props }, ref) => (
+    <a
+      ref={ref}
+      href={href}
+      className={cn(
+        "transition-colors duration-200 hover:text-foreground text-muted-foreground hover:underline hover:underline-offset-4 hover:decoration-gray-300/30 dark:text-gray-400 dark:hover:text-gray-200",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      className={cn(
+        "font-medium text-foreground dark:text-white dark:text-opacity-95",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

package/src/components/ui/button.stories.tsx

@@ -0,0 +1,162 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './button';
+import { Mail, Plus, Loader2 } from 'lucide-react';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Displays a button or a component that looks like a button.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'],
+      description: 'The visual style of the button',
+    },
+    size: {
+      control: 'select',
+      options: ['default', 'sm', 'lg', 'icon'],
+      description: 'The size of the button',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Whether the button is disabled',
+    },
+    children: {
+      control: 'text',
+      description: 'The content of the button',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    children: 'Secondary',
+  },
+};
+
+export const Destructive: Story = {
+  args: {
+    variant: 'destructive',
+    children: 'Destructive',
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    variant: 'outline',
+    children: 'Outline',
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    variant: 'ghost',
+    children: 'Ghost',
+  },
+};
+
+export const Link: Story = {
+  args: {
+    variant: 'link',
+    children: 'Link',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'sm',
+    children: 'Small',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'lg',
+    children: 'Large',
+  },
+};
+
+export const Icon: Story = {
+  args: {
+    size: 'icon',
+    children: <Plus className="h-4 w-4" />,
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    children: (
+      <>
+        <Mail className="mr-2 h-4 w-4" />
+        Login with Email
+      </>
+    ),
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    disabled: true,
+    children: (
+      <>
+        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+        Please wait
+      </>
+    ),
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    children: 'Disabled',
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-wrap gap-2">
+        <Button variant="default">Default</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="destructive">Destructive</Button>
+        <Button variant="outline">Outline</Button>
+        <Button variant="ghost">Ghost</Button>
+        <Button variant="link">Link</Button>
+      </div>
+      <div className="flex flex-wrap gap-2">
+        <Button size="sm">Small</Button>
+        <Button size="default">Default</Button>
+        <Button size="lg">Large</Button>
+        <Button size="icon">
+          <Plus className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'All button variants and sizes in one view.',
+      },
+    },
+  },
+};

package/src/components/ui/button.tsx

@@ -0,0 +1,221 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+import { Loader2 } from "lucide-react";
+
+/**
+ * Premium Button Component
+ * 
+ * A world-class, accessible, and versatile button component.
+ * Pixel-perfect design with extensive variants and states.
+ */
+const buttonVariants = cva(
+  ["inline-flex items-center justify-center gap-2 whitespace-nowrap",
+  "font-medium relative",
+  "transition-all duration-200 ease-out",
+  "premium-hover", /* Standart premium hover efekti */
+  "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+  "disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none"],
+  {
+    variants: {
+      variant: {
+        primary: [
+          "bg-primary text-primary-foreground",
+          "hover:bg-primary-hover dark:hover:bg-primary/90",
+          "active:bg-primary-active dark:active:bg-primary/80",
+          "shadow-sm dark:shadow-primary/20 dark:shadow-md",
+          "focus-visible:ring-primary/50 dark:focus-visible:ring-primary/30",
+          "dark:bg-primary dark:text-white",
+          "transition-all duration-200",
+        ],
+        secondary: [
+          "bg-secondary text-secondary-foreground",
+          "hover:bg-gray-200 dark:hover:bg-gray-700/90",
+          "active:bg-gray-300 dark:active:bg-gray-600/90",
+          "border border-transparent dark:border-gray-700",
+          "focus-visible:ring-gray-400/30 dark:focus-visible:ring-gray-500/40",
+          "dark:bg-gray-800 dark:text-gray-100",
+          "dark:shadow-sm dark:shadow-gray-900/20",
+        ],
+        outline: [
+          "bg-background text-foreground",
+          "border border-gray-300 dark:border-gray-700",
+          "hover:border-gray-400 dark:hover:border-gray-500",
+          "hover:bg-gray-50 dark:hover:bg-gray-800/80",
+          "active:bg-gray-100 dark:active:bg-gray-800/90",
+          "focus-visible:ring-gray-400/30 dark:focus-visible:ring-gray-500/40",
+          "dark:text-gray-200 dark:bg-gray-900/50",
+          "dark:shadow-sm dark:shadow-gray-950/10",
+        ],
+        ghost: [
+          "text-foreground",
+          "hover:bg-gray-100 dark:hover:bg-gray-800/90",
+          "active:bg-gray-200 dark:active:bg-gray-700/90",
+          "focus-visible:ring-gray-400/30 dark:focus-visible:ring-gray-500/40",
+          "dark:text-gray-200",
+          "transition-colors duration-200",
+        ],
+        destructive: [
+          "bg-error text-white",
+          "hover:bg-error/90 dark:hover:bg-error/80",
+          "active:bg-error/80 dark:active:bg-error/70",
+          "shadow-sm dark:shadow-error/10 dark:shadow-md",
+          "focus-visible:ring-error/50 dark:focus-visible:ring-error/30",
+          "dark:text-white dark:border-error/20",
+          "transition-colors duration-200",
+        ],
+        success: [
+          "bg-success text-white",
+          "hover:bg-success/90 dark:hover:bg-success/80",
+          "active:bg-success/80 dark:active:bg-success/70",
+          "shadow-sm dark:shadow-success/10 dark:shadow-md", 
+          "focus-visible:ring-success/50 dark:focus-visible:ring-success/30",
+          "dark:text-white dark:border-success/20",
+          "transition-colors duration-200",
+        ],
+        link: [
+          "text-primary bg-transparent",
+          "underline-offset-4 hover:underline",
+          "hover:text-primary-hover active:text-primary-active",
+          "p-0 h-auto",
+          "dark:text-blue-400 dark:hover:text-blue-300",
+          "dark:active:text-blue-500",
+          "transition-colors duration-200",
+        ],
+        gradient: [
+          "bg-gradient-to-r from-blue-600 to-purple-600 text-white",
+          "hover:from-blue-700 hover:to-purple-700",
+          "active:from-blue-800 active:to-purple-800",
+          "shadow-lg shadow-purple-500/25",
+          "focus-visible:ring-purple-500/50",
+          "transition-all duration-300",
+        ],
+        glow: [
+          "bg-primary text-primary-foreground",
+          "shadow-lg shadow-primary/50",
+          "hover:shadow-xl hover:shadow-primary/60",
+          "active:shadow-md active:shadow-primary/40",
+          "focus-visible:ring-primary/50",
+          "transition-all duration-300",
+        ],
+        soft: [
+          "bg-primary/10 text-primary",
+          "hover:bg-primary/20",
+          "active:bg-primary/30",
+          "focus-visible:ring-primary/50",
+          "dark:bg-primary/20 dark:text-primary-foreground",
+          "dark:hover:bg-primary/30 dark:active:bg-primary/40",
+          "transition-colors duration-200",
+        ],
+        glass: [
+          "bg-white/10 backdrop-blur-md text-foreground",
+          "border border-white/20",
+          "hover:bg-white/20 hover:border-white/30",
+          "active:bg-white/30",
+          "shadow-lg",
+          "focus-visible:ring-white/50",
+          "dark:bg-gray-800/10 dark:border-gray-700/20",
+          "dark:hover:bg-gray-800/20 dark:hover:border-gray-700/30",
+          "transition-all duration-200",
+        ],
+        neon: [
+          "bg-transparent text-primary",
+          "border-2 border-primary",
+          "hover:bg-primary hover:text-primary-foreground",
+          "hover:shadow-[0_0_20px_rgba(var(--primary),0.5)]",
+          "active:shadow-[0_0_10px_rgba(var(--primary),0.3)]",
+          "focus-visible:ring-primary/50",
+          "transition-all duration-300",
+        ],
+      },
+      size: {
+        xs: "h-7 px-2.5 text-xs rounded",
+        sm: "h-8 px-3 text-sm rounded",
+        md: "h-10 px-4 text-base rounded-md",
+        lg: "h-12 px-6 text-lg rounded-lg",
+        xl: "h-14 px-8 text-xl rounded-lg",
+        icon: "h-10 w-10 p-2 rounded-md",
+        "icon-sm": "h-8 w-8 p-1.5 rounded",
+        "icon-lg": "h-12 w-12 p-3 rounded-lg",
+      },
+      rounded: {
+        default: "",
+        full: "rounded-full",
+        none: "rounded-none",
+      },
+      fullWidth: {
+        true: "w-full",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+      rounded: "default",
+      fullWidth: false,
+    },
+  }
+);
+
+// Button component props
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  loading?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+}
+
+/**
+ * Premium Button Component
+ * 
+ * @param props - Button component properties
+ * @param props.variant - Visual variant (primary, secondary, ghost, etc.)
+ * @param props.size - Button size (xs, sm, md, lg, xl)
+ * @param props.loading - Loading state display
+ * @param props.leftIcon - Icon on the left side
+ * @param props.rightIcon - Icon on the right side
+ * @param props.fullWidth - Full width display
+ * @param props.rounded - Corner rounding style (default, full, none)
+ * @param props.asChild - For Radix UI polymorphic component
+ */
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ 
+    className, 
+    variant, 
+    size, 
+    rounded, 
+    fullWidth,
+    asChild = false,
+    loading = false,
+    leftIcon,
+    rightIcon,
+    children,
+    disabled,
+    ...props 
+  }, ref) => {
+    // Radix UI'ın asChild pattern'i için - "as" prop yerine
+    const Comp = asChild ? "button" : "button";
+    
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, rounded, fullWidth, className }))}
+        ref={ref}
+        disabled={disabled || loading}
+        data-loading={loading ? "" : undefined}
+        {...props}
+      >
+        {loading && (
+          <Loader2 className="w-4 h-4 animate-spin" aria-hidden="true" />
+        )}
+        {!loading && leftIcon}
+        {children}
+        {!loading && rightIcon}
+      </Comp>
+    );
+  }
+);
+
+Button.displayName = "Button";
+
+export { Button, buttonVariants };