@ayasofyazilim/ui 0.0.0 → 0.0.2

package/dist/custom/checkbox-tree.js

@@ -0,0 +1,70 @@
+"use client";
+import { useCallback, useMemo, useState } from "react";
+function useCheckboxTree(initialTree) {
+  const initialCheckedNodes = useMemo(() => {
+    const checkedSet = /* @__PURE__ */ new Set();
+    const initializeCheckedNodes = (node) => {
+      if (node.defaultChecked) {
+        checkedSet.add(node.id);
+      }
+      node.children?.forEach(initializeCheckedNodes);
+    };
+    initializeCheckedNodes(initialTree);
+    return checkedSet;
+  }, [initialTree]);
+  const [checkedNodes, setCheckedNodes] = useState(initialCheckedNodes);
+  const isChecked = useCallback(
+    (node) => {
+      if (!node.children) {
+        return checkedNodes.has(node.id);
+      }
+      const childrenChecked = node.children.map((child) => isChecked(child));
+      if (childrenChecked.every((status) => status === true)) {
+        return true;
+      }
+      if (childrenChecked.some(
+        (status) => status === true || status === "indeterminate"
+      )) {
+        return "indeterminate";
+      }
+      return false;
+    },
+    [checkedNodes]
+  );
+  const handleCheck = useCallback(
+    (node) => {
+      const newCheckedNodes = new Set(checkedNodes);
+      const toggleNode = (n, check) => {
+        if (check) {
+          newCheckedNodes.add(n.id);
+        } else {
+          newCheckedNodes.delete(n.id);
+        }
+        n.children?.forEach((child) => toggleNode(child, check));
+      };
+      const currentStatus = isChecked(node);
+      const newCheck = currentStatus !== true;
+      toggleNode(node, newCheck);
+      setCheckedNodes(newCheckedNodes);
+    },
+    [checkedNodes, isChecked]
+  );
+  return { isChecked, handleCheck };
+}
+function CheckboxTree({ tree, renderNode }) {
+  const { isChecked, handleCheck } = useCheckboxTree(tree);
+  const renderTreeNode = (node) => {
+    const children = node.children?.map(renderTreeNode);
+    return renderNode({
+      node,
+      isChecked: isChecked(node),
+      onCheckedChange: () => handleCheck(node),
+      children
+    });
+  };
+  return renderTreeNode(tree);
+}
+export {
+  CheckboxTree
+};
+//# sourceMappingURL=checkbox-tree.js.map

package/dist/custom/checkbox-tree.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/custom/checkbox-tree.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useCallback, useMemo, useState } from \"react\";\r\n\r\ninterface TreeNode {\r\n  id: string;\r\n  label: string;\r\n  defaultChecked?: boolean;\r\n  children?: TreeNode[];\r\n}\r\n\r\nfunction useCheckboxTree(initialTree: TreeNode) {\r\n  const initialCheckedNodes = useMemo(() => {\r\n    const checkedSet = new Set<string>();\r\n    const initializeCheckedNodes = (node: TreeNode) => {\r\n      if (node.defaultChecked) {\r\n        checkedSet.add(node.id);\r\n      }\r\n      node.children?.forEach(initializeCheckedNodes);\r\n    };\r\n    initializeCheckedNodes(initialTree);\r\n    return checkedSet;\r\n  }, [initialTree]);\r\n\r\n  const [checkedNodes, setCheckedNodes] =\r\n    useState<Set<string>>(initialCheckedNodes);\r\n\r\n  const isChecked = useCallback(\r\n    (node: TreeNode): boolean | \"indeterminate\" => {\r\n      if (!node.children) {\r\n        return checkedNodes.has(node.id);\r\n      }\r\n\r\n      const childrenChecked = node.children.map((child) => isChecked(child));\r\n      if (childrenChecked.every((status) => status === true)) {\r\n        return true;\r\n      }\r\n      if (\r\n        childrenChecked.some(\r\n          (status) => status === true || status === \"indeterminate\"\r\n        )\r\n      ) {\r\n        return \"indeterminate\";\r\n      }\r\n      return false;\r\n    },\r\n    [checkedNodes]\r\n  );\r\n\r\n  const handleCheck = useCallback(\r\n    (node: TreeNode) => {\r\n      const newCheckedNodes = new Set(checkedNodes);\r\n\r\n      const toggleNode = (n: TreeNode, check: boolean) => {\r\n        if (check) {\r\n          newCheckedNodes.add(n.id);\r\n        } else {\r\n          newCheckedNodes.delete(n.id);\r\n        }\r\n        n.children?.forEach((child) => toggleNode(child, check));\r\n      };\r\n\r\n      const currentStatus = isChecked(node);\r\n      const newCheck = currentStatus !== true;\r\n\r\n      toggleNode(node, newCheck);\r\n      setCheckedNodes(newCheckedNodes);\r\n    },\r\n    [checkedNodes, isChecked]\r\n  );\r\n\r\n  return { isChecked, handleCheck };\r\n}\r\n\r\ninterface CheckboxTreeProps {\r\n  tree: TreeNode;\r\n  renderNode: (props: {\r\n    node: TreeNode;\r\n    isChecked: boolean | \"indeterminate\";\r\n    onCheckedChange: () => void;\r\n    children: React.ReactNode;\r\n  }) => React.ReactNode;\r\n}\r\n\r\nexport function CheckboxTree({ tree, renderNode }: CheckboxTreeProps) {\r\n  const { isChecked, handleCheck } = useCheckboxTree(tree);\r\n\r\n  const renderTreeNode = (node: TreeNode): React.ReactNode => {\r\n    const children = node.children?.map(renderTreeNode);\r\n\r\n    return renderNode({\r\n      node,\r\n      isChecked: isChecked(node),\r\n      onCheckedChange: () => handleCheck(node),\r\n      children,\r\n    });\r\n  };\r\n\r\n  return renderTreeNode(tree);\r\n}\r\n"],"mappings":";AAEA,SAAgB,aAAa,SAAS,gBAAgB;AAStD,SAAS,gBAAgB,aAAuB;AAC9C,QAAM,sBAAsB,QAAQ,MAAM;AACxC,UAAM,aAAa,oBAAI,IAAY;AACnC,UAAM,yBAAyB,CAAC,SAAmB;AACjD,UAAI,KAAK,gBAAgB;AACvB,mBAAW,IAAI,KAAK,EAAE;AAAA,MACxB;AACA,WAAK,UAAU,QAAQ,sBAAsB;AAAA,IAC/C;AACA,2BAAuB,WAAW;AAClC,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,CAAC,cAAc,eAAe,IAClC,SAAsB,mBAAmB;AAE3C,QAAM,YAAY;AAAA,IAChB,CAAC,SAA8C;AAC7C,UAAI,CAAC,KAAK,UAAU;AAClB,eAAO,aAAa,IAAI,KAAK,EAAE;AAAA,MACjC;AAEA,YAAM,kBAAkB,KAAK,SAAS,IAAI,CAAC,UAAU,UAAU,KAAK,CAAC;AACrE,UAAI,gBAAgB,MAAM,CAAC,WAAW,WAAW,IAAI,GAAG;AACtD,eAAO;AAAA,MACT;AACA,UACE,gBAAgB;AAAA,QACd,CAAC,WAAW,WAAW,QAAQ,WAAW;AAAA,MAC5C,GACA;AACA,eAAO;AAAA,MACT;AACA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAEA,QAAM,cAAc;AAAA,IAClB,CAAC,SAAmB;AAClB,YAAM,kBAAkB,IAAI,IAAI,YAAY;AAE5C,YAAM,aAAa,CAAC,GAAa,UAAmB;AAClD,YAAI,OAAO;AACT,0BAAgB,IAAI,EAAE,EAAE;AAAA,QAC1B,OAAO;AACL,0BAAgB,OAAO,EAAE,EAAE;AAAA,QAC7B;AACA,UAAE,UAAU,QAAQ,CAAC,UAAU,WAAW,OAAO,KAAK,CAAC;AAAA,MACzD;AAEA,YAAM,gBAAgB,UAAU,IAAI;AACpC,YAAM,WAAW,kBAAkB;AAEnC,iBAAW,MAAM,QAAQ;AACzB,sBAAgB,eAAe;AAAA,IACjC;AAAA,IACA,CAAC,cAAc,SAAS;AAAA,EAC1B;AAEA,SAAO,EAAE,WAAW,YAAY;AAClC;AAYO,SAAS,aAAa,EAAE,MAAM,WAAW,GAAsB;AACpE,QAAM,EAAE,WAAW,YAAY,IAAI,gBAAgB,IAAI;AAEvD,QAAM,iBAAiB,CAAC,SAAoC;AAC1D,UAAM,WAAW,KAAK,UAAU,IAAI,cAAc;AAElD,WAAO,WAAW;AAAA,MAChB;AAAA,MACA,WAAW,UAAU,IAAI;AAAA,MACzB,iBAAiB,MAAM,YAAY,IAAI;AAAA,MACvC;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO,eAAe,IAAI;AAC5B;","names":[]}

package/dist/custom/combobox.js

@@ -0,0 +1,233 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronsUpDown } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from "@repo/ayasofyazilim-ui/components/command";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerTrigger
+} from "@repo/ayasofyazilim-ui/components/drawer";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "@repo/ayasofyazilim-ui/components/popover";
+import { useMediaQuery } from "@repo/ayasofyazilim-ui/hooks/use-media-query";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { Label } from "@repo/ayasofyazilim-ui/components/label";
+import { Badge } from "@repo/ayasofyazilim-ui/components/badge";
+function Combobox(props) {
+  const {
+    label,
+    list,
+    value: controlledValue,
+    defaultValue,
+    disabled,
+    selectIdentifier,
+    required,
+    errorMessage,
+    emptyValue,
+    classNames,
+    onValueChange
+  } = props;
+  const isDesktop = useMediaQuery("(min-width: 768px)");
+  const [open, setOpen] = useState(false);
+  const [internalValue, setInternalValue] = useState(
+    defaultValue ?? null
+  );
+  const isControlled = controlledValue !== void 0;
+  const currentValue = isControlled ? controlledValue : internalValue;
+  const handleValueChange = (newValue) => {
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    onValueChange?.(newValue);
+  };
+  const fieldValue = list?.find(
+    (x) => x[props.selectIdentifier] === currentValue?.[selectIdentifier]
+  )?.[props.selectLabel] || emptyValue || label && `Please select an ${label.toLocaleLowerCase()}` || "Please select";
+  const DesktopContent = /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal: true, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        disabled,
+        type: "button",
+        variant: "outline",
+        role: "combobox",
+        className: cn(
+          "text-muted-foreground w-full justify-between font-normal",
+          currentValue && "text-foreground",
+          classNames?.trigger?.button
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "overflow-hidden truncate has-[role=dialog]:max-w-xs",
+                classNames?.trigger?.label
+              ),
+              children: fieldValue
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ChevronsUpDown,
+            {
+              className: cn(
+                "ml-2 h-4 w-4 shrink-0 opacity-50",
+                classNames?.trigger?.icon
+              )
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "p-0", children: /* @__PURE__ */ jsx(
+      List,
+      {
+        ...props,
+        setOpen,
+        currentValue,
+        handleValueChange
+      }
+    ) })
+  ] });
+  const MobileContent = /* @__PURE__ */ jsxs(Drawer, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        disabled,
+        type: "button",
+        variant: "outline",
+        className: cn(
+          "text-muted-foreground w-full justify-between font-normal",
+          currentValue && "text-foreground",
+          classNames?.trigger?.button
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: cn("truncate", classNames?.trigger?.label), children: fieldValue }),
+          /* @__PURE__ */ jsx(
+            ChevronsUpDown,
+            {
+              className: cn(
+                "ml-2 h-4 w-4 shrink-0 opacity-50",
+                classNames?.trigger?.icon
+              )
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(DrawerContent, { children: /* @__PURE__ */ jsx("div", { className: "mt-4 border-t", children: /* @__PURE__ */ jsx(
+      List,
+      {
+        ...props,
+        setOpen,
+        currentValue,
+        handleValueChange
+      }
+    ) }) })
+  ] });
+  const Content = isDesktop ? DesktopContent : MobileContent;
+  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", classNames?.container), children: [
+    label && /* @__PURE__ */ jsxs(Label, { className: classNames?.label, children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { className: cn("text-destructive", classNames?.required), children: "*" })
+    ] }),
+    Content,
+    errorMessage && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-destructive",
+          classNames?.error
+        ),
+        children: errorMessage
+      }
+    )
+  ] });
+}
+function List({
+  setOpen,
+  currentValue,
+  handleValueChange,
+  ...props
+}) {
+  const {
+    list,
+    selectIdentifier,
+    selectLabel,
+    searchPlaceholder,
+    searchResultLabel,
+    id,
+    classNames,
+    badges
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    Command,
+    {
+      id,
+      filter: (value, search) => {
+        const filterResult = list?.find(
+          (i) => i[selectIdentifier]?.toLocaleLowerCase() === value.toLocaleLowerCase()
+        )?.[selectLabel];
+        if (value.includes(search) || filterResult?.toLocaleLowerCase().includes(search.toLocaleLowerCase()))
+          return 1;
+        return 0;
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          CommandInput,
+          {
+            placeholder: searchPlaceholder || "Search...",
+            className: "h-9"
+          }
+        ),
+        /* @__PURE__ */ jsxs(CommandList, { className: "w-full min-w-full max-w-full", children: [
+          /* @__PURE__ */ jsx(CommandEmpty, { children: searchResultLabel || "0 search result." }),
+          /* @__PURE__ */ jsx(CommandGroup, { children: list?.map((item) => /* @__PURE__ */ jsxs(
+            CommandItem,
+            {
+              onSelect: () => {
+                handleValueChange(item);
+                setOpen(false);
+              },
+              value: item[selectIdentifier],
+              children: [
+                item[selectIdentifier] === currentValue?.[selectIdentifier] && /* @__PURE__ */ jsx(CheckIcon, { className: cn("h-4 w-4") }),
+                /* @__PURE__ */ jsx("span", { className: cn(classNames?.list?.label), children: item[selectLabel] }),
+                badges && /* @__PURE__ */ jsx("div", { className: "ml-auto", children: Object.keys(badges).map((badgeKey) => {
+                  const badgeOptions = badges[badgeKey];
+                  if (!badgeOptions) return null;
+                  return /* @__PURE__ */ jsx(
+                    Badge,
+                    {
+                      variant: "outline",
+                      className: cn("ml-2", badgeOptions.className),
+                      children: badgeOptions.label(item)
+                    },
+                    badgeKey
+                  );
+                }) })
+              ]
+            },
+            JSON.stringify(item[selectIdentifier])
+          )) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  Combobox
+};
+//# sourceMappingURL=combobox.js.map

package/dist/custom/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/custom/combobox.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { CheckIcon, ChevronsUpDown } from \"lucide-react\";\r\nimport React, { Dispatch, SetStateAction, useState } from \"react\";\r\nimport { Button } from \"@repo/ayasofyazilim-ui/components/button\";\r\nimport {\r\n  Command,\r\n  CommandEmpty,\r\n  CommandGroup,\r\n  CommandInput,\r\n  CommandItem,\r\n  CommandList,\r\n} from \"@repo/ayasofyazilim-ui/components/command\";\r\nimport {\r\n  Drawer,\r\n  DrawerContent,\r\n  DrawerTrigger,\r\n} from \"@repo/ayasofyazilim-ui/components/drawer\";\r\nimport {\r\n  Popover,\r\n  PopoverContent,\r\n  PopoverTrigger,\r\n} from \"@repo/ayasofyazilim-ui/components/popover\";\r\nimport { useMediaQuery } from \"@repo/ayasofyazilim-ui/hooks/use-media-query\";\r\nimport { cn } from \"@repo/ayasofyazilim-ui/lib/utils\";\r\nimport { Label } from \"@repo/ayasofyazilim-ui/components/label\";\r\nimport { Badge } from \"@repo/ayasofyazilim-ui/components/badge\";\r\n\r\nexport type ComboboxBadgeOptions<T> = {\r\n  className?: string;\r\n  label: (item: T) => React.ReactNode;\r\n};\r\n\r\nexport type ComboboxProps<T> = {\r\n  id?: string;\r\n  disabled?: boolean;\r\n  emptyValue?: string;\r\n  errorMessage?: string;\r\n  classNames?: {\r\n    container?: string;\r\n    label?: string;\r\n    trigger?: {\r\n      button?: string;\r\n      label?: string;\r\n      icon?: string;\r\n    };\r\n    list?: {\r\n      label?: string;\r\n    };\r\n    error?: string;\r\n    required?: string;\r\n  };\r\n  label?: string;\r\n  list: Array<T> | null | undefined;\r\n  onValueChange?: (\r\n    value: T | null | undefined\r\n  ) => void | Dispatch<SetStateAction<T | null | undefined>>;\r\n  required?: boolean;\r\n  searchPlaceholder?: string;\r\n  searchResultLabel?: string;\r\n  selectIdentifier: keyof T;\r\n  selectLabel: keyof T;\r\n  value?: T | null | undefined;\r\n  defaultValue?: T | null | undefined;\r\n  badges?: Partial<Record<keyof T, ComboboxBadgeOptions<T>>>;\r\n};\r\n\r\nexport function Combobox<T>(props: ComboboxProps<T>) {\r\n  const {\r\n    label,\r\n    list,\r\n    value: controlledValue,\r\n    defaultValue,\r\n    disabled,\r\n    selectIdentifier,\r\n    required,\r\n    errorMessage,\r\n    emptyValue,\r\n    classNames,\r\n    onValueChange,\r\n  } = props;\r\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\");\r\n  const [open, setOpen] = useState(false);\r\n\r\n  const [internalValue, setInternalValue] = useState<T | null | undefined>(\r\n    defaultValue ?? null\r\n  );\r\n\r\n  const isControlled = controlledValue !== undefined;\r\n  const currentValue = isControlled ? controlledValue : internalValue;\r\n\r\n  const handleValueChange = (newValue: T | null | undefined) => {\r\n    if (!isControlled) {\r\n      setInternalValue(newValue);\r\n    }\r\n    onValueChange?.(newValue);\r\n  };\r\n\r\n  const fieldValue =\r\n    (list?.find(\r\n      (x: T) => x[props.selectIdentifier] === currentValue?.[selectIdentifier]\r\n    )?.[props.selectLabel] as string) ||\r\n    emptyValue ||\r\n    (label && `Please select an ${label.toLocaleLowerCase()}`) ||\r\n    \"Please select\";\r\n  const DesktopContent = (\r\n    <Popover open={open} onOpenChange={setOpen} modal>\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          disabled={disabled}\r\n          type=\"button\"\r\n          variant=\"outline\"\r\n          role=\"combobox\"\r\n          className={cn(\r\n            \"text-muted-foreground w-full justify-between font-normal\",\r\n            currentValue && \"text-foreground\",\r\n            classNames?.trigger?.button\r\n          )}\r\n        >\r\n          <span\r\n            className={cn(\r\n              \"overflow-hidden truncate has-[role=dialog]:max-w-xs\",\r\n              classNames?.trigger?.label\r\n            )}\r\n          >\r\n            {fieldValue}\r\n          </span>\r\n          <ChevronsUpDown\r\n            className={cn(\r\n              \"ml-2 h-4 w-4 shrink-0 opacity-50\",\r\n              classNames?.trigger?.icon\r\n            )}\r\n          />\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"p-0\">\r\n        <List\r\n          {...props}\r\n          setOpen={setOpen}\r\n          currentValue={currentValue}\r\n          handleValueChange={handleValueChange}\r\n        />\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n\r\n  const MobileContent = (\r\n    <Drawer open={open} onOpenChange={setOpen}>\r\n      <DrawerTrigger asChild>\r\n        <Button\r\n          disabled={disabled}\r\n          type=\"button\"\r\n          variant=\"outline\"\r\n          className={cn(\r\n            \"text-muted-foreground w-full justify-between font-normal\",\r\n            currentValue && \"text-foreground\",\r\n            classNames?.trigger?.button\r\n          )}\r\n        >\r\n          <span className={cn(\"truncate\", classNames?.trigger?.label)}>\r\n            {fieldValue}\r\n          </span>\r\n          <ChevronsUpDown\r\n            className={cn(\r\n              \"ml-2 h-4 w-4 shrink-0 opacity-50\",\r\n              classNames?.trigger?.icon\r\n            )}\r\n          />\r\n        </Button>\r\n      </DrawerTrigger>\r\n      <DrawerContent>\r\n        <div className=\"mt-4 border-t\">\r\n          <List\r\n            {...props}\r\n            setOpen={setOpen}\r\n            currentValue={currentValue}\r\n            handleValueChange={handleValueChange}\r\n          />\r\n        </div>\r\n      </DrawerContent>\r\n    </Drawer>\r\n  );\r\n\r\n  const Content = isDesktop ? DesktopContent : MobileContent;\r\n\r\n  return (\r\n    <div className={cn(\"w-full\", classNames?.container)}>\r\n      {label && (\r\n        <Label className={classNames?.label}>\r\n          {label}\r\n          {required && (\r\n            <span className={cn(\"text-destructive\", classNames?.required)}>\r\n              *\r\n            </span>\r\n          )}\r\n        </Label>\r\n      )}\r\n      {Content}\r\n      {errorMessage && (\r\n        <span\r\n          className={cn(\r\n            \"text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-destructive\",\r\n            classNames?.error\r\n          )}\r\n        >\r\n          {errorMessage}\r\n        </span>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction List<T>({\r\n  setOpen,\r\n  currentValue,\r\n  handleValueChange,\r\n  ...props\r\n}: ComboboxProps<T> & {\r\n  setOpen: (open: boolean) => void;\r\n  currentValue: T | null | undefined;\r\n  handleValueChange: (value: T | null | undefined) => void;\r\n}) {\r\n  const {\r\n    list,\r\n    selectIdentifier,\r\n    selectLabel,\r\n    searchPlaceholder,\r\n    searchResultLabel,\r\n    id,\r\n    classNames,\r\n    badges,\r\n  } = props;\r\n\r\n  return (\r\n    <Command\r\n      id={id}\r\n      filter={(value, search) => {\r\n        const filterResult = list?.find(\r\n          (i) =>\r\n            (i[selectIdentifier] as string)?.toLocaleLowerCase() ===\r\n            value.toLocaleLowerCase()\r\n        )?.[selectLabel] as string;\r\n        if (\r\n          value.includes(search) ||\r\n          filterResult?.toLocaleLowerCase().includes(search.toLocaleLowerCase())\r\n        )\r\n          return 1;\r\n        return 0;\r\n      }}\r\n    >\r\n      <CommandInput\r\n        placeholder={searchPlaceholder || \"Search...\"}\r\n        className=\"h-9\"\r\n      />\r\n      <CommandList className=\"w-full min-w-full max-w-full\">\r\n        <CommandEmpty>{searchResultLabel || \"0 search result.\"}</CommandEmpty>\r\n        <CommandGroup>\r\n          {list?.map((item: T) => (\r\n            <CommandItem\r\n              onSelect={() => {\r\n                handleValueChange(item);\r\n                setOpen(false);\r\n              }}\r\n              key={JSON.stringify(item[selectIdentifier])}\r\n              value={item[selectIdentifier] as string}\r\n            >\r\n              {item[selectIdentifier] === currentValue?.[selectIdentifier] && (\r\n                <CheckIcon className={cn(\"h-4 w-4\")} />\r\n              )}\r\n              <span className={cn(classNames?.list?.label)}>\r\n                {item[selectLabel] as string}\r\n              </span>\r\n              {badges && (\r\n                <div className=\"ml-auto\">\r\n                  {Object.keys(badges).map((badgeKey) => {\r\n                    const badgeOptions = badges[badgeKey as keyof T];\r\n                    if (!badgeOptions) return null;\r\n                    return (\r\n                      <Badge\r\n                        key={badgeKey}\r\n                        variant=\"outline\"\r\n                        className={cn(\"ml-2\", badgeOptions.className)}\r\n                      >\r\n                        {badgeOptions.label(item)}\r\n                      </Badge>\r\n                    );\r\n                  })}\r\n                </div>\r\n              )}\r\n            </CommandItem>\r\n          ))}\r\n        </CommandGroup>\r\n      </CommandList>\r\n    </Command>\r\n  );\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/custom/confirm-dialog.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogTrigger,
+  DialogDescription,
+  DialogClose
+} from "@repo/ayasofyazilim-ui/components/dialog";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import { Skeleton } from "@repo/ayasofyazilim-ui/components/skeleton";
+import { cn } from "../lib/utils";
+function ConfirmDialog(props) {
+  const [open, setOpen] = useState(false);
+  const [isConfirming, setIsConfirming] = useState(false);
+  const isWithTrigger = props.type === "with-trigger";
+  const { title, description, loading, confirmProps } = props;
+  const { closeAfterConfirm, onConfirm, ...confirmButtonProps } = confirmProps || {};
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open: open || loading || isConfirming,
+      onOpenChange: (newOpen) => {
+        if (!loading && !isConfirming) {
+          setOpen(newOpen);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: isWithTrigger ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            ...props.triggerProps,
+            className: cn("w-full", props.triggerProps.className),
+            onClick: (e) => {
+              setOpen(true);
+              if (props.triggerProps?.onClick) props.triggerProps.onClick(e);
+            },
+            children: props.triggerProps.children || props.triggerProps.label
+          }
+        ) : props.children }),
+        /* @__PURE__ */ jsxs(DialogContent, { children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+            /* @__PURE__ */ jsx(DialogDescription, { children: description })
+          ] }),
+          /* @__PURE__ */ jsxs(DialogFooter, { children: [
+            loading || isConfirming ? /* @__PURE__ */ jsx(Skeleton, { className: "w-20 h-9" }) : /* @__PURE__ */ jsx(DialogClose, { asChild: true, disabled: loading || isConfirming, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                type: "button",
+                ...props.closeProps,
+                disabled: loading || isConfirming,
+                children: props.closeProps?.children || "Cancel"
+              }
+            ) }),
+            loading || isConfirming ? /* @__PURE__ */ jsx(Skeleton, { className: "w-20 h-9" }) : /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                ...confirmButtonProps,
+                onClick: async (e) => {
+                  if (props.confirmProps?.onClick) {
+                    props.confirmProps.onClick(e);
+                  }
+                  if (onConfirm) {
+                    setIsConfirming(true);
+                    await onConfirm();
+                    setIsConfirming(false);
+                    if (closeAfterConfirm) setOpen(false);
+                  }
+                },
+                children: props.confirmProps?.children || "Confirm"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ConfirmDialog as default
+};
+//# sourceMappingURL=confirm-dialog.js.map

package/dist/custom/confirm-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/custom/confirm-dialog.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { JSX, useState } from \"react\";\r\nimport {\r\n  Dialog,\r\n  DialogContent,\r\n  DialogHeader,\r\n  DialogTitle,\r\n  DialogFooter,\r\n  DialogTrigger,\r\n  DialogDescription,\r\n  DialogClose,\r\n} from \"@repo/ayasofyazilim-ui/components/dialog\";\r\nimport { Button, ButtonProps } from \"@repo/ayasofyazilim-ui/components/button\";\r\nimport { Skeleton } from \"@repo/ayasofyazilim-ui/components/skeleton\";\r\nimport { cn } from \"../lib/utils\";\r\n\r\nexport type ConfirmDialogProps = {\r\n  closeProps?: ButtonProps;\r\n  confirmProps?: ButtonProps & {\r\n    closeAfterConfirm?: boolean;\r\n    onConfirm?: () => void | Promise<void>;\r\n  };\r\n  description: string | JSX.Element;\r\n  loading?: boolean;\r\n  title: string | JSX.Element;\r\n} & (WithTriggerConfirmDialogProps | WithoutTriggerConfirmDialogProps);\r\ntype WithTriggerConfirmDialogProps = {\r\n  triggerProps: ButtonProps & { \"data-testid\"?: string; label?: string };\r\n  type: \"with-trigger\";\r\n};\r\ntype WithoutTriggerConfirmDialogProps = {\r\n  type: \"without-trigger\";\r\n  children: JSX.Element;\r\n};\r\nexport default function ConfirmDialog(props: ConfirmDialogProps) {\r\n  const [open, setOpen] = useState(false);\r\n  const [isConfirming, setIsConfirming] = useState(false);\r\n  const isWithTrigger = props.type === \"with-trigger\";\r\n  const { title, description, loading, confirmProps } = props;\r\n  const { closeAfterConfirm, onConfirm, ...confirmButtonProps } =\r\n    confirmProps || {};\r\n  return (\r\n    <Dialog\r\n      open={open || loading || isConfirming}\r\n      onOpenChange={(newOpen) => {\r\n        if (!loading && !isConfirming) {\r\n          setOpen(newOpen);\r\n        }\r\n      }}\r\n    >\r\n      <DialogTrigger asChild>\r\n        {isWithTrigger ? (\r\n          <Button\r\n            type=\"button\"\r\n            {...props.triggerProps}\r\n            className={cn(\"w-full\", props.triggerProps.className)}\r\n            onClick={(e) => {\r\n              setOpen(true);\r\n              if (props.triggerProps?.onClick) props.triggerProps.onClick(e);\r\n            }}\r\n          >\r\n            {props.triggerProps.children || props.triggerProps.label}\r\n          </Button>\r\n        ) : (\r\n          props.children\r\n        )}\r\n      </DialogTrigger>\r\n      <DialogContent>\r\n        <DialogHeader>\r\n          <DialogTitle>{title}</DialogTitle>\r\n          <DialogDescription>{description}</DialogDescription>\r\n        </DialogHeader>\r\n        <DialogFooter>\r\n          {loading || isConfirming ? (\r\n            <Skeleton className=\"w-20 h-9\" />\r\n          ) : (\r\n            <DialogClose asChild disabled={loading || isConfirming}>\r\n              <Button\r\n                variant=\"outline\"\r\n                type=\"button\"\r\n                {...props.closeProps}\r\n                disabled={loading || isConfirming}\r\n              >\r\n                {props.closeProps?.children || \"Cancel\"}\r\n              </Button>\r\n            </DialogClose>\r\n          )}\r\n          {loading || isConfirming ? (\r\n            <Skeleton className=\"w-20 h-9\" />\r\n          ) : (\r\n            <Button\r\n              type=\"button\"\r\n              {...confirmButtonProps}\r\n              onClick={async (e) => {\r\n                if (props.confirmProps?.onClick) {\r\n                  props.confirmProps.onClick(e);\r\n                }\r\n                if (onConfirm) {\r\n                  setIsConfirming(true);\r\n                  await onConfirm();\r\n                  setIsConfirming(false);\r\n                  if (closeAfterConfirm) setOpen(false);\r\n                }\r\n              }}\r\n            >\r\n              {props.confirmProps?.children || \"Confirm\"}\r\n            </Button>\r\n          )}\r\n        </DialogFooter>\r\n      </DialogContent>\r\n    </Dialog>\r\n  );\r\n}\r\n"],"mappings":";AAqDU,cAgBF,YAhBE;AAnDV,SAAc,gBAAgB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAA2B;AACpC,SAAS,gBAAgB;AACzB,SAAS,UAAU;AAoBJ,SAAR,cAA+B,OAA2B;AAC/D,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,QAAM,gBAAgB,MAAM,SAAS;AACrC,QAAM,EAAE,OAAO,aAAa,SAAS,aAAa,IAAI;AACtD,QAAM,EAAE,mBAAmB,WAAW,GAAG,mBAAmB,IAC1D,gBAAgB,CAAC;AACnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,QAAQ,WAAW;AAAA,MACzB,cAAc,CAAC,YAAY;AACzB,YAAI,CAAC,WAAW,CAAC,cAAc;AAC7B,kBAAQ,OAAO;AAAA,QACjB;AAAA,MACF;AAAA,MAEA;AAAA,4BAAC,iBAAc,SAAO,MACnB,0BACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACJ,GAAG,MAAM;AAAA,YACV,WAAW,GAAG,UAAU,MAAM,aAAa,SAAS;AAAA,YACpD,SAAS,CAAC,MAAM;AACd,sBAAQ,IAAI;AACZ,kBAAI,MAAM,cAAc,QAAS,OAAM,aAAa,QAAQ,CAAC;AAAA,YAC/D;AAAA,YAEC,gBAAM,aAAa,YAAY,MAAM,aAAa;AAAA;AAAA,QACrD,IAEA,MAAM,UAEV;AAAA,QACA,qBAAC,iBACC;AAAA,+BAAC,gBACC;AAAA,gCAAC,eAAa,iBAAM;AAAA,YACpB,oBAAC,qBAAmB,uBAAY;AAAA,aAClC;AAAA,UACA,qBAAC,gBACE;AAAA,uBAAW,eACV,oBAAC,YAAS,WAAU,YAAW,IAE/B,oBAAC,eAAY,SAAO,MAAC,UAAU,WAAW,cACxC;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACJ,GAAG,MAAM;AAAA,gBACV,UAAU,WAAW;AAAA,gBAEpB,gBAAM,YAAY,YAAY;AAAA;AAAA,YACjC,GACF;AAAA,YAED,WAAW,eACV,oBAAC,YAAS,WAAU,YAAW,IAE/B;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACJ,GAAG;AAAA,gBACJ,SAAS,OAAO,MAAM;AACpB,sBAAI,MAAM,cAAc,SAAS;AAC/B,0BAAM,aAAa,QAAQ,CAAC;AAAA,kBAC9B;AACA,sBAAI,WAAW;AACb,oCAAgB,IAAI;AACpB,0BAAM,UAAU;AAChB,oCAAgB,KAAK;AACrB,wBAAI,kBAAmB,SAAQ,KAAK;AAAA,kBACtC;AAAA,gBACF;AAAA,gBAEC,gBAAM,cAAc,YAAY;AAAA;AAAA,YACnC;AAAA,aAEJ;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/custom/country-selector.js

@@ -0,0 +1,151 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Badge } from "@repo/ayasofyazilim-ui/components/badge";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from "@repo/ayasofyazilim-ui/components/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "@repo/ayasofyazilim-ui/components/popover";
+import { ScrollArea } from "@repo/ayasofyazilim-ui/components/scroll-area";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { Globe } from "lucide-react";
+const lang = {
+  searchText: "Find",
+  searchEmptyValue: "No country found.",
+  defaultValue: {
+    label: "Test",
+    value: "tr"
+  },
+  countries: [
+    {
+      cultureName: "en",
+      uiCultureName: "en",
+      displayName: "English",
+      flagIcon: "en",
+      isEnabled: true,
+      isDefaultLanguage: true,
+      concurrencyStamp: "1a736aee0303420f9394ce3a98523e34",
+      creationTime: "2024-03-21T08:43:33.6867177",
+      creatorId: null,
+      id: "75fe277d-5138-285d-8088-3a1171b61635",
+      extraProperties: {}
+    },
+    {
+      cultureName: "tr",
+      uiCultureName: "tr",
+      displayName: "T\xFCrk\xE7e",
+      flagIcon: "tr",
+      isEnabled: true,
+      isDefaultLanguage: false,
+      concurrencyStamp: "095c8922c1b148bd9e161beca3c635ac",
+      creationTime: "2024-03-21T08:43:33.6892353",
+      creatorId: null,
+      id: "a8483e30-e0e6-e4e8-f2ff-3a1171b61638",
+      extraProperties: {}
+    }
+  ]
+};
+function CountrySelector({
+  searchText,
+  searchEmptyValue,
+  defaultValue,
+  menuAlign = "end",
+  showLabel = true,
+  showFlag = false,
+  countries = [],
+  onValueChange,
+  className
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [value, setValue] = React.useState(defaultValue || "");
+  function onSelect(currentValue) {
+    setValue(currentValue);
+    setOpen(false);
+    if (onValueChange) onValueChange(currentValue);
+  }
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        role: "combobox",
+        variant: "ghost",
+        "aria-expanded": open,
+        className: cn(className),
+        children: /* @__PURE__ */ jsx(Globe, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-40 p-0", align: menuAlign, children: /* @__PURE__ */ jsx(
+      Command,
+      {
+        filter: (commandValue, search) => {
+          if (commandValue.includes(search) || countries.find(
+            (i) => i.cultureName?.toLocaleLowerCase() === commandValue.toLocaleLowerCase()
+          )?.displayName?.toLocaleLowerCase()?.includes(search.toLocaleLowerCase()))
+            return 1;
+          return 0;
+        },
+        children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full overflow-auto", children: /* @__PURE__ */ jsxs(CommandList, { className: "h-full overflow-visible", children: [
+          /* @__PURE__ */ jsx(CommandInput, { placeholder: searchText, className: "h-9 text-xs" }),
+          /* @__PURE__ */ jsx(CommandEmpty, { children: searchEmptyValue }),
+          /* @__PURE__ */ jsx(CommandGroup, { children: countries.map((country) => /* @__PURE__ */ jsx(
+            CommandItem,
+            {
+              value: `${country.cultureName}` || "",
+              onSelect: (currentValue) => onSelect(currentValue),
+              children: /* @__PURE__ */ jsx(
+                SelectedCountry,
+                {
+                  ...country,
+                  showFlag,
+                  showLabel
+                }
+              )
+            },
+            country.cultureName
+          )) })
+        ] }) })
+      }
+    ) })
+  ] });
+}
+const SelectedCountry = ({
+  displayName,
+  flagIcon = "",
+  direction,
+  showLabel = true,
+  showFlag
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: `${direction === "rtl" && "flex-row-reverse"} rtl:flex-row-reverse flex w-full justify-between gap-2 overflow-hidden items-center`,
+    children: [
+      showLabel && /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground", children: displayName }),
+      /* @__PURE__ */ jsxs("div", { className: "h-auto", children: [
+        showFlag && /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: `https://cdn.jsdelivr.net/gh/lipis/flag-icons/flags/1x1/${flagIcon}.svg`,
+            alt: displayName || "",
+            className: "w-6 h-6 object-cover rounded-full"
+          }
+        ),
+        !showFlag && /* @__PURE__ */ jsx(Badge, { className: "text-xs py-0 px-1", children: flagIcon?.toUpperCase() || "N/A" })
+      ] })
+    ]
+  }
+);
+export {
+  CountrySelector,
+  lang
+};
+//# sourceMappingURL=country-selector.js.map

package/dist/custom/country-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/custom/country-selector.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\n\r\nimport { Badge } from \"@repo/ayasofyazilim-ui/components/badge\";\r\nimport { Button } from \"@repo/ayasofyazilim-ui/components/button\";\r\nimport {\r\n  Command,\r\n  CommandEmpty,\r\n  CommandGroup,\r\n  CommandInput,\r\n  CommandItem,\r\n  CommandList,\r\n} from \"@repo/ayasofyazilim-ui/components/command\";\r\nimport {\r\n  Popover,\r\n  PopoverContent,\r\n  PopoverTrigger,\r\n} from \"@repo/ayasofyazilim-ui/components/popover\";\r\nimport { ScrollArea } from \"@repo/ayasofyazilim-ui/components/scroll-area\";\r\nimport { cn } from \"@repo/ayasofyazilim-ui/lib/utils\";\r\nimport { Globe } from \"lucide-react\";\r\n\r\nexport const lang = {\r\n  searchText: \"Find\",\r\n  searchEmptyValue: \"No country found.\",\r\n  defaultValue: {\r\n    label: \"Test\",\r\n    value: \"tr\",\r\n  },\r\n  countries: [\r\n    {\r\n      cultureName: \"en\",\r\n      uiCultureName: \"en\",\r\n      displayName: \"English\",\r\n      flagIcon: \"en\",\r\n      isEnabled: true,\r\n      isDefaultLanguage: true,\r\n      concurrencyStamp: \"1a736aee0303420f9394ce3a98523e34\",\r\n      creationTime: \"2024-03-21T08:43:33.6867177\",\r\n      creatorId: null,\r\n      id: \"75fe277d-5138-285d-8088-3a1171b61635\",\r\n      extraProperties: {},\r\n    },\r\n    {\r\n      cultureName: \"tr\",\r\n      uiCultureName: \"tr\",\r\n      displayName: \"Türkçe\",\r\n      flagIcon: \"tr\",\r\n      isEnabled: true,\r\n      isDefaultLanguage: false,\r\n      concurrencyStamp: \"095c8922c1b148bd9e161beca3c635ac\",\r\n      creationTime: \"2024-03-21T08:43:33.6892353\",\r\n      creatorId: null,\r\n      id: \"a8483e30-e0e6-e4e8-f2ff-3a1171b61638\",\r\n      extraProperties: {},\r\n    },\r\n  ],\r\n};\r\nexport type CountryItem = {\r\n  concurrencyStamp?: string;\r\n  creationTime?: string;\r\n  creatorId?: string | null;\r\n  cultureName?: string | null;\r\n  direction?: \"rtl\" | \"ltr\" | null;\r\n  displayName?: string | null;\r\n  extraProperties?: object | null;\r\n  flagIcon?: string | null;\r\n  id?: string | null;\r\n  isDefaultLanguage?: boolean;\r\n  isEnabled?: boolean;\r\n  twoLetterISOLanguageName?: string | null;\r\n  uiCultureName?: string | null;\r\n};\r\n\r\ntype CountrySelectorProps = {\r\n  countries?: Array<CountryItem>;\r\n  defaultValue?: string;\r\n  menuAlign?: \"start\" | \"center\" | \"end\";\r\n  onValueChange?: (value: string) => void;\r\n  searchEmptyValue?: string;\r\n  searchText?: string;\r\n  showLabel?: boolean;\r\n  showFlag?: boolean;\r\n  tooltipText?: string;\r\n  className?: string;\r\n};\r\n\r\nexport function CountrySelector({\r\n  searchText,\r\n  searchEmptyValue,\r\n  defaultValue,\r\n  menuAlign = \"end\",\r\n  showLabel = true,\r\n  showFlag = false,\r\n  countries = [],\r\n  onValueChange,\r\n  className,\r\n}: CountrySelectorProps) {\r\n  const [open, setOpen] = React.useState(false);\r\n  const [value, setValue] = React.useState<string>(defaultValue || \"\");\r\n\r\n  function onSelect(currentValue: string) {\r\n    setValue(currentValue);\r\n    setOpen(false);\r\n    if (onValueChange) onValueChange(currentValue);\r\n  }\r\n  return (\r\n    <Popover open={open} onOpenChange={setOpen}>\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          role=\"combobox\"\r\n          variant=\"ghost\"\r\n          aria-expanded={open}\r\n          className={cn(className)}\r\n        >\r\n          <Globe />\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"w-40 p-0\" align={menuAlign}>\r\n        <Command\r\n          filter={(commandValue, search) => {\r\n            if (\r\n              commandValue.includes(search) ||\r\n              countries\r\n                .find(\r\n                  (i) =>\r\n                    i.cultureName?.toLocaleLowerCase() ===\r\n                    commandValue.toLocaleLowerCase()\r\n                )\r\n                ?.displayName?.toLocaleLowerCase()\r\n                ?.includes(search.toLocaleLowerCase())\r\n            )\r\n              return 1;\r\n            return 0;\r\n          }}\r\n        >\r\n          <ScrollArea className=\"h-full overflow-auto\">\r\n            <CommandList className=\"h-full overflow-visible\">\r\n              <CommandInput placeholder={searchText} className=\"h-9 text-xs\" />\r\n              <CommandEmpty>{searchEmptyValue}</CommandEmpty>\r\n              <CommandGroup>\r\n                {countries.map((country) => (\r\n                  <CommandItem\r\n                    key={country.cultureName}\r\n                    value={`${country.cultureName}` || \"\"}\r\n                    onSelect={(currentValue: string) => onSelect(currentValue)}\r\n                  >\r\n                    <SelectedCountry\r\n                      {...country}\r\n                      showFlag={showFlag}\r\n                      showLabel={showLabel}\r\n                    />\r\n                  </CommandItem>\r\n                ))}\r\n              </CommandGroup>\r\n            </CommandList>\r\n          </ScrollArea>\r\n        </Command>\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n}\r\n\r\ntype SelectedCountryProps = Partial<CountryItem> & {\r\n  showLabel?: boolean;\r\n  showFlag?: boolean;\r\n};\r\nconst SelectedCountry = ({\r\n  displayName,\r\n  flagIcon = \"\",\r\n  direction,\r\n  showLabel = true,\r\n  showFlag,\r\n}: SelectedCountryProps) => (\r\n  <div\r\n    className={`${direction === \"rtl\" && \"flex-row-reverse\"} rtl:flex-row-reverse flex w-full justify-between gap-2 overflow-hidden items-center`}\r\n  >\r\n    {showLabel && (\r\n      <span className=\"text-xs text-foreground\">{displayName}</span>\r\n    )}\r\n    <div className=\"h-auto\">\r\n      {showFlag && (\r\n        <img\r\n          src={`https://cdn.jsdelivr.net/gh/lipis/flag-icons/flags/1x1/${flagIcon}.svg`}\r\n          alt={displayName || \"\"}\r\n          className=\"w-6 h-6 object-cover rounded-full\"\r\n        />\r\n      )}\r\n      {!showFlag && (\r\n        <Badge className=\"text-xs py-0 px-1\">\r\n          {flagIcon?.toUpperCase() || \"N/A\"}\r\n        </Badge>\r\n      )}\r\n    </div>\r\n    {/* <div className=\"w-6 h-6\"> */}\r\n    {/* {showFlag  ?<img */}\r\n    {/* className=\"w-6 h-6 object-cover rounded-full\" */}\r\n    {/* src={`https://cdn.jsdelivr.net/gh/lipis/flag-icons/flags/1x1/${flagIcon}.svg`} */}\r\n    {/* alt={displayName || ''} */}\r\n    {/* />: <} */}\r\n    {/* </div> */}\r\n  </div>\r\n);\r\n"],"mappings":"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","names":[]}