@kuzenbo/core 0.0.1-alpha.1 → 0.0.1-alpha.3

package/dist/dropzone.d.ts

@@ -0,0 +1,234 @@
+import { a as DropzoneIdle, c as DropzoneRejectProps, i as DropzoneAcceptProps, l as DropzoneStatusProps, n as useDropzoneContext, o as DropzoneIdleProps, r as DropzoneAccept, s as DropzoneReject, t as DropzoneContext } from "./dropzone-context-DNiJThhB.js";
+import * as tailwind_variants0 from "tailwind-variants";
+import { VariantProps } from "tailwind-variants";
+import * as react from "react";
+import { ComponentProps, DragEvent, InputHTMLAttributes, Ref } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Accept, DropEvent, FileError, FileRejection, FileWithPath } from "react-dropzone";
+
+//#region src/ui/dropzone/dropzone.d.ts
+declare const dropzoneVariants: tailwind_variants0.TVReturnType<{
+  variant: {
+    default: {
+      root: never[];
+    };
+    filled: {
+      root: string[];
+    };
+    light: {
+      root: string[];
+    };
+  };
+  status: {
+    idle: {
+      root: never[];
+    };
+    accept: {
+      root: string[];
+    };
+    reject: {
+      root: string[];
+    };
+  };
+  disabled: {
+    true: {
+      root: string[];
+    };
+  };
+  loading: {
+    true: {
+      root: string[];
+    };
+  };
+  activateOnClick: {
+    true: {};
+    false: {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+  inner: string[];
+  overlay: string[];
+}, undefined, {
+  variant: {
+    default: {
+      root: never[];
+    };
+    filled: {
+      root: string[];
+    };
+    light: {
+      root: string[];
+    };
+  };
+  status: {
+    idle: {
+      root: never[];
+    };
+    accept: {
+      root: string[];
+    };
+    reject: {
+      root: string[];
+    };
+  };
+  disabled: {
+    true: {
+      root: string[];
+    };
+  };
+  loading: {
+    true: {
+      root: string[];
+    };
+  };
+  activateOnClick: {
+    true: {};
+    false: {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+  inner: string[];
+  overlay: string[];
+}, tailwind_variants0.TVReturnType<{
+  variant: {
+    default: {
+      root: never[];
+    };
+    filled: {
+      root: string[];
+    };
+    light: {
+      root: string[];
+    };
+  };
+  status: {
+    idle: {
+      root: never[];
+    };
+    accept: {
+      root: string[];
+    };
+    reject: {
+      root: string[];
+    };
+  };
+  disabled: {
+    true: {
+      root: string[];
+    };
+  };
+  loading: {
+    true: {
+      root: string[];
+    };
+  };
+  activateOnClick: {
+    true: {};
+    false: {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+  inner: string[];
+  overlay: string[];
+}, undefined, unknown, unknown, undefined>>;
+type DropzoneVariants = VariantProps<typeof dropzoneVariants>;
+type DropzoneProps = Omit<ComponentProps<"div">, "onDrop" | "ref"> & DropzoneVariants & {
+  ref?: Ref<HTMLDivElement>; /** Called when any files are dropped to the dropzone */
+  onDropAny?: (files: FileWithPath[], fileRejections: FileRejection[]) => void; /** Called when valid files are dropped to the dropzone */
+  onDrop: (files: FileWithPath[]) => void; /** Called when dropped files do not meet file restrictions */
+  onReject?: (fileRejections: FileRejection[]) => void; /** Determines whether files capturing should be disabled */
+  disabled?: boolean; /** Determines whether a loading overlay should be displayed */
+  loading?: boolean; /** Mime types of the files that dropzone can accept */
+  accept?: Accept | string[]; /** A ref function which when called opens the file system file picker */
+  openRef?: Ref<() => void>; /** Determines whether multiple files can be dropped */
+  multiple?: boolean; /** Maximum file size in bytes */
+  maxSize?: number; /** Name of the form control */
+  name?: string; /** Maximum number of files that can be picked at once */
+  maxFiles?: number; /** Set to autofocus the root element */
+  autoFocus?: boolean; /** If false, disables click to open the native file selection dialog */
+  activateOnClick?: boolean; /** If false, disables drag 'n' drop */
+  activateOnDrag?: boolean; /** If false, disables Space/Enter to open the native file selection dialog */
+  activateOnKeyboard?: boolean; /** If false, stops drag event propagation to parents */
+  dragEventsBubbling?: boolean; /** Called when the dragenter event occurs */
+  onDragEnter?: (event: DragEvent<HTMLElement>) => void; /** Called when the dragleave event occurs */
+  onDragLeave?: (event: DragEvent<HTMLElement>) => void; /** Called when the dragover event occurs */
+  onDragOver?: (event: DragEvent<HTMLElement>) => void; /** Called when user closes the file selection dialog with no selection */
+  onFileDialogCancel?: () => void; /** Called when user opens the file selection dialog */
+  onFileDialogOpen?: () => void; /** If false, allow dropped items to take over the current browser window */
+  preventDropOnDocument?: boolean; /** Set to true to use the File System Access API */
+  useFsAccessApi?: boolean; /** Use this to provide a custom file aggregator */
+  getFilesFromEvent?: (event: DropEvent) => Promise<(File | DataTransferItem)[]>; /** Custom validation function */
+  validator?: <T extends File>(file: T) => FileError | FileError[] | null; /** Determines whether pointer events should be enabled on the inner element */
+  enablePointerEvents?: boolean; /** Props passed down to the internal Input component */
+  inputProps?: InputHTMLAttributes<HTMLInputElement>;
+};
+declare const Dropzone: {
+  ({
+    className,
+    variant,
+    status: statusProp,
+    disabled: disabledProp,
+    loading,
+    multiple,
+    maxSize,
+    accept,
+    children,
+    onDropAny,
+    onDrop,
+    onReject,
+    openRef,
+    name,
+    maxFiles,
+    autoFocus,
+    activateOnClick,
+    activateOnDrag,
+    dragEventsBubbling,
+    activateOnKeyboard,
+    onDragEnter,
+    onDragLeave,
+    onDragOver,
+    onFileDialogCancel,
+    onFileDialogOpen,
+    preventDropOnDocument,
+    useFsAccessApi,
+    getFilesFromEvent,
+    validator,
+    enablePointerEvents,
+    inputProps,
+    ref,
+    ...props
+  }: DropzoneProps): react_jsx_runtime0.JSX.Element;
+  Accept: {
+    ({
+      children,
+      className,
+      ...props
+    }: DropzoneStatusProps): react.FunctionComponentElement<any> | null;
+    displayName: string;
+  };
+  Idle: {
+    ({
+      children,
+      className,
+      ...props
+    }: DropzoneStatusProps): react.FunctionComponentElement<any> | null;
+    displayName: string;
+  };
+  Reject: {
+    ({
+      children,
+      className,
+      ...props
+    }: DropzoneStatusProps): react.FunctionComponentElement<any> | null;
+    displayName: string;
+  };
+};
+//#endregion
+export { Dropzone, DropzoneAccept, type DropzoneAcceptProps, DropzoneContext, DropzoneIdle, type DropzoneIdleProps, type DropzoneProps, DropzoneReject, type DropzoneRejectProps, type DropzoneVariants, dropzoneVariants, useDropzoneContext };
+//# sourceMappingURL=dropzone.d.ts.map

package/dist/dropzone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropzone.d.ts","names":[],"sources":["../src/ui/dropzone/dropzone.tsx"],"mappings":";;;;;;;;;cA4BM,gBAAA,EAmJJ,kBAAA,CAnJoB,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmJpB,kBAAA,CAAA,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAEG,gBAAA,GAAmB,YAAA,QAAoB,gBAAA;AAAA,KAEvC,aAAA,GAAgB,IAAA,CAAK,cAAA,6BACxB,gBAAA;EACE,GAAA,GAAM,GAAA,CAAI,cAAA,GAAV;EAEA,SAAA,IACE,KAAA,EAAO,YAAA,IACP,cAAA,EAAgB,aAAA,aAJR;EAQV,MAAA,GAAS,KAAA,EAAO,YAAA,aALP;EAQT,QAAA,IAAY,cAAA,EAAgB,aAAA,aAPV;EAUlB,QAAA,YANA;EASA,OAAA,YATS;EAYT,MAAA,GAAS,MAAA,aATmB;EAY5B,OAAA,GAAU,GAAA,cATV;EAYA,QAAA,YANA;EASA,OAAA,WANA;EASA,IAAA,WANA;EASA,QAAA,WAHA;EAMA,SAAA;EAGA,eAAA,YAGA;EAAA,cAAA,YAMA;EAHA,kBAAA,YAMsB;EAHtB,kBAAA,YAGe;EAAf,WAAA,IAAe,KAAA,EAAO,SAAA,CAAU,WAAA,YAGV;EAAtB,WAAA,IAAe,KAAA,EAAO,SAAA,CAAU,WAAA,YAAjB;EAGf,UAAA,IAAc,KAAA,EAAO,SAAA,CAAU,WAAA,YAAV;EAGrB,kBAAA,eAHc;EAMd,gBAAA;EAGA,qBAAA,YAGA;EAAA,cAAA,YAIS;EADT,iBAAA,IACE,KAAA,EAAO,SAAA,KACJ,OAAA,EAAS,IAAA,GAAO,gBAAA,MAAhB;EAGL,SAAA,cAAuB,IAAA,EAAM,IAAA,EAAM,CAAA,KAAM,SAAA,GAAY,SAAA,WAHhC;EAMrB,mBAAA,YAHa;EAMb,UAAA,GAAa,mBAAA,CAAoB,gBAAA;AAAA;AAAA,cAG/B,QAAA;EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkCH,aAAA,GAAa,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/dropzone.js

@@ -0,0 +1,181 @@
+"use client";
+
+import { Spinner } from "./spinner.js";
+import { a as useDropzoneContext, i as DropzoneContext, n as DropzoneIdle, r as DropzoneReject, t as DropzoneAccept } from "./dropzone-status-B9Axvf9M.js";
+import { cn, tv } from "tailwind-variants";
+import { useImperativeHandle } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useDropzone } from "react-dropzone";
+
+//#region src/ui/dropzone/dropzone.tsx
+const dropzoneVariants = tv({
+	slots: {
+		root: [
+			"relative",
+			"cursor-pointer",
+			"select-none",
+			"rounded-lg",
+			"border",
+			"border-input",
+			"border-dashed",
+			"bg-background",
+			"p-4",
+			"outline-none",
+			"transition-colors",
+			"focus-visible:ring-2",
+			"focus-visible:ring-ring",
+			"focus-visible:ring-offset-2"
+		],
+		inner: [
+			"pointer-events-none",
+			"select-none",
+			"data-enable-pointer-events:pointer-events-auto"
+		],
+		overlay: [
+			"absolute",
+			"inset-0",
+			"z-10",
+			"flex",
+			"items-center",
+			"justify-center",
+			"rounded-lg",
+			"bg-background/80",
+			"backdrop-blur-sm"
+		]
+	},
+	variants: {
+		variant: {
+			default: { root: [] },
+			filled: { root: ["bg-muted"] },
+			light: { root: ["bg-muted/50"] }
+		},
+		status: {
+			idle: { root: [] },
+			accept: { root: [
+				"border-primary",
+				"bg-primary/10",
+				"text-primary"
+			] },
+			reject: { root: [
+				"border-danger",
+				"bg-danger/10",
+				"text-danger"
+			] }
+		},
+		disabled: { true: { root: ["cursor-default", "opacity-50"] } },
+		loading: { true: { root: ["cursor-default"] } },
+		activateOnClick: {
+			true: {},
+			false: { root: ["cursor-default"] }
+		}
+	},
+	compoundVariants: [
+		{
+			status: "accept",
+			variant: "filled",
+			class: { root: "border-primary bg-primary/20" }
+		},
+		{
+			status: "accept",
+			variant: "light",
+			class: { root: "border-primary bg-primary/10" }
+		},
+		{
+			status: "reject",
+			variant: "filled",
+			class: { root: "border-danger bg-danger/20" }
+		},
+		{
+			status: "reject",
+			variant: "light",
+			class: { root: "border-danger bg-danger/10" }
+		}
+	],
+	defaultVariants: {
+		variant: "light",
+		status: "idle",
+		disabled: false,
+		loading: false,
+		activateOnClick: true
+	}
+});
+const Dropzone = ({ className, variant, status: statusProp, disabled: disabledProp, loading, multiple = true, maxSize = Number.POSITIVE_INFINITY, accept, children, onDropAny, onDrop, onReject, openRef, name, maxFiles, autoFocus, activateOnClick = true, activateOnDrag = true, dragEventsBubbling = true, activateOnKeyboard = true, onDragEnter, onDragLeave, onDragOver, onFileDialogCancel, onFileDialogOpen, preventDropOnDocument, useFsAccessApi = true, getFilesFromEvent, validator, enablePointerEvents, inputProps, ref, ...props }) => {
+	const { getRootProps, getInputProps, isDragAccept, isDragReject, isDragActive, open } = useDropzone({
+		onDrop: onDropAny,
+		onDropAccepted: onDrop,
+		onDropRejected: onReject,
+		disabled: disabledProp || loading,
+		accept: Array.isArray(accept) ? Object.fromEntries(accept.map((key) => [key, []])) : accept,
+		multiple,
+		maxSize,
+		maxFiles,
+		autoFocus,
+		noClick: !activateOnClick,
+		noDrag: !activateOnDrag,
+		noDragEventsBubbling: !dragEventsBubbling,
+		noKeyboard: !activateOnKeyboard,
+		onDragEnter,
+		onDragLeave,
+		onDragOver,
+		onFileDialogCancel,
+		onFileDialogOpen,
+		preventDropOnDocument,
+		useFsAccessApi,
+		validator,
+		...getFilesFromEvent ? { getFilesFromEvent } : null
+	});
+	useImperativeHandle(openRef, () => open, [open]);
+	const isAccepted = isDragActive && isDragAccept;
+	const isRejected = isDragActive && isDragReject;
+	const isIdle = isDragActive ? isAccepted === false && isRejected === false : true;
+	let status = "idle";
+	if (statusProp) status = statusProp;
+	else if (isAccepted) status = "accept";
+	else if (isRejected) status = "reject";
+	const disabled = disabledProp || loading;
+	const { root, inner, overlay } = dropzoneVariants({
+		variant,
+		status,
+		disabled,
+		loading,
+		activateOnClick
+	});
+	return /* @__PURE__ */ jsx(DropzoneContext.Provider, {
+		value: {
+			accept: isAccepted,
+			reject: isRejected,
+			idle: isIdle
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			...getRootProps(),
+			className: cn(root(), className),
+			"data-disabled": disabled || void 0,
+			"data-loading": loading || void 0,
+			"data-slot": "dropzone",
+			ref,
+			...props,
+			children: [
+				loading && /* @__PURE__ */ jsx("div", {
+					className: overlay(),
+					children: /* @__PURE__ */ jsx(Spinner, {})
+				}),
+				/* @__PURE__ */ jsx("input", {
+					...getInputProps(inputProps),
+					name
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: inner(),
+					"data-enable-pointer-events": enablePointerEvents || void 0,
+					children
+				})
+			]
+		})
+	});
+};
+Dropzone.Accept = DropzoneAccept;
+Dropzone.Idle = DropzoneIdle;
+Dropzone.Reject = DropzoneReject;
+
+//#endregion
+export { Dropzone, DropzoneAccept, DropzoneContext, DropzoneIdle, DropzoneReject, dropzoneVariants, useDropzoneContext };
+//# sourceMappingURL=dropzone.js.map

package/dist/dropzone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropzone.js","names":[],"sources":["../src/ui/dropzone/dropzone.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n  ComponentProps,\n  DragEvent,\n  InputHTMLAttributes,\n  Ref,\n} from \"react\";\nimport type {\n  Accept,\n  DropEvent,\n  FileError,\n  FileRejection,\n  FileWithPath,\n} from \"react-dropzone\";\n\nimport { useImperativeHandle } from \"react\";\nimport { useDropzone } from \"react-dropzone\";\nimport { cn, tv, type VariantProps } from \"tailwind-variants\";\n\nimport { Spinner } from \"../spinner/spinner\";\nimport { DropzoneContext, useDropzoneContext } from \"./dropzone-context\";\nimport {\n  DropzoneAccept,\n  DropzoneIdle,\n  DropzoneReject,\n} from \"./dropzone-status\";\n\nconst dropzoneVariants = tv({\n  slots: {\n    root: [\n      \"relative\",\n      \"cursor-pointer\",\n      \"select-none\",\n      \"rounded-lg\",\n      \"border\",\n      \"border-input\",\n      \"border-dashed\",\n      \"bg-background\",\n      \"p-4\",\n      \"outline-none\",\n      \"transition-colors\",\n      \"focus-visible:ring-2\",\n      \"focus-visible:ring-ring\",\n      \"focus-visible:ring-offset-2\",\n    ],\n    inner: [\n      \"pointer-events-none\",\n      \"select-none\",\n      \"data-enable-pointer-events:pointer-events-auto\",\n    ],\n    overlay: [\n      \"absolute\",\n      \"inset-0\",\n      \"z-10\",\n      \"flex\",\n      \"items-center\",\n      \"justify-center\",\n      \"rounded-lg\",\n      \"bg-background/80\",\n      \"backdrop-blur-sm\",\n    ],\n  },\n  variants: {\n    variant: {\n      default: {\n        root: [\n          // No additional styles for default variant\n        ],\n      },\n      filled: {\n        root: [\n          // Background: muted background\n          \"bg-muted\",\n        ],\n      },\n      light: {\n        root: [\n          // Background: muted background with opacity\n          \"bg-muted/50\",\n        ],\n      },\n    },\n    status: {\n      idle: {\n        root: [\n          // No additional styles for idle status\n        ],\n      },\n      accept: {\n        root: [\n          // Border: primary border color\n          \"border-primary\",\n          // Background: primary background with opacity\n          \"bg-primary/10\",\n          // Text: primary text color\n          \"text-primary\",\n        ],\n      },\n      reject: {\n        root: [\n          // Border: danger border color\n          \"border-danger\",\n          // Background: danger background with opacity\n          \"bg-danger/10\",\n          // Text: danger text color\n          \"text-danger\",\n        ],\n      },\n    },\n    disabled: {\n      true: {\n        root: [\n          // Cursor: default cursor\n          \"cursor-default\",\n          // Opacity: reduced opacity\n          \"opacity-50\",\n        ],\n      },\n    },\n    loading: {\n      true: {\n        root: [\n          // Cursor: default cursor\n          \"cursor-default\",\n        ],\n      },\n    },\n    activateOnClick: {\n      true: {},\n      false: {\n        root: [\n          // Cursor: default cursor when click is disabled\n          \"cursor-default\",\n        ],\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      status: \"accept\",\n      variant: \"filled\",\n      class: {\n        root: \"border-primary bg-primary/20\",\n      },\n    },\n    {\n      status: \"accept\",\n      variant: \"light\",\n      class: {\n        root: \"border-primary bg-primary/10\",\n      },\n    },\n    {\n      status: \"reject\",\n      variant: \"filled\",\n      class: {\n        root: \"border-danger bg-danger/20\",\n      },\n    },\n    {\n      status: \"reject\",\n      variant: \"light\",\n      class: {\n        root: \"border-danger bg-danger/10\",\n      },\n    },\n  ],\n  defaultVariants: {\n    variant: \"light\",\n    status: \"idle\",\n    disabled: false,\n    loading: false,\n    activateOnClick: true,\n  },\n});\n\ntype DropzoneVariants = VariantProps<typeof dropzoneVariants>;\n\ntype DropzoneProps = Omit<ComponentProps<\"div\">, \"onDrop\" | \"ref\"> &\n  DropzoneVariants & {\n    ref?: Ref<HTMLDivElement>;\n    /** Called when any files are dropped to the dropzone */\n    onDropAny?: (\n      files: FileWithPath[],\n      fileRejections: FileRejection[]\n    ) => void;\n\n    /** Called when valid files are dropped to the dropzone */\n    onDrop: (files: FileWithPath[]) => void;\n\n    /** Called when dropped files do not meet file restrictions */\n    onReject?: (fileRejections: FileRejection[]) => void;\n\n    /** Determines whether files capturing should be disabled */\n    disabled?: boolean;\n\n    /** Determines whether a loading overlay should be displayed */\n    loading?: boolean;\n\n    /** Mime types of the files that dropzone can accept */\n    accept?: Accept | string[];\n\n    /** A ref function which when called opens the file system file picker */\n    openRef?: Ref<() => void>;\n\n    /** Determines whether multiple files can be dropped */\n    multiple?: boolean;\n\n    /** Maximum file size in bytes */\n    maxSize?: number;\n\n    /** Name of the form control */\n    name?: string;\n\n    /** Maximum number of files that can be picked at once */\n    maxFiles?: number;\n\n    /** Set to autofocus the root element */\n    autoFocus?: boolean;\n\n    /** If false, disables click to open the native file selection dialog */\n    activateOnClick?: boolean;\n\n    /** If false, disables drag 'n' drop */\n    activateOnDrag?: boolean;\n\n    /** If false, disables Space/Enter to open the native file selection dialog */\n    activateOnKeyboard?: boolean;\n\n    /** If false, stops drag event propagation to parents */\n    dragEventsBubbling?: boolean;\n\n    /** Called when the dragenter event occurs */\n    onDragEnter?: (event: DragEvent<HTMLElement>) => void;\n\n    /** Called when the dragleave event occurs */\n    onDragLeave?: (event: DragEvent<HTMLElement>) => void;\n\n    /** Called when the dragover event occurs */\n    onDragOver?: (event: DragEvent<HTMLElement>) => void;\n\n    /** Called when user closes the file selection dialog with no selection */\n    onFileDialogCancel?: () => void;\n\n    /** Called when user opens the file selection dialog */\n    onFileDialogOpen?: () => void;\n\n    /** If false, allow dropped items to take over the current browser window */\n    preventDropOnDocument?: boolean;\n\n    /** Set to true to use the File System Access API */\n    useFsAccessApi?: boolean;\n\n    /** Use this to provide a custom file aggregator */\n    getFilesFromEvent?: (\n      event: DropEvent\n    ) => Promise<(File | DataTransferItem)[]>;\n\n    /** Custom validation function */\n    validator?: <T extends File>(file: T) => FileError | FileError[] | null;\n\n    /** Determines whether pointer events should be enabled on the inner element */\n    enablePointerEvents?: boolean;\n\n    /** Props passed down to the internal Input component */\n    inputProps?: InputHTMLAttributes<HTMLInputElement>;\n  };\n\nconst Dropzone = ({\n  className,\n  variant,\n  status: statusProp,\n  disabled: disabledProp,\n  loading,\n  multiple = true,\n  maxSize = Number.POSITIVE_INFINITY,\n  accept,\n  children,\n  onDropAny,\n  onDrop,\n  onReject,\n  openRef,\n  name,\n  maxFiles,\n  autoFocus,\n  activateOnClick = true,\n  activateOnDrag = true,\n  dragEventsBubbling = true,\n  activateOnKeyboard = true,\n  onDragEnter,\n  onDragLeave,\n  onDragOver,\n  onFileDialogCancel,\n  onFileDialogOpen,\n  preventDropOnDocument,\n  useFsAccessApi = true,\n  getFilesFromEvent,\n  validator,\n  enablePointerEvents,\n  inputProps,\n  ref,\n  ...props\n}: DropzoneProps) => {\n  const {\n    getRootProps,\n    getInputProps,\n    isDragAccept,\n    isDragReject,\n    isDragActive,\n    open,\n  } = useDropzone({\n    onDrop: onDropAny,\n    onDropAccepted: onDrop,\n    onDropRejected: onReject,\n    disabled: disabledProp || loading,\n    accept: Array.isArray(accept)\n      ? Object.fromEntries(accept.map((key) => [key, []]))\n      : accept,\n    multiple,\n    maxSize,\n    maxFiles,\n    autoFocus,\n    noClick: !activateOnClick,\n    noDrag: !activateOnDrag,\n    noDragEventsBubbling: !dragEventsBubbling,\n    noKeyboard: !activateOnKeyboard,\n    onDragEnter,\n    onDragLeave,\n    onDragOver,\n    onFileDialogCancel,\n    onFileDialogOpen,\n    preventDropOnDocument,\n    useFsAccessApi,\n    validator,\n    ...(getFilesFromEvent ? { getFilesFromEvent } : null),\n  });\n\n  useImperativeHandle(openRef, () => open, [open]);\n\n  const isAccepted = isDragActive && isDragAccept;\n  const isRejected = isDragActive && isDragReject;\n  const isIdle = isDragActive\n    ? isAccepted === false && isRejected === false\n    : true;\n\n  let status: \"idle\" | \"accept\" | \"reject\" = \"idle\";\n  if (statusProp) {\n    status = statusProp;\n  } else if (isAccepted) {\n    status = \"accept\";\n  } else if (isRejected) {\n    status = \"reject\";\n  }\n  const disabled = disabledProp || loading;\n\n  const { root, inner, overlay } = dropzoneVariants({\n    variant,\n    status,\n    disabled,\n    loading,\n    activateOnClick,\n  });\n\n  return (\n    <DropzoneContext.Provider\n      value={{ accept: isAccepted, reject: isRejected, idle: isIdle }}\n    >\n      <div\n        {...getRootProps()}\n        className={cn(root(), className)}\n        data-disabled={disabled || undefined}\n        data-loading={loading || undefined}\n        data-slot=\"dropzone\"\n        ref={ref}\n        {...props}\n      >\n        {loading && (\n          <div className={overlay()}>\n            <Spinner />\n          </div>\n        )}\n        <input {...getInputProps(inputProps)} name={name} />\n        <div\n          className={inner()}\n          data-enable-pointer-events={enablePointerEvents || undefined}\n        >\n          {children}\n        </div>\n      </div>\n    </DropzoneContext.Provider>\n  );\n};\n\nDropzone.Accept = DropzoneAccept;\nDropzone.Idle = DropzoneIdle;\nDropzone.Reject = DropzoneReject;\n\nexport type {\n  DropzoneAcceptProps,\n  DropzoneIdleProps,\n  DropzoneRejectProps,\n} from \"./dropzone-status\";\nexport type { DropzoneProps, DropzoneVariants };\n\nexport {\n  Dropzone,\n  DropzoneAccept,\n  DropzoneContext,\n  DropzoneIdle,\n  DropzoneReject,\n  dropzoneVariants,\n  useDropzoneContext,\n};\n"],"mappings":";;;;;;;;;;AA4BA,MAAM,mBAAmB,GAAG;CAC1B,OAAO;EACL,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACD,OAAO;GACL;GACA;GACA;GACD;EACD,SAAS;GACP;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACF;CACD,UAAU;EACR,SAAS;GACP,SAAS,EACP,MAAM,EAEL,EACF;GACD,QAAQ,EACN,MAAM,CAEJ,WACD,EACF;GACD,OAAO,EACL,MAAM,CAEJ,cACD,EACF;GACF;EACD,QAAQ;GACN,MAAM,EACJ,MAAM,EAEL,EACF;GACD,QAAQ,EACN,MAAM;IAEJ;IAEA;IAEA;IACD,EACF;GACD,QAAQ,EACN,MAAM;IAEJ;IAEA;IAEA;IACD,EACF;GACF;EACD,UAAU,EACR,MAAM,EACJ,MAAM,CAEJ,kBAEA,aACD,EACF,EACF;EACD,SAAS,EACP,MAAM,EACJ,MAAM,CAEJ,iBACD,EACF,EACF;EACD,iBAAiB;GACf,MAAM,EAAE;GACR,OAAO,EACL,MAAM,CAEJ,iBACD,EACF;GACF;EACF;CACD,kBAAkB;EAChB;GACE,QAAQ;GACR,SAAS;GACT,OAAO,EACL,MAAM,gCACP;GACF;EACD;GACE,QAAQ;GACR,SAAS;GACT,OAAO,EACL,MAAM,gCACP;GACF;EACD;GACE,QAAQ;GACR,SAAS;GACT,OAAO,EACL,MAAM,8BACP;GACF;EACD;GACE,QAAQ;GACR,SAAS;GACT,OAAO,EACL,MAAM,8BACP;GACF;EACF;CACD,iBAAiB;EACf,SAAS;EACT,QAAQ;EACR,UAAU;EACV,SAAS;EACT,iBAAiB;EAClB;CACF,CAAC;AA8FF,MAAM,YAAY,EAChB,WACA,SACA,QAAQ,YACR,UAAU,cACV,SACA,WAAW,MACX,UAAU,OAAO,mBACjB,QACA,UACA,WACA,QACA,UACA,SACA,MACA,UACA,WACA,kBAAkB,MAClB,iBAAiB,MACjB,qBAAqB,MACrB,qBAAqB,MACrB,aACA,aACA,YACA,oBACA,kBACA,uBACA,iBAAiB,MACjB,mBACA,WACA,qBACA,YACA,KACA,GAAG,YACgB;CACnB,MAAM,EACJ,cACA,eACA,cACA,cACA,cACA,SACE,YAAY;EACd,QAAQ;EACR,gBAAgB;EAChB,gBAAgB;EAChB,UAAU,gBAAgB;EAC1B,QAAQ,MAAM,QAAQ,OAAO,GACzB,OAAO,YAAY,OAAO,KAAK,QAAQ,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,GAClD;EACJ;EACA;EACA;EACA;EACA,SAAS,CAAC;EACV,QAAQ,CAAC;EACT,sBAAsB,CAAC;EACvB,YAAY,CAAC;EACb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,GAAI,oBAAoB,EAAE,mBAAmB,GAAG;EACjD,CAAC;AAEF,qBAAoB,eAAe,MAAM,CAAC,KAAK,CAAC;CAEhD,MAAM,aAAa,gBAAgB;CACnC,MAAM,aAAa,gBAAgB;CACnC,MAAM,SAAS,eACX,eAAe,SAAS,eAAe,QACvC;CAEJ,IAAI,SAAuC;AAC3C,KAAI,WACF,UAAS;UACA,WACT,UAAS;UACA,WACT,UAAS;CAEX,MAAM,WAAW,gBAAgB;CAEjC,MAAM,EAAE,MAAM,OAAO,YAAY,iBAAiB;EAChD;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,gBAAgB;EACf,OAAO;GAAE,QAAQ;GAAY,QAAQ;GAAY,MAAM;GAAQ;YAE/D,qBAAC;GACC,GAAI,cAAc;GAClB,WAAW,GAAG,MAAM,EAAE,UAAU;GAChC,iBAAe,YAAY;GAC3B,gBAAc,WAAW;GACzB,aAAU;GACL;GACL,GAAI;;IAEH,WACC,oBAAC;KAAI,WAAW,SAAS;eACvB,oBAAC,YAAU;MACP;IAER,oBAAC;KAAM,GAAI,cAAc,WAAW;KAAQ;MAAQ;IACpD,oBAAC;KACC,WAAW,OAAO;KAClB,8BAA4B,uBAAuB;KAElD;MACG;;IACF;GACmB;;AAI/B,SAAS,SAAS;AAClB,SAAS,OAAO;AAChB,SAAS,SAAS"}

package/dist/emoji-picker-skin-tone-selector-amzh0Wk6.d.ts

@@ -0,0 +1,68 @@
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { EmojiPicker } from "frimousse";
+
+//#region src/ui/emoji-picker/emoji-picker-active-emoji.d.ts
+type EmojiPickerActiveEmojiProps = ComponentProps<typeof EmojiPicker.ActiveEmoji>;
+declare const EmojiPickerActiveEmoji: (props: EmojiPickerActiveEmojiProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/emoji-picker/emoji-picker-active-emoji-preview.d.ts
+type EmojiPickerActiveEmojiPreviewProps = Omit<ComponentProps<typeof EmojiPickerActiveEmoji>, "children"> & {
+  emptyText?: string;
+};
+declare const EmojiPickerActiveEmojiPreview: ({
+  emptyText,
+  ...props
+}: EmojiPickerActiveEmojiPreviewProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/emoji-picker/emoji-picker-content.d.ts
+type EmojiPickerContentProps = ComponentProps<typeof EmojiPicker.Viewport>;
+declare const EmojiPickerContent: ({
+  className,
+  ...props
+}: EmojiPickerContentProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/emoji-picker/emoji-picker-empty.d.ts
+type EmojiPickerEmptyProps = ComponentProps<typeof EmojiPicker.Empty>;
+declare const EmojiPickerEmpty: ({
+  className,
+  ...props
+}: EmojiPickerEmptyProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/emoji-picker/emoji-picker-list.d.ts
+type EmojiPickerListProps = ComponentProps<typeof EmojiPicker.List>;
+declare const EmojiPickerList: ({
+  className,
+  ...props
+}: EmojiPickerListProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/emoji-picker/emoji-picker-loading.d.ts
+type EmojiPickerLoadingProps = ComponentProps<typeof EmojiPicker.Loading>;
+declare const EmojiPickerLoading: ({
+  className,
+  ...props
+}: EmojiPickerLoadingProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/emoji-picker/emoji-picker-search.d.ts
+type EmojiPickerSearchProps = ComponentProps<typeof EmojiPicker.Search> & {
+  wrapperClassName?: string;
+};
+declare const EmojiPickerSearch: ({
+  className,
+  wrapperClassName,
+  ...props
+}: EmojiPickerSearchProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/emoji-picker/emoji-picker-skin-tone.d.ts
+type EmojiPickerSkinToneProps = ComponentProps<typeof EmojiPicker.SkinTone>;
+declare const EmojiPickerSkinTone: (props: EmojiPickerSkinToneProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/emoji-picker/emoji-picker-skin-tone-selector.d.ts
+type EmojiPickerSkinToneSelectorProps = ComponentProps<typeof EmojiPicker.SkinToneSelector>;
+declare const EmojiPickerSkinToneSelector: ({
+  className,
+  ...props
+}: EmojiPickerSkinToneSelectorProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { EmojiPickerActiveEmoji as _, EmojiPickerSearch as a, EmojiPickerLoadingProps as c, EmojiPickerEmpty as d, EmojiPickerEmptyProps as f, EmojiPickerActiveEmojiPreviewProps as g, EmojiPickerActiveEmojiPreview as h, EmojiPickerSkinToneProps as i, EmojiPickerList as l, EmojiPickerContentProps as m, EmojiPickerSkinToneSelectorProps as n, EmojiPickerSearchProps as o, EmojiPickerContent as p, EmojiPickerSkinTone as r, EmojiPickerLoading as s, EmojiPickerSkinToneSelector as t, EmojiPickerListProps as u, EmojiPickerActiveEmojiProps as v };
+//# sourceMappingURL=emoji-picker-skin-tone-selector-amzh0Wk6.d.ts.map

package/dist/emoji-picker-skin-tone-selector-amzh0Wk6.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji-picker-skin-tone-selector-amzh0Wk6.d.ts","names":[],"sources":["../src/ui/emoji-picker/emoji-picker-active-emoji.tsx","../src/ui/emoji-picker/emoji-picker-active-emoji-preview.tsx","../src/ui/emoji-picker/emoji-picker-content.tsx","../src/ui/emoji-picker/emoji-picker-empty.tsx","../src/ui/emoji-picker/emoji-picker-list.tsx","../src/ui/emoji-picker/emoji-picker-loading.tsx","../src/ui/emoji-picker/emoji-picker-search.tsx","../src/ui/emoji-picker/emoji-picker-skin-tone.tsx","../src/ui/emoji-picker/emoji-picker-skin-tone-selector.tsx"],"mappings":";;;;;KAIY,2BAAA,GAA8B,cAAA,QACjC,WAAA,CAAgB,WAAA;AAAA,cAGZ,sBAAA,GAA0B,KAAA,EAAO,2BAAA,KAA2B,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCF7D,kCAAA,GAAqC,IAAA,CAC/C,cAAA,QAAsB,sBAAA;EAGtB,SAAA;AAAA;AAAA,cAGW,6BAAA;EAAiC,SAAA;EAAA,GAAA;AAAA,GAG3C,kCAAA,KAAkC,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCXzB,uBAAA,GAA0B,cAAA,QAC7B,WAAA,CAAgB,QAAA;AAAA,cAGZ,kBAAA;EAAsB,SAAA;EAAA,GAAA;AAAA,GAGhC,uBAAA,KAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCPd,qBAAA,GAAwB,cAAA,QAC3B,WAAA,CAAgB,KAAA;AAAA,cAGZ,gBAAA;EAAoB,SAAA;EAAA,GAAA;AAAA,GAG9B,qBAAA,KAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCHZ,oBAAA,GAAuB,cAAA,QAAsB,WAAA,CAAgB,IAAA;AAAA,cAE5D,eAAA;EAAmB,SAAA;EAAA,GAAA;AAAA,GAG7B,oBAAA,KAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCTX,uBAAA,GAA0B,cAAA,QAC7B,WAAA,CAAgB,OAAA;AAAA,cAGZ,kBAAA;EAAsB,SAAA;EAAA,GAAA;AAAA,GAGhC,uBAAA,KAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCPd,sBAAA,GAAyB,cAAA,QAC5B,WAAA,CAAgB,MAAA;EAEvB,gBAAA;AAAA;AAAA,cAGW,iBAAA;EAAqB,SAAA;EAAA,gBAAA;EAAA,GAAA;AAAA,GAI/B,sBAAA,KAAsB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCXb,wBAAA,GAA2B,cAAA,QAC9B,WAAA,CAAgB,QAAA;AAAA,cAGZ,mBAAA,GAAuB,KAAA,EAAO,wBAAA,KAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCHvD,gCAAA,GAAmC,cAAA,QACtC,WAAA,CAAgB,gBAAA;AAAA,cAGZ,2BAAA;EAA+B,SAAA;EAAA,GAAA;AAAA,GAGzC,gCAAA,KAAgC,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/emoji-picker-skin-tone-selector-ioOHy5cv.js

@@ -0,0 +1,118 @@
+import { cn } from "tailwind-variants";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { EmojiPicker } from "frimousse";
+
+//#region src/ui/emoji-picker/emoji-picker-active-emoji.tsx
+const EmojiPickerActiveEmoji = (props) => /* @__PURE__ */ jsx(EmojiPicker.ActiveEmoji, {
+	"data-slot": "emoji-picker-active-emoji",
+	...props
+});
+
+//#endregion
+//#region src/ui/emoji-picker/emoji-picker-active-emoji-preview.tsx
+const EmojiPickerActiveEmojiPreview = ({ emptyText = "Hover or navigate to see emoji details", ...props }) => /* @__PURE__ */ jsx(EmojiPickerActiveEmoji, {
+	...props,
+	children: ({ emoji }) => /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center gap-2 rounded-md border-t bg-popover px-3 py-2 text-sm", !emoji && "text-muted-foreground"),
+		"data-slot": "emoji-picker-active-emoji-preview",
+		children: emoji ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: "text-lg",
+			children: emoji.emoji
+		}), /* @__PURE__ */ jsx("span", { children: emoji.label })] }) : /* @__PURE__ */ jsx("span", { children: emptyText })
+	})
+});
+
+//#endregion
+//#region src/ui/emoji-picker/emoji-picker-content.tsx
+const EmojiPickerContent = ({ className, ...props }) => /* @__PURE__ */ jsx(EmojiPicker.Viewport, {
+	className: cn("relative flex-1 outline-hidden", className),
+	"data-slot": "emoji-picker-content",
+	...props
+});
+
+//#endregion
+//#region src/ui/emoji-picker/emoji-picker-empty.tsx
+const EmojiPickerEmpty = ({ className, ...props }) => /* @__PURE__ */ jsx(EmojiPicker.Empty, {
+	className: cn("absolute inset-0 flex items-center justify-center text-sm text-muted-foreground", className),
+	"data-slot": "emoji-picker-empty",
+	...props
+});
+
+//#endregion
+//#region src/ui/emoji-picker/emoji-picker-list-category-header.tsx
+const EmojiPickerListCategoryHeader = ({ category, ...restProps }) => /* @__PURE__ */ jsx("div", {
+	className: "bg-popover px-3 pb-1.5 text-xs font-medium text-muted-foreground",
+	"data-slot": "emoji-picker-list-category-header",
+	...restProps,
+	children: category.label
+});
+
+//#endregion
+//#region src/ui/emoji-picker/emoji-picker-list-emoji.tsx
+const EmojiPickerListEmoji = ({ emoji, ...restProps }) => /* @__PURE__ */ jsx("button", {
+	type: "button",
+	className: "flex size-8 cursor-pointer items-center justify-center rounded-md text-lg data-active:bg-accent",
+	"data-slot": "emoji-picker-list-emoji",
+	...restProps,
+	children: emoji.emoji
+});
+
+//#endregion
+//#region src/ui/emoji-picker/emoji-picker-list-row.tsx
+const EmojiPickerListRow = ({ children, ...restProps }) => /* @__PURE__ */ jsx("div", {
+	className: "scroll-my-1.5 px-1.5",
+	"data-slot": "emoji-picker-list-row",
+	...restProps,
+	children
+});
+
+//#endregion
+//#region src/ui/emoji-picker/emoji-picker-list.tsx
+const EmojiPickerList = ({ className, ...props }) => /* @__PURE__ */ jsx(EmojiPicker.List, {
+	className: cn("pb-2 select-none", className),
+	components: {
+		CategoryHeader: EmojiPickerListCategoryHeader,
+		Row: EmojiPickerListRow,
+		Emoji: EmojiPickerListEmoji
+	},
+	"data-slot": "emoji-picker-list",
+	...props
+});
+
+//#endregion
+//#region src/ui/emoji-picker/emoji-picker-loading.tsx
+const EmojiPickerLoading = ({ className, ...props }) => /* @__PURE__ */ jsx(EmojiPicker.Loading, {
+	className: cn("absolute inset-0 flex items-center justify-center text-sm text-muted-foreground", className),
+	"data-slot": "emoji-picker-loading",
+	...props
+});
+
+//#endregion
+//#region src/ui/emoji-picker/emoji-picker-search.tsx
+const EmojiPickerSearch = ({ className, wrapperClassName, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("p-2", wrapperClassName),
+	"data-slot": "emoji-picker-search-wrapper",
+	children: /* @__PURE__ */ jsx(EmojiPicker.Search, {
+		className: cn("z-50 flex h-9 w-full min-w-0 rounded-md border border-input bg-input px-3 py-1 text-base shadow-xs transition-[color,box-shadow,border-color] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground hover:border-ring/70 disabled:pointer-events-none disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50", "aria-invalid:border-danger aria-invalid:ring-danger/50", className),
+		...props
+	})
+});
+
+//#endregion
+//#region src/ui/emoji-picker/emoji-picker-skin-tone.tsx
+const EmojiPickerSkinTone = (props) => /* @__PURE__ */ jsx(EmojiPicker.SkinTone, {
+	"data-slot": "emoji-picker-skin-tone",
+	...props
+});
+
+//#endregion
+//#region src/ui/emoji-picker/emoji-picker-skin-tone-selector.tsx
+const EmojiPickerSkinToneSelector = ({ className, ...props }) => /* @__PURE__ */ jsx(EmojiPicker.SkinToneSelector, {
+	className: cn("mx-2 mb-1.5 size-8 rounded-md bg-popover text-lg hover:bg-accent", className),
+	"data-slot": "emoji-picker-skin-tone-selector",
+	...props
+});
+
+//#endregion
+export { EmojiPickerList as a, EmojiPickerActiveEmojiPreview as c, EmojiPickerLoading as i, EmojiPickerActiveEmoji as l, EmojiPickerSkinTone as n, EmojiPickerEmpty as o, EmojiPickerSearch as r, EmojiPickerContent as s, EmojiPickerSkinToneSelector as t };
+//# sourceMappingURL=emoji-picker-skin-tone-selector-ioOHy5cv.js.map

package/dist/emoji-picker-skin-tone-selector-ioOHy5cv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji-picker-skin-tone-selector-ioOHy5cv.js","names":["BaseEmojiPicker","BaseEmojiPicker","BaseEmojiPicker","BaseEmojiPicker","BaseEmojiPicker","BaseEmojiPicker","BaseEmojiPicker","BaseEmojiPicker"],"sources":["../src/ui/emoji-picker/emoji-picker-active-emoji.tsx","../src/ui/emoji-picker/emoji-picker-active-emoji-preview.tsx","../src/ui/emoji-picker/emoji-picker-content.tsx","../src/ui/emoji-picker/emoji-picker-empty.tsx","../src/ui/emoji-picker/emoji-picker-list-category-header.tsx","../src/ui/emoji-picker/emoji-picker-list-emoji.tsx","../src/ui/emoji-picker/emoji-picker-list-row.tsx","../src/ui/emoji-picker/emoji-picker-list.tsx","../src/ui/emoji-picker/emoji-picker-loading.tsx","../src/ui/emoji-picker/emoji-picker-search.tsx","../src/ui/emoji-picker/emoji-picker-skin-tone.tsx","../src/ui/emoji-picker/emoji-picker-skin-tone-selector.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\n\nimport { EmojiPicker as BaseEmojiPicker } from \"frimousse\";\n\nexport type EmojiPickerActiveEmojiProps = ComponentProps<\n  typeof BaseEmojiPicker.ActiveEmoji\n>;\n\nexport const EmojiPickerActiveEmoji = (props: EmojiPickerActiveEmojiProps) => (\n  <BaseEmojiPicker.ActiveEmoji\n    data-slot=\"emoji-picker-active-emoji\"\n    {...props}\n  />\n);\n","import type { ComponentProps } from \"react\";\n\nimport { cn } from \"tailwind-variants\";\n\nimport { EmojiPickerActiveEmoji } from \"./emoji-picker-active-emoji\";\n\nexport type EmojiPickerActiveEmojiPreviewProps = Omit<\n  ComponentProps<typeof EmojiPickerActiveEmoji>,\n  \"children\"\n> & {\n  emptyText?: string;\n};\n\nexport const EmojiPickerActiveEmojiPreview = ({\n  emptyText = \"Hover or navigate to see emoji details\",\n  ...props\n}: EmojiPickerActiveEmojiPreviewProps) => (\n  <EmojiPickerActiveEmoji {...props}>\n    {({ emoji }) => (\n      <div\n        className={cn(\n          \"flex items-center gap-2 rounded-md border-t bg-popover px-3 py-2 text-sm\",\n          !emoji && \"text-muted-foreground\"\n        )}\n        data-slot=\"emoji-picker-active-emoji-preview\"\n      >\n        {emoji ? (\n          <>\n            <span className=\"text-lg\">{emoji.emoji}</span>\n            <span>{emoji.label}</span>\n          </>\n        ) : (\n          <span>{emptyText}</span>\n        )}\n      </div>\n    )}\n  </EmojiPickerActiveEmoji>\n);\n","import type { ComponentProps } from \"react\";\n\nimport { EmojiPicker as BaseEmojiPicker } from \"frimousse\";\nimport { cn } from \"tailwind-variants\";\n\nexport type EmojiPickerContentProps = ComponentProps<\n  typeof BaseEmojiPicker.Viewport\n>;\n\nexport const EmojiPickerContent = ({\n  className,\n  ...props\n}: EmojiPickerContentProps) => (\n  <BaseEmojiPicker.Viewport\n    className={cn(\"relative flex-1 outline-hidden\", className)}\n    data-slot=\"emoji-picker-content\"\n    {...props}\n  />\n);\n","import type { ComponentProps } from \"react\";\n\nimport { EmojiPicker as BaseEmojiPicker } from \"frimousse\";\nimport { cn } from \"tailwind-variants\";\n\nexport type EmojiPickerEmptyProps = ComponentProps<\n  typeof BaseEmojiPicker.Empty\n>;\n\nexport const EmojiPickerEmpty = ({\n  className,\n  ...props\n}: EmojiPickerEmptyProps) => (\n  <BaseEmojiPicker.Empty\n    className={cn(\n      \"absolute inset-0 flex items-center justify-center text-sm text-muted-foreground\",\n      className\n    )}\n    data-slot=\"emoji-picker-empty\"\n    {...props}\n  />\n);\n","import type { ComponentProps } from \"react\";\n\nexport type EmojiPickerListCategoryHeaderProps = {\n  category: { label: string };\n} & ComponentProps<\"div\">;\n\nexport const EmojiPickerListCategoryHeader = ({\n  category,\n  ...restProps\n}: EmojiPickerListCategoryHeaderProps) => (\n  <div\n    className=\"bg-popover px-3 pb-1.5 text-xs font-medium text-muted-foreground\"\n    data-slot=\"emoji-picker-list-category-header\"\n    {...restProps}\n  >\n    {category.label}\n  </div>\n);\n","import type { ComponentProps } from \"react\";\n\nexport type EmojiPickerListEmojiProps = {\n  emoji: { emoji: string };\n} & ComponentProps<\"button\">;\n\nexport const EmojiPickerListEmoji = ({\n  emoji,\n  ...restProps\n}: EmojiPickerListEmojiProps) => (\n  <button\n    type=\"button\"\n    className=\"flex size-8 cursor-pointer items-center justify-center rounded-md text-lg data-active:bg-accent\"\n    data-slot=\"emoji-picker-list-emoji\"\n    {...restProps}\n  >\n    {emoji.emoji}\n  </button>\n);\n","import type { ComponentProps } from \"react\";\n\nexport type EmojiPickerListRowProps = ComponentProps<\"div\">;\n\nexport const EmojiPickerListRow = ({\n  children,\n  ...restProps\n}: EmojiPickerListRowProps) => (\n  <div\n    className=\"scroll-my-1.5 px-1.5\"\n    data-slot=\"emoji-picker-list-row\"\n    {...restProps}\n  >\n    {children}\n  </div>\n);\n","import type { ComponentProps } from \"react\";\n\nimport { EmojiPicker as BaseEmojiPicker } from \"frimousse\";\nimport { cn } from \"tailwind-variants\";\n\nimport { EmojiPickerListCategoryHeader as CategoryHeader } from \"./emoji-picker-list-category-header\";\nimport { EmojiPickerListEmoji as Emoji } from \"./emoji-picker-list-emoji\";\nimport { EmojiPickerListRow as Row } from \"./emoji-picker-list-row\";\n\nexport type EmojiPickerListProps = ComponentProps<typeof BaseEmojiPicker.List>;\n\nexport const EmojiPickerList = ({\n  className,\n  ...props\n}: EmojiPickerListProps) => (\n  <BaseEmojiPicker.List\n    className={cn(\"pb-2 select-none\", className)}\n    components={{\n      CategoryHeader,\n      Row,\n      Emoji,\n    }}\n    data-slot=\"emoji-picker-list\"\n    {...props}\n  />\n);\n","import type { ComponentProps } from \"react\";\n\nimport { EmojiPicker as BaseEmojiPicker } from \"frimousse\";\nimport { cn } from \"tailwind-variants\";\n\nexport type EmojiPickerLoadingProps = ComponentProps<\n  typeof BaseEmojiPicker.Loading\n>;\n\nexport const EmojiPickerLoading = ({\n  className,\n  ...props\n}: EmojiPickerLoadingProps) => (\n  <BaseEmojiPicker.Loading\n    className={cn(\n      \"absolute inset-0 flex items-center justify-center text-sm text-muted-foreground\",\n      className\n    )}\n    data-slot=\"emoji-picker-loading\"\n    {...props}\n  />\n);\n","import type { ComponentProps } from \"react\";\n\nimport { EmojiPicker as BaseEmojiPicker } from \"frimousse\";\nimport { cn } from \"tailwind-variants\";\n\nexport type EmojiPickerSearchProps = ComponentProps<\n  typeof BaseEmojiPicker.Search\n> & {\n  wrapperClassName?: string;\n};\n\nexport const EmojiPickerSearch = ({\n  className,\n  wrapperClassName,\n  ...props\n}: EmojiPickerSearchProps) => (\n  <div\n    className={cn(\"p-2\", wrapperClassName)}\n    data-slot=\"emoji-picker-search-wrapper\"\n  >\n    <BaseEmojiPicker.Search\n      className={cn(\n        \"z-50 flex h-9 w-full min-w-0 rounded-md border border-input bg-input px-3 py-1 text-base shadow-xs transition-[color,box-shadow,border-color] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground hover:border-ring/70 disabled:pointer-events-none disabled:opacity-50 md:text-sm\",\n        \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n        \"aria-invalid:border-danger aria-invalid:ring-danger/50\",\n        className\n      )}\n      {...props}\n    />\n  </div>\n);\n","import type { ComponentProps } from \"react\";\n\nimport { EmojiPicker as BaseEmojiPicker } from \"frimousse\";\n\nexport type EmojiPickerSkinToneProps = ComponentProps<\n  typeof BaseEmojiPicker.SkinTone\n>;\n\nexport const EmojiPickerSkinTone = (props: EmojiPickerSkinToneProps) => (\n  <BaseEmojiPicker.SkinTone data-slot=\"emoji-picker-skin-tone\" {...props} />\n);\n","import type { ComponentProps } from \"react\";\n\nimport { EmojiPicker as BaseEmojiPicker } from \"frimousse\";\nimport { cn } from \"tailwind-variants\";\n\nexport type EmojiPickerSkinToneSelectorProps = ComponentProps<\n  typeof BaseEmojiPicker.SkinToneSelector\n>;\n\nexport const EmojiPickerSkinToneSelector = ({\n  className,\n  ...props\n}: EmojiPickerSkinToneSelectorProps) => (\n  <BaseEmojiPicker.SkinToneSelector\n    className={cn(\n      \"mx-2 mb-1.5 size-8 rounded-md bg-popover text-lg hover:bg-accent\",\n      className\n    )}\n    data-slot=\"emoji-picker-skin-tone-selector\"\n    {...props}\n  />\n);\n"],"mappings":";;;;;AAQA,MAAa,0BAA0B,UACrC,oBAACA,YAAgB;CACf,aAAU;CACV,GAAI;EACJ;;;;ACCJ,MAAa,iCAAiC,EAC5C,YAAY,0CACZ,GAAG,YAEH,oBAAC;CAAuB,GAAI;YACxB,EAAE,YACF,oBAAC;EACC,WAAW,GACT,4EACA,CAAC,SAAS,wBACX;EACD,aAAU;YAET,QACC,4CACE,oBAAC;GAAK,WAAU;aAAW,MAAM;IAAa,EAC9C,oBAAC,oBAAM,MAAM,QAAa,IACzB,GAEH,oBAAC,oBAAM,YAAiB;GAEtB;EAEe;;;;AC3B3B,MAAa,sBAAsB,EACjC,WACA,GAAG,YAEH,oBAACC,YAAgB;CACf,WAAW,GAAG,kCAAkC,UAAU;CAC1D,aAAU;CACV,GAAI;EACJ;;;;ACRJ,MAAa,oBAAoB,EAC/B,WACA,GAAG,YAEH,oBAACC,YAAgB;CACf,WAAW,GACT,mFACA,UACD;CACD,aAAU;CACV,GAAI;EACJ;;;;ACdJ,MAAa,iCAAiC,EAC5C,UACA,GAAG,gBAEH,oBAAC;CACC,WAAU;CACV,aAAU;CACV,GAAI;WAEH,SAAS;EACN;;;;ACVR,MAAa,wBAAwB,EACnC,OACA,GAAG,gBAEH,oBAAC;CACC,MAAK;CACL,WAAU;CACV,aAAU;CACV,GAAI;WAEH,MAAM;EACA;;;;ACbX,MAAa,sBAAsB,EACjC,UACA,GAAG,gBAEH,oBAAC;CACC,WAAU;CACV,aAAU;CACV,GAAI;CAEH;EACG;;;;ACHR,MAAa,mBAAmB,EAC9B,WACA,GAAG,YAEH,oBAACC,YAAgB;CACf,WAAW,GAAG,oBAAoB,UAAU;CAC5C,YAAY;EACV;EACA;EACA;EACD;CACD,aAAU;CACV,GAAI;EACJ;;;;ACfJ,MAAa,sBAAsB,EACjC,WACA,GAAG,YAEH,oBAACC,YAAgB;CACf,WAAW,GACT,mFACA,UACD;CACD,aAAU;CACV,GAAI;EACJ;;;;ACTJ,MAAa,qBAAqB,EAChC,WACA,kBACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,OAAO,iBAAiB;CACtC,aAAU;WAEV,oBAACC,YAAgB;EACf,WAAW,GACT,wUACA,iFACA,0DACA,UACD;EACD,GAAI;GACJ;EACE;;;;ACrBR,MAAa,uBAAuB,UAClC,oBAACC,YAAgB;CAAS,aAAU;CAAyB,GAAI;EAAS;;;;ACA5E,MAAa,+BAA+B,EAC1C,WACA,GAAG,YAEH,oBAACC,YAAgB;CACf,WAAW,GACT,oEACA,UACD;CACD,aAAU;CACV,GAAI;EACJ"}