@gridui/data-cell 1.0.1 → 1.0.2

package/README.md

@@ -5,4 +5,4 @@ Core family. Public API: `DataBadge`, `DataBadgeProps`, `DataBar`, `DataBarProps
 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/).
+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).

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",
-  "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"
+  "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"
 ));
 
 // 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",
-  "grid min-w-gridui-64 gap-gridui-8 tabular-nums",
-  "[&[data-partial='true']_.gridui-data-bar-track>span]:bg-transparent"
+  "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"
 ));
 var dataBarTrackStyles = cva2(cn3(
   "gridui-data-bar-track",
-  "h-(--gridui-space-4) bg-brand-tint",
-  "[&_>_span]:block [&_>_span]:h-full [&_>_span]:bg-accent-background"
+  "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"
 ));
 
 // 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",
-  "grid gap-gridui-4",
-  "[&_small]:text-muted [&_small]:type-supporting"
+  "gridui-u-grid gridui-u-gap-gridui-4",
+  "gridui-u-[&_small]:text-muted gridui-u-[&_small]:type-supporting"
 ));
 var dataMonoStyles = cva3(cn5(
   "gridui-data-mono",
-  "type-code whitespace-nowrap"
+  "gridui-u-type-code gridui-u-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    \"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"],
+  "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"],
   "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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gridui/data-cell",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "GridUI React data cell",
   "license": "UNLICENSED",
   "type": "module",
@@ -26,8 +26,8 @@
     "react-dom": "^19.2.0"
   },
   "dependencies": {
-    "@gridui/style-utils": "^2.1.3",
-    "@gridui/theme": "^2.2.1",
+    "@gridui/style-utils": "^2.1.4",
+    "@gridui/theme": "^2.3.2",
     "class-variance-authority": "0.7.1"
   },
   "devDependencies": {