@koobiq/react-components 0.0.1-beta.37 → 0.0.1-beta.38

package/dist/components/Calendar/Calendar.js

@@ -9,6 +9,7 @@ import { CalendarHeader } from "./components/CalendarHeader/CalendarHeader.js";
 import { CalendarGrid } from "./components/CalendarGrid/CalendarGrid.js";
 const textNormal = utilClasses.typography["text-normal"];
 function CalendarRender(props, ref) {
+  const { style, className } = props;
   const { locale } = useLocale();
   const state = useCalendarState({
     createCalendar,
@@ -20,7 +21,7 @@ function CalendarRender(props, ref) {
     state
   );
   const rootProps = mergeProps(
-    { className: clsx(s.base, textNormal, props.className), ref },
+    { className: clsx(s.base, textNormal, className), style, ref },
     calendarProps
   );
   return /* @__PURE__ */ jsxs("div", { ...rootProps, children: [

package/dist/components/Calendar/components/CalendarCell/CalendarCell.js

@@ -13,6 +13,7 @@ function CalendarCell({ state, date }) {
     cellProps,
     isSelected,
     isDisabled,
+    isInvalid,
     isPressed,
     buttonProps,
     isUnavailable,
@@ -35,6 +36,7 @@ function CalendarCell({ state, date }) {
         isHovered && s.hovered,
         isDisabled && s.disabled,
         isSelected && s.selected,
+        isInvalid && s.invalid,
         isUnavailable && s.unavailable,
         isSelected && textNormalMedium,
         isFocusVisible && s.focusVisible

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

@@ -6,6 +6,7 @@ const focusVisible = "kbq-calendarcell-focusVisible-d92d99";
 const selected = "kbq-calendarcell-selected-62a719";
 const disabled = "kbq-calendarcell-disabled-a2a975";
 const unavailable = "kbq-calendarcell-unavailable-a606f4";
+const invalid = "kbq-calendarcell-invalid-02611e";
 const s = {
   base,
   today,
@@ -14,7 +15,8 @@ const s = {
   focusVisible,
   selected,
   disabled,
-  unavailable
+  unavailable,
+  invalid
 };
 export {
   base,
@@ -22,6 +24,7 @@ export {
   disabled,
   focusVisible,
   hovered,
+  invalid,
   pressed,
   selected,
   today,

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

@@ -1,4 +1,4 @@
-import type { ComponentRef, ReactElement, Ref } from 'react';
+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'];
@@ -16,6 +16,8 @@ export type CalendarProps<T extends DateValue> = {
     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. */

package/dist/components/DatePicker/DatePicker.d.ts

@@ -1,3 +1,5 @@
-import type { AriaDatePickerProps, DateValue } from '@koobiq/react-primitives';
-export type DatePickerProps<T extends DateValue> = AriaDatePickerProps<T>;
-export declare function DatePicker<T extends DateValue>(props: DatePickerProps<T>): import("react/jsx-runtime").JSX.Element;
+import type { Ref } from 'react';
+import { type DateValue } from '@koobiq/react-primitives';
+import type { DatePickerComponent, DatePickerProps, DatePickerRef } from './types';
+export declare function DatePickerRender<T extends DateValue>(props: DatePickerProps<T>, ref: Ref<DatePickerRef>): import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: DatePickerComponent;

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { forwardRef, useRef } from "react";
+import { mergeProps } from "@koobiq/react-core";
+import { IconCalendarO16 } from "@koobiq/react-icons";
+import { useDatePickerState, removeDataAttributes, useDatePicker } from "@koobiq/react-primitives";
+import { PopoverInner } from "../Popover/PopoverInner.js";
+import s from "./DatePicker.module.css.js";
+import { DateInput } from "../DateInput/DateInput.js";
+import { Calendar } from "../Calendar/Calendar.js";
+import { IconButton } from "../IconButton/IconButton.js";
+function DatePickerRender(props, ref) {
+  const anchorRef = useRef(null);
+  const {
+    label,
+    style,
+    caption,
+    className,
+    slotProps,
+    fullWidth,
+    errorMessage,
+    startAddon,
+    endAddon,
+    "data-testid": testId
+  } = props;
+  const state = useDatePickerState(
+    removeDataAttributes({ ...props, description: caption })
+  );
+  const {
+    isInvalid,
+    groupProps,
+    labelProps,
+    fieldProps,
+    buttonProps,
+    dialogProps,
+    calendarProps: calendarPropsAria
+  } = useDatePicker(
+    removeDataAttributes({ ...props, description: caption }),
+    state,
+    anchorRef
+  );
+  const rootProps = mergeProps(
+    {
+      ref,
+      style,
+      label,
+      caption,
+      fullWidth,
+      className,
+      startAddon,
+      errorMessage,
+      "data-testid": testId,
+      slotProps: {
+        label: labelProps,
+        group: {
+          endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
+            endAddon,
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                variant: isInvalid ? "error" : "fade-contrast",
+                className: s.calendar,
+                ...buttonProps,
+                children: /* @__PURE__ */ jsx(IconCalendarO16, {})
+              }
+            )
+          ] }),
+          ...groupProps,
+          ref: anchorRef
+        }
+      }
+    },
+    slotProps?.root,
+    fieldProps
+  );
+  const popoverProps = mergeProps(
+    {
+      state,
+      anchorRef,
+      offset: 4,
+      size: "auto",
+      hideArrow: true,
+      hideCloseButton: true,
+      placement: "bottom start",
+      slotProps: {
+        dialog: dialogProps
+      }
+    },
+    slotProps?.popover
+  );
+  const calendarProps = mergeProps(calendarPropsAria, slotProps?.calendar);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DateInput, { ...rootProps }),
+    /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(Calendar, { firstDayOfWeek: props.firstDayOfWeek, ...calendarProps }) })
+  ] });
+}
+const DatePicker = forwardRef(DatePickerRender);
+export {
+  DatePicker,
+  DatePickerRender
+};

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

@@ -0,0 +1,8 @@
+const calendar = "kbq-datepicker-calendar-25a0d7";
+const s = {
+  calendar
+};
+export {
+  calendar,
+  s as default
+};

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

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

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

@@ -0,0 +1,34 @@
+import type { CSSProperties, ReactElement, ReactNode, Ref } from 'react';
+import type { AriaDatePickerProps, DateValue } from '@koobiq/react-primitives';
+import type { CalendarProps } from '../Calendar';
+import type { DateInputProps, DateInputRef } from '../DateInput';
+import type { PopoverProps } from '../Popover';
+export type DatePickerProps<T extends DateValue> = {
+    /**
+     * If true, the input will take up the full width of its container.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /** The helper text content. */
+    caption?: ReactNode;
+    /** Addon placed before the children. */
+    startAddon?: ReactNode;
+    /** Addon placed after the children. */
+    endAddon?: ReactNode;
+    /** Additional CSS-classes. */
+    className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
+    /** Unique identifier for testing purposes. */
+    'data-testid'?: string | number;
+    /** Ref to the DateInput. */
+    ref?: Ref<DateInputRef>;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        root?: DateInputProps<T>;
+        popover?: PopoverProps;
+        calendar?: CalendarProps<T>;
+    };
+} & Omit<AriaDatePickerProps<T>, 'description' | 'validate' | 'validationBehavior' | 'validationState'>;
+export type DatePickerComponent = <T extends DateValue>(props: DatePickerProps<T>) => ReactElement | null;
+export type DatePickerRef = DateInputRef;

package/dist/components/index.d.ts

@@ -32,6 +32,7 @@ export * from './TagGroup';
 export * from './Table';
 export * from './Calendar';
 export * from './DateInput';
+export * from './DatePicker';
 export * from './layout';
 export { useListData, useDateFormatter, type DateFormatterOptions, } from '@koobiq/react-primitives';
 export { useRouter, RouterProvider } from '@koobiq/react-primitives';

package/dist/index.js

@@ -75,6 +75,7 @@ import { Table } from "./components/Table/Table.js";
 import { Calendar } from "./components/Calendar/Calendar.js";
 import { DateInput, DateInputRender } from "./components/DateInput/DateInput.js";
 import { dateInputPropVariant } from "./components/DateInput/types.js";
+import { DatePicker, DatePickerRender } from "./components/DatePicker/DatePicker.js";
 import { flex, flexPropAlignItems, flexPropDirection, flexPropFlex, flexPropGap, flexPropJustifyContent, flexPropOrder, flexPropWrap } from "./components/layout/flex/flex.js";
 import { spacing, spacingGap } from "./components/layout/spacing/spacing.js";
 export {
@@ -91,6 +92,8 @@ export {
   Container,
   DateInput,
   DateInputRender,
+  DatePicker,
+  DatePickerRender,
   Divider,
   FlexBox,
   Grid,

package/dist/style.css

@@ -2335,7 +2335,7 @@
   margin-block: var(--toggle-track-margin-block);
   border-radius: var(--toggle-track-border-radius);
   outline: 2px solid var(--toggle-track-outline-color);
-  transition: background-color var(--kbq-transition-default), outline-color var(--kbq-transition-default);
+  transition: border-color var(--kbq-transition-default), background-color var(--kbq-transition-default), outline-color var(--kbq-transition-default);
   flex-shrink: 0;
   position: relative;
 }
@@ -2417,14 +2417,14 @@
 }
 
 .kbq-toggle-invalid-ae9ba4 {
-  --toggle-track-bg-color: var(--kbq-states-background-error-less);
+  --toggle-track-bg-color: var(--kbq-background-error-less);
   --toggle-track-border-color: var(--kbq-line-error);
   --toggle-thumb-bg-color: var(--kbq-icon-error);
 }
 
 .kbq-toggle-invalid-ae9ba4:where(.kbq-toggle-selected-0bb42c) {
   --toggle-track-bg-color: var(--kbq-background-error);
-  --toggle-track-border-color: var(--kbq-line-error);
+  --toggle-track-border-color: transparent;
   --toggle-thumb-bg-color: var(--kbq-icon-white);
 }
 
@@ -2436,7 +2436,7 @@
 
 .kbq-toggle-invalid-ae9ba4:where(.kbq-toggle-hovered-d4d8d0.kbq-toggle-selected-0bb42c) {
   --toggle-track-bg-color: var(--kbq-states-background-error-hover);
-  --toggle-track-border-color: var(--kbq-line-error);
+  --toggle-track-border-color: transparent;
   --toggle-thumb-bg-color: var(--kbq-icon-white);
 }
 
@@ -2450,12 +2450,19 @@
 }
 
 .kbq-toggle-disabled-b31c64 {
+  cursor: not-allowed;
+}
+
+.kbq-toggle-disabled-b31c64:not(.kbq-toggle-selected-0bb42c) {
   --toggle-track-border-color: var(--kbq-states-line-disabled);
   --toggle-track-bg-color: var(--kbq-states-background-disabled);
   --toggle-thumb-bg-color: var(--kbq-states-icon-disabled);
-  --toggle-thumb-border-color: var(--kbq-states-icon-disabled);
   --toggle-color: var(--kbq-states-foreground-disabled);
-  cursor: not-allowed;
+}
+
+.kbq-toggle-disabled-b31c64:where(.kbq-toggle-selected-0bb42c) {
+  opacity: var(--kbq-opacity-disabled);
+  display: flex;
 }
 .kbq-progressbar-824268 {
   --progressbar-track-bg-color: var(--kbq-background-contrast-fade);
@@ -3765,6 +3772,11 @@
   color: var(--kbq-states-foreground-disabled);
   cursor: not-allowed;
 }
+
+.kbq-calendarcell-invalid-02611e {
+  background-color: var(--kbq-background-error);
+  color: var(--kbq-foreground-on-contrast);
+}
 .kbq-dateinput-a4c39b {
   min-inline-size: 150px;
 }
@@ -3872,6 +3884,9 @@
 .kbq-dateinputsegment-literal-d722fc:not(.kbq-dateinputsegment-hasValue-886d0f) {
   color: var(--field-input-placeholder-color);
 }
+.kbq-datepicker-calendar-25a0d7 {
+  margin-inline-end: calc(-1 * var(--kbq-size-xxs));
+}
 .kbq-spacing-mbs_0-be7021 {
   margin-block-start: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.0.1-beta.37",
+  "version": "0.0.1-beta.38",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -24,16 +24,16 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@koobiq/design-tokens": "^3.12.1",
+    "@koobiq/design-tokens": "^3.14.0",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/logger": "0.0.1-beta.37",
-    "@koobiq/react-core": "0.0.1-beta.37",
-    "@koobiq/react-primitives": "0.0.1-beta.37",
-    "@koobiq/react-icons": "0.0.1-beta.37"
+    "@koobiq/react-core": "0.0.1-beta.38",
+    "@koobiq/logger": "0.0.1-beta.38",
+    "@koobiq/react-icons": "0.0.1-beta.38",
+    "@koobiq/react-primitives": "0.0.1-beta.38"
   },
   "peerDependencies": {
-    "@koobiq/design-tokens": "^3.11.2",
+    "@koobiq/design-tokens": "^3.14.0",
     "react": "18.x || 19.x",
     "react-dom": "18.x || 19.x"
   },

package/dist/components/DatePicker/DatePicker._stories_.d.ts

@@ -1,13 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-import { DatePicker } from './DatePicker';
-declare const meta: {
-    title: string;
-    component: typeof DatePicker;
-    parameters: {
-        layout: string;
-    };
-    argTypes: {};
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Base: Story;