@rttui/skin-anocca 1.0.35 → 1.0.36

package/README.md

@@ -1 +1,62 @@
-# @rttui/skin-anocca
+# Virtualized Table - Anocca Skin
+
+This package provides an Anocca-styled skin for the `@rttui/core` virtualized table.
+
+## Dependencies
+
+- `@rttui/core`: The core table logic.
+- `react` (peer)
+- `react-dom` (peer)
+- `@emotion/react` (peer/dev)
+- `@emotion/styled` (peer/dev)
+- `@mui/material` (peer/dev - Check if truly needed or leftover)
+- `react-icons` (peer/dev)
+
+Ensure peer dependencies are installed in your project.
+
+## Setup
+
+```bash
+npm install @rttui/skin-anocca @rttui/core react react-dom @emotion/react @emotion/styled react-icons
+# or
+yarn add @rttui/skin-anocca @rttui/core react react-dom @emotion/react @emotion/styled react-icons
+```
+
+## Usage
+
+Import the `AnoccaSkin` object and pass it to the `VirtualizedTable` component:
+
+```tsx
+import { VirtualizedTable } from '@rttui/core';
+import { AnoccaSkin } from '@rttui/skin-anocca';
+
+// ... component setup ...
+
+<VirtualizedTable
+  {/* ... other props ... */}
+  skin={AnoccaSkin}
+/>
+```
+
+## Exported Components
+
+The following components are exported:
+
+- `AnoccaSkin`: The main skin object to pass to the table.
+- `TableHeaderRow`
+- `HeaderPinButtons`
+- `RowPinButtons`
+- `Resizer`
+- `CellAvatar`
+- `CellAvatarWithText`
+- `CellNumber`
+- `CellTag`
+- `CellText`
+- `ExpandButton`
+- `Checkbox`
+- `CellTextBold`
+- `CellCurrency`
+- `CellBadge`
+- `Cell`
+- `CellLink`
+- `CellPercent`

package/dist/cjs/cell.cjs

@@ -0,0 +1,102 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    }));
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+
+// packages/skin-anocca/src/cell.tsx
+var exports_cell = {};
+__export(exports_cell, {
+  Cell: () => Cell
+});
+module.exports = __toCommonJS(exports_cell);
+var import_core = require("@rttui/core");
+var import_cell_text = require("./cell_text.cjs");
+var import_cell_text_bold = require("./cell_text_bold.cjs");
+var import_checkbox = require("./checkbox.cjs");
+var import_expand_button = require("./expand_button.cjs");
+var jsx_runtime = require("react/jsx-runtime");
+var Cell = ({
+  children,
+  checkbox = false,
+  expandButton = false,
+  pinButtons = false,
+  highlightSelected = false
+}) => {
+  const { depth, isSelected } = import_core.useRowProps({
+    callback: (vrow) => {
+      const row = vrow.row;
+      return {
+        depth: row.depth,
+        isSelected: row.getIsSelected()
+      };
+    },
+    areCallbackOutputEqual: import_core.shallowEqual,
+    dependencies: [{ type: "tanstack_table" }]
+  });
+  const rowRef = import_core.useRowRef();
+  const containerStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    paddingLeft: `${depth * 20}px`
+  };
+  const useBold = highlightSelected && isSelected;
+  return /* @__PURE__ */ jsx_runtime.jsxs("div", {
+    style: containerStyle,
+    children: [
+      checkbox && /* @__PURE__ */ jsx_runtime.jsx(import_checkbox.Checkbox, {
+        getProps: () => {
+          const row = rowRef()?.row;
+          if (!row)
+            return {};
+          return {
+            checked: row.getIsSelected(),
+            disabled: !row.getCanSelect(),
+            indeterminate: row.getIsSomeSelected()
+          };
+        },
+        onChange: () => {
+          return (event) => {
+            rowRef()?.row.toggleSelected(event.target.checked);
+          };
+        }
+      }),
+      expandButton && /* @__PURE__ */ jsx_runtime.jsx(import_expand_button.ExpandButton, {}),
+      pinButtons && /* @__PURE__ */ jsx_runtime.jsx("span", {
+        style: { fontStyle: "italic", fontSize: "0.8em" },
+        children: "(Pin)"
+      }),
+      useBold ? /* @__PURE__ */ jsx_runtime.jsx(import_cell_text_bold.CellTextBold, {
+        className: "anocca-selected-cell-text",
+        children
+      }) : /* @__PURE__ */ jsx_runtime.jsx(import_cell_text.CellText, {
+        children
+      })
+    ]
+  });
+};
+
+//# debugId=B3C709EFE95E8E0A64756E2164756E21

package/dist/cjs/cell.cjs.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../../src/cell.tsx"],
+  "sourcesContent": [
+    "import React from \"react\";\nimport { CellProps, shallowEqual, useRowProps, useRowRef } from \"@rttui/core\";\nimport { CellText } from \"./cell_text.cjs\";\nimport { CellTextBold } from \"./cell_text_bold.cjs\";\nimport { Checkbox } from \"./checkbox.cjs\";\nimport { ExpandButton } from \"./expand_button.cjs\";\n\nexport const Cell: React.FC<CellProps> = ({\n  children,\n  checkbox = false,\n  expandButton = false,\n  pinButtons = false,\n  highlightSelected = false,\n}) => {\n  const { depth, isSelected } = useRowProps({\n    callback: (vrow) => {\n      const row = vrow.row;\n      return {\n        depth: row.depth,\n        isSelected: row.getIsSelected(),\n      };\n    },\n    areCallbackOutputEqual: shallowEqual,\n    dependencies: [{ type: \"tanstack_table\" }],\n  });\n\n  const rowRef = useRowRef();\n\n  const containerStyle: React.CSSProperties = {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"8px\",\n    paddingLeft: `${depth * 20}px`,\n  };\n\n  const useBold = highlightSelected && isSelected;\n\n  return (\n    <div style={containerStyle}>\n      {checkbox && (\n        <Checkbox\n          getProps={() => {\n            const row = rowRef()?.row;\n            if (!row) return {};\n            return {\n              checked: row.getIsSelected(),\n              disabled: !row.getCanSelect(),\n              indeterminate: row.getIsSomeSelected(),\n            };\n          }}\n          onChange={() => {\n            // Return the actual handler function\n            return (event: React.ChangeEvent<HTMLInputElement>) => {\n              rowRef()?.row.toggleSelected(event.target.checked);\n            };\n          }}\n        />\n      )}\n      {expandButton && <ExpandButton />}\n      {pinButtons && (\n        <span style={{ fontStyle: \"italic\", fontSize: \"0.8em\" }}>(Pin)</span>\n      )}\n      {useBold ? (\n        <CellTextBold className=\"anocca-selected-cell-text\">\n          {children}\n        </CellTextBold>\n      ) : (\n        <CellText>{children}</CellText>\n      )}\n    </div>\n  );\n};\n"
+  ],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACgE,IAAhE;AACyB,IAAzB;AAC6B,IAA7B;AACyB,IAAzB;AAC6B,IAA7B;AAAA;AAEO,IAAM,OAA4B;AAAA,EACvC;AAAA,EACA,WAAW;AAAA,EACX,eAAe;AAAA,EACf,aAAa;AAAA,EACb,oBAAoB;AAAA,MAChB;AAAA,EACJ,QAAQ,OAAO,eAAe,wBAAY;AAAA,IACxC,UAAU,CAAC,SAAS;AAAA,MAClB,MAAM,MAAM,KAAK;AAAA,MACjB,OAAO;AAAA,QACL,OAAO,IAAI;AAAA,QACX,YAAY,IAAI,cAAc;AAAA,MAChC;AAAA;AAAA,IAEF,wBAAwB;AAAA,IACxB,cAAc,CAAC,EAAE,MAAM,iBAAiB,CAAC;AAAA,EAC3C,CAAC;AAAA,EAED,MAAM,SAAS,sBAAU;AAAA,EAEzB,MAAM,iBAAsC;AAAA,IAC1C,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,aAAa,GAAG,QAAQ;AAAA,EAC1B;AAAA,EAEA,MAAM,UAAU,qBAAqB;AAAA,EAErC,uBACE,iBA+BE,OA/BF;AAAA,IAAK,OAAO;AAAA,IAAZ,UA+BE;AAAA,MA9BC,4BACC,gBAAC,0BAAD;AAAA,QACE,UAAU,MAAM;AAAA,UACd,MAAM,MAAM,OAAO,GAAG;AAAA,UACtB,KAAK;AAAA,YAAK,OAAO,CAAC;AAAA,UAClB,OAAO;AAAA,YACL,SAAS,IAAI,cAAc;AAAA,YAC3B,WAAW,IAAI,aAAa;AAAA,YAC5B,eAAe,IAAI,kBAAkB;AAAA,UACvC;AAAA;AAAA,QAEF,UAAU,MAAM;AAAA,UAEd,OAAO,CAAC,UAA+C;AAAA,YACrD,OAAO,GAAG,IAAI,eAAe,MAAM,OAAO,OAAO;AAAA;AAAA;AAAA,OAGvD;AAAA,MAED,gCAAgB,gBAAC,mCAAD,EAAc;AAAA,MAC9B,8BACC,gBAAgE,QAAhE;AAAA,QAAM,OAAO,EAAE,WAAW,UAAU,UAAU,QAAQ;AAAA,QAAtD;AAAA,OAAgE;AAAA,MAEjE,0BACC,gBAEE,oCAFF;AAAA,QAAc,WAAU;AAAA,QAAxB;AAAA,OAEE,oBAEF,gBAAsB,2BAAtB;AAAA;AAAA,OAAsB;AAAA;AAAA,GAExB;AAAA;",
+  "debugId": "B3C709EFE95E8E0A64756E2164756E21",
+  "names": []
+}

package/dist/cjs/cell_avatar.cjs

@@ -0,0 +1,62 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    }));
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+
+// packages/skin-anocca/src/cell_avatar.tsx
+var exports_cell_avatar = {};
+__export(exports_cell_avatar, {
+  CellAvatar: () => CellAvatar
+});
+module.exports = __toCommonJS(exports_cell_avatar);
+var jsx_runtime = require("react/jsx-runtime");
+var sizeMap = {
+  sm: 24,
+  md: 32,
+  lg: 40
+};
+var CellAvatar = ({
+  src,
+  alt = "",
+  size = "md"
+}) => {
+  const dimension = sizeMap[size];
+  const style = {
+    width: `${dimension}px`,
+    height: `${dimension}px`,
+    borderRadius: "50%",
+    objectFit: "cover",
+    backgroundColor: "#f9fafb"
+  };
+  const effectiveAlt = alt || `Avatar image`;
+  return /* @__PURE__ */ jsx_runtime.jsx("img", {
+    src,
+    alt: effectiveAlt,
+    style
+  });
+};
+
+//# debugId=69093E2BE09E547364756E2164756E21

package/dist/cjs/cell_avatar.cjs.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../../src/cell_avatar.tsx"],
+  "sourcesContent": [
+    "import { CellAvatarProps } from \"@rttui/core\";\nimport React from \"react\";\n\n// Define the size mapping for styling\nconst sizeMap = {\n  sm: 24, // Corresponds to Tailwind's size-6 (6 * 4px = 24px)\n  md: 32, // Corresponds to Tailwind's size-8 (8 * 4px = 32px)\n  lg: 40, // Corresponds to Tailwind's size-10 (10 * 4px = 40px)\n};\n\n// Implement the CellAvatar component for the Anocca skin\nexport const CellAvatar: React.FC<CellAvatarProps> = ({\n  src,\n  alt = \"\",\n  size = \"md\",\n}) => {\n  const dimension = sizeMap[size];\n\n  // Basic styling for the avatar image\n  const style: React.CSSProperties = {\n    width: `${dimension}px`,\n    height: `${dimension}px`,\n    borderRadius: \"50%\", // Equivalent to rounded-full\n    objectFit: \"cover\", // Ensures the image covers the area nicely\n    // Placeholder background - Anocca skin might provide specific colors\n    backgroundColor: \"#f9fafb\", // Equivalent to bg-gray-50\n  };\n\n  // It's generally good practice to provide an alt attribute for accessibility\n  const effectiveAlt = alt || `Avatar image`;\n\n  return <img src={src} alt={effectiveAlt} style={style} />;\n};\n"
+  ],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAM,UAAU;AAAA,EACd,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGO,IAAM,aAAwC;AAAA,EACnD;AAAA,EACA,MAAM;AAAA,EACN,OAAO;AAAA,MACH;AAAA,EACJ,MAAM,YAAY,QAAQ;AAAA,EAG1B,MAAM,QAA6B;AAAA,IACjC,OAAO,GAAG;AAAA,IACV,QAAQ,GAAG;AAAA,IACX,cAAc;AAAA,IACd,WAAW;AAAA,IAEX,iBAAiB;AAAA,EACnB;AAAA,EAGA,MAAM,eAAe,OAAO;AAAA,EAE5B,uBAAO,gBAAC,OAAD;AAAA,IAAK;AAAA,IAAU,KAAK;AAAA,IAAc;AAAA,GAAc;AAAA;",
+  "debugId": "69093E2BE09E547364756E2164756E21",
+  "names": []
+}

package/dist/cjs/cell_avatar_with_text.cjs

@@ -0,0 +1,80 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    }));
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+
+// packages/skin-anocca/src/cell_avatar_with_text.tsx
+var exports_cell_avatar_with_text = {};
+__export(exports_cell_avatar_with_text, {
+  CellAvatarWithText: () => CellAvatarWithText
+});
+module.exports = __toCommonJS(exports_cell_avatar_with_text);
+var import_cell_avatar = require("./cell_avatar.cjs");
+var jsx_runtime = require("react/jsx-runtime");
+var CellAvatarWithText = ({
+  src,
+  alt,
+  size = "md",
+  primary,
+  secondary,
+  fallback
+}) => {
+  const containerStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: "16px"
+  };
+  const textStyle = {
+    fontSize: "0.875rem",
+    fontWeight: 500,
+    color: "#111827",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  };
+  const effectiveAlt = alt;
+  return /* @__PURE__ */ jsx_runtime.jsxs("div", {
+    style: containerStyle,
+    children: [
+      /* @__PURE__ */ jsx_runtime.jsx(import_cell_avatar.CellAvatar, {
+        src,
+        alt: effectiveAlt,
+        size,
+        fallback
+      }),
+      /* @__PURE__ */ jsx_runtime.jsx("div", {
+        style: textStyle,
+        children: primary
+      }),
+      secondary && /* @__PURE__ */ jsx_runtime.jsx("div", {
+        style: textStyle,
+        children: secondary
+      })
+    ]
+  });
+};
+
+//# debugId=AEC0EDD2ED46CF2A64756E2164756E21

package/dist/cjs/cell_avatar_with_text.cjs.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../../src/cell_avatar_with_text.tsx"],
+  "sourcesContent": [
+    "import React from \"react\";\nimport { CellAvatar } from \"./cell_avatar.cjs\"; // Import the existing CellAvatar and its props\nimport { CellAvatarWithTextProps } from \"@rttui/core\";\n\n// Implement the CellAvatarWithText component for the Anocca skin\nexport const CellAvatarWithText: React.FC<CellAvatarWithTextProps> = ({\n  src,\n  alt,\n  size = \"md\", // Default size consistent with CellAvatar\n  primary,\n  secondary,\n  fallback,\n}) => {\n  // Basic styles for the container div\n  const containerStyle: React.CSSProperties = {\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: \"16px\", // Equivalent to Tailwind's gap-x-4 (4 * 4px = 16px)\n  };\n\n  // Basic styles for the text div\n  const textStyle: React.CSSProperties = {\n    fontSize: \"0.875rem\", // Equivalent to text-sm (14px)\n    fontWeight: 500, // Equivalent to font-medium\n    color: \"#111827\", // Equivalent to text-gray-900 (Placeholder, Anocca might have specific colors)\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\", // Equivalent to truncate\n  };\n\n  // Generate a meaningful alt text if none provided\n  const effectiveAlt = alt;\n\n  return (\n    <div style={containerStyle}>\n      <CellAvatar\n        src={src}\n        alt={effectiveAlt}\n        size={size}\n        fallback={fallback}\n      />\n      <div style={textStyle}>{primary}</div>\n      {secondary && <div style={textStyle}>{secondary}</div>}\n    </div>\n  );\n};\n"
+  ],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAC2B,IAA3B;AAAA;AAIO,IAAM,qBAAwD;AAAA,EACnE;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,MACI;AAAA,EAEJ,MAAM,iBAAsC;AAAA,IAC1C,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK;AAAA,EACP;AAAA,EAGA,MAAM,YAAiC;AAAA,IACrC,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EAGA,MAAM,eAAe;AAAA,EAErB,uBACE,iBASE,OATF;AAAA,IAAK,OAAO;AAAA,IAAZ,UASE;AAAA,sBARA,gBAAC,+BAAD;AAAA,QACE;AAAA,QACA,KAAK;AAAA,QACL;AAAA,QACA;AAAA,OACF;AAAA,sBACA,gBAAkC,OAAlC;AAAA,QAAK,OAAO;AAAA,QAAZ,UAAwB;AAAA,OAAU;AAAA,MACjC,6BAAa,gBAAoC,OAApC;AAAA,QAAK,OAAO;AAAA,QAAZ,UAAwB;AAAA,OAAY;AAAA;AAAA,GAClD;AAAA;",
+  "debugId": "AEC0EDD2ED46CF2A64756E2164756E21",
+  "names": []
+}

package/dist/cjs/cell_badge.cjs

@@ -0,0 +1,66 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    }));
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+
+// packages/skin-anocca/src/cell_badge.tsx
+var exports_cell_badge = {};
+__export(exports_cell_badge, {
+  CellBadge: () => CellBadge
+});
+module.exports = __toCommonJS(exports_cell_badge);
+var jsx_runtime = require("react/jsx-runtime");
+var colorStyles = {
+  gray: { backgroundColor: "#f3f4f6", color: "#1f2937" },
+  red: { backgroundColor: "#fee2e2", color: "#991b1b" },
+  yellow: { backgroundColor: "#fef9c3", color: "#854d0e" },
+  green: { backgroundColor: "#dcfce7", color: "#166534" },
+  blue: { backgroundColor: "#dbeafe", color: "#1e40af" },
+  indigo: { backgroundColor: "#e0e7ff", color: "#3730a3" },
+  purple: { backgroundColor: "#f3e8ff", color: "#581c87" },
+  pink: { backgroundColor: "#fce7f3", color: "#831843" }
+};
+var CellBadge = ({
+  children,
+  color = "gray"
+}) => {
+  const baseStyle = {
+    display: "inline-flex",
+    alignItems: "center",
+    borderRadius: "9999px",
+    padding: "0.125rem 0.625rem",
+    fontSize: "0.75rem",
+    fontWeight: 500,
+    whiteSpace: "nowrap"
+  };
+  const finalStyle = { ...baseStyle, ...colorStyles[color] };
+  return /* @__PURE__ */ jsx_runtime.jsx("span", {
+    style: finalStyle,
+    children
+  });
+};
+
+//# debugId=BFD3F55FA14D68F364756E2164756E21

package/dist/cjs/cell_badge.cjs.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../../src/cell_badge.tsx"],
+  "sourcesContent": [
+    "import React from \"react\";\nimport { CellBadgeProps, BadgeColor } from \"@rttui/core\";\n// Map badge colors to basic CSS style objects (placeholders)\nconst colorStyles: Record<BadgeColor, React.CSSProperties> = {\n  gray: { backgroundColor: \"#f3f4f6\", color: \"#1f2937\" }, // bg-gray-100, text-gray-800\n  red: { backgroundColor: \"#fee2e2\", color: \"#991b1b\" }, // bg-red-100, text-red-800\n  yellow: { backgroundColor: \"#fef9c3\", color: \"#854d0e\" }, // bg-yellow-100, text-yellow-800\n  green: { backgroundColor: \"#dcfce7\", color: \"#166534\" }, // bg-green-100, text-green-800\n  blue: { backgroundColor: \"#dbeafe\", color: \"#1e40af\" }, // bg-blue-100, text-blue-800\n  indigo: { backgroundColor: \"#e0e7ff\", color: \"#3730a3\" }, // bg-indigo-100, text-indigo-800\n  purple: { backgroundColor: \"#f3e8ff\", color: \"#581c87\" }, // bg-purple-100, text-purple-800\n  pink: { backgroundColor: \"#fce7f3\", color: \"#831843\" }, // bg-pink-100, text-pink-800\n};\n\n// Implement the CellBadge component for the Anocca skin\nexport const CellBadge: React.FC<CellBadgeProps> = ({\n  children,\n  color = \"gray\", // Default to gray if no color is provided\n}) => {\n  // Base styles for the badge\n  const baseStyle: React.CSSProperties = {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    borderRadius: \"9999px\", // Equivalent to rounded-full\n    padding: \"0.125rem 0.625rem\", // Equivalent to py-0.5 px-2.5\n    fontSize: \"0.75rem\", // Equivalent to text-xs\n    fontWeight: 500, // Equivalent to font-medium\n    whiteSpace: \"nowrap\", // Prevent wrapping\n  };\n\n  // Merge base styles with color-specific styles\n  const finalStyle = { ...baseStyle, ...colorStyles[color] };\n\n  return <span style={finalStyle}>{children}</span>;\n};\n"
+  ],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,IAAM,cAAuD;AAAA,EAC3D,MAAM,EAAE,iBAAiB,WAAW,OAAO,UAAU;AAAA,EACrD,KAAK,EAAE,iBAAiB,WAAW,OAAO,UAAU;AAAA,EACpD,QAAQ,EAAE,iBAAiB,WAAW,OAAO,UAAU;AAAA,EACvD,OAAO,EAAE,iBAAiB,WAAW,OAAO,UAAU;AAAA,EACtD,MAAM,EAAE,iBAAiB,WAAW,OAAO,UAAU;AAAA,EACrD,QAAQ,EAAE,iBAAiB,WAAW,OAAO,UAAU;AAAA,EACvD,QAAQ,EAAE,iBAAiB,WAAW,OAAO,UAAU;AAAA,EACvD,MAAM,EAAE,iBAAiB,WAAW,OAAO,UAAU;AACvD;AAGO,IAAM,YAAsC;AAAA,EACjD;AAAA,EACA,QAAQ;AAAA,MACJ;AAAA,EAEJ,MAAM,YAAiC;AAAA,IACrC,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,YAAY;AAAA,EACd;AAAA,EAGA,MAAM,aAAa,KAAK,cAAc,YAAY,OAAO;AAAA,EAEzD,uBAAO,gBAAqC,QAArC;AAAA,IAAM,OAAO;AAAA,IAAb;AAAA,GAAqC;AAAA;",
+  "debugId": "BFD3F55FA14D68F364756E2164756E21",
+  "names": []
+}

package/dist/cjs/cell_currency.cjs

@@ -0,0 +1,57 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    }));
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+
+// packages/skin-anocca/src/cell_currency.tsx
+var exports_cell_currency = {};
+__export(exports_cell_currency, {
+  CellCurrency: () => CellCurrency
+});
+module.exports = __toCommonJS(exports_cell_currency);
+var jsx_runtime = require("react/jsx-runtime");
+var CellCurrency = ({
+  value,
+  currency = "USD"
+}) => {
+  const formatter = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency,
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  });
+  const style = {
+    fontSize: "0.875rem",
+    color: "#6b7280",
+    fontVariantNumeric: "tabular-nums"
+  };
+  return /* @__PURE__ */ jsx_runtime.jsx("span", {
+    style,
+    children: formatter.format(value)
+  });
+};
+
+//# debugId=4D157CC0D2EE1D0764756E2164756E21

package/dist/cjs/cell_currency.cjs.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../../src/cell_currency.tsx"],
+  "sourcesContent": [
+    "import { CellCurrencyProps } from \"@rttui/core\";\nimport React from \"react\";\n\n// Implement the CellCurrency component for the Anocca skin\nexport const CellCurrency: React.FC<CellCurrencyProps> = ({\n  value,\n  currency = \"USD\", // Default to USD if no currency is provided\n}) => {\n  // Use Intl.NumberFormat for robust currency formatting\n  // The locale ('en-US') can be adjusted if needed, or made dynamic\n  const formatter = new Intl.NumberFormat(\"en-US\", {\n    style: \"currency\",\n    currency: currency,\n    minimumFractionDigits: 2, // Standard practice for currency\n    maximumFractionDigits: 2,\n  });\n\n  // Apply styling similar to CellNumber for consistency\n  const style: React.CSSProperties = {\n    fontSize: \"0.875rem\", // Equivalent to text-sm\n    color: \"#6b7280\", // Equivalent to text-gray-500 (Placeholder)\n    fontVariantNumeric: \"tabular-nums\", // Align numbers\n    // Anocca skin might specify different colors, alignment, etc.\n  };\n\n  return <span style={style}>{formatter.format(value)}</span>;\n}; "
+  ],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIO,IAAM,eAA4C;AAAA,EACvD;AAAA,EACA,WAAW;AAAA,MACP;AAAA,EAGJ,MAAM,YAAY,IAAI,KAAK,aAAa,SAAS;AAAA,IAC/C,OAAO;AAAA,IACP;AAAA,IACA,uBAAuB;AAAA,IACvB,uBAAuB;AAAA,EACzB,CAAC;AAAA,EAGD,MAAM,QAA6B;AAAA,IACjC,UAAU;AAAA,IACV,OAAO;AAAA,IACP,oBAAoB;AAAA,EAEtB;AAAA,EAEA,uBAAO,gBAA+C,QAA/C;AAAA,IAAM;AAAA,IAAN,UAAqB,UAAU,OAAO,KAAK;AAAA,GAAI;AAAA;",
+  "debugId": "4D157CC0D2EE1D0764756E2164756E21",
+  "names": []
+}

package/dist/cjs/cell_link.cjs

@@ -0,0 +1,78 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    }));
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+
+// packages/skin-anocca/src/cell_link.tsx
+var exports_cell_link = {};
+__export(exports_cell_link, {
+  CellLink: () => CellLink
+});
+module.exports = __toCommonJS(exports_cell_link);
+var jsx_runtime = require("react/jsx-runtime");
+var CellLink = ({
+  href,
+  children,
+  srText,
+  style,
+  ...props
+}) => {
+  const baseStyle = {
+    fontSize: "0.875rem",
+    fontWeight: 500,
+    color: "#4f46e5",
+    textDecoration: "none",
+    cursor: "pointer"
+  };
+  const srOnlyStyle = {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    padding: 0,
+    margin: "-1px",
+    overflow: "hidden",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap",
+    borderWidth: 0
+  };
+  return /* @__PURE__ */ jsx_runtime.jsxs("a", {
+    href,
+    style: { ...baseStyle, ...style },
+    ...props,
+    children: [
+      children,
+      srText && /* @__PURE__ */ jsx_runtime.jsxs("span", {
+        style: srOnlyStyle,
+        children: [
+          ", ",
+          srText
+        ]
+      })
+    ]
+  });
+};
+
+//# debugId=536828AD645669D764756E2164756E21

package/dist/cjs/cell_link.cjs.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../../src/cell_link.tsx"],
+  "sourcesContent": [
+    "import React from \"react\";\n\n// Define the props for CellLink, extending standard Anchor attributes\ninterface CellLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  href: string; // The URL the link points to (required)\n  children: React.ReactNode; // The visible content of the link (required)\n  srText?: string; // Additional text for screen readers\n}\n\n// Implement the CellLink component for the Anocca skin\nexport const CellLink: React.FC<CellLinkProps> = ({\n  href,\n  children,\n  srText,\n  style, // Allow consuming style prop\n  ...props // Pass through other anchor attributes (target, rel, etc.)\n}) => {\n  // Basic link styling - Anocca will likely provide specific link styles\n  const baseStyle: React.CSSProperties = {\n    fontSize: \"0.875rem\", // Equivalent to text-sm\n    fontWeight: 500, // Equivalent to font-medium\n    color: \"#4f46e5\", // Equivalent to text-indigo-600 (Placeholder)\n    textDecoration: \"none\", // Common practice, hover effect can add underline\n    cursor: \"pointer\",\n    // Add hover effect (though direct inline hover isn't possible)\n    // Anocca would likely use CSS classes for this\n  };\n\n  // Style for screen reader only text\n  const srOnlyStyle: React.CSSProperties = {\n    position: \"absolute\",\n    width: \"1px\",\n    height: \"1px\",\n    padding: 0,\n    margin: \"-1px\",\n    overflow: \"hidden\",\n    clip: \"rect(0, 0, 0, 0)\",\n    whiteSpace: \"nowrap\",\n    borderWidth: 0,\n  };\n\n  return (\n    <a href={href} style={{ ...baseStyle, ...style }} {...props}>\n      {children}\n      {srText && <span style={srOnlyStyle}>, {srText}</span>}\n    </a>\n  );\n};\n"
+  ],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,IAAM,WAAoC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;AAAA,MACC;AAAA,EAEJ,MAAM,YAAiC;AAAA,IACrC,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,gBAAgB;AAAA,IAChB,QAAQ;AAAA,EAGV;AAAA,EAGA,MAAM,cAAmC;AAAA,IACvC,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,aAAa;AAAA,EACf;AAAA,EAEA,uBACE,iBAGE,KAHF;AAAA,IAAG;AAAA,IAAY,OAAO,KAAK,cAAc,MAAM;AAAA,OAAO;AAAA,IAAtD,UAGE;AAAA,MAFC;AAAA,MACA,0BAAU,iBAAsC,QAAtC;AAAA,QAAM,OAAO;AAAA,QAAb,UAAsC;AAAA,UAAtC;AAAA,UAA6B;AAAA;AAAA,OAAS;AAAA;AAAA,GACjD;AAAA;",
+  "debugId": "536828AD645669D764756E2164756E21",
+  "names": []
+}

package/dist/cjs/cell_number.cjs

@@ -0,0 +1,48 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    }));
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+
+// packages/skin-anocca/src/cell_number.tsx
+var exports_cell_number = {};
+__export(exports_cell_number, {
+  CellNumber: () => CellNumber
+});
+module.exports = __toCommonJS(exports_cell_number);
+var jsx_runtime = require("react/jsx-runtime");
+var CellNumber = ({ children }) => {
+  const style = {
+    fontSize: "0.875rem",
+    color: "#6b7280",
+    fontVariantNumeric: "tabular-nums"
+  };
+  return /* @__PURE__ */ jsx_runtime.jsx("span", {
+    style,
+    children
+  });
+};
+
+//# debugId=D30B8EE50876B6AB64756E2164756E21

package/dist/cjs/cell_number.cjs.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../../src/cell_number.tsx"],
+  "sourcesContent": [
+    "import React from \"react\";\n\ntype CellNumberProps = {\n  children: React.ReactNode;\n};\n\nexport const CellNumber: React.FC<CellNumberProps> = ({ children }) => {\n  const style: React.CSSProperties = {\n    fontSize: \"0.875rem\",\n    color: \"#6b7280\",\n    fontVariantNumeric: \"tabular-nums\",\n  };\n\n  return <span style={style}>{children}</span>;\n};\n"
+  ],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMO,IAAM,aAAwC,GAAG,eAAe;AAAA,EACrE,MAAM,QAA6B;AAAA,IACjC,UAAU;AAAA,IACV,OAAO;AAAA,IACP,oBAAoB;AAAA,EACtB;AAAA,EAEA,uBAAO,gBAAgC,QAAhC;AAAA,IAAM;AAAA,IAAN;AAAA,GAAgC;AAAA;",
+  "debugId": "D30B8EE50876B6AB64756E2164756E21",
+  "names": []
+}