@akshatbuilds/sonix 1.0.0

package/components/sounds-gallery.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import { useState } from 'react';
+import { SoundCard } from './sound-card';
+import type { SoundName } from '@/lib/sounds';
+
+const SOUNDS_DATA: Array<{
+  name: SoundName;
+  label: string;
+  category: string;
+  description: string;
+}> = [
+  {
+    name: 'button-click',
+    label: 'Button Click',
+    category: 'Interaction',
+    description: 'Classic click sound for button interactions. Crisp and satisfying.',
+  },
+  {
+    name: 'button-click-secondary',
+    label: 'Button Click (Secondary)',
+    category: 'Interaction',
+    description: 'Softer click for secondary actions and alternatives.',
+  },
+  {
+    name: 'hover-blip',
+    label: 'Hover Blip',
+    category: 'Feedback',
+    description: 'Quick chirp when hovering over interactive elements.',
+  },
+  {
+    name: 'hover-soft',
+    label: 'Hover Soft',
+    category: 'Feedback',
+    description: 'Subtle and gentle hover feedback sound.',
+  },
+  {
+    name: 'success-chime',
+    label: 'Success Chime',
+    category: 'Notification',
+    description: 'Pleasant chime to indicate successful completion.',
+  },
+  {
+    name: 'success-bell',
+    label: 'Success Bell',
+    category: 'Notification',
+    description: 'Uplifting bell sound for positive feedback.',
+  },
+  {
+    name: 'error-buzz',
+    label: 'Error Buzz',
+    category: 'Alert',
+    description: 'Attention-grabbing buzz for error states.',
+  },
+  {
+    name: 'error-beep',
+    label: 'Error Beep',
+    category: 'Alert',
+    description: 'Clear beep to signal an error occurred.',
+  },
+  {
+    name: 'notification-ping',
+    label: 'Notification Ping',
+    category: 'Alert',
+    description: 'Quick ping for notifications and messages.',
+  },
+  {
+    name: 'notification-subtle',
+    label: 'Notification Subtle',
+    category: 'Alert',
+    description: 'Quiet notification sound for background alerts.',
+  },
+  {
+    name: 'swoosh',
+    label: 'Swoosh',
+    category: 'Transition',
+    description: 'Smooth whoosh for page transitions and animations.',
+  },
+  {
+    name: 'pop',
+    label: 'Pop',
+    category: 'Interaction',
+    description: 'Playful pop sound for confirmation or reveal.',
+  },
+  {
+    name: 'slider-tick',
+    label: 'Slider Tick',
+    category: 'Interaction',
+    description: 'Subtle tick sound for sliders and range inputs.',
+  },
+  {
+    name: 'key-press',
+    label: 'Key Press',
+    category: 'Interaction',
+    description: 'Mechanical switch click for text input and keyboards.',
+  },
+];
+
+export function SoundsGallery() {
+  const [selectedCategory, setSelectedCategory] = useState<string>('All');
+
+  const categories = [
+    'All',
+    ...new Set(SOUNDS_DATA.map(s => s.category)),
+  ];
+
+  const filteredSounds =
+    selectedCategory === 'All'
+      ? SOUNDS_DATA
+      : SOUNDS_DATA.filter(s => s.category === selectedCategory);
+
+  return (
+    <div className="flex flex-col gap-8">
+      <div className="flex flex-wrap gap-2">
+        {categories.map(category => (
+          <button
+            key={category}
+            onClick={() => setSelectedCategory(category)}
+            className={`rounded-full px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${
+              selectedCategory === category
+                ? 'bg-primary text-primary-foreground'
+                : 'border border-border bg-card text-card-foreground hover:bg-accent'
+            }`}
+          >
+            {category}
+          </button>
+        ))}
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {filteredSounds.map(sound => (
+          <SoundCard key={sound.name} {...sound} />
+        ))}
+      </div>
+    </div>
+  );
+}

package/components/theme-provider.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import * as React from 'react'
+import {
+  ThemeProvider as NextThemesProvider,
+  type ThemeProviderProps,
+} from 'next-themes'
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

package/components/theme-toggle.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { useTheme } from 'next-themes';
+import { useEffect, useState, useRef, useCallback } from 'react';
+import { Button } from '@/components/ui/button';
+import { playSound } from '@/lib/sounds';
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => setMounted(true), []);
+
+  const handleToggle = useCallback(() => {
+    const nextTheme = theme === 'dark' ? 'light' : 'dark';
+
+    const btn = buttonRef.current;
+    if (btn && document.startViewTransition) {
+      const rect = btn.getBoundingClientRect();
+      const x = rect.left + rect.width / 2;
+      const y = rect.top + rect.height / 2;
+
+      // Set CSS custom properties for the circle origin
+      document.documentElement.style.setProperty('--reveal-x', `${x}px`);
+      document.documentElement.style.setProperty('--reveal-y', `${y}px`);
+
+      // Use View Transition API — captures old state as screenshot,
+      // switches theme instantly, then animates the old screenshot away
+      const transition = document.startViewTransition(() => {
+        setTheme(nextTheme);
+      });
+
+      transition.ready.then(() => {
+        document.documentElement.animate(
+          {
+            clipPath: [
+              `circle(0% at ${x}px ${y}px)`,
+              `circle(150% at ${x}px ${y}px)`,
+            ],
+          },
+          {
+            duration: 700,
+            easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+            pseudoElement: '::view-transition-new(root)',
+          }
+        );
+      });
+    } else {
+      setTheme(nextTheme);
+    }
+
+    playSound('swoosh');
+  }, [theme, setTheme]);
+
+  if (!mounted) return <div className="h-9 w-9" />;
+
+  return (
+    <Button
+      ref={buttonRef}
+      variant="outline"
+      size="sm"
+      onClick={handleToggle}
+      className="h-9 w-9 rounded-full p-0"
+      aria-label="Toggle theme"
+    >
+      {theme === 'dark' ? (
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="12" cy="12" r="4" />
+          <path d="M12 2v2" /><path d="M12 20v2" />
+          <path d="m4.93 4.93 1.41 1.41" /><path d="m17.66 17.66 1.41 1.41" />
+          <path d="M2 12h2" /><path d="M20 12h2" />
+          <path d="m6.34 17.66-1.41 1.41" /><path d="m19.07 4.93-1.41 1.41" />
+        </svg>
+      ) : (
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+        </svg>
+      )}
+    </Button>
+  );
+}

package/components/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export interface ButtonProps
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button'
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }

package/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import * as React from 'react'
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { Check } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn('flex items-center justify-center text-current')}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

package/components/ui/slider.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import * as React from 'react'
+import * as SliderPrimitive from '@radix-ui/react-slider'
+
+import { cn } from '@/lib/utils'
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      'relative flex w-full touch-none select-none items-center',
+      className,
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+Slider.displayName = SliderPrimitive.Root.displayName
+
+export { Slider }

package/components/ui/switch.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import * as React from 'react'
+import * as SwitchPrimitives from '@radix-ui/react-switch'
+
+import { cn } from '@/lib/utils'
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

package/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+
+import { cn } from '@/lib/utils'
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className,
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/components/usage-guide.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import { useState } from 'react';
+
+function CopyIcon({ className }: { className?: string }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
+      <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+    </svg>
+  );
+}
+
+function CheckIcon({ className }: { className?: string }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+}
+
+const availableSounds = [
+  { name: 'button-click', use: 'Primary button presses', source: 'click1.mp3' },
+  { name: 'button-click-secondary', use: 'Secondary / ghost buttons', source: 'click2.mp3' },
+  { name: 'hover-blip', use: 'Hovering over interactive elements', source: 'Web Audio API' },
+  { name: 'hover-soft', use: 'Subtle hover feedback', source: 'Web Audio API' },
+  { name: 'success-chime', use: 'Form submissions, saves', source: 'Web Audio API' },
+  { name: 'success-bell', use: 'Achievements, milestones', source: 'Web Audio API' },
+  { name: 'error-buzz', use: 'Validation errors, failed actions', source: 'Web Audio API' },
+  { name: 'error-beep', use: 'Warnings, blocked actions', source: 'Web Audio API' },
+  { name: 'notification-ping', use: 'New messages, alerts', source: 'Web Audio API' },
+  { name: 'notification-subtle', use: 'Background updates', source: 'Web Audio API' },
+  { name: 'swoosh', use: 'Page transitions, panel slides', source: 'Web Audio API' },
+  { name: 'pop', use: 'Tooltips, popovers, reveals', source: 'Web Audio API' },
+  { name: 'slider-tick', use: 'Sliders, range inputs', source: 'Web Audio API' },
+  { name: 'key-press', use: 'Text inputs, keyboards', source: 'Web Audio API' },
+];
+
+export function UsageGuide() {
+  const [copiedQuick, setCopiedQuick] = useState(false);
+
+  const quickStartCode = `const ctx = new AudioContext();
+const osc = ctx.createOscillator();
+const gain = ctx.createGain();
+osc.type = 'sine';
+osc.frequency.setValueAtTime(800, ctx.currentTime);
+gain.gain.setValueAtTime(0.25, ctx.currentTime);
+gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.15);
+osc.connect(gain).connect(ctx.destination);
+osc.start();
+osc.stop(ctx.currentTime + 0.15);`;
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-2 border-b border-border pb-6">
+        <h2 className="text-2xl font-bold tracking-tight sm:text-3xl">
+          How to Use
+        </h2>
+        <p className="text-sm text-muted-foreground">
+          Every Web Audio sound has a <strong>copy</strong> button — it copies standalone code you can paste anywhere, no imports needed. MP3 sounds have a <strong>download</strong> button instead — drop the file in your project and play it with <code className="rounded bg-muted px-1.5 py-0.5 text-xs font-mono">new Audio()</code>.
+        </p>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        {/* Web Audio example */}
+        <div className="rounded-lg border border-border bg-card p-5">
+          <div className="flex items-center justify-between mb-3">
+            <h3 className="text-sm font-semibold text-card-foreground">Web Audio sounds</h3>
+            <button
+              onClick={() => {
+                navigator.clipboard.writeText(quickStartCode).then(() => {
+                  setCopiedQuick(true);
+                  setTimeout(() => setCopiedQuick(false), 2000);
+                });
+              }}
+              aria-label={copiedQuick ? 'Copied' : 'Copy code'}
+              className="rounded-md border border-border bg-muted p-1.5 text-muted-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {copiedQuick ? <CheckIcon /> : <CopyIcon />}
+            </button>
+          </div>
+          <pre className="overflow-x-auto rounded-md bg-muted p-4 text-xs leading-relaxed font-mono text-muted-foreground">
+            <code>{quickStartCode}</code>
+          </pre>
+          <p className="mt-3 text-[11px] text-muted-foreground">
+            Zero dependencies. Works in any framework. Hit the copy button on any card above to get its snippet.
+          </p>
+        </div>
+
+        {/* MP3 example */}
+        <div className="rounded-lg border border-border bg-card p-5">
+          <div className="flex items-center justify-between mb-3">
+            <h3 className="text-sm font-semibold text-card-foreground">MP3 sounds</h3>
+          </div>
+          <pre className="overflow-x-auto rounded-md bg-muted p-4 text-xs leading-relaxed font-mono text-muted-foreground">
+            <code>{`// 1. Download the mp3 from the card above
+// 2. Put it in your public/ folder
+// 3. Play it:
+
+const audio = new Audio('/click1.mp3');
+audio.volume = 0.5;
+audio.play();`}</code>
+          </pre>
+          <p className="mt-3 text-[11px] text-muted-foreground">
+            Hit the download button on the first two cards to save the mp3 files.
+          </p>
+        </div>
+      </div>
+
+      {/* Sound reference table */}
+      <div className="flex flex-col gap-3">
+        <h3 className="text-sm font-semibold">All Sounds</h3>
+        <div className="overflow-x-auto rounded-lg border border-border">
+          <table className="w-full text-sm" style={{ fontVariantNumeric: 'tabular-nums' }}>
+            <thead>
+              <tr className="border-b border-border bg-muted">
+                <th className="px-4 py-2.5 text-left text-xs font-medium text-muted-foreground">
+                  Name
+                </th>
+                <th className="px-4 py-2.5 text-left text-xs font-medium text-muted-foreground">
+                  Use
+                </th>
+                <th className="px-4 py-2.5 text-left text-xs font-medium text-muted-foreground">
+                  Source
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {availableSounds.map((sound) => (
+                <tr
+                  key={sound.name}
+                  className="border-b border-border last:border-0 transition-colors hover:bg-muted/50"
+                >
+                  <td className="px-4 py-2.5">
+                    <code className="rounded bg-muted px-1.5 py-0.5 text-[11px] font-mono text-card-foreground">
+                      {sound.name}
+                    </code>
+                  </td>
+                  <td className="px-4 py-2.5 text-xs text-muted-foreground">
+                    {sound.use}
+                  </td>
+                  <td className="px-4 py-2.5">
+                    <span className={`text-[10px] font-mono ${sound.source.endsWith('.mp3') ? 'text-amber-500' : 'text-emerald-500'}`}>
+                      {sound.source}
+                    </span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}

package/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}