@gridui/data-cell 1.0.4 → 1.0.6

package/README.md

@@ -6,3 +6,5 @@ Import components from `@gridui/data-cell` and load `@gridui/data-cell/styles.cs
 Load styles for any composed dependency used by this family. Applications own routes, labels, state persistence, and branding.
 
 See [component ownership](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/docs/component-ownership.md) and [release history](https://github.com/sudo-ui/GridUI-React-Monorepo/tree/main/packages-core/data-cell/.changeset/history).
+
+[Component reference](docs/reference/README.md) contains focused API pages for each public component.

package/dist/index.js

@@ -3,8 +3,8 @@ import { cn } from "@gridui/style-utils";
 import { cva } from "class-variance-authority";
 var dataBadgeStyles = cva(cn(
   "gridui-data-badge",
-  "gridui-u-inline-block gridui-u-py-gridui-4 gridui-u-px-gridui-8 gridui-u-text-foreground gridui-u-bg-surface gridui-u-type-caption gridui-u-whitespace-nowrap",
-  "gridui-u-data-[tone='accent']:text-foreground gridui-u-data-[tone='accent']:bg-brand-tint"
+  "gridui-u-data-cell--inline-block gridui-u-data-cell--py-gridui-4 gridui-u-data-cell--px-gridui-8 gridui-u-data-cell--text-foreground gridui-u-data-cell--bg-surface gridui-u-data-cell--type-caption gridui-u-data-cell--whitespace-nowrap",
+  "gridui-u-data-cell--data-[tone='accent']:text-foreground gridui-u-data-cell--data-[tone='accent']:bg-brand-tint"
 ));
 
 // src/data-badge/data-badge.tsx
@@ -33,13 +33,13 @@ import { cn as cn3 } from "@gridui/style-utils";
 import { cva as cva2 } from "class-variance-authority";
 var dataBarStyles = cva2(cn3(
   "gridui-data-bar",
-  "gridui-u-grid gridui-u-min-w-gridui-64 gridui-u-gap-gridui-8 gridui-u-tabular-nums",
-  "gridui-u-[&[data-partial='true']_.gridui-data-bar-track>span]:bg-transparent"
+  "gridui-u-data-cell--grid gridui-u-data-cell--min-w-gridui-64 gridui-u-data-cell--gap-gridui-8 gridui-u-data-cell--tabular-nums",
+  "gridui-u-data-cell--[&[data-partial='true']_.gridui-data-bar-track>span]:bg-transparent"
 ));
 var dataBarTrackStyles = cva2(cn3(
   "gridui-data-bar-track",
-  "gridui-u-h-(--gridui-space-4) gridui-u-bg-brand-tint",
-  "gridui-u-[&_>_span]:block gridui-u-[&_>_span]:h-full gridui-u-[&_>_span]:bg-accent-background"
+  "gridui-u-data-cell--h-(--gridui-space-4) gridui-u-data-cell--bg-brand-tint",
+  "gridui-u-data-cell--[&_>_span]:block gridui-u-data-cell--[&_>_span]:h-full gridui-u-data-cell--[&_>_span]:bg-accent-background"
 ));
 
 // src/data-bar/data-bar.tsx
@@ -86,12 +86,12 @@ import { cn as cn5 } from "@gridui/style-utils";
 import { cva as cva3 } from "class-variance-authority";
 var dataValueStyles = cva3(cn5(
   "gridui-data-value",
-  "gridui-u-grid gridui-u-gap-gridui-4",
-  "gridui-u-[&_small]:text-muted gridui-u-[&_small]:type-supporting"
+  "gridui-u-data-cell--grid gridui-u-data-cell--gap-gridui-4",
+  "gridui-u-data-cell--[&_small]:text-muted gridui-u-data-cell--[&_small]:type-supporting"
 ));
 var dataMonoStyles = cva3(cn5(
   "gridui-data-mono",
-  "gridui-u-type-code gridui-u-whitespace-nowrap"
+  "gridui-u-data-cell--type-code gridui-u-data-cell--whitespace-nowrap"
 ));
 
 // src/data-value/data-value.tsx

package/dist/index.js.map

@@ -1,7 +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    \"gridui-u-inline-block gridui-u-py-gridui-4 gridui-u-px-gridui-8 gridui-u-text-foreground gridui-u-bg-surface gridui-u-type-caption gridui-u-whitespace-nowrap\",\n    \"gridui-u-data-[tone='accent']:text-foreground gridui-u-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    \"gridui-u-grid gridui-u-min-w-gridui-64 gridui-u-gap-gridui-8 gridui-u-tabular-nums\",\n    \"gridui-u-[&[data-partial='true']_.gridui-data-bar-track>span]:bg-transparent\",\n));\n\nexport const dataBarTrackStyles = cva(cn(\n    \"gridui-data-bar-track\",\n    \"gridui-u-h-(--gridui-space-4) gridui-u-bg-brand-tint\",\n    \"gridui-u-[&_>_span]:block gridui-u-[&_>_span]:h-full gridui-u-[&_>_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    \"gridui-u-grid gridui-u-gap-gridui-4\",\n    \"gridui-u-[&_small]:text-muted gridui-u-[&_small]:type-supporting\",\n));\n\nexport const dataMonoStyles = cva(cn(\n    \"gridui-data-mono\",\n    \"gridui-u-type-code gridui-u-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"],
+  "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    \"gridui-u-data-cell--inline-block gridui-u-data-cell--py-gridui-4 gridui-u-data-cell--px-gridui-8 gridui-u-data-cell--text-foreground gridui-u-data-cell--bg-surface gridui-u-data-cell--type-caption gridui-u-data-cell--whitespace-nowrap\",\n    \"gridui-u-data-cell--data-[tone='accent']:text-foreground gridui-u-data-cell--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    \"gridui-u-data-cell--grid gridui-u-data-cell--min-w-gridui-64 gridui-u-data-cell--gap-gridui-8 gridui-u-data-cell--tabular-nums\",\n    \"gridui-u-data-cell--[&[data-partial='true']_.gridui-data-bar-track>span]:bg-transparent\",\n));\n\nexport const dataBarTrackStyles = cva(cn(\n    \"gridui-data-bar-track\",\n    \"gridui-u-data-cell--h-(--gridui-space-4) gridui-u-data-cell--bg-brand-tint\",\n    \"gridui-u-data-cell--[&_>_span]:block gridui-u-data-cell--[&_>_span]:h-full gridui-u-data-cell--[&_>_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    \"gridui-u-data-cell--grid gridui-u-data-cell--gap-gridui-4\",\n    \"gridui-u-data-cell--[&_small]:text-muted gridui-u-data-cell--[&_small]:type-supporting\",\n));\n\nexport const dataMonoStyles = cva(cn(\n    \"gridui-data-mono\",\n    \"gridui-u-data-cell--type-code gridui-u-data-cell--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

@@ -1,78 +1,78 @@
-/*! tailwindcss v4.3.4 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.5 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer utilities {
-  .gridui-u-grid {
+  .gridui-u-data-cell--grid {
     display: grid;
   }
-  .gridui-u-inline-block {
+  .gridui-u-data-cell--inline-block {
     display: inline-block;
   }
-  .gridui-u-h-\(--gridui-space-4\) {
+  .gridui-u-data-cell--h-\(--gridui-space-4\) {
     height: var(--gridui-space-4);
   }
-  .gridui-u-min-w-gridui-64 {
+  .gridui-u-data-cell--min-w-gridui-64 {
     min-width: var(--gridui-space-64);
   }
-  .gridui-u-gap-gridui-4 {
+  .gridui-u-data-cell--gap-gridui-4 {
     gap: var(--gridui-space-4);
   }
-  .gridui-u-gap-gridui-8 {
+  .gridui-u-data-cell--gap-gridui-8 {
     gap: var(--gridui-space-8);
   }
-  .gridui-u-bg-brand-tint {
+  .gridui-u-data-cell--bg-brand-tint {
     background-color: var(--gridui-brand-tint);
   }
-  .gridui-u-bg-surface {
+  .gridui-u-data-cell--bg-surface {
     background-color: var(--gridui-surface);
   }
-  .gridui-u-px-gridui-8 {
+  .gridui-u-data-cell--px-gridui-8 {
     padding-inline: var(--gridui-space-8);
   }
-  .gridui-u-py-gridui-4 {
+  .gridui-u-data-cell--py-gridui-4 {
     padding-block: var(--gridui-space-4);
   }
-  .gridui-u-type-caption {
+  .gridui-u-data-cell--type-caption {
     font: var(--gridui-type-caption);
     letter-spacing: normal;
   }
-  .gridui-u-type-code {
+  .gridui-u-data-cell--type-code {
     font: var(--gridui-type-code);
     letter-spacing: normal;
   }
-  .gridui-u-whitespace-nowrap {
+  .gridui-u-data-cell--whitespace-nowrap {
     white-space: nowrap;
   }
-  .gridui-u-text-foreground {
+  .gridui-u-data-cell--text-foreground {
     color: var(--gridui-foreground);
   }
-  .gridui-u-tabular-nums {
+  .gridui-u-data-cell--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, );
   }
-  .gridui-u-data-\[tone\=\'accent\'\]\:bg-brand-tint[data-tone='accent'] {
+  .gridui-u-data-cell--data-\[tone\=\'accent\'\]\:bg-brand-tint[data-tone='accent'] {
     background-color: var(--gridui-brand-tint);
   }
-  .gridui-u-data-\[tone\=\'accent\'\]\:text-foreground[data-tone='accent'] {
+  .gridui-u-data-cell--data-\[tone\=\'accent\'\]\:text-foreground[data-tone='accent'] {
     color: var(--gridui-foreground);
   }
-  .gridui-u-\[\&_\>_span\]\:block > span {
+  .gridui-u-data-cell--\[\&_\>_span\]\:block > span {
     display: block;
   }
-  .gridui-u-\[\&_\>_span\]\:h-full > span {
+  .gridui-u-data-cell--\[\&_\>_span\]\:h-full > span {
     height: 100%;
   }
-  .gridui-u-\[\&_\>_span\]\:bg-accent-background > span {
+  .gridui-u-data-cell--\[\&_\>_span\]\:bg-accent-background > span {
     background-color: var(--gridui-accent-background);
   }
-  .gridui-u-\[\&_small\]\:type-supporting small {
+  .gridui-u-data-cell--\[\&_small\]\:type-supporting small {
     font: var(--gridui-type-supporting);
     letter-spacing: normal;
   }
-  .gridui-u-\[\&_small\]\:text-muted small {
+  .gridui-u-data-cell--\[\&_small\]\:text-muted small {
     color: var(--gridui-muted);
   }
-  .gridui-u-\[\&\[data-partial\=\'true\'\]_\.gridui-data-bar-track\>span\]\:bg-transparent[data-partial='true'] .gridui-data-bar-track > span {
+  .gridui-u-data-cell--\[\&\[data-partial\=\'true\'\]_\.gridui-data-bar-track\>span\]\:bg-transparent[data-partial='true'] .gridui-data-bar-track > span {
     background-color: transparent;
   }
 }

package/docs/catalog.json

@@ -1,12 +1,16 @@
 {
   "schemaVersion": 1,
   "name": "@gridui/data-cell",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "category": "core",
   "description": "GridUI React data cell",
-  "usage": "GridUI React data cell",
+  "usage": "Component reference contains focused API pages for each public component.",
   "documentation": [
-    "README.md"
+    "README.md",
+    "docs/reference/README.md",
+    "docs/reference/data-badge.md",
+    "docs/reference/data-bar.md",
+    "docs/reference/data-value.md"
   ],
   "exports": [
     {
@@ -45,6 +49,7 @@
     "@gridui/data-cell/styles.css"
   ],
   "examples": [
+    "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/data-cell/stories/values.mdx",
     "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/data-cell/stories/data-badge.stories.tsx",
     "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/data-cell/stories/data-bar.stories.tsx",
     "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/data-cell/stories/data-value.stories.tsx"

package/docs/reference/README.md

@@ -0,0 +1,6 @@
+<!-- Generated by pnpm docs:storybook. -->
+# Component reference
+
+- [DataBadge](data-badge.md)
+- [DataBar](data-bar.md)
+- [DataValue](data-value.md)

package/docs/reference/data-badge.md

@@ -0,0 +1,63 @@
+<!-- Generated from public Props and owned stories. Run pnpm docs:storybook. -->
+# DataBadge
+
+Presents a short status or category with consistent data typography. Use it inside tables, lists, or summaries.
+
+Import from ``@gridui/data-cell`` and load Theme before this family's stylesheet.
+
+```tsx
+import { DataBadge } from "@gridui/data-cell";
+import "@gridui/theme/styles.css";
+import "@gridui/data-cell/styles.css";
+```
+
+Read the [package contract](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/data-cell/README.md) for shared behavior and stylesheet dependencies.
+
+The [working composition](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/data-cell/stories/data-badge.stories.tsx) demonstrates required context, state, and related components. Use View code in Storybook to inspect the actual implementation.
+
+## API
+
+The public Props type is the source of these signatures. Defaults below are explicit implementation defaults; story presets are separate. Native attributes remain available through the exported Props type.
+
+### children
+
+``ReactNode`` · Optional
+
+Content rendered inside the component.
+
+### onFocus
+
+``(event: FocusEvent<HTMLSpanElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onBlur
+
+``(event: FocusEvent<HTMLSpanElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onChange
+
+``(event: ChangeEvent<HTMLSpanElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onSubmit
+
+``(event: SubmitEvent<HTMLSpanElement>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onClick
+
+``(event: MouseEvent<HTMLSpanElement, MouseEvent>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### tone
+
+``"neutral" | "accent" | undefined`` · Optional
+
+Default: ``"neutral"``
+

package/docs/reference/data-bar.md

@@ -0,0 +1,73 @@
+<!-- Generated from public Props and owned stories. Run pnpm docs:storybook. -->
+# DataBar
+
+Displays a value as a compact proportional bar. Use it to compare magnitudes within a list or table.
+
+Import from ``@gridui/data-cell`` and load Theme before this family's stylesheet.
+
+```tsx
+import { DataBar } from "@gridui/data-cell";
+import "@gridui/theme/styles.css";
+import "@gridui/data-cell/styles.css";
+```
+
+Read the [package contract](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/data-cell/README.md) for shared behavior and stylesheet dependencies.
+
+The [working composition](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/data-cell/stories/data-bar.stories.tsx) demonstrates required context, state, and related components. Use View code in Storybook to inspect the actual implementation.
+
+## API
+
+The public Props type is the source of these signatures. Defaults below are explicit implementation defaults; story presets are separate. Native attributes remain available through the exported Props type.
+
+### children
+
+``ReactNode`` · Optional
+
+Content rendered inside the component.
+
+### onFocus
+
+``(event: FocusEvent<HTMLSpanElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onBlur
+
+``(event: FocusEvent<HTMLSpanElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onChange
+
+``(event: ChangeEvent<HTMLSpanElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onSubmit
+
+``(event: SubmitEvent<HTMLSpanElement>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onClick
+
+``(event: MouseEvent<HTMLSpanElement, MouseEvent>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### value
+
+``number`` · Required
+
+Controlled value. Pair with the corresponding change callback.
+
+### maximum
+
+``number`` · Required
+
+### partial
+
+``boolean | undefined`` · Optional
+
+Default: ``false``
+

package/docs/reference/data-value.md

@@ -0,0 +1,67 @@
+<!-- Generated from public Props and owned stories. Run pnpm docs:storybook. -->
+# DataValue
+
+Formats a compact value for data-heavy layouts. Use it for consistent alignment and typography in cells and summaries.
+
+Import from ``@gridui/data-cell`` and load Theme before this family's stylesheet.
+
+```tsx
+import { DataValue } from "@gridui/data-cell";
+import "@gridui/theme/styles.css";
+import "@gridui/data-cell/styles.css";
+```
+
+Read the [package contract](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/data-cell/README.md) for shared behavior and stylesheet dependencies.
+
+The [working composition](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/data-cell/stories/data-value.stories.tsx) demonstrates required context, state, and related components. Use View code in Storybook to inspect the actual implementation.
+
+## API
+
+The public Props type is the source of these signatures. Defaults below are explicit implementation defaults; story presets are separate. Native attributes remain available through the exported Props type.
+
+### children
+
+``ReactNode`` · Optional
+
+Content rendered inside the component.
+
+### onFocus
+
+``(event: FocusEvent<HTMLSpanElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onBlur
+
+``(event: FocusEvent<HTMLSpanElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onChange
+
+``(event: ChangeEvent<HTMLSpanElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onSubmit
+
+``(event: SubmitEvent<HTMLSpanElement>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onClick
+
+``(event: MouseEvent<HTMLSpanElement, MouseEvent>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### detail
+
+``ReactNode`` · Optional
+
+### mono
+
+``boolean | undefined`` · Optional
+
+Default: ``false``
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gridui/data-cell",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "GridUI React data cell",
   "license": "UNLICENSED",
   "type": "module",
@@ -27,7 +27,7 @@
     "react-dom": "^19.2.0"
   },
   "dependencies": {
-    "@gridui/style-utils": "^2.2.2",
+    "@gridui/style-utils": "^4.0.0",
     "@gridui/theme": "^2.5.3",
     "class-variance-authority": "0.7.1"
   },