onecart-ui-components 0.1.0

package/dist/src/styles/tokens/typography.d.ts

@@ -0,0 +1,138 @@
+export declare const typographyTokens: {
+    display2xl: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+    displayXl: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+    headingXl: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+    headingLg: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+    headingMd: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+    headingSm: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+    headingXs: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+    heading2xs: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+    bodyXl: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+    bodyLg: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+    bodyMd: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+    bodySm: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+    labelLg: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+    labelMd: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+    labelSm: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+};
+export type TypographyTokenMap = typeof typographyTokens;

package/dist/src/theme/ThemeProvider.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare const ThemeContext: React.Context<{}>;
+export declare const ThemeProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/src/tokens/design-tokens.d.ts

@@ -0,0 +1,54 @@
+export declare const buttonTokens: {
+    primary: {
+        default: string;
+        hover: string;
+        active: string;
+        disabled: string;
+    };
+    secondary: {
+        default: string;
+        hover: string;
+        active: string;
+        disabled: string;
+    };
+    outline: {
+        borderDefault: string;
+        borderHover: string;
+        borderActive: string;
+        text: {
+            default: string;
+            hover: string;
+            active: string;
+            disabled: string;
+        };
+    };
+    ghost: {
+        text: {
+            default: string;
+            hover: string;
+            active: string;
+            disabled: string;
+        };
+    };
+    destructive: {
+        text: {
+            default: string;
+            hover: string;
+            active: string;
+            disabled: string;
+        };
+    };
+    spacing: {
+        none: string | number;
+        cardSm: string;
+        gapMd: string;
+        gapXs: string;
+    };
+    radius: string;
+    typography: {
+        family: string;
+        weightMedium: string | number;
+    };
+    neutralText: string;
+};
+export type ButtonTokenMap = typeof buttonTokens;

package/dist/styles/tokens/typography.d.ts

@@ -0,0 +1,138 @@
+export declare const typographyTokens: {
+    display2xl: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+    displayXl: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+    headingXl: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+    headingLg: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+    headingMd: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+    headingSm: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+    headingXs: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+    heading2xs: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+    bodyXl: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+    bodyLg: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+    bodyMd: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+    bodySm: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+    labelLg: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+    labelMd: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+    labelSm: {
+        fontFamily: string;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        color: string;
+        letterSpacing: string;
+        textDecoration: string;
+    };
+};
+export type TypographyTokenMap = typeof typographyTokens;

package/dist/theme/ThemeProvider.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare const ThemeContext: React.Context<{}>;
+export declare const ThemeProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/tokens/design-tokens.d.ts

@@ -0,0 +1,54 @@
+export declare const buttonTokens: {
+    primary: {
+        default: string;
+        hover: string;
+        active: string;
+        disabled: string;
+    };
+    secondary: {
+        default: string;
+        hover: string;
+        active: string;
+        disabled: string;
+    };
+    outline: {
+        borderDefault: string;
+        borderHover: string;
+        borderActive: string;
+        text: {
+            default: string;
+            hover: string;
+            active: string;
+            disabled: string;
+        };
+    };
+    ghost: {
+        text: {
+            default: string;
+            hover: string;
+            active: string;
+            disabled: string;
+        };
+    };
+    destructive: {
+        text: {
+            default: string;
+            hover: string;
+            active: string;
+            disabled: string;
+        };
+    };
+    spacing: {
+        none: string | number;
+        cardSm: string;
+        gapMd: string;
+        gapXs: string;
+    };
+    radius: string;
+    typography: {
+        family: string;
+        weightMedium: string | number;
+    };
+    neutralText: string;
+};
+export type ButtonTokenMap = typeof buttonTokens;

package/dist/types/Button.d.ts

@@ -0,0 +1,24 @@
+export type ButtonType = "primary" | "outline" | "ghost" | "destructive";
+export type ButtonSize = "large" | "small";
+export type ButtonState = "default" | "hover" | "active" | "disabled";
+export interface ButtonProps {
+    label: string;
+    type?: ButtonType;
+    size?: ButtonSize;
+    disabled?: boolean;
+    leftIcon?: string;
+    rightIcon?: string;
+    icon?: string;
+    fullWidth?: boolean;
+    ghostUnderline?: boolean;
+    accessibilityLabel?: string;
+    testID?: string;
+    className?: string;
+    style?: React.CSSProperties | Record<string, unknown>;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onPress?: () => void;
+    onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseLeave?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseDown?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseUp?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}

package/dist/types/Typography.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+export type BodySize = "xl" | "lg" | "md" | "sm";
+export interface BaseTypographyProps {
+    align?: "left" | "center" | "right";
+    color?: string;
+    truncate?: boolean;
+    lineClamp?: number;
+    className?: string;
+    style?: React.CSSProperties | Record<string, unknown>;
+    onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+    testID?: string;
+    children?: React.ReactNode;
+}
+export interface BodyProps extends BaseTypographyProps {
+    size?: BodySize;
+    element?: keyof JSX.IntrinsicElements;
+}
+export type DisplaySize = "2xl" | "xl";
+export interface DisplayProps extends BaseTypographyProps {
+    size?: DisplaySize;
+    element?: keyof JSX.IntrinsicElements;
+}
+export type HeadingSize = "xl" | "lg" | "md" | "sm" | "xs" | "2xs";
+export interface HeadingProps extends BaseTypographyProps {
+    size?: HeadingSize;
+    element?: keyof JSX.IntrinsicElements;
+}
+export type UtilityVariant = "button" | "link" | "caption";
+export interface UtilityProps extends BaseTypographyProps {
+    variant?: UtilityVariant;
+    element?: keyof JSX.IntrinsicElements;
+}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "onecart-ui-components",
+  "version": "0.1.0",
+  "description": "Cross-platform React + React Native component library for OneCart UI",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/src/index.d.ts",
+  "react-native": "dist/index.mobile.js",
+  "scripts": {
+    "build": "rollup -c && tsc -p tsconfig.json --emitDeclarationOnly",
+    "dev": "tsc -p tsconfig.json -w",
+    "lint": "eslint src --ext .ts,.tsx",
+    "test": "jest"
+  },
+  "dependencies": {
+    "onecart-ui-tokens": "*"
+  },
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "^0.74.0"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^18.2.34",
+    "@types/react-dom": "^18.2.14",
+    "@typescript-eslint/eslint-plugin": "^6.7.0",
+    "@typescript-eslint/parser": "^6.7.0",
+    "babel-jest": "^29.7.0",
+    "eslint": "^8.57.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.4.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/src/index.d.ts"
+    },
+    "./mobile": {
+      "react-native": "./dist/index.mobile.js",
+      "import": "./dist/index.mobile.js",
+      "types": "./dist/mobile/index.d.ts"
+    }
+  }
+}