@ayasofyazilim/ui 0.0.0 → 0.0.1

package/dist/custom/master-data-grid/utils/translation-utils.js

@@ -0,0 +1,33 @@
+function getTranslations(key, t, replacements) {
+  let text = t?.[key] ?? key;
+  if (replacements) {
+    Object.entries(replacements).forEach(([placeholder, value]) => {
+      text = text.replace(`{${placeholder}}`, value);
+    });
+  }
+  return text;
+}
+function getColumnName(column, t, fallback) {
+  if (typeof column === "string") {
+    const translationKey2 = `column.${column}`;
+    const translated = getTranslations(translationKey2, t);
+    if (translated !== translationKey2) {
+      return translated;
+    }
+    return fallback ?? column;
+  }
+  const translationKey = `column.${column.id}`;
+  if (t?.[translationKey]) {
+    return t[translationKey];
+  }
+  const header = column.columnDef.header;
+  if (typeof header === "string") {
+    return header;
+  }
+  return column.id;
+}
+export {
+  getColumnName,
+  getTranslations
+};
+//# sourceMappingURL=translation-utils.js.map

package/dist/custom/master-data-grid/utils/translation-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/custom/master-data-grid/utils/translation-utils.ts"],"sourcesContent":["import type { Column } from \"@tanstack/react-table\";\r\nimport type { MasterDataGridResources } from \"../types\";\r\n\r\nexport function getTranslations(\r\n  key: string,\r\n  t?: MasterDataGridResources,\r\n  replacements?: Record<string, string>\r\n): string {\r\n  let text = t?.[key] ?? key;\r\n\r\n  if (replacements) {\r\n    Object.entries(replacements).forEach(([placeholder, value]) => {\r\n      text = text.replace(`{${placeholder}}`, value);\r\n    });\r\n  }\r\n\r\n  return text;\r\n}\r\n\r\nexport function getColumnName<TData>(\r\n  column: Column<TData> | string,\r\n  t?: MasterDataGridResources,\r\n  fallback?: string\r\n): string {\r\n  if (typeof column === \"string\") {\r\n    const translationKey = `column.${column}`;\r\n    const translated = getTranslations(translationKey, t);\r\n    if (translated !== translationKey) {\r\n      return translated;\r\n    }\r\n    return fallback ?? column;\r\n  }\r\n  const translationKey = `column.${column.id}`;\r\n  if (t?.[translationKey]) {\r\n    return t[translationKey];\r\n  }\r\n  const header = column.columnDef.header;\r\n  if (typeof header === \"string\") {\r\n    return header;\r\n  }\r\n  return column.id;\r\n}\r\n"],"mappings":"AAGO,SAAS,gBACd,KACA,GACA,cACQ;AACR,MAAI,OAAO,IAAI,GAAG,KAAK;AAEvB,MAAI,cAAc;AAChB,WAAO,QAAQ,YAAY,EAAE,QAAQ,CAAC,CAAC,aAAa,KAAK,MAAM;AAC7D,aAAO,KAAK,QAAQ,IAAI,WAAW,KAAK,KAAK;AAAA,IAC/C,CAAC;AAAA,EACH;AAEA,SAAO;AACT;AAEO,SAAS,cACd,QACA,GACA,UACQ;AACR,MAAI,OAAO,WAAW,UAAU;AAC9B,UAAMA,kBAAiB,UAAU,MAAM;AACvC,UAAM,aAAa,gBAAgBA,iBAAgB,CAAC;AACpD,QAAI,eAAeA,iBAAgB;AACjC,aAAO;AAAA,IACT;AACA,WAAO,YAAY;AAAA,EACrB;AACA,QAAM,iBAAiB,UAAU,OAAO,EAAE;AAC1C,MAAI,IAAI,cAAc,GAAG;AACvB,WAAO,EAAE,cAAc;AAAA,EACzB;AACA,QAAM,SAAS,OAAO,UAAU;AAChC,MAAI,OAAO,WAAW,UAAU;AAC9B,WAAO;AAAA,EACT;AACA,SAAO,OAAO;AAChB;","names":["translationKey"]}

package/dist/custom/multi-select.js

@@ -0,0 +1,339 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import {
+  CheckIcon,
+  XCircle,
+  ChevronDown,
+  XIcon,
+  WandSparkles
+} from "lucide-react";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { Separator } from "@repo/ayasofyazilim-ui/components/separator";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import { Badge } from "@repo/ayasofyazilim-ui/components/badge";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "@repo/ayasofyazilim-ui/components/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator
+} from "@repo/ayasofyazilim-ui/components/command";
+const multiSelectVariants = cva(
+  "m-1 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300",
+  {
+    variants: {
+      variant: {
+        default: "border-foreground/10 text-foreground bg-card hover:bg-card/80",
+        secondary: "border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        inverted: "inverted"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+const MultiSelect = React.forwardRef(
+  ({
+    options,
+    onValueChange,
+    variant,
+    defaultValue = [],
+    placeholder = "Select options",
+    selectAllLabel = "Select all",
+    animation = 0,
+    maxCount = 3,
+    modalPopover = false,
+    className,
+    disabled,
+    ...props
+  }, ref) => {
+    const [selectedValues, setSelectedValues] = React.useState(defaultValue);
+    const previousDefaultValue = React.useRef(defaultValue);
+    React.useEffect(() => {
+      if (JSON.stringify(previousDefaultValue.current) !== JSON.stringify(defaultValue)) {
+        setSelectedValues(defaultValue);
+        previousDefaultValue.current = defaultValue;
+      }
+    }, [defaultValue]);
+    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+    const [isAnimating, setIsAnimating] = React.useState(false);
+    const handleInputKeyDown = (event) => {
+      if (event.key === "Enter") {
+        setIsPopoverOpen(true);
+      } else if (event.key === "Backspace" && !event.currentTarget.value) {
+        const newSelectedValues = [...selectedValues];
+        newSelectedValues.pop();
+        setSelectedValues(newSelectedValues);
+        if (onValueChange) onValueChange(newSelectedValues);
+      }
+    };
+    const toggleOption = (option) => {
+      const newSelectedValues = selectedValues.includes(option) ? selectedValues.filter((value) => value !== option) : [...selectedValues, option];
+      setSelectedValues(newSelectedValues);
+      if (onValueChange) onValueChange(newSelectedValues);
+    };
+    const handleClear = () => {
+      setSelectedValues(
+        selectedValues.filter(
+          (value) => !options.map((o) => !o.disabled && o.value).includes(value)
+        )
+      );
+      if (onValueChange) onValueChange([]);
+    };
+    const handleTogglePopover = () => {
+      setIsPopoverOpen((prev) => !prev);
+    };
+    const clearExtraOptions = () => {
+      const newSelectedValues = selectedValues.slice(0, maxCount);
+      setSelectedValues(newSelectedValues);
+      if (onValueChange) onValueChange(newSelectedValues);
+    };
+    const toggleAll = () => {
+      if (selectedValues.length === options.length) {
+        handleClear();
+      } else {
+        const allValues = options.map((option) => option.value);
+        setSelectedValues(allValues);
+        if (onValueChange) onValueChange(allValues);
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        open: isPopoverOpen,
+        onOpenChange: setIsPopoverOpen,
+        modal: modalPopover,
+        children: [
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              ref,
+              "data-testid": props.id,
+              type: "button",
+              disabled,
+              onClick: handleTogglePopover,
+              className: cn(
+                "flex w-full p-1 rounded-md border min-h-9 h-auto items-center justify-between bg-inherit hover:bg-inherit",
+                className
+              ),
+              children: selectedValues.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center w-full", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center", children: [
+                  selectedValues.slice(0, maxCount).map((value) => {
+                    const option = options.find((o) => o.value === value);
+                    const IconComponent = option?.icon;
+                    return /* @__PURE__ */ jsxs(
+                      Badge,
+                      {
+                        className: cn(
+                          isAnimating ? "animate-bounce" : "",
+                          multiSelectVariants({ variant })
+                        ),
+                        style: { animationDuration: `${animation}s` },
+                        children: [
+                          IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: "h-4 w-4 mr-2" }),
+                          option?.label,
+                          !option?.disabled && /* @__PURE__ */ jsx(
+                            XCircle,
+                            {
+                              className: "ml-2 h-4 w-4 cursor-pointer",
+                              onClick: (event) => {
+                                event.stopPropagation();
+                                toggleOption(value);
+                              }
+                            }
+                          )
+                        ]
+                      },
+                      value
+                    );
+                  }),
+                  selectedValues.length > maxCount && /* @__PURE__ */ jsxs(
+                    Badge,
+                    {
+                      className: cn(
+                        "bg-transparent text-foreground border-foreground/1 hover:bg-transparent",
+                        isAnimating ? "animate-bounce" : "",
+                        multiSelectVariants({ variant })
+                      ),
+                      style: { animationDuration: `${animation}s` },
+                      children: [
+                        `+ ${selectedValues.length - maxCount} more`,
+                        /* @__PURE__ */ jsx(
+                          XCircle,
+                          {
+                            className: "ml-2 h-4 w-4 cursor-pointer",
+                            onClick: (event) => {
+                              event.stopPropagation();
+                              clearExtraOptions();
+                            }
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                  options.filter((x) => x.disabled).length !== options.length && /* @__PURE__ */ jsx(
+                    XIcon,
+                    {
+                      className: "h-4 mx-2 cursor-pointer text-muted-foreground",
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        handleClear();
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Separator,
+                    {
+                      orientation: "vertical",
+                      className: "flex min-h-6 h-full"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 mx-2 cursor-pointer text-muted-foreground" })
+                ] })
+              ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full mx-auto", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-sm text-black mx-3 font-normal", children: placeholder }),
+                /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 cursor-pointer text-muted-foreground mx-2" })
+              ] })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            PopoverContent,
+            {
+              className: "p-0",
+              onEscapeKeyDown: () => setIsPopoverOpen(false),
+              children: /* @__PURE__ */ jsxs(Command, { className: "w-full", children: [
+                /* @__PURE__ */ jsx(
+                  CommandInput,
+                  {
+                    "data-testid": `${props.id}_search`,
+                    placeholder: "Search...",
+                    onKeyDown: handleInputKeyDown
+                  }
+                ),
+                /* @__PURE__ */ jsxs(CommandList, { children: [
+                  /* @__PURE__ */ jsx(CommandEmpty, { children: "No results found." }),
+                  /* @__PURE__ */ jsxs(CommandGroup, { children: [
+                    /* @__PURE__ */ jsxs(
+                      CommandItem,
+                      {
+                        "data-testid": `${props.id}_select_all`,
+                        onSelect: toggleAll,
+                        className: "cursor-pointer",
+                        disabled: options.filter((x) => x.disabled).length === options.length,
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              className: cn(
+                                "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                                selectedValues.length === options.length ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                              ),
+                              children: /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4" })
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs("span", { children: [
+                            "(",
+                            selectAllLabel,
+                            ")"
+                          ] })
+                        ]
+                      },
+                      "all"
+                    ),
+                    options.map((option) => {
+                      const isSelected = selectedValues.includes(option.value);
+                      return /* @__PURE__ */ jsxs(
+                        CommandItem,
+                        {
+                          "data-testid": `${props.id}_${option.value}`,
+                          onSelect: () => toggleOption(option.value),
+                          className: "cursor-pointer",
+                          disabled: option.disabled,
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                className: cn(
+                                  "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                                  isSelected ? "bg-primary text-primary-foreground" : "opacity-50 [&_svg]:invisible"
+                                ),
+                                children: /* @__PURE__ */ jsx(CheckIcon, { className: "h-4 w-4" })
+                              }
+                            ),
+                            option.icon && /* @__PURE__ */ jsx(option.icon, { className: "mr-2 h-4 w-4 text-muted-foreground" }),
+                            /* @__PURE__ */ jsx("span", { children: option.label }),
+                            option.children
+                          ]
+                        },
+                        option.value
+                      );
+                    })
+                  ] }),
+                  /* @__PURE__ */ jsx(CommandSeparator, {}),
+                  /* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                    selectedValues.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        CommandItem,
+                        {
+                          "data-testid": `${props.id}_clear`,
+                          onSelect: handleClear,
+                          className: "flex-1 justify-center cursor-pointer",
+                          disabled: options.filter((x) => x.disabled).length === options.length,
+                          children: "Clear"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Separator,
+                        {
+                          orientation: "vertical",
+                          className: "flex min-h-6 h-full"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      CommandItem,
+                      {
+                        "data-testid": `${props.id}_close`,
+                        onSelect: () => setIsPopoverOpen(false),
+                        className: "flex-1 justify-center cursor-pointer max-w-full",
+                        children: "Close"
+                      }
+                    )
+                  ] }) })
+                ] })
+              ] })
+            }
+          ),
+          animation > 0 && selectedValues.length > 0 && /* @__PURE__ */ jsx(
+            WandSparkles,
+            {
+              className: cn(
+                "cursor-pointer my-2 text-foreground bg-background w-3 h-3",
+                isAnimating ? "" : "text-muted-foreground"
+              ),
+              onClick: () => setIsAnimating(!isAnimating)
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+MultiSelect.displayName = "MultiSelect";
+export {
+  MultiSelect
+};
+//# sourceMappingURL=multi-select.js.map

package/dist/custom/multi-select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/custom/multi-select.tsx"],"sourcesContent":["\"use client\";\r\n\r\n// src/components/multi-select.tsx\r\nimport * as React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport {\r\n  CheckIcon,\r\n  XCircle,\r\n  ChevronDown,\r\n  XIcon,\r\n  WandSparkles,\r\n} from \"lucide-react\";\r\n\r\nimport { cn } from \"@repo/ayasofyazilim-ui/lib/utils\";\r\nimport { Separator } from \"@repo/ayasofyazilim-ui/components/separator\";\r\nimport { Button } from \"@repo/ayasofyazilim-ui/components/button\";\r\nimport { Badge } from \"@repo/ayasofyazilim-ui/components/badge\";\r\nimport {\r\n  Popover,\r\n  PopoverContent,\r\n  PopoverTrigger,\r\n} from \"@repo/ayasofyazilim-ui/components/popover\";\r\nimport {\r\n  Command,\r\n  CommandEmpty,\r\n  CommandGroup,\r\n  CommandInput,\r\n  CommandItem,\r\n  CommandList,\r\n  CommandSeparator,\r\n} from \"@repo/ayasofyazilim-ui/components/command\";\r\n\r\n/**\r\n * Variants for the multi-select component to handle different styles.\r\n * Uses class-variance-authority (cva) to define different styles based on \"variant\" prop.\r\n */\r\nconst multiSelectVariants = cva(\r\n  \"m-1 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300\",\r\n  {\r\n    variants: {\r\n      variant: {\r\n        default:\r\n          \"border-foreground/10 text-foreground bg-card hover:bg-card/80\",\r\n        secondary:\r\n          \"border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80\",\r\n        destructive:\r\n          \"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80\",\r\n        inverted: \"inverted\",\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      variant: \"default\",\r\n    },\r\n  }\r\n);\r\n\r\n/**\r\n * Props for MultiSelect component\r\n */\r\nexport interface MultiSelectProps\r\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n    VariantProps<typeof multiSelectVariants> {\r\n  /**\r\n   * Animation duration in seconds for the visual effects (e.g., bouncing badges).\r\n   * Optional, defaults to 0 (no animation).\r\n   */\r\n  animation?: number;\r\n\r\n  /**\r\n   * If true, renders the multi-select component as a child of another component.\r\n   * Optional, defaults to false.\r\n   */\r\n  asChild?: boolean;\r\n\r\n  /**\r\n   * Additional class names to apply custom styles to the multi-select component.\r\n   * Optional, can be used to add custom styles.\r\n   */\r\n  className?: string;\r\n\r\n  /** The default selected values when the component mounts. */\r\n  defaultValue?: string[];\r\n\r\n  /**\r\n   * Maximum number of items to display. Extra selected items will be summarized.\r\n   * Optional, defaults to 3.\r\n   */\r\n  maxCount?: number;\r\n\r\n  /**\r\n   * The modality of the popover. When set to true, interaction with outside elements\r\n   * will be disabled and only popover content will be visible to screen readers.\r\n   * Optional, defaults to false.\r\n   */\r\n  modalPopover?: boolean;\r\n\r\n  /**\r\n   * Callback function triggered when the selected values change.\r\n   * Receives an array of the new selected values.\r\n   */\r\n  onValueChange?: (value: string[]) => void;\r\n\r\n  /**\r\n   * An array of option objects to be displayed in the multi-select component.\r\n   * Each option object has a label, value, and an optional icon.\r\n   */\r\n  options: {\r\n    /** Optional icon component to display alongside the option. */\r\n    icon?: React.ComponentType<{ className?: string }>;\r\n    /** The text to display for the option. */\r\n    label: string;\r\n    /** The unique value associated with the option. */\r\n    value: string;\r\n    /** Optional badge component to display alongside the option. */\r\n    children?: React.ReactNode;\r\n    disabled?: boolean;\r\n  }[];\r\n\r\n  /**\r\n   * Placeholder text to be displayed when no values are selected.\r\n   * Optional, defaults to \"Select options\".\r\n   */\r\n  placeholder?: string;\r\n\r\n  /**\r\n   * selectAllLabel text to be displayed for select all option.\r\n   * Optional, defaults to \"Select all\".\r\n   */\r\n  selectAllLabel?: string;\r\n\r\n  /**\r\n   * If true, the multi-select component will be disabled.\r\n   * Optional, defaults to false.\r\n   */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const MultiSelect = React.forwardRef<\r\n  HTMLButtonElement,\r\n  MultiSelectProps\r\n>(\r\n  (\r\n    {\r\n      options,\r\n      onValueChange,\r\n      variant,\r\n      defaultValue = [],\r\n      placeholder = \"Select options\",\r\n      selectAllLabel = \"Select all\",\r\n      animation = 0,\r\n      maxCount = 3,\r\n      modalPopover = false,\r\n      className,\r\n      disabled,\r\n      ...props\r\n    },\r\n    ref\r\n  ) => {\r\n    const [selectedValues, setSelectedValues] =\r\n      React.useState<string[]>(defaultValue);\r\n    const previousDefaultValue = React.useRef<string[]>(defaultValue);\r\n    React.useEffect(() => {\r\n      if (\r\n        JSON.stringify(previousDefaultValue.current) !==\r\n        JSON.stringify(defaultValue)\r\n      ) {\r\n        setSelectedValues(defaultValue);\r\n        previousDefaultValue.current = defaultValue;\r\n      }\r\n    }, [defaultValue]);\r\n    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);\r\n    const [isAnimating, setIsAnimating] = React.useState(false);\r\n\r\n    const handleInputKeyDown = (\r\n      event: React.KeyboardEvent<HTMLInputElement>\r\n    ) => {\r\n      if (event.key === \"Enter\") {\r\n        setIsPopoverOpen(true);\r\n      } else if (event.key === \"Backspace\" && !event.currentTarget.value) {\r\n        const newSelectedValues = [...selectedValues];\r\n        newSelectedValues.pop();\r\n        setSelectedValues(newSelectedValues);\r\n        if (onValueChange) onValueChange(newSelectedValues);\r\n      }\r\n    };\r\n\r\n    const toggleOption = (option: string) => {\r\n      const newSelectedValues = selectedValues.includes(option)\r\n        ? selectedValues.filter((value) => value !== option)\r\n        : [...selectedValues, option];\r\n      setSelectedValues(newSelectedValues);\r\n      if (onValueChange) onValueChange(newSelectedValues);\r\n    };\r\n\r\n    const handleClear = () => {\r\n      setSelectedValues(\r\n        selectedValues.filter(\r\n          (value) => !options.map((o) => !o.disabled && o.value).includes(value)\r\n        )\r\n      );\r\n      if (onValueChange) onValueChange([]);\r\n    };\r\n\r\n    const handleTogglePopover = () => {\r\n      setIsPopoverOpen((prev) => !prev);\r\n    };\r\n\r\n    const clearExtraOptions = () => {\r\n      const newSelectedValues = selectedValues.slice(0, maxCount);\r\n      setSelectedValues(newSelectedValues);\r\n      if (onValueChange) onValueChange(newSelectedValues);\r\n    };\r\n\r\n    const toggleAll = () => {\r\n      if (selectedValues.length === options.length) {\r\n        handleClear();\r\n      } else {\r\n        const allValues = options.map((option) => option.value);\r\n        setSelectedValues(allValues);\r\n        if (onValueChange) onValueChange(allValues);\r\n      }\r\n    };\r\n\r\n    return (\r\n      <Popover\r\n        open={isPopoverOpen}\r\n        onOpenChange={setIsPopoverOpen}\r\n        modal={modalPopover}\r\n      >\r\n        <PopoverTrigger asChild className=\"w-full\">\r\n          <Button\r\n            ref={ref}\r\n            data-testid={props.id}\r\n            type=\"button\"\r\n            disabled={disabled}\r\n            onClick={handleTogglePopover}\r\n            className={cn(\r\n              \"flex w-full p-1 rounded-md border min-h-9 h-auto items-center justify-between bg-inherit hover:bg-inherit\",\r\n              className\r\n            )}\r\n          >\r\n            {selectedValues.length > 0 ? (\r\n              <div className=\"flex justify-between items-center w-full\">\r\n                <div className=\"flex flex-wrap items-center\">\r\n                  {selectedValues.slice(0, maxCount).map((value) => {\r\n                    const option = options.find((o) => o.value === value);\r\n                    const IconComponent = option?.icon;\r\n                    return (\r\n                      <Badge\r\n                        key={value}\r\n                        className={cn(\r\n                          isAnimating ? \"animate-bounce\" : \"\",\r\n                          multiSelectVariants({ variant })\r\n                        )}\r\n                        style={{ animationDuration: `${animation}s` }}\r\n                      >\r\n                        {IconComponent && (\r\n                          <IconComponent className=\"h-4 w-4 mr-2\" />\r\n                        )}\r\n                        {option?.label}\r\n                        {!option?.disabled && (\r\n                          <XCircle\r\n                            className=\"ml-2 h-4 w-4 cursor-pointer\"\r\n                            onClick={(event) => {\r\n                              event.stopPropagation();\r\n                              toggleOption(value);\r\n                            }}\r\n                          />\r\n                        )}\r\n                      </Badge>\r\n                    );\r\n                  })}\r\n                  {selectedValues.length > maxCount && (\r\n                    <Badge\r\n                      className={cn(\r\n                        \"bg-transparent text-foreground border-foreground/1 hover:bg-transparent\",\r\n                        isAnimating ? \"animate-bounce\" : \"\",\r\n                        multiSelectVariants({ variant })\r\n                      )}\r\n                      style={{ animationDuration: `${animation}s` }}\r\n                    >\r\n                      {`+ ${selectedValues.length - maxCount} more`}\r\n                      <XCircle\r\n                        className=\"ml-2 h-4 w-4 cursor-pointer\"\r\n                        onClick={(event) => {\r\n                          event.stopPropagation();\r\n                          clearExtraOptions();\r\n                        }}\r\n                      />\r\n                    </Badge>\r\n                  )}\r\n                </div>\r\n                <div className=\"flex items-center justify-between\">\r\n                  {options.filter((x) => x.disabled).length !==\r\n                    options.length && (\r\n                    <XIcon\r\n                      className=\"h-4 mx-2 cursor-pointer text-muted-foreground\"\r\n                      onClick={(event) => {\r\n                        event.stopPropagation();\r\n                        handleClear();\r\n                      }}\r\n                    />\r\n                  )}\r\n                  <Separator\r\n                    orientation=\"vertical\"\r\n                    className=\"flex min-h-6 h-full\"\r\n                  />\r\n                  <ChevronDown className=\"h-4 mx-2 cursor-pointer text-muted-foreground\" />\r\n                </div>\r\n              </div>\r\n            ) : (\r\n              <div className=\"flex items-center justify-between w-full mx-auto\">\r\n                <span className=\"text-sm text-black mx-3 font-normal\">\r\n                  {placeholder}\r\n                </span>\r\n                <ChevronDown className=\"h-4 cursor-pointer text-muted-foreground mx-2\" />\r\n              </div>\r\n            )}\r\n          </Button>\r\n        </PopoverTrigger>\r\n        <PopoverContent\r\n          className=\"p-0\"\r\n          onEscapeKeyDown={() => setIsPopoverOpen(false)}\r\n        >\r\n          <Command className=\"w-full\">\r\n            <CommandInput\r\n              data-testid={`${props.id}_search`}\r\n              placeholder=\"Search...\"\r\n              onKeyDown={handleInputKeyDown}\r\n            />\r\n            <CommandList>\r\n              <CommandEmpty>No results found.</CommandEmpty>\r\n              <CommandGroup>\r\n                <CommandItem\r\n                  data-testid={`${props.id}_select_all`}\r\n                  key=\"all\"\r\n                  onSelect={toggleAll}\r\n                  className=\"cursor-pointer\"\r\n                  disabled={\r\n                    options.filter((x) => x.disabled).length === options.length\r\n                  }\r\n                >\r\n                  <div\r\n                    className={cn(\r\n                      \"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary\",\r\n                      selectedValues.length === options.length\r\n                        ? \"bg-primary text-primary-foreground\"\r\n                        : \"opacity-50 [&_svg]:invisible\"\r\n                    )}\r\n                  >\r\n                    <CheckIcon className=\"h-4 w-4\" />\r\n                  </div>\r\n                  <span>({selectAllLabel})</span>\r\n                </CommandItem>\r\n                {options.map((option) => {\r\n                  const isSelected = selectedValues.includes(option.value);\r\n                  return (\r\n                    <CommandItem\r\n                      data-testid={`${props.id}_${option.value}`}\r\n                      key={option.value}\r\n                      onSelect={() => toggleOption(option.value)}\r\n                      className=\"cursor-pointer\"\r\n                      disabled={option.disabled}\r\n                    >\r\n                      <div\r\n                        className={cn(\r\n                          \"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary\",\r\n                          isSelected\r\n                            ? \"bg-primary text-primary-foreground\"\r\n                            : \"opacity-50 [&_svg]:invisible\"\r\n                        )}\r\n                      >\r\n                        <CheckIcon className=\"h-4 w-4\" />\r\n                      </div>\r\n                      {option.icon && (\r\n                        <option.icon className=\"mr-2 h-4 w-4 text-muted-foreground\" />\r\n                      )}\r\n                      <span>{option.label}</span>\r\n                      {option.children}\r\n                    </CommandItem>\r\n                  );\r\n                })}\r\n              </CommandGroup>\r\n              <CommandSeparator />\r\n              <CommandGroup>\r\n                <div className=\"flex items-center justify-between\">\r\n                  {selectedValues.length > 0 && (\r\n                    <>\r\n                      <CommandItem\r\n                        data-testid={`${props.id}_clear`}\r\n                        onSelect={handleClear}\r\n                        className=\"flex-1 justify-center cursor-pointer\"\r\n                        disabled={\r\n                          options.filter((x) => x.disabled).length ===\r\n                          options.length\r\n                        }\r\n                      >\r\n                        Clear\r\n                      </CommandItem>\r\n                      <Separator\r\n                        orientation=\"vertical\"\r\n                        className=\"flex min-h-6 h-full\"\r\n                      />\r\n                    </>\r\n                  )}\r\n                  <CommandItem\r\n                    data-testid={`${props.id}_close`}\r\n                    onSelect={() => setIsPopoverOpen(false)}\r\n                    className=\"flex-1 justify-center cursor-pointer max-w-full\"\r\n                  >\r\n                    Close\r\n                  </CommandItem>\r\n                </div>\r\n              </CommandGroup>\r\n            </CommandList>\r\n          </Command>\r\n        </PopoverContent>\r\n        {animation > 0 && selectedValues.length > 0 && (\r\n          <WandSparkles\r\n            className={cn(\r\n              \"cursor-pointer my-2 text-foreground bg-background w-3 h-3\",\r\n              isAnimating ? \"\" : \"text-muted-foreground\"\r\n            )}\r\n            onClick={() => setIsAnimating(!isAnimating)}\r\n          />\r\n        )}\r\n      </Popover>\r\n    );\r\n  }\r\n);\r\n\r\nMultiSelect.displayName = \"MultiSelect\";\r\n"],"mappings":"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","names":[]}

package/dist/custom/password-input.js

@@ -0,0 +1,158 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { EyeIcon, EyeOffIcon, RotateCcwKey } from "lucide-react";
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput
+} from "../components/input-group";
+const PasswordInput = forwardRef(
+  ({ className, showGenerator = false, passwordLength = 10, ...props }, ref) => {
+    const [showPassword, setShowPassword] = useState(false);
+    const internalRef = useRef(null);
+    const { disabled } = props;
+    useImperativeHandle(ref, () => internalRef.current, []);
+    const characterSets = useMemo(() => {
+      const sets = {
+        lowercase: "abcdefghijklmnopqrstuvwxyz",
+        uppercase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
+        numbers: "0123456789",
+        symbols: "!@#$%^&*()_+-=[]{}|;:,.<>?"
+      };
+      return {
+        ...sets,
+        all: sets.lowercase + sets.uppercase + sets.numbers + sets.symbols
+      };
+    }, []);
+    const inputClassName = useMemo(
+      () => cn(
+        "hide-password-toggle",
+        showGenerator ? "pr-20" : "pr-10",
+        className
+      ),
+      [showGenerator, className]
+    );
+    const getRandomInt = useCallback((max) => {
+      if (typeof window !== "undefined" && window.crypto?.getRandomValues) {
+        const array = new Uint32Array(1);
+        window.crypto.getRandomValues(array);
+        return (array[0] ?? 0) % max;
+      }
+      return Math.floor(Math.random() * max);
+    }, []);
+    const shuffleArray = useCallback(
+      (array) => {
+        const shuffled = [...array];
+        for (let i = shuffled.length - 1; i > 0; i--) {
+          const j = getRandomInt(i + 1);
+          const elemI = shuffled[i];
+          const elemJ = shuffled[j];
+          if (elemI !== void 0 && elemJ !== void 0) {
+            [shuffled[i], shuffled[j]] = [elemJ, elemI];
+          }
+        }
+        return shuffled;
+      },
+      [getRandomInt]
+    );
+    const generatePassword = useCallback(
+      (length = passwordLength) => {
+        const { lowercase, uppercase, numbers, symbols, all } = characterSets;
+        const requiredChars = [
+          lowercase[getRandomInt(lowercase.length)],
+          uppercase[getRandomInt(uppercase.length)],
+          numbers[getRandomInt(numbers.length)],
+          symbols[getRandomInt(symbols.length)]
+        ];
+        const remainingLength = Math.max(0, length - requiredChars.length);
+        const additionalChars = Array.from(
+          { length: remainingLength },
+          () => all[getRandomInt(all.length)]
+        );
+        const allChars = [...requiredChars, ...additionalChars];
+        return shuffleArray(allChars).join("");
+      },
+      [passwordLength, characterSets, getRandomInt, shuffleArray]
+    );
+    const dispatchInputEvents = useCallback(
+      (input, value) => {
+        const _input = input;
+        const descriptor = Object.getOwnPropertyDescriptor(
+          HTMLInputElement.prototype,
+          "value"
+        );
+        if (descriptor?.set) {
+          descriptor.set.call(_input, value);
+        } else {
+          _input.value = value;
+        }
+        const inputEvent = new Event("input", { bubbles: true });
+        const changeEvent = new Event("change", { bubbles: true });
+        _input.dispatchEvent(inputEvent);
+        _input.dispatchEvent(changeEvent);
+      },
+      []
+    );
+    const handleGeneratePassword = useCallback(() => {
+      if (disabled || !internalRef.current) return;
+      const newPassword = generatePassword(passwordLength);
+      dispatchInputEvents(internalRef.current, newPassword);
+    }, [disabled, generatePassword, passwordLength, dispatchInputEvents]);
+    const togglePasswordVisibility = useCallback(() => {
+      setShowPassword((prev) => !prev);
+    }, []);
+    return /* @__PURE__ */ jsxs(InputGroup, { children: [
+      /* @__PURE__ */ jsx(
+        InputGroupInput,
+        {
+          placeholder: props.placeholder,
+          className: inputClassName,
+          ref: internalRef,
+          ...props,
+          type: showPassword ? "text" : "password"
+        }
+      ),
+      /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-end", children: /* @__PURE__ */ jsx(
+        InputGroupButton,
+        {
+          id: "toggle-password-visibility-button",
+          variant: "ghost",
+          "aria-label": showPassword ? "Hide password" : "Show password",
+          size: "icon-xs",
+          onClick: togglePasswordVisibility,
+          disabled,
+          children: showPassword ? /* @__PURE__ */ jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {})
+        }
+      ) }),
+      showGenerator && /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-start", children: /* @__PURE__ */ jsxs(
+        InputGroupButton,
+        {
+          id: "generate-password-button",
+          variant: "ghost",
+          size: "icon-xs",
+          onClick: handleGeneratePassword,
+          disabled,
+          children: [
+            /* @__PURE__ */ jsx(RotateCcwKey, {}),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Generate password" })
+          ]
+        }
+      ) })
+    ] });
+  }
+);
+PasswordInput.displayName = "PasswordInput";
+export {
+  PasswordInput
+};
+//# sourceMappingURL=password-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/custom/password-input.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { InputProps } from \"@repo/ayasofyazilim-ui/components/input\";\r\nimport { cn } from \"@repo/ayasofyazilim-ui/lib/utils\";\r\nimport { EyeIcon, EyeOffIcon, RotateCcwKey } from \"lucide-react\";\r\nimport {\r\n  forwardRef,\r\n  useCallback,\r\n  useImperativeHandle,\r\n  useMemo,\r\n  useRef,\r\n  useState,\r\n} from \"react\";\r\nimport {\r\n  InputGroup,\r\n  InputGroupAddon,\r\n  InputGroupButton,\r\n  InputGroupInput,\r\n} from \"../components/input-group\";\r\n\r\ninterface PasswordInputProps extends InputProps {\r\n  passwordLength?: number;\r\n  showGenerator?: boolean;\r\n}\r\n\r\nconst PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(\r\n  (\r\n    { className, showGenerator = false, passwordLength = 10, ...props },\r\n    ref\r\n  ) => {\r\n    const [showPassword, setShowPassword] = useState(false);\r\n    const internalRef = useRef<HTMLInputElement>(null);\r\n    const { disabled } = props;\r\n\r\n    useImperativeHandle(ref, () => internalRef.current!, []);\r\n\r\n    // Memoize character sets to avoid recreation on every render\r\n    const characterSets = useMemo(() => {\r\n      const sets = {\r\n        lowercase: \"abcdefghijklmnopqrstuvwxyz\",\r\n        uppercase: \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\",\r\n        numbers: \"0123456789\",\r\n        symbols: \"!@#$%^&*()_+-=[]{}|;:,.<>?\",\r\n      };\r\n\r\n      return {\r\n        ...sets,\r\n        all: sets.lowercase + sets.uppercase + sets.numbers + sets.symbols,\r\n      };\r\n    }, []);\r\n    // Memoize class names to prevent unnecessary re-renders\r\n    const inputClassName = useMemo(\r\n      () =>\r\n        cn(\r\n          \"hide-password-toggle\",\r\n          showGenerator ? \"pr-20\" : \"pr-10\",\r\n          className\r\n        ),\r\n      [showGenerator, className]\r\n    );\r\n\r\n    // Use crypto.getRandomValues for better randomness when available\r\n    const getRandomInt = useCallback((max: number): number => {\r\n      if (typeof window !== \"undefined\" && window.crypto?.getRandomValues) {\r\n        const array = new Uint32Array(1);\r\n        window.crypto.getRandomValues(array);\r\n        return (array[0] ?? 0) % max;\r\n      }\r\n      return Math.floor(Math.random() * max);\r\n    }, []);\r\n\r\n    // Fisher-Yates shuffle algorithm for better randomization\r\n    const shuffleArray = useCallback(\r\n      (array: string[]): string[] => {\r\n        const shuffled = [...array];\r\n        for (let i = shuffled.length - 1; i > 0; i--) {\r\n          const j = getRandomInt(i + 1);\r\n          const elemI = shuffled[i];\r\n          const elemJ = shuffled[j];\r\n          if (elemI !== undefined && elemJ !== undefined) {\r\n            [shuffled[i], shuffled[j]] = [elemJ, elemI];\r\n          }\r\n        }\r\n        return shuffled;\r\n      },\r\n      [getRandomInt]\r\n    );\r\n\r\n    const generatePassword = useCallback(\r\n      (length: number = passwordLength): string => {\r\n        const { lowercase, uppercase, numbers, symbols, all } = characterSets;\r\n\r\n        // Ensure minimum requirements\r\n        const requiredChars = [\r\n          lowercase[getRandomInt(lowercase.length)],\r\n          uppercase[getRandomInt(uppercase.length)],\r\n          numbers[getRandomInt(numbers.length)],\r\n          symbols[getRandomInt(symbols.length)],\r\n        ];\r\n\r\n        // Fill remaining positions\r\n        const remainingLength = Math.max(0, length - requiredChars.length);\r\n        const additionalChars = Array.from(\r\n          { length: remainingLength },\r\n          () => all[getRandomInt(all.length)]\r\n        );\r\n\r\n        // Combine and shuffle\r\n        const allChars = [...requiredChars, ...additionalChars] as string[];\r\n        return shuffleArray(allChars).join(\"\");\r\n      },\r\n      [passwordLength, characterSets, getRandomInt, shuffleArray]\r\n    );\r\n\r\n    // Optimized event dispatching\r\n    const dispatchInputEvents = useCallback(\r\n      (input: HTMLInputElement, value: string) => {\r\n        const _input = input;\r\n        // Use React's internal event system when possible\r\n        const descriptor = Object.getOwnPropertyDescriptor(\r\n          HTMLInputElement.prototype,\r\n          \"value\"\r\n        );\r\n        if (descriptor?.set) {\r\n          descriptor.set.call(_input, value);\r\n        } else {\r\n          _input.value = value;\r\n        }\r\n\r\n        // Dispatch events in the correct order\r\n        const inputEvent = new Event(\"input\", { bubbles: true });\r\n        const changeEvent = new Event(\"change\", { bubbles: true });\r\n\r\n        _input.dispatchEvent(inputEvent);\r\n        _input.dispatchEvent(changeEvent);\r\n      },\r\n      []\r\n    );\r\n\r\n    const handleGeneratePassword = useCallback(() => {\r\n      if (disabled || !internalRef.current) return;\r\n\r\n      const newPassword = generatePassword(passwordLength);\r\n      dispatchInputEvents(internalRef.current, newPassword);\r\n    }, [disabled, generatePassword, passwordLength, dispatchInputEvents]);\r\n\r\n    const togglePasswordVisibility = useCallback(() => {\r\n      setShowPassword((prev) => !prev);\r\n    }, []);\r\n\r\n    return (\r\n      <InputGroup>\r\n        <InputGroupInput\r\n          placeholder={props.placeholder}\r\n          className={inputClassName}\r\n          ref={internalRef}\r\n          {...props}\r\n          type={showPassword ? \"text\" : \"password\"}\r\n        />\r\n        <InputGroupAddon align=\"inline-end\">\r\n          <InputGroupButton\r\n            id=\"toggle-password-visibility-button\"\r\n            variant=\"ghost\"\r\n            aria-label={showPassword ? \"Hide password\" : \"Show password\"}\r\n            size=\"icon-xs\"\r\n            onClick={togglePasswordVisibility}\r\n            disabled={disabled}\r\n          >\r\n            {showPassword ? <EyeOffIcon /> : <EyeIcon />}\r\n          </InputGroupButton>\r\n        </InputGroupAddon>\r\n        {showGenerator && (\r\n          <InputGroupAddon align=\"inline-start\">\r\n            <InputGroupButton\r\n              id=\"generate-password-button\"\r\n              variant=\"ghost\"\r\n              size=\"icon-xs\"\r\n              onClick={handleGeneratePassword}\r\n              disabled={disabled}\r\n            >\r\n              <RotateCcwKey />\r\n              <span className=\"sr-only\">Generate password</span>\r\n            </InputGroupButton>\r\n          </InputGroupAddon>\r\n        )}\r\n      </InputGroup>\r\n    );\r\n  }\r\n);\r\n\r\nPasswordInput.displayName = \"PasswordInput\";\r\n\r\nexport { PasswordInput };\r\nexport type { PasswordInputProps };\r\n"],"mappings":"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","names":[]}