@syscore/ui-library 1.1.11 → 1.1.13

package/client/ui/Icons.stories.tsx

@@ -10,45 +10,45 @@ import {
   IconConceptNourishment,
   IconConceptSound,
   IconConceptMaterials,
-} from "@/components/icons/ConceptIcons";
-import { NavLogo } from "@/components/icons/NavLogo";
-import { NavAccount } from "@/components/icons/NavAccount";
-import { NavBullet } from "@/components/icons/NavBullet";
-import { UtilityAccordion } from "@/components/icons/UtilityAccordion";
-import { UtilityChevronDown } from "@/components/icons/UtilityChevronDown";
-import { UtilityClassification } from "@/components/icons/UtilityClassification";
-import { UtilityClose } from "@/components/icons/UtilityClose";
-import { UtilityDrag } from "@/components/icons/UtilityDrag";
-import { UtilityEdit } from "@/components/icons/UtilityEdit";
-import { UtilityOptions } from "@/components/icons/UtilityOptions";
-import { UtilityPortfolio } from "@/components/icons/UtilityPortfolio";
-import { UtilityReset } from "@/components/icons/UtilityReset";
-import { UtilityScoring } from "@/components/icons/UtilityScoring";
-import { UtilitySearch } from "@/components/icons/UtilitySearch";
-import { UtilitySort } from "@/components/icons/UtilitySort";
-import { UtilityText } from "@/components/icons/UtilityText";
-import { SealWell } from "@/components/icons/SealWell";
-import { SealIwbiMember } from "@/components/icons/SealIwbiMember";
-import { SealWellCertification } from "@/components/icons/SealWellCertification";
-import { SealWellCommunity } from "@/components/icons/SealWellCommunity";
-import { SealWellResidence } from "@/components/icons/SealWellResidence";
-import { SealWorksWithWell } from "@/components/icons/SealWorksWithWell";
-import { SealEnterpriseProvider } from "@/components/icons/ProviderSeals";
-import { SealPerformanceTestingProvider } from "@/components/icons/ProviderSeals";
-import { SealSurveyProvider } from "@/components/icons/ProviderSeals";
+} from "../components/icons/ConceptIcons";
+import { NavLogo } from "../components/icons/NavLogo";
+import { NavAccount } from "../components/icons/NavAccount";
+import { NavBullet } from "../components/icons/NavBullet";
+import { UtilityAccordion } from "../components/icons/UtilityAccordion";
+import { UtilityChevronDown } from "../components/icons/UtilityChevronDown";
+import { UtilityClassification } from "../components/icons/UtilityClassification";
+import { UtilityClose } from "../components/icons/UtilityClose";
+import { UtilityDrag } from "../components/icons/UtilityDrag";
+import { UtilityEdit } from "../components/icons/UtilityEdit";
+import { UtilityOptions } from "../components/icons/UtilityOptions";
+import { UtilityPortfolio } from "../components/icons/UtilityPortfolio";
+import { UtilityReset } from "../components/icons/UtilityReset";
+import { UtilityScoring } from "../components/icons/UtilityScoring";
+import { UtilitySearch } from "../components/icons/UtilitySearch";
+import { UtilitySort } from "../components/icons/UtilitySort";
+import { UtilityText } from "../components/icons/UtilityText";
+import { SealWell } from "../components/icons/SealWell";
+import { SealIwbiMember } from "../components/icons/SealIwbiMember";
+import { SealWellCertification } from "../components/icons/SealWellCertification";
+import { SealWellCommunity } from "../components/icons/SealWellCommunity";
+import { SealWellResidence } from "../components/icons/SealWellResidence";
+import { SealWorksWithWell } from "../components/icons/SealWorksWithWell";
+import { SealEnterpriseProvider } from "../components/icons/ProviderSeals";
+import { SealPerformanceTestingProvider } from "../components/icons/ProviderSeals";
+import { SealSurveyProvider } from "../components/icons/ProviderSeals";
 import {
   BadgeEnterpriseProvider,
   BadgePerformanceTestingProvider,
   BadgeProductProvider,
   BadgeSurveyProvider,
-} from "@/components/icons/ProviderBadges";
-import { WatermarkMemberOrg } from "@/components/icons/WatermarkMemberOrg";
-import { WaterMarkWWWProducts } from "@/components/icons/WaterMarkWWWProducts";
-import { WaterMarkWellProjects } from "@/components/icons/WaterMarkWellProjects";
+} from "../components/icons/ProviderBadges";
+import { WatermarkMemberOrg } from "../components/icons/WatermarkMemberOrg";
+import { WaterMarkWWWProducts } from "../components/icons/WaterMarkWWWProducts";
+import { WaterMarkWellProjects } from "../components/icons/WaterMarkWellProjects";
 import {
   SealProductProvider,
   SealProviders,
-} from "@/components/icons/ProviderSeals";
+} from "../components/icons/ProviderSeals";
 
 const meta = {
   title: "Review/Icons",

package/client/ui/Input.stories.tsx

@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Input } from "../components/ui/input";
+import { Label } from "../components/ui/label";
+import { Button } from "../components/ui/button";
+import { Search, Copy } from "lucide-react";
+
+const meta = {
+  title: "Review/Input",
+  component: Input,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placeholder: "Enter text...",
+  },
+};
+
+export const WithType: Story = {
+  render: () => (
+    <div className="space-y-4 w-full max-w-md">
+      <div className="space-y-3">
+        <Label>Text</Label>
+        <Input type="text" placeholder="Enter text..." />
+      </div>
+      <div className="space-y-3">
+        <Label>Email</Label>
+        <Input type="email" placeholder="Enter email..." />
+      </div>
+      <div className="space-y-3">
+        <Label>Password</Label>
+        <Input type="password" placeholder="Enter password..." />
+      </div>
+      <div className="space-y-3">
+        <Label>Number</Label>
+        <Input type="number" placeholder="Enter number..." />
+      </div>
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  args: {
+    placeholder: "Disabled input",
+    disabled: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    placeholder: "Read-only input",
+    value: "This is read-only",
+    readOnly: true,
+  },
+};
+
+export const WithIcons: Story = {
+  render: () => (
+    <div className="space-y-4 min-w-[300px]">
+      <div className="space-y-3">
+        <Label>Currency (Span)</Label>
+        <Input
+          placeholder="0.00"
+          type="number"
+          startIcon={<span>€</span>}
+          endIcon={<span>EUR</span>}
+        />
+      </div>
+
+      <div className="space-y-3">
+        <Label>Search (Icon)</Label>
+        <Input
+          placeholder="Search..."
+          startIcon={<Search className="h-4 w-4" />}
+        />
+      </div>
+    </div>
+  ),
+};
+
+export const WithButton: Story = {
+  render: () => (
+    <div className="space-y-4 min-w-[400px]">
+      <div className="space-y-3">
+        <Label>Icon Button</Label>
+        <Input
+          placeholder="Copy link"
+          value="https://example.com/share/123"
+          readOnly
+          endIcon={
+            <button
+              className="hover:text-gray-900 transition-colors"
+              onClick={() => alert("Copied!")}
+            >
+              <Copy className="h-4 w-4" />
+            </button>
+          }
+        />
+      </div>
+
+      <div className="space-y-3">
+        <Label>Wide Button (Auto-fit)</Label>
+        <Input
+          placeholder="Enter email"
+          endIcon={
+            <Button
+              size="utility"
+              className="h-8 px-3"
+              onClick={() => alert("Subscribed!")}
+            >
+              Subscribe
+            </Button>
+          }
+        />
+      </div>
+    </div>
+  ),
+};

package/client/ui/Label.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Label } from "../components/ui/Label";
+import { Label } from "../components/ui/label";
 import { Input } from "../components/ui/input";
+import { Textarea } from "../components/ui/textarea";
 
 const meta = {
   title: "Review/Label",
@@ -23,7 +24,7 @@ export const Default: Story = {
 
 export const WithInput: Story = {
   render: () => (
-    <div className="space-y-2 w-full max-w-md">
+    <div className="flex flex-col gap-y-3 w-full max-w-md">
       <Label htmlFor="email">Email</Label>
       <Input id="email" type="email" placeholder="Enter your email" />
     </div>
@@ -33,21 +34,17 @@ export const WithInput: Story = {
 export const Multiple: Story = {
   render: () => (
     <div className="space-y-6 w-full max-w-md">
-      <div className="space-y-2">
+      <div className=" flex flex-col gap-y-3">
         <Label htmlFor="name">Name</Label>
         <Input id="name" placeholder="Enter your name" />
       </div>
-      <div className="space-y-2">
+      <div className=" flex flex-col gap-y-3">
         <Label htmlFor="email">Email</Label>
         <Input id="email" type="email" placeholder="Enter your email" />
       </div>
-      <div className="space-y-2">
+      <div className=" flex flex-col gap-y-3">
         <Label htmlFor="message">Message</Label>
-        <textarea
-          id="message"
-          className="flex h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-          placeholder="Enter your message"
-        />
+        <Textarea id="message" placeholder="Enter your message" />
       </div>
     </div>
   ),
@@ -55,7 +52,7 @@ export const Multiple: Story = {
 
 export const Required: Story = {
   render: () => (
-    <div className="space-y-2 w-full max-w-md">
+    <div className=" flex flex-col gap-y-3 w-full max-w-md">
       <Label htmlFor="required">
         Field Name
         <span className="text-red-500 ml-1">*</span>

package/client/ui/Navigation.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Navigation } from "@/components/ui/Navigation";
+import { Navigation } from "@/components/ui/navigation";
 
 const meta = {
   title: "Review/Navigation",

package/client/ui/RadioGroup/RadioGroup.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { RadioGroup, RadioGroupItem } from "../../components/ui/radio-group";
-import { Label } from "../../components/ui/Label";
+import { Label } from "../../components/ui/label";
 import { useState } from "react";
 
 const meta = {

package/client/ui/SearchField.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { SearchField } from "@/components/ui/SearchField";
+import { SearchField } from "../components/ui/search";
 
 const meta = {
   title: "Review/SearchField",

package/client/ui/{Select/Select.stories.tsx → Select.stories.tsx}

@@ -5,11 +5,11 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "../../components/ui/select";
+} from "../components/ui/select";
 import { useState } from "react";
 
 const meta = {
-  title: "UI/Select",
+  title: "Review/Select",
   component: Select,
   tags: ["autodocs"],
   parameters: {

package/client/ui/{Switch/Switch.stories.tsx → Switch.stories.tsx}

@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Switch } from "../../components/ui/switch";
-import { Label } from "../../components/ui/Label";
+import { Switch } from "../components/ui/switch";
+import { Label } from "../components/ui/label";
 import { useState } from "react";
 
 const meta = {
-  title: "UI/Switch",
+  title: "Review/Switch",
   component: Switch,
   tags: ["autodocs"],
   parameters: {

package/client/ui/Tabs.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { AnimatedTabs } from "@/components/ui/Tabs";
+import { AnimatedTabs } from "../components/ui/tabs";
 
 const meta = {
   title: "Review/Tabs",
@@ -14,20 +14,184 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const HomeContent = () => (
+  <div className="space-y-6 mt-12">
+    <div className="border-b pb-6 dark:border-zinc-800">
+      <h2 className="text-3xl font-bold mb-4">Welcome to Our Platform</h2>
+      <p className="text-zinc-600 dark:text-zinc-400 mb-4">
+        Discover a new way to manage your projects and collaborate with your
+        team.
+      </p>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="p-4 bg-white dark:bg-zinc-800 rounded-lg">
+          <h3 className="font-semibold mb-2">Quick Start</h3>
+          <p className="text-sm text-zinc-600 dark:text-zinc-400">
+            Get started with our platform in minutes
+          </p>
+        </div>
+        <div className="p-4 bg-white dark:bg-zinc-800 rounded-lg">
+          <h3 className="font-semibold mb-2">Latest Updates</h3>
+          <p className="text-sm text-zinc-600 dark:text-zinc-400">
+            See what&apos;s new in our latest release
+          </p>
+        </div>
+        <div className="p-4 bg-white dark:bg-zinc-800 rounded-lg">
+          <h3 className="font-semibold mb-2">Resources</h3>
+          <p className="text-sm text-zinc-600 dark:text-zinc-400">
+            Access guides and documentation
+          </p>
+        </div>
+      </div>
+    </div>
+    <div>
+      <h3 className="text-xl font-semibold mb-4">Recent Activity</h3>
+      <div className="space-y-3">
+        <div className="flex items-center gap-3 p-3 bg-white dark:bg-zinc-800 rounded-lg">
+          <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+          <p className="text-sm">
+            Project &quot;Marketing Campaign&quot; was updated 2 hours ago
+          </p>
+        </div>
+        <div className="flex items-center gap-3 p-3 bg-white dark:bg-zinc-800 rounded-lg">
+          <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
+          <p className="text-sm">
+            New team member John Doe joined the platform
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+const AboutContent = () => (
+  <div className="space-y-8 mt-12">
+    <div>
+      <h2 className="text-3xl font-bold mb-4">About Us</h2>
+      <p className="text-zinc-600 dark:text-zinc-400 mb-6">
+        We&apos;re a team of passionate individuals working together to create
+        amazing solutions for our clients.
+      </p>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div>
+          <h3 className="text-xl font-semibold mb-3">Our Mission</h3>
+          <p className="text-zinc-600 dark:text-zinc-400">
+            To empower businesses with innovative tools and solutions that drive
+            growth and success in the digital age.
+          </p>
+        </div>
+        <div>
+          <h3 className="text-xl font-semibold mb-3">Our Vision</h3>
+          <p className="text-zinc-600 dark:text-zinc-400">
+            To become the leading platform for business transformation and
+            digital innovation worldwide.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+const ContactContent = () => (
+  <div className="max-w-2xl mx-auto mt-12">
+    <h2 className="text-3xl font-bold mb-6">Get in Touch</h2>
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
+      <div>
+        <h3 className="text-xl font-semibold mb-4">Contact Information</h3>
+        <div className="space-y-4">
+          <div>
+            <p className="font-medium">Address</p>
+            <p className="text-zinc-600 dark:text-zinc-400">
+              123 Business Street
+            </p>
+            <p className="text-zinc-600 dark:text-zinc-400">
+              San Francisco, CA 94105
+            </p>
+          </div>
+          <div>
+            <p className="font-medium">Email</p>
+            <p className="text-zinc-600 dark:text-zinc-400">
+              contact@example.com
+            </p>
+          </div>
+          <div>
+            <p className="font-medium">Phone</p>
+            <p className="text-zinc-600 dark:text-zinc-400">
+              +1 (555) 123-4567
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium mb-1">Name</label>
+          <input
+            type="text"
+            className="w-full p-2 rounded-md border dark:bg-zinc-800 dark:border-zinc-700"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium mb-1">Email</label>
+          <input
+            type="email"
+            className="w-full p-2 rounded-md border dark:bg-zinc-800 dark:border-zinc-700"
+          />
+        </div>
+        <button className="w-full bg-black text-white dark:bg-white dark:text-black py-2 rounded-md font-medium">
+          Send Message
+        </button>
+      </div>
+    </div>
+  </div>
+);
+
+const DangerZoneContent = () => (
+  <div className="max-w-2xl mx-auto mt-12">
+    <h2 className="text-2xl font-bold mb-6 text-red-500">Caution!</h2>
+    <div className="space-y-6">
+      <div className="border border-red-200 dark:border-red-900 rounded-lg p-6 bg-red-50 dark:bg-red-900/20">
+        <h3 className="text-lg font-semibold text-red-600 dark:text-red-400 mb-2">
+          Delete Account
+        </h3>
+        <p className="text-red-600/80 dark:text-red-400/80 mb-4">
+          This action cannot be undone. This will permanently delete your
+          account and remove your data from our servers.
+        </p>
+        <div className="flex items-center gap-4">
+          <input
+            type="text"
+            placeholder="Type 'delete' to confirm"
+            className="flex-1 p-2 rounded-md border border-red-200 dark:border-red-800 dark:bg-red-900/30"
+          />
+          <button className="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 transition-colors">
+            Delete Account
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
 const tabs = [
-  { label: "Home", value: "home" },
-  { label: "About", value: "about" },
-  { label: "Contact", value: "contact" },
+  { label: "Home", value: "home", content: <HomeContent /> },
+  { label: "About", value: "about", content: <AboutContent /> },
+  { label: "Contact", value: "contact", content: <ContactContent /> },
 ];
 
 export const Default: Story = {
-  render: () => <AnimatedTabs tabs={tabs} />,
+  args: {
+    tabs: tabs,
+  },
 };
 
 export const WithDangerZone: Story = {
-  render: () => (
-    <AnimatedTabs
-      tabs={[...tabs, { label: "Danger Zone", value: "danger-zone" }]}
-    />
-  ),
+  args: {
+    tabs: [
+      ...tabs,
+      {
+        label: "Danger Zone",
+        value: "danger-zone",
+        content: <DangerZoneContent />,
+      },
+    ],
+  },
 };

package/client/ui/Tag.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Tag } from "@/components/ui/Tag";
+import { useState } from "react";
+import { Tag } from "../components/ui/tag";
 
 const meta = {
   title: "Review/Tag",
@@ -188,3 +189,49 @@ export const AllVariants: Story = {
     </div>
   ),
 };
+
+export const InteractiveGroup: Story = {
+  args: {
+    active: false,
+    variant: "light",
+    children: "Tag",
+  },
+  render: () => {
+    const [selected, setSelected] = useState<string[]>(["design"]);
+
+    const toggleTag = (value: string) => {
+      setSelected((prev) =>
+        prev.includes(value)
+          ? prev.filter((t) => t !== value)
+          : [...prev, value],
+      );
+    };
+
+    const options = ["design", "development", "marketing", "sales"];
+
+    return (
+      <div className="space-y-4">
+        <div>
+          <p className="text-sm text-gray-600 mb-2">
+            Interactive Selection (Form Mode)
+          </p>
+          <div className="flex flex-wrap gap-2">
+            {options.map((opt) => (
+              <Tag
+                key={opt}
+                active={selected.includes(opt)}
+                onClick={() => toggleTag(opt)}
+                type="button"
+              >
+                {opt.charAt(0).toUpperCase() + opt.slice(1)}
+              </Tag>
+            ))}
+          </div>
+          <div className="mt-4 text-sm text-gray-500">
+            Selected: {selected.join(", ") || "none"}
+          </div>
+        </div>
+      </div>
+    );
+  },
+};

package/client/ui/{Textarea/Textarea.stories.tsx → Textarea.stories.tsx}

@@ -1,8 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Textarea } from "../../components/ui/textarea";
+import { Textarea } from "../components/ui/textarea";
+import { Label } from "../components/ui/label";
 
 const meta = {
-  title: "UI/Textarea",
+  title: "Review/Textarea",
   component: Textarea,
   tags: ["autodocs"],
   parameters: {
@@ -37,18 +38,16 @@ export const Disabled: Story = {
 export const Rows: Story = {
   render: () => (
     <div className="space-y-4 w-full max-w-md">
-      <div>
-        <label className="text-sm font-medium mb-2 block">Small (3 rows)</label>
+      <div className="flex flex-col gap-y-2">
+        <Label> mall (3 rows)</Label>
         <Textarea placeholder="Type here..." rows={3} />
       </div>
-      <div>
-        <label className="text-sm font-medium mb-2 block">
-          Medium (5 rows)
-        </label>
+      <div className="flex flex-col gap-y-2">
+        <Label>Medium (5 rows)</Label>
         <Textarea placeholder="Type here..." rows={5} />
       </div>
-      <div>
-        <label className="text-sm font-medium mb-2 block">Large (8 rows)</label>
+      <div className="flex flex-col gap-y-2">
+        <Label>Large (8 rows)</Label>
         <Textarea placeholder="Type here..." rows={8} />
       </div>
     </div>

package/client/ui/Toggle.stories.tsx

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { SegmentedControl } from "../components/ui/Toggle";
+import { SegmentedControl } from "../components/ui/toggle";
 import { useState } from "react";
 import { cn } from "../lib/utils";
-import { UtilityAccordion } from "@/components/icons/UtilityAccordion";
-import { UtilityText } from "@/components/icons/UtilityText";
+import { UtilityAccordion } from "../components/icons/UtilityAccordion";
+import { UtilityText } from "../components/icons/UtilityText";
 
 const meta = {
   title: "Review/Toggle",