@1771technologies/lytenyte-pro 1.0.19 → 2.0.0-dev.0

package/css/design.css

@@ -0,0 +1 @@
+@import "@1771technologies/lytenyte-design/design.css";

package/css/fonts.css

@@ -0,0 +1 @@
+@import "@1771technologies/lytenyte-design/fonts.css";

package/css/grid-full.css

@@ -0,0 +1,3 @@
+@import "./design.css";
+@import "./all-colors.css";
+@import "./grid.css";

package/css/grid.css

@@ -0,0 +1,81 @@
+@import "@1771technologies/lytenyte-core/grid.css";
+
+@layer ln-grid {
+  .ln-grid {
+    /* CELL SELECTION */
+    [data-ln-cell-selection-rect]:not([data-ln-cell-selection-is-unit="true"]) {
+      background-color: var(--ln-primary-10);
+      box-sizing: border-box;
+
+      &[data-ln-cell-selection-is-deselect="true"] {
+        background-color: color-mix(in srgb, var(--ln-red-50) 20%, transparent 80%);
+
+        &[data-ln-cell-selection-border-top="true"],
+        &[data-ln-cell-selection-border-bottom="true"],
+        &[data-ln-cell-selection-border-start="true"],
+        &[data-ln-cell-selection-border-end="true"] {
+          border-color: var(--ln-red-50);
+        }
+      }
+
+      &[data-ln-cell-selection-border-top="true"] {
+        border-top: 1px solid var(--ln-primary-50);
+      }
+      &[data-ln-cell-selection-border-bottom="true"] {
+        border-bottom: 1px solid var(--ln-primary-50);
+      }
+      &[data-ln-cell-selection-border-start="true"] {
+        border-inline-start: 1px solid var(--ln-primary-50);
+      }
+      &[data-ln-cell-selection-border-end="true"] {
+        border-inline-end: 1px solid var(--ln-primary-50);
+      }
+    }
+
+    [data-ln-component-group-cell] {
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      gap: 8px;
+
+      padding-inline-start: calc(var(--ln-space-40) * var(--ln-row-depth));
+
+      &[data-ln-component-group-cell-expandable="false"]:not([data-ln-component-group-cell-depth="0"]) {
+        /* space 60 for the icon and 8px for the gap. */
+        padding-inline-start: calc(var(--ln-space-40) * var(--ln-row-depth) + var(--ln-space-60));
+      }
+
+      &[data-ln-component-group-cell-expanded="true"]
+        [data-ln-component-group-cell-expander="true"]:not([data-ln-component-group-cell-error="true"]) {
+        transform: rotate(90deg);
+      }
+
+      &[data-ln-component-group-cell-expanded="true"] [data-ln-component-group-cell-error="true"] {
+        color: var(--ln-red-50);
+      }
+
+      & [data-ln-component-group-cell-expander="true"] {
+        border-radius: var(--ln-radius-field-md);
+        background-color: transparent;
+        border: transparent;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--ln-space-60);
+        height: var(--ln-space-60);
+        min-width: var(--ln-space-60);
+        min-height: var(--ln-space-60);
+        max-width: var(--ln-space-60);
+        max-height: var(--ln-space-60);
+        margin-inline-start: calc(var(--ln-padding-horizontal-cell) * -1 + 3px);
+
+        &:hover {
+          background-color: var(--ln-bg-button-light);
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}

package/css/light-dark.css

@@ -0,0 +1,3 @@
+@import "./design.css";
+@import "@1771technologies/lytenyte-design/light-dark.css";
+@import "./grid.css";

package/css/light.css

@@ -0,0 +1 @@
+@import "@1771technologies/lytenyte-design/light.css";

package/css/pill-manager.css

@@ -0,0 +1,184 @@
+@import "./components.css";
+
+@layer ln-grid {
+  [data-ln-pill-root][data-ln-orientation="horizontal"] {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    container-type: inline-size;
+  }
+
+  [data-ln-pill-root][data-ln-orientation="vertical"] {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+  }
+
+  [data-ln-pill-label] {
+    display: flex;
+    align-items: center;
+    gap: var(--ln-space-05);
+    font-family: var(--ln-typeface);
+    font-size: var(--ln-font-md);
+    font-weight: 500;
+    color: var(--ln-text);
+    padding-inline-start: var(--ln-space-30);
+    padding-inline-end: var(--ln-space-20);
+  }
+
+  [data-ln-pill-root][data-ln-orientation="horizontal"] {
+    [data-ln-pill-row] {
+      display: grid;
+      grid-template-columns: subgrid;
+      align-items: center;
+      grid-column: 1 / -1;
+      box-sizing: border-box;
+
+      min-height: 52px;
+
+      border-bottom: 1px solid var(--ln-border);
+    }
+
+    [data-ln-pill-row][data-ln-expanded="true"] {
+      padding-block: var(--ln-space-20);
+    }
+
+    [data-ln-pill-row][data-ln-expanded="true"] [data-ln-pill-container] {
+      flex-wrap: wrap;
+
+      & [data-ln-pill-item-container] {
+        padding-block: var(--ln-space-05);
+      }
+    }
+  }
+
+  [data-ln-pill-root][data-ln-orientation="vertical"] {
+    [data-ln-pill-row] {
+      display: grid;
+      grid-template-rows: subgrid;
+      grid-row: span 2;
+
+      box-sizing: border-box;
+      min-height: 52px;
+
+      border: 1px solid var(--ln-border-xstrong);
+      border-radius: var(--ln-radius);
+    }
+
+    [data-ln-pill-label] {
+      padding-block: var(--ln-space-30);
+      border-bottom: 1px solid var(--ln-border-xstrong);
+    }
+  }
+
+  @container (width < 700px) {
+    [data-ln-pill-label-text] {
+      display: none;
+    }
+  }
+
+  [data-ln-pill-container] {
+    display: flex;
+    flex-direction: column;
+
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    &[data-ln-orientation="horizontal"] {
+      align-items: center;
+      flex-direction: row;
+    }
+    &[data-ln-orientation="vertical"] {
+      padding-block: var(--ln-space-20);
+    }
+
+    &[data-ln-over="true"] {
+      background-color: var(--ln-primary-10);
+    }
+  }
+
+  [data-ln-pill-container][data-ln-orientation="horizontal"] [data-ln-pill-item-container] {
+    padding-block: calc(var(--ln-space-30) - 2px);
+  }
+  [data-ln-pill-container][data-ln-orientation="vertical"] [data-ln-pill-item-container] {
+    padding-block: calc(var(--ln-space-10) - 2px);
+    padding-inline: var(--ln-space-30);
+  }
+
+  [data-ln-pill-item-container] {
+    padding-inline: var(--ln-space-05);
+
+    font-family: var(--ln-typeface);
+    font-size: var(--ln-font-sm);
+    font-weight: 500;
+    color: var(--ln-text);
+
+    &[data-ln-pill-active="false"] {
+      opacity: 0.5;
+
+      transition: opacity var(--ln-transition-duration) var(--ln-transition-fn);
+
+      &:hover {
+        opacity: 0.75;
+      }
+    }
+
+    & [data-ln-pill-item] {
+      display: flex;
+      align-items: center;
+      background-color: var(--ln-bg);
+      border-radius: var(--ln-radius);
+      padding-block: var(--ln-space-05);
+      padding-inline: var(--ln-space-10);
+      height: 30px;
+      min-height: 30px;
+      max-height: 30px;
+      border: 1px solid transparent;
+      cursor: pointer;
+
+      white-space: nowrap;
+
+      &:focus-visible {
+        outline: 1px solid var(--ln-primary-50);
+      }
+    }
+
+    &[data-ln-draggable="true"] [data-ln-pill-item] {
+      padding-inline-start: var(--ln-space-02);
+    }
+
+    &[data-ln-pill-type="measures"] [data-ln-pill-item] {
+      background-color: var(--ln-measures-fill);
+      border: 1px solid var(--ln-measures-stroke);
+    }
+
+    &[data-ln-pill-type="columns"] [data-ln-pill-item] {
+      background-color: var(--ln-column-fill);
+      border: 1px solid var(--ln-column-stroke);
+    }
+    &[data-ln-pill-type="row-pivots"] [data-ln-pill-item] {
+      background-color: var(--ln-row-pivot-fill);
+      border: 1px solid var(--ln-row-pivot-stroke);
+    }
+    &[data-ln-pill-type="column-pivots"] [data-ln-pill-item] {
+      background-color: var(--ln-column-pivot-fill);
+      border: 1px solid var(--ln-column-pivot-stroke);
+    }
+
+    &[data-ln-drag-active="true"] [data-ln-pill-item] {
+      transform: scale(1.025);
+    }
+  }
+
+  [data-ln-pill-expander] {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding-inline: var(--ln-space-30);
+    border-inline-start: 1px solid var(--ln-border);
+  }
+}

package/css/shadcn-vars.css

@@ -0,0 +1 @@
+@import "@1771technologies/lytenyte-design/shadcn-vars.css";

package/css/shadcn.css

@@ -0,0 +1 @@
+@import "@1771technologies/lytenyte-design/shadcn.css";

package/css/teal.css

@@ -0,0 +1 @@
+@import "@1771technologies/lytenyte-design/teal.css";

package/css/term.css

@@ -0,0 +1 @@
+@import "@1771technologies/lytenyte-design/term.css";

package/css/tw.css

@@ -0,0 +1 @@
+@import "@1771technologies/lytenyte-core/tw.css";

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@1771technologies/lytenyte-pro",
   "description": "Blazingly fast headless React data grid with 100s of features.",
-  "version": "1.0.19",
+  "version": "2.0.0-dev.0",
   "type": "module",
   "license": "COMMERCIAL",
   "files": [
     "dist",
-    "main.css",
+    "css",
     "LICENSE",
     "README.md"
   ],
@@ -32,27 +32,40 @@
       "import": "./dist/index.js",
       "require": "./dist/index.js"
     },
-    "./icons": {
-      "types": "./dist/icons/index.d.ts",
-      "import": "./dist/icons/index.js",
-      "require": "./dist/icons/index.js"
+    "./components": {
+      "types": "./dist/components.d.ts",
+      "import": "./dist/components.js",
+      "require": "./dist/components.js"
     },
-    "./types": {
-      "types": "./dist/+types.d.ts",
-      "import": "./dist/+types.js",
-      "require": "./dist/+types.js"
-    },
-    "./grid.css": "./main.css"
+    "./grid.css": "./css/grid.css",
+    "./grid-full.css": "./css/grid-full.css",
+    "./light-dark.css": "./css/light-dark.css",
+    "./all-colors.css": "./css/all-colors.css",
+    "./cotton-candy.css": "./css/cotton-candy.css",
+    "./dark.css": "./css/dark.css",
+    "./design.css": "./css/design.css",
+    "./light.css": "./css/light.css",
+    "./shadcn.css": "./css/shadcn.css",
+    "./teal.css": "./css/teal.css",
+    "./term.css": "./css/term.css",
+    "./tw.css": "./css/tw.css",
+    "./components.css": "./css/components.css",
+    "./pill-manager.css": "./css/pill-manager.css",
+    "./fonts.css": "./css/fonts.css"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@1771technologies/lytenyte-shared": "1.0.19",
-    "@1771technologies/lytenyte-core": "1.0.19"
+    "@1771technologies/lytenyte-shared": "2.0.0-dev.0",
+    "@1771technologies/lytenyte-design": "2.0.0-dev.0",
+    "@1771technologies/lytenyte-core": "2.0.0-dev.0"
+  },
+  "devDependencies": {
+    "@1771technologies/grid-sample-data": "2.0.0-dev.0"
   },
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react": "18.0.0 || ^19.0.0",
+    "react-dom": "18.0.0 || ^19.0.0"
   }
 }