notionsoft-ui 1.0.29 → 1.0.32

package/package.json

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

package/src/notion-ui/multi-tab-input/index.ts

@@ -0,0 +1,3 @@
+import MultiTabInput from "./multi-tab-input";
+
+export default MultiTabInput;

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

@@ -0,0 +1,190 @@
+import React, { type ReactElement, useState, useMemo } from "react";
+import { cn } from "../../utils/cn";
+import AnimatedItem from "../animated-item";
+import type { TabState } from "../tab/tab";
+import Input, { NastranInputSize } from "../input/input";
+import { OptionalTabs, Tab } from "../tab/tab";
+
+export interface MultiTabInputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  children:
+    | ReactElement<typeof Tab>
+    | ReactElement<typeof Tab>[]
+    | ReactElement<typeof OptionalTabs>;
+  tabData: Record<string, string>;
+  errorData?: Map<string, string>;
+  onTabChanged?: (key: string, data: string, optional?: boolean) => void;
+  onChanged: (value: string, name: string) => void;
+  placeholder?: string;
+  label?: string;
+  name: string;
+  classNames?: {
+    tabsDivClassName?: string;
+    rootDivClassName?: string;
+  };
+  measurement?: NastranInputSize;
+}
+
+const MultiTabInput = React.forwardRef<HTMLInputElement, MultiTabInputProps>(
+  (props, ref) => {
+    const {
+      className,
+      name,
+      classNames,
+      children,
+      tabData,
+      errorData,
+      onTabChanged,
+      onChanged,
+      placeholder,
+      label,
+      measurement,
+      ...rest
+    } = props;
+    const { tabsDivClassName, rootDivClassName } = classNames || {};
+    // Separate mandatory and optional tabs (memoized)
+    const { mandatoryTabs, optionalTabs } = useMemo(() => {
+      const mandatory: React.ReactElement<any>[] = [];
+      const optional: React.ReactElement<any>[] = [];
+
+      React.Children.forEach(children, (child) => {
+        if (!React.isValidElement(child)) return;
+
+        // Type-safe element access
+        const element = child as React.ReactElement<any>;
+        const typeName = (element.type as any)?.displayName;
+
+        if (typeName === "OptionalTabs") {
+          React.Children.forEach(element.props.children, (c) => {
+            if (React.isValidElement(c))
+              optional.push(c as React.ReactElement<any>);
+          });
+        } else if (typeName === "Tab") {
+          mandatory.push(element);
+        }
+      });
+
+      return { mandatoryTabs: mandatory, optionalTabs: optional };
+    }, [children]);
+
+    // Initialize state
+    const [tabState, setTabState] = useState({
+      active: mandatoryTabs[0]?.props.children || "",
+      mandatory: mandatoryTabs[0]?.props.children || "",
+      optional: optionalTabs[0]?.props.children || "",
+    });
+
+    const selectionName = `${name}_selections`;
+
+    const handleTabChange = (tabName: string, optional = false) => {
+      setTabState((prev) => ({
+        ...prev,
+        active: tabName,
+        [optional ? "optional" : "mandatory"]: tabName,
+      }));
+      onTabChanged?.(selectionName, tabName, optional);
+    };
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      onChanged(e.target.value, e.target.name);
+    };
+
+    const generateUniqueName = (base: string, key: string) => `${base}_${key}`;
+
+    const getTabState = (tabName: string, optional = false): TabState => {
+      if (tabName === tabState.active) return "active";
+      if (optional)
+        return tabName === tabState.optional ? "selected" : "unselected";
+      return tabName === tabState.mandatory ? "selected" : "unselected";
+    };
+
+    const renderTabs = (tabs: React.ReactElement<any>[], optional = false) =>
+      tabs.map((tab, idx) => {
+        const tabName = tab.props.children;
+        const state: TabState = getTabState(tabName, optional);
+
+        return React.cloneElement(tab, {
+          key: `${optional ? "opt" : "mand"}-${idx}`,
+          state,
+          optional,
+          onClick: () => handleTabChange(tabName, optional),
+          className: tab.props.className,
+        });
+      });
+
+    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";
+    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">
+          {label && (
+            <h1 className="font-semibold relative top-1 rtl:text-lg ltr:text-[13px] text-start">
+              {label}
+            </h1>
+          )}
+
+          <div
+            className={cn(
+              "flex flex-wrap gap-2 items-center",
+              tabsDivClassName
+            )}
+          >
+            {renderTabs(mandatoryTabs)}
+            {optionalTabs.length > 0 && (
+              <>
+                <span className="bg-primary/30 sm:w-px w-full h-px sm:my-0 sm:mx-2 sm:h-4" />
+                {renderTabs(optionalTabs, true)}
+              </>
+            )}
+          </div>
+        </div>
+
+        <Input
+          measurement={measurement}
+          dir={direction}
+          {...rest}
+          ref={ref}
+          name={activeTabName}
+          value={selectTabValue}
+          placeholder={placeholder}
+          onChange={handleInputChange}
+          className={cn(
+            `mt-2 ${errorMessages.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>
+        ))}
+      </div>
+    );
+  }
+);
+
+export default MultiTabInput;

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

@@ -0,0 +1,290 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { OptionalTabs, Tab } from "../tab/tab";
+import MultiTabInput from "./multi-tab-input";
+
+const meta: Meta<typeof MultiTabInput> = {
+  title: "Form/MultiTabInput",
+  component: MultiTabInput,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "An input component with tabbed sections for managing multiple related text inputs. Supports mandatory and optional tabs with automatic RTL/LTR text direction detection.",
+      },
+    },
+  },
+  argTypes: {
+    onChanged: { action: "changed" },
+    onTabChanged: { action: "tab changed" },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MultiTabInput>;
+
+export const Default: Story = {
+  render: (args) => {
+    const [tabData, setTabData] = useState<Record<string, string>>({
+      title_english: "Sample product title",
+      title_spanish: "Título de producto de ejemplo",
+      title_french: "",
+    });
+
+    const [errors] = useState<Map<string, string>>(
+      new Map([["title_french", "French title is required"]])
+    );
+
+    return (
+      <div className="w-[400px]">
+        <MultiTabInput
+          {...args}
+          name="title"
+          label="Product Title"
+          placeholder="Enter title..."
+          tabData={tabData}
+          errorData={errors}
+          onChanged={(value, name) =>
+            setTabData((prev) => ({ ...prev, [name]: value }))
+          }
+        >
+          <Tab>english</Tab>
+          <Tab>spanish</Tab>
+
+          <OptionalTabs>
+            <Tab>french</Tab>
+          </OptionalTabs>
+        </MultiTabInput>
+      </div>
+    );
+  },
+};
+
+export const WithoutOptionalTabs: Story = {
+  render: () => {
+    const [tabData, setTabData] = useState<Record<string, string>>({
+      username_english: "john_doe",
+      username_german: "johndoe_de",
+    });
+
+    return (
+      <div className="w-[400px]">
+        <MultiTabInput
+          name="username"
+          label="Username"
+          placeholder="Enter username"
+          tabData={tabData}
+          onChanged={(value, name) =>
+            setTabData((prev) => ({ ...prev, [name]: value }))
+          }
+        >
+          <Tab>english</Tab>
+          <Tab>german</Tab>
+        </MultiTabInput>
+      </div>
+    );
+  },
+};
+
+export const WithRTLTabs: Story = {
+  render: () => {
+    const [tabData, setTabData] = useState<Record<string, string>>({
+      name_english: "International Company",
+      name_arabic: "شركة دولية",
+      name_farsi: "شرکت بین‌المللی",
+    });
+
+    const [errors] = useState<Map<string, string>>(
+      new Map([
+        ["name_arabic", "Arabic name is required"],
+        ["name_farsi", "نام فارسی الزامی است"],
+      ])
+    );
+
+    return (
+      <div className="w-[400px]">
+        <MultiTabInput
+          name="name"
+          label="Company Name"
+          placeholder="Enter company name"
+          tabData={tabData}
+          errorData={errors}
+          onChanged={(value, name) =>
+            setTabData((prev) => ({ ...prev, [name]: value }))
+          }
+        >
+          <Tab>english</Tab>
+
+          <OptionalTabs>
+            <Tab>arabic</Tab>
+            <Tab>farsi</Tab>
+            <Tab>pashto</Tab>
+          </OptionalTabs>
+        </MultiTabInput>
+      </div>
+    );
+  },
+};
+
+export const WithMultipleOptionalTabs: Story = {
+  render: () => {
+    const [tabData, setTabData] = useState<Record<string, string>>({
+      sku_basic: "SKU-001",
+      sku_internal: "INT-98432",
+      sku_vendor: "VND-7781",
+      sku_seo: "premium-product-sku",
+    });
+
+    return (
+      <div className="w-[400px]">
+        <MultiTabInput
+          name="sku"
+          label="Product SKU"
+          placeholder="Enter SKU"
+          tabData={tabData}
+          onChanged={(value, name) =>
+            setTabData((prev) => ({ ...prev, [name]: value }))
+          }
+          classNames={{
+            tabsDivClassName: "bg-gray-50 p-2 rounded-lg",
+            rootDivClassName: "p-4 border rounded-lg",
+          }}
+        >
+          <Tab>basic</Tab>
+          <Tab>internal</Tab>
+
+          <OptionalTabs>
+            <Tab>vendor</Tab>
+            <Tab>seo</Tab>
+          </OptionalTabs>
+        </MultiTabInput>
+      </div>
+    );
+  },
+};
+
+export const WithErrorStates: Story = {
+  render: () => {
+    const [tabData, setTabData] = useState<Record<string, string>>({
+      email_english: "test@",
+      email_spanish: "correo@",
+      email_french: "email@",
+    });
+
+    const [errors] = useState<Map<string, string>>(
+      new Map([
+        ["email_english", "Invalid email address"],
+        ["email_spanish", "Correo electrónico inválido"],
+        ["email_french", "Adresse e-mail invalide"],
+      ])
+    );
+
+    return (
+      <div className="w-[400px]">
+        <MultiTabInput
+          name="email"
+          label="Contact Email"
+          placeholder="Enter email"
+          tabData={tabData}
+          errorData={errors}
+          onChanged={(value, name) =>
+            setTabData((prev) => ({ ...prev, [name]: value }))
+          }
+        >
+          <Tab>english</Tab>
+          <Tab>spanish</Tab>
+
+          <OptionalTabs>
+            <Tab>french</Tab>
+          </OptionalTabs>
+        </MultiTabInput>
+      </div>
+    );
+  },
+};
+
+export const DisabledState: Story = {
+  render: () => {
+    const [tabData] = useState<Record<string, string>>({
+      code_english: "READ_ONLY_001",
+      code_spanish: "SOLO_LECTURA_001",
+    });
+
+    return (
+      <div className="w-[400px]">
+        <MultiTabInput
+          name="code"
+          label="Reference Code"
+          placeholder="Read only"
+          tabData={tabData}
+          disabled
+          onChanged={() => {}}
+        >
+          <Tab>english</Tab>
+          <Tab>spanish</Tab>
+        </MultiTabInput>
+      </div>
+    );
+  },
+};
+
+export const InFormContext: Story = {
+  render: () => {
+    const [formData, setFormData] = useState({
+      price: "",
+    });
+
+    const [tabData, setTabData] = useState<Record<string, string>>({
+      title_english: "",
+      title_spanish: "",
+    });
+
+    const handleSubmit = (e: React.FormEvent) => {
+      e.preventDefault();
+      console.log({
+        ...formData,
+        ...tabData,
+      });
+    };
+
+    return (
+      <form onSubmit={handleSubmit} className="w-[400px] space-y-4">
+        <div>
+          <label className="block text-sm font-medium mb-1">Price</label>
+          <input
+            type="number"
+            className="w-full px-3 py-2 border rounded-md"
+            value={formData.price}
+            onChange={(e) =>
+              setFormData((prev) => ({ ...prev, price: e.target.value }))
+            }
+            placeholder="Enter price"
+          />
+        </div>
+
+        <MultiTabInput
+          name="title"
+          label="Product Title"
+          placeholder="Enter title"
+          tabData={tabData}
+          onChanged={(value, name) =>
+            setTabData((prev) => ({ ...prev, [name]: value }))
+          }
+        >
+          <Tab>english</Tab>
+          <Tab>spanish</Tab>
+        </MultiTabInput>
+
+        <button
+          type="submit"
+          className="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+        >
+          Save Product
+        </button>
+      </form>
+    );
+  },
+};

package/src/notion-ui/multi-tab-textarea/index.ts

@@ -0,0 +1,3 @@
+import MultiTabTextarea from "./multi-tab-textarea";
+
+export default MultiTabTextarea;

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

@@ -0,0 +1,184 @@
+import React, { type ReactElement, useState, useMemo } from "react";
+import { cn } from "../../utils/cn";
+import Textarea from "../textarea";
+import AnimatedItem from "../animated-item";
+import type { OptionalTabs, Tab, TabState } from "../tab/tab";
+
+export interface MultiTabTextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  children:
+    | ReactElement<typeof Tab>
+    | ReactElement<typeof Tab>[]
+    | ReactElement<typeof OptionalTabs>;
+  tabData: Record<string, string>;
+  errorData?: Map<string, string>;
+  onTabChanged?: (key: string, data: string, optional?: boolean) => void;
+  onChanged: (value: string, name: string) => void;
+  placeholder?: string;
+  label?: string;
+  name: string;
+  classNames?: {
+    tabsDivClassName?: string;
+    rootDivClassName?: string;
+  };
+}
+
+const MultiTabTextarea = React.forwardRef<
+  HTMLTextAreaElement,
+  MultiTabTextareaProps
+>((props, ref) => {
+  const {
+    className,
+    name,
+    classNames,
+    children,
+    tabData,
+    errorData,
+    onTabChanged,
+    onChanged,
+    placeholder,
+    label,
+    ...rest
+  } = props;
+  const { tabsDivClassName, rootDivClassName } = classNames || {};
+  // Separate mandatory and optional tabs (memoized)
+  const { mandatoryTabs, optionalTabs } = useMemo(() => {
+    const mandatory: React.ReactElement<any>[] = [];
+    const optional: React.ReactElement<any>[] = [];
+
+    React.Children.forEach(children, (child) => {
+      if (!React.isValidElement(child)) return;
+
+      // Type-safe element access
+      const element = child as React.ReactElement<any>;
+      const typeName = (element.type as any)?.displayName;
+
+      if (typeName === "OptionalTabs") {
+        React.Children.forEach(element.props.children, (c) => {
+          if (React.isValidElement(c))
+            optional.push(c as React.ReactElement<any>);
+        });
+      } else if (typeName === "Tab") {
+        mandatory.push(element);
+      }
+    });
+
+    return { mandatoryTabs: mandatory, optionalTabs: optional };
+  }, [children]);
+
+  // Initialize state
+  const [tabState, setTabState] = useState({
+    active: mandatoryTabs[0]?.props.children || "",
+    mandatory: mandatoryTabs[0]?.props.children || "",
+    optional: optionalTabs[0]?.props.children || "",
+  });
+
+  const selectionName = `${name}_selections`;
+
+  const handleTabChange = (tabName: string, optional = false) => {
+    setTabState((prev) => ({
+      ...prev,
+      active: tabName,
+      [optional ? "optional" : "mandatory"]: tabName,
+    }));
+    onTabChanged?.(selectionName, tabName, optional);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    onChanged(e.target.value, e.target.name);
+  };
+
+  const generateUniqueName = (base: string, key: string) => `${base}_${key}`;
+
+  const getTabState = (tabName: string, optional = false): TabState => {
+    if (tabName === tabState.active) return "active";
+    if (optional)
+      return tabName === tabState.optional ? "selected" : "unselected";
+    return tabName === tabState.mandatory ? "selected" : "unselected";
+  };
+
+  const renderTabs = (tabs: React.ReactElement<any>[], optional = false) =>
+    tabs.map((tab, idx) => {
+      const tabName = tab.props.children;
+      const state: TabState = getTabState(tabName, optional);
+
+      return React.cloneElement(tab, {
+        key: `${optional ? "opt" : "mand"}-${idx}`,
+        state,
+        optional,
+        onClick: () => handleTabChange(tabName, optional),
+        className: tab.props.className,
+      });
+    });
+
+  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";
+  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">
+        {label && (
+          <h1 className="font-semibold relative top-1 rtl:text-lg ltr:text-[13px] text-start">
+            {label}
+          </h1>
+        )}
+
+        <div
+          className={cn("flex flex-wrap gap-2 items-center", tabsDivClassName)}
+        >
+          {renderTabs(mandatoryTabs)}
+          {optionalTabs.length > 0 && (
+            <>
+              <span className="bg-primary/30 sm:w-px w-full h-px sm:my-0 sm:mx-2 sm:h-4" />
+              {renderTabs(optionalTabs, true)}
+            </>
+          )}
+        </div>
+      </div>
+
+      <Textarea
+        dir={direction}
+        {...rest}
+        ref={ref}
+        name={activeTabName}
+        value={selectTabValue}
+        placeholder={placeholder}
+        onChange={handleInputChange}
+        className={cn(
+          `mt-2 ${errorMessages.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>
+      ))}
+    </div>
+  );
+});
+
+export default MultiTabTextarea;

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

@@ -0,0 +1,340 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { OptionalTabs, Tab } from "../tab/tab";
+import MultiTabTextarea from "../multi-tab-textarea";
+
+const meta: Meta<typeof MultiTabTextarea> = {
+  title: "Form/MultiTabTextarea",
+  component: MultiTabTextarea,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A textarea component with tabbed sections for managing multiple related text inputs. Supports mandatory and optional tabs with automatic RTL/LTR text direction detection.",
+      },
+    },
+  },
+  argTypes: {
+    onChanged: { action: "changed" },
+    onTabChanged: { action: "tab changed" },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MultiTabTextarea>;
+
+export const Default: Story = {
+  render: (args) => {
+    const [tabData, setTabData] = useState<Record<string, string>>({
+      description_en: "This is a sample product description.",
+      description_es: "Esta es una descripción de producto de muestra.",
+      description_fr: "",
+    });
+
+    const [errors, setErrors] = useState<Map<string, string>>(
+      new Map([["description_fr", "French description is required"]])
+    );
+
+    const handleChange = (value: string, name: string) => {
+      setTabData((prev) => ({
+        ...prev,
+        [name]: value,
+      }));
+    };
+
+    const handleTabChanged = (
+      key: string,
+      value: string,
+      optional?: boolean
+    ) => {
+      console.log("Tab changed:", { key, value, optional });
+    };
+
+    return (
+      <div className="w-[500px]">
+        <MultiTabTextarea
+          {...args}
+          name="description"
+          label="Product Description"
+          placeholder="Enter your description here..."
+          tabData={tabData}
+          errorData={errors}
+          onChanged={handleChange}
+          onTabChanged={handleTabChanged}
+        >
+          {/* Mandatory tabs */}
+          <Tab>english</Tab>
+          <Tab>spanish</Tab>
+
+          {/* Optional tabs */}
+          <OptionalTabs>
+            <Tab>french</Tab>
+          </OptionalTabs>
+        </MultiTabTextarea>
+      </div>
+    );
+  },
+};
+
+export const WithoutOptionalTabs: Story = {
+  render: () => {
+    const [tabData, setTabData] = useState<Record<string, string>>({
+      bio_en: "I'm a software developer with 5 years of experience.",
+      bio_de: "Ich bin Softwareentwickler mit 5 Jahren Erfahrung.",
+    });
+
+    return (
+      <div className="w-[500px]">
+        <MultiTabTextarea
+          name="bio"
+          label="Biography"
+          placeholder="Tell us about yourself..."
+          tabData={tabData}
+          onChanged={(value, name) =>
+            setTabData((prev) => ({ ...prev, [name]: value }))
+          }
+        >
+          <Tab>english</Tab>
+          <Tab>german</Tab>
+        </MultiTabTextarea>
+      </div>
+    );
+  },
+};
+
+export const WithRTLTabs: Story = {
+  render: () => {
+    const [tabData, setTabData] = useState<Record<string, string>>({
+      content_en: "Welcome to our international platform.",
+      content_ar: "مرحبًا بكم في منصتنا الدولية.",
+      content_fa: "به پلتفرم بین‌المللی ما خوش آمدید.",
+    });
+
+    const [errors, setErrors] = useState<Map<string, string>>(
+      new Map([
+        ["content_ar", "Arabic content must be at least 20 characters"],
+        ["content_fa", "فارسی باید حداقل 20 کاراکتر باشد"],
+      ])
+    );
+
+    return (
+      <div className="w-[500px]">
+        <MultiTabTextarea
+          name="content"
+          label="Content"
+          placeholder="Type your content here..."
+          tabData={tabData}
+          errorData={errors}
+          onChanged={(value, name) =>
+            setTabData((prev) => ({ ...prev, [name]: value }))
+          }
+        >
+          <Tab>english</Tab>
+          <OptionalTabs>
+            <Tab>arabic</Tab>
+            <Tab>farsi</Tab>
+            <Tab>pashto</Tab>
+          </OptionalTabs>
+        </MultiTabTextarea>
+      </div>
+    );
+  },
+};
+
+export const WithMultipleOptionalTabs: Story = {
+  render: () => {
+    const [tabData, setTabData] = useState<Record<string, string>>({
+      product_details_basic:
+        "A premium quality product with excellent durability.",
+      product_details_advanced:
+        "Made from 100% recycled materials. Water-resistant up to 50m.",
+      product_details_technical:
+        "Material: Polycarbonate\nWeight: 150g\nDimensions: 10x5x2cm",
+      product_details_seo:
+        "Premium durable product for everyday use. Best value for money.",
+    });
+
+    return (
+      <div className="w-[500px]">
+        <MultiTabTextarea
+          name="product_details"
+          label="Product Details"
+          placeholder="Enter product information..."
+          tabData={tabData}
+          onChanged={(value, name) =>
+            setTabData((prev) => ({ ...prev, [name]: value }))
+          }
+          classNames={{
+            tabsDivClassName: "bg-gray-50 p-2 rounded-lg",
+            rootDivClassName: "p-4 border rounded-lg",
+          }}
+        >
+          <Tab>basic</Tab>
+          <Tab>advanced</Tab>
+          <OptionalTabs>
+            <Tab>technical</Tab>
+            <Tab>seo</Tab>
+          </OptionalTabs>
+        </MultiTabTextarea>
+      </div>
+    );
+  },
+};
+
+export const WithErrorStates: Story = {
+  render: () => {
+    const [tabData, setTabData] = useState<Record<string, string>>({
+      review_en: "This product is",
+      review_es: "Este producto es",
+      review_fr: "Ce produit est",
+    });
+
+    const [errors, setErrors] = useState<Map<string, string>>(
+      new Map([
+        ["review_en", "Review must be at least 20 characters"],
+        ["review_es", "La reseña debe tener al menos 20 caracteres"],
+        ["review_fr", "L'avis doit comporter au moins 20 caractères"],
+      ])
+    );
+
+    return (
+      <div className="w-[500px]">
+        <MultiTabTextarea
+          name="review"
+          label="Product Review"
+          placeholder="Write your review here..."
+          tabData={tabData}
+          errorData={errors}
+          onChanged={(value, name) =>
+            setTabData((prev) => ({ ...prev, [name]: value }))
+          }
+        >
+          <Tab>english</Tab>
+          <Tab>spanish</Tab>
+          <OptionalTabs>
+            <Tab>french</Tab>
+          </OptionalTabs>
+        </MultiTabTextarea>
+      </div>
+    );
+  },
+};
+
+export const DisabledState: Story = {
+  render: () => {
+    const [tabData] = useState<Record<string, string>>({
+      template_en:
+        "This is a read-only template.\nYou cannot edit this content.",
+      template_es:
+        "Esta es una plantilla de solo lectura.\nNo puedes editar este contenido.",
+    });
+
+    return (
+      <div className="w-[500px]">
+        <MultiTabTextarea
+          name="template"
+          label="Email Template"
+          placeholder="Cannot edit - this is read-only"
+          tabData={tabData}
+          disabled
+          onChanged={() => {}}
+        >
+          <Tab>english</Tab>
+          <Tab>spanish</Tab>
+        </MultiTabTextarea>
+      </div>
+    );
+  },
+};
+
+export const CustomPlaceholders: Story = {
+  render: () => {
+    const [tabData, setTabData] = useState<Record<string, string>>({
+      instructions_en: "",
+      instructions_ar: "",
+      instructions_fa: "",
+    });
+
+    return (
+      <div className="w-[500px]">
+        <MultiTabTextarea
+          name="instructions"
+          label="Instructions"
+          placeholder="Default placeholder..."
+          tabData={tabData}
+          onChanged={(value, name) =>
+            setTabData((prev) => ({ ...prev, [name]: value }))
+          }
+        >
+          <Tab>english</Tab>
+          <Tab>arabic</Tab>
+          <OptionalTabs>
+            <Tab>farsi</Tab>
+          </OptionalTabs>
+        </MultiTabTextarea>
+      </div>
+    );
+  },
+};
+
+export const InFormContext: Story = {
+  render: () => {
+    const [formData, setFormData] = useState({
+      name: "",
+      description: "",
+    });
+
+    const [tabData, setTabData] = useState<Record<string, string>>({
+      description_en: "",
+      description_es: "",
+    });
+
+    const handleSubmit = (e: React.FormEvent) => {
+      e.preventDefault();
+      console.log({
+        ...formData,
+        ...tabData,
+      });
+    };
+
+    return (
+      <form onSubmit={handleSubmit} className="w-[500px] space-y-4">
+        <div>
+          <label className="block text-sm font-medium mb-1">Product Name</label>
+          <input
+            type="text"
+            className="w-full px-3 py-2 border rounded-md"
+            value={formData.name}
+            onChange={(e) =>
+              setFormData((prev) => ({ ...prev, name: e.target.value }))
+            }
+            placeholder="Enter product name"
+          />
+        </div>
+
+        <MultiTabTextarea
+          name="description"
+          label="Product Description"
+          placeholder="Describe your product..."
+          tabData={tabData}
+          onChanged={(value, name) =>
+            setTabData((prev) => ({ ...prev, [name]: value }))
+          }
+        >
+          <Tab>english</Tab>
+          <Tab>spanish</Tab>
+        </MultiTabTextarea>
+
+        <button
+          type="submit"
+          className="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+        >
+          Save Product
+        </button>
+      </form>
+    );
+  },
+};

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

@@ -383,6 +383,7 @@ const PhoneInput: React.FC<PhoneInputProps> = ({
           )}
           {...rest}
           disabled={readOnly}
+          dir="ltr"
         />
       </div>
 

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

@@ -0,0 +1,3 @@
+import Tab from "./tab";
+
+export default Tab;

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

@@ -0,0 +1,51 @@
+import { cn } from "../../utils/cn";
+import { Asterisk, CircleDot } from "lucide-react";
+
+export type TabState = "active" | "selected" | "unselected";
+
+interface TabProps {
+  children: React.ReactNode;
+  className?: string;
+  onClick?: () => void;
+  translation?: string;
+
+  state?: TabState; // <-- now strongly typed
+  optional?: boolean;
+}
+export function Tab({
+  children,
+  className,
+  onClick,
+  translation,
+  state = "unselected",
+  optional = false,
+}: TabProps) {
+  // Icon for this tab
+  const Icon = optional ? CircleDot : Asterisk;
+
+  const baseClass = cn(
+    "capitalize transition px-3 py-1.5 ltr:text-xs rtl:text-[13px] sm:rtl:text-sm rtl:font-semibold px-2 rounded cursor-pointer shadow-md dark:shadow-none dark:border dark:hover:opacity-80 shadow-primary/20 hover:shadow-sm flex items-center gap-1",
+
+    state === "active"
+      ? "text-primary-foreground bg-tertiary"
+      : state === "selected"
+      ? "bg-primary/50 text-primary-foreground/90"
+      : "bg-primary/10 text-primary/50",
+
+    className
+  );
+
+  return (
+    <div onClick={onClick} className={baseClass}>
+      <Icon size={14} className="opacity-70 size-3 text-current" />
+      {translation ?? children}
+    </div>
+  );
+}
+
+Tab.displayName = "Tab";
+
+export function OptionalTabs({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}
+OptionalTabs.displayName = "OptionalTabs";

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

@@ -14,7 +14,7 @@ export interface TextareaProps
   };
 }
 
-export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   (
     {
       className,