@deckai/deck-ui 0.0.6 → 0.0.7

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

@@ -1,23 +1,72 @@
 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 { C as Colors, T as TextColorVariant, P as PrimaryShades, S as SecondaryShades, a as TertiaryShades, b as Typography, I as IconColors } 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';
 
 type OptionProps = {
     label: string;
     value: string;
     onChange?: (value: string) => void;
+    selected?: boolean;
+};
+declare const Option: ({ value, label, onChange, selected }: OptionProps) => React__default.JSX.Element;
+
+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>;
 };
-declare const Option: ({ value, label, onChange }: OptionProps) => React__default.JSX.Element;
+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 | `${Breakpoint$1}:${number}`;
+    /** @default primary */
+    color?: IconColors;
+    title?: string;
+    className?: string;
+    style?: React__default.CSSProperties;
+} & Omit<SVGProps<SVGSVGElement>, "aria-hidden" | "aria-label">;
+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;
-    label: string;
-    onClick?: () => void;
-};
-declare const NavbarItem: ({ label, iconName, onClick, ...props }: NavbarItemProps) => React__default.JSX.Element;
+    hasNotification?: boolean;
+} & Pick<IconProps, "color" | "title"> & PressableProps;
+declare const NavbarItem: ({ iconName, hasNotification, color, title, ...props }: NavbarItemProps) => React__default.JSX.Element;
 
 type NavbarProps = {
     searchOptions: OptionProps[];
@@ -25,11 +74,9 @@ type NavbarProps = {
     navbarItems: NavbarItemProps[];
     onLogoClick?: () => void;
     onProfileClick?: () => void;
+    avatarImage: string;
 };
-declare const Navbar: ({ searchOptions, onSearchChange, navbarItems, onLogoClick, onProfileClick }: NavbarProps) => React__default.JSX.Element;
-
-type PressableProps = ButtonHTMLAttributes<HTMLButtonElement>;
-declare const Pressable: React__default.FC<PressableProps>;
+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 = {
@@ -61,8 +108,10 @@ 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;
@@ -79,26 +128,28 @@ type LinkProps = {
 } & Pick<TextProps, "variant" | "color"> & React__default.AnchorHTMLAttributes<HTMLAnchorElement>;
 declare const Link: ({ children, color, variant, href, className, ...props }: LinkProps) => React__default.JSX.Element;
 
-type IconProps = {
-    name: IconName;
-    /** @default 24 */
-    size?: number | string;
-    /** @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;
+type TabItem = {
+    value: string;
+    label: string;
+    content: React__default.ReactNode;
+};
+type TabsProps = {
+    items: TabItem[];
+    defaultValue?: string;
     className?: string;
-    style?: React__default.CSSProperties;
-} & Omit<React__default.SVGProps<SVGSVGElement>, "aria-hidden" | "aria-label"> & Pick<PressableProps, "onClick">, "ref"> & React__default.RefAttributes<SVGSVGElement>>;
+    onChange?: (value: string) => void;
+};
+declare const Tabs: React__default.ForwardRefExoticComponent<TabsProps & React__default.RefAttributes<HTMLDivElement>>;
+
+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 WorkCard: ({ socialIconName, tags, caption, playCount, backgroundImage }: WorkCardProps) => React__default.JSX.Element;
 
 type BreadcrumbItem = {
     label: string;
@@ -134,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;
@@ -153,10 +206,24 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitive.Switc
     description?: string;
 } & React.RefAttributes<HTMLButtonElement>>;
 
+type BadgeProps = {
+    variant?: "pink" | "orange" | "green";
+    iconName?: IconName;
+} & React.HTMLAttributes<HTMLSpanElement>;
+declare const Badge: React.ForwardRefExoticComponent<{
+    variant?: "pink" | "orange" | "green";
+    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 }: ProfileCardProps) => React__default.JSX.Element;
+declare const ProfileCard: ({ profileImage, name, location, memberSince, interests, badges }: ProfileCardProps) => React__default.JSX.Element;
 
 type ContactItemProps = {
     iconName: IconName$1;
@@ -168,8 +235,9 @@ declare const ContactItem: ({ iconName, children, href, ...linkProps }: ContactI
 type AboutCardProps = {
     interests: string[];
     contactItems: ContactItemProps[];
+    description: string;
 };
-declare const AboutCard: ({ interests, contactItems }: AboutCardProps) => React__default.JSX.Element;
+declare const AboutCard: ({ interests, contactItems, description, ...props }: AboutCardProps) => React__default.JSX.Element;
 
 type AvatarProps = {
     src: string;
@@ -185,15 +253,6 @@ type LogoProps = {
 };
 declare const Logo: ({ width, height }: LogoProps) => React__default.JSX.Element;
 
-type BadgeProps = {
-    variant?: "pink" | "orange" | "green";
-    iconName?: IconName;
-} & React.HTMLAttributes<HTMLSpanElement>;
-declare const Badge: React.ForwardRefExoticComponent<{
-    variant?: "pink" | "orange" | "green";
-    iconName?: IconName;
-} & React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
-
 type ButtonProps = {
     /** @default filled */
     variant?: "filled" | "outlined";
@@ -222,7 +281,57 @@ declare const Button: React.ForwardRefExoticComponent<{
 type InputProps = {
     className?: string;
     end?: React.ReactNode;
-} & React.InputHTMLAttributes<HTMLInputElement>;
-declare const Input: ({ className, end, ...props }: InputProps) => React.JSX.Element;
+    /** 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, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps };
+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 };