@snowcone-app/ui 0.1.43 → 0.2.1

package/src/primitives/stories/TextField.stories.tsx

@@ -0,0 +1,139 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TextField } from '../text-field';
+import { Input } from '../input';
+import { Label } from '../label';
+import { Textarea } from '../textarea';
+import { Card, CardContent, CardHeader, CardTitle } from '../card';
+
+const meta: Meta<typeof TextField> = {
+  title: 'UI/TextField',
+  component: TextField,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    isInvalid: {
+      control: 'boolean',
+      description: 'Error state - applies error styling to children inputs',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disabled state - disables all children inputs',
+    },
+    required: {
+      control: 'boolean',
+      description: 'Required state - marks all children inputs as required',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <TextField className="w-[300px]">
+      <Label>Email</Label>
+      <Input type="email" placeholder="Enter your email" />
+    </TextField>
+  ),
+};
+
+export const WithTextarea: Story = {
+  render: () => (
+    <TextField className="w-[300px]">
+      <Label>Description</Label>
+      <Textarea placeholder="Enter description..." />
+    </TextField>
+  ),
+};
+
+export const Required: Story = {
+  render: () => (
+    <TextField className="w-[300px]" required>
+      <Label>
+        Email <span className="text-danger">*</span>
+      </Label>
+      <Input type="email" placeholder="Required field" />
+    </TextField>
+  ),
+};
+
+export const Invalid: Story = {
+  render: () => (
+    <TextField className="w-[300px]" isInvalid>
+      <Label>Email</Label>
+      <Input type="email" placeholder="Invalid email" />
+      <p className="text-sm text-danger">Please enter a valid email address.</p>
+    </TextField>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <TextField className="w-[300px]" disabled>
+      <Label>Email</Label>
+      <Input type="email" placeholder="Disabled input" />
+    </TextField>
+  ),
+};
+
+export const FormExample: Story = {
+  render: () => (
+    <form className="w-full max-w-sm space-y-4">
+      <TextField>
+        <Label>Full Name</Label>
+        <Input placeholder="John Doe" />
+      </TextField>
+      <TextField>
+        <Label>Email</Label>
+        <Input type="email" placeholder="john@example.com" />
+      </TextField>
+      <TextField>
+        <Label>Bio</Label>
+        <Textarea placeholder="Tell us about yourself..." />
+      </TextField>
+    </form>
+  ),
+};
+
+export const OnCard: Story = {
+  render: () => (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Contact Form</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <TextField>
+          <Label>Name</Label>
+          <Input placeholder="Your name" />
+        </TextField>
+        <TextField>
+          <Label>Message</Label>
+          <Textarea placeholder="Your message..." />
+        </TextField>
+      </CardContent>
+    </Card>
+  ),
+};
+
+export const StateExamples: Story = {
+  name: 'State Examples',
+  render: () => (
+    <div className="space-y-4 w-[300px]">
+      <p className="text-sm text-foreground/60 mb-4">
+        TextField is a wrapper component that groups Label and Input together
+        and passes state props to child inputs.
+      </p>
+      <TextField disabled>
+        <Label>Disabled via TextField</Label>
+        <Input placeholder="This input is disabled" />
+      </TextField>
+      <TextField isInvalid>
+        <Label>Invalid via TextField</Label>
+        <Input placeholder="This input shows error state" />
+      </TextField>
+    </div>
+  ),
+};

package/src/primitives/stories/Textarea.stories.tsx

@@ -0,0 +1,148 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Textarea } from '../textarea';
+import { Label } from '../label';
+import { Input } from '../input';
+import { Card, CardContent, CardHeader, CardTitle } from '../card';
+
+const meta: Meta<typeof Textarea> = {
+  title: 'UI/Textarea',
+  component: Textarea,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      description: 'Disables the textarea',
+    },
+    isInvalid: {
+      control: 'boolean',
+      description: 'Shows error state',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Type your message here...',
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[350px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm gap-1.5">
+      <Label htmlFor="message">Your Message</Label>
+      <Textarea id="message" placeholder="Type your message here..." />
+    </div>
+  ),
+};
+
+export const WithText: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm gap-1.5">
+      <Label htmlFor="bio">Bio</Label>
+      <Textarea id="bio" placeholder="Tell us a little bit about yourself" />
+      <p className="text-sm text-muted-foreground">You can @mention other users and organizations.</p>
+    </div>
+  ),
+};
+
+export const Invalid: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm gap-1.5">
+      <Label htmlFor="feedback">Feedback</Label>
+      <Textarea id="feedback" placeholder="Your feedback" isInvalid />
+      <p className="text-sm text-danger">Feedback must be at least 10 characters.</p>
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  args: {
+    placeholder: 'Disabled textarea',
+    disabled: true,
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[350px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const WithRows: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm gap-1.5">
+      <Label htmlFor="long-text">Description</Label>
+      <Textarea id="long-text" placeholder="Write a detailed description..." rows={8} />
+    </div>
+  ),
+};
+
+export const ReadOnly: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm gap-1.5">
+      <Label htmlFor="readonly">Terms of Service</Label>
+      <Textarea
+        id="readonly"
+        readOnly
+        rows={6}
+        defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."
+      />
+    </div>
+  ),
+};
+
+export const FormExample: Story = {
+  render: () => (
+    <form className="w-full max-w-md space-y-4">
+      <h3 className="text-lg font-heading">Contact Form</h3>
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-1.5">
+          <Label htmlFor="firstName">First Name</Label>
+          <Input id="firstName" placeholder="John" />
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="lastName">Last Name</Label>
+          <Input id="lastName" placeholder="Doe" />
+        </div>
+      </div>
+      <div className="space-y-1.5">
+        <Label htmlFor="email">Email</Label>
+        <Input id="email" type="email" placeholder="john@example.com" />
+      </div>
+      <div className="space-y-1.5">
+        <Label htmlFor="message">Message</Label>
+        <Textarea id="message" placeholder="How can we help you?" rows={5} />
+      </div>
+    </form>
+  ),
+};
+
+export const OnCard: Story = {
+  render: () => (
+    <Card className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Feedback</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-1.5">
+          <Label htmlFor="card-feedback">Your Feedback</Label>
+          <Textarea id="card-feedback" placeholder="Tell us what you think..." rows={4} />
+        </div>
+      </CardContent>
+    </Card>
+  ),
+};

package/src/primitives/stories/Tooltip.stories.tsx

@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '../tooltip';
+import { Button } from '../button';
+
+const meta: Meta<typeof Tooltip> = {
+  title: 'UI/Tooltip',
+  component: Tooltip,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <TooltipProvider>
+        <Story />
+      </TooltipProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="secondary">Hover me</Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>This is a tooltip</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+};
+
+export const WithDelay: Story = {
+  render: () => (
+    <Tooltip delayDuration={500}>
+      <TooltipTrigger asChild>
+        <Button variant="secondary">500ms delay</Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>Tooltip with longer delay</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+};
+
+export const Positions: Story = {
+  render: () => (
+    <div className="flex items-center gap-8">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="secondary">Top</Button>
+        </TooltipTrigger>
+        <TooltipContent side="top">
+          <p>Top tooltip</p>
+        </TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="secondary">Right</Button>
+        </TooltipTrigger>
+        <TooltipContent side="right">
+          <p>Right tooltip</p>
+        </TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="secondary">Bottom</Button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          <p>Bottom tooltip</p>
+        </TooltipContent>
+      </Tooltip>
+
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="secondary">Left</Button>
+        </TooltipTrigger>
+        <TooltipContent side="left">
+          <p>Left tooltip</p>
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  ),
+};
+
+export const WithRichContent: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="secondary">Rich Content</Button>
+      </TooltipTrigger>
+      <TooltipContent className="max-w-xs">
+        <div className="space-y-1">
+          <p className="font-label">Keyboard Shortcut</p>
+          <p className="text-muted-foreground">Press Ctrl+S to save your work</p>
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  ),
+};
+
+export const NoDelay: Story = {
+  render: () => (
+    <Tooltip delayDuration={0}>
+      <TooltipTrigger asChild>
+        <Button variant="ghost">Instant</Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>No delay tooltip</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+};

package/src/primitives/surface.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+'use client';
+
+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';
+
+/**
+ * Surface Context
+ *
+ * Provides information about the current surface variant to child components.
+ * This allows form components (Input, TextArea, etc.) to automatically adapt
+ * their styling based on their container's surface variant.
+ *
+ * Default is 'transparent' so that form fields on the page background
+ * (not inside a Surface/Card) use the white/shadow style.
+ */
+const SurfaceContext = React.createContext<{
+  variant: 'transparent' | 'default' | 'secondary';
+}>({ variant: 'transparent' });
+
+/**
+ * Hook to access the current surface context
+ */
+export function useSurface() {
+  return React.useContext(SurfaceContext);
+}
+
+const surfaceVariants = cva('', {
+  variants: {
+    variant: {
+      transparent: 'bg-transparent',
+      default: 'bg-card',
+      secondary: 'bg-default',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+export interface SurfaceProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof surfaceVariants> {
+  /**
+   * Change the default rendered element for the one passed as a child,
+   * merging their props and behavior.
+   */
+  asChild?: boolean;
+}
+
+/**
+ * Surface Component
+ *
+ * A semantic container that provides surface-level styling and context for child components.
+ *
+ * ## Variants:
+ * - `transparent` - No background
+ * - `default` - Card/panel surface (bg-card)
+ * - `secondary` - Raised/muted surface (bg-default)
+ *
+ * Form fields automatically adapt their styling based on which surface they're on.
+ *
+ * @example
+ * ```tsx
+ * <Surface variant="default">
+ *   <Input placeholder="On a card surface" />
+ * </Surface>
+ * ```
+ */
+const Surface = React.forwardRef<HTMLDivElement, SurfaceProps>(
+  ({ className, variant = 'default', asChild = false, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'div';
+
+    return (
+      <SurfaceContext.Provider value={{ variant: variant ?? 'default' }}>
+        <Comp ref={ref} className={cn(surfaceVariants({ variant }), className)} {...props}>
+          {children}
+        </Comp>
+      </SurfaceContext.Provider>
+    );
+  }
+);
+Surface.displayName = 'Surface';
+
+export { Surface, surfaceVariants, SurfaceContext };

package/src/primitives/switch.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { cn } from '../lib/utils';
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
+>(({ className, ...props }, ref) => {
+    return (
+      <SwitchPrimitive.Root
+        className={cn(
+          'peer inline-flex h-7 w-12 md:h-5 md:w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus 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-muted',
+          className
+        )}
+        {...props}
+        ref={ref}
+      >
+        <SwitchPrimitive.Thumb
+          className={cn(
+            'pointer-events-none block h-6 w-6 md:h-4 md:w-4 rounded-full bg-background shadow-lg ring-0 transition-transform',
+            'data-[state=checked]:translate-x-5 md:data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
+          )}
+        />
+      </SwitchPrimitive.Root>
+    );
+  }
+);
+Switch.displayName = SwitchPrimitive.Root.displayName;
+
+export { Switch };