npm - @worldcoin/mini-apps-ui-kit-react - Versions diffs - 0.0.8 → 1.0.0-canary.1 - Mend

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

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 (198) hide show

package/README.md CHANGED Viewed

@@ -59,29 +59,20 @@ export default tseslint.config({
 ## Font Configuration
-The library uses three fonts:
+The library uses the following font **[TWK Lausanne](https://weltkern.com/typefaces/lausanne)** as the sans-serif font for all text `(--font-sans)`.
-- **[Rubik](https://fonts.google.com/specimen/Rubik)** as the sans-serif font for body text and subtitles `(--font-sans)`
-- **[Sora](https://fonts.google.com/specimen/Sora)** as the display font for headings and numbers `(--font-display)`
-- **[DM Mono](https://fonts.google.com/specimen/DM+Mono)** as the monospace font `(--font-mono)`
+> **⚠️ License Notice**: TWK Lausanne is a commercial font that requires a license. Make sure you have obtained the appropriate license from [Weltkern](https://weltkern.com/typefaces/lausanne) before using it in your project.
-Embed the following code in the `<head>` of your html to load the fonts:
-```html
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<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"
-/>
-```
-Or use the following code to load the fonts via CSS:
+By default, the library sets `--font-sans` to **TWK Lausanne**, but you can override this CSS variable to use any other font of your choice:
 ```css
-@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");
+:root {
+  --font-sans: 'Your Font Name', sans-serif;
+}
 ```
+You must import the font in your application before using it. The library does not include the font files - you need to handle the font loading yourself according to your license agreement.
 ## Importing Styles
 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):

package/dist/components/AlertDialog/AlertDialog.js ADDED Viewed

@@ -0,0 +1,94 @@
+"use client";
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import { cn as s } from "../../lib/utils.js";
+import * as i from "react";
+import { Drawer as t } from "../../node_modules/.pnpm/vaul@1.1.2_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@18.3.18_react-dom@18.3._7iqkcrcg5qjc3n2ixm6rnrnx3e/node_modules/vaul/dist/index.js";
+import { BottomBar as g } from "../BottomBar/BottomBar.js";
+import { Button as f } from "../Button/Button.js";
+import { XMark as p } from "../Icons/XMark.js";
+import { Typography as m } from "../Typography/Typography.js";
+import { AlertDialogContext as D, useAlertDialog as A } from "./use-alert-dialog.js";
+const y = ({ dismissible: e = !0, modal: l = !0, ...a }) => /* @__PURE__ */ r(D.Provider, { value: { dismissible: e }, children: /* @__PURE__ */ r(
+  t.Root,
+  {
+    shouldScaleBackground: !1,
+    dismissible: e,
+    modal: l,
+    ...a
+  }
+) });
+y.displayName = "AlertDialog";
+const h = i.forwardRef((e, l) => /* @__PURE__ */ r(t.Trigger, { ref: l, ...e }));
+h.displayName = "AlertDialogTrigger";
+const N = t.Portal, d = i.forwardRef((e, l) => /* @__PURE__ */ r(t.Close, { ref: l, ...e }));
+d.displayName = "AlertDialogClose";
+const c = i.forwardRef(({ className: e, ...l }, a) => /* @__PURE__ */ r(
+  t.Overlay,
+  {
+    ref: a,
+    className: s("fixed inset-0 z-50 bg-gray-900/40", e),
+    ...l
+  }
+));
+c.displayName = "AlertDialogOverlay";
+const u = i.forwardRef(({ className: e, children: l, ...a }, o) => /* @__PURE__ */ n(N, { children: [
+  /* @__PURE__ */ r(c, {}),
+  /* @__PURE__ */ r(
+    t.Content,
+    {
+      ref: o,
+      className: s("fixed inset-x-0 bottom-0 z-50 mt-24 h-auto", e),
+      ...a,
+      children: /* @__PURE__ */ r("div", { className: "flex flex-col rounded-[1.75rem] bg-gray-0 m-3 p-8", children: l })
+    }
+  )
+] }));
+u.displayName = "AlertDialogContent";
+const x = ({ icon: e, children: l, ...a }) => {
+  const { dismissible: o } = A();
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: s(
+        "flex justify-between gap-4 mb-4 w-full",
+        e ? "items-start" : "items-center"
+      ),
+      ...a,
+      children: [
+        /* @__PURE__ */ n("div", { className: "flex flex-col gap-6", children: [
+          e,
+          l
+        ] }),
+        o && /* @__PURE__ */ r("div", { className: "shrink-0", children: /* @__PURE__ */ r(d, { asChild: !0, children: /* @__PURE__ */ r(f, { variant: "tertiary", size: "icon", children: /* @__PURE__ */ r(p, {}) }) }) })
+      ]
+    }
+  );
+};
+x.displayName = "AlertDialogHeader";
+const v = (e) => /* @__PURE__ */ r(g, { ...e });
+v.displayName = "AlertDialogFooter";
+const C = i.forwardRef(({ className: e, children: l, ...a }, o) => /* @__PURE__ */ r(t.Title, { ref: o, ...a, asChild: !0, children: /* @__PURE__ */ r(m, { variant: "heading", level: 2, children: l }) }));
+C.displayName = "AlertDialogTitle";
+const w = i.forwardRef(({ className: e, children: l, ...a }, o) => /* @__PURE__ */ r(
+  t.Description,
+  {
+    ref: o,
+    className: s("text-gray-500 mb-8", e),
+    ...a,
+    asChild: !0,
+    children: /* @__PURE__ */ r(m, { children: l })
+  }
+));
+w.displayName = "AlertDialogDescription";
+export {
+  y as AlertDialog,
+  d as AlertDialogClose,
+  u as AlertDialogContent,
+  w as AlertDialogDescription,
+  v as AlertDialogFooter,
+  x as AlertDialogHeader,
+  c as AlertDialogOverlay,
+  N as AlertDialogPortal,
+  C as AlertDialogTitle,
+  h as AlertDialogTrigger
+};

package/dist/components/AlertDialog/index.d.ts ADDED Viewed

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

package/dist/components/AlertDialog/index.js ADDED Viewed

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

package/dist/components/AlertDialog/types.d.ts ADDED Viewed

@@ -0,0 +1,172 @@
+import { Drawer as DrawerPrimitive } from 'vaul';
+export interface WithFadeFromProps {
+    /**
+     * Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up.
+     * Should go from least visible. Example `[0.2, 0.5, 0.8]`.
+     * You can also use px values, which doesn't take screen height into account.
+     */
+    snapPoints: (number | string)[];
+    /**
+     * Index of a `snapPoint` from which the overlay fade should be applied. Defaults to the last snap point.
+     */
+    fadeFromIndex: number;
+}
+export interface WithoutFadeFromProps {
+    /**
+     * Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up.
+     * Should go from least visible. Example `[0.2, 0.5, 0.8]`.
+     * You can also use px values, which doesn't take screen height into account.
+     */
+    snapPoints?: (number | string)[];
+    fadeFromIndex?: never;
+}
+type BaseAlertDialogProps = {
+    /** The active snap point */
+    activeSnapPoint?: number | string | null;
+    /** Callback when the active snap point changes */
+    setActiveSnapPoint?: (snapPoint: number | string | null) => void;
+    /** The content of the drawer */
+    children?: React.ReactNode;
+    /** Whether the drawer is open */
+    open?: boolean;
+    /**
+     * Number between 0 and 1 that determines when the drawer should be closed.
+     * Example: threshold of 0.5 would close the drawer if the user swiped for 50% of the height of the drawer or more.
+     * @default 0.25
+     */
+    closeThreshold?: number;
+    /**
+     * Duration for which the drawer is not draggable after scrolling content inside of the drawer.
+     * @default 500ms
+     */
+    scrollLockTimeout?: number;
+    /**
+     * When `true`, don't move the drawer upwards if there's space, but rather only change it's height so it's fully scrollable when the keyboard is open
+     */
+    fixed?: boolean;
+    /**
+     * When `true` only allows the drawer to be dragged by the `<AlertDialog.Handle />` component.
+     * @default false
+     */
+    handleOnly?: boolean;
+    /**
+     * When `false` dragging, clicking outside, pressing esc, etc. will not close the drawer.
+     * Use this in comination with the `open` prop, otherwise you won't be able to open/close the drawer.
+     * @default true
+     */
+    dismissible?: boolean;
+    /**
+     * When `false` it allows to interact with elements outside of the drawer without closing it.
+     * @default true
+     */
+    modal?: boolean;
+    /**
+     * Direction of the drawer. Can be `top` or `bottom`, `left`, `right`.
+     * @default 'bottom'
+     */
+    direction?: "top" | "bottom" | "left" | "right";
+    /**
+     * Opened by default, skips initial enter animation. Still reacts to `open` state changes
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * When set to `true` prevents scrolling on the document body on mount, and restores it on unmount.
+     * @default false
+     */
+    disablePreventScroll?: boolean;
+    /**
+     * When `true` Vaul will reposition inputs rather than scroll then into view if the keyboard is in the way.
+     * Setting it to `false` will fall back to the default browser behavior.
+     * @default true when {@link snapPoints} is defined
+     */
+    repositionInputs?: boolean;
+    /**
+     * Disabled velocity based swiping for snap points.
+     * This means that a snap point won't be skipped even if the velocity is high enough.
+     * Useful if each snap point in a drawer is equally important.
+     * @default false
+     */
+    snapToSequentialPoint?: boolean;
+    /** The container element to render the drawer into */
+    container?: HTMLElement | null;
+    /** Whether to prevent scroll restoration */
+    preventScrollRestoration?: boolean;
+    /** Whether to auto focus the drawer when opened */
+    autoFocus?: boolean;
+    /** Callback when the open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Callback when dragging */
+    onDrag?: (event: React.PointerEvent<HTMLDivElement>, percentageDragged: number) => void;
+    /** Callback when releasing */
+    onRelease?: (event: React.PointerEvent<HTMLDivElement>, open: boolean) => void;
+    /** Callback when closing */
+    onClose?: () => void;
+    /**
+     * Gets triggered after the open or close animation ends, it receives an `open` argument with the `open` state of the drawer by the time the function was triggered.
+     * Useful to revert any state changes for example.
+     */
+    onAnimationEnd?: (open: boolean) => void;
+};
+/**
+ * Props for the main AlertDialog component
+ */
+export type AlertDialogProps = BaseAlertDialogProps & (WithFadeFromProps | WithoutFadeFromProps);
+/**
+ * Props for the AlertDialogContent component
+ */
+export interface AlertDialogContentProps extends React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> {
+    /** The content of the drawer */
+    children?: React.ReactNode;
+    /** Additional CSS classes to apply */
+    className?: string;
+    /** Whether to render the trigger without default styling */
+    asChild?: boolean;
+    /** Whether to close the drawer when clicking outside */
+    onCloseAutoFocus?: (event: Event) => void;
+    /** Called when the escape key is pressed */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /** Called when pointer down occurs outside drawer */
+    onPointerDownOutside?: (event: Event) => void;
+    /** Called when drawer starts to close */
+    onInteractOutside?: (event: Event) => void;
+}
+/**
+ * Props for the AlertDialogHeader component
+ */
+export interface AlertDialogHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className"> {
+    /** Optional icon to display in the header */
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+}
+/**
+ * Props for the AlertDialogTitle component
+ */
+export interface AlertDialogTitleProps extends React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title> {
+    children?: React.ReactNode;
+    /** Whether to render the title without default styling */
+    asChild?: boolean;
+}
+/**
+ * Props for the AlertDialogDescription component
+ */
+export interface AlertDialogDescriptionProps extends React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description> {
+    children?: React.ReactNode;
+    /** Whether to render the description without default styling */
+    asChild?: boolean;
+}
+/**
+ * Props for the AlertDialogTrigger component
+ */
+export interface AlertDialogTriggerProps extends React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Trigger> {
+    /** Whether to render the trigger without default styling */
+    asChild?: boolean;
+}
+/**
+ * Props for the AlertDialogTrigger component
+ */
+export interface AlertDialogCloseProps extends React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Close> {
+    /** Whether to render the trigger without default styling */
+    asChild?: boolean;
+}
+export {};

package/dist/components/AlertDialog/types.js ADDED Viewed

	@@ -0,0 +1 @@
1	+

package/dist/components/AlertDialog/use-alert-dialog.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+interface AlertDialogContextValue {
+    dismissible?: boolean;
+}
+declare const AlertDialogContext: import('react').Context<AlertDialogContextValue | undefined>;
+declare const useAlertDialog: () => AlertDialogContextValue;
+export { AlertDialogContext, useAlertDialog };

package/dist/components/AlertDialog/use-alert-dialog.js ADDED Viewed

@@ -0,0 +1,11 @@
+import { createContext as e, useContext as o } from "react";
+const r = e(void 0), i = () => {
+  const t = o(r);
+  if (t === void 0)
+    throw new Error("useAlertDialog must be used within an AlertDialog");
+  return t;
+};
+export {
+  r as AlertDialogContext,
+  i as useAlertDialog
+};

package/dist/components/BottomBar/BottomBar.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
+declare const bottomBarVariants: (props?: ({
+    direction?: "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface BottomBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "className">, VariantProps<typeof bottomBarVariants> {
+    /**
+     * The direction of the bottom bar
+     * @default "horizontal"
+     */
+    direction?: "horizontal" | "vertical";
+}
+export declare const BottomBar: import('react').ForwardRefExoticComponent<BottomBarProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/BottomBar/BottomBar.js ADDED Viewed

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import { cva as e } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { forwardRef as l } from "react";
+const s = e("w-full gap-4", {
+  variants: {
+    direction: {
+      horizontal: "grid grid-cols-1 [&>*]:col-span-1 [&:has(>*:nth-child(2))]:grid-cols-2",
+      vertical: "flex flex-col-reverse"
+    }
+  },
+  defaultVariants: {
+    direction: "horizontal"
+  }
+}), c = l(
+  ({ children: r, direction: o, ...t }, a) => /* @__PURE__ */ i("div", { ref: a, className: s({ direction: o }), ...t, children: r })
+);
+c.displayName = "BottomBar";
+export {
+  c as BottomBar
+};

package/dist/components/BottomBar/index.d.ts ADDED Viewed

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

package/dist/components/BottomBar/index.js ADDED Viewed

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

package/dist/components/BulletList/BulletList.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { ComponentProps, ReactElement } from 'react';
+import { BulletListItemProps } from '../BulletListItem/BulletListItem';
+export interface BulletListProps extends ComponentProps<"div"> {
+    /**
+     * Children should be BulletListItem components, but any ReactNode is accepted for compatibility
+     */
+    children: ReactElement<BulletListItemProps>[] | ReactElement<BulletListItemProps>;
+}
+export declare const BulletList: import('react').ForwardRefExoticComponent<Omit<BulletListProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export default BulletList;

package/dist/components/BulletList/BulletList.js ADDED Viewed

@@ -0,0 +1,11 @@
+import { jsx as e } from "react/jsx-runtime";
+import { cn as s } from "../../lib/utils.js";
+import { forwardRef as i } from "react";
+const m = i(
+  ({ children: t, className: r, ...o }, a) => /* @__PURE__ */ e("div", { ref: a, className: s("grid gap-y-5 content-start", r), ...o, children: t })
+);
+m.displayName = "BulletList";
+export {
+  m as BulletList,
+  m as default
+};

package/dist/components/BulletList/index.d.ts ADDED Viewed

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

package/dist/components/BulletList/index.js ADDED Viewed

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

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

@@ -0,0 +1,7 @@
+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 ADDED Viewed

@@ -0,0 +1,23 @@
+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 ADDED Viewed

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

package/dist/components/BulletListItem/index.js ADDED Viewed

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

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

@@ -0,0 +1,6 @@
+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 ADDED Viewed

@@ -0,0 +1,22 @@
+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 ADDED Viewed

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

package/dist/components/BulletPoint/index.js ADDED Viewed

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

package/dist/components/Button/Button.d.ts CHANGED Viewed

@@ -1,39 +1,27 @@
 import { VariantProps } from 'class-variance-authority';
 import { ButtonHTMLAttributes } from 'react';
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "tertiary" | "ghost" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
-    radius?: "none" | "sm" | "md" | "lg" | "full" | null | undefined;
-    isLoading?: boolean | null | undefined;
+    variant?: "primary" | "secondary" | "tertiary" | null | undefined;
+    size?: "sm" | "lg" | "icon" | null | undefined;
+    stateful?: boolean | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className">, VariantProps<typeof buttonVariants> {
     /**
      * The variant style to use
      * @default "primary"
      */
-    variant?: "primary" | "secondary" | "tertiary" | "ghost";
+    variant?: "primary" | "secondary" | "tertiary";
     /**
      * The size of the button
-     * @default "md"
+     * @default "lg"
      */
-    size?: "sm" | "md" | "lg";
+    size?: "sm" | "lg" | "icon";
     /**
-     * The border radius of the button
-     * @default "md"
+     * The state of the button
+     * @default undefined
      */
-    radius?: "none" | "sm" | "md" | "lg" | "full";
-    /**
-     * Whether the button is in a loading state
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * Optional icon to display in the button.
-     * The component passed to this prop must accept a `style` prop.
-     * The component should use currentColor to match the Input's styling.
-     */
-    icon?: React.ReactNode;
+    state?: "pending" | "success" | "failed";
     /**
      * Whether the button should take up the full width of its container
      * @default false