@ruc-lib/knob 2.0.1 → 3.1.0

package/README.md

@@ -18,31 +18,38 @@ If you only need the Knob component
 npm install @ruc-lib/knob
 ```
 
-## Usage
-### 1. Import the Module
-In your Angular module file (e.g., `app.module.ts`), import the `RuclibKnobModule`:
 
-```typescript
-// For Complete Library
-import { RuclibKnobModule } from '@uxpractice/ruc-lib/knob';
-
-// For Individual Package
-import { RuclibKnobModule } from '@ruc-lib/knob';
-
-import { AppComponent } from './app.component';
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [
-    BrowserModule,
-    RuclibKnobModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule {}
+# Version Compatibility
+
+Please ensure you install the correct version of `@ruc-lib/knob` based on your Angular version.
+ 
+| Angular Version    | Compatible `@ruc-lib/knob` Version     |
+|--------------------|------------------------------------------------------|
+| 15.x.x             | `npm install @ruc-lib/knob@^3.0.0`     |
+| 16.x.x             | `npm install @ruc-lib/knob@^3.0.0`     |
+
+
+## Usage
+### 1. Import the Component
+In your Angular component file (e.g., `app.component.ts`), import the `RuclibKnobComponent`:
+
+```typescript
+import { Component } from '@angular/core';
+
+// For Complete Library
+import { RuclibKnobComponent } from '@uxpractice/ruc-lib/knob';
+
+// For Individual Package
+import { RuclibKnobComponent } from '@ruc-lib/knob';
+
+@Component({
+  selector: 'app-root',
+  imports: [RuclibKnobComponent],
+  templateUrl: './app.component.html',
+})
+export class AppComponent {
+  // Component code here
+}
 ```
 
 ### 2. Use the Component
@@ -149,6 +156,23 @@ export class AppComponent {
 }
 ```
 
+> ⚠️ **IMPORTANT: Custom Theme Usage in Angular Material**
+
+When implementing **custom themes**, such as:
+
+```scss
+.custom-theme-1 {
+  @include angular-material-theme($custom-theme);
+}
+
+// You must also include the typography mixin to ensure text styles are applied correctly as shown below:
+.custom-theme-1 {
+  @include angular-material-theme($custom-theme);
+  @include mat.typography-level($theme-custom-typography-name, body-1);
+}
+```
+
+
 ## Contribution
 
 Contributions are welcome! Feel free to open issues or pull requests for any enhancements or fixes.