@cratis/components 3.5.1 → 3.6.1

package/dist/esm/theme.css

@@ -179,7 +179,7 @@
 .cratis-theme [data-invalid] > [data-scope='inputtext'],
 .cratis-theme [data-scope='inputtext'][aria-invalid='true'] { border-color: var(--cratis-red-500); }
 
-/* ── Select / datepicker popup ───────────────────────────────────────────── */
+/* ── Select popup ────────────────────────────────────────────────────────── */
 .cratis-theme [data-scope='select'][data-part='list'],
 .cratis-theme [data-scope='select'][data-part='popup'] {
     background: var(--cratis-surface-overlay);
@@ -192,6 +192,77 @@
 .cratis-theme [data-scope='select'][data-part='option']:hover,
 .cratis-theme [data-scope='select'][data-part='option'][data-selected] { background: var(--cratis-surface-hover); }
 
+/* ── DatePicker popup ────────────────────────────────────────────────────── */
+.cratis-theme [data-scope='datepicker'][data-part='popup'] {
+    background: var(--cratis-surface-overlay);
+    border: 1px solid var(--cratis-surface-border);
+    border-radius: var(--cratis-border-radius, 6px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+    padding: 0.75rem;
+}
+.cratis-theme [data-scope='datepicker'][data-part='header'] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+}
+.cratis-theme [data-scope='datepicker'][data-part='title'] { display: flex; align-items: center; gap: 0.35rem; font-weight: 600; }
+.cratis-theme [data-scope='datepicker'][data-part='prev'],
+.cratis-theme [data-scope='datepicker'][data-part='next'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    cursor: pointer;
+}
+.cratis-theme [data-scope='datepicker'][data-part='selectmonth'],
+.cratis-theme [data-scope='datepicker'][data-part='selectyear'] {
+    padding: 0.15rem 0.4rem;
+    border-radius: var(--cratis-border-radius, 6px);
+    cursor: pointer;
+}
+.cratis-theme [data-scope='datepicker'][data-part='prev']:hover,
+.cratis-theme [data-scope='datepicker'][data-part='next']:hover,
+.cratis-theme [data-scope='datepicker'][data-part='selectmonth']:hover,
+.cratis-theme [data-scope='datepicker'][data-part='selectyear']:hover { background: var(--cratis-surface-hover); }
+.cratis-theme [data-scope='datepicker'][data-part='table'] { width: 100%; border-collapse: collapse; }
+.cratis-theme [data-scope='datepicker'][data-part='tableheadcell'] {
+    padding: 0.4rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--cratis-text-color-secondary);
+    text-align: center;
+}
+.cratis-theme [data-scope='datepicker'][data-part='tablebodycell'] { padding: 0.15rem; text-align: center; }
+.cratis-theme [data-scope='datepicker'][data-part='day'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    cursor: pointer;
+}
+.cratis-theme [data-scope='datepicker'][data-part='day']:hover { background: var(--cratis-surface-hover); }
+.cratis-theme [data-scope='datepicker'][data-part='day'][data-selected] {
+    background: var(--cratis-primary-color);
+    color: var(--cratis-primary-color-text);
+}
+.cratis-theme [data-scope='datepicker'][data-part='day'][data-today] { border: 1px solid var(--cratis-primary-color); }
+.cratis-theme [data-scope='datepicker'][data-part='day'][data-outside] { color: var(--cratis-text-color-secondary); opacity: 0.5; }
+.cratis-theme [data-scope='datepicker'][data-part='day'][data-disabled] { cursor: not-allowed; opacity: 0.4; }
+.cratis-theme [data-scope='datepicker'][data-part='buttonbar'] {
+    display: flex;
+    justify-content: space-between;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+    padding-top: 0.5rem;
+    border-top: 1px solid var(--cratis-surface-border);
+}
+
 /* ── Checkbox / radio ────────────────────────────────────────────────────── */
 .cratis-theme [data-scope='checkboxbox'],
 .cratis-theme [data-scope='radiobutton'][data-part='box'] {
@@ -368,16 +439,6 @@
 .cratis-theme [data-scope='rating'] .pi-star { color: var(--cratis-surface-border); }
 .cratis-theme [data-scope='rating'] .pi-star-fill { color: var(--cratis-orange-500, #f59e0b); }
 
-/* ── ProgressSpinner (BusyIndicatorDialog) ───────────────────────────────────
-   The unstyled primitive is a bare SVG circle with no stroke or motion; give it
-   a visible ring and spin it so the busy indicator actually shows. */
-.cratis-theme [data-scope='progressspinner'][data-part='root'] {
-    display: inline-block; width: 2.5rem; height: 2.5rem;
-    animation: cratis-spin 1s linear infinite;
-}
-.cratis-theme [data-scope='progressspinner'] svg { width: 100%; height: 100%; }
-.cratis-theme [data-scope='progressspinner'] circle {
-    fill: none; stroke: var(--cratis-primary-color, #3b82f6); stroke-width: 4;
-    stroke-linecap: round; stroke-dasharray: 80 200;
-}
-@keyframes cratis-spin { to { transform: rotate(360deg); } }
+/* ProgressSpinner sizing/stroke/motion is unconditional (not theme-gated) —
+   see Display/ProgressSpinner.css. It reads --cratis-primary-color, so it
+   still follows whichever preset this theme or styled mode applies. */

package/package.json

@@ -1,8 +1,24 @@
 {
     "name": "@cratis/components",
-    "version": "3.5.1",
-    "description": "",
+    "version": "3.6.1",
+    "description": "React components for CQRS and event-sourced apps — command dialogs, typed forms, and query-backed data tables for Cratis Arc",
+    "keywords": [
+        "react",
+        "react-components",
+        "component-library",
+        "cqrs",
+        "event-sourcing",
+        "cratis",
+        "arc",
+        "chronicle",
+        "commands",
+        "queries",
+        "data-table",
+        "forms",
+        "typescript"
+    ],
     "author": "Cratis",
+    "homepage": "https://www.cratis.io/components/",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -38,6 +54,10 @@
             "types": "./dist/esm/Canvas/index.d.ts",
             "import": "./dist/esm/Canvas/index.js"
         },
+        "./Chat": {
+            "types": "./dist/esm/Chat/index.d.ts",
+            "import": "./dist/esm/Chat/index.js"
+        },
         "./CommandDialog": {
             "types": "./dist/esm/CommandDialog/index.d.ts",
             "import": "./dist/esm/CommandDialog/index.js"
@@ -145,12 +165,12 @@
     "dependencies": {
         "allotment": "1.20.5",
         "framer-motion": "13.1.1",
-        "pixi.js": "^8.20.0",
+        "pixi.js": "^8.20.1",
         "react-icons": "5.7.0",
         "ts-deepmerge": "8.0.0"
     },
     "devDependencies": {
-        "@cratis/arc.vite": "22.1.0",
+        "@cratis/arc.vite": "22.4.0",
         "@primereact/core": "11.1.0",
         "@primereact/headless": "11.1.0",
         "@primereact/hooks": "11.1.0",