@burdenoff/microfe-files 2026.525.2 → 2026.527.1

package/dist/files/components/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","names":[],"sources":["../../../src/files/components/SearchBar.tsx"],"sourcesContent":["import { useState, useEffect, useCallback } from \"react\";\nimport { Search, X, Filter } from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport type { FileFilterInput, FolderFilterInput } from \"../graphql-types\";\nimport { tWithFallback } from \"../utils/i18n\";\n\ninterface SearchBarProps {\n  onSearch: (\n    query: string,\n    filters?: {\n      fileFilter?: FileFilterInput;\n      folderFilter?: FolderFilterInput;\n    },\n  ) => void;\n  placeholder?: string;\n  initialQuery?: string;\n  showFilters?: boolean;\n}\n\nconst FILE_TYPE_MIME_MAP: Record<string, string[]> = {\n  image: [\n    \"image/jpeg\",\n    \"image/png\",\n    \"image/gif\",\n    \"image/webp\",\n    \"image/svg+xml\",\n  ],\n  video: [\"video/mp4\", \"video/webm\", \"video/quicktime\"],\n  document: [\n    \"application/msword\",\n    \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\",\n    \"application/vnd.ms-excel\",\n    \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\",\n    \"application/vnd.ms-powerpoint\",\n    \"application/vnd.openxmlformats-officedocument.presentationml.presentation\",\n    \"text/plain\",\n    \"text/csv\",\n    \"application/json\",\n  ],\n  pdf: [\"application/pdf\"],\n  archive: [\n    \"application/zip\",\n    \"application/x-tar\",\n    \"application/x-7z-compressed\",\n    \"application/gzip\",\n    \"application/x-rar-compressed\",\n  ],\n};\n\nexport function SearchBar({\n  onSearch,\n  placeholder = \"Search files and folders...\",\n  initialQuery = \"\",\n  showFilters = true,\n}: SearchBarProps) {\n  const { t } = useI18n();\n  const [query, setQuery] = useState(initialQuery);\n  const [showFilterPanel, setShowFilterPanel] = useState(false);\n  const [filters, setFilters] = useState<{\n    fileType?: string;\n    status?: string;\n    visibility?: string;\n    starred?: boolean;\n  }>({});\n  const fileStatus = filters.status as FileFilterInput[\"status\"] | undefined;\n  const folderStatus = filters.status as\n    | FolderFilterInput[\"status\"]\n    | undefined;\n  const fileVisibility = filters.visibility as\n    | FileFilterInput[\"visibility\"]\n    | undefined;\n  const fileMimeTypes = filters.fileType\n    ? FILE_TYPE_MIME_MAP[filters.fileType]\n    : undefined;\n\n  useEffect(() => {\n    setQuery(initialQuery);\n  }, [initialQuery]);\n\n  // Debounced search\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      if (query.length >= 2 || query.length === 0) {\n        const fileFilter: FileFilterInput = {\n          ...(fileMimeTypes && { mimeTypes: fileMimeTypes }),\n          ...(fileStatus && { status: fileStatus }),\n          ...(fileVisibility && { visibility: fileVisibility }),\n          ...(filters.starred !== undefined && { starred: filters.starred }),\n        };\n\n        const folderFilter: FolderFilterInput = {\n          ...(folderStatus && { status: folderStatus }),\n          ...(filters.starred !== undefined && { starred: filters.starred }),\n        };\n\n        onSearch(query, { fileFilter, folderFilter });\n      }\n    }, 300);\n\n    return () => clearTimeout(timer);\n  }, [\n    fileStatus,\n    fileMimeTypes,\n    fileVisibility,\n    folderStatus,\n    filters,\n    onSearch,\n    query,\n  ]);\n\n  const handleClear = useCallback(() => {\n    setQuery(\"\");\n    setFilters({});\n    onSearch(\"\");\n  }, [onSearch]);\n\n  const activeFilterCount = Object.values(filters).filter(\n    (v) => v !== undefined,\n  ).length;\n\n  return (\n    <div className=\"relative\">\n      {/* Search Input */}\n      <div className=\"relative flex items-center\">\n        <Search className=\"absolute left-3 size-4 text-text-tertiary\" />\n        <label htmlFor=\"files-search-input\" className=\"sr-only\">\n          {tWithFallback(\n            t,\n            \"files.search.input.label\",\n            \"Search files and folders\",\n          )}\n        </label>\n        <input\n          id=\"files-search-input\"\n          type=\"text\"\n          value={query}\n          onChange={(e) => setQuery(e.target.value)}\n          placeholder={placeholder}\n          className=\"w-full pl-[3.25rem] pr-20 py-2 border border-border-default rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-border focus:border-action-primary-border transition-colors duration-200\"\n        />\n        <div className=\"absolute right-2 flex items-center gap-1\">\n          {query && (\n            <button\n              onClick={handleClear}\n              className=\"p-1.5 text-text-tertiary hover:text-text-secondary hover:bg-action-ghost-bg-hover rounded transition-colors duration-200\"\n              title={tWithFallback(\n                t,\n                \"files.search.actions.clearSearch\",\n                \"Clear search\",\n              )}\n              aria-label={tWithFallback(\n                t,\n                \"files.search.actions.clearSearch\",\n                \"Clear search\",\n              )}\n            >\n              <X className=\"size-4\" />\n            </button>\n          )}\n          {showFilters && (\n            <button\n              onClick={() => setShowFilterPanel(!showFilterPanel)}\n              aria-expanded={showFilterPanel}\n              aria-controls=\"files-search-filter-panel\"\n              aria-label={tWithFallback(\n                t,\n                \"files.search.filters.toggleAria\",\n                \"Toggle filters\",\n              )}\n              className={`p-1.5 rounded transition-colors duration-200 relative ${\n                showFilterPanel || activeFilterCount > 0\n                  ? \"text-text-link bg-bg-accent hover:bg-action-primary-bg/20\"\n                  : \"text-text-tertiary hover:text-text-secondary hover:bg-action-ghost-bg-hover\"\n              }`}\n              title={tWithFallback(t, \"files.search.filters.title\", \"Filters\")}\n            >\n              <Filter className=\"size-4\" />\n              {activeFilterCount > 0 && (\n                <span className=\"absolute -top-1 -right-1 size-4 bg-action-primary-bg text-text-inverse text-[10px] font-bold rounded-full flex items-center justify-center\">\n                  {activeFilterCount}\n                </span>\n              )}\n            </button>\n          )}\n        </div>\n      </div>\n\n      {/* Filter Panel */}\n      {showFilterPanel && (\n        <div\n          id=\"files-search-filter-panel\"\n          className=\"absolute top-full left-0 right-0 mt-2 p-4 bg-bg-surface border border-border-default rounded-lg shadow-lg z-10 animate-in fade-in duration-200\"\n        >\n          <div className=\"space-y-4\">\n            <div>\n              <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                {tWithFallback(\n                  t,\n                  \"files.search.filters.fileType.label\",\n                  \"File Type\",\n                )}\n              </label>\n              <select\n                value={filters.fileType || \"\"}\n                onChange={(e) =>\n                  setFilters({\n                    ...filters,\n                    fileType: e.target.value || undefined,\n                  })\n                }\n                className=\"w-full px-3 py-2 border border-border-default rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-border transition-colors duration-200\"\n              >\n                <option value=\"\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.fileType.options.all\",\n                    \"All types\",\n                  )}\n                </option>\n                <option value=\"image\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.fileType.options.image\",\n                    \"Images\",\n                  )}\n                </option>\n                <option value=\"video\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.fileType.options.video\",\n                    \"Videos\",\n                  )}\n                </option>\n                <option value=\"document\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.fileType.options.document\",\n                    \"Documents\",\n                  )}\n                </option>\n                <option value=\"pdf\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.fileType.options.pdf\",\n                    \"PDFs\",\n                  )}\n                </option>\n                <option value=\"archive\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.fileType.options.archive\",\n                    \"Archives\",\n                  )}\n                </option>\n              </select>\n            </div>\n\n            <div>\n              <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                {tWithFallback(\n                  t,\n                  \"files.search.filters.status.label\",\n                  \"Status\",\n                )}\n              </label>\n              <select\n                value={filters.status || \"\"}\n                onChange={(e) =>\n                  setFilters({\n                    ...filters,\n                    status: e.target.value || undefined,\n                  })\n                }\n                className=\"w-full px-3 py-2 border border-border-default rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-border transition-colors duration-200\"\n              >\n                <option value=\"\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.status.options.all\",\n                    \"All statuses\",\n                  )}\n                </option>\n                <option value=\"ACTIVE\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.status.options.active\",\n                    \"Active\",\n                  )}\n                </option>\n                <option value=\"ARCHIVED\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.status.options.archived\",\n                    \"Archived\",\n                  )}\n                </option>\n                <option value=\"DELETED\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.status.options.deleted\",\n                    \"Deleted\",\n                  )}\n                </option>\n              </select>\n            </div>\n\n            <div>\n              <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                {tWithFallback(\n                  t,\n                  \"files.search.filters.visibility.label\",\n                  \"Visibility\",\n                )}\n              </label>\n              <select\n                value={filters.visibility || \"\"}\n                onChange={(e) =>\n                  setFilters({\n                    ...filters,\n                    visibility: e.target.value || undefined,\n                  })\n                }\n                className=\"w-full px-3 py-2 border border-border-default rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-border transition-colors duration-200\"\n              >\n                <option value=\"\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.visibility.options.all\",\n                    \"All visibility\",\n                  )}\n                </option>\n                <option value=\"PRIVATE\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.visibility.options.private\",\n                    \"Private\",\n                  )}\n                </option>\n                <option value=\"TEAM\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.visibility.options.team\",\n                    \"Team\",\n                  )}\n                </option>\n                <option value=\"WORKSPACE\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.visibility.options.workspace\",\n                    \"Workspace\",\n                  )}\n                </option>\n                <option value=\"PUBLIC\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.visibility.options.public\",\n                    \"Public\",\n                  )}\n                </option>\n              </select>\n            </div>\n\n            <div className=\"flex items-center\">\n              <input\n                type=\"checkbox\"\n                id=\"starred-filter\"\n                checked={filters.starred || false}\n                onChange={(e) =>\n                  setFilters({\n                    ...filters,\n                    starred: e.target.checked || undefined,\n                  })\n                }\n                className=\"size-4 text-action-primary-bg border-border-default rounded focus:ring-action-primary-border transition-colors duration-200\"\n              />\n              <label\n                htmlFor=\"starred-filter\"\n                className=\"ml-2 text-sm text-text-primary\"\n              >\n                {tWithFallback(\n                  t,\n                  \"files.search.filters.starredOnly\",\n                  \"Starred only\",\n                )}\n              </label>\n            </div>\n\n            <div className=\"flex justify-end gap-2 pt-2 border-t border-border-default\">\n              <button\n                onClick={() => {\n                  setFilters({});\n                  setShowFilterPanel(false);\n                }}\n                className=\"px-3 py-1.5 text-sm text-text-primary hover:bg-action-ghost-bg-hover rounded transition-colors duration-200\"\n              >\n                {tWithFallback(\n                  t,\n                  \"files.search.filters.actions.clear\",\n                  \"Clear filters\",\n                )}\n              </button>\n              <button\n                onClick={() => setShowFilterPanel(false)}\n                className=\"px-3 py-1.5 text-sm bg-action-primary-bg text-text-inverse rounded hover:bg-action-primary-bg-hover transition-colors duration-200\"\n              >\n                {tWithFallback(\n                  t,\n                  \"files.search.filters.actions.apply\",\n                  \"Apply\",\n                )}\n              </button>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAmBA,IAAM,IAA+C;CACnD,OAAO;EACL;EACA;EACA;EACA;EACA;EACD;CACD,OAAO;EAAC;EAAa;EAAc;EAAkB;CACrD,UAAU;EACR;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,KAAK,CAAC,kBAAkB;CACxB,SAAS;EACP;EACA;EACA;EACA;EACA;EACD;CACF;AAED,SAAgB,EAAU,EACxB,aACA,iBAAc,+BACd,kBAAe,IACf,iBAAc,MACG;CACjB,IAAM,EAAE,SAAM,GAAS,EACjB,CAAC,GAAO,KAAY,EAAS,EAAa,EAC1C,CAAC,GAAiB,KAAsB,EAAS,GAAM,EACvD,CAAC,GAAS,KAAc,EAK3B,EAAE,CAAC,EACA,IAAa,EAAQ,QACrB,IAAe,EAAQ,QAGvB,IAAiB,EAAQ,YAGzB,IAAgB,EAAQ,WAC1B,EAAmB,EAAQ,YAC3B,KAAA;AAOJ,CALA,QAAgB;AACd,IAAS,EAAa;IACrB,CAAC,EAAa,CAAC,EAGlB,QAAgB;EACd,IAAM,IAAQ,iBAAiB;AAC7B,IAAI,EAAM,UAAU,KAAK,EAAM,WAAW,MAaxC,EAAS,GAAO;IAAE,YAZkB;KAClC,GAAI,KAAiB,EAAE,WAAW,GAAe;KACjD,GAAI,KAAc,EAAE,QAAQ,GAAY;KACxC,GAAI,KAAkB,EAAE,YAAY,GAAgB;KACpD,GAAI,EAAQ,YAAY,KAAA,KAAa,EAAE,SAAS,EAAQ,SAAS;KAClE;IAO6B,cALU;KACtC,GAAI,KAAgB,EAAE,QAAQ,GAAc;KAC5C,GAAI,EAAQ,YAAY,KAAA,KAAa,EAAE,SAAS,EAAQ,SAAS;KAClE;IAE2C,CAAC;KAE9C,IAAI;AAEP,eAAa,aAAa,EAAM;IAC/B;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,IAAM,IAAc,QAAkB;AAGpC,EAFA,EAAS,GAAG,EACZ,EAAW,EAAE,CAAC,EACd,EAAS,GAAG;IACX,CAAC,EAAS,CAAC,EAER,IAAoB,OAAO,OAAO,EAAQ,CAAC,QAC9C,MAAM,MAAM,KAAA,EACd,CAAC;AAEF,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CAEE,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD,EAAQ,WAAU,6CAA8C,CAAA;IAChE,kBAAC,SAAD;KAAO,SAAQ;KAAqB,WAAU;eAC3C,EACC,GACA,4BACA,2BACD;KACK,CAAA;IACR,kBAAC,SAAD;KACE,IAAG;KACH,MAAK;KACL,OAAO;KACP,WAAW,MAAM,EAAS,EAAE,OAAO,MAAM;KAC5B;KACb,WAAU;KACV,CAAA;IACF,kBAAC,OAAD;KAAK,WAAU;eAAf,CACG,KACC,kBAAC,UAAD;MACE,SAAS;MACT,WAAU;MACV,OAAO,EACL,GACA,oCACA,eACD;MACD,cAAY,EACV,GACA,oCACA,eACD;gBAED,kBAAC,GAAD,EAAG,WAAU,UAAW,CAAA;MACjB,CAAA,EAEV,KACC,kBAAC,UAAD;MACE,eAAe,EAAmB,CAAC,EAAgB;MACnD,iBAAe;MACf,iBAAc;MACd,cAAY,EACV,GACA,mCACA,iBACD;MACD,WAAW,yDACT,KAAmB,IAAoB,IACnC,8DACA;MAEN,OAAO,EAAc,GAAG,8BAA8B,UAAU;gBAdlE,CAgBE,kBAAC,GAAD,EAAQ,WAAU,UAAW,CAAA,EAC5B,IAAoB,KACnB,kBAAC,QAAD;OAAM,WAAU;iBACb;OACI,CAAA,CAEF;QAEP;;IACF;MAGL,KACC,kBAAC,OAAD;GACE,IAAG;GACH,WAAU;aAEV,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;MAAO,WAAU;gBACd,EACC,GACA,uCACA,YACD;MACK,CAAA,EACR,kBAAC,UAAD;MACE,OAAO,EAAQ,YAAY;MAC3B,WAAW,MACT,EAAW;OACT,GAAG;OACH,UAAU,EAAE,OAAO,SAAS,KAAA;OAC7B,CAAC;MAEJ,WAAU;gBARZ;OAUE,kBAAC,UAAD;QAAQ,OAAM;kBACX,EACC,GACA,6CACA,YACD;QACM,CAAA;OACT,kBAAC,UAAD;QAAQ,OAAM;kBACX,EACC,GACA,+CACA,SACD;QACM,CAAA;OACT,kBAAC,UAAD;QAAQ,OAAM;kBACX,EACC,GACA,+CACA,SACD;QACM,CAAA;OACT,kBAAC,UAAD;QAAQ,OAAM;kBACX,EACC,GACA,kDACA,YACD;QACM,CAAA;OACT,kBAAC,UAAD;QAAQ,OAAM;kBACX,EACC,GACA,6CACA,OACD;QACM,CAAA;OACT,kBAAC,UAAD;QAAQ,OAAM;kBACX,EACC,GACA,iDACA,WACD;QACM,CAAA;OACF;QACL,EAAA,CAAA;KAEN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;MAAO,WAAU;gBACd,EACC,GACA,qCACA,SACD;MACK,CAAA,EACR,kBAAC,UAAD;MACE,OAAO,EAAQ,UAAU;MACzB,WAAW,MACT,EAAW;OACT,GAAG;OACH,QAAQ,EAAE,OAAO,SAAS,KAAA;OAC3B,CAAC;MAEJ,WAAU;gBARZ;OAUE,kBAAC,UAAD;QAAQ,OAAM;kBACX,EACC,GACA,2CACA,eACD;QACM,CAAA;OACT,kBAAC,UAAD;QAAQ,OAAM;kBACX,EACC,GACA,8CACA,SACD;QACM,CAAA;OACT,kBAAC,UAAD;QAAQ,OAAM;kBACX,EACC,GACA,gDACA,WACD;QACM,CAAA;OACT,kBAAC,UAAD;QAAQ,OAAM;kBACX,EACC,GACA,+CACA,UACD;QACM,CAAA;OACF;QACL,EAAA,CAAA;KAEN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;MAAO,WAAU;gBACd,EACC,GACA,yCACA,aACD;MACK,CAAA,EACR,kBAAC,UAAD;MACE,OAAO,EAAQ,cAAc;MAC7B,WAAW,MACT,EAAW;OACT,GAAG;OACH,YAAY,EAAE,OAAO,SAAS,KAAA;OAC/B,CAAC;MAEJ,WAAU;gBARZ;OAUE,kBAAC,UAAD;QAAQ,OAAM;kBACX,EACC,GACA,+CACA,iBACD;QACM,CAAA;OACT,kBAAC,UAAD;QAAQ,OAAM;kBACX,EACC,GACA,mDACA,UACD;QACM,CAAA;OACT,kBAAC,UAAD;QAAQ,OAAM;kBACX,EACC,GACA,gDACA,OACD;QACM,CAAA;OACT,kBAAC,UAAD;QAAQ,OAAM;kBACX,EACC,GACA,qDACA,YACD;QACM,CAAA;OACT,kBAAC,UAAD;QAAQ,OAAM;kBACX,EACC,GACA,kDACA,SACD;QACM,CAAA;OACF;QACL,EAAA,CAAA;KAEN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,SAAD;OACE,MAAK;OACL,IAAG;OACH,SAAS,EAAQ,WAAW;OAC5B,WAAW,MACT,EAAW;QACT,GAAG;QACH,SAAS,EAAE,OAAO,WAAW,KAAA;QAC9B,CAAC;OAEJ,WAAU;OACV,CAAA,EACF,kBAAC,SAAD;OACE,SAAQ;OACR,WAAU;iBAET,EACC,GACA,oCACA,eACD;OACK,CAAA,CACJ;;KAEN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,UAAD;OACE,eAAe;AAEb,QADA,EAAW,EAAE,CAAC,EACd,EAAmB,GAAM;;OAE3B,WAAU;iBAET,EACC,GACA,sCACA,gBACD;OACM,CAAA,EACT,kBAAC,UAAD;OACE,eAAe,EAAmB,GAAM;OACxC,WAAU;iBAET,EACC,GACA,sCACA,QACD;OACM,CAAA,CACL;;KACF;;GACF,CAAA,CAEJ"}
+{"version":3,"file":"SearchBar.js","names":[],"sources":["../../../src/files/components/SearchBar.tsx"],"sourcesContent":["import { useState, useEffect, useCallback } from \"react\";\nimport { Search, X, Filter } from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport type { FileFilterInput, FolderFilterInput } from \"../graphql-types\";\nimport { tWithFallback } from \"../utils/i18n\";\n\ninterface SearchBarProps {\n  onSearch: (\n    query: string,\n    filters?: {\n      fileFilter?: FileFilterInput;\n      folderFilter?: FolderFilterInput;\n    },\n  ) => void;\n  placeholder?: string;\n  initialQuery?: string;\n  showFilters?: boolean;\n}\n\nconst FILE_TYPE_MIME_MAP: Record<string, string[]> = {\n  image: [\n    \"image/jpeg\",\n    \"image/png\",\n    \"image/gif\",\n    \"image/webp\",\n    \"image/svg+xml\",\n  ],\n  video: [\"video/mp4\", \"video/webm\", \"video/quicktime\"],\n  document: [\n    \"application/msword\",\n    \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\",\n    \"application/vnd.ms-excel\",\n    \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\",\n    \"application/vnd.ms-powerpoint\",\n    \"application/vnd.openxmlformats-officedocument.presentationml.presentation\",\n    \"text/plain\",\n    \"text/csv\",\n    \"application/json\",\n  ],\n  pdf: [\"application/pdf\"],\n  archive: [\n    \"application/zip\",\n    \"application/x-tar\",\n    \"application/x-7z-compressed\",\n    \"application/gzip\",\n    \"application/x-rar-compressed\",\n  ],\n};\n\nexport function SearchBar({\n  onSearch,\n  placeholder = \"Search files and folders...\",\n  initialQuery = \"\",\n  showFilters = true,\n}: SearchBarProps) {\n  const { t } = useI18n();\n  const [query, setQuery] = useState(initialQuery);\n  const [showFilterPanel, setShowFilterPanel] = useState(false);\n  const [filters, setFilters] = useState<{\n    fileType?: string;\n    status?: string;\n    visibility?: string;\n    starred?: boolean;\n  }>({});\n  const fileStatus = filters.status as FileFilterInput[\"status\"] | undefined;\n  const folderStatus = filters.status as\n    | FolderFilterInput[\"status\"]\n    | undefined;\n  const fileVisibility = filters.visibility as\n    | FileFilterInput[\"visibility\"]\n    | undefined;\n  const fileMimeTypes = filters.fileType\n    ? FILE_TYPE_MIME_MAP[filters.fileType]\n    : undefined;\n\n  useEffect(() => {\n    setQuery(initialQuery);\n  }, [initialQuery]);\n\n  // Debounced search\n  useEffect(() => {\n    const timer = setTimeout(() => {\n      if (query.length >= 2 || query.length === 0) {\n        const fileFilter: FileFilterInput = {\n          ...(fileMimeTypes && { mimeTypes: fileMimeTypes }),\n          ...(fileStatus && { status: fileStatus }),\n          ...(fileVisibility && { visibility: fileVisibility }),\n          ...(filters.starred !== undefined && { starred: filters.starred }),\n        };\n\n        const folderFilter: FolderFilterInput = {\n          ...(folderStatus && { status: folderStatus }),\n          ...(filters.starred !== undefined && { starred: filters.starred }),\n        };\n\n        onSearch(query, { fileFilter, folderFilter });\n      }\n    }, 300);\n\n    return () => clearTimeout(timer);\n  }, [\n    fileStatus,\n    fileMimeTypes,\n    fileVisibility,\n    folderStatus,\n    filters,\n    onSearch,\n    query,\n  ]);\n\n  const handleClear = useCallback(() => {\n    setQuery(\"\");\n    setFilters({});\n    onSearch(\"\");\n  }, [onSearch]);\n\n  const activeFilterCount = Object.values(filters).filter(\n    (v) => v !== undefined,\n  ).length;\n\n  return (\n    <div className=\"relative\">\n      {/* Search Input */}\n      <div className=\"relative flex items-center\">\n        <Search className=\"absolute left-3 size-4 text-text-tertiary\" />\n        <label htmlFor=\"files-search-input\" className=\"sr-only\">\n          {tWithFallback(\n            t,\n            \"files.search.input.label\",\n            \"Search files and folders\",\n          )}\n        </label>\n        <input\n          id=\"files-search-input\"\n          type=\"text\"\n          value={query}\n          onChange={(e) => setQuery(e.target.value)}\n          placeholder={placeholder}\n          className=\"w-full pl-[3.25rem] pr-20 py-2 border border-border-default rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-border focus:border-action-primary-border transition-colors duration-200\"\n        />\n        <div className=\"absolute right-2 flex items-center gap-1\">\n          {query && (\n            <button\n              type=\"button\"\n              onClick={handleClear}\n              className=\"p-1.5 text-text-tertiary hover:text-text-secondary hover:bg-action-ghost-bg-hover rounded transition-colors duration-200\"\n              title={tWithFallback(\n                t,\n                \"files.search.actions.clearSearch\",\n                \"Clear search\",\n              )}\n              aria-label={tWithFallback(\n                t,\n                \"files.search.actions.clearSearch\",\n                \"Clear search\",\n              )}\n            >\n              <X className=\"size-4\" />\n            </button>\n          )}\n          {showFilters && (\n            <button\n              type=\"button\"\n              onClick={() => setShowFilterPanel(!showFilterPanel)}\n              aria-expanded={showFilterPanel}\n              aria-controls=\"files-search-filter-panel\"\n              aria-label={tWithFallback(\n                t,\n                \"files.search.filters.toggleAria\",\n                \"Toggle filters\",\n              )}\n              className={`p-1.5 rounded transition-colors duration-200 relative ${\n                showFilterPanel || activeFilterCount > 0\n                  ? \"text-text-link bg-bg-accent hover:bg-action-primary-bg/20\"\n                  : \"text-text-tertiary hover:text-text-secondary hover:bg-action-ghost-bg-hover\"\n              }`}\n              title={tWithFallback(t, \"files.search.filters.title\", \"Filters\")}\n            >\n              <Filter className=\"size-4\" />\n              {activeFilterCount > 0 && (\n                <span className=\"absolute -top-1 -right-1 size-4 bg-action-primary-bg text-text-inverse text-[10px] font-bold rounded-full flex items-center justify-center\">\n                  {activeFilterCount}\n                </span>\n              )}\n            </button>\n          )}\n        </div>\n      </div>\n\n      {/* Filter Panel */}\n      {showFilterPanel && (\n        <div\n          id=\"files-search-filter-panel\"\n          className=\"absolute top-full left-0 right-0 mt-2 p-4 bg-bg-surface border border-border-default rounded-lg shadow-lg z-10 animate-in fade-in duration-200\"\n        >\n          <div className=\"space-y-4\">\n            <div>\n              <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                {tWithFallback(\n                  t,\n                  \"files.search.filters.fileType.label\",\n                  \"File Type\",\n                )}\n              </label>\n              <select\n                value={filters.fileType || \"\"}\n                onChange={(e) =>\n                  setFilters({\n                    ...filters,\n                    fileType: e.target.value || undefined,\n                  })\n                }\n                className=\"w-full px-3 py-2 border border-border-default rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-border transition-colors duration-200\"\n              >\n                <option value=\"\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.fileType.options.all\",\n                    \"All types\",\n                  )}\n                </option>\n                <option value=\"image\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.fileType.options.image\",\n                    \"Images\",\n                  )}\n                </option>\n                <option value=\"video\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.fileType.options.video\",\n                    \"Videos\",\n                  )}\n                </option>\n                <option value=\"document\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.fileType.options.document\",\n                    \"Documents\",\n                  )}\n                </option>\n                <option value=\"pdf\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.fileType.options.pdf\",\n                    \"PDFs\",\n                  )}\n                </option>\n                <option value=\"archive\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.fileType.options.archive\",\n                    \"Archives\",\n                  )}\n                </option>\n              </select>\n            </div>\n\n            <div>\n              <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                {tWithFallback(\n                  t,\n                  \"files.search.filters.status.label\",\n                  \"Status\",\n                )}\n              </label>\n              <select\n                value={filters.status || \"\"}\n                onChange={(e) =>\n                  setFilters({\n                    ...filters,\n                    status: e.target.value || undefined,\n                  })\n                }\n                className=\"w-full px-3 py-2 border border-border-default rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-border transition-colors duration-200\"\n              >\n                <option value=\"\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.status.options.all\",\n                    \"All statuses\",\n                  )}\n                </option>\n                <option value=\"ACTIVE\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.status.options.active\",\n                    \"Active\",\n                  )}\n                </option>\n                <option value=\"ARCHIVED\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.status.options.archived\",\n                    \"Archived\",\n                  )}\n                </option>\n                <option value=\"DELETED\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.status.options.deleted\",\n                    \"Deleted\",\n                  )}\n                </option>\n              </select>\n            </div>\n\n            <div>\n              <label className=\"block text-sm font-medium text-text-primary mb-1\">\n                {tWithFallback(\n                  t,\n                  \"files.search.filters.visibility.label\",\n                  \"Visibility\",\n                )}\n              </label>\n              <select\n                value={filters.visibility || \"\"}\n                onChange={(e) =>\n                  setFilters({\n                    ...filters,\n                    visibility: e.target.value || undefined,\n                  })\n                }\n                className=\"w-full px-3 py-2 border border-border-default rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-border transition-colors duration-200\"\n              >\n                <option value=\"\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.visibility.options.all\",\n                    \"All visibility\",\n                  )}\n                </option>\n                <option value=\"PRIVATE\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.visibility.options.private\",\n                    \"Private\",\n                  )}\n                </option>\n                <option value=\"TEAM\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.visibility.options.team\",\n                    \"Team\",\n                  )}\n                </option>\n                <option value=\"WORKSPACE\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.visibility.options.workspace\",\n                    \"Workspace\",\n                  )}\n                </option>\n                <option value=\"PUBLIC\">\n                  {tWithFallback(\n                    t,\n                    \"files.search.filters.visibility.options.public\",\n                    \"Public\",\n                  )}\n                </option>\n              </select>\n            </div>\n\n            <div className=\"flex items-center\">\n              <input\n                type=\"checkbox\"\n                id=\"starred-filter\"\n                checked={filters.starred || false}\n                onChange={(e) =>\n                  setFilters({\n                    ...filters,\n                    starred: e.target.checked || undefined,\n                  })\n                }\n                className=\"size-4 text-action-primary-bg border-border-default rounded focus:ring-action-primary-border transition-colors duration-200\"\n              />\n              <label\n                htmlFor=\"starred-filter\"\n                className=\"ml-2 text-sm text-text-primary\"\n              >\n                {tWithFallback(\n                  t,\n                  \"files.search.filters.starredOnly\",\n                  \"Starred only\",\n                )}\n              </label>\n            </div>\n\n            <div className=\"flex justify-end gap-2 pt-2 border-t border-border-default\">\n              <button\n                type=\"button\"\n                onClick={() => {\n                  setFilters({});\n                  setShowFilterPanel(false);\n                }}\n                className=\"px-3 py-1.5 text-sm text-text-primary hover:bg-action-ghost-bg-hover rounded transition-colors duration-200\"\n              >\n                {tWithFallback(\n                  t,\n                  \"files.search.filters.actions.clear\",\n                  \"Clear filters\",\n                )}\n              </button>\n              <button\n                type=\"button\"\n                onClick={() => setShowFilterPanel(false)}\n                className=\"px-3 py-1.5 text-sm bg-action-primary-bg text-text-inverse rounded hover:bg-action-primary-bg-hover transition-colors duration-200\"\n              >\n                {tWithFallback(\n                  t,\n                  \"files.search.filters.actions.apply\",\n                  \"Apply\",\n                )}\n              </button>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/files/components/ShareDialog.js

@@ -1,206 +1,211 @@
 import { tWithFallback as e } from "../utils/i18n.js";
-import { useEffect as t, useMemo as n, useState as r } from "react";
-import { Calendar as i, Check as a, Copy as o, Download as s, Link as c, Loader2 as l, Lock as u, Mail as d, X as f } from "lucide-react";
-import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
-import { useI18n as g } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { useEffect as t, useState as n } from "react";
+import { Calendar as r, Check as i, Copy as a, Download as o, Link as s, Loader2 as c, Lock as l, Mail as u, X as d } from "lucide-react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useI18n as h } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 //#region src/files/components/ShareDialog.tsx
-function _({ item: _, itemType: v, onClose: y, onCreateShare: b, isLoading: x }) {
-	let { t: S } = g(), [C, w] = r(null), [T, E] = r(null), [D, O] = r(!1), [k, A] = r(7), [j, M] = r(0), [N, P] = r(!1), [F, I] = r(""), [L, R] = r(""), [z, B] = r(null), V = n(() => `share-dialog-title-${_.id}`, [_.id]);
+function g({ item: g, itemType: _, onClose: v, onCreateShare: y, isLoading: b }) {
+	let { t: x } = h(), [S, C] = n(null), [w, T] = n(null), [E, D] = n(!1), [O, k] = n(7), [A, j] = n(0), [M, N] = n(!1), [P, F] = n(""), [I, L] = n(""), [R, z] = n(null), B = `share-dialog-title-${g.id}`;
 	return t(() => {
 		let e = (e) => {
-			e.key === "Escape" && y();
+			e.key === "Escape" && v();
 		};
 		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-	}, [y]), t(() => {
-		if (D) {
-			let e = setTimeout(() => O(!1), 2e3);
+	}, [v]), t(() => {
+		if (E) {
+			let e = setTimeout(() => D(!1), 2e3);
 			return () => clearTimeout(e);
 		}
-	}, [D]), /* @__PURE__ */ m("div", {
+	}, [E]), /* @__PURE__ */ p("div", {
 		className: "fixed inset-0 bg-bg-overlay flex items-center justify-center z-[100] animate-in fade-in duration-200",
 		role: "dialog",
 		"aria-modal": "true",
-		"aria-labelledby": V,
-		children: /* @__PURE__ */ h("div", {
+		"aria-labelledby": B,
+		children: /* @__PURE__ */ m("div", {
 			className: "bg-bg-surface rounded-lg shadow-xl p-6 w-full max-w-md mx-4 animate-in zoom-in-95 duration-200",
-			children: [/* @__PURE__ */ h("div", {
+			children: [/* @__PURE__ */ m("div", {
 				className: "flex items-center justify-between mb-4",
-				children: [/* @__PURE__ */ m("h2", {
-					id: V,
+				children: [/* @__PURE__ */ p("h2", {
+					id: B,
 					className: "text-lg font-semibold text-text-primary",
-					children: e(S, "files.shareDialog.title", "Share {{itemType}} \"{{name}}\"", {
-						itemType: e(S, v === "folder" ? "files.shareDialog.itemType.folder" : "files.shareDialog.itemType.file", v === "folder" ? "folder" : "file"),
-						name: _.name
+					children: e(x, "files.shareDialog.title", "Share {{itemType}} \"{{name}}\"", {
+						itemType: e(x, _ === "folder" ? "files.shareDialog.itemType.folder" : "files.shareDialog.itemType.file", _ === "folder" ? "folder" : "file"),
+						name: g.name
 					})
-				}), /* @__PURE__ */ m("button", {
-					onClick: y,
+				}), /* @__PURE__ */ p("button", {
+					type: "button",
+					onClick: v,
 					className: "text-text-tertiary hover:text-text-secondary transition-colors duration-200",
-					"aria-label": e(S, "files.shareDialog.actions.close", "Close share dialog"),
-					children: /* @__PURE__ */ m(f, { className: "size-5" })
+					"aria-label": e(x, "files.shareDialog.actions.close", "Close share dialog"),
+					children: /* @__PURE__ */ p(d, { className: "size-5" })
 				})]
-			}), T === null ? /* @__PURE__ */ h(p, { children: [
-				z && /* @__PURE__ */ m("div", {
+			}), w === null ? /* @__PURE__ */ m(f, { children: [
+				R && /* @__PURE__ */ p("div", {
 					className: "mb-4 rounded-lg border border-status-error-border bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text",
-					children: z
+					children: R
 				}),
-				/* @__PURE__ */ h("div", {
+				/* @__PURE__ */ m("div", {
 					className: "space-y-4",
 					children: [
-						/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ h("label", {
+						/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ m("label", {
 							className: "flex items-center gap-2 text-sm font-medium text-text-primary mb-2",
-							children: [/* @__PURE__ */ m(i, { className: "size-4" }), e(S, "files.shareDialog.expiry.label", "Link expires in")]
-						}), /* @__PURE__ */ h("select", {
-							value: k,
-							onChange: (e) => A(Number(e.target.value)),
+							children: [/* @__PURE__ */ p(r, { className: "size-4" }), e(x, "files.shareDialog.expiry.label", "Link expires in")]
+						}), /* @__PURE__ */ m("select", {
+							value: O,
+							onChange: (e) => k(Number(e.target.value)),
 							className: "w-full px-3 py-2 border border-border-default rounded-lg focus:outline-none focus:border-action-primary-border text-sm transition-colors duration-200",
 							children: [
-								/* @__PURE__ */ m("option", {
+								/* @__PURE__ */ p("option", {
 									value: 0,
-									children: e(S, "files.shareDialog.expiry.options.never", "Never")
+									children: e(x, "files.shareDialog.expiry.options.never", "Never")
 								}),
-								/* @__PURE__ */ m("option", {
+								/* @__PURE__ */ p("option", {
 									value: 1,
-									children: e(S, "files.shareDialog.expiry.options.oneDay", "1 day")
+									children: e(x, "files.shareDialog.expiry.options.oneDay", "1 day")
 								}),
-								/* @__PURE__ */ m("option", {
+								/* @__PURE__ */ p("option", {
 									value: 7,
-									children: e(S, "files.shareDialog.expiry.options.sevenDays", "7 days")
+									children: e(x, "files.shareDialog.expiry.options.sevenDays", "7 days")
 								}),
-								/* @__PURE__ */ m("option", {
+								/* @__PURE__ */ p("option", {
 									value: 30,
-									children: e(S, "files.shareDialog.expiry.options.thirtyDays", "30 days")
+									children: e(x, "files.shareDialog.expiry.options.thirtyDays", "30 days")
 								}),
-								/* @__PURE__ */ m("option", {
+								/* @__PURE__ */ p("option", {
 									value: 90,
-									children: e(S, "files.shareDialog.expiry.options.ninetyDays", "90 days")
+									children: e(x, "files.shareDialog.expiry.options.ninetyDays", "90 days")
 								})
 							]
 						})] }),
-						/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ h("label", {
+						/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ m("label", {
 							className: "flex items-center gap-2 text-sm font-medium text-text-primary mb-2",
-							children: [/* @__PURE__ */ m(s, { className: "size-4" }), e(S, "files.shareDialog.downloads.label", "Maximum downloads")]
-						}), /* @__PURE__ */ m("input", {
+							children: [/* @__PURE__ */ p(o, { className: "size-4" }), e(x, "files.shareDialog.downloads.label", "Maximum downloads")]
+						}), /* @__PURE__ */ p("input", {
 							type: "number",
 							min: "0",
-							value: j,
-							onChange: (e) => M(Number(e.target.value)),
-							placeholder: e(S, "files.shareDialog.downloads.placeholder", "Unlimited"),
+							value: A,
+							onChange: (e) => j(Number(e.target.value)),
+							placeholder: e(x, "files.shareDialog.downloads.placeholder", "Unlimited"),
 							className: "w-full px-3 py-2 border border-border-default rounded-lg focus:outline-none focus:border-action-primary-border text-sm transition-colors duration-200"
 						})] }),
-						/* @__PURE__ */ h("div", { children: [
-							/* @__PURE__ */ h("label", {
+						/* @__PURE__ */ m("div", { children: [
+							/* @__PURE__ */ m("label", {
 								className: "flex items-center gap-2 text-sm font-medium text-text-primary mb-2",
-								children: [/* @__PURE__ */ m(u, { className: "size-4" }), e(S, "files.shareDialog.password.label", "Password protection")]
+								children: [/* @__PURE__ */ p(l, { className: "size-4" }), e(x, "files.shareDialog.password.label", "Password protection")]
 							}),
-							/* @__PURE__ */ h("div", {
+							/* @__PURE__ */ m("div", {
 								className: "flex items-center gap-2",
-								children: [/* @__PURE__ */ m("input", {
+								children: [/* @__PURE__ */ p("input", {
 									type: "checkbox",
-									checked: N,
-									onChange: (e) => P(e.target.checked),
+									checked: M,
+									onChange: (e) => N(e.target.checked),
 									className: "rounded transition-colors duration-200"
-								}), /* @__PURE__ */ m("span", {
+								}), /* @__PURE__ */ p("span", {
 									className: "text-sm text-text-secondary",
-									children: e(S, "files.shareDialog.password.require", "Require password")
+									children: e(x, "files.shareDialog.password.require", "Require password")
 								})]
 							}),
-							N && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("input", {
+							M && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("input", {
 								type: "password",
-								value: F,
-								onChange: (e) => I(e.target.value),
-								placeholder: e(S, "files.shareDialog.password.placeholder", "Enter password"),
+								value: P,
+								onChange: (e) => F(e.target.value),
+								placeholder: e(x, "files.shareDialog.password.placeholder", "Enter password"),
 								className: "w-full mt-2 px-3 py-2 border border-border-default rounded-lg focus:outline-none focus:border-action-primary-border text-sm transition-colors duration-200"
-							}), /* @__PURE__ */ m("p", {
+							}), /* @__PURE__ */ p("p", {
 								className: "mt-1 text-xs text-text-tertiary",
-								children: e(S, "files.shareDialog.password.help", "Password must be at least 8 characters and contain uppercase, lowercase, and number")
+								children: e(x, "files.shareDialog.password.help", "Password must be at least 8 characters and contain uppercase, lowercase, and number")
 							})] })
 						] }),
-						/* @__PURE__ */ h("div", { children: [
-							/* @__PURE__ */ h("label", {
+						/* @__PURE__ */ m("div", { children: [
+							/* @__PURE__ */ m("label", {
 								className: "flex items-center gap-2 text-sm font-medium text-text-primary mb-2",
-								children: [/* @__PURE__ */ m(d, { className: "size-4" }), e(S, "files.shareDialog.invite.label", "Invite specific person (optional)")]
+								children: [/* @__PURE__ */ p(u, { className: "size-4" }), e(x, "files.shareDialog.invite.label", "Invite specific person (optional)")]
 							}),
-							/* @__PURE__ */ m("input", {
+							/* @__PURE__ */ p("input", {
 								type: "email",
-								value: L,
-								onChange: (e) => R(e.target.value),
+								value: I,
+								onChange: (e) => L(e.target.value),
 								placeholder: "user@example.com",
 								className: "w-full px-3 py-2 border border-border-default rounded-lg focus:outline-none focus:border-action-primary-border text-sm transition-colors duration-200"
 							}),
-							/* @__PURE__ */ m("p", {
+							/* @__PURE__ */ p("p", {
 								className: "mt-1 text-xs text-text-secondary",
-								children: e(S, "files.shareDialog.invite.help", "Leave empty for public link")
+								children: e(x, "files.shareDialog.invite.help", "Leave empty for public link")
 							})
 						] })
 					]
 				}),
-				/* @__PURE__ */ h("div", {
+				/* @__PURE__ */ m("div", {
 					className: "flex justify-end gap-2 mt-6",
-					children: [/* @__PURE__ */ m("button", {
-						onClick: y,
+					children: [/* @__PURE__ */ p("button", {
+						type: "button",
+						onClick: v,
 						className: "px-4 py-2 text-sm font-medium text-text-primary hover:bg-action-ghost-bg-hover rounded-lg transition-colors duration-200",
-						children: e(S, "files.common.actions.cancel", "Cancel")
-					}), /* @__PURE__ */ m("button", {
+						children: e(x, "files.common.actions.cancel", "Cancel")
+					}), /* @__PURE__ */ p("button", {
+						type: "button",
 						onClick: async () => {
 							try {
-								B(null);
-								let e = k > 0 ? new Date(Date.now() + k * 24 * 60 * 60 * 1e3).toISOString() : void 0, t = L ? "EMAIL_INVITE" : "PUBLIC_LINK", n = await b({
-									...v === "file" ? { fileId: _.id } : { folderId: _.id },
+								z(null);
+								let e = O > 0 ? new Date(Date.now() + O * 24 * 60 * 60 * 1e3).toISOString() : void 0, t = I ? "EMAIL_INVITE" : "PUBLIC_LINK", n = await y({
+									..._ === "file" ? { fileId: g.id } : { folderId: g.id },
 									shareType: t,
 									accessLevel: "DOWNLOAD",
 									expiresAt: e,
-									maxDownloads: j > 0 ? j : void 0,
-									password: N && F ? F : void 0,
-									invitedEmail: L || void 0
+									maxDownloads: A > 0 ? A : void 0,
+									password: M && P ? P : void 0,
+									invitedEmail: I || void 0
 								});
-								E(t), w(n.publicUrl || "");
+								T(t), C(n.publicUrl || "");
 							} catch (e) {
-								B(e instanceof Error ? e.message : "Failed to create share");
+								z(e instanceof Error ? e.message : "Failed to create share");
 							}
 						},
-						disabled: x || N && !F,
+						disabled: b || M && !P,
 						className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-inverse bg-action-primary-bg rounded-lg hover:bg-action-primary-bg-hover disabled:bg-bg-muted disabled:text-text-tertiary disabled:cursor-not-allowed transition-colors duration-200",
-						children: x ? /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(l, { className: "size-4 animate-spin" }), e(S, "files.shareDialog.actions.creating", "Creating...")] }) : /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(c, { className: "size-4" }), e(S, "files.shareDialog.actions.createLink", "Create share link")] })
+						children: b ? /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(c, { className: "size-4 animate-spin" }), e(x, "files.shareDialog.actions.creating", "Creating...")] }) : /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(s, { className: "size-4" }), e(x, "files.shareDialog.actions.createLink", "Create share link")] })
 					})]
 				})
-			] }) : /* @__PURE__ */ m(p, { children: /* @__PURE__ */ h("div", {
+			] }) : /* @__PURE__ */ p(f, { children: /* @__PURE__ */ m("div", {
 				className: "space-y-4",
-				children: [/* @__PURE__ */ m("div", {
+				children: [/* @__PURE__ */ p("div", {
 					className: "bg-status-success-bg-subtle border border-status-success-border rounded-lg p-4",
-					children: T === "EMAIL_INVITE" ? /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("p", {
+					children: w === "EMAIL_INVITE" ? /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("p", {
 						className: "text-sm font-medium text-status-success-text mb-2",
-						children: e(S, "files.shareDialog.success.invitationSent", "Invitation sent successfully!")
-					}), /* @__PURE__ */ m("p", {
+						children: e(x, "files.shareDialog.success.invitationSent", "Invitation sent successfully!")
+					}), /* @__PURE__ */ p("p", {
 						className: "text-sm text-text-secondary",
-						children: e(S, "files.shareDialog.success.invitationSentTo", "An invitation has been sent to {{email}}", { email: L })
-					})] }) : /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("p", {
+						children: e(x, "files.shareDialog.success.invitationSentTo", "An invitation has been sent to {{email}}", { email: I })
+					})] }) : /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("p", {
 						className: "text-sm font-medium text-status-success-text mb-2",
-						children: e(S, "files.shareDialog.success.linkCreated", "Share link created successfully!")
-					}), /* @__PURE__ */ h("div", {
+						children: e(x, "files.shareDialog.success.linkCreated", "Share link created successfully!")
+					}), /* @__PURE__ */ m("div", {
 						className: "flex items-center gap-2",
-						children: [/* @__PURE__ */ m("input", {
+						children: [/* @__PURE__ */ p("input", {
 							type: "text",
-							value: C || "",
+							value: S || "",
 							readOnly: !0,
 							className: "flex-1 px-3 py-2 bg-bg-surface border border-status-success-border rounded-lg text-sm"
-						}), /* @__PURE__ */ m("button", {
+						}), /* @__PURE__ */ p("button", {
+							type: "button",
 							onClick: async () => {
-								C && (await navigator.clipboard.writeText(C), O(!0));
+								S && (await navigator.clipboard.writeText(S), D(!0));
 							},
 							className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-inverse bg-action-primary-bg rounded-lg hover:bg-action-primary-bg-hover transition-colors duration-200",
-							children: D ? /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(a, { className: "size-4" }), e(S, "files.shareDialog.actions.copied", "Copied!")] }) : /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(o, { className: "size-4" }), e(S, "files.common.actions.copy", "Copy")] })
+							children: E ? /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(i, { className: "size-4" }), e(x, "files.shareDialog.actions.copied", "Copied!")] }) : /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(a, { className: "size-4" }), e(x, "files.common.actions.copy", "Copy")] })
 						})]
 					})] })
-				}), /* @__PURE__ */ m("button", {
-					onClick: y,
+				}), /* @__PURE__ */ p("button", {
+					type: "button",
+					onClick: v,
 					className: "w-full px-4 py-2 text-sm font-medium text-text-inverse bg-action-primary-bg rounded-lg hover:bg-action-primary-bg-hover transition-colors duration-200",
-					children: e(S, "files.common.actions.done", "Done")
+					children: e(x, "files.common.actions.done", "Done")
 				})]
 			}) })]
 		})
 	});
 }
 //#endregion
-export { _ as ShareDialog };
+export { g as ShareDialog };
 
 //# sourceMappingURL=ShareDialog.js.map

package/dist/files/components/ShareDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShareDialog.js","names":[],"sources":["../../../src/files/components/ShareDialog.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport {\n  X,\n  Link,\n  Mail,\n  Calendar,\n  Download,\n  Lock,\n  Copy,\n  Check,\n  Loader2,\n} from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport type { FileItem, FolderItem } from \"../types\";\nimport { tWithFallback } from \"../utils/i18n\";\n\nexport interface ShareDialogInput {\n  fileId?: string;\n  folderId?: string;\n  shareType: \"PUBLIC_LINK\" | \"EMAIL_INVITE\";\n  accessLevel: \"VIEW\" | \"DOWNLOAD\" | \"EDIT\";\n  expiresAt?: string;\n  maxDownloads?: number;\n  password?: string;\n  invitedEmail?: string;\n}\n\ninterface ShareDialogProps {\n  item: FileItem | FolderItem;\n  itemType: \"file\" | \"folder\";\n  onClose: () => void;\n  onCreateShare: (\n    input: ShareDialogInput,\n  ) => Promise<{ publicUrl: string; token: string }>;\n  isLoading?: boolean;\n}\n\nexport function ShareDialog({\n  item,\n  itemType,\n  onClose,\n  onCreateShare,\n  isLoading,\n}: ShareDialogProps) {\n  const { t } = useI18n();\n  const [shareUrl, setShareUrl] = useState<string | null>(null);\n  const [shareType, setShareType] = useState<\n    \"PUBLIC_LINK\" | \"EMAIL_INVITE\" | null\n  >(null);\n  const [copied, setCopied] = useState(false);\n  const [expiryDays, setExpiryDays] = useState<number>(7);\n  const [maxDownloads, setMaxDownloads] = useState<number>(0);\n  const [hasPassword, setHasPassword] = useState(false);\n  const [password, setPassword] = useState(\"\");\n  const [invitedEmail, setInvitedEmail] = useState(\"\");\n  const [errorMessage, setErrorMessage] = useState<string | null>(null);\n  const titleId = useMemo(() => `share-dialog-title-${item.id}`, [item.id]);\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onClose();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleEscape);\n    return () => document.removeEventListener(\"keydown\", handleEscape);\n  }, [onClose]);\n\n  const handleCreateShare = async () => {\n    try {\n      setErrorMessage(null);\n      const expiresAt =\n        expiryDays > 0\n          ? new Date(\n              Date.now() + expiryDays * 24 * 60 * 60 * 1000,\n            ).toISOString()\n          : undefined;\n\n      const type: ShareDialogInput[\"shareType\"] = invitedEmail\n        ? \"EMAIL_INVITE\"\n        : \"PUBLIC_LINK\";\n\n      const shareInput: ShareDialogInput = {\n        ...(itemType === \"file\" ? { fileId: item.id } : { folderId: item.id }),\n        shareType: type,\n        accessLevel: \"DOWNLOAD\",\n        expiresAt,\n        maxDownloads: maxDownloads > 0 ? maxDownloads : undefined,\n        password: hasPassword && password ? password : undefined,\n        invitedEmail: invitedEmail || undefined,\n      };\n\n      const result = await onCreateShare(shareInput);\n\n      setShareType(type);\n      setShareUrl(result.publicUrl || \"\");\n    } catch (error) {\n      setErrorMessage(\n        error instanceof Error ? error.message : \"Failed to create share\",\n      );\n    }\n  };\n\n  const handleCopyLink = async () => {\n    if (shareUrl) {\n      await navigator.clipboard.writeText(shareUrl);\n      setCopied(true);\n    }\n  };\n\n  // Cleanup timeout on unmount to prevent React state update warning\n  useEffect(() => {\n    if (copied) {\n      const timer = setTimeout(() => setCopied(false), 2000);\n      return () => clearTimeout(timer);\n    }\n    return undefined;\n  }, [copied]);\n\n  return (\n    <div\n      className=\"fixed inset-0 bg-bg-overlay flex items-center justify-center z-[100] animate-in fade-in duration-200\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={titleId}\n    >\n      <div className=\"bg-bg-surface rounded-lg shadow-xl p-6 w-full max-w-md mx-4 animate-in zoom-in-95 duration-200\">\n        <div className=\"flex items-center justify-between mb-4\">\n          <h2 id={titleId} className=\"text-lg font-semibold text-text-primary\">\n            {tWithFallback(\n              t,\n              \"files.shareDialog.title\",\n              'Share {{itemType}} \"{{name}}\"',\n              {\n                itemType: tWithFallback(\n                  t,\n                  itemType === \"folder\"\n                    ? \"files.shareDialog.itemType.folder\"\n                    : \"files.shareDialog.itemType.file\",\n                  itemType === \"folder\" ? \"folder\" : \"file\",\n                ),\n                name: item.name,\n              },\n            )}\n          </h2>\n          <button\n            onClick={onClose}\n            className=\"text-text-tertiary hover:text-text-secondary transition-colors duration-200\"\n            aria-label={tWithFallback(\n              t,\n              \"files.shareDialog.actions.close\",\n              \"Close share dialog\",\n            )}\n          >\n            <X className=\"size-5\" />\n          </button>\n        </div>\n\n        {shareType === null ? (\n          <>\n            {errorMessage && (\n              <div className=\"mb-4 rounded-lg border border-status-error-border bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text\">\n                {errorMessage}\n              </div>\n            )}\n\n            {/* Share Settings */}\n            <div className=\"space-y-4\">\n              {/* Expiry */}\n              <div>\n                <label className=\"flex items-center gap-2 text-sm font-medium text-text-primary mb-2\">\n                  <Calendar className=\"size-4\" />\n                  {tWithFallback(\n                    t,\n                    \"files.shareDialog.expiry.label\",\n                    \"Link expires in\",\n                  )}\n                </label>\n                <select\n                  value={expiryDays}\n                  onChange={(e) => setExpiryDays(Number(e.target.value))}\n                  className=\"w-full px-3 py-2 border border-border-default rounded-lg focus:outline-none focus:border-action-primary-border text-sm transition-colors duration-200\"\n                >\n                  <option value={0}>\n                    {tWithFallback(\n                      t,\n                      \"files.shareDialog.expiry.options.never\",\n                      \"Never\",\n                    )}\n                  </option>\n                  <option value={1}>\n                    {tWithFallback(\n                      t,\n                      \"files.shareDialog.expiry.options.oneDay\",\n                      \"1 day\",\n                    )}\n                  </option>\n                  <option value={7}>\n                    {tWithFallback(\n                      t,\n                      \"files.shareDialog.expiry.options.sevenDays\",\n                      \"7 days\",\n                    )}\n                  </option>\n                  <option value={30}>\n                    {tWithFallback(\n                      t,\n                      \"files.shareDialog.expiry.options.thirtyDays\",\n                      \"30 days\",\n                    )}\n                  </option>\n                  <option value={90}>\n                    {tWithFallback(\n                      t,\n                      \"files.shareDialog.expiry.options.ninetyDays\",\n                      \"90 days\",\n                    )}\n                  </option>\n                </select>\n              </div>\n\n              {/* Max Downloads */}\n              <div>\n                <label className=\"flex items-center gap-2 text-sm font-medium text-text-primary mb-2\">\n                  <Download className=\"size-4\" />\n                  {tWithFallback(\n                    t,\n                    \"files.shareDialog.downloads.label\",\n                    \"Maximum downloads\",\n                  )}\n                </label>\n                <input\n                  type=\"number\"\n                  min=\"0\"\n                  value={maxDownloads}\n                  onChange={(e) => setMaxDownloads(Number(e.target.value))}\n                  placeholder={tWithFallback(\n                    t,\n                    \"files.shareDialog.downloads.placeholder\",\n                    \"Unlimited\",\n                  )}\n                  className=\"w-full px-3 py-2 border border-border-default rounded-lg focus:outline-none focus:border-action-primary-border text-sm transition-colors duration-200\"\n                />\n              </div>\n\n              {/* Password Protection */}\n              <div>\n                <label className=\"flex items-center gap-2 text-sm font-medium text-text-primary mb-2\">\n                  <Lock className=\"size-4\" />\n                  {tWithFallback(\n                    t,\n                    \"files.shareDialog.password.label\",\n                    \"Password protection\",\n                  )}\n                </label>\n                <div className=\"flex items-center gap-2\">\n                  <input\n                    type=\"checkbox\"\n                    checked={hasPassword}\n                    onChange={(e) => setHasPassword(e.target.checked)}\n                    className=\"rounded transition-colors duration-200\"\n                  />\n                  <span className=\"text-sm text-text-secondary\">\n                    {tWithFallback(\n                      t,\n                      \"files.shareDialog.password.require\",\n                      \"Require password\",\n                    )}\n                  </span>\n                </div>\n                {hasPassword && (\n                  <>\n                    <input\n                      type=\"password\"\n                      value={password}\n                      onChange={(e) => setPassword(e.target.value)}\n                      placeholder={tWithFallback(\n                        t,\n                        \"files.shareDialog.password.placeholder\",\n                        \"Enter password\",\n                      )}\n                      className=\"w-full mt-2 px-3 py-2 border border-border-default rounded-lg focus:outline-none focus:border-action-primary-border text-sm transition-colors duration-200\"\n                    />\n                    <p className=\"mt-1 text-xs text-text-tertiary\">\n                      {tWithFallback(\n                        t,\n                        \"files.shareDialog.password.help\",\n                        \"Password must be at least 8 characters and contain uppercase, lowercase, and number\",\n                      )}\n                    </p>\n                  </>\n                )}\n              </div>\n\n              {/* Invited Email */}\n              <div>\n                <label className=\"flex items-center gap-2 text-sm font-medium text-text-primary mb-2\">\n                  <Mail className=\"size-4\" />\n                  {tWithFallback(\n                    t,\n                    \"files.shareDialog.invite.label\",\n                    \"Invite specific person (optional)\",\n                  )}\n                </label>\n                <input\n                  type=\"email\"\n                  value={invitedEmail}\n                  onChange={(e) => setInvitedEmail(e.target.value)}\n                  placeholder=\"user@example.com\"\n                  className=\"w-full px-3 py-2 border border-border-default rounded-lg focus:outline-none focus:border-action-primary-border text-sm transition-colors duration-200\"\n                />\n                <p className=\"mt-1 text-xs text-text-secondary\">\n                  {tWithFallback(\n                    t,\n                    \"files.shareDialog.invite.help\",\n                    \"Leave empty for public link\",\n                  )}\n                </p>\n              </div>\n            </div>\n\n            {/* Create Button */}\n            <div className=\"flex justify-end gap-2 mt-6\">\n              <button\n                onClick={onClose}\n                className=\"px-4 py-2 text-sm font-medium text-text-primary hover:bg-action-ghost-bg-hover rounded-lg transition-colors duration-200\"\n              >\n                {tWithFallback(t, \"files.common.actions.cancel\", \"Cancel\")}\n              </button>\n              <button\n                onClick={handleCreateShare}\n                disabled={isLoading || (hasPassword && !password)}\n                className=\"flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-inverse bg-action-primary-bg rounded-lg hover:bg-action-primary-bg-hover disabled:bg-bg-muted disabled:text-text-tertiary disabled:cursor-not-allowed transition-colors duration-200\"\n              >\n                {isLoading ? (\n                  <>\n                    <Loader2 className=\"size-4 animate-spin\" />\n                    {tWithFallback(\n                      t,\n                      \"files.shareDialog.actions.creating\",\n                      \"Creating...\",\n                    )}\n                  </>\n                ) : (\n                  <>\n                    <Link className=\"size-4\" />\n                    {tWithFallback(\n                      t,\n                      \"files.shareDialog.actions.createLink\",\n                      \"Create share link\",\n                    )}\n                  </>\n                )}\n              </button>\n            </div>\n          </>\n        ) : (\n          <>\n            {/* Share Created Success */}\n            <div className=\"space-y-4\">\n              <div className=\"bg-status-success-bg-subtle border border-status-success-border rounded-lg p-4\">\n                {shareType === \"EMAIL_INVITE\" ? (\n                  <>\n                    <p className=\"text-sm font-medium text-status-success-text mb-2\">\n                      {tWithFallback(\n                        t,\n                        \"files.shareDialog.success.invitationSent\",\n                        \"Invitation sent successfully!\",\n                      )}\n                    </p>\n                    <p className=\"text-sm text-text-secondary\">\n                      {tWithFallback(\n                        t,\n                        \"files.shareDialog.success.invitationSentTo\",\n                        \"An invitation has been sent to {{email}}\",\n                        { email: invitedEmail },\n                      )}\n                    </p>\n                  </>\n                ) : (\n                  <>\n                    <p className=\"text-sm font-medium text-status-success-text mb-2\">\n                      {tWithFallback(\n                        t,\n                        \"files.shareDialog.success.linkCreated\",\n                        \"Share link created successfully!\",\n                      )}\n                    </p>\n                    <div className=\"flex items-center gap-2\">\n                      <input\n                        type=\"text\"\n                        value={shareUrl || \"\"}\n                        readOnly\n                        className=\"flex-1 px-3 py-2 bg-bg-surface border border-status-success-border rounded-lg text-sm\"\n                      />\n                      <button\n                        onClick={handleCopyLink}\n                        className=\"flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-inverse bg-action-primary-bg rounded-lg hover:bg-action-primary-bg-hover transition-colors duration-200\"\n                      >\n                        {copied ? (\n                          <>\n                            <Check className=\"size-4\" />\n                            {tWithFallback(\n                              t,\n                              \"files.shareDialog.actions.copied\",\n                              \"Copied!\",\n                            )}\n                          </>\n                        ) : (\n                          <>\n                            <Copy className=\"size-4\" />\n                            {tWithFallback(\n                              t,\n                              \"files.common.actions.copy\",\n                              \"Copy\",\n                            )}\n                          </>\n                        )}\n                      </button>\n                    </div>\n                  </>\n                )}\n              </div>\n\n              <button\n                onClick={onClose}\n                className=\"w-full px-4 py-2 text-sm font-medium text-text-inverse bg-action-primary-bg rounded-lg hover:bg-action-primary-bg-hover transition-colors duration-200\"\n              >\n                {tWithFallback(t, \"files.common.actions.done\", \"Done\")}\n              </button>\n            </div>\n          </>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ShareDialog.js","names":[],"sources":["../../../src/files/components/ShareDialog.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport {\n  X,\n  Link,\n  Mail,\n  Calendar,\n  Download,\n  Lock,\n  Copy,\n  Check,\n  Loader2,\n} from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport type { FileItem, FolderItem } from \"../types\";\nimport { tWithFallback } from \"../utils/i18n\";\n\nexport interface ShareDialogInput {\n  fileId?: string;\n  folderId?: string;\n  shareType: \"PUBLIC_LINK\" | \"EMAIL_INVITE\";\n  accessLevel: \"VIEW\" | \"DOWNLOAD\" | \"EDIT\";\n  expiresAt?: string;\n  maxDownloads?: number;\n  password?: string;\n  invitedEmail?: string;\n}\n\ninterface ShareDialogProps {\n  item: FileItem | FolderItem;\n  itemType: \"file\" | \"folder\";\n  onClose: () => void;\n  onCreateShare: (\n    input: ShareDialogInput,\n  ) => Promise<{ publicUrl: string; token: string }>;\n  isLoading?: boolean;\n}\n\nexport function ShareDialog({\n  item,\n  itemType,\n  onClose,\n  onCreateShare,\n  isLoading,\n}: ShareDialogProps) {\n  const { t } = useI18n();\n  const [shareUrl, setShareUrl] = useState<string | null>(null);\n  const [shareType, setShareType] = useState<\n    \"PUBLIC_LINK\" | \"EMAIL_INVITE\" | null\n  >(null);\n  const [copied, setCopied] = useState(false);\n  const [expiryDays, setExpiryDays] = useState<number>(7);\n  const [maxDownloads, setMaxDownloads] = useState<number>(0);\n  const [hasPassword, setHasPassword] = useState(false);\n  const [password, setPassword] = useState(\"\");\n  const [invitedEmail, setInvitedEmail] = useState(\"\");\n  const [errorMessage, setErrorMessage] = useState<string | null>(null);\n  const titleId = `share-dialog-title-${item.id}`;\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onClose();\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleEscape);\n    return () => document.removeEventListener(\"keydown\", handleEscape);\n  }, [onClose]);\n\n  const handleCreateShare = async () => {\n    try {\n      setErrorMessage(null);\n      const expiresAt =\n        expiryDays > 0\n          ? new Date(\n              Date.now() + expiryDays * 24 * 60 * 60 * 1000,\n            ).toISOString()\n          : undefined;\n\n      const type: ShareDialogInput[\"shareType\"] = invitedEmail\n        ? \"EMAIL_INVITE\"\n        : \"PUBLIC_LINK\";\n\n      const shareInput: ShareDialogInput = {\n        ...(itemType === \"file\" ? { fileId: item.id } : { folderId: item.id }),\n        shareType: type,\n        accessLevel: \"DOWNLOAD\",\n        expiresAt,\n        maxDownloads: maxDownloads > 0 ? maxDownloads : undefined,\n        password: hasPassword && password ? password : undefined,\n        invitedEmail: invitedEmail || undefined,\n      };\n\n      const result = await onCreateShare(shareInput);\n\n      setShareType(type);\n      setShareUrl(result.publicUrl || \"\");\n    } catch (error) {\n      setErrorMessage(\n        error instanceof Error ? error.message : \"Failed to create share\",\n      );\n    }\n  };\n\n  const handleCopyLink = async () => {\n    if (shareUrl) {\n      await navigator.clipboard.writeText(shareUrl);\n      setCopied(true);\n    }\n  };\n\n  // Cleanup timeout on unmount to prevent React state update warning\n  useEffect(() => {\n    if (copied) {\n      const timer = setTimeout(() => setCopied(false), 2000);\n      return () => clearTimeout(timer);\n    }\n    return undefined;\n  }, [copied]);\n\n  return (\n    <div\n      className=\"fixed inset-0 bg-bg-overlay flex items-center justify-center z-[100] animate-in fade-in duration-200\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby={titleId}\n    >\n      <div className=\"bg-bg-surface rounded-lg shadow-xl p-6 w-full max-w-md mx-4 animate-in zoom-in-95 duration-200\">\n        <div className=\"flex items-center justify-between mb-4\">\n          <h2 id={titleId} className=\"text-lg font-semibold text-text-primary\">\n            {tWithFallback(\n              t,\n              \"files.shareDialog.title\",\n              'Share {{itemType}} \"{{name}}\"',\n              {\n                itemType: tWithFallback(\n                  t,\n                  itemType === \"folder\"\n                    ? \"files.shareDialog.itemType.folder\"\n                    : \"files.shareDialog.itemType.file\",\n                  itemType === \"folder\" ? \"folder\" : \"file\",\n                ),\n                name: item.name,\n              },\n            )}\n          </h2>\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className=\"text-text-tertiary hover:text-text-secondary transition-colors duration-200\"\n            aria-label={tWithFallback(\n              t,\n              \"files.shareDialog.actions.close\",\n              \"Close share dialog\",\n            )}\n          >\n            <X className=\"size-5\" />\n          </button>\n        </div>\n\n        {shareType === null ? (\n          <>\n            {errorMessage && (\n              <div className=\"mb-4 rounded-lg border border-status-error-border bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text\">\n                {errorMessage}\n              </div>\n            )}\n\n            {/* Share Settings */}\n            <div className=\"space-y-4\">\n              {/* Expiry */}\n              <div>\n                <label className=\"flex items-center gap-2 text-sm font-medium text-text-primary mb-2\">\n                  <Calendar className=\"size-4\" />\n                  {tWithFallback(\n                    t,\n                    \"files.shareDialog.expiry.label\",\n                    \"Link expires in\",\n                  )}\n                </label>\n                <select\n                  value={expiryDays}\n                  onChange={(e) => setExpiryDays(Number(e.target.value))}\n                  className=\"w-full px-3 py-2 border border-border-default rounded-lg focus:outline-none focus:border-action-primary-border text-sm transition-colors duration-200\"\n                >\n                  <option value={0}>\n                    {tWithFallback(\n                      t,\n                      \"files.shareDialog.expiry.options.never\",\n                      \"Never\",\n                    )}\n                  </option>\n                  <option value={1}>\n                    {tWithFallback(\n                      t,\n                      \"files.shareDialog.expiry.options.oneDay\",\n                      \"1 day\",\n                    )}\n                  </option>\n                  <option value={7}>\n                    {tWithFallback(\n                      t,\n                      \"files.shareDialog.expiry.options.sevenDays\",\n                      \"7 days\",\n                    )}\n                  </option>\n                  <option value={30}>\n                    {tWithFallback(\n                      t,\n                      \"files.shareDialog.expiry.options.thirtyDays\",\n                      \"30 days\",\n                    )}\n                  </option>\n                  <option value={90}>\n                    {tWithFallback(\n                      t,\n                      \"files.shareDialog.expiry.options.ninetyDays\",\n                      \"90 days\",\n                    )}\n                  </option>\n                </select>\n              </div>\n\n              {/* Max Downloads */}\n              <div>\n                <label className=\"flex items-center gap-2 text-sm font-medium text-text-primary mb-2\">\n                  <Download className=\"size-4\" />\n                  {tWithFallback(\n                    t,\n                    \"files.shareDialog.downloads.label\",\n                    \"Maximum downloads\",\n                  )}\n                </label>\n                <input\n                  type=\"number\"\n                  min=\"0\"\n                  value={maxDownloads}\n                  onChange={(e) => setMaxDownloads(Number(e.target.value))}\n                  placeholder={tWithFallback(\n                    t,\n                    \"files.shareDialog.downloads.placeholder\",\n                    \"Unlimited\",\n                  )}\n                  className=\"w-full px-3 py-2 border border-border-default rounded-lg focus:outline-none focus:border-action-primary-border text-sm transition-colors duration-200\"\n                />\n              </div>\n\n              {/* Password Protection */}\n              <div>\n                <label className=\"flex items-center gap-2 text-sm font-medium text-text-primary mb-2\">\n                  <Lock className=\"size-4\" />\n                  {tWithFallback(\n                    t,\n                    \"files.shareDialog.password.label\",\n                    \"Password protection\",\n                  )}\n                </label>\n                <div className=\"flex items-center gap-2\">\n                  <input\n                    type=\"checkbox\"\n                    checked={hasPassword}\n                    onChange={(e) => setHasPassword(e.target.checked)}\n                    className=\"rounded transition-colors duration-200\"\n                  />\n                  <span className=\"text-sm text-text-secondary\">\n                    {tWithFallback(\n                      t,\n                      \"files.shareDialog.password.require\",\n                      \"Require password\",\n                    )}\n                  </span>\n                </div>\n                {hasPassword && (\n                  <>\n                    <input\n                      type=\"password\"\n                      value={password}\n                      onChange={(e) => setPassword(e.target.value)}\n                      placeholder={tWithFallback(\n                        t,\n                        \"files.shareDialog.password.placeholder\",\n                        \"Enter password\",\n                      )}\n                      className=\"w-full mt-2 px-3 py-2 border border-border-default rounded-lg focus:outline-none focus:border-action-primary-border text-sm transition-colors duration-200\"\n                    />\n                    <p className=\"mt-1 text-xs text-text-tertiary\">\n                      {tWithFallback(\n                        t,\n                        \"files.shareDialog.password.help\",\n                        \"Password must be at least 8 characters and contain uppercase, lowercase, and number\",\n                      )}\n                    </p>\n                  </>\n                )}\n              </div>\n\n              {/* Invited Email */}\n              <div>\n                <label className=\"flex items-center gap-2 text-sm font-medium text-text-primary mb-2\">\n                  <Mail className=\"size-4\" />\n                  {tWithFallback(\n                    t,\n                    \"files.shareDialog.invite.label\",\n                    \"Invite specific person (optional)\",\n                  )}\n                </label>\n                <input\n                  type=\"email\"\n                  value={invitedEmail}\n                  onChange={(e) => setInvitedEmail(e.target.value)}\n                  placeholder=\"user@example.com\"\n                  className=\"w-full px-3 py-2 border border-border-default rounded-lg focus:outline-none focus:border-action-primary-border text-sm transition-colors duration-200\"\n                />\n                <p className=\"mt-1 text-xs text-text-secondary\">\n                  {tWithFallback(\n                    t,\n                    \"files.shareDialog.invite.help\",\n                    \"Leave empty for public link\",\n                  )}\n                </p>\n              </div>\n            </div>\n\n            {/* Create Button */}\n            <div className=\"flex justify-end gap-2 mt-6\">\n              <button\n                type=\"button\"\n                onClick={onClose}\n                className=\"px-4 py-2 text-sm font-medium text-text-primary hover:bg-action-ghost-bg-hover rounded-lg transition-colors duration-200\"\n              >\n                {tWithFallback(t, \"files.common.actions.cancel\", \"Cancel\")}\n              </button>\n              <button\n                type=\"button\"\n                onClick={handleCreateShare}\n                disabled={isLoading || (hasPassword && !password)}\n                className=\"flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-inverse bg-action-primary-bg rounded-lg hover:bg-action-primary-bg-hover disabled:bg-bg-muted disabled:text-text-tertiary disabled:cursor-not-allowed transition-colors duration-200\"\n              >\n                {isLoading ? (\n                  <>\n                    <Loader2 className=\"size-4 animate-spin\" />\n                    {tWithFallback(\n                      t,\n                      \"files.shareDialog.actions.creating\",\n                      \"Creating...\",\n                    )}\n                  </>\n                ) : (\n                  <>\n                    <Link className=\"size-4\" />\n                    {tWithFallback(\n                      t,\n                      \"files.shareDialog.actions.createLink\",\n                      \"Create share link\",\n                    )}\n                  </>\n                )}\n              </button>\n            </div>\n          </>\n        ) : (\n          <>\n            {/* Share Created Success */}\n            <div className=\"space-y-4\">\n              <div className=\"bg-status-success-bg-subtle border border-status-success-border rounded-lg p-4\">\n                {shareType === \"EMAIL_INVITE\" ? (\n                  <>\n                    <p className=\"text-sm font-medium text-status-success-text mb-2\">\n                      {tWithFallback(\n                        t,\n                        \"files.shareDialog.success.invitationSent\",\n                        \"Invitation sent successfully!\",\n                      )}\n                    </p>\n                    <p className=\"text-sm text-text-secondary\">\n                      {tWithFallback(\n                        t,\n                        \"files.shareDialog.success.invitationSentTo\",\n                        \"An invitation has been sent to {{email}}\",\n                        { email: invitedEmail },\n                      )}\n                    </p>\n                  </>\n                ) : (\n                  <>\n                    <p className=\"text-sm font-medium text-status-success-text mb-2\">\n                      {tWithFallback(\n                        t,\n                        \"files.shareDialog.success.linkCreated\",\n                        \"Share link created successfully!\",\n                      )}\n                    </p>\n                    <div className=\"flex items-center gap-2\">\n                      <input\n                        type=\"text\"\n                        value={shareUrl || \"\"}\n                        readOnly\n                        className=\"flex-1 px-3 py-2 bg-bg-surface border border-status-success-border rounded-lg text-sm\"\n                      />\n                      <button\n                        type=\"button\"\n                        onClick={handleCopyLink}\n                        className=\"flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-inverse bg-action-primary-bg rounded-lg hover:bg-action-primary-bg-hover transition-colors duration-200\"\n                      >\n                        {copied ? (\n                          <>\n                            <Check className=\"size-4\" />\n                            {tWithFallback(\n                              t,\n                              \"files.shareDialog.actions.copied\",\n                              \"Copied!\",\n                            )}\n                          </>\n                        ) : (\n                          <>\n                            <Copy className=\"size-4\" />\n                            {tWithFallback(\n                              t,\n                              \"files.common.actions.copy\",\n                              \"Copy\",\n                            )}\n                          </>\n                        )}\n                      </button>\n                    </div>\n                  </>\n                )}\n              </div>\n\n              <button\n                type=\"button\"\n                onClick={onClose}\n                className=\"w-full px-4 py-2 text-sm font-medium text-text-inverse bg-action-primary-bg rounded-lg hover:bg-action-primary-bg-hover transition-colors duration-200\"\n              >\n                {tWithFallback(t, \"files.common.actions.done\", \"Done\")}\n              </button>\n            </div>\n          </>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/files/components/TabBar.js

@@ -46,6 +46,7 @@ function l({ activeTab: t, onTabChange: n, tabs: r = [
 				role: "tablist",
 				"aria-label": e(i, "files.browser.tabs.ariaLabel", "Files sections"),
 				children: l.map((e) => /* @__PURE__ */ o("button", {
+					type: "button",
 					onClick: () => n(e.id),
 					role: "tab",
 					"aria-selected": t === e.id,

package/dist/files/components/TabBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabBar.js","names":[],"sources":["../../../src/files/components/TabBar.tsx"],"sourcesContent":["import { Clock, Star, Trash2, Folder } from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { tWithFallback } from \"../utils/i18n\";\n\nexport type TabView = \"all\" | \"recent\" | \"starred\" | \"bin\";\n\ninterface TabBarProps {\n  activeTab: TabView;\n  onTabChange: (tab: TabView) => void;\n  /**\n   * Which tabs to render. Order is preserved. Parent filters out\n   * feature-flag-gated tabs (e.g. bin/starred) before passing.\n   * @default [\"all\", \"recent\", \"starred\", \"bin\"]\n   */\n  tabs?: TabView[];\n}\n\nconst ALL_TABS: { id: TabView; label: string; icon: React.ReactNode }[] = [\n  { id: \"all\", label: \"All Files\", icon: <Folder className=\"size-5\" /> },\n  { id: \"recent\", label: \"Recent\", icon: <Clock className=\"size-5\" /> },\n  { id: \"starred\", label: \"Starred\", icon: <Star className=\"size-5\" /> },\n  { id: \"bin\", label: \"Bin\", icon: <Trash2 className=\"size-5\" /> },\n];\n\nexport function TabBar({\n  activeTab,\n  onTabChange,\n  tabs = [\"all\", \"recent\", \"starred\", \"bin\"],\n}: TabBarProps) {\n  const { t } = useI18n();\n  const visibleTabs = ALL_TABS.filter((tab) => tabs.includes(tab.id));\n  const labels: Record<TabView, string> = {\n    all: tWithFallback(t, \"files.browser.tabs.all\", \"All Files\"),\n    recent: tWithFallback(t, \"files.browser.tabs.recent\", \"Recent\"),\n    starred: tWithFallback(t, \"files.browser.tabs.starred\", \"Starred\"),\n    bin: tWithFallback(t, \"files.browser.tabs.bin\", \"Bin\"),\n  };\n\n  return (\n    <div className=\"bg-bg-surface border-b border-border-default\">\n      <div className=\"overflow-x-auto px-4 sm:px-6 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]\">\n        <nav\n          className=\"-mb-px flex min-w-max gap-1\"\n          role=\"tablist\"\n          aria-label={tWithFallback(\n            t,\n            \"files.browser.tabs.ariaLabel\",\n            \"Files sections\",\n          )}\n        >\n          {visibleTabs.map((tab) => (\n            <button\n              key={tab.id}\n              onClick={() => onTabChange(tab.id)}\n              role=\"tab\"\n              aria-selected={activeTab === tab.id}\n              className={`\n                flex items-center gap-2 whitespace-nowrap px-4 py-3 text-sm font-medium border-b-2 transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-border focus-visible:ring-offset-2\n                ${\n                  activeTab === tab.id\n                    ? \"border-action-primary-bg text-text-primary bg-action-ghost-bg-hover\"\n                    : \"border-transparent text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover\"\n                }\n              `}\n            >\n              {tab.icon}\n              {labels[tab.id] ?? tab.label}\n            </button>\n          ))}\n        </nav>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAiBA,IAAM,IAAoE;CACxE;EAAE,IAAI;EAAO,OAAO;EAAa,MAAM,kBAAC,GAAD,EAAQ,WAAU,UAAW,CAAA;EAAE;CACtE;EAAE,IAAI;EAAU,OAAO;EAAU,MAAM,kBAAC,GAAD,EAAO,WAAU,UAAW,CAAA;EAAE;CACrE;EAAE,IAAI;EAAW,OAAO;EAAW,MAAM,kBAAC,GAAD,EAAM,WAAU,UAAW,CAAA;EAAE;CACtE;EAAE,IAAI;EAAO,OAAO;EAAO,MAAM,kBAAC,GAAD,EAAQ,WAAU,UAAW,CAAA;EAAE;CACjE;AAED,SAAgB,EAAO,EACrB,cACA,gBACA,UAAO;CAAC;CAAO;CAAU;CAAW;CAAM,IAC5B;CACd,IAAM,EAAE,SAAM,GAAS,EACjB,IAAc,EAAS,QAAQ,MAAQ,EAAK,SAAS,EAAI,GAAG,CAAC,EAC7D,IAAkC;EACtC,KAAK,EAAc,GAAG,0BAA0B,YAAY;EAC5D,QAAQ,EAAc,GAAG,6BAA6B,SAAS;EAC/D,SAAS,EAAc,GAAG,8BAA8B,UAAU;EAClE,KAAK,EAAc,GAAG,0BAA0B,MAAM;EACvD;AAED,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD;IACE,WAAU;IACV,MAAK;IACL,cAAY,EACV,GACA,gCACA,iBACD;cAEA,EAAY,KAAK,MAChB,kBAAC,UAAD;KAEE,eAAe,EAAY,EAAI,GAAG;KAClC,MAAK;KACL,iBAAe,MAAc,EAAI;KACjC,WAAW;;kBAGP,MAAc,EAAI,KACd,wEACA,gGACL;;eAXL,CAcG,EAAI,MACJ,EAAO,EAAI,OAAO,EAAI,MAChB;OAfF,EAAI,GAeF,CACT;IACE,CAAA;GACF,CAAA;EACF,CAAA"}
+{"version":3,"file":"TabBar.js","names":[],"sources":["../../../src/files/components/TabBar.tsx"],"sourcesContent":["import { Clock, Star, Trash2, Folder } from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { tWithFallback } from \"../utils/i18n\";\n\nexport type TabView = \"all\" | \"recent\" | \"starred\" | \"bin\";\n\ninterface TabBarProps {\n  activeTab: TabView;\n  onTabChange: (tab: TabView) => void;\n  /**\n   * Which tabs to render. Order is preserved. Parent filters out\n   * feature-flag-gated tabs (e.g. bin/starred) before passing.\n   * @default [\"all\", \"recent\", \"starred\", \"bin\"]\n   */\n  tabs?: TabView[];\n}\n\nconst ALL_TABS: { id: TabView; label: string; icon: React.ReactNode }[] = [\n  { id: \"all\", label: \"All Files\", icon: <Folder className=\"size-5\" /> },\n  { id: \"recent\", label: \"Recent\", icon: <Clock className=\"size-5\" /> },\n  { id: \"starred\", label: \"Starred\", icon: <Star className=\"size-5\" /> },\n  { id: \"bin\", label: \"Bin\", icon: <Trash2 className=\"size-5\" /> },\n];\n\nexport function TabBar({\n  activeTab,\n  onTabChange,\n  tabs = [\"all\", \"recent\", \"starred\", \"bin\"],\n}: TabBarProps) {\n  const { t } = useI18n();\n  const visibleTabs = ALL_TABS.filter((tab) => tabs.includes(tab.id));\n  const labels: Record<TabView, string> = {\n    all: tWithFallback(t, \"files.browser.tabs.all\", \"All Files\"),\n    recent: tWithFallback(t, \"files.browser.tabs.recent\", \"Recent\"),\n    starred: tWithFallback(t, \"files.browser.tabs.starred\", \"Starred\"),\n    bin: tWithFallback(t, \"files.browser.tabs.bin\", \"Bin\"),\n  };\n\n  return (\n    <div className=\"bg-bg-surface border-b border-border-default\">\n      <div className=\"overflow-x-auto px-4 sm:px-6 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]\">\n        <nav\n          className=\"-mb-px flex min-w-max gap-1\"\n          role=\"tablist\"\n          aria-label={tWithFallback(\n            t,\n            \"files.browser.tabs.ariaLabel\",\n            \"Files sections\",\n          )}\n        >\n          {visibleTabs.map((tab) => (\n            <button\n              type=\"button\"\n              key={tab.id}\n              onClick={() => onTabChange(tab.id)}\n              role=\"tab\"\n              aria-selected={activeTab === tab.id}\n              className={`\n                flex items-center gap-2 whitespace-nowrap px-4 py-3 text-sm font-medium border-b-2 transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-border focus-visible:ring-offset-2\n                ${\n                  activeTab === tab.id\n                    ? \"border-action-primary-bg text-text-primary bg-action-ghost-bg-hover\"\n                    : \"border-transparent text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover\"\n                }\n              `}\n            >\n              {tab.icon}\n              {labels[tab.id] ?? tab.label}\n            </button>\n          ))}\n        </nav>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAiBA,IAAM,IAAoE;CACxE;EAAE,IAAI;EAAO,OAAO;EAAa,MAAM,kBAAC,GAAD,EAAQ,WAAU,UAAW,CAAA;EAAE;CACtE;EAAE,IAAI;EAAU,OAAO;EAAU,MAAM,kBAAC,GAAD,EAAO,WAAU,UAAW,CAAA;EAAE;CACrE;EAAE,IAAI;EAAW,OAAO;EAAW,MAAM,kBAAC,GAAD,EAAM,WAAU,UAAW,CAAA;EAAE;CACtE;EAAE,IAAI;EAAO,OAAO;EAAO,MAAM,kBAAC,GAAD,EAAQ,WAAU,UAAW,CAAA;EAAE;CACjE;AAED,SAAgB,EAAO,EACrB,cACA,gBACA,UAAO;CAAC;CAAO;CAAU;CAAW;CAAM,IAC5B;CACd,IAAM,EAAE,SAAM,GAAS,EACjB,IAAc,EAAS,QAAQ,MAAQ,EAAK,SAAS,EAAI,GAAG,CAAC,EAC7D,IAAkC;EACtC,KAAK,EAAc,GAAG,0BAA0B,YAAY;EAC5D,QAAQ,EAAc,GAAG,6BAA6B,SAAS;EAC/D,SAAS,EAAc,GAAG,8BAA8B,UAAU;EAClE,KAAK,EAAc,GAAG,0BAA0B,MAAM;EACvD;AAED,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD;IACE,WAAU;IACV,MAAK;IACL,cAAY,EACV,GACA,gCACA,iBACD;cAEA,EAAY,KAAK,MAChB,kBAAC,UAAD;KACE,MAAK;KAEL,eAAe,EAAY,EAAI,GAAG;KAClC,MAAK;KACL,iBAAe,MAAc,EAAI;KACjC,WAAW;;kBAGP,MAAc,EAAI,KACd,wEACA,gGACL;;eAZL,CAeG,EAAI,MACJ,EAAO,EAAI,OAAO,EAAI,MAChB;OAfF,EAAI,GAeF,CACT;IACE,CAAA;GACF,CAAA;EACF,CAAA"}

package/dist/files/components/Toast.js

@@ -29,6 +29,7 @@ function c({ toast: c, onClose: l }) {
 				children: c.message
 			}),
 			/* @__PURE__ */ o("button", {
+				type: "button",
 				onClick: () => l(c.id),
 				className: "text-text-muted hover:text-text-secondary transition-colors",
 				children: /* @__PURE__ */ o(i, { className: "size-4" })

package/dist/files/components/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","names":[],"sources":["../../../src/files/components/Toast.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { X, CheckCircle, XCircle, AlertCircle, Info } from \"lucide-react\";\n\nexport type ToastType = \"success\" | \"error\" | \"warning\" | \"info\";\n\nexport interface Toast {\n  id: string;\n  type: ToastType;\n  message: string;\n  duration?: number;\n}\n\ninterface ToastItemProps {\n  toast: Toast;\n  onClose: (id: string) => void;\n}\n\nfunction ToastItem({ toast, onClose }: ToastItemProps) {\n  useEffect(() => {\n    const duration = toast.duration || 5000;\n    const timer = setTimeout(() => {\n      onClose(toast.id);\n    }, duration);\n\n    return () => clearTimeout(timer);\n  }, [toast, onClose]);\n\n  const icons = {\n    success: <CheckCircle className=\"size-5 text-status-success-bg\" />,\n    error: <XCircle className=\"size-5 text-status-error-bg\" />,\n    warning: <AlertCircle className=\"size-5 text-status-warning-bg\" />,\n    info: <Info className=\"size-5 text-status-info-bg\" />,\n  };\n\n  const colors = {\n    success: \"bg-status-success-bg-subtle border-status-success-border\",\n    error: \"bg-status-error-bg-subtle border-status-error-border\",\n    warning: \"bg-status-warning-bg-subtle border-status-warning-border\",\n    info: \"bg-status-info-bg-subtle border-status-info-border\",\n  };\n\n  return (\n    <div\n      className={`flex items-center gap-3 p-4 rounded-lg shadow-lg border ${colors[toast.type]} w-80 max-w-[90vw] md:max-w-md animate-in slide-in-from-right duration-300`}\n    >\n      {icons[toast.type]}\n      <p className=\"flex-1 text-sm font-medium text-text-primary\">\n        {toast.message}\n      </p>\n      <button\n        onClick={() => onClose(toast.id)}\n        className=\"text-text-muted hover:text-text-secondary transition-colors\"\n      >\n        <X className=\"size-4\" />\n      </button>\n    </div>\n  );\n}\n\ninterface ToastContainerProps {\n  toasts: Toast[];\n  onClose: (id: string) => void;\n}\n\nexport function ToastContainer({ toasts, onClose }: ToastContainerProps) {\n  return (\n    <div className=\"fixed bottom-4 right-4 z-50 flex flex-col gap-2\">\n      {toasts.map((toast) => (\n        <ToastItem key={toast.id} toast={toast} onClose={onClose} />\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;AAiBA,SAAS,EAAU,EAAE,UAAO,cAA2B;AACrD,SAAgB;EACd,IAAM,IAAW,EAAM,YAAY,KAC7B,IAAQ,iBAAiB;AAC7B,KAAQ,EAAM,GAAG;KAChB,EAAS;AAEZ,eAAa,aAAa,EAAM;IAC/B,CAAC,GAAO,EAAQ,CAAC;CAEpB,IAAM,IAAQ;EACZ,SAAS,kBAAC,GAAD,EAAa,WAAU,iCAAkC,CAAA;EAClE,OAAO,kBAAC,GAAD,EAAS,WAAU,+BAAgC,CAAA;EAC1D,SAAS,kBAAC,GAAD,EAAa,WAAU,iCAAkC,CAAA;EAClE,MAAM,kBAAC,GAAD,EAAM,WAAU,8BAA+B,CAAA;EACtD;AASD,QACE,kBAAC,OAAD;EACE,WAAW,2DATA;GACb,SAAS;GACT,OAAO;GACP,SAAS;GACT,MAAM;GACP,CAIgF,EAAM,MAAM;YAD3F;GAGG,EAAM,EAAM;GACb,kBAAC,KAAD;IAAG,WAAU;cACV,EAAM;IACL,CAAA;GACJ,kBAAC,UAAD;IACE,eAAe,EAAQ,EAAM,GAAG;IAChC,WAAU;cAEV,kBAAC,GAAD,EAAG,WAAU,UAAW,CAAA;IACjB,CAAA;GACL;;;AASV,SAAgB,EAAe,EAAE,WAAQ,cAAgC;AACvE,QACE,kBAAC,OAAD;EAAK,WAAU;YACZ,EAAO,KAAK,MACX,kBAAC,GAAD;GAAiC;GAAgB;GAAW,EAA5C,EAAM,GAAsC,CAC5D;EACE,CAAA"}
+{"version":3,"file":"Toast.js","names":[],"sources":["../../../src/files/components/Toast.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { X, CheckCircle, XCircle, AlertCircle, Info } from \"lucide-react\";\n\nexport type ToastType = \"success\" | \"error\" | \"warning\" | \"info\";\n\nexport interface Toast {\n  id: string;\n  type: ToastType;\n  message: string;\n  duration?: number;\n}\n\ninterface ToastItemProps {\n  toast: Toast;\n  onClose: (id: string) => void;\n}\n\nfunction ToastItem({ toast, onClose }: ToastItemProps) {\n  useEffect(() => {\n    const duration = toast.duration || 5000;\n    const timer = setTimeout(() => {\n      onClose(toast.id);\n    }, duration);\n\n    return () => clearTimeout(timer);\n  }, [toast, onClose]);\n\n  const icons = {\n    success: <CheckCircle className=\"size-5 text-status-success-bg\" />,\n    error: <XCircle className=\"size-5 text-status-error-bg\" />,\n    warning: <AlertCircle className=\"size-5 text-status-warning-bg\" />,\n    info: <Info className=\"size-5 text-status-info-bg\" />,\n  };\n\n  const colors = {\n    success: \"bg-status-success-bg-subtle border-status-success-border\",\n    error: \"bg-status-error-bg-subtle border-status-error-border\",\n    warning: \"bg-status-warning-bg-subtle border-status-warning-border\",\n    info: \"bg-status-info-bg-subtle border-status-info-border\",\n  };\n\n  return (\n    <div\n      className={`flex items-center gap-3 p-4 rounded-lg shadow-lg border ${colors[toast.type]} w-80 max-w-[90vw] md:max-w-md animate-in slide-in-from-right duration-300`}\n    >\n      {icons[toast.type]}\n      <p className=\"flex-1 text-sm font-medium text-text-primary\">\n        {toast.message}\n      </p>\n      <button\n        type=\"button\"\n        onClick={() => onClose(toast.id)}\n        className=\"text-text-muted hover:text-text-secondary transition-colors\"\n      >\n        <X className=\"size-4\" />\n      </button>\n    </div>\n  );\n}\n\ninterface ToastContainerProps {\n  toasts: Toast[];\n  onClose: (id: string) => void;\n}\n\nexport function ToastContainer({ toasts, onClose }: ToastContainerProps) {\n  return (\n    <div className=\"fixed bottom-4 right-4 z-50 flex flex-col gap-2\">\n      {toasts.map((toast) => (\n        <ToastItem key={toast.id} toast={toast} onClose={onClose} />\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;AAiBA,SAAS,EAAU,EAAE,UAAO,cAA2B;AACrD,SAAgB;EACd,IAAM,IAAW,EAAM,YAAY,KAC7B,IAAQ,iBAAiB;AAC7B,KAAQ,EAAM,GAAG;KAChB,EAAS;AAEZ,eAAa,aAAa,EAAM;IAC/B,CAAC,GAAO,EAAQ,CAAC;CAEpB,IAAM,IAAQ;EACZ,SAAS,kBAAC,GAAD,EAAa,WAAU,iCAAkC,CAAA;EAClE,OAAO,kBAAC,GAAD,EAAS,WAAU,+BAAgC,CAAA;EAC1D,SAAS,kBAAC,GAAD,EAAa,WAAU,iCAAkC,CAAA;EAClE,MAAM,kBAAC,GAAD,EAAM,WAAU,8BAA+B,CAAA;EACtD;AASD,QACE,kBAAC,OAAD;EACE,WAAW,2DATA;GACb,SAAS;GACT,OAAO;GACP,SAAS;GACT,MAAM;GACP,CAIgF,EAAM,MAAM;YAD3F;GAGG,EAAM,EAAM;GACb,kBAAC,KAAD;IAAG,WAAU;cACV,EAAM;IACL,CAAA;GACJ,kBAAC,UAAD;IACE,MAAK;IACL,eAAe,EAAQ,EAAM,GAAG;IAChC,WAAU;cAEV,kBAAC,GAAD,EAAG,WAAU,UAAW,CAAA;IACjB,CAAA;GACL;;;AASV,SAAgB,EAAe,EAAE,WAAQ,cAAgC;AACvE,QACE,kBAAC,OAAD;EAAK,WAAU;YACZ,EAAO,KAAK,MACX,kBAAC,GAAD;GAAiC;GAAgB;GAAW,EAA5C,EAAM,GAAsC,CAC5D;EACE,CAAA"}