onecart-ui 1.0.1

package/src/theme/index.ts

@@ -0,0 +1,107 @@
+export interface ThemeColors {
+  primary: string;
+  secondary: string;
+  background: string;
+  surface: string;
+  text: string;
+  textSecondary: string;
+  border: string;
+  error: string;
+  warning: string;
+  success: string;
+}
+
+export interface ThemeSpacing {
+  xs: number;
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+}
+
+export interface ThemeBorderRadius {
+  none: number;
+  sm: number;
+  md: number;
+  lg: number;
+  full: number;
+}
+
+export interface ThemeTypography {
+  fontSize: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+  };
+  fontWeight: {
+    normal: '400' | 'normal';
+    medium: '500' | 'medium';
+    semibold: '600' | 'semibold';
+    bold: '700' | 'bold';
+  };
+  lineHeight: {
+    tight: number;
+    normal: number;
+    relaxed: number;
+  };
+}
+
+export interface Theme {
+  colors: ThemeColors;
+  spacing: ThemeSpacing;
+  borderRadius: ThemeBorderRadius;
+  typography: ThemeTypography;
+}
+
+export const defaultTheme: Theme = {
+  colors: {
+    primary: '#007AFF',
+    secondary: '#5856D6',
+    background: '#FFFFFF',
+    surface: '#F2F2F7',
+    text: '#000000',
+    textSecondary: '#8E8E93',
+    border: '#E5E5EA',
+    error: '#FF3B30',
+    warning: '#FF9500',
+    success: '#34C759',
+  },
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 16,
+    lg: 24,
+    xl: 32,
+  },
+  borderRadius: {
+    none: 0,
+    sm: 4,
+    md: 8,
+    lg: 12,
+    full: 9999,
+  },
+  typography: {
+    fontSize: {
+      xs: 12,
+      sm: 14,
+      md: 16,
+      lg: 18,
+      xl: 20,
+      xxl: 24,
+    },
+    fontWeight: {
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700',
+    },
+    lineHeight: {
+      tight: 1.2,
+      normal: 1.5,
+      relaxed: 1.8,
+    },
+  },
+};

package/src/types/Button.ts

@@ -0,0 +1,56 @@
+export interface ButtonProps {
+  /**
+   * The content to display inside the button
+   */
+  children: React.ReactNode;
+
+  /**
+   * The variant of the button
+   */
+  variant?: "primary" | "secondary" | "outline" | "ghost";
+
+  /**
+   * The size of the button
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Whether the button is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Whether the button should take full width
+   */
+  fullWidth?: boolean;
+
+  /**
+   * Loading state
+   */
+  loading?: boolean;
+
+  /**
+   * Custom style override
+   */
+  style?: import("react-native").ViewStyle;
+
+  /**
+   * Custom text style override
+   */
+  textStyle?: import("react-native").TextStyle;
+
+  /**
+   * Accessibility label
+   */
+  accessibilityLabel?: string;
+
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+
+  /**
+   * Press handler
+   */
+  onPress?: () => void;
+}

package/src/types/Heading.ts

@@ -0,0 +1,27 @@
+import { TypographyProps } from "./Typography";
+
+/**
+ * Heading levels corresponding to HTML heading elements
+ */
+export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+/**
+ * Heading component props
+ */
+export interface HeadingProps extends Omit<TypographyProps, "variant"> {
+  /**
+   * The heading level
+   * @default 'h2'
+   */
+  level?: HeadingLevel;
+
+  /**
+   * Optional subtitle to display below the heading
+   */
+  subtitle?: React.ReactNode;
+
+  /**
+   * Props to pass to the subtitle Typography component
+   */
+  subtitleProps?: Omit<TypographyProps, "children">;
+}

package/src/types/Paragraph.ts

@@ -0,0 +1,40 @@
+import { TextProps } from "./Text";
+
+/**
+ * Paragraph size options
+ */
+export type ParagraphSize = "xs" | "sm" | "md" | "lg";
+
+/**
+ * Paragraph spacing options
+ */
+export type ParagraphSpacing = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+
+/**
+ * Paragraph component props
+ */
+export interface ParagraphProps extends TextProps {
+  /**
+   * Size of the paragraph text
+   * @default 'md'
+   */
+  size?: ParagraphSize;
+
+  /**
+   * Spacing below the paragraph
+   * @default 'md'
+   */
+  spacing?: ParagraphSpacing;
+
+  /**
+   * Whether to indent the first line of the paragraph
+   * @default false
+   */
+  firstLineIndent?: boolean;
+
+  /**
+   * Whether to apply a drop cap style to the first letter
+   * @default false
+   */
+  dropCap?: boolean;
+}

package/src/types/Text.ts

@@ -0,0 +1,40 @@
+import { TypographyProps } from "./Typography";
+
+/**
+ * Text component props extending Typography props with additional features
+ */
+export interface TextProps extends TypographyProps {
+  /**
+   * Whether the text should be underlined
+   * @default false
+   */
+  underline?: boolean;
+
+  /**
+   * Whether the text should have a strikethrough line
+   * @default false
+   */
+  strikethrough?: boolean;
+
+  /**
+   * Whether the text should be italic
+   * @default false
+   */
+  italic?: boolean;
+
+  /**
+   * Whether the text should be styled as a link
+   * @default false
+   */
+  link?: boolean;
+
+  /**
+   * Callback function when the link is pressed
+   * Only used when link prop is true
+   */
+  onLinkPress?: () => void;
+
+  /**
+   * Additional props from Typography component are inherited
+   */
+}

package/src/types/Typography.ts

@@ -0,0 +1,94 @@
+import { TextProps } from "react-native";
+
+/**
+ * Typography variants
+ */
+export type TypographyVariant =
+  // Display variants - Used for large headlines and intro sections
+  | "display2xl"
+  | "displayXl"
+  // Heading variants - Used for section headings
+  | "headingXl"
+  | "headingLg"
+  | "headingMd"
+  | "headingSm"
+  | "headingXs"
+  // Body text variants - Used for paragraphs and content
+  | "bodyLg"
+  | "bodyMd"
+  | "bodySm"
+  | "bodyXs"
+  // Label variants - Used for form labels, captions, etc.
+  | "labelLg"
+  | "labelMd"
+  | "labelSm";
+
+/**
+ * Text alignment options
+ */
+export type TypographyAlign = "left" | "center" | "right";
+
+/**
+ * Font weight options
+ */
+export type TypographyWeight = "normal" | "medium" | "semibold" | "bold";
+
+/**
+ * Typography component props
+ */
+export interface TypographyProps extends Omit<TextProps, "children"> {
+  /**
+   * The content to display
+   */
+  children?: React.ReactNode;
+
+  /**
+   * The typography variant to use
+   * @default 'bodyMd'
+   */
+  variant?: TypographyVariant;
+
+  /**
+   * Text alignment
+   * @default 'left'
+   */
+  align?: TypographyAlign;
+
+  /**
+   * Font weight
+   */
+  weight?: TypographyWeight;
+
+  /**
+   * Text color
+   * If not provided, uses variant's default color from theme
+   */
+  color?: string;
+
+  /**
+   * Whether to truncate text with ellipsis if it overflows
+   * @default false
+   */
+  truncate?: boolean;
+
+  /**
+   * Maximum number of lines before truncating
+   * If not provided, text will not be truncated
+   */
+  numberOfLines?: number;
+
+  /**
+   * Additional custom styles for the text
+   */
+  style?: TextProps["style"];
+
+  /**
+   * Accessibility label for screen readers
+   */
+  accessibilityLabel?: string;
+
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+}