notionsoft-ui 1.0.34 → 1.0.35

package/src/notion-ui/cached-image/cached-image.stories.tsx

@@ -0,0 +1,109 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import CachedImage, { ImageProps } from "./cached-image";
+
+/* ---------------------------------- */
+/* Helpers */
+/* ---------------------------------- */
+
+// Basic fetch wrapper
+const fetchImage = async (src: string): Promise<Response> => {
+  return fetch(src);
+};
+
+// Delayed fetch to show shimmer/loading
+const delayedFetch = async (src: string): Promise<Response> => {
+  await new Promise((resolve) => setTimeout(resolve, 2000));
+  return fetch(src);
+};
+
+/* ---------------------------------- */
+/* Meta */
+/* ---------------------------------- */
+
+const meta: Meta<ImageProps> = {
+  title: "Media/CachedImage",
+  component: CachedImage,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    className: {
+      control: "text",
+    },
+    classNames: {
+      control: "object",
+    },
+    fetch: {
+      table: { disable: true },
+    },
+    apiConfig: {
+      table: { disable: true },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<ImageProps>;
+
+/* ---------------------------------- */
+/* Stories */
+/* ---------------------------------- */
+
+// Default (fetch + cache)
+export const Default: Story = {
+  args: {
+    src: "/images/sample.jpg",
+    fetch: fetchImage,
+    className: "w-40 h-40 rounded-md",
+  },
+};
+
+// API config variant
+export const WithApiConfig: Story = {
+  args: {
+    apiConfig: {
+      src: "/images/sample.jpg",
+    },
+    className: "w-40 h-40 rounded-lg",
+  },
+};
+
+// Cross-origin image (bypasses cache)
+export const CrossOrigin: Story = {
+  args: {
+    src: "https://picsum.photos/200",
+    fetch: fetchImage,
+    className: "w-40 h-40 rounded-full",
+  },
+};
+
+// Loading / shimmer state
+export const LoadingState: Story = {
+  args: {
+    src: "/images/sample.jpg",
+    fetch: delayedFetch,
+    className: "w-32 h-32",
+    classNames: {
+      shimmerClassName: "bg-gray-200",
+      shimmerIconClassName: "stroke-gray-400",
+    },
+  },
+};
+
+// Small size
+export const Small: Story = {
+  args: {
+    src: "/images/sample.jpg",
+    fetch: fetchImage,
+    className: "w-16 h-16 rounded",
+  },
+};
+
+// Large size
+export const Large: Story = {
+  args: {
+    src: "/images/sample.jpg",
+    fetch: fetchImage,
+    className: "w-64 h-64 rounded-xl",
+  },
+};

package/src/notion-ui/cached-image/cached-image.tsx

@@ -0,0 +1,213 @@
+import Shimmer from "@/components/notion-ui/shimmer";
+import { cn } from "@/utils/cn";
+import React, { useEffect, useState, forwardRef, useRef } from "react";
+
+/* ---------------------------------- */
+/* Types */
+/* ---------------------------------- */
+
+interface FetchConfig {
+  src: string;
+  headers?: Record<string, string>;
+  params?: string;
+}
+
+interface BaseImageProps extends React.HTMLAttributes<HTMLDivElement> {
+  classNames?: {
+    shimmerClassName?: string;
+    shimmerIconClassName?: string;
+  };
+}
+
+interface FetchImageProps extends BaseImageProps {
+  src: string;
+  fetch: (src: string) => Promise<Response>;
+  apiConfig?: never;
+}
+
+interface ApiConfigImageProps extends BaseImageProps {
+  apiConfig: FetchConfig;
+  src?: never;
+  fetch?: never;
+}
+
+export type ImageProps = FetchImageProps | ApiConfigImageProps;
+
+/* ---------------------------------- */
+/* Cache helpers */
+/* ---------------------------------- */
+
+const IMAGE_CACHE = "image-cache-v1";
+
+async function getCachedImage(url: string): Promise<string | null> {
+  const cache = await caches.open(IMAGE_CACHE);
+  const cached = await cache.match(url);
+
+  if (!cached) return null;
+
+  const blob = await cached.blob();
+  return URL.createObjectURL(blob);
+}
+
+async function cacheImage(url: string, response: Response) {
+  const cache = await caches.open(IMAGE_CACHE);
+  await cache.put(url, response.clone());
+}
+
+/* ---------------------------------- */
+/* Utils */
+/* ---------------------------------- */
+
+function isCrossOrigin(url: string): boolean {
+  try {
+    return new URL(url, window.location.href).origin !== window.location.origin;
+  } catch {
+    return false;
+  }
+}
+
+/* ---------------------------------- */
+/* Component */
+/* ---------------------------------- */
+
+const CachedImage = forwardRef<HTMLDivElement, ImageProps>((props, ref) => {
+  const { className, classNames, fetch, apiConfig, src, ...imgProps } = props;
+
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const { shimmerClassName, shimmerIconClassName } = classNames || {};
+
+  const fetchRef = useRef(fetch);
+  useEffect(() => {
+    fetchRef.current = fetch;
+  }, [fetch]);
+
+  async function loadImage() {
+    try {
+      const resolvedSrc = apiConfig?.src ?? src;
+
+      if (!resolvedSrc) {
+        setImageUrl(null);
+        return;
+      }
+
+      /* ---------------------------------- */
+      /* Cross-origin → use <img src> */
+      /* ---------------------------------- */
+      if (isCrossOrigin(resolvedSrc)) {
+        setImageUrl(resolvedSrc);
+        setLoading(false);
+        return;
+      }
+
+      /* ---------------------------------- */
+      /* Cache Storage */
+      /* ---------------------------------- */
+      const cached = await getCachedImage(resolvedSrc);
+      if (cached) {
+        setImageUrl(cached);
+        setLoading(false);
+        return;
+      }
+
+      /* ---------------------------------- */
+      /* Fetch */
+      /* ---------------------------------- */
+      const response = fetchRef.current
+        ? await fetchRef.current(resolvedSrc)
+        : await window.fetch(resolvedSrc, {
+            headers: apiConfig?.headers,
+          });
+
+      const contentType = response.headers.get("content-type") ?? "";
+
+      if (
+        !response.ok ||
+        (!contentType.startsWith("image/") &&
+          contentType !== "application/octet-stream")
+      ) {
+        throw new Error(`Invalid image response: ${contentType}`);
+      }
+
+      await cacheImage(resolvedSrc, response.clone());
+
+      const blob = await response.blob();
+      setImageUrl(URL.createObjectURL(blob));
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    loadImage();
+  }, [src, apiConfig?.src]);
+
+  /* ---------------------------------- */
+  /* Cleanup */
+  /* ---------------------------------- */
+
+  useEffect(() => {
+    return () => {
+      if (imageUrl?.startsWith("blob:")) {
+        URL.revokeObjectURL(imageUrl);
+      }
+    };
+  }, [imageUrl]);
+
+  /* ---------------------------------- */
+  /* UI */
+  /* ---------------------------------- */
+
+  if (loading || !imageUrl) {
+    const stop = loading ? false : !imageUrl && true;
+
+    return (
+      <Shimmer
+        className={cn(
+          "bg-primary/10 mx-auto flex p-2 items-center size-8 rounded border border-tertiary/10",
+          shimmerClassName
+        )}
+        stop={stop}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className={cn(
+            "stroke-primary/40 mx-auto stroke-2",
+            shimmerIconClassName
+          )}
+        >
+          <rect x="1" y="1" width="22" height="22" rx="2" ry="2" />
+          <polyline points="3,20 8,13 13,17 17,12 21,16" />
+          <circle cx="16" cy="6" r="2" />
+        </svg>
+      </Shimmer>
+    );
+  }
+
+  return (
+    <div
+      ref={ref}
+      // src={imageUrl}
+      style={{ backgroundImage: `url(${imageUrl})` }}
+      // alt={alt}
+      className={cn(
+        "cursor-pointer shadow-lg bg-cover bg-center mx-auto",
+        className
+      )}
+      {...imgProps}
+    />
+  );
+});
+
+CachedImage.displayName = "CachedImage";
+
+export default CachedImage;

package/src/notion-ui/cached-image/index.ts

@@ -0,0 +1,3 @@
+import CachedImage from "./cached-image";
+
+export default CachedImage;

package/src/notion-ui/cached-image/utils.ts

@@ -0,0 +1,7 @@
+export function isCrossOrigin(url: string): boolean {
+  try {
+    return new URL(url, window.location.href).origin !== window.location.origin;
+  } catch {
+    return false;
+  }
+}

package/src/notion-ui/date-picker/DatePicker.stories.tsx

@@ -42,7 +42,6 @@ export const Default: StoryObj<DatePickerProps> = {
   render: (args) => <Wrapper {...args} />,
   args: {
     placeholder: "Select date...",
-    required: false,
     label: "Date",
     measurement: "md",
   },
@@ -83,7 +82,6 @@ export const WithError: StoryObj<DatePickerProps> = {
     placeholder: "Select date...",
     label: "Birthday",
     errorMessage: "This field is required",
-    required: true,
     requiredHint: "*",
   },
 };

package/src/notion-ui/date-picker/date-picker.tsx

@@ -212,7 +212,7 @@ export default function DatePicker(props: DatePickerProps) {
         <label
           htmlFor={label}
           className={cn(
-            "font-semibold rtl:text-xl-rtl ltr:text-lg-ltr inline-block pb-1"
+            "font-semibold ltr:text-[13px] rtl:text-[18px] inline-block pb-1"
           )}
         >
           {label}
@@ -224,18 +224,18 @@ export default function DatePicker(props: DatePickerProps) {
           height: heightStyle.height,
         }}
         className={cn(
-          "flex items-center text-start px-3 border select-none rounded-sm rtl:text-lg-rtl ltr:text-lg-ltr",
+          "flex items-center text-start px-3 border select-none rounded-sm rtl:text-[17px] ltr:text-[13px]",
           className
         )}
         onClick={onVisibilityChange}
       >
         {selectedDates ? (
-          <h1 className="flex items-center gap-x-2 text-ellipsis rtl:text-lg-rtl ltr:text-lg-ltr text-primary/80 whitespace-nowrap overflow-hidden">
+          <h1 className="flex items-center gap-x-2 text-ellipsis rtl:text-[17px] ltr:text-[13px] text-primary/80 whitespace-nowrap overflow-hidden">
             <CalendarDays className="size-4 inline-block text-tertiary rtl:ml-2 rtl:mr-2" />
             {formatHijriDate(selectedDates)}
           </h1>
         ) : (
-          <h1 className="flex items-center gap-x-2 text-ellipsis rtl:text-lg-rtl ltr:text-lg-ltr font-semibold text-primary whitespace-nowrap overflow-hidden">
+          <h1 className="flex items-center gap-x-2 text-ellipsis rtl:text-[17px] ltr:text-[13px] font-semibold text-primary whitespace-nowrap overflow-hidden">
             <CalendarDays className="size-4 inline-block text-tertiary" />
             {placeholder}
           </h1>
@@ -261,7 +261,7 @@ export default function DatePicker(props: DatePickerProps) {
           }}
           intersectionArgs={{ once: true, rootMargin: "-5% 0%" }}
         >
-          <h1 className="text-red-400 text-start capitalize rtl:text-sm rtl:font-medium ltr:text-sm-ltr">
+          <h1 className="text-red-400 text-start capitalize rtl:text-sm rtl:font-medium ltr:text-[11px]">
             {errorMessage}
           </h1>
         </AnimatedItem>

package/src/notion-ui/input/Input.stories.tsx

@@ -1,5 +1,5 @@
+import Input from "./input";
 import type { Meta, StoryObj } from "@storybook/react";
-import { Input } from "./input";
 import { Search, AlertTriangle } from "lucide-react";
 
 const meta: Meta<typeof Input> = {

package/src/notion-ui/input/input.tsx

@@ -19,7 +19,7 @@ export interface InputProps
   measurement?: NastranInputSize;
 }
 
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
   (
     {
       className,
@@ -86,12 +86,13 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
         className={cn(
           rootDivClassName,
           "flex w-full flex-col justify-end",
+          requiredHint && !label && "mt-5",
           readOnlyStyle
         )}
       >
         <div
           className={cn(
-            "relative text-start select-none h-fit rtl:text-lg-rtl ltr:text-lg-ltr"
+            "relative text-start select-none h-fit ltr:text-[13px] rtl:text-[18px]"
           )}
         >
           {/* Start Content */}
@@ -135,7 +136,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
             <label
               htmlFor={label}
               className={cn(
-                "font-semibold rtl:text-xl-rtl ltr:text-lg-ltr inline-block pb-1"
+                "font-semibold ltr:text-[13px] rtl:text-[18px] inline-block pb-1"
               )}
             >
               {label}
@@ -189,7 +190,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
             }}
             intersectionArgs={{ once: true, rootMargin: "-5% 0%" }}
           >
-            <h1 className="text-red-400 text-start capitalize rtl:text-sm rtl:font-medium ltr:text-sm-ltr">
+            <h1 className="text-red-400 text-start capitalize rtl:text-sm rtl:font-medium ltr:text-[11px]">
               {errorMessage}
             </h1>
           </AnimatedItem>

package/src/notion-ui/multi-date-picker/multi-date-picker.tsx

@@ -195,7 +195,7 @@ export default function MultiDatePicker(props: MultiDatePickerProps) {
         <label
           htmlFor={label}
           className={cn(
-            "font-semibold rtl:text-xl-rtl ltr:text-lg-ltr inline-block pb-1"
+            "font-semibold ltr:text-[13px] rtl:text-[18px] inline-block pb-1"
           )}
         >
           {label}
@@ -206,13 +206,13 @@ export default function MultiDatePicker(props: MultiDatePickerProps) {
           height: heightStyle.height,
         }}
         className={cn(
-          "relative flex items-center text-start px-3 border select-none rounded-sm rtl:text-lg-rtl ltr:text-lg-ltr",
+          "relative flex items-center text-start px-3 border select-none rounded-sm rtl:text-[17px] ltr:text-[13px]",
           className
         )}
         onClick={onVisibilityChange}
       >
         {selectedDates && selectedDates.length > 0 ? (
-          <div className="flex items-center gap-x-2 text-ellipsis rtl:text-lg-rtl ltr:text-lg-ltr text-primary/80 text-nowrap">
+          <div className="flex items-center gap-x-2 text-ellipsis rtl:text-[17px] ltr:text-[13px] text-primary/80 text-nowrap">
             <CalendarDays className="size-4 inline-block text-tertiary rtl:ml-2 rtl:mr-2" />
             {selectedDates.map((date: DateObject, index: number) => (
               <div key={index} className="flex gap-x-2">
@@ -229,7 +229,7 @@ export default function MultiDatePicker(props: MultiDatePickerProps) {
             ))}
           </div>
         ) : (
-          <h1 className="flex items-center gap-x-2 text-ellipsis rtl:text-lg-rtl ltr:text-lg-ltr text-primary/80 text-nowrap">
+          <h1 className="flex items-center gap-x-2 text-ellipsis rtl:text-[17px] ltr:text-[13px] text-primary/80 text-nowrap">
             <CalendarDays className="size-4 inline-block text-tertiary" />
             {placeholder}
           </h1>
@@ -255,7 +255,7 @@ export default function MultiDatePicker(props: MultiDatePickerProps) {
           }}
           intersectionArgs={{ once: true, rootMargin: "-5% 0%" }}
         >
-          <h1 className="text-red-400 text-start capitalize rtl:text-sm rtl:font-medium ltr:text-sm-ltr">
+          <h1 className="text-red-400 text-start capitalize rtl:text-sm rtl:font-medium ltr:text-[11px]">
             {errorMessage}
           </h1>
         </AnimatedItem>

package/src/notion-ui/page-size-select/page-size-select.tsx

@@ -107,27 +107,44 @@ const PageSizeSelect: React.FC<SelectProps> = ({
 
     const rect = trigger.getBoundingClientRect();
     const viewportHeight = window.innerHeight;
+    const viewportWidth = window.innerWidth;
     const gap = 6;
 
     const dropdownHeight = Math.min(dropdown.offsetHeight || 0, 260);
+    const dropdownWidth = dropdown.offsetWidth || rect.width;
+
     const spaceBelow = viewportHeight - rect.bottom;
     const spaceAbove = rect.top;
 
+    const spaceRight = viewportWidth - rect.left;
+    const spaceLeft = rect.right;
+
+    /* ---------- Vertical (Up / Down) ---------- */
+    let top: number;
     if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
       setDropDirection("up");
-      setPosition({
-        top: rect.top + window.scrollY - dropdownHeight - gap,
-        left: rect.left + window.scrollX,
-        width: rect.width,
-      });
+      top = rect.top + window.scrollY - dropdownHeight - gap;
     } else {
       setDropDirection("down");
-      setPosition({
-        top: rect.bottom + window.scrollY + gap,
-        left: rect.left + window.scrollX,
-        width: rect.width,
-      });
+      top = rect.bottom + window.scrollY + gap;
     }
+
+    /* ---------- Horizontal (Left / Right) ---------- */
+    let left = rect.left + window.scrollX;
+
+    // If dropdown overflows right viewport → shift left
+    if (spaceRight < dropdownWidth && spaceLeft >= dropdownWidth) {
+      left = rect.right + window.scrollX - dropdownWidth;
+    }
+
+    // Clamp to viewport (safety)
+    left = Math.max(8, Math.min(left, viewportWidth - dropdownWidth - 8));
+
+    setPosition({
+      top,
+      left,
+      width: rect.width,
+    });
   };
 
   useLayoutEffect(() => {
@@ -171,7 +188,7 @@ const PageSizeSelect: React.FC<SelectProps> = ({
     <div ref={selectRef} className={cn("w-full", className)}>
       <button
         onClick={() => setSelectData((p) => ({ ...p, isOpen: !p.isOpen }))}
-        className="w-full py-2 border rounded-md flex items-center justify-between bg-card"
+        className="w-full px-3 py-2 border rounded-md flex items-center justify-between bg-card"
       >
         {selectData.select.value || placeholder}
         <ChevronDown
@@ -209,7 +226,7 @@ const PageSizeSelect: React.FC<SelectProps> = ({
                     ? selectData.select.value
                     : ""
                 }
-                className={`bg-card  dark:bg-card-secondary text-tertiary rtl:text-lg-rtl w-full [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none text-center text-sm px-4 py-2 border-b border-primary/15 rounded-t-md focus:outline-none`}
+                className={`bg-card  dark:bg-card-secondary text-tertiary rtl:text-[17px] w-full [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none text-center text-sm px-4 py-2 border-b border-primary/15 rounded-t-md focus:outline-none`}
               />
               <Check
                 className={cn(

package/src/notion-ui/password-input/password-input.tsx

@@ -93,7 +93,7 @@ const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
         {/* Password strength text */}
         <p
           id="password-strength"
-          className="mb-2 text-start rtl:text-xl-rtl ltr:text-xl-ltr font-medium text-foreground"
+          className="mb-2 text-start rtl:text-lg ltr:text-sm font-medium text-foreground"
         >
           {`${getStrengthText(strengthScore)}. ${text.must_contain}`}
         </p>
@@ -108,9 +108,9 @@ const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
                 <X size={16} className="text-muted-foreground/80" />
               )}
               <span
-                className={`ltr:text-xs rtl:text-lg-rtl ${
+                className={`ltr:text-xs rtl:text-[17px] ${
                   req.met
-                    ? "text-emerald-600 ltr:text-xl-ltr"
+                    ? "text-emerald-600 ltr:text-sm"
                     : "text-muted-foreground"
                 }`}
               >