onecart-ui 1.0.1

package/dist/types/Button.d.ts

@@ -0,0 +1,47 @@
+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;
+}
+//# sourceMappingURL=Button.d.ts.map

package/dist/types/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/types/Button.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;IAExD;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,cAAc,EAAE,SAAS,CAAC;IAEzC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,cAAc,EAAE,SAAS,CAAC;IAE7C;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB"}

package/dist/types/Heading.d.ts

@@ -0,0 +1,24 @@
+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">;
+}
+//# sourceMappingURL=Heading.d.ts.map

package/dist/types/Heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/types/Heading.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnE;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC;IACpE;;;OAGG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,aAAa,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;CACnD"}

package/dist/types/Paragraph.d.ts

@@ -0,0 +1,35 @@
+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;
+}
+//# sourceMappingURL=Paragraph.d.ts.map

package/dist/types/Paragraph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Paragraph.d.ts","sourceRoot":"","sources":["../../src/types/Paragraph.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtD;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzE;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAE3B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

package/dist/types/Text.d.ts

@@ -0,0 +1,32 @@
+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;
+}
+//# sourceMappingURL=Text.d.ts.map

package/dist/types/Text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../src/types/Text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,eAAe;IAChD;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAK1B"}

package/dist/types/Typography.d.ts

@@ -0,0 +1,64 @@
+import { TextProps } from "react-native";
+/**
+ * Typography variants
+ */
+export type TypographyVariant = "display2xl" | "displayXl" | "headingXl" | "headingLg" | "headingMd" | "headingSm" | "headingXs" | "bodyLg" | "bodyMd" | "bodySm" | "bodyXs" | "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;
+}
+//# sourceMappingURL=Typography.d.ts.map

package/dist/types/Typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../src/types/Typography.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAEzB,YAAY,GACZ,WAAW,GAEX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GAEX,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,QAAQ,GAER,SAAS,GACT,SAAS,GACT,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE1D;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAEzE;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAClE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IAExB;;OAEG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAE1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAE3B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "onecart-ui",
+  "version": "1.0.1",
+  "description": "Cross-platform React and React Native component library with white-label support",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "react-native": "src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "build:watch": "rollup -c -w",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx",
+    "test": "jest",
+    "dev": "npm run build:watch",
+    "generate-tokens": "npx figma-token-engine",
+    "prepublishOnly": "npm run build",
+    "prepare": "npm run build",
+    "publish:npm": "npm publish --access public"
+  },
+  "keywords": [
+    "react",
+    "react-native",
+    "components",
+    "ui",
+    "cross-platform",
+    "white-label"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@storybook/addon-docs": "^9.0.4",
+    "@storybook/addon-onboarding": "^9.0.4",
+    "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
+    "@storybook/react-webpack5": "^9.0.4",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.6",
+    "@types/react-dom": "^19.1.5",
+    "@types/react-native": "^0.72.8",
+    "@typescript-eslint/eslint-plugin": "^8.33.0",
+    "@typescript-eslint/parser": "^8.33.0",
+    "eslint": "^9.28.0",
+    "eslint-plugin-storybook": "^9.0.4",
+    "jest": "^29.7.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "rollup": "^2.79.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-terser": "^7.0.2",
+    "storybook": "^9.0.4",
+    "ts-jest": "^29.3.4",
+    "typescript": "^5.8.3"
+  },
+  "dependencies": {
+    "figma-token-engine": "^0.3.0",
+    "react-native-web": "^0.20.0",
+    "style-dictionary": "^4.4.0"
+  }
+}

package/src/components/Button/Button.tsx

@@ -0,0 +1,155 @@
+import React from "react";
+import {
+  TouchableOpacity,
+  Text,
+  ActivityIndicator,
+  ViewStyle,
+  TextStyle,
+} from "react-native";
+import { buttonTokens } from "../../styles/tokens";
+import { ButtonProps } from "../../types/Button";
+
+export const Button: React.FC<ButtonProps> = ({
+  children,
+  variant = "primary",
+  size = "md",
+  disabled = false,
+  fullWidth = false,
+  loading = false,
+  style,
+  textStyle,
+  accessibilityLabel,
+  testID,
+  onPress,
+}) => {
+  // Calculate variant styles
+  const variantStyles = React.useMemo(() => {
+    try {
+      const sizeConfig = buttonTokens.sizes[size];
+      const variantConfig = buttonTokens[variant];
+
+      const baseStyle: ViewStyle = {
+        borderRadius: sizeConfig.borderRadius,
+        borderWidth: buttonTokens.common.borderWidth,
+        alignItems: "center",
+        justifyContent: "center",
+        flexDirection: "row",
+      };
+
+      return {
+        ...baseStyle,
+        backgroundColor: disabled
+          ? variantConfig.background.disabled
+          : variantConfig.background.default,
+        borderColor: disabled
+          ? variantConfig.border.disabled
+          : variantConfig.border.default,
+      };
+    } catch (error) {
+      // Fallback styles
+      return {
+        backgroundColor: variant === "primary" ? "#007AFF" : "transparent",
+        borderColor: variant === "primary" ? "#007AFF" : "#E5E5EA",
+        borderWidth: 1,
+        borderRadius: 4,
+        alignItems: "center",
+        justifyContent: "center",
+        flexDirection: "row",
+      };
+    }
+  }, [variant, size, disabled]);
+
+  // Calculate size styles
+  const sizeStyles = React.useMemo(() => {
+    try {
+      const sizeConfig = buttonTokens.sizes[size];
+      return {
+        paddingHorizontal: sizeConfig.paddingHorizontal,
+        paddingVertical: sizeConfig.paddingVertical,
+        minHeight: sizeConfig.minHeight,
+      };
+    } catch (error) {
+      // Fallback styles
+      return {
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        minHeight: size === "sm" ? 32 : size === "lg" ? 48 : 40,
+      };
+    }
+  }, [size]);
+
+  // Calculate text styles
+  const textStyles = React.useMemo(() => {
+    try {
+      const sizeConfig = buttonTokens.sizes[size];
+      const variantConfig = buttonTokens[variant];
+
+      const baseTextStyle: TextStyle = {
+        fontSize: sizeConfig.fontSize,
+        fontWeight: buttonTokens.common.fontWeight as any,
+        lineHeight: buttonTokens.common.lineHeight,
+        color: disabled
+          ? variantConfig.text.disabled
+          : variantConfig.text.default,
+      };
+
+      return {
+        ...baseTextStyle,
+        ...textStyle,
+      };
+    } catch (error) {
+      // Fallback styles
+      return {
+        fontSize: size === "sm" ? 12 : size === "lg" ? 18 : 16,
+        fontWeight: "500",
+        color: disabled
+          ? "#8E8E93"
+          : variant === "primary"
+            ? "#FFFFFF"
+            : "#007AFF",
+        ...textStyle,
+      };
+    }
+  }, [variant, size, disabled, textStyle]);
+
+  // Handle button press
+  const handlePress = React.useCallback(() => {
+    if (!disabled && !loading && onPress) {
+      onPress();
+    }
+  }, [disabled, loading, onPress]);
+
+  // Combine all styles
+  const buttonStyles = React.useMemo(
+    () => ({
+      ...variantStyles,
+      ...sizeStyles,
+      ...(fullWidth && { width: "100%" }),
+      ...(disabled && { opacity: 0.6 }),
+      ...style,
+    }),
+    [variantStyles, sizeStyles, fullWidth, disabled, style]
+  );
+
+  return (
+    <TouchableOpacity
+      style={buttonStyles}
+      onPress={handlePress}
+      disabled={disabled || loading}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="button"
+      testID={testID}
+    >
+      {loading && (
+        <ActivityIndicator
+          size="small"
+          color={
+            typeof textStyles.color === "string" ? textStyles.color : "#000000"
+          }
+          style={{ marginRight: 8 }}
+        />
+      )}
+      <Text style={textStyles}>{children}</Text>
+    </TouchableOpacity>
+  );
+};

package/src/components/Button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps } from '../../types/Button';

package/src/components/Heading/Heading.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import * as tokens from "../../styles/tokens/tokens";
+import { HeadingProps } from "../../types/Heading";
+import { Typography } from "../Typography";
+
+const headingLevelToVariant = {
+  h1: "headingXl",
+  h2: "headingLg",
+  h3: "headingMd",
+  h4: "headingSm",
+  h5: "headingXs",
+  h6: "headingXs",
+};
+
+export const Heading: React.FC<HeadingProps> = ({
+  children,
+  level = "h2",
+  subtitle,
+  subtitleProps,
+  ...rest
+}) => {
+  const variant = headingLevelToVariant[level];
+
+  return (
+    <>
+      <Typography variant={variant} accessibilityRole={level} {...rest}>
+        {children}
+      </Typography>
+
+      {subtitle && (
+        <Typography
+          variant="bodySm"
+          color={tokens.TEXT_TERTIARY}
+          style={{
+            marginTop: tokens.LAYOUT_SPACING_STACK_XS
+              ? parseInt(tokens.LAYOUT_SPACING_STACK_XS)
+              : 4,
+          }}
+          {...subtitleProps}
+        >
+          {subtitle}
+        </Typography>
+      )}
+    </>
+  );
+};
+
+export default Heading;

package/src/components/Heading/index.ts

@@ -0,0 +1,2 @@
+export { Heading } from './Heading';
+export type { HeadingProps, HeadingLevel } from '../../types/Heading';

package/src/components/Paragraph/Paragraph.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import { View } from "react-native";
+import * as tokens from "../../styles/tokens/tokens";
+import { ParagraphProps } from "../../types/Paragraph";
+import { remToNumber } from "../../styles/tokens/utils/utils";
+import { Text } from "../Text";
+
+export const Paragraph: React.FC<ParagraphProps> = ({
+  children,
+  size = "md",
+  spacing = "md",
+  firstLineIndent = false,
+  dropCap = false,
+  style,
+  ...rest
+}) => {
+  const getVariant = () => {
+    switch (size) {
+      case "xs":
+        return "bodyXs";
+      case "sm":
+        return "bodySm";
+      case "lg":
+        return "bodyLg";
+      case "md":
+      default:
+        return "bodyMd";
+    }
+  };
+
+  const getMarginBottom = () => {
+    switch (spacing) {
+      case "none":
+        return tokens.LAYOUT_SPACING_STACK_NONE;
+      case "xs":
+        return remToNumber(tokens.LAYOUT_SPACING_STACK_XS);
+      case "sm":
+        return remToNumber(tokens.LAYOUT_SPACING_STACK_SM);
+      case "lg":
+        return remToNumber(tokens.LAYOUT_SPACING_STACK_LG);
+      case "xl":
+        return remToNumber(tokens.LAYOUT_SPACING_STACK_XL);
+      case "md":
+      default:
+        return remToNumber(tokens.LAYOUT_SPACING_STACK_MD);
+    }
+  };
+
+  const paragraphStyle = {
+    marginBottom: getMarginBottom(),
+    ...(firstLineIndent
+      ? {
+          textIndent: remToNumber(tokens.LAYOUT_SPACING_INLINE_MD) || 20,
+        }
+      : {}),
+    ...style,
+  };
+
+  if (dropCap && typeof children === "string" && children.length > 0) {
+    const firstChar = children.charAt(0);
+    const restOfText = children.slice(1);
+
+    return (
+      <View style={paragraphStyle}>
+        <View style={{ flexDirection: "row", alignItems: "flex-start" }}>
+          <Text
+            variant="headingLg"
+            style={{
+              lineHeight: 1,
+              marginRight:
+                remToNumber(tokens.LAYOUT_SPACING_INLINE_2XS) / 4 || 2,
+              marginTop: -2,
+            }}
+            {...rest}
+          >
+            {firstChar}
+          </Text>
+          <Text variant={getVariant()} {...rest}>
+            {restOfText}
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <Text variant={getVariant()} style={paragraphStyle} {...rest}>
+      {children}
+    </Text>
+  );
+};
+
+export default Paragraph;

package/src/components/Paragraph/index.ts

@@ -0,0 +1,6 @@
+export { Paragraph } from "./Paragraph";
+export type {
+  ParagraphProps,
+  ParagraphSize,
+  ParagraphSpacing,
+} from "../../types/Paragraph";