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

package/dist/components/AlertDialog/AlertDialog.js

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

package/dist/components/CircularIcon/CircularIcon.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 export type CircularIconSize = "xs" | "sm" | "md" | "lg" | "xl";
-export interface CircularIconProps {
+export interface CircularIconProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     className?: string;
     size?: CircularIconSize;
 }
-export declare function CircularIcon({ children, className, size }: CircularIconProps): import("react/jsx-runtime").JSX.Element;
+export declare function CircularIcon({ children, className, size, ...props }: CircularIconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/CircularIcon/CircularIcon.js

@@ -1,32 +1,38 @@
 import { jsx as s } from "react/jsx-runtime";
-import { Slot as m } 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 { cn as l } from "../../lib/utils.js";
-const o = {
+import { Slot as l } 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 { cn as o } from "../../lib/utils.js";
+const t = {
   xs: "size-6",
   sm: "size-11",
   md: "size-12",
   lg: "size-16",
   xl: "size-[5.5rem]"
-}, t = {
+}, c = {
   xs: "size-[0.875rem]",
   sm: "size-[1.5rem]",
   md: "size-[1.625rem]",
   lg: "size-[2.125rem]",
   xl: "size-12"
 };
-function a({ children: i, className: r, size: e = "md" }) {
+function d({
+  children: i,
+  className: r,
+  size: e = "md",
+  ...m
+}) {
   return /* @__PURE__ */ s(
     "div",
     {
-      className: l(
+      className: o(
         "rounded-full flex items-center justify-center",
-        o[e],
+        t[e],
         r
       ),
-      children: /* @__PURE__ */ s(m, { className: t[e], children: i })
+      ...m,
+      children: /* @__PURE__ */ s(l, { className: c[e], children: i })
     }
   );
 }
 export {
-  a as CircularIcon
+  d as CircularIcon
 };

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

@@ -1,12 +1,23 @@
 import { CountryCode } from '../Flag';
 interface CountryDrawerProps {
+    /** Currently selected country code */
     value: CountryCode;
+    /** Optional list of country codes to show. If not provided, shows all countries */
     countries?: CountryCode[];
+    /** Whether the drawer trigger is disabled */
     disabled?: boolean;
+    /** Default country code when no value is selected */
     defaultValue?: CountryCode;
+    /** Content to render as the drawer trigger */
     children: React.ReactNode;
+    /** Title text shown in the drawer header */
+    title?: string;
+    /** Label text shown in the search field */
+    searchLabel?: string;
+    /** Callback fired when a country is selected */
     onChange: (countryCode: string) => void;
+    /** Optional callback fired when drawer open/close animation completes */
     onAnimationEnd?: (open: boolean) => void;
 }
-export declare function CountryDrawer({ onChange, value, countries, onAnimationEnd, disabled, children, defaultValue, }: CountryDrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function CountryDrawer({ onChange, value, countries, onAnimationEnd, disabled, children, defaultValue, title, searchLabel, }: CountryDrawerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/CountryDrawer/CountryDrawer.js

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

package/dist/components/Drawer/Drawer.js

@@ -1,45 +1,46 @@
 "use client";
-import { jsx as e, jsxs as o } from "react/jsx-runtime";
-import { cn as c } from "../../lib/utils.js";
-import * as t from "react";
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import { cn as m } from "../../lib/utils.js";
+import * as l from "react";
 import { Drawer as i } 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/BottomBar.js";
-import { Button as m } from "../Button/Button.js";
-import { XMark as f } from "../Icons/XMark.js";
+import { Button as f } from "../Button/Button.js";
+import { XMark as h } from "../Icons/XMark.js";
 import { Typography as n } from "../Typography/Typography.js";
-import { useDrawer as d, DrawerContext as h } from "./use-drawer.js";
-const y = ({
+import { useDrawer as d, DrawerContext as p } from "./use-drawer.js";
+const u = ({
   dismissible: a = !0,
-  height: r = "full",
-  modal: l = !0,
-  ...s
-}) => /* @__PURE__ */ e(h.Provider, { value: { dismissible: a, height: r }, children: /* @__PURE__ */ e(
+  height: e = "full",
+  modal: t = !0,
+  ...o
+}) => /* @__PURE__ */ r(p.Provider, { value: { dismissible: a, height: e }, children: /* @__PURE__ */ r(
   i.Root,
   {
     shouldScaleBackground: !1,
     dismissible: a,
-    modal: l,
+    modal: t,
     direction: "bottom",
-    ...s
+    handleOnly: !0,
+    ...o
   }
 ) });
-y.displayName = "Drawer";
-const u = t.forwardRef((a, r) => /* @__PURE__ */ e(i.Trigger, { ref: r, ...a }));
-u.displayName = i.Trigger.displayName;
-const w = t.forwardRef((a, r) => /* @__PURE__ */ e(i.Close, { ref: r, ...a })), p = t.forwardRef((a, r) => /* @__PURE__ */ e(i.Overlay, { ref: r, className: "fixed inset-0 z-50 bg-gray-900/40", ...a }));
-p.displayName = i.Overlay.displayName;
-const N = t.forwardRef((a, r) => {
-  const { height: l } = d();
-  return /* @__PURE__ */ o(i.Portal, { children: [
-    /* @__PURE__ */ e(i.Overlay, { className: "fixed inset-0 z-50", children: /* @__PURE__ */ e("div", { className: "w-full h-full bg-gray-900 opacity-40" }) }),
-    /* @__PURE__ */ e(
+u.displayName = "Drawer";
+const w = l.forwardRef((a, e) => /* @__PURE__ */ r(i.Trigger, { ref: e, ...a }));
+w.displayName = i.Trigger.displayName;
+const y = l.forwardRef((a, e) => /* @__PURE__ */ r(i.Close, { ref: e, ...a })), c = l.forwardRef((a, e) => /* @__PURE__ */ r(i.Overlay, { ref: e, className: "fixed inset-0 z-50 bg-gray-900/40", ...a }));
+c.displayName = i.Overlay.displayName;
+const N = l.forwardRef((a, e) => {
+  const { height: t } = d();
+  return /* @__PURE__ */ s(i.Portal, { children: [
+    /* @__PURE__ */ r(c, {}),
+    /* @__PURE__ */ r(
       i.Content,
       {
-        ref: r,
+        ref: e,
         ...a,
-        className: c(
-          "fixed inset-x-0 bottom-0 z-50 mt-24 bg-gray-0 outline-none",
-          l === "full" ? "h-screen rounded-none" : "h-auto rounded-t-[1.75rem]",
+        className: m(
+          "fixed inset-x-0 bottom-0 z-50 bg-gray-0 outline-none flex flex-col",
+          t === "full" ? "top-0 rounded-none" : "h-auto rounded-t-[1.75rem]",
           a.className
         )
       }
@@ -47,24 +48,24 @@ const N = t.forwardRef((a, r) => {
   ] });
 });
 N.displayName = "DrawerContent";
-const g = ({ icon: a, children: r, ...l }) => {
-  const { dismissible: s } = d();
-  return /* @__PURE__ */ o("div", { className: "flex justify-between items-center gap-4 mb-2 w-full", ...l, children: [
-    s && /* @__PURE__ */ e("div", { className: "shrink-0", children: /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ e(m, { variant: "tertiary", size: "icon", children: /* @__PURE__ */ e(f, {}) }) }) }),
-    /* @__PURE__ */ e("div", { className: "flex flex-col gap-6", children: r }),
-    s && /* @__PURE__ */ e("div", { className: "shrink-0 size-10" })
+const D = ({ icon: a, children: e, ...t }) => {
+  const { dismissible: o } = d();
+  return /* @__PURE__ */ s("div", { className: "flex justify-between items-center gap-4 mb-2 w-full", ...t, children: [
+    o && /* @__PURE__ */ r("div", { className: "shrink-0", children: /* @__PURE__ */ r(y, { asChild: !0, children: /* @__PURE__ */ r(f, { variant: "tertiary", size: "icon", children: /* @__PURE__ */ r(h, {}) }) }) }),
+    /* @__PURE__ */ r("div", { className: "flex flex-col gap-6", children: e }),
+    o && /* @__PURE__ */ r("div", { className: "shrink-0 size-10" })
   ] });
 };
-g.displayName = "DrawerHeader";
-const D = t.forwardRef(({ className: a, ...r }, l) => /* @__PURE__ */ e(i.Title, { ref: l, ...r, asChild: !0, children: /* @__PURE__ */ e(n, { variant: "subtitle", level: 1, children: r.children }) }));
-D.displayName = i.Title.displayName;
-const v = t.forwardRef(({ className: a, ...r }, l) => /* @__PURE__ */ e(i.Description, { ref: l, className: "text-gray-500", ...r, asChild: !0, children: /* @__PURE__ */ e(n, { variant: "body", level: 2, children: r.children }) }));
+D.displayName = "DrawerHeader";
+const g = l.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(i.Title, { ref: t, ...e, asChild: !0, children: /* @__PURE__ */ r(n, { variant: "subtitle", level: 1, children: e.children }) }));
+g.displayName = i.Title.displayName;
+const v = l.forwardRef(({ className: a, ...e }, t) => /* @__PURE__ */ r(i.Description, { ref: t, className: "text-gray-500", ...e, asChild: !0, children: /* @__PURE__ */ r(n, { variant: "body", level: 2, children: e.children }) }));
 v.displayName = i.Description.displayName;
 export {
-  y as Drawer,
-  w as DrawerClose,
+  u as Drawer,
+  y as DrawerClose,
   N as DrawerContent,
-  g as DrawerHeader,
-  D as DrawerTitle,
-  u as DrawerTrigger
+  D as DrawerHeader,
+  g as DrawerTitle,
+  w as DrawerTrigger
 };

package/dist/components/Input/Input.d.ts

@@ -1,16 +1,5 @@
-import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
-export declare const inputVariants: (props?: ({
-    error?: boolean | null | undefined;
-    isLabel?: boolean | null | undefined;
-    isFocused?: boolean | null | undefined;
-    variant?: "default" | "floating-label" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export declare const iconVariants: (props?: ({
-    disabled?: boolean | null | undefined;
-    position?: "end" | "start" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "style" | "placeholder">, VariantProps<typeof inputVariants> {
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "className" | "style" | "placeholder" | "size"> {
     /**
      * If true, the input will display in an error state with error styling
      */
@@ -21,41 +10,18 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     isValid?: boolean;
     /**
      * Element to be rendered at the start (left side) of the input.
-     * The component passed to this prop must accept a `style` prop.
-     * The component should use currentColor to match the Input's styling.
-     * To change styles based on input focus, use Tailwind's `group-*` modifiers
-     * since the input is wrapped in a group class.
      */
     startAdornment?: React.ReactNode;
     /**
      * Element to be rendered at the end (right side) of the input.
-     * The component passed to this prop must accept a `style` prop.
-     * The component should use currentColor to match the Input's styling.
-     * To change styles based on input focus, use Tailwind's `group-*` modifiers
-     * since the input is wrapped in a group class.
      */
     endAdornment?: React.ReactNode;
     /**
-     * Width of the start adornment in rem
-     * @default 1.25
-     */
-    startAdornmentWidth?: number;
-    /**
-     * Width of the end adornment in rem
-     * @default 1.25
-     */
-    endAdornmentWidth?: number;
-    /**
-     * If true, the input will display in a focused state with focus styling
-     * @default false
-     */
-    isFocused?: boolean;
-    /**
-     * Additional class name for the input
+     * Additional class name for the input container
      */
     className?: string;
     /**
-     * Label text to be displayed above the input
+     * Label text to be displayed above the input or as floating label
      */
     label?: string;
     /**
@@ -64,15 +30,19 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
      */
     variant?: "default" | "floating-label";
     /**
-     * If true, the dividers will be shown
-     * @default true
+     * If true, the start divider will be shown when startAdornment is present.
+     * @default false // Default dividers to false
      */
     showStartDivider?: boolean;
     /**
-     * If true, the end divider will be shown
-     * @default true
+     * If true, the end divider will be shown when endAdornment or isValid is present.
+     * @default false // Default dividers to false
      */
     showEndDivider?: boolean;
+    /**
+     * Id for the input element, used for label association. Auto-generated if not provided.
+     */
+    id?: string;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 export default Input;