onecart-ui 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/README.md +64 -27
  2. package/dist/components/Button/Button.d.ts.map +1 -1
  3. package/dist/components/Button/index.d.ts +2 -2
  4. package/dist/components/Button/index.d.ts.map +1 -1
  5. package/dist/components/Icon/Icon.d.ts +40 -0
  6. package/dist/components/Icon/Icon.d.ts.map +1 -0
  7. package/dist/components/Icon/IconList.d.ts +21 -0
  8. package/dist/components/Icon/IconList.d.ts.map +1 -0
  9. package/dist/components/Icon/index.d.ts +6 -0
  10. package/dist/components/Icon/index.d.ts.map +1 -0
  11. package/dist/components/Typography/Body.d.ts +4 -0
  12. package/dist/components/Typography/Body.d.ts.map +1 -0
  13. package/dist/components/Typography/Display.d.ts +4 -0
  14. package/dist/components/Typography/Display.d.ts.map +1 -0
  15. package/dist/components/Typography/Heading.d.ts +4 -0
  16. package/dist/components/Typography/Heading.d.ts.map +1 -0
  17. package/dist/components/Typography/Utility.d.ts +4 -0
  18. package/dist/components/Typography/Utility.d.ts.map +1 -0
  19. package/dist/components/Typography/index.d.ts +4 -2
  20. package/dist/components/Typography/index.d.ts.map +1 -1
  21. package/dist/index.d.ts +4 -9
  22. package/dist/index.d.ts.map +1 -1
  23. package/dist/index.esm.js +1 -1
  24. package/dist/index.esm.js.map +1 -1
  25. package/dist/index.js +1 -1
  26. package/dist/index.js.map +1 -1
  27. package/dist/styles/tokens/typography.d.ts +11 -0
  28. package/dist/styles/tokens/typography.d.ts.map +1 -1
  29. package/dist/types/Button.d.ts +17 -40
  30. package/dist/types/Button.d.ts.map +1 -1
  31. package/dist/types/Typography.d.ts +20 -55
  32. package/dist/types/Typography.d.ts.map +1 -1
  33. package/package.json +2 -1
  34. package/src/components/Button/Button.tsx +235 -136
  35. package/src/components/Button/index.ts +7 -2
  36. package/src/components/Icon/Icon.tsx +113 -0
  37. package/src/components/Icon/IconList.tsx +110 -0
  38. package/src/components/Icon/icons.json +81 -0
  39. package/src/components/Icon/index.ts +5 -0
  40. package/src/components/Typography/Body.tsx +94 -0
  41. package/src/components/Typography/Display.tsx +79 -0
  42. package/src/components/Typography/Heading.tsx +110 -0
  43. package/src/components/Typography/Utility.tsx +107 -0
  44. package/src/components/Typography/index.ts +4 -7
  45. package/src/index.ts +8 -17
  46. package/src/styles/tokens/tokens-autocomplete-config.json +2 -2
  47. package/src/styles/tokens/tokens.css +1 -1
  48. package/src/styles/tokens/typography.ts +11 -0
  49. package/src/types/Button.ts +19 -48
  50. package/src/types/Typography.ts +21 -81
  51. package/src/components/Heading/Heading.tsx +0 -48
  52. package/src/components/Heading/index.ts +0 -2
  53. package/src/components/Paragraph/Paragraph.tsx +0 -93
  54. package/src/components/Paragraph/index.ts +0 -6
  55. package/src/components/Text/Text.tsx +0 -96
  56. package/src/components/Text/index.ts +0 -2
  57. package/src/components/Typography/Typography.tsx +0 -123
  58. package/src/types/Heading.ts +0 -27
  59. package/src/types/Paragraph.ts +0 -40
  60. package/src/types/Text.ts +0 -40
package/README.md CHANGED
@@ -1,15 +1,17 @@
1
- # Getting Started with @onecart/ui
1
+ # Getting Started with onecart-ui
2
2
 
3
- 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.
3
+ [![npm version](https://img.shields.io/npm/v/onecart-ui.svg)](https://www.npmjs.com/package/onecart-ui)
4
+
5
+ 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.
4
6
 
5
7
  ## Installation
6
8
 
7
9
  ```bash
8
10
  # Using npm
9
- npm install @onecart/ui react react-native react-native-web
11
+ npm install onecart-ui react react-native react-native-web
10
12
 
11
13
  # Using yarn
12
- yarn add @onecart/ui react react-native react-native-web
14
+ yarn add onecart-ui react react-native react-native-web
13
15
  ```
14
16
 
15
17
  ## Basic Setup
@@ -18,7 +20,7 @@ First, wrap your application with the `ThemeProvider`:
18
20
 
19
21
  ```tsx
20
22
  import React from "react";
21
- import { ThemeProvider } from "@onecart/ui";
23
+ import { ThemeProvider } from "onecart-ui";
22
24
 
23
25
  function App() {
24
26
  return <ThemeProvider>{/* Your app content */}</ThemeProvider>;
@@ -31,12 +33,14 @@ This will provide the default theme to all components in the library.
31
33
 
32
34
  ## Component Overview
33
35
 
34
- ### The Typography Pyramid
36
+ ### The Typography System
35
37
 
36
- The typography system consists of four main components that build on top of each other:
38
+ The typography system consists of four specialized components:
37
39
 
38
- 1. **Typography**: The base component for all text rendering (lowest level)
39
- 2. **Text**: Extends Typography with decorations and link functionality
40
+ 1. **Display**: For large, impactful text like hero headlines
41
+ 2. **Heading**: For section titles and subtitles
42
+ 3. **Body**: For paragraph text and general content
43
+ 4. **Utility**: For specialized text like buttons, links, and captions
40
44
  3. **Heading**: Semantic headings with subtitle support
41
45
  4. **Paragraph**: Rich text blocks with spacing and formatting options
42
46
 
@@ -45,7 +49,7 @@ The typography system consists of four main components that build on top of each
45
49
  ### Creating a Landing Page Header
46
50
 
47
51
  ```tsx
48
- import { Heading, Text, Paragraph } from "@onecart/ui";
52
+ import { Heading, Text, Paragraph } from "onecart-ui";
49
53
 
50
54
  function LandingPageHeader() {
51
55
  return (
@@ -67,7 +71,7 @@ function LandingPageHeader() {
67
71
  ### Interactive Form with Typography
68
72
 
69
73
  ```tsx
70
- import { Heading, Text, Paragraph } from "@onecart/ui";
74
+ import { Heading, Text, Paragraph } from "onecart-ui";
71
75
  import { View, TextInput, Button } from "react-native";
72
76
 
73
77
  function SignupForm() {
@@ -120,22 +124,20 @@ function SignupForm() {
120
124
 
121
125
  ### Typography Components in Detail
122
126
 
123
- #### Typography
124
-
125
- The foundational text component:
127
+ The typography system has been separated into distinct components for better modularity:
126
128
 
127
129
  ```tsx
128
- import { Typography } from "@onecart/ui";
130
+ import { Display, Heading, Body, Utility } from "onecart-ui";
129
131
 
130
132
  function TypographyExamples() {
131
133
  return (
132
134
  <>
133
- <Typography>Default body text</Typography>
134
- <Typography variant="displayXl">Display XL</Typography>
135
- <Typography variant="headingLg">Large heading</Typography>
136
- <Typography variant="bodySm">Small body text</Typography>
137
- <Typography weight="bold">Bold text</Typography>
138
- <Typography align="center">Centered text</Typography>
135
+ <Display size="2xl">Large Display Text</Display>
136
+ <Heading size="lg">Section Heading</Heading>
137
+ <Body size="md">Regular paragraph text for content.</Body>
138
+ <Utility variant="button">Button Label</Utility>
139
+ <Utility variant="link" element="a" href="#">Link Text</Utility>
140
+ <Utility variant="caption">Small caption text</Utility>
139
141
  </>
140
142
  );
141
143
  }
@@ -146,7 +148,7 @@ function TypographyExamples() {
146
148
  Enhanced text component with decorations and link support:
147
149
 
148
150
  ```tsx
149
- import { Text } from "@onecart/ui";
151
+ import { Text } from "onecart-ui";
150
152
 
151
153
  function TextExamples() {
152
154
  return (
@@ -172,7 +174,7 @@ function TextExamples() {
172
174
  Semantic heading component for page and section titles:
173
175
 
174
176
  ```tsx
175
- import { Heading } from '@onecart/ui';
177
+ import { Heading } from 'onecart-ui';
176
178
 
177
179
  function HeadingExamples() {
178
180
  return (
@@ -203,7 +205,7 @@ function HeadingExamples() {
203
205
  Rich text paragraphs with formatting options:
204
206
 
205
207
  ```tsx
206
- import { Paragraph, Text } from "@onecart/ui";
208
+ import { Paragraph, Text } from "onecart-ui";
207
209
 
208
210
  function Example() {
209
211
  return (
@@ -233,7 +235,7 @@ function Example() {
233
235
  You can customize the theme to match your brand:
234
236
 
235
237
  ```tsx
236
- import { ThemeProvider } from "@onecart/ui";
238
+ import { ThemeProvider } from "onecart-ui";
237
239
 
238
240
  // Define custom theme
239
241
  const brandTheme = {
@@ -269,7 +271,7 @@ Here's a complete example of a simple article page using all typography componen
269
271
  ```tsx
270
272
  import React from "react";
271
273
  import { View, ScrollView } from "react-native";
272
- import { ThemeProvider, Heading, Text, Paragraph } from "@onecart/ui";
274
+ import { ThemeProvider, Heading, Text, Paragraph } from "onecart-ui";
273
275
 
274
276
  function ArticlePage() {
275
277
  return (
@@ -299,7 +301,7 @@ function ArticlePage() {
299
301
  </Paragraph>
300
302
 
301
303
  <Paragraph spacing="lg">
302
- The <Text weight="bold">@onecart/ui</Text> library solves this by
304
+ The <Text weight="bold">onecart-ui</Text> library solves this by
303
305
  providing a comprehensive typography system that works seamlessly
304
306
  across React and React Native, all powered by{" "}
305
307
  <Text italic>Figma Design Tokens</Text>.
@@ -346,6 +348,41 @@ function ArticlePage() {
346
348
  </ThemeProvider>
347
349
  );
348
350
  }
351
+ ```
352
+
353
+ ## NPM Package
354
+
355
+ The onecart-ui package is available on npm. It can be installed using:
356
+
357
+ ```bash
358
+ npm install onecart-ui
359
+ # or
360
+ yarn add onecart-ui
361
+ ```
362
+
363
+ This package includes all the components, tokens, and utilities needed to build consistent UIs across React and React Native applications.
364
+
365
+ ### Usage in Your Project
366
+
367
+ After installation, you can import components and use them in your application:
368
+
369
+ ```jsx
370
+ import { ThemeProvider, Button, Text } from 'onecart-ui';
371
+
372
+ function App() {
373
+ return (
374
+ <ThemeProvider>
375
+ <Button variant="primary" onPress={() => console.log('Button clicked')}>
376
+ <Text>Click Me</Text>
377
+ </Button>
378
+ </ThemeProvider>
379
+ );
380
+ }
381
+ ```
382
+
383
+ ## License
384
+
385
+ MIT
349
386
 
350
387
  export default ArticlePage;
351
388
  ```
package/dist/components/Button/Button.d.ts.map CHANGED
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,WAAW,EAAe,MAAM,oBAAoB,CAAC;AAG9D,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAyPxC,CAAC"}
package/dist/components/Button/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- export { Button } from './Button';
2
- export type { ButtonProps } from '../../types/Button';
1
+ export { Button } from "./Button";
2
+ export type { ButtonProps, ButtonType, ButtonSize, ButtonState, } from "../../types/Button";
3
3
  //# sourceMappingURL=index.d.ts.map
package/dist/components/Button/index.d.ts.map CHANGED
@@ -1 +1 @@
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"}
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,EACV,WAAW,EACX,UAAU,EACV,UAAU,EACV,WAAW,GACZ,MAAM,oBAAoB,CAAC"}
package/dist/components/Icon/Icon.d.ts ADDED
@@ -0,0 +1,40 @@
1
+ import React from 'react';
2
+ export interface IconProps {
3
+ /**
4
+ * Name of the icon to display
5
+ */
6
+ name: string;
7
+ /**
8
+ * Size of the icon in pixels
9
+ */
10
+ size?: number;
11
+ /**
12
+ * Color of the icon
13
+ */
14
+ color?: string;
15
+ /**
16
+ * Optional CSS class name
17
+ */
18
+ className?: string;
19
+ /**
20
+ * Optional style overrides
21
+ */
22
+ style?: React.CSSProperties;
23
+ /**
24
+ * Optional click handler
25
+ */
26
+ onClick?: React.MouseEventHandler<SVGSVGElement>;
27
+ /**
28
+ * Aria label for accessibility
29
+ */
30
+ ariaLabel?: string;
31
+ }
32
+ export interface IconData {
33
+ name: string;
34
+ path: string;
35
+ viewBox: string;
36
+ fill?: string;
37
+ }
38
+ export declare const icons: IconData[];
39
+ export declare const Icon: React.FC<IconProps>;
40
+ //# sourceMappingURL=Icon.d.ts.map
package/dist/components/Icon/Icon.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,aAAa,CAAC,CAAC;IAEjD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAGD,eAAO,MAAM,KAAK,EAAE,QAAQ,EAAmB,CAAC;AAQhD,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAwDpC,CAAC"}
package/dist/components/Icon/IconList.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ import React from 'react';
2
+ export interface IconListProps {
3
+ /**
4
+ * Search query to filter icons
5
+ */
6
+ searchQuery?: string;
7
+ /**
8
+ * Size of each icon
9
+ */
10
+ iconSize?: number;
11
+ /**
12
+ * Color of each icon
13
+ */
14
+ iconColor?: string;
15
+ /**
16
+ * Function to handle when an icon is clicked
17
+ */
18
+ onIconClick?: (iconName: string) => void;
19
+ }
20
+ export declare const IconList: React.FC<IconListProps>;
21
+ //# sourceMappingURL=IconList.d.ts.map
package/dist/components/Icon/IconList.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"IconList.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/IconList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAoF5C,CAAC"}
package/dist/components/Icon/index.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ export { Icon } from './Icon';
2
+ export type { IconProps, IconData } from './Icon';
3
+ export { IconList } from './IconList';
4
+ export type { IconListProps } from './IconList';
5
+ export { icons } from './Icon';
6
+ //# sourceMappingURL=index.d.ts.map
package/dist/components/Icon/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC"}
package/dist/components/Typography/Body.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import React from "react";
2
+ import { BodyProps } from "../../types/Typography";
3
+ export declare const Body: React.FC<BodyProps>;
4
+ //# sourceMappingURL=Body.d.ts.map
package/dist/components/Typography/Body.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/Body.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAyFpC,CAAC"}
package/dist/components/Typography/Display.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import React from "react";
2
+ import { DisplayProps } from "../../types/Typography";
3
+ export declare const Display: React.FC<DisplayProps>;
4
+ //# sourceMappingURL=Display.d.ts.map
package/dist/components/Typography/Display.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Display.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/Display.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAEtD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA0E1C,CAAC"}
package/dist/components/Typography/Heading.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import React from "react";
2
+ import { HeadingProps } from "../../types/Typography";
3
+ export declare const Heading: React.FC<HeadingProps>;
4
+ //# sourceMappingURL=Heading.d.ts.map
package/dist/components/Typography/Heading.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAoB,MAAM,wBAAwB,CAAC;AASxE,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAkG1C,CAAC"}
package/dist/components/Typography/Utility.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import React from "react";
2
+ import { UtilityProps } from "../../types/Typography";
3
+ export declare const Utility: React.FC<UtilityProps>;
4
+ //# sourceMappingURL=Utility.d.ts.map
package/dist/components/Typography/Utility.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Utility.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/Utility.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAEtD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAsG1C,CAAC"}
package/dist/components/Typography/index.d.ts CHANGED
@@ -1,3 +1,5 @@
1
- export { Typography } from "./Typography";
2
- export type { TypographyProps, TypographyVariant, TypographyAlign, TypographyWeight, } from "../../types/Typography";
1
+ export { Display } from "./Display";
2
+ export { Heading } from "./Heading";
3
+ export { Body } from "./Body";
4
+ export { Utility } from "./Utility";
3
5
  //# sourceMappingURL=index.d.ts.map
package/dist/components/Typography/index.d.ts.map CHANGED
@@ -1 +1 @@
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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}
package/dist/index.d.ts CHANGED
@@ -1,13 +1,8 @@
1
1
  export { Button } from "./components/Button";
2
- export { Typography } from "./components/Typography";
3
- export { Text } from "./components/Text";
4
- export { Heading } from "./components/Heading";
5
- export { Paragraph } from "./components/Paragraph";
6
- export type { ButtonProps } from "./types/Button";
7
- export type { TypographyProps, TypographyVariant, TypographyAlign, TypographyWeight, } from "./types/Typography";
8
- export type { TextProps } from "./types/Text";
9
- export type { HeadingProps, HeadingLevel } from "./types/Heading";
10
- export type { ParagraphProps, ParagraphSize, ParagraphSpacing, } from "./types/Paragraph";
2
+ export { Display, Heading, Body, Utility } from "./components/Typography";
3
+ export { Icon, IconList, icons } from "./components/Icon";
4
+ export type { ButtonProps, ButtonType, ButtonSize, ButtonState, } from "./types/Button";
5
+ export type { IconProps, IconData, IconListProps } from "./components/Icon";
11
6
  export { ThemeProvider, useTheme } from "./theme/ThemeProvider";
12
7
  export { defaultTheme, type Theme, type ThemeColors, type ThemeSpacing, type ThemeBorderRadius, type ThemeTypography, } from "./theme";
13
8
  //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
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"}
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,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAG1D,YAAY,EACV,WAAW,EACX,UAAU,EACV,UAAU,EACV,WAAW,GACZ,MAAM,gBAAgB,CAAC;AACxB,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG5E,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 CHANGED
@@ -1,2 +1,2 @@
1
- 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};
1
+ import{jsx as e,jsxs as t}from"react/jsx-runtime";import o,{useState as n,createContext as a,useContext as i}from"react";const r=[{name:"arrow-up",path:"M8 3.33325L8 12.6666 M3.33331 7.99992L8 3.33325L12.6666 7.99992",viewBox:"0 0 16 16"},{name:"arrow-down",path:"M8 12.6666L8 3.33325 M12.6667 8.00008L8 12.6667L3.33335 8.00008",viewBox:"0 0 16 16"},{name:"arrow-left",path:"M12.6666 8.00008L3.33331 8.00008 M7.99998 3.33341L3.33331 8.00008L7.99998 12.6667",viewBox:"0 0 16 16"},{name:"arrow-right",path:"M3.33331 8.00008L12.6666 8.00008 M7.99998 12.6667L12.6666 8.00008L7.99998 3.33341",viewBox:"0 0 16 16"},{name:"check",path:"M13.3333 4.66675L6.66667 11.3334L3.33333 8.00008",viewBox:"0 0 16 16"},{name:"cross",path:"M12 4L4 12 M4 4L12 12",viewBox:"0 0 16 16"},{name:"plus",path:"M8 3.33325V12.6666 M3.33331 7.99992H12.6666",viewBox:"0 0 16 16"},{name:"minus",path:"M3.33331 7.99992H12.6666",viewBox:"0 0 16 16"},{name:"search",path:"M7.33333 12.6667C10.2789 12.6667 12.6667 10.2789 12.6667 7.33333C12.6667 4.38781 10.2789 2 7.33333 2C4.38781 2 2 4.38781 2 7.33333C2 10.2789 4.38781 12.6667 7.33333 12.6667Z M12.6667 12.6667L14 14",viewBox:"0 0 16 16"},{name:"home",path:"M2 6L8 2L14 6V14H10V10H6V14H2V6Z",viewBox:"0 0 16 16",fill:"currentColor"},{name:"settings",path:"M6.4 14H9.6C9.6 14 9.8 13.1 10.4 12.8C11 12.5 11.9 12.8 12.4 12.3C12.8 11.9 12.6 10.9 12.8 10.4C13.1 9.8 14 9.6 14 9.6V6.4C14 6.4 13.1 6.2 12.8 5.6C12.5 5 12.8 4.1 12.3 3.6C11.9 3.2 10.9 3.4 10.4 3.2C9.8 2.9 9.6 2 9.6 2H6.4C6.4 2 6.2 2.9 5.6 3.2C5 3.5 4.1 3.2 3.6 3.7C3.2 4.1 3.4 5.1 3.2 5.6C2.9 6.2 2 6.4 2 6.4V9.6C2 9.6 2.9 9.8 3.2 10.4C3.5 11 3.2 11.9 3.7 12.4C4.1 12.8 5.1 12.6 5.6 12.8C6.2 13.1 6.4 14 6.4 14Z M10 8C10 9.1 9.1 10 8 10C6.9 10 6 9.1 6 8C6 6.9 6.9 6 8 6C9.1 6 10 6.9 10 8Z",viewBox:"0 0 16 16"},{name:"user",path:"M11 4C11 5.65685 9.65685 7 8 7C6.34315 7 5 5.65685 5 4C5 2.34315 6.34315 1 8 1C9.65685 1 11 2.34315 11 4Z M1 14C1 14 1 12 3 11C5 10 11 10 13 11C15 12 15 14 15 14",viewBox:"0 0 16 16"},{name:"cart",path:"M5.5 14C5.77614 14 6 13.7761 6 13.5C6 13.2239 5.77614 13 5.5 13C5.22386 13 5 13.2239 5 13.5C5 13.7761 5.22386 14 5.5 14Z M12.5 14C12.7761 14 13 13.7761 13 13.5C13 13.2239 12.7761 13 12.5 13C12.2239 13 12 13.2239 12 13.5C12 13.7761 12.2239 14 12.5 14Z M1 1H3L4.6 9.6C4.63333 9.74056 4.7247 9.86412 4.85172 9.94984C4.97873 10.0356 5.13221 10.0769 5.28571 10.0714H12.1429C12.2964 10.0769 12.4499 10.0356 12.5769 9.94984C12.7039 9.86412 12.7952 9.74056 12.8286 9.6L14 4H4",viewBox:"0 0 16 16"},{name:"heart",path:"M13.6319 3.36825C13.2475 2.98368 12.7898 2.67897 12.2843 2.47298C11.7788 2.267 11.2371 2.16341 10.69 2.16797C10.1429 2.16341 9.60127 2.267 9.09575 2.47298C8.59023 2.67897 8.13254 2.98368 7.74805 3.36825L7.00005 4.11625L6.25205 3.36825C5.4676 2.58281 4.40687 2.16036 3.31005 2.16797C2.21322 2.16036 1.1525 2.58281 0.368046 3.36825C-0.41646 4.15369 -0.838915 5.21442 -0.83131 6.31125C-0.838915 7.40807 -0.41646 8.4688 0.368046 9.25425L7.00005 15.8862L13.6319 9.25425C14.0165 8.86975 14.3212 8.41207 14.5272 7.90655C14.7332 7.40102 14.8368 6.85936 14.8322 6.31225C14.8368 5.76513 14.7332 5.22347 14.5272 4.71795C14.3212 4.21242 14.0165 3.75474 13.6319 3.37025V3.36825Z",viewBox:"0 0 16 16"},{name:"star",path:"M7.99998 1.33325L10.06 5.5066L14.6666 6.17994L11.3333 9.42661L12.12 14.0133L7.99998 11.8466L3.87998 14.0133L4.66665 9.42661L1.33331 6.17994L5.93998 5.5066L7.99998 1.33325Z",viewBox:"0 0 16 16",fill:"currentColor"}],l=new Map;r.forEach((e=>{l.set(e.name,e)}));const s=({name:t,size:o=24,color:n="currentColor",className:a="",style:i={},onClick:r,ariaLabel:s})=>{const c=l.get(t);if(!c)return console.warn(`Icon "${t}" not found`),null;const p=c.path.split(" M ").map(((e,t)=>0===t?e:`M ${e}`)),d={display:"inline-block",verticalAlign:"middle",...i};return e("svg",{width:o,height:o,viewBox:c.viewBox,fill:"none",xmlns:"http://www.w3.org/2000/svg",className:a,style:d,onClick:r,"aria-label":s||`${t} icon`,role:"img",children:p.map(((t,o)=>e("path",{d:t,stroke:c.fill?"none":n,fill:c.fill?n:"none",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"},o)))})},c=({searchQuery:o="",iconSize:n=24,iconColor:a="currentColor",onIconClick:i})=>{const l=o?r.filter((e=>e.name.toLowerCase().includes(o.toLowerCase()))):r;return e("div",{children:0===l.length?t("div",{style:{padding:"20px",textAlign:"center"},children:['No icons found matching "',o,'"']}):e("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(100px, 1fr))",gap:"20px"},children:l.map((o=>t("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",padding:"12px",border:"1px solid #eee",borderRadius:"8px",cursor:i?"pointer":"default",transition:"all 0.2s ease-in-out"},onClick:()=>{return e=o.name,void(i&&i(e));var e},onMouseOver:e=>{e.currentTarget.style.backgroundColor="#f9f9f9",e.currentTarget.style.transform="translateY(-2px)",e.currentTarget.style.boxShadow="0 2px 8px rgba(0,0,0,0.05)"},onMouseOut:e=>{e.currentTarget.style.backgroundColor="transparent",e.currentTarget.style.transform="translateY(0)",e.currentTarget.style.boxShadow="none"},children:[e("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"50px",marginBottom:"8px"},children:e(s,{name:o.name,size:n,color:a})}),e("div",{style:{fontSize:"12px",textAlign:"center",wordBreak:"break-word"},children:o.name})]},o.name)))})})},p=({label:o,type:a="primary",size:i="large",disabled:r=!1,leftIcon:l,rightIcon:c,icon:p,fullWidth:d=!1,style:h,accessibilityLabel:g,testID:m,onClick:x,className:u,onMouseEnter:f,onMouseLeave:y,onMouseDown:b,onMouseUp:C})=>{const v=!!p,w=l?e(s,{name:l,size:"large"===i?20:16}):null,k=c?e(s,{name:c,size:"large"===i?20:16}):null,S=p?e(s,{name:p,size:"large"===i?20:16}):null,[L,F]=n(r?"disabled":"default"),B=l&&c;return t("button",{style:(()=>{const e={display:v?"inline-flex":"flex",width:v?"auto":d?"100%":"9.375rem",height:"large"===i?"2.75rem":"2rem",padding:"ghost"===a?"var(--spacing-0, 0rem)":"var(--component-card-sm, 0.75rem)",justifyContent:"center",alignItems:"center",gap:B?"var(--layout-spacing-inline-md, 1rem)":"var(--layout-spacing-inline-xs, 0.5rem)",flexShrink:0,borderRadius:"var(--button-full, 62.4375rem)",cursor:r?"not-allowed":"pointer",opacity:r?.6:1,transition:"all 0.2s ease-in-out",border:"none"};switch(a){case"primary":switch(L){case"default":e.background="var(--action-primary-default, #00DF88)";break;case"hover":e.background="var(--action-primary-hover, #4CE9AC)";break;case"active":e.background="var(--action-primary-active, #98F2CF)";break;case"disabled":e.background="var(--action-primary-disabled, #00DF88)",e.opacity=.6}break;case"outline":switch(e.background="transparent",L){case"default":e.border="var(--button-default, 1px) solid var(--action-tertiary-default, #3B3B3B)";break;case"hover":e.border="var(--button-hover, 2px) solid var(--action-tertiary-hover, #111)";break;case"active":e.border="var(--button-pressed, 2px) solid var(--action-tertiary-active, #ABABAB)";break;case"disabled":e.border="var(--button-default, 1px) solid var(--action-tertiary-disabled, #3B3B3B)",e.opacity=.6}break;case"ghost":e.background="transparent";break;case"destructive":switch(e.background="transparent",L){case"default":e.color="var(--action-destructive-hover, #FF3B30)";break;case"hover":e.color="var(--action-destructive-default, #D60000)";break;case"active":e.color="var(--action-destructive-active, #FF6259)";break;case"disabled":e.color="var(--action-destructive-disabled, #D60000)",e.opacity=.6}}return{...e,...h}})(),onClick:x,disabled:r,"aria-label":g||o,"data-testid":m,className:u,onMouseEnter:e=>{r||(F("hover"),f&&f(e))},onMouseLeave:e=>{r||(F("default"),y&&y(e))},onMouseDown:e=>{r||(F("active"),b&&b(e))},onMouseUp:e=>{r||(F("hover"),C&&C(e))},children:[!v&&l&&e("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",color:"currentColor"},className:"button-left-icon",children:w}),!v&&e("span",{style:(()=>{const e={fontFamily:'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontWeight:500,fontSize:"large"===i?"1rem":"0.875rem",transition:"all 0.2s ease-in-out"};switch(a){case"primary":e.color="var(--neutral-80, #3B3B3B)";break;case"outline":case"ghost":switch(L){case"default":e.color="var(--action-tertiary-default, #3B3B3B)";break;case"hover":e.color="var(--action-tertiary-hover, #111)";break;case"active":e.color="var(--action-tertiary-active, #ABABAB)";break;case"disabled":e.color="var(--action-tertiary-disabled, #3B3B3B)"}}return e})(),children:o}),v&&e("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",color:"currentColor"},children:S}),!v&&c&&e("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",color:"currentColor"},className:"button-right-icon",children:k})]})},d="#525252",h="#3b3b3b",g="#111",m="Campton",x="book",u="16px",f="12px",y="none",b="none",C=e=>e&&"string"==typeof e?parseFloat(e.replace("px","")):0,v=e=>"number"==typeof e?e.toString():"book"===e?"400":e,w={display2xl:{fontFamily:"Campton",fontSize:C("52px"),fontWeight:v(500),lineHeight:C("56px"),color:g,letterSpacing:"0%",textDecoration:"none",textCase:"none"},displayXl:{fontFamily:"Campton",fontSize:C("44px"),fontWeight:v(500),lineHeight:C("48px"),color:g,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingXl:{fontFamily:"Campton",fontSize:C("40px"),fontWeight:v(600),lineHeight:C("44px"),color:g,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingLg:{fontFamily:"Campton",fontSize:C("36px"),fontWeight:v(600),lineHeight:C("40px"),color:g,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingMd:{fontFamily:"Campton",fontSize:C("32px"),fontWeight:v(600),lineHeight:C("36px"),color:g,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingSm:{fontFamily:"Campton",fontSize:C("28px"),fontWeight:v(600),lineHeight:C("32px"),color:g,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingXs:{fontFamily:"Campton",fontSize:C("20px"),fontWeight:v(600),lineHeight:C("28px"),color:g,letterSpacing:"0%",textDecoration:"none",textCase:"none"},bodyXl:{fontFamily:"Campton",fontSize:C("18px"),fontWeight:v("book"),lineHeight:C("28px"),color:h,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodyLg:{fontFamily:"Campton",fontSize:C("16px"),fontWeight:v("book"),lineHeight:C("24px"),color:h,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodyMd:{fontFamily:"Campton",fontSize:C("14px"),fontWeight:v("book"),lineHeight:C("20px"),color:h,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodySm:{fontFamily:"Campton",fontSize:C("12px"),fontWeight:v("book"),lineHeight:C("20px"),color:h,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodyXs:{fontFamily:m,fontSize:C(f),fontWeight:v(x),lineHeight:C(u),color:h,letterSpacing:"0%",textDecoration:b,textCase:y,paragraphIndent:"0px"},labelLg:{fontFamily:"Campton",fontSize:C("16px"),fontWeight:v(500),lineHeight:C("16px"),color:d,letterSpacing:"0%",textDecoration:"none",textCase:"none"},labelMd:{fontFamily:"Campton",fontSize:C("14px"),fontWeight:v(500),lineHeight:C("20px"),color:d,letterSpacing:"0%",textDecoration:"none",textCase:"none"},labelSm:{fontFamily:m,fontSize:C(f),fontWeight:v(x),lineHeight:C(u),color:d,letterSpacing:"0%",textDecoration:b,textCase:y},weights:{normal:"400",medium:v(500),semibold:v(600),bold:"700"}},k=({size:t="2xl",element:o="h1",align:n="left",weight:a,color:i,truncate:r=!1,lineClamp:l,children:s,className:c="",style:p={},onClick:d,testID:h,...g})=>{const m={...(()=>{const e="2xl"===t?w.display2xl:w.displayXl;let o=parseInt(e.fontWeight);a&&("normal"===a?o=400:"medium"===a?o=500:"semibold"===a?o=600:"bold"===a&&(o=700));const s={fontFamily:e.fontFamily,fontSize:`${e.fontSize}px`,lineHeight:`${e.lineHeight}px`,fontWeight:o,color:i||e.color,textAlign:n,letterSpacing:e.letterSpacing,textDecoration:e.textDecoration||"none"};return r&&(s.whiteSpace="nowrap",s.overflow="hidden",s.textOverflow="ellipsis",s.display="block"),l&&l>0&&(s.display="-webkit-box",s.WebkitLineClamp=l,s.WebkitBoxOrient="vertical",s.overflow="hidden",s.textOverflow="ellipsis"),s})(),...p};return e(o,{style:m,className:c,"data-testid":h,onClick:d,...g,children:s})},S=({size:t="xl",element:o="h2",align:n="left",weight:a,color:i,truncate:r=!1,lineClamp:l,children:s,className:c="",style:p={},onClick:d,testID:h,...g})=>{const m={...(()=>{const e=w[{xl:"headingXl",lg:"headingLg",md:"headingMd",sm:"headingSm",xs:"headingXs"}[t]],o=a?parseInt(w.weights[a]):parseInt(e.fontWeight);return{...{fontFamily:e.fontFamily,fontSize:`${e.fontSize}px`,lineHeight:`${e.lineHeight}px`,fontWeight:o,color:i||e.color,textAlign:n,letterSpacing:e.letterSpacing,textDecoration:e.textDecoration||"none"},...r?{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",display:"block"}:{},...l&&l>0?{display:"-webkit-box",WebkitLineClamp:l,WebkitBoxOrient:"vertical",overflow:"hidden",textOverflow:"ellipsis"}:{}}})(),...p};return e("h2"===o?{xl:"h1",lg:"h2",md:"h3",sm:"h4",xs:"h5"}[t]:o,{style:m,className:c,"data-testid":h,onClick:d,..."a"===o?g:{},children:s})},L=({size:t="lg",element:o="p",align:n="left",weight:a,color:i,truncate:r=!1,lineClamp:l,children:s,className:c="",style:p={},onClick:d,testID:h,...g})=>{const m={...(()=>{let e;switch(t){case"xl":e=w.bodyXl;break;case"lg":e=w.bodyLg;break;case"md":e=w.bodyMd;break;case"sm":e=w.bodySm}let o=parseInt(e.fontWeight);a&&("normal"===a?o=400:"medium"===a?o=500:"semibold"===a?o=600:"bold"===a&&(o=700));const s={fontFamily:e.fontFamily,fontSize:`${e.fontSize}px`,lineHeight:`${e.lineHeight}px`,fontWeight:o,color:i||e.color,textAlign:n,letterSpacing:e.letterSpacing,textDecoration:e.textDecoration||"none"};return r&&(s.whiteSpace="nowrap",s.overflow="hidden",s.textOverflow="ellipsis",s.display="block"),l&&l>0&&(s.display="-webkit-box",s.WebkitLineClamp=l,s.WebkitBoxOrient="vertical",s.overflow="hidden",s.textOverflow="ellipsis"),s})(),...p};return e(o,{style:m,className:c,"data-testid":h,onClick:d,..."a"===o?g:{},children:s})},F=({variant:t="button",element:o,align:n="left",weight:a,color:i,truncate:r=!1,lineClamp:l,children:s,className:c="",style:p={},onClick:d,testID:h,...g})=>{const m=o||(()=>{switch(t){case"button":case"caption":default:return"span";case"link":return"a"}})(),x={...(()=>{let e;switch(t){case"button":e=w.labelLg;break;case"link":e=w.labelMd;break;case"caption":e=w.labelSm}let o=parseInt(e.fontWeight);a&&("normal"===a?o=400:"medium"===a?o=500:"semibold"===a?o=600:"bold"===a&&(o=700));const s={fontFamily:e.fontFamily,fontSize:`${e.fontSize}px`,lineHeight:`${e.lineHeight}px`,fontWeight:o,color:i||e.color,textAlign:n,letterSpacing:e.letterSpacing,textDecoration:"link"===t?"underline":e.textDecoration||"none"};return r&&(s.whiteSpace="nowrap",s.overflow="hidden",s.textOverflow="ellipsis",s.display="block"),l&&l>0&&(s.display="-webkit-box",s.WebkitLineClamp=l,s.WebkitBoxOrient="vertical",s.overflow="hidden",s.textOverflow="ellipsis"),s})(),...p};return e(m,{style:x,className:c,"data-testid":h,onClick:d,..."a"===m?g:{},children:s})},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}}},M=a(void 0),z=({children:t,theme:n})=>{const a=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]),i=o.useCallback((e=>{console.log("Theme update requested, but we are using static theme for now.",e)}),[]);return e(M.Provider,{value:{theme:a,updateTheme:i},children:t})},W=()=>{const e=i(M);if(!e)throw new Error("useTheme must be used within a ThemeProvider");return e};export{L as Body,p as Button,k as Display,S as Heading,s as Icon,c as IconList,z as ThemeProvider,F as Utility,B as defaultTheme,r as icons,W as useTheme};
2
2
  //# sourceMappingURL=index.esm.js.map