@medable/nucleus-ui 2.0.0

package/.npmignore

@@ -0,0 +1,3 @@
+# Only exclude noise; everything else is included
+*.log
+.DS_Store

package/.npmrc

@@ -0,0 +1 @@
+@medable:registry=https://registry.npmjs.org/

package/accordion/src/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/accordion.component';

package/accordion/src/index.js

@@ -0,0 +1,2 @@
+export * from './lib/accordion.component';
+//# sourceMappingURL=index.js.map

package/accordion/src/lib/accordion.component.d.ts

@@ -0,0 +1,30 @@
+import { InternalAccordionPanelProps } from './accordion_panel.component';
+export type AccordionPanelProps = Pick<InternalAccordionPanelProps, 'title' | 'content' | 'dataTestId' | 'disabled' | 'menuItems' | 'titleWrapperClassName'> & {
+    /**
+     * The id of the panel. if one is not provided, a default id will be generated.
+     */
+    id?: string;
+    /**
+     * If the panel should be open by default. Note that if onlyOneOpen is set to true,
+     * only the last panel with this property set to true will be open.
+     * @default false
+     */
+    initialIsOpen?: boolean;
+};
+export interface AccordionProps {
+    /**
+     * The panels to be rendered in the accordion
+     * @default []
+     **/
+    panels: AccordionPanelProps[];
+    /**
+     * Callback when the accordion is toggled. The index of the accordion toggled is passed as the second argument
+     */
+    onToggle?: (isOpen: boolean, index: number) => void;
+    /**
+     * If only one panel can be open at a time
+     * @default true
+     */
+    singleActivePanel?: boolean;
+}
+export declare const Accordion: ({ panels, onToggle, singleActivePanel }: AccordionProps) => import("react/jsx-runtime").JSX.Element;

package/accordion/src/lib/accordion.component.js

@@ -0,0 +1,40 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { useEffect, useState } from 'react';
+import { AccordionPanel } from './accordion_panel.component';
+export const Accordion = ({ panels = [], onToggle, singleActivePanel = true }) => {
+    const [openAccordions, setOpenAccordions] = useState({});
+    useEffect(() => {
+        if (singleActivePanel) {
+            let lastOpenIdx;
+            panels.forEach((panel, index) => {
+                if (!panel.disabled && panel.initialIsOpen) {
+                    lastOpenIdx = index;
+                }
+            });
+            if (lastOpenIdx !== undefined) {
+                setOpenAccordions({ [lastOpenIdx]: true });
+            }
+        }
+        else {
+            setOpenAccordions(panels.reduce((acc, { initialIsOpen, disabled }, index) => {
+                acc[index] = !disabled && !!initialIsOpen;
+                return acc;
+            }, {}));
+        }
+    }, [panels, singleActivePanel]);
+    const onAccordionToggle = (value, index) => {
+        const newOpenAccordions = singleActivePanel ? { [index]: value } : Object.assign(Object.assign({}, openAccordions), { [index]: value });
+        setOpenAccordions(newOpenAccordions);
+        if (onToggle) {
+            onToggle(value, index);
+        }
+    };
+    return (_jsx("section", { children: panels.map((_a, index) => {
+            var { id } = _a, accordionProps = __rest(_a, ["id"]);
+            const panelId = id || `${accordionProps.title}-${index}`;
+            return (_createElement(AccordionPanel, Object.assign({}, accordionProps, { onToggle: (value) => onAccordionToggle(value, index), isOpen: openAccordions[index], key: panelId, panelId: panelId })));
+        }) }));
+};
+//# sourceMappingURL=accordion.component.js.map

package/accordion/src/lib/accordion_panel.component.d.ts

@@ -0,0 +1,42 @@
+import { ReactElement } from 'react';
+import { DropdownItem } from '../../../dropdown/src';
+export interface InternalAccordionPanelProps {
+    /**
+     * The content of the accordion
+     */
+    content: string | ReactElement;
+    /**
+     * The data test id for the accordion
+     */
+    dataTestId?: string;
+    /**
+     * Whether the accordion is open or not
+     */
+    isOpen?: boolean;
+    /**
+     * Callback when the accordion is toggled
+     */
+    onToggle: (isOpen: boolean) => void;
+    /**
+     * The title of the accordion
+     */
+    title: string | ReactElement;
+    /**
+     * The class names for the title section.
+     */
+    titleWrapperClassName?: string;
+    /**
+     * The content id for the accordion panel shown when the accordion is expanded.
+     * default is 'nucleus-accordion-content'
+     */
+    panelId?: string;
+    /**
+     * If the accordion panel is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Optional actions for each accordion section. Will render a kebab Dropdown on hover.
+     */
+    menuItems?: DropdownItem[];
+}
+export declare const AccordionPanel: ({ content, dataTestId, isOpen, onToggle, title, panelId, disabled, menuItems, titleWrapperClassName, }: InternalAccordionPanelProps) => import("react/jsx-runtime").JSX.Element;

package/accordion/src/lib/accordion_panel.component.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { extendTailwindMerge } from 'tailwind-merge';
+import { Dropdown } from '../../../dropdown/src';
+import { Icon } from '../../../icon/src';
+import { H3, Text } from '../../../typography/src';
+const twMerge = extendTailwindMerge({
+    prefix: 'nucleus-',
+});
+export const AccordionPanel = ({ content, dataTestId = 'nucleus-accordion', isOpen = false, onToggle, title, panelId = 'nucleus-accordion-content', disabled, menuItems = [], titleWrapperClassName = '', }) => {
+    const toggleIsOpen = () => {
+        if (!disabled) {
+            onToggle(!isOpen);
+        }
+    };
+    const handleDropdownClick = (e) => {
+        e.stopPropagation();
+    };
+    const handleOnKeyDown = (e) => {
+        if (e.code === 'Space' || e.code === 'Enter') {
+            onToggle(!isOpen);
+        }
+    };
+    return (_jsxs("section", { "data-testid": dataTestId, className: 'nucleus-group nucleus-box-border nucleus-font-sans', children: [_jsx(H3, { className: 'nucleus-font-medium nucleus-text-base', children: _jsxs("div", { role: 'button', tabIndex: disabled ? undefined : 0, className: twMerge(`nucleus-flex nucleus-w-full nucleus-h-16 nucleus-box-border nucleus-items-center nucleus-cursor-pointer nucleus-select-none nucleus-px-5 nucleus-py-4 nucleus-border-solid nucleus-border-0 nucleus-border-b nucleus-border-neutral-300 
+          ${disabled ? 'nucleus-pointer-events-none nucleus-bg-neutral-200 nucleus-text-text-disabled' : isOpen ? 'nucleus-text-neutral-900 nucleus-bg-neutral-100' : 'nucleus-text-neutral-900 nucleus-bg-white'}`, titleWrapperClassName), onClick: toggleIsOpen, "aria-expanded": isOpen, "aria-controls": panelId, "aria-disabled": disabled, onKeyDown: handleOnKeyDown, children: [typeof title === 'string' ? _jsx(Text, { size: 'base', children: title }) : title, _jsxs("div", { className: `nucleus-flex nucleus-items-center nucleus-gap-2 nucleus-box-border nucleus-ml-auto ${disabled ? 'nucleus-text-text-disabled' : 'nucleus-text-neutral-450'}`, children: [!disabled && menuItems.length > 0 && (_jsx("div", { className: 'md:nucleus-invisible md:group-hover:nucleus-visible md:group-focus-within:nucleus-visible', onClick: handleDropdownClick, children: _jsx(Dropdown, { variant: 'kebab', position: 'bottom-end', items: menuItems }) })), _jsx(Icon, { name: isOpen ? 'chevronDown' : 'chevronRight', color: 'current' })] })] }) }), isOpen && (_jsx("section", { id: panelId, className: 'nucleus-box-border nucleus-border-solid nucleus-border-0 nucleus-border-b nucleus-border-neutral-300', "data-testid": `${dataTestId}-content`, children: content }))] }));
+};
+//# sourceMappingURL=accordion_panel.component.js.map

package/avatar/src/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/avatar';

package/avatar/src/index.js

@@ -0,0 +1,2 @@
+export * from './lib/avatar';
+//# sourceMappingURL=index.js.map

package/avatar/src/lib/avatar.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+export interface AvatarProps {
+    /** Size of avatar */
+    size?: 'sm' | 'base' | 'lg';
+}
+export declare const Avatar: ({ size, children }: PropsWithChildren<AvatarProps>) => import("react/jsx-runtime").JSX.Element;

package/avatar/src/lib/avatar.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const sizeMap = {
+    sm: 'nucleus-h-8 nucleus-w-8',
+    base: 'nucleus-h-10 nucleus-w-10',
+    lg: 'nucleus-h-12 nucleus-w-12',
+};
+/** Default avatar icon showing a generic user silhouette */
+const defaultContent = (_jsx("svg", { className: 'nucleus-h-full nucleus-w-full nucleus-text-neutral-300', fill: 'currentColor', viewBox: '0 0 24 24', children: _jsx("path", { d: 'M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z' }) }));
+export const Avatar = ({ size = 'base', children = defaultContent }) => {
+    return (_jsx("span", { className: `nucleus-inline-block nucleus-overflow-hidden nucleus-bg-neutral-100 nucleus-rounded-full ${sizeMap[size]}`, children: children }));
+};
+//# sourceMappingURL=avatar.js.map

package/badge/src/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/badge';

package/badge/src/index.js

@@ -0,0 +1,2 @@
+export * from './lib/badge';
+//# sourceMappingURL=index.js.map

package/badge/src/lib/badge.d.ts

@@ -0,0 +1,22 @@
+import { HTMLAttributes } from 'react';
+import { IconProps } from '../../../icon/src';
+export type BadgeProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'dangerouslySetInnerHTML' | 'content'> & {
+    /**
+     * This sets the data-testid attribute on the badge component. This is useful for test frameworks like Jest or Cypress.
+     */
+    dataTestId?: string;
+    /**
+     * The variant prop is used to set the color of the badge, based on the semantic meaning of the variant. The default value is 'common'.
+     */
+    variant?: 'common' | 'incomplete' | 'success' | 'danger' | 'active' | 'new' | 'warning';
+    /**
+     * The label prop is used to set the text content of the badge.
+     */
+    label: string;
+    startIcon?: IconProps;
+    endIcon?: IconProps;
+};
+/**
+ * Badges are used to show differences in objects, item counts, or system status.
+ */
+export declare const Badge: ({ dataTestId, variant, className, label, startIcon, endIcon, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/badge/src/lib/badge.js

@@ -0,0 +1,24 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { extendTailwindMerge } from 'tailwind-merge';
+import { Icon } from '../../../icon/src';
+const twMerge = extendTailwindMerge({
+    prefix: 'nucleus-',
+});
+const badgeVariantColors = {
+    common: 'nucleus-bg-gray-100 nucleus-border-gray-200 nucleus-text-text-primary',
+    incomplete: 'nucleus-bg-yellow-100 nucleus-border-yellow-200 nucleus-text-yellow-900',
+    success: 'nucleus-bg-green-100 nucleus-border-green-200 nucleus-text-green-900',
+    danger: 'nucleus-bg-red-100 nucleus-border-red-200 nucleus-text-text-error',
+    active: 'nucleus-bg-blue-100 nucleus-border-blue-200 nucleus-text-blue-950',
+    new: 'nucleus-bg-primary-75 nucleus-border-primary-200 nucleus-text-primary-950',
+    warning: 'nucleus-bg-orange-100 nucleus-border-orange-200 nucleus-text-orange-900',
+};
+/**
+ * Badges are used to show differences in objects, item counts, or system status.
+ */
+export const Badge = (_a) => {
+    var { dataTestId, variant = 'common', className, label, startIcon, endIcon } = _a, props = __rest(_a, ["dataTestId", "variant", "className", "label", "startIcon", "endIcon"]);
+    return (_jsxs("div", Object.assign({ "data-testid": dataTestId, className: twMerge(`nucleus-box-border nucleus-font-sans nucleus-inline-flex nucleus-w-fit nucleus-gap-1 nucleus-items-center nucleus-rounded-md nucleus-px-2 nucleus-py-1 nucleus-text-xs nucleus-font-medium nucleus-border nucleus-border-solid ${badgeVariantColors[variant]}`, className) }, props, { role: 'status', "aria-label": label, children: [startIcon && _jsx(Icon, Object.assign({ color: 'current' }, startIcon)), _jsx("span", { children: label }), endIcon && _jsx(Icon, Object.assign({ color: 'current' }, endIcon))] })));
+};
+//# sourceMappingURL=badge.js.map

package/breadcrumbs/src/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/breadcrumbs';

package/breadcrumbs/src/index.js

@@ -0,0 +1,2 @@
+export * from './lib/breadcrumbs';
+//# sourceMappingURL=index.js.map

package/breadcrumbs/src/lib/breadcrumbs.d.ts

@@ -0,0 +1,18 @@
+import { ElementType } from 'react';
+export interface BreadcrumbsProps {
+    /** array of page objects used to build the breadcrumb links */
+    pages: BreadcrumbPage[];
+    /**
+     * The component to use for the link, used to override the default anchor tag.
+     */
+    LinkComponent?: ElementType;
+    /**
+     * Whether to use the href prop for the link. by default, the 'to' prop is used.
+     */
+    useHrefProp?: boolean;
+}
+export interface BreadcrumbPage {
+    name: string;
+    path: string;
+}
+export declare const Breadcrumbs: ({ pages, LinkComponent, useHrefProp }: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;

package/breadcrumbs/src/lib/breadcrumbs.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '../../../icon/src';
+import { Link } from '../../../link/src';
+import { Text } from '../../../typography/src';
+export const Breadcrumbs = ({ pages, LinkComponent, useHrefProp }) => {
+    return (_jsx("nav", { className: 'nucleus-flex nucleus-border-box nucleus-font-sans', "aria-label": 'Breadcrumbs', children: _jsx("ol", { className: 'nucleus-flex nucleus-border-box nucleus-list-none nucleus-flex-wrap nucleus-items-center nucleus-p-0 nucleus-space-x-4', role: 'list', children: pages.map(({ name, path }, i) => {
+                return (_jsx("li", { className: 'nucleus-border-box nucleus-m-0', children: _jsx("div", { className: 'nucleus-flex nucleus-border-box nucleus-items-center', children: i !== pages.length - 1 ? (_jsxs(_Fragment, { children: [_jsx(Link, Object.assign({ role: 'link', LinkComponent: LinkComponent, "aria-current": 'page' }, (useHrefProp ? { href: path } : { to: path }), { children: _jsx("span", { className: 'nucleus-box-border nucleus-text-sm', children: name }) })), _jsx("span", { className: 'nucleus-border-box nucleus-ml-4', children: _jsx(Icon, { name: 'chevronRight', size: 'xs' }) })] })) : (_jsx(Text, { "aria-current": 'page', className: 'nucleus-text-text-disabled focus:nucleus-outline-none focus:nucleus-ring-primary-500 focus:nucleus-ring-2 focus:nucleus-ring-offset-2 nucleus-text-sm', children: name })) }) }, name));
+            }) }) }));
+};
+//# sourceMappingURL=breadcrumbs.js.map

package/button/src/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/button';

package/button/src/index.js

@@ -0,0 +1,2 @@
+export * from './lib/button';
+//# sourceMappingURL=index.js.map

package/button/src/lib/button.d.ts

@@ -0,0 +1,63 @@
+import { JSX, ReactElement } from 'react';
+import { IconName } from '../../../icon/src';
+type ButtonVariants = 'primary' | 'secondary' | 'secondary-destructive' | 'transparent' | 'destructive';
+type ButtonSizes = 'base' | 'xs' | 'sm' | 'full';
+type ButtonNativeProps = Omit<JSX.IntrinsicElements['button'], 'content'>;
+export interface ButtonProps extends ButtonNativeProps {
+    /**
+     * This will set the button's text. the accessibilty property `aria-label` will also be set to this value.
+     */
+    label: string;
+    /**
+     * This sets the data-testid attribute on the button component. This is useful for test frameworks like Jest or
+     * Cypress.
+     */
+    dataTestId?: string;
+    /**
+     * Most interfaces will use the `base` size button, however there are instances where a smaller button may be
+     * necessary.
+     */
+    size?: ButtonSizes;
+    /**
+     * Select the style of button to be used. In general, interfaces should only ever use one primary button at a time.
+     */
+    variant?: ButtonVariants;
+    /**
+     * Controls whether the button is disabled or not. disabled buttons do not react to any click or focus events.
+     */
+    disabled?: ButtonNativeProps['disabled'];
+    /**
+     * The function to call when the button is clicked. This will also trigger when the button is focused and the Space
+     * or Enter key are pressed.
+     */
+    onClick?: ButtonNativeProps['onClick'];
+    /**
+     * An option for having non-text content within a button. Label will still be required.
+     */
+    content?: ReactElement;
+    /**
+     * Controls whether the button is active or not. active buttons are rendered with a the active background color.
+     */
+    isActive?: boolean;
+    /**
+     * The icon to be displayed on the button
+     */
+    iconName?: IconName;
+    /**
+     * The position of the icon in relation to the text
+     */
+    iconPosition?: 'start' | 'end';
+}
+/**
+ Buttons allow a user to take an action, whether it is confirming the submission of a form, or cancelling out of a dialog, with a single click or key press.
+ @see {@link https://storybook.medable.tech/nucleus-components/?path=/docs/button--primary} for Storybook documentation
+ @see {@link https://www.figma.com/file/hT1QbhSTM1FlsNJ2HXSSvQ/Nucleus-Design-System?node-id=6%3A2490} for Nucleus
+    design
+*/
+export declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * This function is used to determine if the button is active or not. If the button is active, the background color
+ * will change.
+ */
+export declare const getBackgroundColor: (variant: ButtonVariants, isActive: boolean | undefined) => "nucleus-bg-primary-800" | "nucleus-bg-neutral-300" | "nucleus-bg-red-800" | "nucleus-bg-primary-100" | "nucleus-bg-primary-500" | "nucleus-bg-white" | "nucleus-bg-red-600" | "nucleus-bg-transparent";
+export {};

package/button/src/lib/button.js

@@ -0,0 +1,74 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Icon } from '../../../icon/src';
+import { Text } from '../../../typography/src';
+const sizeClasses = {
+    xs: 'nucleus-px-1 nucleus-py-1 nucleus-min-h-8',
+    sm: 'nucleus-px-4 nucleus-py-1 nucleus-min-h-8',
+    base: 'nucleus-px-4 nucleus-py-2 nucleus-min-h-10',
+    full: 'nucleus-w-full nucleus-h-full',
+};
+// Accessibility best practices for button: https://www.w3.org/WAI/ARIA/apg/patterns/button/
+/**
+ Buttons allow a user to take an action, whether it is confirming the submission of a form, or cancelling out of a dialog, with a single click or key press.
+ @see {@link https://storybook.medable.tech/nucleus-components/?path=/docs/button--primary} for Storybook documentation
+ @see {@link https://www.figma.com/file/hT1QbhSTM1FlsNJ2HXSSvQ/Nucleus-Design-System?node-id=6%3A2490} for Nucleus
+    design
+*/
+export const Button = forwardRef(function Button(_a, ref) {
+    var _b;
+    var { label, dataTestId, disabled = false, size = 'base', variant = 'primary', content, isActive, className, iconName, iconPosition = 'end' } = _a, buttonProps = __rest(_a, ["label", "dataTestId", "disabled", "size", "variant", "content", "isActive", "className", "iconName", "iconPosition"]);
+    const ariaLabel = (_b = buttonProps['aria-label']) !== null && _b !== void 0 ? _b : label;
+    const iconColor = variant === 'primary' || variant === 'destructive'
+        ? 'white'
+        : variant === 'secondary-destructive'
+            ? 'red'
+            : 'black';
+    return (_jsx("button", Object.assign({ ref: ref, "aria-disabled": disabled, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : '', className: `nucleus-box-border nucleus-inline-flex nucleus-max-w-full nucleus-cursor-pointer nucleus-items-center nucleus-justify-center nucleus-border-solid nucleus-bg-none nucleus-font-medium nucleus-normal-case nucleus-outline-0 nucleus-transition-colors nucleus-m-0 nucleus-rounded-md
+         focus-visible:nucleus-ring-2 focus-visible:nucleus-ring-offset-2 focus-visible:nucleus-ring-offset-white disabled:nucleus-pointer-events-none disabled:nucleus-text-text-disabled ${sizeClasses[size]} 
+         ${getBackgroundColor(variant, isActive)}
+         ${{
+            'secondary': 'nucleus-border nucleus-border-neutral-300 nucleus-text-text-primary hover:nucleus-bg-neutral-50 active:nucleus-bg-neutral-300 disabled:nucleus-bg-neutral-200 disabled:bor ' +
+                'focus-visible:nucleus-ring-primary-500 disabled:nucleus-border-0 nucleus-shadow-sm',
+            'secondary-destructive': 'nucleus-border nucleus-border-neutral-300 nucleus-text-text-error hover:nucleus-bg-red-50 active:nucleus-bg-neutral-300 disabled:nucleus-bg-neutral-200 ' +
+                'focus-visible:nucleus-ring-red-500 disabled:nucleus-border-0 nucleus-shadow-sm',
+            'transparent': 'nucleus-border-0 nucleus-text-text-action hover:nucleus-bg-primary-100 active:nucleus-bg-primary-100 focus-visible:nucleus-ring-primary-500 ' +
+                'disabled:nucleus-bg-transparent',
+            'destructive': 'nucleus-border-0 nucleus-text-white hover:nucleus-bg-red-700 active:nucleus-bg-red-800 disabled:nucleus-bg-neutral-200 focus-visible:nucleus-ring-red-700 nucleus-shadow-sm',
+            'primary': 'nucleus-border-0 hover:nucleus-bg-primary-700 active:nucleus-bg-primary-800 disabled:nucleus-bg-neutral-200 nucleus-text-white focus-visible:nucleus-ring-primary-500 nucleus-shadow-sm',
+        }[variant]} ${className !== null && className !== void 0 ? className : ''}`, "data-testid": dataTestId, disabled: disabled }, buttonProps, { children: _jsx("div", { className: 'nucleus-max-w-full nucleus-truncate nucleus-box-border nucleus-flex', children: !content ? (_jsxs(Text, { as: 'span', size: 'sm', className: 'flex items-center gap-2', children: [iconName && iconPosition === 'start' && _jsx(Icon, { name: iconName, size: 'sm', color: iconColor }), label, iconName && iconPosition === 'end' && _jsx(Icon, { name: iconName, size: 'sm', color: iconColor })] })) : (content) }) })));
+});
+/**
+ * This function is used to determine if the button is active or not. If the button is active, the background color
+ * will change.
+ */
+export const getBackgroundColor = (variant, isActive) => {
+    if (isActive) {
+        switch (variant) {
+            case 'primary':
+                return 'nucleus-bg-primary-800';
+            case 'secondary':
+                return 'nucleus-bg-neutral-300';
+            case 'secondary-destructive':
+                return 'nucleus-bg-neutral-300';
+            case 'destructive':
+                return 'nucleus-bg-red-800';
+            case 'transparent':
+                return 'nucleus-bg-primary-100';
+        }
+    }
+    switch (variant) {
+        case 'primary':
+            return 'nucleus-bg-primary-500';
+        case 'secondary':
+            return 'nucleus-bg-white';
+        case 'secondary-destructive':
+            return 'nucleus-bg-white';
+        case 'destructive':
+            return 'nucleus-bg-red-600';
+        case 'transparent':
+            return 'nucleus-bg-transparent';
+    }
+};
+//# sourceMappingURL=button.js.map

package/card/src/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/card.component';

package/card/src/index.js

@@ -0,0 +1,2 @@
+export * from './lib/card.component';
+//# sourceMappingURL=index.js.map

package/card/src/lib/card.component.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode, HTMLAttributes } from 'react';
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+}
+declare const Card: {
+    ({ children, className, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;
+    Header: ({ children, className, ...rest }: CardProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ children, className, ...rest }: CardProps) => import("react/jsx-runtime").JSX.Element;
+    Footer: ({ children, className, ...rest }: CardProps) => import("react/jsx-runtime").JSX.Element;
+};
+export { Card };

package/card/src/lib/card.component.js

@@ -0,0 +1,27 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { extendTailwindMerge } from 'tailwind-merge';
+const twMerge = extendTailwindMerge({
+    prefix: 'nucleus-',
+});
+const CardHeader = (_a) => {
+    var { children, className = '' } = _a, rest = __rest(_a, ["children", "className"]);
+    return (_jsx("div", Object.assign({ className: twMerge('nucleus-box-border nucleus-border-x-0 nucleus-px-4 nucleus-py-5 sm:nucleus-px-6', className) }, rest, { children: children })));
+};
+const CardContent = (_a) => {
+    var { children, className = '' } = _a, rest = __rest(_a, ["children", "className"]);
+    return (_jsx("div", Object.assign({ className: twMerge('nucleus-box-border nucleus-border-x-0 nucleus-px-4 nucleus-py-5 sm:nucleus-p-6', className) }, rest, { children: children })));
+};
+const CardFooter = (_a) => {
+    var { children, className = '' } = _a, rest = __rest(_a, ["children", "className"]);
+    return (_jsx("div", Object.assign({ className: twMerge('nucleus-box-border nucleus-border-x-0 nucleus-px-4 nucleus-py-4 sm:nucleus-px-6', className) }, rest, { children: children })));
+};
+const Card = (_a) => {
+    var { children, className = '' } = _a, rest = __rest(_a, ["children", "className"]);
+    return (_jsx("div", Object.assign({ className: twMerge('nucleus-font-sans nucleus-box-border nucleus-text-text-primary nucleus-divide-y nucleus-divide-solid nucleus-divide-neutral-200 nucleus-overflow-hidden nucleus-rounded-lg nucleus-bg-white nucleus-shadow', className) }, rest, { children: children })));
+};
+Card.Header = CardHeader;
+Card.Content = CardContent;
+Card.Footer = CardFooter;
+export { Card };
+//# sourceMappingURL=card.component.js.map

package/chat_panel/src/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/chat_panel';

package/chat_panel/src/index.js

@@ -0,0 +1,2 @@
+export * from './lib/chat_panel';
+//# sourceMappingURL=index.js.map