@selfxyz/euclid

A production-ready React Native component library built with TypeScript.

Installation

npm install @selfxyz/euclid
# or
yarn add @selfxyz/euclid

Peer Dependencies

This library requires the following peer dependencies:

{
  "react": ">=18.2.0",
  "react-native": ">=0.72.0"
}

Usage

import { Button, Card } from '@selfxyz/euclid';

const App = () => {
  return (
    <Card variant="elevated" padding="md">
      <Button
        title="Click Me"
        onPress={() => console.log('Pressed')}
        variant="primary"
        size="medium"
      />
    </Card>
  );
};

Components

Button

A versatile button component with multiple variants and sizes.

Props:

• title (string, required) - Button text
• onPress (function, required) - Press handler
• variant ('primary' | 'secondary' | 'outline') - Visual variant
• size ('small' | 'medium' | 'large') - Button size
• disabled (boolean) - Disabled state
• fullWidth (boolean) - Full width button

Card

A container component for grouping related content.

Props:

• children (ReactNode, required) - Card content
• variant ('elevated' | 'outlined' | 'filled') - Visual variant
• padding (SpacingKey) - Internal padding

Theme

Access design tokens:

import { colors, spacing, typography, borderRadius } from '@selfxyz/euclid';

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.primary,
    padding: spacing.md,
    borderRadius: borderRadius.lg,
  },
  text: {
    fontSize: typography.fontSize.md,
    fontWeight: typography.fontWeight.semibold,
  },
});

TypeScript

This library is written in TypeScript and includes type definitions.

Dependencies

We aim to have zero dependencies. First to keep the package light and second to reduce complications.

Where a certain library is needed for a UI/visiaul reason (bluring, svg) add it as a peer dependency and then as a dependency on main app. This prevents React Native "tried to register two views with same name" errors.

License

Business Source License 1.1 See LICENSE.MD