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

package/LICENSE.md

@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

package/README.md

@@ -89,3 +89,27 @@ To use the UI Kit components with their proper styling, you need to import the s
 ```typescript
 import "@worldcoin/mini-apps-ui-kit-react/styles.css";
 ```
+
+## Import Methods
+
+The library supports two different import methods:
+
+### Default Import
+
+Import components from the main entry point:
+
+```typescript
+import { Button } from "@worldcoin/mini-apps-ui-kit-react";
+```
+
+This method is simpler but includes all components in your bundle, even if you're not using them.
+
+### Component-Level Import
+
+Import components directly from their individual modules:
+
+```typescript
+import { Button } from "@worldcoin/mini-apps-ui-kit-react/Button";
+```
+
+This method enables tree-shaking and reduces your final bundle size by only including the components you actually use. Recommended for production applications where bundle size is a concern.

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

@@ -1,3 +1,4 @@
 export * from './Flag';
 export * from './LazyFlag';
+export { isSupportedCountryCode } from './utils';
 export type { CountryCode } from './Flag';

package/dist/components/Flag/index.js

@@ -1,6 +1,8 @@
-import { Flag as a } from "./Flag.js";
-import { LazyFlag as f } from "./LazyFlag.js";
+import { Flag as e } from "./Flag.js";
+import { LazyFlag as t } from "./LazyFlag.js";
+import { isSupportedCountryCode as f } from "./utils.js";
 export {
-  a as Flag,
-  f as LazyFlag
+  e as Flag,
+  t as LazyFlag,
+  f as isSupportedCountryCode
 };

package/dist/components/PhoneField/PhoneField.d.ts

@@ -8,7 +8,12 @@ export interface PhoneFieldProps extends Omit<InputProps, "onChange" | "startAdo
     /**
      * Callback triggered when the phone number changes.
      */
-    onChange?: (phone: string) => void;
+    onChange?: (phone: string, countryCode: CountryCode) => void;
+    /**
+     * List of countries to display in the country selector.
+     * If not provided, all countries will be displayed.
+     */
+    countries?: CountryCode[];
     /**
      * If true, the dial code will be hidden.
      * The dial code is still displayed at the start of the input and in the dropdown.

package/dist/components/PhoneField/PhoneField.js

@@ -1,108 +1,112 @@
 "use client";
-import { jsx as o, jsxs as i } from "react/jsx-runtime";
-import { DROPDOWN_CONTAINER_STYLES as z } from "../../lib/constants/dropdownStyles.js";
-import { cn as G } from "../../lib/utils.js";
-import { Root as J, Trigger as K, Portal as Q, Content as Z, Viewport as ee, Item as oe } from "../../node_modules/.pnpm/@radix-ui_react-select@2.1.4_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@18.3._atdh45n5c7sked5b6tbwgdz7re/node_modules/@radix-ui/react-select/dist/index.js";
-import { forwardRef as te, useRef as re, useState as w, useImperativeHandle as ne, useMemo as ae } from "react";
-import { usePhoneInput as le, parseCountry as I } from "../../node_modules/.pnpm/react-international-phone@4.4.0_react@18.3.1/node_modules/react-international-phone/dist/index.js";
-import { Drawer as se, DrawerTrigger as ie, DrawerContent as ce, DrawerClose as ue } from "../Drawer/Drawer.js";
-import { Input as de } from "../Input/Input.js";
-import { SearchField as me } from "../SearchField/SearchField.js";
-import { Typography as F } from "../Typography/Typography.js";
-import O from "./CountryListItem.js";
-import P from "./CountrySelectorButton.js";
-import { extendedCountries as c, DIAL_CODE_PREFIX as y, startAdornmentWidthByDialCodeLength as he } from "./constants.js";
-import { getValidatedCountryCode as x, filterCountries as pe } from "./utils.js";
-const fe = te(
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import { DROPDOWN_CONTAINER_STYLES as J } from "../../lib/constants/dropdownStyles.js";
+import { cn as K } from "../../lib/utils.js";
+import { Root as Q, Trigger as Z, Portal as ee, Content as oe, Viewport as te, Item as re } from "../../node_modules/.pnpm/@radix-ui_react-select@2.1.4_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@18.3._atdh45n5c7sked5b6tbwgdz7re/node_modules/@radix-ui/react-select/dist/index.js";
+import { forwardRef as ne, useRef as ae, useState as w, useMemo as F, useImperativeHandle as se } from "react";
+import { usePhoneInput as le, parseCountry as O } from "../../node_modules/.pnpm/react-international-phone@4.4.0_react@18.3.1/node_modules/react-international-phone/dist/index.js";
+import { Drawer as ie, DrawerTrigger as ce, DrawerContent as ue, DrawerClose as de } from "../Drawer/Drawer.js";
+import { Input as me } from "../Input/Input.js";
+import { SearchField as he } from "../SearchField/SearchField.js";
+import { Typography as P } from "../Typography/Typography.js";
+import L from "./CountryListItem.js";
+import R from "./CountrySelectorButton.js";
+import { DIAL_CODE_PREFIX as g, startAdornmentWidthByDialCodeLength as pe } from "./constants.js";
+import { getCountryDataListByCodes as fe, getValidatedCountryCode as u, filterCountries as Ce } from "./utils.js";
+const ye = ne(
   ({
-    value: R,
-    onChange: u,
-    placeholder: T = "Enter phone number",
-    defaultCountryCode: l = "US",
-    hideDialCode: d = !1,
-    disableDialCodePrefill: $ = !0,
-    disabled: s = !1,
-    error: E = !1,
-    isValid: L,
-    endAdornment: b,
-    endAdornmentWidth: V,
-    countrySelectorMode: W = "dropdown",
-    ..._
-  }, B) => {
-    const g = re(null), [m, h] = w(!1), [j, p] = w(!1), [f, N] = w(""), { inputValue: k, country: C, inputRef: n, handlePhoneValueChange: M, setCountry: q } = le(
+    value: T,
+    onChange: d,
+    countries: x,
+    placeholder: $ = "Enter phone number",
+    defaultCountryCode: n = "US",
+    hideDialCode: m = !1,
+    disableDialCodePrefill: E = !0,
+    disabled: l = !1,
+    error: b = !1,
+    isValid: V,
+    endAdornment: W,
+    endAdornmentWidth: B,
+    countrySelectorMode: _ = "dropdown",
+    ...j
+  }, k) => {
+    const N = ae(null), [h, p] = w(!1), [M, f] = w(!1), [C, S] = w(""), i = F(() => fe(x), [x]), { inputValue: q, country: y, inputRef: a, handlePhoneValueChange: H, setCountry: U } = le(
       {
-        defaultCountry: l.toLowerCase(),
-        disableDialCodePrefill: $,
-        value: R,
-        countries: c,
+        defaultCountry: n.toLowerCase(),
+        disableDialCodePrefill: E,
+        value: T,
+        countries: i,
         onChange: (e) => {
-          u == null || u(e.phone);
+          d == null || d(
+            e.phone,
+            u(e.country.iso2, n)
+          );
         }
       }
-    ), a = x(C.iso2, l), H = 2.8, S = `${y}${C.dialCode}`, U = d ? H : he[C.dialCode.length];
-    ne(B, () => n.current);
+    ), s = u(y.iso2, n), X = 2.8, D = `${g}${y.dialCode}`, Y = m ? X : pe[y.dialCode.length];
+    se(k, () => a.current);
     const v = (e) => {
-      e == null || e.preventDefault(), j && requestAnimationFrame(() => {
+      e == null || e.preventDefault(), M && requestAnimationFrame(() => {
         var t;
-        (t = n.current) == null || t.focus();
-      }), p(!1);
-    }, X = (e) => {
+        (t = a.current) == null || t.focus();
+      }), f(!1);
+    }, z = (e) => {
       var r;
-      const t = (r = g.current) == null ? void 0 : r.contains(e.target);
-      p(!!t);
-    }, D = (e) => {
-      q(e.toLowerCase()), h(!1);
-    }, Y = (e) => {
-      N(e.target.value);
-    }, A = ae(
-      () => pe(c, f),
-      [c, f]
+      const t = (r = N.current) == null ? void 0 : r.contains(e.target);
+      f(!!t);
+    }, A = (e) => {
+      U(e.toLowerCase()), p(!1);
+    }, G = (e) => {
+      S(e.target.value);
+    }, I = F(
+      () => Ce(i, C),
+      [i, C]
     );
     return /* @__PURE__ */ o(
-      de,
+      me,
       {
-        ..._,
-        ref: n,
-        value: k,
-        onChange: M,
-        placeholder: T,
-        disabled: s,
-        error: E,
-        isValid: L,
-        endAdornment: b,
-        endAdornmentWidth: V,
-        startAdornmentWidth: U,
-        isFocused: m,
-        startAdornment: W === "drawer" ? /* @__PURE__ */ i(
-          se,
+        ...j,
+        ref: a,
+        value: q,
+        onChange: H,
+        placeholder: $,
+        disabled: l,
+        error: b,
+        isValid: V,
+        endAdornment: W,
+        endAdornmentWidth: B,
+        startAdornmentWidth: Y,
+        isFocused: h,
+        startAdornment: _ === "drawer" ? /* @__PURE__ */ c(
+          ie,
           {
-            open: m,
-            onOpenChange: h,
+            open: h,
+            onOpenChange: p,
             onClose: v,
             onAnimationEnd: (e) => {
-              e && p(!0);
+              e && f(!0);
             },
             children: [
-              /* @__PURE__ */ o(ie, { asChild: !0, className: "outline-none", children: /* @__PURE__ */ o(
-                P,
+              /* @__PURE__ */ o(ce, { asChild: !0, className: "outline-none", children: /* @__PURE__ */ o(
+                R,
                 {
-                  disabled: s,
-                  countryCode: a,
-                  hideDialCode: d,
-                  dialCode: S
+                  disabled: l,
+                  countryCode: s,
+                  hideDialCode: m,
+                  dialCode: D
                 }
               ) }),
-              /* @__PURE__ */ o(ce, { className: "h-[96%]", children: /* @__PURE__ */ i("div", { className: "max-w-md w-full mx-auto flex flex-col flex-grow", children: [
-                /* @__PURE__ */ o(F, { variant: "subtitle", level: 2, className: "px-4 py-2", children: "Select country" }),
+              /* @__PURE__ */ o(ue, { className: "h-[96%]", children: /* @__PURE__ */ c("div", { className: "max-w-md w-full mx-auto flex flex-col flex-grow", children: [
+                /* @__PURE__ */ o(P, { variant: "subtitle", level: 2, className: "px-4 py-2", children: "Select country" }),
                 /* @__PURE__ */ o("div", { className: "px-4 pt-2 pb-4", children: /* @__PURE__ */ o(
-                  me,
+                  he,
                   {
                     placeholder: "Search name or number",
-                    value: f,
-                    onChange: Y
+                    value: C,
+                    onChange: G
                   }
                 ) }),
-                /* @__PURE__ */ i(
+                /* @__PURE__ */ c(
                   "div",
                   {
                     className: "no-scrollbar mx-auto w-full flex flex-col flex-grow flex-basis-0 overflow-auto p-2",
@@ -112,76 +116,76 @@ const fe = te(
                       flexBasis: 0
                     },
                     children: [
-                      A.map((e) => {
-                        const t = I(e), r = x(
+                      I.map((e) => {
+                        const t = O(e), r = u(
                           t.iso2,
-                          l
+                          n
                         );
-                        return /* @__PURE__ */ o(ue, { className: "block w-full", children: /* @__PURE__ */ o(
-                          O,
+                        return /* @__PURE__ */ o(de, { className: "block w-full", children: /* @__PURE__ */ o(
+                          L,
                           {
                             countryCode: r,
                             countryName: t.name,
-                            dialCode: `${y}${t.dialCode}`,
+                            dialCode: `${g}${t.dialCode}`,
                             onClick: () => {
-                              D(r), N("");
+                              A(r), S("");
                             },
-                            isSelected: a === r
+                            isSelected: s === r
                           }
                         ) }, r);
                       }),
-                      A.length === 0 && /* @__PURE__ */ o(F, { variant: "body", level: 2, className: "text-center", children: "No countries found" })
+                      I.length === 0 && /* @__PURE__ */ o(P, { variant: "body", level: 2, className: "text-center", children: "No countries found" })
                     ]
                   }
                 )
               ] }) })
             ]
           }
-        ) : /* @__PURE__ */ i(
-          J,
+        ) : /* @__PURE__ */ c(
+          Q,
           {
-            value: a,
-            open: m,
-            onOpenChange: h,
-            onValueChange: D,
-            disabled: s,
+            value: s,
+            open: h,
+            onOpenChange: p,
+            onValueChange: A,
+            disabled: l,
             children: [
-              /* @__PURE__ */ o(K, { children: /* @__PURE__ */ o(
-                P,
+              /* @__PURE__ */ o(Z, { children: /* @__PURE__ */ o(
+                R,
                 {
-                  disabled: s,
-                  countryCode: a,
-                  hideDialCode: d,
-                  dialCode: S
+                  disabled: l,
+                  countryCode: s,
+                  hideDialCode: m,
+                  dialCode: D
                 }
               ) }),
-              /* @__PURE__ */ o(Q, { children: /* @__PURE__ */ o(
-                Z,
+              /* @__PURE__ */ o(ee, { children: /* @__PURE__ */ o(
+                oe,
                 {
                   ref: (e) => {
-                    g.current = e, e && n.current && (e.style.width = `${n.current.offsetWidth}px`);
+                    N.current = e, e && a.current && (e.style.width = `${a.current.offsetWidth}px`);
                   },
                   position: "popper",
-                  className: G(z, "-ml-3 mt-5 w-auto"),
+                  className: K(J, "-ml-3 mt-5 w-auto"),
                   onCloseAutoFocus: v,
-                  onPointerDown: X,
-                  children: /* @__PURE__ */ o(ee, { className: "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] p-2", children: c.map((e) => {
-                    const t = I(e), r = x(
+                  onPointerDown: z,
+                  children: /* @__PURE__ */ o(te, { className: "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] p-2", children: i.map((e) => {
+                    const t = O(e), r = u(
                       t.iso2,
-                      l
+                      n
                     );
                     return /* @__PURE__ */ o(
-                      oe,
+                      re,
                       {
                         value: r,
                         className: "outline-none",
                         children: /* @__PURE__ */ o(
-                          O,
+                          L,
                           {
                             countryCode: r,
                             countryName: t.name,
-                            dialCode: `${y}${t.dialCode}`,
-                            isSelected: a === r
+                            dialCode: `${g}${t.dialCode}`,
+                            isSelected: s === r
                           }
                         )
                       },
@@ -197,8 +201,8 @@ const fe = te(
     );
   }
 );
-fe.displayName = "PhoneField";
+ye.displayName = "PhoneField";
 export {
-  fe as PhoneField,
-  fe as default
+  ye as PhoneField,
+  ye as default
 };

package/dist/components/PhoneField/constants.d.ts

@@ -1,4 +1,4 @@
 import { CountryData } from 'react-international-phone';
-export declare const extendedCountries: CountryData[];
+export declare const extendedCountryDataList: CountryData[];
 export declare const DIAL_CODE_PREFIX = "+";
 export declare const startAdornmentWidthByDialCodeLength: Record<string, number>;

package/dist/components/PhoneField/constants.js

@@ -10,10 +10,10 @@ const r = new Set(
 ), l = Object.entries(i).filter(([o]) => m.includes(o.toLowerCase())).map(([o, t]) => {
   const { name: n, phone: a } = t, u = a[0].toString(), C = o.toLowerCase();
   return [n, C, u];
-}), L = [
+}), w = [
   ...c,
   ...l
-].sort((o, t) => o[0].localeCompare(t[0])), h = "+", S = {
+].sort((o, t) => o[0].localeCompare(t[0])), h = "+", D = {
   1: 4.4,
   2: 5.2,
   3: 5.8,
@@ -21,6 +21,6 @@ const r = new Set(
 };
 export {
   h as DIAL_CODE_PREFIX,
-  L as extendedCountries,
-  S as startAdornmentWidthByDialCodeLength
+  w as extendedCountryDataList,
+  D as startAdornmentWidthByDialCodeLength
 };

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

@@ -1 +1,2 @@
 export * from './PhoneField';
+export { getValidatedCountryCode } from './utils';

package/dist/components/PhoneField/index.js

@@ -1,4 +1,6 @@
 import { PhoneField as r } from "./PhoneField.js";
+import { getValidatedCountryCode as d } from "./utils.js";
 export {
-  r as PhoneField
+  r as PhoneField,
+  d as getValidatedCountryCode
 };

package/dist/components/PhoneField/utils.d.ts

@@ -1,4 +1,5 @@
 import { CountryData } from 'react-international-phone';
 import { CountryCode } from '../Flag';
 export declare const getValidatedCountryCode: (code: string, defaultCountryCode: CountryCode) => CountryCode;
+export declare const getCountryDataListByCodes: (countryCodes: CountryCode[] | undefined) => CountryData[];
 export declare const filterCountries: (countries: CountryData[], searchText: string) => CountryData[];

package/dist/components/PhoneField/utils.js

@@ -1,14 +1,23 @@
 import { parseCountry as a } from "../../node_modules/.pnpm/react-international-phone@4.4.0_react@18.3.1/node_modules/react-international-phone/dist/index.js";
-import { isSupportedCountryCode as d } from "../Flag/utils.js";
-import { DIAL_CODE_PREFIX as u } from "./constants.js";
-const m = (o, e) => {
-  const r = o.toUpperCase();
-  return d(r) ? r : e;
-}, l = (o, e) => e ? o.filter((r) => {
-  const t = a(r), s = t.name.toLowerCase(), C = `${u}${t.dialCode.toLowerCase()}`, n = e.toLowerCase();
-  return s.includes(n) || C.includes(n);
-}) : o;
+import { isSupportedCountryCode as u } from "../Flag/utils.js";
+import { extendedCountryDataList as s, DIAL_CODE_PREFIX as p } from "./constants.js";
+const f = (t, e) => {
+  const r = t.toUpperCase();
+  return u(r) ? r : e;
+}, m = (t) => {
+  if (!(t != null && t.length))
+    return s;
+  const e = new Set(t);
+  return s.filter((r) => {
+    const o = a(r).iso2.toUpperCase();
+    return e.has(o);
+  });
+}, L = (t, e) => e ? t.filter((r) => {
+  const o = a(r), i = o.name.toLowerCase(), C = `${p}${o.dialCode.toLowerCase()}`, n = e.toLowerCase();
+  return i.includes(n) || C.includes(n);
+}) : t;
 export {
-  l as filterCountries,
-  m as getValidatedCountryCode
+  L as filterCountries,
+  m as getCountryDataListByCodes,
+  f as getValidatedCountryCode
 };

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worldcoin/mini-apps-ui-kit-react",
-  "version": "0.0.2",
+  "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",
@@ -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 ."
+  }
 }