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

package/dist/components/Button/Button.js

@@ -1,32 +1,28 @@
 "use client";
-import { jsxs as b, jsx as r } from "react/jsx-runtime";
-import { Slot as s } from "../../node_modules/.pnpm/@radix-ui_react-slot@1.1.1_@types_react@18.3.18_react@18.3.1/node_modules/@radix-ui/react-slot/dist/index.js";
-import { cva as y } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { jsxs as g, jsx as a } from "react/jsx-runtime";
+import { cn as d } from "../../lib/utils.js";
+import { Slot as b } from "../../node_modules/.pnpm/@radix-ui_react-slot@1.1.1_@types_react@18.3.18_react@18.3.1/node_modules/@radix-ui/react-slot/dist/index.js";
+import { cva as m } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
 import { forwardRef as p } from "react";
-import u from "./Spinner.js";
-const f = y(
-  "flex items-center justify-center gap-1 font-display font-semibold leading-[1.2] tracking-normal transition-colors",
+import { Fail as f } from "../Icons/Fail.js";
+import { Success as y } from "../Icons/Success.js";
+import { Spinner as c } from "../Spinner/Spinner.js";
+import { typographyVariants as u } from "../Typography/Typography.js";
+const v = m(
+  "flex items-center justify-center rounded-full gap-2 font-display leading-[1.2] tracking-normal transition-colors",
   {
     variants: {
       variant: {
-        primary: "bg-gray-900 text-gray-0 hover:bg-gray-700 active:bg-gray-500 disabled:bg-gray-100 disabled:text-gray-300",
-        secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300 active:bg-gray-400 disabled:bg-gray-100 disabled:text-gray-300",
-        tertiary: "border border-gray-200 bg-transparent text-gray-500 hover:bg-gray-100 active:bg-gray-200 disabled:text-gray-300",
-        ghost: "bg-transparent text-gray-500 hover:bg-gray-100 active:bg-gray-200 disabled:text-gray-300"
+        primary: "bg-gray-900 text-gray-0 hover:bg-gray-700 active:bg-gray-700 disabled:bg-gray-100 disabled:text-gray-300",
+        secondary: "bg-transparent text-gray-900 border border-gray-200 hover:bg-gray-50 active:bg-gray-50 disabled:text-gray-300 disabled:border-gray-100",
+        tertiary: "bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-200 disabled:text-gray-300 disabled:bg-gray-50"
       },
       size: {
-        sm: "h-10 min-w-10 px-2 text-sm",
-        md: "h-12 min-w-12 px-3 text-base",
-        lg: "h-14 min-w-14 px-4 text-base"
+        sm: "h-10 min-w-10 px-4",
+        lg: "h-14 min-w-14 px-4",
+        icon: "size-10"
       },
-      radius: {
-        none: "rounded-none",
-        sm: "rounded",
-        md: "rounded-xl",
-        lg: "rounded-2xl",
-        full: "rounded-full"
-      },
-      isLoading: {
+      stateful: {
         true: "border-none bg-transparent fill-transparent text-transparent hover:bg-transparent active:bg-transparent disabled:bg-transparent disabled:text-transparent",
         false: ""
       },
@@ -38,66 +34,38 @@ const f = y(
     defaultVariants: {
       variant: "primary",
       size: "lg",
-      radius: "md",
       fullWidth: !1
     }
   }
-), x = {
-  sm: {
-    width: "1rem",
-    height: "1rem"
-  },
-  md: {
-    width: "1.25rem",
-    height: "1.25rem"
-  },
-  lg: {
-    width: "1.5rem",
-    height: "1.5rem"
-  }
-}, c = p(
-  ({
-    variant: i,
-    size: a = "lg",
-    radius: g,
-    className: h,
-    isLoading: t,
-    children: e,
-    icon: n,
-    fullWidth: o,
-    asChild: d,
-    ...l
-  }, m) => /* @__PURE__ */ b(
-    d ? s : "button",
+), x = p(
+  ({ variant: e, size: t = "lg", fullWidth: s, asChild: i, state: r, children: n, ...l }, o) => /* @__PURE__ */ g(
+    i ? b : "button",
     {
-      ref: m,
-      className: f({
-        variant: i,
-        size: a,
-        radius: g,
-        isLoading: t,
-        fullWidth: o
-      }),
+      ref: o,
+      className: d(
+        v({
+          variant: e,
+          size: t,
+          stateful: !!r,
+          fullWidth: s
+        }),
+        u({
+          variant: "label",
+          level: t === "lg" ? 1 : 2
+        })
+      ),
       ...l,
       children: [
-        n && /* @__PURE__ */ r(
-          s,
-          {
-            style: {
-              ...x[a],
-              opacity: t ? 0 : 1
-            },
-            children: n
-          }
-        ),
-        e && /* @__PURE__ */ r("span", { children: e }),
-        t && /* @__PURE__ */ r(u, { className: "absolute" })
+        !r && n,
+        r === "pending" && /* @__PURE__ */ a(c, { className: "absolute size-6" }),
+        r === "success" && /* @__PURE__ */ a(y, { className: "absolute size-6" }),
+        r === "failed" && /* @__PURE__ */ a(f, { className: "absolute size-6" })
       ]
     }
   )
 );
-c.displayName = "Button";
+x.displayName = "Button";
 export {
-  c as Button,
-  c as default
+  x as Button,
+  x as default
 };

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,19 +1,39 @@
 import { CheckboxProps as RadixCheckboxProps } from '@radix-ui/react-checkbox';
 export interface CheckboxProps extends Omit<RadixCheckboxProps, "onCheckedChange" | "onChange" | "className"> {
     /**
-     * The checked state of the checkbox.
+     * Whether to forward the root element
      * @default false
      */
+    asChild?: boolean;
+    /**
+     * The initial checked state when the checkbox is uncontrolled
+     */
+    defaultChecked?: boolean;
+    /**
+     * The controlled checked state of the checkbox
+     */
     checked?: boolean;
     /**
-     * Callback function that is triggered when the checked state changes.
+     * Event handler called when the checked state changes
      */
     onChange?: (checked: boolean) => void;
     /**
-     * The disabled state of the checkbox.
-     * @default false
+     * Whether the checkbox is disabled
      */
     disabled?: boolean;
+    /**
+     * Whether the checkbox is required
+     */
+    required?: boolean;
+    /**
+     * The name of the checkbox
+     */
+    name?: string;
+    /**
+     * The value of the checkbox
+     * @default ""
+     */
+    value?: string;
 }
 export declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLButtonElement>>;
 export default Checkbox;

package/dist/components/Checkbox/Checkbox.js

@@ -1,8 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
 import { Root as c, Indicator as s } from "../../node_modules/.pnpm/@radix-ui_react-checkbox@1.1.3_@types_react-dom@18.3.5_@types_react@18.3.18__@types_react@18._5vtvszwgvdmnkk62ia2dob365m/node_modules/@radix-ui/react-checkbox/dist/index.js";
-import { forwardRef as n } from "react";
-import { Tick as i } from "../Icons/Tick.js";
-const l = n(
+import { forwardRef as i } from "react";
+import { Tick as n } from "../Icons/Tick.js";
+const l = i(
   ({ checked: a, onChange: r, disabled: t = !1, ...o }, d) => /* @__PURE__ */ e(
     c,
     {
@@ -10,9 +10,9 @@ const l = n(
       checked: a,
       onCheckedChange: r,
       disabled: t,
-      className: "flex h-6 w-6 items-center justify-center rounded-md border-[0.09375rem] transition-all data-[state=checked]:border-gray-900 data-[state=checked]:bg-gray-900 data-[state=unchecked]:border-gray-400 data-[state=unchecked]:bg-transparent disabled:cursor-not-allowed disabled:opacity-20",
+      className: "flex size-6 items-center justify-center rounded-md border-[0.09375rem] transition-all data-[state=checked]:border-gray-900 data-[state=checked]:bg-gray-900 data-[state=unchecked]:border-gray-200 data-[state=unchecked]:bg-transparent disabled:cursor-not-allowed disabled:opacity-20",
       ...o,
-      children: /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(i, { className: "text-gray-0" }) })
+      children: /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(n, { className: "text-gray-0" }) })
     }
   )
 );

package/dist/components/Chip/Chip.d.ts

@@ -20,6 +20,7 @@ export interface ChipProps {
     className?: string;
 }
 export declare const Chip: import('react').ForwardRefExoticComponent<ChipProps & VariantProps<(props?: ({
-    variant?: "default" | "success" | "warning" | "error" | "important" | null | undefined;
+    variant?: "error" | "success" | "default" | "warning" | "important" | null | undefined;
+    isIcon?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & import('react').RefAttributes<HTMLDivElement>>;
 export default Chip;

package/dist/components/Chip/Chip.js

@@ -1,9 +1,10 @@
 import { jsxs as s, jsx as t } from "react/jsx-runtime";
 import { Slot as o } from "../../node_modules/.pnpm/@radix-ui_react-slot@1.1.1_@types_react@18.3.18_react@18.3.1/node_modules/@radix-ui/react-slot/dist/index.js";
-import { cva as f } 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 m = f(
-  "inline-flex h-7 items-center gap-2 rounded-full px-2 font-sans text-sm font-medium leading-none",
+import { cva as l } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { forwardRef as f } from "react";
+import { Typography as m } from "../Typography/Typography.js";
+const c = l(
+  "inline-flex h-7 items-center gap-2 rounded-full px-4 font-sans text-sm font-medium leading-none",
   {
     variants: {
       variant: {
@@ -12,16 +13,21 @@ const m = f(
         warning: "bg-warning-100 text-warning-700",
         error: "bg-error-100 text-error-700",
         important: "bg-info-100 text-info-700"
+      },
+      isIcon: {
+        true: "pl-3",
+        false: ""
       }
     },
     defaultVariants: {
-      variant: "default"
+      variant: "default",
+      isIcon: !1
     }
   }
-), d = l(
-  ({ className: e = "", icon: r, label: a, variant: n = "default" }, i) => /* @__PURE__ */ s("div", { ref: i, className: m({ variant: n, className: e }), children: [
+), d = f(
+  ({ className: e = "", icon: r, label: a, variant: i = "default" }, n) => /* @__PURE__ */ s("div", { ref: n, className: c({ variant: i, className: e, isIcon: !!r }), children: [
     r && /* @__PURE__ */ t(o, { style: { width: "1rem", height: "1rem" }, children: r }),
-    /* @__PURE__ */ t("span", { children: a })
+    /* @__PURE__ */ t(m, { variant: "subtitle", level: 4, children: a })
   ] })
 );
 d.displayName = "Chip";

package/dist/components/ClearButton/Clear.js

@@ -1,27 +1,27 @@
-import { jsx as e } from "react/jsx-runtime";
-import { cn as C } from "../../lib/utils.js";
-function i({ className: l }) {
-  return /* @__PURE__ */ e(
+import { jsx as r } from "react/jsx-runtime";
+import { cn as t } from "../../lib/utils.js";
+function s({ className: e }) {
+  return /* @__PURE__ */ r(
     "svg",
     {
-      width: "20",
-      height: "20",
-      viewBox: "0 0 20 20",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      className: C("h-4 w-4", l),
-      children: /* @__PURE__ */ e(
+      className: t("size-6", e),
+      children: /* @__PURE__ */ r(
         "path",
         {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M18.3333 9.99999C18.3333 14.6024 14.6024 18.3333 9.99999 18.3333C5.39762 18.3333 1.66666 14.6024 1.66666 9.99999C1.66666 5.39762 5.39762 1.66666 9.99999 1.66666C14.6024 1.66666 18.3333 5.39762 18.3333 9.99999ZM12.799 12.7989C12.5549 13.043 12.1592 13.043 11.9151 12.7989L10 10.8838L8.08491 12.7989C7.84083 13.043 7.4451 13.043 7.20102 12.7989C6.95695 12.5548 6.95695 12.1591 7.20102 11.915L9.11611 9.99994L7.20104 8.08486C6.95696 7.84078 6.95696 7.44506 7.20104 7.20098C7.44511 6.9569 7.84084 6.9569 8.08492 7.20098L10 9.11606L11.9151 7.20098C12.1591 6.95691 12.5549 6.95691 12.799 7.20098C13.043 7.44506 13.043 7.84079 12.799 8.08487L10.8839 9.99994L12.799 11.915C13.043 12.1591 13.043 12.5548 12.799 12.7989Z",
-          fill: "currentColor"
+          d: "M6.75729 17.2426L11.9999 12M17.2426 6.75736L11.9999 12M11.9999 12L6.75729 6.75736M11.9999 12L17.2426 17.2426",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "square"
         }
       )
     }
   );
 }
 export {
-  i as Clear
+  s as Clear
 };

package/dist/components/ClearButton/ClearButton.js

@@ -1,27 +1,27 @@
 import { jsx as e } from "react/jsx-runtime";
 import * as m from "react";
-import { cn as l } from "../../lib/utils.js";
-import { Clear as u } from "./Clear.js";
-const h = 1.25, i = m.forwardRef(
-  ({ children: p, inputRef: t, className: a, onClear: r, ...s }, n) => {
-    const c = (o) => {
+import { cn as u } from "../../lib/utils.js";
+import { Clear as l } from "./Clear.js";
+const B = 1.25, i = m.forwardRef(
+  ({ children: p, inputRef: t, className: a, onClear: r, ...n }, c) => {
+    const s = (o) => {
       o.preventDefault(), o.stopPropagation(), t && "current" in t && t.current && (t.current.value = "", r == null || r());
     };
     return /* @__PURE__ */ e(
       "button",
       {
         type: "button",
-        ref: n,
-        className: l(a),
-        onMouseDown: c,
-        ...s,
-        children: /* @__PURE__ */ e(u, { className: "text-gray-400 size-5" })
+        ref: c,
+        className: u(a),
+        onMouseDown: s,
+        ...n,
+        children: /* @__PURE__ */ e(l, {})
       }
     );
   }
 );
 i.displayName = "ClearButton";
 export {
-  h as CLEAR_BUTTON_WIDTH,
+  B as CLEAR_BUTTON_WIDTH,
   i as default
 };

package/dist/components/ColorPicker/ColorPicker.js

@@ -1,36 +1,36 @@
 import { jsx as t } from "react/jsx-runtime";
-import { Item as i, Indicator as n, Root as c } 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 { Item as n, Indicator as i, Root as c } 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 s } from "react";
 const f = s(
-  ({ value: e, ...o }, r) => /* @__PURE__ */ t(
-    i,
+  ({ value: e, ...r }, o) => /* @__PURE__ */ t(
+    n,
     {
-      ref: r,
+      ref: o,
       value: e,
-      className: "size-[3.25rem] cursor-default rounded-full outline-none flex items-center justify-center relative disabled:opacity-90 disabled:cursor-not-allowed",
+      className: "size-[2.5rem] cursor-default rounded-full outline-none flex items-center justify-center relative disabled:opacity-90 disabled:cursor-not-allowed",
       style: {
         background: e
       },
-      ...o,
+      ...r,
       children: /* @__PURE__ */ t(
-        n,
+        i,
         {
-          className: "absolute flex size-[3.5rem] items-center rounded-full justify-center opacity-25",
-          style: { boxShadow: `0px 0px 0px 2px ${e}` }
+          className: "absolute flex size-[2.75rem] items-center rounded-full justify-center",
+          style: { boxShadow: `0px 0px 0px 4px ${e}` }
         }
       )
     }
   )
 ), p = s(
-  ({ value: e, onChange: o, children: r, ...a }, l) => /* @__PURE__ */ t(
+  ({ value: e, onChange: r, children: o, ...l }, a) => /* @__PURE__ */ t(
     c,
     {
-      ref: l,
+      ref: a,
       value: e,
-      onValueChange: o,
+      onValueChange: r,
       className: "flex gap-4 items-center",
-      ...a,
-      children: r
+      ...l,
+      children: o
     }
   )
 );

package/dist/components/CountryDrawer/CountryDrawer.d.ts

@@ -0,0 +1,12 @@
+import { CountryCode } from '../Flag';
+interface CountryDrawerProps {
+    value: CountryCode;
+    countries?: CountryCode[];
+    disabled?: boolean;
+    defaultValue?: CountryCode;
+    children: React.ReactNode;
+    onChange: (countryCode: string) => void;
+    onAnimationEnd?: (open: boolean) => void;
+}
+export declare function CountryDrawer({ onChange, value, countries, onAnimationEnd, disabled, children, defaultValue, }: CountryDrawerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/CountryDrawer/CountryDrawer.js

@@ -0,0 +1,63 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { useState as i, useRef as S } from "react";
+import { Button as w } from "../Button/Button.js";
+import { Drawer as v, DrawerTrigger as x, DrawerContent as D, DrawerClose as T } from "../Drawer/Drawer.js";
+import { XMark as F } from "../Icons/XMark.js";
+import { GroupedCountryList as N } from "../PhoneField/GroupedCountryList.js";
+import { SearchField as j } from "../SearchField/SearchField.js";
+import { TopBar as B } from "../TopBar/TopBar.js";
+import { useCountryFiltering as G } from "./useCountryFiltering.js";
+import { useCountryGrouping as O } from "./useCountryGrouping.js";
+function H({
+  onChange: s,
+  value: u,
+  countries: c,
+  onAnimationEnd: m,
+  disabled: f = !1,
+  children: h,
+  defaultValue: p = "US"
+}) {
+  const [t, o] = i(""), [n, a] = i(!1), d = S(null), C = (r) => {
+    o(r.target.value);
+  }, g = G({
+    countries: c,
+    searchText: t
+  }), y = O({
+    countries: g,
+    defaultValue: p
+  });
+  return /* @__PURE__ */ l(v, { open: n, onOpenChange: a, onAnimationEnd: m, height: "full", children: [
+    /* @__PURE__ */ e(x, { asChild: !0, className: "outline-none", disabled: f, children: h }),
+    /* @__PURE__ */ l(D, { children: [
+      /* @__PURE__ */ e(
+        B,
+        {
+          title: "Country",
+          startAdornment: /* @__PURE__ */ e(T, { asChild: !0, children: /* @__PURE__ */ e(w, { variant: "tertiary", size: "icon", children: /* @__PURE__ */ e(F, {}) }) })
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "p-6", children: /* @__PURE__ */ e(
+        j,
+        {
+          ref: d,
+          value: t,
+          onChange: C,
+          autoFocus: n
+        }
+      ) }),
+      /* @__PURE__ */ e("div", { className: "no-scrollbar w-full overflow-auto px-6 h-full", children: /* @__PURE__ */ e(
+        N,
+        {
+          groupedCountries: y,
+          onSelect: (r) => {
+            s(r), o(""), a(!1);
+          },
+          value: u
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  H as CountryDrawer
+};

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

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

package/dist/components/CountryDrawer/index.js

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

package/dist/components/CountryDrawer/useCountryFiltering.d.ts

@@ -0,0 +1,7 @@
+import { CountryCode } from '../Flag';
+interface UseCountryFilteringProps {
+    countries?: CountryCode[];
+    searchText: string;
+}
+export declare function useCountryFiltering({ countries, searchText }: UseCountryFilteringProps): import('react-international-phone').CountryData[];
+export {};

package/dist/components/CountryDrawer/useCountryFiltering.js

@@ -0,0 +1,9 @@
+import { defaultCountries 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 { getCountryDataListByCodes as i, filterCountries as n } from "../PhoneField/utils.js";
+function f({ countries: t, searchText: r }) {
+  const e = t ? i(t) : o;
+  return n(e, r);
+}
+export {
+  f as useCountryFiltering
+};

package/dist/components/CountryDrawer/useCountryGrouping.d.ts

@@ -0,0 +1,13 @@
+import { CountryCode } from '../Flag';
+interface GroupedCountries {
+    [key: string]: {
+        countryCode: CountryCode;
+        name: string;
+    }[];
+}
+interface UseCountryGroupingProps {
+    countries: any[];
+    defaultValue?: CountryCode;
+}
+export declare function useCountryGrouping({ countries, defaultValue, }: UseCountryGroupingProps): GroupedCountries;
+export {};

package/dist/components/CountryDrawer/useCountryGrouping.js

@@ -0,0 +1,17 @@
+import { parseCountry as s } from "../../node_modules/.pnpm/react-international-phone@4.4.0_react@18.3.1/node_modules/react-international-phone/dist/index.js";
+import { getValidatedCountryCode as p } from "../PhoneField/utils.js";
+function a({
+  countries: t,
+  defaultValue: n = "US"
+}) {
+  return t.reduce((r, u) => {
+    const e = s(u), o = e.name.charAt(0).toUpperCase();
+    return r[o] || (r[o] = []), r[o].push({
+      countryCode: p(e.iso2, n),
+      name: e.name
+    }), r;
+  }, {});
+}
+export {
+  a as useCountryGrouping
+};

package/dist/components/Drawer/Drawer.d.ts

@@ -1,6 +1,28 @@
-import { Drawer as DrawerPrimitive } from 'vaul';
-declare const Drawer: typeof import('vaul').Root;
-declare const DrawerTrigger: typeof DrawerPrimitive.Trigger;
-declare const DrawerClose: typeof DrawerPrimitive.Close;
-declare const DrawerContent: typeof DrawerPrimitive.Content;
-export { Drawer, DrawerTrigger, DrawerClose, DrawerContent };
+import { DrawerCloseProps, DrawerContentProps, DrawerHeaderProps, DrawerProps, DrawerTitleProps, DrawerTriggerProps } from './types';
+import * as React from "react";
+/**
+ * A drawer component that slides up from the bottom of the screen
+ * @param props DrawerProps
+ */
+declare const Drawer: {
+    ({ dismissible, height, modal, ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DrawerTrigger: React.ForwardRefExoticComponent<DrawerTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DrawerClose: React.ForwardRefExoticComponent<DrawerCloseProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * The content container of the drawer
+ */
+declare const DrawerContent: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * The header section of the drawer
+ */
+declare const DrawerHeader: {
+    ({ icon, children, ...props }: DrawerHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * The title component of the drawer
+ */
+declare const DrawerTitle: React.ForwardRefExoticComponent<DrawerTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export { Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle };