@fibery/ui-kit 4.2.0 → 5.0.0

package/src/button/make-button-colors.ts

@@ -5,7 +5,7 @@
 import type {CSSProperties} from "@linaria/core";
 
 import type {Theme} from "../design-system";
-import {alpha, getDarkenColor, themeVars} from "../design-system";
+import {alpha, alphaCoefficients as A, getDarkenColor, themeVars} from "../design-system";
 import type {ButtonVariant} from "./base-button";
 
 export const makeButtonColors = (color: string, variant: ButtonVariant, theme: Theme): CSSProperties => {
@@ -16,24 +16,24 @@ export const makeButtonColors = (color: string, variant: ButtonVariant, theme: T
         "--fibery-button-hover-color": getDarkenColor(color),
         "--fibery-button-text-color": themeVars.buttonPrimaryTextColor,
         "--fibery-button-text-active-color": themeVars.buttonPrimaryTextColor,
-        "--fibery-button-focus-color": alpha(color, 0.3),
+        "--fibery-button-focus-color": alpha(color, A.button.customFocus[0]),
       };
     case "ghost":
       return {
         "--fibery-button-color": "transparent",
-        "--fibery-button-hover-color": alpha(color, 0.15),
+        "--fibery-button-hover-color": alpha(color, A.button.customHover[0]),
         "--fibery-button-text-color": color,
-        "--fibery-button-text-active-color": alpha(color, 0.8),
-        "--fibery-button-focus-color": alpha(color, 0.3),
+        "--fibery-button-text-active-color": alpha(color, A.button.customTextActive[0]),
+        "--fibery-button-focus-color": alpha(color, A.button.customFocus[0]),
       };
     case "outline":
       return {
         "--fibery-button-color": "transparent",
-        "--fibery-button-hover-color": alpha(color, 0.15),
+        "--fibery-button-hover-color": alpha(color, A.button.customHover[0]),
         "--fibery-button-text-color": color,
-        "--fibery-button-text-active-color": alpha(color, 0.8),
-        "--fibery-button-focus-color": alpha(color, 0.3),
-        "--fibery-button-border-color": alpha(color, 0.3),
+        "--fibery-button-text-active-color": alpha(color, A.button.customTextActive[0]),
+        "--fibery-button-focus-color": alpha(color, A.button.customFocus[0]),
+        "--fibery-button-border-color": alpha(color, A.button.customBorder[0]),
       };
     default:
     case "soft": {
@@ -42,12 +42,12 @@ export const makeButtonColors = (color: string, variant: ButtonVariant, theme: T
       return {
         "--fibery-button-color": bg,
         "--fibery-button-hover-color": theme.select({
-          light: alpha(color, 0.3),
-          dark: alpha(color, 0.45),
+          light: alpha(color, A.button.softHover[0]),
+          dark: alpha(color, A.button.softHover[1]),
         }),
         "--fibery-button-text-color": fg,
-        "--fibery-button-text-active-color": alpha(fg, 0.8),
-        "--fibery-button-focus-color": alpha(color, 0.3),
+        "--fibery-button-text-active-color": alpha(fg, A.button.customTextActive[0]),
+        "--fibery-button-focus-color": alpha(color, A.button.customFocus[0]),
       };
     }
   }

package/src/button/select-button.tsx

@@ -2,7 +2,7 @@ import {css} from "@linaria/core";
 import {forwardRef} from "react";
 
 import {space} from "../design-system";
-import ArrowBottom from "../icons/react/arrow-bottom";
+import ArrowDown from "../icons/react/arrow-down";
 import type {ButtonProps} from "./button";
 import {Button} from "./button";
 
@@ -44,7 +44,7 @@ export const SelectButton = forwardRef<HTMLButtonElement, SelectButtonProps>(fun
     className,
     open,
     variant = "ghost",
-    iconEnd = <ArrowBottom className={iconSize[size]} />,
+    iconEnd = <ArrowDown className={iconSize[size]} />,
     color = "neutral",
     ...rest
   },

package/src/canvas-colors.ts

@@ -1,134 +1,87 @@
 import {memoize} from "@fibery/helpers/src/_";
 import type {Color} from "culori";
 
-import {hslFrom, oklchFrom, rgbFrom, serializeHexVariadic} from "./color-utils";
+import {invertHueRotate} from "./color-filter";
+import {oklchFrom, rgbFrom, serializeHexVariadic, colorFromUnsafe} from "./color-utils";
 
-export type ColorDef = [light: string, dark: string];
 export type CanvasColorRole = "bg" | "sticker" | "section" | "fg" | "ui" | "pencil";
 
-/** @deprecated sacrifice in favor of oklch-canvas */
-export const backgrounds: ColorDef[] = [
-  ["#1E1E1E", "#FDFDFD"],
-  ["#6E7A83", "#A4AAAF"],
-  ["#F24822", "#C05437"],
-  ["#FFA629", "#DF9E53"],
-  ["#FFCD29", "#E5C55E"],
-  ["#14AE5C", "#568B5C"],
-  ["#0D99FF", "#5288DB"],
-  ["#9747FF", "#7742E3"],
-  ["#FF7ED9", "#CE6DB2"],
-  ["#FDFDFD", "#1E1E1E"], //"#FAFAFB",
-  ["#C1C8CD", "#D8E1E8"],
-  ["#E5E8EB", "#F1F2F4"],
-  ["#FFC7C2", "#F3D8D4"],
-  ["#FCD19C", "#F5E0CD"],
-  ["#FFE8A3", "#F3E7AF"],
-  ["#AFF4C6", "#CFF0DD"],
-  ["#BDE3FF", "#D3DFF9"],
-  ["#E4CCFF", "#DDD8F7"],
-  ["#FFD7F3", "#F0D4E9"],
+/** Light-mode canvas palette; dark-mode variants are computed via {@link darkFromLight}. */
+export const backgrounds: string[] = [
+  "#1E1E1E",
+  "#6E7A83",
+  "#F24822",
+  "#FFA629",
+  "#FFCD29",
+  "#14AE5C",
+  "#0D99FF",
+  "#9747FF",
+  "#FF7ED9",
+  "#FDFDFD",
+  "#C1C8CD",
+  "#E5E8EB",
+  "#FFC7C2",
+  "#FCD19C",
+  "#FFE8A3",
+  "#AFF4C6",
+  "#BDE3FF",
+  "#E4CCFF",
+  "#FFD7F3",
 ];
 
-/** @deprecated sacrifice in favor of oklch-canvas */
-export const stickers: ColorDef[] = [
-  ["#AFBCCF", "#8E9AAA"],
-  ["#FFAFA3", "#D78C80"],
-  ["#FFC470", "#DDA75B"],
-  ["#FFD966", "#D4B755"],
-  ["#85E0A3", "#6FB888"],
-  ["#80CAFF", "#66AEDD"],
-  ["#D9B8FF", "#B292D4"],
-  ["#FFBDF2", "#D89FC3"],
-  ["#F1F2F4", "#C9CBCE"],
-  ["#FFE5E2", "#D8B5B2"],
-  ["#FFE9CF", "#D6C0A3"],
-  ["#FEF2CE", "#D3C8A5"],
-  ["#D7FFE5", "#A9D1B6"],
-  ["#DAEFFF", "#AFC9DD"],
-  ["#F0E3FF", "#C2B0D4"],
-  ["#FFE4F7", "#D8B7CF"],
+export const stickers: string[] = [
+  "#AFBCCF",
+  "#FFAFA3",
+  "#FFC470",
+  "#FFD966",
+  "#85E0A3",
+  "#80CAFF",
+  "#D9B8FF",
+  "#FFBDF2",
+  "#F1F2F4",
+  "#FFE5E2",
+  "#FFE9CF",
+  "#FEF2CE",
+  "#D7FFE5",
+  "#DAEFFF",
+  "#F0E3FF",
+  "#FFE4F7",
 ];
 
-/** @deprecated kill in favor of oklch-canvas */
-export const sections: ColorDef[] = [
-  ["#DDDDDD", "#2E2E2E"],
-  ["#EAEAEA", "#3B3B3B"],
-  ["#FFE2E0", "#8C4B48"],
-  ["#FFEAD6", "#8C6B48"],
-  ["#FFF3D6", "#8C7D48"],
-  ["#DDF8E2", "#488C60"],
-  ["#DBF0FF", "#48678C"],
-  ["#EAE1FF", "#5A488C"],
-  ["#FFD6F2", "#8C4874"],
-  ["#FFFFFF", "#FFFFFF"],
-  ["#F4F4F4", "#353535"],
-  ["#F9F9F9", "#4C4C4C"],
-  ["#FFF5F5", "#5E3530"],
-  ["#FFF7F0", "#543B29"],
-  ["#FFFBF0", "#554D2D"],
-  ["#EBFFEE", "#21462F"],
-  ["#F5FBFF", "#434E5D"],
-  ["#F8F5FF", "#3F3B4C"],
-  ["#FFF0FA", "#392630"],
+export const sections: string[] = [
+  "#DDDDDD",
+  "#EAEAEA",
+  "#FFE2E0",
+  "#FFEAD6",
+  "#FFF3D6",
+  "#DDF8E2",
+  "#DBF0FF",
+  "#EAE1FF",
+  "#FFD6F2",
+  "#FFFFFF",
+  "#F4F4F4",
+  "#F9F9F9",
+  "#FFF5F5",
+  "#FFF7F0",
+  "#FFFBF0",
+  "#EBFFEE",
+  "#F5FBFF",
+  "#F8F5FF",
+  "#FFF0FA",
 ];
 
 const fmt = (color: Color): string => serializeHexVariadic(rgbFrom(color));
 
-export let darkFromLight = (light: string, role: CanvasColorRole): string => {
-  const lch = oklchFrom(light)!;
-  const hsl = hslFrom(light)!;
-  const isAchromatic = lch.c < 0.008;
+export let darkFromLight = (light: string, _role: CanvasColorRole): string => {
+  const lch = oklchFrom(colorFromUnsafe(light));
+  const filtered = oklchFrom(invertHueRotate(light, 0.93, 180));
 
-  const {alpha} = lch;
-
-  switch (role) {
-    case "bg":
-    case "pencil":
-      if (lch.c < 0.03) {
-        if (lch.l < 0.3) {
-          return fmt({mode: "oklch", l: 0.99, c: 0, h: undefined, alpha});
-        }
-        if (lch.l > 0.97) {
-          return fmt({mode: "oklch", l: 0.24, c: 0, h: undefined, alpha});
-        }
-        return fmt({mode: "oklch", l: lch.l + (0.98 - lch.l) * 0.5, c: lch.c * 0.5, h: lch.h, alpha});
-      }
-      if (lch.c > 0.1) {
-        return fmt({mode: "oklch", l: lch.l - 0.06, c: lch.c * 0.74, h: lch.h, alpha});
-      }
-      return fmt({mode: "oklch", l: lch.l, c: lch.c * 0.55, h: lch.h, alpha});
-
-    case "sticker":
-      if (isAchromatic) {
-        return fmt({mode: "oklch", l: lch.l - 0.13, c: 0, h: undefined, alpha});
-      }
-      if (lch.c > 0.06) {
-        return fmt({mode: "oklch", l: lch.l - 0.11, c: lch.c * 0.9, h: lch.h, alpha});
-      }
-      return fmt({mode: "oklch", l: lch.l - 0.13, c: lch.c * 1.2, h: lch.h, alpha});
-
-    case "section":
-      if (isAchromatic) {
-        if (lch.l > 0.999) {
-          return light;
-        }
-        return fmt({mode: "oklch", l: lch.l * 0.35, c: 0, h: undefined, alpha});
-      }
-      if ((hsl.l ?? 0) < 0.95) {
-        return fmt({mode: "hsl", h: hsl.h, s: 0.32, l: 0.42, alpha});
-      }
-      return fmt({mode: "oklch", l: 0.37, c: 0.045, h: lch.h, alpha});
-
-    case "fg":
-      // Dark text (#1E1E1E) on light bg → light text on dark bg.
-      // Invert lightness in oklch: dark becomes light, light stays capped.
-      return fmt({mode: "oklch", l: Math.min(1 - lch.l + 0.15, 0.95), c: lch.c * 0.85, h: lch.h, alpha});
-
-    case "ui":
-      return light;
-
-    default:
-      throw new Error(role);
-  }
+  return fmt({
+    mode: "oklch",
+    l: filtered.l,
+    c: filtered.c,
+    h: lch.h,
+    alpha: lch.alpha,
+  });
 };
-darkFromLight = memoize(darkFromLight, (fg, r) => fg.toUpperCase() + r);
+darkFromLight = memoize(darkFromLight, (fg, _role) => fg.toUpperCase());

package/src/checkbox.tsx

@@ -4,7 +4,7 @@ import type {ChangeEvent, ComponentProps, ComponentPropsWithoutRef, CSSPropertie
 import {memo, useEffect, useRef} from "react";
 
 import type {Theme} from "./design-system";
-import {alpha, getDarkenColor, layout, space, textClasses, themeVars} from "./design-system";
+import {alpha, alphaCoefficients as A, getDarkenColor, layout, space, textClasses, themeVars} from "./design-system";
 import {smallHtmlStylesClass} from "./html-styles";
 import {mobileRootSelector} from "./mobile-styles";
 import {useTheme} from "./theme-provider";
@@ -159,8 +159,8 @@ const CheckboxComponent = memo(
     const indeterminate = checked === null;
     const defaultIndeterminate = defaultChecked === null;
     const cColor = color || theme.colors.colorAccent;
-    const fColor = alpha(cColor, 0.25);
-    const hColor = alpha(cColor, 0.1);
+    const fColor = alpha(cColor, A.checkbox.focus[0]);
+    const hColor = alpha(cColor, A.checkbox.hover[0]);
     const dColor = getDarkenColor(cColor);
     const bColor = themeVars.checkboxColor;
 

package/src/collapsible-section.tsx

@@ -4,8 +4,8 @@ import type {ReactNode} from "react";
 import {useCallback, useEffect, useRef} from "react";
 
 import {space} from "./design-system";
-import ArrowBottom from "./icons/react/arrow-bottom";
-import ArrowTop from "./icons/react/arrow-top";
+import ArrowDown from "./icons/react/arrow-down";
+import ArrowUp from "./icons/react/arrow-up";
 
 const headerCss = css`
   display: flex;
@@ -46,7 +46,7 @@ export const CollapsibleSection = ({
     onChange: onCollapsedChange,
   });
 
-  const arrow = isCollapsed ? <ArrowBottom className={arrowCss} /> : <ArrowTop className={arrowCss} />;
+  const arrow = isCollapsed ? <ArrowDown className={arrowCss} /> : <ArrowUp className={arrowCss} />;
 
   const onToggle = useCallback(() => setIsCollapsed(!isCollapsed), [isCollapsed, setIsCollapsed]);
 

package/src/color-filter.test.ts

@@ -64,4 +64,17 @@ describe("makeColorFilter double-deneutralize guard", () => {
     expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining("double-deneutralize detected"));
     warnSpy.mockRestore();
   });
+
+  it("does not warn for visuially unchanged black/white normalization", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const filter = makeColorFilter({oklchC: 0.8});
+
+    expect(filter("#000000")).toBe("rgb(0, 0, 0)");
+    expect(filter("rgb(0, 0, 0)")).toBe("rgb(0, 0, 0)");
+    expect(filter("#FFFFFF")).toBe("rgb(255, 255, 255)");
+    expect(filter("rgb(255, 255, 255)")).toBe("rgb(255, 255, 255)");
+
+    expect(warnSpy).not.toHaveBeenCalled();
+    warnSpy.mockRestore();
+  });
 });

package/src/color-filter.ts

@@ -1,8 +1,17 @@
 import {memoize} from "@fibery/helpers/src/_";
-import {filterDeficiencyDeuter, filterDeficiencyProt, filterDeficiencyTrit, type Oklch} from "culori";
+import {
+  clampRgb,
+  filterDeficiencyDeuter,
+  filterDeficiencyProt,
+  filterDeficiencyTrit,
+  filterHueRotate,
+  filterInvert,
+  type Oklch,
+  type Rgb,
+} from "culori";
 
 import {makeAdjust, type AdjustSpec} from "./color-adjuster";
-import {cssFromColor, oklchFrom} from "./color-utils";
+import {colorFromUnsafe, cssFromColor, oklchFrom, rgbFrom} from "./color-utils";
 import {makeDoubleApplyDetector} from "./double-apply";
 import {shiftHueTowards} from "./palette-generator";
 
@@ -95,7 +104,21 @@ export function makeColorFilter(spec: ColorFilterSpec | undefined): ColorFilter
     }
 
     const result = cssFromColor(t);
-    detect(color, result);
+    const normalizedInput = cssFromColor(parsed);
+    const normalizedEndpoint = result === "rgb(0, 0, 0)" || result === "rgb(255, 255, 255)";
+    detect(color, result, normalizedInput !== result || !normalizedEndpoint);
     return result;
   });
 }
+
+/**
+ * Apply CSS `invert(amount) hue-rotate(angleDeg)` via culori's filter primitives,
+ * which implement the filter spec in gamma-encoded sRGB.
+ * @see https://www.w3.org/TR/filter-effects-1/
+ */
+export function invertHueRotate(color: string, invertAmount: number, hueDeg: number): Rgb {
+  const rgb = rgbFrom(colorFromUnsafe(color));
+  // culori's filters leave out-of-gamut channels unclamped; CSS clamps the final
+  // filter result to [0, 1], so clamp to match (and to keep oklchFrom downstream sane).
+  return clampRgb(rgbFrom(filterHueRotate(hueDeg)(filterInvert(invertAmount)(rgb)))!);
+}

package/src/color-utils.ts

@@ -29,9 +29,16 @@ const mapToSrgb = toGamut("rgb", "oklch");
 export const isValidColor = (color: string) => parse(color) !== undefined;
 export const invalidColorFallback = "rgb(94, 94, 94)";
 export function colorFromUnsafe(color: string, fallback = invalidColorFallback): Color {
-  const parsed = parse(resolveColorArg(color, "colorFromUnsafe") ?? "") ?? parse(fallback)!;
+  let parsed = parse(resolveColorArg(color, "colorFromUnsafe") ?? "");
   if (!parsed) {
-    throw new Error(`Failed to parse fallback color ${fallback}`);
+    if (process.env.NODE_ENV !== "production") {
+      // oxlint-disable-next-line no-console
+      console.warn("invalid color %o, falling back to %o", color, fallback);
+    }
+    parsed = parse(fallback);
+    if (!parsed) {
+      throw new Error(`Failed to parse fallback color ${fallback}`);
+    }
   }
   return useOklchDefs ? oklchFrom(parsed) : rgbFrom(parsed);
 }

package/src/command-menu/nested-command-menu.tsx

@@ -6,8 +6,8 @@ import React, {forwardRef, useCallback, useEffect, useMemo, useRef, useState} fr
 
 import {IconButton} from "../button/icon-button";
 import {border, space, themeVars} from "../design-system";
+import ArrowBack from "../icons/react/arrow-back";
 import ArrowRight from "../icons/react/arrow-right";
-import Back from "../icons/react/back";
 import {Tooltip} from "../tooltip";
 import {
   commandItemCss,
@@ -173,7 +173,7 @@ export function NestedCommandMenu<T>({
             }}
           >
             <div>
-              <Back iconSize={16} aria-hidden />
+              <ArrowBack iconSize={16} aria-hidden />
             </div>
             <div>
               Back

package/src/date-picker/date-range-picker-popup-content.tsx

@@ -30,11 +30,12 @@ export const sortDates = ({from, to}: {from: Date; to: Date}) => {
 
 export const DateRangePickerPopupContent = forwardRef<
   {setValue: (value: string) => void},
-  DatePickerCommonProps & NativeDateRangePickerProps
+  DatePickerCommonProps & NativeDateRangePickerProps & {autoFocus?: boolean}
 >((props, ref) => {
   const {
     value,
     onChange,
+    autoFocus = true,
     disabled = false,
     showTime = false,
     allowClear = true,
@@ -169,7 +170,7 @@ export const DateRangePickerPopupContent = forwardRef<
           allowClear={allowClear}
           disabled={disabled}
           placeholder={placeholder.current}
-          autoFocus
+          autoFocus={autoFocus}
         />
       )}
       <StartEndFocusContext.Provider value={{focusOnStart, setFocusOnStart}}>

package/src/date-picker/date-range-picker.tsx

@@ -7,7 +7,9 @@ import {focusable} from "tabbable";
 import "react-day-picker/dist/style.css";
 import {space} from "../design-system";
 import {EmptyValue} from "../empty-value";
+import {MobileDrawer} from "../mobile-drawer";
 import {Popover, type PopoverContentProps} from "../popover";
+import {useIsPhone} from "../use-is-phone";
 import {DateRangePickerPopupContent} from "./date-range-picker-popup-content";
 import {FakeDateInputWrapper} from "./fake-date-input";
 import type {ControlledDatePickerProps, DatePickerCommonProps, MomentDateRangeProps} from "./types";
@@ -47,6 +49,7 @@ export const DateRangePicker = forwardRef<
   );
 
   const fakeWrapperRef = useRef<HTMLDivElement>(null);
+  const isPhone = useIsPhone();
 
   const pickerValue = children || (
     <FakeDateInputWrapper ref={fakeWrapperRef} disabled={disabled} isPickerOpen={open}>
@@ -87,6 +90,26 @@ export const DateRangePicker = forwardRef<
     return pickerValue;
   }
 
+  if (isPhone) {
+    return (
+      <MobileDrawer
+        open={open}
+        onOpenChange={onOpenChange}
+        title={title ?? placeholder}
+        trigger={<div onClick={stopPropagation}>{pickerValue}</div>}
+      >
+        <DateRangePickerPopupContent
+          ref={ref}
+          {...props}
+          autoFocus={false}
+          onChange={onDatesChange}
+          value={dateValue}
+          onKeyDown={onDatePickerKeyDown}
+        />
+      </MobileDrawer>
+    );
+  }
+
   return (
     <div>
       <Popover.Root open={open} onOpenChange={onOpenChange}>
@@ -99,7 +122,6 @@ export const DateRangePicker = forwardRef<
           <Popover.Content
             title={title}
             offset={offset}
-            supportMobile
             placement="bottom-start"
             popupContainerClassName={css`
               z-index: 10001;

package/src/date-picker/relative-date-picker.tsx

@@ -16,6 +16,7 @@ type RelativeDatePickerProps = {
   onChange: (value: RelativeDateValue) => void;
   relativeDateToExactDate?: (value: RelativeDateValue) => string;
   disableFutureSelection?: boolean;
+  autoFocus?: boolean;
 };
 
 const unitOptions = [
@@ -32,7 +33,7 @@ const isBeforeNowOptions = [
 ];
 
 export const RelativeDatePicker = (props: RelativeDatePickerProps) => {
-  const {value, onChange, relativeDateToExactDate, disableFutureSelection} = props;
+  const {value, onChange, relativeDateToExactDate, disableFutureSelection, autoFocus = true} = props;
 
   const valueWithDefault = useMemo(
     () => value ?? {unit: "day" as unitOfTime.DurationConstructor, isBeforeNow: true, amount: 0},
@@ -99,7 +100,7 @@ export const RelativeDatePicker = (props: RelativeDatePickerProps) => {
         <div>
           <AntInputNumber
             aria-label="Amount"
-            autoFocus={true}
+            autoFocus={autoFocus}
             value={valueWithDefault.amount}
             controls={false}
             style={{width: "56px"}}

package/src/date-picker/single-date-picker-popup-content.tsx

@@ -17,11 +17,12 @@ import {formatDateInputValue, getRandomPlaceholder} from "./utils";
 
 export const SingleDatePickerPopupContent = forwardRef<
   {setValue: (value: string) => void},
-  DatePickerCommonProps & NativeSingleDatePickerProps
+  DatePickerCommonProps & NativeSingleDatePickerProps & {autoFocus?: boolean}
 >(function SingleDatePickerPopupContent(props, ref) {
   const {
     value,
     onChange,
+    autoFocus = true,
     disabled = false,
     showTime = false,
     allowClear = true,
@@ -61,7 +62,7 @@ export const SingleDatePickerPopupContent = forwardRef<
         allowClear={allowClear}
         disabled={disabled}
         placeholder={placeholder.current}
-        autoFocus
+        autoFocus={autoFocus}
       />
       <DayPicker
         mode={"single"}

package/src/date-picker/single-date-picker.tsx

@@ -9,9 +9,11 @@ import {focusable} from "tabbable";
 
 import {space, themeVars} from "../design-system";
 import {EmptyValue} from "../empty-value";
+import {MobileDrawer} from "../mobile-drawer";
 import {Popover} from "../popover";
 import {TabNavLink, TabNavList, TabNavRoot} from "../tab-nav/tab-nav";
 import type {$TSFixMe} from "../tsfixme";
+import {useIsPhone} from "../use-is-phone";
 import {FakeDateInputWrapper} from "./fake-date-input";
 import {RelativeDatePicker} from "./relative-date-picker";
 import {SingleDatePickerPopupContent} from "./single-date-picker-popup-content";
@@ -82,7 +84,7 @@ type DatePickerRef = {
 
 export const SingleDatePickerPopoverContent = forwardRef<
   DatePickerRef,
-  {className?: string} & SingleDatePickerPopoverContentProps<boolean>
+  {className?: string; autoFocus?: boolean} & SingleDatePickerPopoverContentProps<boolean>
 >((props, ref) => {
   const {
     className,
@@ -92,6 +94,7 @@ export const SingleDatePickerPopoverContent = forwardRef<
     allowRelativeDate = false,
     relativeDateToExactDate,
     disableFutureSelection,
+    autoFocus,
   } = props;
 
   const isRelativeValue = allowRelativeDate ? isRelativeDatePlaceholder(value) : false;
@@ -201,6 +204,7 @@ export const SingleDatePickerPopoverContent = forwardRef<
             onChange={onRelativeDateChange}
             relativeDateToExactDate={relativeDateToExactDate}
             disableFutureSelection={disableFutureSelection}
+            autoFocus={autoFocus}
           />
         )}
       </div>
@@ -240,6 +244,7 @@ export const SingleDatePicker: SingleDatePickerWithForwardRefType = forwardRef<
       : null;
 
   const fakeWrapperRef = useRef<HTMLDivElement>(null);
+  const isPhone = useIsPhone();
 
   const pickerValue = children || (
     <FakeDateInputWrapper disabled={disabled} isPickerOpen={open} size={size}>
@@ -251,6 +256,19 @@ export const SingleDatePicker: SingleDatePickerWithForwardRefType = forwardRef<
     return pickerValue;
   }
 
+  if (isPhone) {
+    return (
+      <MobileDrawer
+        open={open}
+        onOpenChange={onOpenChange}
+        title={title ?? placeholder}
+        trigger={<div onClick={stopPropagation}>{pickerValue}</div>}
+      >
+        <SingleDatePickerPopoverContent ref={ref} {...props} autoFocus={false} />
+      </MobileDrawer>
+    );
+  }
+
   return (
     <Popover.Root open={open} onOpenChange={onOpenChange}>
       <Popover.Trigger>
@@ -264,7 +282,6 @@ export const SingleDatePicker: SingleDatePickerWithForwardRefType = forwardRef<
           title={title}
           offset={[0, space.s6]}
           placement="bottom-start"
-          supportMobile
           popupContainerClassName={css`
             z-index: 10001;
           `}