@punkbit/cui 0.0.247-rc.2

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,30 @@
+import { IconSize } from '../Icon/types';
+import { IconName } from '..';
+import { ReactNode } from 'react';
+import * as RadixAccordion from "@radix-ui/react-accordion";
+type Size = "sm" | "md" | "lg";
+type Gap = "sm" | "md" | "lg";
+type Color = "default" | "link";
+export interface AccordionProps extends SizeProp, Omit<RadixAccordion.AccordionSingleProps, "type" | "collapsible" | "title"> {
+    /** The title text or element displayed in the accordion header */
+    title: ReactNode;
+    /** The color variant of the accordion */
+    color?: Color;
+    /** Optional icon to display next to the title */
+    icon?: IconName;
+    /** Size of the optional icon */
+    iconSize?: IconSize;
+    /** Gap size between the header and content */
+    gap?: Gap;
+    /** The content to display when the accordion is expanded */
+    children: React.ReactNode;
+    /** Whether the accordion should fill the full width of its container */
+    fillWidth?: boolean;
+}
+interface SizeProp {
+    /** The size variant of the accordion */
+    size?: Size;
+}
+declare const SidebarAccordion: import('styled-components').StyledComponent<({ title, size, color, icon, iconSize, gap, children, fillWidth, ...delegated }: AccordionProps) => import("react/jsx-runtime").JSX.Element, import('styled-components').DefaultTheme, {}, never>;
+declare const AccordionToExport: import('styled-components').StyledComponent<({ title, size, color, icon, iconSize, gap, children, fillWidth, ...delegated }: AccordionProps) => import("react/jsx-runtime").JSX.Element, import('styled-components').DefaultTheme, {}, never>;
+export { AccordionToExport as Accordion, SidebarAccordion };

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,31 @@
+import { IconName } from '../Icon/types';
+import { ReactNode } from 'react';
+type AlertType = "default" | "banner";
+type AlertSize = "small" | "medium";
+type AlertState = "neutral" | "success" | "warning" | "danger" | "info";
+export type AlertProps = {
+    /** The visual state/severity of the alert */
+    state?: AlertState;
+    /** Optional title displayed above the text */
+    title?: ReactNode;
+    /** The main message text of the alert */
+    text: ReactNode;
+    /** The size variant of the alert */
+    size?: AlertSize;
+    /** The type of alert (default or banner) */
+    type?: AlertType;
+    /** Whether to show the state icon */
+    showIcon?: boolean;
+    /** Custom icon to display instead of the default state icon */
+    customIcon?: IconName;
+    /** Whether the alert can be dismissed */
+    dismissible?: boolean;
+    /** Callback when the alert is dismissed (requires dismissible=true) */
+    onDismiss?: () => void;
+};
+declare const Alert: ({ text, title, size, state, type, showIcon, dismissible, onDismiss, customIcon, ...delegated }: AlertProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const DangerAlert: (props: AlertProps) => import("react/jsx-runtime").JSX.Element;
+declare const InfoAlert: (props: AlertProps) => import("react/jsx-runtime").JSX.Element;
+declare const SuccessAlert: (props: AlertProps) => import("react/jsx-runtime").JSX.Element;
+declare const WarningAlert: (props: AlertProps) => import("react/jsx-runtime").JSX.Element;
+export { Alert, DangerAlert, InfoAlert, SuccessAlert, WarningAlert };

package/dist/components/AutoComplete/AutoComplete.d.ts

@@ -0,0 +1,67 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { PopoverProps } from '@radix-ui/react-popover';
+import { HorizontalDirection, IconName } from '..';
+type DivProps = HTMLAttributes<HTMLDivElement>;
+interface SelectItemComponentProps extends Omit<DivProps, "disabled" | "onSelect" | "value" | "children"> {
+    separator?: boolean;
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value: string;
+    icon?: IconName;
+    iconDir?: HorizontalDirection;
+}
+type SelectItemChildren = {
+    children: ReactNode;
+    label?: never;
+};
+type SelectItemLabel = {
+    children?: never;
+    label: ReactNode;
+};
+export interface SelectGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "heading"> {
+    heading: ReactNode;
+    value?: never;
+    onSelect?: never;
+}
+export interface SelectOptionItem extends Omit<SelectItemProps, "children" | "label"> {
+    heading?: never;
+    label: ReactNode;
+    [key: `data-${string}`]: string;
+}
+interface SelectGroupOptionItem extends Omit<SelectGroupProps, "children" | "label"> {
+    options: Array<SelectOptionItem>;
+    label?: never;
+    [key: `data-${string}`]: string;
+}
+export type AutoCompleteOptionListItem = SelectGroupOptionItem | SelectOptionItem;
+export type SelectItemProps = SelectItemComponentProps & (SelectItemChildren | SelectItemLabel);
+type SelectOptionType = {
+    options: Array<AutoCompleteOptionListItem>;
+    children?: never;
+};
+type SelectChildrenType = {
+    children: ReactNode;
+    options?: never;
+};
+interface Props extends PopoverProps, Omit<DivProps, "onChange" | "dir" | "onSelect" | "children"> {
+    onSelect?: (value: string) => void;
+    value?: string;
+    placeholder?: string;
+    onOpenChange?: (open: boolean) => void;
+    label?: ReactNode;
+    error?: ReactNode;
+    disabled?: boolean;
+    dir?: "start" | "end";
+    orientation?: "horizontal" | "vertical";
+    allowCreateOption?: boolean;
+}
+export type AutoCompleteProps = (SelectOptionType & Props) | (SelectChildrenType & Props);
+export declare const SelectPopoverRoot: import('styled-components').StyledComponent<import('react').FC<PopoverProps>, import('styled-components').DefaultTheme, {}, never>;
+export declare const AutoComplete: {
+    ({ onSelect: onSelectProp, options, children, onOpenChange: onOpenChangeProp, disabled, value, placeholder, ...props }: AutoCompleteProps): import("react/jsx-runtime").JSX.Element;
+    Group: import('react').ForwardRefExoticComponent<SelectGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+    Item: import('react').ForwardRefExoticComponent<SelectItemProps & import('react').RefAttributes<HTMLDivElement>>;
+};
+export declare const Group: import('react').ForwardRefExoticComponent<SelectGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const Item: import('react').ForwardRefExoticComponent<SelectItemProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/AutoComplete/AutoCompleteOptionList.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { AutoCompleteOptionListItem } from './AutoComplete';
+interface Props {
+    options: Array<AutoCompleteOptionListItem>;
+    id: string;
+}
+declare const AutoCompleteOptionList: ({ options, id }: Props) => ReactNode;
+export default AutoCompleteOptionList;

package/dist/components/AutoComplete/OptionContext.d.ts

@@ -0,0 +1,10 @@
+type OptionContextProps = {
+    search: string;
+    highlighted?: string;
+    updateHighlighted: (value: string) => void;
+    isHidden: (value?: string) => boolean;
+    selectedValue: string;
+    onSelect: (value: string) => void;
+};
+export declare const OptionContext: import('react').Context<OptionContextProps>;
+export {};

package/dist/components/AutoComplete/useOption.d.ts

@@ -0,0 +1,9 @@
+export declare const useOption: () => {
+    search: string;
+    highlighted?: string;
+    updateHighlighted: (value: string) => void;
+    isHidden: (value?: string) => boolean;
+    selectedValue: string;
+    onSelect: (value: string) => void;
+};
+export declare const useSearch: () => string;

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,14 @@
+import { AvatarProps as RadixAvatarProps } from '@radix-ui/react-avatar';
+type TextSize = "md" | "sm";
+export interface AvatarProps extends RadixAvatarProps {
+    /** The text to display as initials in the avatar fallback */
+    text: string;
+    /** The font size of the text */
+    textSize?: TextSize;
+    /** The image source URL */
+    src?: string;
+    /** The image srcSet for responsive images */
+    srcSet?: string;
+}
+declare const Avatar: ({ text, textSize, src, srcSet, ...delegated }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export { Avatar };

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,35 @@
+import { HorizontalDirection } from '..';
+import { HTMLAttributes, MouseEvent, ReactNode } from 'react';
+import { ImageName } from '../Icon/types';
+export type BadgeState = "default" | "success" | "neutral" | "danger" | "disabled" | "warning" | "info";
+export type BadgeSize = "sm" | "md";
+export type BadgeType = "opaque" | "solid";
+export interface CommonBadgeProps extends HTMLAttributes<HTMLDivElement> {
+    /** The text content to display in the badge */
+    text: ReactNode;
+    /** The visual state of the badge */
+    state?: BadgeState;
+    /** The size of the badge */
+    size?: BadgeSize;
+    /** The type/style of the badge - opaque has a lighter background, solid has a filled background */
+    type?: BadgeType;
+    /** Optional icon to display alongside the text */
+    icon?: ImageName;
+    /** The direction of the icon relative to the text */
+    iconDir?: HorizontalDirection;
+    /** Whether to truncate content with ellipsis when it overflows */
+    ellipsisContent?: boolean;
+}
+export interface DismissibleBadge extends CommonBadgeProps {
+    /** When true, displays a close button on the badge */
+    dismissible: true;
+    /** Callback function when the close button is clicked */
+    onClose: (e: MouseEvent<HTMLOrSVGElement>) => void;
+}
+export interface NonDismissibleBadge extends CommonBadgeProps {
+    /** When false or undefined, the close button is hidden */
+    dismissible?: never;
+    onClose?: never;
+}
+export type BadgeProps = NonDismissibleBadge | DismissibleBadge;
+export declare const Badge: ({ icon, iconDir, text, state, size, type, dismissible, onClose, ellipsisContent, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/BigStat/BigStat.d.ts

@@ -0,0 +1,28 @@
+import { HTMLAttributes } from 'react';
+export type bigStatOrder = "titleTop" | "titleBottom";
+export type bigStatSize = "sm" | "lg";
+export type bigStatSpacing = "sm" | "lg";
+export type bigStatState = "default" | "muted";
+export interface BigStatProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Whether the component should fill the full width of its container */
+    fillWidth?: boolean;
+    /** Maximum width of the component */
+    maxWidth?: string;
+    /** Height of the component */
+    height?: string;
+    /** The label text displayed below or above the title */
+    label: React.ReactNode;
+    /** The order of title and label - titleTop shows title first, titleBottom shows label first */
+    order?: bigStatOrder;
+    /** The size variant of the component */
+    size?: bigStatSize;
+    /** The spacing between title and label */
+    spacing?: bigStatSpacing;
+    /** The visual state of the component */
+    state?: bigStatState;
+    /** The main title/value to display */
+    title: React.ReactNode;
+    /** Whether to show an error state with danger border */
+    error?: boolean;
+}
+export declare const BigStat: ({ fillWidth, maxWidth, height, label, order, size, spacing, state, title, error, ...props }: BigStatProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,26 @@
+import { IconName } from '..';
+import { default as React } from 'react';
+export type ButtonType = "primary" | "secondary" | "empty" | "danger";
+type Alignment = "center" | "left";
+export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /** The visual style variant of the button */
+    type?: ButtonType;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** The text label to display in the button */
+    label?: string;
+    /** Icon to display on the left side of the label */
+    iconLeft?: IconName;
+    /** Icon to display on the right side of the label */
+    iconRight?: IconName;
+    /** Alignment of the button content */
+    align?: Alignment;
+    /** Whether the button should fill the full width of its container */
+    fillWidth?: boolean;
+    /** Whether to show a loading state */
+    loading?: boolean;
+    /** Whether the button should be focused on mount */
+    autoFocus?: boolean;
+}
+export declare const Button: ({ type, iconLeft, iconRight, align, children, fillWidth, label, loading, disabled, ...delegated }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,22 @@
+import { HTMLAttributes, ReactNode } from 'react';
+type ButtonGroupType = "default" | "borderless";
+export interface ButtonGroupElementProps extends Omit<HTMLAttributes<HTMLButtonElement>, "children"> {
+    /** The unique value for this button */
+    value: string;
+    /** The label text to display */
+    label?: ReactNode;
+}
+export interface ButtonGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "onClick"> {
+    /** Array of button options to display */
+    options: Array<ButtonGroupElementProps>;
+    /** The currently selected button value */
+    selected?: string;
+    /** Callback when a button is clicked */
+    onClick?: (value: string) => void;
+    /** Whether the button group should fill the full width */
+    fillWidth?: boolean;
+    /** The style type of the button group */
+    type?: ButtonGroupType;
+}
+export declare const ButtonGroup: ({ options, selected, fillWidth, onClick, type, ...props }: ButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/CardHorizontal/CardHorizontal.d.ts

@@ -0,0 +1,40 @@
+import { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+import { BadgeState, HorizontalDirection, IconName } from '..';
+type CardColor = "default" | "muted";
+export type CardSize = "sm" | "md";
+export interface CardHorizontalProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** The title text displayed in the card */
+    title?: ReactNode;
+    /** Icon to display in the card */
+    icon?: IconName;
+    /** Whether the card is disabled */
+    disabled?: boolean;
+    /** The description content of the card */
+    description?: ReactNode;
+    /** URL to navigate to when clicked */
+    infoUrl?: string;
+    /** Text for the action button (shows/hides the button) */
+    infoText?: string;
+    /** Whether the card is in a selected state */
+    isSelected?: boolean;
+    /** Whether the card can be selected */
+    isSelectable?: boolean;
+    /** Additional content to display in the card */
+    children?: ReactNode;
+    /** Color variant of the card */
+    color?: CardColor;
+    /** Size variant of the card */
+    size?: CardSize;
+    /** Text for the badge (shows/hides the badge) */
+    badgeText?: string;
+    /** State/color variant of the badge */
+    badgeState?: BadgeState;
+    /** Icon to display in the badge */
+    badgeIcon?: IconName;
+    /** Direction of the badge icon */
+    badgeIconDir?: HorizontalDirection;
+    /** Callback when the card button is clicked */
+    onButtonClick?: MouseEventHandler<HTMLElement>;
+}
+export declare const CardHorizontal: ({ title, icon, description, disabled, infoText, infoUrl, isSelected, isSelectable, children, color, size, badgeText, badgeState, badgeIcon, badgeIconDir, onButtonClick, ...props }: CardHorizontalProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/CardPrimary/CardPrimary.d.ts

@@ -0,0 +1,35 @@
+import { IconName } from '..';
+import { HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+import { WithTopBadgeProps } from './withTopBadge';
+export type CardPrimarySize = "sm" | "md";
+type ContentAlignment = "start" | "center" | "end";
+export interface CardPrimaryProps extends HTMLAttributes<HTMLDivElement>, WithTopBadgeProps {
+    /** The title text displayed in the card */
+    title?: string;
+    /** Icon name to display in the card header */
+    icon?: IconName;
+    /** URL to a custom icon image */
+    iconUrl?: string;
+    /** Whether to show a shadow on the card */
+    hasShadow?: boolean;
+    /** Whether the card is disabled */
+    disabled?: boolean;
+    /** The description content of the card */
+    description?: ReactNode;
+    /** URL to navigate to when clicked */
+    infoUrl?: string;
+    /** Text to display on the action button */
+    infoText?: string;
+    /** The size variant of the card */
+    size?: CardPrimarySize;
+    /** Whether the card is in a selected state */
+    isSelected?: boolean;
+    /** Additional content to display in the card */
+    children?: ReactNode;
+    /** Content alignment within the card */
+    alignContent?: ContentAlignment;
+    /** Callback when the card button is clicked */
+    onButtonClick?: MouseEventHandler<HTMLElement>;
+}
+export declare const CardPrimary: import('react').FC<CardPrimaryProps & WithTopBadgeProps>;
+export {};

package/dist/components/CardPrimary/CardPrimaryTopBadge.d.ts

@@ -0,0 +1,4 @@
+export declare const TopBadgeWrapper: import('styled-components').StyledComponent<(<T extends import('react').ElementType = "div">(props: Omit<import('react').ComponentProps<T>, keyof T> & import('../Container/Container').ContainerProps<T>) => import('react').ReactNode), import('styled-components').DefaultTheme, {}, never>;
+export declare const CardPrimaryTopBadge: import('styled-components').StyledComponent<({ icon, iconDir, text, state, size, type, dismissible, onClose, ellipsisContent, ...props }: import('../Badge/Badge').BadgeProps) => import("react/jsx-runtime").JSX.Element, import('styled-components').DefaultTheme, {
+    $isSelected?: boolean;
+}, never>;

package/dist/components/CardPrimary/withTopBadge.d.ts

@@ -0,0 +1,6 @@
+import { ComponentType, FC } from 'react';
+export interface WithTopBadgeProps {
+    topBadgeText?: string;
+    isSelected?: boolean;
+}
+export declare const withTopBadge: <P extends object>(Component: ComponentType<P>) => FC<P & WithTopBadgeProps>;

package/dist/components/CardPromotion/CardPromotion.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from 'react';
+import { IconName } from '..';
+export interface CardPromotionProps extends HTMLAttributes<HTMLDivElement> {
+    /** The text label displayed in the promotion card */
+    label: string;
+    /** The icon to display */
+    icon: IconName;
+    /** Whether the card can be dismissed/closed */
+    dismissible?: boolean;
+}
+export declare const CardPromotion: ({ label, icon, dismissible, ...props }: CardPromotionProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/CardSecondary/CardSecondary.d.ts

@@ -0,0 +1,31 @@
+import { IconName } from '..';
+import { IconSize } from '../Icon/types';
+import { HTMLAttributes, ReactNode } from 'react';
+export type BadgeState = "default" | "success" | "neutral" | "danger" | "disabled" | "warning" | "info";
+export interface CardSecondaryProps extends HTMLAttributes<HTMLDivElement> {
+    /** The title text displayed in the card header */
+    title: string;
+    /** Icon name to display in the header */
+    icon?: IconName;
+    /** URL to a custom icon image */
+    iconUrl?: string;
+    /** The visual state of the badge */
+    badgeState?: BadgeState;
+    /** Whether to show a shadow on the card */
+    hasShadow?: boolean;
+    /** Whether the card is disabled */
+    disabled?: boolean;
+    /** Text to display in the badge */
+    badgeText?: string;
+    /** The description content of the card */
+    description: ReactNode;
+    /** URL for the info link */
+    infoUrl?: string;
+    /** Text to display in the info link */
+    infoText?: string;
+    /** Icon to display in the info link */
+    infoIcon?: IconName;
+    /** Size of the info link icon */
+    infoIconSize?: IconSize;
+}
+export declare const CardSecondary: ({ title, icon, iconUrl, badgeState, badgeText, hasShadow, disabled, description, infoUrl, infoText, infoIcon, infoIconSize, ...props }: CardSecondaryProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import * as RadixCheckbox from "@radix-ui/react-checkbox";
+export type CheckboxVariants = "default" | "var1" | "var2" | "var3" | "var4" | "var5" | "var6";
+export interface CheckboxProps extends RadixCheckbox.CheckboxProps {
+    /** The label text displayed next to the checkbox */
+    label?: ReactNode;
+    /** The orientation of the label relative to the checkbox */
+    orientation?: "vertical" | "horizontal";
+    /** The color variant of the checkbox */
+    variant?: CheckboxVariants;
+    /** The direction/position of the label - start places label before, end places label after */
+    dir?: "start" | "end";
+}
+export declare const Checkbox: ({ id, label, variant, disabled, orientation, dir, checked, ...delegated }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes } from 'react';
+export type CodeThemeType = "light" | "dark";
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onCopy"> {
+    language?: string;
+    children: string;
+    theme?: CodeThemeType;
+    showLineNumbers?: boolean;
+    showWrapButton?: boolean;
+    wrapLines?: boolean;
+    onCopy?: (value: string) => void | Promise<void>;
+    onCopyError?: (error: string) => void | Promise<void>;
+}
+export declare const CodeBlock: ({ children, language, theme, showLineNumbers, showWrapButton, wrapLines, onCopy, onCopyError, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/CodeBlock/InlineCodeBlock.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export declare const InlineCodeBlock: (props: HTMLAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/CodeBlock/useColorStyle.d.ts

@@ -0,0 +1,115 @@
+import { CodeThemeType } from './CodeBlock';
+declare const useColorStyle: (defaultTheme?: CodeThemeType) => {
+    hljs: {
+        display: string;
+        overflowX: string;
+        padding: string;
+        color: any;
+        background: any;
+        borderRadius: any;
+        font: any;
+    };
+    "hljs-comment": {
+        color: string;
+    };
+    "hljs-keyword": {
+        color: string;
+    };
+    "hljs-selector-tag": {
+        color: string;
+    };
+    "hljs-meta-keyword": {
+        color: string;
+    };
+    "hljs-doctag": {
+        color: string;
+    };
+    "hljs-section": {
+        color: string;
+    };
+    "hljs-selector-class": {
+        color: string;
+    };
+    "hljs-meta": {
+        color: string;
+    };
+    "hljs-selector-pseudo": {
+        color: string;
+    };
+    "hljs-attr": {
+        color: string;
+    };
+    "hljs-attribute": {
+        color: string;
+    };
+    "hljs-name": {
+        color: string;
+    };
+    "hljs-type": {
+        color: string;
+    };
+    "hljs-number": {
+        color: string;
+    };
+    "hljs-selector-id": {
+        color: string;
+    };
+    "hljs-quote": {
+        color: string;
+    };
+    "hljs-template-tag": {
+        color: string;
+    };
+    "hljs-built_in": {
+        color: string;
+    };
+    "hljs-title": {
+        color: string;
+    };
+    "hljs-literal": {
+        color: string;
+    };
+    "hljs-string": {
+        color: string;
+    };
+    "hljs-regexp": {
+        color: string;
+    };
+    "hljs-symbol": {
+        color: string;
+    };
+    "hljs-variable": {
+        color: string;
+    };
+    "hljs-template-variable": {
+        color: string;
+    };
+    "hljs-link": {
+        color: string;
+    };
+    "hljs-selector-attr": {
+        color: string;
+    };
+    "hljs-meta-string": {
+        color: string;
+    };
+    "hljs-bullet": {
+        color: string;
+    };
+    "hljs-code": {
+        color: string;
+    };
+    "hljs-deletion": {
+        color: string;
+    };
+    "hljs-addition": {
+        color: string;
+    };
+    "hljs-emphasis": {
+        fontStyle: string;
+    };
+    "hljs-strong": {
+        fontWeight: string;
+    };
+};
+export default useColorStyle;

package/dist/components/Collapsible/Collapsible.d.ts

@@ -0,0 +1,32 @@
+import { HTMLAttributes } from 'react';
+import { HorizontalDirection, IconName } from '..';
+export interface CollapsibleProps extends HTMLAttributes<HTMLDivElement> {
+    open?: boolean;
+    onOpenChange?: (value: boolean) => void;
+}
+export declare const Collapsible: {
+    ({ open: openProp, onOpenChange: onOpenChangeProp, children, ...props }: CollapsibleProps): import("react/jsx-runtime").JSX.Element;
+    Header: import('react').ForwardRefExoticComponent<CollapsipleHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+    Trigger: {
+        ({ onClick: onClickProp, children, indicatorDir, icon, iconDir, ...props }: CollapsipleTriggerProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ indicatorDir, ...props }: HTMLAttributes<HTMLDivElement> & {
+            indicatorDir?: HorizontalDirection;
+        }): import("react/jsx-runtime").JSX.Element | undefined;
+        displayName: string;
+    };
+};
+interface CollapsipleHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    icon?: IconName;
+    iconDir?: HorizontalDirection;
+    indicatorDir?: HorizontalDirection;
+    wrapInTrigger?: boolean;
+}
+interface CollapsipleTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+    icon?: IconName;
+    iconDir?: HorizontalDirection;
+    indicatorDir?: HorizontalDirection;
+}
+export {};

package/dist/components/Collapsible/IconWrapper.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { HorizontalDirection, IconName } from '..';
+export declare const IconWrapper: ({ icon, iconDir, children, }: {
+    icon?: IconName;
+    iconDir?: HorizontalDirection;
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ConfirmationDialog/ConfirmationDialog.d.ts

@@ -0,0 +1,30 @@
+import { HTMLAttributes, ReactElement, ReactNode } from 'react';
+type DialogPrimaryAction = "primary" | "danger";
+export interface ConfirmationDialogProps extends HTMLAttributes<HTMLDivElement> {
+    /** Custom content to display instead of the message */
+    children?: ReactNode;
+    /** Whether the confirm button is disabled */
+    disabled?: boolean;
+    /** Whether the confirm button shows a loading state */
+    loading?: boolean;
+    /** The message text to display in the dialog */
+    message?: string;
+    /** Callback when the dialog is cancelled */
+    onCancel?: () => void;
+    /** Callback when the confirm button is clicked */
+    onConfirm?: (() => void) | (() => Promise<void>);
+    /** Whether the dialog is open */
+    open?: boolean;
+    /** Label for the primary action button */
+    primaryActionLabel?: string;
+    /** Type of the primary action button */
+    primaryActionType?: DialogPrimaryAction;
+    /** Label for the secondary (cancel) action button */
+    secondaryActionLabel?: string;
+    /** Whether to show the close button */
+    showClose?: boolean;
+    /** The title text displayed in the dialog header */
+    title: string;
+}
+export declare const ConfirmationDialog: ({ children, disabled, loading, message, onCancel, onConfirm, open, primaryActionLabel, primaryActionType, secondaryActionLabel, showClose, title, ...props }: ConfirmationDialogProps) => ReactElement;
+export {};