@omnikit-js/ui 0.5.2 → 0.5.5

package/README.md

@@ -44,13 +44,13 @@ export default function BillingPage() {
 }
 ```
 
-### Option 2: Prefixed CSS (Recommended for Apps With Existing Tailwind)
+### Option 2: Isolated CSS (Recommended for Apps With Style Conflicts)
 
-To avoid conflicts with your app's existing Tailwind styles, use the prefixed version:
+To completely isolate the component styles and avoid any conflicts:
 
 ```javascript
-// Import the prefixed CSS instead
-import '@omnikit-js/ui/dist/styles.prefixed.css'
+// Import the isolated CSS version
+import '@omnikit-js/ui/dist/styles.isolated.css'
 
 // Use the component
 import { Billing } from '@omnikit-js/ui'
@@ -66,13 +66,13 @@ export default function BillingPage() {
 }
 ```
 
-**Note:** The prefixed version uses `tw-` prefix for all Tailwind classes internally, preventing conflicts with your app's styles.
+**Note:** The isolated version wraps all styles in `.omnikit-billing-component` and uses `!important` for critical styles like progress bars to prevent conflicts.
 
 ### Next.js App Router Example
 
 ```javascript
 // app/billing/page.tsx
-import '@omnikit-js/ui/dist/styles.prefixed.css'
+import '@omnikit-js/ui/dist/styles.isolated.css'
 import { Billing } from '@omnikit-js/ui'
 
 export default function BillingPage() {
@@ -93,7 +93,7 @@ export default function BillingPage() {
 
 ```javascript
 // pages/_app.tsx
-import '@omnikit-js/ui/dist/styles.prefixed.css'
+import '@omnikit-js/ui/dist/styles.isolated.css'
 import type { AppProps } from 'next/app'
 
 export default function App({ Component, pageProps }: AppProps) {
@@ -264,10 +264,13 @@ The component expects the following API endpoints:
 
 5. **Styles not loading**
    - Ensure you're importing the CSS file
-   - Check the correct path: `@omnikit-js/ui/dist/styles.css` or `@omnikit-js/ui/dist/styles.prefixed.css`
+   - Check the correct path: `@omnikit-js/ui/dist/styles.css` or `@omnikit-js/ui/dist/styles.isolated.css`
+   - For apps with style conflicts, use the isolated version
 
 ## Version History
 
+- **0.5.3** - Added isolated CSS option for better style conflict resolution
+- **0.5.2** - Fixed CSS exports in package.json
 - **0.5.1** - Tailwind CSS v4 support with prefix option
 - **0.3.5** - Previous version with Tailwind CSS v3
 

package/dist/styles.css

@@ -2145,6 +2145,26 @@
     }
   }
 }
+[data-slot="card"] {
+  background-color: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+.pricing-card {
+  background-color: rgba(255, 255, 255, 0.05) !important;
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+  border-radius: 0.75rem !important;
+}
+.pricing-card.current {
+  border-color: #3b82f6 !important;
+  background-color: rgba(59, 130, 246, 0.1) !important;
+}
+@media (prefers-color-scheme: dark) {
+  .pricing-card {
+    background-color: rgba(31, 41, 55, 0.5) !important;
+    border-color: rgba(255, 255, 255, 0.1) !important;
+  }
+}
 span.omnikit-price-text {
   font-size: 2rem !important;
   line-height: 1 !important;