@neynar/ui 0.1.1

package/dist/components/ui/toggle.d.ts

@@ -0,0 +1,84 @@
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { type VariantProps } from "class-variance-authority";
+declare const toggleVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * A two-state button that can be either on or off
+ *
+ * The Toggle component provides an accessible button with on/off state functionality.
+ * Built on Radix UI Toggle primitives with customizable variants and sizes.
+ * Ideal for text formatting controls, settings toggles, and any binary state controls.
+ *
+ * @example Basic usage with icon
+ * ```tsx
+ * import { Bold } from "lucide-react"
+ *
+ * <Toggle aria-label="Toggle bold">
+ *   <Bold className="h-4 w-4" />
+ * </Toggle>
+ * ```
+ *
+ * @example Controlled toggle with state management
+ * ```tsx
+ * const [isBold, setIsBold] = useState(false)
+ *
+ * <Toggle
+ *   pressed={isBold}
+ *   onPressedChange={setIsBold}
+ *   aria-label="Toggle bold formatting"
+ * >
+ *   <Bold className="h-4 w-4" />
+ * </Toggle>
+ * ```
+ *
+ * @example With text and outline variant
+ * ```tsx
+ * <Toggle variant="outline" size="lg">
+ *   <Italic className="h-4 w-4" />
+ *   Italic
+ * </Toggle>
+ * ```
+ *
+ * @example Text formatting toolbar
+ * ```tsx
+ * <div className="flex gap-1">
+ *   <Toggle pressed={bold} onPressedChange={setBold}>
+ *     <Bold className="h-4 w-4" />
+ *   </Toggle>
+ *   <Toggle pressed={italic} onPressedChange={setItalic}>
+ *     <Italic className="h-4 w-4" />
+ *   </Toggle>
+ * </div>
+ * ```
+ *
+ * @accessibility
+ * - Supports keyboard navigation (Space/Enter to toggle)
+ * - Automatically manages aria-pressed attribute
+ * - Requires aria-label for icon-only toggles
+ * - Focus management with visible focus indicators
+ * - Disabled state properly communicated to assistive technology
+ *
+ * @see {@link https://ui.shadcn.com/docs/components/toggle} shadcn/ui Toggle documentation
+ * @since 1.0.0
+ * @see {@link ToggleGroup} For mutually exclusive toggle groups
+ */
+/**
+ * Toggle component props
+ *
+ * @param className - Additional CSS classes to apply
+ * @param variant - Visual style variant ("default" | "outline")
+ * @param size - Size variant ("sm" | "default" | "lg")
+ * @param pressed - Controlled pressed state
+ * @param defaultPressed - Default pressed state for uncontrolled usage
+ * @param onPressedChange - Callback fired when pressed state changes
+ * @param disabled - Whether the toggle is disabled
+ * @param children - Toggle content (typically icons or text)
+ * @param ...props - Additional props passed to Radix Toggle primitive
+ */
+type ToggleProps = React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>;
+declare function Toggle({ className, variant, size, ...props }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+export { Toggle, toggleVariants };
+//# sourceMappingURL=toggle.d.ts.map

package/dist/components/ui/toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../src/components/ui/toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,cAAc;;;8EAoBnB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH;;;;;;;;;;;;GAYG;AACH,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAClE,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAEtC,iBAAS,MAAM,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAQlE;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/ui/tooltip.d.ts

@@ -0,0 +1,202 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+/**
+ * TooltipProvider - Global context provider for tooltip functionality
+ *
+ * Wraps your application or component tree to enable tooltip functionality.
+ * Controls global tooltip behavior such as delay duration before showing tooltips.
+ * Required for tooltip components to function properly.
+ *
+ * @param delayDuration - Time in milliseconds to wait before showing tooltip (default: 0)
+ *
+ * @example
+ * ```tsx
+ * // Wrap your entire app
+ * <TooltipProvider>
+ *   <App />
+ * </TooltipProvider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom delay
+ * <TooltipProvider delayDuration={700}>
+ *   <MyComponent />
+ * </TooltipProvider>
+ * ```
+ *
+ * @see {@link https://ui.shadcn.com/docs/components/tooltip} for design patterns
+ * @since 1.0.0
+ */
+declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Tooltip - Display contextual information on hover or focus
+ *
+ * A versatile tooltip component built on Radix UI primitives that provides
+ * contextual information when users hover over or focus on an element. Perfect
+ * for displaying help text, definitions, or additional context without cluttering
+ * the interface. Automatically wraps content in a TooltipProvider for convenience.
+ *
+ * @example
+ * ```tsx
+ * // Basic tooltip
+ * <Tooltip>
+ *   <TooltipTrigger asChild>
+ *     <Button variant="outline">Hover me</Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent>
+ *     <p>This is a helpful tooltip</p>
+ *   </TooltipContent>
+ * </Tooltip>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Icon button with tooltip
+ * import { Info } from "lucide-react"
+ *
+ * <Tooltip>
+ *   <TooltipTrigger asChild>
+ *     <Button variant="ghost" size="icon">
+ *       <Info className="h-4 w-4" />
+ *     </Button>
+ *   </TooltipTrigger>
+ *   <TooltipContent>
+ *     <p>Additional information</p>
+ *   </TooltipContent>
+ * </Tooltip>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Disabled element with tooltip
+ * <Tooltip>
+ *   <TooltipTrigger asChild>
+ *     <span>
+ *       <Button disabled>Disabled Action</Button>
+ *     </span>
+ *   </TooltipTrigger>
+ *   <TooltipContent>
+ *     <p>You need to complete setup first</p>
+ *   </TooltipContent>
+ * </Tooltip>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Positioned tooltip with rich content
+ * <Tooltip>
+ *   <TooltipTrigger asChild>
+ *     <Badge variant="secondary">API Key</Badge>
+ *   </TooltipTrigger>
+ *   <TooltipContent side="right" className="max-w-[250px]">
+ *     <div className="space-y-1">
+ *       <p className="font-medium">API Authentication</p>
+ *       <p className="text-xs">Your key is used to authenticate requests</p>
+ *     </div>
+ *   </TooltipContent>
+ * </Tooltip>
+ * ```
+ *
+ * @accessibility
+ * - Fully keyboard accessible (shows on focus, hides on blur)
+ * - Screen reader compatible with proper ARIA attributes
+ * - Escape key dismisses tooltip
+ * - Automatic positioning with collision detection
+ * - Respects user's reduced motion preferences
+ * - Portal rendering prevents z-index issues
+ *
+ * @see {@link https://ui.shadcn.com/docs/components/tooltip} for design patterns
+ * @see {@link Popover} - For interactive floating content
+ * @see {@link HoverCard} - For rich content previews
+ * @since 1.0.0
+ */
+declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+/**
+ * TooltipTrigger - The element that triggers the tooltip display
+ *
+ * Wraps the element that will show the tooltip on hover or focus.
+ * Use the `asChild` prop to merge props with the child element rather
+ * than rendering an additional wrapper element.
+ *
+ * @param asChild - When true, merges props with the child element instead of rendering a wrapper
+ *
+ * @example
+ * ```tsx
+ * // Basic trigger
+ * <TooltipTrigger asChild>
+ *   <Button>Hover me</Button>
+ * </TooltipTrigger>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With disabled element (requires wrapper)
+ * <TooltipTrigger asChild>
+ *   <span>
+ *     <Button disabled>Disabled</Button>
+ *   </span>
+ * </TooltipTrigger>
+ * ```
+ *
+ * @accessibility
+ * - Automatically handles hover, focus, and blur events
+ * - Preserves existing keyboard navigation patterns
+ * - Maintains semantic meaning of wrapped element
+ * - Works with disabled elements when properly wrapped
+ *
+ * @since 1.0.0
+ */
+declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+/**
+ * TooltipContent - The floating tooltip content container
+ *
+ * Contains the content displayed in the tooltip popup. Automatically positioned
+ * relative to the trigger element with intelligent collision detection to ensure
+ * the tooltip stays within the viewport. Includes smooth animations and an arrow
+ * pointer for visual connection to the trigger.
+ *
+ * @param side - Preferred side of the trigger to display on ("top" | "right" | "bottom" | "left")
+ * @param sideOffset - Distance in pixels from the trigger element (default: 0)
+ * @param className - Additional CSS classes for custom styling
+ * @param children - Content to display in the tooltip
+ *
+ * @example
+ * ```tsx
+ * // Simple text tooltip
+ * <TooltipContent>
+ *   <p>This is helpful information</p>
+ * </TooltipContent>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Positioned tooltip with offset
+ * <TooltipContent side="left" sideOffset={10}>
+ *   <p>Appears on the left with spacing</p>
+ * </TooltipContent>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Rich content with custom width
+ * <TooltipContent className="max-w-[300px]">
+ *   <div className="space-y-1">
+ *     <p className="font-medium">Feature Name</p>
+ *     <p className="text-xs">Detailed description here</p>
+ *   </div>
+ * </TooltipContent>
+ * ```
+ *
+ * @accessibility
+ * - Rendered in a portal to avoid z-index stacking issues
+ * - Properly announced by screen readers with role="tooltip"
+ * - Smooth animations respect reduced motion preferences
+ * - Arrow provides visual connection to trigger element
+ * - Automatically dismisses when trigger loses focus
+ *
+ * @since 1.0.0
+ */
+declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/components/ui/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/ui/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAI5D;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,iBAAS,eAAe,CAAC,EACvB,aAAiB,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,2CAQxD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiFG;AACH,iBAAS,OAAO,CAAC,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAMpD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,iBAAS,cAAc,CAAC,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,2CAEvD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,UAAc,EACd,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,2CAiBvD;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/ui/typography.d.ts

@@ -0,0 +1,287 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+/**
+ * Typography variant configuration using class-variance-authority
+ *
+ * Defines all possible typography variants, sizes, and styling options.
+ * Uses Tailwind CSS 4 with custom CSS properties for theming.
+ *
+ * @see {@link https://cva.style/docs} - CVA documentation
+ * @see {@link https://ui.shadcn.com/docs/components/typography} - Typography component inspiration
+ * @since 1.0.0
+ */
+declare const typographyVariants: (props?: ({
+    variant?: "body" | "code" | "details" | "heading" | "subheading" | "bodyEmphasized" | "field" | "microcopy" | "tableCell" | "tableHeader" | null | undefined;
+    color?: "accent" | "default" | "destructive" | "muted" | "success" | "warning" | null | undefined;
+    align?: "left" | "right" | "center" | "justify" | null | undefined;
+    transform?: "capitalize" | "lowercase" | "uppercase" | null | undefined;
+    weight?: "bold" | "normal" | "medium" | "semibold" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Props interface for the Typography component
+ */
+export interface TypographyProps extends Omit<React.HTMLAttributes<HTMLElement>, "color">, VariantProps<typeof typographyVariants> {
+    /**
+     * The HTML element or component to render as
+     * @default "p"
+     */
+    as?: React.ElementType;
+    /**
+     * For label elements, the associated input ID
+     */
+    htmlFor?: string;
+    /**
+     * Whether to render as a Slot component for composition
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Whether the text should be italic
+     * @default false
+     */
+    italic?: boolean;
+    /**
+     * Whether the text should be underlined
+     * @default false
+     */
+    underline?: boolean;
+    /**
+     * Whether the text should be struck through
+     * @default false
+     */
+    strikethrough?: boolean;
+    /**
+     * Whether the text should have a truncated overflow with ellipsis
+     * @default false
+     */
+    truncate?: boolean;
+    /**
+     * Screen reader only text (visually hidden but accessible)
+     * @default false
+     */
+    srOnly?: boolean;
+}
+/**
+ * Typography component for consistent text styling across the application
+ *
+ * Provides a comprehensive set of typography variants based on design system
+ * specifications. Supports semantic HTML elements, accessibility features,
+ * and flexible styling options.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic heading
+ * <Typography variant="heading" as="h1">
+ *   Welcome to Neynar
+ * </Typography>
+ *
+ * // Body text with color
+ * <Typography variant="body" color="muted">
+ *   This is some body text with muted color.
+ * </Typography>
+ *
+ * // Code snippet
+ * <Typography variant="code" as="code">
+ *   const message = "Hello, world!";
+ * </Typography>
+ *
+ * // Table header
+ * <Typography variant="tableHeader" as="th">
+ *   Column Header
+ * </Typography>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With additional styling
+ * <Typography
+ *   variant="subheading"
+ *   color="accent"
+ *   align="center"
+ *   italic
+ *   underline
+ * >
+ *   Styled Subheading
+ * </Typography>
+ *
+ * // Truncated text
+ * <Typography variant="body" truncate className="max-w-xs">
+ *   This is a very long text that will be truncated with ellipsis
+ * </Typography>
+ *
+ * // Screen reader only
+ * <Typography variant="details" srOnly>
+ *   Additional context for screen readers
+ * </Typography>
+ * ```
+ *
+ * @param props - Typography component props
+ * @param props.variant - Typography variant for semantic styling
+ * @param props.color - Color variant for different semantic meanings
+ * @param props.align - Text alignment
+ * @param props.transform - Text transformation
+ * @param props.weight - Font weight override
+ * @param props.as - HTML element to render as
+ * @param props.asChild - Render as Slot for composition
+ * @param props.italic - Apply italic styling
+ * @param props.underline - Apply underline styling
+ * @param props.strikethrough - Apply strikethrough styling
+ * @param props.truncate - Apply text truncation with ellipsis
+ * @param props.srOnly - Hide visually but keep accessible
+ * @param props.className - Additional CSS classes
+ * @param props.children - Content to render
+ *
+ * @accessibility
+ * - Uses semantic HTML elements when specified via `as` prop
+ * - Supports screen reader only content with `srOnly` prop
+ * - Maintains proper color contrast ratios across all color variants
+ * - Respects user preferences for reduced motion and high contrast
+ *
+ * @since 1.0.0
+ */
+export declare function Typography({ className, variant, color, align, transform, weight, as: Element, asChild, italic, underline, strikethrough, truncate, srOnly, ...props }: TypographyProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Individual semantic typography components with pre-configured defaults
+ */
+/**
+ * H1 heading component
+ *
+ * @example
+ * ```tsx
+ * <H1>Main Page Title</H1>
+ * <H1 color="muted">Subtle heading</H1>
+ * ```
+ */
+export declare function H1(props: Omit<TypographyProps, "as" | "variant">): import("react/jsx-runtime").JSX.Element;
+/**
+ * H2 heading component
+ *
+ * @example
+ * ```tsx
+ * <H2>Section Title</H2>
+ * <H2 color="accent">Highlighted section</H2>
+ * ```
+ */
+export declare function H2(props: Omit<TypographyProps, "as" | "variant">): import("react/jsx-runtime").JSX.Element;
+/**
+ * H3 heading component
+ *
+ * @example
+ * ```tsx
+ * <H3>Subsection Title</H3>
+ * ```
+ */
+export declare function H3(props: Omit<TypographyProps, "as" | "variant">): import("react/jsx-runtime").JSX.Element;
+/**
+ * H4 heading component
+ *
+ * @example
+ * ```tsx
+ * <H4>Minor Heading</H4>
+ * ```
+ */
+export declare function H4(props: Omit<TypographyProps, "as" | "variant">): import("react/jsx-runtime").JSX.Element;
+/**
+ * H5 heading component
+ *
+ * @example
+ * ```tsx
+ * <H5>Small Heading</H5>
+ * ```
+ */
+export declare function H5(props: Omit<TypographyProps, "as" | "variant">): import("react/jsx-runtime").JSX.Element;
+/**
+ * H6 heading component
+ *
+ * @example
+ * ```tsx
+ * <H6>Smallest Heading</H6>
+ * ```
+ */
+export declare function H6(props: Omit<TypographyProps, "as" | "variant">): import("react/jsx-runtime").JSX.Element;
+/**
+ * Paragraph component for body text
+ *
+ * @example
+ * ```tsx
+ * <P>Standard paragraph text content.</P>
+ * <P color="muted">Secondary paragraph text.</P>
+ * <P className="mb-4">Paragraph with custom margin.</P>
+ * ```
+ */
+export declare function P(props: Omit<TypographyProps, "as" | "variant">): import("react/jsx-runtime").JSX.Element;
+/**
+ * Span component for inline text
+ *
+ * @example
+ * ```tsx
+ * <span>Regular text with <Span color="accent">highlighted</Span> content</span>
+ * <Span variant="details">Small inline text</Span>
+ * ```
+ */
+export declare function Span(props: Omit<TypographyProps, "as">): import("react/jsx-runtime").JSX.Element;
+/**
+ * Code component for inline code snippets
+ *
+ * @example
+ * ```tsx
+ * <Code>const hello = "world";</Code>
+ * <Code color="muted">npm install</Code>
+ * ```
+ */
+export declare function Code(props: Omit<TypographyProps, "as" | "variant">): import("react/jsx-runtime").JSX.Element;
+/**
+ * Small component for fine print and microcopy
+ *
+ * @example
+ * ```tsx
+ * <Small>Terms and conditions apply</Small>
+ * <Small color="muted">Updated 2 minutes ago</Small>
+ * ```
+ */
+export declare function Small(props: Omit<TypographyProps, "as" | "variant">): import("react/jsx-runtime").JSX.Element;
+/**
+ * Strong component for emphasized text
+ *
+ * @example
+ * ```tsx
+ * <Strong>Important information</Strong>
+ * <Strong color="destructive">Critical warning</Strong>
+ * ```
+ */
+export declare function Strong(props: Omit<TypographyProps, "as" | "variant">): import("react/jsx-runtime").JSX.Element;
+/**
+ * Lead component for introductory text
+ *
+ * @example
+ * ```tsx
+ * <Lead>This is the introduction to the article...</Lead>
+ * ```
+ */
+export declare function Lead(props: Omit<TypographyProps, "as" | "variant">): import("react/jsx-runtime").JSX.Element;
+/**
+ * Anchor/Link component for interactive text links
+ *
+ * @example
+ * ```tsx
+ * <A href="https://example.com">Visit our website</A>
+ * <A href="/about" color="accent">Learn more</A>
+ * <A asChild><Link href="/about">Learn more</Link></A>
+ * ```
+ */
+export declare function A({ href, asChild, className, ...props }: Omit<TypographyProps, "as" | "variant"> & React.AnchorHTMLAttributes<HTMLAnchorElement>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Blockquote component for quoted text
+ *
+ * @example
+ * ```tsx
+ * <Blockquote>"The best way to predict the future is to invent it."</Blockquote>
+ * ```
+ */
+export declare function Blockquote(props: Omit<TypographyProps, "as" | "variant">): import("react/jsx-runtime").JSX.Element;
+/**
+ * Type export for external use
+ */
+export type { VariantProps as TypographyVariantProps } from "class-variance-authority";
+//# sourceMappingURL=typography.d.ts.map

package/dist/components/ui/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../src/components/ui/typography.tsx"],"names":[],"mappings":"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"}

package/dist/hooks/use-mobile.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Hook for detecting mobile viewport width based on Tailwind CSS breakpoints
+ *
+ * A React hook that monitors viewport width and returns true when the width
+ * is less than 768px (Tailwind's `md` breakpoint). This hook provides a
+ * consistent way to conditionally render mobile and desktop layouts, following
+ * the same responsive patterns used throughout the shadcn/ui ecosystem.
+ *
+ * The hook uses `window.matchMedia` for efficient viewport monitoring and
+ * properly handles server-side rendering by returning `false` initially,
+ * then updating on the client side.
+ *
+ * @returns `true` if viewport width is less than 768px, `false` otherwise
+ *
+ * @example
+ * Basic responsive layout switching
+ * ```tsx
+ * function ResponsiveComponent() {
+ *   const isMobile = useIsMobile();
+ *
+ *   return (
+ *     <div>
+ *       {isMobile ? (
+ *         <MobileLayout />
+ *       ) : (
+ *         <DesktopLayout />
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * Conditional navigation rendering
+ * ```tsx
+ * function Navigation() {
+ *   const isMobile = useIsMobile();
+ *
+ *   if (isMobile) {
+ *     return <Sheet><MobileNavContent /></Sheet>;
+ *   }
+ *
+ *   return <NavigationMenu><DesktopNavContent /></NavigationMenu>;
+ * }
+ * ```
+ *
+ * @example
+ * Responsive component behavior within forms
+ * ```tsx
+ * function SearchDialog() {
+ *   const isMobile = useIsMobile();
+ *
+ *   if (isMobile) {
+ *     return <Drawer><SearchForm /></Drawer>;
+ *   }
+ *
+ *   return <Dialog><SearchForm /></Dialog>;
+ * }
+ * ```
+ *
+ * @remarks
+ * - Uses the standard 768px breakpoint matching Tailwind's `md` breakpoint
+ * - Similar pattern to `isMobile` property in shadcn/ui's `useSidebar` hook
+ * - Handles viewport resize events automatically
+ * - SSR-safe implementation prevents hydration mismatches
+ * - Respects user's browser zoom settings
+ *
+ * @see {@link https://tailwindcss.com/docs/responsive-design} Tailwind CSS responsive design
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia} MDN matchMedia documentation
+ *
+ * @since 1.0.0
+ */
+export declare function useIsMobile(): boolean;
+//# sourceMappingURL=use-mobile.d.ts.map

package/dist/hooks/use-mobile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mobile.d.ts","sourceRoot":"","sources":["../../src/hooks/use-mobile.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AACH,wBAAgB,WAAW,YAc1B"}