@react-fabric/date 1.0.0-beta.36 → 1.0.0-beta.37

package/{src/components/Date.module.css → css/_date.css}

@@ -21,12 +21,12 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .dateHeader {
-    box-shadow: 0 -1px 0 theme(colors.tint.200/50%) inset;
+@layer components {
+  .fabric-dateHeader {
+    box-shadow: 0 -1px 0 --alpha(var(--color-tint-200) / 50%) inset;
   }
 
-  .timeSlider {
+  .fabric-date-timeSlider {
     height: 11.25rem;
 
     &::before,
@@ -34,7 +34,7 @@
       content: "";
       z-index: 10;
       display: block;
-      box-shadow: 0 0 3rem 0.25rem theme(colors.tint.600);
+      box-shadow: 0 0 3rem 0.25rem var(--color-tint-600);
     }
 
     &::before {

package/css/styles.css

@@ -0,0 +1,24 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2025 Adarsh Pastakia
+ *
+ * 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.
+ */
+
+@import "./_date.css";

package/dist/cjs/components/DatePage.js

@@ -9,7 +9,6 @@ var dateUtil = require('../utils/dateUtil.js');
 var DateCell = require('./DateCell.js');
 var classNames = require('classnames');
 var index = require('../types/index.js');
-var Date_module = require('./Date.module.css');
 var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["pageDate", "isHijri"];
@@ -29,11 +28,11 @@ var DatePage = function DatePage(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: classNames("grid grid-cols-8 area-content", props.page !== index.PageType.DATE && "invisible"),
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames(Date_module.dateHeader, "px-1 text-center bg-tint-50 h-7")
+      className: classNames("fabric-dateHeader", "px-1 text-center bg-tint-50 h-7")
     }), cols.map(function (col) {
       var dt = dateUtil.DateUtil.addDays(startDate, col, isHijri);
       return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames(Date_module.dateHeader, "font-medium text-sm p-1 mx-px text-center text-muted bg-tint-50 h-7"),
+        className: classNames("fabric-dateHeader", "font-medium text-sm p-1 mx-px text-center text-muted bg-tint-50 h-7"),
         children: dateUtil.DateUtil.format(dt, "eeeeee", i18next.language, isHijri)
       }, dt.toISOString());
     }), rows.map(function (row) {

package/dist/cjs/components/TimeSliders.js

@@ -4,7 +4,6 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var core = require('@react-fabric/core');
 var classNames = require('classnames');
 var react = require('react');
-var Date_module = require('./Date.module.css');
 var jsxRuntime = require('react/jsx-runtime');
 
 var TimeSlider = function TimeSlider(_ref) {
@@ -58,16 +57,16 @@ var TimeSlider = function TimeSlider(_ref) {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex",
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames(Date_module.dateHeader, "flex-1 font-medium text-muted text-sm p-1 mx-px text-center bg-tint-50"),
+        className: classNames("fabric-dateHeader", "flex-1 font-medium text-muted text-sm p-1 mx-px text-center bg-tint-50"),
         children: "H"
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames(Date_module.dateHeader, "flex-1 font-medium text-muted text-sm p-1 mx-px text-center bg-tint-50"),
+        className: classNames("fabric-dateHeader", "flex-1 font-medium text-muted text-sm p-1 mx-px text-center bg-tint-50"),
         children: "M"
       })]
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex flex-1 flex-nowrap overflow-hidden relative",
+      className: "flex flex-1 flex-nowrap items-stretch overflow-hidden relative",
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: classNames("flex-1 overflow-auto scroll-hide snap-y snap-mandatory", Date_module.timeSlider),
+        className: classNames("flex-1 overflow-auto scroll-hide snap-y snap-mandatory", "fabric-date-timeSlider"),
         onScroll: calculateTime,
         ref: hourRef,
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -92,7 +91,7 @@ var TimeSlider = function TimeSlider(_ref) {
           className: "w-full"
         })]
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: classNames("flex-1 overflow-auto scroll-hide snap-y snap-mandatory", Date_module.timeSlider),
+        className: classNames("flex-1 overflow-auto scroll-hide snap-y snap-mandatory", "fabric-date-timeSlider"),
         onScroll: calculateTime,
         ref: minuteRef,
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {

package/dist/esm/components/DatePage.js

@@ -9,7 +9,6 @@ import { DateUtil } from '../utils/dateUtil.js';
 import { DateCell } from './DateCell.js';
 import classNames from 'classnames';
 import { PageType } from '../types/index.js';
-import classes from './Date.module.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["pageDate", "isHijri"];
@@ -29,11 +28,11 @@ var DatePage = function DatePage(_ref) {
   return /*#__PURE__*/jsxs("div", {
     className: classNames("grid grid-cols-8 area-content", props.page !== PageType.DATE && "invisible"),
     children: [/*#__PURE__*/jsx("div", {
-      className: classNames(classes.dateHeader, "px-1 text-center bg-tint-50 h-7")
+      className: classNames("fabric-dateHeader", "px-1 text-center bg-tint-50 h-7")
     }), cols.map(function (col) {
       var dt = DateUtil.addDays(startDate, col, isHijri);
       return /*#__PURE__*/jsx("div", {
-        className: classNames(classes.dateHeader, "font-medium text-sm p-1 mx-px text-center text-muted bg-tint-50 h-7"),
+        className: classNames("fabric-dateHeader", "font-medium text-sm p-1 mx-px text-center text-muted bg-tint-50 h-7"),
         children: DateUtil.format(dt, "eeeeee", i18next.language, isHijri)
       }, dt.toISOString());
     }), rows.map(function (row) {

package/dist/esm/components/TimeSliders.js

@@ -4,7 +4,6 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useDebounce } from '@react-fabric/core';
 import classNames from 'classnames';
 import { useRef, useState, useEffect, useCallback } from 'react';
-import classes from './Date.module.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var TimeSlider = function TimeSlider(_ref) {
@@ -58,16 +57,16 @@ var TimeSlider = function TimeSlider(_ref) {
     children: [/*#__PURE__*/jsxs("div", {
       className: "flex",
       children: [/*#__PURE__*/jsx("div", {
-        className: classNames(classes.dateHeader, "flex-1 font-medium text-muted text-sm p-1 mx-px text-center bg-tint-50"),
+        className: classNames("fabric-dateHeader", "flex-1 font-medium text-muted text-sm p-1 mx-px text-center bg-tint-50"),
         children: "H"
       }), /*#__PURE__*/jsx("div", {
-        className: classNames(classes.dateHeader, "flex-1 font-medium text-muted text-sm p-1 mx-px text-center bg-tint-50"),
+        className: classNames("fabric-dateHeader", "flex-1 font-medium text-muted text-sm p-1 mx-px text-center bg-tint-50"),
         children: "M"
       })]
     }), /*#__PURE__*/jsxs("div", {
-      className: "flex flex-1 flex-nowrap overflow-hidden relative",
+      className: "flex flex-1 flex-nowrap items-stretch overflow-hidden relative",
       children: [/*#__PURE__*/jsxs("div", {
-        className: classNames("flex-1 overflow-auto scroll-hide snap-y snap-mandatory", classes.timeSlider),
+        className: classNames("flex-1 overflow-auto scroll-hide snap-y snap-mandatory", "fabric-date-timeSlider"),
         onScroll: calculateTime,
         ref: hourRef,
         children: [/*#__PURE__*/jsx("div", {
@@ -92,7 +91,7 @@ var TimeSlider = function TimeSlider(_ref) {
           className: "w-full"
         })]
       }), /*#__PURE__*/jsxs("div", {
-        className: classNames("flex-1 overflow-auto scroll-hide snap-y snap-mandatory", classes.timeSlider),
+        className: classNames("flex-1 overflow-auto scroll-hide snap-y snap-mandatory", "fabric-date-timeSlider"),
         onScroll: calculateTime,
         ref: minuteRef,
         children: [/*#__PURE__*/jsx("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/date",
-  "version": "1.0.0-beta.36",
+  "version": "1.0.0-beta.37",
   "description": "RUF: Date package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -11,12 +11,23 @@
   "types": "dist/types/index.d.ts",
   "directories": {
     "src": "src",
+    "styles": "css",
     "test": "tests"
   },
   "files": [
+    "css",
     "src",
     "dist"
   ],
+  "exports": {
+    ".": {
+      "default": "./dist/esm/index.js",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./styles": "./css/styles.css"
+  },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -33,8 +44,8 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.36",
-    "@react-fabric/utilities": "^1.0.0-beta.36",
+    "@react-fabric/core": "^1.0.0-beta.37",
+    "@react-fabric/utilities": "^1.0.0-beta.37",
     "classnames": "^2.5.1",
     "date-fns": "^4.0.0",
     "resize-observer-polyfill": "^1.5.1"
@@ -52,5 +63,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "91a7cce216e21cbc6406226d8c3f56a1a26e410a"
+  "gitHead": "9b737229bf24ebe986540ee2c4b8904ebc4a5a9b"
 }

package/src/components/DatePage.tsx

@@ -28,7 +28,6 @@ import { DateUtil } from "../utils/dateUtil";
 import { DateCell, type DateCellProps } from "./DateCell";
 import classNames from "classnames";
 import { PageType } from "../types";
-import classes from "./Date.module.css";
 
 const rows = [0, 1, 2, 3, 4, 5];
 const cols = [0, 1, 2, 3, 4, 5, 6];
@@ -57,7 +56,7 @@ export const DatePage = ({ pageDate, isHijri, ...props }: Props) => {
     >
       <div
         className={classNames(
-          classes.dateHeader,
+          "fabric-dateHeader",
           "px-1 text-center bg-tint-50 h-7",
         )}
       ></div>
@@ -67,7 +66,7 @@ export const DatePage = ({ pageDate, isHijri, ...props }: Props) => {
           <div
             key={dt.toISOString()}
             className={classNames(
-              classes.dateHeader,
+              "fabric-dateHeader",
               "font-medium text-sm p-1 mx-px text-center text-muted bg-tint-50 h-7",
             )}
           >

package/src/components/TimeSliders.tsx

@@ -24,7 +24,6 @@
 import { useDebounce } from "@react-fabric/core";
 import classNames from "classnames";
 import { useCallback, useEffect, useRef, useState } from "react";
-import classes from "./Date.module.css";
 
 interface Props {
   hour: number;
@@ -80,7 +79,7 @@ export const TimeSlider = ({ hour = 0, minute = 0, onTimeChange }: Props) => {
       <div className="flex">
         <div
           className={classNames(
-            classes.dateHeader,
+            "fabric-dateHeader",
             "flex-1 font-medium text-muted text-sm p-1 mx-px text-center bg-tint-50",
           )}
         >
@@ -88,18 +87,18 @@ export const TimeSlider = ({ hour = 0, minute = 0, onTimeChange }: Props) => {
         </div>
         <div
           className={classNames(
-            classes.dateHeader,
+            "fabric-dateHeader",
             "flex-1 font-medium text-muted text-sm p-1 mx-px text-center bg-tint-50",
           )}
         >
           M
         </div>
       </div>
-      <div className="flex flex-1 flex-nowrap overflow-hidden relative">
+      <div className="flex flex-1 flex-nowrap items-stretch overflow-hidden relative">
         <div
           className={classNames(
             "flex-1 overflow-auto scroll-hide snap-y snap-mandatory",
-            classes.timeSlider,
+            "fabric-date-timeSlider",
           )}
           onScroll={calculateTime}
           ref={hourRef}
@@ -144,7 +143,7 @@ export const TimeSlider = ({ hour = 0, minute = 0, onTimeChange }: Props) => {
         <div
           className={classNames(
             "flex-1 overflow-auto scroll-hide snap-y snap-mandatory",
-            classes.timeSlider,
+            "fabric-date-timeSlider",
           )}
           onScroll={calculateTime}
           ref={minuteRef}

package/dist/cjs/components/Date.module.css

@@ -1 +0,0 @@
-@layer comp{.dateHeader{box-shadow:inset 0 -1px 0 theme(colors.tint.200/50%)}.timeSlider{height:11.25rem;&:after,&:before{box-shadow:0 0 3rem .25rem theme(colors.tint.600);content:"";display:block;z-index:10}&:before{position:sticky;top:0}&:after{bottom:0;position:sticky}&>:first-child,&>:last-child{height:calc(50% - .75rem)}& [data-skew="1"]>div{opacity:.9;transform:scaleY(.9)}& [data-skew="2"]>div{opacity:.75;transform:scaleY(.75)}& [data-skew="3"]>div{opacity:.65;transform:scaleY(.65)}& [data-skew="4"]>div{opacity:.5;transform:scaleY(.5)}}}

package/dist/esm/components/Date.module.css

@@ -1 +0,0 @@
-@layer comp{.dateHeader{box-shadow:inset 0 -1px 0 theme(colors.tint.200/50%)}.timeSlider{height:11.25rem;&:after,&:before{box-shadow:0 0 3rem .25rem theme(colors.tint.600);content:"";display:block;z-index:10}&:before{position:sticky;top:0}&:after{bottom:0;position:sticky}&>:first-child,&>:last-child{height:calc(50% - .75rem)}& [data-skew="1"]>div{opacity:.9;transform:scaleY(.9)}& [data-skew="2"]>div{opacity:.75;transform:scaleY(.75)}& [data-skew="3"]>div{opacity:.65;transform:scaleY(.65)}& [data-skew="4"]>div{opacity:.5;transform:scaleY(.5)}}}