@campxdev/react-native-blueprint 0.1.19 → 0.1.23

package/src/components/Input/Button/Button.tsx

@@ -1,25 +1,17 @@
 // @ts-nocheck
+import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 import {
   Pressable,
-  View,
   Text as RNText,
+  View,
   type GestureResponderEvent,
+  type PressableProps,
   type StyleProp,
   type ViewStyle,
-  type PressableProps,
 } from 'react-native';
-import { cssInterop } from 'nativewind';
 import { SquircleView } from 'react-native-figma-squircle';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '../../../lib/utils';
-import { useThemeColors } from '../../../lib/theme';
-
-// NativeWind interop (className -> style)
-cssInterop(Pressable, { className: 'style' });
-cssInterop(View, { className: 'style' });
-cssInterop(RNText, { className: 'style' });
+import { useTheme } from '../../shared/theme';
 
 /**
  * ✅ Canonical values (match Figma)
@@ -30,31 +22,38 @@ export const ButtonVariants = {
 } as const;
 
 /**
- * Local lightweight placeholder icon (used in demos/tests)
- * ✅ No inline styles (satisfies react-native/no-inline-styles)
+ * Local lightweight placeholder icon
  */
 function DummyIcon({ testID }: { testID?: string }) {
-  return <View testID={testID} className="w-4 h-4 rounded bg-text-inverse" />;
+  return (
+    <View
+      testID={testID}
+      style={{
+        width: 16,
+        height: 16,
+        borderRadius: 4,
+        backgroundColor: '#6a7282',
+      }}
+    />
+  );
 }
 
 /**
- * Returns squircle fill & stroke colors per variant from THEME tokens
+ * Returns squircle fill & stroke colors per variant from theme
  */
-function useVariantSquircleParams(variant: string) {
-  const colors = useThemeColors();
-
+function useVariantSquircleParams(variant: string, colors: any) {
   const map: Record<
     string,
     { fillColor: string; strokeColor: string; strokeWidth: number }
   > = {
     default: {
-      fillColor: colors.brandPrimary,
+      fillColor: colors.primary,
       strokeColor: 'transparent',
       strokeWidth: 0,
     },
     secondary: {
-      fillColor: colors.brandSecondary,
-      strokeColor: colors.brandPrimary,
+      fillColor: colors.secondary,
+      strokeColor: colors.primary,
       strokeWidth: 1,
     },
     outline: {
@@ -82,37 +81,34 @@ function useVariantSquircleParams(variant: string) {
   return map[variant] ?? map.default;
 }
 
-const CORNER_RADIUS = 8; // radius-lg
-const CORNER_SMOOTHING = 1; // maximum smoothing
+const CORNER_RADIUS = 12;
+const CORNER_SMOOTHING = 1;
 
 const buttonVariants = cva('flex-row items-center justify-center', {
   variants: {
     variant: {
-      default: 'gap-2 active:opacity-90',
-      secondary: 'active:opacity-90',
-      outline: 'active:opacity-90',
-      ghost: 'active:opacity-90',
-      destructive: 'active:opacity-90',
+      default: 'gap-2',
+      secondary: 'gap-2',
+      outline: 'gap-2',
+      ghost: 'gap-2',
+      destructive: 'gap-2',
       link: '',
     },
     size: {
-      // ✅ Figma-like sizing
       default: 'py-3 px-5',
-      lg: 'py-5 px-6',
+      lg: 'py-4 px-6',
       icon: 'h-10 w-10',
     },
     disabled: {
       false: '',
       true: 'opacity-50',
     },
-    // Optional icon toggles still affect spacing correctly
     hasIcons: {
       false: '',
       true: 'gap-2',
     },
   },
   compoundVariants: [
-    // ✅ Link should not have forced height/padding
     { variant: 'link', size: 'default', className: 'h-auto p-0' },
     { variant: 'link', size: 'lg', className: 'h-auto p-0' },
     { variant: 'link', size: 'icon', className: 'h-auto p-0 w-auto' },
@@ -128,11 +124,11 @@ const buttonVariants = cva('flex-row items-center justify-center', {
 const buttonTextVariants = cva('font-semibold', {
   variants: {
     variant: {
-      default: 'text-text-inverse',
+      default: 'text-white',
       secondary: 'text-foreground',
       outline: 'text-foreground',
       ghost: 'text-foreground',
-      destructive: 'text-primary-foreground',
+      destructive: 'text-white',
       link: 'text-primary underline',
     },
     size: {
@@ -152,21 +148,11 @@ const buttonTextVariants = cva('font-semibold', {
   },
 });
 
-/**
- * ✅ Strict rule: className must NOT be accepted as a prop.
- * So we omit it explicitly from PressableProps.
- */
 type PressablePropsWithoutClassName = Omit<PressableProps, 'style'> & {
   className?: never;
 };
 
-/**
- * ✅ Backward compatible types:
- * - supports boolean disabled (new)
- * - supports 'True'/'False' and 'true'/'false' and '1'/'0' (old)
- * - supports capitalized variant/size (old)
- */
-export type ButtonProps = PressablePropsWithoutClassName &
+export type ButtonComponentProps = PressablePropsWithoutClassName &
   VariantProps<typeof buttonVariants> & {
     variant?:
       | (typeof ButtonVariants.variant)[number]
@@ -178,6 +164,8 @@ export type ButtonProps = PressablePropsWithoutClassName &
 
     showLeftIcon?: boolean;
     showRightIcon?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
 
     style?: StyleProp<ViewStyle>;
     testID?: string;
@@ -204,13 +192,15 @@ function normalizeDisabled(v: any): boolean {
   return s === 'true' || s === '1';
 }
 
-export function Button(props: ButtonProps) {
+export function ButtonComponent(props: ButtonComponentProps) {
   const {
     variant,
     size,
     disabled,
     showLeftIcon,
     showRightIcon,
+    leftIcon,
+    rightIcon,
     style,
     testID,
     children,
@@ -218,17 +208,16 @@ export function Button(props: ButtonProps) {
     ...rest
   } = props;
 
+  const { colors } = useTheme();
+
   const v = normalizeVariant(variant);
   const s = normalizeSize(size);
   const d = normalizeDisabled(disabled);
 
-  // ✅ icon button must be square and must NOT show label (prevents long button)
   const isIconOnly = s === 'icon';
-
-  // spacing only when icons exist
   const hasIcons = Boolean(showLeftIcon || showRightIcon);
 
-  const squircleParams = useVariantSquircleParams(v);
+  const squircleParams = useVariantSquircleParams(v, colors);
 
   const handlePress = React.useCallback(
     (e: GestureResponderEvent) => {
@@ -238,9 +227,100 @@ export function Button(props: ButtonProps) {
     [d, onPress]
   );
 
+  // Get text color based on variant
+  const getTextColor = () => {
+    switch (v) {
+      case 'default':
+        return colors.primaryForeground;
+      case 'secondary':
+        return colors.secondaryForeground;
+      case 'outline':
+        return colors.foreground;
+      case 'ghost':
+        return colors.foreground;
+      case 'destructive':
+        return colors.destructiveForeground;
+      case 'link':
+        return colors.primary;
+      default:
+        return colors.primaryForeground;
+    }
+  };
+
+  // Get size styles
+  const getSizeStyles = () => {
+    switch (s) {
+      case 'lg':
+        return { height: 52, paddingHorizontal: 16 };
+      case 'icon':
+        return { height: 40, width: 40 };
+      case 'default':
+      default:
+        return { height: 48, paddingHorizontal: 16 };
+    }
+  };
+
+  const sizeStyles = getSizeStyles();
+
+  if (v === 'link') {
+    // Link variant doesn't use SquircleView
+    return (
+      <Pressable
+        testID={testID ?? 'button'}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: d }}
+        disabled={d}
+        onPress={handlePress}
+        style={[
+          {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            opacity: d ? 0.5 : 1,
+          },
+          style,
+        ]}
+        {...rest}
+      >
+        {showLeftIcon ? (
+          leftIcon ? (
+            leftIcon
+          ) : (
+            <DummyIcon testID="button-left-icon" />
+          )
+        ) : null}
+
+        {!isIconOnly ? (
+          <RNText
+            testID="button-label"
+            style={{
+              color: getTextColor(),
+              fontSize: s === 'lg' ? 16 : 14,
+              fontWeight: '600',
+              textDecorationLine: 'underline',
+            }}
+            numberOfLines={1}
+            ellipsizeMode="tail"
+          >
+            {children}
+          </RNText>
+        ) : null}
+
+        {showRightIcon ? (
+          rightIcon ? (
+            rightIcon
+          ) : (
+            <DummyIcon testID="button-right-icon" />
+          )
+        ) : null}
+      </Pressable>
+    );
+  }
+
   return (
     <View style={style}>
       <SquircleView
+        style={sizeStyles}
         squircleParams={{
           cornerRadius: CORNER_RADIUS,
           cornerSmoothing: CORNER_SMOOTHING,
@@ -253,24 +333,32 @@ export function Button(props: ButtonProps) {
           accessibilityState={{ disabled: d }}
           disabled={d}
           onPress={handlePress}
-          className={cn(
-            buttonVariants({
-              variant: v,
-              size: s,
-              disabled: d,
-              hasIcons,
-            })
-          )}
+          style={{
+            flex: 1,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: hasIcons ? 8 : 0,
+            opacity: d ? 0.5 : 1,
+          }}
           {...rest}
         >
-          {showLeftIcon ? <DummyIcon testID="button-left-icon" /> : null}
+          {showLeftIcon ? (
+            leftIcon ? (
+              leftIcon
+            ) : (
+              <DummyIcon testID="button-left-icon" />
+            )
+          ) : null}
 
           {!isIconOnly ? (
             <RNText
               testID="button-label"
-              className={cn(
-                buttonTextVariants({ variant: v, size: s, disabled: d })
-              )}
+              style={{
+                color: getTextColor(),
+                fontSize: s === 'lg' ? 16 : 14,
+                fontWeight: '600',
+              }}
               numberOfLines={1}
               ellipsizeMode="tail"
             >
@@ -278,13 +366,19 @@ export function Button(props: ButtonProps) {
             </RNText>
           ) : null}
 
-          {showRightIcon ? <DummyIcon testID="button-right-icon" /> : null}
+          {showRightIcon ? (
+            rightIcon ? (
+              rightIcon
+            ) : (
+              <DummyIcon testID="button-right-icon" />
+            )
+          ) : null}
         </Pressable>
       </SquircleView>
     </View>
   );
 }
 
-Button.displayName = 'Button';
+ButtonComponent.displayName = 'Button';
 
-export { buttonTextVariants, buttonVariants };
+export { ButtonComponent as Button, buttonTextVariants, buttonVariants };

package/src/components/Navigation/Popover/Popover.tsx

@@ -1,13 +1,13 @@
 // @ts-nocheck
 import * as React from 'react';
-import { View, Text, type StyleProp, type ViewStyle } from 'react-native';
+import { Text, View, type StyleProp, type ViewStyle } from 'react-native';
 
 import { Button } from '../../Input/Button/Button';
 import {
+  PopoverContainer,
+  PopoverContent,
   Popover as PopoverPrimitive,
   PopoverTrigger,
-  PopoverContent,
-  PopoverContainer,
 } from '../../Layout/PopoverContainer/Popover-Container';
 
 /**

package/src/components/ui/index.ts

@@ -1,62 +1,67 @@
 // @ts-nocheck
-export * from '../DataDisplay/Accordion/Accordion';
-export * from '../DataDisplay/AccordionItem/AccordionItem';
 export * from '../Feedback/Alert/Alert';
 export * from '../Feedback/AlertDialog/Alert-Dialog';
 export * from '../Feedback/InfoBar/InfoBar';
+export * from '../Feedback/ProgressCircular/Progress-circular';
+export * from '../Feedback/ProgressLinear/Progress-linear';
+export * from '../Feedback/Stepper/Stepper';
+
 export * from '../Navigation/Appbar/AppBar';
+export * from '../Navigation/ContextMenu/Context-Menu';
+export * from '../Navigation/Dialog/Dialog';
+export * from '../Navigation/FloatingAction/Floating-Action';
+export * from '../Navigation/Navbar/NavBar';
+export * from '../Navigation/Popover/Popover';
+export * from '../Navigation/Themetoggle/Theme-Toggle';
+
 export * from '../Layout/AspectRatio/Aspect-Ratio';
+export * from '../Layout/Bottomsheet/Bottom-Sheet';
+export * from '../Layout/PageContent/PageContent';
+export * from '../Layout/PageLayoutFocused/PageLayoutFocused';
+export * from '../Layout/PageLayoutShell/PageLayoutShell';
+export * from '../Layout/PopoverContainer/Popover-Container';
+export * from '../Layout/Tabs/Tabs';
+
 export * from '../DataDisplay/Avatar/Avatar';
+export * from '../DataDisplay/Accordion/Accordion';
+export * from '../DataDisplay/AccordionItem/AccordionItem';
 export * from '../DataDisplay/Badge/Badge';
 export * from '../DataDisplay/Banner/Banner';
-export * from '../DataDisplay/Chips/Chips';
-export * from '../DataDisplay/ChipsRow/ChipsRow';
 export * from '../DataDisplay/BannerRow/BannerRow';
-export * from '../Layout/PageLayoutShell/PageLayoutShell';
-export * from '../Layout/PageLayoutFocused/PageLayoutFocused';
-export * from '../Layout/PageContent/PageContent';
-export * from '../Layout/Bottomsheet/Bottom-Sheet';
-export * from '../Input/Button/Button';
-export * from '../DataDisplay/Card/Card';
 export * from '../DataDisplay/CalendarItem/CalendarItem';
+export * from '../DataDisplay/Card/Card';
+export * from '../DataDisplay/Chips/Chips';
+export * from '../DataDisplay/ChipsRow/ChipsRow';
+export * from '../DataDisplay/DataCard/DataCard';
+export * from '../DataDisplay/Datalist/Datalist';
+export * from '../DataDisplay/DataListItem/DataListItem';
 export * from '../DataDisplay/FeedCard/FeedCard';
 export * from '../DataDisplay/Greeting/Greeting';
 export * from '../DataDisplay/MonthCalendar/MonthCalendar';
-export * from '../DataDisplay/DataCard/DataCard';
+export * from '../DataDisplay/Separator/Separator';
+export * from '../DataDisplay/Skeleton/Skeleton';
+export * from '../DataDisplay/Tooltip/Tooltip';
+
+export * from '../Input/Button/Button';
 export * from '../Input/Checkbox/Checkbox';
+export * from '../Input/RadioGroup/Radio-Group';
+export * from '../Input/Select/Select';
+export * from '../Input/switch/Switch';
+export * from '../Input/Text/Text';
+export * from '../Input/TextField/Textfield';
+export * from '../Input/Toggle/Toggle';
+export * from '../Input/ToggleGroup/Toggle-Group';
+
 export * from './Collapsible';
-export * from '../Navigation/ContextMenu/Context-Menu';
 export * from './Custom-Card';
-export * from '../Navigation/Dialog/Dialog';
 export * from './Dropdown-Menu';
-export * from '../Navigation/FloatingAction/Floating-Action';
 
 export * from './Hover-Card';
 export * from './Icon';
 export * from './Input';
 export * from './Label';
 export * from './Menubar';
-export * from '../Navigation/Navbar/NavBar';
-export * from '../Navigation/Popover/Popover';
-export * from '../Layout/PopoverContainer/Popover-Container';
-export * from '../Feedback/ProgressLinear/Progress-linear';
-export * from '../Feedback/ProgressCircular/Progress-circular';
-export * from '../Feedback/Stepper/Stepper';
-export * from '../Input/RadioGroup/Radio-Group';
-export * from '../Input/Select/Select';
-export * from '../DataDisplay/Separator/Separator';
 export * from './SizedBox';
-export * from '../DataDisplay/Skeleton/Skeleton';
 export * from './Slider';
-export * from '../Input/switch/Switch';
 export * from './Table';
-export * from '../Layout/Tabs/Tabs';
-export * from '../Input/Text/Text';
-export * from '../Input/TextField/Textfield';
-export * from '../Navigation/Themetoggle/Theme-Toggle';
 export * from './Toast';
-export * from '../Input/Toggle/Toggle';
-export * from '../Input/ToggleGroup/Toggle-Group';
-export * from '../DataDisplay/Tooltip/Tooltip';
-export * from '../DataDisplay/DataListItem/DataListItem';
-export * from '../DataDisplay/Datalist/Datalist';

package/lib/typescript/package.json

@@ -1 +0,0 @@
-{"type":"module"}