@blenx-dev/calendar 0.1.1

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# @blenx-dev/calendar
+
+## 0.1.1
+
+### Patch Changes
+
+- 0439e3e: Use Icon generator and simplify components
+- Updated dependencies [0439e3e]
+  - @blenx-dev/core@0.2.3
+  - @blenx-dev/theme@0.2.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Prashanth Kumar
+
+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/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@blenx-dev/calendar",
+  "version": "0.1.1",
+  "type": "module",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@vanilla-extract/css": "^1.20.1",
+    "@vanilla-extract/recipes": "^0.5.7",
+    "@vanilla-extract/sprinkles": "^1.6.5",
+    "clsx": "^2.1.1",
+    "react-day-picker": "^10.0.1",
+    "@blenx-dev/core": "0.2.3",
+    "@blenx-dev/theme": "0.2.3"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3",
+    "changeset": "^0.2.6"
+  },
+  "peerDependencies": {
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "@blenx-dev/core": "0.2.3",
+    "@blenx-dev/theme": "0.2.3"
+  }
+}

package/src/Calendar/calendar.css.ts

@@ -0,0 +1,187 @@
+import { style } from "@vanilla-extract/css";
+import { semanticVars, tokenVars } from "@blenx-dev/theme/contract";
+
+export const root = style({
+  display: "inline-block",
+  width: "100%",
+});
+
+export const months = style({
+  display: "flex",
+  flexDirection: "column",
+});
+
+export const monthCaption = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  position: "relative",
+  paddingBottom: tokenVars.spacing.sm,
+  minHeight: 40,
+});
+
+export const captionLabel = style({
+  fontSize: tokenVars.fontSize.md,
+  fontWeight: tokenVars.fontWeight.semibold,
+  color: semanticVars.text.primary,
+  margin: 0,
+  padding: 0,
+});
+
+export const nav = style({
+  height: "fit-content",
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  position: "absolute",
+  inset: 0,
+  padding: tokenVars.spacing.xs,
+  pointerEvents: "none",
+  zIndex: 10,
+});
+
+export const buttonNav = style({
+  pointerEvents: "auto",
+  appearance: "none",
+  backgroundColor: "transparent",
+  border: "none",
+  padding: 0,
+  font: "inherit",
+  WebkitTapHighlightColor: "transparent",
+  width: 28,
+  height: 28,
+  borderRadius: tokenVars.borderRadius.default,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: semanticVars.text.secondary,
+  cursor: "pointer",
+  flexShrink: 0,
+  selectors: {
+    "&:hover": {
+      backgroundColor: semanticVars.background.subtle,
+    },
+    "&:focus-visible": {
+      boxShadow: `0 0 0 2px ${semanticVars.focus.ring}`,
+    },
+  },
+});
+
+export const monthGrid = style({
+  width: "100%",
+  borderCollapse: "collapse",
+});
+
+export const weekday = style({
+  fontSize: tokenVars.fontSize.xs,
+  fontWeight: tokenVars.fontWeight.medium,
+  color: semanticVars.text.secondary,
+  textAlign: "center",
+  verticalAlign: "middle",
+  padding: tokenVars.spacing.xxs,
+  width: 40,
+  height: 32,
+  boxSizing: "border-box",
+});
+
+export const day = style({
+  textAlign: "center",
+  verticalAlign: "middle",
+  padding: 1,
+  width: 40,
+  height: 40,
+  boxSizing: "border-box",
+});
+
+export const dayButton = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "100%",
+  height: "100%",
+  minWidth: 32,
+  minHeight: 32,
+  maxWidth: 36,
+  maxHeight: 36,
+  borderRadius: tokenVars.borderRadius.default,
+  border: "none",
+  backgroundColor: "transparent",
+  cursor: "pointer",
+  fontSize: tokenVars.fontSize.sm,
+  color: semanticVars.text.primary,
+  outline: "none",
+  margin: "0 auto",
+  padding: 0,
+  fontFamily: "inherit",
+  lineHeight: 1,
+  transitionProperty: "background-color, color",
+  transitionDuration: "100ms",
+  transitionTimingFunction: "ease",
+  selectors: {
+    "&:hover": {
+      backgroundColor: semanticVars.background.subtle,
+    },
+    "&:focus-visible": {
+      boxShadow: `0 0 0 2px ${semanticVars.focus.ring}`,
+    },
+  },
+});
+
+export const dayButtonSelected = style({
+  backgroundColor: semanticVars.interactive.primary.default,
+  color: semanticVars.interactive.primaryFg,
+  fontWeight: tokenVars.fontWeight.semibold,
+  selectors: {
+    "&:hover": {
+      backgroundColor: semanticVars.interactive.primary.default,
+    },
+  },
+});
+
+export const dayButtonToday = style({
+  fontWeight: tokenVars.fontWeight.semibold,
+});
+
+export const dayButtonDisabled = style({
+  color: semanticVars.text.disabled,
+  cursor: "not-allowed",
+  opacity: 0.5,
+  selectors: {
+    "&:hover": {
+      backgroundColor: "transparent",
+    },
+  },
+});
+
+export const dayButtonOutside = style({
+  color: semanticVars.text.disabled,
+  opacity: 0.5,
+});
+
+export const footer = style({
+  paddingTop: tokenVars.spacing.sm,
+});
+
+export const dropdowns = style({
+  display: "flex",
+  gap: tokenVars.spacing.xs,
+  alignItems: "center",
+});
+
+export const dropdown = style({
+  appearance: "none",
+  backgroundColor: semanticVars.background.subtle,
+  border: `1px solid ${semanticVars.border.default}`,
+  borderRadius: tokenVars.borderRadius.default,
+  color: semanticVars.text.primary,
+  fontSize: tokenVars.fontSize.sm,
+  padding: `${tokenVars.spacing.xxs} ${tokenVars.spacing.sm}`,
+  cursor: "pointer",
+  outline: "none",
+  selectors: {
+    "&:focus-visible": {
+      borderColor: semanticVars.border.strong,
+      boxShadow: `0 0 0 2px ${semanticVars.border.strong}`,
+    },
+  },
+});

package/src/Calendar/calendar.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import clsx from "clsx";
+import { useEffect, useRef } from "react";
+import { DayPicker, type DayPickerProps } from "react-day-picker";
+import {
+  root,
+  months,
+  monthCaption,
+  captionLabel,
+  nav,
+  buttonNav,
+  monthGrid,
+  weekday,
+  day,
+  dayButton,
+  dayButtonSelected,
+  dayButtonToday,
+  dayButtonDisabled,
+  dayButtonOutside,
+  footer,
+  dropdowns,
+  dropdown,
+} from "./calendar.css";
+import { IconButton } from "@blenx-dev/core";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "@blenx-dev/core/icons";
+
+function StyledDayButton({
+  day: _day,
+  modifiers,
+  className,
+  ...props
+}: {
+  day: object;
+  modifiers: Record<string, boolean>;
+} & React.ComponentPropsWithoutRef<"button">) {
+  const ref = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (modifiers.focused) {
+      ref.current?.focus();
+    }
+  }, [modifiers.focused]);
+
+  const isSelected = modifiers.selected;
+  const isToday = modifiers.today;
+  const isDisabled = modifiers.disabled;
+  const isOutside = modifiers.outside;
+
+  const composed = clsx(
+    dayButton,
+    isSelected && dayButtonSelected,
+    isToday && dayButtonToday,
+    isDisabled && dayButtonDisabled,
+    isOutside && dayButtonOutside,
+    className,
+  );
+
+  return <button ref={ref} className={composed} {...props} />;
+}
+
+function Calendar({ className, components: userComponents, ...props }: DayPickerProps) {
+  const classNames = {
+    root: clsx(root, className),
+    months: months,
+    month: "",
+    month_caption: monthCaption,
+    caption_label: captionLabel,
+    nav: nav,
+    button_previous: buttonNav,
+    button_next: buttonNav,
+    chevron: "",
+    month_grid: monthGrid,
+    weekdays: "",
+    weekday: weekday,
+    weeks: "",
+    week: "",
+    day: day,
+    day_button: "",
+    footer: footer,
+    dropdowns: dropdowns,
+    dropdown: dropdown,
+    dropdown_root: "",
+    months_dropdown: "",
+    years_dropdown: "",
+    week_number: "",
+    week_number_header: "",
+    selected: "",
+    today: "",
+    disabled: "",
+    hidden: "",
+    outside: "",
+    focused: "",
+    range_start: "",
+    range_end: "",
+    range_middle: "",
+    weeks_before_enter: "",
+    weeks_before_exit: "",
+    weeks_after_enter: "",
+    weeks_after_exit: "",
+    caption_after_enter: "",
+    caption_after_exit: "",
+    caption_before_enter: "",
+    caption_before_exit: "",
+  };
+  const defaultComponents = {
+    Chevron: ({
+      orientation,
+    }: {
+      orientation?: "left" | "right" | "up" | "down";
+    }): React.ReactElement => {
+      if (orientation === "left") {
+        return (
+          <IconButton variant="ghost">
+            <ChevronLeftIcon width={16} />
+          </IconButton>
+        );
+      }
+      if (orientation === "right") {
+        return (
+          <IconButton variant="ghost">
+            <ChevronRightIcon width={16} />
+          </IconButton>
+        );
+      }
+      return (
+        <IconButton variant="ghost">
+          <ChevronDownIcon width={16} />
+        </IconButton>
+      );
+    },
+  };
+  const mergedComponents = {
+    ...defaultComponents,
+    ...userComponents,
+    DayButton: StyledDayButton,
+  };
+
+  return <DayPicker classNames={classNames} components={mergedComponents} {...props} />;
+}
+
+export { Calendar };

package/src/Calendar/index.ts

@@ -0,0 +1 @@
+export * from "./calendar";

package/src/DatePicker/date-picker.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import {
+  Button,
+  Field,
+  FieldError,
+  FieldLabel,
+  Icon,
+  Popover,
+  PopoverPopup,
+  PopoverPortal,
+  PopoverPositioner,
+  PopoverTrigger,
+} from "@blenx-dev/core";
+import { useState, useRef, type ReactNode } from "react";
+import { Calendar } from "../Calendar";
+import { CalendarIcon } from "@blenx-dev/core/icons";
+type Props = {
+  value: Date | undefined;
+  triggerIcon?: ReactNode;
+  onChange: (date: Date | undefined) => void;
+  format?: (date: Date | undefined) => string;
+  label?: string;
+  placeholder?: string;
+  error?: string;
+  disabled?: boolean;
+};
+
+export function DatePicker({
+  value,
+  onChange,
+  label,
+  format,
+  placeholder = "Pick a date",
+  error,
+  triggerIcon,
+  disabled,
+}: Props) {
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  const handleSelect = (date: Date | undefined) => {
+    onChange(date);
+    setOpen(false);
+  };
+
+  return (
+    <Field>
+      <Popover open={open} onOpenChange={setOpen}>
+        {label && (
+          <FieldLabel
+            onClick={() => {
+              triggerRef.current?.click();
+              triggerRef.current?.focus();
+            }}
+          >
+            {label}
+          </FieldLabel>
+        )}
+        <PopoverTrigger
+          ref={triggerRef}
+          disabled={disabled}
+          render={<Button type="button" variant="outline" fullWidth />}
+        >
+          <Icon size="md">{triggerIcon ? triggerIcon : <CalendarIcon />}</Icon>
+          {value ? (format?.(value) ?? value.toString()) : placeholder}
+        </PopoverTrigger>
+        <PopoverPortal>
+          <PopoverPositioner sideOffset={6} side="bottom" align="start">
+            <PopoverPopup>
+              <Calendar mode="single" selected={value} onSelect={handleSelect} />
+            </PopoverPopup>
+          </PopoverPositioner>
+        </PopoverPortal>
+      </Popover>
+      {error && <FieldError>{error}</FieldError>}
+    </Field>
+  );
+}

package/src/DatePicker/index.ts

@@ -0,0 +1 @@
+export * from "./date-picker";

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./DatePicker";
+export * from "./Calendar";

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@blenx-dev/config/tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "types": []
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules"]
+}