@digo-labs/ui 0.1.16 → 0.1.18

package/dist/blocks/chat-thread.d.ts

@@ -1,15 +1,18 @@
-import { TextMessage } from '@digo-labs/common';
+import { FilePayload, TextMessage } from '@digo-labs/common';
 import { ComponentProps } from 'react';
 import { ComponentStylesProps } from '../utils/styles';
 export interface ChatThreadMessage {
+    id?: string;
     role: 'user' | 'assistant' | 'error';
     content: TextMessage['content'];
+    attachments?: FilePayload[];
     stopReason?: string;
 }
 type Properties = RootProperties & ComponentStylesProps<'chatThread'>;
 export declare function ChatThread(properties: Properties): import("react").JSX.Element;
 interface RootProperties extends ComponentProps<'div'> {
     messages: ChatThreadMessage[];
-    streamingText?: string;
+    isStreaming?: boolean;
+    autoScroll?: boolean;
 }
 export {};

package/dist/blocks/drawing-toolbar.d.ts

@@ -0,0 +1,35 @@
+import { ClearToolbarItem, HistoryToolbarItems, Icon, RedoToolbarItem, Toolbar, ToolbarToggle, UndoToolbarItem, ZoomToolbarItem } from '..';
+import { ComponentProps } from 'react';
+import { DrawingTool } from '../providers/drawing-provider';
+interface Properties extends ComponentProps<typeof Toolbar> {
+    minSize?: number;
+    maxSize?: number;
+    palette?: string[];
+    withCustomColor?: boolean;
+}
+export declare function DrawingToolbar(properties: Properties): import("react").JSX.Element;
+interface DrawingToolbarToolProperties extends ComponentProps<typeof ToolbarToggle> {
+    tool: DrawingTool;
+    icon?: ComponentProps<typeof Icon>['icon'];
+}
+export declare function DrawingToolbarTool(properties: DrawingToolbarToolProperties): import("react").JSX.Element;
+interface DrawingToolbarPenProperties {
+    minSize?: number;
+    maxSize?: number;
+    palette?: string[];
+    withCustomColor?: boolean;
+    className?: string;
+}
+export declare function DrawingToolbarPen(properties: DrawingToolbarPenProperties): import("react").JSX.Element;
+interface DrawingToolbarEraserProperties {
+    minSize?: number;
+    maxSize?: number;
+    className?: string;
+}
+export declare function DrawingToolbarEraser(properties: DrawingToolbarEraserProperties): import("react").JSX.Element;
+export declare function DrawingToolbarHistory(properties: ComponentProps<typeof HistoryToolbarItems>): import("react").JSX.Element;
+export declare function DrawingToolbarUndo(properties: ComponentProps<typeof UndoToolbarItem>): import("react").JSX.Element;
+export declare function DrawingToolbarRedo(properties: ComponentProps<typeof RedoToolbarItem>): import("react").JSX.Element;
+export declare function DrawingToolbarClear(properties: ComponentProps<typeof ClearToolbarItem>): import("react").JSX.Element;
+export declare function DrawingToolbarZoom(properties: ComponentProps<typeof ZoomToolbarItem>): import("react").JSX.Element;
+export {};

package/dist/blocks/toolbar-items.d.ts

@@ -0,0 +1,78 @@
+import { ToolbarButton, ToolbarGroup } from '..';
+import { ComponentProps } from 'react';
+import { DrawingEraserMode } from '../providers/drawing-provider';
+import { ComponentStylesProps } from '../utils/styles';
+export declare const DEFAULT_TOOLBAR_MIN_SIZE = 2;
+export declare const DEFAULT_TOOLBAR_MAX_SIZE = 24;
+export declare const DEFAULT_TOOLBAR_COLORS: string[];
+type ToolbarSizeIconProperties = ToolbarSizeIconRootProperties & ComponentStylesProps<'toolbarItems'>;
+export declare function ToolbarSizeIcon(properties: ToolbarSizeIconProperties): import("react").JSX.Element;
+interface ToolbarSizeIconRootProperties {
+    size?: number;
+    min?: number;
+    max?: number;
+    className?: string;
+}
+type ToolbarSizesProperties = ToolbarSizesRootProperties & ComponentStylesProps<'toolbarItems'>;
+export declare function ToolbarSizes(properties: ToolbarSizesProperties): import("react").JSX.Element;
+interface ToolbarSizesRootProperties {
+    value?: number;
+    onValueChange?: (size: number) => void;
+    min?: number;
+    max?: number;
+    disabled?: boolean;
+    className?: string;
+}
+type ToolbarColorsProperties = ToolbarColorsRootProperties & ComponentStylesProps<'toolbarItems'>;
+export declare function ToolbarColors(properties: ToolbarColorsProperties): import("react").JSX.Element;
+interface ToolbarColorsRootProperties {
+    colors?: string[];
+    value?: string;
+    onValueChange?: (color: string) => void;
+    withCustom?: boolean;
+    className?: string;
+}
+type PenToolbarItemProperties = PenToolbarItemRootProperties & ComponentStylesProps<'toolbarItems'>;
+export declare function PenToolbarItem(properties: PenToolbarItemProperties): import("react").JSX.Element;
+interface PenToolbarItemRootProperties {
+    pressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    color?: string;
+    onColorChange?: (color: string) => void;
+    size?: number;
+    onSizeChange?: (size: number) => void;
+    minSize?: number;
+    maxSize?: number;
+    palette?: string[];
+    withCustomColor?: boolean;
+    classNames?: ComponentStylesProps<'toolbarItems'>['classNames'];
+    className?: string;
+}
+type EraserToolbarItemProperties = EraserToolbarItemRootProperties & ComponentStylesProps<'toolbarItems'>;
+export declare function EraserToolbarItem(properties: EraserToolbarItemProperties): import("react").JSX.Element;
+interface EraserToolbarItemRootProperties {
+    pressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    size?: number;
+    onSizeChange?: (size: number) => void;
+    minSize?: number;
+    maxSize?: number;
+    mode?: DrawingEraserMode;
+    onModeChange?: (mode: DrawingEraserMode) => void;
+    classNames?: ComponentStylesProps<'toolbarItems'>['classNames'];
+    className?: string;
+}
+type ZoomToolbarItemProperties = ZoomToolbarItemRootProperties & ComponentStylesProps<'toolbarItems'>;
+export declare function ZoomToolbarItem(properties: ZoomToolbarItemProperties): import("react").JSX.Element;
+interface ZoomToolbarItemRootProperties {
+    zoom?: number;
+    onZoomIn?: () => void;
+    onZoomOut?: () => void;
+    onFit?: () => void;
+    className?: string;
+}
+export declare function UndoToolbarItem(properties: ComponentProps<typeof ToolbarButton>): import("react").JSX.Element;
+export declare function RedoToolbarItem(properties: ComponentProps<typeof ToolbarButton>): import("react").JSX.Element;
+export declare function ClearToolbarItem(properties: ComponentProps<typeof ToolbarButton>): import("react").JSX.Element;
+export declare function HistoryToolbarItems(properties: ComponentProps<typeof ToolbarGroup>): import("react").JSX.Element;
+export {};

package/dist/components/attachment.d.ts

@@ -0,0 +1,11 @@
+import { FilePayload } from '@digo-labs/common';
+import { ComponentProps } from 'react';
+import { ComponentStylesProps } from '../utils/styles';
+type Properties = RootProperties & ComponentStylesProps<'attachment'>;
+export declare function Attachment(properties: Properties): import("react").JSX.Element;
+interface RootProperties extends ComponentProps<'div'> {
+    file: FilePayload;
+    preview?: boolean;
+    onRemove?: () => void;
+}
+export {};

package/dist/components/bubble.d.ts

@@ -0,0 +1,18 @@
+import { Align, Side, Subset } from '@digo-labs/common';
+import { ComponentProps } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { ComponentStylesProps } from '../utils/styles';
+type Properties = RootProperties & ComponentStylesProps<'bubble'>;
+export declare function Bubble(properties: Properties): import("react").JSX.Element;
+interface RootProperties extends ComponentProps<'div'> {
+    align?: Subset<Align, 'start' | 'end'>;
+}
+export declare function BubbleContent(properties: useRender.ComponentProps<'div'>): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+interface ReactionsProperties extends ComponentProps<'div'> {
+    side?: Subset<Side, 'top' | 'bottom'>;
+    align?: Subset<Align, 'start' | 'end'>;
+}
+export declare function BubbleReactions(properties: ReactionsProperties): import("react").JSX.Element;
+type GroupProperties = ComponentProps<'div'> & Pick<ComponentStylesProps<'bubble'>, 'classNames'>;
+export declare function BubbleGroup(properties: GroupProperties): import("react").JSX.Element;
+export {};

package/dist/components/carousel.d.ts

@@ -0,0 +1,39 @@
+import { Orientation } from '@digo-labs/common';
+import { ComponentProps } from 'react';
+import { Transition } from 'motion/react';
+import { CarouselCurve } from '../utils/carousel-helpers';
+import { ComponentStylesProps } from '../utils/styles';
+export type { CarouselCurve } from '../utils/carousel-helpers';
+export declare function carouselCurve(distance: number): number;
+interface ContextProperties {
+    value: string | undefined;
+    count: number;
+    activeIndex: number;
+    expandedSize: number;
+    orientation: Orientation;
+    goTo: (index: number) => void;
+    step: (direction: number) => void;
+}
+export declare function useCarousel(): ContextProperties;
+interface ItemContextProperties {
+    value: string;
+    active: boolean;
+}
+export declare function useCarouselItem(): ItemContextProperties;
+type Properties = RootProperties & ComponentStylesProps<'carousel'>;
+export declare function Carousel(properties: Properties): import("react").JSX.Element;
+interface RootProperties extends ComponentProps<'div'> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    items?: number;
+    expanded?: number;
+    gap?: number;
+    curve?: CarouselCurve;
+    transition?: Transition;
+    orientation?: Orientation;
+}
+interface ItemProperties extends ComponentProps<'div'> {
+    value: string;
+}
+export declare function CarouselItem(properties: ItemProperties): import("react").JSX.Element;

package/dist/components/drawing-canvas.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+import { ComponentStylesProps } from '../utils/styles';
+export type DrawingCanvasInputs = 'auto' | 'all' | 'pen';
+type Properties = RootProperties & ComponentStylesProps<'drawingCanvas'>;
+export declare function DrawingCanvas(properties: Properties): import("react").JSX.Element;
+interface RootProperties extends ComponentProps<'div'> {
+    inputs?: DrawingCanvasInputs;
+}
+export {};

package/dist/components/marker.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { ComponentStylesProps } from '../utils/styles';
+type Properties = RootProperties & ComponentStylesProps<'marker'>;
+export declare function Marker(properties: Properties): import("react").JSX.Element;
+type RootProperties = useRender.ComponentProps<'div'>;
+export declare function MarkerIcon(properties: ComponentProps<'span'>): import("react").JSX.Element;
+export declare function MarkerContent(properties: ComponentProps<'span'>): import("react").JSX.Element;
+export {};

package/dist/components/message-scroller.d.ts

@@ -0,0 +1,19 @@
+import { ComponentProps } from 'react';
+import { MessageScroller as MessageScrollerPrimitive } from '@shadcn/react/message-scroller';
+import { ComponentStylesProps } from '../utils/styles';
+export declare const MessageScrollerProvider: ({ autoScroll, children, defaultScrollPosition, scrollEdgeThreshold, scrollPreviousItemPeek, scrollMargin, }: {
+    children?: React.ReactNode;
+    autoScroll?: boolean;
+    defaultScrollPosition?: import('@shadcn/react/message-scroller').MessageScrollerDefaultScrollPosition;
+    scrollEdgeThreshold?: number;
+    scrollPreviousItemPeek?: number;
+    scrollMargin?: number;
+}) => import("react").JSX.Element;
+type Properties = RootProperties & ComponentStylesProps<'messageScroller'>;
+export declare function MessageScroller(properties: Properties): import("react").JSX.Element;
+type RootProperties = ComponentProps<typeof MessageScrollerPrimitive.Root>;
+export declare function MessageScrollerViewport(properties: ComponentProps<typeof MessageScrollerPrimitive.Viewport>): import("react").JSX.Element;
+export declare function MessageScrollerContent(properties: ComponentProps<typeof MessageScrollerPrimitive.Content>): import("react").JSX.Element;
+export declare function MessageScrollerItem(properties: ComponentProps<typeof MessageScrollerPrimitive.Item>): import("react").JSX.Element;
+export declare function MessageScrollerButton(properties: ComponentProps<typeof MessageScrollerPrimitive.Button>): import("react").JSX.Element;
+export { useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from '@shadcn/react/message-scroller';

package/dist/components/message.d.ts

@@ -0,0 +1,15 @@
+import { Align, Subset } from '@digo-labs/common';
+import { ComponentProps } from 'react';
+import { ComponentStylesProps } from '../utils/styles';
+type Properties = RootProperties & ComponentStylesProps<'message'>;
+export declare function Message(properties: Properties): import("react").JSX.Element;
+interface RootProperties extends ComponentProps<'div'> {
+    align?: Subset<Align, 'start' | 'end'>;
+}
+export declare function MessageAvatar(properties: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function MessageContent(properties: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function MessageHeader(properties: ComponentProps<'div'>): import("react").JSX.Element;
+export declare function MessageFooter(properties: ComponentProps<'div'>): import("react").JSX.Element;
+type GroupProperties = ComponentProps<'div'> & ComponentStylesProps<'message'>;
+export declare function MessageGroup(properties: GroupProperties): import("react").JSX.Element;
+export {};

package/dist/components/toolbar.d.ts

@@ -0,0 +1,41 @@
+import { Icon, Slider, Tabs, Toggle } from '..';
+import { ComponentProps } from 'react';
+import { PopoverPopup, PopoverTrigger } from './popover';
+import { Toolbar as ToolbarPrimitive } from '@base-ui/react/toolbar';
+import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';
+import { ComponentStylesProps } from '../utils/styles';
+type Properties = RootProperties & ComponentStylesProps<'toolbar'>;
+export declare function Toolbar(properties: Properties): import("react").JSX.Element;
+type RootProperties = ToolbarPrimitive.Root.Props;
+export declare function ToolbarGroup(properties: ToolbarPrimitive.Group.Props): import("react").JSX.Element;
+interface ToolbarButtonProperties extends ToolbarPrimitive.Button.Props {
+    tooltip?: string;
+}
+export declare function ToolbarButton(properties: ToolbarButtonProperties): import("react").JSX.Element;
+interface ToolbarToggleProperties extends ComponentProps<typeof Toggle> {
+    tooltip?: string;
+}
+export declare function ToolbarToggle(properties: ToolbarToggleProperties): import("react").JSX.Element;
+export declare function ToolbarToggleGroup(properties: ToggleGroupPrimitive.Props): import("react").JSX.Element;
+export interface ToolbarTab {
+    value: string;
+    icon: ComponentProps<typeof Icon>['icon'];
+    tooltip?: string;
+}
+interface ToolbarTabsProperties extends Omit<ComponentProps<typeof Tabs>, 'children'> {
+    tabs: ToolbarTab[];
+}
+export declare function ToolbarTabs(properties: ToolbarTabsProperties): import("react").JSX.Element;
+export declare function ToolbarArtToggle(properties: ToolbarToggleProperties): import("react").JSX.Element;
+export declare function ToolbarIcon(properties: ComponentProps<typeof Icon>): import("react").JSX.Element;
+export declare function ToolbarSlider(properties: ComponentProps<typeof Slider>): import("react").JSX.Element;
+export declare function ToolbarSeparator(properties: ToolbarPrimitive.Separator.Props): import("react").JSX.Element;
+export declare const ToolbarMenu: typeof import('@base-ui/react').PopoverRoot;
+export declare function ToolbarMenuTrigger(properties: ComponentProps<typeof PopoverTrigger>): import("react").JSX.Element;
+interface ToolbarMenuPopupProperties extends ComponentProps<typeof Toolbar> {
+    side?: ComponentProps<typeof PopoverPopup>['side'];
+    align?: ComponentProps<typeof PopoverPopup>['align'];
+    sideOffset?: ComponentProps<typeof PopoverPopup>['sideOffset'];
+}
+export declare function ToolbarMenuPopup(properties: ToolbarMenuPopupProperties): import("react").JSX.Element;
+export {};

package/dist/effects/brick-grid.d.ts

@@ -0,0 +1,47 @@
+import { AwsColor } from '@digo-labs/common';
+import { CSSProperties, ReactNode } from 'react';
+import { Transition } from 'motion/react';
+import { BrickOrigin } from './brick';
+import { ComponentStylesProps } from '../utils/styles';
+export type BrickGridMode = 'noise' | 'cluster' | 'image' | 'path' | 'loading';
+export type BrickGridLines = 'lines' | 'none';
+export type BrickGridDistribution = 'edges' | 'fill';
+export type BrickGridWave = 'clockwise' | 'counterclockwise' | 'left-to-right' | 'right-to-left' | 'top-to-bottom' | 'bottom-to-top';
+type Properties = RootProperties & ComponentStylesProps<'brickGrid'>;
+export declare function BrickGrid(properties: Properties): import("react").JSX.Element;
+interface RootProperties {
+    mode?: BrickGridMode;
+    cellSize?: number;
+    gap?: number;
+    colors?: AwsColor[];
+    density?: number;
+    tempo?: number;
+    seed?: number;
+    interval?: number;
+    maxSize?: number;
+    src?: string;
+    imageOpacity?: number;
+    threshold?: number;
+    path?: string;
+    filled?: boolean;
+    loadingSize?: number;
+    wave?: BrickGridWave;
+    distribution?: BrickGridDistribution;
+    grid?: BrickGridLines;
+    transition?: Transition;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+interface ItemProperties {
+    colSpan?: number;
+    rowSpan?: number;
+    colStart?: number;
+    rowStart?: number;
+    origin?: BrickOrigin;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+export declare function BrickGridItem(properties: ItemProperties): import("react").JSX.Element;
+export {};

package/dist/effects/brick.d.ts

@@ -0,0 +1,28 @@
+import { AwsColor, AwsGlyph } from '@digo-labs/common';
+import { CSSProperties } from 'react';
+import { Transition } from 'motion/react';
+import { ComponentStylesProps } from '../utils/styles';
+export type BrickAnimation = 'none' | 'pulse' | 'rotate';
+export type BrickOrigin = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export declare const brickOriginClasses: {
+    'top-left': string;
+    'top-right': string;
+    'bottom-left': string;
+    'bottom-right': string;
+};
+type Properties = RootProperties & ComponentStylesProps<'brick'>;
+export declare function Brick(properties: Properties): import("react").JSX.Element;
+interface RootProperties {
+    glyph: AwsGlyph;
+    size?: number;
+    color?: AwsColor;
+    glyphColor?: AwsColor;
+    origin?: BrickOrigin;
+    animation?: BrickAnimation;
+    interval?: number;
+    delay?: number;
+    transition?: Transition;
+    className?: string;
+    style?: CSSProperties;
+}
+export {};

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export * from './blocks/card';
 export * from './blocks/chat-thread';
 export * from './blocks/command-button';
 export * from './blocks/copy-paste-button';
+export * from './blocks/drawing-toolbar';
 export * from './blocks/dropzone';
 export * from './blocks/font-picker';
 export * from './blocks/gate';
@@ -38,17 +39,21 @@ export * from './blocks/prompt-input';
 export * from './blocks/google-signin-button';
 export * from './blocks/switch-theme';
 export * from './blocks/toggle-theme';
+export * from './blocks/toolbar-items';
 export * from './blocks/transparent-background';
 export * from './blocks/user-avatar';
 export * from './blocks/user-info';
 export * from './blocks/user-menu';
 export * from './components/accordion';
 export * from './components/alert';
+export * from './components/attachment';
 export * from './components/autocomplete';
 export * from './components/avatar';
 export * from './components/badge';
 export * from './components/breadcrumb';
+export * from './components/bubble';
 export * from './components/button';
+export * from './components/carousel';
 export * from './components/chart';
 export * from './components/checkbox';
 export * from './components/circular-progress';
@@ -65,6 +70,7 @@ export * from './components/combobox';
 export * from './components/command';
 export * from './effects/counter';
 export * from './components/drawer';
+export * from './components/drawing-canvas';
 export * from './components/empty';
 export * from './components/field';
 export * from './components/field-set';
@@ -78,6 +84,9 @@ export * from './components/label';
 export * from './components/masonry';
 export * from './components/kbd';
 export * from './components/menu';
+export * from './components/marker';
+export * from './components/message';
+export * from './components/message-scroller';
 export * from './components/navigation-menu';
 export * from './components/number-field';
 export * from './components/pagination';
@@ -102,6 +111,7 @@ export * from './components/loader';
 export * from './components/tabs';
 export * from './components/toggle';
 export * from './components/toggle-group';
+export * from './components/toolbar';
 export * from './components/table-of-contents';
 export * from './components/text-area';
 export * from './components/tint-image';
@@ -111,6 +121,8 @@ export * from './cursors/cursor-container';
 export * from './cursors/cursor-clipping';
 export * from './cursors/cursor-bracket';
 export * from './effects/border-glow';
+export * from './effects/brick';
+export * from './effects/brick-grid';
 export * from './effects/crt-screen';
 export * from './effects/dark-veil';
 export * from './effects/dissolve-overlay';
@@ -151,6 +163,7 @@ export * from './pages/loading-page';
 export * from './pages/login-page';
 export * from './providers/command-provider';
 export * from './providers/design-system-provider';
+export * from './providers/drawing-provider';
 export * from './providers/portal-provider';
 export * as baseStyles from './styles';
 export * from './presets';