fix: added support for condition color/showing as well

Author: biomathcode

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "react-odontogram",
   "description": "dental chart for selecting teeth",
-  "version": "0.4.9",
+  "version": "0.5.0",
   "author": "Pratik Sharma <sharma.pratik2016@gmail.com>",
   "license": "MIT",
   "keywords": [
@@ -30,7 +30,7 @@
     "link:self": "pnpm link --global",
     "prepare": "lefthook install",
     "deploy-storybook": "gh-pages -d storybook-static",
-    "test:coverage": "vitest run --coverage"
+    "coverage": "vitest run --coverage"
   },
   "types": "./dist/index.d.ts",
   "exports": {
@@ -118,4 +118,4 @@
       "lefthook"
     ]
   }
-}
+}

package.json

@@ -0,0 +1,59 @@
+import { FC } from "react";
+import type { ToothConditionGroup } from "./type";
+
+type ConditionLabelsProps = {
+    conditions?: ToothConditionGroup[];
+    className?: string;
+};
+
+export const ConditionLabels: FC<ConditionLabelsProps> = ({
+    conditions,
+    className = "",
+}) => {
+    if (!conditions || conditions.length === 0) return null;
+
+    return (
+        <div
+            className={className}
+            style={{
+                display: "flex",
+                gap: 8,
+                fontFamily: "sans-serif",
+                fontSize: 14,
+                flexWrap: "wrap",
+            }}
+            role="list"
+            aria-label="Tooth condition legend"
+        >
+            {conditions.map((condition) => (
+                <div
+                    key={condition.label}
+                    role="listitem"
+                    style={{
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 8,
+                    }}
+                >
+                    <span
+                        aria-hidden="true"
+                        style={{
+                            width: 14,
+                            height: 14,
+                            borderRadius: 4,
+                            background: condition.fillColor,
+                            border: `2px solid ${condition.outlineColor ?? condition.fillColor
+                                }`,
+                            display: "inline-block",
+                        }}
+                    />
+                    <span style={{ textTransform: "capitalize" }}>
+                        {condition.label}
+                    </span>
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default ConditionLabels;