@deckai/deck-ui 0.0.4 → 0.0.7

package/dist/{src/index.d.ts → index.d.ts}

@@ -1,48 +1,82 @@
 import * as React from 'react';
-import React__default, { ButtonHTMLAttributes, SVGProps, HTMLAttributes } from 'react';
+import React__default, { SVGProps, ButtonHTMLAttributes, HTMLAttributes } from 'react';
 import { IconName } from '@deckai/icons';
-import { I as IconColors, C as Colors, T as TextColorVariant, P as PrimaryShades, S as SecondaryShades, a as TertiaryShades, b as Typography } from '../tailwind-BOs_0iUp.js';
-import { IconName as IconName$1 } from '@deckai/icons/src/types/icon-names';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { IconName as IconName$1 } from '@deckai/icons/src/types/icon-names';
 
-interface TooltipProps {
-    content: React.ReactNode;
-    children: React.ReactNode;
-    side?: "top" | "right" | "bottom" | "left";
-    align?: "start" | "center" | "end";
-    className?: string;
-    delayDuration?: number;
-}
-declare const Tooltip: ({ content, children, side, align, className, delayDuration }: TooltipProps) => React.JSX.Element;
-
-type ProfileCardProps = {
-    profileImage: string;
+type OptionProps = {
+    label: string;
+    value: string;
+    onChange?: (value: string) => void;
+    selected?: boolean;
 };
-declare const ProfileCard: ({ profileImage }: ProfileCardProps) => React__default.JSX.Element;
+declare const Option: ({ value, label, onChange, selected }: OptionProps) => React__default.JSX.Element;
 
-type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;
-declare const Pressable: React__default.FC<PressableProps>;
+type ColorShade = "5" | "10" | "15" | "20" | "25" | "30" | "50" | "100" | "200" | "300" | "400" | "500" | "600" | "DEFAULT";
+type TextColorVariant = "primary" | "secondary" | "white" | "primary-blue";
+type BackgroundShades = Pick<Record<ColorShade, string>, "50" | "100">;
+type PrimaryShades = Pick<Record<ColorShade, string>, "50" | "100">;
+type SecondaryShades = Pick<Record<ColorShade, string>, "50" | "100" | "200" | "300" | "400" | "500" | "600">;
+type TertiaryShades = Pick<Record<ColorShade, string>, "5" | "10" | "15" | "20" | "25" | "30">;
+type StrokeShades = Pick<Record<ColorShade, string>, "DEFAULT">;
+type TextShades = Record<TextColorVariant, string>;
+type Colors = {
+    background: BackgroundShades;
+    primary: PrimaryShades;
+    secondary: SecondaryShades;
+    tertiary: TertiaryShades;
+    stroke: StrokeShades | string;
+    text: TextShades;
+    overlay: string;
+};
+type HeadingSize = "xl" | "lg" | "md" | "sm" | "xs";
+type BodySize = "lg" | "lg-semibold" | "md" | "default" | "default-medium" | "default-semibold" | "default-bold" | "xs" | "xs-medium" | "xxs" | "xxs-medium" | "xxs-semibold";
+type LabelSize = "default";
+type Typography = {
+    heading: Record<HeadingSize, TypographyConfig>;
+    body: Record<BodySize, TypographyConfig>;
+    label: Record<LabelSize, TypographyConfig>;
+};
+type TypographyConfig = {
+    fontSize: string;
+    lineHeight?: string;
+    letterSpacing?: string;
+    fontWeight: string;
+    textTransform?: string;
+};
+type IconColors = "primary" | "secondary" | "white" | "primaryBlue";
 
 type IconProps = {
     name: IconName;
     /** @default 24 */
-    size?: number | string;
+    size?: number | `${Breakpoint$1}:${number}`;
     /** @default primary */
     color?: IconColors;
     title?: string;
     className?: string;
     style?: React__default.CSSProperties;
 } & Omit<SVGProps<SVGSVGElement>, "aria-hidden" | "aria-label">;
-declare const Icon: React__default.ForwardRefExoticComponent<Omit<{
-    name: IconName;
-    /** @default 24 */
-    size?: number | string;
-    /** @default primary */
-    color?: IconColors;
-    title?: string;
-    className?: string;
-    style?: React__default.CSSProperties;
-} & Omit<React__default.SVGProps<SVGSVGElement>, "aria-hidden" | "aria-label"> & Pick<PressableProps, "onClick">, "ref"> & React__default.RefAttributes<SVGSVGElement>>;
+type Breakpoint$1 = "sm" | "md" | "lg" | "xl" | "2xl";
+declare const Icon: React__default.ForwardRefExoticComponent<Omit<IconProps, "ref"> & React__default.RefAttributes<SVGSVGElement>>;
+
+type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;
+declare const Pressable: React__default.FC<PressableProps>;
+
+type NavbarItemProps = {
+    iconName: IconName;
+    hasNotification?: boolean;
+} & Pick<IconProps, "color" | "title"> & PressableProps;
+declare const NavbarItem: ({ iconName, hasNotification, color, title, ...props }: NavbarItemProps) => React__default.JSX.Element;
+
+type NavbarProps = {
+    searchOptions: OptionProps[];
+    onSearchChange: (value: string) => void;
+    navbarItems: NavbarItemProps[];
+    onLogoClick?: () => void;
+    onProfileClick?: () => void;
+    avatarImage: string;
+};
+declare const Navbar: ({ searchOptions, onSearchChange, navbarItems, onLogoClick, onProfileClick, avatarImage }: NavbarProps) => React__default.JSX.Element;
 
 type TextElement = "p" | "span" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "strong" | "em" | "blockquote" | "pre" | "code" | "small" | "label" | "a";
 type HTMLPropsMap = {
@@ -74,38 +108,48 @@ type TypographyKey = {
     [T in TypographyCategory]: `${T}-${TypographyValue<T>}`;
 }[TypographyCategory];
 type Weight = "light" | "regular" | "semibold" | "bold";
+type Breakpoint = "sm" | "md" | "lg" | "xl" | "2xl";
+type ResponsiveVariant = TypographyKey | `${Breakpoint}:${TypographyKey}`;
 type TextProps<T extends TextElement = "p"> = {
-    variant?: TypographyKey;
+    variant?: ResponsiveVariant | ResponsiveVariant[];
     color?: ColorKey | "inherit";
     as?: T;
     className?: string;
     children: React__default.ReactNode;
     weight?: Weight;
 } & HTMLPropsMap[T];
-declare const Text: React__default.ForwardRefExoticComponent<TextProps<TextElement> & React__default.RefAttributes<HTMLElement | HTMLSpanElement | HTMLParagraphElement | HTMLHeadingElement | HTMLQuoteElement | HTMLPreElement | HTMLLabelElement | HTMLAnchorElement>>;
+declare const Text: React__default.ForwardRefExoticComponent<TextProps<TextElement> & React__default.RefAttributes<HTMLElement | HTMLParagraphElement | HTMLSpanElement | HTMLHeadingElement | HTMLQuoteElement | HTMLPreElement | HTMLLabelElement | HTMLAnchorElement>>;
 
-type OptionProps = {
-    label: string;
-    value: string;
-    onChange?: (value: string) => void;
-};
-declare const Option: ({ value, label, onChange }: OptionProps) => React__default.JSX.Element;
+type LinkProps = {
+    href: string;
+    children: React__default.ReactNode;
+    className?: string;
+    style?: React__default.CSSProperties;
+} & Pick<TextProps, "variant" | "color"> & React__default.AnchorHTMLAttributes<HTMLAnchorElement>;
+declare const Link: ({ children, color, variant, href, className, ...props }: LinkProps) => React__default.JSX.Element;
 
-type NavbarItemProps = {
-    iconName: IconName;
+type TabItem = {
+    value: string;
     label: string;
-    onClick?: () => void;
+    content: React__default.ReactNode;
+};
+type TabsProps = {
+    items: TabItem[];
+    defaultValue?: string;
+    className?: string;
+    onChange?: (value: string) => void;
 };
-declare const NavbarItem: ({ label, iconName, onClick, ...props }: NavbarItemProps) => React__default.JSX.Element;
+declare const Tabs: React__default.ForwardRefExoticComponent<TabsProps & React__default.RefAttributes<HTMLDivElement>>;
 
-type NavbarProps = {
-    searchOptions: OptionProps[];
-    onSearchChange: (value: string) => void;
-    navbarItems: NavbarItemProps[];
-    onLogoClick?: () => void;
-    onProfileClick?: () => void;
+type WorkCardProps = {
+    socialIconName: "instagram-filled" | "tiktok-filled" | "youtube-filled";
+    tags: string[];
+    caption: string;
+    /** play count should already be formatted with k or m */
+    playCount: string;
+    backgroundImage: string;
 };
-declare const Navbar: ({ searchOptions, onSearchChange, navbarItems, onLogoClick, onProfileClick }: NavbarProps) => React__default.JSX.Element;
+declare const WorkCard: ({ socialIconName, tags, caption, playCount, backgroundImage }: WorkCardProps) => React__default.JSX.Element;
 
 type BreadcrumbItem = {
     label: string;
@@ -119,32 +163,15 @@ type BreadcrumbsProps = {
 };
 declare const Breadcrumbs: React__default.ForwardRefExoticComponent<BreadcrumbsProps & React__default.RefAttributes<HTMLElement>>;
 
-type ContactItemProps = {
-    iconName: IconName$1;
-    children: React__default.ReactNode;
-    href: string;
-} & Omit<HTMLAttributes<HTMLAnchorElement>, "color">;
-declare const ContactItem: ({ iconName, children, href, ...linkProps }: ContactItemProps) => React__default.JSX.Element;
-
-type AboutCardProps = {
-    interests: string[];
-    contactItems: ContactItemProps[];
-};
-declare const AboutCard: ({ interests, contactItems }: AboutCardProps) => React__default.JSX.Element;
-
-type LinkProps = {
-    href: string;
-    children: React__default.ReactNode;
+interface TooltipProps {
+    content: React.ReactNode;
+    children: React.ReactNode;
+    side?: "top" | "right" | "bottom" | "left";
+    align?: "start" | "center" | "end";
     className?: string;
-    style?: React__default.CSSProperties;
-} & Pick<TextProps, "variant" | "color"> & React__default.AnchorHTMLAttributes<HTMLAnchorElement>;
-declare const Link: ({ children, color, variant, href, className, ...props }: LinkProps) => React__default.JSX.Element;
-
-type AvatarProps = {
-    src: string;
-    size?: number | string;
-} & Pick<React__default.ComponentProps<typeof Pressable>, "onClick">;
-declare const Avatar: ({ src, size, onClick, ...props }: AvatarProps) => React__default.JSX.Element;
+    delayDuration?: number;
+}
+declare const Tooltip: ({ content, children, side, align, className, delayDuration }: TooltipProps) => React.JSX.Element;
 
 type ComboboxProps = {
     options: OptionProps[];
@@ -158,11 +185,13 @@ declare const Combobox: ({ options, placeholder, value, onChange, end, className
 
 type TagProps = {
     children: React__default.ReactNode;
+    padded?: boolean;
+    color?: "primary" | "text";
 } & HTMLAttributes<HTMLDivElement>;
-declare const Tag: ({ children, ...props }: TagProps) => React__default.JSX.Element;
+declare const Tag: ({ children, padded, color, ...props }: TagProps) => React__default.JSX.Element;
 
 type SocialCardProps = {
-    icon: IconName$1;
+    icon: IconName;
     followers: string;
     engagement: string;
 } & PressableProps;
@@ -177,20 +206,6 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitive.Switc
     description?: string;
 } & React.RefAttributes<HTMLButtonElement>>;
 
-type InputProps = {
-    className?: string;
-    end?: React.ReactNode;
-} & React.InputHTMLAttributes<HTMLInputElement>;
-declare const Input: ({ className, end, ...props }: InputProps) => React.JSX.Element;
-
-type LogoProps = {
-    /** @default 76 */
-    width?: number;
-    /** @default 25 */
-    height?: number;
-};
-declare const Logo: ({ width, height }: LogoProps) => React__default.JSX.Element;
-
 type BadgeProps = {
     variant?: "pink" | "orange" | "green";
     iconName?: IconName;
@@ -200,6 +215,44 @@ declare const Badge: React.ForwardRefExoticComponent<{
     iconName?: IconName;
 } & React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
 
+type ProfileCardProps = {
+    profileImage: string;
+    name: string;
+    location: string;
+    memberSince?: string;
+    interests?: string[];
+    badges?: BadgeProps[];
+};
+declare const ProfileCard: ({ profileImage, name, location, memberSince, interests, badges }: ProfileCardProps) => React__default.JSX.Element;
+
+type ContactItemProps = {
+    iconName: IconName$1;
+    children: React__default.ReactNode;
+    href: string;
+} & Omit<HTMLAttributes<HTMLAnchorElement>, "color">;
+declare const ContactItem: ({ iconName, children, href, ...linkProps }: ContactItemProps) => React__default.JSX.Element;
+
+type AboutCardProps = {
+    interests: string[];
+    contactItems: ContactItemProps[];
+    description: string;
+};
+declare const AboutCard: ({ interests, contactItems, description, ...props }: AboutCardProps) => React__default.JSX.Element;
+
+type AvatarProps = {
+    src: string;
+    size?: number | string;
+} & Pick<React__default.ComponentProps<typeof Pressable>, "onClick">;
+declare const Avatar: ({ src, size, onClick, ...props }: AvatarProps) => React__default.JSX.Element;
+
+type LogoProps = {
+    /** @default 76 */
+    width?: number;
+    /** @default 25 */
+    height?: number;
+};
+declare const Logo: ({ width, height }: LogoProps) => React__default.JSX.Element;
+
 type ButtonProps = {
     /** @default filled */
     variant?: "filled" | "outlined";
@@ -225,4 +278,60 @@ declare const Button: React.ForwardRefExoticComponent<{
     end?: React.ReactNode;
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
 
-export { AboutCard, type AboutCardProps, Avatar, type AvatarProps, Badge, type BadgeProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Combobox, type ComboboxProps, ContactItem, type ContactItemProps, Icon, type IconProps, Input, type InputProps, Link, type LinkProps, Logo, type LogoProps, Navbar, NavbarItem, type NavbarItemProps, type NavbarProps, Option, type OptionProps, Pressable, type PressableProps, ProfileCard, type ProfileCardProps, SocialCard, type SocialCardProps, Switch, type SwitchProps, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps };
+type InputProps = {
+    className?: string;
+    end?: React.ReactNode;
+    /** renders an icon in the end slot */
+    iconName?: IconName;
+} & React.InputHTMLAttributes<HTMLInputElement> & Pick<IconProps, "color" | "size" | "title">;
+declare const Input: ({ className, end, iconName, color, size, title, ...props }: InputProps) => React.JSX.Element;
+
+declare const config: {
+    content: string[];
+    theme: {
+        extend: {
+            colors: Colors;
+            fontSize: {
+                [x: string]: [string, object];
+            };
+            fontFamily: {
+                sans: [string, string];
+            };
+            fontWeight: {
+                light: string;
+                regular: string;
+                normal: string;
+                semibold: string;
+                bold: string;
+            };
+        };
+    };
+    plugins: {
+        handler: () => void;
+    }[];
+    safelist: string[];
+    keyframes: {
+        "fade-in": {
+            from: {
+                opacity: string;
+            };
+            to: {
+                opacity: string;
+            };
+        };
+        "fade-out": {
+            from: {
+                opacity: string;
+            };
+            to: {
+                opacity: string;
+            };
+        };
+    };
+    animation: {
+        "fade-in": string;
+        "fade-out": string;
+    };
+};
+
+export { AboutCard, type AboutCardProps, Avatar, type AvatarProps, Badge, type BadgeProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, Combobox, type ComboboxProps, ContactItem, type ContactItemProps, Icon, type IconProps, Input, type InputProps, Link, type LinkProps, Logo, type LogoProps, Navbar, NavbarItem, type NavbarItemProps, type NavbarProps, Option, type OptionProps, Pressable, type PressableProps, ProfileCard, type ProfileCardProps, SocialCard, type SocialCardProps, Switch, type SwitchProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, WorkCard, type WorkCardProps, config as tailwindConfig };