@soul-refiner/design-system 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @abide/core
+
+## 0.0.1
+
+### Patch Changes
+
+- init

package/dist/index.d.ts

@@ -0,0 +1,800 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import { User, Course } from '@soul-refiner/models';
+import { ComponentProps } from '@abide/utils/src';
+
+interface ButtonProps extends React.PropsWithChildren, Omit<React.HTMLProps<HTMLButtonElement | HTMLAnchorElement>, "type" | "size" | "as"> {
+    as?: React.ElementType;
+    bold?: boolean;
+    buttonType?: "primary" | "secondary" | "tertiary" | "quarternary";
+    buttonColor?: string;
+    className?: string;
+    dropdownOpen?: boolean;
+    icon?: React.ReactElement;
+    iconPosition?: "left" | "right";
+    inverted?: boolean;
+    focus?: boolean;
+    fluid?: boolean;
+    loading?: boolean;
+    padded?: boolean;
+    shape?: "rectangular" | "rounded";
+    size?: "default" | "small" | "large" | number;
+    styles?: React.CSSProperties;
+    color?: string;
+    uppercase?: boolean;
+}
+declare const Button: ({ as: Tag, bold, buttonType, buttonColor, children, className, color, disabled, dropdownOpen, focus, icon, iconPosition, inverted, href, fluid, loading, padded, shape, size, style, uppercase, ...rest }: ButtonProps) => JSX.Element;
+
+interface DropdownProps extends Partial<Omit<HTMLSelectElement, "options" | "style" | "children">>, React.PropsWithChildren {
+    className?: string;
+    closeOnChange?: boolean;
+    closeOnBlur?: boolean;
+    defaultValue?: string;
+    disabled?: boolean;
+    maintainState?: boolean;
+    offset?: [number, number];
+    onChange?: (event: React.MouseEvent, value: string) => void;
+    open?: "right" | "left";
+    options?: React.ReactNode[] | Omit<DropdownOptionProps, "selected">[];
+    style?: React.CSSProperties;
+    trigger: React.ReactElement;
+}
+declare const Dropdown: {
+    ({ className, children, closeOnChange, closeOnBlur, defaultValue, disabled, maintainState, offset, onChange, open: openDirection, options, style, trigger, }: DropdownProps): JSX.Element;
+    Option: {
+        ({ checkbox, color, disabled, icon, label, onClick, selected, style, value, }: DropdownOptionProps): JSX.Element;
+        displayName: string;
+    };
+    Spacer: {
+        ({ style }: DropdownSpacerProps): JSX.Element;
+        displayName: string;
+    };
+};
+interface DropdownOptionProps extends Partial<Omit<HTMLOptionElement, "className" | "style" | "selected">> {
+    checkbox?: boolean;
+    color?: string;
+    icon?: React.ReactNode;
+    onClick: (event: React.MouseEvent) => void;
+    selected?: boolean;
+    style?: React.CSSProperties;
+}
+interface DropdownSpacerProps {
+    style?: React.CSSProperties;
+}
+
+interface DropzoneProps extends React.PropsWithChildren {
+    color?: "pink" | "purple" | "ocean" | "mint" | "blue" | "orange";
+    id?: string;
+    fileType?: "video" | "audio" | "image" | "document";
+    multiple?: boolean;
+    showGraphic?: boolean;
+    subtext?: string;
+    text?: React.ReactNode;
+    fluid?: boolean;
+    style?: CSSProperties;
+    onDrop?: (files: FileList) => void;
+    ref?: React.RefObject<HTMLInputElement>;
+    showBrowse?: boolean;
+}
+declare const Dropzone: ({ children, id, color, fileType, multiple, showGraphic, subtext, text, style, onDrop, showBrowse, ...rest }: DropzoneProps) => JSX.Element;
+
+interface RateProps {
+    ownRating?: number;
+    label?: string;
+    direction?: "vertical" | "horizontal";
+    onClickRating: (rating: number) => void;
+}
+declare const Rate: ({ ownRating, label, direction, onClickRating, }: RateProps) => JSX.Element;
+
+interface SwitchProps {
+    optionA: string;
+    optionB: string;
+    active: 0 | 1;
+    fluid?: boolean;
+}
+declare const Switch: ({ optionA, optionB, active, fluid, }: SwitchProps) => JSX.Element;
+
+interface CourseCardProps {
+    description: string;
+    episodes: number;
+    favorited: boolean;
+    href: string;
+    onAddToCollection: () => void;
+    onFavorite: () => void;
+    owner: Partial<User>;
+    plans: Partial<{
+        price: number;
+        type: "rent" | "buy";
+    }[]>;
+    ratings: number[];
+    type: "video" | "audio" | "written";
+    showAuthor: boolean;
+    style: React.CSSProperties;
+    thumbnail: string;
+    title: string;
+}
+declare const CourseCard: ({ description, episodes, favorited, href, onAddToCollection, onFavorite, owner, plans, ratings, type, showAuthor, style, thumbnail, title, }: CourseCardProps) => JSX.Element;
+
+interface EpisodeCardProps {
+    description: string;
+    index: number;
+    /**
+     * The length of the episode in seconds
+     */
+    length: number;
+    /**
+     * Enter the progress in seconds watched
+     * A falsy value does not render the progress bar
+     */
+    progress: number;
+    thumbnail: string;
+    title: string;
+    type: "audio" | "video";
+}
+declare const EpisodeCard: ({ description, index, length, progress, thumbnail, title, type, }: EpisodeCardProps) => JSX.Element;
+
+interface FeatureCardProps {
+    onPhotoChange: () => void;
+    onSubmit: (args: {
+        thumbnail: string;
+        title: string;
+        subtitle: string;
+    }) => void;
+    subtitle: string;
+    thumbnail: string;
+    title: string;
+}
+declare const FeatureCard: ({ onPhotoChange, onSubmit, subtitle, thumbnail, title, }: FeatureCardProps) => JSX.Element;
+
+interface AvatarProps extends React.PropsWithChildren, Omit<React.HTMLProps<HTMLButtonElement | HTMLAnchorElement>, "as" | "title"> {
+    as?: React.ElementType;
+    size: 128 | 96 | 64 | 40 | 36 | 32 | 24;
+    url: string;
+    title?: string | React.ReactNode;
+    textPosition?: "left" | "right";
+    subtitle?: string | React.ReactNode;
+    presence?: "online" | "busy" | "focus" | "offline";
+    status?: "approved" | "declined" | "locked";
+}
+declare const Avatar: ({ as: Tag, size, url, title, subtitle, presence, status, textPosition, ...rest }: AvatarProps) => JSX.Element;
+
+declare enum Colors {
+    orange = 0,
+    purple = 1,
+    pink = 2,
+    mint = 3,
+    blue = 4,
+    ocean = 5
+}
+interface ColoredIconProps extends React.PropsWithChildren {
+    onClick: () => void;
+    color: Colors;
+}
+declare const ColoredIcon: ({ color, onClick, children, }: ColoredIconProps) => JSX.Element;
+
+interface DevicePreviewProps extends Omit<React.DetailedHTMLProps<React.IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>, "width" | "height"> {
+    width: string;
+    height: string;
+    statusbar?: boolean;
+    statusbarTheme?: "light" | "dark";
+    type?: "phone" | "laptop";
+    urlbar?: boolean;
+}
+declare const DevicePreview: ({ width, height, src, statusbar, statusbarTheme, title, type, urlbar, ...rest }: DevicePreviewProps) => JSX.Element;
+
+interface IconProps extends React.PropsWithChildren, Omit<React.SVGProps<SVGSVGElement>, "width" | "height" | "viewbox" | "onClick"> {
+    as?: React.ElementType;
+    className?: string;
+    dropdownOpen?: boolean;
+    fill?: string;
+    iconSize?: number;
+    iconColor?: string;
+    inline?: boolean;
+    onClick?: (event: React.MouseEvent) => void;
+    size?: number;
+    style?: React.CSSProperties;
+    viewbox: string;
+}
+declare const Icon: ({ as: Tag, children, className, dropdownOpen, iconSize, iconColor, inline, fill, onClick, size, style, viewbox, ...rest }: IconProps) => JSX.Element;
+
+interface IconHeaderProps {
+    color: "turquoise" | "green" | "blue" | "purple" | "orange" | "red" | "grey";
+    icon: React.ReactNode;
+    title?: string;
+    subtitle?: string;
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+}
+declare const IconHeader: ({ color, icon, title, subtitle, as, }: IconHeaderProps) => JSX.Element;
+
+interface StarRatingProps {
+    rating: number;
+    width: number;
+    outlines?: boolean;
+    gradient?: boolean;
+}
+declare const StarRating: ({ rating, width, outlines, gradient, }: StarRatingProps) => JSX.Element;
+
+declare type Data$2 = {
+    name: string;
+    count: number;
+};
+declare type DataSet$1 = {
+    groupName?: string;
+    data: Required<Data$2>[];
+};
+interface BarProps {
+    dataSets: DataSet$1[];
+    iconHeader?: IconHeaderProps;
+    /**
+     * Height of the bar graph in pixels, not the height of the overall container
+     * @note Only supports px or %
+     */
+    height?: string;
+    /**
+     * Width of the bar graph, not the width of the overall container
+     * @note Only supports px or %
+     */
+    width?: string;
+}
+declare const Bar: ({ dataSets, iconHeader, height, width, }: BarProps) => JSX.Element;
+
+declare type Data$1 = {
+    name: string;
+    value: number;
+};
+declare type DataSet = {
+    groupName?: string;
+    data: Required<Data$1>[];
+};
+interface LineProps {
+    width?: string;
+    height?: string;
+    iconHeader: IconHeaderProps;
+    dataSets: DataSet[];
+}
+declare const Line: ({ height, width, iconHeader, dataSets, }: LineProps) => JSX.Element;
+
+declare type Data = {
+    label: string;
+    amount: number;
+    color?: string;
+};
+interface PieProps {
+    data: Data[];
+    iconHeader?: IconHeaderProps;
+    header?: React.ReactNode;
+}
+declare const Pie: ({ data, iconHeader, header }: PieProps) => JSX.Element;
+
+/**********************************************************************
+ *  Types
+ */
+interface EditorProps extends Course {
+    editable: boolean;
+    pageName: string;
+}
+/**********************************************************************
+ *  Function
+ */
+declare const Editor: ({ id, created, modified, title, subtitle, shortDescription, description, categories, tags, plans, trailerVideo, sampleVideo, ownerId, status, thumbnail, ratings, type, outline, hasContent, pageName, editable, }: EditorProps) => JSX.Element;
+
+interface ChipProps extends React.PropsWithChildren {
+    chipColor?: string;
+    disabled?: boolean;
+    shape?: "rounded" | "rectangular";
+    style?: React.CSSProperties;
+    type?: "success" | "pending" | "error" | "regular";
+}
+declare const Chip: ({ children, chipColor, disabled, shape, style, type, }: ChipProps) => JSX.Element;
+
+interface LoaderProps {
+    color?: string;
+    inline?: boolean;
+    inverse?: boolean;
+    size?: number;
+    styles?: React.CSSProperties;
+}
+declare const Loader: ({ color, inline, inverse, size, styles, }: LoaderProps) => JSX.Element;
+
+interface ProgressBarProps {
+    percent: number;
+    color?: string;
+    backgroundColor?: string;
+    height?: number;
+}
+declare const ProgressBar: ({ percent, height, backgroundColor, color, }: ProgressBarProps) => JSX.Element;
+
+interface ToastProps extends React.PropsWithChildren {
+    icon?: React.ReactNode;
+    onDismiss: () => void;
+    type: "success" | "error" | "pending" | "neutral";
+    visible: boolean;
+}
+declare const Toast: ({ children, icon: customIcon, onDismiss, type, visible, }: ToastProps) => JSX.Element | null;
+
+interface TooltipProps {
+    label: string;
+}
+declare const Tooltip: ({ label }: TooltipProps) => JSX.Element;
+
+interface JoinGroupModalProps {
+    onSubmit: () => void;
+    rules: {
+        title: React.ReactNode;
+        explanation?: React.ReactNode;
+    }[];
+    trigger: React.ReactElement;
+}
+declare const JoinGroupModal: ({ onSubmit, rules, trigger, }: JoinGroupModalProps) => JSX.Element;
+
+interface CalendarInputProps extends React.HTMLProps<HTMLInputElement> {
+    icon?: boolean;
+}
+declare const CalendarInput: ({ icon, ...rest }: CalendarInputProps) => JSX.Element;
+
+interface FeedInputProps extends React.HTMLProps<HTMLTextAreaElement> {
+}
+declare const FeedInput: ({ onChange, value, ...rest }: FeedInputProps) => JSX.Element;
+
+interface InboxInputProps extends React.HTMLProps<HTMLTextAreaElement> {
+}
+declare const InboxInput: ({ onChange, onSubmit, value }: InboxInputProps) => JSX.Element;
+
+interface PostInputProps extends React.HTMLProps<HTMLTextAreaElement> {
+    characterCount?: boolean;
+    hasShadow?: boolean;
+}
+declare const PostInput: ({ characterCount, hasShadow, maxLength, value, ...rest }: PostInputProps) => JSX.Element;
+
+interface RadioInputProps extends Partial<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "onChange">> {
+    label?: string | React.ReactNode;
+    reverse?: boolean;
+    onChange?: (event: React.ChangeEvent, checked?: boolean) => void;
+}
+declare const RadioInput: ({ checked, label, onChange, reverse, ...rest }: RadioInputProps) => JSX.Element;
+
+interface SearchInputProps extends Omit<React.HTMLProps<HTMLInputElement>, "as"> {
+    as?: React.ElementType;
+    expandable: boolean;
+    expanded?: boolean;
+    onSubmit?: () => void;
+    width?: number;
+}
+declare const SearchInput: ({ as, expandable, expanded, onSubmit, width, ...rest }: SearchInputProps) => JSX.Element;
+
+interface SelectInputProps {
+    icon?: ReactNode;
+    name: string;
+    onSelect?: (value: string) => void;
+    options: Array<HTMLOptionElement>;
+    placeholder?: string;
+}
+declare const SelectInput: ({ icon, name, onSelect, options, placeholder, }: SelectInputProps) => JSX.Element;
+
+interface TagInputProps {
+    max?: number;
+    style?: CSSProperties;
+}
+declare const TagInput: ({ max, style }: TagInputProps) => JSX.Element;
+
+interface TextInputProps extends React.HTMLProps<HTMLTextAreaElement> {
+    characterCount?: boolean;
+}
+declare const TextInput: ({ className, characterCount, maxLength, value, ...rest }: TextInputProps) => JSX.Element;
+
+interface ContactDetailsProps {
+    email?: string;
+    location?: string;
+    url?: string;
+    phone?: string;
+    onSubmit: (props: {
+        email: string;
+        location: string;
+        url: string;
+        phone: string;
+    }) => void;
+}
+declare const ContactDetails: ({ email, location, url, phone, onSubmit, }: ContactDetailsProps) => JSX.Element;
+
+interface BreadcrumbsProps {
+    crumbs: Array<Breadcrumb>;
+    collapse: boolean;
+}
+interface Breadcrumb {
+    label: string;
+    url: string;
+}
+declare const Breadcrumbs: ({ crumbs, collapse, }: BreadcrumbsProps) => JSX.Element;
+
+interface DrawerProps extends React.PropsWithChildren {
+    activeTab?: number;
+    background?: string;
+    className?: string;
+    heading?: React.ReactNode;
+    open?: boolean;
+    toggle?: (open: boolean) => void;
+}
+declare const Drawer: {
+    ({ activeTab: controlledActiveTab, background, className, children, open, toggle, }: DrawerProps): JSX.Element;
+    Heading: {
+        ({ children, toggleDrawer, }: {
+            children: React.ReactNode;
+            toggleDrawer?: (() => void) | undefined;
+        }): JSX.Element;
+        displayName: string;
+    };
+    Tab: {
+        ({ children }: DrawerTabProps): JSX.Element;
+        displayName: string;
+    };
+    Item: {
+        ({ children, header }: DrawerItemProps): JSX.Element;
+        displayName: string;
+    };
+    Action: {
+        ({ children, ...rest }: Omit<ButtonProps, "size">): JSX.Element;
+        displayName: string;
+    };
+};
+interface DrawerTabProps extends React.PropsWithChildren {
+    name: string;
+}
+interface DrawerItemProps extends React.PropsWithChildren {
+    header: IconHeaderProps;
+}
+
+interface EditorBarProps {
+    buttonsMenu?: boolean;
+    mediaMenu?: boolean;
+    moreMenu?: boolean;
+    notes?: boolean;
+}
+declare const EditorBar: ({ buttonsMenu, mediaMenu, moreMenu, notes, }: EditorBarProps) => JSX.Element;
+
+interface MenuTabsProps extends React.PropsWithChildren {
+    tabItems?: Array<React.ReactNode>;
+    activeItem?: number;
+    onTabClick?: (tabIndex: number) => void;
+}
+declare const MenuTabs: ({ children, tabItems, activeItem, onTabClick, }: MenuTabsProps) => JSX.Element;
+
+interface NavigationProps extends React.PropsWithChildren {
+    logoURI: string;
+    user: Partial<User>;
+}
+declare const Navigation: {
+    ({ children, logoURI, user }: NavigationProps): JSX.Element;
+    Item: {
+        ({ as, bottom, children, icon, active, style, title, ...rest }: NavigationItemProps): JSX.Element;
+        displayName: string;
+    };
+};
+interface NavigationItemProps extends Omit<ComponentProps, "as"> {
+    as?: React.ElementType;
+    bottom?: boolean;
+    icon: React.ReactElement;
+    active?: boolean;
+    style?: React.CSSProperties;
+    title?: string;
+}
+
+/********************************************************
+ *  Sub Navigation
+ */
+interface SubNavigationProps extends React.PropsWithChildren {
+    onSearch: (query: string) => void;
+    onScrollEnd?: () => void;
+    show: boolean;
+    title: string;
+}
+declare const SubNavigation: {
+    ({ children, onSearch, onScrollEnd, show, title, }: SubNavigationProps): JSX.Element;
+    Item: {
+        ({ as, active, dateCreated, dropdownOptions, dropdownElements, isMessage, onClick, subtitle, title, unread, url, }: SubNavigationItemProps): JSX.Element;
+        displayName: string;
+    };
+    Button: {
+        ({ active, children, ...rest }: SubNavigationButtonProps): JSX.Element;
+        displayName: string;
+    };
+    Create: {
+        ({ active, children, ...rest }: SubNavigationCreateProps): JSX.Element;
+        displayName: string;
+    };
+    Tab: {
+        ({ children }: SubNavigationTabProps): JSX.Element;
+        displayName: string;
+    };
+    SubMenu: {
+        ({ children }: SubNavigationSubMenuProps): JSX.Element;
+        displayName: string;
+    };
+    SubMenuItem: {
+        ({ as, children, icon, href, onClick, title, }: SubNavigationSubMenuItemProps): JSX.Element;
+        displayName: string;
+    };
+};
+/********************************************************
+ *  Item - Renders individual items of the sub navigation
+ */
+interface SubNavigationItemProps extends Omit<AvatarProps, "as" | "size"> {
+    as?: React.ElementType;
+    active?: boolean;
+    /**
+     * The time stamp renders only if isMessage is true
+     */
+    dateCreated?: Date;
+    /**
+     * Dropdown options render only if isMessage is false
+     */
+    dropdownOptions?: DropdownOptionProps[];
+    dropdownElements?: React.ReactNode[];
+    isMessage?: boolean;
+    onClick?: () => void;
+    submenu?: React.ReactNode;
+    /**
+     * The unread props is for messages only
+     */
+    unread?: boolean;
+}
+/********************************************************
+ *  Button - Renders one of the call to actions at the top of the inner drawer navigation
+ */
+interface SubNavigationButtonProps extends Omit<ButtonProps, "size" | "buttonColor" | "bold" | "uppercase"> {
+    active?: boolean;
+}
+/********************************************************
+ *  Create - Renders the CTA to create something at the bottom of the inner drawer navigation
+ */
+interface SubNavigationCreateProps extends Omit<ButtonProps, "size" | "buttonColor" | "bold" | "uppercase" | "icon"> {
+    active?: boolean;
+}
+/********************************************************
+ *  Tab - Renders both the tabs in the header and the content of each tab
+ */
+interface SubNavigationTabProps extends React.PropsWithChildren {
+    name: string;
+}
+/********************************************************
+ *  Sub Menu - Renders a sub menu that navigates to a new page of the inner drawer navigation
+ */
+interface SubNavigationSubMenuProps extends React.PropsWithChildren {
+    title: string;
+}
+/********************************************************
+ *  Sub Menu Item - Renders a child element of the sub menu
+ */
+interface SubNavigationSubMenuItemProps extends React.PropsWithChildren {
+    as?: React.ElementType;
+    icon?: React.ReactElement;
+    href?: string;
+    onClick?: () => void;
+    title: string;
+}
+
+interface PaginationProps {
+    currentPage: number;
+    /**
+     * The max number of pages visible from which one may select
+     * @default 3
+     */
+    visibilityInterval: number;
+    numPages: number;
+    onNavigate: (page: number) => void;
+}
+declare const Pagination: ({ currentPage, visibilityInterval, numPages, onNavigate, }: PaginationProps) => JSX.Element;
+
+interface CommentProps {
+    commenter: Partial<User>;
+    commentId: string;
+    content: string;
+    datePosted: Date;
+    hasReacted: boolean;
+    onReact: () => void;
+    onReply: (reply: string) => void;
+    onShowReplies: () => void;
+    reactions: number;
+    replies?: CommentProps[];
+    showReplies: boolean;
+}
+declare const Comment: ({ commentId, commenter, content, datePosted, hasReacted, onReact, onReply, onShowReplies, replies, reactions, showReplies, }: CommentProps) => JSX.Element;
+
+interface FaqProps {
+    title: string;
+    content: string;
+    editable: boolean;
+    creationMode: boolean;
+    onSubmit: (event: React.FormEvent, props: {
+        title: string;
+        content: string;
+    }) => void;
+}
+declare const Faq: ({ title, content, editable, creationMode, onSubmit, }: FaqProps) => JSX.Element;
+
+interface MessageProps extends React.PropsWithChildren {
+    datePosted: Date;
+    fromSelf: boolean;
+    sender: User;
+}
+declare const Message: ({ children, datePosted, fromSelf, sender, }: MessageProps) => JSX.Element;
+
+interface ModalProps extends React.PropsWithChildren {
+    /**
+     * This is to make the Modal a controlled component,
+     * instead of it managing its own state
+     */
+    controlledOpen?: boolean;
+}
+declare const Modal: {
+    ({ controlledOpen, ...props }: ModalProps): JSX.Element;
+    Trigger: {
+        ({ children: child, }: {
+            children: React.ReactElement;
+        }): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Dismiss: {
+        ({ children: child, }: {
+            children: React.ReactElement;
+        }): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+        displayName: string;
+    };
+    Content: {
+        ({ backgroundDark, children, footer, header, ...props }: ModalContentProps): JSX.Element;
+        displayName: string;
+    };
+};
+interface ModalContentProps extends React.PropsWithChildren {
+    backgroundDark?: boolean;
+    footer?: React.ReactElement;
+    header?: React.ReactElement;
+}
+
+interface PlanProps {
+    annualPrice: number;
+    monthlyPrice: number;
+    name: string;
+    mostPopular: boolean;
+    description: string;
+    subscriptionIndex: 0 | 1;
+    benefits: string[];
+}
+declare const Plan: ({ annualPrice, monthlyPrice, name, mostPopular, description, subscriptionIndex, benefits, }: PlanProps) => JSX.Element;
+
+interface PostProps extends React.PropsWithChildren {
+    comments: CommentProps[];
+    content: string;
+    datePosted: Date;
+    hasReacted: boolean;
+    locked: boolean;
+    onComment: (comment: string) => void;
+    onReact: () => void;
+    onShare: () => void;
+    poster: User;
+    postId: string;
+    reactions: number;
+    shares?: number;
+    userAvatarSrc: string;
+}
+declare const Post: ({ comments, children, content, datePosted, hasReacted, onComment, onReact, onShare, poster, reactions, shares, userAvatarSrc, }: PostProps) => JSX.Element;
+
+interface ProfileHeaderProps {
+    avatarUrl: string;
+    heroUrl: string;
+    title: string;
+    subtitle: string;
+    isOwner: boolean;
+    menuItems: Array<React.ReactNode>;
+    activeMenuItem: number;
+    actionItems?: React.ReactNode;
+    statItems?: React.ReactNode;
+    onChangeAvatar: () => void;
+    onChangeHero: () => void;
+    onTabClick: (index: number) => void;
+    headerType: "group" | "channel" | "profile" | "course";
+}
+declare const ProfileHeader: ({ avatarUrl, heroUrl, title, subtitle, isOwner, headerType, menuItems, activeMenuItem, actionItems, statItems, onChangeAvatar, onChangeHero, onTabClick, }: ProfileHeaderProps) => JSX.Element;
+
+interface RatingsOverviewProps {
+    rating: number;
+    reviewCount: number;
+    stars: RatingInterface;
+    onWriteReview: () => void;
+}
+interface RatingInterface {
+    one: number;
+    two: number;
+    three: number;
+    four: number;
+    five: number;
+}
+declare const RatingsOverview: ({ rating, reviewCount, stars, onWriteReview, }: RatingsOverviewProps) => JSX.Element;
+
+interface ReviewProps {
+    reviewer: string;
+    reviewDate: Date;
+    rating: number;
+    verifiedPurchase: boolean;
+    title: string;
+    content: string;
+    avatarUrl: string;
+    likes: number;
+    hasLiked: boolean;
+    onLike: () => void;
+    onShare: () => void;
+}
+declare const Review: ({ reviewer, reviewDate, rating, verifiedPurchase, title, content, avatarUrl, likes, hasLiked, onLike, onShare, }: ReviewProps) => JSX.Element;
+
+interface FilterProps {
+    label: string;
+    open: boolean;
+    value: string;
+}
+declare const Filter: ({ label, open, value }: FilterProps) => JSX.Element;
+
+/********************************************************
+ *  Table
+ */
+interface TableProps extends React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement> {
+    compact?: boolean;
+    iconHeader?: IconHeaderProps;
+    footer?: React.ReactNode;
+    header?: React.ReactNode;
+    separated?: boolean;
+    striped?: boolean;
+}
+declare const Table: {
+    ({ className, compact, iconHeader, footer, header, separated, striped, children, ...rest }: TableProps): JSX.Element;
+    Head: {
+        ({ children, ...rest }: React.PropsWithChildren): JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ children, ...rest }: React.PropsWithChildren): JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ children, ...rest }: React.PropsWithChildren): JSX.Element;
+        displayName: string;
+    };
+    HeaderCell: {
+        ({ children, lines, style, textAlign, verticalAlign, width, ...rest }: TableHeaderCellProps): JSX.Element;
+        displayName: string;
+    };
+    Row: {
+        ({ children, href, hoverable, onClick, padding, selected, style, ...rest }: TableRowProps): JSX.Element;
+        displayName: string;
+    };
+    Cell: {
+        ({ children, lines, style, textAlign, verticalAlign, width, ...rest }: TableCellProps): JSX.Element;
+        displayName: string;
+    };
+};
+/********************************************************
+ *  Table Header Cell
+ */
+interface TableHeaderCellProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableCellElement>, HTMLTableCellElement> {
+    lines?: number;
+    textAlign?: "left" | "center" | "right";
+    verticalAlign?: "top" | "middle" | "bottom";
+    width?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16;
+}
+/********************************************************
+ *  Table Row
+ */
+interface TableRowProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement> {
+    href?: string;
+    hoverable?: boolean;
+    padding?: string;
+    selected?: boolean;
+}
+/********************************************************
+ *  Table Cell
+ */
+interface TableCellProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableCellElement>, HTMLTableCellElement> {
+    lines?: number;
+    textAlign?: "left" | "center" | "right";
+    verticalAlign?: "top" | "middle" | "bottom";
+    width?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16;
+}
+
+export { Avatar, AvatarProps, Bar, BarProps, Breadcrumbs, BreadcrumbsProps, Button, ButtonProps, CalendarInput, CalendarInputProps, Chip, ChipProps, ColoredIcon, ColoredIconProps, Comment, CommentProps, ContactDetails, ContactDetailsProps, CourseCard, CourseCardProps, DevicePreview, DevicePreviewProps, Drawer, DrawerProps, Dropdown, DropdownProps, Dropzone, DropzoneProps, Editor, EditorBar, EditorBarProps, EditorProps, EpisodeCard, EpisodeCardProps, Faq, FaqProps, FeatureCard, FeatureCardProps, FeedInput, FeedInputProps, Filter, FilterProps, Icon, IconHeader, IconHeaderProps, IconProps, InboxInput, InboxInputProps, JoinGroupModal, JoinGroupModalProps, Line, LineProps, Loader, LoaderProps, MenuTabs, MenuTabsProps, Message, MessageProps, Modal, ModalProps, Navigation, NavigationItemProps, NavigationProps, Pagination, PaginationProps, Pie, PieProps, Plan, PlanProps, Post, PostInput, PostInputProps, PostProps, ProfileHeader, ProfileHeaderProps, ProgressBar, ProgressBarProps, RadioInput, RadioInputProps, Rate, RateProps, RatingsOverview, RatingsOverviewProps, Review, ReviewProps, SearchInput, SearchInputProps, SelectInput, SelectInputProps, StarRating, StarRatingProps, SubNavigation, SubNavigationButtonProps, SubNavigationCreateProps, SubNavigationItemProps, SubNavigationProps, SubNavigationSubMenuItemProps, SubNavigationSubMenuProps, SubNavigationTabProps, Switch, SwitchProps, Table, TableCellProps, TableHeaderCellProps, TableProps, TableRowProps, TagInput, TagInputProps, TextInput, TextInputProps, Toast, ToastProps, Tooltip, TooltipProps };

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@soul-refiner/design-system",
+  "version": "0.0.1",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "license": "MIT",
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "dev": "tsup src/index.ts --format esm,cjs --watch --dts --external react",
+    "lint": "TIMING=1 eslint src/**/*.ts* --fix",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "test": "jest"
+  },
+  "devDependencies": {
+    "@abide/tsconfig": "*",
+    "@babel/core": "^7.18.10",
+    "@babel/preset-env": "^7.18.10",
+    "@babel/preset-typescript": "^7.18.6",
+    "@soul-refiner/eslint-config": "*",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^28.1.7",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
+    "babel-jest": "^28.1.3",
+    "eslint": "^8.15.0",
+    "jest": "^28.1.3",
+    "jest-canvas-mock": "^2.4.0",
+    "jest-environment-jsdom": "^28.1.3",
+    "jest-transform-stub": "^2.0.0",
+    "react": "^18.1.0",
+    "sass": "^1.54.4",
+    "ts-jest": "^28.0.8",
+    "tsup": "^5.10.1",
+    "typescript": "^4.5.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@emoji-mart/react": "^1.0.1",
+    "@soul-refiner/client": "^0.0.12",
+    "@soul-refiner/models": "^0.0.11",
+    "@types/emoji-mart": "^3.0.9",
+    "@udecode/plate": "^18.7.0",
+    "emoji-mart": "^5.2.1",
+    "html-react-parser": "^3.0.4",
+    "node-fetch": "^3.2.10",
+    "react": "^18.1.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dom": "^18.2.0",
+    "slate": "^0.84.0",
+    "slate-history": "^0.66.0",
+    "slate-hyperscript": "^0.77.0",
+    "slate-react": "^0.83.2",
+    "styled-components": "^5.3.6",
+    "yarn": "^1.22.19"
+  },
+  "jest": {
+    "preset": "ts-jest",
+    "testEnvironment": "jsdom",
+    "setupFiles": [
+      "jest-canvas-mock"
+    ],
+    "transform": {
+      "^.+\\.js$": "babel-jest",
+      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2|svg)$": "jest-transform-stub"
+    }
+  }
+}