@gridui/data-cell 0.0.0-stage → 1.0.0

package/README.md

@@ -1,3 +1,8 @@
-# Temporary Holding Version
+# @gridui/data-cell
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Core family. Public API: `DataBadge`, `DataBadgeProps`, `DataBar`, `DataBarProps`, `DataValue`, `DataValueProps`.
+
+Import components from `@gridui/data-cell` and load `@gridui/data-cell/styles.css` after Theme.
+Load styles for any composed dependency used by this family. Applications own routes, labels, state persistence, and branding.
+
+See [component ownership](../../docs/component-ownership.md) and [release history](.changeset/history/).

package/dist/data-badge/data-badge.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @author WMXPY
+ * @package Data Cell
+ * @namespace DataBadge
+ * @description Data Badge
+ */
+import type { ComponentPropsWithRef, FC } from "react";
+export type DataBadgeProps = ComponentPropsWithRef<"span"> & {
+    readonly tone?: "neutral" | "accent";
+};
+export declare const DataBadge: FC<DataBadgeProps>;

package/dist/data-badge/style.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @author WMXPY
+ * @package Data Cell
+ * @namespace DataBadge
+ * @description Style
+ */
+export declare const dataBadgeStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/data-bar/data-bar.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @author WMXPY
+ * @package Data Cell
+ * @namespace DataBar
+ * @description Data Bar
+ */
+import type { ComponentPropsWithRef, FC } from "react";
+export type DataBarProps = ComponentPropsWithRef<"span"> & {
+    readonly value: number;
+    readonly maximum: number;
+    readonly partial?: boolean;
+};
+export declare const DataBar: FC<DataBarProps>;

package/dist/data-bar/style.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @author WMXPY
+ * @package Data Cell
+ * @namespace DataBar
+ * @description Style
+ */
+export declare const dataBarStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const dataBarTrackStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/data-value/data-value.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @author WMXPY
+ * @package Data Cell
+ * @namespace DataValue
+ * @description Data Value
+ */
+import type { ComponentPropsWithRef, FC, ReactNode } from "react";
+export type DataValueProps = ComponentPropsWithRef<"span"> & {
+    readonly detail?: ReactNode;
+    readonly mono?: boolean;
+};
+export declare const DataValue: FC<DataValueProps>;

package/dist/data-value/style.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @author WMXPY
+ * @package Data Cell
+ * @namespace DataValue
+ * @description Style
+ */
+export declare const dataValueStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const dataMonoStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @author WMXPY
+ * @package Data Cell
+ * @namespace Root
+ * @description Index
+ */
+export type { DataBadgeProps } from "./data-badge/data-badge";
+export { DataBadge } from "./data-badge/data-badge";
+export type { DataBarProps } from "./data-bar/data-bar";
+export { DataBar } from "./data-bar/data-bar";
+export type { DataValueProps } from "./data-value/data-value";
+export { DataValue } from "./data-value/data-value";

package/dist/index.js

@@ -0,0 +1,125 @@
+// src/data-badge/style.ts
+import { cn } from "@gridui/style-utils";
+import { cva } from "class-variance-authority";
+var dataBadgeStyles = cva(cn(
+  "gridui-data-badge",
+  "inline-block py-gridui-4 px-gridui-8 text-foreground bg-surface type-caption whitespace-nowrap",
+  "data-[tone='accent']:text-foreground data-[tone='accent']:bg-brand-tint"
+));
+
+// src/data-badge/data-badge.tsx
+import { cn as cn2 } from "@gridui/style-utils";
+import { jsx } from "react/jsx-runtime";
+var DataBadge = (props) => {
+  const {
+    children,
+    tone = "neutral",
+    className,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...restProps,
+      className: cn2(dataBadgeStyles(), className),
+      "data-tone": tone,
+      children
+    }
+  );
+};
+
+// src/data-bar/style.ts
+import { cn as cn3 } from "@gridui/style-utils";
+import { cva as cva2 } from "class-variance-authority";
+var dataBarStyles = cva2(cn3(
+  "gridui-data-bar",
+  "grid min-w-gridui-64 gap-gridui-8 tabular-nums",
+  "[&[data-partial='true']_.gridui-data-bar-track>span]:bg-transparent"
+));
+var dataBarTrackStyles = cva2(cn3(
+  "gridui-data-bar-track",
+  "h-(--gridui-space-4) bg-brand-tint",
+  "[&_>_span]:block [&_>_span]:h-full [&_>_span]:bg-accent-background"
+));
+
+// src/data-bar/data-bar.tsx
+import { cn as cn4 } from "@gridui/style-utils";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var DataBar = (props) => {
+  const {
+    value,
+    maximum,
+    partial = false,
+    children,
+    className,
+    ...restProps
+  } = props;
+  const ratio = Number.isFinite(value) && Number.isFinite(maximum) && maximum > 0 ? Math.max(0, Math.min(1, value / maximum)) : 0;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...restProps,
+      className: cn4(dataBarStyles(), className),
+      "data-partial": partial,
+      children: [
+        /* @__PURE__ */ jsx2("span", { children }),
+        /* @__PURE__ */ jsx2(
+          "span",
+          {
+            className: cn4(dataBarTrackStyles()),
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx2(
+              "span",
+              {
+                style: { width: `${ratio * 100}%` }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/data-value/style.ts
+import { cn as cn5 } from "@gridui/style-utils";
+import { cva as cva3 } from "class-variance-authority";
+var dataValueStyles = cva3(cn5(
+  "gridui-data-value",
+  "grid gap-gridui-4",
+  "[&_small]:text-muted [&_small]:type-supporting"
+));
+var dataMonoStyles = cva3(cn5(
+  "gridui-data-mono",
+  "type-code whitespace-nowrap"
+));
+
+// src/data-value/data-value.tsx
+import { cn as cn6 } from "@gridui/style-utils";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var DataValue = (props) => {
+  const {
+    children,
+    detail,
+    mono = false,
+    className,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      ...restProps,
+      className: cn6(dataValueStyles(), mono && dataMonoStyles(), className),
+      children: [
+        /* @__PURE__ */ jsx3("span", { children }),
+        detail !== void 0 && /* @__PURE__ */ jsx3("small", { children: detail })
+      ]
+    }
+  );
+};
+export {
+  DataBadge,
+  DataBar,
+  DataValue
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/data-badge/style.ts", "../src/data-badge/data-badge.tsx", "../src/data-bar/style.ts", "../src/data-bar/data-bar.tsx", "../src/data-value/style.ts", "../src/data-value/data-value.tsx"],
+  "sourcesContent": ["/**\n * @author WMXPY\n * @package Data Cell\n * @namespace DataBadge\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva } from \"class-variance-authority\";\n\nexport const dataBadgeStyles = cva(cn(\n    \"gridui-data-badge\",\n    \"inline-block py-gridui-4 px-gridui-8 text-foreground bg-surface type-caption whitespace-nowrap\",\n    \"data-[tone='accent']:text-foreground data-[tone='accent']:bg-brand-tint\",\n));\n", "/**\n * @author WMXPY\n * @package Data Cell\n * @namespace DataBadge\n * @description Data Badge\n */\n\nimport { dataBadgeStyles } from \"./style\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DataBadgeProps = ComponentPropsWithRef<\"span\"> & {\n    readonly tone?: \"neutral\" | \"accent\";\n};\n\nexport const DataBadge: FC<DataBadgeProps> = (props: DataBadgeProps) => {\n    const {\n        children,\n        tone = \"neutral\",\n        className,\n        ...restProps\n    } = props;\n    return (<span\n        {...restProps}\n        className={cn(dataBadgeStyles(), className)}\n        data-tone={tone}\n    >\n        {children}\n    </span>);\n};\n", "/**\n * @author WMXPY\n * @package Data Cell\n * @namespace DataBar\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva } from \"class-variance-authority\";\n\nexport const dataBarStyles = cva(cn(\n    \"gridui-data-bar\",\n    \"grid min-w-gridui-64 gap-gridui-8 tabular-nums\",\n    \"[&[data-partial='true']_.gridui-data-bar-track>span]:bg-transparent\",\n));\n\nexport const dataBarTrackStyles = cva(cn(\n    \"gridui-data-bar-track\",\n    \"h-(--gridui-space-4) bg-brand-tint\",\n    \"[&_>_span]:block [&_>_span]:h-full [&_>_span]:bg-accent-background\",\n));\n", "/**\n * @author WMXPY\n * @package Data Cell\n * @namespace DataBar\n * @description Data Bar\n */\n\nimport { dataBarStyles, dataBarTrackStyles } from \"./style\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DataBarProps = ComponentPropsWithRef<\"span\"> & {\n    readonly value: number;\n    readonly maximum: number;\n    readonly partial?: boolean;\n};\n\nexport const DataBar: FC<DataBarProps> = (props: DataBarProps) => {\n    const {\n        value,\n        maximum,\n        partial = false,\n        children,\n        className,\n        ...restProps\n    } = props;\n    const ratio = Number.isFinite(value) && Number.isFinite(maximum) && maximum > 0\n        ? Math.max(0, Math.min(1, value / maximum))\n        : 0;\n    return (<span\n        {...restProps}\n        className={cn(dataBarStyles(), className)}\n        data-partial={partial}\n    >\n        <span>\n            {children}\n        </span>\n        <span\n            className={cn(dataBarTrackStyles())}\n            aria-hidden=\"true\"\n        >\n            <span\n                style={{ width: `${ratio * 100}%` }}\n            />\n        </span>\n    </span>);\n};\n", "/**\n * @author WMXPY\n * @package Data Cell\n * @namespace DataValue\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva } from \"class-variance-authority\";\n\nexport const dataValueStyles = cva(cn(\n    \"gridui-data-value\",\n    \"grid gap-gridui-4\",\n    \"[&_small]:text-muted [&_small]:type-supporting\",\n));\n\nexport const dataMonoStyles = cva(cn(\n    \"gridui-data-mono\",\n    \"type-code whitespace-nowrap\",\n));\n", "/**\n * @author WMXPY\n * @package Data Cell\n * @namespace DataValue\n * @description Data Value\n */\n\nimport { dataMonoStyles, dataValueStyles } from \"./style\";\nimport { cn } from \"@gridui/style-utils\";\nimport type { ComponentPropsWithRef, FC, ReactNode } from \"react\";\n\nexport type DataValueProps = ComponentPropsWithRef<\"span\"> & {\n    readonly detail?: ReactNode;\n    readonly mono?: boolean;\n};\n\nexport const DataValue: FC<DataValueProps> = (props: DataValueProps) => {\n    const {\n        children,\n        detail,\n        mono = false,\n        className,\n        ...restProps\n    } = props;\n    return (<span\n        {...restProps}\n        className={cn(dataValueStyles(), mono && dataMonoStyles(), className)}\n    >\n        <span>\n            {children}\n        </span>\n        {detail !== undefined && (<small>\n            {detail}\n        </small>)}\n    </span>);\n};\n"],
+  "mappings": ";AAOA,SAAS,UAAU;AACnB,SAAS,WAAW;AAEb,IAAM,kBAAkB,IAAI;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACJ,CAAC;;;ACND,SAAS,MAAAA,WAAU;AAcP;AAPL,IAAM,YAAgC,CAAC,UAA0B;AACpE,QAAM;AAAA,IACF;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EACP,IAAI;AACJ,SAAQ;AAAA,IAAC;AAAA;AAAA,MACJ,GAAG;AAAA,MACJ,WAAWA,IAAG,gBAAgB,GAAG,SAAS;AAAA,MAC1C,aAAW;AAAA,MAEV;AAAA;AAAA,EACL;AACJ;;;ACtBA,SAAS,MAAAC,WAAU;AACnB,SAAS,OAAAC,YAAW;AAEb,IAAM,gBAAgBA,KAAID;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,qBAAqBC,KAAID;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACJ,CAAC;;;ACZD,SAAS,MAAAE,WAAU;AAqBP,SAKJ,OAAAC,MALI;AAZL,IAAM,UAA4B,CAAC,UAAwB;AAC9D,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACP,IAAI;AACJ,QAAM,QAAQ,OAAO,SAAS,KAAK,KAAK,OAAO,SAAS,OAAO,KAAK,UAAU,IACxE,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,QAAQ,OAAO,CAAC,IACxC;AACN,SAAQ;AAAA,IAAC;AAAA;AAAA,MACJ,GAAG;AAAA,MACJ,WAAWD,IAAG,cAAc,GAAG,SAAS;AAAA,MACxC,gBAAc;AAAA,MAEd;AAAA,wBAAAC,KAAC,UACI,UACL;AAAA,QACA,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACG,WAAWD,IAAG,mBAAmB,CAAC;AAAA,YAClC,eAAY;AAAA,YAEZ,0BAAAC;AAAA,cAAC;AAAA;AAAA,gBACG,OAAO,EAAE,OAAO,GAAG,QAAQ,GAAG,IAAI;AAAA;AAAA,YACtC;AAAA;AAAA,QACJ;AAAA;AAAA;AAAA,EACJ;AACJ;;;ACvCA,SAAS,MAAAC,WAAU;AACnB,SAAS,OAAAC,YAAW;AAEb,IAAM,kBAAkBA,KAAID;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACJ,CAAC;AAEM,IAAM,iBAAiBC,KAAID;AAAA,EAC9B;AAAA,EACA;AACJ,CAAC;;;ACXD,SAAS,MAAAE,WAAU;AAgBP,SAIJ,OAAAC,MAJI,QAAAC,aAAA;AARL,IAAM,YAAgC,CAAC,UAA0B;AACpE,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EACP,IAAI;AACJ,SAAQ,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACJ,GAAG;AAAA,MACJ,WAAWF,IAAG,gBAAgB,GAAG,QAAQ,eAAe,GAAG,SAAS;AAAA,MAEpE;AAAA,wBAAAC,KAAC,UACI,UACL;AAAA,QACC,WAAW,UAAc,gBAAAA,KAAC,WACtB,kBACL;AAAA;AAAA;AAAA,EACJ;AACJ;",
+  "names": ["cn", "cn", "cva", "cn", "jsx", "cn", "cva", "cn", "jsx", "jsxs"]
+}

package/dist/styles.css

@@ -0,0 +1,114 @@
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
+@layer utilities {
+  .grid {
+    display: grid;
+  }
+  .inline-block {
+    display: inline-block;
+  }
+  .h-\(--gridui-space-4\) {
+    height: var(--gridui-space-4);
+  }
+  .min-w-gridui-64 {
+    min-width: var(--gridui-space-64);
+  }
+  .gap-gridui-4 {
+    gap: var(--gridui-space-4);
+  }
+  .gap-gridui-8 {
+    gap: var(--gridui-space-8);
+  }
+  .bg-brand-tint {
+    background-color: var(--gridui-brand-tint);
+  }
+  .bg-surface {
+    background-color: var(--gridui-surface);
+  }
+  .px-gridui-8 {
+    padding-inline: var(--gridui-space-8);
+  }
+  .py-gridui-4 {
+    padding-block: var(--gridui-space-4);
+  }
+  .type-caption {
+    font: var(--gridui-type-caption);
+    letter-spacing: normal;
+  }
+  .type-code {
+    font: var(--gridui-type-code);
+    letter-spacing: normal;
+  }
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+  .text-foreground {
+    color: var(--gridui-foreground);
+  }
+  .tabular-nums {
+    --tw-numeric-spacing: tabular-nums;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+  }
+  .data-\[tone\=\'accent\'\]\:bg-brand-tint[data-tone='accent'] {
+    background-color: var(--gridui-brand-tint);
+  }
+  .data-\[tone\=\'accent\'\]\:text-foreground[data-tone='accent'] {
+    color: var(--gridui-foreground);
+  }
+  .\[\&_\>_span\]\:block > span {
+    display: block;
+  }
+  .\[\&_\>_span\]\:h-full > span {
+    height: 100%;
+  }
+  .\[\&_\>_span\]\:bg-accent-background > span {
+    background-color: var(--gridui-accent-background);
+  }
+  .\[\&_small\]\:type-supporting small {
+    font: var(--gridui-type-supporting);
+    letter-spacing: normal;
+  }
+  .\[\&_small\]\:text-muted small {
+    color: var(--gridui-muted);
+  }
+  .\[\&\[data-partial\=\'true\'\]_\.gridui-data-bar-track\>span\]\:bg-transparent[data-partial='true'] .gridui-data-bar-track > span {
+    background-color: transparent;
+  }
+}
+@layer components {
+  .gridui-data-bar[data-partial="true"] .gridui-data-bar-track > span {
+    background: repeating-linear-gradient(90deg, var(--gridui-accent-background) 0 4px, transparent 4px 8px);
+  }
+}
+@property --tw-ordinal {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-slashed-zero {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-figure {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-spacing {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-fraction {
+  syntax: "*";
+  inherits: false;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-ordinal: initial;
+      --tw-slashed-zero: initial;
+      --tw-numeric-figure: initial;
+      --tw-numeric-spacing: initial;
+      --tw-numeric-fraction: initial;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,51 @@
 {
   "name": "@gridui/data-cell",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0",
+  "description": "GridUI React data cell",
+  "license": "UNLICENSED",
+  "type": "module",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "dependencies": {
+    "@gridui/style-utils": "^2.1.2",
+    "@gridui/theme": "^2.1.2",
+    "class-variance-authority": "0.7.1"
+  },
+  "devDependencies": {
+    "@gridui-internal/configuration": "0.0.0",
+    "@jest/globals": "30.5.2",
+    "@types/jest": "30.0.0",
+    "@types/node": "26.6.5",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "jest": "30.5.2",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "typescript": "6.0.3"
+  },
+  "scripts": {
+    "build": "node ../../scripts/compilation/package.ts",
+    "compile": "tsc --project tsconfig.json",
+    "test": "jest",
+    "coverage": "jest --coverage"
+  }
 }