@payfit/unity-components 0.0.0-alpha.11

package/dist/esm/components/toggle-switch-group/ToggleSwitchGroup.d.ts

@@ -0,0 +1,71 @@
+import { ReactNode } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const toggleSwitchGroup: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy-flex uy-flex-col uy-gap-50", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy-flex uy-flex-col uy-gap-50", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export interface ToggleSwitchGroupProps extends VariantProps<typeof toggleSwitchGroup> {
+    /** The label for the group. */
+    label: string;
+    /** Helper text to display below the group. */
+    helperText?: ReactNode;
+    /** Feedback text to display below the group. */
+    feedbackText?: ReactNode;
+    /** The default selected values of the group. */
+    defaultValue?: string[];
+    /** The current selected values of the group (controlled). */
+    value?: string[];
+    /** Whether the group is disabled. */
+    isDisabled?: boolean;
+    /** Whether the group is read-only. */
+    isReadOnly?: boolean;
+    /** Whether the group is invalid. */
+    isInvalid?: boolean;
+    /** Whether the group is required. */
+    isRequired?: boolean;
+    /** The variant of the required indicator. */
+    requiredVariant?: 'required' | 'optional';
+    /** Callback when the selection changes. */
+    onChange?: (value: string[]) => void;
+    /**
+     * Handler called when the group receives focus.
+     */
+    onFocus?: (e: React.FocusEvent<HTMLFieldSetElement>) => void;
+    /**
+     * Handler called when the group loses focus.
+     */
+    onBlur?: (e: React.FocusEvent<HTMLFieldSetElement>) => void;
+    /**
+     * Handler that is called when the element's focus status changes.
+     * @param isFocused
+     */
+    onFocusChange?: (isFocused: boolean) => void;
+    children: ReactNode;
+}
+/**
+ * The `ToggleSwitchGroup` component manages a collection of related toggle switches as a single unit.
+ * It provides a way to select multiple options from a list of choices, with proper form field semantics
+ * and accessibility features.
+ *
+ * The component handles the selection state internally and can be used in both controlled and uncontrolled modes.
+ * It's particularly useful for settings pages, preference forms, or any scenario requiring multiple binary choices.
+ * @param {ToggleSwitchGroupProps} props - Props for the ToggleSwitchGroup component
+ * @example
+ * ```tsx
+ * import { ToggleSwitchGroup, ToggleSwitch } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <ToggleSwitchGroup
+ *       label="Notification preferences"
+ *       helperText="Choose how you want to receive notifications"
+ *     >
+ *       <ToggleSwitch value="email" label="Email notifications" />
+ *       <ToggleSwitch value="sms" label="SMS notifications" />
+ *       <ToggleSwitch value="push" label="Push notifications" />
+ *     </ToggleSwitchGroup>
+ *   )
+ * }
+ * ```
+ * @see {@link ToggleSwitchGroupProps} for all available props
+ * @remarks
+ * [API](/?path=/docs/forms-toggleswitchgroup--docs) • [Demo](/?path=/story/forms-toggleswitchgroup--primary)
+ */
+export declare const ToggleSwitchGroup: import('react').ForwardRefExoticComponent<ToggleSwitchGroupProps & import('react').RefAttributes<HTMLFieldSetElement>>;

package/dist/esm/components/toggle-switch-group/ToggleSwitchGroup.js

@@ -0,0 +1,109 @@
+import { jsxs as A, jsx as d } from "react/jsx-runtime";
+import { forwardRef as B, useState as H, useId as J, useRef as K, useCallback as Q, isValidElement as V, cloneElement as N, Children as U } from "react";
+import { tv as W } from "tailwind-variants";
+import { Label as X } from "../label/Label.js";
+import { Text as R } from "../text/Text.js";
+const Y = W({
+  base: "uy-flex uy-flex-col uy-gap-50"
+});
+function Z(n) {
+  if (!V(n)) return !1;
+  const r = n.props;
+  return typeof r == "object" && r !== null && "value" in r && typeof r.value == "string";
+}
+const _ = B(
+  ({
+    label: n,
+    helperText: r,
+    feedbackText: l,
+    isDisabled: b,
+    isReadOnly: G,
+    isInvalid: c,
+    isRequired: S,
+    children: I,
+    requiredVariant: h,
+    value: g,
+    defaultValue: M,
+    onChange: a,
+    onFocus: p,
+    onBlur: u,
+    onFocusChange: t,
+    ...O
+  }, $) => {
+    const f = g !== void 0, [x, D] = H(
+      M ?? []
+    ), s = f ? g : x, w = J(), j = r ? `${w}-helper` : void 0, y = c && l ? `${w}-feedback` : void 0, L = [j, y].filter(Boolean).join(" ") || void 0, E = K(!1), P = (e) => {
+      E.current = !0, p == null || p(e), t == null || t(!0);
+    }, k = (e) => {
+      E.current = !1, u == null || u(e), t == null || t(!1);
+    }, q = Q(
+      (e) => {
+        let i;
+        s.includes(e) ? i = s.filter((o) => o !== e) : i = [...s, e], f || D(i), a == null || a(i);
+      },
+      [s, f, a]
+    ), z = () => U.map(I, (e, i) => {
+      if (!Z(e)) return e;
+      const o = e, m = o.props, v = m.value;
+      return N(o, {
+        key: o.key ?? i,
+        isSelected: s.includes(v),
+        isDisabled: b ?? m.isDisabled,
+        isReadOnly: G ?? m.isReadOnly,
+        value: v,
+        onChange: () => {
+          q(v);
+        }
+      });
+    });
+    return /* @__PURE__ */ A(
+      "fieldset",
+      {
+        ...O,
+        ref: $,
+        className: Y(),
+        "aria-describedby": L,
+        "aria-invalid": c || void 0,
+        "aria-required": S || void 0,
+        disabled: b,
+        onFocus: P,
+        onBlur: k,
+        children: [
+          /* @__PURE__ */ d("legend", { className: "uy-mb-50", children: /* @__PURE__ */ d(X, { isRequired: S, requiredVariant: h, children: n }) }),
+          r && /* @__PURE__ */ d(
+            R,
+            {
+              id: j,
+              variant: "bodySmall",
+              color: "content.neutral.low",
+              slot: "description",
+              children: r
+            }
+          ),
+          /* @__PURE__ */ d("div", { className: "uy-mt-100 uy-flex uy-flex-col uy-gap-150 uy-py-25", children: z() }),
+          c && l && (typeof l == "string" ? /* @__PURE__ */ d(
+            R,
+            {
+              id: y,
+              variant: "bodySmallStrong",
+              color: "content.form.invalid",
+              slot: "errorMessage",
+              children: l
+            }
+          ) : V(l) && N(
+            l,
+            {
+              id: y,
+              slot: "errorMessage"
+            }
+          ))
+        ]
+      }
+    );
+  }
+);
+_.displayName = "ToggleSwitchGroup";
+export {
+  _ as ToggleSwitchGroup,
+  Y as toggleSwitchGroup
+};

package/dist/esm/components/toggle-switch-group-field/ToggleSwitchGroupField.d.ts

@@ -0,0 +1,82 @@
+import { ForwardedRef, JSX, PropsWithChildren, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { infer as ZodInfer } from 'zod';
+import { Schema } from '../../hooks/use-form.types.js';
+import { LabelProps } from '../label/Label.js';
+import { ToggleSwitchGroupProps } from '../toggle-switch-group/ToggleSwitchGroup.js';
+interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends PropsWithChildren<Pick<LabelProps, 'isRequired' | 'requiredVariant'>> {
+    /** The name of the field, which should match the form schema. */
+    name: TName;
+    /** The label for the toggle switch group. */
+    label: string;
+    /** Helper text to display below the toggle switch group. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the toggle switch group. */
+    contextualLink?: ReactNode;
+    /** The default selected values of the toggle switch group. */
+    defaultValue?: string[];
+    /** Whether the toggle switch group is disabled. */
+    isDisabled?: boolean;
+    /** Whether the toggle switch group is read-only. */
+    isReadOnly?: boolean;
+    /** Whether the toggle switch group is invalid. */
+    isInvalid?: boolean;
+    /** Whether the toggle switch group is loading. */
+    isLoading?: boolean;
+    /** Callback when the selection changes. */
+    onChange?: (value: string[]) => void;
+    /** Handler called when the group receives focus. */
+    onFocus?: ToggleSwitchGroupProps['onFocus'];
+    /** Handler called when the group loses focus. */
+    onBlur?: ToggleSwitchGroupProps['onBlur'];
+    /** Handler that is called when the element's focus status changes. */
+    onFocusChange?: (isFocused: boolean) => void;
+}
+export type ToggleSwitchGroupFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FieldProps<TFieldValues, TName>;
+type ToggleSwitchGroupFieldComponent = (<TSchema extends Schema>(props: ToggleSwitchGroupFieldProps<ZodInfer<TSchema>> & {
+    ref?: ForwardedRef<HTMLFieldSetElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+/**
+ * The `ToggleSwitchGroupField` component renders a group of related toggle switches that can be used in forms.
+ * It combines the functionality of ToggleSwitchGroup with form integration capabilities, providing
+ * automatic form state management, validation, and error handling.
+ *
+ * The component is ideal for collecting multiple binary preferences or settings within a form context,
+ * such as notification preferences or feature toggles.
+ * @param {ToggleSwitchGroupFieldProps} props - Props for the ToggleSwitchGroupField component
+ * @example
+ * ```tsx
+ * import { useUnityForm, ToggleSwitchGroupField, ToggleSwitch } from '@payfit/unity-components'
+ * import * as z from 'zod'
+ *
+ * function Example() {
+ *   const schema = z.object({
+ *     preferences: z.array(z.string())
+ *   })
+ *
+ *   const { Form } = useUnityForm(schema)
+ *
+ *   return (
+ *     <Form action={handleSubmit}>
+ *       <ToggleSwitchGroupField<typeof schema>
+ *         name="preferences"
+ *         label="Select your preferences"
+ *         helperText="Choose all that apply"
+ *       >
+ *         <ToggleSwitch value="email" label="Email notifications" />
+ *         <ToggleSwitch value="sms" label="SMS notifications" />
+ *       </ToggleSwitchGroupField>
+ *     </Form>
+ *   )
+ * }
+ * ```
+ * @see {@link ToggleSwitchGroupFieldProps} for all available props
+ * @remarks
+ * [API](/?path=/docs/forms-toggleswitchgroupfield--docs) • [Demo](/?path=/story/forms-toggleswitchgroupfield--primary)
+ * @note The schema type parameter is needed to ensure type safety with the form's schema.
+ * If you omit it, the `name` prop will not be type-safe.
+ */
+declare const ToggleSwitchGroupField: ToggleSwitchGroupFieldComponent;
+export { ToggleSwitchGroupField };

package/dist/esm/components/toggle-switch-group-field/ToggleSwitchGroupField.js

@@ -0,0 +1,54 @@
+import { jsxs as T, jsx as i } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import { useFormContext as x } from "react-hook-form";
+import { FormField as G } from "../form-field/FormField.js";
+import { FormControl as S } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as j } from "../form-field/parts/FormFeedbackText.js";
+import { ToggleSwitchGroup as y } from "../toggle-switch-group/ToggleSwitchGroup.js";
+function C({
+  name: o,
+  label: r,
+  defaultValue: t,
+  helperText: m,
+  contextualLink: e,
+  isRequired: c,
+  isInvalid: l,
+  isLoading: n,
+  isDisabled: p,
+  isReadOnly: f,
+  requiredVariant: s,
+  children: u,
+  ...d
+}, g) {
+  const { control: F, watch: h } = x(), w = h(o);
+  return /* @__PURE__ */ T(G, { control: F, name: o, ...{
+    isRequired: c,
+    isInvalid: l,
+    isLoading: n,
+    isDisabled: p,
+    isReadOnly: f
+  }, children: [
+    /* @__PURE__ */ i(S, { children: /* @__PURE__ */ i(
+      y,
+      {
+        ref: g,
+        label: r,
+        defaultValue: t,
+        value: w,
+        helperText: m,
+        requiredVariant: s,
+        ...d,
+        children: u
+      }
+    ) }),
+    /* @__PURE__ */ i(j, {}),
+    e
+  ] });
+}
+const P = a(function(r, t) {
+  return C(r, t);
+});
+P.displayName = "ToggleSwitchGroupField";
+export {
+  P as ToggleSwitchGroupField
+};

package/dist/esm/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+interface TooltipProps {
+    title: string;
+    children: ReactElement;
+}
+declare function Tooltip({ title, children }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export { Tooltip };

package/dist/esm/components/tooltip/Tooltip.js

@@ -0,0 +1,21 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { TooltipTrigger as r, Tooltip as y, Button as u } from "react-aria-components";
+import { Button as a } from "../button/Button.js";
+const i = (t) => t.type === a || t.type === u;
+function d({ title: t, children: o }) {
+  return /* @__PURE__ */ l(r, { delay: 500, closeDelay: 1500, children: [
+    o,
+    /* @__PURE__ */ e(
+      y,
+      {
+        "data-dd-privacy": "allow",
+        offset: i(o) ? 4 : 8,
+        className: "uy-inline-flex uy-rounded-50 uy-pl-100 uy-pr-100 uy-pt-50 uy-pb-50 uy-bg-grayscale-L12 uy-max-w-[300px]",
+        children: /* @__PURE__ */ e("p", { className: "uy-typography-body-small uy-text-content-inverted uy-overflow-hidden uy-text-ellipsis uy-line-clamp-3", children: t })
+      }
+    )
+  ] });
+}
+export {
+  d as Tooltip
+};

package/dist/esm/docs/blocks/Cards.d.ts

@@ -0,0 +1,18 @@
+import { PropsWithChildren, default as React } from 'react';
+type CardProps = React.PropsWithChildren;
+export declare const Card: React.FC<CardProps>;
+export declare const CardWithCover: React.FC<CardProps & {
+    coverSrc: string;
+    coverAlt: string;
+}>;
+export declare const CardHeader: React.FC<PropsWithChildren>;
+export declare const CardTitle: React.FC<PropsWithChildren>;
+export declare const CardContent: React.FC<PropsWithChildren>;
+export declare const CardActions: React.FC<PropsWithChildren>;
+export declare const Link: React.FC<PropsWithChildren<React.ComponentProps<"a">>>;
+type CardGridProps = {
+    children: React.ReactNode;
+    cols?: number;
+};
+export declare const CardGrid: React.FC<CardGridProps>;
+export {};

package/dist/esm/docs/table/mocks/employee-columns.d.ts

@@ -0,0 +1,3 @@
+import { Employee } from '../../../mocks/employees.js';
+export declare const employeeColumns: (import('@tanstack/table-core').AccessorKeyColumnDefBase<Employee, string> & Partial<import('@tanstack/table-core').IdIdentifier<Employee, string>>)[];
+export declare const employeeColumnsWithCheckbox: ((import('@tanstack/table-core').AccessorKeyColumnDefBase<Employee, string> & Partial<import('@tanstack/table-core').IdIdentifier<Employee, string>>) | import('@tanstack/table-core').DisplayColumnDef<Employee, unknown>)[];

package/dist/esm/hooks/use-async-list.d.ts

@@ -0,0 +1,2 @@
+import { useAsyncList } from 'react-stately';
+export { useAsyncList };

package/dist/esm/hooks/use-breakpoint-listener.d.ts

@@ -0,0 +1,2 @@
+export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export declare function useBreakpointListener(): Breakpoint;

package/dist/esm/hooks/use-breakpoint-listener.js

@@ -0,0 +1,14 @@
+import { useMediaQuery as r } from "./use-media-query.js";
+const o = (e) => {
+  const t = getComputedStyle(document.documentElement).getPropertyValue(
+    `--uy-screens-${e}`
+  );
+  return parseInt(t.replace("px", ""), 10);
+}, n = (e) => `(min-width: ${o(e)}px)`;
+function c() {
+  const e = r(n("xl")), t = r(n("lg")), s = r(n("md")), u = r(n("sm"));
+  return e ? "xl" : t ? "lg" : s ? "md" : u ? "sm" : "xs";
+}
+export {
+  c as useBreakpointListener
+};

package/dist/esm/hooks/use-form.d.ts

@@ -0,0 +1,48 @@
+import { JSX, PropsWithChildren } from 'react';
+import { UseFormProps as UseHookFormProps, UseFormReturn as UseHookFormReturn } from 'react-hook-form';
+import { infer as ZodInfer } from 'zod';
+import { FormFieldProps } from '../components/form-field/FormField.js';
+import { FormProps } from '../components/form/Form.js';
+import { Schema } from './use-form.types.js';
+export type UseUnityFormReturn<TSchema extends Schema> = {
+    methods: UseHookFormReturn<ZodInfer<TSchema>>;
+    Form: (props: Omit<FormProps<TSchema>, 'form' | 'schema'>) => JSX.Element;
+    FormField: (props: PropsWithChildren<Omit<FormFieldProps<ZodInfer<TSchema>>, 'control'>>) => JSX.Element;
+};
+/**
+ * A hook to create `Form` and `FormField` components that are bound to a specific schema definition and form controller. The resulting components will have full type-safety based on the provided schema type.
+ * @param `schema` a Zod schema definition to validate the form data, {@link [Zod](https://zod.dev)}
+ * @param `options` the options to pass to the `react-hook-form` hook. See the official documentation for more details. {@link [React Hook Form](https://react-hook-form.com/api/useform)}
+ * @returns an object containing the bounded  `Form` and `FormField` components, as well as the form controller methods {@link UseUnityFormReturn}
+ * @example
+ * ```tsx
+ * import { useUnityForm } from '@payfit/unity-components'
+ * import * as z from 'zod'
+ *
+ * const schema = z.object({
+ *  foo: z.string().min(3),
+ *  bar: z.string().optional(),
+ * })
+ *
+ * function DemoForm() {
+ *   const { Form, FormField } = useUnityForm(schema, {
+ *     defaultValues: { foo: 'Hello world', bar: '' },
+ *   })
+ *
+ *   return (
+ *    <Form action={() => ...}>
+ *      <FormField name="foo" type="text">
+ *        // ...
+ *      </FormField>
+ *      // Type Error: "baz" is not assignable to "foo" | "bar".
+ *      <FormField name="baz" type="text">
+ *        // ...
+ *      </FormField>
+ *    </Form>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API]() • [Demo]()
+ */
+export declare function useUnityForm<TSchema extends Schema>(schema: TSchema, options?: Omit<UseHookFormProps<ZodInfer<TSchema>>, 'resolver'>): UseUnityFormReturn<TSchema>;

package/dist/esm/hooks/use-form.js

@@ -0,0 +1,32 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useMemo as n } from "react";
+import { zodResolver as l } from "@hookform/resolvers/zod";
+import { useForm as c } from "react-hook-form";
+import { FormField as u } from "../components/form-field/FormField.js";
+import { Form as s } from "../components/form/Form.js";
+function v(m, i = {
+  mode: "onTouched",
+  reValidateMode: "onChange"
+}) {
+  const r = c({
+    ...i,
+    resolver: l(m)
+  }), d = n(() => {
+    const o = (e) => /* @__PURE__ */ t(s, { ...e, form: r, schema: m, children: e.children });
+    return o.displayName = "FormWithSchema", o;
+  }, [r, m]), F = n(() => {
+    const o = (e) => (
+      // @ts-expect-error: REACT-18-MIGRATION
+      /* @__PURE__ */ t(u, { ...e, control: r.control, children: e.children })
+    );
+    return o.displayName = "FormFieldWithSchema", o;
+  }, [r]);
+  return {
+    methods: r,
+    Form: d,
+    FormField: F
+  };
+}
+export {
+  v as useUnityForm
+};

package/dist/esm/hooks/use-form.types.d.ts

@@ -0,0 +1,3 @@
+import { ZodType, ZodTypeDef } from 'zod';
+export type TFormValues = Record<string, unknown>;
+export type Schema = ZodType<TFormValues, ZodTypeDef, TFormValues>;

package/dist/esm/hooks/use-id.d.ts

@@ -0,0 +1,2 @@
+declare function useId(): string;
+export default useId;

package/dist/esm/hooks/use-id.js

@@ -0,0 +1,28 @@
+import { useState as o } from "react";
+function* a(n = Date.now()) {
+  let t = n;
+  for (; ; )
+    t = (t * 1664525 + 1013904223) % 2 ** 32, yield t / 2 ** 32;
+}
+const i = a();
+function l(n) {
+  const t = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  let e = "";
+  for (let r = 0; r < n; r++)
+    e += t.charAt(Math.floor(i.next().value * t.length));
+  return e;
+}
+let u = 0;
+function c() {
+  return u++;
+}
+function d() {
+  const [n] = o(() => {
+    const t = c().toString(36), e = l(4);
+    return `:r${t}:${e}`;
+  });
+  return n;
+}
+export {
+  d as default
+};

package/dist/esm/hooks/use-media-query.d.ts

@@ -0,0 +1,8 @@
+/**
+ * An hook to create and listen to media query on the fly.
+ * For performance consideration, whenever possible, consume it globally.
+ * @param query A query representing the media to listen
+ * @param fallbackValue A default value used as a fallback in unsupported media query environment (such as server)
+ * @returns Matching state: true if the document matches the media query, false otherwise
+ */
+export declare function useMediaQuery(query: string, fallbackValue?: boolean): boolean;

package/dist/esm/hooks/use-media-query.js

@@ -0,0 +1,19 @@
+import { useMemo as o, useState as c, useCallback as u, useLayoutEffect as d } from "react";
+import { isBrowser as m, isTestEnvironment as M } from "../utils/platform.js";
+const f = (t) => m() && !M() ? window.matchMedia(t) : null, s = (t) => t.matches;
+function v(t, r = !1) {
+  const e = o(() => f(t), [t]), [a, i] = c(
+    e ? s(e) : r
+  ), n = u(() => {
+    e && i(s(e));
+  }, [e]);
+  return d(() => {
+    if (e)
+      return e.addEventListener("change", n), () => {
+        e.removeEventListener("change", n);
+      };
+  }), a;
+}
+export {
+  v as useMediaQuery
+};

package/dist/esm/hooks/use-resizable.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+interface UseResizableOptions {
+    minWidth?: number;
+    minHeight?: number;
+    isDisabled?: boolean;
+}
+interface UseResizableReturn {
+    containerRef: RefObject<HTMLDivElement>;
+    handleResizeStart: (e: React.MouseEvent) => void;
+    isResizing: boolean;
+}
+export declare function useResizable({ isDisabled, minWidth, minHeight, }?: UseResizableOptions): UseResizableReturn;
+export {};

package/dist/esm/hooks/use-resizable.js

@@ -0,0 +1,51 @@
+import { useRef as R, useState as z, useEffect as g } from "react";
+function x({
+  isDisabled: c = !1,
+  minWidth: i,
+  minHeight: a
+} = {}) {
+  const e = R(null), [t, o] = z({
+    isResizing: !1,
+    startX: 0,
+    startY: 0,
+    startWidth: 0,
+    startHeight: 0
+  }), l = (r) => {
+    var s;
+    if (c) return;
+    r.preventDefault();
+    const n = (s = e.current) == null ? void 0 : s.querySelector("textarea");
+    !e.current || !n || o({
+      isResizing: !0,
+      startX: r.clientX,
+      startY: r.clientY,
+      startWidth: e.current.offsetWidth,
+      startHeight: n.offsetHeight
+    });
+  };
+  return g(() => {
+    if (!t.isResizing) return;
+    const r = (s) => {
+      if (!e.current) return;
+      const u = e.current.querySelector("textarea");
+      if (!u) return;
+      const d = s.clientX - t.startX, f = s.clientY - t.startY, h = Math.max(t.startWidth + d, i ?? 0), m = Math.max(
+        t.startHeight + f,
+        a ?? 0
+      );
+      e.current.style.width = `${h}px`, u.style.height = `${m}px`;
+    }, n = () => {
+      o((s) => ({ ...s, isResizing: !1 }));
+    };
+    return document.addEventListener("mousemove", r), document.addEventListener("mouseup", n), () => {
+      document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", n);
+    };
+  }, [t, i, a]), {
+    containerRef: e,
+    handleResizeStart: l,
+    isResizing: t.isResizing
+  };
+}
+export {
+  x as useResizable
+};