### Development Setup Commands

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/INDEX.md

Commands to clone the repository, install dependencies, and run development or build tasks.

```bash
git clone https://github.com/biomathcode/react-odontogram.git
cd react-odontogram
pnpm install
pnpm dev          # Build + Storybook + tests
pnpm storybook    # Storybook only
pnpm test         # Tests only
pnpm build        # Production build
```

--------------------------------

### Form Integration Example

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/configuration.md

Example of how to retrieve and parse selected tooth IDs from a form submission.

```javascript
const formData = new FormData(formElement);
const selectedIds = JSON.parse(formData.get("dental_chart_selection") || "[]");
```

--------------------------------

### Quick Start

Source: https://github.com/biomathcode/react-odontogram/blob/main/README.md

A basic example of how to use the Odontogram component in a React application.

```tsx
import { Odontogram } from "react-odontogram";
import "react-odontogram/style.css";

export default function App() {
  const handleChange = (selectedTeeth) => {
    console.log(selectedTeeth);
    /*
      Example output:
      [
        {
          "id": "teeth-21",
          "notations": {
            "fdi": "21",
            "universal": "9",
            "palmer": "1UL"
          },
          "type": "Central Incisor"
        },
        {
          "id": "teeth-12",
          "notations": {
            "fdi": "12",
            "universal": "7",
            "palmer": "2UR"
          },
          "type": "Lateral Incisor"
        }
      ]
    */
  };

  return <Odontogram onChange={handleChange} />;
}
```

--------------------------------

### Installation

Source: https://github.com/biomathcode/react-odontogram/blob/main/README.md

Instructions for installing the react-odontogram package using npm, pnpm, or yarn.

```bash
# Using npm
npm install react-odontogram

# Using pnpm
pnpm add react-odontogram

# Using yarn
yarn add react-odontogram
```

--------------------------------

### Using getViewBox Example

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/exports.md

Example of using the getViewBox function to get SVG viewBox values.

```typescript
import { getViewBox } from "react-odontogram";

const viewBox = getViewBox("circle", "full");  // "0 0 409 694"
const viewBoxHalf = getViewBox("square", "upper");  // "0 0 900 75"
```

--------------------------------

### SVG Path Data Syntax Example

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/api-reference/data.md

An example of a minimal SVG path string.

```svg
M100 100 L150 100 L150 150 L100 150 Z
```

--------------------------------

### Complete Configuration Example

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/configuration.md

A comprehensive example demonstrating various configuration options for the Odontogram component, including selection, display, notation, conditions, interactions, and tooltips.

```typescript
import { Odontogram } from "react-odontogram";
import "react-odontogram/style.css";

function DentalClinicChart() {
  const [selected, setSelected] = useState([]);

  const conditions = [
    {
      label: "Caries",
      teeth: ["teeth-16", "teeth-26", "teeth-36"],
      fillColor: "#ef4444",
      outlineColor: "#b91c1c",
    },
    {
      label: "Filling",
      teeth: ["teeth-14", "teeth-24"],
      fillColor: "#3b82f6",
      outlineColor: "#1d4ed8",
    },
  ];

  return (
    <Odontogram
      // Selection
      name="selected_teeth"
      defaultSelected={"["teeth-11"]"}
      singleSelect={false}
      onChange={(teeth) => setSelected(teeth)}

      // Display
      theme="dark"
      colors={{
        darkBlue: "#7c9cff",
        baseBlue: "#c7d2fe",
        lightBlue: "#4f46e5",
      }}
      className="clinic-chart"
      styles={{
        maxWidth: "500px",
        margin: "20px auto",
      }}

      // Notation & Conditions
      notation="FDI"
      teethConditions={conditions}
      showLabels={true}

      // Interactions
      readOnly={false}
      layout="circle"
      showHalf="full"
      maxTeeth={8}

      // Tooltips
      showTooltip={true}
      tooltip={{
        placement: "right-start",
        margin: 12,
        content: (tooth) => (
          <div style={{ fontSize: "12px" }}>
            <strong>Tooth {tooth?.notations.fdi}</strong>
            <div>{tooth?.type}</div>
          </div>
        ),
      }}
    />
  );
}

```

--------------------------------

### Supported Placements Example

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/api-reference/utilities.md

Example of how to use the `placements` utility to get positioning coordinates for a tooth.

```typescript
const toothRect = element.getBoundingClientRect();
const pos = placements["top"](toothRect, 10);
console.log(pos); // { x: <centered>, y: <above tooth> }
```

--------------------------------

### Essential Props

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/INDEX.md

Quick start example showing essential props for the Odontogram component.

```typescript
<Odontogram
  onChange={(selected) => console.log(selected)}  // Selection callback
  defaultSelected={["teeth-11"]}
/>
```

--------------------------------

### Example Entry for teethPaths

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/api-reference/data.md

An example entry demonstrating the structure of an object within the teethPaths array.

```typescript
{
  name: "1",
  type: "Central Incisor",
  outlinePath: "M173.951 1.698c-2.198.16-5.302.862...",
  shadowPath: "M188.269 50.215c19.275-41.867...",
  lineHighlightPath: "M160.472 14.727c.392-.402..."
}
```

--------------------------------

### Color Theming Example

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/INDEX.md

Example of applying custom colors to the Odontogram component.

```typescript
const theme = {
  darkBlue: "#1e40af",
  baseBlue: "#3b82f6",
  lightBlue: "#93c5fd",
};

<Odontogram colors={theme} />
```

--------------------------------

### getViewBox Example Usage

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/api-reference/Odontogram.md

Example of how to use the getViewBox function to get SVG viewBox strings for different layouts and display portions.

```typescript
const vb = getViewBox("circle", "full");
console.log(vb); // "0 0 409 694"

const vbHalf = getViewBox("square", "upper");
console.log(vbHalf); // "0 0 900 75"
```

--------------------------------

### Tooth ID Format Examples

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/INDEX.md

Examples demonstrating the `teeth-{quadrant}{position}` format for identifying teeth.

```plaintext
teeth-11   (quadrant 1, position 1 → upper-right central incisor)
  teeth-28   (quadrant 2, position 8 → upper-left third molar)
  teeth-35   (quadrant 3, position 5 → lower-left second premolar)
  teeth-47   (quadrant 4, position 7 → lower-right second molar)
```

--------------------------------

### Direct Utility Import Example

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/exports.md

Example of importing utility functions directly from the src directory.

```typescript
import {
  mapToCssVars,
  getToothNotations,
  convertFDIToNotation,
  placements,
  quadrants,
  oldquadrants,
} from "react-odontogram/src/utils";  // Direct import required
```

--------------------------------

### Dynamic Selection Example

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/INDEX.md

Example showing how to dynamically manage and display selected teeth using React state.

```typescript
const [selected, setSelected] = useState([]);

<Odontogram
  onChange={(teeth) => setSelected(teeth.map(t => t.id))}
/>
<p>Selected: {selected.join(", ")}</p>
```

--------------------------------

### Tooth Data Import Example

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/exports.md

Example of importing tooth path data directly from the src directory.

```typescript
import { teethPaths, NewTeethPaths } from "react-odontogram/src/data";
```

--------------------------------

### Direct Utility Import Example (Advanced)

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/exports.md

Advanced example showing direct import of a specific utility function.

```typescript
import { convertFDIToNotation } from "react-odontogram/src/utils";

const universal = convertFDIToNotation("teeth-21", "Universal");  // "9"
const palmer = convertFDIToNotation("teeth-21", "Palmer");  // "1UL"
```

--------------------------------

### Example CSS Styling

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/api-reference/Odontogram.md

Example of how to apply custom CSS properties to style the Odontogram component and its tooltips.

```css
.my-odontogram {
  --dark-blue: #2563eb;
  --base-blue: #60a5fa;
  --light-blue: #93c5fd;
  --odontogram-tooltip-bg: #1e293b;
  --odontogram-tooltip-fg: #f1f5f9;
}
```

--------------------------------

### Line Highlight Path Example (Array)

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/api-reference/data.md

Demonstrates how the `lineHighlightPath` property can be an array of strings, resulting in multiple `<path>` elements being rendered for interior tooth details.

```typescript
lineHighlightPath: [
  "M82.84 60.043c-.01-.855-.193-4.63.256-8.12...",
  "M101.438 68.49c.376-.045 2.284-5.112..."
]
// Renders as two separate paths
```

--------------------------------

### Example Usage

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/api-reference/Odontogram.md

Basic example of how to import and use the Odontogram component with an onChange handler.

```typescript
import { Odontogram } from "react-odontogram";
import "react-odontogram/style.css";

function DentalForm() {
  const handleChange = (selectedTeeth) => {
    console.log("Selected teeth:", selectedTeeth);
    // selectedTeeth is array of ToothDetail objects
  };

  return (
    <Odontogram
      onChange={handleChange}
      notation="FDI"
      theme="light"
      showTooltip={true}
    />
  );
}
```

--------------------------------

### Line Highlight Path Example (Single String)

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/api-reference/data.md

Shows the `lineHighlightPath` property as a single string, which results in a single `<path>` element being rendered for interior tooth details.

```typescript
lineHighlightPath: "M160.472 14.727c.392-.402..."
// Renders as one path
```

--------------------------------

### OdontogramTooltip Example (Internal Usage)

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/api-reference/internal-components.md

Example of how to use the OdontogramTooltip component internally with its props.

```typescript
<OdontogramTooltip
  active={true}
  payload={{
    id: "teeth-21",
    notations: { fdi: "21", universal: "9", palmer: "1UL" },
    type: "Central Incisor",
  }}
  position={{
    x: 400,
    placement: "top",
    margin: 10,
    anchorRect: { top: 200, right: 250, bottom: 250, left: 200 },
  }}
  content={(tooth) => <div>Tooth {tooth?.notations.fdi}</div>}
/>
```

--------------------------------

### Condition Visualization Example

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/INDEX.md

Example of visualizing dental conditions based on patient data.

```typescript
const conditions = patientData.teeth.map(tooth => ({
  label: tooth.condition,
  teeth: [tooth.id],
  fillColor: colorMap[tooth.condition],
  outlineColor: colorMapDark[tooth.condition],
}));

<Odontogram teethConditions={conditions} showLabels readOnly />
```

--------------------------------

### Example Comparison for NewTeethPaths

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/api-reference/data.md

Comparison of outlinePath values for the 'Central Incisor' between circular and square layouts.

```typescript
teethPaths (circular):
outlinePath: "M173.951 1.698c-2.198.16-5.302.862..."

NewTeethPaths (square):
outlinePath: "M397.992 51.339C396.126 51.1841..."
```

--------------------------------

### ToothConditionGroup Example

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/types.md

Example of a ToothConditionGroup object.

```typescript
{
  label: "caries",
  teeth: ["teeth-11", "teeth-21"],
  outlineColor: "#b91c1c",
  fillColor: "#ef4444"
}
```

--------------------------------

### Minimal Usage Example

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/exports.md

Basic import and usage of the Odontogram component.

```typescript
import { Odontogram } from "react-odontogram";
import "react-odontogram/style.css";

<Odontogram onChange={(selected) => console.log(selected)} />
```

--------------------------------

### Example with Custom Colors

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/api-reference/Odontogram.md

Demonstrates how to customize the Odontogram's theme colors.

```typescript
<Odontogram
  theme="dark"
  colors={{
    darkBlue: "#7c9cff",
    baseBlue: "#c7d2fe",
    lightBlue: "#4f46e5",
  }}
/>
```

--------------------------------

### ConditionLabels Example (Internal Usage)

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/api-reference/internal-components.md

Example of how to use the ConditionLabels component internally with sample condition data.

```typescript
<ConditionLabels
  conditions={[
    {
      label: "caries",
      teeth: ["teeth-16"],
      fillColor: "#ef4444",
      outlineColor: "#b91c1c",
    },
    {
      label: "filling",
      teeth: ["teeth-14"],
      fillColor: "#60a5fa",
      outlineColor: "#1d4ed8",
    },
  ]}
  className="my-legend"
/>
```

--------------------------------

### Example with Custom Tooltip

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/api-reference/Odontogram.md

Illustrates how to configure a custom tooltip for teeth, including its placement and content.

```typescript
<Odontogram
  tooltip={{
    placement: "right-start",
    margin: 18,
    content: (tooth) => (
      <div>
        <strong>Tooth {tooth?.notations.fdi}</strong>
        <div>Type: {tooth?.type}</div>
      </div>
    ),
  }}
/>
```

--------------------------------

### Styling Props

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/INDEX.md

Example of using styling-related props for the Odontogram component.

```typescript
<Odontogram
  theme="dark"                                    // Built-in theme
  colors={{
    darkBlue: "#7c9cff",
    baseBlue: "#c7d2fe",
    lightBlue: "#4f46e5",
  }}  // Color overrides
  className="my-chart"                            // CSS classes
  styles={{ maxWidth: "600px" }}                  // Inline styles
/>
```

--------------------------------

### Form Integration Example

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/INDEX.md

Demonstrates integrating the Odontogram component within a standard HTML form.

```typescript
const handleSubmit = (event) => {
  const form = new FormData(event.currentTarget);
  const selected = JSON.parse(form.get("teeth") || "[]");
  console.log("Selected teeth:", selected);
};

<form onSubmit={handleSubmit}>
  <Odontogram name="teeth" />
  <button type="submit">Submit</button>
</form>
```

--------------------------------

### Usage with Multiple Types Example

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/exports.md

Importing and using various types with the Odontogram component.

```typescript
import type {
  OdontogramProps,
  ToothDetail,
  OdontogramColors,
  ToothConditionGroup,
  Notation,
  Theme,
  Placement,
} from "react-odontogram";

const colors: OdontogramColors = {
  darkBlue: "#2563eb",
  baseBlue: "#3b82f6",
};

const conditions: ToothConditionGroup[] = [
  {
    label: "caries",
    teeth: ["teeth-11"],
    fillColor: "#ef4444",
    outlineColor: "#b91c1c",
  },
];

const props: OdontogramProps = {
  colors,
  teethConditions: conditions,
  notation: "FDI" as Notation,
  theme: "light" as Theme,
};
```

--------------------------------

### SVG Rendering Example - Data Flow to SVG

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/api-reference/data.md

Illustrates the process of how odontogram data is transformed into SVG elements, showing the selection of path data based on layout and the rendering of teeth within a transformed group element.

```jsx
<g transform={quadrant.transform}>
  {teethpath.map(tooth => (
    <Teeth {...tooth} name={`teeth-${quadrantIndex}${tooth.name}`} />
  ))}
</g>
```

--------------------------------

### Tooltip Props

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/INDEX.md

Example of configuring tooltip behavior for the Odontogram component.

```typescript
<Odontogram
  showTooltip={true}
  tooltip={{
    placement: "right-start",
    margin: 10,
    content: (tooth) => <div>Tooth {tooth?.notations.fdi}</div>,
  }}
/>
```

--------------------------------

### SVG Rendering Example - Output SVG Structure

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/api-reference/data.md

Shows a sample of the generated SVG output, demonstrating the structure of a group element for a quadrant, including a tooth element with path data for outline, shadow, and highlight.

```xml
<g transform="scale(-1, 1) translate(-409, 0)">
  <g class="teeth-21" onClick={...}>
    <path stroke="..." d={tooth.outlinePath} />
    <path fill="..." d={tooth.shadowPath} />
    <path stroke="..." d={tooth.lineHighlightPath} />
  </g>
  <!-- more teeth -->
</g>
```

--------------------------------

### Example with Tooth Conditions

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/api-reference/Odontogram.md

Shows how to apply visual conditions (like caries or fillings) to specific teeth and display a legend.

```typescript
const conditions = [
  {
    label: "caries",
    teeth: ["teeth-16", "teeth-26", "teeth-36"],
    fillColor: "#ef4444",
    outlineColor: "#b91c1c",
  },
  {
    label: "filling",
    teeth: ["teeth-14", "teeth-24"],
    fillColor: "#60a5fa",
    outlineColor: "#1d4ed8",
  },
];

<Odontogram
  teethConditions={conditions}
  showLabels={true}
  readOnly={true}
/>
```

--------------------------------

### Usage with Types Example

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/exports.md

Importing and using the Odontogram component with TypeScript types.

```typescript
import { Odontogram, type OdontogramProps, type ToothDetail } from "react-odontogram";
import "react-odontogram/style.css";

const handleChange = (teeth: ToothDetail[]) => {
  console.log(teeth);
};

const props: OdontogramProps = {
  onChange: handleChange,
  theme: "dark",
};

<Odontogram {...props} />
```

--------------------------------

### Show teethConditions (with legend)

Source: https://github.com/biomathcode/react-odontogram/blob/main/README.md

Example of how to colorize specific teeth based on conditions and display a legend.

```tsx
import { Odontogram } from "react-odontogram";
import "react-odontogram/style.css";

const conditions = [
  {
    label: "caries",
    teeth: ["teeth-16", "teeth-26", "teeth-36"],
    fillColor: "#ef4444",
    outlineColor: "#b91c1c",
  },
  {
    label: "filling",
    teeth: ["teeth-14", "teeth-24"],
    fillColor: "#60a5fa",
    outlineColor: "#1d4ed8",
  },
];

export default function ConditionsExample() {
  return <Odontogram teethConditions={conditions} showLabels readOnly />;
}
```

--------------------------------

### SVG Path Data Example

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/api-reference/internal-components.md

Example of SVG path data structure for tooth outlines, shadows, and highlights.

```typescript
{
  name: "1",
  type: "Central Incisor",
  outlinePath: "M173.951 1.698c-2.198.16...",
  shadowPath: "M188.269 50.215c19.275-41.867...",
  lineHighlightPath: "M160.472 14.727c.392-.402..."
}
```

--------------------------------

### Render a custom tooltip

Source: https://github.com/biomathcode/react-odontogram/blob/main/README.md

Example of how to customize the tooltip content and placement for each tooth.

```tsx
import { Odontogram } from "react-odontogram";
import "react-odontogram/style.css";

export default function CustomTooltipExample() {
  return (
    <Odontogram
      tooltip={{
        placement: "top",
        content: (payload) => (
          <div style={{ minWidth: 140 }}>
            <strong>Tooth {payload?.notations.fdi}</strong>
            <div>{payload?.type}</div>
            <small>Universal: {payload?.notations.universal}</small>
          </div>
        ),
      }}
    />
  );
}
```

--------------------------------

### Form Integration Example

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/api-reference/Odontogram.md

Illustrates the structure of the hidden input used for form integration, showing its name and value format.

```html
<input type="hidden" name="teeth" value="["teeth-11", "teeth-12"]" />
```

--------------------------------

### Adjust tooltip position

Source: https://github.com/biomathcode/react-odontogram/blob/main/README.md

Example demonstrating how to fine-tune the tooltip's placement and distance from the tooth.

```tsx
import { Odontogram } from "react-odontogram";
import "react-odontogram/style.css";

export default function TooltipPositionExample() {
  return (
    <Odontogram
      tooltip={{
        placement: "right-start", // try: top, right, bottom-end, left-start...
        margin: 18, // larger = farther from tooth, smaller = closer
      }}
    />
  );
}
```

--------------------------------

### ConditionLabels Styling

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/api-reference/internal-components.md

CSS example demonstrating how to style the ConditionLabels component and its items.

```css
.custom-legend {
  display: flex;
  gap: 8px;
  font-family: sans-serif;
  font-size: 14px;
  flex-wrap: wrap;
}

.custom-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.custom-legend span:first-child {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  display: inline-block;
}
```

--------------------------------

### convertFDIToNotation Examples

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/api-reference/utilities.md

Illustrates converting FDI tooth IDs to Universal and Palmer notations.

```typescript
// FDI to Universal
convertFDIToNotation("teeth-11", "Universal"); // "8"
convertFDIToNotation("teeth-28", "Universal"); // "16"
convertFDIToNotation("teeth-35", "Universal"); // "20"

// FDI to Palmer
convertFDIToNotation("teeth-11", "Palmer"); // "1UR"
convertFDIToNotation("teeth-24", "Palmer"); // "4UL"
convertFDIToNotation("teeth-33", "Palmer"); // "3LL"
convertFDIToNotation("teeth-46", "Palmer"); // "6LR"

// FDI to FDI (pass-through)
convertFDIToNotation("teeth-21", "FDI"); // "21"
```

--------------------------------

### Condition Props

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/INDEX.md

Example of using condition props to visualize specific dental conditions.

```typescript
<Odontogram
  teethConditions={[
    {
      label: "caries",
      teeth: ["teeth-11", "teeth-21"],
      fillColor: "#ef4444",
      outlineColor: "#b91c1c",
    },
  ]}
  showLabels={true}                              // Show legend
  readOnly={true}                                // Disable interactions
/>
```

--------------------------------

### getToothNotations Example

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/api-reference/utilities.md

Shows how to generate different notation variants for a tooth using its FDI ID.

```typescript
getToothNotations("teeth-11");
// { fdi: "11", universal: "8", palmer: "1UR" }

getToothNotations("teeth-38");
// { fdi: "38", universal: "17", palmer: "8LL" }

getToothNotations("teeth-45");
// { fdi: "45", universal: "29", palmer: "5LR" }
```

--------------------------------

### mapToCssVars Example

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/api-reference/utilities.md

Demonstrates converting color overrides to CSS custom properties.

```typescript
const colors = { darkBlue: "#1e40af", baseBlue: "#3b82f6" };
const cssVars = mapToCssVars(colors);
// Result: { "--dark-blue": "#1e40af", "--base-blue": "#3b82f6" }

const empty = mapToCssVars({});
// Result: {}
```

--------------------------------

### Display Props

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/INDEX.md

Example of using display-related props to control the Odontogram's appearance and data.

```typescript
<Odontogram
  layout="circle"                                 // circle | square
  showHalf="full"                                 // full | upper | lower
  maxTeeth={8}                                    // 0-8 per quadrant
  notation="FDI"                                  // FDI | Universal | Palmer
/>
```

--------------------------------

### Internal Usage Example of Teeth Component

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/api-reference/internal-components.md

Demonstrates how the internal Teeth component might be used within the Odontogram, including required props and optional styling/event handlers.

```typescript
<Teeth
  name="teeth-21"
  outlinePath="M100 100 L150 120..."
  shadowPath="M100 100 L150 120..."
  lineHighlightPath="M100 100 L150 110"
  selected={true}
  condition={{ fillColor: "#ef4444", outlineColor: "#b91c1c" }}
  onClick={(id) => handleSelect(id)}
  onHover={(id, event) => handleHover(id, event)}
/>
```

--------------------------------

### Initial Selection: defaultSelected

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/configuration.md

Tooth IDs to select when component mounts.

```typescript
<Odontogram defaultSelected={["teeth-11", "teeth-21", "teeth-31"]} />
```

--------------------------------

### Layout: layout

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/configuration.md

Choose tooth arrangement style.

```typescript
<Odontogram layout="circle" />
// or
<Odontogram layout="square" />
```

--------------------------------

### Theme: theme

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/configuration.md

Selects built-in color palette.

```typescript
<Odontogram theme="light" />
// or
<Odontogram theme="dark" />
```

--------------------------------

### CSS Variables

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/configuration.md

Override via CSS on the root container or parent:

```css
.my-odontogram {
  --dark-blue: #1e40af;
  --odontogram-tooltip-bg: #1e293b;
  --odontogram-tooltip-fg: #f1f5f9;
}
```

--------------------------------

### Notation System

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/configuration.md

Selects the dental notation system to display in titles and tooltips.

```typescript
<Odontogram notation="FDI" />         // Shows "11", "21", etc.
<Odontogram notation="Universal" />   // Shows "8", "9", etc.
<Odontogram notation="Palmer" />      // Shows "1UR", "1UL", etc.
```

--------------------------------

### Enable Tooltips

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/configuration.md

Controls whether tooltips are shown on tooth hover or focus.

```typescript
<Odontogram showTooltip={true} />   // Default
<Odontogram showTooltip={false} />  // No tooltips
```

--------------------------------

### Tooltip Placement

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/configuration.md

Controls the placement of the tooltip around the tooth.

```typescript
<Odontogram
  tooltip={{
    placement: "top",
  }}
/>
```

--------------------------------

### Show Condition Legend

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/configuration.md

Renders a legend of condition labels below the chart.

```typescript
<Odontogram teethConditions={conditions} showLabels={true} />
```

--------------------------------

### Package Entry Point

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/exports.md

Exports from the main entry point of the react-odontogram package.

```typescript
export { default } from "./Odontogram";
export * from "./Odontogram";
export type * from "./type";
```

--------------------------------

### CSS Classes

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/configuration.md

Root element receives:
- .Odontogram (always)
- .dark-theme (when theme="dark")
- Any class passed via className prop

```typescript
<Odontogram className="custom-chart" />
// renders: <div class="Odontogram custom-chart">
```

--------------------------------

### Custom Tooltip Content

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/configuration.md

Allows overriding the default tooltip with custom React content.

```typescript
<Odontogram
  tooltip={{
    content: (tooth) => (
      <div>
        <strong>Tooth {tooth?.notations.fdi}</strong>
        <div>Type: {tooth?.type}</div>
        <div>Universal: {tooth?.notations.universal}</div>
      </div>
    ),
  }}
/>
```

--------------------------------

### Change Callback: onChange

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/configuration.md

Called whenever selection changes. Receives array of ToothDetail objects.

```typescript
<Odontogram
  onChange={(selected) => {
    console.log(selected);
    // [{ id: "teeth-11", notations: {...}, type: "Central Incisor" }, ...]
  }}
/>
```

--------------------------------

### Visible Portion

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/configuration.md

Controls whether to render the full chart or only the upper or lower arch.

```typescript
<Odontogram showHalf="full" />    // 4 quadrants
<Odontogram showHalf="upper" />   // 2 upper quadrants
<Odontogram showHalf="lower" />   // 2 lower quadrants
```

--------------------------------

### Tooth Conditions

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/configuration.md

An array of condition groups used to colorize teeth.

```typescript
const conditions = [
  {
    label: "caries",
    teeth: ["teeth-11", "teeth-21"],
    fillColor: "#ef4444",
    outlineColor: "#b91c1c",
  },
  {
    label: "filling",
    teeth: ["teeth-14", "teeth-24"],
    fillColor: "#60a5fa",
    outlineColor: "#1d4ed8",
  },
];

<Odontogram teethConditions={conditions} />
```

--------------------------------

### CSS Import

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/exports.md

How to import the CSS file separately for styling.

```typescript
import "react-odontogram/style.css";
```

--------------------------------

### Change theme and colors

Source: https://github.com/biomathcode/react-odontogram/blob/main/README.md

Demonstrates how to apply a dark theme and override the default color palette, including custom CSS variables for tooltip styling.

```tsx
import { Odontogram } from "react-odontogram";
import "react-odontogram/style.css";

export default function ThemeExample() {
  return (
    <Odontogram
      className="my-odontogram"
      theme="dark"
      colors={{
        darkBlue: "#7c9cff",
        baseBlue: "#c7d2fe",
        lightBlue: "#4f46e5",
      }}
    />
  );
}
```

```css
.my-odontogram {
  --odontogram-tooltip-bg: #0f172a;
  --odontogram-tooltip-fg: #f8fafc;
}
```

--------------------------------

### Color Overrides: colors

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/configuration.md

Override theme colors via the colors prop.

```typescript
<Odontogram
  theme="light"
  colors={{
    darkBlue: "#2563eb",
    baseBlue: "#60a5fa",
    lightBlue: "#93c5fd",
  }}
/>
```

--------------------------------

### Inline Styles: styles

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/configuration.md

Apply inline CSS to the root div via React.CSSProperties.

```typescript
<Odontogram
  styles={{
    maxWidth: "600px",
    margin: "20px auto",
    border: "1px solid #ccc",
  }}
/>
```

--------------------------------

### Tooltip Margin

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/configuration.md

Sets the distance in pixels between the tooltip and the tooth.

```typescript
<Odontogram
  tooltip={{
    margin: 10,   // Default
  }}
/>
```

--------------------------------

### Odontogram Component Import

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/exports.md

Importing the main Odontogram React component.

```typescript
import Odontogram from "react-odontogram";
// or
import { Odontogram } from "react-odontogram";
```

--------------------------------

### Type and Interface Imports

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/exports.md

Importing various types and interfaces from the package.

```typescript
import type {
  // Literal unions
  Notation,
  Theme,
  Placement,
  ToothInteractionEvent,

  // Interfaces
  ToothDetail,
  OdontogramColors,
  OdontogramProps,
  TeethProps,
  OdontogramTooltipProps,

  // Type aliases
  ToothConditionGroup,
  TooltipContentRenderer,
} from "react-odontogram";
```

--------------------------------

### getViewBox Function Import and Usage

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/exports.md

Importing and using the getViewBox function to calculate SVG viewBox.

```typescript
import { getViewBox } from "react-odontogram";

const vb = getViewBox("circle", "full");
// "0 0 409 694"
```

--------------------------------

### Read-Only Mode

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/configuration.md

Disables all selection changes and interactivity.

```typescript
<Odontogram readOnly={true} />
```

--------------------------------

### TeethProps Interface Definition

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/exports.md

Definition of the internal TeethProps interface.

```typescript
interface TeethProps {
  name: string;
  outlinePath: string;
  shadowPath: string;
  lineHighlightPath: string | string[];
  selected?: boolean;
  onClick?: (name: string) => void;
  onKeyDown?: (e: KeyboardEvent<SVGGElement>, name: string) => void;
  children?: ReactNode;
  onHover?: (name: string, event: MouseEvent<SVGGElement>) => void;
  onFocus?: (name: string, event: FocusEvent<SVGGElement>) => void;
  onLeave?: () => void;
  onBlur?: () => void;
  condition?: {
    fillColor?: string;
    outlineColor?: string;
  };
  readOnly?: boolean;
  showLabel?: boolean;
  label?: string;
}

```

--------------------------------

### Placement Type Definition

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/exports.md

Definition of the Placement type for tooltip positioning.

```typescript
type Placement =
  | "top" | "top-start" | "top-end"
  | "right" | "right-start" | "right-end"
  | "bottom" | "bottom-start" | "bottom-end"
  | "left" | "left-start" | "left-end"

```

--------------------------------

### Maximum Teeth

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/configuration.md

Limits the number of teeth rendered per quadrant, typically for baby or mixed dentition.

```typescript
<Odontogram maxTeeth={6} />   // 6 teeth per quadrant (24 total)
<Odontogram maxTeeth={5} />   // 5 teeth per quadrant (20 total)
<Odontogram maxTeeth={8} />   // Default: 8 teeth per quadrant (32 total)
```

--------------------------------

### Single Select Mode: singleSelect

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/configuration.md

When true, only one tooth can be selected at a time. Clicking a selected tooth deselects it.

```typescript
<Odontogram singleSelect={true} />
```

--------------------------------

### Type Hierarchy

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/INDEX.md

Illustrates the hierarchical relationships between various types and interfaces used in the react-odontogram library, including notations, themes, placements, tooth details, and component props.

```typescript
Notation
  ├─ "FDI"
  ├─ "Universal"
  └─ "Palmer"

Theme
  ├─ "light"
  └─ "dark"

Placement (12 values)
  ├─ top, top-start, top-end
  ├─ right, right-start, right-end
  ├─ bottom, bottom-start, bottom-end
  └─ left, left-start, left-end

ToothDetail (interface)
  ├─ id: string
  ├─ notations.fdi: string
  ├─ notations.universal: string
  ├─ notations.palmer: string
  └─ type: string

OdontogramProps (interface)
  ├─ Selection: defaultSelected, singleSelect, onChange, name
  ├─ Visual: theme, colors, className, styles
  ├─ Layout: layout, showHalf, maxTeeth
  ├─ Notation: notation
  ├─ Conditions: teethConditions, showLabels
  ├─ Interaction: readOnly
  ├─ Tooltip: showTooltip, tooltip.{placement, margin, content}
  └─ [See Configuration Reference]

OdontogramColors (interface)
  ├─ darkBlue?: string
  ├─ baseBlue?: string
  └─ lightBlue?: string

ToothConditionGroup (type)
  ├─ label: string
  ├─ teeth: string[]
  ├─ outlineColor: string
  └─ fillColor: string
```

--------------------------------

### ToothDetail Interface Definition

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/exports.md

Definition of the ToothDetail interface.

```typescript
interface ToothDetail {
  id: string;
  notations: {
    fdi: string;
    universal: string;
    palmer: string;
  };
  type: string;
}

```

--------------------------------

### CSS Variables Available

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/INDEX.md

Lists the CSS custom properties available for theming the Odontogram component.

```css
--dark-blue: /* Theme primary color */
--base-blue: /* Theme secondary color */
--light-blue: /* Theme accent color */
--odontogram-tooltip-bg: /* Tooltip background */
--odontogram-tooltip-fg: /* Tooltip text */
```

--------------------------------

### Package.json Exports Configuration

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/exports.md

Shows the 'exports' field in package.json, which defines how different module formats (ESM, CommonJS) are exposed by the package.

```json
{
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "require": "./dist/index.js",
      "import": "./dist/index.mjs",
      "default": "./dist/index.mjs"
    },
    "./style.css": "./dist/index.css"
  }
}
```

--------------------------------

### OdontogramTooltip Rendering

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/api-reference/internal-components.md

HTML structure for the OdontogramTooltip, including content and arrow indicator.

```html
<div class="odontogram-tooltip" style="...">
  {content or default tooth info}
  <div class="odontogram-tooltip-arrow" />
</div>
```

--------------------------------

### Type: TooltipContentRenderer

Source: https://github.com/biomathcode/react-odontogram/blob/main/_autodocs/types.md

Function type for custom tooltip content rendering.

| Parameter | Type | Optional | Description |
|-----------|------|----------|-------------|
| `payload` | `ToothDetail` | Yes | Currently hovered tooth details, or undefined if no tooth is active |
| **Returns** | `ReactNode` | — | React element(s) to render inside the tooltip |

Used By
- `OdontogramProps.tooltip.content

```typescript
type TooltipContentRenderer = (payload?: ToothDetail) => ReactNode
```

```typescript
const renderer: TooltipContentRenderer = (tooth) => (
  tooth ? (
    <div>
      <strong>Tooth {tooth.notations.fdi}</strong>
      <p>{tooth.type}</p>
    </div>
  ) : null
);
```