@koobiq/react-components 0.0.1-beta.36 → 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/DateInput/DateInput.js

@@ -67,6 +67,7 @@ function DateInputRender(props, ref) {
     {
       endAddon,
       isInvalid,
+      isDisabled,
       startAddon
     },
     slotProps?.group

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

@@ -11,7 +11,7 @@ export type DateInputProps<T extends DateValue> = {
     /** Unique identifier for testing purposes. */
     'data-testid'?: string | number;
     /** The helper text content. */
-    caption?: string | number;
+    caption?: ReactNode;
     /**
      * The variant to use.
      * @default filled

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/FieldComponents/FieldAddon/FieldAddon.d.ts

@@ -4,6 +4,7 @@ export declare const fieldAddonPropPlacement: readonly ["start", "end"];
 export type FieldAddonPlacement = (typeof fieldAddonPropPlacement)[number];
 export type FieldAddonProps = ExtendableComponentPropsWithRef<{
     isInvalid?: boolean;
+    isDisabled?: boolean;
     children?: ReactNode;
     placement?: FieldAddonPlacement;
 }, 'div'>;

package/dist/components/FieldComponents/FieldAddon/FieldAddon.js

@@ -3,15 +3,27 @@ import { forwardRef } from "react";
 import { isNotNil, clsx } from "@koobiq/react-core";
 import s from "./FieldAddon.module.css.js";
 const FieldAddon = forwardRef(
-  ({ placement = "start", isInvalid = false, className, children, ...other }, ref) => isNotNil(children) ? /* @__PURE__ */ jsx(
+  ({
+    placement = "start",
+    isInvalid = false,
+    isDisabled = false,
+    className,
+    children,
+    ...other
+  }, ref) => isNotNil(children) ? /* @__PURE__ */ jsx(
     "div",
     {
       className: clsx(
         s.base,
         s[placement],
         isInvalid && s.invalid,
+        isDisabled && s.disabled,
         className
       ),
+      "data-placement": placement,
+      "data-invalid": isInvalid,
+      "data-disabled": isDisabled,
+      "data-testid": `field-addon-${placement}`,
       ...other,
       ref,
       children

package/dist/components/FieldComponents/FieldAddon/FieldAddon.module.css.js

@@ -2,15 +2,18 @@ const base = "kbq-fieldaddon-3388d3";
 const start = "kbq-fieldaddon-start-83aa84";
 const end = "kbq-fieldaddon-end-f314bf";
 const invalid = "kbq-fieldaddon-invalid-08b1fe";
+const disabled = "kbq-fieldaddon-disabled-c170bf";
 const s = {
   base,
   start,
   end,
-  invalid
+  invalid,
+  disabled
 };
 export {
   base,
   s as default,
+  disabled,
   end,
   invalid,
   start

package/dist/components/FieldComponents/FieldInputGroup/FieldInputGroup.js

@@ -5,62 +5,60 @@ import { useInputContext, Group } from "@koobiq/react-primitives";
 import s from "./FieldInputGroup.module.css.js";
 import { FieldInputGroupContext } from "./FieldInputGroupContext.js";
 import { FieldAddon } from "../FieldAddon/FieldAddon.js";
-const FieldInputGroup = forwardRef(
-  ({
-    children,
-    className,
-    startAddon,
-    endAddon,
-    isInvalid,
-    slotProps,
-    ...other
-  }, ref) => {
-    const { value } = useInputContext();
-    const hasStartAddon = !!startAddon;
-    const hasEndAddon = !!endAddon;
-    const hasValue = isNotNil(value);
-    return /* @__PURE__ */ jsx(
-      Group,
-      {
-        className: clsx(
-          s.base,
-          hasStartAddon && s.hasStartAddon,
-          hasEndAddon && s.hasEndAddon,
-          className
-        ),
-        ...other,
-        ref,
-        children: ({ isHovered, isFocusWithin, isDisabled }) => /* @__PURE__ */ jsxs(
-          FieldInputGroupContext.Provider,
-          {
-            value: { isDisabled, isHovered, hasValue, isFocusWithin },
-            children: [
-              /* @__PURE__ */ jsx(
-                FieldAddon,
-                {
-                  placement: "start",
-                  isInvalid,
-                  ...slotProps?.start,
-                  children: startAddon
-                }
-              ),
-              children,
-              /* @__PURE__ */ jsx(
-                FieldAddon,
-                {
-                  placement: "end",
-                  isInvalid,
-                  ...slotProps?.end,
-                  children: endAddon
-                }
-              )
-            ]
-          }
-        )
-      }
-    );
-  }
-);
+const FieldInputGroup = forwardRef(({ children, className, startAddon, endAddon, slotProps, ...other }, ref) => {
+  const { value } = useInputContext();
+  const hasStartAddon = !!startAddon;
+  const hasEndAddon = !!endAddon;
+  const hasValue = isNotNil(value);
+  return /* @__PURE__ */ jsx(
+    Group,
+    {
+      className: clsx(
+        s.base,
+        hasStartAddon && s.hasStartAddon,
+        hasEndAddon && s.hasEndAddon,
+        className
+      ),
+      ...other,
+      ref,
+      children: ({ isHovered, isFocusWithin, isDisabled, isInvalid }) => /* @__PURE__ */ jsxs(
+        FieldInputGroupContext.Provider,
+        {
+          value: {
+            isDisabled,
+            isHovered,
+            hasValue,
+            isFocusWithin,
+            isInvalid
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              FieldAddon,
+              {
+                placement: "start",
+                isInvalid,
+                isDisabled,
+                ...slotProps?.start,
+                children: startAddon
+              }
+            ),
+            children,
+            /* @__PURE__ */ jsx(
+              FieldAddon,
+              {
+                placement: "end",
+                isInvalid,
+                isDisabled,
+                ...slotProps?.end,
+                children: endAddon
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
 FieldInputGroup.displayName = "FieldInputGroup";
 export {
   FieldInputGroup

package/dist/components/FieldComponents/FieldInputGroup/FieldInputGroupContext.d.ts

@@ -3,6 +3,7 @@ export type FieldInputGroupContextProps = {
     hasValue?: boolean;
     isHovered?: boolean;
     isFocusWithin?: boolean;
+    isInvalid?: boolean;
 };
 export declare const FieldInputGroupContext: import("react").Context<FieldInputGroupContextProps>;
 export declare const useFieldInputGroup: () => FieldInputGroupContextProps;

package/dist/components/Input/Input.js

@@ -96,6 +96,7 @@ const Input = forwardRef((props, ref) => {
       {
         endAddon,
         isInvalid: isInvalid2,
+        isDisabled: isDisabled2,
         startAddon
       },
       slotProps?.group

package/dist/components/InputNumber/components/InputNumberCounterControls.js

@@ -1,33 +1,33 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { clsx } from "@koobiq/react-core";
-import { IconChevronUp16, IconChevronDown16 } from "@koobiq/react-icons";
+import { IconChevronUpS16, IconChevronDownS16 } from "@koobiq/react-icons";
 import s from "./InputNumberCounterControls.module.css.js";
 import { useFieldInputGroup } from "../../FieldComponents/FieldInputGroup/FieldInputGroupContext.js";
 import { IconButton } from "../../IconButton/IconButton.js";
 const InputNumberCounterControls = () => {
-  const { isHovered, hasValue, isFocusWithin } = useFieldInputGroup();
-  const visible = (isHovered || isFocusWithin) && hasValue;
-  return /* @__PURE__ */ jsxs("div", { className: clsx(s.base, visible && s.visible), children: [
+  const { isInvalid } = useFieldInputGroup();
+  const variant = isInvalid ? "error" : "fade-contrast";
+  return /* @__PURE__ */ jsxs("div", { className: s.base, children: [
     /* @__PURE__ */ jsx(
       IconButton,
       {
-        className: s.counter,
+        className: clsx(s.counter, s.increment),
         slot: "increment",
-        variant: "fade-contrast",
+        variant,
         size: "l",
         isCompact: true,
-        children: /* @__PURE__ */ jsx(IconChevronUp16, {})
+        children: /* @__PURE__ */ jsx(IconChevronUpS16, {})
       }
     ),
     /* @__PURE__ */ jsx(
       IconButton,
       {
-        className: s.counter,
+        className: clsx(s.counter, s.decrement),
         slot: "decrement",
-        variant: "fade-contrast",
+        variant,
         size: "l",
         isCompact: true,
-        children: /* @__PURE__ */ jsx(IconChevronDown16, {})
+        children: /* @__PURE__ */ jsx(IconChevronDownS16, {})
       }
     )
   ] });

package/dist/components/InputNumber/components/InputNumberCounterControls.module.css.js

@@ -1,14 +1,17 @@
 const base = "kbq-inputnumbercountercontrols-77ed13";
-const visible = "kbq-inputnumbercountercontrols-visible-5885f8";
 const counter = "kbq-inputnumbercountercontrols-counter-1126db";
+const increment = "kbq-inputnumbercountercontrols-increment-d89a95";
+const decrement = "kbq-inputnumbercountercontrols-decrement-fbd37a";
 const s = {
   base,
-  visible,
-  counter
+  counter,
+  increment,
+  decrement
 };
 export {
   base,
   counter,
+  decrement,
   s as default,
-  visible
+  increment
 };

package/dist/components/RadioGroup/components/Radio/Radio.d.ts

@@ -1,7 +1,6 @@
 export declare const Radio: import("react").ForwardRefExoticComponent<Omit<Omit<import("@react-types/radio").AriaRadioProps, "isDisabled">, "disabled"> & {
     disabled?: boolean;
 } & {
-    caption?: string;
     size?: import("./types").RadioPropSize;
     labelPlacement?: import("./types").RadioPropLabelPlacement;
     className?: string;

package/dist/components/RadioGroup/components/Radio/types.d.ts

@@ -5,8 +5,6 @@ export type RadioPropSize = (typeof radioPropSize)[number];
 export declare const radioPropLabelPlacement: readonly ["start", "end"];
 export type RadioPropLabelPlacement = (typeof radioPropLabelPlacement)[number];
 export type RadioProps = UseRadioProps & {
-    /** The helper text content. */
-    caption?: string;
     /**
      * Size.
      * @default normal

package/dist/components/Select/Select.js

@@ -131,6 +131,7 @@ function SelectRender(props, ref) {
         /* @__PURE__ */ jsx(IconChevronDownS16, {})
       ] }),
       isInvalid,
+      isDisabled,
       ref: containerRef
     },
     slotProps?.group

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

@@ -1979,9 +1979,10 @@
   --field-control-end-addon-inline-size: 36px;
 }
 .kbq-fieldaddon-3388d3 {
+  --field-addon-color: var(--kbq-icon-contrast-fade);
   z-index: 1;
   block-size: 100%;
-  color: var(--kbq-icon-contrast-fade);
+  color: var(--field-addon-color);
   transition: color var(--kbq-transition-default);
   justify-content: center;
   align-items: center;
@@ -1999,7 +2000,11 @@
 }
 
 .kbq-fieldaddon-invalid-08b1fe {
-  color: var(--kbq-icon-error);
+  --field-addon-color: var(--kbq-icon-error);
+}
+
+.kbq-fieldaddon-disabled-c170bf {
+  --field-addon-color: var(--kbq-states-icon-disabled);
 }
 .kbq-fieldinput-77b90b {
   --field-input-color: ;
@@ -2138,22 +2143,22 @@
   overflow: auto;
 }
 .kbq-inputnumbercountercontrols-77ed13 {
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity var(--kbq-transition-default);
   flex-direction: column;
-  margin-inline-end: -8px;
+  margin-inline-end: calc(-1 * var(--kbq-size-s));
   display: flex;
 }
 
-.kbq-inputnumbercountercontrols-visible-5885f8 {
-  visibility: visible;
-  opacity: 1;
-}
-
 .kbq-inputnumbercountercontrols-counter-1126db {
   inline-size: var(--kbq-size-3xl);
 }
+
+.kbq-inputnumbercountercontrols-increment-d89a95 > svg {
+  margin-block-end: calc(-1 * var(--kbq-size-3xs));
+}
+
+.kbq-inputnumbercountercontrols-decrement-fbd37a > svg {
+  margin-block-start: calc(-1 * var(--kbq-size-3xs));
+}
 .kbq-radio-c3ed31 {
   --radio-size: ;
   --radio-opacity: 0;
@@ -2330,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;
 }
@@ -2412,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);
 }
 
@@ -2431,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);
 }
 
@@ -2445,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);
@@ -3760,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;
 }
@@ -3867,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.36",
+  "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.36",
-    "@koobiq/react-core": "0.0.1-beta.36",
-    "@koobiq/react-primitives": "0.0.1-beta.36",
-    "@koobiq/react-icons": "0.0.1-beta.36"
+    "@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;