linked-data-browser 0.0.7 → 0.0.8-alpha.0

package/components/ui/table.tsx

@@ -1,38 +1,37 @@
 import * as TablePrimitive from '@rn-primitives/table';
 import * as React from 'react';
-import { cn } from '../../lib/utils';
-import { TextClassContext } from '../ui/text';
+import { StyleSheet } from 'react-native';
+import { TextStyleContext } from '../ui/text';
 
 function Table({
-  className,
+  style,
   ...props
 }: TablePrimitive.RootProps & {
   ref?: React.RefObject<TablePrimitive.RootRef>;
 }) {
   return (
     <TablePrimitive.Root
-      className={cn('w-full caption-bottom text-sm', className)}
+      style={StyleSheet.flatten([styles.table, style])}
       {...props}
     />
   );
 }
 
 function TableHeader({
-  className,
+  style,
   ...props
 }: TablePrimitive.HeaderProps & {
   ref?: React.RefObject<TablePrimitive.HeaderRef>;
 }) {
   return (
     <TablePrimitive.Header
-      className={cn('border-border [&_tr]:border-b', className)}
+      style={StyleSheet.flatten([styles.header, style])}
       {...props}
     />
   );
 }
 
 function TableBody({
-  className,
   style,
   ...props
 }: TablePrimitive.BodyProps & {
@@ -40,87 +39,110 @@ function TableBody({
 }) {
   return (
     <TablePrimitive.Body
-      className={cn(
-        'flex-1 border-border [&_tr:last-child]:border-0',
-        className,
-      )}
-      // eslint-disable-next-line react-native/no-inline-styles
-      style={[{ minHeight: 2 }, style]}
+      style={StyleSheet.flatten([styles.body, { minHeight: 2 }, style])}
       {...props}
     />
   );
 }
 
 function TableFooter({
-  className,
+  style,
   ...props
 }: TablePrimitive.FooterProps & {
   ref?: React.RefObject<TablePrimitive.FooterRef>;
 }) {
   return (
     <TablePrimitive.Footer
-      className={cn(
-        'bg-muted/50 font-medium [&>tr]:last:border-b-0',
-        className,
-      )}
+      style={StyleSheet.flatten([styles.footer, style])}
       {...props}
     />
   );
 }
 
 function TableRow({
-  className,
+  style,
   ...props
 }: TablePrimitive.RowProps & {
   ref?: React.RefObject<TablePrimitive.RowRef>;
 }) {
   return (
     <TablePrimitive.Row
-      className={cn(
-        'flex-row border-border border-b web:transition-colors web:hover:bg-muted/50 web:data-[state=selected]:bg-muted',
-        className,
-      )}
+      style={StyleSheet.flatten([styles.row, style])}
       {...props}
     />
   );
 }
 
 function TableHead({
-  className,
+  style,
   ...props
 }: TablePrimitive.HeadProps & {
   ref?: React.RefObject<TablePrimitive.HeadRef>;
 }) {
   return (
-    <TextClassContext.Provider value="text-muted-foreground">
+    <TextStyleContext.Provider
+      value={{ style: { color: 'hsl(var(--muted-foreground))' } }}
+    >
       <TablePrimitive.Head
-        className={cn(
-          'h-12 px-4 text-left justify-center font-medium [&:has([role=checkbox])]:pr-0',
-          className,
-        )}
+        style={StyleSheet.flatten([styles.head, style])}
         {...props}
       />
-    </TextClassContext.Provider>
+    </TextStyleContext.Provider>
   );
 }
 
 function TableCell({
-  className,
+  style,
   ...props
 }: TablePrimitive.CellProps & {
   ref?: React.RefObject<TablePrimitive.CellRef>;
 }) {
   return (
     <TablePrimitive.Cell
-      className={cn(
-        'p-4 align-middle [&:has([role=checkbox])]:pr-0',
-        className,
-      )}
+      style={StyleSheet.flatten([styles.cell, style])}
       {...props}
     />
   );
 }
 
+const styles = StyleSheet.create({
+  table: {
+    width: '100%',
+    fontSize: 14,
+  },
+  header: {
+    borderBottomWidth: 1,
+    borderBottomColor: 'hsl(var(--border))',
+  },
+  body: {
+    flex: 1,
+    borderBottomWidth: 1,
+    borderBottomColor: 'hsl(var(--border))',
+  },
+  footer: {
+    backgroundColor: 'hsl(var(--muted) / 0.5)',
+    fontWeight: '500',
+  },
+  row: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: 'hsl(var(--border))',
+  },
+  head: {
+    height: 48,
+    paddingHorizontal: 16,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    fontWeight: '500',
+    color: 'hsl(var(--muted-foreground))',
+  },
+  cell: {
+    padding: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
 export {
   Table,
   TableBody,

package/components/ui/tabs.tsx

@@ -1,70 +1,101 @@
 import * as TabsPrimitive from '@rn-primitives/tabs';
 import * as React from 'react';
-import { cn } from '../../lib/utils';
-import { TextClassContext } from '../ui/text';
+import { StyleSheet } from 'react-native';
+import { TextStyleContext } from '../ui/text';
 
 const Tabs = TabsPrimitive.Root;
 
 function TabsList({
-  className,
+  style,
   ...props
 }: TabsPrimitive.ListProps & {
   ref?: React.RefObject<TabsPrimitive.ListRef>;
 }) {
   return (
     <TabsPrimitive.List
-      className={cn(
-        'web:inline-flex h-10 native:h-12 items-center justify-center rounded-md bg-muted p-1 native:px-1.5',
-        className,
-      )}
+      style={StyleSheet.flatten([styles.list, style])}
       {...props}
     />
   );
 }
 
 function TabsTrigger({
-  className,
+  style,
   ...props
 }: TabsPrimitive.TriggerProps & {
   ref?: React.RefObject<TabsPrimitive.TriggerRef>;
 }) {
   const { value } = TabsPrimitive.useRootContext();
+  const isActive = props.value === value;
+
+  const triggerStyle = StyleSheet.flatten([
+    styles.trigger,
+    isActive && styles.triggerActive,
+    props.disabled && styles.triggerDisabled,
+    style,
+  ]);
+
+  const textStyle = isActive
+    ? StyleSheet.flatten([styles.triggerText, styles.triggerTextActive])
+    : styles.triggerText;
+
   return (
-    <TextClassContext.Provider
-      value={cn(
-        'text-sm native:text-base font-medium text-muted-foreground web:transition-all',
-        value === props.value && 'text-foreground',
-      )}
-    >
-      <TabsPrimitive.Trigger
-        className={cn(
-          'inline-flex items-center justify-center shadow-none web:whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium web:ring-offset-background web:transition-all web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
-          props.disabled && 'web:pointer-events-none opacity-50',
-          props.value === value &&
-            'bg-background shadow-lg shadow-foreground/10',
-          className,
-        )}
-        {...props}
-      />
-    </TextClassContext.Provider>
+    <TextStyleContext.Provider value={{ style: textStyle }}>
+      <TabsPrimitive.Trigger style={triggerStyle} {...props} />
+    </TextStyleContext.Provider>
   );
 }
 
 function TabsContent({
-  className,
+  style,
   ...props
 }: TabsPrimitive.ContentProps & {
   ref?: React.RefObject<TabsPrimitive.ContentRef>;
 }) {
-  return (
-    <TabsPrimitive.Content
-      className={cn(
-        'web:ring-offset-background web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <TabsPrimitive.Content style={style} {...props} />;
 }
 
+const styles = StyleSheet.create({
+  list: {
+    flexDirection: 'row',
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 6,
+    backgroundColor: 'hsl(var(--muted))',
+    padding: 4,
+  },
+  trigger: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 2,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    fontSize: 14,
+    fontWeight: '500',
+    color: 'hsl(var(--muted-foreground))',
+  },
+  triggerActive: {
+    backgroundColor: 'hsl(var(--background))',
+    shadowColor: 'hsl(var(--foreground))',
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+    color: 'hsl(var(--foreground))',
+  },
+  triggerDisabled: {
+    opacity: 0.5,
+  },
+  triggerText: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: 'hsl(var(--muted-foreground))',
+  },
+  triggerTextActive: {
+    color: 'hsl(var(--foreground))',
+  },
+});
+
 export { Tabs, TabsContent, TabsList, TabsTrigger };

package/components/ui/text.tsx

@@ -1,38 +1,152 @@
+import { useTheme } from '@react-navigation/native';
 import * as Slot from '@rn-primitives/slot';
-import * as React from 'react';
-import { Text as RNText } from 'react-native';
-import { cn } from '../../lib/utils';
+import React, {
+  PropsWithChildren,
+  FunctionComponent,
+  ComponentProps,
+  createContext,
+  useContext,
+  RefObject,
+} from 'react';
+import { Text as RNText, StyleSheet, TextStyle } from 'react-native';
 
-const TextClassContext = React.createContext<string | undefined>(undefined);
+interface TextStyleProps {
+  style?: TextStyle;
+  variant?: TextVariant;
+  size?: TextSize;
+  muted?: boolean;
+  bold?: boolean;
+}
 
-export type TextVariant = 'default' | 'h1' | 'h2' | 'h3' | 'label';
-export type TextSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl';
+interface TextStyleContextValue extends TextStyleProps {}
 
-function Text({
-  className,
-  asChild = false,
+const TextStyleContext = createContext<TextStyleContextValue | undefined>(
+  undefined,
+);
+
+interface TextStyleProviderProps extends PropsWithChildren, TextStyleProps {}
+
+const TextStyleProvider: FunctionComponent<TextStyleProviderProps> = ({
+  children,
+  style,
   variant,
   size,
   muted,
   bold,
-  ...props
-}: React.ComponentProps<typeof RNText> & {
-  ref?: React.RefObject<RNText>;
-  asChild?: boolean;
+}) => {
+  const contextValue: TextStyleContextValue = {
+    style,
+    variant,
+    size,
+    muted,
+    bold,
+  };
+
+  return (
+    <TextStyleContext.Provider value={contextValue}>
+      {children}
+    </TextStyleContext.Provider>
+  );
+};
+
+export type TextVariant = 'default' | 'h1' | 'h2' | 'h3' | 'label';
+export type TextSize =
+  | 'xs'
+  | 'sm'
+  | 'base'
+  | 'lg'
+  | 'xl'
+  | '2xl'
+  | '3xl'
+  | number;
+
+interface UseTextStylesParams {
   variant?: TextVariant;
   size?: TextSize;
   muted?: boolean;
   bold?: boolean;
-}) {
-  const textClass = React.useContext(TextClassContext);
-  const Component = asChild ? Slot.Text : RNText;
+  style?: TextStyle;
+}
+
+// Helper function to add opacity to HSL colors
+function addOpacityToHSL(hslColor: string, opacity: number): string {
+  // Extract HSL values from string like "hsl(0 0% 98%)"
+  const hslMatch = hslColor.match(
+    /hsl\((\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%\)/,
+  );
+  if (hslMatch) {
+    const [, h, s, l] = hslMatch;
+
+    // Convert HSL to RGB for better React Native compatibility
+    const hNum = parseFloat(h) / 360;
+    const sNum = parseFloat(s) / 100;
+    const lNum = parseFloat(l) / 100;
+
+    const c = (1 - Math.abs(2 * lNum - 1)) * sNum;
+    const x = c * (1 - Math.abs(((hNum * 6) % 2) - 1));
+    const m = lNum - c / 2;
+
+    let r, g, b;
+    if (hNum < 1 / 6) {
+      r = c;
+      g = x;
+      b = 0;
+    } else if (hNum < 2 / 6) {
+      r = x;
+      g = c;
+      b = 0;
+    } else if (hNum < 3 / 6) {
+      r = 0;
+      g = c;
+      b = x;
+    } else if (hNum < 4 / 6) {
+      r = 0;
+      g = x;
+      b = c;
+    } else if (hNum < 5 / 6) {
+      r = x;
+      g = 0;
+      b = c;
+    } else {
+      r = c;
+      g = 0;
+      b = x;
+    }
+
+    const rFinal = Math.round((r + m) * 255);
+    const gFinal = Math.round((g + m) * 255);
+    const bFinal = Math.round((b + m) * 255);
+
+    const rgbaResult = `rgba(${rFinal}, ${gFinal}, ${bFinal}, ${opacity})`;
+
+    // Return RGBA for better React Native compatibility
+    return rgbaResult;
+  }
+  return hslColor;
+}
+
+function useTextStyles({
+  variant,
+  size,
+  muted,
+  bold,
+  style,
+}: UseTextStylesParams): TextStyle[] {
+  const contextValue = useContext(TextStyleContext);
+  const { colors } = useTheme();
+  // Use context values as defaults, but allow props to override
+  const effectiveVariant = variant ?? contextValue?.variant;
+  const effectiveSize = size ?? contextValue?.size;
+  const effectiveMuted = muted ?? contextValue?.muted;
+  const effectiveBold = bold ?? contextValue?.bold;
 
   let isMuted = false;
   let isBold = false;
   let textSize: TextSize = 'base';
+  let customFontSize: number | undefined;
 
-  if (variant) {
-    switch (variant) {
+  if (effectiveVariant) {
+    switch (effectiveVariant) {
       case 'h1':
         isBold = true;
         textSize = '3xl';
@@ -55,23 +169,100 @@ function Text({
     }
   }
 
-  if (muted !== undefined) isMuted = muted;
-  if (bold !== undefined) isBold = bold;
-  if (size !== undefined) textSize = size;
+  if (effectiveMuted !== undefined) isMuted = effectiveMuted;
+  if (effectiveBold !== undefined) isBold = effectiveBold;
+  if (effectiveSize !== undefined) {
+    if (typeof effectiveSize === 'number') {
+      customFontSize = effectiveSize;
+    } else {
+      textSize = effectiveSize;
+    }
+  }
+
+  // Build the style array with theme colors
+  return [
+    styles.base,
+    { color: colors.text }, // Use theme color instead of hard-coded
+    contextValue?.style, // Apply context style
+    isBold && styles.bold,
+    isMuted && { color: addOpacityToHSL(colors.text, 0.5) }, // Use theme color with proper opacity for muted
+    customFontSize ? { fontSize: customFontSize } : styles[textSize],
+    contextValue?.style,
+    style, // Individual style prop overrides everything
+  ].filter((styleItem): styleItem is TextStyle => Boolean(styleItem));
+}
+
+function Text({
+  style,
+  asChild = false,
+  variant,
+  size,
+  muted,
+  bold,
+  ...props
+}: ComponentProps<typeof RNText> & {
+  ref?: RefObject<RNText>;
+  asChild?: boolean;
+} & TextStyleProps) {
+  const Component = asChild ? Slot.Text : RNText;
+
+  const textStyles = useTextStyles({
+    variant,
+    size,
+    muted,
+    bold,
+    style,
+  });
 
   return (
     <Component
-      className={cn(
-        'text-base text-foreground web:select-text',
-        textClass,
-        isBold ? 'font-semibold' : '',
-        isMuted ? 'text-muted-foreground' : '',
-        `text-${textSize}`,
-        className,
-      )}
+      style={textStyles}
+      selectable={true} // web:select-text equivalent
       {...props}
     />
   );
 }
 
-export { Text, TextClassContext };
+export {
+  Text,
+  TextStyleProvider,
+  TextStyleContext,
+  useTextStyles,
+  TextStyleProps,
+};
+
+const styles = StyleSheet.create({
+  base: {
+    fontSize: 16, // text-base
+    // color is now handled dynamically with theme
+  },
+  selectable: {
+    // web:select-text - this is handled by selectable prop in React Native
+  },
+  bold: {
+    fontWeight: '600', // font-semibold
+  },
+  // muted color is now handled dynamically with theme
+  // Size variants
+  xs: {
+    fontSize: 12, // text-xs
+  },
+  sm: {
+    fontSize: 14, // text-sm
+  },
+  baseSize: {
+    fontSize: 16, // text-base
+  },
+  lg: {
+    fontSize: 18, // text-lg
+  },
+  xl: {
+    fontSize: 20, // text-xl
+  },
+  '2xl': {
+    fontSize: 24, // text-2xl
+  },
+  '3xl': {
+    fontSize: 30, // text-3xl
+  },
+});

package/components/ui/textarea.tsx

@@ -1,24 +1,27 @@
 import * as React from 'react';
-import { TextInput, type TextInputProps } from 'react-native';
-import { cn } from '../../lib/utils';
+import { TextInput, type TextInputProps, StyleSheet } from 'react-native';
 
 function Textarea({
-  className,
+  style,
   multiline = true,
   numberOfLines = 4,
-  placeholderClassName,
+  placeholderTextColor,
   ...props
 }: TextInputProps & {
   ref?: React.RefObject<TextInput>;
 }) {
+  const textareaStyle = StyleSheet.flatten([
+    styles.textarea,
+    props.editable === false && styles.textareaDisabled,
+    style,
+  ]);
+
   return (
     <TextInput
-      className={cn(
-        'web:flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base lg:text-sm native:text-lg native:leading-[1.25] text-foreground web:ring-offset-background placeholder:text-muted-foreground web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
-        props.editable === false && 'opacity-50 web:cursor-not-allowed',
-        className,
-      )}
-      placeholderClassName={cn('text-muted-foreground', placeholderClassName)}
+      style={textareaStyle}
+      placeholderTextColor={
+        placeholderTextColor || 'hsl(var(--muted-foreground))'
+      }
       multiline={multiline}
       numberOfLines={numberOfLines}
       textAlignVertical="top"
@@ -27,4 +30,25 @@ function Textarea({
   );
 }
 
+const styles = StyleSheet.create({
+  textarea: {
+    minHeight: 80,
+    width: '100%',
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: 'hsl(var(--input))',
+    backgroundColor: 'hsl(var(--background))',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    fontSize: 16,
+    color: 'hsl(var(--foreground))',
+  },
+  textareaDisabled: {
+    opacity: 0.5,
+  },
+  placeholder: {
+    color: 'hsl(var(--muted-foreground))',
+  },
+});
+
 export { Textarea };