@webdevarif/dashui 1.2.3 → 1.2.4

package/dist/index.d.mts

@@ -668,6 +668,87 @@ declare function TiptapEditor({ value, onChange, placeholder, disabled, classNam
     className?: string;
 }): react_jsx_runtime.JSX.Element | null;
 
+/**
+ * ThemeBuilder — Visual theme editor shell
+ *
+ * Consumer provides:
+ * - initialTheme: Current theme data
+ * - onSave: (themeData) => void
+ * - onPreview: (html) => void
+ *
+ * Includes:
+ * - Icon strip sidebar (AI, Variables, Styles)
+ * - Variables panel (Color Schema + Typography + Page Layout)
+ * - Preview iframe
+ *
+ * This is the shell. Consumer handles:
+ * - API persistence
+ * - Preview rendering (Tailwind + Alpine)
+ * - Theme data structure
+ */
+interface Theme {
+    id: string;
+    name: string;
+    variables?: Record<string, any>;
+    colorSchemas?: Array<any>;
+    typography?: Record<string, any>;
+    [key: string]: any;
+}
+interface ThemeBuilderProps {
+    theme: Theme;
+    onSave: (theme: Theme) => void;
+    onPreviewUpdate?: (previewHtml: string) => void;
+    previewUrl?: string;
+}
+declare function ThemeBuilder({ theme, onSave, onPreviewUpdate, previewUrl }: ThemeBuilderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * ColorSchemaPanel — Color token editor with light/dark support
+ *
+ * Consumer provides:
+ * - schemas: Array of color schemas
+ * - onSave: (schemas) => void
+ * - onSchemaSelect: (schemaId) => void
+ */
+interface ColorSchema {
+    id: string;
+    name: string;
+    light: Record<string, string>;
+    dark: Record<string, string>;
+}
+declare function ColorSchemaPanel({ schemas, activeSchemaId, onSchemaSelect, onSchemaSave, onSchemaCreate, }: {
+    schemas: ColorSchema[];
+    activeSchemaId?: string;
+    onSchemaSelect: (id: string) => void;
+    onSchemaSave: (schema: ColorSchema) => void;
+    onSchemaCreate: (name: string) => void;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * TypographyPanel — Font & text settings editor
+ *
+ * Consumer provides:
+ * - typography: Typography settings object
+ * - onSave: (typography) => void
+ */
+interface TextPreset {
+    size: Record<string, number>;
+    sizeUnit: string;
+    lineHeight: string;
+    fontRole: string;
+    weight: number;
+    letterSpacing: string;
+}
+interface TypographySettings {
+    fonts: Record<string, string>;
+    body: TextPreset;
+    headings: Record<string, TextPreset>;
+}
+declare function TypographyPanel({ typography, onSave, }: {
+    typography: TypographySettings;
+    onSave: (settings: TypographySettings) => void;
+}): react_jsx_runtime.JSX.Element;
+
 declare function useDisclosure(initial?: boolean): {
     isOpen: boolean;
     open: () => void;
@@ -752,4 +833,4 @@ interface SkeletonProps {
 }
 declare function Skeleton({ width, height, rounded, style }: SkeletonProps): react_jsx_runtime.JSX.Element;
 
-export { Alert, type AlertProps, AppShell, type AppShellProps, AuthButton, AuthCard, AuthDivider, AuthField, AuthFootnote, AuthHeader, AuthLogo, AuthShell, Badge, type BadgeProps, type Breadcrumb, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColorPicker, ColorPickerAlpha, ColorPickerEyeDropper, ColorPickerFormat, ColorPickerHexOutput, ColorPickerHue, ColorPickerOutput, ColorPickerSelection, type Column, ConfirmDialog, type ConfirmDialogProps, DEVICES, DEVICE_ICONS, DashboardLayout, type DashboardLayoutProps, DataTable, type DataTableProps, type DeviceKey, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, FormLayout, type FormLayoutProps, FormSection, type FormSectionProps, HslColorInput, ImagePickerField, Input, type InputProps, Label, LoadingSpinner, type LoadingSpinnerProps, LocalInput, MediaCard, type NavItem, NotificationBell, type NotificationBellProps, Page, type PageProps, PageSection, type PageSectionProps, Pagination, type PaginationProps, PlanBadge, type PlanBadgeProps, type PlanId, Popover, PopoverContent, PopoverTrigger, PostEditorShell, type PostEditorShellProps, PostFiltersBar, type PostFiltersBarProps, type PostListItem, PostListTable, type PostListTableProps, PostSidebarSection, type PostSidebarSectionProps, type PostStatus, PostStatusBadge, type PostStatusBadgeProps, ResponsiveSizeDeviceIcon, ResponsiveSizeField, SearchBar, type SearchBarProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sidebar, type SidebarItem, type SidebarProps, Skeleton, SlugInput, type SlugInputProps, type Stat, Stats, type StatsProps, StorageBar, type StorageBarProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, ThemeToggle, type ThemeToggleProps, TiptapEditor, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, type TopBarProps, type UploadProgressItem, UploadProgressPanel, UploadZone, badgeVariants, buttonVariants, cn, useColorPicker, useDisclosure, usePagination };
+export { Alert, type AlertProps, AppShell, type AppShellProps, AuthButton, AuthCard, AuthDivider, AuthField, AuthFootnote, AuthHeader, AuthLogo, AuthShell, Badge, type BadgeProps, type Breadcrumb, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColorPicker, ColorPickerAlpha, ColorPickerEyeDropper, ColorPickerFormat, ColorPickerHexOutput, ColorPickerHue, ColorPickerOutput, ColorPickerSelection, type ColorSchema, ColorSchemaPanel, type Column, ConfirmDialog, type ConfirmDialogProps, DEVICES, DEVICE_ICONS, DashboardLayout, type DashboardLayoutProps, DataTable, type DataTableProps, type DeviceKey, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, FormLayout, type FormLayoutProps, FormSection, type FormSectionProps, HslColorInput, ImagePickerField, Input, type InputProps, Label, LoadingSpinner, type LoadingSpinnerProps, LocalInput, MediaCard, type NavItem, NotificationBell, type NotificationBellProps, Page, type PageProps, PageSection, type PageSectionProps, Pagination, type PaginationProps, PlanBadge, type PlanBadgeProps, type PlanId, Popover, PopoverContent, PopoverTrigger, PostEditorShell, type PostEditorShellProps, PostFiltersBar, type PostFiltersBarProps, type PostListItem, PostListTable, type PostListTableProps, PostSidebarSection, type PostSidebarSectionProps, type PostStatus, PostStatusBadge, type PostStatusBadgeProps, ResponsiveSizeDeviceIcon, ResponsiveSizeField, SearchBar, type SearchBarProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sidebar, type SidebarItem, type SidebarProps, Skeleton, SlugInput, type SlugInputProps, type Stat, Stats, type StatsProps, StorageBar, type StorageBarProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, type TextPreset, Textarea, type TextareaProps, type Theme, ThemeBuilder, type ThemeBuilderProps, ThemeToggle, type ThemeToggleProps, TiptapEditor, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, type TopBarProps, TypographyPanel, type TypographySettings, type UploadProgressItem, UploadProgressPanel, UploadZone, badgeVariants, buttonVariants, cn, useColorPicker, useDisclosure, usePagination };

package/dist/index.d.ts

@@ -668,6 +668,87 @@ declare function TiptapEditor({ value, onChange, placeholder, disabled, classNam
     className?: string;
 }): react_jsx_runtime.JSX.Element | null;
 
+/**
+ * ThemeBuilder — Visual theme editor shell
+ *
+ * Consumer provides:
+ * - initialTheme: Current theme data
+ * - onSave: (themeData) => void
+ * - onPreview: (html) => void
+ *
+ * Includes:
+ * - Icon strip sidebar (AI, Variables, Styles)
+ * - Variables panel (Color Schema + Typography + Page Layout)
+ * - Preview iframe
+ *
+ * This is the shell. Consumer handles:
+ * - API persistence
+ * - Preview rendering (Tailwind + Alpine)
+ * - Theme data structure
+ */
+interface Theme {
+    id: string;
+    name: string;
+    variables?: Record<string, any>;
+    colorSchemas?: Array<any>;
+    typography?: Record<string, any>;
+    [key: string]: any;
+}
+interface ThemeBuilderProps {
+    theme: Theme;
+    onSave: (theme: Theme) => void;
+    onPreviewUpdate?: (previewHtml: string) => void;
+    previewUrl?: string;
+}
+declare function ThemeBuilder({ theme, onSave, onPreviewUpdate, previewUrl }: ThemeBuilderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * ColorSchemaPanel — Color token editor with light/dark support
+ *
+ * Consumer provides:
+ * - schemas: Array of color schemas
+ * - onSave: (schemas) => void
+ * - onSchemaSelect: (schemaId) => void
+ */
+interface ColorSchema {
+    id: string;
+    name: string;
+    light: Record<string, string>;
+    dark: Record<string, string>;
+}
+declare function ColorSchemaPanel({ schemas, activeSchemaId, onSchemaSelect, onSchemaSave, onSchemaCreate, }: {
+    schemas: ColorSchema[];
+    activeSchemaId?: string;
+    onSchemaSelect: (id: string) => void;
+    onSchemaSave: (schema: ColorSchema) => void;
+    onSchemaCreate: (name: string) => void;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * TypographyPanel — Font & text settings editor
+ *
+ * Consumer provides:
+ * - typography: Typography settings object
+ * - onSave: (typography) => void
+ */
+interface TextPreset {
+    size: Record<string, number>;
+    sizeUnit: string;
+    lineHeight: string;
+    fontRole: string;
+    weight: number;
+    letterSpacing: string;
+}
+interface TypographySettings {
+    fonts: Record<string, string>;
+    body: TextPreset;
+    headings: Record<string, TextPreset>;
+}
+declare function TypographyPanel({ typography, onSave, }: {
+    typography: TypographySettings;
+    onSave: (settings: TypographySettings) => void;
+}): react_jsx_runtime.JSX.Element;
+
 declare function useDisclosure(initial?: boolean): {
     isOpen: boolean;
     open: () => void;
@@ -752,4 +833,4 @@ interface SkeletonProps {
 }
 declare function Skeleton({ width, height, rounded, style }: SkeletonProps): react_jsx_runtime.JSX.Element;
 
-export { Alert, type AlertProps, AppShell, type AppShellProps, AuthButton, AuthCard, AuthDivider, AuthField, AuthFootnote, AuthHeader, AuthLogo, AuthShell, Badge, type BadgeProps, type Breadcrumb, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColorPicker, ColorPickerAlpha, ColorPickerEyeDropper, ColorPickerFormat, ColorPickerHexOutput, ColorPickerHue, ColorPickerOutput, ColorPickerSelection, type Column, ConfirmDialog, type ConfirmDialogProps, DEVICES, DEVICE_ICONS, DashboardLayout, type DashboardLayoutProps, DataTable, type DataTableProps, type DeviceKey, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, FormLayout, type FormLayoutProps, FormSection, type FormSectionProps, HslColorInput, ImagePickerField, Input, type InputProps, Label, LoadingSpinner, type LoadingSpinnerProps, LocalInput, MediaCard, type NavItem, NotificationBell, type NotificationBellProps, Page, type PageProps, PageSection, type PageSectionProps, Pagination, type PaginationProps, PlanBadge, type PlanBadgeProps, type PlanId, Popover, PopoverContent, PopoverTrigger, PostEditorShell, type PostEditorShellProps, PostFiltersBar, type PostFiltersBarProps, type PostListItem, PostListTable, type PostListTableProps, PostSidebarSection, type PostSidebarSectionProps, type PostStatus, PostStatusBadge, type PostStatusBadgeProps, ResponsiveSizeDeviceIcon, ResponsiveSizeField, SearchBar, type SearchBarProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sidebar, type SidebarItem, type SidebarProps, Skeleton, SlugInput, type SlugInputProps, type Stat, Stats, type StatsProps, StorageBar, type StorageBarProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, ThemeToggle, type ThemeToggleProps, TiptapEditor, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, type TopBarProps, type UploadProgressItem, UploadProgressPanel, UploadZone, badgeVariants, buttonVariants, cn, useColorPicker, useDisclosure, usePagination };
+export { Alert, type AlertProps, AppShell, type AppShellProps, AuthButton, AuthCard, AuthDivider, AuthField, AuthFootnote, AuthHeader, AuthLogo, AuthShell, Badge, type BadgeProps, type Breadcrumb, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColorPicker, ColorPickerAlpha, ColorPickerEyeDropper, ColorPickerFormat, ColorPickerHexOutput, ColorPickerHue, ColorPickerOutput, ColorPickerSelection, type ColorSchema, ColorSchemaPanel, type Column, ConfirmDialog, type ConfirmDialogProps, DEVICES, DEVICE_ICONS, DashboardLayout, type DashboardLayoutProps, DataTable, type DataTableProps, type DeviceKey, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, FormLayout, type FormLayoutProps, FormSection, type FormSectionProps, HslColorInput, ImagePickerField, Input, type InputProps, Label, LoadingSpinner, type LoadingSpinnerProps, LocalInput, MediaCard, type NavItem, NotificationBell, type NotificationBellProps, Page, type PageProps, PageSection, type PageSectionProps, Pagination, type PaginationProps, PlanBadge, type PlanBadgeProps, type PlanId, Popover, PopoverContent, PopoverTrigger, PostEditorShell, type PostEditorShellProps, PostFiltersBar, type PostFiltersBarProps, type PostListItem, PostListTable, type PostListTableProps, PostSidebarSection, type PostSidebarSectionProps, type PostStatus, PostStatusBadge, type PostStatusBadgeProps, ResponsiveSizeDeviceIcon, ResponsiveSizeField, SearchBar, type SearchBarProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sidebar, type SidebarItem, type SidebarProps, Skeleton, SlugInput, type SlugInputProps, type Stat, Stats, type StatsProps, StorageBar, type StorageBarProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, type TextPreset, Textarea, type TextareaProps, type Theme, ThemeBuilder, type ThemeBuilderProps, ThemeToggle, type ThemeToggleProps, TiptapEditor, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, type TopBarProps, TypographyPanel, type TypographySettings, type UploadProgressItem, UploadProgressPanel, UploadZone, badgeVariants, buttonVariants, cn, useColorPicker, useDisclosure, usePagination };