@crossed/ui/lib/module/forms/Calendar/DayButton.js

A universal & performant styling library for React Native, Next.js & React

import { jsx } from "react/jsx-runtime";
import { memo, useCallback } from "react";
import { Pressable } from "react-native";
import {
  composeStyles,
  createStyles,
  isWeb
} from "@crossed/styled";
import { widthCell } from "./styles";
import { Headline } from "../../typography";
const button = createStyles(({ colors }) => ({
  default: {
    base: {
      backgroundColor: colors.background.primary,
      borderRadius: 8,
      height: 40,
      alignItems: "center",
      justifyContent: "center"
    },
    ":hover": {
      backgroundColor: colors.background.hover
    },
    ":active": {
      backgroundColor: colors.background.active
    },
    media: { md: { height: 44 } }
  },
  selected: { base: { backgroundColor: colors.text.brand } },
  disabled: { base: { opacity: 0.1 } },
  today: { base: { borderWidth: 2, borderColor: colors.text.brand } }
}));
const text = createStyles(({ colors, components: { Action } }) => ({
  default: { base: { fontWeight: "500" } },
  noMarginTop: { base: { marginTop: 0 } },
  selected: { base: { color: Action.primary.default.text } },
  today: { base: { color: colors.text.brand } }
}));
const DayButton = memo(
  ({ day, style, disabled: disabledProps, ...props }) => {
    const disabled = disabledProps || day.isAdjacentMonth;
    const handleStyle = useCallback(
      ({
        hovered,
        pressed,
        focused
      }) => composeStyles(
        widthCell,
        button.default,
        disabled && button.disabled,
        day.isToday && button.today,
        day.isSelected && button.selected,
        style
      ).style({
        hover: !day.isSelected && hovered,
        focus: focused,
        active: pressed
      }).style,
      [style, disabled, day]
    );
    return /* @__PURE__ */ jsx(
      Pressable,
      {
        ...props,
        disabled,
        role: "button",
        style: handleStyle,
        children: /* @__PURE__ */ jsx(
          Headline,
          {
            textAlign: "center",
            size: "md",
            style: composeStyles(
              text.default,
              day.isToday && text.today,
              day.isSelected && text.selected,
              !isWeb && text.noMarginTop
            ),
            children: day.date.getDate()
          }
        )
      }
    );
  }
);
export {
  DayButton
};
//# sourceMappingURL=DayButton.js.map