Move Icon and LoadingIcon to shared package

apps/yaak-client/components/CommandPaletteDialog.tsx

@@ -21,7 +21,7 @@ import { useActiveRequest } from '../hooks/useActiveRequest';
 import { activeWorkspaceIdAtom } from '../hooks/useActiveWorkspace';
 import { useAllRequests } from '../hooks/useAllRequests';
 import { useCreateWorkspace } from '../hooks/useCreateWorkspace';
-import { useDebouncedState } from '@yaakapp-internal/ui';
+import { Icon, useDebouncedState } from '@yaakapp-internal/ui';
 import { useEnvironmentsBreakdown } from '../hooks/useEnvironmentsBreakdown';
 import { useGrpcRequestActions } from '../hooks/useGrpcRequestActions';
 import type { HotkeyAction } from '../hooks/useHotKey';
@@ -50,7 +50,6 @@ import { Button } from './core/Button';
 import { Heading } from './core/Heading';
 import { Hotkey } from './core/Hotkey';
 import { HttpMethodTag } from './core/HttpMethodTag';
-import { Icon } from './core/Icon';
 import { PlainInput } from './core/PlainInput';
 
 interface CommandPaletteGroup {

apps/yaak-client/components/CookieDropdown.tsx

@@ -9,7 +9,7 @@ import { showPrompt } from '../lib/prompt';
 import { setWorkspaceSearchParams } from '../lib/setWorkspaceSearchParams';
 import { CookieDialog } from './CookieDialog';
 import { Dropdown, type DropdownItem } from './core/Dropdown';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { InlineCode } from './core/InlineCode';
 

apps/yaak-client/components/EnvironmentActionsDropdown.tsx

@@ -8,7 +8,7 @@ import type { ButtonProps } from './core/Button';
 import { Button } from './core/Button';
 import type { DropdownItem } from './core/Dropdown';
 import { Dropdown } from './core/Dropdown';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { EnvironmentColorIndicator } from './EnvironmentColorIndicator';
 
 type Props = {

apps/yaak-client/components/EnvironmentEditDialog.tsx

@@ -15,7 +15,7 @@ import { resolvedModelName } from '../lib/resolvedModelName';
 import { showColorPicker } from '../lib/showColorPicker';
 import { Banner } from './core/Banner';
 import type { ContextMenuProps, DropdownItem } from './core/Dropdown';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { IconTooltip } from './core/IconTooltip';
 import { InlineCode } from './core/InlineCode';

apps/yaak-client/components/FolderLayout.tsx

@@ -15,9 +15,8 @@ import { Button } from './core/Button';
 import { Heading } from './core/Heading';
 import { HttpResponseDurationTag } from './core/HttpResponseDurationTag';
 import { HttpStatusTag } from './core/HttpStatusTag';
-import { Icon } from './core/Icon';
+import { Icon, LoadingIcon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
-import { LoadingIcon } from './core/LoadingIcon';
 import { Separator } from './core/Separator';
 import { SizeTag } from './core/SizeTag';
 import { HStack } from './core/Stacks';

apps/yaak-client/components/FolderSettingsDialog.tsx

@@ -15,7 +15,7 @@ import { hideDialog } from '../lib/dialog';
 import { CopyIconButton } from './CopyIconButton';
 import { Button } from './core/Button';
 import { CountBadge } from './core/CountBadge';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { InlineCode } from './core/InlineCode';
 import { Input } from './core/Input';
 import { Link } from './core/Link';

apps/yaak-client/components/GrpcProtoSelectionDialog.tsx

@@ -6,7 +6,7 @@ import { useGrpcProtoFiles } from '../hooks/useGrpcProtoFiles';
 import { pluralizeCount } from '../lib/pluralize';
 import { Banner } from './core/Banner';
 import { Button } from './core/Button';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { InlineCode } from './core/InlineCode';
 import { Link } from './core/Link';

apps/yaak-client/components/GrpcRequestPane.tsx

@@ -11,7 +11,7 @@ import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
 import { resolvedModelName } from '../lib/resolvedModelName';
 import { Button } from './core/Button';
 import { CountBadge } from './core/CountBadge';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { PlainInput } from './core/PlainInput';
 import { RadioDropdown } from './core/RadioDropdown';

apps/yaak-client/components/GrpcResponsePane.tsx

@@ -14,9 +14,8 @@ import { Editor } from './core/Editor/LazyEditor';
 import { EventDetailHeader, EventViewer } from './core/EventViewer';
 import { EventViewerRow } from './core/EventViewerRow';
 import { HotkeyList } from './core/HotkeyList';
-import { Icon, type IconProps } from './core/Icon';
+import { Icon, LoadingIcon, type IconProps } from '@yaakapp-internal/ui';
 import { KeyValueRow, KeyValueRows } from './core/KeyValueRow';
-import { LoadingIcon } from './core/LoadingIcon';
 import { HStack, VStack } from './core/Stacks';
 import { EmptyStateText } from './EmptyStateText';
 import { ErrorBoundary } from './ErrorBoundary';

apps/yaak-client/components/HttpAuthenticationEditor.tsx

@@ -14,7 +14,7 @@ import { useInheritedAuthentication } from '../hooks/useInheritedAuthentication'
 import { useRenderTemplate } from '../hooks/useRenderTemplate';
 import { resolvedModelName } from '../lib/resolvedModelName';
 import { Dropdown, type DropdownItem } from './core/Dropdown';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { InlineCode } from './core/InlineCode';
 import { Input, type InputProps } from './core/Input';

apps/yaak-client/components/HttpResponsePane.tsx

@@ -18,8 +18,7 @@ import { CountBadge } from './core/CountBadge';
 import { HotkeyList } from './core/HotkeyList';
 import { HttpResponseDurationTag } from './core/HttpResponseDurationTag';
 import { HttpStatusTag } from './core/HttpStatusTag';
-import { Icon } from './core/Icon';
-import { LoadingIcon } from './core/LoadingIcon';
+import { Icon, LoadingIcon } from '@yaakapp-internal/ui';
 import { PillButton } from './core/PillButton';
 import { SizeTag } from './core/SizeTag';
 import { HStack, VStack } from './core/Stacks';

apps/yaak-client/components/HttpResponseTimeline.tsx

@@ -9,7 +9,7 @@ import { Editor } from './core/Editor/LazyEditor';
 import { type EventDetailAction, EventDetailHeader, EventViewer } from './core/EventViewer';
 import { EventViewerRow } from './core/EventViewerRow';
 import { HttpStatusTagRaw } from './core/HttpStatusTag';
-import { Icon, type IconProps } from './core/Icon';
+import { Icon, type IconProps } from '@yaakapp-internal/ui';
 import { KeyValueRow, KeyValueRows } from './core/KeyValueRow';
 import type { TimelineViewMode } from './HttpResponsePane';
 

apps/yaak-client/components/ImportCurlButton.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { useImportCurl } from '../hooks/useImportCurl';
 import { useWindowFocus } from '../hooks/useWindowFocus';
 import { Button } from './core/Button';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 
 export function ImportCurlButton() {
   const focused = useWindowFocus();

apps/yaak-client/components/LicenseBadge.tsx

@@ -12,7 +12,7 @@ import { jotaiStore } from '../lib/jotai';
 import { CargoFeature } from './CargoFeature';
 import type { ButtonProps } from './core/Button';
 import { Dropdown, type DropdownItem } from './core/Dropdown';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { PillButton } from './core/PillButton';
 
 const dismissedAtom = atomWithKVStorage<string | null>('dismissed_license_expired', null);

apps/yaak-client/components/RecentGrpcConnectionsDropdown.tsx

@@ -4,7 +4,7 @@ import { formatDistanceToNowStrict } from 'date-fns';
 import { useDeleteGrpcConnections } from '../hooks/useDeleteGrpcConnections';
 import { pluralizeCount } from '../lib/pluralize';
 import { Dropdown } from './core/Dropdown';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { HStack } from './core/Stacks';
 

apps/yaak-client/components/RecentHttpResponsesDropdown.tsx

@@ -6,7 +6,7 @@ import { useSaveResponse } from '../hooks/useSaveResponse';
 import { pluralize } from '../lib/pluralize';
 import { Dropdown } from './core/Dropdown';
 import { HttpStatusTag } from './core/HttpStatusTag';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { HStack } from './core/Stacks';
 

apps/yaak-client/components/RecentWebsocketConnectionsDropdown.tsx

@@ -4,7 +4,7 @@ import { formatDistanceToNowStrict } from 'date-fns';
 import { deleteWebsocketConnections } from '../commands/deleteWebsocketConnections';
 import { pluralizeCount } from '../lib/pluralize';
 import { Dropdown } from './core/Dropdown';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { HStack } from './core/Stacks';
 

apps/yaak-client/components/RequestBodyViewer.tsx

@@ -2,7 +2,7 @@ import type { HttpResponse } from '@yaakapp-internal/models';
 import { lazy, Suspense } from 'react';
 import { useHttpRequestBody } from '../hooks/useHttpRequestBody';
 import { getMimeTypeFromContentType, languageFromContentType } from '../lib/contentType';
-import { LoadingIcon } from './core/LoadingIcon';
+import { LoadingIcon } from '@yaakapp-internal/ui';
 import { EmptyStateText } from './EmptyStateText';
 import { AudioViewer } from './responseViewers/AudioViewer';
 import { CsvViewer } from './responseViewers/CsvViewer';

apps/yaak-client/components/RequestMethodDropdown.tsx

@@ -6,7 +6,7 @@ import { showPrompt } from '../lib/prompt';
 import { Button } from './core/Button';
 import type { DropdownItem } from './core/Dropdown';
 import { HttpMethodTag, HttpMethodTagRaw } from './core/HttpMethodTag';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import type { RadioDropdownItem } from './core/RadioDropdown';
 import { RadioDropdown } from './core/RadioDropdown';
 

apps/yaak-client/components/Settings/Settings.tsx

@@ -9,10 +9,9 @@ import { useKeyPressEvent } from 'react-use';
 import { appInfo } from '../../lib/appInfo';
 import { capitalize } from '../../lib/capitalize';
 import { CountBadge } from '../core/CountBadge';
-import { Icon } from '../core/Icon';
 import { HStack } from '../core/Stacks';
 import { TabContent, type TabItem, Tabs } from '../core/Tabs/Tabs';
-import { HeaderSize } from '@yaakapp-internal/ui';
+import { HeaderSize, Icon } from '@yaakapp-internal/ui';
 import { SettingsCertificates } from './SettingsCertificates';
 import { SettingsGeneral } from './SettingsGeneral';
 import { SettingsHotkeys } from './SettingsHotkeys';

apps/yaak-client/components/Settings/SettingsHotkeys.tsx

@@ -18,7 +18,7 @@ import { Button } from '../core/Button';
 import { Dropdown, type DropdownItem } from '../core/Dropdown';
 import { Heading } from '../core/Heading';
 import { HotkeyRaw } from '../core/Hotkey';
-import { Icon } from '../core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from '../core/IconButton';
 import { PlainInput } from '../core/PlainInput';
 import { HStack, VStack } from '../core/Stacks';

apps/yaak-client/components/Settings/SettingsInterface.tsx

@@ -14,7 +14,7 @@ import { CargoFeature } from '../CargoFeature';
 import { Button } from '../core/Button';
 import { Checkbox } from '../core/Checkbox';
 import { Heading } from '../core/Heading';
-import { Icon } from '../core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { Link } from '../core/Link';
 import { Select } from '../core/Select';
 import { HStack, VStack } from '../core/Stacks';

apps/yaak-client/components/Settings/SettingsLicense.tsx

@@ -8,7 +8,7 @@ import { pluralizeCount } from '../../lib/pluralize';
 import { CargoFeature } from '../CargoFeature';
 import { Banner } from '../core/Banner';
 import { Button } from '../core/Button';
-import { Icon } from '../core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { Link } from '../core/Link';
 import { PlainInput } from '../core/PlainInput';
 import { Separator } from '../core/Separator';

apps/yaak-client/components/Settings/SettingsPlugins.tsx

@@ -12,7 +12,7 @@ import {
 import classNames from 'classnames';
 import { useAtomValue } from 'jotai';
 import { useState } from 'react';
-import { useDebouncedValue } from '@yaakapp-internal/ui';
+import { Icon, LoadingIcon, useDebouncedValue } from '@yaakapp-internal/ui';
 import { useInstallPlugin } from '../../hooks/useInstallPlugin';
 import { usePluginInfo } from '../../hooks/usePluginInfo';
 import { usePluginsKey, useRefreshPlugins } from '../../hooks/usePlugins';
@@ -21,11 +21,9 @@ import { minPromiseMillis } from '../../lib/minPromiseMillis';
 import { Button } from '../core/Button';
 import { Checkbox } from '../core/Checkbox';
 import { CountBadge } from '../core/CountBadge';
-import { Icon } from '../core/Icon';
 import { IconButton } from '../core/IconButton';
 import { InlineCode } from '../core/InlineCode';
 import { Link } from '../core/Link';
-import { LoadingIcon } from '../core/LoadingIcon';
 import { PlainInput } from '../core/PlainInput';
 import { HStack } from '../core/Stacks';
 import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '../core/Table';

apps/yaak-client/components/Settings/SettingsTheme.tsx

@@ -6,8 +6,7 @@ import { useResolvedAppearance } from '../../hooks/useResolvedAppearance';
 import { useResolvedTheme } from '../../hooks/useResolvedTheme';
 import type { ButtonProps } from '../core/Button';
 import { Heading } from '../core/Heading';
-import type { IconProps } from '../core/Icon';
-import { Icon } from '../core/Icon';
+import { Icon, type IconProps } from '@yaakapp-internal/ui';
 import { IconButton } from '../core/IconButton';
 import { Link } from '../core/Link';
 import type { SelectProps } from '../core/Select';

apps/yaak-client/components/SettingsDropdown.tsx

@@ -9,7 +9,7 @@ import { showDialog } from '../lib/dialog';
 import { importData } from '../lib/importData';
 import type { DropdownRef } from './core/Dropdown';
 import { Dropdown } from './core/Dropdown';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { KeyboardShortcutsDialog } from './KeyboardShortcutsDialog';
 

apps/yaak-client/components/Sidebar.tsx

@@ -54,12 +54,11 @@ import { filter } from './core/Editor/filter/extension';
 import { evaluate, parseQuery } from './core/Editor/filter/query';
 import { HttpMethodTag } from './core/HttpMethodTag';
 import { HttpStatusTag } from './core/HttpStatusTag';
-import { Icon } from './core/Icon';
+import { Icon, LoadingIcon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { InlineCode } from './core/InlineCode';
 import type { InputHandle } from './core/Input';
 import { Input } from './core/Input';
-import { LoadingIcon } from './core/LoadingIcon';
 import { collapsedFamily, isSelectedFamily, selectedIdsFamily } from './core/tree/atoms';
 import type { TreeNode } from './core/tree/common';
 import type { TreeHandle, TreeProps } from './core/tree/Tree';

apps/yaak-client/components/SwitchWorkspaceDialog.tsx

@@ -5,7 +5,7 @@ import { useState } from 'react';
 import { switchWorkspace } from '../commands/switchWorkspace';
 import { Button } from './core/Button';
 import { Checkbox } from './core/Checkbox';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { InlineCode } from './core/InlineCode';
 import { HStack, VStack } from './core/Stacks';
 

apps/yaak-client/components/TemplateFunctionDialog.tsx

@@ -28,7 +28,7 @@ import { Button } from './core/Button';
 import { collectArgumentValues } from './core/Editor/twig/util';
 import { IconButton } from './core/IconButton';
 import { InlineCode } from './core/InlineCode';
-import { LoadingIcon } from './core/LoadingIcon';
+import { LoadingIcon } from '@yaakapp-internal/ui';
 import { PlainInput } from './core/PlainInput';
 import { HStack } from './core/Stacks';
 import { DYNAMIC_FORM_NULL_ARG, DynamicForm } from './DynamicForm';

apps/yaak-client/components/UrlBar.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import type { FormEvent, ReactNode } from 'react';
 import { memo, useCallback, useRef, useState } from 'react';
 import { useHotKey } from '../hooks/useHotKey';
-import type { IconProps } from './core/Icon';
+import type { IconProps } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import type { InputHandle, InputProps } from './core/Input';
 import { Input } from './core/Input';

apps/yaak-client/components/WebsocketResponsePane.tsx

@@ -16,8 +16,7 @@ import { Editor } from './core/Editor/LazyEditor';
 import { type EventDetailAction, EventDetailHeader, EventViewer } from './core/EventViewer';
 import { EventViewerRow } from './core/EventViewerRow';
 import { HotkeyList } from './core/HotkeyList';
-import { Icon } from './core/Icon';
-import { LoadingIcon } from './core/LoadingIcon';
+import { Icon, LoadingIcon } from '@yaakapp-internal/ui';
 import { HStack, VStack } from './core/Stacks';
 import { WebsocketStatusTag } from './core/WebsocketStatusTag';
 import { EmptyStateText } from './EmptyStateText';

apps/yaak-client/components/WorkspaceActionsDropdown.tsx

@@ -22,7 +22,7 @@ import { CloneGitRepositoryDialog } from './CloneGitRepositoryDialog';
 import type { ButtonProps } from './core/Button';
 import { Button } from './core/Button';
 import type { DropdownItem } from './core/Dropdown';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import type { RadioDropdownItem } from './core/RadioDropdown';
 import { RadioDropdown } from './core/RadioDropdown';
 import { SwitchWorkspaceDialog } from './SwitchWorkspaceDialog';

apps/yaak-client/components/WorkspaceHeader.tsx

@@ -6,7 +6,7 @@ import { useToggleCommandPalette } from '../hooks/useToggleCommandPalette';
 import { workspaceLayoutAtom } from '../lib/atoms';
 import { setupOrConfigureEncryption } from '../lib/setupOrConfigureEncryption';
 import { CookieDropdown } from './CookieDropdown';
-import { Icon } from './core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './core/IconButton';
 import { PillButton } from './core/PillButton';
 import { HStack } from './core/Stacks';

apps/yaak-client/components/core/Button.tsx

@@ -4,8 +4,7 @@ import type { HTMLAttributes, ReactNode } from 'react';
 import { forwardRef, useImperativeHandle, useRef } from 'react';
 import type { HotkeyAction } from '../../hooks/useHotKey';
 import { useFormattedHotkey, useHotKey } from '../../hooks/useHotKey';
-import { Icon } from './Icon';
-import { LoadingIcon } from './LoadingIcon';
+import { Icon, LoadingIcon } from '@yaakapp-internal/ui';
 
 export type ButtonProps = Omit<HTMLAttributes<HTMLButtonElement>, 'color' | 'onChange'> & {
   innerClassName?: string;

apps/yaak-client/components/core/Checkbox.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
-import { Icon } from './Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconTooltip } from './IconTooltip';
 import { HStack } from './Stacks';
 

apps/yaak-client/components/core/ColorPicker.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { useState } from 'react';
 import { HexColorPicker } from 'react-colorful';
 import { useRandomKey } from '../../hooks/useRandomKey';
-import { Icon } from './Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { PlainInput } from './PlainInput';
 
 interface Props {

apps/yaak-client/components/core/Dropdown.tsx

@@ -35,8 +35,7 @@ import { ErrorBoundary } from '../ErrorBoundary';
 import { Overlay } from '../Overlay';
 import { Button } from './Button';
 import { Hotkey } from './Hotkey';
-import { Icon, type IconProps } from './Icon';
-import { LoadingIcon } from './LoadingIcon';
+import { Icon, LoadingIcon, type IconProps } from '@yaakapp-internal/ui';
 import { Separator } from './Separator';
 import { HStack, VStack } from './Stacks';
 

apps/yaak-client/components/core/IconButton.tsx

@@ -4,9 +4,7 @@ import { forwardRef, useCallback } from 'react';
 import { useTimedBoolean } from '../../hooks/useTimedBoolean';
 import type { ButtonProps } from './Button';
 import { Button } from './Button';
-import type { IconProps } from './Icon';
-import { Icon } from './Icon';
-import { LoadingIcon } from './LoadingIcon';
+import { Icon, LoadingIcon, type IconProps } from '@yaakapp-internal/ui';
 
 export type IconButtonProps = IconProps &
   ButtonProps & {

apps/yaak-client/components/core/IconTooltip.tsx

@@ -1,5 +1,4 @@
-import type { IconProps } from './Icon';
-import { Icon } from './Icon';
+import { Icon, type IconProps } from '@yaakapp-internal/ui';
 import type { TooltipProps } from './Tooltip';
 import { Tooltip } from './Tooltip';
 

apps/yaak-client/components/core/Input.tsx

@@ -22,8 +22,7 @@ import type { DropdownItem } from './Dropdown';
 import { Dropdown } from './Dropdown';
 import type { EditorProps } from './Editor/Editor';
 import { Editor } from './Editor/LazyEditor';
-import type { IconProps } from './Icon';
-import { Icon } from './Icon';
+import { Icon, type IconProps } from '@yaakapp-internal/ui';
 import { IconButton } from './IconButton';
 import { IconTooltip } from './IconTooltip';
 import { Label } from './Label';

apps/yaak-client/components/core/JsonAttributeTree.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
 import { useMemo, useState } from 'react';
-import { Icon } from './Icon';
+import { Icon } from '@yaakapp-internal/ui';
 
 interface Props {
   depth?: number;

apps/yaak-client/components/core/Link.tsx

@@ -2,7 +2,7 @@ import { Link as RouterLink } from '@tanstack/react-router';
 import classNames from 'classnames';
 import type { HTMLAttributes } from 'react';
 import { appInfo } from '../../lib/appInfo';
-import { Icon } from './Icon';
+import { Icon } from '@yaakapp-internal/ui';
 
 interface Props extends HTMLAttributes<HTMLAnchorElement> {
   href: string;

apps/yaak-client/components/core/PairEditor.tsx

@@ -28,7 +28,7 @@ import { Dropdown } from './Dropdown';
 import type { EditorProps } from './Editor/Editor';
 import type { GenericCompletionConfig } from './Editor/genericCompletion';
 import { Editor } from './Editor/LazyEditor';
-import { Icon } from './Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconButton } from './IconButton';
 import type { InputHandle, InputProps } from './Input';
 import { Input } from './Input';

apps/yaak-client/components/core/RadioDropdown.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import { useMemo } from 'react';
 import type { DropdownItem, DropdownItemSeparator, DropdownProps } from './Dropdown';
 import { Dropdown } from './Dropdown';
-import { Icon } from './Icon';
+import { Icon } from '@yaakapp-internal/ui';
 
 export type RadioDropdownItem<T = string | null> =
   | {

apps/yaak-client/components/core/SegmentedControl.tsx

@@ -3,7 +3,7 @@ import { type ReactNode, useRef } from 'react';
 import { useStateWithDeps } from '../../hooks/useStateWithDeps';
 import { generateId } from '../../lib/generateId';
 import { Button } from './Button';
-import type { IconProps } from './Icon';
+import type { IconProps } from '@yaakapp-internal/ui';
 import { IconButton, type IconButtonProps } from './IconButton';
 import { Label } from './Label';
 import { HStack } from './Stacks';

apps/yaak-client/components/core/Tabs/Tabs.tsx

@@ -27,7 +27,7 @@ import { DropMarker } from '../../DropMarker';
 import { ErrorBoundary } from '../../ErrorBoundary';
 import type { ButtonProps } from '../Button';
 import { Button } from '../Button';
-import { Icon } from '../Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import type { RadioDropdownProps } from '../RadioDropdown';
 import { RadioDropdown } from '../RadioDropdown';
 

apps/yaak-client/components/core/Toast.tsx

@@ -4,8 +4,7 @@ import * as m from 'motion/react-m';
 import type { ReactNode } from 'react';
 
 import { useKey } from 'react-use';
-import type { IconProps } from './Icon';
-import { Icon } from './Icon';
+import { Icon, type IconProps } from '@yaakapp-internal/ui';
 import { IconButton } from './IconButton';
 import { VStack } from './Stacks';
 

apps/yaak-client/components/core/tree/TreeItem.tsx

@@ -14,7 +14,7 @@ import { computeSideForDragMove } from '../../../lib/dnd';
 import { jotaiStore } from '../../../lib/jotai';
 import type { ContextMenuProps, DropdownItem } from '../Dropdown';
 import { ContextMenu } from '../Dropdown';
-import { Icon } from '../Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { collapsedFamily, isCollapsedFamily, isLastFocusedFamily, isSelectedFamily } from './atoms';
 import type { TreeNode } from './common';
 import { getNodeKey } from './common';

apps/yaak-client/components/git/GitCommitDialog.tsx

@@ -20,7 +20,7 @@ import { Button } from '../core/Button';
 import type { CheckboxProps } from '../core/Checkbox';
 import { Checkbox } from '../core/Checkbox';
 import { DiffViewer } from '../core/Editor/DiffViewer';
-import { Icon } from '../core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { InlineCode } from '../core/InlineCode';
 import { Input } from '../core/Input';
 import { Separator } from '../core/Separator';

apps/yaak-client/components/git/GitDropdown.tsx

@@ -16,7 +16,7 @@ import { showErrorToast, showToast } from '../../lib/toast';
 import { Banner } from '../core/Banner';
 import type { DropdownItem } from '../core/Dropdown';
 import { Dropdown } from '../core/Dropdown';
-import { Icon } from '../core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { InlineCode } from '../core/InlineCode';
 import { gitCallbacks } from './callbacks';
 import { GitCommitDialog } from './GitCommitDialog';

apps/yaak-client/components/graphql/GraphQLDocsExplorer.tsx

@@ -25,12 +25,11 @@ import type { CSSProperties, HTMLAttributes, KeyboardEvent, ReactNode } from 're
 import { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useClickOutside } from '../../hooks/useClickOutside';
 import { useContainerSize } from '../../hooks/useContainerQuery';
-import { useDebouncedValue } from '@yaakapp-internal/ui';
+import { Icon, useDebouncedValue } from '@yaakapp-internal/ui';
 import { useStateWithDeps } from '../../hooks/useStateWithDeps';
 import { jotaiStore } from '../../lib/jotai';
 import { Banner } from '../core/Banner';
 import { CountBadge } from '../core/CountBadge';
-import { Icon } from '../core/Icon';
 import { IconButton } from '../core/IconButton';
 import { PlainInput } from '../core/PlainInput';
 import { Markdown } from '../Markdown';

apps/yaak-client/components/graphql/GraphQLEditor.tsx

@@ -14,7 +14,7 @@ import { Dropdown } from '../core/Dropdown';
 import type { EditorProps } from '../core/Editor/Editor';
 import { Editor } from '../core/Editor/LazyEditor';
 import { FormattedError } from '../core/FormattedError';
-import { Icon } from '../core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { Separator } from '../core/Separator';
 import { showGraphQLDocExplorerAtom } from './graphqlAtoms';
 

apps/yaak-client/components/responseViewers/BinaryViewer.tsx

@@ -4,7 +4,7 @@ import { getContentTypeFromHeaders } from '../../lib/model_util';
 import { Banner } from '../core/Banner';
 import { Button } from '../core/Button';
 import { InlineCode } from '../core/InlineCode';
-import { LoadingIcon } from '../core/LoadingIcon';
+import { LoadingIcon } from '@yaakapp-internal/ui';
 import { EmptyStateText } from '../EmptyStateText';
 
 interface Props {

apps/yaak-client/components/responseViewers/EventStreamViewer.tsx

@@ -10,7 +10,7 @@ import type { EditorProps } from '../core/Editor/Editor';
 import { Editor } from '../core/Editor/LazyEditor';
 import { EventDetailHeader, EventViewer } from '../core/EventViewer';
 import { EventViewerRow } from '../core/EventViewerRow';
-import { Icon } from '../core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { InlineCode } from '../core/InlineCode';
 import { HStack, VStack } from '../core/Stacks';
 

apps/yaak-client/components/responseViewers/MultipartViewer.tsx

@@ -2,8 +2,7 @@ import { type MultipartPart, parseMultipart } from '@mjackson/multipart-parser';
 import { lazy, Suspense, useMemo } from 'react';
 import { languageFromContentType } from '../../lib/contentType';
 import { Banner } from '../core/Banner';
-import { Icon } from '../core/Icon';
-import { LoadingIcon } from '../core/LoadingIcon';
+import { Icon, LoadingIcon } from '@yaakapp-internal/ui';
 import { TabContent, Tabs } from '../core/Tabs/Tabs';
 import { AudioViewer } from './AudioViewer';
 import { CsvViewer } from './CsvViewer';

apps/yaak-client/hooks/useAuthTab.tsx

@@ -3,7 +3,7 @@ import { modelTypeLabel, patchModel } from '@yaakapp-internal/models';
 import { useMemo } from 'react';
 import { openFolderSettings } from '../commands/openFolderSettings';
 import { openWorkspaceSettings } from '../commands/openWorkspaceSettings';
-import { Icon } from '../components/core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { IconTooltip } from '../components/core/IconTooltip';
 import { InlineCode } from '../components/core/InlineCode';
 import { HStack } from '../components/core/Stacks';

apps/yaak-client/hooks/useCreateDropdownItems.tsx

@@ -4,7 +4,7 @@ import { useAtomValue } from 'jotai';
 import { useMemo } from 'react';
 import { createFolder } from '../commands/commands';
 import type { DropdownItem } from '../components/core/Dropdown';
-import { Icon } from '../components/core/Icon';
+import { Icon } from '@yaakapp-internal/ui';
 import { createRequestAndNavigate } from '../lib/createRequestAndNavigate';
 import { generateId } from '../lib/generateId';
 import { BODY_TYPE_GRAPHQL } from '../lib/model_util';

apps/yaak-client/lib/initGlobalListeners.tsx

@@ -17,7 +17,7 @@ import type {
 import { openSettings } from "../commands/openSettings";
 import { Button } from "../components/core/Button";
 import { ButtonInfiniteLoading } from "../components/core/ButtonInfiniteLoading";
-import { Icon } from "../components/core/Icon";
+import { Icon } from "@yaakapp-internal/ui";
 import { HStack, VStack } from "../components/core/Stacks";
 
 // Listen for toasts

packages/ui/src/components/Button.tsx

@@ -1,16 +1,6 @@
+import type { Color } from "@yaakapp-internal/plugins";
 import type { HTMLAttributes, ReactNode } from "react";
 
-type ButtonColor =
-  | "default"
-  | "custom"
-  | "primary"
-  | "secondary"
-  | "info"
-  | "success"
-  | "notice"
-  | "warning"
-  | "danger";
-
 type ButtonVariant = "border" | "solid";
 type ButtonSize = "2xs" | "xs" | "sm" | "md" | "auto";
 
@@ -19,8 +9,8 @@ export type ButtonProps = Omit<
   "color" | "onChange"
 > & {
   innerClassName?: string;
-  color?: ButtonColor;
-  tone?: Exclude<ButtonColor, "custom">;
+  color?: Color | "custom" | "default";
+  tone?: Color | "default";
   variant?: ButtonVariant;
   isLoading?: boolean;
   size?: ButtonSize;

packages/ui/src/index.ts

@@ -1,6 +1,9 @@
 export { Button } from "./components/Button";
 export type { ButtonProps } from "./components/Button";
 export { HeaderSize } from "./components/HeaderSize";
+export { Icon } from "./components/Icon";
+export type { IconProps } from "./components/Icon";
+export { LoadingIcon } from "./components/LoadingIcon";
 export { WindowControls } from "./components/WindowControls";
 export { useIsFullscreen } from "./hooks/useIsFullscreen";
 export { useDebouncedValue } from "./hooks/useDebouncedValue";