onecart-ui 1.0.1

package/README.md

@@ -0,0 +1,351 @@
+# Getting Started with @onecart/ui
+
+Welcome to @onecart/ui – a comprehensive cross-platform system built for React and React Native applications. This component library is powered by Figma Design Tokens and provides a consistent component experience across platforms.
+
+## Installation
+
+```bash
+# Using npm
+npm install @onecart/ui react react-native react-native-web
+
+# Using yarn
+yarn add @onecart/ui react react-native react-native-web
+```
+
+## Basic Setup
+
+First, wrap your application with the `ThemeProvider`:
+
+```tsx
+import React from "react";
+import { ThemeProvider } from "@onecart/ui";
+
+function App() {
+  return <ThemeProvider>{/* Your app content */}</ThemeProvider>;
+}
+
+export default App;
+```
+
+This will provide the default theme to all components in the library.
+
+## Component Overview
+
+### The Typography Pyramid
+
+The typography system consists of four main components that build on top of each other:
+
+1. **Typography**: The base component for all text rendering (lowest level)
+2. **Text**: Extends Typography with decorations and link functionality
+3. **Heading**: Semantic headings with subtitle support
+4. **Paragraph**: Rich text blocks with spacing and formatting options
+
+## Practical Examples
+
+### Creating a Landing Page Header
+
+```tsx
+import { Heading, Text, Paragraph } from "@onecart/ui";
+
+function LandingPageHeader() {
+  return (
+    <div>
+      <Heading level="h1">Transform Your Design System</Heading>
+      <Text variant="labelLg" color="#666666">
+        Powered by Figma Design Tokens
+      </Text>
+
+      <Paragraph spacing="lg">
+        Build consistent, accessible interfaces across React and React Native
+        with our comprehensive typography system.
+      </Paragraph>
+    </div>
+  );
+}
+```
+
+### Interactive Form with Typography
+
+```tsx
+import { Heading, Text, Paragraph } from "@onecart/ui";
+import { View, TextInput, Button } from "react-native";
+
+function SignupForm() {
+  return (
+    <View style={{ maxWidth: 400, padding: 24 }}>
+      <Heading level="h2">Create Account</Heading>
+      <Paragraph spacing="lg">
+        Join thousands of developers building cross-platform apps.
+      </Paragraph>
+
+      <View style={{ marginBottom: 16 }}>
+        <Text variant="labelMd" style={{ marginBottom: 4 }}>
+          Email Address
+        </Text>
+        <TextInput
+          style={{
+            borderWidth: 1,
+            borderColor: "#ccc",
+            padding: 8,
+            borderRadius: 4,
+          }}
+          placeholder="you@example.com"
+        />
+      </View>
+
+      <View style={{ marginBottom: 24 }}>
+        <Text variant="labelMd" style={{ marginBottom: 4 }}>
+          Password
+        </Text>
+        <TextInput
+          style={{
+            borderWidth: 1,
+            borderColor: "#ccc",
+            padding: 8,
+            borderRadius: 4,
+          }}
+          placeholder="••••••••"
+          secureTextEntry
+        />
+        <Text variant="bodyXs" color="#666666" style={{ marginTop: 4 }}>
+          Must be at least 8 characters
+        </Text>
+      </View>
+
+      <Button title="Sign Up" onPress={() => {}} />
+    </View>
+  );
+}
+```
+
+### Typography Components in Detail
+
+#### Typography
+
+The foundational text component:
+
+```tsx
+import { Typography } from "@onecart/ui";
+
+function TypographyExamples() {
+  return (
+    <>
+      <Typography>Default body text</Typography>
+      <Typography variant="displayXl">Display XL</Typography>
+      <Typography variant="headingLg">Large heading</Typography>
+      <Typography variant="bodySm">Small body text</Typography>
+      <Typography weight="bold">Bold text</Typography>
+      <Typography align="center">Centered text</Typography>
+    </>
+  );
+}
+```
+
+### Text
+
+Enhanced text component with decorations and link support:
+
+```tsx
+import { Text } from "@onecart/ui";
+
+function TextExamples() {
+  return (
+    <>
+      <Text>Regular text</Text>
+      <Text underline>Underlined text</Text>
+      <Text strikethrough>Strikethrough text</Text>
+      <Text italic>Italic text</Text>
+      <Text weight="bold">Bold text</Text>
+      <Text underline italic>
+        Underlined italic text
+      </Text>
+      <Text link onLinkPress={() => console.log("Link clicked")}>
+        This is a link
+      </Text>
+    </>
+  );
+}
+```
+
+### Heading
+
+Semantic heading component for page and section titles:
+
+```tsx
+import { Heading } from '@onecart/ui';
+
+function HeadingExamples() {
+  return (
+    <>
+      <Heading level="h1">Page Title</Heading>
+      <Heading level="h2" subtitle="More information about this section">
+        Section Title
+      </Heading>
+      <Heading level="h3" align="center" color="#0066CC">
+        Centered Blue Heading
+      </Heading>
+        Section Title
+      </Heading>
+      <Heading
+        level="h3"
+        align="center"
+        color="#0066CC"
+      >
+        Customized Heading
+      </Heading>
+    </>
+  );
+}
+```
+
+### Paragraph
+
+Rich text paragraphs with formatting options:
+
+```tsx
+import { Paragraph, Text } from "@onecart/ui";
+
+function Example() {
+  return (
+    <>
+      <Paragraph>Regular paragraph with default spacing.</Paragraph>
+
+      <Paragraph size="lg" spacing="xl">
+        Large paragraph text with extra large bottom spacing.
+      </Paragraph>
+
+      <Paragraph firstLineIndent={true}>
+        This paragraph has its first line indented, which is common in printed
+        books and formal documents.
+      </Paragraph>
+
+      <Paragraph>
+        You can also include <Text weight="bold">formatted text</Text> within
+        paragraphs for <Text italic>rich content</Text>.
+      </Paragraph>
+    </>
+  );
+}
+```
+
+## Custom Theming
+
+You can customize the theme to match your brand:
+
+```tsx
+import { ThemeProvider } from "@onecart/ui";
+
+// Define custom theme
+const brandTheme = {
+  colors: {
+    primary: "#8E24AA",
+    text: {
+      primary: "#212121",
+      secondary: "#616161",
+      header: "#000000",
+    },
+  },
+  typography: {
+    fontFamily: {
+      base: "Roboto",
+      heading: "Roboto Condensed",
+    },
+  },
+};
+
+function App() {
+  return (
+    <ThemeProvider theme={brandTheme}>
+      {/* Your themed app content */}
+    </ThemeProvider>
+  );
+}
+```
+
+## Complete Application Example
+
+Here's a complete example of a simple article page using all typography components:
+
+```tsx
+import React from "react";
+import { View, ScrollView } from "react-native";
+import { ThemeProvider, Heading, Text, Paragraph } from "@onecart/ui";
+
+function ArticlePage() {
+  return (
+    <ThemeProvider>
+      <ScrollView style={{ padding: 16, maxWidth: 800, margin: "0 auto" }}>
+        <Heading level="h1">Typography System in Design</Heading>
+
+        <Text
+          variant="labelMd"
+          color="textSecondary"
+          style={{ marginBottom: 24 }}
+        >
+          Posted by Sarah Chen • June 2, 2025 • 5 min read
+        </Text>
+
+        <Paragraph spacing="lg">
+          Typography is the foundation of any good design system. It establishes
+          hierarchy, improves readability, and creates visual harmony across
+          your interfaces.
+        </Paragraph>
+
+        <Heading level="h2">The Importance of Consistency</Heading>
+        <Paragraph>
+          When designing cross-platform applications, maintaining consistency
+          becomes even more crucial. Users expect a cohesive experience
+          regardless of whether they're using your web app or mobile app.
+        </Paragraph>
+
+        <Paragraph spacing="lg">
+          The <Text weight="bold">@onecart/ui</Text> library solves this by
+          providing a comprehensive typography system that works seamlessly
+          across React and React Native, all powered by{" "}
+          <Text italic>Figma Design Tokens</Text>.
+        </Paragraph>
+
+        <View
+          style={{
+            padding: 16,
+            backgroundColor: "#f5f5f5",
+            borderRadius: 8,
+            marginBottom: 24,
+          }}
+        >
+          <Heading level="h3" style={{ marginTop: 0 }}>
+            Key Benefits
+          </Heading>
+          <Paragraph>
+            • <Text weight="bold">Cross-platform consistency</Text>
+          </Paragraph>
+          <Paragraph>
+            • <Text weight="bold">Semantic markup</Text> for accessibility
+          </Paragraph>
+          <Paragraph>
+            • <Text weight="bold">Token-based styling</Text> for themability
+          </Paragraph>
+          <Paragraph>
+            • <Text weight="bold">Responsive</Text> out of the box
+          </Paragraph>
+        </View>
+
+        <Heading level="h2">Getting Started</Heading>
+        <Paragraph spacing="lg">
+          To implement this typography system in your project, simply install
+          the package and wrap your application with the{" "}
+          <Text weight="semibold">ThemeProvider</Text>. Then, you can start
+          using the various typography components throughout your app.
+        </Paragraph>
+
+        <Paragraph>
+          For more information, visit our <Text link>documentation site</Text>{" "}
+          or check out our <Text link>Storybook examples</Text>.
+        </Paragraph>
+      </ScrollView>
+    </ThemeProvider>
+  );
+}
+
+export default ArticlePage;
+```

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ButtonProps } from "../../types/Button";
+export declare const Button: React.FC<ButtonProps>;
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA+IxC,CAAC"}

package/dist/components/Button/index.d.ts

@@ -0,0 +1,3 @@
+export { Button } from './Button';
+export type { ButtonProps } from '../../types/Button';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/Heading/Heading.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { HeadingProps } from "../../types/Heading";
+export declare const Heading: React.FC<HeadingProps>;
+export default Heading;
+//# sourceMappingURL=Heading.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../src/components/Heading/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAYnD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA+B1C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/Heading/index.d.ts

@@ -0,0 +1,3 @@
+export { Heading } from './Heading';
+export type { HeadingProps, HeadingLevel } from '../../types/Heading';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Heading/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Heading/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/Paragraph/Paragraph.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { ParagraphProps } from "../../types/Paragraph";
+export declare const Paragraph: React.FC<ParagraphProps>;
+export default Paragraph;
+//# sourceMappingURL=Paragraph.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Paragraph.d.ts","sourceRoot":"","sources":["../../../src/components/Paragraph/Paragraph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAIvD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAmF9C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/Paragraph/index.d.ts

@@ -0,0 +1,3 @@
+export { Paragraph } from "./Paragraph";
+export type { ParagraphProps, ParagraphSize, ParagraphSpacing, } from "../../types/Paragraph";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Paragraph/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Paragraph/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EACV,cAAc,EACd,aAAa,EACb,gBAAgB,GACjB,MAAM,uBAAuB,CAAC"}

package/dist/components/Text/Text.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { TextProps } from "../../types/Text";
+export declare const Text: React.FC<TextProps>;
+export default Text;
+//# sourceMappingURL=Text.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAsFpC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/Text/index.d.ts

@@ -0,0 +1,3 @@
+export { Text } from "./Text";
+export type { TextProps } from "../../types/Text";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Text/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/Typography/Typography.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { TypographyProps } from "../../types/Typography";
+export declare const Typography: React.FC<TypographyProps>;
+export default Typography;
+//# sourceMappingURL=Typography.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgHhD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/Typography/index.d.ts

@@ -0,0 +1,3 @@
+export { Typography } from "./Typography";
+export type { TypographyProps, TypographyVariant, TypographyAlign, TypographyWeight, } from "../../types/Typography";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Typography/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EACV,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,gBAAgB,GACjB,MAAM,wBAAwB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export { Button } from "./components/Button";
+export { Typography } from "./components/Typography";
+export { Text } from "./components/Text";
+export { Heading } from "./components/Heading";
+export { Paragraph } from "./components/Paragraph";
+export type { ButtonProps } from "./types/Button";
+export type { TypographyProps, TypographyVariant, TypographyAlign, TypographyWeight, } from "./types/Typography";
+export type { TextProps } from "./types/Text";
+export type { HeadingProps, HeadingLevel } from "./types/Heading";
+export type { ParagraphProps, ParagraphSize, ParagraphSpacing, } from "./types/Paragraph";
+export { ThemeProvider, useTheme } from "./theme/ThemeProvider";
+export { defaultTheme, type Theme, type ThemeColors, type ThemeSpacing, type ThemeBorderRadius, type ThemeTypography, } from "./theme";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAGnD,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,YAAY,EACV,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,gBAAgB,GACjB,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9C,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAClE,YAAY,EACV,cAAc,EACd,aAAa,EACb,gBAAgB,GACjB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEhE,OAAO,EACL,YAAY,EACZ,KAAK,KAAK,EACV,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,iBAAiB,EACtB,KAAK,eAAe,GACrB,MAAM,SAAS,CAAC"}

package/dist/index.esm.js

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import o,{createContext as i,useContext as r}from"react";import{TouchableOpacity as a,ActivityIndicator as l,Text as s,View as d}from"react-native";const c="1rem",g="0.5rem",p="0.75rem",h="1rem",m="#525252",f="#3b3b3b",u="#111",x="#0053e2",b="#00df88",y="#4ce9ac",v="#98f2cf",S="#E5FCF3",F="#f1f1f1",z="#e2e2e2",C="#c6c6c6",H="#ababab",W="#919191",D="Campton",w="book",k="16px",L="12px",M="none",R="none",I="none",E=e=>e&&"string"==typeof e?16*parseFloat(e.replace("rem","")):0,T=e=>e&&"string"==typeof e?parseFloat(e.replace("px","")):0,A=e=>"number"==typeof e?e.toString():"book"===e?"400":e,X={display2xl:{fontFamily:"Campton",fontSize:T("52px"),fontWeight:A(500),lineHeight:T("56px"),color:u,letterSpacing:"0%",textDecoration:"none",textCase:"none"},displayXl:{fontFamily:"Campton",fontSize:T("44px"),fontWeight:A(500),lineHeight:T("48px"),color:u,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingXl:{fontFamily:"Campton",fontSize:T("40px"),fontWeight:A(600),lineHeight:T("44px"),color:u,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingLg:{fontFamily:"Campton",fontSize:T("36px"),fontWeight:A(600),lineHeight:T("40px"),color:u,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingMd:{fontFamily:"Campton",fontSize:T("32px"),fontWeight:A(600),lineHeight:T("36px"),color:u,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingSm:{fontFamily:"Campton",fontSize:T("28px"),fontWeight:A(600),lineHeight:T("32px"),color:u,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingXs:{fontFamily:"Campton",fontSize:T("20px"),fontWeight:A(600),lineHeight:T("28px"),color:u,letterSpacing:"0%",textDecoration:"none",textCase:"none"},bodyLg:{fontFamily:"Campton",fontSize:T("16px"),fontWeight:A("book"),lineHeight:T("24px"),color:f,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodyMd:{fontFamily:"Campton",fontSize:T("14px"),fontWeight:A("book"),lineHeight:T("20px"),color:f,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodySm:{fontFamily:"Campton",fontSize:T("12px"),fontWeight:A("book"),lineHeight:T("20px"),color:f,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodyXs:{fontFamily:D,fontSize:T(L),fontWeight:A(w),lineHeight:T(k),color:f,letterSpacing:"0%",textDecoration:R,textCase:M,paragraphIndent:"0px"},labelLg:{fontFamily:"Campton",fontSize:T("16px"),fontWeight:A(500),lineHeight:T("16px"),color:m,letterSpacing:"0%",textDecoration:"none",textCase:"none"},labelMd:{fontFamily:"Campton",fontSize:T("14px"),fontWeight:A(500),lineHeight:T("20px"),color:m,letterSpacing:"0%",textDecoration:I,textCase:"none"},labelSm:{fontFamily:D,fontSize:T(L),fontWeight:A(w),lineHeight:T(k),color:m,letterSpacing:"0%",textDecoration:R,textCase:M},weights:{normal:"400",medium:A(500),semibold:A(600),bold:"700"}},P=e=>e&&"string"==typeof e?16*parseFloat(e.replace("rem","")):0,j=e=>e&&"string"==typeof e?parseFloat(e.replace("px","")):0,O={primary:{background:{default:b,hover:y,active:v,disabled:S},text:{default:"#FFFFFF",disabled:W},border:{default:b,hover:y,active:v,disabled:S}},secondary:{background:{default:F,hover:z,active:C,disabled:F},text:{default:"#525252",disabled:H},border:{default:C,hover:H,active:W,disabled:z}},outline:{background:{default:"transparent",hover:S,active:v,disabled:"transparent"},text:{default:b,disabled:H},border:{default:b,hover:y,active:v,disabled:C}},ghost:{background:{default:"transparent",hover:F,active:z,disabled:"transparent"},text:{default:"#6a6a6a",disabled:H},border:{default:"transparent",hover:"transparent",active:"transparent",disabled:"transparent"}},sizes:{sm:{paddingHorizontal:P("0.75rem"),paddingVertical:P(g),fontSize:j("12px"),borderRadius:P("0.25rem"),minHeight:32},md:{paddingHorizontal:P(c),paddingVertical:P(p),fontSize:j("16px"),borderRadius:P("0.25rem"),minHeight:40},lg:{paddingHorizontal:P("2rem"),paddingVertical:P(h),fontSize:j("18px"),borderRadius:P("0.5rem"),minHeight:48}},common:{fontWeight:500,lineHeight:j("16px"),borderWidth:j("0.0625rem"),transition:"all 0.2s ease-in-out"}},V=({children:n,variant:i="primary",size:r="md",disabled:d=!1,fullWidth:c=!1,loading:g=!1,style:p,textStyle:h,accessibilityLabel:m,testID:f,onPress:u})=>{const x=o.useMemo((()=>{try{const e=O.sizes[r],t=O[i];return{...{borderRadius:e.borderRadius,borderWidth:O.common.borderWidth,alignItems:"center",justifyContent:"center",flexDirection:"row"},backgroundColor:d?t.background.disabled:t.background.default,borderColor:d?t.border.disabled:t.border.default}}catch(e){return{backgroundColor:"primary"===i?"#007AFF":"transparent",borderColor:"primary"===i?"#007AFF":"#E5E5EA",borderWidth:1,borderRadius:4,alignItems:"center",justifyContent:"center",flexDirection:"row"}}}),[i,r,d]),b=o.useMemo((()=>{try{const e=O.sizes[r];return{paddingHorizontal:e.paddingHorizontal,paddingVertical:e.paddingVertical,minHeight:e.minHeight}}catch(e){return{paddingHorizontal:16,paddingVertical:8,minHeight:"sm"===r?32:"lg"===r?48:40}}}),[r]),y=o.useMemo((()=>{try{const e=O.sizes[r],t=O[i];return{...{fontSize:e.fontSize,fontWeight:O.common.fontWeight,lineHeight:O.common.lineHeight,color:d?t.text.disabled:t.text.default},...h}}catch(e){return{fontSize:"sm"===r?12:"lg"===r?18:16,fontWeight:"500",color:d?"#8E8E93":"primary"===i?"#FFFFFF":"#007AFF",...h}}}),[i,r,d,h]),v=o.useCallback((()=>{d||g||!u||u()}),[d,g,u]),S=o.useMemo((()=>({...x,...b,...c&&{width:"100%"},...d&&{opacity:.6},...p})),[x,b,c,d,p]);return e(a,{style:S,onPress:v,disabled:d||g,accessibilityLabel:m,accessibilityRole:"button",testID:f,children:[g&&t(l,{size:"small",color:"string"==typeof y.color?y.color:"#000000",style:{marginRight:8}}),t(s,{style:y,children:n})]})},B={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}}},q=i(void 0),G=({children:e,theme:n})=>{const i=o.useMemo((()=>{var e,t,o;return{...B,...n,colors:{...B.colors,...null==n?void 0:n.colors},spacing:{...B.spacing,...null==n?void 0:n.spacing},borderRadius:{...B.borderRadius,...null==n?void 0:n.borderRadius},typography:{...B.typography,...null==n?void 0:n.typography,fontSize:{...B.typography.fontSize,...null===(e=null==n?void 0:n.typography)||void 0===e?void 0:e.fontSize},fontWeight:{...B.typography.fontWeight,...null===(t=null==n?void 0:n.typography)||void 0===t?void 0:t.fontWeight},lineHeight:{...B.typography.lineHeight,...null===(o=null==n?void 0:n.typography)||void 0===o?void 0:o.lineHeight}}}}),[n]),r=o.useCallback((e=>{console.log("Theme update requested, but we are using static theme for now.",e)}),[]);return t(q.Provider,{value:{theme:i,updateTheme:r},children:e})},J=()=>{const e=r(q);if(!e)throw new Error("useTheme must be used within a ThemeProvider");return e},K=({children:e,variant:n="bodyMd",align:i="left",weight:r,color:a,truncate:l=!1,numberOfLines:d,style:c,accessibilityLabel:g,testID:p,...h})=>{const{theme:m}=J(),u=o.useMemo((()=>{var e;try{const t=X[n],o=i,l=r?X.weights[r]:t.fontWeight;let s=t.color;if((null===(e=null==m?void 0:m.colors)||void 0===e?void 0:e.text)&&"object"==typeof m.colors.text){const e=m.colors.text[n];e&&(s=e)}const d=a||s,c={fontFamily:t.fontFamily,fontSize:t.fontSize,fontWeight:l,lineHeight:t.lineHeight,color:d,textAlign:o};return t.letterSpacing&&(c.letterSpacing=((e,t)=>{if(e.endsWith("px"))return T(e);if(e.endsWith("%")){const n=parseFloat(e)/100;return("string"==typeof t?T(t):t)*n}return 0})(t.letterSpacing.toString(),t.fontSize)),t.textDecoration&&"none"!==t.textDecoration&&(c.textDecorationLine=t.textDecoration),t.textCase&&"none"!==t.textCase&&("uppercase"===t.textCase?c.textTransform="uppercase":"lowercase"===t.textCase?c.textTransform="lowercase":"capitalize"===t.textCase&&(c.textTransform="capitalize")),c}catch(e){return{fontSize:16,fontWeight:"400",lineHeight:24,color:f,textAlign:i}}}),[n,i,r,a,m]),x=o.useMemo((()=>{const e={...u};if(l){const t={overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"};Object.assign(e,t)}return c&&Object.assign(e,c),e}),[u,l,c]);return t(s,{style:x,numberOfLines:d||(l?1:void 0),accessibilityLabel:g,testID:p,...h,children:e})},N=({children:e,variant:n="bodyMd",align:i,weight:r,color:l,underline:s=!1,strikethrough:d=!1,italic:c=!1,link:g=!1,onLinkPress:p,style:h,...m})=>{var f;const{theme:u}=J(),b=o.useMemo((()=>{var e;const t={};if(s&&(t.textDecorationLine="underline"),d&&(t.textDecorationLine=t.textDecorationLine?"underline line-through":"line-through"),c&&(t.fontStyle="italic"),g){const n=l||(null===(e=u.colors)||void 0===e?void 0:e.primary)||x;t.color=n,t.textDecorationLine=s?"underline":t.textDecorationLine||I}return t}),[s,d,c,g,l,u]),y=o.useMemo((()=>({...b,...h})),[b,h]);return g&&p?t(a,{onPress:p,accessibilityRole:"link",activeOpacity:.7,children:t(K,{variant:n,align:i,weight:r,color:l||(null===(f=u.colors)||void 0===f?void 0:f.primary)||x,style:y,...m,children:e})}):t(K,{variant:n,align:i,weight:r,color:l,style:y,...m,children:e})},Q={h1:"headingXl",h2:"headingLg",h3:"headingMd",h4:"headingSm",h5:"headingXs",h6:"headingXs"},U=({children:o,level:i="h2",subtitle:r,subtitleProps:a,...l})=>e(n,{children:[t(K,{variant:Q[i],accessibilityRole:i,...l,children:o}),r&&t(K,{variant:"bodySm",color:m,style:{marginTop:parseInt(g)},...a,children:r})]}),Y=({children:n,size:o="md",spacing:i="md",firstLineIndent:r=!1,dropCap:a=!1,style:l,...s})=>{const m=()=>{switch(o){case"xs":return"bodyXs";case"sm":return"bodySm";case"lg":return"bodyLg";default:return"bodyMd"}},f={marginBottom:(()=>{switch(i){case"none":return 0;case"xs":return E(g);case"sm":return E(p);case"lg":return E("2rem");case"xl":return E("2.5rem");default:return E(h)}})(),...r?{textIndent:E(c)||20}:{},...l};if(a&&"string"==typeof n&&n.length>0){const o=n.charAt(0),i=n.slice(1);return t(d,{style:f,children:e(d,{style:{flexDirection:"row",alignItems:"flex-start"},children:[t(N,{variant:"headingLg",style:{lineHeight:1,marginRight:E("0.25rem")/4||2,marginTop:-2},...s,children:o}),t(N,{variant:m(),...s,children:i})]})})}return t(N,{variant:m(),style:f,...s,children:n})};export{V as Button,U as Heading,Y as Paragraph,N as Text,G as ThemeProvider,K as Typography,B as defaultTheme,J as useTheme};
+//# sourceMappingURL=index.esm.js.map