@gridui/data-cell 1.0.6 → 1.1.0

package/README.md

@@ -1,10 +1,14 @@
 # @gridui/data-cell
 
-Core family. Public API: `DataBadge`, `DataBadgeProps`, `DataBar`, `DataBarProps`, `DataValue`, `DataValueProps`.
+Data 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](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).
+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-data/data-cell/.changeset/history).
 
 [Component reference](docs/reference/README.md) contains focused API pages for each public component.
+
+DataValue supports direction (column/row), align (start/center/end), and tabular
+numeric typography independently from mono. Use native description lists with
+Grid, Row or Stack to assemble labeled readouts without chart dependencies.

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

@@ -8,5 +8,8 @@ import type { ComponentPropsWithRef, FC, ReactNode } from "react";
 export type DataValueProps = ComponentPropsWithRef<"span"> & {
     readonly detail?: ReactNode;
     readonly mono?: boolean;
+    readonly tabular?: boolean;
+    readonly direction?: "column" | "row";
+    readonly align?: "start" | "center" | "end";
 };
 export declare const DataValue: FC<DataValueProps>;

package/dist/index.js

@@ -86,8 +86,7 @@ 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-data-cell--grid gridui-u-data-cell--gap-gridui-4",
-  "gridui-u-data-cell--[&_small]:text-muted gridui-u-data-cell--[&_small]:type-supporting"
+  "gridui-u-data-cell--[&>small]:text-muted gridui-u-data-cell--[&>small]:type-supporting"
 ));
 var dataMonoStyles = cva3(cn5(
   "gridui-data-mono",
@@ -102,6 +101,9 @@ var DataValue = (props) => {
     children,
     detail,
     mono = false,
+    tabular = false,
+    direction = "column",
+    align = "start",
     className,
     ...restProps
   } = props;
@@ -109,6 +111,9 @@ var DataValue = (props) => {
     "span",
     {
       ...restProps,
+      "data-direction": direction,
+      "data-align": align,
+      "data-tabular": tabular || void 0,
       className: cn6(dataValueStyles(), mono && dataMonoStyles(), className),
       children: [
         /* @__PURE__ */ jsx3("span", { children }),

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-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;",
+  "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--[&>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    readonly tabular?: boolean;\n    readonly direction?: \"column\" | \"row\";\n    readonly align?: \"start\" | \"center\" | \"end\";\n};\n\nexport const DataValue: FC<DataValueProps> = (props: DataValueProps) => {\n    const {\n        children,\n        detail,\n        mono = false,\n        tabular = false,\n        direction = \"column\",\n        align = \"start\",\n        className,\n        ...restProps\n    } = props;\n    return (<span\n        {...restProps}\n        data-direction={direction}\n        data-align={align}\n        data-tabular={tabular || undefined}\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;AACJ,CAAC;AAEM,IAAM,iBAAiBC,KAAID;AAAA,EAC9B;AAAA,EACA;AACJ,CAAC;;;ACVD,SAAS,MAAAE,WAAU;AAsBP,SAOJ,OAAAC,MAPI,QAAAC,aAAA;AAXL,IAAM,YAAgC,CAAC,UAA0B;AACpE,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR;AAAA,IACA,GAAG;AAAA,EACP,IAAI;AACJ,SAAQ,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACJ,GAAG;AAAA,MACJ,kBAAgB;AAAA,MAChB,cAAY;AAAA,MACZ,gBAAc,WAAW;AAAA,MACzB,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

@@ -14,9 +14,6 @@
   .gridui-u-data-cell--min-w-gridui-64 {
     min-width: var(--gridui-space-64);
   }
-  .gridui-u-data-cell--gap-gridui-4 {
-    gap: var(--gridui-space-4);
-  }
   .gridui-u-data-cell--gap-gridui-8 {
     gap: var(--gridui-space-8);
   }
@@ -65,11 +62,11 @@
   .gridui-u-data-cell--\[\&_\>_span\]\:bg-accent-background > span {
     background-color: var(--gridui-accent-background);
   }
-  .gridui-u-data-cell--\[\&_small\]\:type-supporting small {
+  .gridui-u-data-cell--\[\&\>small\]\:type-supporting > small {
     font: var(--gridui-type-supporting);
     letter-spacing: normal;
   }
-  .gridui-u-data-cell--\[\&_small\]\:text-muted small {
+  .gridui-u-data-cell--\[\&\>small\]\:text-muted > small {
     color: var(--gridui-muted);
   }
   .gridui-u-data-cell--\[\&\[data-partial\=\'true\'\]_\.gridui-data-bar-track\>span\]\:bg-transparent[data-partial='true'] .gridui-data-bar-track > span {
@@ -80,6 +77,28 @@
   .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);
   }
+  .gridui-data-value {
+    display: grid;
+    gap: 0.25rem;
+    min-width: 0;
+  }
+  .gridui-data-value[data-direction="row"] {
+    display: inline-flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+  .gridui-data-value[data-align="center"] {
+    text-align: center;
+    justify-content: center;
+  }
+  .gridui-data-value[data-align="end"] {
+    text-align: end;
+    justify-content: flex-end;
+  }
+  .gridui-data-value[data-tabular] > span {
+    font-variant-numeric: tabular-nums;
+  }
 }
 @property --tw-ordinal {
   syntax: "*";

package/docs/catalog.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": 1,
   "name": "@gridui/data-cell",
-  "version": "1.0.6",
-  "category": "core",
+  "version": "1.1.0",
+  "category": "data",
   "description": "GridUI React data cell",
   "usage": "Component reference contains focused API pages for each public component.",
   "documentation": [
@@ -49,9 +49,10 @@
     "@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"
+    "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-data/data-cell/stories/getting-started.mdx",
+    "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-data/data-cell/stories/values.mdx",
+    "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-data/data-cell/stories/data-badge.stories.tsx",
+    "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-data/data-cell/stories/data-bar.stories.tsx",
+    "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-data/data-cell/stories/data-value.stories.tsx"
   ]
 }

package/docs/reference/data-badge.md

@@ -11,9 +11,9 @@ 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.
+Read the [package contract](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-data/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.
+The [working composition](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-data/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
 

package/docs/reference/data-bar.md

@@ -11,9 +11,9 @@ 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.
+Read the [package contract](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-data/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.
+The [working composition](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-data/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
 

package/docs/reference/data-value.md

@@ -11,9 +11,9 @@ 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.
+Read the [package contract](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-data/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.
+The [working composition](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-data/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
 
@@ -65,3 +65,21 @@ Called when the corresponding interaction occurs; inspect the arguments in Actio
 
 Default: ``false``
 
+### tabular
+
+``boolean | undefined`` · Optional
+
+Default: ``false``
+
+### direction
+
+``"row" | "column" | undefined`` · Optional
+
+Default: ``"column"``
+
+### align
+
+``"center" | "end" | "start" | undefined`` · Optional
+
+Default: ``"start"``
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gridui/data-cell",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "GridUI React data cell",
   "license": "UNLICENSED",
   "type": "module",
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@gridui/style-utils": "^4.0.0",
-    "@gridui/theme": "^2.5.3",
+    "@gridui/theme": "^2.5.4",
     "class-variance-authority": "0.7.1"
   },
   "devDependencies": {