@campxdev/react-native-blueprint 0.1.13 → 0.1.15

package/src/components/ui/Toggle-Group.tsx

@@ -1,160 +0,0 @@
-import { Icon } from './Icon';
-import { TextClassContext } from './Text';
-import { toggleVariants } from './Toggle';
-import { cn } from '../../lib/utils';
-import * as ToggleGroupPrimitive from '@rn-primitives/toggle-group';
-import type { VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-import { Platform } from 'react-native';
-
-/**
- * Context for sharing variant and size props across toggle group items
- */
-const ToggleGroupContext = React.createContext<VariantProps<
-  typeof toggleVariants
-> | null>(null);
-
-/**
- * Toggle group component for grouping related toggle buttons
- *
- * Allows single or multiple selection among a set of toggle buttons.
- * Supports both outline and default variants.
- *
- * @component
- * @example
- * ```tsx
- * <ToggleGroup type="single" value={alignment} onValueChange={setAlignment}>
- *   <ToggleGroupItem value="left" isFirst>
- *     <ToggleGroupIcon as={AlignLeft} />
- *   </ToggleGroupItem>
- *   <ToggleGroupItem value="center">
- *     <ToggleGroupIcon as={AlignCenter} />
- *   </ToggleGroupItem>
- *   <ToggleGroupItem value="right" isLast>
- *     <ToggleGroupIcon as={AlignRight} />
- *   </ToggleGroupItem>
- * </ToggleGroup>
- * ```
- *
- * @accessibility
- * - Uses proper ARIA attributes for grouped toggles
- * - Keyboard navigation support
- */
-function ToggleGroup({
-  className,
-  variant,
-  size,
-  children,
-  ...props
-}: ToggleGroupPrimitive.RootProps &
-  VariantProps<typeof toggleVariants> &
-  React.RefAttributes<ToggleGroupPrimitive.RootRef>) {
-  return (
-    <ToggleGroupPrimitive.Root
-      className={cn(
-        'flex flex-row items-center rounded-md shadow-none',
-        Platform.select({ web: 'w-fit' }),
-        variant === 'outline' && 'shadow-sm shadow-black/5',
-        className
-      )}
-      {...props}
-    >
-      <ToggleGroupContext.Provider value={{ variant, size }}>
-        {children}
-      </ToggleGroupContext.Provider>
-    </ToggleGroupPrimitive.Root>
-  );
-}
-
-/**
- * Hook to access toggle group context
- *
- * @throws Error if used outside of ToggleGroup component
- */
-function useToggleGroupContext() {
-  const context = React.useContext(ToggleGroupContext);
-  if (context === null) {
-    throw new Error(
-      'ToggleGroup compound components cannot be rendered outside the ToggleGroup component'
-    );
-  }
-  return context;
-}
-
-/**
- * Individual toggle item within a toggle group
- *
- * @component
- */
-function ToggleGroupItem({
-  className,
-  children,
-  variant,
-  size,
-  isFirst,
-  isLast,
-  ...props
-}: ToggleGroupPrimitive.ItemProps &
-  VariantProps<typeof toggleVariants> &
-  React.RefAttributes<ToggleGroupPrimitive.ItemRef> & {
-    isFirst?: boolean;
-    isLast?: boolean;
-  }) {
-  const context = useToggleGroupContext();
-  const { value } = ToggleGroupPrimitive.useRootContext();
-
-  return (
-    <TextClassContext.Provider
-      value={cn(
-        'text-sm text-foreground font-medium',
-        ToggleGroupPrimitive.utils.getIsSelected(value, props.value)
-          ? 'text-accent-foreground'
-          : Platform.select({ web: 'group-hover:text-muted-foreground' })
-      )}
-    >
-      <ToggleGroupPrimitive.Item
-        className={cn(
-          toggleVariants({
-            variant: context.variant || variant,
-            size: context.size || size,
-          }),
-          props.disabled && 'opacity-50',
-          ToggleGroupPrimitive.utils.getIsSelected(value, props.value) &&
-            'bg-accent',
-          'min-w-0 shrink-0 rounded-none shadow-none',
-          isFirst && 'rounded-l-md',
-          isLast && 'rounded-r-md',
-          (context.variant === 'outline' || variant === 'outline') &&
-            'border-l-0',
-          (context.variant === 'outline' || variant === 'outline') &&
-            isFirst &&
-            'border-l',
-          Platform.select({
-            web: 'flex-1 focus:z-10 focus-visible:z-10',
-          }),
-          className
-        )}
-        {...(props as any)}
-      >
-        {children as any}
-      </ToggleGroupPrimitive.Item>
-    </TextClassContext.Provider>
-  );
-}
-
-/**
- * Icon component for use within toggle group items
- *
- * @component
- */
-function ToggleGroupIcon({
-  className,
-  ...props
-}: React.ComponentProps<typeof Icon>) {
-  const textClass = React.useContext(TextClassContext);
-  return (
-    <Icon className={cn('size-4 shrink-0', textClass, className)} {...props} />
-  );
-}
-
-export { ToggleGroup, ToggleGroupIcon, ToggleGroupItem };

package/src/components/ui/Toggle.tsx

@@ -1,122 +0,0 @@
-import { Icon } from './Icon';
-import { TextClassContext } from './Text';
-import { cn } from '../../lib/utils';
-import * as TogglePrimitive from '@rn-primitives/toggle';
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-import { Platform } from 'react-native';
-
-/**
- * Toggle button style variants using class-variance-authority
- *
- * @variant default - Standard toggle with transparent background
- * @variant outline - Toggle with border and background
- *
- * @size default - Standard size (40px/36px)
- * @size sm - Small size (36px/32px)
- * @size lg - Large size (44px/40px)
- */
-const toggleVariants = cva(
-  cn(
-    'active:bg-muted group flex flex-row items-center justify-center gap-2 rounded-md',
-    Platform.select({
-      web: 'hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex cursor-default whitespace-nowrap outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:pointer-events-none [&_svg]:pointer-events-none',
-    })
-  ),
-  {
-    variants: {
-      variant: {
-        default: 'bg-transparent',
-        outline: cn(
-          'border-input active:bg-accent border bg-transparent shadow-sm shadow-black/5',
-          Platform.select({
-            web: 'hover:bg-accent hover:text-accent-foreground',
-          })
-        ),
-      },
-      size: {
-        default: 'h-10 min-w-10 px-2.5 sm:h-9 sm:min-w-9 sm:px-2',
-        sm: 'h-9 min-w-9 px-2 sm:h-8 sm:min-w-8 sm:px-1.5',
-        lg: 'h-11 min-w-11 px-3 sm:h-10 sm:min-w-10 sm:px-2.5',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
-);
-
-/**
- * Toggle button component for on/off states
- *
- * A two-state button that can be toggled between pressed and unpressed states.
- * Supports multiple variants and sizes.
- *
- * @component
- * @example
- * ```tsx
- * <Toggle pressed={isBold} onPressedChange={setIsBold}>
- *   <ToggleIcon as={Bold} />
- *   <Text>Bold</Text>
- * </Toggle>
- *
- * <Toggle variant="outline" size="sm">
- *   <ToggleIcon as={Italic} />
- * </Toggle>
- * ```
- *
- * @accessibility
- * - Uses proper ARIA pressed state
- * - Disabled state prevents interaction
- * - Focus visible states on web
- */
-function Toggle({
-  className,
-  variant,
-  size,
-  ...props
-}: TogglePrimitive.RootProps &
-  VariantProps<typeof toggleVariants> &
-  React.RefAttributes<TogglePrimitive.RootRef>) {
-  return (
-    <TextClassContext.Provider
-      value={cn(
-        'text-sm text-foreground font-medium',
-        props.pressed
-          ? 'text-accent-foreground'
-          : Platform.select({ web: 'group-hover:text-muted-foreground' }),
-        className
-      )}
-    >
-      <TogglePrimitive.Root
-        className={cn(
-          toggleVariants({ variant, size }),
-          props.disabled && 'opacity-50',
-          props.pressed && 'bg-accent',
-          className
-        )}
-        {...props}
-      />
-    </TextClassContext.Provider>
-  );
-}
-
-/**
- * Icon component for use within Toggle buttons
- *
- * Automatically inherits text styling from the toggle context.
- *
- * @component
- */
-function ToggleIcon({
-  className,
-  ...props
-}: React.ComponentProps<typeof Icon>) {
-  const textClass = React.useContext(TextClassContext);
-  return (
-    <Icon className={cn('size-4 shrink-0', textClass, className)} {...props} />
-  );
-}
-
-export { Toggle, ToggleIcon, toggleVariants };

package/src/components/ui/Tooltip.tsx

@@ -1,117 +0,0 @@
-import { NativeOnlyAnimatedView } from './Native-Only-Animated-View';
-import { TextClassContext } from './Text';
-import { cn } from '../../lib/utils';
-import * as TooltipPrimitive from '@rn-primitives/tooltip';
-import * as React from 'react';
-import { Platform, StyleSheet } from 'react-native';
-import { FadeInDown, FadeInUp, FadeOut } from 'react-native-reanimated';
-import { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';
-
-/**
- * Root tooltip component - provides context for trigger and content
- *
- * @component
- * @example
- * ```tsx
- * <Tooltip>
- *   <TooltipTrigger>
- *     <Button variant="outline">
- *       <Text>Hover me</Text>
- *     </Button>
- *   </TooltipTrigger>
- *   <TooltipContent>
- *     <Text>Helpful tooltip text</Text>
- *   </TooltipContent>
- * </Tooltip>
- * ```
- */
-const Tooltip = TooltipPrimitive.Root;
-
-/**
- * Trigger component that shows tooltip on hover/press
- *
- * @component
- */
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-/**
- * Full window overlay wrapper for iOS, Fragment for other platforms
- */
-const FullWindowOverlay =
-  Platform.OS === 'ios' ? RNFullWindowOverlay : React.Fragment;
-
-/**
- * Tooltip content component
- *
- * Displays helpful text in a small popup when hovering or pressing the trigger.
- * Includes directional animations based on positioning.
- *
- * @component
- * @example
- * ```tsx
- * <TooltipContent side="top" sideOffset={8}>
- *   <Text>Add to favorites</Text>
- * </TooltipContent>
- * ```
- *
- * @accessibility
- * - Content is announced by screen readers
- * - Proper ARIA attributes for tooltips
- * - Dismissible on escape key (web)
- */
-function TooltipContent({
-  className,
-  sideOffset = 4,
-  portalHost,
-  side = 'top',
-  ...props
-}: TooltipPrimitive.ContentProps &
-  React.RefAttributes<TooltipPrimitive.ContentRef> & {
-    portalHost?: string;
-  }) {
-  return (
-    <TooltipPrimitive.Portal hostName={portalHost}>
-      <FullWindowOverlay>
-        <TooltipPrimitive.Overlay
-          style={Platform.select({ native: StyleSheet.absoluteFill })}
-        >
-          <NativeOnlyAnimatedView
-            entering={
-              side === 'top'
-                ? FadeInDown.withInitialValues({
-                    transform: [{ translateY: 3 }],
-                  }).duration(150)
-                : FadeInUp.withInitialValues({
-                    transform: [{ translateY: -5 }],
-                  })
-            }
-            exiting={FadeOut}
-          >
-            <TextClassContext.Provider value="text-xs text-primary-foreground">
-              <TooltipPrimitive.Content
-                sideOffset={sideOffset}
-                className={cn(
-                  'bg-primary z-50 rounded-md px-3 py-2 sm:py-1.5',
-                  Platform.select({
-                    web: cn(
-                      'animate-in fade-in-0 zoom-in-95 origin-(--radix-tooltip-content-transform-origin) w-fit text-balance',
-                      side === 'bottom' && 'slide-in-from-top-2',
-                      side === 'left' && 'slide-in-from-right-2',
-                      side === 'right' && 'slide-in-from-left-2',
-                      side === 'top' && 'slide-in-from-bottom-2'
-                    ),
-                  }),
-                  className
-                )}
-                side={side}
-                {...props}
-              />
-            </TextClassContext.Provider>
-          </NativeOnlyAnimatedView>
-        </TooltipPrimitive.Overlay>
-      </FullWindowOverlay>
-    </TooltipPrimitive.Portal>
-  );
-}
-
-export { Tooltip, TooltipContent, TooltipTrigger };