@lmb-it/kitsconcerto-native 0.1.284 → 0.1.286

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lmb-it/kitsconcerto-native",
-  "version": "0.1.284",
+  "version": "0.1.286",
   "description": "KitsConcerto — Native (React Native) UI components",
   "main": "index.cjs",
   "module": "index.js",
@@ -38,15 +38,24 @@
     "yup-password": "^0.4.0"
   },
   "peerDependencies": {
+    "@bam.tech/react-native-image-resizer": "^3.0.11",
+    "@react-native-community/image-editor": "^5.0.0",
     "chart.js": "^4.5.0",
     "jspdf": "^3.0.1",
     "lucide-react": "^0.400.0 || ^1.0.0",
     "react": "^19.0.0",
     "react-native": ">=0.70.0",
+    "react-native-gesture-handler": ">=2.0.0",
     "react-router-dom": "^7.9.4",
     "xlsx": "^0.18.4"
   },
   "peerDependenciesMeta": {
+    "@bam.tech/react-native-image-resizer": {
+      "optional": true
+    },
+    "@react-native-community/image-editor": {
+      "optional": true
+    },
     "chart.js": {
       "optional": true
     },
@@ -59,6 +68,9 @@
     "react-native": {
       "optional": true
     },
+    "react-native-gesture-handler": {
+      "optional": true
+    },
     "react-router-dom": {
       "optional": true
     },

package/packages/types/src/Theme/defaultTheme.cjs

@@ -797,10 +797,14 @@ const defaultTheme = {
       },
       itemDisabled: {
         style: { color: "text-muted", opacity: 0.55, cursor: "not-allowed" }
-      }
-    },
-    // ─── MultiSelect (chip + per-item checkbox slots) ─────
-    MultiSelect: {
+      },
+      /* ─── Chips (MultiSelect display="chip" AND Tags) ───────
+         ⛔ THESE LIVE ON THE BASE GROUP BECAUSE TWO CONTROLS DRAW CHIPS
+         AND THEY DISAGREED. The values below used to sit under
+         `MultiSelect`, so MultiSelect drew a pill and the Tags field —
+         AutoComplete with `isMultiple`, which hardcoded its own
+         background+colour and read no slot at all — drew PrimeReact's
+         square token right next to it. One definition, both readers. */
       token: {
         style: {
           backgroundColor: "brand-tint",
@@ -819,6 +823,22 @@ const defaultTheme = {
       tokenIcon: {
         style: { color: "brand-deep", marginLeft: 4, fontSize: 12, cursor: "pointer" }
       },
+      /* ⚠️ THE CHIPS BOX IS FLAT BY DEFAULT, AND THAT IS NOT THE SAME AS
+         UNSTYLEABLE. `KitsContainer` already paints the `inputGroup`
+         border around the field, so a second border here would double it.
+         The slot exists so a consumer CAN paint it — an `attached` tags
+         field has no KitsContainer at all and needs to draw its own
+         chrome. See `IChipInputSlots.tokenContainer`. */
+      tokenContainer: {
+        style: {
+          backgroundColor: "transparent",
+          borderWidth: 0
+        }
+      }
+    },
+    // ─── MultiSelect (per-item checkbox slots; chips inherit
+    //     from the Select base group above) ───────────────────
+    MultiSelect: {
       checkboxBox: {
         style: {
           borderColor: "border-strong",
@@ -1182,6 +1202,117 @@ const defaultTheme = {
       }
     },
     // ─── Sidebar ──────────────────────────────────────────
+    // ─── ImageCropper ─────────────────────────────────
+    // ⚠️ NUMBERS, NOT CSS STRINGS, FOR ANYTHING NATIVE ALSO READS — the
+    // same rule `Input.inputGroup` carries: React Native's ViewStyle wants
+    // `borderWidth: 1`, web treats the bare `1` as `1px`, and one shared
+    // declaration then renders the same frame on both.
+    ImageCropper: {
+      root: {
+        style: {
+          backgroundColor: "surface-card",
+          borderRadius: 16,
+          overflow: "hidden"
+        }
+      },
+      header: {
+        style: {
+          paddingLeft: 16,
+          paddingRight: 16,
+          paddingTop: 12,
+          paddingBottom: 12,
+          borderBottomWidth: 1,
+          borderColor: "border"
+        }
+      },
+      title: {
+        style: { fontSize: 16, fontWeight: "600", fontColor: "text-primary" }
+      },
+      content: {
+        style: { padding: 16, gap: 12 }
+      },
+      /* The stage. Dark on purpose: a photo reads against it in either
+         colour mode, and a light stage makes every pale image look like
+         it has no edges. */
+      container: {
+        style: {
+          backgroundColor: "black-alpha-90",
+          borderRadius: 12,
+          overflow: "hidden"
+        }
+      },
+      footer: {
+        style: {
+          paddingLeft: 16,
+          paddingRight: 16,
+          paddingTop: 12,
+          paddingBottom: 12,
+          borderTopWidth: 1,
+          borderColor: "border",
+          gap: 8
+        }
+      },
+      icon: { style: { fontColor: "text-primary" } },
+      text: { style: { fontSize: 12, fontColor: "text-secondary" } },
+      /* ⛔ THE SCRIM IS AN ALPHA TOKEN, NOT A SOLID. `black-alpha-*` is
+         literal in both colour modes — a scrim that inverted in dark mode
+         would light UP the area the user is cropping away. */
+      shade: { style: { backgroundColor: "black-alpha-60" } },
+      cropWindow: { style: { borderWidth: 2, borderColor: "#FFFFFF" } },
+      gridLine: { style: { backgroundColor: "white-alpha-40" } },
+      handle: {
+        style: {
+          backgroundColor: "#FFFFFF",
+          borderRadius: 2,
+          width: 14,
+          height: 14
+        }
+      },
+      zoomChip: {
+        style: {
+          backgroundColor: "black-alpha-60",
+          fontColor: "#FFFFFF",
+          borderRadius: 999,
+          paddingLeft: 10,
+          paddingRight: 10,
+          paddingTop: 2,
+          paddingBottom: 2,
+          fontSize: 12,
+          fontWeight: "600"
+        }
+      },
+      previewFrame: {
+        style: {
+          borderWidth: 1,
+          borderColor: "border",
+          borderRadius: 12,
+          overflow: "hidden",
+          backgroundColor: "bg-subtle"
+        }
+      },
+      dropZone: {
+        style: {
+          borderWidth: 1,
+          borderStyle: "dashed",
+          borderColor: "border-strong",
+          borderRadius: 12,
+          backgroundColor: "bg-subtle",
+          padding: 24
+        }
+      },
+      progressFill: { style: { backgroundColor: "primary", height: 4 } },
+      /* ⛔ THE SHAPE SLOT, AND IT CARRIES THE *RECTANGLE'S* RADIUS. The
+         circle is NOT a 999 pill set here — `maskShape: 'circle'` makes
+         the component use a true 50%, because a pill radius on a window
+         that is wider than it is tall gives a STADIUM, not a circle.
+         That is exactly what shipped for one render of the 16:9 cover
+         story: 999 leaked out of this slot into the rectangle case and
+         drew a lozenge. What belongs here is the corner rounding a
+         RECTANGULAR window should have; the circle overrides it. */
+      mask: { style: { borderRadius: 12 } },
+      track: { style: { backgroundColor: "bg-accent", borderRadius: 999, height: 4 } },
+      thumb: { style: { backgroundColor: "primary", borderRadius: 999 } }
+    },
     Sidebar: {
       root: {
         style: {