@neynar/ui 0.2.1 → 0.3.1

package/src/components/ui/stories/spinner.stories.tsx

@@ -0,0 +1,356 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Button } from "../button";
+import { Spinner } from "../spinner";
+
+const meta = {
+  title: "Data Display/Spinner",
+  component: Spinner,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A loading spinner component that provides visual feedback during asynchronous operations. Uses the Loader2 icon with animated rotation.",
+      },
+    },
+  },
+  argTypes: {
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes to apply",
+    },
+  },
+} satisfies Meta<typeof Spinner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground with spinner properties.
+ */
+export const Interactive: Story = {
+  render: (args) => <Spinner {...args} />,
+};
+
+/**
+ * Showcase of all available spinner sizes and colors.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-12 w-full max-w-2xl">
+      {/* Sizes */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">Sizes</h3>
+        <div className="flex items-center gap-4">
+          <div className="flex flex-col items-center gap-2">
+            <Spinner className="size-3" />
+            <span className="text-xs text-muted-foreground">Extra Small</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Spinner className="size-4" />
+            <span className="text-xs text-muted-foreground">Small</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Spinner className="size-5" />
+            <span className="text-xs text-muted-foreground">Default</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Spinner className="size-6" />
+            <span className="text-xs text-muted-foreground">Medium</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Spinner className="size-8" />
+            <span className="text-xs text-muted-foreground">Large</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Spinner className="size-12" />
+            <span className="text-xs text-muted-foreground">Extra Large</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Colors */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">Colors</h3>
+        <div className="flex items-center gap-4">
+          <div className="flex flex-col items-center gap-2">
+            <Spinner />
+            <span className="text-xs text-muted-foreground">Default</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Spinner className="text-primary" />
+            <span className="text-xs text-muted-foreground">Primary</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Spinner className="text-destructive" />
+            <span className="text-xs text-muted-foreground">Destructive</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Spinner className="text-muted-foreground" />
+            <span className="text-xs text-muted-foreground">Muted</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <div className="bg-primary p-3 rounded-md">
+              <Spinner className="text-primary-foreground" />
+            </div>
+            <span className="text-xs text-muted-foreground">On Primary</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Animation Speed */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Animation Speed
+        </h3>
+        <div className="flex items-center gap-4">
+          <div className="flex flex-col items-center gap-2">
+            <Spinner className="animate-spin-slow" />
+            <span className="text-xs text-muted-foreground">Slow</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Spinner />
+            <span className="text-xs text-muted-foreground">Normal</span>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <Spinner className="animate-spin-fast" />
+            <span className="text-xs text-muted-foreground">Fast</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Centered Layout */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Centered in Container
+        </h3>
+        <div className="border rounded-lg p-12 flex items-center justify-center">
+          <Spinner className="size-8" />
+        </div>
+      </div>
+
+      {/* With Background */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          With Background Overlay
+        </h3>
+        <div className="relative border rounded-lg p-12">
+          <div className="absolute inset-0 bg-background/50 backdrop-blur-sm flex items-center justify-center rounded-lg">
+            <Spinner className="size-8" />
+          </div>
+          <div className="space-y-2">
+            <h4 className="font-semibold">Content Loading</h4>
+            <p className="text-sm text-muted-foreground">
+              This content is behind a loading overlay
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "Complete showcase of spinner sizes, colors, animation speeds, and layout options.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world usage examples showing spinners in practical scenarios.
+ */
+export const InContext: Story = {
+  render: () => (
+    <div className="space-y-8 w-full max-w-2xl">
+      {/* Loading Button */}
+      <div className="space-y-4 p-6 border rounded-lg">
+        <h3 className="text-lg font-semibold">Loading Buttons</h3>
+        <div className="flex flex-wrap gap-2">
+          <Button disabled>
+            <Spinner className="size-4 mr-2" />
+            Loading...
+          </Button>
+          <Button variant="outline" disabled>
+            <Spinner className="size-4 mr-2" />
+            Processing
+          </Button>
+          <Button variant="secondary" disabled>
+            <Spinner className="size-4 mr-2" />
+            Saving
+          </Button>
+          <Button size="icon" disabled>
+            <Spinner className="size-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Loading Card Content */}
+      <div className="space-y-4 p-6 border rounded-lg">
+        <h3 className="text-lg font-semibold">Loading Card</h3>
+        <div className="border rounded-lg p-8 flex flex-col items-center justify-center gap-3">
+          <Spinner className="size-8" />
+          <p className="text-sm text-muted-foreground">Loading data...</p>
+        </div>
+      </div>
+
+      {/* Inline Loading */}
+      <div className="space-y-4 p-6 border rounded-lg">
+        <h3 className="text-lg font-semibold">Inline Loading</h3>
+        <div className="space-y-3">
+          <p className="text-sm flex items-center gap-2">
+            <Spinner className="size-4" />
+            Fetching latest updates...
+          </p>
+          <p className="text-sm flex items-center gap-2">
+            <Spinner className="size-4 text-primary" />
+            Syncing your data...
+          </p>
+          <p className="text-sm flex items-center gap-2">
+            <Spinner className="size-4 text-muted-foreground" />
+            Processing in background...
+          </p>
+        </div>
+      </div>
+
+      {/* Page Loading */}
+      <div className="space-y-4 p-6 border rounded-lg">
+        <h3 className="text-lg font-semibold">Page Loading State</h3>
+        <div className="border rounded-lg min-h-64 flex items-center justify-center">
+          <div className="flex flex-col items-center gap-4">
+            <Spinner className="size-12" />
+            <div className="text-center">
+              <p className="font-medium">Loading your dashboard</p>
+              <p className="text-sm text-muted-foreground">
+                This won't take long...
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* List Loading */}
+      <div className="space-y-4 p-6 border rounded-lg">
+        <h3 className="text-lg font-semibold">Loading List Items</h3>
+        <div className="space-y-2">
+          <div className="flex items-center gap-3 p-3 border rounded-md">
+            <Spinner className="size-4" />
+            <div className="flex-1">
+              <div className="h-4 bg-muted rounded w-1/3" />
+            </div>
+          </div>
+          <div className="flex items-center gap-3 p-3 border rounded-md">
+            <Spinner className="size-4" />
+            <div className="flex-1">
+              <div className="h-4 bg-muted rounded w-1/2" />
+            </div>
+          </div>
+          <div className="flex items-center gap-3 p-3 border rounded-md">
+            <Spinner className="size-4" />
+            <div className="flex-1">
+              <div className="h-4 bg-muted rounded w-2/5" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Modal Loading */}
+      <div className="space-y-4 p-6 border rounded-lg">
+        <h3 className="text-lg font-semibold">Modal Loading</h3>
+        <div className="border rounded-lg bg-card shadow-lg">
+          <div className="p-6 space-y-4">
+            <h4 className="text-lg font-semibold">Confirm Action</h4>
+            <p className="text-sm text-muted-foreground">
+              Are you sure you want to proceed?
+            </p>
+            <div className="flex gap-2">
+              <Button variant="outline">Cancel</Button>
+              <Button disabled>
+                <Spinner className="size-4 mr-2" />
+                Confirming...
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Table Loading */}
+      <div className="space-y-4 p-6 border rounded-lg">
+        <h3 className="text-lg font-semibold">Table Loading</h3>
+        <div className="border rounded-lg">
+          <div className="p-4 border-b">
+            <div className="flex items-center justify-between">
+              <h4 className="font-medium">User Data</h4>
+              <Spinner className="size-4" />
+            </div>
+          </div>
+          <div className="p-8 flex flex-col items-center justify-center gap-2">
+            <Spinner className="size-6" />
+            <p className="text-sm text-muted-foreground">Loading table data...</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Form Submission */}
+      <div className="space-y-4 p-6 border rounded-lg">
+        <h3 className="text-lg font-semibold">Form Submission</h3>
+        <form className="space-y-4">
+          <div className="space-y-2">
+            <label htmlFor="email" className="text-sm font-medium">
+              Email
+            </label>
+            <input
+              id="email"
+              type="email"
+              className="w-full px-3 py-2 border rounded-md"
+              placeholder="you@example.com"
+              disabled
+            />
+          </div>
+          <div className="space-y-2">
+            <label htmlFor="message" className="text-sm font-medium">
+              Message
+            </label>
+            <textarea
+              id="message"
+              className="w-full min-h-24 px-3 py-2 border rounded-md"
+              placeholder="Your message"
+              disabled
+            />
+          </div>
+          <Button className="w-full" disabled>
+            <Spinner className="size-4 mr-2" />
+            Submitting...
+          </Button>
+        </form>
+      </div>
+
+      {/* Content Refresh */}
+      <div className="space-y-4 p-6 border rounded-lg">
+        <div className="flex items-center justify-between">
+          <h3 className="text-lg font-semibold">Recent Activity</h3>
+          <Button variant="ghost" size="sm" disabled>
+            <Spinner className="size-3 mr-2" />
+            Refreshing
+          </Button>
+        </div>
+        <div className="space-y-2">
+          <p className="text-sm text-muted-foreground">
+            Activity feed is being refreshed...
+          </p>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "Real-world examples showing spinners in buttons, cards, pages, lists, modals, tables, forms, and refresh operations.",
+      },
+    },
+  },
+};

package/src/components/ui/stories/stack.stories.tsx

@@ -18,7 +18,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     spacing: {
       control: { type: "select" },

package/src/components/ui/stories/switch.stories.tsx

@@ -16,7 +16,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     checked: {
       control: { type: "boolean" },

package/src/components/ui/stories/table.stories.tsx

@@ -36,7 +36,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     className: {
       control: "text",

package/src/components/ui/stories/tabs.stories.tsx

@@ -21,7 +21,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     defaultValue: {
       control: { type: "text" },

package/src/components/ui/stories/text-field.stories.tsx

@@ -16,7 +16,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     label: {
       control: { type: "text" },

package/src/components/ui/stories/textarea.stories.tsx

@@ -24,7 +24,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     placeholder: {
       control: { type: "text" },

package/src/components/ui/stories/theme-toggle.stories.tsx

@@ -21,7 +21,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     variant: {
       control: { type: "select" },

package/src/components/ui/stories/theme.stories.tsx

@@ -41,7 +41,6 @@ Place the Theme component once at the root of your application, ideally in the d
       },
     },
   },
-  tags: ["autodocs"],
 } satisfies Meta<typeof Theme>;
 
 export default meta;

package/src/components/ui/stories/toggle-group.stories.tsx

@@ -22,7 +22,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     type: {
       control: { type: "select" },

package/src/components/ui/stories/toggle.stories.tsx

@@ -16,7 +16,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     variant: {
       control: { type: "select" },

package/src/components/ui/stories/tooltip.stories.tsx

@@ -25,7 +25,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     // Since Tooltip is a composition of sub-components, we'll document the key props here
     delayDuration: {

package/src/components/ui/stories/typography.stories.tsx

@@ -45,7 +45,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     variant: {
       control: { type: "select" },
@@ -72,6 +71,7 @@ const meta = {
       options: [
         "default",
         "muted",
+        "faint",
         "accent",
         "destructive",
         "success",
@@ -526,6 +526,9 @@ export const InContext: Story = {
           <Typography variant="body" color="muted">
             Muted color for secondary information
           </Typography>
+          <Typography variant="body" color="faint">
+            Faint color for tertiary information
+          </Typography>
           <Typography variant="body" color="accent">
             Accent color for emphasis
           </Typography>
@@ -1557,7 +1560,7 @@ export const ComponentReference: Story = {
               <Typography variant="paragraphLead">Available Props:</Typography>
               <ul className="mt-2 space-y-1 ml-4">
                 <li>
-                  <Code>color</Code> - default, muted, accent, destructive,
+                  <Code>color</Code> - default, muted, faint, accent, destructive,
                   success, warning
                 </li>
                 <li>

package/src/components/ui/stories/use-mobile.stories.tsx

@@ -365,7 +365,6 @@ Returns true when viewport width is less than 768px (Tailwind's md breakpoint).
       },
     },
   },
-  tags: ["autodocs"],
 } satisfies Meta;
 
 export default meta;

package/src/components/ui/stories/use-theme.stories.tsx

@@ -57,7 +57,6 @@ function ThemeToggle() {
       },
     },
   },
-  tags: ["autodocs"],
 };
 
 export default meta;

package/src/components/ui/tabs.tsx

@@ -272,7 +272,7 @@ function TabsList({
     <TabsPrimitive.List
       data-slot="tabs-list"
       className={cn(
-        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        "bg-card text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
         className,
       )}
       {...props}

package/src/components/ui/theme-toggle.tsx

@@ -18,7 +18,7 @@ import { type VariantProps } from "class-variance-authority";
  * Combines Button variant props with DropdownMenu positioning props to create a complete
  * theme switching interface. All props are optional with sensible defaults for immediate usage.
  */
-
+// eslint-disable-next-line unused-imports/no-unused-vars
 type ThemeToggleDocsProps = {
   /**
    * Visual style variant for the toggle button (inherited from Button component)
@@ -428,6 +428,4 @@ function ThemeToggle({
   );
 }
 
-ThemeToggle.displayName = "ThemeToggle";
-
 export { ThemeToggle };

package/src/components/ui/theme.tsx

@@ -1,3 +1,7 @@
+"use client";
+
+import { useTheme } from "../../hooks/use-theme";
+
 /**
  * Props for Theme (Documentation only - NOT used in component implementation)
  *
@@ -201,6 +205,7 @@ type ThemeDocsProps = Record<string, never>;
  * @since 1.0.0
  */
 export function Theme() {
+  useTheme();
   return (
     <script
       dangerouslySetInnerHTML={{
@@ -239,4 +244,4 @@ export function Theme() {
       }}
     />
   );
-}
+}