@koobiq/react-components 0.0.1-beta.8 → 0.0.1

package/dist/components/Calendar/components/CalendarHeader/CalendarHeader.d.ts

@@ -0,0 +1,8 @@
+import type { CalendarState, CalendarAria } from '@koobiq/react-primitives';
+type CalendarHeaderProps = {
+    prevButtonProps: CalendarAria['prevButtonProps'];
+    nextButtonProps: CalendarAria['nextButtonProps'];
+    state: CalendarState;
+};
+export declare const CalendarHeader: (props: CalendarHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Calendar/components/CalendarHeader/CalendarHeader.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useLocalizedStringFormatter, today } from "@koobiq/react-core";
+import { IconChevronLeft16, IconCircleXs16, IconChevronRight16 } from "@koobiq/react-icons";
+import intlMessages from "../../intl.json.js";
+import s from "./CalendarHeader.module.css.js";
+import { CalendarMonthDropdown } from "../CalendarMonthDropdown/CalendarMonthDropdown.js";
+import { CalendarYearDropdown } from "../CalendarYearDropdown/CalendarYearDropdown.js";
+import { Button } from "../../../Button/Button.js";
+const CalendarHeader = (props) => {
+  const { prevButtonProps, nextButtonProps, state } = props;
+  const stringFormatter = useLocalizedStringFormatter(intlMessages);
+  return /* @__PURE__ */ jsxs("div", { className: s.base, children: [
+    /* @__PURE__ */ jsx(CalendarMonthDropdown, { state }),
+    /* @__PURE__ */ jsx(CalendarYearDropdown, { state }),
+    /* @__PURE__ */ jsxs("div", { className: s.actions, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          ...prevButtonProps,
+          variant: "contrast-transparent",
+          startIcon: /* @__PURE__ */ jsx(IconChevronLeft16, {}),
+          onlyIcon: true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": stringFormatter.format("today"),
+          onPress: () => {
+            const date = today(state.timeZone);
+            state.setFocusedDate(date);
+          },
+          isDisabled: state.isDisabled,
+          variant: "contrast-transparent",
+          startIcon: /* @__PURE__ */ jsx(IconCircleXs16, {}),
+          onlyIcon: true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          ...nextButtonProps,
+          variant: "contrast-transparent",
+          startIcon: /* @__PURE__ */ jsx(IconChevronRight16, {}),
+          onlyIcon: true
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  CalendarHeader
+};

package/dist/components/Calendar/components/CalendarHeader/CalendarHeader.module.css.js

@@ -0,0 +1,11 @@
+const base = "kbq-calendarheader-562d41";
+const actions = "kbq-calendarheader-actions-4e94a2";
+const s = {
+  base,
+  actions
+};
+export {
+  actions,
+  base,
+  s as default
+};

package/dist/components/Calendar/components/CalendarHeader/index.d.ts

@@ -0,0 +1 @@
+export * from './CalendarHeader';

package/dist/components/Calendar/components/CalendarMonthDropdown/CalendarMonthDropdown.d.ts

@@ -0,0 +1,6 @@
+import { type CalendarState } from '@koobiq/react-primitives';
+type CalendarMonthDropdownProps = {
+    state: CalendarState;
+};
+export declare function CalendarMonthDropdown({ state }: CalendarMonthDropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Calendar/components/CalendarMonthDropdown/CalendarMonthDropdown.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { useBoolean, useDateFormatter, clsx } from "@koobiq/react-core";
+import { IconChevronDown16 } from "@koobiq/react-icons";
+import "@koobiq/react-primitives";
+import s from "../../Calendar.module.css.js";
+import { Menu } from "../../../Menu/Menu.js";
+import { capitalizeFirstLetter } from "../../../../utils/capitalizeFirstLetter/capitalizeFirstLetter.js";
+import { Button } from "../../../Button/Button.js";
+function CalendarMonthDropdown({ state }) {
+  const months = [];
+  const disabledKeys = /* @__PURE__ */ new Set();
+  const [isOpen, { on, off }] = useBoolean();
+  const longFormatter = useDateFormatter({
+    month: "long",
+    timeZone: state.timeZone
+  });
+  const shortFormatter = useDateFormatter({
+    month: "short",
+    timeZone: state.timeZone
+  });
+  const selectedMonthName = shortFormatter.format(
+    state.focusedDate.toDate(state.timeZone)
+  );
+  const menuRef = useRef(null);
+  useEffect(() => {
+    if (!menuRef.current || !state.focusedDate.month) return;
+    const container = menuRef.current;
+    const selectedEl = container.querySelector(
+      `[data-key="${state.focusedDate.month}"]`
+    );
+    if (selectedEl instanceof HTMLElement) {
+      const containerHeight = container.offsetHeight;
+      const elementTop = selectedEl.offsetTop;
+      const elementHeight = selectedEl.offsetHeight;
+      container.scrollTop = elementTop - containerHeight / 2 + elementHeight / 2;
+    }
+  }, [state.focusedDate.month, isOpen]);
+  const numMonths = state.focusedDate.calendar.getMonthsInYear(
+    state.focusedDate
+  );
+  const minDate = state.minValue;
+  const maxDate = state.maxValue;
+  for (let i = 1; i <= numMonths; i++) {
+    const date = state.focusedDate.set({ month: i });
+    const isBeforeMin = minDate && date.compare(minDate) < 0;
+    const isAfterMax = maxDate && date.compare(maxDate) > 0;
+    if (isBeforeMin || isAfterMax) {
+      disabledKeys.add(i);
+    }
+    months.push({
+      id: i,
+      name: longFormatter.format(date.toDate(state.timeZone))
+    });
+  }
+  return /* @__PURE__ */ jsx(
+    Menu,
+    {
+      control: (props) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          ...props,
+          className: clsx(isOpen && s.open),
+          variant: "contrast-transparent",
+          isDisabled: state.isDisabled,
+          endIcon: /* @__PURE__ */ jsx(IconChevronDown16, {}),
+          children: capitalizeFirstLetter(selectedMonthName).replace(/\.$/, "")
+        }
+      ),
+      className: s.popover,
+      slotProps: {
+        list: {
+          ref: menuRef
+        },
+        popover: {
+          maxBlockSize: 265,
+          slotProps: {
+            transition: {
+              onEnter: on,
+              onExited: off
+            }
+          }
+        }
+      },
+      items: months,
+      disabledKeys,
+      selectionMode: "single",
+      selectedKeys: /* @__PURE__ */ new Set([state.focusedDate.month]),
+      onSelectionChange: (keys) => {
+        const value = Array.from(keys)[0];
+        const date = state.focusedDate.set({ month: +value });
+        state.setFocusedDate(date);
+      },
+      children: (item) => /* @__PURE__ */ jsx(Menu.Item, { children: capitalizeFirstLetter(item.name) })
+    }
+  );
+}
+export {
+  CalendarMonthDropdown
+};

package/dist/components/Calendar/components/CalendarMonthDropdown/index.d.ts

@@ -0,0 +1 @@
+export * from './CalendarMonthDropdown';

package/dist/components/Calendar/components/CalendarYearDropdown/CalendarYearDropdown.d.ts

@@ -0,0 +1,6 @@
+import { type CalendarState } from '@koobiq/react-primitives';
+type CalendarYearDropdownProps = {
+    state: CalendarState;
+};
+export declare function CalendarYearDropdown({ state }: CalendarYearDropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Calendar/components/CalendarYearDropdown/CalendarYearDropdown.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { useBoolean, clsx } from "@koobiq/react-core";
+import { IconChevronDown16 } from "@koobiq/react-icons";
+import "@koobiq/react-primitives";
+import s from "../../Calendar.module.css.js";
+import { Menu } from "../../../Menu/Menu.js";
+import { Button } from "../../../Button/Button.js";
+function CalendarYearDropdown({ state }) {
+  const years = [];
+  const [isOpen, { on, off }] = useBoolean();
+  const menuRef = useRef(null);
+  const minYear = state.minValue?.year ?? state.focusedDate.year - 20;
+  const maxYear = state.maxValue?.year ?? state.focusedDate.year + 20;
+  for (let y = minYear; y <= maxYear; y++) {
+    years.push({ id: y });
+  }
+  useEffect(() => {
+    if (!menuRef.current || !state.focusedDate.year) return;
+    const container = menuRef.current;
+    const selectedEl = container.querySelector(
+      `[data-key="${state.focusedDate.year}"]`
+    );
+    if (selectedEl instanceof HTMLElement) {
+      const containerHeight = container.offsetHeight;
+      const elementTop = selectedEl.offsetTop;
+      const elementHeight = selectedEl.offsetHeight;
+      container.scrollTop = elementTop - containerHeight / 2 + elementHeight / 2;
+    }
+  }, [state.focusedDate.year, isOpen]);
+  const selectedYearName = years.find(({ id }) => id === state.focusedDate.year)?.id ?? "";
+  return /* @__PURE__ */ jsx(
+    Menu,
+    {
+      slotProps: {
+        list: {
+          ref: menuRef
+        },
+        popover: {
+          maxBlockSize: 265,
+          slotProps: {
+            transition: {
+              onEnter: on,
+              onExited: off
+            }
+          }
+        }
+      },
+      control: (props) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          ...props,
+          className: clsx(isOpen && s.open),
+          variant: "contrast-transparent",
+          endIcon: /* @__PURE__ */ jsx(IconChevronDown16, {}),
+          isDisabled: state.isDisabled,
+          children: selectedYearName
+        }
+      ),
+      className: s.popover,
+      items: years,
+      selectionMode: "single",
+      selectedKeys: /* @__PURE__ */ new Set([state.focusedDate.year]),
+      onSelectionChange: (keys) => {
+        const value = Array.from(keys)[0];
+        const date = state.focusedDate.set({ year: +value });
+        state.setFocusedDate(date);
+      },
+      children: (item) => /* @__PURE__ */ jsx(Menu.Item, { textValue: String(item.id), children: item.id })
+    }
+  );
+}
+export {
+  CalendarYearDropdown
+};

package/dist/components/Calendar/components/CalendarYearDropdown/index.d.ts

@@ -0,0 +1 @@
+export * from './CalendarYearDropdown';

package/dist/components/Calendar/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CalendarGrid';
+export * from './CalendarHeader';

package/dist/components/Calendar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Calendar';
+export * from './types';

package/dist/components/Calendar/intl.json.js

@@ -0,0 +1,7 @@
+const intlMessages = {
+  "ru-RU": { "today": "Сегодня" },
+  "en-US": { "today": "Today" }
+};
+export {
+  intlMessages as default
+};

package/dist/components/Calendar/types.d.ts

@@ -0,0 +1,51 @@
+import type { ComponentRef, CSSProperties, ReactElement, Ref } from 'react';
+import type { AriaCalendarProps, DateValue } from '@koobiq/react-primitives';
+type CalendarPropMinValue<T extends DateValue> = AriaCalendarProps<T>['minValue'];
+type CalendarPropMaxValue<T extends DateValue> = AriaCalendarProps<T>['maxValue'];
+type CalendarPropValue<T extends DateValue> = AriaCalendarProps<T>['value'];
+type CalendarPropDefaultValue<T extends DateValue> = AriaCalendarProps<T>['defaultValue'];
+type CalendarPropOnChange<T extends DateValue> = AriaCalendarProps<T>['onChange'];
+type CalendarPropIsDisabled<T extends DateValue> = AriaCalendarProps<T>['isDisabled'];
+type CalendarPropFirstDayOfWeek<T extends DateValue> = AriaCalendarProps<T>['firstDayOfWeek'];
+type CalendarPropIsDateUnavailable<T extends DateValue> = AriaCalendarProps<T>['isDateUnavailable'];
+type CalendarPropFocusedValue<T extends DateValue> = AriaCalendarProps<T>['focusedValue'];
+type CalendarPropDefaultFocusedValue<T extends DateValue> = AriaCalendarProps<T>['defaultFocusedValue'];
+type CalendarPropOnFocusChange<T extends DateValue> = AriaCalendarProps<T>['onFocusChange'];
+export type CalendarProps<T extends DateValue> = {
+    /** Ref to the root container. */
+    ref?: Ref<HTMLDivElement>;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** The minimum allowed date that a user may select. */
+    minValue?: CalendarPropMinValue<T>;
+    /** The maximum allowed date that a user may select. */
+    maxValue?: CalendarPropMaxValue<T>;
+    /** The current value (controlled). */
+    value?: CalendarPropValue<T>;
+    /** The default value (uncontrolled). */
+    defaultValue?: CalendarPropDefaultValue<T>;
+    /** Handler that is called when the value changes. */
+    onChange?: CalendarPropOnChange<T>;
+    /**
+     * Whether the calendar is disabled.
+     * @default false
+     */
+    isDisabled?: CalendarPropIsDisabled<T>;
+    /**
+     * The day that starts the week.
+     */
+    firstDayOfWeek?: CalendarPropFirstDayOfWeek<T>;
+    /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */
+    isDateUnavailable?: CalendarPropIsDateUnavailable<T>;
+    /** Controls the currently focused date within the calendar. */
+    focusedValue?: CalendarPropFocusedValue<T>;
+    /** The date that is focused when the calendar first mounts (uncountrolled). */
+    defaultFocusedValue?: CalendarPropDefaultFocusedValue<T>;
+    /** Handler that is called when the focused date changes. */
+    onFocusChange?: CalendarPropOnFocusChange<T>;
+};
+export type CalendarComponent = <T extends DateValue>(props: CalendarProps<T>) => ReactElement | null;
+export type CalendarRef = ComponentRef<'div'>;
+export {};

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,19 +1,28 @@
-export declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/checkbox").AriaCheckboxProps, "onChange" | "isDisabled" | "isRequired" | "isInvalid" | "isReadOnly" | "isSelected" | "isIndeterminate" | "defaultSelected">, "defaultChecked" | "onChange" | "disabled" | "checked" | "required" | "error" | "readonly" | "indeterminate"> & {
-    error?: boolean;
-    checked?: boolean;
-    readonly?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    indeterminate?: boolean;
-    defaultChecked?: boolean;
-    onChange?: (checked: boolean) => void;
-} & {
+export declare const Checkbox: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode;
     className?: string;
+    style?: import("react").CSSProperties;
     size?: import("./types").CheckboxPropSize;
-    'data-testid'?: string | number;
     labelPlacement?: import("./types").CheckboxPropLabelPlacement;
+    isInvalid?: boolean;
+    isSelected?: boolean;
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    isRequired?: boolean;
+    isIndeterminate?: boolean;
+    defaultSelected?: boolean;
+    onChange?: import("./types").CheckboxPropOnChange;
     slotProps?: {
         box?: import("react").ComponentPropsWithRef<"span">;
         label?: import("react").ComponentPropsWithRef<"span">;
     };
+    'data-testid'?: string | number;
+} & {
+    disabled?: boolean;
+    error?: boolean;
+    checked?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    indeterminate?: boolean;
+    defaultChecked?: boolean;
 } & import("react").RefAttributes<HTMLLabelElement>>;

package/dist/components/Checkbox/Checkbox.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { deprecate } from "@koobiq/logger";
 import { mergeProps, clsx, isNotNil } from "@koobiq/react-core";
 import { IconCheckS16, IconMinusS16 } from "@koobiq/react-icons";
 import { Checkbox as Checkbox$1 } from "@koobiq/react-primitives";
@@ -11,45 +12,108 @@ const Checkbox = forwardRef(
     const {
       size = "normal",
       labelPlacement = "end",
+      disabled,
+      isDisabled: isDisabledProp,
+      checked,
+      isSelected: isSelectedProp,
+      error,
+      isInvalid: isInvalidProp,
+      defaultChecked,
+      defaultSelected: defaultSelectedProp,
+      readonly,
+      isReadOnly: isReadOnlyProp,
+      required,
+      isRequired: isRequiredProp,
+      indeterminate,
+      isIndeterminate: isIndeterminateProp,
       children,
       className,
       slotProps,
-      indeterminate,
       ...other
     } = props;
+    const isDisabled = isDisabledProp ?? disabled ?? false;
+    const isInvalid = isInvalidProp ?? error ?? false;
+    const isSelected = isSelectedProp ?? checked;
+    const defaultSelected = defaultSelectedProp ?? defaultChecked;
+    const isReadOnly = isReadOnlyProp ?? readonly ?? false;
+    const isRequired = isRequiredProp ?? required ?? false;
+    const isIndeterminate = isIndeterminateProp ?? indeterminate ?? false;
     const commonProps = {
-      indeterminate,
+      isIndeterminate,
+      isDisabled,
+      isSelected,
+      isInvalid,
+      isRequired,
+      isReadOnly,
+      defaultSelected,
       className: ({
-        error,
-        checked,
-        hovered,
-        disabled,
-        focusVisible,
-        indeterminate: indeterminate2
+        isInvalid: isInvalid2,
+        isSelected: isSelected2,
+        isHovered,
+        isDisabled: isDisabled2,
+        isFocusVisible,
+        isIndeterminate: isIndeterminate2
       }) => clsx(
         s.base,
         s[size],
-        error && s.error,
         s[labelPlacement],
-        checked && s.checked,
-        hovered && s.hovered,
-        disabled && s.disabled,
-        focusVisible && s.focusVisible,
-        indeterminate2 && s.indeterminate,
+        isInvalid2 && s.invalid,
+        isHovered && s.hovered,
+        isDisabled2 && s.disabled,
+        isSelected2 && s.selected,
+        isFocusVisible && s.focusVisible,
+        isIndeterminate2 && s.indeterminate,
         className
       ),
       ...other
     };
+    if (process.env.NODE_ENV !== "production" && "disabled" in props) {
+      deprecate(
+        'Checkbox: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "checked" in props) {
+      deprecate(
+        'Checkbox: the "checked" prop is deprecated. Use "isSelected" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "error" in props) {
+      deprecate(
+        'Checkbox: the "error" prop is deprecated. Use "isInvalid" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "defaultChecked" in props) {
+      deprecate(
+        'Checkbox: the "defaultChecked" prop is deprecated. Use "defaultSelected" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "readonly" in props) {
+      deprecate(
+        'Checkbox: the "readonly" prop is deprecated. Use "isReadOnly" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "required" in props) {
+      deprecate(
+        'Checkbox: the "required" prop is deprecated. Use "isRequired" prop to replace it.'
+      );
+    }
+    if (process.env.NODE_ENV !== "production" && "indeterminate" in props) {
+      deprecate(
+        'Checkbox: the "indeterminate" prop is deprecated. Use "isIndeterminate" prop to replace it.'
+      );
+    }
     const boxProps = mergeProps({ className: s.checkbox }, slotProps?.box);
     const labelProps = slotProps?.label;
     return /* @__PURE__ */ jsx(
       Checkbox$1,
       {
-        "data-indeterminate": indeterminate,
+        "data-size": size,
+        "data-indeterminate": isIndeterminate,
+        "data-label-placement": labelPlacement,
         ...commonProps,
         ref,
-        children: ({ checked, indeterminate: indeterminate2 }) => {
-          const activeIndex = indeterminate2 ? 1 : Number(Boolean(checked)) - 1;
+        children: ({ isSelected: isSelected2, isIndeterminate: isIndeterminate2 }) => {
+          const activeIndex = isIndeterminate2 ? 1 : Number(Boolean(isSelected2)) - 1;
           return /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("span", { ...boxProps, children: /* @__PURE__ */ jsx(
               AnimatedIcon,

package/dist/components/Checkbox/Checkbox.module.css.js

@@ -3,8 +3,8 @@ const checkbox = "kbq-checkbox-checkbox-dbb3d9";
 const normal = "kbq-checkbox-normal-646719";
 const big = "kbq-checkbox-big-d7d5f1";
 const hovered = "kbq-checkbox-hovered-a8a95e";
-const checked = "kbq-checkbox-checked-e66779";
-const error = "kbq-checkbox-error-3cdabd";
+const selected = "kbq-checkbox-selected-ba10f0";
+const invalid = "kbq-checkbox-invalid-253c35";
 const focusVisible = "kbq-checkbox-focusVisible-c41061";
 const indeterminate = "kbq-checkbox-indeterminate-efed4f";
 const disabled = "kbq-checkbox-disabled-e359aa";
@@ -16,8 +16,8 @@ const s = {
   normal,
   big,
   hovered,
-  checked,
-  error,
+  selected,
+  invalid,
   focusVisible,
   indeterminate,
   disabled,
@@ -28,14 +28,14 @@ export {
   base,
   big,
   checkbox,
-  checked,
   s as default,
   disabled,
   end,
-  error,
   focusVisible,
   hovered,
   indeterminate,
+  invalid,
   normal,
+  selected,
   start
 };