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

package/README.md

@@ -26,64 +26,102 @@ pnpm add @phsa.tec/design-system-react
 
 ## Basic Usage
 
-```tsx
-// 1. Import CSS (required)
-import "@phsa.tec/design-system-react/styles.css";
+### Step 1: Add Styles to Your Project
+
+Copy the design system styles to your project's `globals.css` (or main CSS file). You can customize all CSS variables and styles as needed:
+
+```css
+/* globals.css or your main CSS file */
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: oklch(100% 0 0);
+    --foreground: oklch(25% 0.01 150);
+    --primary: oklch(42% 0.15 145);
+    --primary-foreground: oklch(98% 0 0);
+    /* ... customize all variables you want */
+  }
+
+  .dark {
+    --background: oklch(4% 0.01 150);
+    --foreground: oklch(95% 0.02 150);
+    /* ... customize dark mode variables */
+  }
+}
+```
+
+**Important:** Place these styles in your project's `globals.css` file and customize the CSS variables (`--primary`, `--background`, etc.) to match your brand colors and design preferences.
 
-// 2. Import components
-import { DesignSystemProvider, Button, Card } from "@phsa.tec/design-system-react";
+### Step 2: Use Components
+
+```tsx
+// Import components
+import { Button, Card } from "@phsa.tec/design-system-react";
 
 function App() {
   return (
-    <DesignSystemProvider>
-      <Card>
-        <Button>Click me</Button>
-      </Card>
-    </DesignSystemProvider>
+    <Card>
+      <Button>Click me</Button>
+    </Card>
   );
 }
 ```
 
 ## Customization
 
-### Option 1: CSS Variables (Recommended)
+The design system uses **OKLCH** color format for better color consistency and wider gamut support. All styles are in your `globals.css` file, so you can customize any variable or style you want.
 
-Override CSS variables in your stylesheet:
+### Customizing Colors
+
+Simply modify the CSS variables in your `globals.css`:
 
 ```css
 /* globals.css */
 :root {
-  /* Primary colors */
-  --primary: 220 90% 50%;
-  --primary-foreground: 0 0% 100%;
-  --secondary: 210 40% 96%;
-  --secondary-foreground: 222 47% 11%;
+  /* Primary colors - using OKLCH format */
+  --primary: oklch(42% 0.15 145); /* Lightness Chroma Hue */
+  --primary-foreground: oklch(98% 0 0);
+  
+  /* Change to your brand colors */
+  --secondary: oklch(96% 0.02 150);
+  --secondary-foreground: oklch(25% 0.01 150);
 
   /* Feedback colors */
-  --destructive: 0 84% 60%;
-  --success: 142 76% 36%;
-  --warning: 38 92% 50%;
+  --destructive: oklch(60% 0.20 0);
+  --success: oklch(42% 0.15 145);
+  --warning: oklch(50% 0.18 48);
 
   /* Neutral colors */
-  --background: 0 0% 100%;
-  --foreground: 222 84% 5%;
-  --muted: 210 40% 96%;
-  --muted-foreground: 215 16% 47%;
-  --border: 214 32% 91%;
+  --background: oklch(100% 0 0);
+  --foreground: oklch(25% 0.01 150);
+  --muted: oklch(96% 0.02 150);
+  --muted-foreground: oklch(45% 0.01 150);
+  --border: oklch(88% 0.03 150);
 
   /* Other */
   --radius: 0.5rem;
-  --font-family: "Inter", sans-serif;
+  --font-family: "Roboto", sans-serif;
 }
 
 /* Dark mode */
 .dark {
-  --background: 222 84% 5%;
-  --foreground: 210 40% 98%;
-  /* ... other variables */
+  --background: oklch(4% 0.01 150);
+  --foreground: oklch(95% 0.02 150);
+  --primary: oklch(48% 0.16 145);
+  /* ... customize any other variables */
 }
 ```
 
+**Tip:** You can use online OKLCH color pickers or convert from HSL/HEX to OKLCH. The format is `oklch(lightness% chroma hue)` where:
+- Lightness: 0-100%
+- Chroma: 0-0.4 (saturation)
+- Hue: 0-360 (color angle)
+
 ### Option 2: Tailwind Preset (Advanced)
 
 If your project uses Tailwind CSS, you can extend with our preset:
@@ -183,14 +221,11 @@ Add the `dark` class to the root element:
 ```tsx
 // With next-themes
 import { ThemeProvider } from "next-themes";
-import { DesignSystemProvider } from "@phsa.tec/design-system-react";
 
 function App() {
   return (
     <ThemeProvider attribute="class" defaultTheme="system">
-      <DesignSystemProvider>
-        {/* Your app */}
-      </DesignSystemProvider>
+      {/* Your app */}
     </ThemeProvider>
   );
 }
@@ -209,12 +244,8 @@ function App() {
 // Components
 import { Button, Card } from "@phsa.tec/design-system-react";
 
-// CSS (required)
-import "@phsa.tec/design-system-react/styles.css";
-
-// Tailwind Preset (optional)
-// In tailwind.config.js:
-// presets: [require("@phsa.tec/design-system-react/tailwind-preset")]
+// Note: CSS styles should be added to your project's globals.css file
+// See "Basic Usage" section above for details
 ```
 
 ## Development

package/dist/index.d.mts

@@ -496,39 +496,4 @@ declare function useToast(): {
     toasts: ToasterToast[];
 };
 
-type DesignSystemProviderProps = {
-    children: React__default.ReactNode;
-    className?: string;
-};
-/**
- * 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 };
+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, 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

@@ -496,39 +496,4 @@ declare function useToast(): {
     toasts: ToasterToast[];
 };
 
-type DesignSystemProviderProps = {
-    children: React__default.ReactNode;
-    className?: string;
-};
-/**
- * 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 };
+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, 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.js

@@ -86,7 +86,6 @@ __export(src_exports, {
   CollapsibleTrigger: () => CollapsibleTrigger2,
   CustomDrawer: () => CustomDrawer,
   DataPairList: () => DataPairList,
-  DesignSystemProvider: () => DesignSystemProvider,
   Dialog: () => Dialog2,
   DialogWithForm: () => DialogWithForm,
   Drawer: () => Drawer,
@@ -4267,18 +4266,6 @@ function Switch2(_a) {
     }
   );
 }
-
-// src/components/config/DesignSystemProvider/index.tsx
-var import_react15 = require("react");
-var import_jsx_runtime67 = require("react/jsx-runtime");
-function DesignSystemProvider({
-  children,
-  className = ""
-}) {
-  const uniqueId = (0, import_react15.useId)().replace(/:/g, "_");
-  const scopeClass = `ds-${uniqueId}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: `ds ${scopeClass} ${className}`.trim(), children });
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AlertDialog,
@@ -4307,7 +4294,6 @@ function DesignSystemProvider({
   CollapsibleTrigger,
   CustomDrawer,
   DataPairList,
-  DesignSystemProvider,
   Dialog,
   DialogWithForm,
   Drawer,