@worldcoin/mini-apps-ui-kit-react 1.0.0-canary.8 → 1.0.0

package/dist/tailwind/index.d.ts

@@ -54,6 +54,42 @@ export declare const info: {
     "--info-800": string;
     "--info-900": string;
 };
+export declare const worldBlue: {
+    "--world-blue-primary": string;
+    "--world-blue-secondary": string;
+};
+export declare const carrotOrange: {
+    "--carrot-orange-primary": string;
+    "--carrot-orange-secondary": string;
+};
+export declare const purple: {
+    "--purple-primary": string;
+    "--purple-secondary": string;
+};
+export declare const green: {
+    "--green-primary": string;
+    "--green-secondary": string;
+};
+export declare const blue: {
+    "--blue-primary": string;
+    "--blue-secondary": string;
+};
+export declare const worldcoin: {
+    "--worldcoin-primary": string;
+    "--worldcoin-secondary": string;
+};
+export declare const digitalDollars: {
+    "--digital-dollars-primary": string;
+    "--digital-dollars-secondary": string;
+};
+export declare const bitcoin: {
+    "--bitcoin-primary": string;
+    "--bitcoin-secondary": string;
+};
+export declare const ethereum: {
+    "--ethereum-primary": string;
+    "--ethereum-secondary": string;
+};
 declare const uiKitTailwindPlugin: {
     handler: import('tailwindcss/types/config').PluginCreator;
     config?: Partial<import('tailwindcss/types/config').Config>;

package/dist/{tailwind/index.js → tailwind.js}

@@ -1,5 +1,5 @@
-import r from "../_virtual/plugin.js";
-const e = {
+import plugin from "./_virtual/plugin.js";
+const gray = {
   "--gray-0": "255 255 255",
   "--gray-50": "249 250 251",
   "--gray-100": "243 244 245",
@@ -10,7 +10,8 @@ const e = {
   "--gray-500": "113 118 128",
   "--gray-700": "60 66 75",
   "--gray-900": "24 24 24"
-}, l = {
+};
+const success = {
   "--success-100": "230 249 236",
   "--success-200": "204 243 217",
   "--success-300": "153 232 179",
@@ -20,7 +21,8 @@ const e = {
   "--success-700": "0 155 38",
   "--success-800": "0 116 29",
   "--success-900": "0 77 19"
-}, g = {
+};
+const error = {
   "--error-100": "254 233 231",
   "--error-200": "253 211 207",
   "--error-300": "251 167 159",
@@ -30,7 +32,8 @@ const e = {
   "--error-700": "194 32 10",
   "--error-800": "145 24 8",
   "--error-900": "97 16 5"
-}, v = {
+};
+const warning = {
   "--warning-100": "255 246 230",
   "--warning-200": "255 237 204",
   "--warning-300": "255 219 153",
@@ -40,7 +43,8 @@ const e = {
   "--warning-700": "204 139 0",
   "--warning-800": "153 104 0",
   "--warning-900": "102 70 0"
-}, n = {
+};
+const info = {
   "--info-100": "230 240 255",
   "--info-200": "204 224 255",
   "--info-300": "153 194 255",
@@ -50,16 +54,62 @@ const e = {
   "--info-700": "0 74 204",
   "--info-800": "0 55 153",
   "--info-900": "0 36 102"
-}, u = r(
-  function({ addBase: a }) {
-    a({
+};
+const worldBlue = {
+  "--world-blue-primary": "63, 219, 237",
+  "--world-blue-secondary": "236, 251, 253"
+};
+const carrotOrange = {
+  "--carrot-orange-primary": "255, 90, 0",
+  "--carrot-orange-secondary": "255, 237, 230"
+};
+const purple = {
+  "--purple-primary": "134, 0, 255",
+  "--purple-secondary": "242, 230, 255"
+};
+const green = {
+  "--green-primary": "0, 194, 48",
+  "--green-secondary": "230, 249, 236"
+};
+const blue = {
+  "--blue-primary": "0, 92, 255",
+  "--blue-secondary": "230, 240, 255"
+};
+const worldcoin = {
+  "--worldcoin-primary": "24, 24, 24",
+  "--worldcoin-secondary": "243, 244, 245"
+};
+const digitalDollars = {
+  "--digital-dollars-primary": "0, 194, 48",
+  "--digital-dollars-secondary": "230, 249, 236"
+};
+const bitcoin = {
+  "--bitcoin-primary": "255, 90, 0",
+  "--bitcoin-secondary": "255, 237, 230"
+};
+const ethereum = {
+  "--ethereum-primary": "51, 133, 255",
+  "--ethereum-secondary": "230, 240, 255"
+};
+const uiKitTailwindPlugin = plugin(
+  function({ addBase }) {
+    addBase({
       ":root": {
         "--font-sans": "TWK Lausanne",
-        ...e,
-        ...l,
-        ...g,
-        ...v,
-        ...n
+        ...gray,
+        ...success,
+        ...error,
+        ...warning,
+        ...info,
+        ...worldBlue,
+        ...carrotOrange,
+        ...purple,
+        ...green,
+        ...blue,
+        ...worldcoin,
+        ...digitalDollars,
+        ...bitcoin,
+        ...ethereum
       }
     });
   },
@@ -127,6 +177,46 @@ const e = {
           300: "rgb(var(--info-300) / <alpha-value>)",
           200: "rgb(var(--info-200) / <alpha-value>)",
           100: "rgb(var(--info-100) / <alpha-value>)"
+        },
+        specialty: {
+          worldBlue: {
+            primary: "rgb(var(--world-blue-primary) / <alpha-value>)",
+            secondary: "rgb(var(--world-blue-secondary) / <alpha-value>)"
+          },
+          carrotOrange: {
+            primary: "rgb(var(--carrot-orange-primary) / <alpha-value>)",
+            secondary: "rgb(var(--carrot-orange-secondary) / <alpha-value>)"
+          },
+          purple: {
+            primary: "rgb(var(--purple-primary) / <alpha-value>)",
+            secondary: "rgb(var(--purple-secondary) / <alpha-value>)"
+          },
+          green: {
+            primary: "rgb(var(--green-primary) / <alpha-value>)",
+            secondary: "rgb(var(--green-secondary) / <alpha-value>)"
+          },
+          blue: {
+            primary: "rgb(var(--blue-primary) / <alpha-value>)",
+            secondary: "rgb(var(--blue-secondary) / <alpha-value>)"
+          }
+        },
+        token: {
+          worldcoin: {
+            primary: "rgb(var(--worldcoin-primary) / <alpha-value>)",
+            secondary: "rgb(var(--worldcoin-secondary) / <alpha-value>)"
+          },
+          digitalDollars: {
+            primary: "rgb(var(--digital-dollars-primary) / <alpha-value>)",
+            secondary: "rgb(var(--digital-dollars-secondary) / <alpha-value>)"
+          },
+          bitcoin: {
+            primary: "rgb(var(--bitcoin-primary) / <alpha-value>)",
+            secondary: "rgb(var(--bitcoin-secondary) / <alpha-value>)"
+          },
+          ethereum: {
+            primary: "rgb(var(--ethereum-primary) / <alpha-value>)",
+            secondary: "rgb(var(--ethereum-secondary) / <alpha-value>)"
+          }
         }
       },
       lineHeight: {
@@ -158,10 +248,19 @@ const e = {
   }
 );
 export {
-  u as default,
-  g as error,
-  e as gray,
-  n as info,
-  l as success,
-  v as warning
+  bitcoin,
+  blue,
+  carrotOrange,
+  uiKitTailwindPlugin as default,
+  digitalDollars,
+  error,
+  ethereum,
+  gray,
+  green,
+  info,
+  purple,
+  success,
+  warning,
+  worldBlue,
+  worldcoin
 };

package/package.json

@@ -1,17 +1,88 @@
 {
   "name": "@worldcoin/mini-apps-ui-kit-react",
-  "version": "1.0.0-canary.8",
+  "version": "1.0.0",
   "type": "module",
   "main": "dist/index.js",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "description": "React components UI Kit library for Mini Apps",
+  "author": "",
+  "license": "ISC",
+  "sideEffects": false,
   "files": [
-    "dist",
-    "public"
+    "dist"
   ],
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "tailwindcss": "^3"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
+    "@eslint/js": "^9.13.0",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/manager-api": "^8.5.5",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@storybook/theming": "^8.5.5",
+    "@types/glob": "^8.1.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "concurrently": "^9.1.0",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "eslint-plugin-storybook": "^0.11.1",
+    "glob": "^11.0.0",
+    "globals": "^15.11.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup-plugin-visualizer": "^5.14.0",
+    "rollup-preserve-directives": "^1.1.3",
+    "storybook": "^8.4.7",
+    "tailwindcss": "^3.4.15",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.11.0",
+    "vite": ">=5.4.12",
+    "vite-plugin-dts": "^4.3.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-form": "^0.1.0",
+    "@radix-ui/react-progress": "^1.1.2",
+    "@radix-ui/react-radio-group": "^1.2.1",
+    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-toast": "^1.2.6",
+    "@radix-ui/react-toggle-group": "^1.1.2",
+    "@radix-ui/react-visually-hidden": "^1.1.3",
+    "@uidotdev/usehooks": "^2.4.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "countries-list": "^3.1.1",
+    "input-otp": "^1.4.1",
+    "react-international-phone": "^4.3.0",
+    "tailwind-merge": "^2.5.5",
+    "vaul": "^1.1.2"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
     },
     "./Button": {
       "types": "./dist/components/Button/index.d.ts",
@@ -21,14 +92,6 @@
       "types": "./dist/components/BulletList/index.d.ts",
       "default": "./dist/components/BulletList/index.js"
     },
-    "./BulletListItem": {
-      "types": "./dist/components/BulletListItem/index.d.ts",
-      "default": "./dist/components/BulletListItem/index.js"
-    },
-    "./BulletPoint": {
-      "types": "./dist/components/BulletPoint/index.d.ts",
-      "default": "./dist/components/BulletPoint/index.js"
-    },
     "./Checkbox": {
       "types": "./dist/components/Checkbox/index.d.ts",
       "default": "./dist/components/Checkbox/index.js"
@@ -169,87 +232,28 @@
       "types": "./dist/components/LiveFeedback/index.d.ts",
       "default": "./dist/components/LiveFeedback/index.js"
     },
+    "./CircularState": {
+      "types": "./dist/components/CircularState/index.d.ts",
+      "default": "./dist/components/CircularState/index.js"
+    },
     "./tailwind": {
       "types": "./dist/tailwind/index.d.ts",
-      "default": "./dist/tailwind/index.js"
+      "import": "./dist/tailwind/index.js",
+      "require": "./dist/tailwind/index.js"
     },
-    "./styles.css": "./public/globals.css"
-  },
-  "peerDependencies": {
-    "react": "^18 || ^19",
-    "react-dom": "^18 || ^19",
-    "tailwindcss": "^3"
-  },
-  "peerDependenciesMeta": {
-    "tailwindcss": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.2",
-    "@eslint/js": "^9.13.0",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-onboarding": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
-    "@storybook/manager-api": "^8.5.5",
-    "@storybook/react": "^8.4.7",
-    "@storybook/react-vite": "^8.4.7",
-    "@storybook/test": "^8.4.7",
-    "@storybook/theming": "^8.5.5",
-    "@types/glob": "^8.1.0",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.3.3",
-    "concurrently": "^9.1.0",
-    "eslint": "^9.13.0",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.14",
-    "eslint-plugin-storybook": "^0.11.1",
-    "glob": "^11.0.0",
-    "globals": "^15.11.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "rollup-preserve-directives": "^1.1.3",
-    "storybook": "^8.4.7",
-    "tailwindcss": "^3.4.15",
-    "tailwindcss-animate": "^1.0.7",
-    "typescript": "~5.6.2",
-    "typescript-eslint": "^8.11.0",
-    "vite": ">=5.4.12",
-    "vite-plugin-dts": "^4.3.0"
-  },
-  "dependencies": {
-    "@radix-ui/react-checkbox": "^1.1.2",
-    "@radix-ui/react-form": "^0.1.0",
-    "@radix-ui/react-progress": "^1.1.2",
-    "@radix-ui/react-radio-group": "^1.2.1",
-    "@radix-ui/react-select": "^2.1.2",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-switch": "^1.1.1",
-    "@radix-ui/react-toast": "^1.2.6",
-    "@radix-ui/react-toggle-group": "^1.1.2",
-    "@uidotdev/usehooks": "^2.4.1",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "countries-list": "^3.1.1",
-    "input-otp": "^1.4.1",
-    "react-international-phone": "^4.3.0",
-    "tailwind-merge": "^2.5.5",
-    "vaul": "^1.1.2"
+    "./styles.css": "./dist/globals.css"
   },
-  "description": "React components UI Kit library for Mini Apps",
-  "author": "",
-  "license": "ISC",
   "scripts": {
     "storybook": "storybook dev -p 6006",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "sb:move": "mv ./storybook-static ../../storybook-static",
     "dev:sb": "concurrently \"tailwindcss -i ./styles/globals.css -o ./public/globals.css --watch\" \"pnpm storybook\"",
-    "build:tailwind": "tailwindcss -i ./styles/globals.css -o ./public/globals.css --minify",
+    "build:tailwind": "tailwindcss -i ./styles/globals.css -o ./dist/globals.css --minify",
     "build:sb": "pnpm build:tailwind && storybook build",
-    "build": "pnpm build:tailwind && tsc -b ./tsconfig.lib.json && vite build",
-    "lint": "eslint ."
+    "build": "tsc -b ./tsconfig.lib.json && vite build && pnpm build:tailwind",
+    "lint": "eslint .",
+    "publish:manual": "pnpm build && npm publish --access public",
+    "generate:country-codes": "node scripts/generate-country-codes.js",
+    "analyze": "vite build --config vite.analyze.config.ts"
   }
 }

package/dist/_virtual/dynamic-import-helper.js

@@ -1,16 +0,0 @@
-const l = (r, n, t) => {
-  const e = r[n];
-  return e ? typeof e == "function" ? e() : Promise.resolve(e) : new Promise((i, o) => {
-    (typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(
-      o.bind(
-        null,
-        new Error(
-          "Unknown variable dynamic import: " + n + (n.split("/").length !== t ? ". Note that variables only represent file names one level deep." : "")
-        )
-      )
-    );
-  });
-};
-export {
-  l as default
-};

package/dist/components/AlertDialog/index.js

@@ -1,12 +0,0 @@
-import { AlertDialog as o, AlertDialogClose as r, AlertDialogContent as t, AlertDialogDescription as i, AlertDialogFooter as a, AlertDialogHeader as g, AlertDialogPortal as D, AlertDialogTitle as A, AlertDialogTrigger as n } from "./AlertDialog.js";
-export {
-  o as AlertDialog,
-  r as AlertDialogClose,
-  t as AlertDialogContent,
-  i as AlertDialogDescription,
-  a as AlertDialogFooter,
-  g as AlertDialogHeader,
-  D as AlertDialogPortal,
-  A as AlertDialogTitle,
-  n as AlertDialogTrigger
-};

package/dist/components/AlertDialog/types.js

@@ -1 +0,0 @@
-

package/dist/components/BottomBar/index.js

@@ -1,4 +0,0 @@
-import { BottomBar as t } from "./BottomBar.js";
-export {
-  t as BottomBar
-};

package/dist/components/BulletList/index.js

@@ -1,4 +0,0 @@
-import { BulletList as l } from "./BulletList.js";
-export {
-  l as BulletList
-};

package/dist/components/BulletListItem/BulletListItem.d.ts

@@ -1,7 +0,0 @@
-import { ComponentProps, ReactNode } from 'react';
-export interface BulletListItemProps extends ComponentProps<"div"> {
-    children?: ReactNode;
-    bulletPoint: ReactNode;
-}
-export declare const BulletListItem: import('react').ForwardRefExoticComponent<Omit<BulletListItemProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-export default BulletListItem;

package/dist/components/BulletListItem/BulletListItem.js

@@ -1,23 +0,0 @@
-import { jsxs as s, jsx as a } from "react/jsx-runtime";
-import { cn as i } from "../../lib/utils.js";
-import { forwardRef as l } from "react";
-import { Typography as p } from "../Typography/Typography.js";
-const f = l(
-  ({ children: r, className: t, bulletPoint: e, ...m }, o) => /* @__PURE__ */ s(
-    "div",
-    {
-      ref: o,
-      className: i("grid grid-cols-[auto_1fr] gap-x-3 items-center", t),
-      ...m,
-      children: [
-        e,
-        /* @__PURE__ */ a(p, { className: "text-gray-500", children: r })
-      ]
-    }
-  )
-);
-f.displayName = "BulletListItem";
-export {
-  f as BulletListItem,
-  f as default
-};

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

@@ -1 +0,0 @@
-export * from './BulletListItem';

package/dist/components/BulletListItem/index.js

@@ -1,4 +0,0 @@
-import { BulletListItem as l } from "./BulletListItem.js";
-export {
-  l as BulletListItem
-};

package/dist/components/BulletPoint/BulletPoint.d.ts

@@ -1,6 +0,0 @@
-import { ComponentProps, ReactNode } from 'react';
-export interface BulletProps extends ComponentProps<"div"> {
-    children?: ReactNode;
-}
-declare const BulletPoint: import('react').ForwardRefExoticComponent<Omit<BulletProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-export default BulletPoint;

package/dist/components/BulletPoint/BulletPoint.js

@@ -1,22 +0,0 @@
-import { jsx as l } from "react/jsx-runtime";
-import { cn as a } from "../../lib/utils.js";
-import { forwardRef as i } from "react";
-const m = i(({ children: e, ...t }, r) => {
-  const { className: o, ...s } = t;
-  return /* @__PURE__ */ l(
-    "div",
-    {
-      ref: r,
-      className: a(
-        "size-9 flex justify-center items-center rounded-full bg-gray-900",
-        o
-      ),
-      ...s,
-      children: e
-    }
-  );
-});
-m.displayName = "BulletPoint";
-export {
-  m as default
-};

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

@@ -1 +0,0 @@
-export * from './BulletPoint';

package/dist/components/BulletPoint/index.js

@@ -1 +0,0 @@
-import "./BulletPoint.js";

package/dist/components/Button/index.js

@@ -1,4 +0,0 @@
-import { Button as r } from "./Button.js";
-export {
-  r as Button
-};

package/dist/components/Checkbox/index.js

@@ -1,4 +0,0 @@
-import { Checkbox as r } from "./Checkbox.js";
-export {
-  r as Checkbox
-};

package/dist/components/Chip/index.js

@@ -1,4 +0,0 @@
-import { Chip as r } from "./Chip.js";
-export {
-  r as Chip
-};

package/dist/components/CircularIcon/index.js

@@ -1,4 +0,0 @@
-import { CircularIcon as c } from "./CircularIcon.js";
-export {
-  c as CircularIcon
-};

package/dist/components/ClearButton/index.js

@@ -1,4 +0,0 @@
-import { default as o } from "./ClearButton.js";
-export {
-  o as default
-};

package/dist/components/ColorPicker/index.js

@@ -1,5 +0,0 @@
-import { ColorPickerGroup as e, ColorPickerItem as c } from "./ColorPicker.js";
-export {
-  e as ColorPickerGroup,
-  c as ColorPickerItem
-};

package/dist/components/CountryDrawer/index.js

@@ -1,4 +0,0 @@
-import { CountryDrawer as e } from "./CountryDrawer.js";
-export {
-  e as CountryDrawer
-};

package/dist/components/Drawer/index.js

@@ -1,9 +0,0 @@
-import { Drawer as a, DrawerClose as w, DrawerContent as D, DrawerHeader as o, DrawerTitle as t, DrawerTrigger as g } from "./Drawer.js";
-export {
-  a as Drawer,
-  w as DrawerClose,
-  D as DrawerContent,
-  o as DrawerHeader,
-  t as DrawerTitle,
-  g as DrawerTrigger
-};

package/dist/components/Drawer/types.js

@@ -1 +0,0 @@
-

package/dist/components/Flag/LazyFlag.d.ts

@@ -1,13 +0,0 @@
-interface FlagProps {
-    /**
-     * ISO 3166-1 alpha-2 country code (e.g. 'US', 'GB', 'FR')
-     */
-    countryCode: string;
-    /**
-     * Width and height in pixels for the flag SVG.
-     * Defaults to 40px if not specified.
-     */
-    size?: number;
-}
-export declare const LazyFlag: import('react').ForwardRefExoticComponent<FlagProps & import('react').RefAttributes<SVGSVGElement>>;
-export default LazyFlag;