@react-cupertino-ui/calendar-heatmap 1.0.1

package/LICENSE

@@ -0,0 +1,24 @@
+MIT License
+
+Copyright (c) 2024 Anderson Lima
+
+This project is inspired by Apple's design principles but is not affiliated with, endorsed, or sponsored by Apple Inc.
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.css

@@ -0,0 +1,14 @@
+.react-cupertino-ui-calendar-heatmap {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(12px, 1fr));
+  gap: 0.25rem;
+}
+.react-cupertino-ui-calendar-heatmap .cell {
+  width: 12px;
+  height: 12px;
+  border-radius: 4px;
+  background: rgba(15, 23, 42, 0.2);
+}
+.react-cupertino-ui-calendar-heatmap .cell.has-value {
+  background: linear-gradient(135deg, #0ea5e9, #6366f1);
+}

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import type { BaseProps } from "@react-cupertino-ui/shared/lib/interfaces/BaseProps";
+import "./index.scss";
+export interface CalendarHeatmapDatum {
+    date: string;
+    value: number;
+}
+export interface CalendarHeatmapProps extends Omit<BaseProps<HTMLDivElement>, "children"> {
+    data: CalendarHeatmapDatum[];
+    weeks?: number;
+}
+declare const CalendarHeatmap: React.ForwardRefExoticComponent<CalendarHeatmapProps & React.RefAttributes<HTMLDivElement>>;
+export { CalendarHeatmap };

package/dist/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@react-cupertino-ui/shared/lib/utils";
+import "./index.scss";
+const CalendarHeatmap = React.forwardRef((props, ref) => {
+    const { className, data, weeks = 8, ...rest } = props;
+    const cells = React.useMemo(() => {
+        const result = [];
+        const today = new Date();
+        for (let i = 0; i < weeks * 7; i += 1) {
+            const date = new Date(today);
+            date.setDate(today.getDate() - (weeks * 7 - i));
+            const match = data.find((item) => new Date(item.date).toDateString() === date.toDateString());
+            result.push({ date, value: match?.value ?? 0 });
+        }
+        return result;
+    }, [data, weeks]);
+    return (_jsx("div", { ref: ref, className: cn("react-cupertino-ui-calendar-heatmap", className), ...rest, children: cells.map((cell, index) => (_jsx("div", { className: cn("cell", cell.value > 0 && "has-value"), style: { opacity: Math.min(1, 0.3 + cell.value * 0.1) } }, `${cell.date.toISOString()}-${index}`))) }));
+});
+CalendarHeatmap.displayName = "CalendarHeatmap";
+export { CalendarHeatmap };

package/dist/index.scss

@@ -0,0 +1,16 @@
+.react-cupertino-ui-calendar-heatmap {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(12px, 1fr));
+  gap: 0.25rem;
+
+  .cell {
+    width: 12px;
+    height: 12px;
+    border-radius: 4px;
+    background: rgba(15, 23, 42, 0.2);
+
+    &.has-value {
+      background: linear-gradient(135deg, #0ea5e9, #6366f1);
+    }
+  }
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@react-cupertino-ui/calendar-heatmap",
+  "version": "1.0.1",
+  "description": "Calendar heatmap component",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "./dist/**/*.css",
+    "./dist/**/*.scss"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && npm run build:styles",
+    "build:styles": "node ../../../scripts/build-styles.mjs"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "dependencies": {
+    "@react-cupertino-ui/shared": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2"
+  },
+  "gitHead": "3f53987bdb936a331665691b517c2ba9984777f8",
+  "publishConfig": {
+    "access": "public"
+  }
+}