@phsa.tec/design-system-react 0.2.0 → 0.3.0

package/dist/index.d.mts

@@ -120,6 +120,21 @@ type TextProps = VariantProps<typeof textVariants> & {
 };
 declare function Text({ variant, align, className, children, }: TextProps): React$1.JSX.Element;
 
+type CardProps = {
+    title?: string;
+    description?: string;
+    footer?: () => React__default.ReactNode;
+    children?: React__default.ReactNode;
+};
+declare const Card$1: ({ title, children, description, footer, }: CardProps) => React__default.JSX.Element;
+
+declare const Card: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+
 type CheckboxProps$1 = React$1.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;
 
 type CheckboxProps = CheckboxProps$1 & {
@@ -481,118 +496,39 @@ declare function useToast(): {
     toasts: ToasterToast[];
 };
 
-type ColorValues = {
-    background?: string;
-    foreground?: string;
-    card?: string;
-    cardForeground?: string;
-    popover?: string;
-    popoverForeground?: string;
-    primary?: string;
-    primaryForeground?: string;
-    secondary?: string;
-    secondaryForeground?: string;
-    muted?: string;
-    mutedForeground?: string;
-    accent?: string;
-    accentForeground?: string;
-    success?: string;
-    successForeground?: string;
-    warning?: string;
-    destructive?: string;
-    destructiveForeground?: string;
-    border?: string;
-    input?: string;
-    ring?: string;
-    radius?: string;
-};
-type SpacingValues = {
-    /** Base spacing unit (default: 0.25rem = 4px) */
-    base?: string;
-    /** Custom spacing scale */
-    xs?: string;
-    sm?: string;
-    md?: string;
-    lg?: string;
-    xl?: string;
-    "2xl"?: string;
-    "3xl"?: string;
-};
-type TypographyValues = {
-    /** Font family */
-    fontFamily?: string;
-    /** Base font size */
-    fontSize?: {
-        xs?: string;
-        sm?: string;
-        base?: string;
-        lg?: string;
-        xl?: string;
-        "2xl"?: string;
-        "3xl"?: string;
-        "4xl"?: string;
-        "5xl"?: string;
-    };
-    /** Font weights */
-    fontWeight?: {
-        light?: string;
-        normal?: string;
-        medium?: string;
-        semibold?: string;
-        bold?: string;
-    };
-    /** Line heights */
-    lineHeight?: {
-        none?: string;
-        tight?: string;
-        snug?: string;
-        normal?: string;
-        relaxed?: string;
-        loose?: string;
-    };
-};
-type ThemeValues = {
-    colors?: ColorValues;
-    spacing?: SpacingValues;
-    typography?: TypographyValues;
-    /** Border radius values */
-    borderRadius?: {
-        none?: string;
-        sm?: string;
-        md?: string;
-        lg?: string;
-        xl?: string;
-        "2xl"?: string;
-        "3xl"?: string;
-        full?: string;
-    };
-    /** Shadow values */
-    boxShadow?: {
-        sm?: string;
-        md?: string;
-        lg?: string;
-        xl?: string;
-        "2xl"?: string;
-        inner?: string;
-        none?: string;
-    };
-    /** Breakpoints */
-    breakpoints?: {
-        sm?: string;
-        md?: string;
-        lg?: string;
-        xl?: string;
-        "2xl"?: string;
-    };
-};
 type DesignSystemProviderProps = {
     children: React__default.ReactNode;
     className?: string;
-    /** @deprecated Use `theme.colors` instead */
-    colors?: ColorValues;
-    /** Complete theme configuration */
-    theme?: ThemeValues;
 };
-declare function DesignSystemProvider({ children, className, colors, theme, }: DesignSystemProviderProps): React__default.JSX.Element;
-
-export { AlertDialog, type AlertDialogProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, DesignSystemProvider as BaseDesignSystemProvider, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, CollapsibleTrigger, type Column, CustomDrawer, type CustomDrawerProps, DataPairList, type DataPairListProps, DesignSystemProvider, type DesignSystemProviderProps, Dialog, type DialogProps, DialogWithForm, type DialogWithFormProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, type DrawerProps, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicTable, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Icon, Input, MaskInput, type MaskInputProps, MultiSelect, MultipleInput, type MultipleInputProps, MultipleMaskInput, type MultipleMaskInputProps, NavUser, NumberInput, type NumberInputProps, PageLayout, type PageLayoutProps, Select, type SelectProps, Separator, Sheet, type SheetProps, Sidebar, Spinner, Steps, Switch, type SwitchProps, type TableProps, Tabs, Text, Toaster, badgeVariants, reducer, toast, useFormField, useToast };
+/**
+ * DesignSystemProvider - Wrapper que aplica o escopo do design system
+ *
+ * Uso básico:
+ * ```tsx
+ * import { DesignSystemProvider } from "@phsa.tec/design-system-react";
+ * import "@phsa.tec/design-system-react/styles.css";
+ *
+ * <DesignSystemProvider>
+ *   <App />
+ * </DesignSystemProvider>
+ * ```
+ *
+ * Customização via CSS Variables:
+ * ```css
+ * :root {
+ *   --primary: 220 90% 50%;
+ *   --radius: 0.25rem;
+ * }
+ * ```
+ *
+ * Customização avançada via Tailwind Preset:
+ * ```js
+ * // tailwind.config.js
+ * module.exports = {
+ *   presets: [require("@phsa.tec/design-system-react/tailwind-preset")],
+ * }
+ * ```
+ */
+declare function DesignSystemProvider({ children, className, }: DesignSystemProviderProps): React__default.JSX.Element;
+
+export { AlertDialog, type AlertDialogProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Card$1 as Card, Card as CardBase, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, CollapsibleTrigger, type Column, CustomDrawer, type CustomDrawerProps, DataPairList, type DataPairListProps, DesignSystemProvider, type DesignSystemProviderProps, Dialog, type DialogProps, DialogWithForm, type DialogWithFormProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, type DrawerProps, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicTable, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Icon, Input, MaskInput, type MaskInputProps, MultiSelect, MultipleInput, type MultipleInputProps, MultipleMaskInput, type MultipleMaskInputProps, NavUser, NumberInput, type NumberInputProps, PageLayout, type PageLayoutProps, Select, type SelectProps, Separator, Sheet, type SheetProps, Sidebar, Spinner, Steps, Switch, type SwitchProps, type TableProps, Tabs, Text, Toaster, badgeVariants, reducer, toast, useFormField, useToast };

package/dist/index.d.ts

@@ -120,6 +120,21 @@ type TextProps = VariantProps<typeof textVariants> & {
 };
 declare function Text({ variant, align, className, children, }: TextProps): React$1.JSX.Element;
 
+type CardProps = {
+    title?: string;
+    description?: string;
+    footer?: () => React__default.ReactNode;
+    children?: React__default.ReactNode;
+};
+declare const Card$1: ({ title, children, description, footer, }: CardProps) => React__default.JSX.Element;
+
+declare const Card: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+
 type CheckboxProps$1 = React$1.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;
 
 type CheckboxProps = CheckboxProps$1 & {
@@ -481,118 +496,39 @@ declare function useToast(): {
     toasts: ToasterToast[];
 };
 
-type ColorValues = {
-    background?: string;
-    foreground?: string;
-    card?: string;
-    cardForeground?: string;
-    popover?: string;
-    popoverForeground?: string;
-    primary?: string;
-    primaryForeground?: string;
-    secondary?: string;
-    secondaryForeground?: string;
-    muted?: string;
-    mutedForeground?: string;
-    accent?: string;
-    accentForeground?: string;
-    success?: string;
-    successForeground?: string;
-    warning?: string;
-    destructive?: string;
-    destructiveForeground?: string;
-    border?: string;
-    input?: string;
-    ring?: string;
-    radius?: string;
-};
-type SpacingValues = {
-    /** Base spacing unit (default: 0.25rem = 4px) */
-    base?: string;
-    /** Custom spacing scale */
-    xs?: string;
-    sm?: string;
-    md?: string;
-    lg?: string;
-    xl?: string;
-    "2xl"?: string;
-    "3xl"?: string;
-};
-type TypographyValues = {
-    /** Font family */
-    fontFamily?: string;
-    /** Base font size */
-    fontSize?: {
-        xs?: string;
-        sm?: string;
-        base?: string;
-        lg?: string;
-        xl?: string;
-        "2xl"?: string;
-        "3xl"?: string;
-        "4xl"?: string;
-        "5xl"?: string;
-    };
-    /** Font weights */
-    fontWeight?: {
-        light?: string;
-        normal?: string;
-        medium?: string;
-        semibold?: string;
-        bold?: string;
-    };
-    /** Line heights */
-    lineHeight?: {
-        none?: string;
-        tight?: string;
-        snug?: string;
-        normal?: string;
-        relaxed?: string;
-        loose?: string;
-    };
-};
-type ThemeValues = {
-    colors?: ColorValues;
-    spacing?: SpacingValues;
-    typography?: TypographyValues;
-    /** Border radius values */
-    borderRadius?: {
-        none?: string;
-        sm?: string;
-        md?: string;
-        lg?: string;
-        xl?: string;
-        "2xl"?: string;
-        "3xl"?: string;
-        full?: string;
-    };
-    /** Shadow values */
-    boxShadow?: {
-        sm?: string;
-        md?: string;
-        lg?: string;
-        xl?: string;
-        "2xl"?: string;
-        inner?: string;
-        none?: string;
-    };
-    /** Breakpoints */
-    breakpoints?: {
-        sm?: string;
-        md?: string;
-        lg?: string;
-        xl?: string;
-        "2xl"?: string;
-    };
-};
 type DesignSystemProviderProps = {
     children: React__default.ReactNode;
     className?: string;
-    /** @deprecated Use `theme.colors` instead */
-    colors?: ColorValues;
-    /** Complete theme configuration */
-    theme?: ThemeValues;
 };
-declare function DesignSystemProvider({ children, className, colors, theme, }: DesignSystemProviderProps): React__default.JSX.Element;
-
-export { AlertDialog, type AlertDialogProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, DesignSystemProvider as BaseDesignSystemProvider, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, CollapsibleTrigger, type Column, CustomDrawer, type CustomDrawerProps, DataPairList, type DataPairListProps, DesignSystemProvider, type DesignSystemProviderProps, Dialog, type DialogProps, DialogWithForm, type DialogWithFormProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, type DrawerProps, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicTable, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Icon, Input, MaskInput, type MaskInputProps, MultiSelect, MultipleInput, type MultipleInputProps, MultipleMaskInput, type MultipleMaskInputProps, NavUser, NumberInput, type NumberInputProps, PageLayout, type PageLayoutProps, Select, type SelectProps, Separator, Sheet, type SheetProps, Sidebar, Spinner, Steps, Switch, type SwitchProps, type TableProps, Tabs, Text, Toaster, badgeVariants, reducer, toast, useFormField, useToast };
+/**
+ * DesignSystemProvider - Wrapper que aplica o escopo do design system
+ *
+ * Uso básico:
+ * ```tsx
+ * import { DesignSystemProvider } from "@phsa.tec/design-system-react";
+ * import "@phsa.tec/design-system-react/styles.css";
+ *
+ * <DesignSystemProvider>
+ *   <App />
+ * </DesignSystemProvider>
+ * ```
+ *
+ * Customização via CSS Variables:
+ * ```css
+ * :root {
+ *   --primary: 220 90% 50%;
+ *   --radius: 0.25rem;
+ * }
+ * ```
+ *
+ * Customização avançada via Tailwind Preset:
+ * ```js
+ * // tailwind.config.js
+ * module.exports = {
+ *   presets: [require("@phsa.tec/design-system-react/tailwind-preset")],
+ * }
+ * ```
+ */
+declare function DesignSystemProvider({ children, className, }: DesignSystemProviderProps): React__default.JSX.Element;
+
+export { AlertDialog, type AlertDialogProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonProps, Card$1 as Card, Card as CardBase, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, CollapsibleTrigger, type Column, CustomDrawer, type CustomDrawerProps, DataPairList, type DataPairListProps, DesignSystemProvider, type DesignSystemProviderProps, Dialog, type DialogProps, DialogWithForm, type DialogWithFormProps, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, type DrawerProps, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicTable, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Icon, Input, MaskInput, type MaskInputProps, MultiSelect, MultipleInput, type MultipleInputProps, MultipleMaskInput, type MultipleMaskInputProps, NavUser, NumberInput, type NumberInputProps, PageLayout, type PageLayoutProps, Select, type SelectProps, Separator, Sheet, type SheetProps, Sidebar, Spinner, Steps, Switch, type SwitchProps, type TableProps, Tabs, Text, Toaster, badgeVariants, reducer, toast, useFormField, useToast };