@1771technologies/lytenyte-pro 1.0.20 → 2.0.0-dev.1

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/dist/__play__/alpha.play.d.ts

@@ -0,0 +1,3 @@
+import "@1771technologies/lytenyte-design/fonts.css";
+import "../../css/grid-full.css";
+export default function Experimental(): import("react/jsx-runtime").JSX.Element;

package/dist/__play__/alpha.play.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTheme } from "@1771technologies/play-frame";
+import "@1771technologies/lytenyte-design/fonts.css";
+import "../../css/grid-full.css";
+import { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";
+import { ViewportShadows } from "@1771technologies/lytenyte-core/components";
+import { useClientDataSource } from "../data-source-client/use-client-data-source.js";
+import { useMemo, useState } from "react";
+import { RowGroupCell } from "../components/row-group-cell.js";
+import { Grid } from "../index.js";
+const columns = [
+    { id: "age", name: "bob", groupPath: ["Alpha", "Beta"], type: "number" },
+    { id: "marital", groupPath: ["Alpha"] },
+    { id: "default", groupPath: ["Top Dog"] },
+    { id: "housing" },
+    { id: "loan" },
+    { id: "contact", groupPath: ["Alpha", "Beta", "Carlson"] },
+    { id: "day", groupPath: ["Alpha", "Beta"] },
+    { id: "month", groupPath: ["Alpha"] },
+    { id: "duration" },
+    { id: "campaign" },
+    { id: "pdays", groupPath: ["Carlson"] },
+    { id: "previous", groupPath: ["Carlson", "Delta"] },
+    { id: "poutcome" },
+    { id: "y" },
+];
+const sumAge = (_, rows) => rows.reduce((acc, x) => x.data.balance + acc, 0);
+export default function Experimental() {
+    const [pivotMode, setPivotMode] = useState(false);
+    const ds = useClientDataSource({
+        data: bankDataSmall,
+        rowGroupDefaultExpansion: true,
+        group: [{ id: "marital" }, { id: "contact" }, { id: "age" }],
+        pivotMode,
+        pivotGrandTotals: "bottom",
+        pivotModel: {
+            columns: [{ id: "contact" }, { id: "education" }],
+            rows: [{ id: "marital" }, { id: "age" }],
+            measures: [
+                {
+                    dim: { id: "Balance", type: "number" },
+                    fn: sumAge,
+                },
+            ],
+        },
+    });
+    const pivotProps = ds.usePivotProps();
+    const [rowGroupColumn, setRowGroupColumn] = useState({
+        cellRenderer: RowGroupCell,
+    });
+    const { resolvedTheme } = useTheme();
+    return (_jsxs(_Fragment, { children: [_jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", padding: "8px" }, children: _jsx("button", { onClick: () => setPivotMode((prev) => !prev), children: "Toggle Pivot Mode" }) }), _jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: _jsx("div", { className: "ln-grid " + (resolvedTheme === "light" ? "ln-light" : "ln-dark"), style: { height: "90vh", width: "90vw" }, children: _jsx(Grid, { columns: columns, columnBase: useMemo(() => ({ movable: true, resizable: true, width: 100 }), []), slotShadows: ViewportShadows, columnGroupRenderer: (props) => {
+                            const label = props.groupPath.at(-1);
+                            return (_jsxs("div", { children: [label, props.collapsible && (_jsx("button", { onClick: () => props.api.columnToggleGroup(props.groupPath), children: ">" }))] }));
+                        }, rowSource: ds, rowGroupColumn: rowGroupColumn, onRowGroupColumnChange: setRowGroupColumn, rowSelectionMode: "multiple", ...pivotProps }) }) })] }));
+}

package/dist/__play__/basic-server-data/data.d.ts

@@ -0,0 +1,10 @@
+export type SalaryData = (typeof data)[number];
+export declare const data: {
+    id: string;
+    Age: number;
+    Gender: string;
+    "Education Level": string;
+    "Job Title": string;
+    "Years of Experience": number;
+    Salary: number;
+}[];