notionsoft-ui 1.0.32 → 1.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "notionsoft-ui",
-  "version": "1.0.32",
+  "version": "1.0.34",
   "description": "A React UI component installer (shadcn-style). Installs components directly into your project.",
   "bin": {
     "notionsoft-ui": "./cli/index.cjs"

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

@@ -24,7 +24,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         disabled={disabled}
         ref={ref}
         className={cn(
-          `rounded-sm flex items-center justify-center gap-x-1 cursor-pointer font-medium ltr:text-xs leading-snug li rtl:text-[13px] sm:rtl:text-sm  rtl:font-semibold
+          `rounded-sm grid grid-cols-[1fr_1fr_auto] leading-snug cursor-pointer font-medium ltr:text-xs rtl:text-[13px] sm:rtl:text-sm  rtl:font-semibold
           transition w-fit px-3 py-1.5 duration-200 ease-linear`,
           style,
           disabled &&

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

@@ -410,7 +410,7 @@ function MultiSelectInputInner<T = any>(
         setShowSelectedOnly(true); // Show only selected items
         updatePosition(); // Recalculate dropdown position
       }}
-      className="flex items-center hover:bg-tertiary/10 hover:text-tertiary cursor-pointer text-primary/60 rounded transition-colors"
+      className="flex items-center pointer-events-auto hover:bg-tertiary/10 hover:text-tertiary cursor-pointer text-primary/60 rounded transition-colors"
     >
       <List className="size-[38px] p-3" />
       <span className="text-sm px-1">{selectedItems.length}</span>
@@ -555,7 +555,7 @@ const Dropdown = <T,>(
                 "focus-visible:border-tertiary/60",
                 "[&::-webkit-outer-spin-button]:appearance-none",
                 "[&::-webkit-inner-spin-button]:appearance-none",
-                "[-moz-appearance:textfield] "
+                "[-moz-appearance:textfield]"
               )}
               placeholder={text.maxRecord}
             />

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

@@ -102,26 +102,55 @@ const MultiTabInput = React.forwardRef<HTMLInputElement, MultiTabInputProps>(
       tabs.map((tab, idx) => {
         const tabName = tab.props.children;
         const state: TabState = getTabState(tabName, optional);
+        const tabHasError = hasError(tabName);
 
         return React.cloneElement(tab, {
           key: `${optional ? "opt" : "mand"}-${idx}`,
           state,
           optional,
           onClick: () => handleTabChange(tabName, optional),
-          className: tab.props.className,
+          className: cn(
+            tab.props.className,
+            tabHasError && "text-red-400 border-red-400"
+          ),
         });
       });
 
+    const hasError = (tabKey: string) => {
+      if (!errorData) return false;
+      return errorData.has(generateUniqueName(name, tabKey));
+    };
     const activeTabName = generateUniqueName(name, tabState.active);
     const selectTabValue = tabData[activeTabName] || "";
-    const errorMessages = errorData?.get(activeTabName)
-      ? [errorData.get(activeTabName)!]
-      : [];
 
     const direction =
       activeTabName.endsWith("farsi") || activeTabName.endsWith("pashto")
         ? "rtl"
         : "ltr";
+
+    const errorMessage = useMemo(() => {
+      if (!errorData) return null;
+
+      return Array.from(errorData.entries())
+        .filter(([key]) => key.startsWith(`${name}_`))
+        .map(([key, value], index) => (
+          <AnimatedItem
+            key={key}
+            springProps={{
+              from: { opacity: 0, transform: "translateY(-8px)" },
+              to: { opacity: 1, transform: "translateY(0px)" },
+              delay: index * 100,
+              config: { mass: 1, tension: 210, friction: 20 },
+            }}
+            intersectionArgs={{ once: true, rootMargin: "-5% 0%" }}
+          >
+            <h1 className="text-red-400 text-start capitalize rtl:text-sm rtl:font-medium ltr:text-[11px]">
+              {value}
+            </h1>
+          </AnimatedItem>
+        ));
+    }, [errorData, name]);
+
     return (
       <div className={cn("flex flex-col select-none", rootDivClassName)}>
         <div className="flex flex-col-reverse sm:flex-row sm:justify-between sm:items-end gap-4">
@@ -157,31 +186,15 @@ const MultiTabInput = React.forwardRef<HTMLInputElement, MultiTabInputProps>(
           placeholder={placeholder}
           onChange={handleInputChange}
           className={cn(
-            `mt-2 ${errorMessages.length > 0 && "border-red-400 border-b!"}`,
+            `mt-2 ${
+              errorMessage &&
+              errorMessage.length > 0 &&
+              "border-red-400 border-b!"
+            }`,
             className
           )}
         />
-
-        {errorMessages.map((error: string, index) => (
-          <AnimatedItem
-            key={index}
-            springProps={{
-              from: { opacity: 0, transform: "translateY(-8px)" },
-              to: {
-                opacity: 1,
-                transform: "translateY(0px)",
-                delay: index * 100,
-              },
-              config: { mass: 1, tension: 210, friction: 20 },
-              delay: index * 100,
-            }}
-            intersectionArgs={{ once: true, rootMargin: "-5% 0%" }}
-          >
-            <h1 className="text-red-400 text-start capitalize rtl:text-sm rtl:font-medium ltr:text-[11px]">
-              {error}
-            </h1>
-          </AnimatedItem>
-        ))}
+        {errorMessage}
       </div>
     );
   }

package/src/notion-ui/multi-tab-textarea/multi-tab-textarea.tsx

@@ -101,26 +101,53 @@ const MultiTabTextarea = React.forwardRef<
     tabs.map((tab, idx) => {
       const tabName = tab.props.children;
       const state: TabState = getTabState(tabName, optional);
+      const tabHasError = hasError(tabName);
 
       return React.cloneElement(tab, {
         key: `${optional ? "opt" : "mand"}-${idx}`,
         state,
         optional,
         onClick: () => handleTabChange(tabName, optional),
-        className: tab.props.className,
+        className: cn(
+          tab.props.className,
+          tabHasError && "text-red-400 border-red-400"
+        ),
       });
     });
-
+  const hasError = (tabKey: string) => {
+    if (!errorData) return false;
+    return errorData.has(generateUniqueName(name, tabKey));
+  };
   const activeTabName = generateUniqueName(name, tabState.active);
   const selectTabValue = tabData[activeTabName] || "";
-  const errorMessages = errorData?.get(activeTabName)
-    ? [errorData.get(activeTabName)!]
-    : [];
 
   const direction =
     activeTabName.endsWith("farsi") || activeTabName.endsWith("pashto")
       ? "rtl"
       : "ltr";
+  const errorMessage = useMemo(() => {
+    if (!errorData) return null;
+
+    return Array.from(errorData.entries())
+      .filter(([key]) => key.startsWith(`${name}_`))
+      .map(([key, value], index) => (
+        <AnimatedItem
+          key={key}
+          springProps={{
+            from: { opacity: 0, transform: "translateY(-8px)" },
+            to: { opacity: 1, transform: "translateY(0px)" },
+            delay: index * 100,
+            config: { mass: 1, tension: 210, friction: 20 },
+          }}
+          intersectionArgs={{ once: true, rootMargin: "-5% 0%" }}
+        >
+          <h1 className="text-red-400 text-start capitalize rtl:text-sm rtl:font-medium ltr:text-[11px]">
+            {value}
+          </h1>
+        </AnimatedItem>
+      ));
+  }, [errorData, name]);
+
   return (
     <div className={cn("flex flex-col select-none", rootDivClassName)}>
       <div className="flex flex-col-reverse sm:flex-row sm:justify-between sm:items-end gap-4">
@@ -152,31 +179,16 @@ const MultiTabTextarea = React.forwardRef<
         placeholder={placeholder}
         onChange={handleInputChange}
         className={cn(
-          `mt-2 ${errorMessages.length > 0 ? "border-red-400 border-b!" : ""}`,
+          `mt-2 ${
+            errorMessage &&
+            errorMessage.length > 0 &&
+            "border-red-400 border-b!"
+          }`,
           className
         )}
       />
 
-      {errorMessages.map((error: string, index) => (
-        <AnimatedItem
-          key={index}
-          springProps={{
-            from: { opacity: 0, transform: "translateY(-8px)" },
-            to: {
-              opacity: 1,
-              transform: "translateY(0px)",
-              delay: index * 100,
-            },
-            config: { mass: 1, tension: 210, friction: 20 },
-            delay: index * 100,
-          }}
-          intersectionArgs={{ once: true, rootMargin: "-5% 0%" }}
-        >
-          <h1 className="text-red-400 text-start capitalize rtl:text-sm rtl:font-medium ltr:text-[11px]">
-            {error}
-          </h1>
-        </AnimatedItem>
-      ))}
+      {errorMessage}
     </div>
   );
 });

package/src/notion-ui/page-size-select/index.ts

@@ -0,0 +1,3 @@
+import PageSizeSelect from "./page-size-select";
+
+export default PageSizeSelect;

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

@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import PageSizeSelect from "./page-size-select";
+
+const meta: Meta<typeof PageSizeSelect> = {
+  title: "Select/PageSizeSelect",
+  component: PageSizeSelect,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: `
+A pagination page-size selector with:
+- Preset options
+- Custom numeric input
+- LocalStorage persistence (or custom save/load)
+- Smart dropdown positioning (up/down)
+        `,
+      },
+    },
+  },
+  argTypes: {
+    onChange: { action: "changed" },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PageSizeSelect>;
+
+const OPTIONS = [
+  { value: "10", label: "10 / page" },
+  { value: "20", label: "20 / page" },
+  { value: "50", label: "50 / page" },
+  { value: "100", label: "100 / page" },
+];
+
+/* ---------------------------------------------
+   Default
+--------------------------------------------- */
+export const Default: Story = {
+  args: {
+    placeholder: "Select page size",
+    emptyPlaceholder: "No options",
+    rangePlaceholder: "Custom size",
+    paginationKey: "storybook-page-size",
+    options: OPTIONS,
+  },
+};
+
+/* ---------------------------------------------
+   With State Preview
+--------------------------------------------- */
+export const WithState: Story = {
+  render: (args) => {
+    const [value, setValue] = useState<string>("");
+
+    return (
+      <div className="w-64 space-y-3">
+        <PageSizeSelect
+          {...args}
+          onChange={(v) => {
+            setValue(v);
+            args.onChange?.(v);
+          }}
+        />
+
+        <div className="text-sm text-muted-foreground">
+          Selected value: <strong>{value || "-"}</strong>
+        </div>
+      </div>
+    );
+  },
+  args: {
+    placeholder: "Page size",
+    emptyPlaceholder: "No options available",
+    rangePlaceholder: "Enter number",
+    paginationKey: "storybook-with-state",
+    options: OPTIONS,
+  },
+};
+
+/* ---------------------------------------------
+   Empty Options
+--------------------------------------------- */
+export const EmptyOptions: Story = {
+  args: {
+    placeholder: "Page size",
+    emptyPlaceholder: "Nothing to show",
+    rangePlaceholder: "Enter number",
+    paginationKey: "storybook-empty",
+    options: [],
+  },
+};
+
+/* ---------------------------------------------
+   Custom Storage (Mock)
+--------------------------------------------- */
+export const CustomStorage: Story = {
+  args: {
+    placeholder: "Page size",
+    emptyPlaceholder: "No data",
+    rangePlaceholder: "Custom size",
+    paginationKey: "storybook-custom-storage",
+    options: OPTIONS,
+    save: async (key, data) => {
+      console.log("Saved:", key, data);
+    },
+    load: async () => {
+      return {
+        key: "storybook-custom-storage",
+        value: "20",
+        option: 1,
+      };
+    },
+  },
+};

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

@@ -0,0 +1,266 @@
+import { cn } from "../../utils/cn";
+import { Check, ChevronDown } from "lucide-react";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+interface SelectProps {
+  placeholder: string;
+  className?: string;
+  paginationKey: string;
+  emptyPlaceholder: string;
+  rangePlaceholder: string;
+  options: Option[];
+  onChange?: (value: string) => void;
+
+  save?: (key: string, data: any) => Promise<void> | void;
+  load?: (key: string) => Promise<any> | any;
+}
+
+const KEYS = {
+  input: 0,
+  default: 1,
+};
+
+// ---------------- Default Storage ----------------
+const defaultSave = (key: string, data: any, STORAGE_KEY: string) => {
+  try {
+    localStorage.setItem(STORAGE_KEY + key, JSON.stringify(data));
+  } catch {}
+};
+
+const defaultLoad = (key: string, STORAGE_KEY: string) => {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY + key);
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+};
+
+const PageSizeSelect: React.FC<SelectProps> = ({
+  placeholder,
+  emptyPlaceholder,
+  rangePlaceholder,
+  options,
+  onChange,
+  className,
+  paginationKey,
+  save,
+  load,
+}) => {
+  const [mounted, setMounted] = useState(false);
+  const [dropDirection, setDropDirection] = useState<"up" | "down">("down");
+  const [position, setPosition] = useState({
+    top: 0,
+    left: 0,
+    width: 0,
+  });
+
+  const [selectData, setSelectData] = useState({
+    isOpen: false,
+    showIcon: false,
+    select: { key: "", value: "", option: -1 },
+  });
+
+  const selectRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const saveFn = save
+    ? save
+    : (key: string, data: any) => defaultSave(key, data, paginationKey);
+
+  const loadFn = load ? load : (key: string) => defaultLoad(key, paginationKey);
+
+  // ---------------- Mount ----------------
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // ---------------- Load Cache ----------------
+  useEffect(() => {
+    const loadCache = async () => {
+      const cached = await loadFn(paginationKey);
+      if (cached) {
+        setSelectData((p) => ({ ...p, select: cached }));
+        onChange?.(cached.value);
+      } else {
+        const item = { key: paginationKey, value: "10", option: KEYS.default };
+        setSelectData((p) => ({ ...p, select: item }));
+        saveFn(paginationKey, item);
+        onChange?.("10");
+      }
+    };
+    loadCache();
+  }, [paginationKey]);
+
+  // ---------------- Positioning ----------------
+  const updatePosition = () => {
+    const trigger = selectRef.current;
+    const dropdown = dropdownRef.current;
+    if (!trigger || !dropdown) return;
+
+    const rect = trigger.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const gap = 6;
+
+    const dropdownHeight = Math.min(dropdown.offsetHeight || 0, 260);
+    const spaceBelow = viewportHeight - rect.bottom;
+    const spaceAbove = rect.top;
+
+    if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
+      setDropDirection("up");
+      setPosition({
+        top: rect.top + window.scrollY - dropdownHeight - gap,
+        left: rect.left + window.scrollX,
+        width: rect.width,
+      });
+    } else {
+      setDropDirection("down");
+      setPosition({
+        top: rect.bottom + window.scrollY + gap,
+        left: rect.left + window.scrollX,
+        width: rect.width,
+      });
+    }
+  };
+
+  useLayoutEffect(() => {
+    if (selectData.isOpen) updatePosition();
+  }, [selectData.isOpen, options.length]);
+
+  useEffect(() => {
+    if (!selectData.isOpen) return;
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [selectData.isOpen]);
+
+  // ---------------- Outside Click ----------------
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (
+        !selectRef.current?.contains(e.target as Node) &&
+        !dropdownRef.current?.contains(e.target as Node)
+      ) {
+        setSelectData((p) => ({ ...p, isOpen: false, showIcon: false }));
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+
+  // ---------------- Select ----------------
+  const handleSelect = async (value: string) => {
+    const item = { key: paginationKey, value, option: KEYS.default };
+    onChange?.(value);
+    setSelectData((p) => ({ ...p, isOpen: false, select: item }));
+    await saveFn(paginationKey, item);
+  };
+
+  // ---------------- Render ----------------
+  return (
+    <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"
+      >
+        {selectData.select.value || placeholder}
+        <ChevronDown
+          className={cn(
+            "size-3 transition-transform",
+            selectData.isOpen && "rotate-180"
+          )}
+        />
+      </button>
+
+      {mounted &&
+        selectData.isOpen &&
+        createPortal(
+          <div
+            ref={dropdownRef}
+            className={cn(
+              "absolute min-w-fit z-50 bg-card border border-primary/15 shadow-lg",
+              dropDirection === "down" ? "rounded-b-md" : "rounded-t-md"
+            )}
+            style={{
+              top: position.top,
+              left: position.left,
+              width: position.width,
+            }}
+          >
+            {/* Input */}
+            <div className="relative">
+              <input
+                ref={inputRef}
+                type="number"
+                placeholder={rangePlaceholder}
+                onFocus={() => setSelectData((p) => ({ ...p, showIcon: true }))}
+                defaultValue={
+                  selectData.select.option === KEYS.input
+                    ? 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`}
+              />
+              <Check
+                className={cn(
+                  "size-4 absolute top-2.5 right-2 cursor-pointer",
+                  !selectData.showIcon && "hidden"
+                )}
+                onClick={async () => {
+                  const value = inputRef.current?.value || "10";
+                  const option = value ? KEYS.input : KEYS.default;
+                  const item = { key: paginationKey, value, option };
+                  onChange?.(value);
+                  await saveFn(paginationKey, item);
+                  setSelectData((p) => ({
+                    ...p,
+                    isOpen: false,
+                    showIcon: false,
+                    select: item,
+                  }));
+                }}
+              />
+            </div>
+
+            {/* Options */}
+            <ul className="max-h-60 overflow-auto">
+              {options.length === 0 ? (
+                <li className="px-4 py-2 text-center text-sm">
+                  {emptyPlaceholder}
+                </li>
+              ) : (
+                options.map((o) => (
+                  <li
+                    key={o.value}
+                    onClick={() => handleSelect(o.value)}
+                    className={cn(
+                      "px-4 py-2 cursor-pointer flex justify-between hover:bg-primary/10",
+                      selectData.select.value === o.value && "bg-primary/10"
+                    )}
+                  >
+                    {o.label}
+                    {selectData.select.value === o.value && (
+                      <Check className="size-3" />
+                    )}
+                  </li>
+                ))
+              )}
+            </ul>
+          </div>,
+          document.body
+        )}
+    </div>
+  );
+};
+
+export default PageSizeSelect;

package/src/notion-ui/shimmer/index.ts

@@ -0,0 +1,3 @@
+import Shimmer from "./shimmer";
+
+export default Shimmer;

package/src/notion-ui/shimmer/shimmer.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import Shimmer, { ShimmerItem, ShimmerProps } from "./shimmer";
+
+const meta: Meta<typeof Shimmer> = {
+  title: "Shimmer/Shimmer",
+  component: Shimmer,
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Shimmer>;
+
+export const Default: Story = {
+  render: (args: ShimmerProps) => (
+    <div className="space-y-2 p-4 w-96">
+      <Shimmer {...args}>
+        <ShimmerItem className="w-full" />
+        <ShimmerItem className="w-3/4" />
+        <ShimmerItem className="w-1/2" />
+      </Shimmer>
+    </div>
+  ),
+};

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

@@ -0,0 +1,47 @@
+import { cn } from "../../utils/cn";
+
+export interface ShimmerProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export default function Shimmer({ className, children }: ShimmerProps) {
+  return (
+    <div
+      className={cn("relative w-full overflow-hidden *:rounded-sm", className)}
+    >
+      {/* Scoped CSS */}
+      <style>{`
+        @keyframes shimmer {
+          0% {
+            background-position: -1200px 0;
+          }
+          100% {
+            background-position: 1200px 0;
+          }
+        }
+      `}</style>
+
+      {/* Shimmer overlay */}
+      <div
+        className="absolute inset-0 pointer-events-none"
+        style={{
+          backgroundImage: `linear-gradient(
+            to right,
+            var(--from-shimmer) 10%,
+            var(--to-shimmer) 18%,
+            var(--from-shimmer) 25%
+          )`,
+          backgroundSize: "1200px 100%",
+          animation: "shimmer 2.2s linear infinite",
+        }}
+      />
+
+      {children}
+    </div>
+  );
+}
+export interface ShimmerItemProps
+  extends React.HTMLAttributes<HTMLDivElement> {}
+
+export function ShimmerItem(props: ShimmerItemProps) {
+  const { className } = props;
+  return <div className={cn(`h-10 bg-primary/5`, className)} />;
+}