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

package/README.md

@@ -5,7 +5,7 @@ A modern, **fully isolated** React component library built with TypeScript, Tail
 ## Features
 
 - **Zero Conflicts** - Fully isolated CSS, won't interfere with your project's styles
-- **Customizable** - Via CSS Variables or Tailwind Preset
+- **Customizable** - Via CSS Variables
 - **Accessible** - Built with Radix UI primitives
 - **Dark Mode** - Native dark theme support
 - **TypeScript** - Full type support
@@ -26,84 +26,180 @@ 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
+
+You have two options to add the design system styles:
+
+#### Option 1: Import CSS Directly (Quick Start)
+
+Import the CSS file at the **top** of your project's `globals.css` file:
 
-// 2. Import components
-import { DesignSystemProvider, Button, Card } from "@phsa.tec/design-system-react";
+```css
+/* globals.css - Import at the top */
+@import "@phsa.tec/design-system-react/styles.css";
+
+/* Your other styles below */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+This will use the default styles. To customize the CSS variables, use Option 2.
+
+#### Option 2: Copy to globals.css (Recommended for Customization)
+
+Copy the design system styles to your project's `globals.css` (or main CSS file) and customize the CSS variables:
+
+```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);
+    --card: oklch(100% 0 0);
+    --card-foreground: oklch(25% 0.01 150);
+    --popover: oklch(100% 0 0);
+    --popover-foreground: oklch(25% 0.01 150);
+    --primary: oklch(42% 0.15 145);
+    --primary-foreground: oklch(98% 0 0);
+    --secondary: oklch(96% 0.02 150);
+    --secondary-foreground: oklch(25% 0.01 150);
+    --muted: oklch(96% 0.02 150);
+    --muted-foreground: oklch(45% 0.01 150);
+    --accent: oklch(96% 0.02 150);
+    --accent-foreground: oklch(25% 0.01 150);
+    --success: oklch(42% 0.15 145);
+    --success-foreground: oklch(98% 0 0);
+    --warning: oklch(50% 0.18 48);
+    --destructive: oklch(60% 0.20 0);
+    --destructive-foreground: oklch(98% 0 0);
+    --border: oklch(88% 0.03 150);
+    --input: oklch(88% 0.03 150);
+    --ring: oklch(42% 0.15 145);
+    --radius: 0.5rem;
+    --sidebar-background: oklch(98% 0.04 150);
+    --sidebar-foreground: oklch(30% 0.01 150);
+    --sidebar-primary: oklch(42% 0.15 145);
+    --sidebar-primary-foreground: oklch(98% 0 0);
+    --sidebar-accent: oklch(95% 0.04 150);
+    --sidebar-accent-foreground: oklch(25% 0.01 150);
+    --sidebar-border: oklch(90% 0.04 150);
+    --sidebar-ring: oklch(42% 0.15 145);
+  }
+
+  .dark {
+    --background: oklch(4% 0.01 150);
+    --foreground: oklch(95% 0.02 150);
+    --card: oklch(4% 0.01 150);
+    --card-foreground: oklch(95% 0.02 150);
+    --popover: oklch(4% 0.01 150);
+    --popover-foreground: oklch(95% 0.02 150);
+    --primary: oklch(48% 0.16 145);
+    --primary-foreground: oklch(8% 0.01 150);
+    --secondary: oklch(12% 0.02 150);
+    --secondary-foreground: oklch(95% 0.02 150);
+    --muted: oklch(12% 0.02 150);
+    --muted-foreground: oklch(60% 0.02 150);
+    --accent: oklch(12% 0.02 150);
+    --accent-foreground: oklch(95% 0.02 150);
+    --destructive: oklch(31% 0.12 0);
+    --destructive-foreground: oklch(98% 0 0);
+    --border: oklch(18% 0.02 150);
+    --input: oklch(18% 0.02 150);
+    --ring: oklch(48% 0.16 145);
+    --sidebar-background: oklch(8% 0.01 150);
+    --sidebar-foreground: oklch(90% 0.02 150);
+    --sidebar-primary: oklch(48% 0.16 145);
+    --sidebar-primary-foreground: oklch(8% 0.01 150);
+    --sidebar-accent: oklch(15% 0.02 150);
+    --sidebar-accent-foreground: oklch(90% 0.02 150);
+    --sidebar-border: oklch(15% 0.02 150);
+    --sidebar-ring: oklch(48% 0.16 145);
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+```
+
+**Tip:** Customize the CSS variables (`--primary`, `--background`, etc.) to match your brand colors and design preferences.
+
+### 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.
+
+### Customizing Colors
 
-Override CSS variables in your stylesheet:
+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 */
 }
 ```
 
-### Option 2: Tailwind Preset (Advanced)
-
-If your project uses Tailwind CSS, you can extend with our preset:
-
-```js
-// tailwind.config.js
-module.exports = {
-  presets: [require("@phsa.tec/design-system-react/tailwind-preset")],
-  theme: {
-    extend: {
-      // Your customizations
-      colors: {
-        primary: {
-          DEFAULT: "#your-color",
-        },
-      },
-    },
-  },
-};
-```
+**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)
 
 ## Available CSS Variables
 
@@ -183,14 +279,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>
   );
 }
@@ -208,13 +301,14 @@ function App() {
 ```typescript
 // Components
 import { Button, Card } from "@phsa.tec/design-system-react";
+```
 
-// CSS (required)
-import "@phsa.tec/design-system-react/styles.css";
+```css
+/* globals.css - Import at the top (Option 1: Quick start) */
+@import "@phsa.tec/design-system-react/styles.css";
 
-// Tailwind Preset (optional)
-// In tailwind.config.js:
-// presets: [require("@phsa.tec/design-system-react/tailwind-preset")]
+/* Or copy the full styles to your globals.css (Option 2: For customization) */
+/* 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,