@worldcoin/mini-apps-ui-kit-react 0.0.1 → 0.0.3

package/dist/components/RadioGroup/RadioGroupItem.js

@@ -1,37 +1,22 @@
-import { jsx as a } from "react/jsx-runtime";
-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";
-import { cva as c } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { forwardRef as i } from "react";
-import { Tick as m } from "../Icons/Tick.js";
-const n = c(
-  "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",
-  {
-    variants: {
-      disabled: {
-        true: "cursor-not-allowed opacity-20",
-        // TODO: rework opacity to match design when it's provided
-        false: ""
-      }
-    },
-    defaultVariants: {
-      disabled: !1
-    }
-  }
-), l = i(
-  ({ value: r, disabled: e, ...t }, o) => /* @__PURE__ */ a(
-    s,
+import { jsx as e } from "react/jsx-runtime";
+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";
+import { forwardRef as c } from "react";
+import { Tick as i } from "../Icons/Tick.js";
+const m = c(
+  ({ value: a, disabled: r, ...t }, d) => /* @__PURE__ */ e(
+    o,
     {
-      ref: o,
-      value: r,
-      className: n({ disabled: e }),
-      disabled: e,
+      ref: d,
+      value: a,
+      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",
+      disabled: r,
       ...t,
-      children: /* @__PURE__ */ a(d, { className: "flex items-center justify-center", children: /* @__PURE__ */ a(m, { className: "text-gray-0" }) })
+      children: /* @__PURE__ */ e(s, { className: "flex items-center justify-center", children: /* @__PURE__ */ e(i, { className: "text-gray-0" }) })
     }
   )
 );
-l.displayName = "RadioGroupItem";
+m.displayName = "RadioGroupItem";
 export {
-  l as RadioGroupItem,
-  l as default
+  m as RadioGroupItem,
+  m as default
 };

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

@@ -1,41 +1,29 @@
-import { VariantProps } from "class-variance-authority";
-import { ElementType } from "react";
-
-export interface TypographyProps<T extends ElementType = "p">
-  extends Omit<VariantProps<typeof typographyVariants>, "variant" | "level"> {
-  /**
-   * The HTML element to render the typography as
-   * @default "p"
-   */
-  as?: T;
-  /**
-   * The variant and level combinations for typography
-   * @default "body"
-   */
-  variant?:
-    | {
+import { VariantProps } from 'class-variance-authority';
+import { ElementType } from 'react';
+export interface TypographyProps<T extends ElementType = "p"> extends Omit<VariantProps<typeof typographyVariants>, "variant" | "level"> {
+    /**
+     * The HTML element to render the typography as
+     * @default "p"
+     */
+    as?: T;
+    /**
+     * The variant and level combinations for typography
+     * @default "body"
+     */
+    variant?: {
         variant: "number";
         level: 1 | 2 | 3 | 4 | 5 | 6;
-      }
-    | {
+    } | {
         variant: "subtitle" | "body" | "mono";
         level: 1 | 2 | 3 | 4;
-      }
-    | {
+    } | {
         variant: "heading";
         level: 1 | 2 | 3;
-      };
+    };
 }
-export declare const typographyVariants: (
-  props?:
-    | ({
-        variant?: "number" | "heading" | "body" | "subtitle" | "mono" | null | undefined;
-        level?: 1 | 2 | 3 | 4 | 5 | 6 | null | undefined;
-      } & import("class-variance-authority/types").ClassProp)
-    | undefined,
-) => string;
-export declare const Typography: import("react").ForwardRefExoticComponent<
-  Omit<TypographyProps<"p"> & Omit<any, "ref">, "ref"> &
-    import("react").RefAttributes<HTMLElement>
->;
+export declare const typographyVariants: (props?: ({
+    variant?: "number" | "heading" | "body" | "subtitle" | "mono" | null | undefined;
+    level?: 1 | 2 | 3 | 4 | 5 | 6 | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const Typography: import('react').ForwardRefExoticComponent<Omit<TypographyProps<"p"> & Omit<any, "ref">, "ref"> & import('react').RefAttributes<HTMLElement>>;
 export default Typography;

package/dist/components/Typography/Typography.js

@@ -1,14 +1,14 @@
 import { jsx as m } from "react/jsx-runtime";
-import { cva as i } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { forwardRef as o } from "react";
+import { cva as o } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { forwardRef as i } from "react";
 import { cn as v } from "../../lib/utils.js";
-const c = i("", {
+const c = o("", {
   variants: {
     variant: {
-      number: "font-display font-semibold leading-[1.2] tracking-normal",
-      heading: "font-display font-semibold leading-[1.2] tracking-[-0.01em]",
-      subtitle: "font-sans font-medium leading-[1.2] tracking-normal",
-      body: "font-sans font-normal leading-[1.3] tracking-normal",
+      number: "font-display font-semibold leading-narrow tracking-normal",
+      heading: "font-display font-semibold tracking-[-0.01em] leading-narrow",
+      subtitle: "font-sans font-medium leading-narrow tracking-normal",
+      body: "font-sans font-normal leading-compact tracking-normal",
       mono: "font-mono font-normal tracking-normal"
     },
     level: {
@@ -109,35 +109,35 @@ const c = i("", {
     {
       variant: "mono",
       level: 1,
-      className: "text-sm leading-[1]"
+      className: "text-sm leading-none"
     },
     {
       variant: "mono",
       level: 2,
-      className: "text-xs leading-[1.25]"
+      className: "text-xs leading-narrow"
     },
     {
       variant: "mono",
       level: 3,
-      className: "text-2xs leading-[1.25]"
+      className: "text-2xs leading-narrow"
     },
     {
       variant: "mono",
       level: 4,
-      className: "text-[0.5rem] leading-[1.3]"
+      className: "text-[0.5rem] leading-compact"
     }
   ],
   defaultVariants: {
     variant: "body",
     level: 2
   }
-}), d = o(
-  ({ variant: a = "body", level: e = 2, children: t, as: l = "p", className: n, ...s }, r) => /* @__PURE__ */ m(
+}), d = i(
+  ({ variant: a = "body", level: e = 2, children: t, as: l = "p", className: n, ...r }, s) => /* @__PURE__ */ m(
     l,
     {
       className: v(c({ variant: a, level: e, className: n })),
-      ref: r,
-      ...s,
+      ref: s,
+      ...r,
       children: t
     }
   )

package/dist/index.js

@@ -2,52 +2,56 @@ import { Button as t } from "./components/Button/Button.js";
 import { Checkbox as m } from "./components/Checkbox/Checkbox.js";
 import { Chip as f } from "./components/Chip/Chip.js";
 import { ColorPickerGroup as x, ColorPickerItem as n } from "./components/ColorPicker/ColorPicker.js";
-import { Flag as u } from "./components/Flag/Flag.js";
-import { LazyFlag as c } from "./components/Flag/LazyFlag.js";
+import { Flag as d } from "./components/Flag/Flag.js";
+import { LazyFlag as s } from "./components/Flag/LazyFlag.js";
+import { isSupportedCountryCode as c } from "./components/Flag/utils.js";
 import * as r from "./components/Form/Form.js";
-import { Input as F, iconVariants as g, inputVariants as h } from "./components/Input/Input.js";
+import { Input as F, iconVariants as h, inputVariants as y } from "./components/Input/Input.js";
 import { ListItem as w } from "./components/ListItem/ListItem.js";
-import { NumberPad as y } from "./components/NumberPad/NumberPad.js";
-import { OTPField as k } from "./components/OTPField/OTPField.js";
-import { Pill as I } from "./components/Pill/Pill.js";
-import { RadioGroup as S } from "./components/RadioGroup/RadioGroup.js";
-import { RadioGroupItem as b } from "./components/RadioGroup/RadioGroupItem.js";
-import { Select as R } from "./components/Select/Select.js";
-import { SearchField as z } from "./components/SearchField/SearchField.js";
-import { PhoneField as K } from "./components/PhoneField/PhoneField.js";
-import { Switch as O } from "./components/Switch/Switch.js";
-import { Token as q } from "./components/Token/Token.js";
-import { Typography as A, typographyVariants as E } from "./components/Typography/Typography.js";
-import { Drawer as J, DrawerClose as M, DrawerContent as Q, DrawerTrigger as U } from "./components/Drawer/Drawer.js";
-import { default as X } from "./tailwind/index.js";
+import { NumberPad as k } from "./components/NumberPad/NumberPad.js";
+import { OTPField as I } from "./components/OTPField/OTPField.js";
+import { Pill as V } from "./components/Pill/Pill.js";
+import { RadioGroup as b } from "./components/RadioGroup/RadioGroup.js";
+import { RadioGroupItem as R } from "./components/RadioGroup/RadioGroupItem.js";
+import { Select as z } from "./components/Select/Select.js";
+import { SearchField as K } from "./components/SearchField/SearchField.js";
+import { PhoneField as O } from "./components/PhoneField/PhoneField.js";
+import { getValidatedCountryCode as q } from "./components/PhoneField/utils.js";
+import { Switch as A } from "./components/Switch/Switch.js";
+import { Token as H } from "./components/Token/Token.js";
+import { Typography as M, typographyVariants as Q } from "./components/Typography/Typography.js";
+import { Drawer as W, DrawerClose as X, DrawerContent as Y, DrawerTrigger as Z } from "./components/Drawer/Drawer.js";
+import { default as rr } from "./tailwind/index.js";
 export {
   t as Button,
   m as Checkbox,
   f as Chip,
   x as ColorPickerGroup,
   n as ColorPickerItem,
-  J as Drawer,
-  M as DrawerClose,
-  Q as DrawerContent,
-  U as DrawerTrigger,
-  u as Flag,
+  W as Drawer,
+  X as DrawerClose,
+  Y as DrawerContent,
+  Z as DrawerTrigger,
+  d as Flag,
   r as Form,
   F as Input,
-  c as LazyFlag,
+  s as LazyFlag,
   w as ListItem,
-  y as NumberPad,
-  k as OTPField,
-  K as PhoneField,
-  I as Pill,
-  S as RadioGroup,
-  b as RadioGroupItem,
-  z as SearchField,
-  R as Select,
-  O as Switch,
-  q as Token,
-  A as Typography,
-  g as iconVariants,
-  h as inputVariants,
-  E as typographyVariants,
-  X as uiKitTailwindPlugin
+  k as NumberPad,
+  I as OTPField,
+  O as PhoneField,
+  V as Pill,
+  b as RadioGroup,
+  R as RadioGroupItem,
+  K as SearchField,
+  z as Select,
+  A as Switch,
+  H as Token,
+  M as Typography,
+  q as getValidatedCountryCode,
+  h as iconVariants,
+  y as inputVariants,
+  c as isSupportedCountryCode,
+  Q as typographyVariants,
+  rr as uiKitTailwindPlugin
 };

package/dist/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/lib/public/create-plugin.js

@@ -1,20 +1,25 @@
-import { __exports as i } from "../../../../../../../_virtual/create-plugin.js";
-import "../util/createPlugin.js";
-import { __exports as o } from "../../../../../../../_virtual/createPlugin.js";
-(function(t) {
-  Object.defineProperty(t, "__esModule", {
-    value: !0
-  }), Object.defineProperty(t, "default", {
-    enumerable: !0,
-    get: function() {
-      return n;
+import { __exports as r } from "../../../../../../../_virtual/create-plugin.js";
+import { __require as _ } from "../util/createPlugin.js";
+var u;
+function o() {
+  return u ? r : (u = 1, function(t) {
+    Object.defineProperty(t, "__esModule", {
+      value: !0
+    }), Object.defineProperty(t, "default", {
+      enumerable: !0,
+      get: function() {
+        return a;
+      }
+    });
+    const n = /* @__PURE__ */ i(_());
+    function i(e) {
+      return e && e.__esModule ? e : {
+        default: e
+      };
     }
-  });
-  const r = /* @__PURE__ */ u(o);
-  function u(e) {
-    return e && e.__esModule ? e : {
-      default: e
-    };
-  }
-  const n = r.default;
-})(i);
+    const a = n.default;
+  }(r), r);
+}
+export {
+  o as __require
+};

package/dist/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/lib/util/createPlugin.js

@@ -1,28 +1,34 @@
-import { __exports as c } from "../../../../../../../_virtual/createPlugin.js";
-(function(u) {
-  Object.defineProperty(u, "__esModule", {
-    value: !0
-  }), Object.defineProperty(u, "default", {
-    enumerable: !0,
-    get: function() {
-      return o;
-    }
-  });
-  function i(e, n) {
-    return {
-      handler: e,
-      config: n
-    };
-  }
-  i.withOptions = function(e, n = () => ({})) {
-    const t = function(r) {
+import { __exports as u } from "../../../../../../../_virtual/createPlugin.js";
+var c;
+function f() {
+  return c ? u : (c = 1, function(i) {
+    Object.defineProperty(i, "__esModule", {
+      value: !0
+    }), Object.defineProperty(i, "default", {
+      enumerable: !0,
+      get: function() {
+        return _;
+      }
+    });
+    function o(e, n) {
       return {
-        __options: r,
-        handler: e(r),
-        config: n(r)
+        handler: e,
+        config: n
+      };
+    }
+    o.withOptions = function(e, n = () => ({})) {
+      const r = function(t) {
+        return {
+          __options: t,
+          handler: e(t),
+          config: n(t)
+        };
       };
+      return r.__isOptionsFunction = !0, r.__pluginFunction = e, r.__configFunction = n, r;
     };
-    return t.__isOptionsFunction = !0, t.__pluginFunction = e, t.__configFunction = n, t;
-  };
-  const o = i;
-})(c);
+    const _ = o;
+  }(u), u);
+}
+export {
+  f as __require
+};

package/dist/node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/plugin.js

@@ -1,9 +1,11 @@
-import { getDefaultExportFromCjs as e } from "../../../../../_virtual/_commonjsHelpers.js";
-import "./lib/public/create-plugin.js";
-import { __exports as r } from "../../../../../_virtual/create-plugin.js";
-let t = r;
-var o = (t.__esModule ? t : { default: t }).default;
-const p = /* @__PURE__ */ e(o);
+import { __require as i } from "./lib/public/create-plugin.js";
+var r, u;
+function a() {
+  if (u) return r;
+  u = 1;
+  let e = i();
+  return r = (e.__esModule ? e : { default: e }).default, r;
+}
 export {
-  p as default
+  a as __require
 };

package/dist/tailwind/index.js

@@ -1,4 +1,4 @@
-import a from "../node_modules/.pnpm/tailwindcss@3.4.17/node_modules/tailwindcss/plugin.js";
+import a from "../_virtual/plugin.js";
 const n = a(
   function({ addBase: r }) {
     r({
@@ -90,6 +90,11 @@ const n = a(
           100: "var(--info-100)"
         }
       },
+      lineHeight: {
+        none: "1",
+        narrow: "1.2",
+        compact: "1.3"
+      },
       extend: {
         boxShadow: {
           card: "0 0.625rem 1.875rem 0 #191C201A",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worldcoin/mini-apps-ui-kit-react",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -99,16 +99,6 @@
     },
     "./styles.css": "./public/globals.css"
   },
-  "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",
-    "build:sb": "pnpm build:tailwind && storybook build",
-    "build": "pnpm build:tailwind && tsc -b ./tsconfig.lib.json && vite build",
-    "lint": "eslint ."
-  },
   "peerDependencies": {
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
@@ -126,9 +116,11 @@
     "@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",
@@ -148,7 +140,7 @@
     "tailwindcss": "^3.4.15",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.10",
+    "vite": ">=5.4.12",
     "vite-plugin-dts": "^4.3.0"
   },
   "dependencies": {
@@ -168,5 +160,15 @@
   },
   "description": "React components UI Kit library for Mini Apps",
   "author": "",
-  "license": "ISC"
+  "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:sb": "pnpm build:tailwind && storybook build",
+    "build": "pnpm build:tailwind && tsc -b ./tsconfig.lib.json && vite build",
+    "lint": "eslint ."
+  }
 }