@app-studio/web 0.8.77 → 0.8.80

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ViewProps } from 'app-studio';
 import { AccordionContextType } from './Accordion.type';
 import { AccordionTriggerProps, AccordionContentProps, AccordionItemProps } from './Accordion.props';
 export declare const AccordionProvider: React.FC<{
@@ -28,4 +29,4 @@ export declare const AccordionView: React.FC<{
     baseId: string;
     type: 'single' | 'multiple';
     collapsible: boolean;
-}>;
+} & ViewProps>;

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

@@ -1,9 +1,15 @@
 import React from 'react';
+import { ViewProps } from 'app-studio';
 import { AlertStyles, Variant } from './Alert.type';
-export interface AlertProps {
+export interface AlertProps extends ViewProps {
     icon?: React.ReactNode;
     title: string;
     description: string | React.ReactNode;
     variant?: Variant;
     views?: AlertStyles;
+    /**
+     * Optional theme mode override ('light' or 'dark')
+     * If not provided, the component will use the theme mode from context
+     */
+    themeMode?: 'light' | 'dark';
 }

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

@@ -11,7 +11,15 @@
 import { ViewProps } from 'app-studio';
 import { Variant } from './Alert.type';
 /**
- * Theme styles for different alert variants
+ * Get theme styles for different alert variants based on theme mode
+ */
+export declare const getThemes: (themeMode: string) => Record<Variant, {
+    container: ViewProps;
+    content: ViewProps;
+    icon: ViewProps;
+}>;
+/**
+ * Default themes for backward compatibility
  */
 export declare const Themes: Record<Variant, {
     container: ViewProps;

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

@@ -8,4 +8,4 @@ import { AlertProps } from './Alert.props';
 /**
  * Alert component that displays important messages to users
  */
-export declare const AlertView: ({ icon, title, views, description, variant, }: AlertProps) => React.JSX.Element;
+export declare const AlertView: ({ icon, title, views, description, variant, themeMode: elementMode, ...props }: AlertProps) => React.JSX.Element;

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { AlertProps } from './Alert/Alert.props';
-export declare const Alert: ({ icon, title, views, description, variant, }: AlertProps) => React.JSX.Element;
+export declare const Alert: (props: AlertProps) => React.JSX.Element;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DarkModeDemo: () => React.JSX.Element;

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

@@ -26,6 +26,10 @@ export declare const PositionStyles: {
     [key: string]: React.CSSProperties;
 };
 /**
- * Badge variants with consistent styling
+ * Get badge variants with consistent styling based on theme mode
+ */
+export declare const getBadgeVariants: (themeMode: string) => Record<Variant, ViewProps>;
+/**
+ * Default badge variants for backward compatibility
  */
 export declare const BadgeVariants: Record<Variant, ViewProps>;

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { BadgeProps } from './Badge/Badge.props';
-export declare const Badge: ({ content, shape, position, variant, size, views, }: BadgeProps) => React.JSX.Element;
+export declare const Badge: (props: BadgeProps) => React.JSX.Element;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DarkModeDemo: () => React.JSX.Element;

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

@@ -6,3 +6,4 @@ export * from './shape';
 export * from './size';
 export * from './styles';
 export * from './variant';
+export * from './darkMode';

package/dist/components/Card/Card/Card.style.d.ts

@@ -19,11 +19,15 @@ export declare const CardSizes: Record<Size, ViewProps>;
  */
 export declare const CardShapes: Record<Shape, number | string>;
 /**
- * Card variants with consistent styling
+ * Get card variants with consistent styling based on theme mode
+ */
+export declare const getCardVariants: (themeMode: string) => Record<Variant, ViewProps>;
+/**
+ * Default card variants (for backward compatibility)
  */
 export declare const CardVariants: Record<Variant, ViewProps>;
 /**
  * Function to get default styles for Card components
- * @param theme - Theme object (not used directly but kept for compatibility)
+ * @param theme - Theme object from useTheme hook
  */
-export declare const getDefaultCardStyles: (_theme: any) => CardStyles;
+export declare const getDefaultCardStyles: (theme: any) => CardStyles;

package/dist/components/Card/examples/darkModeExample.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DarkModeExample: () => React.JSX.Element;

package/dist/components/Command/Command/Command.style.d.ts

@@ -1,6 +1,7 @@
 import { ViewProps } from 'app-studio';
 import { CommandSize, CommandVariant } from './Command.type';
 export declare const CommandSizes: Record<CommandSize, ViewProps>;
+export declare const getCommand: (themeMode: string) => Record<CommandVariant, ViewProps>;
 export declare const CommandVariants: Record<CommandVariant, ViewProps>;
 export declare const CommandInputStyles: ViewProps;
 export declare const CommandListStyles: ViewProps;

package/dist/components/ContextMenu/ContextMenu/ContextMenu.view.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ViewProps } from 'app-studio';
 import { ContextMenuContextType, Size, Variant, ContextMenuItem as ContextMenuItemType } from './ContextMenu.type';
 import { ContextMenuTriggerProps, ContextMenuContentProps, ContextMenuItemProps, ContextMenuDividerProps, ContextMenuSeparatorProps } from './ContextMenu.props';
 export declare const ContextMenuProvider: React.FC<{
@@ -18,4 +19,4 @@ export declare const ContextMenuView: React.FC<{
     variant?: Variant;
     disableNativeContextMenu?: boolean;
     views?: any;
-}>;
+} & ViewProps>;

package/dist/components/DragAndDrop/DragAndDrop/DragAndDrop.props.d.ts

@@ -7,7 +7,7 @@ export interface DragAndDropProps {
     containerProps?: ViewProps;
     itemProps?: ViewProps;
 }
-export interface DragAndDropViewProps extends DragAndDropProps {
+export interface DragAndDropViewProps extends DragAndDropProps, ViewProps {
     draggedIndex: number | null;
     itemRefs: React.MutableRefObject<(HTMLDivElement | null)[]>;
     renderItem?: (item: any, index: number) => React.ReactNode;

package/dist/components/DropdownMenu/DropdownMenu/DropdownMenu.view.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ViewProps } from 'app-studio';
 import { DropdownMenuContextType, DropdownMenuItem as DropdownMenuItemType, Position, Alignment } from './DropdownMenu.type';
 import { DropdownMenuTriggerProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuDividerProps } from './DropdownMenu.props';
 export declare const DropdownMenuProvider: React.FC<{
@@ -16,4 +17,4 @@ export declare const DropdownMenuView: React.FC<{
     side?: Position;
     align?: Alignment;
     views?: any;
-}>;
+} & ViewProps>;

package/dist/components/Form/Label/Label/Label.type.d.ts

@@ -1,3 +1,3 @@
 export declare type TextWeights = 'hairline' | 'thin' | 'light' | 'normal' | 'medium' | 'semiBold' | 'bold' | 'extraBold' | 'black';
-export declare type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+export declare type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare type Headings = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

package/dist/components/Form/TextArea/TextArea/TextArea.type.d.ts

@@ -3,9 +3,11 @@ export declare type Variant = 'outline' | 'default' | 'none';
 export declare type Shape = 'default' | 'sharp' | 'rounded';
 export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare type TextAreaStyles = {
-    box?: ViewProps;
-    text?: ViewProps;
+    warper?: ViewProps;
+    container?: ViewProps;
     label?: ViewProps;
     helperText?: ViewProps;
     field?: ViewProps;
+    content?: ViewProps;
+    textarea?: ViewProps;
 };

package/dist/components/Input/Input.type.d.ts

@@ -3,10 +3,11 @@ export declare type Variant = 'outline' | 'default' | 'none';
 export declare type Shape = 'default' | 'sharp' | 'rounded' | 'pillShaped';
 export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare type TextFieldStyles = {
-    box?: ViewProps;
     text?: ViewProps;
     label?: ViewProps;
+    error?: ViewProps;
     helperText?: ViewProps;
+    container?: ViewProps;
 };
 export declare type Wrap = 'wrap' | 'nowrap' | 'wrap-reverse';
 export declare type Justify = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';

package/dist/components/Menubar/Menubar/Menubar.view.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ViewProps } from 'app-studio';
 import { MenubarContextType, MenubarItem as MenubarItemType, Orientation, Size, Variant } from './Menubar.type';
 import { MenubarRootProps, MenubarMenuProps, MenubarTriggerProps, MenubarContentProps, MenubarItemProps, MenubarSeparatorProps } from './Menubar.props';
 export declare const useMenubarContext: () => MenubarContextType;
@@ -18,4 +19,4 @@ export declare const MenubarView: React.FC<{
     size: Size;
     variant: Variant;
     views?: any;
-}>;
+} & ViewProps>;

package/dist/components/NavigationMenu/NavigationMenu/NavigationMenu.view.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ViewProps } from 'app-studio';
 import { NavigationMenuContextType, NavigationItem, Orientation, Size, Variant } from './NavigationMenu.type';
 import { NavigationMenuItemProps, NavigationMenuListProps, NavigationMenuTriggerProps, NavigationMenuContentProps } from './NavigationMenu.props';
 export declare const NavigationMenuProvider: React.FC<{
@@ -22,4 +23,4 @@ export declare const NavigationMenuView: React.FC<{
     size: Size;
     variant: Variant;
     views?: any;
-}>;
+} & ViewProps>;

package/dist/components/OTPInput/OTPInput/OTPInput.type.d.ts

@@ -7,9 +7,8 @@ export declare type OTPInputType = 'text' | 'password' | 'number';
  * Styles for different parts of the OTP input component
  */
 export declare type OTPInputStyles = {
-    container?: ViewProps;
     input?: ViewProps;
-    box?: ViewProps;
+    container?: ViewProps;
     text?: ViewProps;
     label?: ViewProps;
     helperText?: ViewProps;

package/dist/components/Resizable/Resizable/Resizable.style.d.ts

@@ -2,5 +2,6 @@ import { ViewProps } from 'app-studio';
 import { Orientation, Size, Variant } from './Resizable.type';
 export declare const ResizableOrientations: Record<Orientation, ViewProps>;
 export declare const getHandleSizeStyles: (size: Size, orientation: Orientation) => ViewProps;
+export declare const getHandle: (themeMode: string) => Record<Variant, ViewProps>;
 export declare const HandleVariants: Record<Variant, ViewProps>;
 export declare const HandleIconStyles: Record<Orientation, ViewProps>;

package/dist/components/Separator/Separator/Separator.style.d.ts

@@ -16,6 +16,7 @@ export declare const SeparatorOrientations: Record<Orientation, ViewProps>;
 /**
  * Variant configurations for the Separator component
  */
+export declare const getSeparator: (themeMode: string) => Record<Variant, string>;
 export declare const SeparatorVariants: Record<Variant, string>;
 /**
  * Thickness configurations for the Separator component

package/dist/components/Sidebar/Sidebar/Sidebar.style.d.ts

@@ -21,6 +21,7 @@ export declare const SidebarSizes: Record<Size, {
 /**
  * Variant styles for the Sidebar component
  */
+export declare const getSidebar: (themeMode: string) => Record<Variant, ViewProps>;
 export declare const SidebarVariants: Record<Variant, ViewProps>;
 /**
  * Position styles for the Sidebar component

package/dist/components/Slider/Slider/Slider.style.d.ts

@@ -3,6 +3,7 @@ import { Orientation, Shape, Size, Variant } from './Slider.type';
 export declare const SliderSizes: Record<Size, ViewProps>;
 export declare const ThumbSizes: Record<Size, ViewProps>;
 export declare const SliderShapes: Record<Shape, number | string>;
+export declare const getSlider: (themeMode: string) => Record<Variant, ViewProps>;
 export declare const SliderVariants: Record<Variant, ViewProps>;
 export declare const EnhancedSliderSizes: Record<Size, {
     trackCrossAxisSize: number;

package/dist/components/Table/Table/Table.props.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Column, FooterCell, TableViewStyles } from './Table.type';
+import { ViewProps } from 'app-studio';
 export interface TableProps {
     data: any[];
     columns: Column[];
     footer?: FooterCell[];
     caption?: React.ReactNode;
     views?: TableViewStyles;
-    onClick?: Function;
 }
-export interface TableViewProps extends TableProps {
+export interface TableViewProps extends TableProps, Omit<ViewProps, 'size'> {
 }
 export interface TableLayoutProps {
     Head?: React.FC<any>;

package/dist/components/Toast/Toast/Toast.props.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
+import { ViewProps } from 'app-studio';
 import { ToastItem, ToastOptions, ToastPosition, ToastStyles, ToastVariant, ThemesType } from './Toast.type';
-export interface ToastProps {
+export interface ToastProps extends Omit<ViewProps, 'theme'> {
     /**
      * Unique identifier for the toast
      */

package/dist/components/Tooltip/Tooltip/Tooltip.style.d.ts

@@ -1,6 +1,7 @@
 import { ViewProps } from 'app-studio';
 import { Size, Variant, Position, Alignment } from './Tooltip.type';
 export declare const TooltipSizes: Record<Size, ViewProps>;
+export declare const getTooltip: (themeMode: string) => Record<Variant, ViewProps>;
 export declare const TooltipVariants: Record<Variant, ViewProps>;
 export declare const getTooltipPositionStyles: (position: Position, align: Alignment) => ViewProps;
 export declare const getArrowStyles: (position: Position) => ViewProps;

package/dist/components/Tooltip/Tooltip/Tooltip.view.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ViewProps } from 'app-studio';
 import { TooltipContextType, Position, Alignment } from './Tooltip.type';
 import { TooltipTriggerProps, TooltipContentProps } from './Tooltip.props';
 export declare const useTooltipContext: () => TooltipContextType;
@@ -17,4 +18,4 @@ export declare const TooltipView: React.FC<{
     variant?: string;
     showArrow?: boolean;
     views?: any;
-}>;
+} & Omit<ViewProps, 'position'>>;