pillardash-ui-react 0.1.131 → 0.1.138

package/dist/cjs/components/Form/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../../../src/components/Form/Select/Select.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\nimport { ChevronDown, X, Loader2 } from \"lucide-react\";\n\nexport interface SelectOption {\n  value: string;\n  label?: string;\n  disabled?: boolean;\n}\n\nexport type SelectProps = {\n  options: SelectOption[];\n  placeholder?: string;\n  onChange: (value: React.ChangeEvent<HTMLSelectElement>) => void;\n  value?: string | string[];\n  size?: \"sm\" | \"md\" | \"lg\";\n  className?: string;\n  name?: string;\n  id?: string;\n  disabled?: boolean;\n  label?: string;\n  required?: boolean;\n  error?: string;\n  helpText?: string;\n  fullWidth?: boolean;\n  searchable?: boolean;\n\n  // NEW: Backend search props\n  onSearch?: (searchTerm: string) => void | Promise<void>;\n  isSearching?: boolean;\n  searchDebounceMs?: number;\n\n  multiple?: boolean;\n  maxSelected?: number;\n  showSelectedCount?: boolean;\n  closeOnSelect?: boolean;\n  showSelectAll?: boolean;\n};\n\nexport default function Select({\n  options,\n  placeholder = \"Select an option\",\n  onChange,\n  value,\n  size = \"md\",\n  className = \"\",\n  name,\n  id,\n  disabled = false,\n  label,\n  required,\n  error,\n  helpText,\n  fullWidth = true,\n  searchable = false,\n  onSearch,\n  isSearching = false,\n  searchDebounceMs = 300,\n  multiple = false,\n  maxSelected,\n  showSelectedCount = false,\n  closeOnSelect,\n  showSelectAll = true,\n}: SelectProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [searchTerm, setSearchTerm] = useState(\"\");\n  const [dropdownPosition, setDropdownPosition] = useState<\"bottom\" | \"top\">(\n    \"bottom\",\n  );\n\n  const shouldCloseOnSelect =\n    closeOnSelect !== undefined ? closeOnSelect : !multiple;\n\n  const [selectedOptions, setSelectedOptions] = useState<SelectOption[]>(() => {\n    if (!value) return [];\n\n    if (multiple && Array.isArray(value)) {\n      return value\n        .map((val) => options.find((option) => option.value == val))\n        .filter(Boolean) as SelectOption[];\n    } else if (!multiple) {\n      const option = options.find((option) => option.value == value);\n      return option ? [option] : [];\n    }\n    return [];\n  });\n\n  const selectRef = useRef<HTMLDivElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (multiple && Array.isArray(value)) {\n      setSelectedOptions(\n        value\n          .map((val) => options.find((option) => option.value == val))\n          .filter(Boolean) as SelectOption[],\n      );\n    } else if (!multiple) {\n      const option = options.find((option) => option.value == value);\n      setSelectedOptions(option ? [option] : []);\n    } else if (value === \"\" || value === null || value == undefined) {\n      setSelectedOptions([]);\n    }\n  }, [value, options, multiple]);\n\n  useEffect(() => {\n    if (isOpen && selectRef.current) {\n      const selectRect = selectRef.current.getBoundingClientRect();\n      const viewportHeight = window.innerHeight;\n      const dropdownHeight = 250;\n      const spaceBelow = viewportHeight - selectRect.bottom;\n      const spaceAbove = selectRect.top;\n\n      if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {\n        setDropdownPosition(\"top\");\n      } else {\n        setDropdownPosition(\"bottom\");\n      }\n    }\n  }, [isOpen]);\n\n  // Handle search with debouncing\n  useEffect(() => {\n    if (!onSearch || !searchTerm) return;\n\n    if (searchTimeoutRef.current) {\n      clearTimeout(searchTimeoutRef.current);\n    }\n\n    searchTimeoutRef.current = setTimeout(() => {\n      onSearch(searchTerm);\n    }, searchDebounceMs);\n\n    return () => {\n      if (searchTimeoutRef.current) {\n        clearTimeout(searchTimeoutRef.current);\n      }\n    };\n  }, [searchTerm, onSearch, searchDebounceMs]);\n\n  // Filter options based on search term if using client-side search\n  const filteredOptions =\n    searchable && !onSearch\n      ? options.filter((option) =>\n          (option.label || option.value)\n            .toLowerCase()\n            .includes(searchTerm.toLowerCase()),\n        )\n      : options;\n\n  const handleSelect = (option: SelectOption) => {\n    if (option.disabled) return;\n\n    let newSelectedOptions: SelectOption[];\n\n    if (multiple) {\n      const isAlreadySelected = selectedOptions.some(\n        (selected) => selected.value === option.value,\n      );\n\n      if (isAlreadySelected) {\n        newSelectedOptions = selectedOptions.filter(\n          (selected) => selected.value !== option.value,\n        );\n      } else {\n        if (maxSelected && selectedOptions.length >= maxSelected) {\n          return;\n        }\n        newSelectedOptions = [...selectedOptions, option];\n      }\n    } else {\n      newSelectedOptions = [option];\n    }\n\n    setSelectedOptions(newSelectedOptions);\n\n    const eventValue = multiple\n      ? newSelectedOptions.map((opt) => opt.value)\n      : newSelectedOptions[0]?.value || \"\";\n\n    onChange({\n      target: {\n        id: id || \"\",\n        value: eventValue,\n      },\n    } as React.ChangeEvent<HTMLSelectElement>);\n\n    if (shouldCloseOnSelect) {\n      setIsOpen(false);\n      setSearchTerm(\"\");\n    }\n  };\n\n  const handleSelectAll = () => {\n    if (!multiple) return;\n\n    const selectableOptions = filteredOptions.filter((opt) => !opt.disabled);\n    const allSelected = selectableOptions.every((option) =>\n      selectedOptions.some((selected) => selected.value === option.value),\n    );\n\n    let newSelectedOptions: SelectOption[];\n\n    if (allSelected) {\n      newSelectedOptions = selectedOptions.filter(\n        (selected) =>\n          !selectableOptions.some((option) => option.value === selected.value),\n      );\n    } else {\n      const optionsToAdd = selectableOptions.filter(\n        (option) =>\n          !selectedOptions.some((selected) => selected.value === option.value),\n      );\n\n      if (maxSelected !== undefined) {\n        const remainingSlots = maxSelected - selectedOptions.length;\n        newSelectedOptions = [\n          ...selectedOptions,\n          ...optionsToAdd.slice(0, remainingSlots),\n        ];\n      } else {\n        newSelectedOptions = [...selectedOptions, ...optionsToAdd];\n      }\n    }\n\n    setSelectedOptions(newSelectedOptions);\n\n    const eventValue = newSelectedOptions.map((opt) => opt.value);\n\n    onChange({\n      target: {\n        id: id || \"\",\n        value: eventValue,\n      },\n    } as unknown as React.ChangeEvent<HTMLSelectElement>);\n  };\n\n  const handleClearAll = () => {\n    if (!multiple) return;\n\n    setSelectedOptions([]);\n\n    onChange({\n      target: {\n        id: id || \"\",\n        value: [],\n      },\n    } as unknown as React.ChangeEvent<HTMLSelectElement>);\n  };\n\n  const removeOption = (optionToRemove: SelectOption, e: React.MouseEvent) => {\n    e.stopPropagation();\n    const newSelectedOptions = selectedOptions.filter(\n      (option) => option.value !== optionToRemove.value,\n    );\n    setSelectedOptions(newSelectedOptions);\n\n    const eventValue = multiple\n      ? newSelectedOptions.map((opt) => opt.value)\n      : \"\";\n\n    onChange({\n      target: {\n        id: id || \"\",\n        value: eventValue,\n      },\n    } as React.ChangeEvent<HTMLSelectElement>);\n  };\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        selectRef.current &&\n        !selectRef.current.contains(event.target as Node)\n      ) {\n        setIsOpen(false);\n        setSearchTerm(\"\");\n      }\n    };\n\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n    };\n  }, []);\n\n  const sizeClasses = {\n    sm: \"text-xs px-3 py-1.5 text-sm min-h-[32px]\",\n    md: \"text-sm px-4 py-2 text-base min-h-[40px]\",\n    lg: \"text-base px-4 py-3 text-lg min-h-[48px]\",\n  };\n\n  const getDisplayText = () => {\n    if (selectedOptions.length === 0) return placeholder;\n\n    if (!multiple) {\n      return selectedOptions[0]?.label || selectedOptions[0]?.value;\n    }\n\n    if (showSelectedCount && selectedOptions.length > 2) {\n      return `${selectedOptions.length} items selected`;\n    }\n\n    if (selectedOptions.length <= 2) {\n      return selectedOptions.map((opt) => opt.label || opt.value).join(\", \");\n    }\n\n    return `${selectedOptions[0]?.label || selectedOptions[0]?.value} +${selectedOptions.length - 1} more`;\n  };\n\n  const isOptionSelected = (option: SelectOption) => {\n    return selectedOptions.some((selected) => selected.value === option.value);\n  };\n\n  const areAllFilteredSelected = () => {\n    if (!multiple || filteredOptions.length === 0) return false;\n    const selectableOptions = filteredOptions.filter((opt) => !opt.disabled);\n    return (\n      selectableOptions.length > 0 &&\n      selectableOptions.every((option) =>\n        selectedOptions.some((selected) => selected.value === option.value),\n      )\n    );\n  };\n\n  const areSomeFilteredSelected = () => {\n    if (!multiple || filteredOptions.length === 0) return false;\n    const selectableOptions = filteredOptions.filter((opt) => !opt.disabled);\n    return (\n      selectableOptions.some((option) =>\n        selectedOptions.some((selected) => selected.value === option.value),\n      ) && !areAllFilteredSelected()\n    );\n  };\n\n  const dropdownPositionClasses =\n    dropdownPosition === \"top\" ? \"bottom-full mb-1\" : \"top-full mt-1\";\n\n  return (\n    <div ref={selectRef} className={`${fullWidth ? \"w-full\" : \"w-fit\"} mb-4`}>\n      {label && (\n        <label\n          htmlFor={id}\n          className=\"mb-1 block text-sm font-medium text-gray-700\"\n        >\n          {label}\n          {required && <span className=\"ml-1 text-red-500\">*</span>}\n        </label>\n      )}\n\n      <div className=\"relative\">\n        <button\n          type=\"button\"\n          className={`flex items-center justify-between rounded-lg border ${\n            error ? \"border-red-500\" : \"border-gray-200\"\n          } bg-gray-100 shadow-sm ${\n            sizeClasses[size]\n          } text-gray-700 hover:border-gray-300 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20 ${\n            disabled ? \"cursor-not-allowed bg-gray-50 opacity-50\" : \"\"\n          } ${className} ${fullWidth ? \"w-full\" : \"\"} transition-all duration-200`}\n          onClick={() => !disabled && setIsOpen(!isOpen)}\n          disabled={disabled}\n          id={id}\n          aria-haspopup=\"listbox\"\n          aria-expanded={isOpen}\n        >\n          <div className=\"flex-1 flex items-center gap-1 min-w-0\">\n            {multiple && selectedOptions.length > 0 ? (\n              <div className=\"flex flex-wrap gap-1 flex-1\">\n                {selectedOptions.slice(0, 3).map((option) => (\n                  <span\n                    key={option.value}\n                    className=\"inline-flex items-center gap-1 px-2 py-0.5 bg-primary-100 text-primary-800 text-sm rounded-md\"\n                  >\n                    <span className=\"truncate max-w-[120px]\">\n                      {option.label || option.value}\n                    </span>\n                    <X\n                      className=\"h-3 w-3 cursor-pointer hover:text-primary-900\"\n                      onClick={(e) => removeOption(option, e)}\n                    />\n                  </span>\n                ))}\n                {selectedOptions.length > 3 && (\n                  <span className=\"text-sm text-gray-500 px-1\">\n                    +{selectedOptions.length - 3} more\n                  </span>\n                )}\n              </div>\n            ) : (\n              <span\n                className={`truncate ${selectedOptions.length === 0 ? \"text-gray-400\" : \"text-gray-700\"}`}\n              >\n                {getDisplayText()}\n              </span>\n            )}\n          </div>\n          <ChevronDown\n            className={`ml-2 h-4 w-4 text-gray-400 transition-transform flex-shrink-0 ${\n              isOpen ? \"rotate-180 transform\" : \"\"\n            }`}\n          />\n        </button>\n\n        {isOpen && (\n          <div\n            ref={dropdownRef}\n            className={`absolute z-[9999] w-full rounded-lg border border-gray-200 bg-white shadow-xl ${dropdownPositionClasses}`}\n            role=\"listbox\"\n            style={{\n              zIndex: 9999,\n              position: \"absolute\",\n            }}\n          >\n            {searchable && (\n              <div className=\"sticky top-0 border-b border-gray-100 bg-white p-3 z-[10000]\">\n                <div className=\"relative\">\n                  <input\n                    type=\"text\"\n                    className=\"w-full rounded-md border border-gray-200 px-3 py-2 pr-8 text-sm focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20 transition-all duration-200\"\n                    placeholder={onSearch ? \"Search...\" : \"Filter...\"}\n                    value={searchTerm}\n                    onChange={(e) => setSearchTerm(e.target.value)}\n                    autoFocus\n                  />\n                  {isSearching && (\n                    <Loader2 className=\"absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-gray-400\" />\n                  )}\n                </div>\n              </div>\n            )}\n\n            <div className=\"max-h-60 overflow-auto py-1\">\n              {isSearching ? (\n                <div className=\"px-3 py-8 text-center\">\n                  <Loader2 className=\"h-6 w-6 animate-spin text-primary-500 mx-auto mb-2\" />\n                  <p className=\"text-sm text-gray-500\">Searching...</p>\n                </div>\n              ) : filteredOptions.length > 0 ? (\n                <>\n                  {multiple && showSelectAll && (\n                    <div className=\"border-b border-gray-100\">\n                      <div className=\"px-3 py-2 flex items-center justify-between\">\n                        <button\n                          type=\"button\"\n                          onClick={handleSelectAll}\n                          className=\"text-sm font-medium text-primary-600 hover:text-primary-700 transition-colors\"\n                        >\n                          {areAllFilteredSelected()\n                            ? \"Deselect All\"\n                            : \"Select All\"}\n                        </button>\n                        {selectedOptions.length > 0 && (\n                          <button\n                            type=\"button\"\n                            onClick={handleClearAll}\n                            className=\"text-sm font-medium text-gray-500 hover:text-gray-700 transition-colors\"\n                          >\n                            Clear All\n                          </button>\n                        )}\n                      </div>\n                      {selectedOptions.length > 0 && (\n                        <div className=\"px-3 pb-2 text-xs text-gray-500\">\n                          {selectedOptions.length} selected\n                          {maxSelected && ` of ${maxSelected} max`}\n                        </div>\n                      )}\n                    </div>\n                  )}\n                  {filteredOptions.map((option) => {\n                    const isSelected = isOptionSelected(option);\n                    const isDisabled =\n                      option.disabled ||\n                      (maxSelected !== undefined &&\n                        !isSelected &&\n                        selectedOptions.length >= maxSelected);\n\n                    return (\n                      <div\n                        key={option.value}\n                        className={`cursor-pointer px-3 py-2 flex items-center justify-between transition-colors duration-150 ${\n                          isSelected\n                            ? \"bg-primary-50 text-primary-700\"\n                            : \"text-gray-700 hover:bg-gray-50\"\n                        } ${\n                          isDisabled\n                            ? \"cursor-not-allowed text-gray-400 hover:bg-white opacity-50\"\n                            : \"\"\n                        }`}\n                        onClick={() => !isDisabled && handleSelect(option)}\n                        role=\"option\"\n                        aria-selected={isSelected}\n                        aria-disabled={isDisabled}\n                      >\n                        <span className=\"flex-1 text-sm font-medium\">\n                          {option.label || option.value}\n                        </span>\n                        {multiple && isSelected && (\n                          <div className=\"w-4 h-4 bg-primary-500 rounded-sm flex items-center justify-center\">\n                            <svg\n                              className=\"w-3 h-3 text-white\"\n                              fill=\"currentColor\"\n                              viewBox=\"0 0 20 20\"\n                            >\n                              <path\n                                fillRule=\"evenodd\"\n                                d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n                                clipRule=\"evenodd\"\n                              />\n                            </svg>\n                          </div>\n                        )}\n                      </div>\n                    );\n                  })}\n                </>\n              ) : (\n                <div className=\"px-3 py-8 text-center\">\n                  <p className=\"text-sm text-gray-500\">\n                    {searchTerm ? \"No results found\" : \"No options available\"}\n                  </p>\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n      </div>\n\n      {error && <p className=\"mt-1 text-sm text-red-600\">{error}</p>}\n      {helpText && !error && (\n        <p className=\"mt-1 text-sm text-gray-500\">{helpText}</p>\n      )}\n\n      {name && (\n        <>\n          {multiple ? (\n            selectedOptions.map((option, index) => (\n              <input\n                key={`${option.value}-${index}`}\n                type=\"hidden\"\n                name={`${name}[]`}\n                value={option.value}\n              />\n            ))\n          ) : (\n            <input\n              type=\"hidden\"\n              name={name}\n              value={selectedOptions[0]?.value || \"\"}\n            />\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n\n// Demo Component\nfunction Demo() {\n  const [selectedValue, setSelectedValue] = useState(\"\");\n  const [options, setOptions] = useState([\n    { value: \"1\", label: \"Apple\" },\n    { value: \"2\", label: \"Banana\" },\n    { value: \"3\", label: \"Cherry\" },\n  ]);\n  const [isSearching, setIsSearching] = useState(false);\n\n  const handleBackendSearch = async (searchTerm: string) => {\n    console.log(\"Searching backend for:\", searchTerm);\n    setIsSearching(true);\n\n    // Simulate API call\n    await new Promise((resolve) => setTimeout(resolve, 800));\n\n    // Mock backend filtering\n    const allFruits = [\n      { value: \"1\", label: \"Apple\" },\n      { value: \"2\", label: \"Banana\" },\n      { value: \"3\", label: \"Cherry\" },\n      { value: \"4\", label: \"Date\" },\n      { value: \"5\", label: \"Elderberry\" },\n      { value: \"6\", label: \"Fig\" },\n      { value: \"7\", label: \"Grape\" },\n      { value: \"8\", label: \"Honeydew\" },\n    ];\n\n    const filtered = searchTerm\n      ? allFruits.filter((fruit) =>\n          fruit.label.toLowerCase().includes(searchTerm.toLowerCase()),\n        )\n      : allFruits;\n\n    setOptions(filtered);\n    setIsSearching(false);\n  };\n\n  return (\n    <div className=\"max-w-2xl mx-auto p-8 space-y-8\">\n      <div>\n        <h1 className=\"text-3xl font-bold mb-2\">Select with Backend Search</h1>\n        <p className=\"text-gray-600\">\n          Type in the search box to trigger backend filtering (simulated with\n          800ms delay)\n        </p>\n      </div>\n\n      <Select\n        label=\"Choose a fruit\"\n        placeholder=\"Select or search for a fruit\"\n        options={options}\n        value={selectedValue}\n        onChange={(e) => setSelectedValue(e.target.value as string)}\n        searchable={true}\n        onSearch={handleBackendSearch}\n        isSearching={isSearching}\n        searchDebounceMs={300}\n      />\n\n      {selectedValue && (\n        <div className=\"p-4 bg-blue-50 rounded-lg\">\n          <p className=\"text-sm font-medium text-blue-900\">\n            Selected value: {selectedValue}\n          </p>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["_a","options","_c","placeholder","onChange","value","_d","size","_e","className","name","id","_f","disabled","label","required","error","helpText","_g","fullWidth","_h","searchable","onSearch","_j","isSearching","_k","searchDebounceMs","_l","multiple","maxSelected","_m","showSelectedCount","closeOnSelect","_o","showSelectAll","_p","useState","isOpen","setIsOpen","_q","searchTerm","setSearchTerm","_r","dropdownPosition","setDropdownPosition","shouldCloseOnSelect","undefined","_s","Array","isArray","map","val","find","option","filter","Boolean","selectedOptions","setSelectedOptions","selectRef","useRef","dropdownRef","searchTimeoutRef","useEffect","current","selectRect","getBoundingClientRect","spaceBelow","window","innerHeight","bottom","spaceAbove","top","clearTimeout","setTimeout","filteredOptions","toLowerCase","includes","handleClickOutside","event","contains","target","document","addEventListener","removeEventListener","dropdownPositionClasses","_jsxs","ref","concat","children","htmlFor","_jsx","type","sm","md","lg","onClick","length","slice","X","e","optionToRemove","stopPropagation","newSelectedOptions","eventValue","opt","removeOption","join","_b","getDisplayText","ChevronDown","role","style","zIndex","position","autoFocus","Loader2","selectableOptions","every","some","selected","optionsToAdd","remainingSlots","__spreadArray","areAllFilteredSelected","isSelected","isOptionSelected","isDisabled","handleSelect","fill","viewBox","fillRule","d","clipRule","_Fragment","index"],"mappings":"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"}

package/dist/cjs/components/Form/Select/SelectButton.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),l=require("lucide-react");module.exports=function(a){var n=a.options,r=a.placeholder,s=void 0===r?"Select an option":r,i=a.onChange,o=a.value,u=a.size,c=void 0===u?"md":u,d=a.className,m=void 0===d?"":d,v=a.name,x=a.id,b=a.disabled,h=void 0!==b&&b,p=a.label,f=a.required,g=t.useState(!1),j=g[0],y=g[1],w=t.useState(o&&n.find((function(e){return e.value===o}))||null),N=w[0],k=w[1];return e.jsxs("div",{className:"relative ".concat(m),children:[p&&e.jsxs("label",{htmlFor:x,className:"mb-1 block text-sm font-medium text-gray-700",children:[p,f&&e.jsx("span",{className:"ml-1 text-red-500",children:"*"})]}),e.jsxs("button",{type:"button",className:"flex w-full items-center justify-between rounded-md border border-gray-200 bg-white shadow-sm ".concat({sm:"px-3 py-2 text-sm",md:"px-4 py-2.5 text-base"}[c]," text-gray-700 hover:bg-gray-50 focus:outline-none ").concat(h?"cursor-not-allowed opacity-50":""),onClick:function(){return!h&&y(!j)},disabled:h,id:x,children:[e.jsx("span",{className:"truncate",children:N?(null==N?void 0:N.label)||N.value:s}),e.jsx(l.ChevronDown,{className:"ml-2 h-4 w-4 ".concat(j?"rotate-180 transform":"")})]}),j&&e.jsx("div",{className:"absolute z-10 mt-1 max-h-60 w-full min-w-[200px] p-1 font-medium text-sm overflow-auto rounded-lg bg-white shadow-xl",children:n.map((function(t){return e.jsxs("div",{className:"cursor-pointer px-3 py-2 hover:bg-gray-100 rounded-lg flex justify-between item-center ".concat((null==N?void 0:N.value)===t.value?"bg-gray-50 text-black":"text-gray-900"),onClick:function(){return function(e){k(e),i(e.value),y(!1)}(t)},children:[e.jsx("div",{children:t.label||t.value}),(null==N?void 0:N.value)===t.value&&e.jsx("div",{children:e.jsx(l.Check,{size:15,className:"text-blue-600"})})]},t.value)}))}),v&&e.jsx("input",{type:"hidden",name:v,value:(null==N?void 0:N.value)||""})]})};
+//# sourceMappingURL=SelectButton.js.map

package/dist/cjs/components/Form/Select/SelectButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectButton.js","sources":["../../../../../src/components/Form/Select/SelectButton.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Check, ChevronDown } from \"lucide-react\";\n\nexport type SelectButtonOption = {\n  value: string;\n  label?: string;\n};\n\nexport type SelectButtonProps = {\n  options: SelectButtonOption[];\n  placeholder?: string;\n  onChange: (value: string) => void;\n  value?: string;\n  size?: \"sm\" | \"md\";\n  className?: string;\n  name?: string;\n  id?: string;\n  disabled?: boolean;\n  label?: string;\n  required?: boolean;\n};\n\nexport default function SelectButton({\n  options,\n  placeholder = \"Select an option\",\n  onChange,\n  value,\n  size = \"md\",\n  className = \"\",\n  name,\n  id,\n  disabled = false,\n  label,\n  required,\n}: SelectButtonProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selectedOption, setSelectedOption] =\n    useState<SelectButtonOption | null>(\n      value ? options.find((option) => option.value === value) || null : null,\n    );\n\n  const handleSelect = (option: SelectButtonOption) => {\n    setSelectedOption(option);\n    onChange(option.value);\n    setIsOpen(false);\n  };\n\n  // Size classes for the button\n  const sizeClasses = {\n    sm: \"px-3 py-2 text-sm\",\n    md: \"px-4 py-2.5 text-base\",\n  };\n\n  return (\n    <div className={`relative ${className}`}>\n      {label && (\n        <label\n          htmlFor={id}\n          className=\"mb-1 block text-sm font-medium text-gray-700\"\n        >\n          {label}\n          {required && <span className=\"ml-1 text-red-500\">*</span>}\n        </label>\n      )}\n      <button\n        type=\"button\"\n        className={`flex w-full items-center justify-between rounded-md border border-gray-200 bg-white shadow-sm ${\n          sizeClasses[size]\n        } text-gray-700 hover:bg-gray-50 focus:outline-none ${disabled ? \"cursor-not-allowed opacity-50\" : \"\"}`}\n        onClick={() => !disabled && setIsOpen(!isOpen)}\n        disabled={disabled}\n        id={id}\n      >\n        <span className=\"truncate\">\n          {selectedOption\n            ? selectedOption?.label || selectedOption.value\n            : placeholder}\n        </span>\n        <ChevronDown\n          className={`ml-2 h-4 w-4 ${isOpen ? \"rotate-180 transform\" : \"\"}`}\n        />\n      </button>\n      {isOpen && (\n        <div className=\"absolute z-10 mt-1 max-h-60 w-full min-w-[200px] p-1 font-medium text-sm overflow-auto rounded-lg bg-white shadow-xl\">\n          {options.map((option) => (\n            <div\n              key={option.value}\n              className={`cursor-pointer px-3 py-2 hover:bg-gray-100 rounded-lg flex justify-between item-center ${\n                selectedOption?.value === option.value\n                  ? \"bg-gray-50 text-black\"\n                  : \"text-gray-900\"\n              }`}\n              onClick={() => handleSelect(option)}\n            >\n              <div>{option.label || option.value}</div>\n              {selectedOption?.value === option.value && (\n                <div>\n                  <Check size={15} className=\"text-blue-600\" />\n                </div>\n              )}\n            </div>\n          ))}\n        </div>\n      )}\n      {name && (\n        <input type=\"hidden\" name={name} value={selectedOption?.value || \"\"} />\n      )}\n    </div>\n  );\n}\n\n// Demo\nfunction Demo() {\n  const [value1, setValue1] = useState(\"\");\n  const [value2, setValue2] = useState(\"\");\n  const [value3, setValue3] = useState(\"\");\n\n  const options = [\n    { value: \"option1\", label: \"Option 1\" },\n    { value: \"option2\", label: \"Option 2\" },\n    { value: \"option3\", label: \"Option 3\" },\n  ];\n\n  return (\n    <div className=\"p-8 space-y-6\">\n      <h1 className=\"text-2xl font-bold mb-6\">Resizable Select Button</h1>\n\n      <div>\n        <p className=\"mb-2 text-sm text-gray-600\">Default (no width class):</p>\n        <SelectButton\n          options={options}\n          onChange={setValue1}\n          value={value1}\n          placeholder=\"Select...\"\n        />\n      </div>\n\n      <div>\n        <p className=\"mb-2 text-sm text-gray-600\">With w-64 class:</p>\n        <SelectButton\n          options={options}\n          onChange={setValue2}\n          value={value2}\n          placeholder=\"Select...\"\n          className=\"w-64\"\n        />\n      </div>\n\n      <div>\n        <p className=\"mb-2 text-sm text-gray-600\">With w-96 class:</p>\n        <SelectButton\n          options={options}\n          onChange={setValue3}\n          value={value3}\n          placeholder=\"Select...\"\n          className=\"w-96\"\n        />\n      </div>\n    </div>\n  );\n}\n"],"names":["_a","options","_b","placeholder","onChange","value","_c","size","_d","className","name","id","_e","disabled","label","required","_f","useState","isOpen","setIsOpen","_g","find","option","selectedOption","setSelectedOption","_jsxs","concat","children","htmlFor","_jsx","type","sm","md","onClick","ChevronDown","map","handleSelect","Check"],"mappings":"4GAsBc,SAAuBA,OACnCC,EAAOD,EAAAC,QACPC,EAAAF,EAAAG,YAAAA,OAAW,IAAAD,EAAG,qBACdE,aACAC,UACAC,EAAAN,EAAAO,KAAAA,OAAI,IAAAD,EAAG,KAAIA,EACXE,EAAAR,EAAAS,UAAAA,OAAS,IAAAD,EAAG,GAAEA,EACdE,EAAIV,EAAAU,KACJC,EAAEX,EAAAW,GACFC,aAAAC,cAAgBD,EAChBE,EAAKd,EAAAc,MACLC,EAAQf,EAAAe,SAEFC,EAAsBC,EAAAA,UAAS,GAA9BC,EAAMF,EAAA,GAAEG,EAASH,EAAA,GAClBI,EACJH,WACEZ,GAAQJ,EAAQoB,MAAK,SAACC,GAAW,OAAAA,EAAOjB,QAAUA,CAAjB,KAAkC,MAFhEkB,EAAcH,EAAA,GAAEI,OAiBvB,OACEC,EAAAA,KAAA,MAAA,CAAKhB,UAAW,YAAAiB,OAAYjB,GAAWkB,SAAA,CACpCb,GACCW,EAAAA,cACEG,QAASjB,EACTF,UAAU,+CAA8CkB,SAAA,CAEvDb,EACAC,GAAYc,EAAAA,IAAA,OAAA,CAAMpB,UAAU,sCAGjCgB,EAAAA,KAAA,SAAA,CACEK,KAAK,SACLrB,UAAW,wGAlBG,CAClBsB,GAAI,oBACJC,GAAI,yBAiBczB,iEACwCM,EAAW,gCAAkC,IACnGoB,QAAS,WAAM,OAACpB,GAAYM,GAAWD,EAAxB,EACfL,SAAUA,EACVF,GAAIA,EAAEgB,SAAA,CAENE,EAAAA,IAAA,OAAA,CAAMpB,UAAU,oBACbc,GACGA,aAAc,EAAdA,EAAgBT,QAASS,EAAelB,MACxCF,IAEN0B,EAAAA,IAACK,EAAAA,YAAW,CACVzB,UAAW,gBAAAiB,OAAgBR,EAAS,uBAAyB,SAGhEA,GACCW,EAAAA,IAAA,MAAA,CAAKpB,UAAU,uHAAsHkB,SAClI1B,EAAQkC,KAAI,SAACb,GAAW,OACvBG,EAAAA,KAAA,MAAA,CAEEhB,UAAW,0FAAAiB,QACTH,aAAc,EAAdA,EAAgBlB,SAAUiB,EAAOjB,MAC7B,wBACA,iBAEN4B,QAAS,WAAM,OAnDN,SAACX,GACpBE,EAAkBF,GAClBlB,EAASkB,EAAOjB,OAChBc,GAAU,EACZ,CA+C2BiB,CAAad,EAAb,EAAoBK,SAAA,CAEnCE,EAAAA,IAAA,MAAA,CAAAF,SAAML,EAAOR,OAASQ,EAAOjB,SAC5BkB,aAAc,EAAdA,EAAgBlB,SAAUiB,EAAOjB,OAChCwB,EAAAA,IAAA,MAAA,CAAAF,SACEE,EAAAA,IAACQ,EAAAA,MAAK,CAAC9B,KAAM,GAAIE,UAAU,sBAX1Ba,EAAOjB,MAFS,MAoB5BK,GACCmB,EAAAA,IAAA,QAAA,CAAOC,KAAK,SAASpB,KAAMA,EAAML,OAAOkB,aAAc,EAAdA,EAAgBlB,QAAS,OAIzE"}

package/dist/cjs/components/Form/TextEditor/TextEditor.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("../../../node_modules/@tiptap/extension-bold/dist/index.js"),n=require("../../../node_modules/@tiptap/extension-bullet-list/dist/index.js"),i=require("../../../node_modules/@tiptap/extension-code/dist/index.js"),o=require("../../../node_modules/@tiptap/extension-code-block/dist/index.js"),r=require("../../../node_modules/@tiptap/extension-document/dist/index.js"),s=require("../../../node_modules/@tiptap/extension-heading/dist/index.js"),l=require("../../../node_modules/@tiptap/extension-italic/dist/index.js"),u=require("@tiptap/extension-link"),a=require("../../../node_modules/@tiptap/extension-list-item/dist/index.js"),c=require("../../../node_modules/@tiptap/extension-ordered-list/dist/index.js"),d=require("../../../node_modules/@tiptap/extension-paragraph/dist/index.js"),b=require("../../../node_modules/@tiptap/extension-strike/dist/index.js"),g=require("../../../node_modules/@tiptap/extension-text/dist/index.js"),x=require("@tiptap/extension-underline"),p=require("@tiptap/react"),h=require("@tiptap/starter-kit"),m=require("lucide-react");module.exports=function(f){var j=f.initialContent,v=void 0===j?"":j,y=f.onUpdate,k=p.useEditor({extensions:[h.configure({heading:!1,codeBlock:!1}),r.default,d.default,g.default,t.default,l.default,x,b.default,i.default,o.default.configure({HTMLAttributes:{class:"bg-gray-100 p-3 rounded text-sm font-mono"}}),s.default.configure({levels:[1,2,3]}),n.default,c.default,a.default,u.configure({openOnClick:!1,HTMLAttributes:{class:"text-blue-600 underline"}})],content:v,onUpdate:function(e){var t=e.editor;y(t.getHTML())},editorProps:{attributes:{class:"prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none min-h-[200px] p-4"}},immediatelyRender:!1});return k?e.jsxs("div",{className:"rounded-lg border border-gray-200 shadow-sm",children:[e.jsxs("div",{className:"flex flex-wrap items-center gap-1 border-b bg-gray-50 p-3",children:[e.jsx("button",{onClick:function(){return k.chain().focus().undo().run()},className:"p-2 rounded hover:bg-gray-200 transition-colors ".concat(k.can().undo()?"":"opacity-50 cursor-not-allowed"),type:"button",disabled:!k.can().undo(),title:"Undo",children:e.jsx(m.Undo2,{size:16})}),e.jsx("button",{onClick:function(){return k.chain().focus().redo().run()},className:"p-2 rounded hover:bg-gray-200 transition-colors ".concat(k.can().redo()?"":"opacity-50 cursor-not-allowed"),type:"button",disabled:!k.can().redo(),title:"Redo",children:e.jsx(m.Redo2,{size:16})}),e.jsx("div",{className:"mx-2 h-6 w-px bg-gray-300"}),e.jsx("button",{onClick:function(){return k.chain().focus().toggleHeading({level:1}).run()},className:"p-2 rounded transition-colors ".concat(k.isActive("heading",{level:1})?"bg-blue-200 text-blue-800":"hover:bg-gray-200"),type:"button",title:"Heading 1",children:e.jsx(m.Heading1,{size:16})}),e.jsx("button",{onClick:function(){return k.chain().focus().toggleHeading({level:2}).run()},className:"p-2 rounded transition-colors ".concat(k.isActive("heading",{level:2})?"bg-blue-200 text-blue-800":"hover:bg-gray-200"),type:"button",title:"Heading 2",children:e.jsx(m.Heading2,{size:16})}),e.jsx("button",{onClick:function(){return k.chain().focus().toggleHeading({level:3}).run()},className:"p-2 rounded transition-colors ".concat(k.isActive("heading",{level:3})?"bg-blue-200 text-blue-800":"hover:bg-gray-200"),type:"button",title:"Heading 3",children:e.jsx(m.Heading3,{size:16})}),e.jsx(m.SeparatorVertical,{className:"mx-2 h-6 w-px bg-gray-300"}),e.jsx("button",{onClick:function(){return k.chain().focus().toggleBold().run()},className:"p-2 rounded transition-colors ".concat(k.isActive("bold")?"bg-blue-200 text-blue-800":"hover:bg-gray-200"),type:"button",title:"Bold",children:e.jsx(m.Bold,{size:16})}),e.jsx("button",{onClick:function(){return k.chain().focus().toggleItalic().run()},className:"p-2 rounded transition-colors ".concat(k.isActive("italic")?"bg-blue-200 text-blue-800":"hover:bg-gray-200"),type:"button",title:"Italic",children:e.jsx(m.Italic,{size:16})}),e.jsx("button",{onClick:function(){return k.chain().focus().toggleUnderline().run()},className:"p-2 rounded transition-colors ".concat(k.isActive("underline")?"bg-blue-200 text-blue-800":"hover:bg-gray-200"),type:"button",title:"Underline",children:e.jsx(m.Underline,{size:16})}),e.jsx("button",{onClick:function(){return k.chain().focus().toggleStrike().run()},className:"p-2 rounded transition-colors ".concat(k.isActive("strike")?"bg-blue-200 text-blue-800":"hover:bg-gray-200"),type:"button",title:"Strikethrough",children:e.jsx(m.Strikethrough,{size:16})}),e.jsx(m.SeparatorVertical,{className:"mx-2 h-6 w-px bg-gray-300"}),e.jsx("button",{onClick:function(){return k.chain().focus().toggleBulletList().run()},className:"p-2 rounded transition-colors ".concat(k.isActive("bulletList")?"bg-blue-200 text-blue-800":"hover:bg-gray-200"),type:"button",title:"Bullet List",children:e.jsx(m.List,{size:16})}),e.jsx("button",{onClick:function(){return k.chain().focus().toggleOrderedList().run()},className:"p-2 rounded transition-colors ".concat(k.isActive("orderedList")?"bg-blue-200 text-blue-800":"hover:bg-gray-200"),type:"button",title:"Numbered List",children:e.jsx(m.ListOrdered,{size:16})}),e.jsx(m.SeparatorVertical,{className:"mx-2 h-6 w-px bg-gray-300"}),e.jsx("button",{onClick:function(){return k.chain().focus().toggleCode().run()},className:"p-2 rounded transition-colors ".concat(k.isActive("code")?"bg-blue-200 text-blue-800":"hover:bg-gray-200"),type:"button",title:"Inline Code",children:e.jsx(m.Code,{size:16})}),e.jsx("button",{onClick:function(){return k.chain().focus().toggleCodeBlock().run()},className:"p-2 rounded transition-colors ".concat(k.isActive("codeBlock")?"bg-blue-200 text-blue-800":"hover:bg-gray-200"),type:"button",title:"Code Block",children:e.jsx(m.FileCode,{size:16})}),e.jsx(m.SeparatorVertical,{className:"mx-2 h-6 w-px bg-gray-300"}),e.jsx("button",{onClick:function(){return k.chain().focus().toggleBlockquote().run()},className:"p-2 rounded transition-colors ".concat(k.isActive("blockquote")?"bg-blue-200 text-blue-800":"hover:bg-gray-200"),type:"button",title:"Quote",children:e.jsx(m.Quote,{size:16})}),e.jsx(m.SeparatorVertical,{className:"mx-2 h-6 w-px bg-gray-300"}),k.isActive("link")?e.jsx("button",{onClick:function(){null==k||k.chain().focus().unsetLink().run()},className:"p-2 rounded bg-blue-200 text-blue-800 hover:bg-blue-300 transition-colors",type:"button",title:"Remove Link",children:e.jsx(m.Link,{size:16})}):e.jsx("button",{onClick:function(){var e=window.prompt("Enter URL:");e&&(null==k||k.chain().focus().setLink({href:e}).run())},className:"p-2 rounded hover:bg-gray-200 transition-colors",type:"button",title:"Add Link",children:e.jsx(m.Link,{size:16})})]}),e.jsx(p.EditorContent,{editor:k,className:"min-h-[300px] focus-within:bg-white"})]}):e.jsx("div",{className:"rounded-lg border bg-gray-50 h-48 animate-pulse"})};
+//# sourceMappingURL=TextEditor.js.map

package/dist/cjs/components/Form/TextEditor/TextEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextEditor.js","sources":["../../../../../src/components/Form/TextEditor/TextEditor.tsx"],"sourcesContent":["import React from \"react\";\n\nimport Bold from \"@tiptap/extension-bold\";\nimport BulletList from \"@tiptap/extension-bullet-list\";\nimport Code from \"@tiptap/extension-code\";\nimport CodeBlock from \"@tiptap/extension-code-block\";\nimport Document from \"@tiptap/extension-document\";\nimport Heading from \"@tiptap/extension-heading\";\nimport Italic from \"@tiptap/extension-italic\";\nimport Link from \"@tiptap/extension-link\";\nimport ListItem from \"@tiptap/extension-list-item\";\nimport OrderedList from \"@tiptap/extension-ordered-list\";\nimport Paragraph from \"@tiptap/extension-paragraph\";\nimport Strike from \"@tiptap/extension-strike\";\nimport Text from \"@tiptap/extension-text\";\nimport Underline from \"@tiptap/extension-underline\";\nimport { EditorContent, useEditor } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport {\n    Bold as BoldIcon,\n    Italic as ItalicIcon,\n    Underline as UnderlineIcon,\n    List,\n    ListOrdered,\n    Heading1,\n    Heading2,\n    Heading3,\n    Code as CodeIcon,\n    FileCode,\n    Link as LinkIcon,\n    Strikethrough,\n    Quote,\n    Minus,\n    Undo2,\n    Redo2, SeparatorVertical\n} from \"lucide-react\";\n\nexport interface TextEditorProps {\n    initialContent?: string;\n    onUpdate: (content: string) => void;\n}\n\nconst TextEditor: React.FC<TextEditorProps> = ({ initialContent = \"\", onUpdate }) => {\n    const editor = useEditor({\n        extensions: [\n            StarterKit.configure({\n                heading: false,\n                codeBlock: false,\n            }),\n            Document,\n            Paragraph,\n            Text,\n            Bold,\n            Italic,\n            Underline,\n            Strike,\n            Code,\n            CodeBlock.configure({\n                HTMLAttributes: {\n                    class: 'bg-gray-100 p-3 rounded text-sm font-mono',\n                },\n            }),\n            Heading.configure({\n                levels: [1, 2, 3],\n            }),\n            BulletList,\n            OrderedList,\n            ListItem,\n            Link.configure({\n                openOnClick: false,\n                HTMLAttributes: {\n                    class: 'text-blue-600 underline',\n                },\n            }),\n        ],\n        content: initialContent,\n        onUpdate: ({ editor }) => {\n            onUpdate(editor.getHTML());\n        },\n        editorProps: {\n            attributes: {\n                class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none min-h-[200px] p-4',\n            },\n        },\n        immediatelyRender: false,\n    });\n\n    const addLink = () => {\n        const url = window.prompt('Enter URL:');\n        if (url) {\n            editor?.chain().focus().setLink({ href: url }).run();\n        }\n    };\n\n    const removeLink = () => {\n        editor?.chain().focus().unsetLink().run();\n    };\n\n    if (!editor) {\n        return <div className=\"rounded-lg border bg-gray-50 h-48 animate-pulse\"></div>;\n    }\n\n    return (\n        <div className='rounded-lg border border-gray-200 shadow-sm'>\n            {/* Toolbar */}\n            <div className='flex flex-wrap items-center gap-1 border-b bg-gray-50 p-3'>\n                {/* Undo/Redo */}\n                <button\n                    onClick={() => editor.chain().focus().undo().run()}\n                    className={`p-2 rounded hover:bg-gray-200 transition-colors ${!editor.can().undo() ? 'opacity-50 cursor-not-allowed' : ''}`}\n                    type='button'\n                    disabled={!editor.can().undo()}\n                    title=\"Undo\"\n                >\n                    <Undo2 size={16} />\n                </button>\n                <button\n                    onClick={() => editor.chain().focus().redo().run()}\n                    className={`p-2 rounded hover:bg-gray-200 transition-colors ${!editor.can().redo() ? 'opacity-50 cursor-not-allowed' : ''}`}\n                    type='button'\n                    disabled={!editor.can().redo()}\n                    title=\"Redo\"\n                >\n                    <Redo2 size={16} />\n                </button>\n\n                <div className=\"mx-2 h-6 w-px bg-gray-300\"></div>\n\n                {/* Headings */}\n                <button\n                    onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}\n                    className={`p-2 rounded transition-colors ${\n                        editor.isActive(\"heading\", { level: 1 })\n                            ? \"bg-blue-200 text-blue-800\"\n                            : \"hover:bg-gray-200\"\n                    }`}\n                    type='button'\n                    title=\"Heading 1\"\n                >\n                    <Heading1 size={16} />\n                </button>\n                <button\n                    onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}\n                    className={`p-2 rounded transition-colors ${\n                        editor.isActive(\"heading\", { level: 2 })\n                            ? \"bg-blue-200 text-blue-800\"\n                            : \"hover:bg-gray-200\"\n                    }`}\n                    type='button'\n                    title=\"Heading 2\"\n                >\n                    <Heading2 size={16} />\n                </button>\n                <button\n                    onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}\n                    className={`p-2 rounded transition-colors ${\n                        editor.isActive(\"heading\", { level: 3 })\n                            ? \"bg-blue-200 text-blue-800\"\n                            : \"hover:bg-gray-200\"\n                    }`}\n                    type='button'\n                    title=\"Heading 3\"\n                >\n                    <Heading3 size={16} />\n                </button>\n\n                <SeparatorVertical className=\"mx-2 h-6 w-px bg-gray-300\" />\n\n                {/* Text Formatting */}\n                <button\n                    onClick={() => editor.chain().focus().toggleBold().run()}\n                    className={`p-2 rounded transition-colors ${\n                        editor.isActive(\"bold\")\n                            ? \"bg-blue-200 text-blue-800\"\n                            : \"hover:bg-gray-200\"\n                    }`}\n                    type='button'\n                    title=\"Bold\"\n                >\n                    <BoldIcon size={16} />\n                </button>\n                <button\n                    onClick={() => editor.chain().focus().toggleItalic().run()}\n                    className={`p-2 rounded transition-colors ${\n                        editor.isActive(\"italic\")\n                            ? \"bg-blue-200 text-blue-800\"\n                            : \"hover:bg-gray-200\"\n                    }`}\n                    type='button'\n                    title=\"Italic\"\n                >\n                    <ItalicIcon size={16} />\n                </button>\n                <button\n                    onClick={() => editor.chain().focus().toggleUnderline().run()}\n                    className={`p-2 rounded transition-colors ${\n                        editor.isActive(\"underline\")\n                            ? \"bg-blue-200 text-blue-800\"\n                            : \"hover:bg-gray-200\"\n                    }`}\n                    type='button'\n                    title=\"Underline\"\n                >\n                    <UnderlineIcon size={16} />\n                </button>\n                <button\n                    onClick={() => editor.chain().focus().toggleStrike().run()}\n                    className={`p-2 rounded transition-colors ${\n                        editor.isActive(\"strike\")\n                            ? \"bg-blue-200 text-blue-800\"\n                            : \"hover:bg-gray-200\"\n                    }`}\n                    type='button'\n                    title=\"Strikethrough\"\n                >\n                    <Strikethrough size={16} />\n                </button>\n\n                <SeparatorVertical className=\"mx-2 h-6 w-px bg-gray-300\" />\n\n                {/* Lists */}\n                <button\n                    onClick={() => editor.chain().focus().toggleBulletList().run()}\n                    className={`p-2 rounded transition-colors ${\n                        editor.isActive(\"bulletList\")\n                            ? \"bg-blue-200 text-blue-800\"\n                            : \"hover:bg-gray-200\"\n                    }`}\n                    type='button'\n                    title=\"Bullet List\"\n                >\n                    <List size={16} />\n                </button>\n                <button\n                    onClick={() => editor.chain().focus().toggleOrderedList().run()}\n                    className={`p-2 rounded transition-colors ${\n                        editor.isActive(\"orderedList\")\n                            ? \"bg-blue-200 text-blue-800\"\n                            : \"hover:bg-gray-200\"\n                    }`}\n                    type='button'\n                    title=\"Numbered List\"\n                >\n                    <ListOrdered size={16} />\n                </button>\n\n                <SeparatorVertical className=\"mx-2 h-6 w-px bg-gray-300\" />\n\n                {/* Code */}\n                <button\n                    onClick={() => editor.chain().focus().toggleCode().run()}\n                    className={`p-2 rounded transition-colors ${\n                        editor.isActive(\"code\")\n                            ? \"bg-blue-200 text-blue-800\"\n                            : \"hover:bg-gray-200\"\n                    }`}\n                    type='button'\n                    title=\"Inline Code\"\n                >\n                    <CodeIcon size={16} />\n                </button>\n                <button\n                    onClick={() => editor.chain().focus().toggleCodeBlock().run()}\n                    className={`p-2 rounded transition-colors ${\n                        editor.isActive(\"codeBlock\")\n                            ? \"bg-blue-200 text-blue-800\"\n                            : \"hover:bg-gray-200\"\n                    }`}\n                    type='button'\n                    title=\"Code Block\"\n                >\n                    <FileCode size={16} />\n                </button>\n\n                <SeparatorVertical className=\"mx-2 h-6 w-px bg-gray-300\" />\n\n                {/* Quote */}\n                <button\n                    onClick={() => editor.chain().focus().toggleBlockquote().run()}\n                    className={`p-2 rounded transition-colors ${\n                        editor.isActive(\"blockquote\")\n                            ? \"bg-blue-200 text-blue-800\"\n                            : \"hover:bg-gray-200\"\n                    }`}\n                    type='button'\n                    title=\"Quote\"\n                >\n                    <Quote size={16} />\n                </button>\n\n                <SeparatorVertical className=\"mx-2 h-6 w-px bg-gray-300\" />\n\n                {/* Link */}\n                {editor.isActive('link') ? (\n                    <button\n                        onClick={removeLink}\n                        className=\"p-2 rounded bg-blue-200 text-blue-800 hover:bg-blue-300 transition-colors\"\n                        type='button'\n                        title=\"Remove Link\"\n                    >\n                        <LinkIcon size={16} />\n                    </button>\n                ) : (\n                    <button\n                        onClick={addLink}\n                        className=\"p-2 rounded hover:bg-gray-200 transition-colors\"\n                        type='button'\n                        title=\"Add Link\"\n                    >\n                        <LinkIcon size={16} />\n                    </button>\n                )}\n            </div>\n\n            {/* Editor */}\n            <EditorContent\n                editor={editor}\n                className='min-h-[300px] focus-within:bg-white'\n            />\n        </div>\n    );\n};\n\nexport default TextEditor;"],"names":["_a","_b","initialContent","onUpdate","editor","useEditor","extensions","StarterKit","configure","heading","codeBlock","Document","Paragraph","Text","Bold","Italic","Underline","Strike","Code","CodeBlock","HTMLAttributes","class","Heading","levels","BulletList","OrderedList","ListItem","Link","openOnClick","content","getHTML","editorProps","attributes","immediatelyRender","_jsxs","className","children","_jsx","onClick","chain","focus","undo","run","concat","can","type","disabled","title","Undo2","size","redo","Redo2","toggleHeading","level","isActive","Heading1","Heading2","Heading3","SeparatorVertical","toggleBold","BoldIcon","toggleItalic","ItalicIcon","toggleUnderline","UnderlineIcon","toggleStrike","Strikethrough","toggleBulletList","List","toggleOrderedList","ListOrdered","toggleCode","CodeIcon","toggleCodeBlock","FileCode","toggleBlockquote","Quote","unsetLink","LinkIcon","url","window","prompt","setLink","href","EditorContent"],"mappings":"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"}

package/dist/cjs/components/Loading/Loading.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("react"),r=function(a){var r=a.size,n=void 0===r?"md":r,t=a.variant,s=void 0===t?"pulse":t,l=a.color,o=void 0===l?"primary":l,i=a.fullScreen,c=void 0!==i&&i,d=a.text,u=a.className,m=void 0===u?"":u,x=a.image,b=a.imageEffect,h=void 0===b?"pulse":b,g=o.startsWith("#"),p=function(e){return g?"":{text:"text-".concat(o),bg:"bg-".concat(o),border:"border-".concat(o),borderTop:"border-t-".concat(o),borderRight:"border-r-".concat(o)}[e]||""},f={sm:"w-4 h-4",md:"w-8 h-8",lg:"w-12 h-12",xl:"w-16 h-16"},j={sm:"w-8 h-8",md:"w-12 h-12",lg:"w-16 h-16",xl:"w-20 h-20"},v=function(){switch(h){case"bounce":return"animate-bounce";case"spin":return"animate-spin";case"float":return"animate-pulse hover:animate-bounce";case"heartbeat":return"animate-ping";default:return"animate-pulse"}},N=function(){return e.jsxs("div",{className:"relative flex items-center justify-center",children:[e.jsx("img",{src:x,alt:"Loading",className:"".concat(j[n]," object-contain ").concat(v()),style:{filter:"drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1))",animationDuration:"heartbeat"===h?"1.5s":"bounce"===h?"1s":"2s"}}),"float"===h&&e.jsx("div",{className:"absolute inset-0 ".concat(j[n]," rounded-full bg-gradient-to-r from-purple-400 to-blue-400 opacity-20 animate-ping"),style:{animationDuration:"2s"}})]})},y=function(){return e.jsxs("div",{className:"relative",children:[e.jsx("div",{className:"".concat(f[n]," border-4 border-gray-200 rounded-full animate-spin ").concat(g?"":p("borderTop")),style:g?{borderTopColor:o}:{}}),e.jsx("div",{className:"absolute inset-0 ".concat(f[n]," border-4 border-transparent rounded-full animate-spin ").concat(g?"":p("borderRight")),style:g?{borderRightColor:o,animationDirection:"reverse",animationDuration:"0.75s"}:{animationDirection:"reverse",animationDuration:"0.75s"}})]})},w=function(){return e.jsx("div",{className:"flex space-x-1",children:[0,1,2].map((function(a){return e.jsx("div",{className:"".concat("sm"===n?"w-2 h-2":"md"===n?"w-3 h-3":"lg"===n?"w-4 h-4":"w-5 h-5"," rounded-full animate-bounce ").concat(g?"":p("bg")),style:g?{backgroundColor:o,animationDelay:"".concat(.2*a,"s"),animationDuration:"1.4s"}:{animationDelay:"".concat(.2*a,"s"),animationDuration:"1.4s"}},a)}))})},C=function(){return e.jsxs("div",{className:"relative",children:[e.jsx("div",{className:"".concat(f[n]," rounded-full animate-pulse ").concat(g?"":p("bg")),style:g?{backgroundColor:o}:{}}),e.jsx("div",{className:"absolute inset-0 ".concat(f[n]," rounded-full animate-ping opacity-30 ").concat(g?"":p("bg")),style:g?{backgroundColor:o}:{}})]})},D=function(){return e.jsx("div",{className:"flex space-x-1 items-end",children:[0,1,2,3].map((function(a){return e.jsx("div",{className:"".concat("sm"===n?"w-1":"md"===n?"w-1.5":"lg"===n?"w-2":"w-2.5"," rounded-sm animate-pulse ").concat(g?"":p("bg")),style:g?{backgroundColor:o,height:"".concat(20+10*a,"px"),animationDelay:"".concat(.15*a,"s"),animationDuration:"1.2s"}:{height:"".concat(20+10*a,"px"),animationDelay:"".concat(.15*a,"s"),animationDuration:"1.2s"}},a)}))})},k=function(){return e.jsxs("div",{className:"relative",children:[e.jsx("div",{className:"".concat(f[n]," border-4 rounded-full animate-ping ").concat(g?"":p("border")),style:g?{borderColor:o}:{}}),e.jsx("div",{className:"absolute inset-2 border-4 rounded-full animate-ping ".concat(g?"":p("border")),style:g?{borderColor:o,animationDelay:"0.5s"}:{animationDelay:"0.5s"}})]})},S=e.jsxs("div",{className:"flex flex-col items-center justify-center space-y-3 ".concat(m),children:[function(){if("image"===s&&x)return e.jsx(N,{});switch(s){case"dots":return e.jsx(w,{});case"pulse":return e.jsx(C,{});case"bars":return e.jsx(D,{});case"ripple":return e.jsx(k,{});default:return e.jsx(y,{})}}(),d&&e.jsx("p",{className:"".concat({sm:"text-xs",md:"text-sm",lg:"text-base",xl:"text-lg"}[n]," font-medium animate-pulse ").concat(g?"":p("text")),style:g?{color:o}:{},children:d})]});return c?e.jsx("div",{className:"fixed inset-0 bg-white/80 backdrop-blur-sm flex items-center justify-center z-50",children:S}):S};exports.LoadingDemo=function(){var n=a.useState("blue-500"),t=n[0],s=n[1],l=a.useState("spinner"),o=l[0],i=l[1],c=a.useState("md"),d=c[0],u=c[1],m=a.useState(!1),x=m[0],b=m[1],h=["spinner","dots","pulse","bars","ripple"];return e.jsxs("div",{className:"p-8 max-w-4xl mx-auto",children:[e.jsx("h1",{className:"text-3xl font-bold text-gray-800 mb-8 text-center",children:"Modern Loading Component"}),e.jsxs("div",{className:"bg-white rounded-xl shadow-lg p-6 mb-8",children:[e.jsx("h2",{className:"text-xl font-semibold text-gray-700 mb-4",children:"Customization"}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6",children:[e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm font-medium text-gray-600 mb-2",children:"Color"}),e.jsx("div",{className:"flex flex-wrap gap-2",children:[{name:"Blue",value:"blue-500",hex:"#3B82F6"},{name:"Purple",value:"purple-500",hex:"#8B5CF6"},{name:"Green",value:"green-500",hex:"#10B981"},{name:"Red",value:"red-500",hex:"#EF4444"},{name:"Orange",value:"orange-500",hex:"#F59E0B"},{name:"Pink",value:"pink-500",hex:"#EC4899"},{name:"Indigo",value:"indigo-500",hex:"#6366F1"},{name:"Teal",value:"teal-500",hex:"#14B8A6"}].map((function(a){return e.jsx("button",{onClick:function(){return s(a.value)},className:"w-8 h-8 rounded-full border-2 transition-all ".concat(t===a.value?"border-gray-400 scale-110":"border-gray-200"),style:{backgroundColor:a.hex},title:"".concat(a.name," (").concat(a.value,")")},a.value)}))})]}),e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm font-medium text-gray-600 mb-2",children:"Variant"}),e.jsx("select",{value:o,onChange:function(e){return i(e.target.value)},className:"w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent",children:h.map((function(a){return e.jsx("option",{value:a,children:a&&(null==a?void 0:a.charAt(0).toUpperCase())+(null==a?void 0:a.slice(1))},a)}))})]}),e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm font-medium text-gray-600 mb-2",children:"Size"}),e.jsx("select",{value:d,onChange:function(e){return u(e.target.value)},className:"w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent",children:["sm","md","lg","xl"].map((function(a){return e.jsx("option",{value:a,children:null==a?void 0:a.toUpperCase()},a)}))})]}),e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm font-medium text-gray-600 mb-2",children:"Full Screen"}),e.jsx("button",{onClick:function(){return b(!0)},className:"w-full p-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors",children:"Demo Full Screen"})]})]}),e.jsxs("div",{className:"bg-gray-50 rounded-lg p-8 flex flex-col items-center justify-center min-h-32",children:[e.jsx(r,{variant:o,size:d,color:t,text:"Loading..."}),e.jsx("div",{className:"mt-4 p-3 bg-white rounded-md shadow-sm",children:e.jsxs("code",{className:"text-sm text-gray-600",children:['color="',t,'"']})})]})]}),e.jsxs("div",{className:"bg-white rounded-xl shadow-lg p-6",children:[e.jsx("h2",{className:"text-xl font-semibold text-gray-700 mb-4",children:"All Variants"}),e.jsx("div",{className:"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6",children:h.map((function(a){return e.jsxs("div",{className:"text-center",children:[e.jsx("div",{className:"bg-gray-50 rounded-lg p-4 flex items-center justify-center h-24 mb-2",children:e.jsx(r,{variant:a,color:t})}),e.jsx("p",{className:"text-sm text-gray-600 capitalize",children:a})]},a)}))}),e.jsxs("div",{className:"mt-6 p-4 bg-blue-50 rounded-lg",children:[e.jsx("h3",{className:"font-semibold text-blue-800 mb-2",children:"Usage Examples:"}),e.jsxs("div",{className:"space-y-2 text-sm",children:[e.jsxs("div",{className:"bg-white p-2 rounded border",children:[e.jsx("code",{className:"text-blue-600",children:"// Tailwind CSS class"}),e.jsx("br",{}),e.jsx("code",{children:'<Loading color="primary-500" />'})]}),e.jsxs("div",{className:"bg-white p-2 rounded border",children:[e.jsx("code",{className:"text-blue-600",children:"// Hex color"}),e.jsx("br",{}),e.jsx("code",{children:'<Loading color="#your-brand-color" />'})]}),e.jsxs("div",{className:"bg-white p-2 rounded border",children:[e.jsx("code",{className:"text-blue-600",children:"// Custom Tailwind color"}),e.jsx("br",{}),e.jsx("code",{children:'<Loading color="emerald-400" variant="dots" />'})]})]})]})]}),x&&e.jsx(r,{variant:o,size:d,color:t,text:"Loading in full screen...",fullScreen:!0}),x&&e.jsx("button",{onClick:function(){return b(!1)},className:"fixed top-4 right-4 z-50 bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 transition-colors",children:"Close Full Screen"})]})},exports.default=r;
+//# sourceMappingURL=Loading.js.map

package/dist/cjs/components/Loading/Loading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.js","sources":["../../../../src/components/Loading/Loading.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface LoadingProps {\n    size?: 'sm' | 'md' | 'lg' | 'xl';\n    variant?: 'spinner' | 'dots' | 'pulse' | 'bars' | 'ripple' | 'image';\n    color?: string;\n    fullScreen?: boolean;\n    text?: string;\n    className?: string;\n    image?: string;\n    imageEffect?: 'pulse' | 'bounce' | 'spin' | 'float' | 'heartbeat';\n}\n\nconst Loading: React.FC<LoadingProps> = ({\n                                             size = 'md',\n                                             variant = 'pulse',\n                                             color = 'primary',\n                                             fullScreen = false,\n                                             text,\n                                             className = '',\n                                             image,\n                                             imageEffect = 'pulse',\n                                         }) => {\n    // Check if color is a hex value or Tailwind class\n    const isHexColor = color.startsWith('#');\n\n    // Generate Tailwind classes for non-hex colors\n    const getColorClasses = (property: string) => {\n        if (isHexColor) return '';\n        return {\n            text: `text-${color}`,\n            bg: `bg-${color}`,\n            border: `border-${color}`,\n            borderTop: `border-t-${color}`,\n            borderRight: `border-r-${color}`,\n        }[property] || '';\n    };\n\n    // Get inline styles for hex colors\n    const getColorStyle = (property: string) => {\n        if (!isHexColor) return {};\n        const styleMap: Record<string, string> = {\n            color: 'color',\n            backgroundColor: 'backgroundColor',\n            borderColor: 'borderColor',\n            borderTopColor: 'borderTopColor',\n            borderRightColor: 'borderRightColor',\n        };\n        return { [styleMap[property]]: color };\n    };\n\n    const sizeClasses = {\n        sm: 'w-4 h-4',\n        md: 'w-8 h-8',\n        lg: 'w-12 h-12',\n        xl: 'w-16 h-16',\n    };\n\n    const imageSizeClasses = {\n        sm: 'w-8 h-8',\n        md: 'w-12 h-12',\n        lg: 'w-16 h-16',\n        xl: 'w-20 h-20',\n    };\n\n    const textSizeClasses = {\n        sm: 'text-xs',\n        md: 'text-sm',\n        lg: 'text-base',\n        xl: 'text-lg',\n    };\n\n    const getImageEffectClasses = () => {\n        switch (imageEffect) {\n            case 'bounce':\n                return 'animate-bounce';\n            case 'spin':\n                return 'animate-spin';\n            case 'float':\n                return 'animate-pulse hover:animate-bounce';\n            case 'heartbeat':\n                return 'animate-ping';\n            default:\n                return 'animate-pulse';\n        }\n    };\n\n    const ImageLoader = () => (\n        <div className=\"relative flex items-center justify-center\">\n            <img\n                src={image}\n                alt=\"Loading\"\n                className={`${imageSizeClasses[size]} object-contain ${getImageEffectClasses()}`}\n                style={{\n                    filter: 'drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1))',\n                    animationDuration: imageEffect === 'heartbeat' ? '1.5s' : imageEffect === 'bounce' ? '1s' : '2s',\n                }}\n            />\n            {imageEffect === 'float' && (\n                <div\n                    className={`absolute inset-0 ${imageSizeClasses[size]} rounded-full bg-gradient-to-r from-purple-400 to-blue-400 opacity-20 animate-ping`}\n                    style={{ animationDuration: '2s' }}\n                />\n            )}\n        </div>\n    );\n\n    const SpinnerLoader = () => (\n        <div className=\"relative\">\n            <div\n                className={`${sizeClasses[size]} border-4 border-gray-200 rounded-full animate-spin ${\n                    !isHexColor ? getColorClasses('borderTop') : ''\n                }`}\n                style={isHexColor ? { borderTopColor: color } : {}}\n            />\n            <div\n                className={`absolute inset-0 ${sizeClasses[size]} border-4 border-transparent rounded-full animate-spin ${\n                    !isHexColor ? getColorClasses('borderRight') : ''\n                }`}\n                style={isHexColor ? { borderRightColor: color, animationDirection: 'reverse', animationDuration: '0.75s' } : { animationDirection: 'reverse', animationDuration: '0.75s' }}\n            />\n        </div>\n    );\n\n    const DotsLoader = () => (\n        <div className=\"flex space-x-1\">\n            {[0, 1, 2].map((i) => (\n                <div\n                    key={i}\n                    className={`${size === 'sm' ? 'w-2 h-2' : size === 'md' ? 'w-3 h-3' : size === 'lg' ? 'w-4 h-4' : 'w-5 h-5'} rounded-full animate-bounce ${\n                        !isHexColor ? getColorClasses('bg') : ''\n                    }`}\n                    style={isHexColor ? {\n                        backgroundColor: color,\n                        animationDelay: `${i * 0.2}s`,\n                        animationDuration: '1.4s'\n                    } : {\n                        animationDelay: `${i * 0.2}s`,\n                        animationDuration: '1.4s'\n                    }}\n                />\n            ))}\n        </div>\n    );\n\n    const PulseLoader = () => (\n        <div className=\"relative\">\n            <div\n                className={`${sizeClasses[size]} rounded-full animate-pulse ${\n                    !isHexColor ? getColorClasses('bg') : ''\n                }`}\n                style={isHexColor ? { backgroundColor: color } : {}}\n            />\n            <div\n                className={`absolute inset-0 ${sizeClasses[size]} rounded-full animate-ping opacity-30 ${\n                    !isHexColor ? getColorClasses('bg') : ''\n                }`}\n                style={isHexColor ? { backgroundColor: color } : {}}\n            />\n        </div>\n    );\n\n    const BarsLoader = () => (\n        <div className=\"flex space-x-1 items-end\">\n            {[0, 1, 2, 3].map((i) => (\n                <div\n                    key={i}\n                    className={`${size === 'sm' ? 'w-1' : size === 'md' ? 'w-1.5' : size === 'lg' ? 'w-2' : 'w-2.5'} rounded-sm animate-pulse ${\n                        !isHexColor ? getColorClasses('bg') : ''\n                    }`}\n                    style={isHexColor ? {\n                        backgroundColor: color,\n                        height: `${20 + i * 10}px`,\n                        animationDelay: `${i * 0.15}s`,\n                        animationDuration: '1.2s'\n                    } : {\n                        height: `${20 + i * 10}px`,\n                        animationDelay: `${i * 0.15}s`,\n                        animationDuration: '1.2s'\n                    }}\n                />\n            ))}\n        </div>\n    );\n\n    const RippleLoader = () => (\n        <div className=\"relative\">\n            <div\n                className={`${sizeClasses[size]} border-4 rounded-full animate-ping ${\n                    !isHexColor ? getColorClasses('border') : ''\n                }`}\n                style={isHexColor ? { borderColor: color } : {}}\n            />\n            <div\n                className={`absolute inset-2 border-4 rounded-full animate-ping ${\n                    !isHexColor ? getColorClasses('border') : ''\n                }`}\n                style={isHexColor ? {\n                    borderColor: color,\n                    animationDelay: '0.5s'\n                } : {\n                    animationDelay: '0.5s'\n                }}\n            />\n        </div>\n    );\n\n    const getLoader = () => {\n        if (variant === 'image' && image) {\n            return <ImageLoader />;\n        }\n\n        switch (variant) {\n            case 'dots':\n                return <DotsLoader />;\n            case 'pulse':\n                return <PulseLoader />;\n            case 'bars':\n                return <BarsLoader />;\n            case 'ripple':\n                return <RippleLoader />;\n            default:\n                return <SpinnerLoader />;\n        }\n    };\n\n    const content = (\n        <div className={`flex flex-col items-center justify-center space-y-3 ${className}`}>\n            {getLoader()}\n            {text && (\n                <p\n                    className={`${textSizeClasses[size]} font-medium animate-pulse ${\n                        !isHexColor ? getColorClasses('text') : ''\n                    }`}\n                    style={isHexColor ? { color } : {}}\n                >\n                    {text}\n                </p>\n            )}\n        </div>\n    );\n\n    if (fullScreen) {\n        return (\n            <div className=\"fixed inset-0 bg-white/80 backdrop-blur-sm flex items-center justify-center z-50\">\n                {content}\n            </div>\n        );\n    }\n\n    return content;\n};\n\nexport default Loading;\n// Demo component to showcase different variants\nexport const LoadingDemo: React.FC = () => {\n    const [selectedColor, setSelectedColor] = React.useState('blue-500');\n    const [selectedVariant, setSelectedVariant] = React.useState<LoadingProps['variant']>('spinner');\n    const [selectedSize, setSelectedSize] = React.useState<LoadingProps['size']>('md');\n    const [showFullScreen, setShowFullScreen] = React.useState(false);\n\n    const colors = [\n        { name: 'Blue', value: 'blue-500', hex: '#3B82F6' },\n        { name: 'Purple', value: 'purple-500', hex: '#8B5CF6' },\n        { name: 'Green', value: 'green-500', hex: '#10B981' },\n        { name: 'Red', value: 'red-500', hex: '#EF4444' },\n        { name: 'Orange', value: 'orange-500', hex: '#F59E0B' },\n        { name: 'Pink', value: 'pink-500', hex: '#EC4899' },\n        { name: 'Indigo', value: 'indigo-500', hex: '#6366F1' },\n        { name: 'Teal', value: 'teal-500', hex: '#14B8A6' },\n    ];\n\n    const variants: LoadingProps['variant'][] = ['spinner', 'dots', 'pulse', 'bars', 'ripple'];\n    const sizes: LoadingProps['size'][] = ['sm', 'md', 'lg', 'xl'];\n\n    return (\n        <div className=\"p-8 max-w-4xl mx-auto\">\n            <h1 className=\"text-3xl font-bold text-gray-800 mb-8 text-center\">\n                Modern Loading Component\n            </h1>\n\n            <div className=\"bg-white rounded-xl shadow-lg p-6 mb-8\">\n                <h2 className=\"text-xl font-semibold text-gray-700 mb-4\">Customization</h2>\n\n                <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6\">\n                    <div>\n                        <label className=\"block text-sm font-medium text-gray-600 mb-2\">Color</label>\n                        <div className=\"flex flex-wrap gap-2\">\n                            {colors.map((colorOption) => (\n                                <button\n                                    key={colorOption.value}\n                                    onClick={() => setSelectedColor(colorOption.value)}\n                                    className={`w-8 h-8 rounded-full border-2 transition-all ${\n                                        selectedColor === colorOption.value ? 'border-gray-400 scale-110' : 'border-gray-200'\n                                    }`}\n                                    style={{ backgroundColor: colorOption.hex }}\n                                    title={`${colorOption.name} (${colorOption.value})`}\n                                />\n                            ))}\n                        </div>\n                    </div>\n\n                    <div>\n                        <label className=\"block text-sm font-medium text-gray-600 mb-2\">Variant</label>\n                        <select\n                            value={selectedVariant}\n                            onChange={(e) => setSelectedVariant(e.target.value as LoadingProps['variant'])}\n                            className=\"w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n                        >\n                            {variants.map((variant) => (\n                                <option key={variant} value={variant}>\n                                    {variant && (variant?.charAt(0).toUpperCase() + variant?.slice(1))}\n                                </option>\n                            ))}\n                        </select>\n                    </div>\n\n                    <div>\n                        <label className=\"block text-sm font-medium text-gray-600 mb-2\">Size</label>\n                        <select\n                            value={selectedSize}\n                            onChange={(e) => setSelectedSize(e.target.value as LoadingProps['size'])}\n                            className=\"w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n                        >\n                            {sizes.map((size) => (\n                                <option key={size} value={size}>\n                                    {size?.toUpperCase()}\n                                </option>\n                            ))}\n                        </select>\n                    </div>\n\n                    <div>\n                        <label className=\"block text-sm font-medium text-gray-600 mb-2\">Full Screen</label>\n                        <button\n                            onClick={() => setShowFullScreen(true)}\n                            className=\"w-full p-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors\"\n                        >\n                            Demo Full Screen\n                        </button>\n                    </div>\n                </div>\n\n                <div className=\"bg-gray-50 rounded-lg p-8 flex flex-col items-center justify-center min-h-32\">\n                    <Loading\n                        variant={selectedVariant}\n                        size={selectedSize}\n                        color={selectedColor}\n                        text=\"Loading...\"\n                    />\n                    <div className=\"mt-4 p-3 bg-white rounded-md shadow-sm\">\n                        <code className=\"text-sm text-gray-600\">\n                            color=\"{selectedColor}\"\n                        </code>\n                    </div>\n                </div>\n            </div>\n\n            <div className=\"bg-white rounded-xl shadow-lg p-6\">\n                <h2 className=\"text-xl font-semibold text-gray-700 mb-4\">All Variants</h2>\n                <div className=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6\">\n                    {variants.map((variant) => (\n                        <div key={variant} className=\"text-center\">\n                            <div className=\"bg-gray-50 rounded-lg p-4 flex items-center justify-center h-24 mb-2\">\n                                <Loading variant={variant} color={selectedColor} />\n                            </div>\n                            <p className=\"text-sm text-gray-600 capitalize\">{variant}</p>\n                        </div>\n                    ))}\n                </div>\n\n                <div className=\"mt-6 p-4 bg-blue-50 rounded-lg\">\n                    <h3 className=\"font-semibold text-blue-800 mb-2\">Usage Examples:</h3>\n                    <div className=\"space-y-2 text-sm\">\n                        <div className=\"bg-white p-2 rounded border\">\n                            <code className=\"text-blue-600\">{\"// Tailwind CSS class\"}</code><br/>\n                            <code>{`<Loading color=\"primary-500\" />`}</code>\n                        </div>\n                        <div className=\"bg-white p-2 rounded border\">\n                            <code className=\"text-blue-600\">{\"// Hex color\"}</code><br/>\n                            <code>{`<Loading color=\"#your-brand-color\" />`}</code>\n                        </div>\n                        <div className=\"bg-white p-2 rounded border\">\n                            <code className=\"text-blue-600\">{\"// Custom Tailwind color\"}</code><br/>\n                            <code>{`<Loading color=\"emerald-400\" variant=\"dots\" />`}</code>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            {showFullScreen && (\n                <Loading\n                    variant={selectedVariant}\n                    size={selectedSize}\n                    color={selectedColor}\n                    text=\"Loading in full screen...\"\n                    fullScreen\n                />\n            )}\n\n            {showFullScreen && (\n                <button\n                    onClick={() => setShowFullScreen(false)}\n                    className=\"fixed top-4 right-4 z-50 bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 transition-colors\"\n                >\n                    Close Full Screen\n                </button>\n            )}\n        </div>\n    );\n};"],"names":["Loading","_a","_b","size","_c","variant","_d","color","_e","fullScreen","text","_f","className","image","_g","imageEffect","isHexColor","startsWith","getColorClasses","property","concat","bg","border","borderTop","borderRight","sizeClasses","sm","md","lg","xl","imageSizeClasses","getImageEffectClasses","ImageLoader","_jsxs","children","_jsx","src","alt","style","filter","animationDuration","SpinnerLoader","borderTopColor","borderRightColor","animationDirection","DotsLoader","map","i","backgroundColor","animationDelay","PulseLoader","BarsLoader","height","RippleLoader","borderColor","content","getLoader","React","useState","selectedColor","setSelectedColor","selectedVariant","setSelectedVariant","selectedSize","setSelectedSize","showFullScreen","setShowFullScreen","variants","name","value","hex","colorOption","onClick","title","onChange","e","target","charAt","toUpperCase","slice"],"mappings":"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"}

package/dist/cjs/components/Modal/Modal.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("lucide-react"),n=function(n){var s=n.isOpen,i=n.onClose,r=n.title,o=n.children,a=n.size,c=void 0===a?"md":a,d=n.position,u=void 0===d?"right":d,f=n.showCloseButton,m=void 0===f||f,x=n.closeOnOverlayClick,h=void 0!==x&&x,g=n.closeOnEscape,v=void 0===g||g,p=n.className,b=void 0===p?"":p,j=n.overlayClassName,y=void 0===j?"":j,N=n.contentClassName,w=void 0===N?"":N,C=n.headerClassName,k=void 0===C?"":C,E=n.footer,z=n.footerClassName,S=void 0===z?"":z,O=n.maxHeight,L=void 0!==O&&O,M=t.useRef(null),T=t.useRef(null);t.useEffect((function(){var e;return s?(T.current=document.activeElement,null===(e=M.current)||void 0===e||e.focus(),document.body.style.overflow="hidden"):(document.body.style.overflow="unset",T.current&&T.current.focus()),function(){document.body.style.overflow="unset"}}),[s]),t.useEffect((function(){var e=function(e){"Escape"===e.key&&v&&i()};return s&&document.addEventListener("keydown",e),function(){document.removeEventListener("keydown",e)}}),[s,v,i]);var q=function(e){e.target===e.currentTarget&&h&&"full"!==c&&i()};return s?e.jsxs("div",{className:"fixed inset-0 z-50 ".concat(y),role:"dialog","aria-modal":"true","aria-labelledby":r?"modal-title":void 0,children:["full"!==c&&e.jsx("div",{className:"fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-700",onClick:q}),e.jsx("div",{className:"fixed inset-0 flex ".concat("p-0"," ").concat(function(){if("full"===c)return"items-start justify-start";return{left:"items-start justify-start",right:"items-start justify-end",center:"items-center justify-center"}[u]}()),onClick:q,children:e.jsxs("div",{ref:M,tabIndex:-1,className:"\n            relative w-full ".concat({xs:"max-w-xs",sm:"max-w-sm",md:"max-w-md",lg:"max-w-lg",xl:"max-w-xl","2xl":"max-w-2xl",full:"w-full h-full"}[c]," bg-white shadow-2xl transform transition-all duration-700 ease-out flex flex-col\n            ").concat("full"===c?"h-full max-h-screen overflow-hidden":"left"===u||"right"===u?"h-full ".concat(L?"max-h-screen":""):"".concat(L?"max-h-[90vh] overflow-hidden":""),"\n            ").concat("full"===c?"animate-in fade-in-0":"center"===u?"animate-in fade-in-0 zoom-in-95":"left"===u?"animate-in slide-in-from-left-full":"animate-in slide-in-from-right-full","\n            ").concat(b,"\n          "),onClick:function(e){return e.stopPropagation()},children:[(r||m)&&e.jsxs("div",{className:"flex items-center justify-between px-6 py-3 border-b border-gray-200 flex-shrink-0 ".concat(k),children:[r&&e.jsx("h2",{id:"modal-title",className:"text-xl font-semibold text-gray-900 truncate pr-4",children:r}),m&&e.jsx("button",{onClick:i,className:"flex items-center justify-center w-8 h-8 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2","aria-label":"Close modal",children:e.jsx(l.X,{size:20})})]}),e.jsx("div",{className:"flex-1 min-h-0 overflow-y-auto ".concat(w),children:L&&("left"===u||"right"===u)||"full"===c?e.jsx("div",{className:"p-6 min-h-0 flex-1",children:o}):e.jsx("div",{className:"p-6",children:o})}),E&&e.jsx("div",{className:"px-6 py-4 border-t border-gray-200  flex-shrink-0 ".concat(""," ").concat(S),children:E})]})})]}):null};exports.ModalExample=function(){var l=t.useState(!1),s=l[0],i=l[1],r=t.useState("left"),o=r[0],a=r[1],c=t.useState("md"),d=c[0],u=c[1],f=e.jsxs("div",{className:"flex justify-end space-x-3",children:[e.jsx("button",{onClick:function(){return i(!1)},className:"px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200",children:"Cancel"}),e.jsx("button",{onClick:function(){return i(!1)},className:"px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200",children:"Save Changes"})]});return e.jsxs("div",{className:"p-8 space-y-4",children:[e.jsxs("div",{className:"flex flex-wrap gap-4 mb-6",children:[e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm font-medium text-gray-700 mb-2",children:"Position"}),e.jsxs("select",{value:o,onChange:function(e){return a(e.target.value)},className:"border border-gray-300 rounded-md px-3 py-2 text-sm",disabled:"full"===d,children:[e.jsx("option",{value:"left",children:"Left"}),e.jsx("option",{value:"right",children:"Right"}),e.jsx("option",{value:"center",children:"Center"})]})]}),e.jsxs("div",{children:[e.jsx("label",{className:"block text-sm font-medium text-gray-700 mb-2",children:"Size"}),e.jsxs("select",{value:d,onChange:function(e){return u(e.target.value)},className:"border border-gray-300 rounded-md px-3 py-2 text-sm",children:[e.jsx("option",{value:"xs",children:"Extra Small"}),e.jsx("option",{value:"sm",children:"Small"}),e.jsx("option",{value:"md",children:"Medium"}),e.jsx("option",{value:"lg",children:"Large"}),e.jsx("option",{value:"xl",children:"Extra Large"}),e.jsx("option",{value:"2xl",children:"2X Large"}),e.jsx("option",{value:"full",children:"Full Screen"})]})]})]}),e.jsx("button",{onClick:function(){return i(!0)},className:"px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200 font-medium",children:"Open Modal"}),e.jsx(n,{isOpen:s,onClose:function(){return i(!1)},title:"Example Modal",size:d,position:o,footer:f,maxHeight:"center"!==o,children:e.jsxs("div",{className:"space-y-4",children:[e.jsx("p",{className:"text-gray-600",children:"This is an example of the multipurpose modal component. It supports different sizes, positions, and configurations."}),e.jsxs("div",{className:"bg-gray-50 p-4 rounded-lg",children:[e.jsx("h4",{className:"font-medium text-gray-900 mb-2",children:"Features:"}),e.jsxs("ul",{className:"text-sm text-gray-600 space-y-1 list-disc list-inside",children:[e.jsx("li",{children:"Multiple sizes (xs, sm, md, lg, xl, 2xl, full screen)"}),e.jsx("li",{children:"Three positions (left, right, center)"}),e.jsx("li",{children:"Customizable styling with className props"}),e.jsx("li",{children:"Keyboard navigation and accessibility"}),e.jsx("li",{children:"Click outside to close (disabled for full screen)"}),e.jsx("li",{children:"Smooth animations"}),e.jsx("li",{children:"Optional footer with actions"}),e.jsx("li",{children:"Full screen mode without margins or border radius"})]})]}),("left"===o||"right"===o||"full"===d)&&e.jsx("div",{className:"space-y-2",children:Array.from({length:20},(function(t,l){return e.jsxs("p",{className:"text-gray-600",children:["This is paragraph ",l+1," to demonstrate scrolling in side panels","full"===d?" and full screen mode":"","."]},l)}))})]})})]})},exports.default=n;
+//# sourceMappingURL=Modal.js.map

package/dist/cjs/components/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport { X } from \"lucide-react\";\n\ntype ModalSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"full\";\ntype ModalPosition = \"left\" | \"right\" | \"center\";\n\nexport interface ModalProps {\n  isOpen: boolean;\n  onClose: () => void;\n  title?: React.ReactNode;\n  children: React.ReactNode;\n  size?: ModalSize;\n  position?: ModalPosition;\n  showCloseButton?: boolean;\n  closeOnOverlayClick?: boolean;\n  closeOnEscape?: boolean;\n  className?: string;\n  overlayClassName?: string;\n  contentClassName?: string;\n  headerClassName?: string;\n  footer?: React.ReactNode;\n  footerClassName?: string;\n  maxHeight?: boolean;\n}\n\nconst Modal: React.FC<ModalProps> = ({\n  isOpen,\n  onClose,\n  title,\n  children,\n  size = \"md\",\n  position = \"right\",\n  showCloseButton = true,\n  closeOnOverlayClick = false,\n  closeOnEscape = true,\n  className = \"\",\n  overlayClassName = \"\",\n  contentClassName = \"\",\n  headerClassName = \"\",\n  footer,\n  footerClassName = \"\",\n  maxHeight = false,\n}) => {\n  const modalRef = useRef<HTMLDivElement>(null);\n  const previousFocusRef = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (isOpen) {\n      // Store the previously focused element\n      previousFocusRef.current = document.activeElement as HTMLElement;\n\n      // Focus the modal\n      modalRef.current?.focus();\n\n      // Prevent body scroll\n      document.body.style.overflow = \"hidden\";\n    } else {\n      // Restore body scroll\n      document.body.style.overflow = \"unset\";\n\n      // Restore focus to previously focused element\n      if (previousFocusRef.current) {\n        previousFocusRef.current.focus();\n      }\n    }\n\n    return () => {\n      document.body.style.overflow = \"unset\";\n    };\n  }, [isOpen]);\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\" && closeOnEscape) {\n        onClose();\n      }\n    };\n\n    if (isOpen) {\n      document.addEventListener(\"keydown\", handleEscape);\n    }\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleEscape);\n    };\n  }, [isOpen, closeOnEscape, onClose]);\n\n  const handleOverlayClick = (event: React.MouseEvent) => {\n    if (\n      event.target === event.currentTarget &&\n      closeOnOverlayClick &&\n      size !== \"full\"\n    ) {\n      onClose();\n    }\n  };\n\n  const getSizeClasses = (): string => {\n    const sizeMap: Record<ModalSize, string> = {\n      xs: \"max-w-xs\",\n      sm: \"max-w-sm\",\n      md: \"max-w-md\",\n      lg: \"max-w-lg\",\n      xl: \"max-w-xl\",\n      \"2xl\": \"max-w-2xl\",\n      full: \"w-full h-full\",\n    };\n    return sizeMap[size];\n  };\n\n  const getPositionClasses = (): string => {\n    if (size === \"full\") {\n      return \"items-start justify-start\";\n    }\n\n    const positionMap: Record<ModalPosition, string> = {\n      left: \"items-start justify-start\",\n      right: \"items-start justify-end\",\n      center: \"items-center justify-center\",\n    };\n    return positionMap[position];\n  };\n\n  const getModalPositionClasses = (): string => {\n    if (size === \"full\") {\n      return \"h-full max-h-screen overflow-hidden\";\n    }\n\n    if (position === \"left\" || position === \"right\") {\n      return `h-full ${maxHeight ? \"max-h-screen\" : \"\"}`;\n    }\n    return `${maxHeight ? \"max-h-[90vh] overflow-hidden\" : \"\"}`;\n  };\n\n  const getContainerPadding = (): string => {\n    return size === \"full\" ? \"p-0\" : \"p-0\";\n  };\n\n  if (!isOpen) return null;\n\n  return (\n    <div\n      className={`fixed inset-0 z-50 ${overlayClassName}`}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={title ? \"modal-title\" : undefined}\n    >\n      {/* Backdrop - Hidden for full screen */}\n      {size !== \"full\" && (\n        <div\n          className=\"fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-700\"\n          onClick={handleOverlayClick}\n        />\n      )}\n\n      {/* Modal Container */}\n      <div\n        className={`fixed inset-0 flex ${getContainerPadding()} ${getPositionClasses()}`}\n        onClick={handleOverlayClick}\n      >\n        {/* Modal Content */}\n        <div\n          ref={modalRef}\n          tabIndex={-1}\n          className={`\n            relative w-full ${getSizeClasses()} bg-white shadow-2xl transform transition-all duration-700 ease-out flex flex-col\n            ${getModalPositionClasses()}\n            ${\n              size === \"full\"\n                ? \"animate-in fade-in-0\"\n                : position === \"center\"\n                  ? \"animate-in fade-in-0 zoom-in-95\"\n                  : position === \"left\"\n                    ? \"animate-in slide-in-from-left-full\"\n                    : \"animate-in slide-in-from-right-full\"\n            }\n            ${className}\n          `}\n          onClick={(e) => e.stopPropagation()}\n        >\n          {/* Header */}\n          {(title || showCloseButton) && (\n            <div\n              className={`flex items-center justify-between px-6 py-3 border-b border-gray-200 flex-shrink-0 ${headerClassName}`}\n            >\n              {title && (\n                <h2\n                  id=\"modal-title\"\n                  className=\"text-xl font-semibold text-gray-900 truncate pr-4\"\n                >\n                  {title}\n                </h2>\n              )}\n              {showCloseButton && (\n                <button\n                  onClick={onClose}\n                  className=\"flex items-center justify-center w-8 h-8 rounded-full text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\"\n                  aria-label=\"Close modal\"\n                >\n                  <X size={20} />\n                </button>\n              )}\n            </div>\n          )}\n\n          {/* Content */}\n          <div className={`flex-1 min-h-0 overflow-y-auto ${contentClassName}`}>\n            {(maxHeight && (position === \"left\" || position === \"right\")) ||\n            size === \"full\" ? (\n              <div className=\"p-6 min-h-0 flex-1\">{children}</div>\n            ) : (\n              <div className=\"p-6\">{children}</div>\n            )}\n          </div>\n\n          {/* Footer */}\n          {footer && (\n            <div\n              className={`px-6 py-4 border-t border-gray-200  flex-shrink-0 ${size === \"full\" ? \"\" : \"\"} ${footerClassName}`}\n            >\n              {footer}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Modal;\n\nexport const ModalExample: React.FC = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [position, setPosition] = React.useState<ModalPosition>(\"left\");\n  const [size, setSize] = React.useState<ModalSize>(\"md\");\n\n  const footer = (\n    <div className=\"flex justify-end space-x-3\">\n      <button\n        onClick={() => setIsOpen(false)}\n        className=\"px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200\"\n      >\n        Cancel\n      </button>\n      <button\n        onClick={() => setIsOpen(false)}\n        className=\"px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200\"\n      >\n        Save Changes\n      </button>\n    </div>\n  );\n\n  return (\n    <div className=\"p-8 space-y-4\">\n      <div className=\"flex flex-wrap gap-4 mb-6\">\n        <div>\n          <label className=\"block text-sm font-medium text-gray-700 mb-2\">\n            Position\n          </label>\n          <select\n            value={position}\n            onChange={(e) => setPosition(e.target.value as ModalPosition)}\n            className=\"border border-gray-300 rounded-md px-3 py-2 text-sm\"\n            disabled={size === \"full\"}\n          >\n            <option value=\"left\">Left</option>\n            <option value=\"right\">Right</option>\n            <option value=\"center\">Center</option>\n          </select>\n        </div>\n\n        <div>\n          <label className=\"block text-sm font-medium text-gray-700 mb-2\">\n            Size\n          </label>\n          <select\n            value={size}\n            onChange={(e) => setSize(e.target.value as ModalSize)}\n            className=\"border border-gray-300 rounded-md px-3 py-2 text-sm\"\n          >\n            <option value=\"xs\">Extra Small</option>\n            <option value=\"sm\">Small</option>\n            <option value=\"md\">Medium</option>\n            <option value=\"lg\">Large</option>\n            <option value=\"xl\">Extra Large</option>\n            <option value=\"2xl\">2X Large</option>\n            <option value=\"full\">Full Screen</option>\n          </select>\n        </div>\n      </div>\n\n      <button\n        onClick={() => setIsOpen(true)}\n        className=\"px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200 font-medium\"\n      >\n        Open Modal\n      </button>\n\n      <Modal\n        isOpen={isOpen}\n        onClose={() => setIsOpen(false)}\n        title=\"Example Modal\"\n        size={size}\n        position={position}\n        footer={footer}\n        maxHeight={position !== \"center\"}\n      >\n        <div className=\"space-y-4\">\n          <p className=\"text-gray-600\">\n            This is an example of the multipurpose modal component. It supports\n            different sizes, positions, and configurations.\n          </p>\n\n          <div className=\"bg-gray-50 p-4 rounded-lg\">\n            <h4 className=\"font-medium text-gray-900 mb-2\">Features:</h4>\n            <ul className=\"text-sm text-gray-600 space-y-1 list-disc list-inside\">\n              <li>Multiple sizes (xs, sm, md, lg, xl, 2xl, full screen)</li>\n              <li>Three positions (left, right, center)</li>\n              <li>Customizable styling with className props</li>\n              <li>Keyboard navigation and accessibility</li>\n              <li>Click outside to close (disabled for full screen)</li>\n              <li>Smooth animations</li>\n              <li>Optional footer with actions</li>\n              <li>Full screen mode without margins or border radius</li>\n            </ul>\n          </div>\n\n          {(position === \"left\" || position === \"right\" || size === \"full\") && (\n            <div className=\"space-y-2\">\n              {Array.from({ length: 20 }, (_, i) => (\n                <p key={i} className=\"text-gray-600\">\n                  This is paragraph {i + 1} to demonstrate scrolling in side\n                  panels{size === \"full\" ? \" and full screen mode\" : \"\"}.\n                </p>\n              ))}\n            </div>\n          )}\n        </div>\n      </Modal>\n    </div>\n  );\n};\n"],"names":["Modal","_a","isOpen","onClose","title","children","_b","size","_c","position","_d","showCloseButton","_e","closeOnOverlayClick","_f","closeOnEscape","_g","className","_h","overlayClassName","_j","contentClassName","_k","headerClassName","footer","_l","footerClassName","_m","maxHeight","modalRef","useRef","previousFocusRef","useEffect","current","document","activeElement","focus","body","style","overflow","handleEscape","event","key","addEventListener","removeEventListener","handleOverlayClick","target","currentTarget","_jsxs","concat","role","undefined","_jsx","onClick","left","right","center","getPositionClasses","ref","tabIndex","xs","sm","md","lg","xl","full","e","stopPropagation","id","X","React","useState","setIsOpen","setPosition","setSize","value","onChange","disabled","Array","from","length","_","i"],"mappings":"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"}

package/dist/cjs/components/SkeletonLoader/SkeletonLoader.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/tslib/tslib.es6.js"),t=require("react/jsx-runtime"),s=require("react"),i=require("../Cards/Card.js"),n={xs:{width:"4rem",height:"1rem"},sm:{width:"6rem",height:"1.25rem"},md:{width:"8rem",height:"1.5rem"},lg:{width:"12rem",height:"2rem"},xl:{width:"16rem",height:"2.5rem"}},r={text:{baseClasses:"rounded",defaultSize:{width:"100%",height:"1rem"}},rectangular:{baseClasses:"",defaultSize:{width:"100%",height:"8rem"}},circular:{baseClasses:"rounded-full aspect-square",defaultSize:{width:"3rem",height:"3rem"}},rounded:{baseClasses:"rounded-lg",defaultSize:{width:"100%",height:"6rem"}},card:{baseClasses:"rounded-lg",defaultSize:{width:"100%",height:"12rem"}},avatar:{baseClasses:"rounded-full aspect-square",defaultSize:{width:"2.5rem",height:"2.5rem"}},button:{baseClasses:"rounded-md",defaultSize:{width:"5rem",height:"2.25rem"}},image:{baseClasses:"rounded",defaultSize:{width:"100%",height:"10rem"}},line:{baseClasses:"rounded-full",defaultSize:{width:"100%",height:"0.25rem"}}},a=function(e){var i=e.variant,a=void 0===i?"text":i,d=e.animation,h=void 0===d?"pulse":d,o=e.size,l=e.width,u=e.height,c=e.count,m=void 0===c?1:c,x=e.className,g=void 0===x?"":x,f=e.shimmer,p=void 0!==f&&f,v=e.borderRadius,w=e.intensity,j=void 0===w?"medium":w,b=e.delay,y=void 0===b?0:b,k=s.useState(0===y),N=k[0],S=k[1];s.useEffect((function(){!function(){if("undefined"!=typeof document&&!document.getElementById("skeleton-loader-styles")){var e=document.createElement("style");e.id="skeleton-loader-styles",e.textContent="\n  @keyframes wave {\n    0% { transform: translateX(-100%); }\n    50% { transform: translateX(100%); }\n    100% { transform: translateX(100%); }\n  }\n\n  @keyframes shimmer {\n    0% { background-position: -200% 0; }\n    100% { background-position: 200% 0; }\n  }\n\n  .skeleton-wave {\n    animation: wave 1.6s linear infinite;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .skeleton-shimmer {\n    animation: shimmer 2s ease-in-out infinite;\n    background-size: 200% 100%;\n  }\n\n  .skeleton-wave::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(\n      90deg,\n      transparent,\n      rgba(255, 255, 255, 0.6),\n      transparent\n    );\n    animation: wave 1.6s linear infinite;\n  }\n",document.head.appendChild(e)}}()}),[]);var C=r[a],z=s.useMemo((function(){return{width:void 0!==l?"number"==typeof l?"".concat(l,"px"):l:o?n[o].width:C.defaultSize.width,height:void 0!==u?"number"==typeof u?"".concat(u,"px"):u:o?n[o].height:C.defaultSize.height}}),[l,u,o,C]);if(s.useEffect((function(){if(y>0){var e=setTimeout((function(){return S(!0)}),y);return function(){return clearTimeout(e)}}}),[y]),!N)return null;var _=function(){var e=["block","bg-gray-200",C.baseClasses];switch("pulse"===h?e.push("animate-pulse"):"wave"===h&&e.push("animate-wave"),j){case"light":e.push("bg-gray-100");break;case"medium":e.push("bg-gray-200");break;case"dark":e.push("bg-gray-300")}return p&&e.push("bg-gradient-to-r","from-gray-200","via-gray-100","to-gray-200","bg-200%","animate-shimmer"),e.join(" ")},A=function(e){return t.jsx("div",{className:"".concat(_()," ").concat(g),style:(s={width:z.width,height:z.height},v&&(s.borderRadius=v),s),"aria-hidden":"true"},e);var s};return m>1?t.jsx("div",{className:"space-y-2",children:Array.from({length:m},(function(e,t){return A(t)}))}):A(0)},d=function(s){return t.jsx(a,e.__assign({},s,{variant:"text"}))},h=function(s){return t.jsx(a,e.__assign({},s,{variant:"avatar"}))},o=function(s){return t.jsx(a,e.__assign({},s,{variant:"button"}))},l=function(e){var s=e.showBio,i=void 0===s||s;return t.jsxs("div",{className:"flex items-start space-x-4",children:[t.jsx(h,{size:"lg"}),t.jsxs("div",{className:"flex-1 space-y-2",children:[t.jsx(d,{width:"60%",height:"1.25rem"}),t.jsx(d,{width:"40%",height:"1rem",intensity:"light"}),i&&t.jsxs("div",{className:"space-y-1 pt-2",children:[t.jsx(d,{width:"100%"}),t.jsx(d,{width:"80%"}),t.jsx(d,{width:"90%"})]})]})]})},u=function(e){var s=e.itemCount,i=void 0===s?3:s,n=e.showAvatar,r=void 0===n||n,a=e.showMeta,o=void 0===a||a;return t.jsx("div",{className:"space-y-4",children:Array.from({length:i},(function(e,s){return t.jsxs("div",{className:"flex items-start space-x-3",children:[r&&t.jsx(h,{}),t.jsxs("div",{className:"flex-1 space-y-2",children:[t.jsx(d,{width:"75%",height:"1.125rem"}),t.jsx(d,{width:"100%",height:"0.875rem",intensity:"light"}),o&&t.jsxs("div",{className:"flex space-x-4",children:[t.jsx(d,{width:"3rem",height:"0.75rem",intensity:"light"}),t.jsx(d,{width:"4rem",height:"0.75rem",intensity:"light"})]})]})]},s)}))})},c=function(e){var s=e.rows,i=void 0===s?5:s,n=e.columns,r=void 0===n?4:n,a=e.showHeader,h=void 0===a||a;return t.jsxs("div",{className:"space-y-3",children:[h&&t.jsx("div",{className:"flex space-x-4",children:Array.from({length:r},(function(e,s){return t.jsx(d,{width:"100%",height:"1rem",intensity:"dark"},s)}))}),t.jsx("div",{className:"space-y-2",children:Array.from({length:i},(function(e,s){return t.jsx("div",{className:"flex space-x-4",children:Array.from({length:r},(function(e,s){return t.jsx(d,{width:"100%",height:"0.875rem"},s)}))},s)}))})]})};exports.CardStatsSkeleton=function(){return t.jsxs(i,{children:[t.jsx("div",{className:"mb-4",children:t.jsx(d,{width:"180px",height:"28px"})}),t.jsxs("div",{className:"mt-4 grid grid-cols-1 gap-4",children:[t.jsxs("div",{className:"rounded-lg bg-blue-50 p-4",children:[t.jsx(d,{width:"40px",height:"32px",className:"mb-1"}),t.jsx(d,{width:"100px",height:"16px"})]}),t.jsxs("div",{className:"rounded-lg bg-green-50 p-4",children:[t.jsx(d,{width:"40px",height:"32px",className:"mb-1"}),t.jsx(d,{width:"110px",height:"16px"})]}),t.jsxs("div",{className:"rounded-lg bg-yellow-50 p-4",children:[t.jsx(d,{width:"40px",height:"32px",className:"mb-1"}),t.jsx(d,{width:"120px",height:"16px"})]})]})]})},exports.SkeletonAvatar=h,exports.SkeletonButton=o,exports.SkeletonCard=function(s){return t.jsx(a,e.__assign({},s,{variant:"card"}))},exports.SkeletonImage=function(s){return t.jsx(a,e.__assign({},s,{variant:"image"}))},exports.SkeletonList=u,exports.SkeletonLoaderExample=function(){return t.jsxs("div",{className:"bg-white p-5",children:[t.jsx(a,{variant:"text",width:"200px"}),t.jsx(a,{variant:"text",count:3}),t.jsx(h,{size:"lg"}),t.jsx(o,{animation:"wave"}),t.jsx(l,{showBio:!0}),t.jsx(u,{itemCount:5,showAvatar:!0}),t.jsx(c,{rows:5,columns:4}),t.jsx(a,{variant:"card",shimmer:!0,intensity:"dark",borderRadius:"12px",className:"custom-skeleton"})]})},exports.SkeletonProfile=l,exports.SkeletonTable=c,exports.SkeletonText=d,exports.default=a;
+//# sourceMappingURL=SkeletonLoader.js.map

package/dist/cjs/components/SkeletonLoader/SkeletonLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonLoader.js","sources":["../../../../src/components/SkeletonLoader/SkeletonLoader.tsx"],"sourcesContent":["// SkeletonLoader.tsx\nimport React from 'react';\nimport Card from \"../Cards/Card\";\n\n// Internal CSS styles\nconst skeletonStyles = `\n  @keyframes wave {\n    0% { transform: translateX(-100%); }\n    50% { transform: translateX(100%); }\n    100% { transform: translateX(100%); }\n  }\n\n  @keyframes shimmer {\n    0% { background-position: -200% 0; }\n    100% { background-position: 200% 0; }\n  }\n\n  .skeleton-wave {\n    animation: wave 1.6s linear infinite;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .skeleton-shimmer {\n    animation: shimmer 2s ease-in-out infinite;\n    background-size: 200% 100%;\n  }\n\n  .skeleton-wave::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(\n      90deg,\n      transparent,\n      rgba(255, 255, 255, 0.6),\n      transparent\n    );\n    animation: wave 1.6s linear infinite;\n  }\n`;\n\n// Inject styles into head if not already present\nconst injectStyles = () => {\n    if (typeof document !== 'undefined' && !document.getElementById('skeleton-loader-styles')) {\n        const styleElement = document.createElement('style');\n        styleElement.id = 'skeleton-loader-styles';\n        styleElement.textContent = skeletonStyles;\n        document.head.appendChild(styleElement);\n    }\n};\n\nexport type SkeletonVariant =\n    | 'text'\n    | 'rectangular'\n    | 'circular'\n    | 'rounded'\n    | 'card'\n    | 'avatar'\n    | 'button'\n    | 'image'\n    | 'line';\n\nexport type SkeletonAnimation = 'pulse' | 'wave' | 'none';\n\nexport type SkeletonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface SkeletonLoaderProps {\n    /** Variant of the skeleton */\n    variant?: SkeletonVariant;\n    /** Animation type */\n    animation?: SkeletonAnimation;\n    /** Predefined size (overridden by width/height if provided) */\n    size?: SkeletonSize;\n    /** Custom width */\n    width?: string | number;\n    /** Custom height */\n    height?: string | number;\n    /** Number of skeleton items to render */\n    count?: number;\n    /** Additional CSS classes */\n    className?: string;\n    /** Whether to show shimmer effect */\n    shimmer?: boolean;\n    /** Custom border radius */\n    borderRadius?: string;\n    /** Background color intensity */\n    intensity?: 'light' | 'medium' | 'dark';\n    /** Delay before showing skeleton (in ms) */\n    delay?: number;\n}\n\n// Predefined size configurations\nconst sizeConfig = {\n    xs: { width: '4rem', height: '1rem' },\n    sm: { width: '6rem', height: '1.25rem' },\n    md: { width: '8rem', height: '1.5rem' },\n    lg: { width: '12rem', height: '2rem' },\n    xl: { width: '16rem', height: '2.5rem' },\n};\n\n// Variant-specific configurations\nconst variantConfig = {\n    text: {\n        baseClasses: 'rounded',\n        defaultSize: { width: '100%', height: '1rem' }\n    },\n    rectangular: {\n        baseClasses: '',\n        defaultSize: { width: '100%', height: '8rem' }\n    },\n    circular: {\n        baseClasses: 'rounded-full aspect-square',\n        defaultSize: { width: '3rem', height: '3rem' }\n    },\n    rounded: {\n        baseClasses: 'rounded-lg',\n        defaultSize: { width: '100%', height: '6rem' }\n    },\n    card: {\n        baseClasses: 'rounded-lg',\n        defaultSize: { width: '100%', height: '12rem' }\n    },\n    avatar: {\n        baseClasses: 'rounded-full aspect-square',\n        defaultSize: { width: '2.5rem', height: '2.5rem' }\n    },\n    button: {\n        baseClasses: 'rounded-md',\n        defaultSize: { width: '5rem', height: '2.25rem' }\n    },\n    image: {\n        baseClasses: 'rounded',\n        defaultSize: { width: '100%', height: '10rem' }\n    },\n    line: {\n        baseClasses: 'rounded-full',\n        defaultSize: { width: '100%', height: '0.25rem' }\n    },\n};\n\nconst SkeletonLoader: React.FC<SkeletonLoaderProps> = ({\n                                                           variant = 'text',\n                                                           animation = 'pulse',\n                                                           size,\n                                                           width,\n                                                           height,\n                                                           count = 1,\n                                                           className = '',\n                                                           shimmer = false,\n                                                           borderRadius,\n                                                           intensity = 'medium',\n                                                           delay = 0,\n                                                       }) => {\n    const [shouldShow, setShouldShow] = React.useState(delay === 0);\n\n    React.useEffect(() => {\n        injectStyles();\n    }, []);\n\n    // Get variant configuration\n    const config = variantConfig[variant];\n\n    // Determine dimensions\n    const dimensions = React.useMemo(() => {\n        let finalWidth: string;\n        let finalHeight: string;\n\n        if (width !== undefined) {\n            finalWidth = typeof width === 'number' ? `${width}px` : width;\n        } else if (size) {\n            finalWidth = sizeConfig[size].width;\n        } else {\n            finalWidth = config.defaultSize.width;\n        }\n\n        if (height !== undefined) {\n            finalHeight = typeof height === 'number' ? `${height}px` : height;\n        } else if (size) {\n            finalHeight = sizeConfig[size].height;\n        } else {\n            finalHeight = config.defaultSize.height;\n        }\n\n        return { width: finalWidth, height: finalHeight };\n    }, [width, height, size, config]);\n\n    React.useEffect(() => {\n        if (delay > 0) {\n            const timer = setTimeout(() => setShouldShow(true), delay);\n            return () => clearTimeout(timer);\n        }\n    }, [delay]);\n\n    if (!shouldShow) {\n        return null;\n    }\n\n    // Build CSS classes\n    const getSkeletonClasses = () => {\n        const baseClasses = [\n            'block',\n            'bg-gray-200',\n            config.baseClasses,\n        ];\n\n        // Animation classes\n        if (animation === 'pulse') {\n            baseClasses.push('animate-pulse');\n        } else if (animation === 'wave') {\n            baseClasses.push('animate-wave');\n        }\n\n        // Intensity classes\n        switch (intensity) {\n            case 'light':\n                baseClasses.push('bg-gray-100');\n                break;\n            case 'medium':\n                baseClasses.push('bg-gray-200');\n                break;\n            case 'dark':\n                baseClasses.push('bg-gray-300');\n                break;\n        }\n\n        // Shimmer effect\n        if (shimmer) {\n            baseClasses.push('bg-gradient-to-r', 'from-gray-200', 'via-gray-100', 'to-gray-200', 'bg-200%', 'animate-shimmer');\n        }\n\n        return baseClasses.join(' ');\n    };\n\n    // Build inline styles\n    const getSkeletonStyles = (): React.CSSProperties => {\n        const styles: React.CSSProperties = {\n            width: dimensions.width,\n            height: dimensions.height,\n        };\n\n        if (borderRadius) {\n            styles.borderRadius = borderRadius;\n        }\n\n        return styles;\n    };\n\n    // Render single skeleton\n    const renderSkeleton = (index: number) => (\n        <div\n            key={index}\n            className={`${getSkeletonClasses()} ${className}`}\n            style={getSkeletonStyles()}\n            aria-hidden=\"true\"\n        />\n    );\n\n    // Render multiple skeletons\n    if (count > 1) {\n        return (\n            <div className=\"space-y-2\">\n                {Array.from({ length: count }, (_, index) => renderSkeleton(index))}\n            </div>\n        );\n    }\n\n    return renderSkeleton(0);\n};\n\nexport default SkeletonLoader;\n\n// Preset Components for common use cases\nexport const SkeletonText: React.FC<Omit<SkeletonLoaderProps, 'variant'>> = (props) => (\n    <SkeletonLoader {...props} variant=\"text\" />\n);\n\nexport const SkeletonAvatar: React.FC<Omit<SkeletonLoaderProps, 'variant'>> = (props) => (\n    <SkeletonLoader {...props} variant=\"avatar\" />\n);\n\nexport const SkeletonButton: React.FC<Omit<SkeletonLoaderProps, 'variant'>> = (props) => (\n    <SkeletonLoader {...props} variant=\"button\" />\n);\n\nexport const SkeletonCard: React.FC<Omit<SkeletonLoaderProps, 'variant'>> = (props) => (\n    <SkeletonLoader {...props} variant=\"card\" />\n);\n\nexport const SkeletonImage: React.FC<Omit<SkeletonLoaderProps, 'variant'>> = (props) => (\n    <SkeletonLoader {...props} variant=\"image\" />\n);\n\n// Compound Components for complex layouts\nexport const SkeletonProfile: React.FC<{ showBio?: boolean }> = ({ showBio = true }) => (\n    <div className=\"flex items-start space-x-4\">\n        <SkeletonAvatar size=\"lg\" />\n        <div className=\"flex-1 space-y-2\">\n            <SkeletonText width=\"60%\" height=\"1.25rem\" />\n            <SkeletonText width=\"40%\" height=\"1rem\" intensity=\"light\" />\n            {showBio && (\n                <div className=\"space-y-1 pt-2\">\n                    <SkeletonText width=\"100%\" />\n                    <SkeletonText width=\"80%\" />\n                    <SkeletonText width=\"90%\" />\n                </div>\n            )}\n        </div>\n    </div>\n);\n\nexport const SkeletonList: React.FC<{\n    itemCount?: number;\n    showAvatar?: boolean;\n    showMeta?: boolean;\n}> = ({\n          itemCount = 3,\n          showAvatar = true,\n          showMeta = true\n      }) => (\n    <div className=\"space-y-4\">\n        {Array.from({ length: itemCount }, (_, index) => (\n            <div key={index} className=\"flex items-start space-x-3\">\n                {showAvatar && <SkeletonAvatar />}\n                <div className=\"flex-1 space-y-2\">\n                    <SkeletonText width=\"75%\" height=\"1.125rem\" />\n                    <SkeletonText width=\"100%\" height=\"0.875rem\" intensity=\"light\" />\n                    {showMeta && (\n                        <div className=\"flex space-x-4\">\n                            <SkeletonText width=\"3rem\" height=\"0.75rem\" intensity=\"light\" />\n                            <SkeletonText width=\"4rem\" height=\"0.75rem\" intensity=\"light\" />\n                        </div>\n                    )}\n                </div>\n            </div>\n        ))}\n    </div>\n);\n\nexport const SkeletonTable: React.FC<{\n    rows?: number;\n    columns?: number;\n    showHeader?: boolean;\n}> = ({\n          rows = 5,\n          columns = 4,\n          showHeader = true\n      }) => (\n    <div className=\"space-y-3\">\n        {showHeader && (\n            <div className=\"flex space-x-4\">\n                {Array.from({ length: columns }, (_, index) => (\n                    <SkeletonText key={index} width=\"100%\" height=\"1rem\" intensity=\"dark\" />\n                ))}\n            </div>\n        )}\n        <div className=\"space-y-2\">\n            {Array.from({ length: rows }, (_, rowIndex) => (\n                <div key={rowIndex} className=\"flex space-x-4\">\n                    {Array.from({ length: columns }, (_, colIndex) => (\n                        <SkeletonText key={colIndex} width=\"100%\" height=\"0.875rem\" />\n                    ))}\n                </div>\n            ))}\n        </div>\n    </div>\n);\n\nexport const CardStatsSkeleton = () => (\n    <Card>\n        <div className='mb-4'>\n            <SkeletonText width='180px' height='28px' />\n        </div>\n        <div className='mt-4 grid grid-cols-1 gap-4'>\n            <div className='rounded-lg bg-blue-50 p-4'>\n                <SkeletonText width='40px' height='32px' className='mb-1' />\n                <SkeletonText width='100px' height='16px' />\n            </div>\n            <div className='rounded-lg bg-green-50 p-4'>\n                <SkeletonText width='40px' height='32px' className='mb-1' />\n                <SkeletonText width='110px' height='16px' />\n            </div>\n            <div className='rounded-lg bg-yellow-50 p-4'>\n                <SkeletonText width='40px' height='32px' className='mb-1' />\n                <SkeletonText width='120px' height='16px' />\n            </div>\n        </div>\n    </Card>\n);\n\nexport const SkeletonLoaderExample = () => {\n    return (\n        <div className=\"bg-white p-5\">\n            <SkeletonLoader variant=\"text\" width=\"200px\" />\n\n            <SkeletonLoader variant=\"text\" count={3} />\n\n            <SkeletonAvatar size=\"lg\" />\n            <SkeletonButton animation=\"wave\" />\n\n            <SkeletonProfile showBio={true} />\n            <SkeletonList itemCount={5} showAvatar={true} />\n            <SkeletonTable rows={5} columns={4} />\n\n            <SkeletonLoader\n                variant=\"card\"\n                shimmer={true}\n                intensity=\"dark\"\n                borderRadius=\"12px\"\n                className=\"custom-skeleton\"\n            />\n        </div>\n    )\n}"],"names":["sizeConfig","xs","width","height","sm","md","lg","xl","variantConfig","text","baseClasses","defaultSize","rectangular","circular","rounded","card","avatar","button","image","line","SkeletonLoader","_a","_b","variant","_c","animation","size","_d","count","_e","className","_f","shimmer","borderRadius","_g","intensity","_h","delay","_j","React","useState","shouldShow","setShouldShow","useEffect","document","getElementById","styleElement","createElement","id","textContent","head","appendChild","injectStyles","config","dimensions","useMemo","undefined","concat","timer_1","setTimeout","clearTimeout","getSkeletonClasses","push","join","renderSkeleton","index","_jsx","style","styles","children","Array","from","length","_","SkeletonText","props","__assign","SkeletonAvatar","SkeletonButton","SkeletonProfile","showBio","_jsxs","SkeletonList","itemCount","showAvatar","showMeta","SkeletonTable","rows","columns","showHeader","rowIndex","colIndex","Card"],"mappings":"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"}

package/dist/cjs/components/SkeletonLoader/index.js

@@ -0,0 +1,2 @@
+"use strict";require("../../node_modules/tslib/tslib.es6.js"),require("react/jsx-runtime"),require("react");exports.SKELETON_LOADER_VERSION="1.0.0",exports.SKELETON_PATTERNS={userProfile:{variant:"avatar",size:"lg",animation:"pulse"},cardTitle:{variant:"text",width:"75%",height:"1.5rem"},cardDescription:{variant:"text",count:2,width:"100%",height:"1rem",intensity:"light"},button:{variant:"button",animation:"wave"},image:{variant:"image",shimmer:!0}},exports.SKELETON_PRESETS={sizes:{xs:{width:"4rem",height:"1rem"},sm:{width:"6rem",height:"1.25rem"},md:{width:"8rem",height:"1.5rem"},lg:{width:"12rem",height:"2rem"},xl:{width:"16rem",height:"2.5rem"}},variants:["text","rectangular","circular","rounded","card","avatar","button","image","line"],animations:["pulse","wave","none"],intensities:["light","medium","dark"]};
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/SkeletonLoader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/SkeletonLoader/index.ts"],"sourcesContent":["// Main component export\nexport { default as SkeletonLoader } from './SkeletonLoader';\n\n// Preset component exports\nexport {\n    SkeletonText,\n    SkeletonAvatar,\n    SkeletonButton,\n    SkeletonCard,\n    SkeletonImage,\n} from './SkeletonLoader';\n\n// Compound component exports\nexport {\n    SkeletonProfile,\n    SkeletonList,\n    SkeletonTable,\n    CardStatsSkeleton\n} from './SkeletonLoader';\n\n// Type exports\nexport type {\n    SkeletonLoaderProps,\n    SkeletonVariant,\n    SkeletonAnimation,\n    SkeletonSize,\n} from './SkeletonLoader';\n\n// Re-export everything as named exports for flexibility\nexport * from './SkeletonLoader';\n\n// Default export for convenience\nimport SkeletonLoader from './SkeletonLoader';\nexport default SkeletonLoader;\n\n// Version and metadata\nexport const SKELETON_LOADER_VERSION = '1.0.0';\n\n// Utility types for consumers\nexport interface SkeletonLoaderModule {\n    SkeletonLoader: typeof SkeletonLoader;\n    SkeletonText: typeof import('./SkeletonLoader').SkeletonText;\n    SkeletonAvatar: typeof import('./SkeletonLoader').SkeletonAvatar;\n    SkeletonButton: typeof import('./SkeletonLoader').SkeletonButton;\n    SkeletonCard: typeof import('./SkeletonLoader').SkeletonCard;\n    SkeletonImage: typeof import('./SkeletonLoader').SkeletonImage;\n    SkeletonProfile: typeof import('./SkeletonLoader').SkeletonProfile;\n    SkeletonList: typeof import('./SkeletonLoader').SkeletonList;\n    SkeletonTable: typeof import('./SkeletonLoader').SkeletonTable;\n}\n\n// Preset configurations for easy customization\nexport const SKELETON_PRESETS = {\n    sizes: {\n        xs: { width: '4rem', height: '1rem' },\n        sm: { width: '6rem', height: '1.25rem' },\n        md: { width: '8rem', height: '1.5rem' },\n        lg: { width: '12rem', height: '2rem' },\n        xl: { width: '16rem', height: '2.5rem' },\n    },\n    variants: [\n        'text',\n        'rectangular',\n        'circular',\n        'rounded',\n        'card',\n        'avatar',\n        'button',\n        'image',\n        'line',\n    ] as const,\n    animations: [\n        'pulse',\n        'wave',\n        'none',\n    ] as const,\n    intensities: [\n        'light',\n        'medium',\n        'dark',\n    ] as const,\n} as const;\n\n\n// Common skeleton patterns\nexport const SKELETON_PATTERNS = {\n    userProfile: {\n        variant: 'avatar' as const,\n        size: 'lg' as const,\n        animation: 'pulse' as const,\n    },\n    cardTitle: {\n        variant: 'text' as const,\n        width: '75%',\n        height: '1.5rem',\n    },\n    cardDescription: {\n        variant: 'text' as const,\n        count: 2,\n        width: '100%',\n        height: '1rem',\n        intensity: 'light' as const,\n    },\n    button: {\n        variant: 'button' as const,\n        animation: 'wave' as const,\n    },\n    image: {\n        variant: 'image' as const,\n        shimmer: true,\n    },\n} as const;"],"names":["userProfile","variant","size","animation","cardTitle","width","height","cardDescription","count","intensity","button","image","shimmer","sizes","xs","sm","md","lg","xl","variants","animations","intensities"],"mappings":"4IAoCuC,kCAiDN,CAC7BA,YAAa,CACTC,QAAS,SACTC,KAAM,KACNC,UAAW,SAEfC,UAAW,CACPH,QAAS,OACTI,MAAO,MACPC,OAAQ,UAEZC,gBAAiB,CACbN,QAAS,OACTO,MAAO,EACPH,MAAO,OACPC,OAAQ,OACRG,UAAW,SAEfC,OAAQ,CACJT,QAAS,SACTE,UAAW,QAEfQ,MAAO,CACHV,QAAS,QACTW,SAAS,6BAzDe,CAC5BC,MAAO,CACHC,GAAI,CAAET,MAAO,OAAQC,OAAQ,QAC7BS,GAAI,CAAEV,MAAO,OAAQC,OAAQ,WAC7BU,GAAI,CAAEX,MAAO,OAAQC,OAAQ,UAC7BW,GAAI,CAAEZ,MAAO,QAASC,OAAQ,QAC9BY,GAAI,CAAEb,MAAO,QAASC,OAAQ,WAElCa,SAAU,CACN,OACA,cACA,WACA,UACA,OACA,SACA,SACA,QACA,QAEJC,WAAY,CACR,QACA,OACA,QAEJC,YAAa,CACT,QACA,SACA"}

package/dist/cjs/components/Table/Pagination.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),r=require("../Button/Button.js");require("../Button/ExportButton.js"),exports.Pagination=function(t){var n=t.currentPage,a=t.totalPages,i=t.totalItems,s=t.itemsPerPage,l=t.onPageChange,o=t.onViewChange,d=t.loading,c=void 0!==d&&d,u=function(e){e>0&&e<=a&&!c&&l&&l(e)},m=(n-1)*s,x=Math.min(m+s,i);return e.jsxs("div",{className:"flex items-center justify-between border-t border-gray-200 bg-white py-3",children:[e.jsxs("div",{className:"flex flex-1 justify-between sm:hidden",children:[e.jsx("button",{onClick:function(){return u(n-1)},disabled:1===n||c,className:"relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 ".concat(1===n||c?"cursor-not-allowed opacity-50":""),children:"Previous"}),e.jsx("button",{onClick:function(){return u(n+1)},disabled:n===a||c,className:"relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 ".concat(n===a||c?"cursor-not-allowed opacity-50":""),children:"Next"})]}),e.jsxs("div",{className:"hidden sm:flex sm:flex-1 sm:items-center sm:justify-between",children:[e.jsxs("div",{className:"flex items-center justify-center gap-2",children:[e.jsxs("div",{className:"relative",children:[e.jsx("select",{value:s,onChange:function(e){return o&&o(e.target.value)},disabled:c,className:"appearance-none rounded-md border border-gray-300 bg-white py-2 pl-3 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500",children:[10,20,30,50,100].map((function(r){return e.jsx("option",{value:r,children:r},r)}))}),e.jsx("div",{className:"pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700",children:e.jsx("svg",{className:"h-4 w-4",fill:"currentColor",viewBox:"0 0 20 20",children:e.jsx("path",{fillRule:"evenodd",d:"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z",clipRule:"evenodd"})})})]}),e.jsxs("p",{className:"text-sm text-gray-700",children:[e.jsxs("span",{children:[i," Entries"]}),e.jsxs("span",{className:"ml-1",children:["(Showing ",m+1,"-",x," of ",i,")"]})]})]}),e.jsx("div",{children:e.jsxs("nav",{className:"relative z-0 inline-flex gap-2 -space-x-px rounded-md shadow-sm","aria-label":"Pagination",children:[e.jsxs("button",{onClick:function(){return u(n-1)},disabled:1===n||c,className:"relative inline-flex items-center rounded-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 ".concat(1===n||c?"cursor-not-allowed opacity-50":""),children:[e.jsx("span",{className:"sr-only",children:"Previous"}),e.jsx("svg",{className:"h-5 w-5",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{fillRule:"evenodd",d:"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z",clipRule:"evenodd"})})]}),function(){var e=[];if(a<=5)for(var r=1;r<=a;r++)e.push(r);else{var t=Math.max(1,n-2),i=Math.min(a,t+5-1);i-t<4&&(t=Math.max(1,i-5+1));for(r=t;r<=i;r++)e.push(r)}return e}().map((function(r){return e.jsx("button",{onClick:function(){return u(r)},disabled:c,"aria-current":n===r?"page":void 0,className:"relative inline-flex items-center rounded-md border px-4 py-2 text-sm font-semibold ".concat(n===r?"z-10 border-primary-100 bg-primary-50 text-primary":"border-gray-300 bg-white text-gray-500 hover:bg-gray-50"," ").concat(c?"cursor-not-allowed opacity-50":""),children:r},r)})),e.jsxs(r,{onClick:function(){return u(n+1)},disabled:n===a||c,type:"button",variant:"primary",size:"sm",outline:!0,children:["Next Page",e.jsx("svg",{className:"h-5 w-5",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{fillRule:"evenodd",d:"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",clipRule:"evenodd"})})]})]})})]})]})};
+//# sourceMappingURL=Pagination.js.map

package/dist/cjs/components/Table/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sources":["../../../../src/components/Table/Pagination.tsx"],"sourcesContent":["import { PaginationProps } from \"./types\";\nimport { Button } from \"../Button\";\n\nexport function Pagination({\n  currentPage,\n  totalPages,\n  totalItems,\n  itemsPerPage,\n  onPageChange,\n  onViewChange,\n  loading = false,\n}: PaginationProps) {\n  const perPageOptions = [10, 20, 30, 50, 100];\n  const goToPage = (page: number) => {\n    if (page > 0 && page <= totalPages && !loading && onPageChange) {\n      onPageChange(page);\n    }\n  };\n\n  const getPageNumbers = () => {\n    const pageNumbers = [];\n    const maxPagesToShow = 5;\n\n    if (totalPages <= maxPagesToShow) {\n      for (let i = 1; i <= totalPages; i++) {\n        pageNumbers.push(i);\n      }\n    } else {\n      let startPage = Math.max(1, currentPage - 2);\n      const endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);\n\n      if (endPage - startPage < maxPagesToShow - 1) {\n        startPage = Math.max(1, endPage - maxPagesToShow + 1);\n      }\n\n      for (let i = startPage; i <= endPage; i++) {\n        pageNumbers.push(i);\n      }\n    }\n\n    return pageNumbers;\n  };\n\n  const startIndex = (currentPage - 1) * itemsPerPage;\n  const endIndex = Math.min(startIndex + itemsPerPage, totalItems);\n\n  return (\n    <div className=\"flex items-center justify-between border-t border-gray-200 bg-white py-3\">\n      <div className=\"flex flex-1 justify-between sm:hidden\">\n        <button\n          onClick={() => goToPage(currentPage - 1)}\n          disabled={currentPage === 1 || loading}\n          className={`relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 ${\n            currentPage === 1 || loading ? \"cursor-not-allowed opacity-50\" : \"\"\n          }`}\n        >\n          Previous\n        </button>\n        <button\n          onClick={() => goToPage(currentPage + 1)}\n          disabled={currentPage === totalPages || loading}\n          className={`relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 ${\n            currentPage === totalPages || loading\n              ? \"cursor-not-allowed opacity-50\"\n              : \"\"\n          }`}\n        >\n          Next\n        </button>\n      </div>\n\n      <div className=\"hidden sm:flex sm:flex-1 sm:items-center sm:justify-between\">\n        <div className=\"flex items-center justify-center gap-2\">\n          {/*{onViewChange && (*/}\n          <div className=\"relative\">\n            <select\n              value={itemsPerPage}\n              onChange={(e) => onViewChange && onViewChange(e.target.value)}\n              disabled={loading}\n              className=\"appearance-none rounded-md border border-gray-300 bg-white py-2 pl-3 pr-8 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500\"\n            >\n              {perPageOptions.map((option) => (\n                <option key={option} value={option}>\n                  {option}\n                </option>\n              ))}\n            </select>\n            <div className=\"pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700\">\n              <svg className=\"h-4 w-4\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n                <path\n                  fillRule=\"evenodd\"\n                  d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\"\n                  clipRule=\"evenodd\"\n                />\n              </svg>\n            </div>\n          </div>\n          {/*)}*/}\n          <p className=\"text-sm text-gray-700\">\n            <span>{totalItems} Entries</span>\n            <span className=\"ml-1\">\n              (Showing {startIndex + 1}-{endIndex} of {totalItems})\n            </span>\n          </p>\n        </div>\n        <div>\n          <nav\n            className=\"relative z-0 inline-flex gap-2 -space-x-px rounded-md shadow-sm\"\n            aria-label=\"Pagination\"\n          >\n            <button\n              onClick={() => goToPage(currentPage - 1)}\n              disabled={currentPage === 1 || loading}\n              className={`relative inline-flex items-center rounded-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50 ${\n                currentPage === 1 || loading\n                  ? \"cursor-not-allowed opacity-50\"\n                  : \"\"\n              }`}\n            >\n              <span className=\"sr-only\">Previous</span>\n              <svg\n                className=\"h-5 w-5\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  fillRule=\"evenodd\"\n                  d=\"M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z\"\n                  clipRule=\"evenodd\"\n                />\n              </svg>\n            </button>\n\n            {getPageNumbers().map((number) => (\n              <button\n                key={number}\n                onClick={() => goToPage(number)}\n                disabled={loading}\n                aria-current={currentPage === number ? \"page\" : undefined}\n                className={`relative inline-flex items-center rounded-md border px-4 py-2 text-sm font-semibold ${\n                  currentPage === number\n                    ? \"z-10 border-primary-100 bg-primary-50 text-primary\"\n                    : \"border-gray-300 bg-white text-gray-500 hover:bg-gray-50\"\n                } ${loading ? \"cursor-not-allowed opacity-50\" : \"\"}`}\n              >\n                {number}\n              </button>\n            ))}\n\n            <Button\n              onClick={() => goToPage(currentPage + 1)}\n              disabled={currentPage === totalPages || loading}\n              type=\"button\"\n              variant=\"primary\"\n              size=\"sm\"\n              outline\n            >\n              Next Page\n              <svg\n                className=\"h-5 w-5\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 20 20\"\n                fill=\"currentColor\"\n                aria-hidden=\"true\"\n              >\n                <path\n                  fillRule=\"evenodd\"\n                  d=\"M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z\"\n                  clipRule=\"evenodd\"\n                />\n              </svg>\n            </Button>\n          </nav>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["_a","currentPage","totalPages","totalItems","itemsPerPage","onPageChange","onViewChange","_b","loading","goToPage","page","startIndex","endIndex","Math","min","_jsxs","className","_jsx","onClick","disabled","concat","children","value","onChange","e","target","map","option","fill","viewBox","fillRule","d","clipRule","xmlns","pageNumbers","i","push","startPage","max","endPage","maxPagesToShow","getPageNumbers","number","undefined","Button","type","variant","size","outline"],"mappings":"yIAGM,SAAqBA,OACzBC,EAAWD,EAAAC,YACXC,EAAUF,EAAAE,WACVC,EAAUH,EAAAG,WACVC,EAAYJ,EAAAI,aACZC,EAAYL,EAAAK,aACZC,EAAYN,EAAAM,aACZC,YAAAC,OAAO,IAAAD,GAAQA,EAGTE,EAAW,SAACC,GACZA,EAAO,GAAKA,GAAQR,IAAeM,GAAWH,GAChDA,EAAaK,EAEjB,EA0BMC,GAAcV,EAAc,GAAKG,EACjCQ,EAAWC,KAAKC,IAAIH,EAAaP,EAAcD,GAErD,OACEY,EAAAA,KAAA,MAAA,CAAKC,UAAU,qFACbD,EAAAA,KAAA,MAAA,CAAKC,UAAU,kDACbC,EAAAA,IAAA,SAAA,CACEC,QAAS,WAAM,OAAAT,EAASR,EAAc,EAAvB,EACfkB,SAA0B,IAAhBlB,GAAqBO,EAC/BQ,UAAW,6IAAAI,OACO,IAAhBnB,GAAqBO,EAAU,gCAAkC,IACjEa,SAAA,aAIJJ,EAAAA,cACEC,QAAS,WAAM,OAAAT,EAASR,EAAc,EAAvB,EACfkB,SAAUlB,IAAgBC,GAAcM,EACxCQ,UAAW,kJAAAI,OACTnB,IAAgBC,GAAcM,EAC1B,gCACA,yBAOVO,EAAAA,YAAKC,UAAU,8DAA6DK,SAAA,CAC1EN,EAAAA,YAAKC,UAAU,yCAAwCK,SAAA,CAErDN,EAAAA,KAAA,MAAA,CAAKC,UAAU,WAAUK,SAAA,CACvBJ,EAAAA,IAAA,SAAA,CACEK,MAAOlB,EACPmB,SAAU,SAACC,GAAM,OAAAlB,GAAgBA,EAAakB,EAAEC,OAAOH,MAAtC,EACjBH,SAAUX,EACVQ,UAAU,wIAAuIK,SAnEtI,CAAC,GAAI,GAAI,GAAI,GAAI,KAqEZK,KAAI,SAACC,GAAW,OAC9BV,EAAAA,IAAA,SAAA,CAAqBK,MAAOK,WACzBA,GADUA,EADiB,MAMlCV,EAAAA,IAAA,MAAA,CAAKD,UAAU,+FACbC,EAAAA,IAAA,MAAA,CAAKD,UAAU,UAAUY,KAAK,eAAeC,QAAQ,YAAWR,SAC9DJ,EAAAA,YACEa,SAAS,UACTC,EAAE,qHACFC,SAAS,mBAMjBjB,EAAAA,KAAA,IAAA,CAAGC,UAAU,wBAAuBK,SAAA,CAClCN,EAAAA,uBAAOZ,EAAU,cACjBY,EAAAA,KAAA,OAAA,CAAMC,UAAU,6BACJL,EAAa,EAAC,IAAGC,EAAQ,OAAMT,eAI/Cc,EAAAA,IAAA,MAAA,CAAAI,SACEN,EAAAA,KAAA,MAAA,CACEC,UAAU,kEAAiE,aAChE,uBAEXD,EAAAA,KAAA,SAAA,CACEG,QAAS,WAAM,OAAAT,EAASR,EAAc,EAAvB,EACfkB,SAA0B,IAAhBlB,GAAqBO,EAC/BQ,UAAW,6IAAAI,OACO,IAAhBnB,GAAqBO,EACjB,gCACA,cAGNS,EAAAA,IAAA,OAAA,CAAMD,UAAU,UAASK,SAAA,aACzBJ,EAAAA,IAAA,MAAA,CACED,UAAU,UACViB,MAAM,6BACNJ,QAAQ,YACRD,KAAK,6BACO,OAAMP,SAElBJ,EAAAA,YACEa,SAAS,UACTC,EAAE,oHACFC,SAAS,iBA/GF,WACrB,IAAME,EAAc,GAGpB,GAAIhC,GAFmB,EAGrB,IAAK,IAAIiC,EAAI,EAAGA,GAAKjC,EAAYiC,IAC/BD,EAAYE,KAAKD,OAEd,CACL,IAAIE,EAAYxB,KAAKyB,IAAI,EAAGrC,EAAc,GACpCsC,EAAU1B,KAAKC,IAAIZ,EAAYmC,EARhB,EAQ6C,GAE9DE,EAAUF,EAAYG,IACxBH,EAAYxB,KAAKyB,IAAI,EAAGC,EAXL,EAWgC,IAGrD,IAASJ,EAAIE,EAAWF,GAAKI,EAASJ,IACpCD,EAAYE,KAAKD,EAErB,CAEA,OAAOD,CACT,CA8FWO,GAAiBf,KAAI,SAACgB,GAAW,OAChCzB,EAAAA,cAEEC,QAAS,WAAM,OAAAT,EAASiC,EAAT,EACfvB,SAAUX,EAAO,eACHP,IAAgByC,EAAS,YAASC,EAChD3B,UAAW,uFAAAI,OACTnB,IAAgByC,EACZ,qDACA,0DAAyD,KAAAtB,OAC3DZ,EAAU,gCAAkC,IAAIa,SAEnDqB,GAVIA,EAFyB,IAgBlC3B,EAAAA,KAAC6B,EAAM,CACL1B,QAAS,WAAM,OAAAT,EAASR,EAAc,EAAvB,EACfkB,SAAUlB,IAAgBC,GAAcM,EACxCqC,KAAK,SACLC,QAAQ,UACRC,KAAK,KACLC,SAAO,EAAA3B,SAAA,CAAA,YAGPJ,EAAAA,IAAA,MAAA,CACED,UAAU,UACViB,MAAM,6BACNJ,QAAQ,YACRD,KAAK,eAAc,cACP,gBAEZX,EAAAA,IAAA,OAAA,CACEa,SAAS,UACTC,EAAE,qHACFC,SAAS,2BAS3B"}

package/dist/cjs/components/Table/Table.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("../../node_modules/tslib/tslib.es6.js"),t=require("react/jsx-runtime"),r=require("react"),a=require("lucide-react"),n=require("./Pagination.js"),s=require("./TableSkeleton.js"),l=require("../Cards/EmptyStateCard.js");module.exports=function(i){var c=i.data,o=i.columns,d=i.itemsPerPage,u=void 0===d?20:d,m=i.onViewChange,x=i.totalItems,g=i.currentPage,h=void 0===g?1:g,p=i.onPageChange,v=i.loading,f=void 0!==v&&v,j=i.showPagination,y=void 0===j||j,b=i.onRowClick,w=i.useCardLayout,N=void 0!==w&&w,S=i.emptyState,C=i.expandableRows,P=void 0!==C&&C,k=i.expandedRowRender,R=i.onRowToggle,q=i.defaultExpandedRows,z=void 0===q?new Set:q,_=i.getRowKey,A=void 0===_?function(e,t){return t}:_,K=i.paginationMeta,D=i.defaultSortKey,F=i.defaultSortOrder,M=void 0===F?"asc":F,T=i.onSort,E=r.useState(z),I=E[0],U=E[1],V=r.useState(D||null),H=V[0],L=V[1],O=r.useState(D?M:null),B=O[0],G=O[1],J=(null==K?void 0:K.total)||x||c.length,Q=(null==K?void 0:K.last_page)||Math.ceil(J/u),W=(null==K?void 0:K.current_page)||h,X=(null==K?void 0:K.per_page)||u,Y=r.useMemo((function(){return H&&B?e.__spreadArray([],c,!0).sort((function(e,t){var r,a,n=o.find((function(e){return(e.sortKey||e.value)===H}));return n?("function"==typeof n.value?(r=e[H],a=t[H]):(r=e[n.value],a=t[n.value]),null==r&&null==a?0:null==r?1:null==a?-1:"string"==typeof r&&"string"==typeof a?"asc"===B?r.localeCompare(a):a.localeCompare(r):"number"==typeof r&&"number"==typeof a?"asc"===B?r-a:a-r:"asc"===B?String(r).localeCompare(String(a)):String(a).localeCompare(String(r))):0})):c}),[c,H,B,o]),Z=function(e){if(!e.sortable)return null;var r=String(e.sortKey||e.value);return H!==r?t.jsx(a.ArrowUpDown,{size:14,className:"text-gray-400"}):"asc"===B?t.jsx(a.ArrowUp,{size:14,className:"text-blue-600"}):t.jsx(a.ArrowDown,{size:14,className:"text-blue-600"})},$=function(e,t){P&&k?ee(e,t):b&&b(e)},ee=function(e,t){var r=A(e,t),a=new Set(I),n=I.has(r);n?a.delete(r):a.add(r),U(a),R&&R(e,!n)},te=function(e,t){var r=A(e,t);return I.has(r)},re=t.jsx(l,{title:"No Record found"}),ae=function(e){switch(e){case"center":return"text-center";case"right":return"text-right";default:return"text-left"}},ne=function(){return t.jsxs("div",{className:"grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",children:[f&&Array.from({length:X}).map((function(e,r){return t.jsx("div",{className:"bg-white rounded-lg border border-gray-200 p-4 animate-pulse",children:t.jsx("div",{className:"space-y-3",children:o.slice(0,3).map((function(e,r){return t.jsxs("div",{className:"flex justify-between items-center",children:[t.jsx("div",{className:"h-4 bg-gray-200 rounded w-1/3"}),t.jsx("div",{className:"h-4 bg-gray-200 rounded w-1/2"})]},r)}))})},r)})),Y.length>0?Y.map((function(e,r){var n=te(e,r);return t.jsxs("div",{className:"bg-white rounded-lg border border-gray-200",children:[t.jsx("div",{onClick:function(){return $(e,r)},className:"p-4 transition-all duration-200 hover:shadow-md hover:border-gray-300 ".concat(b||P?"cursor-pointer":""," ").concat(f?"opacity-50":""," ").concat(P?"border-b border-gray-100 last:border-b-0":""),children:t.jsxs("div",{className:"space-y-3",children:[P&&t.jsx("div",{className:"flex items-center justify-between mb-2",children:t.jsxs("div",{className:"flex items-center text-sm text-gray-500",children:[n?t.jsx(a.ChevronDown,{size:16,className:"mr-1"}):t.jsx(a.ChevronRight,{size:16,className:"mr-1"}),t.jsx("span",{children:n?"Hide details":"Show details"})]})}),o.map((function(r,a){return t.jsxs("div",{className:"flex justify-between items-start",children:[t.jsxs("span",{className:"text-sm font-medium text-gray-500 flex-shrink-0 mr-3",children:[r.title,":"]}),t.jsx("span",{className:"text-sm text-gray-800 text-right",children:"function"==typeof r.value?r.value(e):e[r.value]})]},a)}))]})}),P&&n&&k&&t.jsx("div",{className:"p-4 bg-gray-50 border-t border-gray-100 rounded-b-lg",children:k(e)})]},r)})):!f&&t.jsx("div",{className:"col-span-full",children:S||re})]})};return t.jsxs(t.Fragment,{children:[N?ne():t.jsxs(t.Fragment,{children:[t.jsx("div",{className:"hidden md:block",children:t.jsx("div",{className:"relative overflow-x-auto",children:t.jsxs("table",{className:"w-full",children:[t.jsx("thead",{children:t.jsxs("tr",{children:[P&&t.jsx("th",{className:"bg-gray-100 px-6 py-3 text-left text-sm font-semibold tracking-wider text-gray-500 w-12 rounded-bl-xl rounded-tl-xl"}),o.map((function(e,r){return t.jsx("th",{onClick:function(){return function(e){if(e.sortable){var t=String(e.sortKey||e.value),r="asc";H===t&&(r="asc"===B?"desc":"desc"===B?null:"asc"),L(r?t:null),G(r),T&&r&&T(t,r)}}(e)},className:"bg-gray-100 px-6 py-3 text-sm font-semibold tracking-wider text-gray-500 ".concat(e.width||""," ").concat(ae(e.align)," ").concat(e.sortable?"cursor-pointer select-none hover:bg-gray-200":""," ").concat(P||0!==r?"":"rounded-bl-xl rounded-tl-xl"," ").concat(r===o.length-1?"rounded-br-xl rounded-tr-xl":""," ").concat(e.className||""),style:e.width?{width:e.width}:void 0,children:t.jsxs("div",{className:"flex items-center gap-2 justify-between",children:[t.jsx("span",{children:e.title}),Z(e)]})},r)}))]})}),t.jsxs("tbody",{className:"divide-y divide-gray-200 bg-white ".concat(f?"opacity-50":""," ").concat(b||P?"cursor-pointer":""),children:[f&&t.jsx(s.TableSkeleton,{columns:o.length+(P?1:0),rows:X}),Y.length>0?Y.map((function(e,n){var s=te(e,n);return t.jsxs(r.Fragment,{children:[t.jsxs("tr",{onClick:function(){return $(e,n)},className:"hover:bg-gray-50 transition-colors duration-150 ".concat(s?"bg-blue-50":""),children:[P&&t.jsx("td",{className:"whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-800",children:t.jsx("div",{className:"flex items-center justify-center",children:s?t.jsx(a.ChevronDown,{size:16,className:"text-gray-500"}):t.jsx(a.ChevronRight,{size:16,className:"text-gray-500"})})}),o.map((function(r,a){return t.jsx("td",{className:"whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-800 ".concat(ae(r.align)," ").concat(r.className||""),style:r.width?{width:r.width}:void 0,children:"function"==typeof r.value?r.value(e):e[r.value]},a)}))]}),P&&s&&k&&t.jsx("tr",{className:"bg-gray-50",children:t.jsx("td",{colSpan:o.length+1,className:"px-6 py-4",children:t.jsx("div",{className:"animate-fade-in",children:k(e)})})},"".concat(n,"-expanded"))]},n)})):!f&&t.jsx("tr",{children:t.jsx("td",{colSpan:o.length+(P?1:0),className:"px-6 py-12 text-center",children:S||re})})]})]})})}),t.jsx("div",{className:"block md:hidden",children:ne()})]}),y&&t.jsx(n.Pagination,{currentPage:W,totalPages:Q,totalItems:J,itemsPerPage:X,onPageChange:p,onViewChange:m,loading:f})]})};
+//# sourceMappingURL=Table.js.map