Feature-branch

README.md

@@ -49,6 +49,7 @@ yarn add react-odontogram
 
 ```tsx
 import { Odontogram } from "react-odontogram";
+import "react-odontogram/style.css";
 
 export default function App() {
   const handleChange = (selectedTeeth) => {
@@ -129,12 +130,19 @@ Example JSON output:
 
 ## ⚙️ Props
 
-| Prop              | Type                                        | Default | Description                                             |
-| ----------------- | ------------------------------------------- | ------- | ------------------------------------------------------- |
-| `onChange`        | `(selectedTeeth: ToothSelection[]) => void` | —       | Triggered whenever the user selects or deselects teeth. |
-| `initialSelected` | `string[]`                                  | `[]`    | Array of tooth IDs to preselect.                        |
-| `readOnly`        | `boolean`                                   | `false` | Makes the odontogram non-interactive (view-only).       |
-| `className`       | `string`                                    | —       | Optional class for custom styling.                      |
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `defaultSelected` | `string[]` | `[]` | Tooth IDs selected on first render. |
+| `onChange` | `(selectedTeeth: ToothSelection[]) => void` | — | Called whenever selection changes. |
+| `name` | `string` | `"teeth"` | Name used for hidden form input. |
+| `className` | `string` | `""` | Additional class for wrapper customization. |
+| `theme` | `"light" \| "dark"` | `"light"` | Applies built-in light/dark palette. |
+| `colors` | `{ darkBlue?: string; baseBlue?: string; lightBlue?: string }` | `{}` | Override palette colors. |
+| `notation` | `"FDI" \| "Universal" \| "Palmer"` | `"FDI"` | Display notation in native tooth titles/tooltips. |
+| `tooltip` | `{ placement?: Placement; margin?: number; content?: ReactNode \| ((payload?: ToothSelection) => ReactNode) }` | `{ placement: "top", margin: 10 }` | Tooltip behavior and custom content renderer. |
+| `showTooltip` | `boolean` | `true` | Enables/disables tooltip rendering. |
+| `showHalf` | `"full" \| "upper" \| "lower"` | `"full"` | Render full chart or only upper/lower arches. |
+| `maxTeeth` | `number` | `8` | Number of teeth per quadrant (for baby/mixed dentition views). |
 
 ---
 
@@ -144,14 +152,8 @@ Each tooth is internally defined in a structured format:
 
 ```ts
 {
-  id: "teeth-21",
-  name: "21",
+  name: "1",
   type: "Central Incisor",
-  notations: {
-    fdi: "21",
-    universal: "9",
-    palmer: "1UL"
-  },
   outlinePath: "...",
   shadowPath: "...",
   lineHighlightPath: "..."
@@ -190,5 +192,3 @@ MIT © [biomathcode](https://github.com/biomathcode)
 ## 💬 Feedback
 
 If this library helps your dental project, please ⭐ the repo or open issues/PRs for enhancements!
-
-

lefthook.yml

@@ -4,8 +4,8 @@ pre-commit:
     lint:
       run: git add -u
     typecheck:
-      run: pnpm tsc
+      run: npx pnpm tsc
     build:
-      run: pnpm build
+      run: npx pnpm build
     test:
-      run: pnpm test:ci
+      run: npx pnpm test:ci

package.json

@@ -35,10 +35,17 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./dist/index.mjs"
-    }
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
+    },
+    "./style.css": "./dist/index.css"
   },
+  "sideEffects": [
+    "*.css",
+    "**/*.css"
+  ],
   "files": [
     "dist"
   ],
@@ -65,11 +72,11 @@
     "@biomejs/biome": "1.9.4",
     "@ryansonshine/commitizen": "4.2.8",
     "@ryansonshine/cz-conventional-changelog": "3.3.4",
-    "@storybook/addon-a11y": "^10.0.8",
-    "@storybook/addon-links": "10.0.8",
-    "@storybook/addon-themes": "^10.0.8",
+    "@storybook/addon-a11y": "^10.2.10",
+    "@storybook/addon-links": "10.2.10",
+    "@storybook/addon-themes": "^10.2.10",
     "@storybook/addon-webpack5-compiler-swc": "4.0.2",
-    "@storybook/react-webpack5": "10.0.8",
+    "@storybook/react-webpack5": "10.2.10",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.2.0",
     "@types/node": "22.13.11",
@@ -87,14 +94,14 @@
     "react-dom": "18.3.1",
     "react-test-renderer": "18.3.1",
     "release-it": "18.1.2",
-    "storybook": "10.0.8",
+    "storybook": "10.2.10",
     "ts-node": "10.9.2",
     "tsconfig-paths": "4.2.0",
     "tsup": "8.4.0",
     "tsx": "4.19.3",
     "typescript": "5.8.2",
     "vitest": "3.0.9",
-    "@storybook/addon-docs": "10.0.8"
+    "@storybook/addon-docs": "10.2.10"
   },
   "peerDependencies": {
     "react": ">=17",