@worldcoin/mini-apps-ui-kit-react 0.0.1 → 0.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 (14) hide show
  1. package/LICENSE.md +21 -0
  2. package/README.md +18 -5
  3. package/dist/_virtual/plugin.js +7 -0
  4. package/dist/components/Pill/Pill.js +0 -1
  5. package/dist/components/RadioGroup/RadioGroup.js +18 -24
  6. package/dist/components/RadioGroup/RadioGroupItem.js +15 -30
  7. package/dist/components/Typography/Typography.d.ts +21 -33
  8. package/dist/components/Typography/Typography.js +15 -15
  9. package/dist/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/lib/public/create-plugin.js +24 -19
  10. package/dist/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/lib/util/createPlugin.js +31 -25
  11. package/dist/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/plugin.js +9 -7
  12. package/dist/tailwind/index.js +6 -1
  13. package/package.json +2 -2
  14. package/public/globals.css +3 -7
package/LICENSE.md ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 Tools for Humanity
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  React components UI Kit library for Mini Apps
4
4
 
5
+ > **⚠️ Security Notice**: This library has not been reviewed for security vulnerabilities. Use in production environments is discouraged until a security audit has been completed.
6
+
5
7
  ## Getting Started
6
8
 
7
9
  - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
@@ -66,13 +68,24 @@ The library uses three fonts:
66
68
  Embed the following code in the `<head>` of your html to load the fonts:
67
69
 
68
70
  ```html
69
- <link rel="preconnect" href="https://fonts.googleapis.com">
70
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
71
- <link href="https://fonts.googleapis.com/css2?family=DM+Mono:ital@0;1&family=Rubik:ital,wght@0,300..900;1,300..900&family=Sora:wght@600&display=swap" rel="stylesheet">
71
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
72
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
73
+ <link
74
+ href="https://fonts.googleapis.com/css2?family=DM+Mono:ital@0;1&family=Rubik:ital,wght@0,300..900;1,300..900&family=Sora:wght@600&display=swap"
75
+ rel="stylesheet"
76
+ />
72
77
  ```
73
78
 
74
79
  Or use the following code to load the fonts via CSS:
75
80
 
76
81
  ```css
77
- @import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital@0;1&family=Rubik:ital,wght@0,300..900;1,300..900&family=Sora:wght@100..800&display=swap');
78
- ```
82
+ @import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital@0;1&family=Rubik:ital,wght@0,300..900;1,300..900&family=Sora:wght@100..800&display=swap");
83
+ ```
84
+
85
+ ## Importing Styles
86
+
87
+ To use the UI Kit components with their proper styling, you need to import the styles in your application. Add the following import statement to your application's entry point (e.g., `app/layout.tsx` for Next.js or `main.tsx` for Vite):
88
+
89
+ ```typescript
90
+ import "@worldcoin/mini-apps-ui-kit-react/styles.css";
91
+ ```
package/dist/_virtual/plugin.js ADDED
@@ -0,0 +1,7 @@
1
+ import { getDefaultExportFromCjs as r } from "./_commonjsHelpers.js";
2
+ import { __require as o } from "../node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/plugin.js";
3
+ var t = o();
4
+ const p = /* @__PURE__ */ r(t);
5
+ export {
6
+ p as default
7
+ };
package/dist/components/Pill/Pill.js CHANGED
@@ -6,7 +6,6 @@ import { forwardRef as s } from "react";
6
6
  import { cn as m } from "../../lib/utils.js";
7
7
  import { typographyVariants as p } from "../Typography/Typography.js";
8
8
  const f = n(
9
- // TODO: Add disabled classes
10
9
  "inline-flex h-9 items-center rounded-full px-4 transition-colors duration-200",
11
10
  {
12
11
  variants: {
package/dist/components/RadioGroup/RadioGroup.js CHANGED
@@ -1,42 +1,36 @@
1
1
  import { jsx as s } from "react/jsx-runtime";
2
- import { Root as f } from "../../node_modules/.pnpm/@radix-ui_react-radio-group@1.2.2_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@_2u6lfd2xt65wmbxn7lgvaxqbmy/node_modules/@radix-ui/react-radio-group/dist/index.js";
3
- import { cva as n } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
4
- import { forwardRef as c } from "react";
5
- const d = n("flex", {
2
+ import { Root as d } from "../../node_modules/.pnpm/@radix-ui_react-radio-group@1.2.2_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@_2u6lfd2xt65wmbxn7lgvaxqbmy/node_modules/@radix-ui/react-radio-group/dist/index.js";
3
+ import { cva as f } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
4
+ import { forwardRef as n } from "react";
5
+ const c = f("flex disabled:cursor-not-allowed disabled:opacity-20", {
6
6
  variants: {
7
7
  orientation: {
8
8
  vertical: "flex-col",
9
9
  horizontal: "flex-row"
10
- },
11
- disabled: {
12
- true: "cursor-not-allowed opacity-20",
13
- // TODO: rework opacity to match design when it's provided
14
- false: ""
15
10
  }
16
11
  },
17
12
  defaultVariants: {
18
- orientation: "vertical",
19
- disabled: !1
13
+ orientation: "vertical"
20
14
  }
21
- }), m = c(
15
+ }), m = n(
22
16
  ({
23
- defaultValue: r,
24
- onChange: t,
17
+ defaultValue: a,
18
+ onChange: r,
25
19
  orientation: o = "vertical",
26
- disabled: a = !1,
27
- name: e,
28
- ...i
20
+ disabled: t = !1,
21
+ name: i,
22
+ ...e
29
23
  }, l) => /* @__PURE__ */ s(
30
- f,
24
+ d,
31
25
  {
32
26
  ref: l,
33
- defaultValue: r,
34
- onValueChange: t,
35
- className: d({ orientation: o, disabled: a }),
36
- disabled: a,
27
+ defaultValue: a,
28
+ onValueChange: r,
29
+ className: c({ orientation: o }),
30
+ disabled: t,
37
31
  orientation: o,
38
- name: e,
39
- ...i
32
+ name: i,
33
+ ...e
40
34
  }
41
35
  )
42
36
  );
package/dist/components/RadioGroup/RadioGroupItem.js CHANGED
@@ -1,37 +1,22 @@
1
- import { jsx as a } from "react/jsx-runtime";
2
- import { Item as s, Indicator as d } from "../../node_modules/.pnpm/@radix-ui_react-radio-group@1.2.2_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@_2u6lfd2xt65wmbxn7lgvaxqbmy/node_modules/@radix-ui/react-radio-group/dist/index.js";
3
- import { cva as c } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
4
- import { forwardRef as i } from "react";
5
- import { Tick as m } from "../Icons/Tick.js";
6
- const n = c(
7
- "h-6 w-6 rounded-full border-[0.09375rem] transition-all data-[state=checked]:border-gray-900 data-[state=unchecked]:border-gray-400 data-[state=checked]:bg-gray-900 data-[state=unchecked]:bg-transparent",
8
- {
9
- variants: {
10
- disabled: {
11
- true: "cursor-not-allowed opacity-20",
12
- // TODO: rework opacity to match design when it's provided
13
- false: ""
14
- }
15
- },
16
- defaultVariants: {
17
- disabled: !1
18
- }
19
- }
20
- ), l = i(
21
- ({ value: r, disabled: e, ...t }, o) => /* @__PURE__ */ a(
22
- s,
1
+ import { jsx as e } from "react/jsx-runtime";
2
+ import { Item as o, Indicator as s } from "../../node_modules/.pnpm/@radix-ui_react-radio-group@1.2.2_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@_2u6lfd2xt65wmbxn7lgvaxqbmy/node_modules/@radix-ui/react-radio-group/dist/index.js";
3
+ import { forwardRef as c } from "react";
4
+ import { Tick as i } from "../Icons/Tick.js";
5
+ const m = c(
6
+ ({ value: a, disabled: r, ...t }, d) => /* @__PURE__ */ e(
7
+ o,
23
8
  {
24
- ref: o,
25
- value: r,
26
- className: n({ disabled: e }),
27
- disabled: e,
9
+ ref: d,
10
+ value: a,
11
+ className: "h-6 w-6 rounded-full border-[0.09375rem] transition-all data-[state=checked]:border-gray-900 data-[state=unchecked]:border-gray-400 data-[state=checked]:bg-gray-900 data-[state=unchecked]:bg-transparent disabled:cursor-not-allowed disabled:opacity-20",
12
+ disabled: r,
28
13
  ...t,
29
- children: /* @__PURE__ */ a(d, { className: "flex items-center justify-center", children: /* @__PURE__ */ a(m, { className: "text-gray-0" }) })
14
+ children: /* @__PURE__ */ e(s, { className: "flex items-center justify-center", children: /* @__PURE__ */ e(i, { className: "text-gray-0" }) })
30
15
  }
31
16
  )
32
17
  );
33
- l.displayName = "RadioGroupItem";
18
+ m.displayName = "RadioGroupItem";
34
19
  export {
35
- l as RadioGroupItem,
36
- l as default
20
+ m as RadioGroupItem,
21
+ m as default
37
22
  };
package/dist/components/Typography/Typography.d.ts CHANGED
@@ -1,41 +1,29 @@
1
- import { VariantProps } from "class-variance-authority";
2
- import { ElementType } from "react";
3
-
4
- export interface TypographyProps<T extends ElementType = "p">
5
- extends Omit<VariantProps<typeof typographyVariants>, "variant" | "level"> {
6
- /**
7
- * The HTML element to render the typography as
8
- * @default "p"
9
- */
10
- as?: T;
11
- /**
12
- * The variant and level combinations for typography
13
- * @default "body"
14
- */
15
- variant?:
16
- | {
1
+ import { VariantProps } from 'class-variance-authority';
2
+ import { ElementType } from 'react';
3
+ export interface TypographyProps<T extends ElementType = "p"> extends Omit<VariantProps<typeof typographyVariants>, "variant" | "level"> {
4
+ /**
5
+ * The HTML element to render the typography as
6
+ * @default "p"
7
+ */
8
+ as?: T;
9
+ /**
10
+ * The variant and level combinations for typography
11
+ * @default "body"
12
+ */
13
+ variant?: {
17
14
  variant: "number";
18
15
  level: 1 | 2 | 3 | 4 | 5 | 6;
19
- }
20
- | {
16
+ } | {
21
17
  variant: "subtitle" | "body" | "mono";
22
18
  level: 1 | 2 | 3 | 4;
23
- }
24
- | {
19
+ } | {
25
20
  variant: "heading";
26
21
  level: 1 | 2 | 3;
27
- };
22
+ };
28
23
  }
29
- export declare const typographyVariants: (
30
- props?:
31
- | ({
32
- variant?: "number" | "heading" | "body" | "subtitle" | "mono" | null | undefined;
33
- level?: 1 | 2 | 3 | 4 | 5 | 6 | null | undefined;
34
- } & import("class-variance-authority/types").ClassProp)
35
- | undefined,
36
- ) => string;
37
- export declare const Typography: import("react").ForwardRefExoticComponent<
38
- Omit<TypographyProps<"p"> & Omit<any, "ref">, "ref"> &
39
- import("react").RefAttributes<HTMLElement>
40
- >;
24
+ export declare const typographyVariants: (props?: ({
25
+ variant?: "number" | "heading" | "body" | "subtitle" | "mono" | null | undefined;
26
+ level?: 1 | 2 | 3 | 4 | 5 | 6 | null | undefined;
27
+ } & import('class-variance-authority/types').ClassProp) | undefined) => string;
28
+ export declare const Typography: import('react').ForwardRefExoticComponent<Omit<TypographyProps<"p"> & Omit<any, "ref">, "ref"> & import('react').RefAttributes<HTMLElement>>;
41
29
  export default Typography;
package/dist/components/Typography/Typography.js CHANGED
@@ -1,14 +1,14 @@
1
1
  import { jsx as m } from "react/jsx-runtime";
2
- import { cva as i } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
3
- import { forwardRef as o } from "react";
2
+ import { cva as o } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
3
+ import { forwardRef as i } from "react";
4
4
  import { cn as v } from "../../lib/utils.js";
5
- const c = i("", {
5
+ const c = o("", {
6
6
  variants: {
7
7
  variant: {
8
- number: "font-display font-semibold leading-[1.2] tracking-normal",
9
- heading: "font-display font-semibold leading-[1.2] tracking-[-0.01em]",
10
- subtitle: "font-sans font-medium leading-[1.2] tracking-normal",
11
- body: "font-sans font-normal leading-[1.3] tracking-normal",
8
+ number: "font-display font-semibold leading-narrow tracking-normal",
9
+ heading: "font-display font-semibold tracking-[-0.01em] leading-narrow",
10
+ subtitle: "font-sans font-medium leading-narrow tracking-normal",
11
+ body: "font-sans font-normal leading-compact tracking-normal",
12
12
  mono: "font-mono font-normal tracking-normal"
13
13
  },
14
14
  level: {
@@ -109,35 +109,35 @@ const c = i("", {
109
109
  {
110
110
  variant: "mono",
111
111
  level: 1,
112
- className: "text-sm leading-[1]"
112
+ className: "text-sm leading-none"
113
113
  },
114
114
  {
115
115
  variant: "mono",
116
116
  level: 2,
117
- className: "text-xs leading-[1.25]"
117
+ className: "text-xs leading-narrow"
118
118
  },
119
119
  {
120
120
  variant: "mono",
121
121
  level: 3,
122
- className: "text-2xs leading-[1.25]"
122
+ className: "text-2xs leading-narrow"
123
123
  },
124
124
  {
125
125
  variant: "mono",
126
126
  level: 4,
127
- className: "text-[0.5rem] leading-[1.3]"
127
+ className: "text-[0.5rem] leading-compact"
128
128
  }
129
129
  ],
130
130
  defaultVariants: {
131
131
  variant: "body",
132
132
  level: 2
133
133
  }
134
- }), d = o(
135
- ({ variant: a = "body", level: e = 2, children: t, as: l = "p", className: n, ...s }, r) => /* @__PURE__ */ m(
134
+ }), d = i(
135
+ ({ variant: a = "body", level: e = 2, children: t, as: l = "p", className: n, ...r }, s) => /* @__PURE__ */ m(
136
136
  l,
137
137
  {
138
138
  className: v(c({ variant: a, level: e, className: n })),
139
- ref: r,
140
- ...s,
139
+ ref: s,
140
+ ...r,
141
141
  children: t
142
142
  }
143
143
  )
package/dist/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/lib/public/create-plugin.js CHANGED
@@ -1,20 +1,25 @@
1
- import { __exports as i } from "../../../../../../../_virtual/create-plugin.js";
2
- import "../util/createPlugin.js";
3
- import { __exports as o } from "../../../../../../../_virtual/createPlugin.js";
4
- (function(t) {
5
- Object.defineProperty(t, "__esModule", {
6
- value: !0
7
- }), Object.defineProperty(t, "default", {
8
- enumerable: !0,
9
- get: function() {
10
- return n;
1
+ import { __exports as r } from "../../../../../../../_virtual/create-plugin.js";
2
+ import { __require as _ } from "../util/createPlugin.js";
3
+ var u;
4
+ function o() {
5
+ return u ? r : (u = 1, function(t) {
6
+ Object.defineProperty(t, "__esModule", {
7
+ value: !0
8
+ }), Object.defineProperty(t, "default", {
9
+ enumerable: !0,
10
+ get: function() {
11
+ return a;
12
+ }
13
+ });
14
+ const n = /* @__PURE__ */ i(_());
15
+ function i(e) {
16
+ return e && e.__esModule ? e : {
17
+ default: e
18
+ };
11
19
  }
12
- });
13
- const r = /* @__PURE__ */ u(o);
14
- function u(e) {
15
- return e && e.__esModule ? e : {
16
- default: e
17
- };
18
- }
19
- const n = r.default;
20
- })(i);
20
+ const a = n.default;
21
+ }(r), r);
22
+ }
23
+ export {
24
+ o as __require
25
+ };
package/dist/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/lib/util/createPlugin.js CHANGED
@@ -1,28 +1,34 @@
1
- import { __exports as c } from "../../../../../../../_virtual/createPlugin.js";
2
- (function(u) {
3
- Object.defineProperty(u, "__esModule", {
4
- value: !0
5
- }), Object.defineProperty(u, "default", {
6
- enumerable: !0,
7
- get: function() {
8
- return o;
9
- }
10
- });
11
- function i(e, n) {
12
- return {
13
- handler: e,
14
- config: n
15
- };
16
- }
17
- i.withOptions = function(e, n = () => ({})) {
18
- const t = function(r) {
1
+ import { __exports as u } from "../../../../../../../_virtual/createPlugin.js";
2
+ var c;
3
+ function f() {
4
+ return c ? u : (c = 1, function(i) {
5
+ Object.defineProperty(i, "__esModule", {
6
+ value: !0
7
+ }), Object.defineProperty(i, "default", {
8
+ enumerable: !0,
9
+ get: function() {
10
+ return _;
11
+ }
12
+ });
13
+ function o(e, n) {
19
14
  return {
20
- __options: r,
21
- handler: e(r),
22
- config: n(r)
15
+ handler: e,
16
+ config: n
17
+ };
18
+ }
19
+ o.withOptions = function(e, n = () => ({})) {
20
+ const r = function(t) {
21
+ return {
22
+ __options: t,
23
+ handler: e(t),
24
+ config: n(t)
25
+ };
23
26
  };
27
+ return r.__isOptionsFunction = !0, r.__pluginFunction = e, r.__configFunction = n, r;
24
28
  };
25
- return t.__isOptionsFunction = !0, t.__pluginFunction = e, t.__configFunction = n, t;
26
- };
27
- const o = i;
28
- })(c);
29
+ const _ = o;
30
+ }(u), u);
31
+ }
32
+ export {
33
+ f as __require
34
+ };
package/dist/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/plugin.js CHANGED
@@ -1,9 +1,11 @@
1
- import { getDefaultExportFromCjs as e } from "../../../../../_virtual/_commonjsHelpers.js";
2
- import "./lib/public/create-plugin.js";
3
- import { __exports as r } from "../../../../../_virtual/create-plugin.js";
4
- let t = r;
5
- var o = (t.__esModule ? t : { default: t }).default;
6
- const p = /* @__PURE__ */ e(o);
1
+ import { __require as i } from "./lib/public/create-plugin.js";
2
+ var r, u;
3
+ function a() {
4
+ if (u) return r;
5
+ u = 1;
6
+ let e = i();
7
+ return r = (e.__esModule ? e : { default: e }).default, r;
8
+ }
7
9
  export {
8
- p as default
10
+ a as __require
9
11
  };
package/dist/tailwind/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import a from "../node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/plugin.js";
1
+ import a from "../_virtual/plugin.js";
2
2
  const n = a(
3
3
  function({ addBase: r }) {
4
4
  r({
@@ -90,6 +90,11 @@ const n = a(
90
90
  100: "var(--info-100)"
91
91
  }
92
92
  },
93
+ lineHeight: {
94
+ none: "1",
95
+ narrow: "1.2",
96
+ compact: "1.3"
97
+ },
93
98
  extend: {
94
99
  boxShadow: {
95
100
  card: "0 0.625rem 1.875rem 0 #191C201A",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@worldcoin/mini-apps-ui-kit-react",
3
- "version": "0.0.1",
3
+ "version": "0.0.2",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -148,7 +148,7 @@
148
148
  "tailwindcss": "^3.4.15",
149
149
  "typescript": "~5.6.2",
150
150
  "typescript-eslint": "^8.11.0",
151
- "vite": "^5.4.10",
151
+ "vite": ">=5.4.12",
152
152
  "vite-plugin-dts": "^4.3.0"
153
153
  },
154
154
  "dependencies": {
package/public/globals.css CHANGED
@@ -1574,20 +1574,16 @@ video {
1574
1574
  text-transform:uppercase
1575
1575
  }
1576
1576
 
1577
- .leading-\[1\.25\]{
1578
- line-height:1.25
1579
- }
1580
-
1581
1577
  .leading-\[1\.2\]{
1582
1578
  line-height:1.2
1583
1579
  }
1584
1580
 
1585
- .leading-\[1\.3\]{
1581
+ .leading-compact{
1586
1582
  line-height:1.3
1587
1583
  }
1588
1584
 
1589
- .leading-\[1\]{
1590
- line-height:1
1585
+ .leading-narrow{
1586
+ line-height:1.2
1591
1587
  }
1592
1588
 
1593
1589
  .leading-none{