@officesdk/design 0.1.6 → 0.1.8

package/dist/components/cjs/index.d.ts

@@ -6,6 +6,7 @@ import { ThemedStyledInterface } from 'styled-components';
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Button variant type
+     * - 'icon': Square icon button without padding, size based on iconSize
      */
     variant?: 'solid' | 'outlined' | 'text' | 'icon';
     /**
@@ -30,13 +31,15 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
      */
     fullWidth?: boolean;
     /**
-     * Icon to display before the button text
+     * Icon to display with the button text
+     * - If string: treated as icon src URL, rendered using Icon component
+     * - If ReactNode: rendered directly
      */
-    iconBefore?: React.ReactNode;
+    icon?: string | React.ReactNode;
     /**
-     * Icon to display after the button text
+     * Icon placement relative to text (only for text buttons)
      */
-    iconAfter?: React.ReactNode;
+    iconPlacement?: 'before' | 'after';
     /**
      * Whether the icon button should have a border (only for variant='icon')
      */
@@ -50,12 +53,20 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  * <Button>button</Button>
  *
  * @example
- * // Button with icons
- * <Button iconBefore={<Icon />}>button</Button>
+ * // Button with icon (string URL)
+ * <Button icon="https://example.com/icon.svg" iconPlacement="before">button</Button>
  *
  * @example
- * // Icon-only button
- * <Button variant="icon" iconBordered><Icon /></Button>
+ * // Button with icon (ReactNode)
+ * <Button icon={<CustomIcon />} iconPlacement="after">button</Button>
+ *
+ * @example
+ * // Icon variant button (square, no padding)
+ * <Button variant="icon" icon={<CustomIcon />} iconBordered />
+ *
+ * @example
+ * // Icon variant button without border
+ * <Button variant="icon" icon={<CustomIcon />} />
  */
 declare const Button: React.FC<ButtonProps>;
 
@@ -586,17 +597,29 @@ interface ToastProps {
      */
     variant?: 'success' | 'info' | 'error' | 'warn';
     /**
-     * Toast message content
+     * Toast message content (main text)
      */
     message: string;
     /**
-     * Optional action button text
+     * Optional description text (shows below message in multiline mode)
      */
-    actionText?: string;
+    description?: string;
     /**
-     * Action button click handler
+     * Main action button text (blue color)
      */
-    onAction?: () => void;
+    mainButtonText?: string;
+    /**
+     * Main action button click handler
+     */
+    onMainButtonClick?: () => void;
+    /**
+     * Secondary action button text (gray color)
+     */
+    secondaryButtonText?: string;
+    /**
+     * Secondary action button click handler
+     */
+    onSecondaryButtonClick?: () => void;
     /**
      * Whether to show close button
      */
@@ -632,14 +655,28 @@ interface ToastProps {
  * A notification message component with different variants
  *
  * @example
- * <Toast variant="success" message="Operation successful!" />
+ * // Single line toast
+ * <Toast variant="success" message="信息反馈" />
  *
  * @example
+ * // Toast with buttons
  * <Toast
  *   variant="info"
- *   message="New update available"
- *   actionText="Update"
- *   onAction={() => console.log('Update clicked')}
+ *   message="信息反馈"
+ *   mainButtonText="按钮名称"
+ *   onMainButtonClick={() => console.log('Main clicked')}
+ *   secondaryButtonText="按钮名称"
+ *   onSecondaryButtonClick={() => console.log('Secondary clicked')}
+ *   closable
+ * />
+ *
+ * @example
+ * // Multi-line toast with description
+ * <Toast
+ *   variant="success"
+ *   message="信息反馈"
+ *   description="信息具体说明"
+ *   mainButtonText="按钮名称"
  *   closable
  * />
  */
@@ -654,6 +691,7 @@ interface ToastContextValue {
     warn: (message: string, options?: Partial<ToastProps>) => string;
 }
 interface ToastContainerProps {
+    placement?: 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
     /**
      * Maximum number of toasts to show at once
      */
@@ -688,6 +726,48 @@ declare const ToastContainer: React.FC<ToastContainerProps>;
  */
 declare const useToast: () => ToastContextValue;
 
+type ToastPlacement = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
+interface ToastContainerConfig {
+    placement?: ToastPlacement;
+    maxCount?: number;
+    defaultDuration?: number;
+}
+/**
+ * Global toast object that can be used anywhere
+ * No need to render ToastContainer component manually
+ *
+ * @example
+ * import { toast } from '@officesdk/design';
+ *
+ * // Configure (optional)
+ * toast.configure({
+ *   placement: 'top-right',
+ *   maxCount: 5,
+ *   defaultDuration: 3000,
+ * });
+ *
+ * // Show toasts
+ * toast.success('Operation successful!');
+ * toast.error('Something went wrong');
+ * toast.info('Info message', { duration: 5000 });
+ * toast.warn('Warning message');
+ *
+ * const id = toast.show({ variant: 'info', message: 'Custom toast' });
+ * toast.hide(id);
+ * toast.hideAll();
+ */
+declare const toast: {
+    configure: (config: ToastContainerConfig) => void;
+    show: (props: Omit<ToastProps, "onClose">) => string;
+    hide: (id: string) => void;
+    hideAll: () => void;
+    success: (message: string, options?: Partial<ToastProps>) => string;
+    info: (message: string, options?: Partial<ToastProps>) => string;
+    error: (message: string, options?: Partial<ToastProps>) => string;
+    warn: (message: string, options?: Partial<ToastProps>) => string;
+    destroy: () => void;
+};
+
 interface TabItem {
     /**
      * Unique key for the tab
@@ -1067,4 +1147,4 @@ declare const styled: ThemedStyledInterface<Theme>;
 
 declare const getGlobalTheme: () => Theme;
 
-export { type A11yConfig, type AnimationConfig, Button, type ButtonProps, Checkbox, type CheckboxProps, type I18nConfig, Icon, type IconComponent, type IconProps, IconProvider, type IconProviderProps, type IconRegistry, Input, type InputProps, NumberInput, type NumberInputProps, Radio, type RadioProps, SearchInput, type SearchInputProps, Slider, type SliderProps, SpinButton, type SpinButtonProps, Switch, type SwitchProps, type TabItem, Tabs, type TabsProps, Toast, type ToastConfig, ToastContainer, type ToastContainerProps, type ToastPosition, type ToastProps, ToolbarButton, type ToolbarButtonProps, Tooltip, type TooltipProps, type UIConfig, UIConfigProvider, type UIConfigProviderProps, type ZIndexConfig, createUIConfig, getGlobalTheme, mergeUIConfig, styled, useIconRegistry, useToast, useUIConfig };
+export { type A11yConfig, type AnimationConfig, Button, type ButtonProps, Checkbox, type CheckboxProps, type I18nConfig, Icon, type IconComponent, type IconProps, IconProvider, type IconProviderProps, type IconRegistry, Input, type InputProps, NumberInput, type NumberInputProps, Radio, type RadioProps, SearchInput, type SearchInputProps, Slider, type SliderProps, SpinButton, type SpinButtonProps, Switch, type SwitchProps, type TabItem, Tabs, type TabsProps, Toast, type ToastConfig, ToastContainer, type ToastContainerConfig, type ToastContainerProps, type ToastPosition, type ToastProps, ToolbarButton, type ToolbarButtonProps, Tooltip, type TooltipProps, type UIConfig, UIConfigProvider, type UIConfigProviderProps, type ZIndexConfig, createUIConfig, getGlobalTheme, mergeUIConfig, styled, toast, useIconRegistry, useToast, useUIConfig };