warqadui 0.0.4 → 0.0.6

package/apps/dev-app/src/pages/Buttons.tsx

@@ -0,0 +1,122 @@
+import { Button, CodeBlock, Card, PageHeader } from "warqadui";
+import { Plus, Send, Settings, Trash2 } from "lucide-react";
+
+function Buttons() {
+  const importCode = `import { Button } from "warqadui";`;
+
+  const variantCode = `<Button variant="primary">Primary</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="ghost">Ghost</Button>
+<Button variant="danger">Danger</Button>
+<Button variant="warning">Warning</Button>`;
+
+  const iconCode = `// Button with Icon + Label
+<Button icon={<Plus />} variant="primary">
+  Add Item
+</Button>
+
+// Icon-only Button (Auto-centered)
+<Button icon={<Settings />} variant="outline" />`;
+
+  const sizeCode = `<Button size="sm">Small</Button>
+<Button size="md">Medium</Button>
+<Button size="lg">Large</Button>`;
+
+  const stateCode = `<Button isLoading>Loading</Button>
+<Button disabled>Disabled</Button>`;
+
+  return (
+    <div className="space-y-12 p-4 pb-20">
+      <PageHeader
+        title="Buttons"
+        description="Premium iOS-inspired buttons with support for variants, icons, loading states, and different sizes."
+      />
+
+      {/* Quick Start */}
+      <section className="space-y-4">
+        <h2 className="text-xl font-bold">Usage</h2>
+        <div className="max-w-xl">
+          <CodeBlock code={importCode} />
+        </div>
+      </section>
+
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+        {/* Standard Variants */}
+        <Card className="space-y-6">
+          <Card.Header>
+            <Card.Title>Variants</Card.Title>
+            <Card.Description>
+              Core visual styles for different contexts.
+            </Card.Description>
+          </Card.Header>
+          <Card.Content className="flex flex-wrap gap-3">
+            <Button variant="primary">Primary</Button>
+            <Button variant="secondary">Secondary</Button>
+            <Button variant="outline">Outline</Button>
+            <Button variant="ghost">Ghost</Button>
+            <Button variant="danger">Danger</Button>
+            <Button variant="warning">Warning</Button>
+          </Card.Content>
+          <CodeBlock code={variantCode} className="text-xs" />
+        </Card>
+
+        {/* Icons Support */}
+        <Card className="space-y-6">
+          <Card.Header>
+            <Card.Title>Icon Support</Card.Title>
+            <Card.Description>
+              Seamlessly integrate Lucide icons.
+            </Card.Description>
+          </Card.Header>
+          <Card.Content className="flex flex-wrap gap-3">
+            <Button icon={<Plus />} variant="primary">
+              Add Item
+            </Button>
+            <Button icon={<Send />} variant="secondary">
+              Send Message
+            </Button>
+            <Button icon={<Trash2 />} variant="danger">
+              Delete
+            </Button>
+            <Button icon={<Settings />} variant="outline" />
+          </Card.Content>
+          <CodeBlock code={iconCode} className="text-xs" />
+        </Card>
+
+        {/* Sizes */}
+        <Card className="space-y-6">
+          <Card.Header>
+            <Card.Title>Sizes</Card.Title>
+            <Card.Description>
+              Predictable sizing for any layout.
+            </Card.Description>
+          </Card.Header>
+          <Card.Content className="flex flex-wrap items-end gap-3">
+            <Button size="sm">Small</Button>
+            <Button size="md">Medium</Button>
+            <Button size="lg">Large</Button>
+          </Card.Content>
+          <CodeBlock code={sizeCode} className="text-xs" />
+        </Card>
+
+        {/* States */}
+        <Card className="space-y-6">
+          <Card.Header>
+            <Card.Title>States</Card.Title>
+            <Card.Description>
+              Built-in loading and disabled states.
+            </Card.Description>
+          </Card.Header>
+          <Card.Content className="flex flex-wrap gap-3">
+            <Button isLoading>Loading</Button>
+            <Button disabled>Disabled</Button>
+          </Card.Content>
+          <CodeBlock code={stateCode} className="text-xs" />
+        </Card>
+      </div>
+    </div>
+  );
+}
+
+export default Buttons;

package/apps/dev-app/src/pages/DataTable.tsx

@@ -0,0 +1,208 @@
+import { useState } from "react";
+import { DataTable, Card, PageHeader, CodeBlock } from "warqadui";
+import { type ColumnDef } from "@tanstack/react-table";
+import { MoreHorizontal, ArrowUpDown } from "lucide-react";
+
+interface User {
+  id: string;
+  status: "pending" | "processing" | "success" | "failed";
+  email: string;
+  amount: number;
+}
+
+const data: User[] = [
+  {
+    id: "728ed52f",
+    status: "success",
+    email: "abe45@example.com",
+    amount: 242.0,
+  },
+  {
+    id: "489e1d42",
+    status: "processing",
+    email: "monserrat44@example.com",
+    amount: 837.0,
+  },
+  {
+    id: "d92b1e42",
+    status: "success",
+    email: "silas22@example.com",
+    amount: 874.0,
+  },
+  {
+    id: "a1b2c3d4",
+    status: "failed",
+    email: "carmella@example.com",
+    amount: 721.0,
+  },
+  {
+    id: "e5f6g7h8",
+    status: "success",
+    email: "ken99@example.com",
+    amount: 316.0,
+  },
+  {
+    id: "i9j0k1l2",
+    status: "pending",
+    email: "user1@example.com",
+    amount: 125.5,
+  },
+  {
+    id: "m3n4o5p6",
+    status: "success",
+    email: "user2@example.com",
+    amount: 540.0,
+  },
+];
+
+const columns: ColumnDef<User>[] = [
+  {
+    id: "select",
+    header: ({ table }: any) => (
+      <input
+        type="checkbox"
+        checked={table.getIsAllPageRowsSelected()}
+        onChange={(e) => table.toggleAllPageRowsSelected(!!e.target.checked)}
+        className="rounded border-gray-300"
+      />
+    ),
+    cell: ({ row }: any) => (
+      <input
+        type="checkbox"
+        checked={row.getIsSelected()}
+        onChange={(e) => row.toggleSelected(!!e.target.checked)}
+        className="rounded border-gray-300"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ row }: any) => {
+      const status = row.getValue("status") as string;
+      return (
+        <div
+          className={`capitalize font-medium ${
+            status === "success"
+              ? "text-green-600"
+              : status === "failed"
+                ? "text-red-600"
+                : status === "processing"
+                  ? "text-blue-600"
+                  : "text-gray-600"
+          }`}
+        >
+          {status}
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: "email",
+    header: ({ column }: any) => {
+      return (
+        <button
+          className="flex items-center gap-1 hover:text-gray-900 transition-colors"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          Email
+          <ArrowUpDown size={14} />
+        </button>
+      );
+    },
+  },
+  {
+    accessorKey: "amount",
+    header: () => <div className="text-right">Amount</div>,
+    cell: ({ row }: any) => {
+      const amount = parseFloat(row.getValue("amount"));
+      const formatted = new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+      }).format(amount);
+      return <div className="text-right font-medium">{formatted}</div>;
+    },
+  },
+  {
+    id: "actions",
+    cell: () => (
+      <button className="p-1 hover:bg-gray-100 rounded-md transition-colors">
+        <MoreHorizontal size={16} className="text-gray-400" />
+      </button>
+    ),
+  },
+];
+
+const tableUsage = `
+const columns: ColumnDef<User>[] = [
+  {
+    accessorKey: "status",
+    header: "Status",
+  },
+  {
+    accessorKey: "email",
+    header: "Email",
+  },
+  {
+    accessorKey: "amount",
+    header: "Amount",
+  },
+];
+
+<DataTable 
+  data={data} 
+  columns={columns} 
+  pageRows={5} 
+  isLoading={false} 
+/>
+`;
+
+export default function DataTableExample() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  return (
+    <div className="p-6 space-y-6 max-w-7xl mx-auto">
+      <PageHeader
+        title="Data Tables"
+        description="Powerful, accessible and flexible tables powered by TanStack Table."
+      />
+
+      <div className="grid grid-cols-1 gap-6">
+        <Card>
+          <Card.Header>
+            <Card.Title>Advanced Example</Card.Title>
+            <Card.Description>
+              Table with selection, sorting, filtering, and pagination.
+              <button
+                onClick={() => {
+                  setIsLoading(true);
+                  setTimeout(() => setIsLoading(false), 2000);
+                }}
+                className="ml-4 text-blue-600 hover:underline text-xs"
+              >
+                Simulate Loading
+              </button>
+            </Card.Description>
+          </Card.Header>
+          <Card.Content className="space-y-6">
+            <DataTable
+              data={data}
+              columns={columns}
+              isLoading={isLoading}
+              // onChange={(state) => {
+              //   console.log(state);
+              // }}
+            />
+
+            <div className="pt-4">
+              <p className="text-sm font-medium mb-2">Usage</p>
+              <CodeBlock code={tableUsage} />
+            </div>
+          </Card.Content>
+        </Card>
+      </div>
+    </div>
+  );
+}

package/apps/dev-app/src/pages/Fields.tsx

@@ -0,0 +1,342 @@
+import { useForm } from "react-hook-form";
+import { Mail, Lock, User, Hash, Info, Phone } from "lucide-react";
+import { Fields, Card, PageHeader, CodeBlock, Button } from "warqadui";
+
+const FieldsShowcase = () => {
+  const form = useForm({
+    defaultValues: {
+      email: "",
+      password: "",
+      username: "",
+      amount: 0,
+      phone: "",
+      role: "",
+      bio: "",
+      userId: "",
+      dob: "",
+    },
+  });
+
+  const importCode = `import { Fields } from "warqadui";`;
+
+  const basicUsage = `<Fields.Input \n  label="Username" \n  placeholder="Enter username" \n  icon={<User size={18} />} \n/>`;
+
+  const phoneUsage = `<Fields.PhoneInput\n  label="Phone Number"\n  form={form}\n  name="phone"\n  icon={<Phone size={18} />}\n/>`;
+
+  const selectUsage = `<Fields.Select\n  label="Department"\n  options={[\n    { value: "engineering", label: "Engineering" },\n    { value: "design", label: "Design" },\n    { value: "marketing", label: "Marketing" },\n  ]}\n  icon={<User size={18} />}\n/>`;
+
+  const textareaUsage = `<Fields.Textarea\n  label="Biography"\n  placeholder="Tell us about yourself..."\n  required\n/>`;
+
+  const dateUsage = `<Fields.DateInput\n  label="Birth Date"\n  placeholder="DD/MM/YYYY"\n  required\n/>`;
+
+  const searchApiUsage = `<Fields.SearchApi\n  label="User Search"\n  apiUrl="/users"\n  placeholder="Search users..."\n  labelKey="username"\n  valueKey="id"\n/>`;
+
+  const withForm = `const form = useForm();\n\n<Fields.Input\n  form={form}\n  name="email"\n  label="Email Address"\n  type="email"\n  placeholder="alex@example.com"\n  icon={<Mail size={18} />}\n  required\n/>\n\n<Fields.PhoneInput\n  form={form}\n  name="phone"\n  label="Phone Number"\n  icon={<Phone size={18} />}\n  required\n/>\n\n<Fields.Select\n  form={form}\n  name="role"\n  label="User Role"\n  options={[\n    { value: "admin", label: "Admin" },\n    { value: "editor", label: "Editor" },\n    { value: "viewer", label: "Viewer" },\n  ]}\n  required\n/>\n\n<Fields.Textarea\n  form={form}\n  name="bio"\n  label="Biography"\n  placeholder="Something about you..."\n  required\n/>\n\n<Fields.SearchApi\n  form={form}\n  name="userId"\n  label="Remote Search"\n  apiUrl="/users"\n  placeholder="Search users..."\n  labelKey="name"\n  valueKey="_id"\n  required\n/>\n\n<Fields.DateInput\n  form={form}\n  name="dob"\n  label="Date of Birth"\n  required\n/>`;
+
+  const passwordUsage = `<Fields.Input\n  label="Password"\n  type="password"\n  placeholder="Min. 8 characters"\n  icon={<Lock size={18} />}\n/>`;
+
+  const moneyUsage = `<Fields.Input\n  label="Amount"\n  type="number"\n  placeholder="0.00"\n  icon={<Hash size={18} />}\n  form={form}\n  name="amount"\n/>`;
+
+  const onSubmit = (data: any) => {
+    console.log("Form Data:", data);
+    alert("Form submitted! Check console for data.");
+  };
+
+  return (
+    <div className="p-8 space-y-12 pb-20">
+      <PageHeader
+        title="Form Fields"
+        description="Premium input components with built-in validation support, icon integration, and smooth interactive states. Optimized for React Hook Form."
+      />
+
+      <section className="space-y-4">
+        <h2 className="text-xl font-bold flex items-center gap-2">Usage</h2>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
+          <Card variant="flat">
+            <p className="text-sm text-gray-600 dark:text-gray-400 font-medium mb-3">
+              1. Import components:
+            </p>
+            <CodeBlock code={importCode} />
+          </Card>
+          <Card variant="flat">
+            <p className="text-sm text-gray-600 dark:text-gray-400 font-medium mb-3">
+              2. Basic usage:
+            </p>
+            <CodeBlock code={basicUsage} />
+          </Card>
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-xl font-bold mb-6">Live Demos</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          {/* Basic Inputs */}
+          <Card>
+            <Card.Header>
+              <Card.Title>Input Variations</Card.Title>
+              <Card.Description>
+                Common input types with icon support and floating-style focus
+                states.
+              </Card.Description>
+            </Card.Header>
+            <Card.Content className="space-y-6">
+              <Fields.Input
+                label="Username"
+                placeholder="Enter username"
+                icon={<User size={18} />}
+              />
+              <Fields.Input
+                label="Password"
+                type="password"
+                placeholder="Enter password"
+                icon={<Lock size={18} />}
+              />
+              <CodeBlock code={passwordUsage} className="text-[11px]" />
+            </Card.Content>
+          </Card>
+          {/* Money/Number Input */}
+          <Card>
+            <Card.Header>
+              <Card.Title>Formatted Number Input</Card.Title>
+              <Card.Description>
+                Special handling for currency/number inputs with automatic comma
+                formatting.
+              </Card.Description>
+            </Card.Header>
+            <Card.Content className="space-y-6">
+              <Fields.Input
+                label="Transaction Amount"
+                type="number"
+                placeholder="0.00"
+                icon={<Hash size={18} />}
+                form={form}
+                name="amount"
+              />
+              <div className="p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg flex items-start gap-3">
+                <Info size={16} className="text-blue-500 mt-0.5" />
+                <p className="text-xs text-blue-700 dark:text-blue-400">
+                  Try typing "1000000" to see automatic formatting: 1,000,000
+                </p>
+              </div>
+              <CodeBlock code={moneyUsage} className="text-[11px]" />
+            </Card.Content>
+          </Card>
+          {/* Phone Input */}
+          <Card>
+            <Card.Header>
+              <Card.Title>Phone Number Input</Card.Title>
+              <Card.Description>
+                International phone number input with country selector and
+                validation.
+              </Card.Description>
+            </Card.Header>
+            <Card.Content className="space-y-6">
+              <Fields.PhoneInput
+                label="Phone Number"
+                form={form}
+                name="phone"
+                icon={<Phone size={18} />}
+              />
+              <CodeBlock code={phoneUsage} className="text-[11px]" />
+            </Card.Content>
+          </Card>
+          {/* Select Input */}
+          <Card>
+            <Card.Header>
+              <Card.Title>Select Field</Card.Title>
+              <Card.Description>
+                Custom styled select component with support for icons and
+                validation.
+              </Card.Description>
+            </Card.Header>
+            <Card.Content className="space-y-6">
+              <Fields.Select
+                label="Region"
+                options={[
+                  { value: "africa", label: "Africa" },
+                  { value: "europe", label: "Europe" },
+                  { value: "asia", label: "Asia" },
+                  { value: "americas", label: "Americas" },
+                ]}
+                icon={<Mail size={18} />}
+              />
+              <CodeBlock code={selectUsage} className="text-[11px]" />
+            </Card.Content>
+          </Card>
+          {/* Textarea Input */}
+          <Card>
+            <Card.Header>
+              <Card.Title>Textarea Field</Card.Title>
+              <Card.Description>
+                Multi-line text input with smooth focus states and consistent
+                styling.
+              </Card.Description>
+            </Card.Header>
+            <Card.Content className="space-y-6">
+              <Fields.Textarea
+                label="Message"
+                placeholder="Enter your message here..."
+                required
+              />
+              <CodeBlock code={textareaUsage} className="text-[11px]" />
+            </Card.Content>
+          </Card>
+          {/* SearchApi Input */}
+          <Card>
+            <Card.Header>
+              <Card.Title>Search API (Autocomplete)</Card.Title>
+              <Card.Description>
+                Remote data fetching with debounce, keyboard navigation, and
+                automatic hydration.
+              </Card.Description>
+            </Card.Header>
+            <Card.Content className="space-y-6">
+              <Fields.SearchApi
+                label="User Database"
+                apiUrl="/users"
+                placeholder="Search users..."
+                labelKey="name"
+                valueKey="_id"
+              />
+              <CodeBlock code={searchApiUsage} className="text-[11px]" />
+            </Card.Content>
+          </Card>
+
+          {/* Date Input */}
+          <Card className="md:col-span-2">
+            <Card.Header>
+              <Card.Title>Date Picker</Card.Title>
+              <Card.Description>
+                Premium date selection with custom styling, keyboard support,
+                and localized formatting.
+              </Card.Description>
+            </Card.Header>
+            <Card.Content className="space-y-6">
+              <Fields.DateInput
+                label="Select Date"
+                placeholder="DD/MM/YYYY"
+                value="04/03/2026"
+                onChange={(d) => console.log(d)}
+              />
+              <CodeBlock code={dateUsage} className="text-[11px]" />
+            </Card.Content>
+          </Card>
+          {/* Form Integration */}
+          <Card className="md:col-span-2">
+            <Card.Header>
+              <Card.Title>React Hook Form Integration</Card.Title>
+              <Card.Description>
+                Seamlessly connects with <code>react-hook-form</code> for
+                validation and error handling.
+              </Card.Description>
+            </Card.Header>
+            <Card.Content>
+              <form
+                onSubmit={form.handleSubmit(onSubmit)}
+                className="space-y-6"
+              >
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  <Fields.Input
+                    form={form}
+                    name="username"
+                    label="Full Name"
+                    placeholder="John Doe"
+                    icon={<User size={18} />}
+                    required
+                  />
+                  <Fields.Input
+                    form={form}
+                    name="email"
+                    label="Email Address"
+                    type="email"
+                    placeholder="john@example.com"
+                    icon={<Mail size={18} />}
+                    required
+                  />
+                  <Fields.PhoneInput
+                    form={form}
+                    name="phone"
+                    label="Phone Number"
+                    icon={<Phone size={18} />}
+                    required
+                  />
+                  <Fields.Select
+                    form={form}
+                    name="role"
+                    label="User Role"
+                    options={[
+                      { value: "admin", label: "Admin" },
+                      { value: "editor", label: "Editor" },
+                      { value: "viewer", label: "Viewer" },
+                    ]}
+                    required
+                  />
+                  <Fields.Textarea
+                    form={form}
+                    name="bio"
+                    label="Biography"
+                    placeholder="Tell us about yourself..."
+                    className="md:col-span-2"
+                    required
+                  />
+                  <Fields.SearchApi
+                    form={form}
+                    name="userId"
+                    label="User Selection"
+                    apiUrl="/users"
+                    placeholder="Search for a user..."
+                    labelKey="name"
+                    valueKey="_id"
+                    className="md:col-span-2"
+                    required
+                  />
+                  <Fields.DateInput
+                    form={form}
+                    name="dob"
+                    label="Date of Birth"
+                    containerClassName="md:col-span-2"
+                    required
+                  />
+                </div>
+                <div className="flex flex-col md:flex-row gap-6 items-start">
+                  <div className="flex-1 w-full">
+                    <CodeBlock code={withForm} className="text-[11px] h-full" />
+                  </div>
+                  <div className="w-full md:w-64 space-y-4">
+                    <Button
+                      type="submit"
+                      variant="primary"
+                      className="w-full h-12"
+                    >
+                      Submit Form
+                    </Button>
+                    <p className="text-[10px] text-gray-500 text-center">
+                      Submitting will show an alert with the current form state.
+                    </p>
+                  </div>
+                </div>
+              </form>
+            </Card.Content>
+          </Card>
+        </div>
+      </section>
+
+      <Card
+        variant="glass"
+        className="bg-indigo-50/50 dark:bg-indigo-900/10 border-indigo-100 dark:border-indigo-900/20"
+      >
+        <Card.Title className="text-indigo-900 dark:text-indigo-400 mb-2">
+          Validation Features
+        </Card.Title>
+        <Card.Description className="text-indigo-700 dark:text-indigo-600">
+          The <code>Fields.Input</code> component automatically extracts error
+          messages from the React Hook Form state based on the <code>name</code>{" "}
+          prop. It also clears errors automatically as the user types, providing
+          a smoother UX.
+        </Card.Description>
+      </Card>
+    </div>
+  );
+};
+
+export default FieldsShowcase;