@rayan.boussouda/ui-kit 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,347 @@
+import { ClassProp } from 'class-variance-authority/types';
+import { ForwardRefExoticComponent } from 'react';
+import { JSX as JSX_2 } from 'react';
+import { RefAttributes } from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+export declare const Avatar: {
+    ({ src, alt, initials, size, className, ...props }: AvatarProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
+    src?: string;
+    alt?: string;
+    initials?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+}
+
+export declare const Badge: {
+    ({ className, variant, size, ...props }: BadgeProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+}
+
+export declare const badgeVariants: (props?: ({
+    variant?: "default" | "secondary" | "destructive" | "outline" | "success" | "warning" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>;
+
+export declare interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    loading?: boolean;
+}
+
+export declare const buttonVariants: (props?: ({
+    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const Card: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): JSX_2.Element;
+    displayName: string;
+};
+
+export declare const CardContent: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): JSX_2.Element;
+    displayName: string;
+};
+
+export declare const CardDescription: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): JSX_2.Element;
+    displayName: string;
+};
+
+export declare const CardFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): JSX_2.Element;
+    displayName: string;
+};
+
+export declare const CardHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): JSX_2.Element;
+    displayName: string;
+};
+
+export declare const CardTitle: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>): JSX_2.Element;
+    displayName: string;
+};
+
+export declare type Colors = typeof colors;
+
+export declare const colors: {
+    readonly brand: {
+        readonly 50: "oklch(0.97 0.01 260)";
+        readonly 100: "oklch(0.93 0.04 260)";
+        readonly 200: "oklch(0.87 0.07 260)";
+        readonly 300: "oklch(0.78 0.12 260)";
+        readonly 400: "oklch(0.68 0.18 260)";
+        readonly 500: "oklch(0.58 0.22 260)";
+        readonly 600: "oklch(0.49 0.23 260)";
+        readonly 700: "oklch(0.41 0.21 260)";
+        readonly 800: "oklch(0.33 0.17 260)";
+        readonly 900: "oklch(0.25 0.12 260)";
+    };
+    readonly neutral: {
+        readonly 50: "oklch(0.985 0 0)";
+        readonly 100: "oklch(0.96 0 0)";
+        readonly 200: "oklch(0.92 0 0)";
+        readonly 300: "oklch(0.87 0 0)";
+        readonly 400: "oklch(0.72 0 0)";
+        readonly 500: "oklch(0.56 0 0)";
+        readonly 600: "oklch(0.44 0 0)";
+        readonly 700: "oklch(0.36 0 0)";
+        readonly 800: "oklch(0.27 0 0)";
+        readonly 900: "oklch(0.20 0 0)";
+        readonly 950: "oklch(0.13 0 0)";
+    };
+    readonly destructive: {
+        readonly 50: "oklch(0.97 0.01 27)";
+        readonly 500: "oklch(0.63 0.24 27)";
+        readonly 600: "oklch(0.52 0.24 27)";
+        readonly 700: "oklch(0.43 0.22 27)";
+    };
+    readonly success: {
+        readonly 500: "oklch(0.65 0.19 145)";
+        readonly 600: "oklch(0.55 0.19 145)";
+    };
+    readonly warning: {
+        readonly 400: "oklch(0.84 0.18 75)";
+        readonly 500: "oklch(0.78 0.17 75)";
+    };
+};
+
+export declare const GenreTag: {
+    ({ name, active, className, ...props }: GenreTagProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface GenreTagProps extends React.HTMLAttributes<HTMLSpanElement> {
+    name: string;
+    active?: boolean;
+}
+
+export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, Pick<VariantProps<typeof inputVariants>, 'size'> {
+    label?: string;
+    error?: string;
+    hint?: string;
+}
+
+declare const inputVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    state?: "default" | "error" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const MovieCard: {
+    ({ title, posterUrl, rating, genres, year, overview, onClick, className, }: MovieCardProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface MovieCardProps {
+    title: string;
+    posterUrl?: string;
+    rating?: number;
+    genres?: string[];
+    year?: number;
+    overview?: string;
+    onClick?: () => void;
+    className?: string;
+}
+
+export declare const MovieGrid: {
+    ({ columns, className, children, ...props }: MovieGridProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface MovieGridProps extends React.HTMLAttributes<HTMLDivElement> {
+    columns?: 2 | 3 | 4 | 5 | 6;
+}
+
+export declare type Radii = typeof radii;
+
+export declare const radii: {
+    readonly none: "0px";
+    readonly sm: "0.25rem";
+    readonly md: "0.375rem";
+    readonly lg: "0.5rem";
+    readonly xl: "0.75rem";
+    readonly '2xl': "1rem";
+    readonly '3xl': "1.5rem";
+    readonly full: "9999px";
+};
+
+export declare const RatingStars: {
+    ({ value, max, readonly, size, onChange, className, }: RatingStarsProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface RatingStarsProps {
+    value: number;
+    max?: number;
+    readonly?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    onChange?: (value: number) => void;
+    className?: string;
+}
+
+export declare const ReviewCard: {
+    ({ author, avatarUrl, avatarInitials, rating, content, date, movieTitle, className, }: ReviewCardProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface ReviewCardProps {
+    author: string;
+    avatarUrl?: string;
+    avatarInitials?: string;
+    rating?: number;
+    content: string;
+    date?: string;
+    movieTitle?: string;
+    className?: string;
+}
+
+export declare const SearchBar: ForwardRefExoticComponent<SearchBarProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface SearchBarProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    onClear?: () => void;
+    isLoading?: boolean;
+}
+
+export declare const Select: ForwardRefExoticComponent<SelectProps & RefAttributes<HTMLSelectElement>>;
+
+export declare interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+
+export declare interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    options: SelectOption[];
+    label?: string;
+    error?: string;
+    placeholder?: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+
+export declare type Shadows = typeof shadows;
+
+export declare const shadows: {
+    readonly none: "none";
+    readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+    readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+    readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+    readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
+    readonly '2xl': "0 25px 50px -12px rgb(0 0 0 / 0.25)";
+};
+
+export declare const Skeleton: {
+    ({ className, ...props }: SkeletonProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+
+export declare type Spacing = typeof spacing;
+
+export declare const spacing: {
+    readonly 0: "0px";
+    readonly 0.5: "0.125rem";
+    readonly 1: "0.25rem";
+    readonly 1.5: "0.375rem";
+    readonly 2: "0.5rem";
+    readonly 2.5: "0.625rem";
+    readonly 3: "0.75rem";
+    readonly 3.5: "0.875rem";
+    readonly 4: "1rem";
+    readonly 5: "1.25rem";
+    readonly 6: "1.5rem";
+    readonly 7: "1.75rem";
+    readonly 8: "2rem";
+    readonly 9: "2.25rem";
+    readonly 10: "2.5rem";
+    readonly 12: "3rem";
+    readonly 14: "3.5rem";
+    readonly 16: "4rem";
+    readonly 20: "5rem";
+    readonly 24: "6rem";
+    readonly 32: "8rem";
+    readonly 40: "10rem";
+    readonly 48: "12rem";
+    readonly 64: "16rem";
+};
+
+export declare const Spinner: {
+    ({ size, className, ...props }: SpinnerProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface SpinnerProps extends React.SVGAttributes<SVGSVGElement> {
+    size?: 'sm' | 'md' | 'lg';
+}
+
+export declare const Tag: {
+    ({ label, onRemove, className, ...props }: TagProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
+    label: string;
+    onRemove?: () => void;
+}
+
+export declare type Typography = typeof typography;
+
+export declare const typography: {
+    readonly fontFamily: {
+        readonly sans: "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
+        readonly mono: "ui-monospace, SFMono-Regular, \"SF Mono\", Consolas, \"Liberation Mono\", monospace";
+    };
+    readonly fontSize: {
+        readonly xs: {
+            readonly size: "0.75rem";
+            readonly lineHeight: "1rem";
+        };
+        readonly sm: {
+            readonly size: "0.875rem";
+            readonly lineHeight: "1.25rem";
+        };
+        readonly base: {
+            readonly size: "1rem";
+            readonly lineHeight: "1.5rem";
+        };
+        readonly lg: {
+            readonly size: "1.125rem";
+            readonly lineHeight: "1.75rem";
+        };
+        readonly xl: {
+            readonly size: "1.25rem";
+            readonly lineHeight: "1.75rem";
+        };
+        readonly '2xl': {
+            readonly size: "1.5rem";
+            readonly lineHeight: "2rem";
+        };
+        readonly '3xl': {
+            readonly size: "1.875rem";
+            readonly lineHeight: "2.25rem";
+        };
+        readonly '4xl': {
+            readonly size: "2.25rem";
+            readonly lineHeight: "2.5rem";
+        };
+    };
+    readonly fontWeight: {
+        readonly normal: "400";
+        readonly medium: "500";
+        readonly semibold: "600";
+        readonly bold: "700";
+    };
+};
+
+export { }