glideui-core 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nitesh Nagpal
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,70 @@
+# GlideUI ✦
+
+> Animated React Native components for Expo. Copy-paste or install. Dark mode first.
+
+**[glideui.dev](https://glideui.dev)** · [Components](https://glideui.dev/components) · MIT License
+
+---
+
+## Install
+
+```bash
+npm install @glide-ui/core
+# or
+bun add @glide-ui/core
+# or
+yarn add @glide-ui/core
+```
+
+## Usage
+
+```tsx
+import { Button, Badge, Card, Input, Avatar, Skeleton } from '@glide-ui/core';
+
+export default function App() {
+  return (
+    <Card>
+      <Avatar name="Nitesh Nagpal" status="online" />
+      <Input label="Email" placeholder="your@email.com" />
+      <Button onPress={() => console.log('pressed!')}>
+        Get started
+      </Button>
+      <Badge variant="success" dot>Active</Badge>
+    </Card>
+  );
+}
+```
+
+## Components
+
+### Free (19 components)
+- **Core:** Button, Badge, Avatar, Card, Separator
+- **Form:** Input, Textarea, Switch, Checkbox, Radio, Select
+- **Feedback:** Toast, Skeleton, Progress, Modal, BottomSheet
+- **Navigation:** TabBar, Tabs, Accordion
+
+### Pro (5 components)
+- OTP Input, Date Picker, Swipeable Card, Data Table, Charts
+
+## Copy-paste model
+
+Don't want the package? Copy components directly:
+
+```bash
+npx glide-ui add button
+npx glide-ui add input
+npx glide-ui add all
+```
+
+Files are copied to `components/ui/` in your project. You own the code.
+
+## Requirements
+
+- React Native ≥ 0.73
+- Expo ≥ 50
+- React ≥ 18
+- TypeScript recommended
+
+## License
+
+MIT © Nitesh Nagpal

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "glideui-core",
+  "version": "0.1.0",
+  "description": "Animated React Native components for Expo. Copy-paste or install. Dark mode first.",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/indiepilotai/glide-ui"
+  },
+  "homepage": "https://glideui.dev",
+  "bugs": {
+    "url": "https://github.com/indiepilotai/glide-ui/issues"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "components",
+    "ui",
+    "animated",
+    "dark-mode",
+    "typescript",
+    "glideui",
+    "mobile",
+    "component-library"
+  ],
+  "author": "Nitesh Nagpal <niteshnagpal@outlook.com>",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.73.0",
+    "expo": ">=50.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-native": "^0.73.0"
+  }
+}

package/src/components/Avatar.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import { View, Text, Image, StyleSheet, ViewStyle } from 'react-native';
+import { colors, typography } from '../theme';
+
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface AvatarProps {
+  src?: string;
+  name?: string;
+  size?: AvatarSize;
+  status?: 'online' | 'offline' | 'busy' | 'away';
+  style?: ViewStyle;
+}
+
+const sizes = {
+  xs: 24,
+  sm: 32,
+  md: 40,
+  lg: 48,
+  xl: 64,
+};
+
+const statusColors = {
+  online: colors.success,
+  offline: colors.textMuted,
+  busy: colors.error,
+  away: colors.warning,
+};
+
+function getInitials(name: string) {
+  return name
+    .split(' ')
+    .map(n => n[0])
+    .slice(0, 2)
+    .join('')
+    .toUpperCase();
+}
+
+function stringToColor(str: string) {
+  const palette = [colors.primary, colors.success, '#f97316', '#ec4899', '#06b6d4'];
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return palette[Math.abs(hash) % palette.length];
+}
+
+export function Avatar({ src, name = '', size = 'md', status, style }: AvatarProps) {
+  const dim = sizes[size];
+  const bg = stringToColor(name);
+  const statusDim = dim * 0.28;
+
+  return (
+    <View style={[{ width: dim, height: dim }, style]}>
+      {src ? (
+        <Image
+          source={{ uri: src }}
+          style={[styles.image, { width: dim, height: dim, borderRadius: dim / 2 }]}
+        />
+      ) : (
+        <View style={[styles.fallback, { width: dim, height: dim, borderRadius: dim / 2, backgroundColor: bg }]}>
+          <Text style={[styles.initials, { fontSize: dim * 0.35, color: '#fff' }]}>
+            {getInitials(name)}
+          </Text>
+        </View>
+      )}
+      {status && (
+        <View style={[
+          styles.status,
+          {
+            width: statusDim,
+            height: statusDim,
+            borderRadius: statusDim / 2,
+            backgroundColor: statusColors[status],
+            bottom: 0,
+            right: 0,
+          },
+        ]} />
+      )}
+    </View>
+  );
+}
+
+// Avatar group
+export function AvatarGroup({ avatars, max = 3 }: { avatars: AvatarProps[]; max?: number }) {
+  const visible = avatars.slice(0, max);
+  const remaining = avatars.length - max;
+
+  return (
+    <View style={styles.group}>
+      {visible.map((a, i) => (
+        <View key={i} style={{ marginLeft: i === 0 ? 0 : -10, zIndex: visible.length - i }}>
+          <Avatar {...a} size="sm" style={styles.groupItem} />
+        </View>
+      ))}
+      {remaining > 0 && (
+        <View style={[styles.fallback, styles.groupItem, styles.remainder, { marginLeft: -10 }]}>
+          <Text style={styles.remainderText}>+{remaining}</Text>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  image: {},
+  fallback: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  initials: {
+    fontWeight: '700',
+  },
+  status: {
+    position: 'absolute',
+    borderWidth: 2,
+    borderColor: colors.bg,
+  },
+  group: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  groupItem: {
+    borderWidth: 2,
+    borderColor: colors.bg,
+  },
+  remainder: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: colors.surface,
+    borderColor: colors.border,
+  },
+  remainderText: {
+    ...typography.xs,
+    color: colors.textSecondary,
+    fontWeight: '600',
+  },
+});

package/src/components/Badge.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { View, Text, StyleSheet, ViewStyle } from 'react-native';
+import { colors, radius, typography } from '../theme';
+
+export type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
+
+export interface BadgeProps {
+  children: React.ReactNode;
+  variant?: BadgeVariant;
+  dot?: boolean;
+  style?: ViewStyle;
+}
+
+const variantStyles = {
+  default: {
+    bg: colors.primaryLight,
+    border: colors.primaryBorder,
+    text: colors.primary,
+    dot: colors.primary,
+  },
+  success: {
+    bg: colors.successLight,
+    border: colors.success + '40',
+    text: colors.success,
+    dot: colors.success,
+  },
+  warning: {
+    bg: colors.warningLight,
+    border: colors.warning + '40',
+    text: colors.warning,
+    dot: colors.warning,
+  },
+  error: {
+    bg: colors.errorLight,
+    border: colors.error + '40',
+    text: colors.error,
+    dot: colors.error,
+  },
+  info: {
+    bg: colors.infoLight,
+    border: colors.info + '40',
+    text: colors.info,
+    dot: colors.info,
+  },
+};
+
+export function Badge({ children, variant = 'default', dot = false, style }: BadgeProps) {
+  const v = variantStyles[variant];
+
+  return (
+    <View style={[styles.base, { backgroundColor: v.bg, borderColor: v.border }, style]}>
+      {dot && <View style={[styles.dot, { backgroundColor: v.dot }]} />}
+      <Text style={[styles.text, { color: v.text }]}>{children}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    paddingHorizontal: 10,
+    paddingVertical: 3,
+    borderRadius: radius.full,
+    borderWidth: 1,
+    gap: 5,
+  },
+  dot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+  },
+  text: {
+    ...typography.xs,
+    fontWeight: '600',
+  },
+});

package/src/components/Button.tsx

@@ -0,0 +1,147 @@
+import React from 'react';
+import {
+  Pressable,
+  Text,
+  StyleSheet,
+  ActivityIndicator,
+  ViewStyle,
+  TextStyle,
+  Platform,
+} from 'react-native';
+import { colors, spacing, radius, typography } from '../theme';
+
+export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'destructive';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface ButtonProps {
+  children: React.ReactNode;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  disabled?: boolean;
+  loading?: boolean;
+  fullWidth?: boolean;
+  onPress?: () => void;
+  style?: ViewStyle;
+  textStyle?: TextStyle;
+}
+
+export function Button({
+  children,
+  variant = 'solid',
+  size = 'md',
+  disabled = false,
+  loading = false,
+  fullWidth = false,
+  onPress,
+  style,
+  textStyle,
+}: ButtonProps) {
+  const isDisabled = disabled || loading;
+
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={isDisabled}
+      style={({ pressed }) => [
+        styles.base,
+        styles[variant],
+        styles[`size_${size}`],
+        fullWidth && styles.fullWidth,
+        isDisabled && styles.disabled,
+        pressed && !isDisabled && styles.pressed,
+        style,
+      ]}
+    >
+      {loading ? (
+        <ActivityIndicator
+          size="small"
+          color={variant === 'solid' ? '#000' : colors.primary}
+        />
+      ) : (
+        <Text style={[styles.text, styles[`text_${variant}`], styles[`textSize_${size}`], textStyle]}>
+          {children}
+        </Text>
+      )}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: radius.xl,
+    borderWidth: 1,
+    borderColor: 'transparent',
+  },
+  // Variants
+  solid: {
+    backgroundColor: colors.primary,
+  },
+  outline: {
+    backgroundColor: 'transparent',
+    borderColor: colors.primary,
+  },
+  ghost: {
+    backgroundColor: colors.primaryLight,
+    borderColor: 'transparent',
+  },
+  destructive: {
+    backgroundColor: colors.errorLight,
+    borderColor: colors.error + '40',
+  },
+  // Sizes
+  size_sm: {
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.xs + 2,
+    gap: spacing.xs,
+  },
+  size_md: {
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.sm + 2,
+    gap: spacing.xs,
+  },
+  size_lg: {
+    paddingHorizontal: spacing.xl,
+    paddingVertical: spacing.md,
+    gap: spacing.sm,
+  },
+  // States
+  disabled: {
+    opacity: 0.4,
+  },
+  pressed: {
+    opacity: 0.85,
+    transform: [{ scale: 0.98 }],
+  },
+  fullWidth: {
+    width: '100%',
+  },
+  // Text
+  text: {
+    fontWeight: '600',
+  },
+  text_solid: {
+    color: '#000000',
+  },
+  text_outline: {
+    color: colors.primary,
+  },
+  text_ghost: {
+    color: colors.primary,
+  },
+  text_destructive: {
+    color: colors.error,
+  },
+  // Text sizes
+  textSize_sm: {
+    ...typography.sm,
+  },
+  textSize_md: {
+    ...typography.base,
+  },
+  textSize_lg: {
+    ...typography.lg,
+  },
+});

package/src/components/Card.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { View, Pressable, StyleSheet, ViewStyle } from 'react-native';
+import { colors, spacing, radius } from '../theme';
+
+export type CardVariant = 'default' | 'bordered' | 'elevated';
+
+export interface CardProps {
+  children: React.ReactNode;
+  variant?: CardVariant;
+  onPress?: () => void;
+  style?: ViewStyle;
+  padding?: number;
+}
+
+export function Card({
+  children,
+  variant = 'default',
+  onPress,
+  style,
+  padding = spacing.lg,
+}: CardProps) {
+  const content = (
+    <View style={[styles.base, styles[variant], { padding }, style]}>
+      {children}
+    </View>
+  );
+
+  if (onPress) {
+    return (
+      <Pressable
+        onPress={onPress}
+        style={({ pressed }) => pressed && { opacity: 0.85 }}
+      >
+        {content}
+      </Pressable>
+    );
+  }
+
+  return content;
+}
+
+const styles = StyleSheet.create({
+  base: {
+    borderRadius: radius.xl,
+    borderWidth: 1,
+  },
+  default: {
+    backgroundColor: 'rgba(255,255,255,0.03)',
+    borderColor: colors.border,
+  },
+  bordered: {
+    backgroundColor: 'transparent',
+    borderColor: colors.borderHover,
+  },
+  elevated: {
+    backgroundColor: colors.surface,
+    borderColor: colors.border,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 12,
+    elevation: 8,
+  },
+});

package/src/components/Input.tsx

@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+import {
+  TextInput,
+  View,
+  Text,
+  StyleSheet,
+  TextInputProps,
+  ViewStyle,
+  Pressable,
+} from 'react-native';
+import { colors, spacing, radius, typography } from '../theme';
+
+export interface InputProps extends TextInputProps {
+  label?: string;
+  error?: string;
+  hint?: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  containerStyle?: ViewStyle;
+}
+
+export function Input({
+  label,
+  error,
+  hint,
+  leftIcon,
+  rightIcon,
+  containerStyle,
+  style,
+  ...props
+}: InputProps) {
+  const [focused, setFocused] = useState(false);
+
+  const borderColor = error
+    ? colors.error
+    : focused
+    ? colors.primary
+    : colors.border;
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      {label && <Text style={styles.label}>{label}</Text>}
+
+      <View style={[styles.inputWrapper, { borderColor }]}>
+        {leftIcon && <View style={styles.icon}>{leftIcon}</View>}
+
+        <TextInput
+          style={[
+            styles.input,
+            leftIcon ? styles.inputWithLeft : null,
+            rightIcon ? styles.inputWithRight : null,
+            style,
+          ]}
+          placeholderTextColor={colors.textDisabled}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          {...props}
+        />
+
+        {rightIcon && <View style={styles.icon}>{rightIcon}</View>}
+      </View>
+
+      {error ? (
+        <Text style={styles.error}>{error}</Text>
+      ) : hint ? (
+        <Text style={styles.hint}>{hint}</Text>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: spacing.xs,
+  },
+  label: {
+    ...typography.sm,
+    color: colors.textSecondary,
+    fontWeight: '500',
+  },
+  inputWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255,255,255,0.04)',
+    borderRadius: radius.lg,
+    borderWidth: 1,
+  },
+  input: {
+    flex: 1,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm + 2,
+    ...typography.base,
+    color: colors.textPrimary,
+  },
+  inputWithLeft: {
+    paddingLeft: spacing.xs,
+  },
+  inputWithRight: {
+    paddingRight: spacing.xs,
+  },
+  icon: {
+    paddingHorizontal: spacing.md,
+  },
+  error: {
+    ...typography.xs,
+    color: colors.error,
+  },
+  hint: {
+    ...typography.xs,
+    color: colors.textMuted,
+  },
+});

package/src/components/Skeleton.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, StyleSheet, View, ViewStyle } from 'react-native';
+import { radius } from '../theme';
+
+export interface SkeletonProps {
+  width?: number | string;
+  height?: number;
+  borderRadius?: number;
+  style?: ViewStyle;
+}
+
+export function Skeleton({
+  width = '100%',
+  height = 16,
+  borderRadius = radius.md,
+  style,
+}: SkeletonProps) {
+  const shimmer = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(shimmer, {
+          toValue: 1,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+        Animated.timing(shimmer, {
+          toValue: 0,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+      ])
+    ).start();
+  }, []);
+
+  const opacity = shimmer.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0.4, 0.8],
+  });
+
+  return (
+    <Animated.View
+      style={[
+        styles.base,
+        {
+          width: width as any,
+          height,
+          borderRadius,
+          opacity,
+        },
+        style,
+      ]}
+    />
+  );
+}
+
+// Convenience components
+export function SkeletonText({ lines = 3, style }: { lines?: number; style?: ViewStyle }) {
+  const widths = ['100%', '85%', '70%'];
+  return (
+    <View style={[{ gap: 8 }, style]}>
+      {Array.from({ length: lines }).map((_, i) => (
+        <Skeleton key={i} width={widths[i % widths.length] as any} height={12} />
+      ))}
+    </View>
+  );
+}
+
+export function SkeletonCard({ style }: { style?: ViewStyle }) {
+  return (
+    <View style={[styles.card, style]}>
+      <Skeleton width={48} height={48} borderRadius={24} />
+      <View style={{ flex: 1, gap: 8 }}>
+        <Skeleton width="60%" height={14} />
+        <Skeleton width="40%" height={11} />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    backgroundColor: 'rgba(255,255,255,0.08)',
+  },
+  card: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    padding: 16,
+  },
+});

package/src/index.ts

@@ -0,0 +1,24 @@
+// GlideUI — Animated React Native components for Expo
+// glideui.dev
+
+// Theme
+export * from './theme';
+
+// Components
+export { Button } from './components/Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './components/Button';
+
+export { Badge } from './components/Badge';
+export type { BadgeProps, BadgeVariant } from './components/Badge';
+
+export { Input } from './components/Input';
+export type { InputProps } from './components/Input';
+
+export { Card } from './components/Card';
+export type { CardProps, CardVariant } from './components/Card';
+
+export { Skeleton, SkeletonText, SkeletonCard } from './components/Skeleton';
+export type { SkeletonProps } from './components/Skeleton';
+
+export { Avatar, AvatarGroup } from './components/Avatar';
+export type { AvatarProps, AvatarSize } from './components/Avatar';

package/src/theme/index.ts

@@ -0,0 +1,71 @@
+export const colors = {
+  // Brand
+  primary: '#8b5cf6',
+  primaryLight: 'rgba(139, 92, 246, 0.1)',
+  primaryBorder: 'rgba(139, 92, 246, 0.3)',
+
+  // Background
+  bg: '#0a0a0f',
+  surface: '#141420',
+  surfaceHover: '#1a1a2e',
+
+  // Text
+  textPrimary: '#ffffff',
+  textSecondary: '#9ca3af',
+  textMuted: '#6b7280',
+  textDisabled: '#374151',
+
+  // Border
+  border: 'rgba(255, 255, 255, 0.08)',
+  borderHover: 'rgba(255, 255, 255, 0.15)',
+
+  // Semantic
+  success: '#10b981',
+  successLight: 'rgba(16, 185, 129, 0.1)',
+  warning: '#f59e0b',
+  warningLight: 'rgba(245, 158, 11, 0.1)',
+  error: '#ef4444',
+  errorLight: 'rgba(239, 68, 68, 0.1)',
+  info: '#3b82f6',
+  infoLight: 'rgba(59, 130, 246, 0.1)',
+} as const;
+
+export const spacing = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  xxl: 32,
+} as const;
+
+export const radius = {
+  sm: 6,
+  md: 10,
+  lg: 14,
+  xl: 18,
+  full: 9999,
+} as const;
+
+export const typography = {
+  xs: { fontSize: 11, lineHeight: 16 },
+  sm: { fontSize: 13, lineHeight: 18 },
+  base: { fontSize: 15, lineHeight: 22 },
+  lg: { fontSize: 17, lineHeight: 24 },
+  xl: { fontSize: 20, lineHeight: 28 },
+  xxl: { fontSize: 24, lineHeight: 32 },
+} as const;
+
+export type GlideTheme = {
+  colors: typeof colors;
+  spacing: typeof spacing;
+  radius: typeof radius;
+  typography: typeof typography;
+};
+
+export const defaultTheme: GlideTheme = {
+  colors,
+  spacing,
+  radius,
+  typography,
+};