notionsoft-ui 1.0.34 → 1.0.36

package/src/notion-ui/cached-svg/CachedSvg.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import CachedSvg from "./cached-svg";
+
+/* ---------------------------------- */
+/* Meta */
+/* ---------------------------------- */
+const meta: Meta<typeof CachedSvg> = {
+  title: "Media/CachedSvg",
+  component: CachedSvg,
+  tags: ["autodocs"],
+  argTypes: {
+    className: { control: "text" },
+    classNames: { control: false },
+    src: { control: "text" },
+    fetch: { control: false },
+    apiConfig: { control: false },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CachedSvg>;
+
+/* ---------------------------------- */
+/* Sample SVG string */
+/* ---------------------------------- */
+const sampleSvg = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="12" cy="12" r="10" fill="currentColor"/>
+</svg>`;
+
+/* ---------------------------------- */
+/* Stories */
+/* ---------------------------------- */
+
+/* -------- Fetch-based example -------- */
+export const FetchExample: Story = {
+  render: () => (
+    <div style={{ width: 40, height: 40 }}>
+      <CachedSvg
+        src="https://dummy-svg-url.com/sample.svg"
+        fetch={async () => {
+          return new Response(sampleSvg, { status: 200 });
+        }}
+      />
+    </div>
+  ),
+};
+
+/* -------- API-config-based example -------- */
+export const ApiConfigExample: Story = {
+  render: () => (
+    <div style={{ width: 40, height: 40 }}>
+      <CachedSvg
+        apiConfig={{
+          src: "https://dummy-api.com/svg",
+          headers: { Authorization: "Bearer token" },
+        }}
+      />
+    </div>
+  ),
+};
+
+/* -------- Loading state (Shimmer) -------- */
+export const LoadingState: Story = {
+  render: () => (
+    <div style={{ width: 40, height: 40 }}>
+      <CachedSvg
+        src="https://dummy-loading.com/svg"
+        fetch={() => new Promise(() => {})} // never resolves to simulate loading
+      />
+    </div>
+  ),
+};

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

@@ -0,0 +1,150 @@
+import React, { forwardRef, useEffect, useRef, useState } from "react";
+import Shimmer from "../shimmer";
+import { cn } from "../../utils/cn";
+import DOMPurify from "dompurify";
+
+/* ---------------------------------- */
+/* Types */
+/* ---------------------------------- */
+
+interface BaseSvgProps extends React.HTMLAttributes<HTMLDivElement> {
+  classNames?: {
+    shimmerClassName?: string;
+  };
+}
+
+interface FetchSvgProps extends BaseSvgProps {
+  src: string;
+  fetch: (src: string) => Promise<Response>;
+  apiConfig?: never;
+}
+
+interface ApiConfigSvgProps extends BaseSvgProps {
+  apiConfig: {
+    src: string;
+    headers?: Record<string, string>;
+  };
+  src?: never;
+  fetch?: never;
+}
+
+export type CachedSvgProps = FetchSvgProps | ApiConfigSvgProps;
+
+/* ---------------------------------- */
+/* Cache */
+/* ---------------------------------- */
+
+const SVG_CACHE = "svg-cache-v1";
+
+/* ---------------------------------- */
+/* Sanitizer */
+/* ---------------------------------- */
+
+function sanitizeSvg(svg: string): string {
+  return DOMPurify.sanitize(svg, {
+    USE_PROFILES: { svg: true, svgFilters: true },
+    FORBID_TAGS: ["script", "foreignObject", "iframe", "object", "embed"],
+    FORBID_ATTR: [
+      "onload",
+      "onclick",
+      "onmouseover",
+      "onerror",
+      "href",
+      "xlink:href",
+    ],
+  });
+}
+
+/* ---------------------------------- */
+/* Component */
+/* ---------------------------------- */
+
+const CachedSvg = forwardRef<HTMLDivElement, CachedSvgProps>(
+  ({ className, classNames, fetch, apiConfig, ...rest }, ref) => {
+    const [svg, setSvg] = useState<string | null>(null);
+    const [loading, setLoading] = useState(true);
+
+    const fetchRef = useRef(fetch);
+    useEffect(() => {
+      fetchRef.current = fetch;
+    }, [fetch]);
+
+    async function loadSvg() {
+      try {
+        const src = apiConfig?.src ?? (rest as any).src;
+        if (!src) return;
+
+        /* ---------------- Cache ---------------- */
+
+        if ("caches" in window) {
+          const cache = await caches.open(SVG_CACHE);
+          const cached = await cache.match(src);
+
+          if (cached) {
+            const text = await cached.text();
+            setSvg(sanitizeSvg(text));
+            setLoading(false);
+            return;
+          }
+        }
+
+        /* ---------------- Fetch ---------------- */
+
+        const response = fetchRef.current
+          ? await fetchRef.current(src)
+          : await window.fetch(src, { headers: apiConfig?.headers });
+
+        if (!response.ok) throw new Error("SVG fetch failed");
+
+        const clone = response.clone();
+        const text = await response.text();
+
+        setSvg(sanitizeSvg(text));
+
+        if ("caches" in window) {
+          const cache = await caches.open(SVG_CACHE);
+          await cache.put(src, clone);
+        }
+      } catch (err) {
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    useEffect(() => {
+      loadSvg();
+    }, [apiConfig?.src, (rest as any).src]);
+
+    /* ---------------- UI ---------------- */
+    const iconStyle = "opacity-90 rounded-full w-[20px] h-[18px]";
+    if (loading || !svg) {
+      return (
+        <Shimmer
+          className={cn(
+            "bg-primary/10",
+            iconStyle,
+            classNames?.shimmerClassName
+          )}
+        />
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "[&>svg>path]:fill-current [&>svg>g>*]:fill-current items-center justify-center flex",
+          iconStyle,
+          className
+        )}
+        dangerouslySetInnerHTML={{ __html: svg }}
+        {...rest}
+      />
+    );
+  }
+);
+
+CachedSvg.displayName = "CachedSvg";
+
+export default CachedSvg;

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

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

package/src/notion-ui/cached-svg/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"
                 }`}
               >

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

@@ -78,6 +78,9 @@ interface PhoneInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     rootDivClassName?: string;
     iconClassName?: string;
   };
+  text: {
+    searchInputPlaceholder: string;
+  };
   measurement?: PhoneInputSize;
   ROW_HEIGHT?: number;
   VISIBLE_ROWS?: number;
@@ -97,11 +100,14 @@ const PhoneInput: React.FC<PhoneInputProps> = ({
   ROW_HEIGHT = 32,
   VISIBLE_ROWS = 10,
   BUFFER = 5,
+  text,
   ...rest
 }) => {
   const { rootDivClassName, iconClassName = "size-4" } = classNames || {};
   const [open, setOpen] = useState(false);
   const [highlightedIndex, setHighlightedIndex] = useState<number>(0);
+  const { searchInputPlaceholder } = text;
+
   const initialCountry = (() => {
     if (typeof value === "string" && value.startsWith("+")) {
       const matched = defaultCountries.find((c) =>
@@ -119,6 +125,20 @@ const PhoneInput: React.FC<PhoneInputProps> = ({
   const dropdownRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const [position, setPosition] = useState({ top: 0, left: 0, width: 0 });
+  const [search, setSearch] = useState("");
+  const filteredCountries = useMemo(() => {
+    if (!search.trim()) return defaultCountries;
+    const s = search.toLowerCase();
+    return defaultCountries.filter(
+      (c) =>
+        c.name.toLowerCase().includes(s) ||
+        c.iso2.toLowerCase().includes(s) ||
+        ("+" + c.dialCode).includes(s)
+    );
+  }, [search]);
+  useEffect(() => {
+    setHighlightedIndex(0);
+  }, [search]);
 
   const [dropDirection, setDropDirection] = useState<"down" | "up">("down");
 
@@ -163,14 +183,14 @@ const PhoneInput: React.FC<PhoneInputProps> = ({
 
     if (e.key === "ArrowDown") {
       setHighlightedIndex((prev) =>
-        Math.min(prev + 1, defaultCountries.length - 1)
+        Math.min(prev + 1, filteredCountries.length - 1)
       );
       e.preventDefault();
     } else if (e.key === "ArrowUp") {
       setHighlightedIndex((prev) => Math.max(prev - 1, 0));
       e.preventDefault();
     } else if (e.key === "Enter") {
-      chooseCountry(defaultCountries[highlightedIndex]);
+      chooseCountry(filteredCountries[highlightedIndex]);
       e.preventDefault();
     } else if (e.key === "Escape") {
       setOpen(false);
@@ -247,7 +267,7 @@ const PhoneInput: React.FC<PhoneInputProps> = ({
     }
   };
 
-  useLayoutEffect(() => updateDropdownPosition(), [open]);
+  useLayoutEffect(() => updateDropdownPosition(), [open, search]);
   useEffect(() => {
     if (!open) return;
     window.addEventListener("resize", updateDropdownPosition);
@@ -357,6 +377,7 @@ const PhoneInput: React.FC<PhoneInputProps> = ({
             +{country.dialCode}
           </span>
         </button>
+
         <input
           ref={inputRef}
           type="tel"
@@ -377,16 +398,14 @@ const PhoneInput: React.FC<PhoneInputProps> = ({
             "focus-visible:border-tertiary/60",
             "[&::-webkit-outer-spin-button]:appearance-none",
             "[&::-webkit-inner-spin-button]:appearance-none",
-            "[-moz-appearance:textfield] ",
+            "[-moz-appearance:textfield] rtl:text-right",
             hasError && "border-red-400",
             className
           )}
           {...rest}
           disabled={readOnly}
-          dir="ltr"
         />
       </div>
-
       {open &&
         createPortal(
           <div
@@ -403,10 +422,21 @@ const PhoneInput: React.FC<PhoneInputProps> = ({
             }}
             role="listbox"
           >
+            {/* 🔍 Search bar */}
+            <div className="p-2 border-b bg-card sticky top-0 z-10">
+              <input
+                type="text"
+                autoFocus
+                className="w-full px-2 py-1 text-sm border rounded-sm bg-input/30 focus:outline-none"
+                placeholder={searchInputPlaceholder}
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+              />
+            </div>
             <VirtualList
               ROW_HEIGHT={ROW_HEIGHT}
               BUFFER={BUFFER}
-              items={defaultCountries}
+              items={filteredCountries}
               height={ROW_HEIGHT * VISIBLE_ROWS}
               renderRow={(c, i) => (
                 <div
@@ -446,7 +476,7 @@ const PhoneInput: React.FC<PhoneInputProps> = ({
           }}
           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/shimmer/shimmer.tsx

@@ -1,8 +1,14 @@
 import { cn } from "../../utils/cn";
 
-export interface ShimmerProps extends React.HTMLAttributes<HTMLDivElement> {}
+export interface ShimmerProps extends React.HTMLAttributes<HTMLDivElement> {
+  stop?: boolean;
+}
 
-export default function Shimmer({ className, children }: ShimmerProps) {
+export default function Shimmer({
+  stop = false,
+  className,
+  children,
+}: ShimmerProps) {
   return (
     <div
       className={cn("relative w-full overflow-hidden *:rounded-sm", className)}
@@ -30,7 +36,7 @@ export default function Shimmer({ className, children }: ShimmerProps) {
             var(--from-shimmer) 25%
           )`,
           backgroundSize: "1200px 100%",
-          animation: "shimmer 2.2s linear infinite",
+          animation: !stop ? "shimmer 2.2s linear infinite" : "",
         }}
       />
 

package/src/notion-ui/shining-text/shining-text.tsx

@@ -7,11 +7,7 @@ interface ShiningTextProps extends React.HTMLAttributes<HTMLSpanElement> {
   text: string;
 }
 
-export default function ShiningText({
-  text,
-  className,
-  ...props
-}: ShiningTextProps) {
+export function ShiningText({ text, className, ...props }: ShiningTextProps) {
   // Animate strictly left → right
   const styles = useSpring({
     from: { backgroundPosition: "-100% 0%" }, // start offscreen left
@@ -27,7 +23,7 @@ export default function ShiningText({
         ...styles,
       }}
       className={cn(
-        "bg-gradient-to-r from-gray-300 via-white to-gray-300", // left→right gradient
+        "bg-gradient-to-r text-md font-medium from-black via-gray-100 to-black", // left→right gradient
         "bg-clip-text text-transparent",
         className
       )}

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

@@ -0,0 +1,3 @@
+import Sidebar from "./sidebar";
+
+export default Sidebar;