@ayasofyazilim/ui 0.0.0 → 0.0.1

package/dist/custom/email-input/email.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/custom/email-input/email.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { cn } from \"@repo/ayasofyazilim-ui/lib/utils\";\r\nimport { Input } from \"@repo/ayasofyazilim-ui/components/input\";\r\nimport { Label } from \"@repo/ayasofyazilim-ui/components/label\";\r\nimport { Button } from \"@repo/ayasofyazilim-ui/components/button\";\r\nimport domains from \"./domains.json\";\r\n\r\ninterface EmailInputProps\r\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"type\"> {\r\n  label?: string;\r\n  suggestions?: string[];\r\n  onValueChange?: (value: string) => void;\r\n}\r\n\r\nconst EmailInput = React.forwardRef<HTMLInputElement, EmailInputProps>(\r\n  (\r\n    {\r\n      id,\r\n      className,\r\n      label,\r\n      suggestions = [],\r\n      onValueChange,\r\n      disabled,\r\n      required,\r\n      ...props\r\n    },\r\n    ref\r\n  ) => {\r\n    const allSuggestions = React.useMemo(() => {\r\n      const combined = [...domains, ...suggestions];\r\n      return combined.filter((item, index) => combined.indexOf(item) === index);\r\n    }, [suggestions]);\r\n\r\n    const [value, setValue] = React.useState(props.value?.toString() || \"\");\r\n    const [open, setOpen] = React.useState(false);\r\n    const [filteredSuggestions, setFilteredSuggestions] = React.useState<\r\n      string[]\r\n    >([]);\r\n    const [selectedIndex, setSelectedIndex] = React.useState(-1);\r\n\r\n    const inputRef = React.useRef<HTMLInputElement>(null);\r\n    const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n    React.useImperativeHandle(ref, () => inputRef.current!);\r\n\r\n    const updateSuggestions = React.useCallback(\r\n      (inputValue: string) => {\r\n        const atIndex = inputValue.lastIndexOf(\"@\");\r\n\r\n        if (atIndex === -1) {\r\n          setOpen(false);\r\n          setFilteredSuggestions([]);\r\n          setSelectedIndex(-1);\r\n          return;\r\n        }\r\n\r\n        const beforeAt = inputValue.substring(0, atIndex + 1);\r\n        const afterAt = inputValue.substring(atIndex + 1);\r\n\r\n        if (afterAt.length === 0) {\r\n          const topSuggestions = allSuggestions\r\n            .slice(0, 5)\r\n            .map((domain) => beforeAt + domain);\r\n          setFilteredSuggestions(topSuggestions);\r\n          setOpen(true);\r\n          setSelectedIndex(-1);\r\n        } else {\r\n          const filtered = allSuggestions\r\n            .filter((domain) =>\r\n              domain.toLowerCase().startsWith(afterAt.toLowerCase())\r\n            )\r\n            .map((domain) => beforeAt + domain);\r\n\r\n          if (filtered.length > 0) {\r\n            setFilteredSuggestions(filtered);\r\n            setOpen(true);\r\n            setSelectedIndex(-1);\r\n          } else {\r\n            setOpen(false);\r\n            setFilteredSuggestions([]);\r\n            setSelectedIndex(-1);\r\n          }\r\n        }\r\n      },\r\n      [allSuggestions]\r\n    );\r\n\r\n    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n      const newValue = e.target.value;\r\n      setValue(newValue);\r\n      onValueChange?.(newValue);\r\n      updateSuggestions(newValue);\r\n    };\r\n\r\n    const applySuggestion = (suggestion: string) => {\r\n      setValue(suggestion);\r\n      onValueChange?.(suggestion);\r\n      setOpen(false);\r\n      setSelectedIndex(-1);\r\n      inputRef.current?.focus();\r\n    };\r\n\r\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n      if (!open || filteredSuggestions.length === 0) {\r\n        if (e.key === \"Escape\") {\r\n          setOpen(false);\r\n        }\r\n        return;\r\n      }\r\n\r\n      switch (e.key) {\r\n        case \"ArrowDown\":\r\n          e.preventDefault();\r\n          setSelectedIndex((prev) =>\r\n            prev < filteredSuggestions.length - 1 ? prev + 1 : 0\r\n          );\r\n          break;\r\n        case \"ArrowUp\":\r\n          e.preventDefault();\r\n          setSelectedIndex((prev) =>\r\n            prev > 0 ? prev - 1 : filteredSuggestions.length - 1\r\n          );\r\n          break;\r\n        case \"Enter\":\r\n          e.preventDefault();\r\n          if (\r\n            selectedIndex >= 0 &&\r\n            selectedIndex < filteredSuggestions.length\r\n          ) {\r\n            applySuggestion(filteredSuggestions?.[selectedIndex] || \"\");\r\n          }\r\n          break;\r\n        case \"Escape\":\r\n          setOpen(false);\r\n          setSelectedIndex(-1);\r\n          break;\r\n        default:\r\n          setOpen(false);\r\n          break;\r\n      }\r\n    };\r\n\r\n    React.useEffect(() => {\r\n      const handleClickOutside = (event: MouseEvent) => {\r\n        if (\r\n          containerRef.current &&\r\n          !containerRef.current.contains(event.target as Node)\r\n        ) {\r\n          setOpen(false);\r\n          setSelectedIndex(-1);\r\n        }\r\n      };\r\n\r\n      document.addEventListener(\"mousedown\", handleClickOutside);\r\n      return () =>\r\n        document.removeEventListener(\"mousedown\", handleClickOutside);\r\n    }, []);\r\n\r\n    React.useEffect(() => {\r\n      if (props.value !== undefined) {\r\n        setValue(props.value.toString());\r\n      }\r\n    }, [props.value]);\r\n\r\n    return (\r\n      <div className=\"w-full\" ref={containerRef}>\r\n        {label && (\r\n          <Label\r\n            className={cn(\r\n              \"mb-2 block\",\r\n              required &&\r\n                \"after:content-['*'] after:ml-0.5 after:text-destructive\"\r\n            )}\r\n          >\r\n            {label}\r\n          </Label>\r\n        )}\r\n\r\n        <div className=\"relative\">\r\n          <Input\r\n            type=\"email\"\r\n            id={id}\r\n            data-testid={id}\r\n            className={className}\r\n            ref={inputRef}\r\n            value={value}\r\n            onChange={handleInputChange}\r\n            onKeyDown={handleKeyDown}\r\n            disabled={disabled}\r\n            required={required}\r\n            {...props}\r\n          />\r\n\r\n          {open && filteredSuggestions.length > 0 && (\r\n            <div className=\"absolute top-full left-0 right-0 z-999 mt-1 bg-popover border border-border rounded-md shadow-md\">\r\n              <div className=\"p-1 flex flex-col\">\r\n                {filteredSuggestions.map((suggestion, index) => (\r\n                  <Button\r\n                    variant=\"ghost\"\r\n                    data-testid={`${id}_suggestion_${index}`}\r\n                    key={suggestion}\r\n                    className={cn(\r\n                      \"w-full justify-start text-left px-2 py-1.5 text-sm cursor-pointer rounded-sm transition-colors gap-0\",\r\n                      \"hover:bg-accent hover:text-accent-foreground\",\r\n                      index === selectedIndex &&\r\n                        \"bg-accent text-accent-foreground\"\r\n                    )}\r\n                    onClick={() => applySuggestion(suggestion)}\r\n                  >\r\n                    <span>{suggestion.split(\"@\")[0]}</span>\r\n                    <span className=\"text-primary font-semibold\">\r\n                      @{suggestion.split(\"@\")[1]}\r\n                    </span>\r\n                  </Button>\r\n                ))}\r\n              </div>\r\n            </div>\r\n          )}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n);\r\n\r\nEmailInput.displayName = \"EmailInput\";\r\n\r\nexport { EmailInput };\r\n"],"mappings":"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","names":[]}

package/dist/custom/email-input/index.js

@@ -0,0 +1,8 @@
+import { default as default2 } from "./domains.json";
+import { EmailInput } from "./email";
+export * from "./types";
+export {
+  EmailInput,
+  default2 as domains
+};
+//# sourceMappingURL=index.js.map

package/dist/custom/email-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/custom/email-input/index.tsx"],"sourcesContent":["export { default as domains } from \"./domains.json\";\r\nexport { EmailInput } from \"./email\";\r\n\r\nexport * from \"./types\";\r\n"],"mappings":"AAAA,SAAoB,WAAXA,gBAA0B;AACnC,SAAS,kBAAkB;AAE3B,cAAc;","names":["default"]}

package/dist/custom/email-input/types.js

@@ -0,0 +1,13 @@
+var Elements = /* @__PURE__ */ ((Elements2) => {
+  Elements2["Domain"] = "domain";
+  Elements2["Dropdown"] = "dropdown";
+  Elements2["Input"] = "input";
+  Elements2["Suggestion"] = "suggestion";
+  Elements2["Username"] = "username";
+  Elements2["Wrapper"] = "wrapper";
+  return Elements2;
+})(Elements || {});
+export {
+  Elements
+};
+//# sourceMappingURL=types.js.map

package/dist/custom/email-input/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/custom/email-input/types.ts"],"sourcesContent":["import * as React from \"react\";\r\n\r\nexport type Maybe<T> = T | null;\r\n\r\nexport enum Elements {\r\n  Domain = \"domain\",\r\n  Dropdown = \"dropdown\",\r\n  Input = \"input\",\r\n  Suggestion = \"suggestion\",\r\n  Username = \"username\",\r\n  Wrapper = \"wrapper\",\r\n}\r\n\r\nexport type ClassNames = Partial<Record<Elements, string>>;\r\n\r\nexport type OnSelectData = {\r\n  value: string;\r\n  keyboard: boolean;\r\n  position: number;\r\n};\r\n\r\nexport type Values = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;\r\n\r\nexport type OnChange =\r\n  | React.Dispatch<React.SetStateAction<string>>\r\n  | ((newValue: string) => void | Promise<void>);\r\nexport type OnSelect = (object: OnSelectData) => void | Promise<void>;\r\n\r\nexport type Props = {\r\n  /** State or portion of state to hold the email. */\r\n  value: string | undefined;\r\n  /** State setter or custom dispatcher to update the email. */\r\n  onChange: OnChange;\r\n  /** Domains to suggest while typing the username. */\r\n  baseList: string[];\r\n  /** Domains to refine suggestions after typing @. */\r\n  refineList?: string[];\r\n  /** Custom callback to invoke on suggestion select. */\r\n  onSelect?: OnSelect;\r\n  /** Minimum chars required to display suggestions. */\r\n  minChars?: Values;\r\n  /** Maximum number of suggestions to display. */\r\n  maxResults?: Omit<Values, 1>;\r\n  /** Class names for each element. */\r\n  classNames?: ClassNames;\r\n  /** Class name of the wrapper element. */\r\n  className?: string;\r\n  /** Dropdown `aria-label` value */\r\n  dropdownAriaLabel?: string;\r\n  /** Value of the `data-` attribute to be set on the focuesed/hovered suggestion. Defaults to `data-active-email`. */\r\n  activeDataAttr?: `data-${string}`;\r\n  children?: React.ReactNode;\r\n  /** Dropdown placement.\r\n   *\r\n   * @deprecated Since version 1.0.0 dropdown is always placed below the input.\r\n   */\r\n  placement?: \"auto\" | \"bottom\";\r\n  /** Custom prefix for dropdown unique ID.\r\n   *\r\n   * @deprecated Since version 1.2.0 it is generated automatically.\r\n   */\r\n  customPrefix?: string;\r\n  /** DOM ID of the wrapper element.\r\n   *\r\n   * @deprecated Since version 1.2.0\r\n   */\r\n  wrapperId?: string;\r\n  /** Input field validity state for assistive technologies.\r\n   *\r\n   * @deprecated Since version 1.2.0. Use `aria-invalid` instead.\r\n   */\r\n  isInvalid?: boolean;\r\n\r\n  autoComplete?: string;\r\n};\r\n\r\nexport type Events = {\r\n  onFocus?: React.FocusEventHandler<HTMLInputElement>;\r\n  onBlur?: React.FocusEventHandler<HTMLInputElement>;\r\n  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\r\n  onInput?: React.FormEventHandler<HTMLInputElement>;\r\n};\r\n\r\nexport type InternalInputProps =\r\n  | \"ref\"\r\n  | \"aria-expanded\"\r\n  | \"type\"\r\n  | \"role\"\r\n  | \"autoComplete\"\r\n  | \"aria-autocomplete\"\r\n  | \"aria-controls\";\r\n\r\nexport type EmailProps = Props &\r\n  Events &\r\n  Partial<\r\n    Omit<\r\n      React.HTMLProps<HTMLInputElement>,\r\n      keyof Props | keyof Events | InternalInputProps\r\n    >\r\n  >;\r\n\r\nexport type LocalizedList = {\r\n  default: string[];\r\n} & Record<string, string[]>;\r\n"],"mappings":"AAIO,IAAK,WAAL,kBAAKA,cAAL;AACL,EAAAA,UAAA,YAAS;AACT,EAAAA,UAAA,cAAW;AACX,EAAAA,UAAA,WAAQ;AACR,EAAAA,UAAA,gBAAa;AACb,EAAAA,UAAA,cAAW;AACX,EAAAA,UAAA,aAAU;AANA,SAAAA;AAAA,GAAA;","names":["Elements"]}

package/dist/custom/file-uploader.js

@@ -0,0 +1,389 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FileText, Folder, FolderOpen, Upload, X } from "lucide-react";
+import * as React from "react";
+import Dropzone from "react-dropzone";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+} from "@repo/ayasofyazilim-ui/components/avatar";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "@repo/ayasofyazilim-ui/components/collapsible";
+import { Progress } from "@repo/ayasofyazilim-ui/components/progress";
+import { ScrollArea } from "@repo/ayasofyazilim-ui/components/scroll-area";
+import { cn, formatBytes } from "@repo/ayasofyazilim-ui/lib/utils";
+import { useControllableState } from "../hooks/use-controllable-state";
+import { toast } from "sonner";
+function FileUploader(props) {
+  const {
+    value: valueProp,
+    onValueChange,
+    onUpload,
+    progresses,
+    accept = {
+      "image/*": []
+    },
+    maxSize = 1024 * 1024 * 2,
+    maxFileCount = 1,
+    multiple = false,
+    disabled = false,
+    classNames,
+    showFileList = true,
+    label,
+    description,
+    fileCardRenderer
+  } = props;
+  const [files, setFiles] = useControllableState({
+    prop: valueProp,
+    onChange: onValueChange
+  });
+  const onDrop = React.useCallback(
+    (acceptedFiles, rejectedFiles) => {
+      if (!multiple && maxFileCount === 1 && acceptedFiles.length > 1) {
+        toast.error("Cannot upload more than 1 file at a time");
+        return;
+      }
+      if ((files?.length ?? 0) + acceptedFiles.length > maxFileCount) {
+        toast.error(`Cannot upload more than ${maxFileCount} files`);
+        return;
+      }
+      const newFiles = acceptedFiles.map(
+        (file) => Object.assign(file, {
+          preview: URL.createObjectURL(file)
+        })
+      );
+      if (newFiles.length > 0 && !isOpen) setIsOpen(true);
+      const updatedFiles = files ? [...files, ...newFiles] : newFiles;
+      setFiles(updatedFiles);
+      if (rejectedFiles.length > 0) {
+        rejectedFiles.forEach(({ file, errors }) => {
+          toast.error(
+            `File ${file.name} was rejected because of ${errors.map((error) => error.message).join(", ")}`
+          );
+        });
+      }
+      if (onUpload && updatedFiles.length > 0 && updatedFiles.length <= maxFileCount) {
+        const target = updatedFiles.length > 0 ? `${updatedFiles.length} files` : `file`;
+        toast.promise(onUpload(updatedFiles), {
+          loading: `Uploading ${target}...`,
+          success: () => {
+            setFiles([]);
+            return `${target} uploaded`;
+          },
+          error: `Failed to upload ${target}`
+        });
+      }
+    },
+    [files, maxFileCount, multiple, onUpload, setFiles]
+  );
+  function onRemove(index) {
+    if (!files) return;
+    const newFiles = files.filter((_, i) => i !== index);
+    setFiles(newFiles);
+    if (newFiles.length === 0) setIsOpen(false);
+    onValueChange?.(newFiles);
+  }
+  React.useEffect(
+    () => () => {
+      if (!files) return;
+      files.forEach((file) => {
+        if (isFileWithPreview(file)) {
+          URL.revokeObjectURL(file.preview);
+        }
+      });
+    },
+    []
+  );
+  const isDisabled = disabled || (files?.length ?? 0) >= maxFileCount;
+  const [isOpen, setIsOpen] = React.useState(false);
+  return /* @__PURE__ */ jsxs(
+    Collapsible,
+    {
+      onOpenChange: setIsOpen,
+      open: isOpen,
+      className: cn(
+        "transition-all flex flex-col w-full border rounded-lg [&>h3]:w-full",
+        classNames?.collapsible
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              " gap-4 p-4",
+              props.variant === "button" ? "flex flex-col sm:flex-row" : "grid grid-cols-12",
+              classNames?.container
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                CollapsibleTrigger,
+                {
+                  className: cn(
+                    "gap-4 group/trigger hover:no-underline",
+                    !files?.length && "opacity-50"
+                  ),
+                  asChild: true,
+                  children: /* @__PURE__ */ jsxs(
+                    Button,
+                    {
+                      variant: "outline",
+                      className: "gap-2",
+                      disabled: isDisabled || !files?.length,
+                      children: [
+                        /* @__PURE__ */ jsx(FolderOpen, { className: "w-4 group-data-[state=open]/trigger:hidden" }),
+                        /* @__PURE__ */ jsx(Folder, { className: "w-4 group-data-[state=closed]/trigger:hidden" }),
+                        "Files"
+                      ]
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Dropzone,
+                {
+                  onDrop,
+                  accept,
+                  maxSize,
+                  maxFiles: maxFileCount,
+                  multiple: maxFileCount > 1 || multiple,
+                  disabled: isDisabled,
+                  noDrag: props.variant === "button",
+                  children: (dropzone) => /* @__PURE__ */ jsx(DropzoneTrigger, { ...dropzone, ...props, isDisabled })
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: cn("flex w-full", classNames?.header), children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full text-nowrap justify-center", children: [
+                  label && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: label }),
+                  description && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: description })
+                ] }),
+                props.variant === "button" && props.headerChildren && props.headerChildren
+              ] })
+            ]
+          }
+        ),
+        props.children && props.children,
+        /* @__PURE__ */ jsx(
+          CollapsibleContent,
+          {
+            className: cn("w-full p-0 h-max", classNames?.collapsibleContent),
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "group relative flex flex-col gap-4 overflow-hidden",
+                  files?.length && props.variant === "button" && "",
+                  files?.length && files?.length > 0 && "p-4 border-t",
+                  classNames?.container
+                ),
+                children: files?.length && showFileList !== false ? /* @__PURE__ */ jsx(ScrollArea, { className: "h-fit w-full", children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "grid max-h-48 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 flex-col gap-4",
+                      files.length === 1 && "grid-cols-1!",
+                      files.length === 2 && "sm:grid-cols-2!",
+                      files.length === 3 && "lg:grid-cols-3!",
+                      files.length === 4 && "2xl:grid-cols-4!",
+                      classNames?.fileList
+                    ),
+                    children: files?.map((file, index) => /* @__PURE__ */ jsx(
+                      React.Fragment,
+                      {
+                        children: fileCardRenderer ? fileCardRenderer({
+                          file,
+                          index,
+                          onRemove: () => onRemove(index)
+                        }) : /* @__PURE__ */ jsx(
+                          FileCard,
+                          {
+                            file,
+                            onRemove: () => onRemove(index),
+                            progress: progresses?.[file.name]
+                          }
+                        )
+                      },
+                      file.name + file.lastModified + file.path
+                    ))
+                  }
+                ) }) : null
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function FileCard({
+  file,
+  progress,
+  onRemove,
+  disabled,
+  classNames
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "bg-muted relative flex items-center gap-2.5 overflow-hidden rounded-md p-2",
+        classNames?.container
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 gap-2.5", children: [
+          isFileWithPreview(file) ? /* @__PURE__ */ jsx(FilePreview, { file }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-px overflow-hidden", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-foreground/80 line-clamp-1 text-sm font-medium max-w-60 text-ellipsis", children: file.name }),
+              /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: formatBytes(file.size) })
+            ] }),
+            progress ? /* @__PURE__ */ jsx(Progress, { value: progress, className: "duration-1000" }) : null
+          ] })
+        ] }),
+        onRemove && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            size: "icon",
+            className: cn("size-7", classNames?.removeButton),
+            disabled: !!progress || disabled,
+            onClick: onRemove,
+            children: [
+              /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Remove file" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+function isFileWithPreview(file) {
+  return "preview" in file && typeof file.preview === "string";
+}
+function FilePreview({ file }) {
+  if (file.type.startsWith("image/")) {
+    return /* @__PURE__ */ jsxs(Avatar, { className: "rounded-md border", children: [
+      /* @__PURE__ */ jsx(
+        AvatarImage,
+        {
+          className: "rounded-md",
+          src: file.preview,
+          alt: file.name,
+          loading: "lazy"
+        }
+      ),
+      /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-white rounded-md text-xs", children: `.${file.name.split(".")[1]}` })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(FileText, { className: "text-muted-foreground size-10", "aria-hidden": "true" });
+}
+function DropzoneTrigger(props) {
+  const {
+    classNames,
+    variant,
+    getRootProps,
+    getInputProps,
+    isDragActive = true,
+    maxFileCount = 1,
+    maxSize = 1024 * 1024 * 2,
+    isDisabled
+    // ...dropzoneProps
+  } = props;
+  if (variant === "button") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex flex-col sm:flex-row gap-4",
+          classNames?.dropzoneContainer
+        ),
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...getRootProps(),
+            className: cn(
+              "relative flex items-center gap-4 rounded-lg",
+              classNames?.dropzone
+            ),
+            children: [
+              /* @__PURE__ */ jsx("input", { ...getInputProps() }),
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  type: "button",
+                  variant: "outline",
+                  className: "min-h-9 gap-2 w-full sm:max-w-max",
+                  disabled: isDisabled,
+                  children: [
+                    /* @__PURE__ */ jsx(Upload, { className: "size-4", "aria-hidden": "true" }),
+                    "Select"
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...getRootProps(),
+      className: cn(
+        "border-muted-foreground/25 hover:bg-muted/25 group relative grid h-52 w-full cursor-pointer place-items-center rounded-lg border-2 border-dashed px-5 py-2.5 text-center transition",
+        "ring-offset-background focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+        isDragActive && "border-muted-foreground/50",
+        isDisabled && "pointer-events-none opacity-60",
+        variant === "dropzone" && "col-span-full row-start-2",
+        classNames?.dropzone
+      ),
+      children: [
+        /* @__PURE__ */ jsx("input", { ...getInputProps() }),
+        isDragActive ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-4 sm:px-5", children: [
+          /* @__PURE__ */ jsx("div", { className: "rounded-full border border-dashed p-3", children: /* @__PURE__ */ jsx(
+            Upload,
+            {
+              className: "text-muted-foreground size-7",
+              "aria-hidden": "true"
+            }
+          ) }),
+          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground font-medium", children: "Drop the files here" })
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-4 sm:px-5", children: [
+          /* @__PURE__ */ jsx("div", { className: "rounded-full border border-dashed p-3", children: /* @__PURE__ */ jsx(
+            Upload,
+            {
+              className: "text-muted-foreground size-7",
+              "aria-hidden": "true"
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-px", children: [
+            /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground font-medium", children: [
+              "Drag",
+              `'n'`,
+              " drop files here, or click to select files"
+            ] }),
+            /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground/70 text-sm", children: [
+              "You can upload",
+              maxFileCount > 1 ? ` ${maxFileCount === Infinity ? "multiple" : maxFileCount}
+                      files (up to ${formatBytes(maxSize)} each)` : ` a file with ${formatBytes(maxSize)}`
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  FileCard,
+  FilePreview,
+  FileUploader,
+  isFileWithPreview
+};
+//# sourceMappingURL=file-uploader.js.map

package/dist/custom/file-uploader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/custom/file-uploader.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { FileText, Folder, FolderOpen, Upload, X } from \"lucide-react\";\r\nimport * as React from \"react\";\r\nimport Dropzone, {\r\n  FileWithPath as DefaultFileWithPath,\r\n  DropzoneState,\r\n  type DropzoneProps,\r\n  type FileRejection,\r\n} from \"react-dropzone\";\r\nimport {\r\n  Avatar,\r\n  AvatarFallback,\r\n  AvatarImage,\r\n} from \"@repo/ayasofyazilim-ui/components/avatar\";\r\nimport { Button } from \"@repo/ayasofyazilim-ui/components/button\";\r\nimport {\r\n  Collapsible,\r\n  CollapsibleContent,\r\n  CollapsibleTrigger,\r\n} from \"@repo/ayasofyazilim-ui/components/collapsible\";\r\nimport { Progress } from \"@repo/ayasofyazilim-ui/components/progress\";\r\nimport { ScrollArea } from \"@repo/ayasofyazilim-ui/components/scroll-area\";\r\nimport { cn, formatBytes } from \"@repo/ayasofyazilim-ui/lib/utils\";\r\nimport { useControllableState } from \"../hooks/use-controllable-state\";\r\nimport { toast } from \"sonner\";\r\n\r\nexport type FileWithPath = DefaultFileWithPath;\r\nexport type BaseFileUploaderProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  /**\r\n   * Value of the uploader.\r\n   * @type File[]\r\n   * @default undefined\r\n   * @example value={files}\r\n   */\r\n  value?: DefaultFileWithPath[];\r\n\r\n  /**\r\n   * Function to be called when the value changes.\r\n   * @type (files: File[]) => void\r\n   * @default undefined\r\n   * @example onValueChange={(files) => setFiles(files)}\r\n   */\r\n  onValueChange?: (files: DefaultFileWithPath[]) => void;\r\n\r\n  /**\r\n   * Function to be called when files are uploaded.\r\n   * @type (files: File[]) => Promise<void>\r\n   * @default undefined\r\n   * @example onUpload={(files) => uploadFiles(files)}\r\n   */\r\n  onUpload?: (files: File[]) => Promise<void>;\r\n\r\n  /**\r\n   * Progress of the uploaded files.\r\n   * @type Record<string, number> | undefined\r\n   * @default undefined\r\n   * @example progresses={{ \"file1.png\": 50 }}\r\n   */\r\n  progresses?: Record<string, number>;\r\n\r\n  /**\r\n   * Accepted file types for the uploader.\r\n   * @type { [key: string]: string[]}\r\n   * @default\r\n   * ```ts\r\n   * { \"image/*\": [] }\r\n   * ```\r\n   * @example accept={[\"image/png\", \"image/jpeg\"]}\r\n   */\r\n  accept?: DropzoneProps[\"accept\"];\r\n\r\n  /**\r\n   * Maximum file size for the uploader.\r\n   * @type number | undefined\r\n   * @default 1024 * 1024 * 2 // 2MB\r\n   * @example maxSize={1024 * 1024 * 2} // 2MB\r\n   */\r\n  maxSize?: DropzoneProps[\"maxSize\"];\r\n\r\n  /**\r\n   * Maximum number of files for the uploader.\r\n   * @type number | undefined\r\n   * @default 1\r\n   * @example maxFileCount={4}\r\n   */\r\n  maxFileCount?: DropzoneProps[\"maxFiles\"];\r\n\r\n  /**\r\n   * Whether the uploader should accept multiple files.\r\n   * @type boolean\r\n   * @default false\r\n   * @example multiple\r\n   */\r\n  multiple?: boolean;\r\n\r\n  /**\r\n   * Whether the uploader is disabled.\r\n   * @type boolean\r\n   * @default false\r\n   * @example disabled\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Whether the uploader has drag and drop functionality.\r\n   * @type boolean\r\n   * @default false\r\n   * @example noDrag\r\n   */\r\n  label?: string | React.ReactNode;\r\n  description?: string | React.ReactNode;\r\n  classNames?: {\r\n    container?: string;\r\n    collapsible?: string;\r\n    dropzoneContainer?: string;\r\n    dropzone?: string;\r\n    fileList?: string;\r\n    header?: string;\r\n    collapsibleContent?: string;\r\n  };\r\n  showFileList?: boolean;\r\n  fileCardRenderer?: (props: FileCardProps) => React.ReactNode;\r\n} & (ButtonFileUploaderProps | DropzoneFileUploaderProps);\r\n\r\ntype ButtonFileUploaderProps = {\r\n  variant: \"button\";\r\n  children?: React.ReactNode;\r\n  headerChildren?: React.ReactNode;\r\n};\r\ntype DropzoneFileUploaderProps = {\r\n  variant: \"dropzone\";\r\n};\r\nexport function FileUploader(props: BaseFileUploaderProps) {\r\n  const {\r\n    value: valueProp,\r\n    onValueChange,\r\n    onUpload,\r\n    progresses,\r\n    accept = {\r\n      \"image/*\": [],\r\n    },\r\n    maxSize = 1024 * 1024 * 2,\r\n    maxFileCount = 1,\r\n    multiple = false,\r\n    disabled = false,\r\n    classNames,\r\n    showFileList = true,\r\n    label,\r\n    description,\r\n    fileCardRenderer,\r\n  } = props;\r\n\r\n  const [files, setFiles] = useControllableState({\r\n    prop: valueProp,\r\n    onChange: onValueChange,\r\n  });\r\n\r\n  const onDrop = React.useCallback(\r\n    (acceptedFiles: File[], rejectedFiles: FileRejection[]) => {\r\n      if (!multiple && maxFileCount === 1 && acceptedFiles.length > 1) {\r\n        toast.error(\"Cannot upload more than 1 file at a time\");\r\n        return;\r\n      }\r\n\r\n      if ((files?.length ?? 0) + acceptedFiles.length > maxFileCount) {\r\n        toast.error(`Cannot upload more than ${maxFileCount} files`);\r\n        return;\r\n      }\r\n\r\n      const newFiles = acceptedFiles.map((file) =>\r\n        Object.assign(file, {\r\n          preview: URL.createObjectURL(file),\r\n        }),\r\n      );\r\n      if (newFiles.length > 0 && !isOpen) setIsOpen(true);\r\n      const updatedFiles = files ? [...files, ...newFiles] : newFiles;\r\n\r\n      setFiles(updatedFiles);\r\n\r\n      if (rejectedFiles.length > 0) {\r\n        rejectedFiles.forEach(({ file, errors }) => {\r\n          toast.error(\r\n            `File ${file.name} was rejected because of ${errors.map((error) => error.message).join(\", \")}`,\r\n          );\r\n        });\r\n      }\r\n\r\n      if (\r\n        onUpload &&\r\n        updatedFiles.length > 0 &&\r\n        updatedFiles.length <= maxFileCount\r\n      ) {\r\n        const target =\r\n          updatedFiles.length > 0 ? `${updatedFiles.length} files` : `file`;\r\n\r\n        toast.promise(onUpload(updatedFiles), {\r\n          loading: `Uploading ${target}...`,\r\n          success: () => {\r\n            setFiles([]);\r\n            return `${target} uploaded`;\r\n          },\r\n          error: `Failed to upload ${target}`,\r\n        });\r\n      }\r\n    },\r\n\r\n    [files, maxFileCount, multiple, onUpload, setFiles],\r\n  );\r\n\r\n  function onRemove(index: number) {\r\n    if (!files) return;\r\n    const newFiles = files.filter((_, i) => i !== index);\r\n    setFiles(newFiles);\r\n    if (newFiles.length === 0) setIsOpen(false);\r\n    onValueChange?.(newFiles);\r\n  }\r\n\r\n  // Revoke preview url when component unmounts\r\n  React.useEffect(\r\n    () => () => {\r\n      if (!files) return;\r\n      files.forEach((file) => {\r\n        if (isFileWithPreview(file)) {\r\n          URL.revokeObjectURL(file.preview);\r\n        }\r\n      });\r\n    },\r\n    [],\r\n  );\r\n\r\n  const isDisabled = disabled || (files?.length ?? 0) >= maxFileCount;\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n  return (\r\n    <Collapsible\r\n      onOpenChange={setIsOpen}\r\n      open={isOpen}\r\n      className={cn(\r\n        \"transition-all flex flex-col w-full border rounded-lg [&>h3]:w-full\",\r\n        classNames?.collapsible,\r\n      )}\r\n    >\r\n      <div\r\n        className={cn(\r\n          \" gap-4 p-4\",\r\n          props.variant === \"button\"\r\n            ? \"flex flex-col sm:flex-row\"\r\n            : \"grid grid-cols-12\",\r\n          classNames?.container,\r\n        )}\r\n      >\r\n        <CollapsibleTrigger\r\n          className={cn(\r\n            \"gap-4 group/trigger hover:no-underline\",\r\n            !files?.length && \"opacity-50\",\r\n          )}\r\n          asChild\r\n        >\r\n          <Button\r\n            variant=\"outline\"\r\n            className=\"gap-2\"\r\n            disabled={isDisabled || !files?.length}\r\n          >\r\n            <FolderOpen className=\"w-4 group-data-[state=open]/trigger:hidden\" />\r\n            <Folder className=\"w-4 group-data-[state=closed]/trigger:hidden\" />\r\n            Files\r\n          </Button>\r\n        </CollapsibleTrigger>\r\n        <Dropzone\r\n          onDrop={onDrop}\r\n          accept={accept}\r\n          maxSize={maxSize}\r\n          maxFiles={maxFileCount}\r\n          multiple={maxFileCount > 1 || multiple}\r\n          disabled={isDisabled}\r\n          noDrag={props.variant === \"button\"}\r\n        >\r\n          {(dropzone) => (\r\n            <DropzoneTrigger {...dropzone} {...props} isDisabled={isDisabled} />\r\n          )}\r\n        </Dropzone>\r\n        <div className={cn(\"flex w-full\", classNames?.header)}>\r\n          <div className=\"flex flex-col w-full text-nowrap justify-center\">\r\n            {label && (\r\n              <span className=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\r\n                {label}\r\n              </span>\r\n            )}\r\n            {description && (\r\n              <span className=\"text-muted-foreground text-sm\">\r\n                {description}\r\n              </span>\r\n            )}\r\n          </div>\r\n          {props.variant === \"button\" &&\r\n            props.headerChildren &&\r\n            props.headerChildren}\r\n        </div>\r\n      </div>\r\n      {props.children && props.children}\r\n      <CollapsibleContent\r\n        className={cn(\"w-full p-0 h-max\", classNames?.collapsibleContent)}\r\n      >\r\n        <div\r\n          className={cn(\r\n            \"group relative flex flex-col gap-4 overflow-hidden\",\r\n            files?.length && props.variant === \"button\" && \"\",\r\n            files?.length && files?.length > 0 && \"p-4 border-t\",\r\n            classNames?.container,\r\n          )}\r\n        >\r\n          {files?.length && showFileList !== false ? (\r\n            <ScrollArea className=\"h-fit w-full\">\r\n              <div\r\n                className={cn(\r\n                  \"grid max-h-48 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 flex-col gap-4\",\r\n                  files.length === 1 && \"grid-cols-1!\",\r\n                  files.length === 2 && \"sm:grid-cols-2!\",\r\n                  files.length === 3 && \"lg:grid-cols-3!\",\r\n                  files.length === 4 && \"2xl:grid-cols-4!\",\r\n                  classNames?.fileList,\r\n                )}\r\n              >\r\n                {files?.map((file, index) => (\r\n                  <React.Fragment\r\n                    key={file.name + file.lastModified + file.path}\r\n                  >\r\n                    {fileCardRenderer ? (\r\n                      fileCardRenderer({\r\n                        file,\r\n                        index,\r\n                        onRemove: () => onRemove(index),\r\n                      })\r\n                    ) : (\r\n                      <FileCard\r\n                        file={file}\r\n                        onRemove={() => onRemove(index)}\r\n                        progress={progresses?.[file.name]}\r\n                      />\r\n                    )}\r\n                  </React.Fragment>\r\n                ))}\r\n              </div>\r\n            </ScrollArea>\r\n          ) : null}\r\n        </div>\r\n      </CollapsibleContent>\r\n    </Collapsible>\r\n  );\r\n}\r\n\r\nexport interface FileCardProps {\r\n  index: number;\r\n  file: DefaultFileWithPath;\r\n  onRemove?: () => void;\r\n  disabled?: boolean;\r\n  progress?: number;\r\n  classNames?: {\r\n    container?: string;\r\n    removeButton?: string;\r\n  };\r\n}\r\n\r\nexport function FileCard({\r\n  file,\r\n  progress,\r\n  onRemove,\r\n  disabled,\r\n  classNames,\r\n}: Omit<FileCardProps, \"index\">) {\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"bg-muted relative flex items-center gap-2.5 overflow-hidden rounded-md p-2\",\r\n        classNames?.container,\r\n      )}\r\n    >\r\n      <div className=\"flex flex-1 gap-2.5\">\r\n        {isFileWithPreview(file) ? <FilePreview file={file} /> : null}\r\n        <div className=\"flex w-full flex-col gap-2\">\r\n          <div className=\"flex flex-col gap-px overflow-hidden\">\r\n            <p className=\"text-foreground/80 line-clamp-1 text-sm font-medium max-w-60 text-ellipsis\">\r\n              {file.name}\r\n            </p>\r\n            <p className=\"text-muted-foreground text-xs\">\r\n              {formatBytes(file.size)}\r\n            </p>\r\n          </div>\r\n          {progress ? (\r\n            <Progress value={progress} className=\"duration-1000\" />\r\n          ) : null}\r\n        </div>\r\n      </div>\r\n      {onRemove && (\r\n        <div className=\"flex items-center gap-2\">\r\n          <Button\r\n            type=\"button\"\r\n            variant=\"outline\"\r\n            size=\"icon\"\r\n            className={cn(\"size-7\", classNames?.removeButton)}\r\n            disabled={!!progress || disabled}\r\n            onClick={onRemove}\r\n          >\r\n            <X className=\"size-4\" aria-hidden=\"true\" />\r\n            <span className=\"sr-only\">Remove file</span>\r\n          </Button>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport function isFileWithPreview(\r\n  file: FileWithPath,\r\n): file is FileWithPath & { preview: string } {\r\n  return \"preview\" in file && typeof file.preview === \"string\";\r\n}\r\n\r\nexport interface FilePreviewProps {\r\n  file: FileWithPath & { preview: string };\r\n}\r\n\r\nexport function FilePreview({ file }: FilePreviewProps) {\r\n  if (file.type.startsWith(\"image/\")) {\r\n    return (\r\n      <Avatar className=\"rounded-md border\">\r\n        <AvatarImage\r\n          className=\"rounded-md\"\r\n          src={file.preview}\r\n          alt={file.name}\r\n          loading=\"lazy\"\r\n        />\r\n        <AvatarFallback className=\"bg-white rounded-md text-xs\">\r\n          {`.${file.name.split(\".\")[1]}`}\r\n        </AvatarFallback>\r\n      </Avatar>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <FileText className=\"text-muted-foreground size-10\" aria-hidden=\"true\" />\r\n  );\r\n}\r\n\r\ntype DropzoneTriggerProps = DropzoneState &\r\n  BaseFileUploaderProps & {\r\n    isDisabled?: boolean;\r\n  };\r\nfunction DropzoneTrigger(props: DropzoneTriggerProps) {\r\n  const {\r\n    classNames,\r\n    variant,\r\n    getRootProps,\r\n    getInputProps,\r\n    isDragActive = true,\r\n    maxFileCount = 1,\r\n    maxSize = 1024 * 1024 * 2,\r\n    isDisabled,\r\n    // ...dropzoneProps\r\n  } = props;\r\n  if (variant === \"button\") {\r\n    return (\r\n      <div\r\n        className={cn(\r\n          \"flex flex-col sm:flex-row gap-4\",\r\n          classNames?.dropzoneContainer,\r\n        )}\r\n      >\r\n        <div\r\n          {...getRootProps()}\r\n          // {...dropzoneProps}\r\n          className={cn(\r\n            \"relative flex items-center gap-4 rounded-lg\",\r\n            classNames?.dropzone,\r\n          )}\r\n        >\r\n          <input {...getInputProps()} />\r\n          <Button\r\n            type=\"button\"\r\n            variant=\"outline\"\r\n            className=\"min-h-9 gap-2 w-full sm:max-w-max\"\r\n            disabled={isDisabled}\r\n          >\r\n            <Upload className=\"size-4\" aria-hidden=\"true\" />\r\n            Select\r\n          </Button>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n  return (\r\n    <div\r\n      {...getRootProps()}\r\n      // {...dropzoneProps}\r\n      className={cn(\r\n        \"border-muted-foreground/25 hover:bg-muted/25 group relative grid h-52 w-full cursor-pointer place-items-center rounded-lg border-2 border-dashed px-5 py-2.5 text-center transition\",\r\n        \"ring-offset-background focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2\",\r\n        isDragActive && \"border-muted-foreground/50\",\r\n        isDisabled && \"pointer-events-none opacity-60\",\r\n        variant === \"dropzone\" && \"col-span-full row-start-2\",\r\n        classNames?.dropzone,\r\n      )}\r\n    >\r\n      <input {...getInputProps()} />\r\n      {isDragActive ? (\r\n        <div className=\"flex flex-col items-center justify-center gap-4 sm:px-5\">\r\n          <div className=\"rounded-full border border-dashed p-3\">\r\n            <Upload\r\n              className=\"text-muted-foreground size-7\"\r\n              aria-hidden=\"true\"\r\n            />\r\n          </div>\r\n          <p className=\"text-muted-foreground font-medium\">\r\n            Drop the files here\r\n          </p>\r\n        </div>\r\n      ) : (\r\n        <div className=\"flex flex-col items-center justify-center gap-4 sm:px-5\">\r\n          <div className=\"rounded-full border border-dashed p-3\">\r\n            <Upload\r\n              className=\"text-muted-foreground size-7\"\r\n              aria-hidden=\"true\"\r\n            />\r\n          </div>\r\n          <div className=\"flex flex-col gap-px\">\r\n            <p className=\"text-muted-foreground font-medium\">\r\n              Drag{`'n'`} drop files here, or click to select files\r\n            </p>\r\n            <p className=\"text-muted-foreground/70 text-sm\">\r\n              You can upload\r\n              {maxFileCount > 1\r\n                ? ` ${maxFileCount === Infinity ? \"multiple\" : maxFileCount}\r\n                      files (up to ${formatBytes(maxSize)} each)`\r\n                : ` a file with ${formatBytes(maxSize)}`}\r\n            </p>\r\n          </div>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":";AAkQU,SAKE,KALF;AAhQV,SAAS,UAAU,QAAQ,YAAY,QAAQ,SAAS;AACxD,YAAY,WAAW;AACvB,OAAO,cAKA;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,IAAI,mBAAmB;AAChC,SAAS,4BAA4B;AACrC,SAAS,aAAa;AA4Gf,SAAS,aAAa,OAA8B;AACzD,QAAM;AAAA,IACJ,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,MACP,WAAW,CAAC;AAAA,IACd;AAAA,IACA,UAAU,OAAO,OAAO;AAAA,IACxB,eAAe;AAAA,IACf,WAAW;AAAA,IACX,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,CAAC,OAAO,QAAQ,IAAI,qBAAqB;AAAA,IAC7C,MAAM;AAAA,IACN,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,SAAS,MAAM;AAAA,IACnB,CAAC,eAAuB,kBAAmC;AACzD,UAAI,CAAC,YAAY,iBAAiB,KAAK,cAAc,SAAS,GAAG;AAC/D,cAAM,MAAM,0CAA0C;AACtD;AAAA,MACF;AAEA,WAAK,OAAO,UAAU,KAAK,cAAc,SAAS,cAAc;AAC9D,cAAM,MAAM,2BAA2B,YAAY,QAAQ;AAC3D;AAAA,MACF;AAEA,YAAM,WAAW,cAAc;AAAA,QAAI,CAAC,SAClC,OAAO,OAAO,MAAM;AAAA,UAClB,SAAS,IAAI,gBAAgB,IAAI;AAAA,QACnC,CAAC;AAAA,MACH;AACA,UAAI,SAAS,SAAS,KAAK,CAAC,OAAQ,WAAU,IAAI;AAClD,YAAM,eAAe,QAAQ,CAAC,GAAG,OAAO,GAAG,QAAQ,IAAI;AAEvD,eAAS,YAAY;AAErB,UAAI,cAAc,SAAS,GAAG;AAC5B,sBAAc,QAAQ,CAAC,EAAE,MAAM,OAAO,MAAM;AAC1C,gBAAM;AAAA,YACJ,QAAQ,KAAK,IAAI,4BAA4B,OAAO,IAAI,CAAC,UAAU,MAAM,OAAO,EAAE,KAAK,IAAI,CAAC;AAAA,UAC9F;AAAA,QACF,CAAC;AAAA,MACH;AAEA,UACE,YACA,aAAa,SAAS,KACtB,aAAa,UAAU,cACvB;AACA,cAAM,SACJ,aAAa,SAAS,IAAI,GAAG,aAAa,MAAM,WAAW;AAE7D,cAAM,QAAQ,SAAS,YAAY,GAAG;AAAA,UACpC,SAAS,aAAa,MAAM;AAAA,UAC5B,SAAS,MAAM;AACb,qBAAS,CAAC,CAAC;AACX,mBAAO,GAAG,MAAM;AAAA,UAClB;AAAA,UACA,OAAO,oBAAoB,MAAM;AAAA,QACnC,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IAEA,CAAC,OAAO,cAAc,UAAU,UAAU,QAAQ;AAAA,EACpD;AAEA,WAAS,SAAS,OAAe;AAC/B,QAAI,CAAC,MAAO;AACZ,UAAM,WAAW,MAAM,OAAO,CAAC,GAAG,MAAM,MAAM,KAAK;AACnD,aAAS,QAAQ;AACjB,QAAI,SAAS,WAAW,EAAG,WAAU,KAAK;AAC1C,oBAAgB,QAAQ;AAAA,EAC1B;AAGA,QAAM;AAAA,IACJ,MAAM,MAAM;AACV,UAAI,CAAC,MAAO;AACZ,YAAM,QAAQ,CAAC,SAAS;AACtB,YAAI,kBAAkB,IAAI,GAAG;AAC3B,cAAI,gBAAgB,KAAK,OAAO;AAAA,QAClC;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,aAAa,aAAa,OAAO,UAAU,MAAM;AACvD,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,KAAK;AAChD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAc;AAAA,MACd,MAAM;AAAA,MACN,WAAW;AAAA,QACT;AAAA,QACA,YAAY;AAAA,MACd;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,MAAM,YAAY,WACd,8BACA;AAAA,cACJ,YAAY;AAAA,YACd;AAAA,YAEA;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAW;AAAA,oBACT;AAAA,oBACA,CAAC,OAAO,UAAU;AAAA,kBACpB;AAAA,kBACA,SAAO;AAAA,kBAEP;AAAA,oBAAC;AAAA;AAAA,sBACC,SAAQ;AAAA,sBACR,WAAU;AAAA,sBACV,UAAU,cAAc,CAAC,OAAO;AAAA,sBAEhC;AAAA,4CAAC,cAAW,WAAU,8CAA6C;AAAA,wBACnE,oBAAC,UAAO,WAAU,gDAA+C;AAAA,wBAAE;AAAA;AAAA;AAAA,kBAErE;AAAA;AAAA,cACF;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA,UAAU;AAAA,kBACV,UAAU,eAAe,KAAK;AAAA,kBAC9B,UAAU;AAAA,kBACV,QAAQ,MAAM,YAAY;AAAA,kBAEzB,WAAC,aACA,oBAAC,mBAAiB,GAAG,UAAW,GAAG,OAAO,YAAwB;AAAA;AAAA,cAEtE;AAAA,cACA,qBAAC,SAAI,WAAW,GAAG,eAAe,YAAY,MAAM,GAClD;AAAA,qCAAC,SAAI,WAAU,mDACZ;AAAA,2BACC,oBAAC,UAAK,WAAU,8FACb,iBACH;AAAA,kBAED,eACC,oBAAC,UAAK,WAAU,iCACb,uBACH;AAAA,mBAEJ;AAAA,gBACC,MAAM,YAAY,YACjB,MAAM,kBACN,MAAM;AAAA,iBACV;AAAA;AAAA;AAAA,QACF;AAAA,QACC,MAAM,YAAY,MAAM;AAAA,QACzB;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,GAAG,oBAAoB,YAAY,kBAAkB;AAAA,YAEhE;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,OAAO,UAAU,MAAM,YAAY,YAAY;AAAA,kBAC/C,OAAO,UAAU,OAAO,SAAS,KAAK;AAAA,kBACtC,YAAY;AAAA,gBACd;AAAA,gBAEC,iBAAO,UAAU,iBAAiB,QACjC,oBAAC,cAAW,WAAU,gBACpB;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAW;AAAA,sBACT;AAAA,sBACA,MAAM,WAAW,KAAK;AAAA,sBACtB,MAAM,WAAW,KAAK;AAAA,sBACtB,MAAM,WAAW,KAAK;AAAA,sBACtB,MAAM,WAAW,KAAK;AAAA,sBACtB,YAAY;AAAA,oBACd;AAAA,oBAEC,iBAAO,IAAI,CAAC,MAAM,UACjB;AAAA,sBAAC,MAAM;AAAA,sBAAN;AAAA,wBAGE,6BACC,iBAAiB;AAAA,0BACf;AAAA,0BACA;AAAA,0BACA,UAAU,MAAM,SAAS,KAAK;AAAA,wBAChC,CAAC,IAED;AAAA,0BAAC;AAAA;AAAA,4BACC;AAAA,4BACA,UAAU,MAAM,SAAS,KAAK;AAAA,4BAC9B,UAAU,aAAa,KAAK,IAAI;AAAA;AAAA,wBAClC;AAAA;AAAA,sBAbG,KAAK,OAAO,KAAK,eAAe,KAAK;AAAA,oBAe5C,CACD;AAAA;AAAA,gBACH,GACF,IACE;AAAA;AAAA,YACN;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAcO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiC;AAC/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,YAAY;AAAA,MACd;AAAA,MAEA;AAAA,6BAAC,SAAI,WAAU,uBACZ;AAAA,4BAAkB,IAAI,IAAI,oBAAC,eAAY,MAAY,IAAK;AAAA,UACzD,qBAAC,SAAI,WAAU,8BACb;AAAA,iCAAC,SAAI,WAAU,wCACb;AAAA,kCAAC,OAAE,WAAU,8EACV,eAAK,MACR;AAAA,cACA,oBAAC,OAAE,WAAU,iCACV,sBAAY,KAAK,IAAI,GACxB;AAAA,eACF;AAAA,YACC,WACC,oBAAC,YAAS,OAAO,UAAU,WAAU,iBAAgB,IACnD;AAAA,aACN;AAAA,WACF;AAAA,QACC,YACC,oBAAC,SAAI,WAAU,2BACb;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,WAAW,GAAG,UAAU,YAAY,YAAY;AAAA,YAChD,UAAU,CAAC,CAAC,YAAY;AAAA,YACxB,SAAS;AAAA,YAET;AAAA,kCAAC,KAAE,WAAU,UAAS,eAAY,QAAO;AAAA,cACzC,oBAAC,UAAK,WAAU,WAAU,yBAAW;AAAA;AAAA;AAAA,QACvC,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEO,SAAS,kBACd,MAC4C;AAC5C,SAAO,aAAa,QAAQ,OAAO,KAAK,YAAY;AACtD;AAMO,SAAS,YAAY,EAAE,KAAK,GAAqB;AACtD,MAAI,KAAK,KAAK,WAAW,QAAQ,GAAG;AAClC,WACE,qBAAC,UAAO,WAAU,qBAChB;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,KAAK,KAAK;AAAA,UACV,KAAK,KAAK;AAAA,UACV,SAAQ;AAAA;AAAA,MACV;AAAA,MACA,oBAAC,kBAAe,WAAU,+BACvB,cAAI,KAAK,KAAK,MAAM,GAAG,EAAE,CAAC,CAAC,IAC9B;AAAA,OACF;AAAA,EAEJ;AAEA,SACE,oBAAC,YAAS,WAAU,iCAAgC,eAAY,QAAO;AAE3E;AAMA,SAAS,gBAAgB,OAA6B;AACpD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,eAAe;AAAA,IACf,UAAU,OAAO,OAAO;AAAA,IACxB;AAAA;AAAA,EAEF,IAAI;AACJ,MAAI,YAAY,UAAU;AACxB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,YAAY;AAAA,QACd;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG,aAAa;AAAA,YAEjB,WAAW;AAAA,cACT;AAAA,cACA,YAAY;AAAA,YACd;AAAA,YAEA;AAAA,kCAAC,WAAO,GAAG,cAAc,GAAG;AAAA,cAC5B;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAAQ;AAAA,kBACR,WAAU;AAAA,kBACV,UAAU;AAAA,kBAEV;AAAA,wCAAC,UAAO,WAAU,UAAS,eAAY,QAAO;AAAA,oBAAE;AAAA;AAAA;AAAA,cAElD;AAAA;AAAA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG,aAAa;AAAA,MAEjB,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB,cAAc;AAAA,QACd,YAAY,cAAc;AAAA,QAC1B,YAAY;AAAA,MACd;AAAA,MAEA;AAAA,4BAAC,WAAO,GAAG,cAAc,GAAG;AAAA,QAC3B,eACC,qBAAC,SAAI,WAAU,2DACb;AAAA,8BAAC,SAAI,WAAU,yCACb;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,eAAY;AAAA;AAAA,UACd,GACF;AAAA,UACA,oBAAC,OAAE,WAAU,qCAAoC,iCAEjD;AAAA,WACF,IAEA,qBAAC,SAAI,WAAU,2DACb;AAAA,8BAAC,SAAI,WAAU,yCACb;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,eAAY;AAAA;AAAA,UACd,GACF;AAAA,UACA,qBAAC,SAAI,WAAU,wBACb;AAAA,iCAAC,OAAE,WAAU,qCAAoC;AAAA;AAAA,cAC1C;AAAA,cAAM;AAAA,eACb;AAAA,YACA,qBAAC,OAAE,WAAU,oCAAmC;AAAA;AAAA,cAE7C,eAAe,IACZ,IAAI,iBAAiB,WAAW,aAAa,YAAY;AAAA,qCACtC,YAAY,OAAO,CAAC,WACvC,gBAAgB,YAAY,OAAO,CAAC;AAAA,eAC1C;AAAA,aACF;AAAA,WACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/custom/filter-component/fields/async-select.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Label } from "@repo/ayasofyazilim-ui/components/label";
+import AsyncSelect from "../../async-select";
+function AsyncSelectField({
+  filter,
+  isPending,
+  searchText
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-1.5", children: [
+    /* @__PURE__ */ jsx(Label, { htmlFor: "refund-point", children: filter.title }),
+    /* @__PURE__ */ jsx(
+      AsyncSelect,
+      {
+        id: filter.id,
+        fetchAction: filter.fetchAction,
+        onChange: filter.onChange,
+        value: filter.value,
+        disabled: isPending,
+        multiple: filter.multiple,
+        closeOnSelect: !filter.multiple,
+        searchText
+      }
+    )
+  ] }, filter.title);
+}
+var async_select_default = AsyncSelectField;
+export {
+  async_select_default as default
+};
+//# sourceMappingURL=async-select.js.map

package/dist/custom/filter-component/fields/async-select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/custom/filter-component/fields/async-select.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Label } from \"@repo/ayasofyazilim-ui/components/label\";\r\nimport type { AsyncSelectType } from \"..\";\r\nimport AsyncSelect from \"../../async-select\";\r\n\r\nfunction AsyncSelectField({\r\n  filter,\r\n  isPending,\r\n  searchText,\r\n}: {\r\n  filter: AsyncSelectType;\r\n  isPending: boolean;\r\n  searchText: string;\r\n}) {\r\n  return (\r\n    <div className=\"grid items-center gap-1.5\" key={filter.title}>\r\n      <Label htmlFor=\"refund-point\">{filter.title}</Label>\r\n      <AsyncSelect\r\n        id={filter.id}\r\n        fetchAction={filter.fetchAction}\r\n        onChange={filter.onChange}\r\n        value={filter.value}\r\n        disabled={isPending}\r\n        multiple={filter.multiple}\r\n        closeOnSelect={!filter.multiple}\r\n        searchText={searchText}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default AsyncSelectField;\r\n"],"mappings":";AAgBI,SACE,KADF;AAdJ,SAAS,aAAa;AAEtB,OAAO,iBAAiB;AAExB,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE,qBAAC,SAAI,WAAU,6BACb;AAAA,wBAAC,SAAM,SAAQ,gBAAgB,iBAAO,OAAM;AAAA,IAC5C;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,OAAO;AAAA,QACX,aAAa,OAAO;AAAA,QACpB,UAAU,OAAO;AAAA,QACjB,OAAO,OAAO;AAAA,QACd,UAAU;AAAA,QACV,UAAU,OAAO;AAAA,QACjB,eAAe,CAAC,OAAO;AAAA,QACvB;AAAA;AAAA,IACF;AAAA,OAX8C,OAAO,KAYvD;AAEJ;AAEA,IAAO,uBAAQ;","names":[]}

package/dist/custom/filter-component/fields/date.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import { Label } from "@repo/ayasofyazilim-ui/components/label";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue
+} from "@repo/ayasofyazilim-ui/components/select";
+function DateField({
+  filter,
+  isPending
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-1.5", children: [
+    /* @__PURE__ */ jsx(Label, { htmlFor: "refund-point", children: filter.title }),
+    /* @__PURE__ */ jsxs(
+      Select,
+      {
+        onValueChange: filter.onChange,
+        value: filter.value,
+        disabled: isPending,
+        children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: filter.placeholder || "Select a date" }) }),
+          /* @__PURE__ */ jsxs(SelectContent, { children: [
+            /* @__PURE__ */ jsxs(SelectGroup, { children: [
+              /* @__PURE__ */ jsx(SelectLabel, { children: filter.title }),
+              filter.options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value))
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                className: "w-full px-2",
+                variant: "secondary",
+                size: "sm",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  filter.onChange("");
+                },
+                children: "Clear"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] }, filter.title);
+}
+var date_default = DateField;
+export {
+  date_default as default
+};
+//# sourceMappingURL=date.js.map

package/dist/custom/filter-component/fields/date.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/custom/filter-component/fields/date.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Button } from \"@repo/ayasofyazilim-ui/components/button\";\r\nimport { Label } from \"@repo/ayasofyazilim-ui/components/label\";\r\nimport {\r\n  Select,\r\n  SelectContent,\r\n  SelectGroup,\r\n  SelectItem,\r\n  SelectLabel,\r\n  SelectTrigger,\r\n  SelectValue,\r\n} from \"@repo/ayasofyazilim-ui/components/select\";\r\nimport type { DateSelectType } from \"..\";\r\n\r\nfunction DateField({\r\n  filter,\r\n  isPending,\r\n}: {\r\n  filter: DateSelectType;\r\n  isPending: boolean;\r\n}) {\r\n  return (\r\n    <div className=\"grid items-center gap-1.5\" key={filter.title}>\r\n      <Label htmlFor=\"refund-point\">{filter.title}</Label>\r\n      <Select\r\n        onValueChange={filter.onChange}\r\n        value={filter.value}\r\n        disabled={isPending}\r\n      >\r\n        <SelectTrigger className=\"w-full\">\r\n          <SelectValue placeholder={filter.placeholder || \"Select a date\"} />\r\n        </SelectTrigger>\r\n        <SelectContent>\r\n          <SelectGroup>\r\n            <SelectLabel>{filter.title}</SelectLabel>\r\n            {filter.options.map((option) => (\r\n              <SelectItem key={option.value} value={option.value}>\r\n                {option.label}\r\n              </SelectItem>\r\n            ))}\r\n          </SelectGroup>\r\n          <Button\r\n            className=\"w-full px-2\"\r\n            variant=\"secondary\"\r\n            size=\"sm\"\r\n            onClick={(e) => {\r\n              e.stopPropagation();\r\n              filter.onChange(\"\");\r\n            }}\r\n          >\r\n            Clear\r\n          </Button>\r\n        </SelectContent>\r\n      </Select>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default DateField;\r\n"],"mappings":";AAwBM,cAUI,YAVJ;AAtBN,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAS,UAAU;AAAA,EACjB;AAAA,EACA;AACF,GAGG;AACD,SACE,qBAAC,SAAI,WAAU,6BACb;AAAA,wBAAC,SAAM,SAAQ,gBAAgB,iBAAO,OAAM;AAAA,IAC5C;AAAA,MAAC;AAAA;AAAA,QACC,eAAe,OAAO;AAAA,QACtB,OAAO,OAAO;AAAA,QACd,UAAU;AAAA,QAEV;AAAA,8BAAC,iBAAc,WAAU,UACvB,8BAAC,eAAY,aAAa,OAAO,eAAe,iBAAiB,GACnE;AAAA,UACA,qBAAC,iBACC;AAAA,iCAAC,eACC;AAAA,kCAAC,eAAa,iBAAO,OAAM;AAAA,cAC1B,OAAO,QAAQ,IAAI,CAAC,WACnB,oBAAC,cAA8B,OAAO,OAAO,OAC1C,iBAAO,SADO,OAAO,KAExB,CACD;AAAA,eACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,SAAS,CAAC,MAAM;AACd,oBAAE,gBAAgB;AAClB,yBAAO,SAAS,EAAE;AAAA,gBACpB;AAAA,gBACD;AAAA;AAAA,YAED;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,OA/B8C,OAAO,KAgCvD;AAEJ;AAEA,IAAO,eAAQ;","names":[]}

package/dist/custom/filter-component/fields/multi-select.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Label } from "@repo/ayasofyazilim-ui/components/label";
+import { MultiSelect } from "../../multi-select";
+function MultiSelectField({
+  filter,
+  isPending
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-1.5", children: [
+    /* @__PURE__ */ jsx(Label, { htmlFor: "refund-point", children: filter.title }),
+    /* @__PURE__ */ jsx(
+      MultiSelect,
+      {
+        onValueChange: filter.onChange,
+        options: filter.options,
+        defaultValue: filter.value,
+        disabled: isPending,
+        placeholder: filter.placeholder,
+        selectAllLabel: filter.selectAllLabel
+      }
+    )
+  ] }, filter.title);
+}
+var multi_select_default = MultiSelectField;
+export {
+  multi_select_default as default
+};
+//# sourceMappingURL=multi-select.js.map

package/dist/custom/filter-component/fields/multi-select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/custom/filter-component/fields/multi-select.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Label } from \"@repo/ayasofyazilim-ui/components/label\";\r\n\r\nimport { MultiSelect } from \"../../multi-select\";\r\nimport type { MultiSelectType } from \"..\";\r\n\r\nfunction MultiSelectField({\r\n  filter,\r\n  isPending,\r\n}: {\r\n  filter: MultiSelectType;\r\n  isPending: boolean;\r\n}) {\r\n  return (\r\n    <div className=\"grid items-center gap-1.5\" key={filter.title}>\r\n      <Label htmlFor=\"refund-point\">{filter.title}</Label>\r\n      <MultiSelect\r\n        onValueChange={filter.onChange}\r\n        options={filter.options}\r\n        defaultValue={filter.value}\r\n        disabled={isPending}\r\n        placeholder={filter.placeholder}\r\n        selectAllLabel={filter.selectAllLabel}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default MultiSelectField;\r\n"],"mappings":";AAeI,SACE,KADF;AAbJ,SAAS,aAAa;AAEtB,SAAS,mBAAmB;AAG5B,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AACF,GAGG;AACD,SACE,qBAAC,SAAI,WAAU,6BACb;AAAA,wBAAC,SAAM,SAAQ,gBAAgB,iBAAO,OAAM;AAAA,IAC5C;AAAA,MAAC;AAAA;AAAA,QACC,eAAe,OAAO;AAAA,QACtB,SAAS,OAAO;AAAA,QAChB,cAAc,OAAO;AAAA,QACrB,UAAU;AAAA,QACV,aAAa,OAAO;AAAA,QACpB,gBAAgB,OAAO;AAAA;AAAA,IACzB;AAAA,OAT8C,OAAO,KAUvD;AAEJ;AAEA,IAAO,uBAAQ;","names":[]}